/* Valuans — site corporate : bleu nuit des barres du logo, orange du « s », une seule famille (Mona Sans).
   Jetons d'abord ; aucune couleur littérale hors de ce bloc.
   Contrastes mesurés : encre/papier 14,5:1 · encre douce/papier 7,1:1 · marqueur-texte/papier 5,5:1 ·
   marqueur/salle 6,4:1 · encre/marqueur 5,6:1 · craie/salle 15,8:1 · craie douce/salle 10,5:1 · marqueur-clair/salle 9,5:1 */

@font-face { font-family: "Mona Sans"; src: url("/assets/fonts/mona-sans-latin.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; }

:root {
  /* fonds clairs */
  --papier: #f4f6f9;
  --feuille: #ffffff;
  --papier-ombre: #e9edf3;
  --encre: #16244a;
  --encre-douce: #4a5570;
  --filet: rgb(22 36 74 / .18);
  --filet-fort: rgb(22 36 74 / .55);
  /* bleu nuit (barres du logo) */
  --salle: #0f1a33;
  --salle-panneau: #16223f;
  --salle-panneau-2: #1d2b4d;
  --craie: #f3f5f9;
  --craie-douce: #c3cad8;
  --craie-discrete: #9aa5bb;
  --filet-salle: rgb(243 245 249 / .16);
  --filet-salle-fort: rgb(243 245 249 / .38);
  /* l'orange du « s » de Valuans (accent unique) */
  --accent: #e8840a;
  --marqueur: var(--accent);
  --marqueur-texte: #a34f00;
  --marqueur-clair: #f6b35c;
  --marqueur-voile: rgb(232 132 10 / .14);
  /* signal : les trois barres du logo, réservées à la jauge d'avancement */
  --barre-1: #2a4c9a;
  --barre-2: #3462ac;
  --barre-3: #4596d0;
  --papier-givre: rgb(251 250 246 / .96);
  --papier-voile: rgb(251 250 246 / .92);
  --salle-givre: rgb(15 26 51 / .92);
  --lueur-reponse: 0 18px 40px -18px rgb(232 132 10 / .7);
  --ombre-dure: 0 18px 40px -24px rgb(15 26 51 / .35);
  --ombre-carte: 0 24px 60px -30px rgb(5 10 25 / .6);
  --ombre-pile: 0 -18px 40px -32px rgb(15 26 51 / .45);

  --f-texte: "Mona Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: var(--f-texte);
  --f-main: var(--f-texte);

  /* échelle */
  --t-micro: 13px;
  --t-ui: 16px;
  --t-mono: 13px;
  --t-corps: clamp(18px, .35vw + 16.6px, 20px);
  --t-chapo: clamp(20px, .6vw + 17.5px, 24px);
  --t-h3: clamp(21px, 1vw + 16px, 27px);
  --t-h2: clamp(28px, 2.4vw + 14px, 48px);
  --t-h1: clamp(34px, 3.4vw + 14px, 64px);
  --t-geant: clamp(56px, 13vw, 230px);

  --mesure: 1240px;
  --prose: 70ch;
  --gouttiere: clamp(16px, 4vw, 48px);
  --pas: clamp(72px, 10vw, 140px);
  --entete: 76px;
  --rayon: 14px;
  --rayon-l: 26px;
  --meca: cubic-bezier(.65, 0, .35, 1);
  --doux: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--entete) + 12px); overflow-x: clip; }
body { margin: 0; background: var(--papier); color: var(--encre); font: 400 var(--t-corps)/1.62 var(--f-texte); font-stretch: 100%; text-rendering: optimizeLegibility; }
img, svg, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
p, ul, ol, dl, blockquote, figure { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 720; font-stretch: 108%; line-height: 1.08; letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.16; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--marqueur); outline-offset: 3px; border-radius: 4px; }
.salle :focus-visible, .pied :focus-visible { outline-color: var(--marqueur-clair); }
::selection { background: var(--marqueur); color: var(--encre); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.evitement { position: absolute; left: 16px; top: 8px; z-index: 100; padding: 12px 18px; background: var(--encre); color: var(--craie); border-radius: 999px; font-size: var(--t-ui); transform: translateY(-160%); transition: transform .2s; }
.evitement:focus { transform: none; }
.js-seul { display: none; }
@media (scripting: enabled) { .js-seul { display: revert; } }

.cadre { width: min(100% - 2 * var(--gouttiere), var(--mesure)); margin-inline: auto; }
.prose { max-width: var(--prose); }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { font-size: clamp(26px, 2vw + 16px, 38px); margin-top: 1.6em; scroll-margin-top: calc(var(--entete) + 24px); }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .35em; }
.prose blockquote { border-left: 4px solid var(--marqueur); padding: 4px 0 4px 22px; font-weight: 500; }
.chapo { font-size: var(--t-chapo); line-height: 1.45; color: var(--encre-douce); max-width: 46ch; }
.salle .chapo { color: var(--craie-douce); }

/* ---------- matières ---------- */
.feuille { background: var(--papier); }
.salle { background: var(--salle); color: var(--craie); }
.salle a { color: var(--craie); }
.blanc { background: var(--feuille); }
.bande { padding-block: var(--pas); }
.bande--serree { padding-block: clamp(48px, 7vw, 96px); }

/* code de feuille : point de voyant + mono */
.code { display: inline-block; font: 650 var(--t-mono)/1.3 var(--f-texte); text-transform: uppercase; letter-spacing: .12em; color: var(--marqueur-texte); }
.salle .code { color: var(--marqueur-clair); }
.mono { font-variant-numeric: tabular-nums; }

/* boutons et liens */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border: 0; border-radius: 8px; background: var(--marqueur); color: var(--encre); font: 700 var(--t-ui)/1.2 var(--f-texte); text-decoration: none; transition: background .2s, transform .2s var(--doux); }
.btn::after { content: "→"; transition: transform .25s var(--doux); }
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { transform: translateX(4px); }
.btn--encre { background: var(--encre); color: var(--craie); }
.salle .btn--encre { background: var(--craie); color: var(--encre); }
.lien { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 650; text-decoration: underline; text-decoration-color: var(--marqueur); text-decoration-thickness: 2px; }
.lien::after { content: "→"; transition: transform .25s var(--doux); }
.lien:hover::after { transform: translateX(6px); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }

/* ---------- en-tête utilitaire ---------- */
.entete { position: sticky; top: 0; z-index: 40; background: var(--papier-givre); border-bottom: 1px solid var(--filet); }
.entete__in { display: flex; align-items: center; gap: 22px; min-height: var(--entete); }
.logo { flex: none; display: block; width: 150px; }
.logo img { width: 100%; height: auto; }
.nav { display: flex; align-items: center; gap: 4px 18px; margin-left: auto; }
.nav a { position: relative; display: inline-flex; align-items: baseline; gap: 6px; min-height: 48px; align-items: center; font-size: 16.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 3px; background: var(--marqueur); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--doux); }
.nav a:hover::after, .nav a[aria-current="page"]::after, .nav a.est-ici::after { transform: scaleX(1); }
.outils { flex: none; display: flex; align-items: center; gap: 10px; }
.tel { flex: none; min-width: 48px; justify-content: center; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border: 1px solid var(--filet-fort); border-radius: 999px; font: 600 15px var(--f-texte); font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.tel svg { flex: none; width: 18px; height: 18px; }
.langue { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; font: 500 13px var(--f-mono); text-decoration: none; border-radius: 999px; }
.langue:hover { background: var(--marqueur-voile); }
.entete .btn { min-height: 46px; padding: 0 20px; white-space: nowrap; }
.entete .btn::after { content: none; }
.menu-bouton { display: none; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border: 1px solid var(--filet-fort); border-radius: 999px; background: none; color: var(--encre); font: 600 16px var(--f-texte); cursor: pointer; }
.menu-bouton i { display: grid; gap: 4px; }
.menu-bouton i::before, .menu-bouton i::after, .menu-bouton b { content: ""; display: block; width: 18px; height: 2px; background: currentColor; }
/* jauge : les trois barres du logo se remplissent avec la lecture */
.jauge { position: absolute; left: 0; right: 0; bottom: -1px; display: grid; grid-template-columns: repeat(3, 1fr); height: 3px; pointer-events: none; }
.jauge i { transform: scaleX(var(--j, 0)); transform-origin: left; }
.jauge i:nth-child(1) { background: var(--barre-1); --j: var(--j1); }
.jauge i:nth-child(2) { background: var(--barre-2); --j: var(--j2); }
.jauge i:nth-child(3) { background: var(--barre-3); --j: var(--j3); }

@media (max-width: 1560px) { .tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .tel { padding: 0 14px; } }
@media (max-width: 1280px) {
  .entete__in { flex-wrap: wrap; row-gap: 0; padding-block: 6px; }
  .nav { order: 3; flex-basis: 100%; flex-wrap: wrap; margin-left: 0; gap: 0 18px; }
  .outils { margin-left: auto; }
}
@media (scripting: enabled) and (max-width: 1280px) {
  .menu-bouton { display: inline-flex; }
  .nav { display: none; }
  .nav.est-ouvert { display: flex; flex-direction: column; align-items: stretch; padding: 8px 0 18px; border-top: 1px solid var(--filet); }
  .nav.est-ouvert a { min-height: 52px; font-size: 19px; }
}
@media (max-width: 640px) {
  .logo { width: 116px; }
  .entete .btn { display: none; }
  .outils { gap: 6px; }
}

/* ---------- pied : signature géante ---------- */
.pied { background: var(--salle); color: var(--craie); overflow: hidden; content-visibility: auto; contain-intrinsic-size: auto 900px; padding-top: clamp(70px, 12vh, 140px); }
.pied a { color: var(--craie); }
.pied__mot { margin: 0; text-align: center; white-space: nowrap; user-select: none; font: 800 clamp(56px, 12vw, 220px)/.9 var(--f-texte); font-stretch: 108%; letter-spacing: -.035em; color: var(--salle-panneau-2); }
.pied__mot span { color: var(--marqueur); }
.pied__credit { margin-top: 18px; text-align: center; font: 500 var(--t-mono)/1.5 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--craie-discrete); }
.pied__cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 36px; margin-top: clamp(56px, 8vw, 110px); padding-bottom: 48px; }
.pied__cols h2 { margin-bottom: 14px; font: 500 var(--t-micro)/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--marqueur-clair); }
.pied__cols ul { list-style: none; padding: 0; }
.pied__cols li a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; color: var(--craie-douce); }
.pied__cols li a:hover { color: var(--craie); text-decoration: underline; text-decoration-color: var(--marqueur); }
.pied__id img { width: 170px; }
.pied__id p { margin-top: 18px; color: var(--craie-douce); max-width: 32ch; }
.pied__id .devise { color: var(--marqueur-clair); font-weight: 650; }
.reseaux { display: flex; gap: 10px; margin-top: 22px; }
.reseaux a { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--filet-salle-fort); border-radius: 50%; transition: transform .2s var(--doux), background .2s; }
.reseaux a:hover { background: var(--marqueur); color: var(--encre); transform: translateY(-3px); }
.reseaux svg { width: 19px; height: 19px; }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; padding-block: 22px 30px; border-top: 1px solid var(--filet-salle); color: var(--craie-discrete); font-size: 15px; }
.pied__bas a { display: inline-flex; align-items: center; min-height: 44px; color: var(--craie-douce); }
.pied__qualiopi { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.pied__qualiopi img { width: 150px; border-radius: 6px; }
@media (max-width: 1100px) { .pied__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .pied__cols { grid-template-columns: 1fr; } }

/* ---------- ouverture : deux métiers face à face ---------- */
.ouverture { position: relative; overflow: hidden; padding-block: clamp(32px, 3vw, 44px) clamp(44px, 5vw, 72px); background: var(--salle); color: var(--craie); }
.ouverture__barres { position: absolute; right: -3%; top: -8%; width: min(44vw, 620px); opacity: .22; pointer-events: none; }
.ouverture .cadre { position: relative; }
.ouverture__tete { max-width: 900px; }
.ouverture .code { color: var(--marqueur-clair); }
.ouverture h1 { margin-top: 14px; font-size: clamp(34px, 2.6vw + 16px, 56px); line-height: 1.06; max-width: 24ch; }
.ouverture .chapo { margin-top: 14px; max-width: 64ch; color: var(--craie-douce); }
.metiers { display: grid; grid-template-columns: 1.12fr 1fr; gap: 24px; margin-top: 32px; }
.metier { display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: var(--feuille); color: var(--encre); box-shadow: var(--ombre-carte); border-top: 6px solid var(--barre-3); }
.metier--formation { border-top-color: var(--marqueur); }
.metier__photo { position: relative; aspect-ratio: 16 / 5.6; overflow: hidden; background: var(--papier-ombre); }
.metier__photo picture, .metier__photo > img:first-child, .tete__photo picture { display: block; width: 100%; height: 100%; }
.metier__photo img { width: 100%; height: 100%; object-fit: cover; }
.metier__photo .metier__qualiopi { position: absolute; left: 14px; bottom: 14px; width: 150px; height: auto; padding: 6px; background: var(--feuille); border-radius: 8px; box-shadow: var(--ombre-dure); }
.metier__corps { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: clamp(20px, 2.4vw, 30px); }
.metier .code { color: var(--marqueur-texte); }
.metier--accompagnement .code { color: var(--barre-1); }
.metier h2 { font-size: clamp(26px, 1.4vw + 16px, 38px); }
.metier p { color: var(--encre-douce); }
.metier ul { margin: 4px 0 8px; padding: 0; list-style: none; display: grid; gap: 8px; }
.metier li { position: relative; padding-left: 22px; font-weight: 550; }
.metier li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--marqueur); }
.metier--accompagnement li::before { background: var(--barre-2); }
.metier .btn { margin-top: auto; align-self: flex-start; }
.ouverture__preuves { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 28px; color: var(--craie-douce); font-size: 15.5px; }
.ouverture__preuves span { display: inline-flex; align-items: center; gap: 10px; }
.ouverture__preuves span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--marqueur); }
@media (max-width: 980px) { .metiers { grid-template-columns: 1fr; } .ouverture__barres { width: 70vw; opacity: .14; } }

