/* base.css - Shared variables and global layout for the site */

/* ==========================================================================
   TYPOGRAPHIE

   Le site n'embarquait AUCUNE police : tout etait en system-ui, c'est-a-dire
   Segoe UI sur Windows, San Francisco sur Mac, Roboto sur Android. Un site
   rendu par la police du systeme ne ressemble a rien de particulier, et c'est
   le signal le plus immediat d'un site qu'on n'a pas dessine.

   Deux familles, deux roles :
   - Archivo pour les titres. Grotesque a capitales larges et fermes, dessinee
     pour l'affichage : elle tient le grand corps et les capitales que le site
     utilise deja sur h1 et h2, la ou une police d'interface s'affadit.
   - Inter pour le texte. Dessinee pour l'ecran, avec des chiffres tabulaires
     et une hauteur d'x genereuse : c'est ce qui rend un paragraphe lisible a
     16px sans le grossir.

   Fontes VARIABLES : un seul fichier par famille couvre toutes les graisses de
   400 a 800, la ou il aurait fallu quatre fichiers statiques. 81 Ko pour les
   deux, sous-ensemble latin uniquement -- il couvre l'integralite du francais,
   accents et ligature oe comprises (verifie sur la plage unicode ci-dessous).

   Hebergees sur le site, jamais appelees chez Google : la CSP declare
   font-src 'self', et un appel exterieur serait de toute facon bloque. C'est
   aussi ce qui evite d'exposer l'adresse IP des visiteurs a un tiers.

   font-display: swap -- le texte s'affiche immediatement avec la police
   systeme puis bascule. L'inverse (le texte invisible en attendant la fonte)
   est la faute classique qui fait clignoter une page entiere.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600 800;   /* plage variable, pas une graisse unique */
  font-display: swap;
  src: url('/fonts/Archivo-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/Inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Ce qu'une transition a le droit d'animer.
       `transition: all` etait utilise a 27 endroits. Or `all` anime AUSSI la
       largeur, la hauteur, les marges et la position : chaque survol
       declenchait donc un recalcul de mise en page la ou une simple
       recomposition suffisait. Cette liste ne garde que des proprietes sans
       effet sur la mise en page, que le compositeur traite seul.
       Declaree ICI seulement, et referencee partout : 27 copies d'une meme
       liste auraient fini par diverger. */
    --anim-proprietes: transform, opacity, background-color, border-color, box-shadow, color, filter;

    /* Les emoji restent en fin de pile : ils ne sont dans aucune des deux
       fontes, et sans ce repli les quelques emoji conserves dans le contenu
       s'afficheraient en carre vide. */
    --police-titre: 'Archivo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --police-texte: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif,
                    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    --bg: #151515;
    --muted: #8e8e8e;
    --text: #ffffff;
    --nav-bg: rgba(59, 59, 59, 0.3);
    --nav-blur: 3px;
    --gap: 24px;
    --nav-height: 80px;
    --container-max: 1100px;

    /* ---- Largeur du site ----
       Les 21 conteneurs de la page etaient bloques a 1200px en dur, dans 11
       feuilles differentes. Sur un ecran de 1920 ou 2560px, le site occupait
       une colonne au milieu avec de larges bandes vides de chaque cote.
       Ils pointent tous ici desormais : la largeur se regle sur cette
       SEULE ligne (le repli 1200px reste ecrit a chaque usage, pour que la
       mise en page retombe sur son ancien comportement si la variable venait
       a disparaitre, plutot que de s'etaler sans limite).

       Pourquoi c'est sans danger pour la lecture : les blocs de texte ne
       suivent PAS cette largeur, ils sont deja bornes a --container-text
       (68ch) a onze endroits. Ce sont les grilles, les photos et les cartes
       qui s'etalent, c'est-a-dire exactement ce qui gagne a etre plus grand.

       En dessous de 1200px il n'y a rien a faire : l'ecran est deja plus
       etroit que la contrainte, donc les tablettes et les mobiles occupaient
       deja toute la largeur disponible. */
    --largeur-site: 1200px;

    /* ---- Echelles de design ----
       Le site utilisait 16 valeurs d'espacement, 45 tailles de police et
       13 rayons differents, sans progression. Ces echelles remplacent
       progressivement ces valeurs au fil des composants retravailles. */

    /* Espacement : progression reguliere, base 4px */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;   /* separation entre grandes zones : heros, contenu, CTA, pied */

    /* Typographie : ratio 1.25, corps a 16px minimum pour la lisibilite */
    --text-xs: 13px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 20px;
    --text-xl: 25px;
    --text-2xl: 31px;
    --text-3xl: 39px;
    --text-4xl: 49px;
    --text-5xl: 61px;

    /* Bride la longueur de ligne independamment de la largeur du conteneur.
       52ch et non 68ch : l'unite ch vaut la largeur du CHIFFRE ZERO, qui est
       nettement plus large qu'un signe moyen de texte francais. Mesure faite
       en place sur un vrai paragraphe du site, en Inter 16px : le zero fait
       10.09px, le signe moyen 7.31px. 68ch donnait donc 686px, soit 94 signes
       par ligne -- bien au-dela de la plage confortable de 45 a 75 signes, et
       ce depuis toujours : la valeur etait deja mal calibree avant l'arrivee
       d'Inter, qui n'a fait qu'aggraver l'ecart de 17 %.
       52ch ramene la ligne a 72 signes. Ne pas raisonner en "ch = signe". */
    --container-text: 52ch;

    /* Rayons : aretes vives facon carenage, au lieu de 6/12/20px.
       Repli prevu si l'arete est jugee trop dure : remettre --radius-sm a 6px
       suffit, le reste du systeme reste valide sans recalcul. */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-pill: 999px;

    /* Ergonomie : taille minimale d'une cible tactile (WCAG 2.5.5) */
    --tap-min: 44px;
}
/* ---- Le site occupe l'ecran a partir de 1200px ----
   Une gouttiere de 40px de chaque cote, et rien de plus : au-dela de cette
   largeur, chaque pixel supplementaire de l'ecran devient un pixel de site.
   Le plafond a 2400px n'est pas une frilosite mais une limite physique : le
   plus grand bandeau photo mesure 1600px de large, au-dela il serait agrandi
   par interpolation et deviendrait flou. */
