/* Polices hébergées avec le site : aucune requête vers un service externe. */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque.woff") format("woff"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4.woff") format("woff"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-italic.woff") format("woff"); font-weight: 400 700; font-style: italic; font-display: swap; }

/* ==========================================================================
   PLAN DE CONCEPTION
   Sujet      Cabinet-conseil en subventions et financement au Québec.
   Langage    Le dossier de demande : feuille de grand livre, lignes, cases à
              cocher, tampon. Les composants prennent la forme d'un registre,
              d'une feuille de formulaire ou d'une chemise à onglets, jamais
              d'une grille de cartes identiques.
   Mise en page  Alignée à gauche, asymétrique. Un seul moment fort : le titre
              posé sur les lignes du grand livre et le dossier qui se coche.
              Tout le reste reste calme.
   Couleurs   Palette claire et posée : blanc cassé, bleu pâle, gris lavande,
              crème, ardoise, noir et brun. L'ardoise sert aux titres, aux
              boutons, aux liens et aux coches (le stylo). Le crème sert au
              tampon, aux avis et à la bande des secteurs. Le mode sombre en
              dérive : ardoise et crème s'y inversent.
   Polices    Bricolage Grotesque pour les titres et l'interface,
              Source Serif 4 pour le texte courant.
   ========================================================================== */

:root {
  /* Surfaces */
  --feuille: #e6eef3;       /* fond de page : bleu pâle */
  --papier: #fcfcfc;        /* feuilles, panneaux, bandes claires : blanc cassé */
  --creme: #feedc9;         /* bande des secteurs */
  /* Texte et filets */
  --encre: #151515;         /* texte, filets forts */
  --crayon: #58595c;        /* texte secondaire */
  --trait: #c1c4cd;         /* filets fins */
  --trait-fort: #9b9da4;    /* filets marqués, lignes du titre */
  /* Accents */
  --ardoise: #3a4559;       /* titres, boutons, liens, coches, focus */
  --or: #b8912f;            /* coche du logo, marge du héros */
  --or-clair: #e3b94d;      /* coche du logo sur fond foncé */
  --erreur: #b3261e;        /* erreurs de formulaire */
  --marqueur: #f7d58a;      /* surlignage de la recherche */
  /* Tampon et avis : crème et brun */
  --tampon-fond: #feedc9;
  --tampon-encre: #231c13;
  --avis-fond: #feedc9;
  --avis-texte: #231c13;
  --avis-trait: #b8912f;
  /* Bandes : gris lavande */
  --bande: #d4d7e1;
  --sur-bande: #151515;
  --sur-bande-2: #3a4559;
  --trait-bande: #9b9da4;
  /* Pied de page : ardoise */
  --pied: #3a4559;
  --sur-pied: #fcfcfc;
  --sur-pied-2: #d4d7e1;
  --trait-pied: #6b768a;

  --grotesque: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  --wrap: 72rem;
  --gut: clamp(1rem, 4vw, 2rem);
  --rayon: 6px;

  --t-lede: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --t-h2: clamp(1.8rem, 1.25rem + 2vw, 2.75rem);
  --t-h1: clamp(2.3rem, 1.2rem + 4.6vw, 4.6rem);
  --t-h1-page: clamp(2rem, 1.15rem + 3.4vw, 3.6rem);

  color-scheme: light;
}

/* Mode sombre : les mêmes jetons, redéfinis. Modifiez les deux blocs ensemble. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --feuille: #11151b;
    --papier: #181e27;
    --creme: #181e27;
    --encre: #e6eef3;
    --crayon: #aeb6c3;
    --trait: #2a3240;
    --trait-fort: #465065;
    --ardoise: #feedc9;
    --or: #e3b94d;
    --erreur: #ff9a8f;
    --marqueur: #5b4a17;
    --tampon-fond: #2b2416;
    --tampon-encre: #feedc9;
    --avis-fond: #262014;
    --avis-texte: #f3e6c8;
    --avis-trait: #c9a24a;
    --bande: #212a37;
    --sur-bande: #e6eef3;
    --sur-bande-2: #b4bcc9;
    --trait-bande: #3a4659;
    --pied: #0b0e12;
    --sur-pied: #e6eef3;
    --sur-pied-2: #aeb6c3;
    --trait-pied: #2b3442;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --feuille: #11151b;
  --papier: #181e27;
  --creme: #181e27;
  --encre: #e6eef3;
  --crayon: #aeb6c3;
  --trait: #2a3240;
  --trait-fort: #465065;
  --ardoise: #feedc9;
  --or: #e3b94d;
  --erreur: #ff9a8f;
  --marqueur: #5b4a17;
  --tampon-fond: #2b2416;
  --tampon-encre: #feedc9;
  --avis-fond: #262014;
  --avis-texte: #f3e6c8;
  --avis-trait: #c9a24a;
  --bande: #212a37;
  --sur-bande: #e6eef3;
  --sur-bande-2: #b4bcc9;
  --trait-bande: #3a4659;
  --pied: #0b0e12;
  --sur-pied: #e6eef3;
  --sur-pied-2: #aeb6c3;
  --trait-pied: #2b3442;
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--feuille);
  color: var(--encre);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--grotesque);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -.018em;
  text-wrap: balance;
}
h2 { font-size: var(--t-h2); }
h3 { font-size: 1.35rem; line-height: 1.2; }
h4 { font-size: 1.08rem; line-height: 1.25; letter-spacing: -.01em; }

p { margin: 0 0 1em; max-width: 42rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }

a { color: var(--ardoise); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--ardoise); outline-offset: 3px; border-radius: 2px; }
.bande :focus-visible { outline-color: var(--sur-bande); }
.pied-site :focus-visible { outline-color: var(--sur-pied); }

mark { background: var(--marqueur); color: var(--encre); padding: 0 .12em; border-radius: 2px; }

/* Espace réservé à remplacer avant la mise en ligne : toujours entre crochets. */
.ph { border-bottom: 1.5px dotted var(--crayon); }

main:focus { outline: none; }

.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.saut {
  position: absolute; left: var(--gut); top: -5rem; z-index: 100;
  background: var(--encre); color: var(--feuille);
  padding: .7rem 1rem; border-radius: var(--rayon);
  font-family: var(--grotesque); font-weight: 600; text-decoration: none;
}
.saut:focus { top: .75rem; }

/* ---------- Mise en page ---------- */
.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--papier { background: var(--papier); border-block: 1px solid var(--trait); }
.section--creme { background: var(--creme); border-block: 1px solid var(--trait); }
.bande { background: var(--bande); color: var(--sur-bande); }
.bande a:not(.btn) { color: var(--sur-bande); }
.lede { font-size: var(--t-lede); line-height: 1.5; max-width: 38rem; }
.petit { font-size: .94rem; color: var(--crayon); }
.titre-bloc { display: grid; gap: .9rem; max-width: 44rem; }
.titre-bloc p { color: var(--crayon); font-size: 1.1rem; }

/* ---------- Boutons et liens ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .8rem 1.4rem;
  border: 1.5px solid var(--encre); border-radius: var(--rayon);
  font-family: var(--grotesque); font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--plein { background: var(--ardoise); border-color: var(--ardoise); color: var(--papier); }
.btn--plein:hover { background: color-mix(in srgb, var(--ardoise) 80%, var(--encre)); border-color: color-mix(in srgb, var(--ardoise) 80%, var(--encre)); text-decoration: none; }
.btn--contour { background: transparent; color: var(--encre); }
.btn--contour:hover { background: var(--ardoise); border-color: var(--ardoise); color: var(--papier); text-decoration: none; }
.lien { font-family: var(--grotesque); font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.6rem; }

/* ---------- En-tête ---------- */
.entete-site {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  background: color-mix(in srgb, var(--feuille) 94%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
}
/* La première rangée (logo, bouton Menu) garde la même hauteur, menu ouvert ou fermé. */
.entete-site .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; padding-block: .65rem; }
.entete-site .logo { min-height: 2.75rem; }

.logo {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--encre); text-decoration: none;
  font-family: var(--grotesque); font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; line-height: 1;
}
.logo:hover { text-decoration: none; }
.logo svg { width: 2.1rem; height: 2.1rem; flex: none; overflow: visible; }
.logo__carre { stroke: var(--encre); }
.logo__coche { stroke: var(--or); }

.nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin-inline-start: auto; }
.nav > ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; }
.nav__lien {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .55rem .8rem; border: 0; border-radius: var(--rayon);
  background: none; color: var(--encre);
  font-family: var(--grotesque); font-weight: 550; font-size: .97rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
}
.nav__lien:hover { background: var(--bande); text-decoration: none; }
.nav__lien[aria-current] { box-shadow: inset 0 -2px 0 var(--encre); border-radius: var(--rayon) var(--rayon) 0 0; }
.nav__groupe { position: relative; }
.nav__groupe > .nav__lien .ic { transition: transform .15s ease; }
.nav__groupe.is-open > .nav__lien .ic { transform: rotate(180deg); }
.nav__sous {
  list-style: none; min-width: 17rem; margin: 0; padding: .4rem;
  background: var(--papier); border: 1.5px solid var(--encre); border-radius: var(--rayon);
  box-shadow: 4px 4px 0 var(--trait-fort);
}
.nav__sous .nav__lien { width: 100%; }
.nav__cta { padding: .65rem 1.1rem; font-size: .97rem; }
.nav-toggle {
  display: none; margin-inline-start: auto;
  align-items: center; gap: .5rem; min-height: 2.75rem; padding: .55rem .8rem;
  border: 1.5px solid var(--encre); border-radius: var(--rayon);
  background: none; color: var(--encre);
  font-family: var(--grotesque); font-weight: 600; font-size: .95rem; cursor: pointer;
}
.nav-toggle .ic--x { display: none; }
.nav-toggle[aria-expanded="true"] .ic--menu { display: none; }
.nav-toggle[aria-expanded="true"] .ic--x { display: inline-block; }

/* Sans JavaScript : le menu reste visible, sur plusieurs lignes, et le groupe
   « Ressources » se déplie en liens ordinaires. Avec JavaScript : menu déroulant
   sur grand écran, panneau sur petit écran. */