/* ---------- formats courts ---------- */
.formats-courts { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 20px 28px; align-items: stretch; }
.formats-courts h2 { margin-top: 10px; font-size: clamp(24px, 1.4vw + 14px, 34px); }
.format { display: flex; flex-direction: column; gap: 8px; padding: 24px 26px; background: var(--feuille); border: 1px solid var(--filet); border-radius: 14px; text-decoration: none; transition: box-shadow .25s, transform .25s var(--doux); }
.format b { font-size: 21px; }
.format span { color: var(--encre-douce); font-size: 17px; line-height: 1.5; }
.format b::after { content: " →"; color: var(--marqueur-texte); }
.format:hover { transform: translateY(-3px); box-shadow: var(--ombre-dure); }
@media (max-width: 900px) { .formats-courts { grid-template-columns: 1fr; } }

/* ---------- résultats ---------- */
.resultats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.resultat { display: flex; flex-direction: column; gap: 10px; padding: 28px 26px; background: var(--papier); border-radius: 14px; border-top: 4px solid var(--barre-2); }
.resultat--formation { border-top-color: var(--marqueur); }
.resultat__chiffre { font: 750 clamp(40px, 2.6vw + 18px, 60px)/1 var(--f-texte); font-stretch: 112%; color: var(--encre); }
.resultat__libelle { font-weight: 650; line-height: 1.35; }
.resultat p:not([class]) { color: var(--encre-douce); font-size: 16.5px; line-height: 1.5; }
.resultat .lien { margin-top: auto; }
@media (max-width: 1100px) { .resultats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .resultats { grid-template-columns: 1fr; } }

/* ---------- en-tête de page avec photo ---------- */
.tete--photo .tete__grille { align-items: center; }
.tete__photo { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--ombre-dure); }
.tete__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- en-têtes de section ---------- */
.tete-section { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px 56px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.tete-section .code { grid-column: 1 / -1; }
.tete-section .chapo { justify-self: start; }
@media (max-width: 860px) { .tete-section { grid-template-columns: 1fr; } }

/* ---------- Nommer : citation vis-à-vis + schéma ---------- */
.vis-a-vis { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 96px); align-items: center; }
.citation blockquote { font: 500 clamp(28px, 2.4vw + 12px, 48px)/1.16 var(--f-texte); font-stretch: 100%; font-style: italic; letter-spacing: -.01em; }
.citation blockquote strong { font-weight: 700; color: var(--marqueur-texte); }
.citation figcaption { display: flex; align-items: center; gap: 16px; margin-top: 26px; }
.portrait-rond { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.citation figcaption b { display: block; font-size: 19px; }
.citation figcaption span { color: var(--encre-douce); font-size: 16px; }
.schema-deux { display: grid; gap: 18px; }
.schema-deux p { color: var(--encre-douce); max-width: 52ch; }
.schema svg { width: 100%; max-width: 560px; }
.schema text { font-family: var(--f-mono); font-size: 13px; letter-spacing: .05em; text-transform: uppercase; fill: var(--encre); }
.schema .t-main { font: 700 22px var(--f-main); text-transform: none; letter-spacing: 0; }
@media (max-width: 900px) { .vis-a-vis { grid-template-columns: 1fr; } }

/* ---------- Organiser : la feuille d'atelier ---------- */
.feuille-doc { background: var(--feuille); border: 1px solid var(--filet); border-radius: 14px; box-shadow: var(--ombre-dure); overflow: hidden; }
.feuille-doc__intro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 18px 40px; padding: clamp(22px, 4vw, 44px) clamp(20px, 4vw, 44px) 10px; }
.feuille-doc__intro h2 { font-size: clamp(28px, 2.4vw + 12px, 48px); max-width: 18ch; margin-top: 14px; }
.feuille-doc__intro .chapo { margin-top: 14px; }
.tableau-atelier { width: 100%; border-collapse: collapse; }
.tableau-atelier th, .tableau-atelier td { padding: 24px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--filet); }
.tableau-atelier thead th { padding-block: 12px; border-top: 0; border-bottom: 2px solid var(--encre); font: 500 var(--t-micro) var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-douce); }
.tableau-atelier .n { width: 64px; font: 500 15px var(--f-mono); color: var(--marqueur-texte); }
.tableau-atelier th[scope="row"] { width: 22%; font: 800 clamp(19px, 1.2vw + 6px, 23px)/1.15 var(--f-texte); font-stretch: 118%; }
.tableau-atelier .q { width: 32%; font-weight: 550; font-size: clamp(18px, 1vw + 8px, 21px); }
.tableau-atelier .r { color: var(--encre-douce); }
.tableau-atelier .r a { display: inline-flex; margin-top: 6px; }
.tableau-atelier tbody tr:hover { background: var(--papier); }
.etiquette-act { display: inline-block; margin-right: 6px; padding: 3px 10px; border-radius: 999px; font: 500 12px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.etiquette-act--f { background: var(--marqueur); color: var(--encre); }
.etiquette-act--a { background: var(--barre-1); color: var(--craie); }
@media (max-width: 860px) {
  .tableau-atelier thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tableau-atelier, .tableau-atelier tbody, .tableau-atelier tr, .tableau-atelier th, .tableau-atelier td { display: block; width: auto; }
  .tableau-atelier tr { padding: 18px 20px; border-top: 1px solid var(--filet); }
  .tableau-atelier th, .tableau-atelier td, .tableau-atelier .q, .tableau-atelier th[scope="row"] { width: auto; padding: 4px 0; border: 0; }
}

/* ---------- méthode (bleu nuit) ---------- */
.deroule { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; counter-reset: temps; }
.deroule li { position: relative; padding: 26px 0 34px; border-top: 1px solid var(--filet-salle-fort); counter-increment: temps; }
.deroule li::before { content: counter(temps, decimal-leading-zero); display: block; margin-bottom: 14px; font: 500 var(--t-mono) var(--f-mono); letter-spacing: .1em; color: var(--marqueur-clair); }
.deroule h3 { font-size: clamp(24px, 1.4vw + 12px, 34px); }
.deroule .produit { margin-top: 14px; color: var(--craie); font-weight: 600; }
.deroule .produit b { display: block; margin-bottom: 4px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--marqueur-clair); }
.deroule p { margin-top: 12px; color: var(--craie-douce); font-size: 17.5px; line-height: 1.55; }
.deroule .bascule { border-top: 3px solid var(--marqueur); }
.bascule-libelle { display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 999px; background: var(--marqueur); color: var(--encre); font: 500 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 980px) { .deroule { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .deroule { grid-template-columns: 1fr; } }

/* ---------- Incarner : le fondateur ---------- */
.fondateur { display: grid; grid-template-columns: minmax(160px, 260px) 1fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
.fondateur img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 22px; }
.fondateur__intro { margin-top: 18px; color: var(--encre-douce); }
.fondateur blockquote { margin-top: 22px; padding-left: 24px; border-left: 4px solid var(--marqueur); font-size: var(--t-chapo); line-height: 1.5; }
.fondateur .reperes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.reperes span { padding: 6px 12px; border: 1px solid var(--filet-fort); border-radius: 999px; font: 500 12.5px var(--f-mono); letter-spacing: .05em; text-transform: uppercase; }
@media (max-width: 700px) { .fondateur { grid-template-columns: 1fr; } .fondateur img { max-width: 220px; } }

/* ---------- preuves vérifiables ---------- */
.preuves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; }
.preuve { padding: 24px 0; border-top: 1px solid var(--filet-fort); }
.preuve:nth-last-child(-n + 3) { border-bottom: 1px solid var(--filet-fort); }
.preuve b { display: block; font-size: 19px; line-height: 1.3; }
.preuve p { margin-top: 8px; color: var(--encre-douce); font-size: 17px; line-height: 1.5; }
.preuve .mono { color: var(--encre); }
.salle .preuve { border-color: var(--filet-salle-fort); }
.salle .preuve p { color: var(--craie-douce); }
.salle .preuve .mono { color: var(--craie); }
@media (max-width: 1180px) { .preuves { grid-template-columns: 1fr 1fr; } .preuve:nth-last-child(-n + 3) { border-bottom: 0; } .preuve:nth-last-child(-n + 2) { border-bottom: 1px solid var(--filet-fort); } }
@media (max-width: 760px) { .preuves { grid-template-columns: 1fr; } .preuve:nth-last-child(-n + 2) { border-bottom: 0; } .preuve:last-child { border-bottom: 1px solid var(--filet-fort); } }

