/* ===================================================================
   NOQTA — VITRINE PUBLIQUE
   Direction : « Encre & Safran, plein cadre »

   POURQUOI CETTE FEUILLE NE RESSEMBLE PLUS À CELLE DE L'APPLICATION
   ------------------------------------------------------------------
   La v1 de cette vitrine reprenait le socle CSS de la console « pour la
   cohérence ». C'était le mauvais critère, et le fondateur l'a rejetée :
   une console se LIT tous les jours (contraste doux, colonne unique,
   zones égales, safran réservé aux accents) ; une vitrine se TRAVERSE
   une fois et doit convaincre en trois secondes.

   Ce qui reste de Noqta, et le rend reconnaissable :
     - l'encre, la crème, le safran ;
     - Bricolage Grotesque / Public Sans / Spline Sans Mono ;
     - le point safran, signature de la marque.

   Ce qui change, et qui est assumé :
     1. Le safran n'est plus un accent timide. Il porte un aplat entier
        (l'appel final), le soulignement du titre d'affiche, la duotone
        des photographies. Dans un tableau de bord ce serait du bruit ;
        sur une affiche c'est la marque qui parle fort.
     2. La colonne unique cède au plein cadre : photographies pleine
        largeur, captures produit qui débordent des sections.
     3. Échelle d'affiche : le titre monte à 104 px, en Bricolage
        resserré (font-stretch 82 % — la police est variable, ça ne
        coûte pas un octet de plus).
     4. Rythme alterné encre → crème → photo → encre → safran, jamais
        six sections identiques à la suite.

   Ce qui NE change pas : aucune ressource externe (les en-têtes de
   sécurité du site les bloquent), tout est auto-hébergé.
   =================================================================== */

/* --- 1. Jetons ----------------------------------------------------- */
:root{
  color-scheme: light;

  --f-titre:"Bricolage Grotesque","Public Sans",system-ui,sans-serif;
  --f-texte:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-chiffre:"Spline Sans Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Encre : plus profonde que celle de la console. Sur une affiche, le
     noir doit être un vrai noir, pas un gris de lecture confortable. */
  --encre:#0C1324;
  --encre-2:#131A2E;
  --encre-3:#1D273F;

  --papier:#F7F4EC;
  --papier-2:#EFEADF;
  --papier-3:#E5DFD0;

  --rule:#E2DCCC;
  --rule-2:#CBC3AE;

  --txt:#0C1324;
  --txt-2:#3A414D;
  --txt-3:#5E6675;

  --acc:#E8830C;
  --acc-clair:#F5A63C;
  --acc-txt:#8F4D05;
  --acc-titre:#B3600A;
  --acc-voile:#FBEEDA;

  --ok:#2F7A4D;    --ok-voile:#E1EFE7;
  --info:#1A6A80;  --info-voile:#DFEDF1;

  --sur-encre:#F7F4EC;
  --sur-encre-2:rgba(247,244,236,.72);
  --sur-encre-3:rgba(247,244,236,.48);

  --focus:#E8830C;
  --ombre:rgba(10,17,32,.22);

  /* Espacement : mêmes 8 crans que la console, mais les crans hauts
     sont plus généreux — une affiche respire plus qu'un tableau. */
  --e1:4px;
  --e2:8px;
  --e3:14px;
  --e4:22px;
  --e5:32px;
  --e6:52px;
  --e7:80px;
  --e8:120px;

  --h-tete:72px;

  --colonne:1180px;
  --colonne-large:1440px;
  --mesure:64ch;

  --duree:.5s;
  --courbe:cubic-bezier(.16,.68,.24,1);
}

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

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--papier);
  color:var(--txt);
  font-family:var(--f-texte);
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,dl,dd,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0}
li{list-style:none}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none !important}

:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
/* Sur l'aplat safran, un contour safran ne se verrait pas. */
.appel :focus-visible{outline-color:var(--encre)}
::selection{background:var(--acc);color:#0C1324}

.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Sur-titre : jamais un titre, toujours un repère. */
.micro{font:600 11px/1 var(--f-texte);letter-spacing:.13em;text-transform:uppercase;color:var(--txt-3)}
.mono{font-family:var(--f-chiffre);font-variant-numeric:tabular-nums}

/* Le point : la signature. */
.pt{width:7px;height:7px;border-radius:50%;background:var(--acc);flex:0 0 7px;display:inline-block}
.pt--fort{width:9px;height:9px;flex-basis:9px}

.colonne{max-width:var(--colonne);margin:0 auto;padding:0 var(--e5)}
.colonne--large{max-width:var(--colonne-large)}
.colonne--mesure{max-width:calc(var(--mesure) + 2 * var(--e5))}

/* --- 3. Boutons ---------------------------------------------------- */
.btn{
  appearance:none;cursor:pointer;white-space:nowrap;display:inline-flex;
  align-items:center;justify-content:center;gap:9px;text-decoration:none;
  font:650 16px/1 var(--f-texte);letter-spacing:.005em;
  padding:17px 28px;border-radius:3px;
  border:1px solid var(--rule-2);background:transparent;color:var(--txt);
  transition:background .18s var(--courbe),border-color .18s var(--courbe),
             color .18s var(--courbe),transform .18s var(--courbe),
             box-shadow .18s var(--courbe);
}
.btn:hover{background:var(--papier-2);border-color:var(--txt-3);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

/* Le CTA : l'aplat safran. Sur une vitrine il a le droit d'être gros. */
.btn--cta{
  background:var(--acc);border-color:var(--acc);color:#0C1324;
  box-shadow:0 10px 30px -14px rgba(232,131,12,.85);
}
.btn--cta:hover{
  background:var(--acc-clair);border-color:var(--acc-clair);color:#0C1324;
  box-shadow:0 16px 40px -14px rgba(232,131,12,.95);
}

/* Bouton posé sur l'encre : le fantôme s'éclaircit au lieu de s'assombrir. */
.btn--clair{border-color:rgba(247,244,236,.36);color:var(--sur-encre)}
.btn--clair:hover{background:rgba(247,244,236,.10);border-color:rgba(247,244,236,.66);color:var(--sur-encre)}

/* Bouton posé sur l'aplat safran. */
.btn--encre{background:var(--encre);border-color:var(--encre);color:var(--sur-encre)}
.btn--encre:hover{background:var(--encre-3);border-color:var(--encre-3);color:var(--sur-encre)}
.btn--creux{border-color:rgba(10,17,32,.30);color:var(--encre);background:transparent}
.btn--creux:hover{background:rgba(10,17,32,.07);border-color:rgba(10,17,32,.55);color:var(--encre)}

.btn--min{padding:11px 17px;font-size:14px}

/* Lien fléché : la flèche avance au survol. Un signal, pas une animation. */
/* `min-height:24px` : une cible autonome (hors lien inline dans un
   paragraphe) doit rester atteignable au doigt — a 15 px et line-height 1,
   ces liens ne faisaient que 15 px de haut. */
.lien-fleche{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  min-height:24px;
  font:650 15px/1.4 var(--f-texte);color:var(--acc-txt);
}
.lien-fleche::after{content:"→";transition:transform .22s var(--courbe)}
.lien-fleche:hover::after{transform:translateX(5px)}

/* --- 4. Étiquettes -------------------------------------------------- */
.tag{
  display:inline-flex;align-items:center;gap:7px;
  font:650 11px/1 var(--f-texte);letter-spacing:.11em;text-transform:uppercase;
  padding:7px 11px;border-radius:2px;border:1px solid var(--rule-2);
  color:var(--txt-2);background:var(--papier-2);white-space:nowrap;
}
.tag--acc{color:var(--acc-txt);background:var(--acc-voile);border-color:transparent}
/* Posee sur une photographie, l'etiquette ne peut pas compter sur le fond :
   mesure au pixel, le safran translucide tombait a 3,5:1 sur les zones
   claires de l'image. Un fond encre OPAQUE rend le contraste deterministe
   — 9,5:1 — quelle que soit la photo qui passera dessous demain. */
.tag--clair{color:var(--acc-clair);background:var(--encre);
  border-color:rgba(232,131,12,.55)}

/* --- 5. En-tête ----------------------------------------------------- */
/* L'en-tête est transparent au-dessus de l'affiche encre, puis se pose
   sur un fond crème dès que la page défile. Le geste est piloté par
   `data-sommet` (vitrine.js), et conditionné à la classe `.js` : sans
   JavaScript, l'en-tête reste posé sur son fond crème du début à la fin —
   moins élégant au-dessus de l'affiche, mais jamais illisible. */
.tete{
  position:sticky;top:0;z-index:40;
  background:var(--papier);
  border-bottom:1px solid var(--rule);
  transition:background .3s var(--courbe),border-color .3s var(--courbe);
}
.tete__ligne{display:flex;align-items:center;gap:var(--e4);height:72px}

.js body[data-sommet="encre"] .tete{background:transparent;border-bottom-color:transparent}
.js body[data-sommet="encre"] .tete .marque__nom{color:var(--sur-encre)}
.js body[data-sommet="encre"] .tete .marque__tuile{background:var(--sur-encre);color:var(--encre)}
.js body[data-sommet="encre"] .tete__lien{color:var(--sur-encre-2)}
.js body[data-sommet="encre"] .tete__lien:hover{color:var(--sur-encre);background:rgba(247,244,236,.10)}
.js body[data-sommet="encre"] .tete__menu{color:var(--sur-encre);border-color:rgba(247,244,236,.36)}

.marque{display:flex;align-items:center;gap:11px;text-decoration:none}
.marque__tuile{
  position:relative;width:34px;height:34px;border-radius:4px;
  background:var(--encre);color:var(--papier);
  font:700 18px/34px var(--f-titre);text-align:center;letter-spacing:-.04em;
  transition:background .3s var(--courbe),color .3s var(--courbe);
}
.marque__tuile::after{content:"";position:absolute;right:4px;bottom:5px;width:5px;height:5px;
  border-radius:50%;background:var(--acc)}
.marque__nom{font:700 20px var(--f-titre);letter-spacing:-.03em;color:var(--txt);
  transition:color .3s var(--courbe)}

.tete__nav{display:flex;align-items:center;gap:var(--e1);margin-left:auto}
.tete__lien{
  text-decoration:none;color:var(--txt-2);font:550 14.5px/1 var(--f-texte);
  padding:10px 13px;border-radius:3px;transition:color .18s,background .18s;
}
.tete__lien:hover{color:var(--txt);background:var(--papier-2)}
.tete__nav .btn{margin-left:var(--e3)}
.tete__menu{display:none}

@media (max-width:900px){
  .tete__menu{
    display:inline-flex;align-items:center;gap:8px;margin-left:auto;
    appearance:none;cursor:pointer;border:1px solid var(--rule-2);border-radius:3px;
    background:transparent;color:var(--txt);font:650 12px/1 var(--f-texte);
    letter-spacing:.08em;text-transform:uppercase;padding:11px 14px;
  }
  .tete__nav{
    display:none;position:absolute;left:0;right:0;top:72px;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:var(--papier);border-bottom:1px solid var(--rule-2);
    box-shadow:0 30px 70px -38px var(--ombre);
    padding:var(--e2) var(--e5) var(--e4);
  }
  .tete__nav[data-ouvert="1"]{display:flex}
  /* Menu déplié : on est sur un fond crème même si l'affiche est encre. */
  .js body[data-sommet="encre"] .tete__nav[data-ouvert="1"] .tete__lien{color:var(--txt-2)}
  .tete__lien{padding:15px 4px;border-bottom:1px solid var(--rule);font-size:16px}
  .tete__lien:last-of-type{border-bottom:0}
  .tete__nav .btn{margin:var(--e3) 0 0}
}

/* ===================================================================
   6. L'AFFICHE — le sommet qui frappe
   ===================================================================
   Encre pleine page, photographie d'atmosphère en duotone très sombre,
   titre d'affiche. La capture produit posée en dessous chevauche la
   frontière encre/crème : c'est elle qui tire l'œil vers le bas.       */
.affiche{
  position:relative;isolation:isolate;
  margin-top:calc(-1 * var(--h-tete));
  background:var(--encre);color:var(--sur-encre);
  padding:calc(var(--e8) + var(--h-tete)) 0 var(--e8);
  overflow:hidden;
}

/* Le grain vit sur la SECTION, pas sur `.affiche__fond` : ce conteneur
   utilise deja ses deux pseudo-elements pour la duotone et le voile. */
.affiche::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.14;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.42'/%3E%3C/svg%3E");
}

/* Le fond : la photo est mise en duotone encre → safran par mélange.
   Le conteneur porte le dégradé de marque, l'image ne donne que sa
   luminance. Une photo générique devient ainsi une image Noqta. */
/* La couleur de fond est le dernier recours ; chaque page pose PAR-DESSUS,
   en style en ligne, une vignette de 24 px encodee en base64 (~200 octets).
   Si la couche image n'est pas encore rasterisee, le visiteur voit une
   photo floue, jamais un rectangle noir. */
.affiche__fond{position:absolute;inset:0;z-index:-2;background:var(--encre);overflow:hidden}
.affiche__fond img{
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
  /* Le leger flou de ces fonds est CUIT dans le fichier (voir le
     pipeline d'images), pas applique ici : un `filter:blur()` sur une
     image de 1584 px recalculee a chaque image de parallaxe coute cher au
     compositeur, et peut n'etre pas encore rasterise au premier rendu —
     l'affiche apparait alors une fraction de seconde en aplat d'encre. */
  filter:saturate(1.04) contrast(1.03) brightness(.94);
  transform:scale(1.10);
  /* PAS de `will-change:transform` ici. Il promeut l'image en couche GPU
     des le chargement ; tant que cette couche n'est pas rasterisee, c'est
     le fond du conteneur qui se voit — une affiche en aplat d'encre au
     premier rendu, mesuree sur un navigateur froid (ecart-type 1,6 au
     lieu de 30 sur une vraie photo). La parallaxe pose un `translate3d`
     quand elle en a besoin : le navigateur promeut a ce moment-la, ce qui
     est exactement le bon moment. */
}
.affiche__fond::before{
  content:"";position:absolute;inset:0;z-index:1;
  /* Un simple liant de marque : assez de safran pour que la photo soit
     une image Noqta, trop peu pour qu'on remarque le filtre. */
  background:linear-gradient(150deg,rgba(232,131,12,.12) 0%,rgba(10,17,32,.10) 100%);
  mix-blend-mode:multiply;
}
/* Le voile : sans lui, un titre sur photo n'est pas lisible. Il est
   plus dense à gauche, là où vit le texte. */
.affiche__fond::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(100deg,rgba(10,17,32,.93) 0%,rgba(10,17,32,.88) 32%,rgba(10,17,32,.66) 54%,
      rgba(10,17,32,.30) 76%,rgba(10,17,32,.24) 100%),
    linear-gradient(to bottom,rgba(10,17,32,.58) 0%,rgba(10,17,32,0) 34%,
      rgba(10,17,32,.34) 72%,rgba(10,17,32,.74) 100%);
}