html:not(.js) .nav__groupe, html:not(.js) .nav__sous { display: contents; }
html:not(.js) .nav__groupe > button { display: none; }
.js .nav__sous { display: none; position: absolute; top: calc(100% + .35rem); left: 0; z-index: 5; }
.js .nav__groupe.is-open > .nav__sous { display: block; }

@media (max-width: 63.99rem) {
  .js .nav-toggle { display: inline-flex; }
  .js .nav {
    display: none; flex-direction: column; align-items: stretch; flex-basis: 100%;
    margin: 0 calc(-1 * var(--gut)); padding: .5rem var(--gut) 1.25rem;
    background: var(--feuille); border-top: 1px solid var(--trait);
  }
  .js .nav.is-open { display: flex; }
  .js .nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .js .nav__lien { width: 100%; padding: .85rem .5rem; font-size: 1.05rem; border-bottom: 1px solid var(--trait); border-radius: 0; }
  .js .nav__lien[aria-current] { box-shadow: inset 3px 0 0 var(--encre); border-radius: 0; }
  .js .nav__groupe > .nav__lien { display: none; }
  .js .nav__sous { display: block; position: static; min-width: 0; padding: 0; border: 0; box-shadow: none; background: none; }
  .js .nav__cta { margin-top: .9rem; width: 100%; padding: .9rem 1.1rem; }
}

/* ---------- Titre sur lignes de grand livre ---------- */
.regle {
  --ligne: calc(var(--taille) * 1.14);
  --base: .84;
  font-size: var(--taille);
  line-height: var(--ligne);
  letter-spacing: -.024em;
  font-weight: 700;
  color: var(--ardoise);
  background-image: linear-gradient(to bottom,
    transparent calc(var(--ligne) * var(--base) - 1.5px),
    var(--trait-fort) calc(var(--ligne) * var(--base) - 1.5px),
    var(--trait-fort) calc(var(--ligne) * var(--base)),
    transparent calc(var(--ligne) * var(--base)));
  background-size: 100% var(--ligne);
  background-repeat: repeat-y;
}

/* ---------- Accueil : héros ---------- */
.hero { position: relative; padding-block: clamp(2.5rem, 6vw, 4.75rem) clamp(2.5rem, 5vw, 4rem); }
.hero + .section { padding-top: clamp(2rem, 4vw, 3.5rem); }
.hero .wrap {
  position: relative; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
}
.hero .wrap::before {
  content: ""; position: absolute; top: -1.25rem; bottom: -1.75rem; left: -.8rem; width: 1.5px;
  background: var(--or); opacity: .6;
}
.hero h1 { --taille: var(--t-h1); }
.hero__texte { display: grid; gap: 1.6rem; justify-items: start; }
.hero__texte .regle { width: 100%; }

.dossier { position: relative; margin: 0; padding: 0 1.4rem 1.4rem 0; justify-self: end; width: min(100%, 29rem); isolation: isolate; }
.dossier::before, .dossier::after {
  content: ""; position: absolute; border: 1.5px solid var(--encre); border-radius: 3px; z-index: -1;
}
.dossier::before { inset: .7rem .7rem .7rem 0; transform: translate(.7rem, .7rem); background: var(--papier); }
.dossier::after { inset: 1.4rem 1.4rem 0 0; transform: translate(.0rem, .0rem); background: var(--feuille); z-index: -2; }
.dossier__feuille {
  position: relative; background: var(--papier); border: 1.5px solid var(--encre); border-radius: 3px;
  padding: 1.2rem 1.3rem 1.1rem;
}
.dossier__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .75rem; }
.dossier__titre { font-family: var(--grotesque); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.dossier__ex { font-family: var(--grotesque); font-size: .85rem; color: var(--avis-texte); background: var(--avis-fond); border: 1px solid var(--avis-trait); border-radius: 99px; padding: .05rem .6rem; }
.dossier__lignes { list-style: none; }
.dossier__lignes li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--trait); align-items: start; }
.dossier__lignes b { display: block; font-family: var(--grotesque); font-weight: 600; font-size: 1.02rem; line-height: 1.25; }
.dossier__lignes span { display: block; font-style: italic; color: var(--crayon); font-size: .95rem; line-height: 1.4; margin-top: .15rem; }
.dossier__lignes li:nth-child(1) { --i: 0; }
.dossier__lignes li:nth-child(2) { --i: 1; }
.dossier__lignes li:nth-child(3) { --i: 2; }
.dossier__lignes li:nth-child(4) { --i: 3; }
.case {
  position: relative; width: 1.6rem; height: 1.6rem; margin-top: .1rem;
  border: 1.5px solid var(--encre); border-radius: 3px; background: var(--feuille);
}
.case svg { position: absolute; left: .02rem; bottom: .02rem; width: 2rem; height: 2rem; overflow: visible; }
.case path { fill: none; stroke: var(--ardoise); stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 0; }
.dossier__pied {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  min-height: 3.6rem; margin-top: .35rem; padding-top: .8rem; border-top: 1.5px solid var(--encre);
  font-family: var(--grotesque); font-size: .92rem;
}
.tampon {
  position: absolute; right: 1rem; bottom: 1.05rem; z-index: 3;
  padding: .3rem .8rem; border: 3px solid var(--tampon-encre); border-radius: 6px; outline: 1.5px solid var(--tampon-encre); outline-offset: 3px;
  color: var(--tampon-encre); font-family: var(--grotesque); font-weight: 800; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase;
  transform: rotate(-8deg); pointer-events: none;
  background: var(--tampon-fond);
}