.tete-ligne { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 40px; margin-bottom: 8px; }

/* ---------- appel final : question qualifiante ---------- */
.question { text-align: center; padding-block: clamp(110px, 14vw, 180px) clamp(100px, 12vw, 150px); }
.question h2 { max-width: 15em; margin-inline: auto; color: var(--craie); }
.reponses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1080px; margin: clamp(40px, 6vw, 64px) auto 0; text-align: left; }
.reponses a { position: relative; display: block; padding: 30px 28px; border: 1px solid var(--filet-salle-fort); border-radius: 18px; overflow: hidden; font-size: clamp(18px, .6vw + 14px, 21px); font-weight: 600; line-height: 1.4; text-decoration: none; isolation: isolate; transition: transform .3s var(--doux), box-shadow .3s; }
.reponses a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--marqueur); transform: scaleY(0); transform-origin: bottom; transition: transform .35s var(--doux); }
.reponses a span { display: block; margin-bottom: 12px; font: 700 15px/1 var(--f-texte); letter-spacing: .1em; color: var(--marqueur-clair); }
.reponses a small { display: block; margin-top: 12px; font: 500 12.5px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--craie-douce); }
.reponses a:hover, .reponses a:focus-visible { color: var(--encre); transform: translateY(-6px); box-shadow: var(--lueur-reponse); }
.reponses a:hover::before, .reponses a:focus-visible::before { transform: scaleY(1); }
.reponses a:hover span, .reponses a:focus-visible span, .reponses a:hover small, .reponses a:focus-visible small { color: var(--encre); }
.question .btn { margin-top: clamp(40px, 5vw, 60px); }
@media (max-width: 860px) { .reponses { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .reponses a::before, .reponses a { transition: none; } }

/* ---------- pages intérieures ---------- */
.tete { padding-block: clamp(48px, 7vw, 104px) clamp(40px, 6vw, 80px); }
.ariane ol { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 26px; padding: 0; list-style: none; font: 500 12.5px var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--encre-douce); }
.ariane li + li::before { content: "/"; margin-right: 10px; color: var(--marqueur-texte); }
.ariane a { display: inline-flex; min-height: 32px; align-items: center; }
.tete__grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 28px 64px; align-items: end; }
.tete h1 { margin-top: 18px; max-width: 18ch; }
.tete .chapo { margin-top: 0; }
.tete__cote { display: grid; gap: 18px; }
.tete__qualiopi { width: 200px; margin-top: 22px; border: 1px solid var(--filet); border-radius: 14px; padding: 6px; background: var(--feuille); }
.preuve__logo { width: 180px; margin-bottom: 14px; border-radius: 6px; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.badges span { padding: 7px 14px; border: 1px solid var(--filet-fort); border-radius: 999px; background: var(--feuille); font: 500 12.5px var(--f-mono); letter-spacing: .05em; text-transform: uppercase; }
.salle .badges span { background: transparent; border-color: var(--filet-salle-fort); }
@media (max-width: 900px) { .tete__grille { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .tete h1, .entre { animation: titre-entre 1s var(--doux) .15s both; }
}
@keyframes titre-entre { from { transform: translateY(.35em); clip-path: inset(-40% -10% 100% -10%); } to { transform: none; clip-path: inset(-40% -10% -40% -10%); } }

/* deux colonnes à filet */
.duo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px clamp(30px, 6vw, 96px); padding-block: clamp(40px, 5vw, 72px); border-top: 2px solid var(--encre); }
.salle .duo { border-color: var(--filet-salle-fort); }
.duo h2 { font-size: clamp(28px, 2.2vw + 14px, 46px); }
.duo .prose { font-size: var(--t-corps); }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }

/* liste numérotée à filets */
.liste-num { list-style: none; padding: 0; counter-reset: n; }
.liste-num > li { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--filet); counter-increment: n; }
.liste-num > li::before { content: counter(n, decimal-leading-zero); font: 500 15px var(--f-mono); color: var(--marqueur-texte); padding-top: 4px; }
.liste-num h3 { font-size: clamp(20px, .8vw + 14px, 25px); }
.liste-num p { margin-top: 8px; color: var(--encre-douce); }
.salle .liste-num > li { border-color: var(--filet-salle); }
.salle .liste-num > li::before { color: var(--marqueur-clair); }
.salle .liste-num p { color: var(--craie-douce); }