.affiche__corps{position:relative;z-index:1;max-width:var(--colonne)}

.affiche__oeil{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:var(--e5)}
.affiche__oeil .micro{color:var(--sur-encre-3)}

/* Le titre d'affiche : Bricolage resserré (la police est variable, la
   largeur 82 % ne coûte rien) et très gros. C'est le geste central. */
.affiche h1{
  max-width:15ch;
  font-family:var(--f-titre);
  font-weight:700;
  font-stretch:82%;
  font-size:clamp(46px,7.6vw,104px);
  line-height:.96;
  letter-spacing:-.035em;
  color:var(--sur-encre);
}
/* Le second membre du titre passe en safran : c'est là que se joue
   l'opposition (« votre école » / « pas vos tableurs »). */
.affiche h1 .safran{color:var(--acc-clair);display:block}
.affiche h1 .safran::after{
  content:"";display:inline-block;width:.13em;height:.13em;border-radius:50%;
  background:var(--acc);margin-left:.1em;vertical-align:.06em;
}

.affiche__chapo{
  max-width:54ch;margin-top:var(--e5);
  font-size:clamp(17px,1.75vw,21px);line-height:1.55;
  color:var(--sur-encre-2);
}
.affiche__chapo b{color:var(--sur-encre);font-weight:650}

