/* ==========================================================================
   NAFRINI SELECTION — Feuille de style
   Sections 01 (Hero) & 02 (Philosophie de la cerise)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons de design
   -------------------------------------------------------------------------- */
:root{
  /* Couleurs */
  --white:        #FFFFFF;
  --paper:        #FCFCFB;
  --ink:          #0C0C0D;
  --ink-2:        #3B3B3F;
  /* Encre secondaire : 4,64:1 sur blanc et 4,52:1 sur papier — le seuil AA
     est tenu sur les deux fonds du theme. L'ancienne valeur #7A7A80 plafonnait
     a 4,27 et 4,16, sous le seuil, pour tout le texte informatif du site.
     La teinte est conservee (bleu leger, B = R+6), l'ecart est de six niveaux. */
  --ink-3:        #74747A;
  /* Encre decorative. 2,34:1 : elle ne porte JAMAIS de texte necessaire a la
     comprehension — seulement des filets, des separateurs, des numeros de
     reperage masques aux lecteurs d'ecran et des initiales de cartouche. */
  --ink-4:        #A9A9AE;
  --line:         #E9E7E3;
  --line-soft:    #F1EFEC;
  --rule:         rgba(12,12,13,.10);
  --cherry:       #C71F1A;
  --cherry-deep:  #9C1712;
  --cherry-tint:  rgba(199,31,26,.09);

  /* Typographie */
  --f-display: "Newsreader", "Times New Roman", Georgia, serif;
  --f-sans:    "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Mise en page */
  --shell:  1440px;
  --gutter: clamp(20px, 4.4vw, 68px);
  --header-h: 122px;

  /* Mouvement */
  --ease:      cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* RESP-03 — écart d'accessibilité déclaré.
     « overflow-x:hidden » posé sur le body ne suffisait pas : la barre
     disparaît, mais la zone d'affichage reste un conteneur qui défile. Le
     motif de cerise du hero, large de 852px, emportait la page de 184 à
     216px vers la droite — au doigt sur mobile, à la molette latérale, au
     clavier. Le débordement était rogné à la peinture, pas empêché.
     Posé ici, « clip » ne crée aucun conteneur de défilement : il n'y a
     plus rien à faire défiler. Contrairement à « hidden », il laisse
     intacts le collage (position:sticky) et l'ancrage au défilement. */
  overflow-x:clip;
}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--f-sans);
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* Se propage a la zone d'affichage (html reste en overflow:visible) :
     le body lui-meme ne devient donc pas un conteneur de defilement.
     C'est ce qui rogne le motif de cerise debordant du hero sans jamais
     autoriser de defilement horizontal. */
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
h1,h2,h3,p,ul,figure{ margin:0; }
ul,ol{ list-style:none; padding:0; }   /* <ol> garde sinon ses 40px d'indentation */
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
em{ font-style:normal; }

::selection{ background:var(--cherry); color:#fff; }

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 20px; font-size:13px;
}
.skip-link:focus{ left:12px; top:12px; }

:focus-visible{
  outline:2px solid var(--cherry);
  outline-offset:4px;
  border-radius:2px;
}

/* --------------------------------------------------------------------------
   3. Curseur personnalisé
   -------------------------------------------------------------------------- */
.cursor{ display:none; }

html.has-cursor,
html.has-cursor *{ cursor:none !important; }

html.has-cursor .cursor{
  display:block;
  position:fixed; inset:0;
  pointer-events:none;
  z-index:999;
  opacity:0;
  transition:opacity .35s var(--ease-soft);
}
html.has-cursor .cursor.is-awake{ opacity:1; }

.cursor__ring,
.cursor__dot{
  position:absolute; top:0; left:0;
  border-radius:50%;
  will-change:transform;
}

/* Repos : anneau charbon fin et translucide, cœur cerise.
   Un écho discret au propos « surface / noyau » de la marque. */
.cursor__ring{
  width:36px; height:36px;
  margin:-18px 0 0 -18px;
  border:1px solid rgba(12,12,13,.58);
  transition:width .4s var(--ease), height .4s var(--ease),
             margin .4s var(--ease), border-color .4s var(--ease-soft),
             background-color .4s var(--ease-soft);
}
.cursor__dot{
  width:5px; height:5px;
  margin:-2.5px 0 0 -2.5px;
  background:var(--cherry);
  transition:opacity .3s var(--ease-soft), transform .4s var(--ease),
             background-color .4s var(--ease-soft);
}

/* Survol d'un élément interactif : l'anneau s'ouvre et glisse vers le cerise,
   le cœur s'efface. */
.cursor.is-hover .cursor__ring{
  width:70px; height:70px;
  margin:-35px 0 0 -35px;
  border-color:rgba(199,31,26,.62);
  background:var(--cherry-tint);
}
.cursor.is-hover .cursor__dot{ opacity:0; transform:scale(.35); }

/* Survol d'un bouton déjà cerise : l'anneau reste charbon — du rouge sur du
   rouge ne se lirait pas — et le cœur passe au blanc pour le contraste. */
.cursor.is-cta .cursor__ring{
  width:70px; height:70px;
  margin:-35px 0 0 -35px;
  border-color:rgba(12,12,13,.70);
  background:rgba(12,12,13,.05);
}
.cursor.is-cta .cursor__dot{
  opacity:1;
  transform:scale(1.1);
  background:#fff;
}

/* Sur fond sombre, l'anneau charbon disparaitrait : on le passe en blanc,
   sauf quand un etat de survol prend deja la main. */
.cursor.is-dark:not(.is-hover):not(.is-cta) .cursor__ring{
  border-color:rgba(255,255,255,.62);
}

/* Survol d'une ligne de domaine : l'anneau s'ouvre a peine et reste charbon
   — une photographie apparait juste a cote, le curseur doit s'effacer. */
.cursor.is-domain .cursor__ring{
  width:52px; height:52px;
  margin:-26px 0 0 -26px;
  border-color:rgba(12,12,13,.42);
}
.cursor.is-domain .cursor__dot{ transform:scale(.62); }

/* Survol d'une zone média */
.cursor.is-media .cursor__ring{
  width:104px; height:104px;
  margin:-52px 0 0 -52px;
  border-color:rgba(199,31,26,.5);
  background:rgba(255,255,255,.06);
}

.cursor.is-down .cursor__ring{ transform:scale(.86); }

/* --------------------------------------------------------------------------
   4. En-tête
   -------------------------------------------------------------------------- */
.header{
  position:fixed; inset:0 0 auto 0;
  z-index:100;
  background:rgba(255,255,255,0);
  transition:background .5s var(--ease-soft), box-shadow .5s var(--ease-soft);
}
.header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--line);
  transform:scaleX(0); transform-origin:left;
  transition:transform .9s var(--ease);
}
.header.is-scrolled{
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
}
.header.is-scrolled::after{ transform:scaleX(1); }

.header__inner{
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
  height:var(--header-h);
  display:flex; align-items:center;
  gap:clamp(16px, 2.4vw, 40px);
  transition:height .55s var(--ease);
}
.header.is-scrolled .header__inner{ height:88px; }

/* Logo */
.brand{ flex:0 0 auto; display:block; }
.brand img{
  height:82px; width:auto;
  transition:height .55s var(--ease), opacity .4s var(--ease-soft);
}
.header.is-scrolled .brand img{ height:58px; }
.brand:hover img{ opacity:.72; }