/* tuiles à filet haut */
.tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 28px; }
.tuiles > * { padding-top: 20px; border-top: 3px solid var(--encre); }
.tuiles h3 { font-size: clamp(20px, .8vw + 14px, 25px); }
.tuiles p { margin-top: 10px; color: var(--encre-douce); font-size: 17.5px; line-height: 1.55; }
.salle .tuiles > * { border-color: var(--marqueur); }
.salle .tuiles p { color: var(--craie-douce); }
@media (max-width: 980px) { .tuiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .tuiles { grid-template-columns: 1fr; } }

/* ---------- formation : à l'affiche + index ---------- */
.affiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
@media (min-width: 1240px) { .affiche--sept { grid-template-columns: repeat(4, 1fr); } }
.module { position: relative; display: flex; flex-direction: column; padding: 26px 24px; background: var(--feuille); border: 1px solid var(--filet); border-radius: 14px; scroll-margin-top: calc(var(--entete) + 20px); }
.module:target { outline: 3px solid var(--marqueur); outline-offset: 4px; }
.module:hover, .dossier:hover .dossier__picto { box-shadow: var(--ombre-dure); }
.module--appel { justify-content: space-between; gap: 16px; background: var(--salle); color: var(--craie); border-color: var(--salle); }
.module--appel p { color: var(--craie-douce); }
.module--appel .btn { align-self: flex-start; }
.module .mono { color: var(--marqueur-texte); text-transform: uppercase; font-size: 12.5px; }
.module h3 { margin-top: 12px; font-size: 22px; font-stretch: 115%; }
.module p { margin-top: 10px; color: var(--encre-douce); font-size: 17px; line-height: 1.5; }
.module ul { margin-top: 14px; padding: 0; list-style: none; display: grid; gap: 6px; }
.module li { padding-left: 18px; position: relative; font-size: 17px; line-height: 1.45; }
.module li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 2px; background: var(--marqueur); }
.module .lien { margin-top: auto; padding-top: 14px; }
.index-cadre { overflow-x: auto; background: var(--feuille); }
.feuille-doc .index { border-top: 0; }
.index { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: 17px; }
.index caption { padding: 14px 16px; text-align: left; font: 500 var(--t-micro) var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--encre-douce); border-bottom: 1px solid var(--filet); }
.index th, .index td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--filet); }
.index thead th { position: sticky; top: 0; background: var(--papier-ombre); font: 500 var(--t-micro) var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.index tbody th { font-weight: 650; }
.index td { color: var(--encre-douce); }
.index tr { scroll-margin-top: calc(var(--entete) + 24px); }
.index tr:target { outline: 2px solid var(--marqueur); outline-offset: -2px; background: var(--marqueur-voile); }
@media (max-width: 760px) {
  .index { min-width: 0; }
  .index thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .index tr { display: block; padding: 14px 16px; border-bottom: 1px solid var(--filet); }
  .index th, .index td { display: block; padding: 2px 0; border: 0; }
  .index td:nth-child(2) { font-size: 13px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--marqueur-texte); }
}
.indicateurs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.indicateurs div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 18px 0; border-top: 1px solid var(--filet-salle-fort); }
.indicateurs dt { color: var(--craie-douce); font-size: 17px; }
.indicateurs dd { margin: 0; font: 800 clamp(48px, 4vw + 16px, 84px)/1 var(--f-texte); font-stretch: 125%; color: var(--marqueur-clair); }
.temoin { padding: 28px; border: 1px solid var(--filet-salle-fort); border-radius: 18px; }
.temoin blockquote { font-size: var(--t-chapo); line-height: 1.5; }
.temoin blockquote::before { content: "«"; display: block; font: 700 70px/.6 var(--f-texte); color: var(--marqueur); margin-bottom: 10px; }
.temoin figcaption { margin-top: 16px; font: 500 13px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--craie-douce); }
.qualiopi-bloc { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; padding: 22px; background: var(--feuille); border: 1px solid var(--filet); border-radius: 14px; }
.qualiopi-bloc img { width: 220px; }
.qualiopi-bloc p { font-size: 17px; color: var(--encre-douce); }
.qualiopi-bloc b { color: var(--encre); }
@media (max-width: 620px) { .qualiopi-bloc { grid-template-columns: 1fr; } .indicateurs { grid-template-columns: 1fr; } }

/* ---------- accompagnement : chaîne verticale ---------- */
.chaine { list-style: none; padding: 0; position: relative; display: grid; gap: 0; }
.chaine::before { content: ""; position: absolute; left: 35px; top: 30px; bottom: 30px; border-left: 2px dashed var(--filet-fort); }
.chaine li { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 24px; padding: 20px 0; }
.chaine__n { display: grid; place-items: center; width: 72px; height: 72px; border: 1px solid var(--filet); border-radius: 14px; background: var(--feuille); font: 650 16px var(--f-texte); color: var(--marqueur-texte); }
.chaine li:nth-child(6) .chaine__n { background: var(--marqueur); }
.chaine h3 { font-size: clamp(22px, 1vw + 14px, 28px); }
.chaine .mono { display: block; color: var(--marqueur-texte); text-transform: uppercase; font-size: 12.5px; margin-bottom: 6px; }
.chaine p { margin-top: 6px; color: var(--encre-douce); }
.chaine .livre { margin-top: 8px; font-size: 16.5px; }
.chaine .livre b { font: 500 12px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; margin-right: 8px; color: var(--encre); }

/* index de dossiers chiffrés */
.dossiers { border-top: 2px solid var(--encre); }
.dossier { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: clamp(18px, 3vw, 40px); padding-block: clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--filet); scroll-margin-top: calc(var(--entete) + 16px); }
.dossier__picto { display: grid; place-items: center; width: 80px; height: 80px; border: 1px solid var(--filet); border-radius: 14px; background: var(--papier); font: 650 15px var(--f-texte); color: var(--barre-1); transition: background .25s; }
.dossier .mono { color: var(--encre-douce); text-transform: uppercase; font-size: 12.5px; }
.dossier h2, .dossier h3 { margin-top: 10px; font-size: clamp(24px, 1.8vw + 12px, 40px); }
.dossier h2 a, .dossier h3 a { text-decoration: none; }
.dossier h2 a::after, .dossier h3 a::after { content: ""; position: absolute; inset: 0; }
.dossier > div > p { margin-top: 12px; color: var(--encre-douce); max-width: 64ch; }
.chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin-top: 22px; border-top: 1px solid var(--filet); }
.chiffres div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding-top: 14px; }
.chiffres dt { color: var(--encre-douce); font-size: 16px; line-height: 1.4; }
.chiffres dd { margin: 0 0 4px; font: 800 clamp(26px, 1.4vw + 16px, 38px)/1.05 var(--f-texte); font-stretch: 118%; }
.dossier .lien { position: relative; z-index: 1; margin-top: 12px; }
.note-source { margin-top: 26px; font: 500 12.5px/1.6 var(--f-mono); color: var(--encre-douce); }
@media (max-width: 640px) { .dossier { grid-template-columns: 1fr; } .chiffres { grid-template-columns: 1fr; } }

