@font-face{font-family:Archivo;src:url(/assets/fonts/archivo-var.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:InterVF;src:url(/assets/fonts/inter-var.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

/* ══════════════════════════════════════════════════════════════════════
   COUCHE 1 — LA DIRECTION GRAPHIQUE

   Le SEUL bloc de la feuille qui contienne une valeur de couleur.
   Changer de direction, c'est remplacer ce bloc et rien d'autre : les
   deux couches suivantes ne portent que des renvois, et le reste du
   fichier ne cite jamais un jeton --t-*.

   Direction en place : « Toulouse mesurée ». Les valeurs viennent de
   187 photographies de la ville lues pixel par pixel — 430 848 pixels
   classés par famille de teinte, la mediane des pixels REELS de chaque
   bande de luminosité, jamais une moyenne (une moyenne mélange le mur au
   soleil et le mur à l'ombre : elle fabrique de la boue).
   Le détail : _chantier/croquis/2026-09-09-charte-toulouse-mesuree.md

   Chaque teinte utilisée en transparence est donnée DEUX fois, en
   hexadécimal et en composantes, parce que rgba() ne sait pas lire un
   hexadécimal. Le garde _chantier/coherence.py refuse le commit si les
   deux se contredisent — sans lui, la duplication dériverait en silence.

   Les trois bornes @charte ci-dessous ne sont pas décoratives : le garde
   découpe le fichier dessus. Il vérifie qu'elles existent, qu'elles
   n'apparaissent qu'une fois et qu'elles sont dans l'ordre — un repère
   introuvable rend -1, et une tranche prise à -1 lit tout le fichier
   sans rien signaler.
   ══════════════════════════════════════════════════════════════════════ */
/* @charte:direction-debut */
:root{
  /* les fonds clairs — 42,7 % de Toulouse est neutre (pierre + blanc) */
  --t-blanc:#FDFCFA;
  --t-pierre-pale:#F2ECE4;
  --t-brique-pale:#F7EDE3;

  /* les fonds profonds — le héros et le pied, rien d'autre */
  --t-profond:#1C1917;         --t-profond-rgb:28,25,23;
  --t-profond-2:#2B2624;
  --t-abysse:#0E0C0B;          --t-abysse-rgb:14,12,11;

  /* les textes */
  --t-encre:#221E1A;           --t-encre-rgb:34,30,26;
  --t-pierre:#6E6259;
  --t-estompe:#A79A8E;

  /* les filets. Deux niveaux : le trait décoratif, et le contour d'un
     champ ou d'un bouton — celui-là tient 3:1, comme WCAG 1.4.11 l'exige
     des contours de composants. Les anciens plafonnaient à 1,4. */
  --t-filet:#DDD3C7;
  --t-contour:#8F8274;
  --t-filet-profond:#423B35;
  --t-contour-profond:#7A6F66;

  /* La brique. Deux corrections successives, toutes deux venues de l'œil
     avant l'instrument. D'abord #352612 : la valeur À L'OMBRE, et tout le
     site était marron. Puis #9C5228, médiane d'une bande de clarté
     0,30–0,70 — encore marron, parce qu'une photo de mur contient autant
     d'ombre que de soleil et que la médiane rend le mur en lumière
     MOYENNE, pas la couleur de la brique. La brique foraine vit à 16-18°
     et 44-54 % de clarté ; on y est.

     Deux jetons, et la raison de leur nombre : le petit texte exige
     4,5:1, ce qui plafonne l'accent à 42 % de clarté — six points sous
     la brique sèche. Le non-textuel et le grand texte n'exigent que 3:1 :
     ils prennent la franche, et c'est eux que l'œil lit comme « la
     couleur du site ». Détail :
     _chantier/croquis/2026-09-09-la-brique-est-trop-sombre-de-six-points.md

     Un troisieme jeton pour les aplats a existe une heure : il assombrissait
     le bouton du heros pour compenser qu'une grande surface parait plus claire
     qu'un glyphe. William l'a vu tout de suite, et il avait raison : ca faisait
     QUATRE briques a l'ecran, et un bouton d'une autre couleur que le mot juste
     au-dessus. Une compensation optique qui se voit n'est plus une compensation,
     c'est une incoherence. Un aplat porte donc exactement la brique de son
     contexte. */
  --t-brique:#A9502F;          --t-brique-rgb:169,80,47;
  /* #B85C38 rendait 4,43:1 avec le blanc — assez pour un libelle de 19 px en
     gras, pas pour les 15 px de la barre du pouce. Un point de clarte plus bas
     (47 -> 46 %) et il tient 4,57 : le bouton passe A TOUTE TAILLE, et la dette
     gagee sur la taille des libelles disparait. L'ecart est de dE 1,2 —
     invisible a l'oeil, decisif pour la sonde. */
  --t-brique-franche:#B55A36;  --t-brique-franche-rgb:181,90,54;
  --t-brique-claire:#E08A5A;   --t-brique-claire-rgb:224,138,90;
  /* La brique qui tient sur SON PROPRE aplat. Un texte brique sur un fond de
     brique a 13 % plafonne a 3,97 — et baisser l'alpha n'y change rien : a 5 %
     on est encore a 4,32. C'est une limite arithmetique, pas un reglage. Quatre
     points de clarte en moins suffisent : 4,64 sur la carte, 4,57 sur la
     pierre. */
  --t-brique-sombre:#99482B;

  /* la note bleue. 12,7 % des pixels et les plus hautes saturations de
     toute la mesure. Ce n'est pas un ajout : la richesse de Toulouse
     vient du pastel des teinturiers, une plante à teinture bleue. */
  --t-pastel:#1F5C8A;
  --t-ciel:#6DB7E3;

  /* la note verte — platanes, berges de la Garonne. 4,8 % des pixels. */
  --t-olive:#4F6B2A;           --t-olive-rgb:79,107,42;
  --t-olive-clair:#A8CE7C;     --t-olive-clair-rgb:168,206,124;

  /* l'alerte, qui n'appartient pas à la ville mais au message */
  --t-alerte:#A3231B;          --t-alerte-rgb:163,35,27;
  --t-alerte-claire:#FF9B93;   --t-alerte-claire-rgb:255,155,147;

  /* Le chevron du <select>, dessiné dans une adresse de données : une
     image de fond ne sait pas prendre currentColor. Son trait DOIT valoir
     --t-pierre ; le garde vérifie que les deux ne divergent pas. */
  --t-chevron:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6259' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════════════════════
   COUCHE 2 — LES CONTEXTES

   Trois fonds, les mêmes RÔLES sur chacun. Un bouton écrit
   `background:var(--accent)` une seule fois et se peint juste sur les
   trois — c'est ce qui a fait disparaître les seize règles
   « .sec--nuit .machin{...} » que portait l'ancienne feuille : elles
   n'existaient que parce que les jetons ignoraient leur fond.
   ══════════════════════════════════════════════════════════════════════ */
/* @charte:contextes-debut */

/* le contexte CLAIR — le fond par défaut de presque toute la page */
:root{
  --fond:var(--t-blanc);              --fond-rgb:var(--t-encre-rgb);
  --fond-2:var(--t-pierre-pale);      /* le creux : champs de formulaire */
  --fond-carte:var(--t-brique-pale);  /* une carte posée sur ce fond */
  --survol:var(--t-pierre-pale);      /* une ligne au survol */
  --sur:var(--t-encre);
  --sur-2:var(--t-pierre);
  --accent:var(--t-brique);           --accent-rgb:var(--t-brique-rgb);
  --accent-sur-aplat:var(--t-brique-sombre); /* un texte accent POSE sur un aplat d'accent */
  --accent-sur:var(--t-blanc);        /* le texte posé SUR --accent */
  /* la brique franche : filets, barres, icônes, gros chiffres — tout ce
     qui n'a pas besoin de 4,5:1 et que l'œil lit comme la couleur */
  --accent-franc:var(--t-brique-franche);
  --accent-franc-rgb:var(--t-brique-franche-rgb);
  --note:var(--t-pastel);
  --acquis:var(--t-olive);            --acquis-rgb:var(--t-olive-rgb);
  --alerte:var(--t-alerte);           --alerte-rgb:var(--t-alerte-rgb);
  --filet:var(--t-filet);
  --contour:var(--t-contour);
  --focus:var(--t-brique);
  --ombre-rgb:var(--t-encre-rgb);
}

/* le contexte PIERRE — une section sur deux, pour marquer le passage
   sans jamais éteindre la page. Il n'hérite pas de deux valeurs : son
   fond, et celui d'une carte posée dessus, qui redevient blanche. */
.sec--pierre{
  --fond:var(--t-pierre-pale);
  --fond-carte:var(--t-blanc);
  --survol:var(--t-blanc);
}

/* le contexte PROFOND — le héros, le pied, la barre du pouce. Deux
   aplats sombres dans la page, contre six auparavant : le sombre est
   redevenu une ponctuation, il ouvre et il ferme. */
.hero,footer,.pouce{
  --fond:var(--t-profond);            --fond-rgb:var(--t-profond-rgb);
  --fond-2:var(--t-profond-2);
  --fond-carte:var(--t-profond-2);
  --survol:var(--t-profond-2);
  --sur:var(--t-blanc);
  --sur-2:var(--t-estompe);
  --accent:var(--t-brique-claire);    --accent-rgb:var(--t-brique-claire-rgb);
  --accent-sur:var(--t-encre);
  /* sur fond sombre il n'y a pas deux briques : la claire tient déjà
     6,6:1, elle n'a aucun plafond à contourner */
  --accent-franc:var(--t-brique-claire);
  --accent-franc-rgb:var(--t-brique-claire-rgb);
  --note:var(--t-ciel);
  --acquis:var(--t-olive-clair);      --acquis-rgb:var(--t-olive-clair-rgb);
  --alerte:var(--t-alerte-claire);    --alerte-rgb:var(--t-alerte-claire-rgb);
  --filet:var(--t-filet-profond);
  --contour:var(--t-contour-profond);
  --focus:var(--t-brique-claire);
  --ombre-rgb:var(--t-abysse-rgb);
}

/* Les rôles qui ne suivent PAS le contexte, parce qu'ils se posent là où
   le fond n'est pas connu — sur une photographie, sur la page entière —
   ou parce qu'ils vivent dans une image, où aucune variable n'entre.
   Ils portent quand même un nom : sans lui, le corps de la feuille
   citerait un jeton de direction et court-circuiterait cette couche. */
:root{
  /* LE BOUTON D'APPEL NE CHANGE PAS AVEC LA SURFACE. C'est un objet, pas
     un rôle : il vit dans l'en-tête clair, dans le héros sombre et dans la
     barre du pouce, et William l'a vu tout de suite quand il portait deux
     briques différentes. « Le même bouton » doit se reconnaître.
     #B85C38 est le seul qui tienne des DEUX côtés, et presque à l'identique :
     3,87:1 sur la pierre claire, 3,85:1 sur le fond profond — WCAG 1.4.11
     demande 3,0 pour la forme d'un composant. Son libellé blanc rend 4,43:1,
     ce qui impose 19 px en gras, et c'est la taille qu'ils ont. */
  --accent-aplat:var(--t-brique-franche);
  --accent-aplat-rgb:var(--t-brique-franche-rgb);
  --accent-aplat-sur:var(--t-blanc);

  --voile-photo-rgb:var(--t-profond-rgb);   /* sous une légende d'image */
  --voile-page-rgb:var(--t-abysse-rgb);     /* derrière une modale */
  --sur-photo:var(--t-blanc);               /* le texte posé sur une photo */
  --chevron:var(--t-chevron);               /* le chevron qui dit « ça s'ouvre » */
}
/* @charte:contextes-fin */

/* ══ ce qui n'est pas une couleur ══════════════════════════════════════ */
:root{
  --tete:68px;
  --tf:Archivo,'Helvetica Neue',Arial,sans-serif;
  --tc:InterVF,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Rayons. Il y en avait huit — 2, 4, 5, 6, 8, 10, 12 et 50 % — pour trois
     familles d'objets seulement. Trois suffisent, plus l'anneau de focus. */
  --r-controle:4px;   /* boutons, champs, petits boutons */
  --r-surface:10px;   /* cartes, encarts, blocs, modales */
  --r-focus:2px;      /* l'anneau de focus, qui suit le trace de l'element */

  /* La flèche et la silhouette servent de MASQUE : seule leur couche
     alpha compte, la couleur écrite dedans n'est jamais rendue. Elles
     prennent donc currentColor et suivent la direction sans y figurer. */
  --fleche:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
  --silhouette:url(/assets/logo-clair.png);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Le site n'a pas de mode sombre — c'est un choix, la charte est batie sur une
   pierre claire. Mais sans `color-scheme` declare, un navigateur en theme
   sombre s'autorise a FORCER ses propres couleurs sur la page : les fonds
   s'inversent, les contrastes mesures ne valent plus rien, et personne ne le
   voit depuis un poste en clair. On le declare donc explicitement. */
:root{color-scheme:light}
body{background:var(--fond);color:var(--sur);font-family:var(--tc);font-size:17px;line-height:1.62;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:var(--r-focus)}
h1,h2,h3,.tf{font-family:var(--tf);letter-spacing:-.03em;line-height:1.06;font-weight:800}
section{scroll-margin-top:calc(var(--tete) + 12px)}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--accent);color:var(--accent-sur);padding:12px 20px;font-family:var(--tf);font-weight:700}
.skip:focus{left:8px;top:8px}

/* ── rythme des sections : le blanc domine, la pierre ponctue ───────── */
.sec{padding:104px 0;background:var(--fond);color:var(--sur)}
/* L'INTITULE DE SECTION, TROISIEME REGLAGE. 13 px au depart, 16 apres la
   premiere remarque de William, 19 apres la seconde. Un intitule en capitales
   se lit plus petit qu'il n'est : la hauteur d'x disparait, l'oeil n'a plus que
   des rectangles. A 19 px il fait la meme impression qu'un texte courant de 16.
   L'interlettrage descend de .2 a .14 em — a 19 px, .2 em disloque le mot. */
/* L'INTITULE DE SECTION, QUATRIEME REGLAGE : 13, 16, 19, puis 23 px.
   William l'a signale TROIS fois, et la taille seule n'etait pas le sujet :
   un mot en CAPITALES n'a ni ascendante ni descendante, l'oeil n'en percoit
   que la hauteur de capitale — 0,72 em. A 19 px il pesait 13,7 px d'encre,
   soit moins qu'un texte courant de 16. A 23 px il en pese 16,6, et
   l'interlettrage descend a .10 em pour rendre le mot plus dense qu'etale. */
.eyebrow{font-family:var(--tf);font-size:23px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--note);margin-bottom:20px}
/* le trait s'aligne sur la PREMIERE ligne, pas au milieu du bloc */
h2{font-size:clamp(30px,4.4vw,44px);margin-bottom:14px}
.lead{color:var(--sur-2);max-width:660px;font-size:17px}
.head{margin-bottom:52px}

/* ── en-tête ────────────────────────────────────────────────────────────
   Blanc et opaque, sur les huit pages. Le filet du bas est PERMANENT :
   sous une page claire, un en-tête sans filet flotterait sans limite.
   Le défilement n'ajoute qu'une ombre — plus de bascule de fond, donc
   plus de flou d'arrière-plan à calculer à chaque image. */
header{position:fixed;inset:0 0 auto;z-index:120;background:var(--fond);border-bottom:1px solid var(--filet);transition:box-shadow .25s}
header.pose{box-shadow:0 2px 18px rgba(var(--ombre-rgb),.09)}
.tete{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--tete)}
.marque{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--sur);flex-shrink:0}
/* La silhouette est une forme pleine dont le dessin tient ENTIEREMENT
   dans sa couche alpha : 31 % de pixels opaques, tous de la même teinte.
   Posée en masque, elle prend la couleur de son texte — encre sur
   l'en-tête blanc, blanc sur le pied profond. Un seul fichier pour les
   deux fonds, et il suit un changement de direction sans être retouché. */