.affiche__actes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3);margin-top:var(--e6)}

/* Les gages : quatre faits vérifiables, en mono, sur une ligne. Ce sont
   les seuls « chiffres » de la page — aucun n'est inventé. */
.affiche__gages{
  display:flex;flex-wrap:wrap;gap:var(--e3) var(--e6);
  margin-top:var(--e6);padding-top:var(--e4);
  border-top:1px solid rgba(247,244,236,.16);
}
.affiche__gages li{
  display:flex;align-items:center;gap:9px;
  font:400 13px/1.4 var(--f-chiffre);color:var(--sur-encre-2);
}
.affiche__gages li .pt{width:5px;height:5px;flex-basis:5px}

/* L'aiguillage : douze mots pour les segments secondaires (centre de
   formation, indépendant) — le message principal vise le directeur,
   cette ligne évite aux autres de lire la moitié de la page avant de
   savoir que leur porte existe. Discret à dessein. */
.affiche__aiguillage{
  margin-top:var(--e4);
  font:400 14px/1.5 var(--f-texte);color:var(--sur-encre-3);
}
.affiche__aiguillage a{
  color:var(--sur-encre-2);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px;
}
.affiche__aiguillage a:hover{color:var(--acc-clair)}

/* ===================================================================
   7. LA SCÈNE — la capture produit à cheval sur deux fonds
   ===================================================================
   Le dégradé à arête franche coupe la section : encre en haut, crème en
   bas. La capture est posée dessus, elle traverse la frontière. C'est
   le seul endroit de la page où l'on triche avec un fond, et c'est
   exactement ce qu'une vitrine a le droit de faire.                    */
.scene{
  position:relative;
  background:linear-gradient(to bottom,var(--encre) 0,var(--encre) 34%,var(--papier) 34%,var(--papier) 100%);
  padding-bottom:var(--e6);
}
.scene__plan{position:relative;max-width:var(--colonne-large);margin:0 auto;padding:0 var(--e5)}

.scene__ecran{
  position:relative;margin:0;border-radius:6px;overflow:hidden;
  background:var(--papier);
  border:1px solid rgba(247,244,236,.14);
  box-shadow:0 60px 120px -50px rgba(10,17,32,.75),0 12px 40px -20px rgba(10,17,32,.45);
}
/* Le liseré safran au ras du cadre : la marque signe la capture. */
.scene__ecran::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--acc) 0%,var(--acc-clair) 42%,transparent 100%);
}
.scene__ecran img{width:100%;display:block}

/* Le détail : un VRAI recadrage d'un VRAI écran, posé en surimpression.
   Pas une maquette — un morceau du produit, montré de plus près. */
.scene__detail{
  position:absolute;right:calc(var(--e5) - 22px);bottom:-140px;width:min(34%,400px);
  margin:0;border-radius:5px;overflow:hidden;background:var(--papier);
  border:1px solid var(--rule);
  box-shadow:0 40px 80px -34px rgba(10,17,32,.55);
}
.scene__detail img{width:100%;display:block}
.scene__detail figcaption{
  padding:9px 14px;border-top:1px solid var(--rule);background:var(--papier-2);
  font:400 11px/1.45 var(--f-chiffre);color:var(--txt-3);
}

.scene__legende{
  max-width:var(--colonne-large);margin:calc(var(--e8) + 46px) auto 0;padding:0 var(--e5);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px var(--e4);
  font:400 13px/1.5 var(--f-chiffre);color:var(--txt-3);
}
.scene__legende b{font-family:var(--f-texte);font-weight:650;color:var(--txt-2)}

@media (max-width:900px){
  .scene{background:linear-gradient(to bottom,var(--encre) 0,var(--encre) 20%,var(--papier) 20%,var(--papier) 100%)}
  .scene__detail{position:relative;right:auto;bottom:auto;width:100%;margin-top:var(--e4)}
  .scene__legende{margin-top:var(--e5)}
}

/* ===================================================================
   8. ZONES & CHAPITRES
   =================================================================== */
.zone{padding:var(--e8) 0;position:relative}
.zone--feuille{background:var(--papier-2)}
.zone--encre{background:var(--encre);color:var(--sur-encre)}
.zone--serree{padding:var(--e7) 0}

/* L'en-tête de chapitre : un numéro en mono safran, un titre d'échelle
   éditoriale, une note. Le numéro remplace le point sur les grandes
   sections — le point reste pour les titres secondaires. */
.chapitre__tete{max-width:720px;margin-bottom:var(--e7)}
.chapitre__tete--large{max-width:980px}
.chapitre__num{
  display:flex;align-items:center;gap:12px;margin-bottom:var(--e4);
  font:500 12px/1 var(--f-chiffre);letter-spacing:.16em;text-transform:uppercase;
  color:var(--acc-txt);
}
.chapitre__num::after{content:"";height:1px;flex:1;background:var(--rule-2);max-width:120px}
.zone--encre .chapitre__num{color:var(--acc-clair)}
.zone--encre .chapitre__num::after{background:rgba(247,244,236,.22)}