/* étude de cas */
.cas-chiffres { padding-block: clamp(40px, 5vw, 64px); }
.cas-chiffres dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; }
.cas-chiffres dl > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding-top: 18px; border-top: 1px solid var(--filet-salle-fort); }
.cas-chiffres dt { color: var(--craie-douce); font-size: 17px; line-height: 1.45; }
.cas-chiffres dd { margin: 0; font: 800 clamp(32px, 2.6vw + 12px, 56px)/1 var(--f-texte); font-stretch: 112%; color: var(--marqueur-clair); }
.recit { max-width: 820px; }
.recit section + section { margin-top: 44px; }
.recit h2 { padding-top: 22px; border-top: 2px solid var(--encre); font-size: clamp(26px, 1.6vw + 14px, 36px); }
.recit h2 + * { margin-top: 16px; }
.recit ul, .recit ol { margin-top: 14px; padding-left: 1.2em; }
.recit li + li { margin-top: 6px; }
.competences { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 0; list-style: none; }
.competences li { padding: 6px 12px; border: 1px solid var(--filet-fort); border-radius: 999px; font-size: 15.5px; }
@media (max-width: 760px) { .cas-chiffres dl { grid-template-columns: 1fr; } }

/* glissements moins / plus */
.glissements { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.glissement { padding: 26px; background: var(--salle-panneau); border: 1px solid var(--filet-salle); border-radius: 20px; }
.glissement s { font: 400 14px var(--f-mono); color: var(--craie-douce); text-decoration-color: var(--marqueur); text-decoration-thickness: 2px; }
.glissement b { display: block; margin-top: 6px; font: 700 26px/1.15 var(--f-texte); color: var(--marqueur-clair); }
.glissement p { margin-top: 12px; color: var(--craie-douce); font-size: 17px; line-height: 1.5; }
@media (max-width: 1100px) { .glissements { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .glissements { grid-template-columns: 1fr; } }

/* situations par profil */
.ancres { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.ancres a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--filet-fort); border-radius: 8px; font-size: 16px; font-weight: 700; text-decoration: none; background: var(--feuille); }
.ancres a:hover { background: var(--encre); color: var(--craie); }
.profil { padding-block: clamp(56px, 7vw, 96px); border-top: 2px solid var(--encre); scroll-margin-top: calc(var(--entete) + 8px); }
.profil__tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 56px; align-items: end; }
.profil__tete h2 { margin-top: 12px; }
.enjeux { display: grid; gap: 18px; margin-top: 36px; }
.enjeu { padding: 26px 28px; background: var(--feuille); border: 1px solid var(--filet); border-left: 4px solid var(--marqueur); }
.enjeu--a { border-left-color: var(--barre-2); }
.enjeu h3 { font-size: clamp(21px, .8vw + 15px, 26px); font-stretch: 105%; }
.enjeu__label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-douce); }
.enjeu__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 36px; margin-top: 16px; }
.enjeu__cols b { display: block; margin-bottom: 6px; font: 500 15px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--marqueur-texte); }
.enjeu__cols p { color: var(--encre-douce); font-size: 17.5px; }
.enjeu .lien { margin-top: 10px; }
.retour-ancres { display: inline-flex; margin-top: 26px; min-height: 44px; align-items: center; font: 500 13px var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 760px) { .profil__tete, .enjeu__cols { grid-template-columns: 1fr; } }

/* offre en bref */
.en-bref { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 30px 64px; align-items: start; }
.en-bref__texte { font-size: clamp(21px, .8vw + 15px, 26px); line-height: 1.5; }
.faits { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.faits div { padding: 14px 0; border-top: 1px solid var(--filet-fort); }
.faits dt { font: 500 12.5px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--encre-douce); }
.faits dd { margin: 6px 0 0; font-weight: 650; line-height: 1.35; }
.etapes-romaines { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: r; }
.etapes-romaines li { padding: 28px; background: var(--feuille); border: 1px solid var(--filet); border-radius: 14px; counter-increment: r; }
.etapes-romaines li::before { content: "Étape " counter(r); display: block; margin-bottom: 12px; font: 650 13px/1.3 var(--f-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--marqueur-texte); }
.etapes-romaines h3 { font-size: 22px; }
.etapes-romaines p { margin-top: 10px; color: var(--encre-douce); font-size: 17.5px; }
.panneau { padding: clamp(28px, 5vw, 64px); background: var(--salle); color: var(--craie); border-radius: var(--rayon-l); }
.panneau p { color: var(--craie-douce); font-size: var(--t-chapo); line-height: 1.5; max-width: 60ch; }
.panneau p + p { margin-top: 14px; }
.questions { display: grid; gap: 0; border-top: 2px solid var(--encre); }
.questions details { border-bottom: 1px solid var(--filet); }
.questions summary { display: flex; justify-content: space-between; gap: 20px; align-items: center; min-height: 64px; padding: 14px 0; font-weight: 700; font-size: clamp(18px, .6vw + 15px, 22px); cursor: pointer; list-style: none; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 1.5px solid var(--encre); border-radius: 50%; font: 500 20px var(--f-mono); transition: transform .3s var(--doux); }
.questions details[open] summary::after { transform: rotate(45deg); background: var(--marqueur); }
.questions details p { padding: 0 0 22px; color: var(--encre-douce); max-width: 68ch; }
@media (max-width: 860px) { .en-bref { grid-template-columns: 1fr; } .etapes-romaines { grid-template-columns: 1fr; } }

/* équipe */
.intervenants { columns: 3 300px; column-gap: 20px; }
.intervenant { break-inside: avoid; margin-bottom: 20px; padding: 18px; background: var(--feuille); border: 1px solid var(--filet); border-radius: 12px; }
.intervenant img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; filter: grayscale(.35); transition: filter .4s; }
.intervenant:hover img { filter: none; }
.intervenant figcaption { margin-top: 14px; }
.intervenant b { display: block; font-size: 22px; font-stretch: 118%; }
.intervenant q { display: block; margin-top: 6px; font: italic 550 18px/1.35 var(--f-texte); color: var(--marqueur-texte); quotes: "« " " »"; }
.intervenant p { margin-top: 8px; color: var(--encre-douce); font-size: 17px; line-height: 1.5; }
.valeurs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.valeur { padding: clamp(24px, 3vw, 40px); border: 1px solid var(--filet-salle-fort); border-radius: 28px; }
.valeur h3 { font-size: clamp(26px, 1.6vw + 14px, 38px); }
.valeur p { margin-top: 12px; color: var(--craie-douce); }
@media (max-width: 760px) { .valeurs { grid-template-columns: 1fr; } }