/* Seul moment animé : les cases se cochent, puis le tampon tombe. */
@media (prefers-reduced-motion: no-preference) {
  .case path { stroke-dashoffset: 30; animation: trace .45s cubic-bezier(.4, 0, .2, 1) forwards; animation-delay: calc(.55s + var(--i) * .42s); }
  .tampon { opacity: 0; animation: tamponner .38s cubic-bezier(.2, .9, .3, 1.2) 2.35s forwards; }
}
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes tamponner {
  0% { opacity: 0; transform: rotate(-8deg) scale(1.7); }
  100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}

@media (max-width: 56rem) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .dossier { justify-self: start; }
}
/* Sur un téléphone, le tampon passe sous le texte du pied de feuille au lieu de le recouvrir. */
@media (max-width: 30rem) {
  .dossier__pied { min-height: 6.4rem; }
  .tampon { font-size: .95rem; right: .8rem; bottom: 1.3rem; }
}

/* ---------- Énoncé ---------- */
.enonce { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 6vw, 5rem); align-items: start; }
.enonce h2 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.9rem); }
.enonce p { font-size: 1.15rem; color: var(--encre); }
@media (max-width: 56rem) { .enonce { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Registre des leviers ---------- */
.registre { list-style: none; margin-top: 2.5rem; border-top: 2px solid var(--encre); }
.registre li {
  position: relative; display: grid; align-items: start; gap: .5rem 2rem;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.7fr) minmax(0, 1fr);
  padding: 1.6rem .75rem; border-bottom: 1px solid var(--trait-fort);
  transition: background-color .15s ease;
}
.registre li:hover { background: var(--papier); }
.registre h3 { font-size: 1.45rem; }
.registre h3 a { color: var(--encre); text-decoration: none; }
.registre h3 a::after { content: ""; position: absolute; inset: 0; }
.registre h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.registre p { margin: 0; }
.registre .qui { font-family: var(--grotesque); font-size: .95rem; color: var(--crayon); line-height: 1.45; }
@media (max-width: 60rem) { .registre li { grid-template-columns: minmax(0, 1fr); padding-inline: 0; } }

/* ---------- Étapes (vraie séquence) ---------- */
.etapes { list-style: none; margin-top: 2.75rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.etapes li { position: relative; padding-right: 1.75rem; display: grid; gap: .6rem; align-content: start; }
.etapes li:not(:last-child)::before {
  content: ""; position: absolute; top: 1.25rem; left: 3.1rem; right: .6rem; height: 1.5px; background: var(--trait-fort);
}
.num {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: .55rem;
  border: 1.5px solid var(--encre); border-radius: 3px; background: var(--papier);
  font-family: var(--grotesque); font-weight: 700; font-size: 1.1rem;
}
.etapes + .actions { margin-top: 2.5rem; }
.etapes p { margin: 0; font-size: 1rem; }
.etapes .livrable { margin-top: .35rem; font-family: var(--grotesque); font-size: .92rem; color: var(--crayon); }
.etapes .livrable b { color: var(--encre); font-weight: 600; }
/* Les quatre colonnes partagent les mêmes lignes : titres et livrables s'alignent. */
@media (min-width: 56.01rem) {
  @supports (grid-template-rows: subgrid) {
    .etapes { grid-template-rows: auto auto 1fr auto; }
    .etapes li { grid-row: span 4; grid-template-rows: subgrid; gap: 0; }
    .etapes li > * { margin-block: 0; }
    .etapes h3 { margin-bottom: .6rem; }
    .etapes p:not(.livrable) { margin-bottom: .9rem; }
  }
}
@media (max-width: 56rem) {
  .etapes { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .etapes li { padding: 0 0 0 3.6rem; }
  .etapes li:not(:last-child)::before { top: 2.7rem; bottom: -1.8rem; left: 1.2rem; right: auto; width: 1.5px; height: auto; }
  .etapes .num { position: absolute; left: 0; top: 0; margin: 0; }
}

/* ---------- Bande mission ---------- */
.mission { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 6vw, 5rem); align-items: end; }
.mission h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); color: var(--sur-bande); }
.mission p { color: var(--sur-bande-2); font-size: 1.15rem; }
.mission .actions { margin-top: 1.5rem; }
@media (max-width: 56rem) { .mission { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Critères (cases cochées) ---------- */
.verifs { list-style: none; margin-top: 2.25rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 6vw, 4.5rem); }
.verifs li { position: relative; display: grid; gap: .35rem; padding: 1.3rem 0 1.3rem 3rem; border-top: 1px solid var(--trait-fort); }
.verifs li::before {
  content: ""; position: absolute; left: 0; top: 1.5rem; width: 1.6rem; height: 1.6rem;
  border: 1.5px solid var(--encre); border-radius: 3px; background: var(--papier);
}
.verifs li::after {
  content: ""; position: absolute; left: .05rem; top: 1.2rem; width: 2rem; height: 2rem; background: var(--ardoise);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 13l5.5 5.5L22 4' fill='none' stroke='black' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 13l5.5 5.5L22 4' fill='none' stroke='black' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
.verifs h3 { font-size: 1.25rem; }
.verifs p { margin: 0; color: var(--crayon); font-size: 1rem; }
@media (max-width: 48rem) { .verifs { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Secteurs : chemise à onglets ---------- */
.secteurs { display: grid; grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr); margin-top: 2.5rem; align-items: start; }
.secteurs__onglets { display: none; flex-direction: column; }
.js .secteurs__onglets { display: flex; }
.secteurs__onglets button {
  position: relative; text-align: left; cursor: pointer;
  padding: .9rem 1rem; border: 1.5px solid transparent; border-right: 0; border-radius: 3px 0 0 3px;
  background: transparent; color: var(--encre);
  font-family: var(--grotesque); font-weight: 600; font-size: .98rem; line-height: 1.25;
}
.secteurs__onglets button:hover { background: var(--bande); }
.secteurs__onglets button[aria-selected="true"] {
  z-index: 2; margin-right: -1.5px; background: var(--papier); border-color: var(--encre);
  border-right: 1.5px solid var(--papier);
}
.secteurs__panneau { background: var(--papier); border: 1.5px solid var(--encre); border-radius: 0 3px 3px 3px; padding: clamp(1.4rem, 3vw, 2.4rem); min-height: 20rem; }
.secteurs__panneau + .secteurs__panneau { margin-top: 1.25rem; border-radius: 3px; }
.js .secteurs__panneau + .secteurs__panneau { margin-top: 0; }
.secteurs__panneau h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin-bottom: .75rem; }
.secteurs__colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; margin-top: 1.5rem; }
.secteurs__colonnes h4 { margin-bottom: .6rem; }
.liste-points { list-style: none; display: grid; gap: .5rem; }
.liste-points li { position: relative; padding-left: 1.35rem; line-height: 1.5; }
.liste-points li::before { content: ""; position: absolute; left: 0; top: .6em; width: .55rem; height: .55rem; border: 1.5px solid var(--encre); border-radius: 1px; }
.secteurs__panneau .actions { margin-top: 1.75rem; }
.secteurs-wrap { display: contents; }
.js .secteurs { grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr); }
.secteurs:not(.is-actif) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 52rem) {
  .js .secteurs { grid-template-columns: minmax(0, 1fr); }
  .js .secteurs__onglets { flex-direction: row; overflow-x: auto; gap: .35rem; padding-bottom: .6rem; scrollbar-width: thin; }
  .js .secteurs__onglets button { flex: none; border: 1.5px solid var(--trait-fort); border-radius: 99px; padding: .55rem .95rem; }
  .js .secteurs__onglets button[aria-selected="true"] { margin: 0; background: var(--ardoise); color: var(--papier); border-color: var(--ardoise); }
  .secteurs__panneau { border-radius: 3px; min-height: 0; }
  .secteurs__colonnes { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Formulaire (feuille) ---------- */
.contact-bloc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2.5rem clamp(2rem, 6vw, 5rem); align-items: start; }
.contact-bloc__texte { display: grid; gap: 1.5rem; }
@media (max-width: 56rem) { .contact-bloc { grid-template-columns: minmax(0, 1fr); } }

.coordonnees { list-style: none; display: grid; gap: .9rem; font-family: var(--grotesque); font-size: 1.05rem; }
.coordonnees li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: start; }
.coordonnees .ic { margin-top: .2rem; color: var(--crayon); }
.coordonnees a { color: var(--encre); }
.coordonnees small { display: block; font-size: .88rem; color: var(--crayon); }
.copie { display: inline-flex; align-items: center; gap: .35rem; margin-left: .6rem; padding: .15rem .55rem; border: 1px solid var(--trait-fort); border-radius: 99px; background: none; color: var(--crayon); font: 500 .82rem var(--grotesque); cursor: pointer; }
.copie:hover { color: var(--encre); border-color: var(--encre); }