.marque-glyphe{width:20px;height:34px;background:currentColor;flex-shrink:0;
  -webkit-mask:var(--silhouette) no-repeat center/contain;
          mask:var(--silhouette) no-repeat center/contain}
.marque-glyphe--pied{width:22px;height:38px}
.marque span{font-family:var(--tf);font-weight:800;font-size:16px;letter-spacing:-.01em}
.nav{display:flex;align-items:center;gap:28px}
/* Les entrées du menu faisaient 23 px de haut — la seule hauteur de leur
   interligne — quand WCAG 2.5.8 en demande 24. Une entrée de menu n'est PAS
   posée au fil d'une phrase : l'exemption « inline » ne la couvre pas.
   Six pixels de marge intérieure suffisent, et l'en-tête ne bouge pas : les
   entrées sont centrées dans une ligne de 68 px, elles ont la place. */
.nav a,.nav .nav-bouton{padding:6px 0}
.nav a{font-family:var(--tf);font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--sur-2);text-decoration:none;transition:color .18s}
.nav a:hover{color:var(--sur)}
.tel-tete{display:inline-flex;align-items:center;gap:8px;background:var(--accent-aplat);color:var(--accent-aplat-sur);font-family:var(--tf);font-weight:800;font-size:19px;padding:7px 18px;border-radius:var(--r-controle);text-decoration:none;white-space:nowrap;transition:transform .16s,box-shadow .16s}
.tel-tete:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(var(--accent-aplat-rgb),.28)}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:1px solid var(--contour);border-radius:var(--r-controle);color:var(--sur);cursor:pointer}
.burger svg{width:20px;height:20px}