/* carnet (blog) */
.une { display: grid; grid-template-columns: 1.1fr .9fr; gap: 0; background: var(--feuille); border: 1px solid var(--filet); border-radius: 14px; overflow: hidden; box-shadow: var(--ombre-dure); }
.une__img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.une__txt { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(24px, 4vw, 52px); }
.une__txt h2 { font-size: clamp(28px, 2vw + 12px, 46px); }
.une__txt h2 a { text-decoration: none; }
.une__txt p { color: var(--encre-douce); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.une__txt .mono { color: var(--encre-douce); text-transform: uppercase; font-size: 12.5px; }
@media (max-width: 900px) { .une { grid-template-columns: 1fr; } }
.filtres { position: sticky; top: var(--entete); z-index: 20; padding-block: 16px; background: var(--papier-voile); backdrop-filter: blur(12px); border-bottom: 1px solid var(--filet); }
.filtres__in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--filet-fort); border-radius: 999px; background: var(--feuille); color: var(--encre); font: 600 16px var(--f-texte); cursor: pointer; }
.puce span { font: 500 12.5px var(--f-mono); opacity: .75; }
.puce:hover { border-color: var(--marqueur-texte); color: var(--marqueur-texte); }
.puce[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--craie); }
.recherche { position: relative; flex: 1 1 260px; max-width: 380px; }
.recherche input { width: 100%; min-height: 50px; padding: 0 18px 0 48px; border: 1.5px solid var(--filet-fort); border-radius: 999px; background: var(--feuille); color: var(--encre); font: 500 16px var(--f-texte); }
.recherche input:focus { outline: none; border-color: var(--marqueur-texte); box-shadow: 0 0 0 4px var(--marqueur-voile); }
.recherche svg { position: absolute; left: 18px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); }
.compteur { margin-left: auto; font: 500 13px var(--f-mono); color: var(--encre-douce); }
.grille-art { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 24px; margin-top: 36px; }
.carte-art { position: relative; display: flex; flex-direction: column; background: var(--feuille); border: 1px solid var(--filet); border-radius: 10px; overflow: hidden; content-visibility: auto; contain-intrinsic-size: auto 520px; }
.carte-art__img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--papier-ombre); }
.carte-art__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--doux); }
.carte-art:hover .carte-art__img img { transform: scale(1.05); }
.carte-art__txt { display: flex; flex-direction: column; flex: 1; padding: 22px; }
.carte-art__cat { font: 500 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--marqueur-texte); }
.carte-art h3 { margin-top: 10px; font-size: 21px; line-height: 1.2; font-stretch: 108%; }
.carte-art h3 a { text-decoration: none; }
.carte-art h3 a::after { content: ""; position: absolute; inset: 0; }
.carte-art p { margin-top: 10px; color: var(--encre-douce); font-size: 16.5px; line-height: 1.5; }
.carte-art time { margin-top: auto; padding-top: 16px; font: 500 12.5px var(--f-mono); color: var(--encre-douce); }
@media (max-width: 760px) {
  .filtres { position: static; }
  .puces { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .puce { flex: none; scroll-snap-align: start; }
  .compteur { margin-left: 0; }
}
.vide { margin-top: 30px; padding: 24px; border: 1.5px dashed var(--filet-fort); border-radius: 10px; }

/* article */
.progression { position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 4px; background: var(--marqueur); transform-origin: left; transform: scaleX(0); pointer-events: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) { .progression { animation: lire linear both; animation-timeline: scroll(root); } }
}
@keyframes lire { to { transform: scaleX(1); } }
.article-tete { padding-block: clamp(40px, 6vw, 88px) 36px; }
.article-tete h1 { font-size: clamp(34px, 3.6vw + 12px, 68px); max-width: 22ch; margin-top: 16px; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 22px; font: 500 13px var(--f-mono); color: var(--encre-douce); text-transform: uppercase; letter-spacing: .04em; }
.article-grille { display: grid; grid-template-columns: 250px minmax(0, 720px); gap: 56px; padding-bottom: var(--pas); }
.sommaire { position: sticky; top: calc(var(--entete) + 16px); align-self: start; max-height: calc(100vh - var(--entete) - 32px); overflow: auto; font-size: 15.5px; }
.sommaire summary { min-height: 44px; display: flex; align-items: center; font: 500 13px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.sommaire ol { list-style: none; margin: 8px 0 0; padding: 0; border-left: 1px solid var(--filet); }
.sommaire a { display: block; padding: 7px 0 7px 14px; margin-left: -1px; border-left: 3px solid transparent; text-decoration: none; color: var(--encre-douce); line-height: 1.35; }
.sommaire a.actif { border-left-color: var(--marqueur); color: var(--encre); font-weight: 700; }
.corps-article { font-size: clamp(18px, .3vw + 17px, 20px); line-height: 1.75; }
.corps-article > * + * { margin-top: 1.1em; }
.corps-article h2 { margin-top: 1.8em; font-size: clamp(25px, 1.4vw + 15px, 34px); line-height: 1.15; scroll-margin-top: calc(var(--entete) + 20px); }
.corps-article h3 { margin-top: 1.5em; font-size: clamp(21px, .6vw + 17px, 25px); scroll-margin-top: calc(var(--entete) + 20px); }
.corps-article h4, .corps-article h5 { margin-top: 1.3em; font-size: 19px; font-weight: 750; font-stretch: 105%; }
.corps-article ul, .corps-article ol { padding-left: 1.3em; }
.corps-article li + li { margin-top: .4em; }
.corps-article blockquote { padding: 6px 0 6px 22px; border-left: 4px solid var(--marqueur); font-weight: 550; }
.corps-article figure, .corps-article .fig { margin-block: 1.6em; }
.corps-article img { border-radius: 6px; }
.corps-article figcaption { margin-top: 8px; font: 500 13px/1.5 var(--f-mono); color: var(--encre-douce); }
.corps-article a { color: var(--marqueur-texte); }
.corps-article table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 16px; }
.corps-article td, .corps-article th { padding: 8px 12px; border: 1px solid var(--filet); vertical-align: top; }
.corps-article iframe { display: none; }
.en-bref-art { padding: 20px 24px; background: var(--papier-ombre); border-left: 4px solid var(--encre); font-size: 18px; }
.en-bref-art b { display: block; margin-bottom: 6px; font: 500 12.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.encart { margin-top: 48px; padding: clamp(24px, 4vw, 40px); background: var(--marqueur); color: var(--encre); border: 2px solid var(--encre); border-radius: 14px; }
.encart h2 { font-size: clamp(24px, 1.4vw + 14px, 34px); margin-top: 0; }
.encart p { margin-top: 10px; }
.encart .actions { margin-top: 20px; }
.encart .btn { background: var(--encre); color: var(--craie); }
.encart .btn::before { background: var(--marqueur); }
.partage { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--filet); }
.partage > span:first-child { width: 100%; font: 500 13px var(--f-mono); letter-spacing: .18em; text-transform: uppercase; }
.partage a, .partage button { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--filet-fort); border-radius: 50%; background: var(--feuille); color: var(--encre-douce); cursor: pointer; }
.partage a:hover, .partage button:hover { background: var(--marqueur); color: var(--encre); }
.partage svg { width: 19px; height: 19px; }
.toast { font: 600 16px var(--f-texte); color: var(--marqueur-texte); opacity: 0; transition: opacity .3s; }
.toast.visible { opacity: 1; }
@media (max-width: 900px) {
  .article-grille { grid-template-columns: 1fr; gap: 24px; }
  .sommaire { position: static; max-height: none; padding: 6px 16px; border: 1px solid var(--filet); border-radius: 10px; background: var(--feuille); }
}