/* Navigation */
.nav{ flex:1 1 auto; display:flex; justify-content:center; }
.nav__list{
  display:flex; align-items:center;
  gap:clamp(14px, 1.75vw, 30px);
}
.nav__link{
  position:relative;
  display:inline-block;
  font-size:11px;
  font-weight:400;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-2);
  padding:6px 0;
  white-space:nowrap;
  transition:color .4s var(--ease-soft);
}
.nav__link::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--cherry);
  transform:scaleX(0); transform-origin:right;
  transition:transform .55s var(--ease);
}
.nav__link[href]:hover{ color:var(--ink); }
.nav__link[href]:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__link.is-active{ color:var(--ink); }
.nav__link.is-active::after{ transform:scaleX(1); }

.header__actions{ flex:0 0 auto; margin-left:auto; display:flex; align-items:center; gap:14px; }

/* --------------------------------------------------------------------------
   5. Boutons
   -------------------------------------------------------------------------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--f-sans);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  padding:19px 34px;
  overflow:hidden;
  white-space:nowrap;
  transition:transform .5s var(--ease), color .45s var(--ease-soft),
             border-color .45s var(--ease-soft);
  will-change:transform;
}
.btn__label{ position:relative; z-index:2; }

/* Primaire — aplat cerise avec balayage */
.btn--primary{
  color:#fff;
  background:var(--cherry);
}
.btn--primary::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:var(--ink);
  transform:translateY(101%);
  transition:transform .62s var(--ease);
}
.btn--primary[href]:hover::before{ transform:translateY(0); }
.btn--compact{ padding:15px 26px; font-size:10.5px; letter-spacing:.14em; }

/* Secondaire — texte souligné */
.btn--ghost{
  color:var(--ink);
  padding:19px 4px;
  overflow:visible;
}
.btn--ghost::after{
  content:"";
  position:absolute; left:4px; right:4px; bottom:14px; height:1px;
  background:var(--ink);
  transform-origin:right;
  transition:transform .55s var(--ease), background-color .45s var(--ease-soft);
}
.btn--ghost[href]:hover{ color:var(--cherry); }
.btn--ghost[href]:hover::after{ background:var(--cherry); transform:scaleX(.999); }
.btn__arrow{
  width:22px; height:10px; flex:0 0 auto;
  transition:transform .55s var(--ease);
}
.btn--ghost[href]:hover .btn__arrow{ transform:translateX(7px); }

/* --------------------------------------------------------------------------
   6. Menu mobile
   -------------------------------------------------------------------------- */
.burger{
  display:none;
  width:44px; height:44px;
  flex-direction:column; justify-content:center; align-items:flex-end; gap:6px;
}
.burger span{
  display:block; height:1px; background:var(--ink);
  transition:transform .5s var(--ease), width .5s var(--ease), opacity .3s;
}
.burger span:nth-child(1){ width:26px; }
.burger span:nth-child(2){ width:18px; }
html.menu-open .burger span:nth-child(1){ width:26px; transform:translateY(3.5px) rotate(45deg); }
html.menu-open .burger span:nth-child(2){ width:26px; transform:translateY(-3.5px) rotate(-45deg); }

/* LE VERROU DE DÉFILEMENT. Le script pose « overflow:hidden » sur le body à
   l'ouverture, et cela suffisait tant que <html> restait en « visible » : le
   navigateur propageait alors l'overflow du body à la zone d'affichage. En
   posant « overflow-x:clip » sur <html> pour empêcher le défilement latéral
   (voir plus haut), on a supprimé cette propagation sans le voir : la molette
   faisait défiler la page DERRIÈRE le menu ouvert — mesuré, 0 à 800px en huit
   crans, l'écran restant ouvert par-dessus.

   Le verrou se pose donc là où il agit, sur l'élément qui définit désormais la
   zone d'affichage. La classe est déjà portée par <html> : les deux ne peuvent
   pas se désaccorder. */
html.menu-open{ overflow-y:hidden; }

.menu{
  position:fixed; inset:0; z-index:90;
  background:var(--white);
  padding:calc(var(--header-h) + 24px) var(--gutter) 48px;
  display:flex;
  clip-path:inset(0 0 100% 0);
  /* Ni clip-path ni pointer-events ne retirent un lien de l'ordre de
     tabulation : menu ferme, ses six liens restaient atteignables au clavier
     et muets au lecteur d'ecran — y compris sur grand ecran, ou le bouton
     d'ouverture n'existe pas. « visibility » est la seule propriete qui les
     en retire sans casser le trace du masque.

     Elle bascule sans duree, mais APRES le masque a la fermeture : le
     mouvement reste celui d'avant. Et comme elle depend de la meme classe
     que l'etat visuel, aria-hidden, focusabilite et apparence ne peuvent
     plus se desaccorder — meme si le script echoue. */
  visibility:hidden;
  transition:clip-path .8s var(--ease), visibility 0s linear .8s;
  pointer-events:none;
  overflow-y:auto;
}
html.menu-open .menu{
  clip-path:inset(0 0 0 0);
  pointer-events:auto;
  visibility:visible;
  transition:clip-path .8s var(--ease), visibility 0s linear 0s;
}
.menu__inner{ margin:auto 0; width:100%; }
.menu__list li{
  /* Le masque d'entree des rubriques. Il rognait aussi l'anneau de focus,
     peint 4 px A L'EXTERIEUR du lien : au clavier, on parcourait le menu
     sans aucun repere. L'anneau se peint donc a l'interieur du lien, ou
     rien ne le rogne — le masque, lui, ne bouge pas. */
  overflow:hidden;
  border-bottom:1px solid var(--line-soft);
}
.menu__list a:focus-visible{ outline-offset:-4px; }
.menu__list a{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(28px, 8vw, 40px);
  font-weight:300;
  letter-spacing:-.01em;
  padding:14px 0;
  transform:translateY(105%);
  transition:transform .8s var(--ease), color .4s;
}
html.menu-open .menu__list a{ transform:translateY(0); }
.menu__list li:nth-child(1) a{ transition-delay:.10s }
.menu__list li:nth-child(2) a{ transition-delay:.15s }
.menu__list li:nth-child(3) a{ transition-delay:.20s }
.menu__list li:nth-child(4) a{ transition-delay:.25s }
.menu__list li:nth-child(5) a{ transition-delay:.30s }
.menu__list li:nth-child(6) a{ transition-delay:.35s }
.menu__list li:nth-child(7) a{ transition-delay:.40s }
.menu__list li:nth-child(8) a{ transition-delay:.45s }
.menu__list a[href]:hover{ color:var(--cherry); }
.menu__cta{
  margin-top:40px;
  justify-content:center;
  width:100%;
  opacity:0;
  transition:opacity .6s var(--ease-soft) .5s;
}
html.menu-open .menu__cta{ opacity:1; }

/* --------------------------------------------------------------------------
   7. Éléments typographiques partagés
   -------------------------------------------------------------------------- */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.eyebrow--center{ justify-content:center; }
.eyebrow__dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--cherry);
  flex:0 0 auto;
}

/* Mot mis en valeur */
.hl{
  position:relative;
  color:var(--cherry);
  font-style:italic;
  white-space:nowrap;
}
.hl__bar{
  position:absolute;
  left:.02em; right:.06em; bottom:.02em;
  height:2px;
  background:var(--cherry);
  transform:scaleX(0); transform-origin:left;
  display:block;
}
.is-in .hl__bar,
[data-reveal].is-in .hl__bar{
  transform:scaleX(1);
  transition:transform 1.05s var(--ease) .5s;
}

