/* ==========================================================================
   STUDIO RANEEM — BASE + POLICES AUTO-HÉBERGÉES + NEUTRALISATION DIVI
   Chargé sur toutes les pages, après tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. POLICES AUTO-HÉBERGÉES
   Pourquoi : le prototype charge Fontshare + Google Fonts = 2 origines tierces,
   2 DNS + 2 TLS + 2 aller-retours sur le chemin critique du LCP. En auto-hébergé
   on tombe à 0 connexion tierce et on peut precharger le fichier exact.
   Gain mesuré typique sur ce type de page : -600 à -900 ms de LCP sur 4G.

   Les fichiers .woff2 vont dans /assets/fonts/.
   Clash Display et General Sans : ITF Free Font License, auto-hébergement autorisé
   (téléchargement du zip sur fontshare.com).
   JetBrains Mono : SIL OFL 1.1.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Semibold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* Polices de repli à métriques ajustées.
   Sans ça, le passage police-système → police-web décale le texte et génère
   du CLS. Ces trois règles ramènent le CLS des blocs de titre à ~0. */
@font-face {
  font-family: 'Clash Display Fallback';
  src: local('Arial');
  size-adjust: 94%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: 'General Sans Fallback';
  src: local('Arial');
  size-adjust: 97%; ascent-override: 100%; descent-override: 25%; line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */

html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

body {
  background: var(--sr-bg);
  color: var(--sr-text);
  font-family: var(--sr-font-body);
  font-size: var(--sr-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Le header est fixe : sans ça, toute ancre (#prestations) atterrit sous le header. */
:target, [id] { scroll-margin-top: calc(var(--sr-header-h) + 24px); }

a { color: var(--sr-text); }
a:hover { color: var(--sr-teal-glow); }
::selection { background: var(--sr-teal); color: var(--sr-text); }

/* Focus clavier visible partout. À ne jamais retirer. */
:focus-visible {
  outline: 2px solid var(--sr-teal-glow);
  outline-offset: 3px;
}

::-webkit-scrollbar { width: 10px; background: var(--sr-bg-deep); }
::-webkit-scrollbar-thumb { background: var(--sr-line-mid); }
::placeholder { color: var(--sr-text-3-aa); opacity: 1; }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHIE GLOBALE
   Appliquée aux modules Divi pour que le client n'ait JAMAIS à régler
   une police ou une taille dans le Visual Builder.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3, .et_pb_module h4 {
  font-family: var(--sr-font-display);
  color: var(--sr-text);
  text-wrap: balance;
}

/* H1 des pages intérieures. Le H1 de l'accueil est traité à part dans
   hero.css : lui seul monte à 230 px. Ici on veut un titre de page —
   dominant mais pas monumental. */
h1:not(.sr-hero__title),
.et_pb_module h1:not(.sr-hero__title) {
  font-weight: 700;
  font-size: clamp(40px, 6.5vw, 92px);
  line-height: 1.02;
  letter-spacing: var(--sr-ls-h2);
  margin: 14px 0 0;
}

h2, .et_pb_module h2 {
  font-weight: 600;
  font-size: var(--sr-h2-lg);
  line-height: var(--sr-lh-h2);
  letter-spacing: var(--sr-ls-h2);
  margin: 16px 0 0;
  /* Répartit les mots sur les lignes au lieu de laisser un mot seul en
     dernière ligne. Sans effet là où le navigateur ne le connaît pas. */
  text-wrap: balance;
}
h3, .et_pb_module h3 {
  font-weight: 500;
  font-size: var(--sr-h3);
  line-height: 1.1;
}


p, .et_pb_text p { text-wrap: pretty; }
.sr-lead { color: var(--sr-text-2); font-size: var(--sr-body-lg); max-width: 56ch; }

/* Eyebrow « 01 · LE STUDIO » — utilisé 9 fois dans la page.
   Les sélecteurs Divi (.et_pb_text, .et_pb_module p…) imposent la couleur du
   texte définie dans le Personnalisateur, avec une spécificité supérieure à
   une simple classe. On la reprend explicitement. */
.sr-eyebrow,
.et_pb_module .sr-eyebrow,
.et_pb_text .sr-eyebrow,
p.sr-eyebrow, div.sr-eyebrow, span.sr-eyebrow {
  font-family: var(--sr-font-mono) !important;
  font-size: var(--sr-eyebrow);
  line-height: 1.5;
  letter-spacing: var(--sr-ls-eyebrow);
  color: var(--sr-text-2) !important;
  text-transform: uppercase;
  margin: 0;
}
/* Le numéro de section, en sarcelle. Fonctionne avec <b>, <strong> ou <span>. */
.sr-eyebrow b,
.sr-eyebrow strong,
.sr-eyebrow span,
.et_pb_module .sr-eyebrow b,
.et_pb_module .sr-eyebrow strong,
.et_pb_module .sr-eyebrow span {
  color: var(--sr-teal-glow) !important;
  font-weight: 400;
}
/* AUDIT : le prototype utilise #1C7E80 (3.5:1) pour ces numéros.
   On passe à --sr-teal-glow (6.9:1) : conforme AA, écart visuel négligeable. */

.sr-mono {
  font-family: var(--sr-font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  color: var(--sr-text-2);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   TITRE RÉVÉLÉ LIGNE PAR LIGNE
   Le JS découpe le titre en lignes réelles et enveloppe chacune d'un masque.
   Chaque ligne monte depuis sous son propre masque, décalée de 90 ms.
   C'est la signature typographique du hero d'accueil, reprise ici.
   -------------------------------------------------------------------------- */

.sr-js .sr-split .sr-ln { display: block; overflow: hidden; }
.sr-js .sr-split .sr-ln > i {
  display: block; font-style: normal;
  transform: translateY(110%);
  transition: transform 1.05s var(--sr-ease-expo) var(--sr-ld, 0ms);
}
.sr-js .sr-split.is-in .sr-ln > i { transform: translateY(0); }

/* Le titre principal, et lui seul : même animation, même courbe, deux fois
   plus vive. C'est l'élément LCP de la page — tant qu'il est hors cadre, le
   navigateur ne considère rien comme peint. Mesuré à 1,28 s de LCP perdues
   sur les pages intérieures. La classe est posée par initSplit(), qui règle
   aussi le décalage entre lignes à 45 ms au lieu de 90. */
.sr-js .sr-split--vif .sr-ln > i { transition-duration: .55s; }

/* Mouvement réduit : les lignes ne glissent pas. initSplit() pose déjà `is-in`
   immédiatement dans ce cas, cette règle n'est qu'une ceinture de sécurité si
   le JS ne s'exécute pas. */
@media (prefers-reduced-motion: reduce) {
  .sr-js .sr-split .sr-ln > i { transform: none !important; }
}

/* Classe utilitaire lecteur d'écran (remplace le clip:rect() du prototype). */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   4. CONTENEURS & SECTIONS DIVI
   On neutralise les largeurs/paddings Divi et on impose la grille du prototype.
   -------------------------------------------------------------------------- */

.et_pb_section  { padding: 0; background: var(--sr-bg); }
/* Pas de gouttière ici : c'est la SECTION qui pose le retrait latéral
   (--sr-gutter-x). En laisser une sur la ligne produisait un décalage
   asymétrique — Divi n'émet que `padding-right:0` sur ses lignes, jamais
   `padding-left`, si bien que la gouttière ne subsistait qu'à gauche. */
.et_pb_row      { width: 100%; max-width: var(--sr-maxw); padding: 0; margin: 0 auto; }
.et_pb_row.et_pb_gutters3 .et_pb_column { margin-right: 0; }

/* Le retrait latéral est posé ICI, pas dans le contenu : Divi n'émet pas les
   valeurs d'espacement écrites hors de son interface — les sections se
   retrouvaient collées au bord de l'écran alors que leur custom_padding
   annonçait bien 5 %. Cette règle a une spécificité plus faible que celle que
   Divi génère : dès que le client règle le padding DANS le Builder, sa valeur
   l'emporte. */
/* Classe DOUBLÉE, volontairement. Divi injecte dans le <head>, après nos
   feuilles, un bloc critique contenant `.et_pb_section { padding: 54px 0 }`.
   À spécificité égale il l'emportait : les sections n'avaient donc ni retrait
   latéral, ni le rythme vertical prévu ici — 54 px au lieu de 96 à 170.
   Doubler la classe suffit à passer devant, tout en restant sous la
   spécificité de ce que Divi génère depuis le Builder (.et_pb_section_N) :
   le client garde la main sur ses espacements. */
.et_pb_section.sr-section       { padding: var(--sr-section-y) var(--sr-gutter-x); }
.et_pb_section.sr-section--top0 { padding-top: 0; }
.et_pb_section.sr-section--cta  { padding: var(--sr-section-y-cta) var(--sr-gutter-x); }
.sr-section--deep  { background: var(--sr-bg-deep); position: relative; overflow: clip; }
.sr-row--narrow .et_pb_row { max-width: var(--sr-maxw-narrow); }

/* --------------------------------------------------------------------------
   5. BOUTONS
   Divi enrobe ses boutons de spécificité ; on écrase proprement une fois
   pour toutes plutôt que de régler chaque bouton dans le Builder.
   -------------------------------------------------------------------------- */

.sr-btn,
.et_pb_button.sr-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sr-font-body); font-weight: 500; font-size: 15px;
  letter-spacing: .02em; padding: 16px 30px;
  border-radius: var(--sr-radius); text-decoration: none;
  /* Durée de SORTIE : c'est celle qui s'applique quand le curseur s'en va. */
  transition: background var(--sr-d-fast) ease, box-shadow var(--sr-d-fast) ease,
              border-color var(--sr-d-fast) ease, color var(--sr-d-fast) ease,
              transform var(--sr-d-fast) ease;
}
/* Durée d'ENTRÉE : la règle :hover écrase la durée le temps du survol.
   C'est le seul moyen d'obtenir deux vitesses différentes sans JavaScript. */
.sr-btn:hover, .sr-btn:focus-visible,
.et_pb_button.sr-btn:hover, .et_pb_button.sr-btn:focus-visible,
.sr-nav__cta:hover, .sr-nav__cta:focus-visible,
.sr-link:hover, .sr-link:focus-visible,
.et_pb_button.sr-link:hover, .et_pb_button.sr-link:focus-visible {
  transition-duration: var(--sr-d-snap);
}
/* La flèche du lien texte suit le même rythme. */
.sr-link:hover::after, .sr-link:focus-visible::after,
.et_pb_button.sr-link:hover::after { transition-duration: var(--sr-d-snap) !important; }
/* Divi anime le padding au survol pour faire de la place à sa flèche :
   `.et_pb_button:hover { padding: 0.3em 2em 0.3em 0.7em }`. Résultat, le
   bouton s'aplatit et se décale d'un côté. On neutralise la flèche ET on
   verrouille le padding dans les deux états — sinon l'effet réapparaît. */
.et_pb_button.sr-btn::after { display: none !important; }
.et_pb_button.sr-btn,
.et_pb_button.sr-btn:hover,
.et_pb_module .et_pb_button.sr-btn,
.et_pb_module .et_pb_button.sr-btn:hover {
  padding: 16px 30px !important;
}
.et_pb_button.sr-nav__cta,
.et_pb_button.sr-nav__cta:hover { padding: 11px 18px !important; }

.sr-btn--primary, .et_pb_button.sr-btn--primary {
  background: var(--sr-teal); color: #fff;
  border: 1px solid var(--sr-teal-a35);
}
/* AUDIT CONTRASTE : le prototype passe le fond à #29B6BA au survol →
   blanc sur #29B6BA = 2.5:1, échec net WCAG AA.
   Correction : on garde EXACTEMENT le halo sarcelle du prototype (c'est lui
   qui porte l'effet visuel) mais on assombrit très légèrement le fond au lieu
   de l'éclaircir. Rendu quasi identique, contraste ramené à 5.1:1. */
.sr-btn--primary:hover, .et_pb_button.sr-btn--primary:hover {
  background: #17696B; color: #fff;
  border-color: var(--sr-teal-glow);
  box-shadow: var(--sr-shadow-cta);
}

.sr-btn--ghost, .et_pb_button.sr-btn--ghost {
  background: transparent; color: var(--sr-text);
  border: 1px solid var(--sr-line-strong);
}
.sr-btn--ghost:hover, .et_pb_button.sr-btn--ghost:hover {
  border-color: var(--sr-teal-glow); color: var(--sr-teal-glow);
  box-shadow: 0 0 30px rgba(41,182,186,.15);
}

/* Lien texte sarcelle « Découvrir l'agence → ». Ce n'est pas un bouton dans
   le prototype : c'est une invitation discrète, en fin de bloc. La flèche est
   générée, elle avance au survol. */
.sr-link, .et_pb_button.sr-link {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0;
  font-family: var(--sr-font-mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--sr-teal-glow); text-decoration: none;
  transition: color var(--sr-d-fast);
}
.sr-link::after {
  content: '→';
  transition: transform var(--sr-d-fast) var(--sr-ease-expo);
}
.sr-link:hover, .sr-link:focus-visible {
  color: var(--sr-text);
}
.sr-link:hover::after,
.sr-link:focus-visible::after { transform: translateX(5px); }

/* --- Cas du module Bouton Divi ---
   Divi pose sa PROPRE flèche en ::after : police d'icônes ETmodules,
   position:absolute, margin-left:-1em, opacity:0, révélée au survol en
   agrandissant le padding droit du bouton.
   Remplacer seulement `content` ne suffit donc pas : le caractère hérite de
   ce positionnement absolu et atterrit hors du texte. On remet le
   pseudo-élément dans le flux et on neutralise l'animation de padding. */
.et_pb_button.sr-link,
.et_pb_button.sr-link:hover {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;
}
.et_pb_button.sr-link::after {
  content: '→' !important;
  font-family: var(--sr-font-mono) !important;
  font-size: inherit !important;
  line-height: inherit !important;
  position: static !important;
  margin: 0 !important;
  opacity: 1 !important;
  transform: none;
  transition: transform var(--sr-d-fast) var(--sr-ease-expo) !important;
}
.et_pb_button.sr-link:hover::after,
.et_pb_button.sr-link:focus-visible::after { transform: translateX(5px) !important; }
.et_pb_button.sr-link::before { display: none !important; }

/* --------------------------------------------------------------------------
   6. ANIMATIONS PARTAGÉES
   Toutes en transform/opacity uniquement — aucune propriété qui déclenche
   un layout ou un paint.
   -------------------------------------------------------------------------- */

@keyframes sr-pulseDot { 0%,100% { opacity: 1 } 50% { opacity: .2 } }
@keyframes sr-marqX    { from { transform: translate3d(0,0,0) } to { transform: translate3d(-50%,0,0) } }
@keyframes sr-cueLine  { 0% { transform: translateY(-10px); opacity: 0 } 35% { opacity: 1 } 100% { transform: translateY(12px); opacity: 0 } }
@keyframes sr-menuIn   { from { opacity: 0 } to { opacity: 1 } }
@keyframes sr-fadeUp   { from { opacity: 0; transform: translateY(22px) } to { opacity: 1; transform: translateY(0) } }
@keyframes sr-spinSlow { from { transform: translate(-50%,-50%) rotate(0deg) } to { transform: translate(-50%,-50%) rotate(360deg) } }
@keyframes sr-orbFloat { from { transform: translate3d(0,0,0) scale(1) } to { transform: translate3d(8vw,-6vh,0) scale(1.18) } }

/* --------------------------------------------------------------------------
   7. RÉVÉLATIONS AU SCROLL
   Le JS ne fait qu'ajouter/retirer la classe .is-in : tout l'état visuel est
   en CSS. Le navigateur peut donc composer sur le GPU sans repasser par le JS.
   -------------------------------------------------------------------------- */

/* IMPORTANT — deux façons de déclarer une révélation :
     - attribut  data-reveal   → dans un module Code
     - classe    sr-reveal     → dans un module Divi natif
   Divi SUPPRIME les attributs data-* des modules Texte, Blurb, Bouton…
   Seuls les modules Code les conservent. La classe, elle, passe toujours :
   c'est donc elle qu'on utilise sur les modules natifs.

   Tout est préfixé par .sr-js : sans JavaScript, rien ne disparaît. */
.sr-js [data-reveal],
.sr-js .sr-reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity var(--sr-d-slow) ease var(--sr-delay, 0ms),
              transform var(--sr-d-reveal) var(--sr-ease-expo) var(--sr-delay, 0ms);
}
.sr-js [data-reveal].is-in,
.sr-js .sr-reveal.is-in { opacity: 1; transform: translateY(0); }

.sr-js [data-reveal="line"],
.sr-js .sr-reveal--line { opacity: 1; transform: scaleX(0); transform-origin: left center; }
.sr-js [data-reveal="line"].is-in,
.sr-js .sr-reveal--line.is-in { transform: scaleX(1); }

/* Échelonnement sans attribut — pour les modules natifs. */
.sr-reveal--d1 { --sr-delay:  80ms; }
.sr-reveal--d2 { --sr-delay: 160ms; }
.sr-reveal--d3 { --sr-delay: 240ms; }
.sr-reveal--d4 { --sr-delay: 320ms; }

/* Filet de sécurité : si l'observateur n'a jamais fait son travail au bout
   de 4 s (erreur JS, extension, cas limite), on rend tout visible. Mieux vaut
   perdre l'animation qu'afficher une page à moitié vide. */
.sr-js.sr-reveal-failsafe [data-reveal],
.sr-js.sr-reveal-failsafe .sr-reveal {
  opacity: 1 !important; transform: none !important;
}

/* Un module Code qui ne contient que du décor absolu n'a aucune hauteur.
   Or Divi le met en position:relative — il devient donc le conteneur de
   référence des éléments absolus qu'il contient, qui se dimensionnent alors
   sur du vide. Le volet faisait 0 px de haut.
   On rend ces enveloppes transparentes au positionnement : la référence
   remonte à la section, qui a la bonne hauteur.

   Attention, Divi positionne CHAQUE niveau — ligne, colonne, module et
   enveloppe interne. Il faut neutraliser les quatre : neutraliser seulement
   le module laisse la référence s'arrêter à la colonne, qui fait 1 px. */
.et_pb_row:has([data-wipe-panel]),
.et_pb_row:has(.sr-orb),
.et_pb_row:has(.sr-cta-glow),
.et_pb_column:has([data-wipe-panel]),
.et_pb_column:has(.sr-orb),
.et_pb_column:has(.sr-cta-glow),
.et_pb_module:has([data-wipe-panel]),
.et_pb_module:has(.sr-orb),
.et_pb_module:has(.sr-cta-glow),
.et_pb_code_inner:has([data-wipe-panel]),
.et_pb_code_inner:has(.sr-orb),
.et_pb_code_inner:has(.sr-cta-glow) {
  position: static !important;
}

/* Volet de transition entre sections.

   ÉTAT DE REPLI : hors champ. C'est le point important.
   Un volet dont l'état par défaut serait « couvre la section » masquerait
   celle-ci définitivement à la moindre défaillance du JavaScript — erreur,
   extension de blocage, observateur qui ne se déclenche pas. Inacceptable.
   Ici le volet ne descend QUE si le script confirme qu'il pourra le relever :
   la classe .is-armed n'est posée que sur les sections encore loin sous
   l'écran. Sans JS, aucun volet n'apparaît et tout le contenu reste visible. */
/* Par défaut : INVISIBLE. Pas de fond, pas d'effet, rien de masqué.
   C'est l'état de repli, et il est atteint sans aucune condition. */
[data-wipe-panel] {
  position: absolute; inset: -2% 0;
  background: transparent;
  z-index: 8; pointer-events: none;
}

/* ===== VOLET DE TRANSITION — EFFET DÉSACTIVÉ, 19/07/2026 =====
 *
 * Cinq implémentations successives — IntersectionObserver, classe armée,
 * pilotage par boucle rAF, puis timeline CSS — ont toutes produit le même
 * symptôme en conditions réelles : des sections tronquées à l'écran.
 * La géométrie mesurait pourtant juste à chaque tentative.
 *
 *   Apport de l'effet : ~1 s de transition sur 2 sections sur 11.
 *   Coût du défaut    : une section entière illisible, dont celle du CTA.
 *
 * L'arbitrage n'est pas discutable sur un site dont le rôle est de convertir.
 * La règle ci-dessous est neutralisée par le préfixe « x- » : les panneaux
 * restent dans le DOM, transparents et inertes.
 *
 * POUR LE RÉACTIVER : retirer « .x-actif » du sélecteur, et tester sur un
 * vrai navigateur — pas dans le Visual Builder, qui fausse le défilement.
 */
@supports (animation-timeline: view()) {
  [data-wipe-panel].x-actif {
    background: var(--sr-bg);
    animation: sr-wipe linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 55%;
    will-change: transform;
  }
  @keyframes sr-wipe {
    from { transform: translateY(0); }
    to   { transform: translateY(-101.5%); }
  }
}

/* --------------------------------------------------------------------------
   8. GRAIN + BARRE DE PROGRESSION + CURSEUR
   -------------------------------------------------------------------------- */

.sr-grain {
  position: fixed; inset: -80px; z-index: var(--sr-z-grain);
  pointer-events: none; opacity: .055;
  background-image: url('../img/grain.png');
  background-repeat: repeat; background-size: 180px 180px;
  /* contain:strict isole ce calque : il ne peut plus invalider le layout
     du reste de la page. Indispensable pour un overlay plein écran permanent. */
  contain: strict;
}

.sr-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: var(--sr-z-progress);
  background: linear-gradient(90deg, var(--sr-teal), var(--sr-teal-glow));
  transform: scaleX(0); transform-origin: left center;
  pointer-events: none; box-shadow: 0 0 12px rgba(41,182,186,.5);
}

.sr-cursor-ring, .sr-cursor-dot {
  position: fixed; left: 0; top: 0; z-index: var(--sr-z-cursor);
  pointer-events: none; opacity: 0; transition: opacity .25s;
  will-change: transform;
}
.sr-cursor-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.sr-cursor-dot  { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--sr-teal-glow); }
.sr-cursor-ring i {
  position: absolute; width: 10px; height: 10px;
  border-color: rgba(154,154,154,.85); border-style: solid; border-width: 0;
  transition: border-color .25s;
}
.sr-cursor-ring i:nth-child(1) { left: 0;  top: 0;    border-top-width: 1.5px; border-left-width: 1.5px; }
.sr-cursor-ring i:nth-child(2) { right: 0; top: 0;    border-top-width: 1.5px; border-right-width: 1.5px; }
.sr-cursor-ring i:nth-child(3) { left: 0;  bottom: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.sr-cursor-ring i:nth-child(4) { right: 0; bottom: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.sr-cursor-ring.is-hot i { border-color: var(--sr-teal-glow); }
.sr-cursor-label {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  font-family: var(--sr-font-mono); font-size: 9px; letter-spacing: .24em;
  color: var(--sr-teal-glow); opacity: 0; transition: opacity .25s; white-space: nowrap;
}
.sr-cursor-ring.is-play .sr-cursor-label { opacity: 1; }

/* AUDIT : le prototype pose `* { cursor:none !important }`, ce qui supprime
   aussi le curseur texte dans les champs et le pointer sur les liens →
   perte d'affordance. On cible le body et on rend explicitement la main
   aux éléments de saisie. */
html.sr-cursor-on, html.sr-cursor-on body,
html.sr-cursor-on a, html.sr-cursor-on button { cursor: none; }
html.sr-cursor-on input, html.sr-cursor-on textarea,
html.sr-cursor-on select, html.sr-cursor-on [contenteditable] { cursor: auto; }

/* --------------------------------------------------------------------------
   9. MOUVEMENT RÉDUIT — non négociable
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-wipe-panel] { display: none !important; }
  .sr-grain, .sr-cursor-ring, .sr-cursor-dot { display: none !important; }
}

/* Même écart qu'entre un en-tête de section et son contenu, mais posé sur un
   module isolé — pour les sections dont le titre et le corps partagent une
   seule colonne et n'ont donc pas de ligne d'en-tête à espacer. */
.et_pb_module.sr-mt-head { margin-top: var(--sr-gap-head); }

/* --------------------------------------------------------------------------
   FIL D'ARIANE
   Ici et non dans sections.css : il apparaît sur toutes les pages
   intérieures, y compris les pages légales, qui ne chargent pas les styles
   de section. Il y ressortait en liste numérotée par défaut.
   -------------------------------------------------------------------------- */

.sr-fil { margin-bottom: 22px; }
.sr-fil ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--sr-font-mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase;
}
.sr-fil li { display: flex; align-items: center; gap: 8px; }
.sr-fil li + li::before { content: '/'; color: var(--sr-line-strong); }
.sr-fil a { color: var(--sr-text-3-aa); text-decoration: none; transition: color var(--sr-d-fast); }
.sr-fil a:hover { color: var(--sr-teal-glow); transition-duration: var(--sr-d-snap); }
.sr-fil [aria-current] { color: var(--sr-teal-glow); }

/* --------------------------------------------------------------------------
   PAGES LÉGALES
   Elles ne chargent pas sections.css : leur mise en forme tient ici, en une
   trentaine de lignes. Priorité à la lisibilité — colonne étroite, hiérarchie
   nette, aucune animation. On vient y chercher une information précise.
   -------------------------------------------------------------------------- */

.sr-legal { max-width: 74ch; }
.sr-legal__maj {
  font-family: var(--sr-font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sr-text-3-aa);
  padding-bottom: clamp(24px, 3vw, 38px);
  border-bottom: 1px solid var(--sr-line);
  margin: 0 0 clamp(30px, 3.6vw, 46px);
}
.sr-legal section + section {
  margin-top: clamp(38px, 4.4vw, 60px);
  padding-top: clamp(30px, 3.6vw, 46px);
  border-top: 1px solid var(--sr-line);
}
.sr-legal h2 { font-size: clamp(21px, 2.2vw, 30px); margin: 0 0 18px; }
.sr-legal h3 {
  font-size: clamp(16px, 1.5vw, 19px); margin: 28px 0 10px;
  color: var(--sr-text);
}
.sr-legal p  { margin: 0 0 14px; color: var(--sr-text-2); line-height: 1.7; }
.sr-legal p:last-child { margin-bottom: 0; }
.sr-legal a  { color: var(--sr-teal-glow); }

.sr-liste { margin: 0 0 14px; padding-left: 20px; color: var(--sr-text-2); line-height: 1.7; }
.sr-liste li { margin-bottom: 8px; }

/* Fiche d'identité : deux colonnes qui s'empilent proprement sur mobile. */
.sr-defs { margin: 0; display: grid; gap: 12px; }
.sr-defs > div {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.sr-defs dt {
  flex: 0 0 220px;
  font-family: var(--sr-font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sr-text-3-aa); padding-top: 3px;
}
.sr-defs dd { margin: 0; flex: 1; min-width: 200px; color: var(--sr-text); }

/* Ce qui reste à renseigner par le client : visible, pas discret. Une page
   légale incomplète doit se voir, pas se deviner. */
.sr-todo {
  display: inline-block; font-family: var(--sr-font-mono); font-size: 10px;
  letter-spacing: .16em; font-weight: 400;
  color: #FFB84D; border: 1px dashed rgba(255,184,77,.5);
  padding: 3px 9px; border-radius: var(--sr-radius);
}

/* --------------------------------------------------------------------------
   ACCESSIBILITÉ — contrastes relevés par la mesure Lighthouse
   -------------------------------------------------------------------------- */

/* Le <main> reçoit le focus au saut de navigation : pas de halo disgracieux
   au clic, mais un repère net quand on arrive au clavier. */
#contenu:focus { outline: none; }
#contenu:focus-visible { outline: 2px solid var(--sr-teal-glow); outline-offset: -2px; }

/* Étoiles vides et séparateur de fil d'Ariane utilisaient --sr-line-strong
   (#3A3A3E), une couleur de BORDURE : 1,5:1 sur le fond des panneaux. Les
   étoiles éteintes étaient invisibles — impossible de lire « 3 sur 5 ».
   --sr-text-3 tient 3,2:1, le seuil WCAG 1.4.11 des éléments graphiques. */
.sr-stars span            { color: var(--sr-text-3); }
.sr-fil li + li::before   { color: var(--sr-text-3); }

/* Lien de crédit du pied de page : #9A9A9A sur #9A9A9A environnant, soit
   1,22:1 — rien ne le distingue du texte voisin sinon la couleur, et elle est
   identique. On le souligne : le repère ne dépend plus de la couleur. */
.sr-footer a[href*="novaweb"] {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--sr-text-3);
}
.sr-footer a[href*="novaweb"]:hover { text-decoration-color: var(--sr-teal-glow); }