@media (min-width: 1200px) {
  :root { --largeur-site: min(calc(100% - 40px), 2400px); }
}


/* ---- Controles de formulaire ----
   Aucune regle du site ne ciblait input/textarea/select : ils heritaient donc
   du defaut navigateur, 13.33px. Sous 16px, Safari iOS zoome automatiquement
   sur le champ des qu'on le touche, ce qui decale la mise en page a chaque
   saisie. La police est aussi alignee sur celle du site, que ces elements
   n'heritent pas non plus par defaut. */
input,
textarea,
select {
    font-family: inherit;
    font-size: var(--text-base, 16px);
}

/* Cible tactile minimale sur les champs reellement saisissables */
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    min-height: var(--tap-min, 44px);
}

/* Skip to content link for accessibility */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 10px;
    z-index: 10000;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min, 44px);
    padding: 10px 20px;
    background: var(--accent, #ffd700);
    color: #000;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 700;
    transition: top 0.3s ease;
}

.skip-to-content:focus {
    top: 10px;
}

/* L'encre du lien d'evitement doit tenir DANS SON SEUL ETAT VISIBLE.
   =========================================================================
   Ce lien est cache a -100px et ne descend que lorsqu'il recoit le focus :
   l'etat focus est le seul ou un visiteur le voit. Or theme.css pose
   `a:hover, a:focus { color: var(--text-primary) }`, de specificite (0,1,1),
   qui l'emportait sur `.skip-to-content` (0,1,0). Son texte passait donc en
   BLANC sur son fond lime au moment precis ou il s'affiche, soit 2.02:1 quand
   la regle en demande 4.5 pour du 16px gras.

   Le comble : c'est le seul composant du site qui n'existe QUE pour la
   navigation au clavier. Il etait illisible pour les seules personnes a qui
   il s'adresse.

   `a.skip-to-content:focus` vaut (0,2,1) et passe donc devant. Les quatre
   etats sont listes ensemble parce que le defaut vient justement d'un etat
   qui changeait de gagnant : les figer tous evite qu'un futur `a:active` ou
   `a:focus-visible` rouvre la meme breche.

   --accent-ink plutot que #000 code en dur : c'est le jeton prevu pour de
   l'encre POSEE SUR un aplat lime, et il suit les deux themes. */