/* Masque de révélation par ligne */
.line{
  display:block;
  overflow:hidden;
  padding-bottom:.08em;
}
.line__i{
  display:block;
  transform:translateY(108%);
  transition:transform 1.15s var(--ease) var(--d, 0s);
  will-change:transform;
}
.line.is-in .line__i{ transform:translateY(0); }

/* Le trait rouge du hero se trace juste après l'arrivée de « surface ». */
.hero__title .line.is-in .hl__bar{ transition-delay:calc(var(--d) + .37s); }

/* --------------------------------------------------------------------------
   8. Section 01 — Hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  /* Pas d'overflow:hidden ici : le motif de cerise doit pouvoir déborder.
     Le z-index le place au-dessus du fond blanc de la section suivante ;
     le débordement horizontal est absorbé par le clip appliqué au body. */
  z-index:1;
  padding-top:calc(var(--header-h) + clamp(22px, 3.6vh, 46px));
  /* Respiration apres « Nous agissons pour » : la bande doit avoir le
     temps de s'ouvrir avant que la section 02 n'arrive. Le retrait est
     sous la bande, sa position a l'ecran ne bouge donc pas. */
  padding-bottom:clamp(64px, 8.5vh, 112px);
  background:var(--white);
}

/* Emblème décoratif (line-art) */
.hero__emblem{
  position:absolute;
  /* Ancré à droite : le motif peut déborder franchement hors de l'écran,
     mais il se termine toujours AVANT la limite de section — aucune coupure
     nette entre le hero et la section suivante. */
  top:4%;
  right:-18%;
  width:clamp(520px, 54vw, 940px);
  height:auto;
  opacity:0;
  pointer-events:none;
  z-index:0;
  transform:rotate(-6deg);
  transition:opacity 1.5s var(--ease-soft) var(--d, 0s);
  will-change:transform, opacity;
}
.hero__emblem.is-in{ opacity:.052; }

/* Filet vertical décoratif */
.hero__rule{
  position:absolute;
  left:var(--gutter);
  top:calc(var(--header-h) + 40px);
  bottom:0;
  width:1px;
  background:linear-gradient(to bottom, var(--line), rgba(233,231,227,0));
  pointer-events:none;
  z-index:0;
}

.hero__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(28px, 5vw, 96px);
  align-items:center;
}

/* --- Colonne texte --- */
.hero__copy{ max-width:660px; }

.hero__title{
  margin-top:clamp(18px, 2.6vw, 32px);
  font-family:var(--f-display);
  font-weight:300;
  font-size:clamp(2.6rem, 5.4vw, 5.6rem);
  line-height:1.02;
  letter-spacing:-.022em;
  color:var(--ink);
}

.hero__lead{
  margin-top:clamp(22px, 2.6vw, 34px);
  max-width:52ch;
  font-size:clamp(15px, 1.08vw, 17px);
  line-height:1.78;
  color:var(--ink-2);
  font-weight:300;
}

.hero__actions{
  margin-top:clamp(30px, 3.4vw, 46px);
  display:flex; align-items:center;
  gap:clamp(14px, 2vw, 30px);
  flex-wrap:wrap;
}

/* --- Colonne visuelle --- */
.hero__visual{
  position:relative;
  justify-self:end;
  width:100%;
  max-width:520px;
}

/* Ligne de construction éditoriale : une équerre ouverte en haut à droite,
   débordant légèrement du cadrage. Elle n'enferme jamais la photographie. */
.hero__frame{
  position:absolute;
  top:-34px; right:-34px; left:34%; bottom:36%;
  border-top:1px solid var(--rule);
  border-right:1px solid var(--rule);
  pointer-events:none;
  z-index:0;
  clip-path:inset(0 0 100% 100%);
}
/* Tracée depuis l'angle supérieur droit, juste après l'ouverture du portrait. */
.hero__media.is-in ~ .hero__frame{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.15s var(--ease) 1.08s;
}

.hero__media{
  position:relative;
  z-index:1;
  overflow:hidden;
  aspect-ratio:4 / 5;
  /* Blanc pur : aucun rectangle ne doit se deviner avant l'ouverture du masque. */
  background:var(--white);
}
.hero__media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 22%;
  will-change:transform;
}

/* Accent cerise en pied d'image */
.hero__tick{
  position:absolute;
  left:0; bottom:-1px;
  width:clamp(70px, 12vw, 128px); height:3px;
  background:var(--cherry);
  z-index:2;
}

/* --- Bandeau « Nous agissons pour » --- */
/* Deux registres nettement separes : une etiquette minuscule au-dessus,
   puis les univers poses en serif — un enonce de positionnement, pas une
   seconde barre de navigation. */
.clients{
  position:relative;
  z-index:1;
  margin-top:clamp(32px, 4.2vw, 60px);
  /* Amorce cerise posee sur le filet neutre : ancre la bande sans
     ajouter d'element supplementaire. */
  padding-top:clamp(18px, 2vw, 26px);
  border-top:1px solid var(--line);
}
.clients::before{
  content:"";
  position:absolute;
  top:-1px; left:0;
  width:clamp(28px, 3vw, 44px);
  height:1px;
  background:var(--cherry);
}
.clients__label{
  display:block;
  font-size:10px;
  letter-spacing:.26em;          /* inchange */
  text-transform:uppercase;
  color:var(--ink-2);            /* un cran de contraste en plus */
}
.clients__list{
  --sep:clamp(13px, 1.4vw, 22px);
  margin-top:clamp(14px, 1.6vw, 20px);   /* respire avec le corps agrandi */
  display:flex;
  align-items:baseline;
  gap:10px calc(var(--sep) * 2);
  flex-wrap:wrap;
}
.clients__list li{
  position:relative;
  font-family:var(--f-display);
  /* La couleur est deja au plus sombre (--ink) : la presence vient donc
     du corps (+8,5 %) et de la graisse, pas de la teinte. */
  font-weight:450;
  font-size:clamp(16.3px, 1.47vw, 20.6px);
  line-height:1.32;
  letter-spacing:-.004em;
  color:var(--ink);
  white-space:nowrap;
  transition:color .45s var(--ease-soft);
}
/* Le point vit HORS de la boite de l'element : le soulignement ne le
   recouvre pas, et un retour a la ligne ne commence jamais par un point. */
.clients__list li:not(:last-child)::after{
  content:"·";
  position:absolute;
  top:0;
  right:calc(var(--sep) * -1);
  transform:translateX(50%);
  color:var(--cherry);
  opacity:.5;
  pointer-events:none;
}
.clients__list li::before{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-5px;
  height:1px;
  background:var(--cherry);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .55s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .clients__list li:hover{ color:var(--cherry); }
  .clients__list li:hover::before{ transform:scaleX(1); transform-origin:left; }
}

/* Bornage de la hauteur du visuel sur grand ecran :
   le hero reste proche d'une hauteur d'ecran. */
@media (min-width:981px){
  .hero__media{
    aspect-ratio:auto;
    height:min(66vh, 680px);
  }
}

