/*
 * Base - reset partiel + elements HTML.
 *
 * On NE fait pas un reset complet type normalize. On ajuste juste les defaults
 * qui nous genent et on pose les elements HTML de base.
 */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-family: var(--font-sans);
    font-size: 100%;
    line-height: var(--lh-normal);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    letter-spacing: var(--tracking-normal);
    min-height: 100vh;
    /* overflow-x: hidden : neutralise les debordements horizontaux des blocs
       full-bleed type .mam-block--gallery qui utilisent width: 100vw +
       margin-inline: calc(50% - 50vw). Sur les viewports avec scrollbar
       visible, 100vw inclut la scrollbar -> debordement de ~5px.
       Audit visuel 2026-05 (H7). */
    overflow-x: hidden;
    transition: background-color var(--dur-reveal) var(--ease-editorial),
                color var(--dur-reveal) var(--ease-editorial);
}

/* OpenType feature 'case' (Case-Sensitive Forms) sur tous les elements
   transformes en MAJUSCULES (kickers, badges, footer headings). Cette
   feature ajuste la hauteur des diacritiques (À, É, Ç) et la position
   de la ponctuation pour qu'ils s'alignent correctement avec les
   capitales. Sans cette feature, l'accent du À reste a la hauteur des
   minuscules et apparait visuellement decale du A (notamment avec
   letter-spacing eleve). Audit visuel 2026-05 (footer 'À propos'). */
[style*="text-transform: uppercase"],
[style*="text-transform:uppercase"],
h6,
.mam-kicker,
.mam-card__cta,
.mam-footer__heading,
.mam-tpl__kicker,
.mam-block__num,
.mam-search-section__kicker {
    font-feature-settings: "case" on;
}

/* Texture grain sur ambiance sombre (retire car mix-blend-mode: overlay
   fullscreen fixed etait le plus gros contributeur au lag en Retina 120Hz -
   le compositeur blendait chaque frame sur toute la viewport). */

/* Typo defauts des elements */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--sp-4);
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-snug);
}

h1 { font-size: var(--fs-4xl); font-weight: var(--fw-light); letter-spacing: -0.045em; line-height: 0.92; }
h2 { font-size: var(--fs-3xl); line-height: 0.96; }
h3 { font-size: var(--fs-2xl); font-weight: var(--fw-medium); line-height: 1.05; }
h4 { font-size: var(--fs-xl); font-weight: var(--fw-medium); }
h5 { font-size: var(--fs-lg); font-weight: var(--fw-medium); }
h6 { font-size: var(--fs-md); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-kicker); }

p {
    margin: 0 0 var(--sp-4);
}

ul, ol {
    margin: 0 0 var(--sp-4);
    padding-inline-start: 1.25em;
}

a {
    color: inherit;
    text-decoration: none;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    transition: color var(--dur-hover) var(--ease-editorial),
                opacity var(--dur-hover) var(--ease-editorial);
}

a:hover {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
}

/* Les boutons et liens de nav/footer ne doivent pas heriter du underline global */
a.mam-btn:hover,
a[class*="mam-btn"]:hover,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button.mam-btn > .wp-block-button__link:hover,
.mam-nav__cta:hover,
.mam-nav__list a:hover,
.mam-drawer__list a:hover,
.mam-drawer__group a:hover,
.mam-panel a:hover,
.mam-footer a:hover,
.mam-faq-item a:hover,
.mam-card a:hover,
.mam-zone-card:hover,
.mam-topbar__link:hover,
.mam-topbar__client:hover {
    text-decoration: none;
}

/* Liens INLINE dans le contenu editorial : reponses FAQ (ou vit le maillage
   interne SEO), prose institutionnelle, free-content. Le defaut global
   (a { color: inherit; text-decoration: none }) les rendait indistinguables
   du texte tant qu'on ne survolait pas. Ici : VISIBLES au repos (couleur accent
   + soulignement fin), avec un renforcement anime du soulignement au survol. */
.mam-faq__body a,
.mam-prose a,
.mam-free-content a,
.mam-rte a {
    color: var(--color-accent);
    text-decoration: none;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--dur-hover) var(--ease-editorial),
                text-decoration-color var(--dur-hover) var(--ease-editorial);
}
/* Repos = couleur accent seule (visible sans surcharge). Survol / focus clavier
   = soulignement (affordance + accessibilite). */
.mam-faq__body a:hover,
.mam-prose a:hover,
.mam-free-content a:hover,
.mam-faq__body a:focus-visible,
.mam-prose a:focus-visible,
.mam-free-content a:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

img, video, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

figure { margin: 0; }

hr {
    border: none;
    height: 1px;
    background: var(--color-hairline);
    margin: var(--sp-7) 0;
}

button {
    font: inherit;
    cursor: pointer;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
}

input, textarea, select {
    font: inherit;
    color: inherit;
}

/* Selection */
::selection {
    background: var(--color-accent);
    color: var(--c-paper);
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--color-hairline);
    border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* Focus visible global */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 0;
}

/* Composants interactifs qui ont deja un etat visuel au hover : on remplace
   l'outline focus par le meme etat (border ou underline en fuchsia), pour
   eviter le double trait (outline + border) sans perdre l'indication a11y
   du focus clavier. */
.mam-panel-feature:focus-visible,
.mam-zone-card:focus-visible,
.mam-card:focus-visible {
    outline: none;
    border-color: var(--color-accent);
}

.mam-btn--ghost:focus-visible {
    outline: none;
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

/* Skip link a11y - invisible sauf au focus clavier (Tab).
   Pattern "visually-hidden until focus" recommande par WCAG. */
.mam-skiplink {
    position: absolute;
    top: 0;
    left: 0;
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-ink);
    color: var(--c-paper);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    z-index: var(--z-skiplink);
    transform: translateY(-120%);
    transition: transform var(--dur-hover) var(--ease-editorial);
    white-space: nowrap;
}

.mam-skiplink:focus,
.mam-skiplink:focus-visible {
    transform: translateY(var(--sp-4));
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Utilitaires */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}