.feuille {
  background: var(--papier); border: 1.5px solid var(--encre); border-radius: 3px;
  padding: clamp(1.25rem, 3vw, 2rem); box-shadow: 8px 8px 0 var(--trait-fort);
}
.feuille h3 { margin-bottom: 1.25rem; font-size: 1.5rem; }
.formulaire { display: grid; gap: 1.15rem; }
.formulaire .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; }
@media (max-width: 40rem) { .formulaire .duo { grid-template-columns: minmax(0, 1fr); } }
.champ { display: grid; gap: .4rem; min-width: 0; }
.champ label { font-family: var(--grotesque); font-weight: 600; font-size: .98rem; }
.champ label small { font-weight: 400; color: var(--crayon); font-size: .88rem; }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: .72rem .85rem;
  border: 1.5px solid var(--crayon); border-radius: 4px;
  background: var(--feuille); color: var(--encre);
  font: 1rem/1.4 var(--serif);
}
.champ textarea { min-height: 8.5rem; resize: vertical; }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--encre); }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 3px solid var(--ardoise); outline-offset: 1px; border-color: var(--encre); }
.champ [aria-invalid="true"] { border-color: var(--erreur); }
.champ .erreur { color: var(--erreur); font-family: var(--grotesque); font-size: .9rem; min-height: 0; }
.champ--case { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .7rem; }
.champ--case input { appearance: none; -webkit-appearance: none; width: 1.5rem; height: 1.5rem; margin: .1rem 0 0; padding: 0; border-radius: 3px; background: var(--feuille); position: relative; cursor: pointer; }
.champ--case input:checked { background: var(--ardoise); border-color: var(--ardoise); }
.champ--case input:checked::after { content: ""; position: absolute; left: .42rem; top: .12rem; width: .5rem; height: .85rem; border: solid var(--papier); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.champ--case label { font-family: var(--serif); font-weight: 400; font-size: .95rem; line-height: 1.45; color: var(--crayon); }
.champ--case .erreur { grid-column: 2; }
html:not(.js) .formulaire, html:not(.js) .filtres { display: none; }
.feuille noscript p { margin: 0; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.statut { display: none; gap: .75rem; padding: 1rem 1.1rem; border: 1.5px solid var(--encre); border-radius: 4px; background: var(--feuille); font-size: .98rem; line-height: 1.5; }
.statut.is-visible { display: grid; }
.statut--erreur { border-color: var(--erreur); }
.statut p { margin: 0; max-width: none; }
.statut .actions { gap: .6rem 1rem; }
.statut .btn { padding: .5rem .9rem; font-size: .92rem; }

/* ---------- Pied de page ---------- */
.pied-site { background: var(--pied); color: var(--sur-pied); padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem; }
.pied-site a { color: var(--sur-pied); text-decoration-color: var(--trait-pied); }
.pied-site a:hover { text-decoration-color: currentColor; }
.pied-site .logo { color: var(--sur-pied); }
.pied-site .logo__carre { stroke: var(--sur-pied); }
.pied-site .logo__coche { stroke: var(--or-clair); }
.pied-site .ph { border-bottom-color: var(--sur-pied-2); }
.pied-grille { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; }
.pied-grille h2 { font-size: 1rem; margin-bottom: .9rem; color: var(--sur-pied-2); font-weight: 600; letter-spacing: 0; }
.pied-grille p { color: var(--sur-pied-2); font-size: .98rem; margin-top: 1rem; }
.pied-grille ul { list-style: none; display: grid; gap: .5rem; font-family: var(--grotesque); font-size: .98rem; }
.pied-grille address { font-style: normal; font-size: .98rem; line-height: 1.55; }
.pied-bas { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--trait-pied); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; font-family: var(--grotesque); font-size: .88rem; color: var(--sur-pied-2); }
@media (max-width: 56rem) { .pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pied-grille > :first-child { grid-column: 1 / -1; } }
@media (max-width: 34rem) { .pied-grille { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Pages intérieures ---------- */
.page-entete { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2.25rem, 4vw, 3.5rem); border-bottom: 1px solid var(--trait); }
.page-entete .wrap { display: grid; gap: 1.5rem; justify-items: start; }
.page-entete h1 { --taille: var(--t-h1-page); width: 100%; max-width: 48rem; }
.page-entete + .section { padding-top: clamp(2.5rem, 5vw, 4rem); }

.service { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.5rem clamp(2rem, 6vw, 5rem); padding-block: 2.5rem; border-top: 1.5px solid var(--encre); }
.service:last-of-type { border-bottom: 1.5px solid var(--encre); }
.service__titre { display: grid; gap: 1rem; align-content: start; }
.service h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }
.service .qui { font-family: var(--grotesque); font-size: .95rem; color: var(--crayon); }
.cases { list-style: none; display: grid; gap: .1rem; }
.cases li { position: relative; padding: .75rem 0 .75rem 2.5rem; border-bottom: 1px solid var(--trait); line-height: 1.45; }
.cases li:last-child { border-bottom: 0; }
.cases li::before { content: ""; position: absolute; left: 0; top: .85rem; width: 1.4rem; height: 1.4rem; border: 1.5px solid var(--encre); border-radius: 3px; background: var(--papier); }
.cases li::after {
  content: ""; position: absolute; left: .02rem; top: .6rem; width: 1.8rem; height: 1.8rem; background: var(--ardoise);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 13l5.5 5.5L22 4' fill='none' stroke='black' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 13l5.5 5.5L22 4' fill='none' stroke='black' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
@media (max-width: 56rem) { .service { grid-template-columns: minmax(0, 1fr); } }

.solution { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.5rem clamp(2rem, 6vw, 5rem); padding-block: 2.75rem; border-top: 1.5px solid var(--encre); }
.solution:last-of-type { border-bottom: 1.5px solid var(--encre); }
.solution h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); margin-bottom: 1rem; }
.solution__detail { display: grid; gap: 1.75rem; }
.solution__detail h3 { font-size: 1.1rem; margin-bottom: .65rem; letter-spacing: -.005em; }
@media (max-width: 56rem) { .solution { grid-template-columns: minmax(0, 1fr); } }