a.skip-to-content,
a.skip-to-content:hover,
a.skip-to-content:focus,
a.skip-to-content:focus-visible,
a.skip-to-content:active {
    color: var(--accent-ink, #000);
}

/* Box sizing + base body */
html { 
    box-sizing: border-box; 
    height: 100%;
    margin: 0;
    padding: 0;
}
*, *::before, *::after { box-sizing: inherit; }
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--police-texte);
    margin: 0;
    padding: 0;
    padding-top: var(--nav-height);
    background-color: var(--bg);
    /* La couleur du corps est definie par theme.css (--text-primary), charge
       apres celle-ci sur toutes les pages. La declarer ici aussi creait un
       conflit silencieux : si un cache sert une seule des deux feuilles a jour,
       le corps prend la mauvaise couleur. Une seule source de verite. */
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
}

img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* Make the main content grow so footer stays at bottom on short pages */
main { 
  flex: 1 0 auto;
  animation: fadeIn 0.8s ease-out !important;
  opacity: 1;
  padding-bottom: 20px;
}

/* Ensure social-bar and footer don't interfere with layout */
.social-bar {
    flex-shrink: 0;
}

footer {
    flex-shrink: 0;
}

.trust-badge {
    margin: 0 auto 10px;
    max-width: 900px;
    width: fit-content;
    color: var(--accent-text);
    background: var(--card-bg-hover);
    border: 1px solid var(--accent-line);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 0.9rem;
    line-height: 1.4;
    display: inline-block;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Page load animation */
@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Layout containers */
section {
    /* Cette regle attrape toute section qui ne declare pas sa propre largeur.
       Elle etait bornee a --container-max (1100px), soit plus etroit encore
       que les conteneurs de page : c'etait la contrainte la plus serree du
       site, et la plus discrete puisqu'elle n'apparait dans aucune feuille de
       page. Elle suit desormais la meme largeur que le reste. */
    max-width: var(--largeur-site, var(--container-max));
    margin: 0 auto 30px;
    padding: 18px 16px;
}

/* Typography */
h1, h2, h3 {
    color: var(--text);
    font-family: var(--police-titre);
    margin: var(--space-4) 0 var(--space-3);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
/* Capitales sur h1 et h2 seulement. La specification les prevoyait aussi sur
   h3, mais h3 porte les questions de la FAQ et les titres de cartes : une
   question entiere en capitales se lit mal. Ecart assume. */
h1, h2 { text-transform: uppercase; }
h1 {
    font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
    font-weight: 800;
    line-height: 0.95;
    text-wrap: balance;
}
h2 {
    font-size: clamp(var(--text-xl), 3.4vw, var(--text-3xl));
    font-weight: 800;
    line-height: 1.05;
}
h3 {
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
}
p {
    /* 16px ferme au lieu de clamp(15px, 1vw, 17px) : la mesure devient stable
       au lieu de flotter avec la fenetre. L'interligne descend de 1.8 a 1.7
       alors que le confort augmente, 15x1.8 = 27px contre 16x1.7 = 27.2px. */
    line-height: 1.7;
    color: var(--text);
    margin: 0 0 var(--space-4);
    max-width: var(--container-text);
    font-size: var(--text-base);
    overflow-wrap: anywhere;
}

/* Utility */
.actual-page { color: var(--accent-text); }

/* Links */
a { 
    text-decoration: none; 
    color: var(--muted); 
    font-weight: 600;
    position: relative;
    transition-property: var(--anim-proprietes);
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

nav a {
    padding: 8px 16px;
    border-radius: 8px;
    transition-property: var(--anim-proprietes);
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

nav a:hover {
    background: var(--card-bg-hover);
    color: var(--text);
    transform: translateY(-2px);
}

nav a.actual-page {
    background: var(--card-bg-hover);
}

/* Navigation common rules */
nav {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(59, 59, 59, 0.4) 0%, rgba(59, 59, 59, 0.2) 100%);
    -webkit-backdrop-filter: blur(8px) saturate(180%);
    backdrop-filter: blur(8px) saturate(180%);
    padding: 8px 16px;
    z-index: 999;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    margin: 0 !important;
}

/* Desktop navigation enhancements */
@media (min-width: 769px) {
    .nav-menu {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .nav-menu li { display: block; }

    .nav-menu a {
        position: relative;
        /* Ces liens tombaient a 43px, un pixel sous le seuil tactile */
        display: inline-flex;
        align-items: center;
        min-height: var(--tap-min);
        padding: 0 var(--space-3);
        border-radius: 12px;
        transition: color 0.2s ease, border-color 0.2s ease;
        border: 1px solid var(--border-color);
        background: transparent;
    }

    .nav-menu a::after {
        content: '';
        position: absolute;
        left: 20%;
        right: 20%;
        bottom: 4px;
        height: 4px;
        background: var(--accent);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.2s ease;
        pointer-events: none;
        border-radius: 999px;
    }

    .nav-menu a:hover { background: transparent; transform: none; border-color: var(--accent-line); }

    .nav-menu a:hover::after { transform: scaleX(1); }

    .nav-menu a.actual-page {
        background: rgba(255,255,255,0.06);
        -webkit-backdrop-filter: blur(8px) saturate(140%);
        backdrop-filter: blur(8px) saturate(140%);
        border-color: var(--accent-line);
        color: var(--accent-text);
        font-weight: 600;
    }

    .nav-menu a.actual-page::after { transform: scaleX(1); }

    .nav-menu a:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--accent-line);
    }
}

@keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Reset de liste. Le `display: flex` centre etait applique a TOUTES les listes
   du site alors qu'il n'a de sens que pour le menu : toute liste de contenu
   devenait une rangee horizontale centree, ou restait centree des qu'une page
   redefinissait seulement son `display`. C'est ce qui laissait les fiches
   techniques des essais flotter au milieu de leur carte pendant que le reste
   de la page etait aligne a gauche. Le comportement flex est desormais reserve
   a la navigation. */
ul { list-style: none; padding: 0; margin: 0; }
nav ul { display: flex; gap: var(--gap); justify-content: center; align-items: center; }
li { display: block; }

/* Page title in navigation (mobile only) */
.nav-page-title {
    display: none;
    color: var(--accent-text);
    font-weight: 600;
    font-size: 18px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* Navigation toggle button (hamburger) */
.nav-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
    position: relative;
    /* Le bouton mesurait 41px de large, sous le seuil tactile */
    min-width: var(--tap-min);
    min-height: var(--tap-min);
}

.nav-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--accent);
    margin: 5px 0;
    transition-property: var(--anim-proprietes);
  transition-duration: 0.3s;
  transition-timing-function: ease;
    border-radius: 2px;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* Mobile navigation styles */
@media (max-width: 768px) {
    nav {
        justify-content: flex-start;
        padding: 8px 16px;
    }
    
    .nav-page-title {
        display: block;
    }
    
    .nav-toggle {
        display: block;
        position: relative;
        margin-right: auto;
        z-index: 1001;
    }
    
    nav ul {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        background: linear-gradient(180deg, rgba(30, 30, 30, 0.98) 0%, rgba(25, 25, 25, 0.98) 100%);
  /* Flou d'arriere-plan RETIRE pour la fluidite du defilement.
     Un backdrop-filter sur un element FIXE rechantillonne et refloute ce
     qui passe dessous a CHAQUE image. Le site en avait huit en permanence
     a l'ecran ; avec une photo plein ecran qui defile derriere, le cout
     devient considerable. Celui de <nav> est conserve : son fond est
     reellement transparent (0.2 a 0.4), le flou s'y voit. Ici le fond est
     deja quasi opaque, le flou ne se voyait pas. */
        flex-direction: column;
        gap: 0;
        padding: 16px 0;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-10px);
        transition-property: var(--anim-proprietes);
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    }
    
    nav ul.active {
        max-height: calc(100vh - var(--nav-height));
        overflow-y: auto;
        opacity: 1;
        transform: translateY(0);
    }
    
    nav ul li {
        width: 100%;
        text-align: center;
        opacity: 0;
        transform: translateX(-20px);
        transition-property: var(--anim-proprietes);
  transition-duration: 0.3s;
  transition-timing-function: ease;
    }
    
    nav ul.active li {
        opacity: 1;
        transform: translateX(0);
    }
    
    nav ul.active li:nth-child(1) { transition-delay: 0.1s; }
    nav ul.active li:nth-child(2) { transition-delay: 0.15s; }
    nav ul.active li:nth-child(3) { transition-delay: 0.2s; }
    nav ul.active li:nth-child(4) { transition-delay: 0.25s; }
    
    nav ul li a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 14px 22px;
        width: auto;
        position: relative;
        margin: 6px auto;
        border-radius: 14px;
        border: 1px solid var(--border-color);
        background: transparent;
        transition: border-color 0.2s ease, color 0.2s ease;
    }

    section {
        padding: 16px 12px;
    }

    /* Mobile underline effect mirroring desktop (elliptical shine) */
    nav ul li a::after {
        content: '';
        position: absolute;
        left: 20%;
        right: 20%;
        bottom: 8px;
        height: 4px;
        background: var(--accent);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.2s ease;
        pointer-events: none;
        border-radius: 999px;
    }

    /* Show underline on active press or keyboard focus */
    nav ul li a:hover { border-color: var(--accent-line); }

    nav ul li a:active::after,
    nav ul li a:focus-visible::after { transform: scaleX(1); }

    /* Keep active page visibly highlighted */
    nav ul li a.actual-page {
        color: var(--accent-text);
        font-weight: 600;
        border-color: var(--accent-line);
        background: rgba(255,255,255,0.06);
        -webkit-backdrop-filter: blur(8px) saturate(140%);
        backdrop-filter: blur(8px) saturate(140%);
    }
    nav ul li a.actual-page::after { transform: scaleX(1); }
}