.chapitre__tete h2{
  font-family:var(--f-titre);font-weight:700;font-stretch:88%;
  font-size:clamp(30px,4.6vw,58px);line-height:1.03;letter-spacing:-.03em;
  max-width:14em;color:var(--txt);
}
.zone--encre .chapitre__tete h2{color:var(--sur-encre)}
.chapitre__tete h2 .safran{color:var(--acc-titre)}
.zone--encre .chapitre__tete h2 .safran{color:var(--acc-clair)}

.chapitre__note{margin-top:var(--e4);font-size:18px;line-height:1.6;color:var(--txt-3);max-width:34em}
.zone--encre .chapitre__note{color:var(--sur-encre-2)}

/* Titre de section secondaire : le point safran revient ici. */
.zone__tete{max-width:var(--mesure);margin-bottom:var(--e6)}
.zone__tete h2{
  display:flex;align-items:flex-start;gap:14px;
  font-family:var(--f-titre);font-weight:700;font-stretch:90%;
  font-size:clamp(26px,3.6vw,40px);line-height:1.1;letter-spacing:-.025em;color:var(--txt);
}
.zone__tete h2 .pt{margin-top:.5em}
.zone--encre .zone__tete h2{color:var(--sur-encre)}
.zone__note{margin-top:var(--e3);font-size:17px;color:var(--txt-3)}
.zone--encre .zone__note{color:var(--sur-encre-2)}

/* ===================================================================
   9. PHOTOGRAPHIES
   ===================================================================
   Deux traitements, deux usages :
   - `.photo--marque` : duotone encre/safran, forte. Réservée aux
     images qui portent du texte par-dessus — elle garantit le contraste
     ET rend l'image reconnaissable comme une image Noqta.
   - `.photo--chaude` : la photo reste elle-même, à peine réchauffée.
     Utilisée quand l'image EST le sujet (l'atmosphère d'une école) et
     qu'une duotone la rendrait décorative.                             */
.photo{position:relative;overflow:hidden;background:var(--encre-2);isolation:isolate}
.photo img{width:100%;height:100%;object-fit:cover;display:block}

.photo--marque{background:linear-gradient(150deg,#9A5D11 0%,#0F1830 74%)}
.photo--marque img{filter:grayscale(1) contrast(1.12) brightness(.92);mix-blend-mode:luminosity;opacity:.86}

.photo--chaude img{filter:saturate(.92) contrast(1.04)}
/* Un voile safran très léger : assez pour lier toutes les photos entre
   elles, trop peu pour qu'on le remarque. */
.photo--chaude::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(232,131,12,.13) 0%,rgba(10,17,32,.10) 100%);
  mix-blend-mode:multiply;
}

.photo--grain::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.30;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.42'/%3E%3C/svg%3E");
}

/* ===================================================================
   10. DIPTYQUE — une photo, un propos, côte à côte
   =================================================================== */
.diptyque{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e7);align-items:center}
.diptyque--inverse .diptyque__image{order:2}
.diptyque__image{border-radius:5px;overflow:hidden;aspect-ratio:4/3;
  box-shadow:0 50px 90px -50px var(--ombre)}
.zone--encre .diptyque__image{box-shadow:0 50px 90px -46px rgba(0,0,0,.8)}
.diptyque__dire{max-width:560px}

@media (max-width:900px){
  .diptyque{grid-template-columns:1fr;gap:var(--e6)}
  .diptyque--inverse .diptyque__image{order:0}
}

/* La grande phrase éditoriale : le seul endroit où l'on écrit gros sans
   être un titre. Elle porte l'agacement du lecteur, pas une promesse. */
.dire-fort{
  font-family:var(--f-titre);font-weight:600;font-stretch:92%;
  font-size:clamp(22px,2.6vw,32px);line-height:1.25;letter-spacing:-.02em;
  color:var(--txt);
}
.zone--encre .dire-fort{color:var(--sur-encre)}
.dire-fort em{font-style:normal;color:var(--acc-titre)}
.zone--encre .dire-fort em{color:var(--acc-clair)}

/* ===================================================================
   11. LA PREUVE — les captures produit, en grand
   ===================================================================
   Alternées, presque pleine largeur, avec une affirmation courte. Ce
   sont de vraies captures de l'école de démonstration : ce que le
   lecteur voit ici est exactement ce qu'il aura.                       */
.preuve{display:grid;gap:var(--e8)}
.preuve__bloc{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);
  gap:var(--e6) var(--e6);align-items:center}
.preuve__bloc:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.75fr)}
.preuve__bloc:nth-child(even) .preuve__vue{order:2}
.preuve__vue{
  position:relative;margin:0;border-radius:6px;overflow:hidden;
  background:var(--papier);border:1px solid rgba(247,244,236,.12);
  box-shadow:0 60px 110px -52px rgba(0,0,0,.85);
}
.preuve__vue::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--acc) 0%,var(--acc-clair) 42%,transparent 100%);
}
.preuve__vue img{width:100%;display:block}
.preuve__dire h3{
  font-family:var(--f-titre);font-weight:700;font-stretch:90%;
  font-size:clamp(23px,2.6vw,33px);line-height:1.12;letter-spacing:-.025em;
  color:var(--sur-encre);
}
.preuve__dire p{margin-top:var(--e4);font-size:17px;line-height:1.6;color:var(--sur-encre-2);max-width:34em}
.preuve__dire .micro{color:var(--acc-clair);display:block;margin-bottom:var(--e3)}