/* Ecrans bas (portables jusqu'a 910 px de haut) : la bande « Nous agissons
   pour » tombait juste sous la ligne de flottaison. On recupere la hauteur
   en deux endroits — un peu sur le portrait, un peu sur le blanc au-dessus
   de la bande — plutot que tout sur l'image, qui deviendrait trop plate.
   Au-dela de 910 px de haut, rien ne change. */
@media (min-width:981px) and (max-height:910px){
  .hero__media{ height:min(63vh, 680px); }
  .clients{ margin-top:clamp(24px, 3.4vh, 32px); }
}

/* --------------------------------------------------------------------------
   9. Section 02 — Philosophie de la cerise
   -------------------------------------------------------------------------- */
.philo{
  position:relative;
  padding-block:clamp(84px, min(11vw, 15vh), 168px);
  background:var(--white);
  overflow:hidden;
  --media-h: clamp(210px, 24vw, 330px);
}

.philo__emblem{
  position:absolute;
  top:0;
  left:50%;
  width:clamp(320px, 33vw, 520px);
  height:auto;
  opacity:.036;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:0;
  will-change:transform;
}

.philo__head{
  position:relative;
  z-index:1;
  text-align:center;
  max-width:940px;
  margin-inline:auto;
}
.philo__title{
  margin-top:clamp(16px, 2vw, 26px);
  font-family:var(--f-display);
  font-weight:300;
  font-size:clamp(2rem, 3.9vw, 3.9rem);
  line-height:1.1;
  letter-spacing:-.018em;
}

/* --- Grille des trois étapes --- */
.philo__grid{
  position:relative;
  z-index:1;
  margin-top:clamp(52px, 7vw, 104px);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  align-items:start;
  column-gap:clamp(10px, 2.2vw, 30px);
}

.step{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.step__media{
  height:var(--media-h);
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.step__media img{
  width:auto;
  filter:drop-shadow(0 26px 34px rgba(12,12,13,.10));
  transition:transform .8s var(--ease);
  will-change:transform;
}
.step:hover .step__media img{ transform:translateY(-10px) scale(1.025); }

.step--whole .step__media img{ height:100%; }
.step--half  .step__media img{ height:95%; }
.step--pit   .step__media img{ height:57%; }

.step__body{
  margin-top:clamp(26px, 3vw, 42px);
  max-width:34ch;
  position:relative;
  padding-top:26px;
}
.step__body::before{
  content:"";
  position:absolute; top:0; left:50%;
  width:34px; height:1px;
  background:var(--cherry);
  transform:translateX(-50%);
}
.step__idx{
  display:block;
  font-size:10px;
  letter-spacing:.24em;
  color:var(--cherry);
  margin-bottom:12px;
}
.step__label{
  font-size:12px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
}
.step__lead{
  margin-top:14px;
  font-family:var(--f-display);
  font-size:clamp(17px, 1.5vw, 21px);
  font-weight:300;
  line-height:1.4;
  color:var(--ink);
}
.step__desc{
  margin-top:9px;
  font-size:14px;
  line-height:1.7;
  color:var(--ink-3);
}

/* --- Flèches de séquence --- */
.arrow{
  display:block;
  width:clamp(46px, 6.6vw, 96px);
  color:var(--ink-4);
  margin-top:calc(var(--media-h) * .70);
  align-self:start;
}
.arrow svg{ width:100%; height:auto; display:block; overflow:visible; }
.arrow__path{
  stroke-dasharray:120;
  stroke-dashoffset:120;
}
.arrow.is-in .arrow__path{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.2s var(--ease) var(--d, 0s);
}

/* --------------------------------------------------------------------------
   10. Section 03 — Domaines d'intervention
   -------------------------------------------------------------------------- */
.domains{
  position:relative;
  padding-block:clamp(84px, min(11vw, 15vh), 168px);
  background:var(--white);
}

/* En-tete aligne a gauche : rompt volontairement avec le centrage
   de la section 02 et relance le rythme de la page. */
.domains__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(24px, 4vw, 64px);
  flex-wrap:wrap;
  margin-bottom:clamp(46px, 6vw, 88px);
}
.domains__title{
  margin-top:clamp(16px, 2vw, 26px);
  font-family:var(--f-display);
  font-weight:300;
  font-size:clamp(2rem, 3.9vw, 3.9rem);
  line-height:1.1;
  letter-spacing:-.018em;
}
.domains__all{ flex:0 0 auto; margin-bottom:6px; }

.domains__list{ display:block; }
.domains__item{ display:block; }

/* Filet structurel : la cible observee garde toute sa largeur, seul le
   pseudo-element se met a l'echelle (un element scaleX(0) n'a plus d'aire
   et l'IntersectionObserver ne le declencherait jamais). */
.domain__rule{
  position:relative;
  display:block;
  height:1px;
}
.domain__rule::before{
  content:"";
  position:absolute; inset:0;
  background:var(--line);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.1s var(--ease) var(--d, 0s);
}
.domain__rule.is-in::before{ transform:scaleX(1); }

/* Ligne d'index */
.domain{
  position:relative;
  display:grid;
  /* La colonne de vignette est toujours reservee : l'apparition de la
     photographie ne deplace jamais l'intitule ni la description. */
  --thumb:clamp(64px, 5.4vw, 78px);
  grid-template-columns:clamp(46px, 5vw, 72px) minmax(0,1fr) var(--thumb) minmax(0,27ch) 24px;
  align-items:center;
  gap:clamp(14px, 2.5vw, 40px);
  padding-block:clamp(24px, 3.2vw, 44px);
  color:inherit;
}
/* Reprise du filet en cerise au survol */
.domain::before{
  content:"";
  position:absolute; top:-1px; left:0; right:0; height:1px;
  background:var(--cherry);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .75s var(--ease);
}
.domain[href]:hover::before{ transform:scaleX(1); }

.domain__idx{
  grid-column:1;
  font-size:10.5px;
  letter-spacing:.22em;
  color:var(--ink-4);
  transition:color .45s var(--ease-soft);
}
.domain__title{
  grid-column:2;
  font-family:var(--f-display);
  font-weight:300;
  font-size:clamp(1.45rem, 2.7vw, 2.5rem);
  line-height:1.16;
  letter-spacing:-.014em;
  transition:transform .6s var(--ease);
}
/* Vignette circulaire : un detail editorial, pas un composant. */
.domain__thumb{
  grid-column:3;
  display:block;
  width:var(--thumb);
  height:var(--thumb);
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 0 0 1px var(--rule);
  opacity:0;
  transition:opacity .42s var(--ease-soft);
}
.domain__thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.2);
  transition:transform .45s var(--ease);
}

.domain__desc{
  grid-column:4;
  font-size:14.7px;
  line-height:1.7;
  color:var(--ink-3);
  transition:color .45s var(--ease-soft);
}
.domain__arrow{
  grid-column:5;
  width:24px; height:10px;
  color:var(--ink-4);
  transition:transform .6s var(--ease), color .45s var(--ease-soft);
}

/* Sur pointeur fin uniquement : sinon l'etat :hover reste colle apres
   une tape sur mobile. */
@media (hover:hover) and (pointer:fine){
  .domain[href]:hover .domain__thumb{ opacity:1; }
  .domain[href]:hover .domain__thumb img{ transform:scale(1); }
}

.domain[href]:hover .domain__idx{ color:var(--cherry); }
.domain[href]:hover .domain__title{ transform:translateX(10px); }
.domain[href]:hover .domain__desc{ color:var(--cherry); }
.domain[href]:hover .domain__arrow{ transform:translateX(8px); color:var(--cherry); }