/* ── hero ──────────────────────────────────────────────────────────── */
.hero{position:relative;background:var(--fond);color:var(--sur);padding:calc(var(--tete) + 92px) 0 96px;overflow:hidden}
.hero-photo{position:absolute;inset:0;z-index:0}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.hero-voile{position:absolute;inset:0;z-index:1;background:
  linear-gradient(100deg,var(--fond) 30%,rgba(var(--fond-rgb),.86) 52%,rgba(var(--fond-rgb),.62) 100%),
  linear-gradient(to top,var(--fond) 2%,transparent 46%)}
.hero-in{position:relative;z-index:2;max-width:720px}
/* LE GESTE DE CELUI QUI N'EST PAS PRÊT. Deux boutons demandaient de contacter
   un inconnu, et rien d'autre. Quelqu'un qui hésite veut d'abord comprendre :
   ce lien l'amène au déroulé, sans engagement. Il est délibérément plus
   discret que les deux boutons — c'est une porte, pas une action. */
.lien-doux{display:inline-flex;align-items:center;gap:8px;color:var(--sur-2);
  font-family:var(--tf);font-weight:700;font-size:16px;text-decoration:none;
  padding:10px 2px;transition:color .18s}
.lien-doux:hover{color:var(--sur)}
.lien-doux span::after{content:'';display:block;width:1.05em;height:1.05em;
  background:currentColor;-webkit-mask:var(--fleche) no-repeat center/contain;
          mask:var(--fleche) no-repeat center/contain;transition:transform .2s}
.lien-doux:hover span::after{transform:translateX(4px)}

/* La ligne de renvois posee SOUS une grille — disciplines, sept effets. Elle
   prolonge la section vers sa page dediee sans casser le bloc : un renvoi en
   carte y aurait ajoute un troisieme niveau de lecture. */
.apres-grille{display:flex;flex-wrap:wrap;gap:26px;margin-top:26px}
.hero h1{font-size:clamp(42px,7.4vw,78px);margin:18px 0 22px}
.hero h1 em{font-style:normal;color:var(--accent-franc);display:block}
.hero p{color:var(--sur-2);font-size:clamp(16px,1.7vw,19px);max-width:530px;margin-bottom:34px}
/* L'etiquette de lieu ne subit pas la laisse de 530px, sinon elle se
   cesure. Et elle REPREND sa couleur : `.hero p` compte un element de
   plus que `.eyebrow`, donc il gagne, et l'etiquette tombait en gris
   estompé au lieu de porter la note bleue — sur la seule surface où
   cette note se voit le mieux. */
/* `.hero p` fixe une taille au clamp et sa specificite bat `.eyebrow` : le
   premier intitule de la page rendait donc 16 px quand tous les autres etaient
   passes a 19. Il faut le dire ici, explicitement. */
.hero p.eyebrow{max-width:none;margin-bottom:16px;color:var(--note);font-size:23px}
.actes{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.note{margin-top:18px;font-size:15px;color:var(--sur-2);display:flex;align-items:flex-start;gap:9px;max-width:520px;margin-bottom:0}
.note::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--acquis);flex-shrink:0;margin-top:.52em}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--tf);font-weight:800;font-size:19px;padding:16px 26px;border-radius:var(--r-controle);border:none;text-decoration:none;cursor:pointer;transition:transform .16s,box-shadow .16s,background .16s,border-color .16s}
.btn svg{width:18px;height:18px;flex-shrink:0}
/* Un seul bouton d'action, et il se peint juste sur les trois fonds :
   brique sur blanc, brique claire sur profond. .btn-3 n'existe plus —
   il ne disait que « le même, mais sur l'autre fond ». */
.btn-1{background:var(--accent-aplat);color:var(--accent-aplat-sur)}
.btn-1:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(var(--accent-aplat-rgb),.3)}
.btn-2{background:transparent;color:var(--sur);border:1.5px solid var(--contour)}
.btn-2:hover{border-color:var(--sur);transform:translateY(-2px)}

/* ── bande de preuve ───────────────────────────────────────────────── */
.preuve{background:var(--fond-2);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.preuve ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;padding:19px 0;font-family:var(--tf);font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--sur-2)}
.preuve li{display:flex;align-items:center;gap:10px}
.preuve li::before{content:'';width:6px;height:6px;background:var(--accent-franc);border-radius:50%;flex-shrink:0}
.preuve b{color:var(--sur);font-weight:700}

/* ── situations ────────────────────────────────────────────────────── */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* Deux colonnes et non trois : les motifs sont ecrits a la premiere personne,
   et le plus long tient sur quatre lignes dans une carte de trio. La grille
   suit le texte. Ne pas fusionner avec la regle ci-dessus. */
.motifs{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.sit{position:relative;background:var(--fond-carte);border:1px solid var(--filet);border-radius:var(--r-surface);padding:34px 30px 30px;display:flex;flex-direction:column;overflow:hidden;transition:transform .22s,box-shadow .22s,border-color .22s}
.sit::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--accent-franc);transform:scaleY(0);transform-origin:top;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.sit:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(var(--ombre-rgb),.1);border-color:var(--contour)}
.sit:hover::before{transform:scaleY(1)}
/* LE NUMERO ENTRE DANS LE TITRE. Il vivait dans son propre paragraphe ; un
   <summary> n'accepte qu'un seul titre, et le sortir aurait casse le repli. */