/* Footer / Last section behavior across pages */
footer { 
    margin-bottom: 0; 
    padding: 2rem 1rem; 
    text-align: center; 
    color: #999; 
    font-size: 14px;
    flex-shrink: 0;
    width: 100%;
}

/* Mobile footer fixes */
@media (max-width: 768px) {
    html {
        height: auto;
        min-height: 100vh;
    }
    
    body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    
    main {
        flex: 1 0 auto;
        width: 100%;
    }
    
    footer {
        flex-shrink: 0;
        width: 100%;
        margin-top: auto;
    }
    
    .social-bar {
        flex-shrink: 0;
    }
}
/* Make this selector more specific so it overrides page-level `section` margins */
body main > section:last-of-type { margin-bottom: 0; }

/* Small screens adjustments */
@media (max-width: 600px) {
    :root { --nav-height: 80px; --gap: 12px; }
    nav { align-items: center; padding: 12px 10px; }
}

/* Disable page load animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    main, nav { animation: none; }
}

/* Social sidebar (fixed, right, vertically centered) */
.social-bar {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1000;
}
.social-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(28, 28, 28, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.1);
  /* Flou d'arriere-plan RETIRE pour la fluidite du defilement.
     Un backdrop-filter sur un element FIXE rechantillonne et refloute ce
     qui passe dessous a CHAQUE image. Le site en avait huit en permanence
     a l'ecran ; avec une photo plein ecran qui defile derriere, le cout
     devient considerable. Celui de <nav> est conserve : son fond est
     reellement transparent (0.2 a 0.4), le flou s'y voit. Ici le fond est
     deja quasi opaque, le flou ne se voyait pas. */
    transition-property: var(--anim-proprietes);
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.social-bar a svg {
    width: 22px;
    height: 22px;
    color: var(--text);
    transition-property: var(--anim-proprietes);
  transition-duration: 0.3s;
  transition-timing-function: ease;
}
.social-bar a:hover {
    background: var(--card-bg-hover);
    border-color: var(--accent-line);
    transform: translateX(-8px) scale(1.15);
}
.social-bar a:hover svg {
    color: var(--accent-text);
    transform: scale(1.1);
}