/* --------------------------------------------------------------------------
   11. Section 04 — La méthode
   -------------------------------------------------------------------------- */
.method{
  position:relative;
  padding-block:clamp(84px, min(11vw, 15vh), 168px);
  background:var(--white);
}

.method__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:clamp(40px, 7vw, 128px);
  align-items:start;
}

/* Colonne fixe : elle tient a l'ecran tant que les temps defilent.
   Aucun ancetre ne doit porter overflow:hidden, sinon sticky retombe. */
.method__aside{
  position:sticky;
  top:calc(var(--header-h) + 44px);
  max-width:30rem;
}
.method__title{
  margin-top:clamp(16px, 2vw, 26px);
  font-family:var(--f-display);
  font-weight:300;
  font-size:clamp(2rem, 3.6vw, 3.5rem);
  line-height:1.1;
  letter-spacing:-.018em;
}
.method__lead{
  margin-top:clamp(20px, 2.4vw, 30px);
  max-width:44ch;
  font-size:clamp(14.5px, 1.02vw, 16px);
  line-height:1.78;
  color:var(--ink-2);
  font-weight:300;
}

/* --- Les quatre temps ------------------------------------------------- */
.method__steps{ position:relative; padding-left:clamp(26px, 3.4vw, 48px); }

/* Filet vertical : la cible observee garde sa hauteur, seul le
   pseudo-element se met a l'echelle. */
.method__spine{
  position:absolute;
  left:0; top:.55em; bottom:.55em;
  width:1px;
}
.method__spine::before{
  content:"";
  position:absolute; inset:0;
  background:var(--line);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform 1.3s var(--ease) var(--d, 0s);
}
.method__spine.is-in::before{ transform:scaleY(1); }

/* Deuxieme couche, en cerise : elle se deploie au fil du defilement,
   du premier point au dernier. Le filet neutre dessous est inchange. */
.method__spine::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:var(--spine-start, 0px);
  height:var(--spine-span, 0px);
  background:var(--cherry);
  transform:scaleY(var(--progress, 0));
  transform-origin:top;
  opacity:0;
  transition:transform .22s linear, opacity .6s var(--ease-soft);
}
.method__spine.is-in::after{ opacity:1; }

.method__list{ display:grid; gap:clamp(44px, 6.4vw, 92px); }

.mstep{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(18px, 2.4vw, 38px);
  align-items:baseline;
}
/* Point de repere pose sur le filet */
.mstep::before{
  content:"";
  position:absolute;
  left:calc(clamp(26px, 3.4vw, 48px) * -1 - .5px);
  top:.72em;
  width:5px; height:5px;
  border-radius:50%;
  background:rgba(199,31,26,.26);
  transform:translateX(-2px) scale(1);
  transition:background-color .55s var(--ease-soft), transform .55s var(--ease);
}
.mstep__num{
  font-family:var(--f-display);
  font-weight:300;
  font-size:clamp(1.5rem, 2.1vw, 2.1rem);
  line-height:1;
  color:var(--ink-4);
  font-variant-numeric:tabular-nums;
  transition:color .55s var(--ease-soft);
}
.mstep__title{
  font-family:var(--f-display);
  font-weight:300;
  font-size:clamp(1.4rem, 2.3vw, 2.1rem);
  line-height:1.18;
  letter-spacing:-.012em;
  color:var(--ink-2);
  transition:color .55s var(--ease-soft);
}
.mstep__text{
  margin-top:12px;
  max-width:46ch;
  font-size:clamp(14px, 1vw, 15.5px);
  line-height:1.75;
  /* Ces quatre phrases expliquent la methode : c'est du texte necessaire a la
     comprehension, pas un ornement. En --ink-4 elles etaient a 2,34:1, et ne
     passaient au-dessus du seuil qu'une fois l'etape atteinte par le
     defilement — un texte illisible en attendant. */
  color:var(--ink-3);
  transition:color .55s var(--ease-soft);
}

/* Etape atteinte — aucun changement de taille, seulement du contraste. */
.mstep.is-active::before{ background:var(--cherry); transform:translateX(-2px) scale(1.2); }
.mstep.is-active .mstep__num{ color:var(--cherry); }
.mstep.is-active .mstep__title{ color:var(--ink); }
.mstep.is-active .mstep__text{ color:var(--ink-3); }

/* --------------------------------------------------------------------------
   12. Section 05 — Nafrini Academy
   -------------------------------------------------------------------------- */
.academy{
  position:relative;
  /* Resserre uniquement les deux transitions qui l'encadrent. */
  padding-block:clamp(74px, min(9.6vw, 13vh), 148px)
               clamp(65px, min(8.5vw, 11.5vh), 131px);
  background:var(--white);
}

.academy__head{ max-width:52rem; }
.academy__title{
  margin-top:clamp(16px, 2vw, 26px);
  font-family:var(--f-display);
  font-weight:300;
  font-size:clamp(1.9rem, 3.5vw, 3.4rem);
  line-height:1.12;
  letter-spacing:-.018em;
}
.academy__lead{
  margin-top:clamp(20px, 2.4vw, 30px);
  max-width:54ch;
  font-size:clamp(14.5px, 1.02vw, 16px);
  line-height:1.78;
  color:var(--ink-2);
  font-weight:300;
}

/* Vue d'ensemble de l'Academy : cinq scenes en une seule image. Elle occupe
   toute la largeur utile, sans quoi aucune des scenes ne resterait lisible. */
.academy__media{
  position:relative;
  margin-top:clamp(44px, 6vw, 84px);
  overflow:hidden;
  aspect-ratio:16 / 9;
  background:var(--white);
}
.academy__media img{
  width:100%; height:100%;
  object-fit:cover;
}

/* Les quatre formats, relies par le meme filet que les publics precedents. */
.academy__band{
  position:relative;
  margin-top:clamp(46px, 6vw, 84px);
}
.academy__rule{
  position:absolute;
  left:0; right:0;
  top:2px;
}
.academy__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(24px, 3vw, 48px);
}

.fmt__dot{
  display:block;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--cherry);
  margin-bottom:22px;
  transform:scale(0);
  transition:transform .5s var(--ease) var(--dot-d, 0s);
}
.academy__rule.is-in ~ .academy__grid .fmt__dot{ transform:scale(1); }
.academy__grid .fmt:nth-child(1) .fmt__dot{ --dot-d:.10s; }
.academy__grid .fmt:nth-child(2) .fmt__dot{ --dot-d:.20s; }
.academy__grid .fmt:nth-child(3) .fmt__dot{ --dot-d:.32s; }
.academy__grid .fmt:nth-child(4) .fmt__dot{ --dot-d:.44s; }

.fmt__name{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(1.18rem, 1.52vw, 1.44rem);
  line-height:1.22;
  letter-spacing:-.008em;
  color:var(--ink);
}
.fmt__desc{
  margin-top:12px;
  font-size:13.5px;
  line-height:1.68;
  color:var(--ink-3);
}

@media (hover:hover) and (pointer:fine){
  .fmt__name,
  .fmt__desc{ transition:color .45s var(--ease-soft), transform .45s var(--ease); }
  .academy__rule.is-in ~ .academy__grid .fmt:hover .fmt__dot{ transform:scale(1.45); }
  .fmt:hover .fmt__name{ color:var(--cherry); transform:translateY(-3px); }
  .fmt:hover .fmt__desc{ color:var(--ink-2); transform:translateY(-3px); }
}