.sit-n{font-family:var(--tf);font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--accent);display:block;margin-bottom:12px}
.sit > summary{list-style:none;cursor:default}
.sit > summary::-webkit-details-marker{display:none}
.sit h3{font-size:23px;margin-bottom:14px}
.sit p{color:var(--sur-2);font-size:16px;margin-bottom:14px}
.sit .rep{color:var(--sur);font-weight:600}
.sit .go{margin-top:auto;padding-top:18px;font-family:var(--tf);font-weight:700;font-size:15px;color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.sit .go::after{content:'→';transition:transform .2s}
.sit:hover .go::after{transform:translateX(4px)}

/* ── formules ──────────────────────────────────────────────────────── */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.form-c{background:var(--fond-carte);border:1px solid var(--filet);border-radius:var(--r-surface);padding:36px 32px;transition:border-color .22s,transform .22s}
.form-c:hover{border-color:var(--contour);transform:translateY(-3px)}
/* Le chiffre est un accent PLEIN, pas une transparence. L'ancienne
   version le posait à 55 % d'opacité et tombait à 2,97:1 — sous le
   seuil, et invisible pour une sonde qui ignorait les textes courts. */
.form-c .n{font-family:var(--tf);font-size:46px;font-weight:800;color:var(--accent-franc);line-height:1;margin-bottom:14px}
.form-c h3{font-size:23px;margin-bottom:12px}
.form-c p{color:var(--sur-2);font-size:16px}

/* ── déroulé ───────────────────────────────────────────────────────── */
.pas{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:e}
/* la barre passe AVANT le titre : sinon des titres de hauteurs differentes
   desalignent les quatre traits d'une etape a l'autre */
.pas li{list-style:none;position:relative;padding:0 24px 0 0;display:flex;flex-direction:column}
.pas li::before{counter-increment:e;content:counter(e);position:absolute;top:-2px;left:0;font-family:var(--tf);font-size:13px;font-weight:800;color:var(--accent);letter-spacing:.1em}
.pas li .barre{order:-1;height:2px;background:var(--filet);margin:26px 0 20px;position:relative}
.pas li .barre::after{content:'';position:absolute;inset:0 auto 0 0;width:34px;background:var(--accent-franc)}
.pas h3{font-size:19px;margin-bottom:9px}
.pas p{font-size:15px;color:var(--sur-2)}

/* ── bienfaits ─────────────────────────────────────────────────────── */
.bien{border-top:1px solid var(--filet)}
.bien li{list-style:none;display:grid;grid-template-columns:64px 250px minmax(0,540px);gap:22px;align-items:baseline;padding:22px 8px;border-bottom:1px solid var(--filet);transition:background .18s,padding-left .18s}
.bien li:hover{background:var(--survol);padding-left:16px}
.bien .num{font-family:var(--tf);font-size:15px;font-weight:800;color:var(--accent);letter-spacing:.06em}
.bien h3{font-size:19px}
.bien p{color:var(--sur-2);font-size:16px}

/* ── coach ─────────────────────────────────────────────────────────── */
.coach{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:stretch}
.coach-img{position:relative;border-radius:var(--r-surface);overflow:hidden;align-self:stretch}
.coach-img picture,.coach-img img{width:100%;height:100%;object-fit:cover;display:block}
/* La photo s'etire pour aligner les deux colonnes, mais un groupe cadre en
   portrait perd les gens des bords : sous 1200 px la colonne devient trop
   etroite (rapport mesure 0,66 a 1024), on rend alors son cadrage a l'image
   et on accepte la difference de hauteur. */
@media (max-width:1200px){
  .coach{align-items:start}
  .coach-img picture,.coach-img img{height:auto;aspect-ratio:4/3}
}
.coach-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* La légende se pose sur la photographie, pas sur la page : son voile
   reste sombre quel que soit le fond de la section qui l'entoure.
   Elle est en BLANC PLEIN et non en teinte estompée : une sonde de
   contraste ne sait pas lire un dégradé — elle a mesuré le blanc de la
   section derrière — et la photo qui passe dessous peut changer. Sur un
   fond qu'aucun instrument ne peut vérifier, on prend la valeur la plus
   forte plutôt que la plus juste. */
.coach-img figcaption{position:absolute;inset:auto 0 0 0;padding:34px 20px 16px;background:linear-gradient(to top,rgba(var(--voile-photo-rgb),.94),transparent);color:var(--sur-photo);font-size:14px}
/* La citation etait scopee a .coach, donc a la seule page /le-coach/. Sa
   parole sur la non-violence est remontee sur l'accueil le 2026-09-09 : le
   style devient global, il n'y a que deux citations sur tout le site et elles
   doivent se ressembler. */
blockquote{border-left:3px solid var(--accent-franc);padding:4px 0 4px 20px;margin:24px 0 0;font-size:19px;line-height:1.55;color:var(--sur);max-width:64ch}
blockquote cite{display:block;margin-top:10px;font-style:normal;font-family:var(--tf);font-weight:700;font-size:16px;color:var(--note)}
.coach p{color:var(--sur-2);margin-bottom:16px}
.certifs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--filet);border:1px solid var(--filet);border-radius:var(--r-surface);overflow:hidden;margin-top:52px}
.certifs div{background:var(--fond-carte);padding:24px 22px}
/* Sept titres dans trois colonnes laissent DEUX cases vides sur la
   dernière ligne — un grand rectangle de fond qui ressemble à une image
   qui n'a pas chargé. Le dernier élément s'étire sur ce qui reste.

   `grid-column-end:-1` ne marche PAS ici : avec un début en `auto`, la
   spécification place l'élément sur UNE case finissant à cette ligne, au
   lieu de l'étirer. Mesuré : le bloc restait à 373 px sur 1 124.

   C'est `span` qu'il faut, et il dépend de la position du dernier
   élément dans sa ligne — d'où le `:nth-child`, refait à chaque point
   de rupture puisque le nombre de colonnes change. */
.certifs > div:last-child:nth-child(3n+1){grid-column:span 3}
.certifs > div:last-child:nth-child(3n+2){grid-column:span 2}
@media (max-width:980px){
  .certifs > div:last-child:nth-child(3n+1),
  .certifs > div:last-child:nth-child(3n+2){grid-column:auto}
  .certifs > div:last-child:nth-child(2n+1){grid-column:span 2}
}
/* En UNE colonne, un `span 2` fabrique une deuxième colonne implicite.
   Le reset doit être AUSSI spécifique que ce qu'il annule — un simple
   `.certifs > div:last-child` perd contre un `:nth-child`, quel que soit
   l'ordre des règles. Relevé : la grille rapportait 2 colonnes à 390 px. */
@media (max-width:760px){
  /* LES TROIS SITUATIONS DEVIENNENT UN CHOIX. Empilees, elles faisaient
     2,4 ecrans — le premier contenu apres le heros, et le plus lent. Or on ne
     les LIT pas : on cherche la sienne. Les trois titres se disent tout seuls
     (« Vous, au quotidien », « Votre enfant, a l'ecole », « Votre equipe »).
     Elles arrivent ouvertes du serveur : sans JavaScript, tout se lit. */
  .sit{padding:0}
  .sit > summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;
    gap:14px;padding:22px 24px}
  .sit > summary h3{margin:0;display:flex;align-items:baseline;gap:11px;font-size:20px}
  .sit .sit-n{display:inline;margin:0;font-size:13px}
  .sit > summary::after{content:'';width:16px;height:16px;flex-shrink:0;background:var(--accent-franc);
    -webkit-mask:var(--chevron) no-repeat center/contain;
            mask:var(--chevron) no-repeat center/contain;transition:transform .2s}
  .sit[open] > summary::after{transform:rotate(180deg)}
  .sit > p,.sit > .go{margin-left:24px;margin-right:24px}
  .sit > .go{margin-bottom:22px}
  .sit::before{display:none}

  .certifs > div:last-child:nth-child(2n+1),
  .certifs > div:last-child:nth-child(3n+1),
  .certifs > div:last-child:nth-child(3n+2){grid-column:auto}
}
.certifs dt{font-family:var(--tf);font-weight:700;font-size:16px;margin-bottom:6px;color:var(--sur)}
.certifs dd{font-size:15px;color:var(--sur-2)}

/* ── discipline ────────────────────────────────────────────────────── */
.princ{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--filet);border:1px solid var(--filet);border-radius:var(--r-surface);overflow:hidden;margin-top:40px}
.princ div{background:var(--fond-carte);padding:28px 24px}
.princ .n{font-family:var(--tf);font-size:13px;font-weight:800;color:var(--accent);letter-spacing:.14em;margin-bottom:10px}
.princ h3{font-size:20px}
/* Les quatre principes n'etaient que des NOMS : « Simplicite », « Rapidite »,
   sans une ligne pour dire ce qu'ils ecartent. Un principe qu'on ne peut pas
   appliquer n'est pas un principe, c'est un mot. */
.princ div > p:not(.n){color:var(--sur-2);font-size:16px;line-height:1.55;margin-top:9px}

/* ── tarifs ────────────────────────────────────────────────────────── */
.tarifs{border:1px solid var(--filet);border-radius:var(--r-surface);overflow:hidden;background:var(--fond-carte)}
.tarifs .l{display:grid;grid-template-columns:1.7fr .8fr 1.2fr;gap:16px;align-items:center;padding:22px 26px;border-bottom:1px solid var(--filet)}
.tarifs .l:last-child{border-bottom:none}
.tarifs .l:hover{background:var(--survol)}
.tarifs .t{font-family:var(--tf);font-weight:700;font-size:17px}
.tarifs .d{font-size:15px;color:var(--sur-2);margin-top:3px}
.tarifs .p{font-family:var(--tf);font-size:30px;font-weight:800;color:var(--accent-franc);letter-spacing:-.03em;white-space:nowrap}
.tarifs .p small{font-family:var(--tc);font-size:14px;font-weight:400;color:var(--sur-2);letter-spacing:0}
.tarifs .m{font-size:15px;color:var(--sur-2)}
/* LE PALIER RECOMMANDÉ. Cinq lignes rigoureusement égales ne recommandent
   rien : « Recommandé pour débuter » se lisait comme une troisième ligne de
   description, et sur téléphone il tombait sous le prix sans aucun signal.
   Un écusson le nomme, un filet à gauche le désigne. */