@media (max-width:980px){
  .preuve{gap:var(--e7)}
  .preuve__bloc,
  .preuve__bloc:nth-child(even){grid-template-columns:minmax(0,1fr)}
  .preuve__bloc:nth-child(even) .preuve__vue{order:0}
}

/* ===================================================================
   12. LE BANDEAU — photographie pleine largeur, une phrase dessus
   ===================================================================
   Le seul moment purement émotionnel de la page. Il fait la charnière
   entre « voici l'outil » et « voici pourquoi on est sérieux sur vos
   données ».                                                           */
.bandeau{position:relative;isolation:isolate;overflow:hidden;
  min-height:min(64vh,560px);display:flex;align-items:center;
  background:var(--encre);color:var(--sur-encre)}
.bandeau > .colonne{width:100%}
.bandeau__fond{position:absolute;inset:0;z-index:-1}
.bandeau__fond img{width:100%;height:100%;object-fit:cover;object-position:center 55%;
  filter:saturate(1.3) contrast(1.06) brightness(.88)}
.bandeau__fond::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(95deg,rgba(10,17,32,.92) 0%,rgba(10,17,32,.70) 44%,rgba(10,17,32,.24) 100%),
    linear-gradient(200deg,rgba(154,93,17,.16) 0%,rgba(10,17,32,.06) 60%);
}
.bandeau__mot{max-width:720px;padding:var(--e8) 0}
.bandeau__cri{
  font-family:var(--f-titre);font-weight:600;font-stretch:88%;
  font-size:clamp(26px,3.8vw,48px);line-height:1.1;letter-spacing:-.03em;
  max-width:13em;color:var(--sur-encre);
}
.bandeau__cri em{font-style:normal;color:var(--acc-clair)}
.bandeau__suite{margin-top:var(--e5);font-size:17px;line-height:1.6;color:var(--sur-encre-2);max-width:36em}

/* ===================================================================
   13. LES TROIS PORTES
   ===================================================================
   Toujours trois liens, mais avec une image : le lecteur se reconnaît
   à l'atmosphère avant de lire le titre.                               */
.portes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e4)}
.porte{
  display:flex;flex-direction:column;
  border:1px solid var(--rule);border-radius:5px;overflow:hidden;
  background:var(--papier);text-decoration:none;
  transition:border-color .24s var(--courbe),transform .24s var(--courbe),
             box-shadow .24s var(--courbe);
}
.porte:hover{border-color:var(--acc);transform:translateY(-4px);
  box-shadow:0 34px 60px -40px var(--ombre)}
.porte__vue{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--papier-3)}
.porte__vue img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--courbe)}
.porte:hover .porte__vue img{transform:scale(1.05)}
.porte__dire{display:flex;padding:var(--e5) var(--e4) var(--e4);flex-direction:column;
  gap:var(--e2);flex:1}
.porte__qui{display:flex;align-items:center;gap:10px;
  font-family:var(--f-titre);font-weight:700;font-stretch:92%;
  font-size:19px;line-height:1.2;letter-spacing:-.02em;color:var(--txt)}
.porte p{font-size:15px;line-height:1.55;color:var(--txt-3)}
.porte__suite{margin-top:auto;padding-top:var(--e4);
  font:650 14px/1 var(--f-texte);color:var(--acc-txt);
  display:inline-flex;align-items:center;gap:8px;transition:gap .22s var(--courbe)}
.porte:hover .porte__suite{gap:13px}

/* Variante TYPOGRAPHIQUE (fondateur, 2026-09-02) : une porte est un
   element de NAVIGATION — le nom du segment en tres grand, une ligne qui
   dit a qui elle parle, le point safran comme seul signe. Zero image :
   les photos faisaient banque d'images, la bichromie a ete refusee. */
.porte--typo{padding:var(--e5) var(--e4) var(--e4);gap:var(--e4)}
.porte__typo{display:flex;flex-direction:column;gap:var(--e3);flex:1}
.porte--typo .porte__ligne{display:flex;align-items:center;gap:10px;
  font:400 15px/1.4 var(--f-texte);color:var(--txt-2)}
.porte--typo .porte__nom{font-family:var(--f-titre);font-weight:650;font-stretch:82%;
  font-size:clamp(34px,3.1vw,44px);line-height:1.02;letter-spacing:-.03em;
  color:var(--txt)}
.porte--typo .porte__couvre{margin-top:var(--e2);font-size:15px;line-height:1.55;
  color:var(--txt-3)}

@media (max-width:980px){.portes{grid-template-columns:minmax(0,1fr)}}

/* ===================================================================
   14. FAITS — les rangées d'arguments courts
   =================================================================== */
.faits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e5) var(--e7)}
.fait{display:flex;gap:14px;align-items:baseline}
.fait .pt{position:relative;top:-2px}
.fait b{display:block;font-family:var(--f-titre);font-weight:650;font-stretch:94%;
  font-size:17px;line-height:1.3;letter-spacing:-.01em;color:var(--txt);margin-bottom:5px}
.fait p{font-size:15px;line-height:1.55;color:var(--txt-3)}
.zone--encre .fait b{color:var(--sur-encre)}
.zone--encre .fait p{color:var(--sur-encre-2)}
@media (max-width:760px){.faits{grid-template-columns:1fr}}

/* Faits sur trois colonnes, avec un intitulé mono : la zone confiance. */
.gages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e5) var(--e4);
  border-top:1px solid rgba(247,244,236,.18);padding-top:var(--e5)}