.tarifs { list-style: none; margin-top: 2rem; border-top: 2px solid var(--encre); }
.tarifs li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, .8fr); gap: .5rem 2rem; padding: 1.35rem .5rem; border-bottom: 1px solid var(--trait-fort); align-items: baseline; }
.tarifs h3 { font-size: 1.3rem; }
.tarifs p { margin: 0; }
.tarifs .prix { font-family: var(--grotesque); font-weight: 600; font-size: 1.05rem; text-align: right; }
.blanc { display: inline-block; min-width: 7rem; border-bottom: 1.5px dotted var(--crayon); color: var(--crayon); font-weight: 500; text-align: center; padding-inline: .5rem; }
@media (max-width: 56rem) { .tarifs li { grid-template-columns: minmax(0, 1fr); padding-inline: 0; } .tarifs .prix { text-align: left; } }

.profil { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.profil__monogramme { display: grid; place-items: center; width: 5rem; height: 5rem; border: 1.5px solid var(--encre); border-radius: 3px; background: var(--feuille); font-family: var(--grotesque); font-weight: 700; font-size: 1.7rem; }
.titre-bloc + .profil { margin-top: 2.5rem; }
.profil h3 { margin-bottom: .2rem; }
.profil .petit { margin-bottom: .75rem; }

.engagements { list-style: none; margin-top: 2rem; border-top: 2px solid var(--encre); }
.engagements li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: .4rem 2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--trait-fort); }
.engagements h3 { font-size: 1.3rem; }
.engagements p { margin: 0; }
@media (max-width: 48rem) { .engagements li { grid-template-columns: minmax(0, 1fr); } }