@media (max-width: 700px) {
    .social-bar { right: 8px; }
    /* 44px minimum : ces icones tombaient a 36px, sous le seuil tactile */
    .social-bar a { width: var(--tap-min); height: var(--tap-min); font-size: 12px; }
}

@media (max-width: 768px) {
    .social-bar {
        position: static;
        top: auto;
        right: auto;
        transform: none;
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 6px 12px 2px;
        margin: 0 auto;
    }

    .social-bar a {
        width: var(--tap-min);
        height: var(--tap-min);
    }

    .social-bar a:hover {
        transform: scale(1.06);
    }
}

/* Scroll to top button */
#scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--card-bg-hover);
    border: 2px solid var(--accent-line);
  /* Flou d'arriere-plan RETIRE pour la fluidite du defilement.
     Un backdrop-filter sur un element FIXE rechantillonne et refloute ce
     qui passe dessous a CHAQUE image. Le site en avait huit en permanence
     a l'ecran ; avec une photo plein ecran qui defile derriere, le cout
     devient considerable. Celui de <nav> est conserve : son fond est
     reellement transparent (0.2 a 0.4), le flou s'y voit. Ici le fond est
     deja quasi opaque, le flou ne se voyait pas. */
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    transition-property: var(--anim-proprietes);
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 998;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* =============================
     Scroll Reveal Global Classes
     ============================= */