.gage__cle{font:500 11px/1 var(--f-chiffre);letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc-clair);display:block;margin-bottom:var(--e3)}
.gage b{display:block;font-family:var(--f-titre);font-weight:650;font-stretch:94%;
  font-size:17px;line-height:1.3;color:var(--sur-encre);margin-bottom:6px}
.gage p{font-size:14.5px;line-height:1.55;color:var(--sur-encre-2)}
@media (max-width:980px){.gages{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.gages{grid-template-columns:1fr}}

/* Liste de corvées : elle doit se lire comme une plainte, pas comme un
   tableau. Un trait fin sépare les rangées, rien d'autre. */
.corvees{border-top:1px solid var(--rule-2)}
.corvees li{
  display:flex;align-items:flex-start;gap:var(--e4);
  padding:var(--e4) 0;border-bottom:1px solid var(--rule);
  font-size:16.5px;line-height:1.5;color:var(--txt-2);
}
.corvees li span:first-child{
  font:400 12px/1.6 var(--f-chiffre);color:var(--acc-txt);flex:0 0 34px;
  letter-spacing:.05em;
}

/* ===================================================================
   15. TARIFS
   =================================================================== */
.formules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e4)}
.formule{
  display:flex;flex-direction:column;gap:var(--e4);
  padding:var(--e6) var(--e5);
  border:1px solid var(--rule-2);border-radius:5px;background:var(--papier);
  transition:border-color .24s var(--courbe),transform .24s var(--courbe);
}
.formule:hover{transform:translateY(-3px)}
.formule--phare{border-color:var(--acc);border-width:2px;
  box-shadow:0 40px 70px -46px rgba(232,131,12,.6)}
.formule h3{font-family:var(--f-titre);font-weight:700;font-stretch:92%;
  font-size:21px;line-height:1.2;letter-spacing:-.02em;color:var(--txt);
  display:flex;align-items:center;gap:10px}
.formule__prix{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  overflow-wrap:anywhere;min-width:0;
  font-family:var(--f-titre);font-weight:700;font-size:44px;line-height:1;
  letter-spacing:-.035em;color:var(--txt);font-variant-numeric:tabular-nums}
.formule__prix .mono{font-size:16px;font-weight:500;color:var(--txt-3)}
.formule__prix--libre{display:block;font-size:20px;letter-spacing:-.015em;line-height:1.35}
.formule__prix--libre .mono{display:block;margin-top:4px;font-size:13px}
.formule p:not([class]){font-size:15px;line-height:1.55;color:var(--txt-3)}

/* La différenciation des cartes se lit SANS chiffre : à qui elle sert
   (formule__pour) puis ce qui la distingue (formule__traits). Décision
   fondateur 2026-09-01 — trois cartes clonées sans prix ne disent rien. */
.formule__pour{font-size:15.5px;line-height:1.5;color:var(--txt)}
.formule__pour b{font-weight:650}
.formule__traits li{
  position:relative;padding-left:18px;margin-top:var(--e2);
  font-size:14.5px;line-height:1.5;color:var(--txt-3);
}
.formule__traits li::before{content:"";position:absolute;left:2px;top:.58em;
  width:5px;height:5px;border-radius:50%;background:var(--acc)}
.formule .btn{margin-top:auto}
.formules__note{margin-top:var(--e5);max-width:var(--mesure);font-size:14px;color:var(--txt-3)}
@media (max-width:980px){.formules{grid-template-columns:minmax(0,1fr)}}

/* ===================================================================
   16. QUESTIONS
   =================================================================== */
.questions-plan{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);
  gap:var(--e6) var(--e7);align-items:start}
.questions-plan .zone__tete{margin-bottom:0;position:sticky;top:calc(var(--h-tete) + var(--e5))}
@media (max-width:980px){
  .questions-plan{grid-template-columns:minmax(0,1fr)}
  .questions-plan .zone__tete{position:static}
}

.questions{border-top:1px solid var(--rule-2)}
.questions details{border-bottom:1px solid var(--rule)}
.questions summary{
  display:flex;align-items:baseline;gap:14px;cursor:pointer;
  padding:var(--e5) 0;list-style:none;
  font-family:var(--f-titre);font-weight:650;font-stretch:94%;
  font-size:18px;line-height:1.35;letter-spacing:-.01em;color:var(--txt);
}
.questions summary::-webkit-details-marker{display:none}
.questions summary::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--rule-2);flex:0 0 7px;position:relative;top:-2px;transition:background .18s}
.questions details[open] summary::before,
.questions summary:hover::before{background:var(--acc)}
.questions details p{padding:0 0 var(--e5) 21px;max-width:64ch;
  font-size:16px;line-height:1.65;color:var(--txt-2)}

/* ===================================================================
   17. L'APPEL — l'aplat safran, une fois, à la fin
   ===================================================================
   Interdit dans la console, revendiqué ici : c'est la dernière image que
   le lecteur emporte. Le texte est encre sur safran (contraste ~7:1).   */
.appel{background:var(--acc);color:var(--encre);padding:var(--e8) 0;position:relative;overflow:hidden}
.appel__plan{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:var(--e6) var(--e8);align-items:start;position:relative;z-index:1}
@media (max-width:900px){.appel__plan{grid-template-columns:minmax(0,1fr);gap:var(--e6)}}
.appel__corps{max-width:760px}