/* Chronologie de la méthodologie */
.chrono { list-style: none; margin-top: 2.5rem; display: grid; }
.chrono li { position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0 1.25rem; padding-bottom: 2.75rem; }
.chrono li:not(:last-child)::before { content: ""; position: absolute; left: 1.2rem; top: 3rem; bottom: .25rem; width: 1.5px; background: var(--trait-fort); }
.chrono .num { margin: 0; }
.chrono h2 { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2rem); margin-bottom: .6rem; }
.chrono__corps { display: grid; gap: .9rem; }
.chrono__double { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; padding-top: .9rem; border-top: 1px solid var(--trait); }
.chrono__double h3 { font-size: 1rem; margin-bottom: .25rem; }
.chrono__double p { margin: 0; font-size: 1rem; color: var(--crayon); }
@media (max-width: 40rem) { .chrono li { grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0 .9rem; } .chrono__double { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ ---------- */
.faq { max-width: 54rem; }
.faq h2 { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2rem); margin: 0 0 .75rem; }
.faq__groupe + .faq__groupe { margin-top: 3.25rem; }
.faq details { border-top: 1px solid var(--trait-fort); }
.faq details:last-of-type { border-bottom: 1px solid var(--trait-fort); }
.faq summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 1.15rem 3rem 1.15rem 0;
  font-family: var(--grotesque); font-weight: 600; font-size: 1.2rem; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%; width: 1rem; height: 1rem; transform: translateY(-50%);
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: transform .2s ease;
}
.faq details[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.faq .reponse { padding: 0 0 1.5rem; }
.faq .reponse p { max-width: 44rem; }

/* ---------- Répertoire ---------- */
.filtres { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) auto; gap: .9rem; align-items: end; padding: 1.25rem; background: var(--papier); border: 1.5px solid var(--encre); border-radius: 3px; }
.filtres .champ input, .filtres .champ select { padding-block: .62rem; }
.champ--recherche { position: relative; }
.champ--recherche .ic { position: absolute; left: .8rem; bottom: .85rem; color: var(--crayon); pointer-events: none; }
.champ--recherche input { padding-left: 2.5rem; }
.filtres .btn { padding: .65rem 1rem; font-size: .95rem; }
@media (max-width: 62rem) { .filtres { grid-template-columns: repeat(2, minmax(0, 1fr)); } .champ--recherche { grid-column: 1 / -1; } }
@media (max-width: 36rem) { .filtres { grid-template-columns: minmax(0, 1fr); } }
.compte { margin: 1.5rem 0 .75rem; font-family: var(--grotesque); font-weight: 600; }
.programmes { width: 100%; border-collapse: collapse; }
.programmes thead th { text-align: left; padding: .6rem .75rem; border-bottom: 2px solid var(--encre); background: var(--bande); font-family: var(--grotesque); font-weight: 600; font-size: .9rem; color: var(--sur-bande-2); }
.programmes tbody tr { border-bottom: 1px solid var(--trait-fort); }
.programmes th[scope="row"], .programmes td { padding: 1.2rem .75rem; vertical-align: top; text-align: left; font-weight: 400; }
.programmes th[scope="row"] { width: 42%; }
.programmes td { font-family: var(--grotesque); font-size: .95rem; line-height: 1.4; }
.prog-nom { font-family: var(--grotesque); font-weight: 650; font-size: 1.2rem; line-height: 1.25; }
.prog-nom a { color: var(--encre); }
.prog-nom .ic { margin-left: .3rem; color: var(--crayon); font-size: .9em; }
.prog-desc { margin: .45rem 0 0; font-weight: 400; font-size: 1rem; color: var(--crayon); max-width: 34rem; }
.vide { display: none; padding: 2rem 0; font-family: var(--grotesque); font-size: 1.1rem; }
.vide.is-visible { display: block; }
@media (max-width: 52rem) {
  .programmes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .programmes, .programmes tbody, .programmes tr { display: block; }
  .programmes tr { padding: 1.25rem 0; }
  .programmes th[scope="row"], .programmes td { display: block; width: auto; padding: .15rem 0; }
  .programmes td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .75rem; }
  .programmes td::before { content: attr(data-label); color: var(--crayon); }
  .programmes th[scope="row"] { padding-bottom: .6rem; }
}
.avis { margin-top: 2rem; padding: 1.1rem 1.25rem; border-left: 4px solid var(--avis-trait); background: var(--avis-fond); color: var(--avis-texte); font-size: 1rem; max-width: 52rem; }