.reveal-init {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(0px);
    transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1), filter .6s cubic-bezier(.16,1,.3,1);
    will-change: opacity, transform, filter;
}
.visible {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
/* Generic reveal targets default hidden until JS applies .visible */
[data-scroll-reveal]:not(.visible),
.video-card:not(.visible),
.review-card:not(.visible),
.gallery-item:not(.visible),
.content-card:not(.visible),
.identity-card:not(.visible),
.stat-item:not(.visible) {
    opacity: 0;
    transform: translateY(30px);
}

.sr,
[data-scroll-reveal],
.video-card,
.review-card,
.gallery-item,
.content-card,
.identity-card,
.stat-item {
    transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1), filter .6s cubic-bezier(.16,1,.3,1);
    will-change: opacity, transform, filter;
}

#scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

#scroll-to-top:hover {
    background: var(--card-bg-hover);
    border-color: var(--accent-line);
    transform: translateY(-5px) scale(1.1);
}

#scroll-to-top:active {
    transform: translateY(-2px) scale(1.05);
}

#scroll-to-top svg {
    width: 24px;
    height: 24px;
    color: var(--accent-text);
    transition: transform 0.3s ease;
}

#scroll-to-top:hover svg {
    transform: translateY(-3px);
}

@media (max-width: 768px) {
    #scroll-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
    
    #scroll-to-top svg {
        width: 20px;
        height: 20px;
    }
}

/* =============================
   Accessibility Enhancements
   ============================= */
/* High-visibility focus rings (use focus-visible to avoid showing on mouse click) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid var(--accent-line);
    outline-offset: 3px;
}

/* Ensure nav toggle and custom interactive elements get focus styles */
.nav-toggle:focus-visible,
#scroll-to-top:focus-visible,
#theme-toggle:focus-visible {
    outline: 3px solid var(--accent-line);
    outline-offset: 4px;
}