.academy__foot{
  margin-top:clamp(38px, 4.6vw, 62px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px clamp(24px, 4vw, 48px);
  flex-wrap:wrap;
}
.academy__modes{
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* --------------------------------------------------------------------------
   13. Section 06 — Prendre contact
   -------------------------------------------------------------------------- */
.contact{
  position:relative;
  /* Respiration plus large que partout ailleurs : c'est le point final. */
  padding-block:clamp(96px, min(13vw, 17vh), 200px);
  background:var(--white);
}

/* L'emblème revient, centré et ample : il referme ce que le hero a ouvert. */
.contact__emblem{
  position:absolute;
  top:50%;
  left:50%;
  width:clamp(420px, 46vw, 800px);
  height:auto;
  opacity:0;
  pointer-events:none;
  z-index:0;
  transform:translate(-50%, -50%) rotate(5deg);
  transition:opacity 1.6s var(--ease-soft) var(--d, 0s);
  will-change:transform, opacity;
}
.contact__emblem.is-in{ opacity:.042; }

.contact__rule{ position:relative; z-index:1; }

.contact__inner{
  position:relative;
  z-index:1;
  text-align:center;
  max-width:56rem;
  margin-inline:auto;
  /* Se cumule au retrait de la section : volontairement plus court. */
  padding-top:clamp(40px, 5.6vw, 82px);
}

/* Volontairement en retrait du titre du hero, qui reste le plus grand. */
.contact__title{
  margin-top:clamp(16px, 2vw, 26px);
  font-family:var(--f-display);
  font-weight:300;
  font-size:clamp(2.1rem, 4.5vw, 4.5rem);
  line-height:1.06;
  letter-spacing:-.022em;
}
.contact__lead{
  margin-top:clamp(20px, 2.4vw, 32px);
  margin-inline:auto;
  max-width:48ch;
  font-size:clamp(14.5px, 1.02vw, 16.5px);
  line-height:1.78;
  color:var(--ink-2);
  font-weight:300;
}
.contact__actions{
  margin-top:clamp(34px, 4vw, 54px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(14px, 2vw, 30px);
  flex-wrap:wrap;
}

/* --------------------------------------------------------------------------
   14. Pied de page
   -------------------------------------------------------------------------- */
.footer{
  background:var(--ink);
  color:#fff;
  padding-block:clamp(64px, 8vw, 112px) clamp(28px, 3vw, 44px);
}

.footer__top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(40px, 6vw, 96px);
  align-items:start;
}

/* Mot-symbole en blanc, cerise conservee en rouge. */
.footer__logo{
  height:clamp(62px, 6vw, 84px);
  width:auto;
}
.footer__tag{
  margin-top:clamp(18px, 2vw, 26px);
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.48);
}

.footer__nav{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,auto));
  gap:clamp(30px, 5vw, 84px);
}
.footer__label{
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
  margin-bottom:clamp(16px, 1.8vw, 22px);
}
.footer__col li + li{ margin-top:11px; }
.footer__col a{
  position:relative;
  display:inline-block;
  font-size:13.5px;
  line-height:1.5;
  color:rgba(255,255,255,.8);
  transition:color .4s var(--ease-soft);
}
/* Meme grammaire de soulignement que la navigation d'en-tete. */
.footer__col a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:var(--cherry);
  transform:scaleX(0); transform-origin:right;
  transition:transform .55s var(--ease);
}
.footer__col a[href]:hover{ color:#fff; }
.footer__col a[href]:hover::after{ transform:scaleX(1); transform-origin:left; }

.footer__bottom{
  margin-top:clamp(46px, 6vw, 88px);
  padding-top:clamp(20px, 2.4vw, 30px);
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px 28px;
  flex-wrap:wrap;
  font-size:12px;
  color:rgba(255,255,255,.45);
}
.footer__legal{ display:flex; gap:clamp(16px, 2vw, 28px); flex-wrap:wrap; }
.footer__legal a{ transition:color .4s var(--ease-soft); }
.footer__legal a[href]:hover{ color:#fff; }

/* Le focus clavier doit rester lisible sur fond noir. */
.footer :focus-visible{ outline-color:#fff; }

/* --------------------------------------------------------------------------
   15. Animations de révélation
   -------------------------------------------------------------------------- */
[data-reveal]{ --d:0s; }

[data-reveal="up"]{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 1.05s var(--ease) var(--d), transform 1.05s var(--ease) var(--d);
  will-change:opacity, transform;
}
[data-reveal="up"].is-in{ opacity:1; transform:none; }

/* Rideau blanc : evite d'appliquer un clip-path sur la cible observee
   (un clip-path sur l'element observe annule son intersection). */
[data-reveal="image"]::after{
  content:"";
  position:absolute; inset:0; z-index:3;
  background:var(--white);
  transform:translateY(0);
  transition:transform 1.05s var(--ease) var(--d);
}
[data-reveal="image"].is-in::after{ transform:translateY(-101%); }
[data-reveal="image"] img{
  transform:scale(1.05);
  transition:transform 1.55s var(--ease) var(--d);
}
[data-reveal="image"].is-in img{ transform:scale(1); }

/* Le trace du filet est porte par .domain__rule::before (voir section 10) ;
   seul le delai transite ici. */
[data-reveal="rule-v"]{ /* trace porte par .method__spine::before */ }
[data-reveal="arrow"]{ opacity:0; transition:opacity .8s var(--ease-soft) var(--d); }
[data-reveal="arrow"].is-in{ opacity:1; }

/* --------------------------------------------------------------------------
   15 bis. Amélioration progressive — l'état d'arrivée est le défaut
   --------------------------------------------------------------------------
   Les règles ci-dessus posent l'état d'ENTRÉE : opacité nulle, décalage, filet
   non tracé, rideau blanc sur l'image. C'est le script qui pose « is-in » pour
   amener chaque bloc à son état d'ARRIVÉE.

   Tant que ces états d'entrée étaient le défaut, tout ce qui empêchait le
   script d'aboutir laissait la page à moitié invisible : fichier non
   téléchargé, politique de sécurité, erreur de syntaxe, exception pendant
   l'initialisation. <noscript> ne couvre aucun de ces cas — il ne dépend que
   du réglage JavaScript du navigateur, pas de la réussite d'un script.

   Le défaut est donc inversé. « nf-anime » est posée sur <html> par un script
   en ligne dans <head>, avant le premier rendu — l'animation est identique au
   pixel près quand tout fonctionne. Elle est retirée dès qu'une exception
   remonte depuis theme.js, ou si le moteur n'a pas confirmé son initialisation
   au bout d'une seconde et demie. Sans elle, la page est simplement entière.

   « !important » n'est pas un raccourci. Ce bloc est le filet : sa promesse
   est que le contenu reste lisible quoi qu'il arrive, et cette promesse ne
   doit pas dépendre du poids qu'aura demain une règle voisine. Il l'emporte
   donc par construction, et non par un calcul de spécificité qui se referait
   à chaque évolution de la feuille.

   Une seule exception, volontaire : la seconde couche du filet de la méthode,
   dont la longueur se calcule au défilement. Sans script elle vaut zéro, et la
   révéler afficherait un trait de zéro pixel.

   Cette feuille ne couvre QUE ses propres états d'entrée. « Pourquoi nous ? »,
   Services et Tarifs déclarent les leurs, et les rattrapent chacune dans sa
   feuille : l'accueil n'a pas à connaître les autres pages.
   -------------------------------------------------------------------------- */
html:not(.nf-anime) [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
html:not(.nf-anime) [data-reveal="image"]::after{ transform:translateY(-101%) !important; }
html:not(.nf-anime) [data-reveal="image"] img{ transform:none !important; }
html:not(.nf-anime) .line__i{ transform:none !important; }
html:not(.nf-anime) .hl__bar{ transform:scaleX(1) !important; }
html:not(.nf-anime) .hero__frame{ clip-path:inset(0 0 0 0) !important; }
html:not(.nf-anime) .arrow__path{ stroke-dashoffset:0 !important; }
html:not(.nf-anime) .domain__rule::before{ transform:scaleX(1) !important; }
html:not(.nf-anime) .method__spine::before{ transform:scaleY(1) !important; }
html:not(.nf-anime) .fmt__dot{ transform:scale(1) !important; }
html:not(.nf-anime) .hero__emblem,
html:not(.nf-anime) .contact__emblem{ opacity:.05 !important; }

/* --------------------------------------------------------------------------
   16. Réactivité
   -------------------------------------------------------------------------- */

/* Portables larges : navigation resserrée */
@media (max-width:1360px){
  .nav__list{ gap:clamp(11px, 1.3vw, 20px); }
  .nav__link{ font-size:10.5px; letter-spacing:.1em; }
  .brand img{ height:70px; }
}

/* Bascule vers le menu mobile */
@media (max-width:1150px){
  :root{ --header-h:96px; }
  .nav{ display:none; }
  .burger{ display:flex; }
  .header__actions{ gap:8px; }
  .brand img{ height:64px; }
  .header.is-scrolled .header__inner{ height:76px; }
  .header.is-scrolled .brand img{ height:52px; }
}

@media (max-width:1150px) and (min-width:781px){
  .btn--compact{ display:inline-flex; }
}

/* Tablette : hero empilé */
@media (max-width:980px){
  .hero{ padding-top:calc(var(--header-h) + 28px); }
  .hero__grid{
    grid-template-columns:1fr;
    gap:clamp(38px, 7vw, 60px);
  }
  .hero__copy{ max-width:640px; }
  .hero__visual{
    justify-self:start;
    max-width:520px;
  }
  .hero__frame{ top:-22px; right:-22px; left:38%; bottom:40%; }
  .hero__rule{ display:none; }
  .hero__emblem{ top:auto; bottom:6%; right:-24%; width:min(104vw, 700px); }
  .hero__emblem.is-in{ opacity:.055; }

  /* Séquence des cerises : verticale */
  .philo__grid{
    grid-template-columns:1fr;
    row-gap:clamp(18px, 4vw, 34px);
    justify-items:center;
  }
  .arrow{
    margin-top:0;
    width:52px;
    transform:rotate(90deg);
    justify-self:center;
  }
  .step__body{ max-width:40ch; }
}

/* Index des domaines : index + titre sur une ligne, descripteur dessous */
@media (max-width:900px){
  .domains__head{ align-items:flex-start; }
  .domains__all{ margin-bottom:0; }
  .domain{
    grid-template-columns:44px minmax(0,1fr) 24px;
    grid-template-rows:auto auto auto;
    align-items:start;
    gap:0 clamp(12px, 3vw, 24px);
  }
  .domain__idx{ grid-column:1; grid-row:1; padding-top:.55em; }
  .domain__title{ grid-column:2; grid-row:1; }
  .domain__arrow{ grid-column:3; grid-row:1; margin-top:.5em; }
  .domain__desc{ grid-column:2; grid-row:2; margin-top:10px; max-width:44ch; }
  /* En colonne, la vignette se pose sous le texte : elle ne peut pas tenir
     a cote de l'intitule sans le faire passer a la ligne. */
  .domain__thumb{
    --thumb:60px;
    grid-column:2; grid-row:3;
    margin-top:16px;
  }
  .domain[href]:hover .domain__title{ transform:none; }
}

/* Pied de page */
@media (max-width:980px){
  .footer__top{ grid-template-columns:1fr; gap:clamp(40px, 6vw, 56px); }
}
@media (max-width:620px){
  .footer__nav{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:34px 24px; }
  .footer__bottom{ justify-content:flex-start; }
}

/* La bande des formats se replie par paliers ; des qu'elle occupe
   plusieurs rangees, le filet ne relie plus rien et redevient separateur. */
@media (max-width:900px){
  .academy__grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    row-gap:clamp(30px, 4vw, 46px);
    margin-top:clamp(34px, 4vw, 56px);
  }
  .academy__rule{ position:static; }
  .fmt__dot{ margin-bottom:16px; }
}
@media (max-width:560px){
  .academy__grid{ grid-template-columns:1fr; row-gap:26px; }
  .fmt__dot{ margin-bottom:12px; }
}

/* Sous 900px : la colonne de gauche ne colle plus, tout s'empile. */
@media (max-width:900px){
  .method__grid{ grid-template-columns:1fr; gap:clamp(38px, 7vw, 56px); }
  .method__aside{ position:static; max-width:38rem; }
  .method__steps{ padding-left:clamp(22px, 5vw, 34px); }
  .mstep{ grid-template-columns:1fr; gap:10px; }
  .mstep__num{ font-size:1.1rem; }
  .mstep::before{ left:calc(clamp(22px, 5vw, 34px) * -1 - .5px); top:.5em; }
}

/* Appareils sans survol : la vignette est simplement posee dans la ligne.
   Aucun depliant, aucune tape a apprendre — la lecture reste immediate. */
@media (hover:none), (pointer:coarse){
  .domain__thumb{ opacity:1; }
  .domain__thumb img{ transform:scale(1); }
}

/* Mobile */
@media (max-width:780px){
  .header__actions .btn--compact{ display:none; }
  .hero__title{ font-size:clamp(2.2rem, 10vw, 3.2rem); }
  .hero__actions{ gap:18px; }
  .btn{ padding:17px 28px; }
  .btn--ghost{ padding:17px 4px; }
  .clients{ gap:12px; }
  .clients__list{ --sep:20px; }
  .clients__list li:not(:last-child)::after{ display:none; }
  .philo{ --media-h: clamp(196px, 56vw, 262px); }
  .domain__title{ font-size:clamp(1.2rem, 5.4vw, 1.45rem); }
  .domain__desc{ font-size:13.5px; }
  .step__body{ padding-top:22px; }
}

@media (max-width:520px){
  .hero__frame{ display:none; }
  .hero__visual{ max-width:none; }
  .philo__title{ font-size:clamp(1.75rem, 8.4vw, 2.4rem); }
}

/* RESP-02 — écart d'accessibilité déclaré.
   « Démarrer une conversation » tenait sur une ligne insécable : 311px de
   large, quelle que soit la place. Sous 351px de fenêtre, le bouton sortait
   de sa colonne et la page se mettait à défiler latéralement — alors que
   320px est la largeur minimale où le contenu doit se reformer (WCAG 1.4.10).
   Au-dessus de 380px, rien ne change : le libellé tient déjà sur sa ligne. */
@media (max-width:380px){
  .btn{
    max-width:100%;
    white-space:normal;
    text-align:center;
  }
  .btn__label{ text-wrap:balance; }
}

/* --------------------------------------------------------------------------
   16 bis. Navigation de secours
   --------------------------------------------------------------------------
   Sous 1150px, la navigation se replie derrière un bouton — et ce bouton n'est
   rien sans le script. Fichier absent, erreur d'analyse, exception avant que le
   menu ne soit câblé : le bouton s'affichait et ne faisait rien. Il ne restait
   AUCUNE navigation d'en-tête ; seuls les cinq liens du pied, tout en bas d'une
   page longue.

   « nf-nav » est posée dans <head> et retirée seulement si la navigation n'est
   jamais devenue prête. Elle est distincte de « nf-anime » : une erreur
   d'animation, ou une erreur tierce survenue APRÈS le câblage du menu, ne
   transforme pas l'en-tête.

   Ce n'est pas une cinquième composition : ce sont les rubriques déjà
   présentes dans le document, dépliées. Mêmes libellés, mêmes destinations,
   même typographie, mêmes jetons. Le bouton inerte disparaît, l'écran de menu
   ne s'ouvre jamais, et « Nafrini Academy » reste un libellé tant que son
   adresse est vide.

   L'en-tête quitte alors le survol : il reprend sa place dans le flux et
   grandit autant qu'il le faut. « --header-h » tombe à zéro, ce qui retire
   d'un coup la compensation que toutes les premières sections lui réservaient
   — sur les quatre pages, sans qu'aucune ait à le savoir.
   -------------------------------------------------------------------------- */
@media (max-width:1150px){
  html:not(.nf-nav){ --header-h:0px; }

  html:not(.nf-nav) .header{ position:static; }
  html:not(.nf-nav) .header__inner{
    height:auto;
    flex-wrap:wrap;
    padding-block:18px;
    row-gap:14px;
  }

  html:not(.nf-nav) .burger{ display:none; }

  /* Le logo et l'appel a l'action gardent leur ligne ; la navigation prend la
     suivante. Sans « order », la liste a 100 % couperait le rang en trois. */
  html:not(.nf-nav) .header__actions{ order:1; }
  html:not(.nf-nav) .nav{ display:block; width:100%; order:2; }
  html:not(.nf-nav) .nav__list{
    flex-wrap:wrap;
    column-gap:clamp(14px, 3.4vw, 28px);
    row-gap:10px;
  }

  /* LE SCRIPT PEUT ÊTRE VIVANT ET LA NAVIGATION MALGRÉ TOUT EN REPLI : un
     theme.js qui arrive après le chien de garde sur une connexion lente, une
     politique de sécurité qui bloque l'amorce en ligne alors qu'elle laisse
     passer le fichier, une exception tierce qui retire la classe avant que le
     menu ne se câble. La boucle de défilement pose alors « is-scrolled » sur
     un en-tête qui n'est plus flottant, et sa hauteur fixe reprenait le
     dessus : l'en-tête retombait de 182 à 76px, les cinq rubriques restaient
     peintes en dehors de lui, recouvertes par la première section et
     inatteignables au clic. Elles ne revenaient qu'en remontant tout en haut.

     L'état « défilé » n'a aucun sens pour un en-tête resté dans le flux : il
     ne peut ni se détacher, ni se retasser. On lui rend sa hauteur réelle et
     son logo. */
  html:not(.nf-nav) .header.is-scrolled .header__inner{ height:auto; }
  html:not(.nf-nav) .header.is-scrolled .brand img{ height:64px; }
}

/* --------------------------------------------------------------------------
   17. Mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  [data-reveal="image"]::after{ display:none !important; }
  .hero__emblem{ opacity:.052 !important; transform:rotate(-6deg) !important; }
  .contact__emblem{ opacity:.042 !important; transform:translate(-50%, -50%) rotate(5deg) !important; }
  .fmt__dot{ transform:scale(1) !important; }
  .hero__frame{ clip-path:none !important; }
  [data-reveal="image"] img{ transform:none !important; }
  .line__i{ transform:none !important; }
  .hl__bar{ transform:scaleX(1) !important; }
  .arrow__path{ stroke-dashoffset:0 !important; }
  .domain__thumb img{ transform:none !important; }
  .method__spine::before{ transform:scaleY(1) !important; }
  .method__spine::after{ transform:scaleY(1) !important; opacity:1 !important; }
  .mstep::before{ transform:translateX(-2px) !important; }
}

/* --------------------------------------------------------------------------
   12. Ajouts du thème — invisibles à l'écran
   --------------------------------------------------------------------------
   Tout ce qui précède est la feuille approuvée, octet pour octet. Ce bloc
   n'ajoute que ce qui ne se voit pas et ne restyle AUCUN sélecteur de la
   maquette. La suite de vérification du projet contrôle les deux points à
   chaque passage.

   « screen-reader-text » est émise par searchform.php et par le cœur de
   WordPress (pagination, formulaire de commentaire, liens d'évitement).
   Sans règle, ces textes réservés aux lecteurs d'écran s'affichent
   normalement — l'étiquette « Rechercher » apparaissait au-dessus du champ.

   La technique du rognage plutôt que « left:-9999px » : elle n'entraîne pas
   de défilement horizontal et se comporte correctement en écriture de droite
   à gauche.
   -------------------------------------------------------------------------- */
.screen-reader-text{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

/* Un élément focusable ainsi masqué doit redevenir visible au clavier.
   Même traitement que le lien d'évitement, pour rester cohérent. */
.screen-reader-text:focus{
  position:fixed; left:12px; top:12px; z-index:200;
  width:auto; height:auto;
  margin:0; padding:12px 20px;
  overflow:visible;
  clip:auto; clip-path:none;
  white-space:normal;
  background:var(--ink); color:#fff; font-size:13px;
}

/* --------------------------------------------------------------------------
   13. Échelle typographique des pages internes
   --------------------------------------------------------------------------
   Des variables, donc rien de visible par elles-mêmes : ce bloc n'affiche
   aucun pixel et ne modifie aucune règle approuvée. Il NOMME les tailles que
   la page d'accueil emploie déjà, pour que les pages internes s'y réfèrent
   au lieu de les recopier.

   Une seule source pour toute la typographie du site : une page interne
   n'invente ni famille, ni échelle, ni langage. Chaque jeton renvoie à un
   rôle existant de la maquette approuvée :

     --nf-titre-fort   .hero__title
     --nf-titre        .philo__title / .domains__title
     --nf-declaration  .academy__title
     --nf-emphase      .mstep__title
     --nf-enonce       .step__lead   — énoncé éditorial, Newsreader
     --nf-corps        .hero__lead   — texte courant, Jost
     --nf-meta         .fmt__desc    — information secondaire
     --nf-etiquette    .eyebrow      — étiquette en capitales
   -------------------------------------------------------------------------- */
:root{
  --nf-titre-fort:  clamp(2.6rem, 5.4vw, 5.6rem);
  --nf-titre:       clamp(2rem, 3.9vw, 3.9rem);
  --nf-declaration: clamp(1.9rem, 3.5vw, 3.4rem);
  --nf-emphase:     clamp(1.4rem, 2.3vw, 2.1rem);
  --nf-enonce:      clamp(17px, 1.5vw, 21px);
  --nf-corps:       clamp(15px, 1.08vw, 17px);
  --nf-meta:        13.5px;
  --nf-etiquette:   10.5px;
}