.tarifs .l--phare{background:var(--survol);box-shadow:inset 3px 0 0 var(--accent-franc)}
.ecusson{display:inline-block;font-family:var(--tf);font-size:13px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent-sur-aplat);
  background:rgba(var(--accent-rgb),.13);padding:5px 10px;border-radius:var(--r-controle)}
.duree{max-width:58ch;margin-top:16px;font-size:15px;color:var(--sur-2)}
.extras{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.extras div{border:1px solid var(--filet);border-left:3px solid var(--accent-franc);border-radius:var(--r-surface);padding:22px 24px;background:var(--fond-carte)}
.extras h3{font-size:17px;margin-bottom:7px}
.extras p{font-size:15px;color:var(--sur-2)}

/* ── contact ───────────────────────────────────────────────────────── */
.canaux{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:44px}
.canal{display:flex;flex-direction:column;gap:7px;background:var(--fond-carte);border:1px solid var(--filet);border-radius:var(--r-surface);padding:26px 24px;text-decoration:none;transition:border-color .2s,transform .2s,background .2s}
.canal:hover{border-color:var(--accent-franc);transform:translateY(-3px);background:var(--survol)}
.canal svg{width:26px;height:26px;color:var(--accent-franc);margin-bottom:6px}
.canal b{font-family:var(--tf);font-size:20px;color:var(--sur)}
.canal span{font-size:15px;color:var(--sur-2)}
.formulaire{display:grid;gap:18px;max-width:760px}
.rang{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.champ label{display:block;font-family:var(--tf);font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--sur-2);margin-bottom:8px}
/* Le contour d'un champ tient 3,19:1 au minimum — c'est ce que WCAG 1.4.11
   exige d'un contour de composant. L'ancien plafonnait à 1,4 : la bordure
   se devinait, elle ne se voyait pas. */
.champ input,.champ select,.champ textarea{width:100%;font-family:var(--tc);font-size:16px;padding:14px 16px;background:var(--fond-2);border:1.5px solid var(--contour);border-radius:var(--r-controle);color:var(--sur);transition:border-color .18s}
.champ textarea{min-height:126px;resize:vertical}
/* Sans cette remise a zero, iOS habille le <select> a sa facon : fond clair,
   chevron systeme, hauteur differente de celle des champs voisins. On dessine
   donc le chevron nous-memes, et on fixe la hauteur pour que la ligne
   s'aligne — mesure a Chrome, le select faisait deja 2 px de plus. */
.champ select{
  -webkit-appearance:none;appearance:none;
  background-image:var(--chevron);
  background-repeat:no-repeat;background-position:right 15px center;background-size:18px 18px;
  padding-right:44px;line-height:1.4;height:51px
}
.champ select::-ms-expand{display:none}
.champ input::placeholder,.champ textarea::placeholder{color:var(--sur-2)}
/* au clavier, un simple changement de bordure se remarque mal : on ajoute
   un halo, qui donne au focus une aire visible et un contraste franc */
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.32)}
.coche{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--sur-2);cursor:pointer}
/* Dit au moment de la decision, pas seulement dans la page legale : on
   n'apprend pas apres coup ou partent ses donnees. Et l'alternative est
   nommee dans la meme phrase, sinon l'information ne sert a rien. */
.hors-ue{margin:14px 0 0;font-size:15px;line-height:1.55;color:var(--sur-2);max-width:62ch}
.hors-ue a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(var(--accent-rgb),.4)}
.hors-ue a:hover{border-bottom-color:var(--accent)}
.coche input{margin-top:4px;width:18px;height:18px;accent-color:var(--accent-franc);flex-shrink:0}
.envoi{background:var(--accent-aplat);color:var(--accent-aplat-sur);font-family:var(--tf);font-weight:800;font-size:19px;padding:17px;border:none;border-radius:var(--r-controle);cursor:pointer;transition:transform .16s,box-shadow .16s,opacity .16s}
.envoi:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 26px rgba(var(--accent-aplat-rgb),.3)}
.envoi:disabled{opacity:.62;cursor:progress}
/* L'accusé porte un RECOURS, pas seulement une confirmation : Formspree
   rend « reçu », jamais « délivré », et un message perdu se lit aujourd'hui
   comme un message envoyé. Le lien reste dans la couleur du message — vert
   pour l'accusé, rouge pour l'échec — et se souligne pour rester un lien. */
.retour{padding:16px 18px;border-radius:var(--r-surface);font-size:16px;display:none;max-width:64ch}
.retour a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.retour.ok{display:block;background:rgba(var(--acquis-rgb),.12);border:1px solid rgba(var(--acquis-rgb),.5);color:var(--acquis)}
.retour.ko{display:block;background:rgba(var(--alerte-rgb),.1);border:1px solid rgba(var(--alerte-rgb),.5);color:var(--alerte)}

/* ── pied ──────────────────────────────────────────────────────────── */
footer{background:var(--fond);color:var(--sur-2);border-top:1px solid var(--filet);padding:48px 0 24px}
/* La colonne des pages porte dix liens depuis le 2026-09-09 : en grille, sa
   hauteur s'imposait aux deux autres, qui n'ont que 156 et 135 px de contenu —
   537 px de vide cumule, et un pied de page a 1,35 ecran sur telephone.
   `columns:2` les repartit et s'adapte au nombre reel : dix liens sur les onze
   pages aujourd'hui, cinq par colonne, sans avoir a fixer un nombre de rangs. */
.pied{display:grid;grid-template-columns:1.2fr 1.1fr .7fr;gap:40px;margin-bottom:32px}
.pied ul.deux{display:block;columns:2;column-gap:26px}
.pied ul.deux li{break-inside:avoid;margin-bottom:14px}
.pied h2{font-family:var(--tf);font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--sur-2);margin-bottom:15px}
/* WCAG 2.5.8 demande 24 px de haut a une cible tactile. « Voir les tarifs »
   tenait 22, les liens du pied 20. On agrandit la ZONE de touche sans
   toucher au dessin : un pseudo-element l'etire par-dessus l'interligne,
   la ligne de texte ne bouge pas d'un pixel. La hauteur reste sous
   l'ecart entre deux liens, sinon les zones se recouvriraient et on
   toucherait le mauvais. */
.pied ul{list-style:none;display:grid;gap:14px;font-size:16px}
.prix-hero a,.pied ul a,.bas nav a{position:relative}
.prix-hero a::after,.pied ul a::after,.bas nav a::after{
  content:'';position:absolute;left:0;right:0;top:50%;height:30px;transform:translateY(-50%)}

/* Un lien POSÉ AU FIL D'UNE PHRASE fait la hauteur de son interligne — 20 px
   ici. WCAG 2.5.8 l'exempte pour cette raison même, et on ne cherche pas à
   les agrandir tous : des zones de touche qui se chevauchent d'une ligne à
   l'autre feraient toucher le mauvais lien.
   Mais un lien qui DÉCLENCHE quelque chose — appeler, écrire — se tape, il ne
   se lit pas. Et l'un d'eux est le 3018, le numéro national contre le
   harcèlement, cité deux fois sur la page enfants : celui-là doit s'atteindre
   du premier coup. 28 px pour une foulée de ligne de 26 : le recouvrement
   tient dans deux pixels. */
p a[href^="tel:"],p a[href^="sms:"],p a[href^="mailto:"]{position:relative}
p a[href^="tel:"]::after,p a[href^="sms:"]::after,p a[href^="mailto:"]::after{
  content:'';position:absolute;left:0;right:0;top:50%;height:28px;transform:translateY(-50%)}