/* ---------- Blogue ---------- */
.puces { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin-bottom: 1.5rem; }
.puces:empty { display: none; }
.puce { padding: .45rem .95rem; border: 1.5px solid var(--trait-fort); border-radius: 99px; background: none; color: var(--encre); font: 600 .95rem var(--grotesque); cursor: pointer; }
.puce:hover { border-color: var(--encre); }
.puce[aria-pressed="true"] { background: var(--ardoise); color: var(--papier); border-color: var(--ardoise); }
.sommaire { list-style: none; border-top: 2px solid var(--encre); }
.sommaire li { position: relative; display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 9rem; gap: .5rem 2rem; padding: 1.6rem .75rem; border-bottom: 1px solid var(--trait-fort); align-items: start; transition: background-color .15s ease; }
.sommaire li:hover { background: var(--papier); }
.sommaire time, .sommaire .meta { font-family: var(--grotesque); font-size: .92rem; color: var(--crayon); line-height: 1.4; }
.sommaire h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); margin-bottom: .45rem; }
.sommaire h2 a { color: var(--encre); text-decoration: none; }
.sommaire h2 a::after { content: ""; position: absolute; inset: 0; }
.sommaire h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.sommaire p { margin: 0; color: var(--crayon); }
.sommaire .meta { text-align: right; }
@media (max-width: 52rem) { .sommaire li { grid-template-columns: minmax(0, 1fr); padding-inline: 0; } .sommaire .meta { text-align: left; } }

.article-entete .meta-article { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-family: var(--grotesque); font-size: .95rem; color: var(--crayon); }
.article-grille { display: grid; grid-template-columns: minmax(0, 42rem) minmax(0, 1fr); gap: 2rem clamp(2.5rem, 6vw, 5rem); align-items: start; padding-block: 3rem 1rem; }
.article { max-width: 42rem; padding-block: 3rem 4rem; }
.article-grille .article { padding-block: 0; }
.article h2 { font-size: clamp(1.45rem, 1.15rem + 1vw, 1.9rem); margin: 2.5rem 0 .8rem; }
.article > :first-child { margin-top: 0; }
.article p { max-width: none; font-size: 1.125rem; line-height: 1.7; }
.article ul { list-style: none; display: grid; gap: .5rem; margin: 0 0 1.25em; }
.article ul li { position: relative; padding-left: 1.5rem; font-size: 1.125rem; line-height: 1.6; }
.article ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: .6rem; height: .6rem; border: 1.5px solid var(--encre); border-radius: 1px; }
.article .avis { margin: 0 0 1rem; }
.retenir h2 { margin: 0 0 1rem; font-size: 1.35rem; }
.retenir .liste-points li { font-size: 1.02rem; }
.article-grille .retenir { grid-column: 2; grid-row: 1; position: sticky; top: 6.5rem; max-width: 24rem; }
@media (max-width: 64rem) {
  .article-grille { grid-template-columns: minmax(0, 1fr); }
  .article-grille .retenir { grid-column: 1; grid-row: auto; position: static; max-width: none; }
}
.article-fin { max-width: 42rem; padding-block: 1rem 4rem; }

/* ---------- Page de contact ---------- */
.contact-page { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 3rem clamp(2rem, 6vw, 5rem); align-items: start; }
.contact-page aside { display: grid; gap: 2.25rem; }
.contact-page aside h2 { font-size: 1.4rem; margin-bottom: 1rem; }
.suite { list-style: none; display: grid; gap: 1rem; }
.suite li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .9rem; align-items: start; }
.suite .num { width: 2.25rem; height: 2.25rem; margin: 0; font-size: 1rem; }
.suite p { margin: 0; padding-top: .3rem; }
@media (max-width: 56rem) { .contact-page { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Erreur 404 ---------- */
.introuvable { min-height: 55vh; display: grid; align-content: center; gap: 1.5rem; padding-block: 4rem; justify-items: start; }
.introuvable h1 { --taille: var(--t-h1-page); width: 100%; max-width: 48rem; }