/* contact */
.contact-grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px clamp(30px, 6vw, 90px); align-items: start; }
.formulaire { padding: clamp(24px, 4vw, 44px); background: var(--feuille); border: 1px solid var(--filet); border-radius: 14px; box-shadow: var(--ombre-dure); }
.formulaire fieldset { margin: 20px 0 0; padding: 0; border: 0; }
.formulaire h2 { margin-bottom: 8px; }
.formulaire legend { padding: 0; font: 500 13px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--marqueur-texte); }
.choix { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 14px 0 26px; }
.choix label { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 14px; border: 1.5px solid var(--filet-fort); border-radius: 10px; font-weight: 650; font-size: 16.5px; line-height: 1.25; cursor: pointer; }
.choix input { width: 20px; height: 20px; accent-color: var(--marqueur-texte); flex: none; }
.choix label:has(input:checked) { border-color: var(--encre); background: var(--marqueur-voile); }
.champ { display: grid; gap: 6px; margin-top: 18px; }
.champ label { font-weight: 650; font-size: 16.5px; }
.champ input, .champ textarea, .champ select { width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--filet-fort); border-radius: 8px; background: var(--feuille); color: var(--encre); font: 500 17px var(--f-texte); }
.champ textarea { min-height: 150px; resize: vertical; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 4px var(--marqueur-voile); }
.champ--duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.erreur { color: var(--marqueur-texte); font-size: 15.5px; font-weight: 600; }
.erreur:empty { display: none; }
.aide { color: var(--encre-douce); font-size: 15px; }
.formulaire .btn { margin-top: 26px; }
.statut { margin-top: 18px; padding: 14px 16px; border-left: 4px solid var(--marqueur); background: var(--papier-ombre); }
.statut:empty { display: none; }
.cote-contact { display: grid; gap: 16px; }
.canal { display: block; padding: 22px 24px; border: 1px solid var(--filet-fort); border-radius: 12px; background: var(--feuille); text-decoration: none; }
.canal .mono { color: var(--marqueur-texte); text-transform: uppercase; font-size: 12.5px; }
.canal b { display: block; margin-top: 8px; font-size: 21px; font-stretch: 110%; }
.canal p { margin-top: 6px; color: var(--encre-douce); font-size: 16.5px; }
a.canal:hover { border-color: var(--encre); box-shadow: var(--ombre-dure); }
.pot-de-miel { position: absolute; left: -10000px; }
@media (max-width: 900px) { .contact-grille { grid-template-columns: 1fr; } .choix { grid-template-columns: 1fr; } .champ--duo { grid-template-columns: 1fr; } }

/* légal */
.legal { max-width: 78ch; }
.legal p { margin-top: 1em; color: var(--encre-douce); font-size: 17px; line-height: 1.7; }
.legal h2 { margin-top: 1.8em; font-size: clamp(22px, 1vw + 16px, 28px); }

/* bande d'appel */
.appel { display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; align-items: center; }
.appel h2 { font-size: clamp(28px, 2.4vw + 12px, 50px); max-width: 20ch; }
.appel p { margin-top: 12px; color: var(--craie-douce); max-width: 56ch; }
@media (max-width: 860px) { .appel { grid-template-columns: 1fr; } }

/* apparition au défilement (jouée une fois, jamais masquante sans JS) */
@media (prefers-reduced-motion: no-preference) {
  .js .apparait { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--doux), transform .8s var(--doux); }
  .js .apparait.vu { opacity: 1; transform: none; }
}

/* 404 */
.perdu { min-height: 60vh; display: grid; align-content: center; gap: 22px; }
.perdu .code { font-size: 15px; }

/* appel sur papier */
.feuille .appel p, .blanc .appel p { color: var(--encre-douce); }
.tete.salle { border-bottom: 0; }
.tete.salle .ariane ol { color: var(--craie-discrete); }
.tete.salle .ariane li + li::before { color: var(--marqueur-clair); }
.chiffre-geant { font: 750 clamp(64px, 7vw, 120px)/.9 var(--f-texte); font-stretch: 112%; color: var(--marqueur-texte); }
.chiffre-geant small { display: block; font: 600 var(--t-mono) var(--f-texte); letter-spacing: .1em; text-transform: uppercase; color: var(--encre-douce); margin-top: 12px; }
.aspirations { display: grid; grid-template-columns: 1fr 1fr; gap: 24px clamp(30px, 6vw, 90px); align-items: start; }
.aspirations ul { list-style: none; padding: 0; display: grid; gap: 12px; }
.aspirations li { position: relative; padding-left: 26px; font-size: var(--t-chapo); line-height: 1.4; }
.aspirations li::before { content: "—"; position: absolute; left: 0; color: var(--marqueur-texte); }
@media (max-width: 860px) { .aspirations { grid-template-columns: 1fr; } }
.tete--photo .chapo { margin-top: 20px; }
.tete--photo .actions { margin-top: 26px; }
.tete--photo h1 { max-width: 20ch; }

/* utilitaires */
.apres-liste { margin-top: 26px; }
.salle .note-source { color: var(--craie-discrete); }
.schema .t-clair { fill: var(--craie); }
.citation .reperes { margin-top: 18px; }
.module.module--appel p { color: var(--craie-douce); }
.module.module--appel .mono { color: var(--marqueur-clair); }
.module.module--appel .btn { padding: 0 18px; font-size: 15px; white-space: nowrap; }
.carte-art__img picture { display: block; height: 100%; }
@media (min-width: 620px) { .grille-art--quatre { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grille-art--quatre { grid-template-columns: repeat(4, 1fr); } }