.pied a{text-decoration:none;transition:color .18s}
.pied a:hover{color:var(--sur)}
.pied .desc{font-size:16px;margin-top:14px;max-width:400px}
.bas{border-top:1px solid var(--filet);padding-top:18px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:15px}
.bas nav{display:flex;gap:22px}
.bas button{background:none;border:none;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ── appel permanent, mobile ───────────────────────────────────────── */
/* ELLE NE DOUBLE PLUS LE BOUTON DU HÉROS. Mesuré le 2026-09-09 : deux
   boutons brique identiques visibles ensemble au premier écran, à 296 px
   l'un de l'autre. La barre sert à celui qui a DÉFILÉ ; en haut de page, le
   bouton du héros suffit et il est plus grand. Elle se révèle quand le
   bouton du héros sort du champ, et le script pose l'attribut. Sans
   JavaScript elle reste visible en permanence : on ne retire jamais un
   moyen d'appeler à quelqu'un qui n'a pas le moyen de le faire revenir. */
.pouce[data-repliee]{transform:translateY(105%);pointer-events:none}
.pouce{transition:transform .28s cubic-bezier(.16,1,.3,1)}
.pouce{position:fixed;inset:auto 0 0 0;z-index:110;display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(var(--fond-rgb),.97);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--filet)}
.pouce a{flex:1;font-size:15px;padding:14px 10px}