/* L'appui, pour tout ce qui se clique.
   =========================================================================
   Releve avant ecriture : 172 regles de survol, 43 de focus, 14 d'etat actif.
   Mais le vrai defaut n'etait pas le NOMBRE, il etait de quel cote de la
   barriere ces regles se trouvaient. `button:active`, `nav a:active`,
   `.cta-btn:active` et les cinq cartes n'existaient QUE dans le bloc
   `@media (prefers-reduced-motion: reduce)`, plus bas dans ce fichier :
   seuls les visiteurs ayant demande moins d'animation recevaient un retour
   d'appui, tous les autres n'en avaient aucun. La regle par defaut manquait,
   pas la regle particuliere.

   Ce qu'elle dit, en une ligne, et pourquoi elle suffit :

   - `translate` et NON `transform`. Deux raisons, chacune deja payee ici.
     D'abord scroll-reveal.js ecrit `transform` EN LIGNE sur les sections
     revelees : un `transform` pose en feuille y serait purement ignore, alors
     que `translate` est une propriete independante, qui se compose.
     Ensuite cette composition fait tout le travail : sur un bouton qui se
     leve de 2px au survol, l'appui donne -2 + 1 = -1px, soit une descente de
     3px depuis l'etat survole -- exactement la sensation d'enfoncement. Sur un
     lien qui ne se levait pas, il descend de 1px. UNE regle couvre les deux
     familles, sans avoir a savoir laquelle on vise.

   - Le mouvement seul, sans changement de couleur. theme.css pose que "le
     contraste monte au survol, jamais l'inverse" : assombrir a l'appui irait
     contre cette regle. Le controle ne change donc pas de teinte, il cede.

   `:where()` garde la specificite a zero : n'importe quelle page peut poser
   son propre appui sans avoir a se battre, et les etats actifs deja ecrits
   (.submit-btn, .cta-button, #scroll-to-top...) continuent de l'emporter.
   Sa seconde vertu ici est d'etre une liste TOLERANTE : si un navigateur ne
   connait pas `:has()`, il ecarte ce seul membre au lieu d'invalider toute la
   regle, et l'appui continue de fonctionner partout ailleurs.

   Les `label` ne sont PAS pris en bloc. Releve sur la page contact : quatre
   d'entre eux enveloppent une case a cocher et sont donc de vraies commandes,
   cinq ne sont que des intitules de champ ("Nom *", "Email *"). Faire bouger
   un intitule au clic ne signale rien, cela ressemble a un defaut. Seuls les
   labels qui CONTIENNENT leur controle sont retenus ; pour ceux qui le
   designent par `for`, c'est la case elle-meme qui recoit l'appui, ce qui
   donne le meme retour a l'endroit juste. */
:where(a, button, summary,
       label:has(:is(input[type="checkbox"], input[type="radio"])),
       [role="button"], [role="tab"], [tabindex]:not([tabindex="-1"]),
       input[type="submit"], input[type="button"],
       input[type="checkbox"], input[type="radio"]):active {
    translate: 0 1px;
}

/* Reduced motion: keep essential micro-interactions, tone down decorative */
@media (prefers-reduced-motion: reduce) {
    /* Decorative hover effects disabled */
    .social-bar a:hover,
    nav a:hover,
    #scroll-to-top:hover,
    .cta-btn:hover,
    .video-card:hover,
    .review-card:hover,
    .spec-badge[data-tooltip]:hover::before,
    .spec-badge[data-tooltip]:hover::after,
    .item-badge[data-tooltip]:hover::before,
    .item-badge[data-tooltip]:hover::after {
        transform: none !important;
        box-shadow: none !important;
    }
    /* Utility: elements marked essential keep shortened transitions */
    .anim-essential,
    [data-anim="essential"] {
        transition-duration: 0.15s !important;
        animation-duration: 0.15s !important;
        animation-iteration-count: 1 !important;
    }
}

/* Utility classes to opt-in/out of motion */
.anim-essential { will-change: transform, opacity; }
.anim-decorative { }

/* Final override: ensure interactive elements retain minimal feedback even under reduced motion */
@media (prefers-reduced-motion: reduce) {
    nav a, button, .nav-toggle, #scroll-to-top, #theme-toggle, #cookie-settings-btn,
    #cookie-banner button, .video-card, .review-card, .cta-btn, .spec-badge[data-tooltip],
    .item-badge[data-tooltip], .faq-answer, .gallery-item, .series-item,
    .identity-card, .content-card, .social-card {
        transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease !important;
    }
    nav a:active, button:active, .cta-btn:active { transform: scale(.97) !important; }
}

/* Utility: visually hidden class for screen reader only content */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}