/* Ce qui se passe apres le clic : trois etapes, pas une promesse. */
.appel__suite{border-top:1px solid rgba(10,17,32,.22);padding-top:var(--e4)}
.appel__suite .micro{color:rgba(10,17,32,.80);display:block;margin-bottom:var(--e4)}
.appel__etape{display:flex;gap:16px;padding:var(--e3) 0;
  border-bottom:1px solid rgba(10,17,32,.14)}
.appel__etape:last-child{border-bottom:0}
.appel__etape span:first-child{font:500 12px/1.7 var(--f-chiffre);color:rgba(10,17,32,.74);
  flex:0 0 26px}
.appel__etape span:last-child{font-size:15.5px;line-height:1.5;color:rgba(10,17,32,.90)}
.appel h2{
  font-family:var(--f-titre);font-weight:700;font-stretch:84%;
  font-size:clamp(34px,5.4vw,72px);line-height:1;letter-spacing:-.035em;
  max-width:9em;color:var(--encre);
}
.appel p{margin-top:var(--e5);font-size:18px;line-height:1.55;color:rgba(10,17,32,.80);max-width:32em}
.appel__actes{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e6)}
.appel__note{margin-top:var(--e5);font:400 13px/1.6 var(--f-chiffre);color:rgba(10,17,32,.80)}

/* ===================================================================
   18. PIED
   =================================================================== */
.pied{background:var(--encre);color:var(--sur-encre);padding:var(--e7) 0 var(--e7)}
.pied__grille{display:flex;flex-wrap:wrap;gap:var(--e6) var(--e8)}
.pied__bloc{min-width:160px}
.pied__bloc .micro{color:var(--sur-encre-3);display:block;margin-bottom:var(--e4)}
.pied__bloc a{display:block;text-decoration:none;padding:6px 0;font-size:14px;
  color:var(--sur-encre-2);transition:color .18s}
.pied__bloc a:hover{color:var(--sur-encre)}
.pied__ligne{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3) var(--e5);
  margin-top:var(--e7);padding-top:var(--e4);
  border-top:1px solid rgba(247,244,236,.16);
  font:400 12.5px/1.5 var(--f-chiffre);color:var(--sur-encre-3)}
/* Le logotype typographique du pied — la signature, pas la tuile :
   reduite sur l'encre, la tuile faisait autocollant (retour fondateur). */
.pied .marque--logotype{
  font:700 30px/1 var(--f-titre);letter-spacing:-.04em;
  color:var(--sur-encre);text-decoration:none;
}
.pied .marque__point{color:var(--acc)}

/* ===================================================================
   19. ARTICLE DE GUIDE
   ===================================================================
   Un guide se LIT : colonne à la mesure, flux continu, fond stable. Le
   registre d'affiche ne s'y applique pas — c'est le seul endroit de la
   vitrine où la règle « une console se lit » reprend ses droits.       */
.article{max-width:calc(var(--mesure) + 2 * var(--e5));margin:0 auto;padding:var(--e7) var(--e5) var(--e8)}
.article h1{font-family:var(--f-titre);font-weight:700;font-stretch:90%;
  font-size:clamp(30px,4.6vw,48px);line-height:1.08;letter-spacing:-.03em;
  color:var(--txt);margin-top:var(--e4)}
.article h2{display:flex;align-items:flex-start;gap:12px;margin-top:var(--e7);
  font-family:var(--f-titre);font-weight:700;font-stretch:92%;
  font-size:clamp(21px,2.6vw,28px);line-height:1.2;letter-spacing:-.02em;color:var(--txt)}
.article h2 .pt{margin-top:.5em}
.article p{margin-top:var(--e4);font-size:17px;line-height:1.7;color:var(--txt-2)}
.article ul{margin-top:var(--e4)}
.article li{position:relative;padding-left:22px;margin-top:var(--e3);
  font-size:17px;line-height:1.7;color:var(--txt-2)}
.article li::before{content:"";position:absolute;left:2px;top:.66em;width:7px;height:7px;
  border-radius:50%;background:var(--acc)}
.article li b{color:var(--txt)}
.article a:not([class]){color:var(--acc-txt);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px}
.article a:not([class]):hover{color:var(--txt)}
.article__sortie{margin-top:var(--e7);padding-top:var(--e5);border-top:1px solid var(--rule-2)}

/* ===================================================================
   20. MOUVEMENT
   ===================================================================
   Une seule mécanique : `[data-revele]` passe de translaté/transparent à
   posé/opaque quand la section entre dans le cadre. Le décalage entre
   frères vient de --pas, posé en HTML. Sans JavaScript, tout est visible
   d'emblée (l'état de départ n'est appliqué QUE si .js est présent).    */
.js [data-revele]{
  opacity:0;transform:translateY(26px);
  transition:opacity .72s var(--courbe),transform .72s var(--courbe);
  transition-delay:calc(var(--pas,0) * 90ms);
}
.js [data-revele="vu"]{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-revele]{opacity:1 !important;transform:none !important;transition:none !important}
  .affiche__fond img{transform:none !important}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* --- 21. Resserrement téléphone ------------------------------------ */
@media (max-width:760px){
  :root{--e5:20px;--e6:36px;--e7:52px;--e8:68px}
  body{font-size:16px}
  .affiche{padding:calc(var(--e8) + 24px) 0 var(--e7)}
  .affiche h1{max-width:none}
  .affiche__gages{gap:var(--e2) var(--e4)}
  .affiche__gages li{font-size:12px}
  .bandeau{min-height:auto}
  .bandeau__mot{padding:var(--e7) 0}
  .pied__grille{gap:var(--e5) var(--e6)}
}