/* ── volets légaux ─────────────────────────────────────────────────── */
dialog{width:min(680px,92vw);margin:auto;border:1px solid var(--filet);border-radius:var(--r-surface);background:var(--fond);color:var(--sur-2);padding:0}
dialog::backdrop{background:rgba(var(--voile-page-rgb),.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vol{padding:36px 34px 34px;max-height:min(78vh,780px);overflow-y:auto}
.vol h2{font-size:26px;color:var(--sur);margin-bottom:20px}
.vol h3{font-family:var(--tf);font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin:24px 0 7px}
.vol p{font-size:15px;line-height:1.75;margin-bottom:9px}
.vol a{color:var(--accent)}
/* Le bouton reste ancré au volet pendant que le contenu défile dessous :
   c'est le comportement voulu, il doit rester atteignable en bas de
   formulaire. Il passe donc PAR-DESSUS, et l'ombre le dit — sans elle,
   sur une modale claire, un bouton clair semble être au même plan.
   Mesure : il couvre 439 px² du sélecteur voisin sur 15 096, et aucun
   point interactif n'est bloqué (elementFromPoint rend bien le select). */
.vol .clore{position:absolute;top:16px;right:16px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:var(--fond-2);border:1px solid var(--contour);border-radius:var(--r-controle);color:var(--sur-2);font-size:17px;cursor:pointer;box-shadow:0 2px 10px rgba(var(--ombre-rgb),.14)}
.vol .clore:hover{color:var(--sur)}
/* « Contact » dans le menu ouvre la modale : c'est un bouton, il doit se
   presenter exactement comme les liens voisins, sinon la ligne se casse. */
.nav-bouton{font:inherit;background:none;border:0;padding:0;cursor:pointer;color:inherit;
  font-family:var(--tf);font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.nav .nav-bouton{color:var(--sur-2);transition:color .18s}
.nav .nav-bouton:hover{color:var(--sur)}
/* Le canal « ecrire » est devenu un bouton : meme gabarit que ses deux voisins. */
button.canal{font:inherit;text-align:left;cursor:pointer;width:100%}
/* Un declencheur de modale est un <button> : il doit se presenter comme les
   liens-boutons qui l'entourent. */
button.btn{font-family:inherit;cursor:pointer}
/* Un declencheur pose au fil d'une phrase : il se lit comme un lien, pas
   comme un bouton — sinon la phrase se casse en deux. */
.lien-note{font:inherit;background:none;border:0;padding:0;cursor:pointer;color:var(--accent);
  border-bottom:1px solid rgba(var(--accent-rgb),.4)}
.lien-note:hover{border-bottom-color:var(--accent)}
.vol-intro{font-size:15px;color:var(--sur-2);margin:-8px 0 22px;line-height:1.6}
.vol-intro a{color:var(--accent)}
.vol .formulaire{margin-top:0}
/* Ni le telephone ni l'adresse ne sont obligatoires seuls : c'est le script
   qui exige l'un des deux. Sans cette phrase, le visiteur ne peut pas le
   deviner — il verrait deux champs facultatifs et n'en remplirait aucun. */
.joindre{font-size:15px;color:var(--sur-2);margin:-10px 0 18px;line-height:1.5}
.joindre b{color:var(--sur);font-weight:600}

/* ── entrées animées ────────────────────────────────────────────────
   Le contenu est VISIBLE par défaut. C'est le script qui pose .anime sur
   la racine, et lui seul qui décale avant de remettre en place : sans JS,
   sans observateur, ou si le script casse, la page reste lisible.

   PLUS DE FONDU depuis le 2026-09-10. L'entrée partait d'`opacity:0`, et
   pendant les 620 ms de la transition tout texte traversait une zone de
   contraste insuffisant — Lighthouse y relevait trois défauts, sur des
   couleurs qui n'appartiennent à aucune charte parce qu'elles n'existent
   qu'au milieu du fondu. Aucun réglage n'y échappe : le calcul donne encore
   3,83:1 à 90 % d'opacité, le seuil n'est atteint qu'à 100.

   Le déplacement seul règle les deux : le texte garde son contraste du
   début à la fin, et le contenu n'est jamais invisible — ce qui compte pour
   qui fait défiler vite sur un téléphone. Le décalage descend de 22 à 14 px :
   sans fondu pour l'adoucir, une montée trop ample se voit comme un saut. */
.anime .monte{transform:translateY(14px);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.anime .monte.vu{transform:none}

/* Rien ne defile dans une feuille imprimee : ce qui attend le defilement
   n'arriverait jamais. On montre tout, et on retire ce qui n'a pas de sens
   sur du papier — la barre du pouce, le menu, l'image de couverture.
   Les trois valeurs ci-dessous sont les seules couleurs écrites hors de la
   direction : une page imprimée n'a pas de charte, elle a de l'encre. */
@media print{
  .anime .monte{transform:none!important;transition:none!important}
  .pouce,#menu,#burger,.hero-media,.hero-photo,.hero-voile,.skip{display:none!important}
  #tete{position:static!important;border:0}
  body{background:#fff;color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#444}
}

@media (max-width:980px){
  .trio,.certifs,.princ,.extras,.canaux{grid-template-columns:1fr 1fr}
  .pas{grid-template-columns:1fr 1fr;gap:34px 24px}
  .coach{grid-template-columns:1fr;gap:34px}
  /* La marque et le contact tiennent cote a cote ; la liste des pages passe
     dessous, pleine largeur, ses deux colonnes intactes. Empilee en trois,
     elle faisait un pied de page d'un ecran entier sur telephone. */
  .pied{grid-template-columns:1fr 1fr;gap:28px}
  .pied > div:nth-child(1){grid-column:1;grid-row:1}
  .pied > div:nth-child(3){grid-column:2;grid-row:1}
  .pied > div:nth-child(2){grid-column:1 / -1;grid-row:2}
}
/* LE MENU BASCULE EN BURGER A 1100 px, ET NON A 760. Ses trois blocs — la
   marque, la navigation, le bouton d'appel — reclament 997 px cote a cote.
   Sous le seuil precedent, la navigation passait donc sur DEUX LIGNES et
   debordait sur toute la plage 761-1050 px : tablette en paysage, petit
   portable. Le defaut precedait l'entree « Krav Maga » du 2026-09-10, qui
   n'a fait que l'elargir de 517 a 591 px.
   Le bouton d'appel, lui, tient jusqu'a 760 : une fois la navigation repliee,
   il ne reste que la marque, le burger et lui — 373 px. Il garde donc son
   propre seuil, plus bas. */
@media (max-width:1100px){
  .nav{display:none}
  .burger{display:flex}
}

@media (max-width:760px){
  body{font-size:16px}
  /* 224 px repris sur les huit respirations de la page. Les grilles en
     deux colonnes, elles, ne rapportaient plus que 50 px une fois les
     certifications et les principes partis sur leurs propres pages — et
     elles auraient fait casser le texte davantage. Mesuré, pas supposé. */
  .sec{padding:58px 0}
  .wrap{padding:0 20px}
  /* LE NUMERO RESTE DANS L'EN-TETE SUR TELEPHONE. Il en disparaissait, et la
     barre du pouce ne prend le relais qu'une fois le bouton du heros sorti du
     champ : en haut de page, l'appel n'etait joignable nulle part. Demande de
     William le 2026-09-10. Il se compacte au lieu de partir — 19 px et 18 px
     de marge interieure ne tiennent pas a cote de la marque et du burger. */
  .tel-tete{font-size:16px;padding:8px 13px;gap:6px;flex-shrink:0}
  .tel-tete svg{width:15px!important;height:15px!important}
  .tete{gap:12px}
  /* Sans cela le flex comprimait le burger de 44 a 32 px des que le numero
     revenait a cote — sous le minimum tactile de WCAG 2.5.5. */
  .burger{flex-shrink:0}
  .hero{padding:calc(var(--tete) + 54px) 0 74px}
  .hero p{margin-bottom:26px}
  .actes{flex-direction:column;align-items:stretch}
  .actes .btn{width:100%}
  .trio,.duo,.motifs,.certifs,.princ,.extras,.canaux,.rang{grid-template-columns:1fr}
  /* `.pied` est SORTI de cette liste le 2026-09-10 : elle le remettait a une
     seule colonne, et le placement pose plus haut (contact en colonne 2) y
     creait alors une colonne IMPLICITE de 140 px — deux colonnes inegales au
     lieu des deux voulues. Son empilement se rend sous 400 px, plus bas. */
  .pas{grid-template-columns:1fr;gap:26px}
  .bien li{grid-template-columns:44px 1fr;gap:6px 14px}
  .bien li h3{grid-column:2}
  .bien li p{grid-column:2}
  .bien .num{grid-row:span 2}
  .tarifs .l{grid-template-columns:1fr auto;gap:6px 14px;padding:18px 20px}
  .tarifs .m{grid-column:1/-1}
  /* LA PHOTO REÇOIT SA BANDE. Sur téléphone le voile latéral, pensé pour un
     écran large, laissait la photo DERRIÈRE le texte : on devinait des
     silhouettes et rien de plus. Le voile devient vertical — opaque sous le
     texte, transparent sous la bande — et le hero réserve 190 px en bas.
     C'est le seul endroit de la page où l'on voit ce qu'est un cours. */
  .hero{padding:calc(var(--tete) + 44px) 0 200px}
  /* LA PHOTO N'EST PLUS UN FOND, C'EST UNE BANDE. En portrait, une image en
     `cover` est mise a l'echelle sur la HAUTEUR : les 216 px du bas montrent
     donc toujours le bas de l'image, c'est-a-dire le sol — quel que soit le
     cadrage horizontal. Premiere tentative : du gravier sur 216 px.
     La photo occupe desormais la bande SEULE, avec son propre cadrage, et le
     voile ne couvre plus qu'elle : un fond uni au-dessus, une image en bas. */
  /* 175 et non 216 : a 19 px l'intitule passe sur deux lignes, et le heros
     doit tenir dans un ecran. La bande paie la difference — c'est une photo,
     pas du texte. */
  .hero-photo{inset:auto 0 0 0;height:158px}
  .hero-photo img{object-position:center 66%}
  .hero-voile{inset:auto 0 0 0;height:158px;background:linear-gradient(to bottom,
      var(--fond) 0, rgba(var(--fond-rgb),.42) 38%, rgba(var(--fond-rgb),.12) 100%)}
  /* l'intitulé tenait sur deux lignes à cause du seul interlettrage */
  /* L'intitulé passait sur deux lignes par le seul interlettrage : 350 px de
     texte pour 342 de large. On retire l'espacement, pas la taille — c'est
     elle que William trouvait trop petite. 350 -> 308 px, une ligne. */
  .hero p.eyebrow{letter-spacing:.01em}
  .lien-doux{padding:12px 2px}

  .pouce{display:flex}
  body{padding-bottom:78px}
  .bas{flex-direction:column;gap:12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .monte{transform:none}
}
/* le menu déplié sur mobile — il descend de l'en-tête, donc il en prend
   le fond clair, et non plus celui du héros */
.nav.ouvert{display:flex;position:fixed;inset:var(--tete) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--fond);border-bottom:1px solid var(--filet);padding:8px 20px 20px;box-shadow:0 22px 40px rgba(var(--ombre-rgb),.16)}
/* « Contact » est un <button>, les autres sont des <a> : sans le viser
   nommément, il gardait le centrage par défaut des boutons et cassait
   l'alignement de la colonne. Un menu se lit sur une seule verticale. */
.nav.ouvert a,.nav.ouvert .nav-bouton{padding:16px 4px;border-bottom:1px solid var(--filet);font-size:16px;text-align:left}
.nav.ouvert > :last-child{border-bottom:none}

/* ══ pages secondaires ═══════════════════════════════════════════════ */

/* hero sans photo : les pages internes n'en ont pas, et en mettre une
   de stock irait contre la regle photo de la charte */
.hero--court{padding:calc(var(--tete) + 62px) 0 72px}
.hero--court .hero-in{max-width:760px}
.hero--court h1{font-size:clamp(36px,5.8vw,60px)}

.fil{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--sur-2);margin-bottom:26px;flex-wrap:wrap}
.fil a{color:var(--sur-2);text-decoration:none;border-bottom:1px solid var(--contour);padding-bottom:1px}
.fil a:hover{color:var(--sur);border-bottom-color:var(--sur)}
.fil span[aria-hidden]{color:var(--sur-2)}

.duo-txt{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.duo-txt p{margin-bottom:16px;color:var(--sur-2)}
.duo-txt p:last-child{margin-bottom:0}

.qr{display:grid;grid-template-columns:1fr 1fr;gap:30px 44px}
.qr h3{font-size:20px;margin-bottom:10px}
.qr p{color:var(--sur-2);font-size:16px}
.qr a{color:var(--accent);font-weight:600}

/* ── les questions se replient sur téléphone ──────────────────────────
   Quatre questions et leurs réponses font 611 px sur un écran de 390 —
   et une objection ne se lit pas en entier, on cherche la sienne. Elles
   arrivent OUVERTES du serveur : sans JavaScript tout se lit, comme
   avant. C'est le script qui les referme sous 760 px, et jamais le
   contraire — on ne masque pas du contenu à quelqu'un qui n'a pas le
   moyen de le rouvrir.
   Sur écran large elles restent ouvertes et le titre se présente comme
   avant : ni curseur, ni chevron. */
.qr-item > summary{list-style:none;cursor:default}
.qr-item > summary::-webkit-details-marker{display:none}
@media (max-width:760px){
  .qr{gap:0;border-top:1px solid var(--filet)}
  .qr-item{border-bottom:1px solid var(--filet)}
  .qr-item > summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;
    gap:14px;padding:15px 0}
  .qr-item h3{margin:0;font-size:17px}
  .qr-item > summary::after{content:'';width:15px;height:15px;flex-shrink:0;background:var(--accent-franc);
    -webkit-mask:var(--chevron) no-repeat center/contain;
            mask:var(--chevron) no-repeat center/contain;
    transition:transform .2s}
  .qr-item[open] > summary::after{transform:rotate(180deg)}
  .qr-item > p{margin:0 0 17px}

  /* Les renvois de fin de page redisent ce que le pied liste juste
     dessous : quatre cartes de 202 px, puis 843 px de pied. À cet
     endroit — après le formulaire, au douzième écran — le titre suffit
     à dire où l'on va. La description part, la flèche reste. */
  #contact .renvois{gap:9px}
  #contact .renvoi{padding:14px 18px;
    display:flex;align-items:center;justify-content:space-between;gap:14px}
  #contact .renvoi:hover{transform:none}
  #contact .renvoi p{display:none}
  #contact .renvoi h3{font-size:17px;margin:0}
  #contact .renvoi span{margin:0;font-size:0}
  #contact .renvoi span::after{width:17px;height:17px}
}

.encart{margin-top:40px;border:1px solid var(--filet);border-left:3px solid var(--accent-franc);border-radius:var(--r-surface);background:var(--fond-carte);padding:24px 26px}
.encart p{font-size:16px;color:var(--sur-2);margin:0}
.encart a{color:var(--accent);font-weight:600}

/* deux cartes de renvoi en bas des pages de zone */
.renvois{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:12px}
.renvoi{display:block;background:var(--fond-carte);border:1px solid var(--filet);border-radius:var(--r-surface);padding:28px 26px;text-decoration:none;transition:border-color .2s,transform .2s}
.renvoi:hover{border-color:var(--accent-franc);transform:translateY(-3px)}
.renvoi h3{font-size:23px;color:var(--sur);margin-bottom:8px}
.renvoi p{color:var(--sur-2);font-size:16px}
.renvoi span{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-family:var(--tf);font-weight:700;font-size:15px;color:var(--accent)}

/* Corps de texte long des pages legales.
   La laisse de 62 caracteres se pose sur les PARAGRAPHES, pas sur le
   conteneur : posee sur `.wrap`, elle reduisait la boite entiere, et
   `margin:0 auto` la recentrait — le bord gauche de la page sautait de
   130 a 388 px sur cette seule page. Le defaut est ancien ; il ne se
   voyait pas sur un fond sombre, et un fond clair pardonne moins. */
.texte{max-width:1180px}
.texte > p,.texte > h2,.texte > h3,.texte > ul,.texte > ol{max-width:62ch}
.texte h3{font-family:var(--tf);font-size:15px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin:34px 0 10px}
.texte p{color:var(--sur-2);margin-bottom:12px}
.texte a{color:var(--accent);font-weight:600}

@media (max-width:980px){
  .duo-txt,.qr,.renvois{grid-template-columns:1fr;gap:24px}
}
@media (max-width:760px){
  .hero--court{padding:calc(var(--tete) + 40px) 0 56px}
}

/* ── la flèche des liens ─────────────────────────────────────────────
   U+2192 n'existe dans aucun des deux sous-ensembles latins d'Archivo et
   d'Inter : le caractère tombait sur une police système, dans un dessin
   étranger au reste. On la trace donc comme les autres icônes du site,
   en trait, et elle prend la couleur de son lien. */
.go::after,
.renvoi span::after{
  content:'';
  width:1.05em;height:1.05em;
  background:currentColor;
  -webkit-mask:var(--fleche) no-repeat center/contain;
          mask:var(--fleche) no-repeat center/contain;
  transition:transform .2s;
  flex-shrink:0;
}
.go{align-items:center}
.renvoi span{align-items:center}
.sit:hover .go::after{transform:translateX(4px)}
.renvoi:hover span::after{transform:translateX(4px)}

/* le numero en toutes lettres tient dans la barre du pouce : il inspire
   plus confiance qu'un simple « Appeler », et reste lisible jusqu'a 320 px */
.pouce a{font-size:15px;letter-spacing:-.01em;white-space:nowrap}
/* Le seuil a d'abord ete pose a 400 px « au cas ou » : mesure a 360 px,
   « kpitol@laposte.net » fait 140 px pour 146 disponibles, il tient. Le seuil
   descend donc a 340 px, ou il ne tient plus — et ou la liste des pages, elle
   non plus, ne peut plus se scinder en deux. */
/* Sous 375 px, la marque se reduit a son glyphe. Le numero passe avant le nom
   du site : on est deja dessus, on ne cherche pas a savoir ou l'on est. Le
   lien garde son aria-label, donc rien ne se perd pour un lecteur d'ecran. */
@media (max-width:374px){
  .marque span:not(.marque-glyphe){display:none}
}

@media (max-width:340px){
  .pied{grid-template-columns:1fr}
  .pied > div:nth-child(1),.pied > div:nth-child(2),.pied > div:nth-child(3){grid-column:1;grid-row:auto}
}
@media (max-width:359px){ .pouce a{font-size:14px;padding:14px 6px} }

/* la devise du coach : elle porte le titre de la page d'accueil */
.devise{font-family:var(--tf);font-size:19px;font-weight:700;color:var(--sur);
        border-top:1px solid var(--filet);padding-top:18px;margin-top:22px}
.devise strong{color:var(--accent)}

/* ── le premier cours offert ─────────────────────────────────────────
   L'argument qui lève le frein à l'appel : il se place là où le frein
   se produit — sous les boutons de contact, et en tête des tarifs. */
.offre{display:flex;align-items:center;gap:14px;background:var(--fond-carte);
  border:1px solid var(--filet);border-left:3px solid var(--accent-franc);
  border-radius:var(--r-surface);padding:18px 22px;margin-bottom:22px}
.offre b{font-family:var(--tf);font-weight:800;font-size:19px;color:var(--sur);white-space:nowrap}
.offre span{color:var(--sur-2);font-size:16px}
.note span{display:block}
/* La deuxieme question du visiteur presse. Discret : c'est une reponse, pas
   une accroche — le prix ne doit pas concurrencer « premier cours offert ». */
.prix-hero{margin:10px 0 0 17px;font-size:15px;color:var(--sur-2);max-width:520px}
.prix-hero b{color:var(--sur);font-weight:600}
.prix-hero a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(var(--accent-rgb),.4);padding-bottom:1px;white-space:nowrap}
.prix-hero a:hover{border-bottom-color:var(--accent)}

/* Sur un ecran de 568 px de haut, 122 px de marge au-dessus du titre coutent
   un cinquieme de la fenetre. Mesure a 320 px : le premier bouton d'appel
   commencait a 529 px, sous la ligne de flottaison. On resserre le rythme
   vertical du heros — et de lui seul — la ou chaque pixel se paie. */
@media (max-width:420px){
  /* La bande photo vaut ici aussi : ce bloc resserre le rythme pour garder le
     bouton d'appel au-dessus de la ligne de flottaison, et il ECRASAIT le
     padding pose plus haut — le hero rendait 78 px de photo au lieu de 190.
     Le contenu reste haut, la bande s'ajoute dessous. */
  .hero{padding:calc(var(--tete) + 26px) 0 151px}
  .hero--court{padding:calc(var(--tete) + 22px) 0 44px}
  .hero .eyebrow{margin-bottom:9px}
  .hero h1{margin:10px 0 16px}
  .hero-in > p:not(.note):not(.prix-hero){margin-bottom:20px}
  .note{margin-top:14px}
  .prix-hero{margin-top:8px}
}
.note b{color:var(--accent);font-weight:600}
@media (max-width:640px){ .offre{flex-direction:column;align-items:flex-start;gap:6px} }

/* ── les listes longues se replient sur téléphone ────────────────────
   Sept certifications ou sept bienfaits font une grille compacte sur un
   écran large et une échelle de 762 px sur un téléphone. On en montre
   trois, et le bouton propose le reste.

   Le bouton est `hidden` dans le HTML et c'est le script qui le révèle :
   sans JS, la liste reste ENTIÈRE. Le contenu n'est jamais retiré du
   document — les moteurs et les lecteurs d'écran le voient toujours.

   `[hidden]` a besoin de `!important` : `.bien li` déclare `display:grid`,
   qui gagne contre la règle du navigateur et laisserait l'élément visible. */
[hidden]{display:none!important}
.deplier{display:none}
@media (max-width:760px){
  .deplier{display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;margin-top:16px;padding:13px 18px;cursor:pointer;
    font-family:var(--tf);font-weight:700;font-size:15px;
    color:var(--accent);background:none;
    border:1.5px solid var(--contour);border-radius:var(--r-controle)}
  .deplier:hover{border-color:var(--accent)}
}

/* ── le rail d'ancres, sur téléphone ─────────────────────────────────
   Il ne coiffe pas le héros : posé après la bande de preuve, il défile
   avec la page puis se colle sous l'en-tête. Le héros garde donc toute
   sa hauteur, et le rail n'apparaît qu'une fois dans le contenu.
   Sans lui, atteindre les tarifs demandait deux gestes — ouvrir le menu,
   choisir ; il les met à un seul tapotement. */
.rail{display:none}
@media (max-width:760px){
  .rail{display:flex;position:sticky;top:var(--tete);z-index:100;
    overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    background:var(--fond);border-bottom:1px solid var(--filet);
    scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail a{flex:0 0 auto;padding:13px 16px;text-decoration:none;white-space:nowrap;
    font-family:var(--tf);font-weight:700;font-size:14px;letter-spacing:.04em;
    text-transform:uppercase;color:var(--sur-2);
    border-bottom:2px solid transparent;transition:color .18s,border-color .18s}
  .rail a[aria-current="true"]{color:var(--accent);border-bottom-color:var(--accent)}
  /* une ancre ne doit pas atterrir SOUS le rail : on ajoute sa hauteur */
  section{scroll-margin-top:calc(var(--tete) + 56px)}
}

/* quatre renvois tiennent sur une ligne en grand écran, deux en dessous */
.renvois.quatre{grid-template-columns:repeat(4,1fr);margin-top:0;margin-bottom:44px}
.renvois.trois{grid-template-columns:repeat(3,1fr)}
@media (max-width:1080px){ .renvois.quatre{grid-template-columns:1fr 1fr} .renvois.trois{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .renvois.quatre,.renvois.trois{grid-template-columns:1fr} }