/* DIEX AIE CONSULTING — « Le chemin balisé »
   Polices auto-hébergées (aucun appel à Google Fonts). */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-full-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-full-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: only light;
  --lin: #f2ede1;
  --papier: #fbf8f1;
  --pre: #dfe6d4;
  --pre-fonce: #c9d5bb;
  --encre: #1f2a25;
  --encre-doux: #4a524d;
  --bocage: #2b5544;
  --bocage-fonce: #1c3a2f;
  --bois: #8a5530;
  --bois-fonce: #6b3f22;
  --bois-clair: #b98154;
  --creme-bois: #fbf3e4;
  --balise: #c23b2a;
  --ardoise: #3b5466;
  --trait: #cbbfa8;        /* pointillés et bordures sur lin/papier */
  --trait-pre: #b9c4ab;    /* pointillés sur fond pré */
  --trait-fort: #b6a98f;
  --champ-bord: #8f846f;  /* bord des champs : 3,7:1 sur blanc (WCAG 1.4.11) */
  --sur-sombre: #d6dccf;   /* texte courant sur vert foncé */
  --sur-sombre-doux: #aeb8a8;
  --ombre-sombre: rgba(10, 25, 18, 0.7);
  --logo-rouge: #a31621;
  --logo-or: #e8b730;
  --logo-bleu: #1d3461;

  --m1: var(--bocage);
  --m2: var(--bois);
  --m3: var(--ardoise);

  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Public Sans", "Segoe UI", "Helvetica Neue", sans-serif;
  --main: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  --wrap: 72rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 28px;
  --ombre: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 14px 30px -18px rgba(60, 40, 20, 0.45);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--encre);
  background-color: var(--lin);
  /* grain de papier très léger */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .16 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  text-rendering: optimizeLegibility;
}

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

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

:focus-visible {
  outline: 3px solid var(--bocage-fonce);
  outline-offset: 3px;
  border-radius: 4px;
}
.band--bocage :focus-visible,
.site-footer :focus-visible { outline-color: var(--papier); }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 450;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 4.6vw, 3.9rem); font-optical-sizing: auto; }
h2 { font-size: clamp(1.85rem, 3.2vw, 2.6rem); }
h3 { font-size: 1.3rem; font-weight: 560; line-height: 1.25; }
p { margin: 0; text-wrap: pretty; }
h1 .surtitre {
  display: block; margin-bottom: 0.9rem;
  font: 600 clamp(0.95rem, 1.4vw, 1.05rem)/1.4 var(--sans); letter-spacing: 0.01em; color: var(--bocage);
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: 38em; }
.lede { font-size: 1.15rem; color: var(--encre-doux); }
.muted { color: var(--encre-doux); }
.stack > * + * { margin-top: 1.1rem; }
.stack-l > * + * { margin-top: 1.75rem; }

[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--encre); color: var(--papier); padding: 0.7rem 1rem; border-radius: var(--radius-s);
}
.skip:focus { top: 1rem; }

/* L'annotation manuscrite — usage rare et volontaire */
.main-note {
  font-family: var(--main);
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--bois-fonce);
}

/* Balise de sentier (blanc sur rouge, comme un GR) */
.blaze {
  display: inline-block;
  width: 1.1em; height: 0.8em;
  vertical-align: -0.05em;
  background: linear-gradient(#fff 0 45%, transparent 45% 55%, var(--balise) 55% 100%);
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(31, 42, 37, 0.15);
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.55rem 1.5rem;
  border-radius: 999px; border: 2px solid transparent;
  font: 600 1rem/1.2 var(--sans);
  text-decoration: none; cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.btn:active { transform: translateY(1px); }
.btn[aria-busy="true"] { opacity: 0.75; cursor: progress; }
.btn--plein { background: var(--bocage); color: var(--papier); }
.btn--plein:hover { background: var(--bocage-fonce); color: var(--papier); }
.btn--trait { border-color: var(--encre); color: var(--encre); background: transparent; }
.btn--trait:hover { background: var(--encre); color: var(--papier); }
.btn--clair { background: var(--papier); color: var(--bocage-fonce); }
.btn--clair:hover { background: #fff; color: var(--bocage-fonce); }
.btn--clair-trait { border-color: var(--papier); color: var(--papier); }
.btn--clair-trait:hover { background: var(--papier); color: var(--bocage-fonce); }
.actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* ---------- En-tête ---------- */
.site-header { position: relative; z-index: 20; }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1rem;
}
.logo {
  display: inline-flex; align-items: center; gap: 0.65rem;
  color: var(--encre); text-decoration: none;
}
.logo:hover { color: var(--encre); }
/* Logo : couleurs normandes (marque/README.md), symbole dans assets/img/symbole.svg */
.logo__mark { width: 2.75rem; height: 2.75rem; flex: none; }
.logo__nom {
  font-family: var(--serif); font-size: 1.45rem; font-weight: 600;
  font-variation-settings: "SOFT" 100, "WONK" 1; letter-spacing: 0.01em; line-height: 1;
  color: var(--logo-bleu);
}
.logo__sous { display: block; font: 500 0.82rem/1.2 var(--sans); color: var(--logo-rouge); letter-spacing: 0.02em; margin-top: 0.15rem; }

.menu-toggle {
  display: none;
  min-height: 2.75rem; padding: 0 1rem;
  border: 2px solid var(--encre); border-radius: 999px;
  background: transparent; color: var(--encre);
  font: 600 0.95rem var(--sans); cursor: pointer;
}

.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav > a,
.nav summary {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 2.75rem; padding: 0 0.85rem; border-radius: 999px;
  color: var(--encre); text-decoration: none; font-weight: 500; cursor: pointer;
}
.nav > a:hover,
.nav summary:hover { background: rgba(43, 85, 68, 0.09); color: var(--encre); }
.nav [aria-current="page"] { background: var(--pre); }
.nav .btn { margin-left: 0.5rem; }
.nav > a.btn { color: var(--papier); }
.nav > a.btn:hover { background: var(--bocage-fonce); color: var(--papier); }
.nav > a.btn[aria-current="page"] { background: var(--bocage-fonce); }
.nav summary { list-style: none; }
.nav > a, .nav summary { white-space: nowrap; }
.nav summary::-webkit-details-marker { display: none; }
.nav summary::after {
  content: ""; width: 0.45rem; height: 0.45rem; margin-left: 0.2rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform 0.15s;
}
.nav details[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.nav details { position: relative; }
.nav details.is-current summary { background: var(--pre); }
.sous-menu {
  position: absolute; top: calc(100% + 0.5rem); left: 0; min-width: 19rem;
  margin: 0; padding: 0.5rem; list-style: none;
  background: var(--papier); border-radius: var(--radius-m); box-shadow: var(--ombre);
  border: 1px solid rgba(31, 42, 37, 0.08);
}
.sous-menu a {
  display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.75rem; align-items: center;
  padding: 0.7rem 0.8rem; border-radius: 10px; color: var(--encre); text-decoration: none;
}
.sous-menu a:hover { background: var(--lin); color: var(--encre); }
.sous-menu .pastille { grid-row: span 2; }
.sous-menu strong { font-weight: 600; }
.sous-menu span.desc { font-size: 0.9rem; color: var(--encre-doux); }

.pastille {
  width: 0.85rem; height: 0.85rem; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 3px rgba(251, 248, 241, 0.6);
}
.pastille--m1 { background: var(--m1); }
.pastille--m2 { background: var(--m2); }
.pastille--m3 { background: var(--m3); }

/* Menu replié jusqu'à 1100 px : au-delà de 5 liens, la barre ne tient plus sur une ligne */
@media (max-width: 1100px) {
  .menu-toggle { display: inline-flex; align-items: center; }
  .nav {
    display: none;
    position: absolute; top: 100%; left: var(--gutter); right: var(--gutter);
    flex-direction: column; align-items: stretch; gap: 0.15rem;
    padding: 0.75rem; background: var(--papier); border-radius: var(--radius-m); box-shadow: var(--ombre);
  }
  .nav.is-open { display: flex; }
  .nav > a, .nav summary { border-radius: 10px; }
  .nav .btn { margin: 0.5rem 0 0; }
  .sous-menu { position: static; min-width: 0; box-shadow: none; border: 0; padding: 0 0 0 0.5rem; background: transparent; }
}

/* ---------- Haies (séparateurs organiques) ---------- */
.haie { display: block; width: 100%; height: clamp(28px, 4vw, 54px); }
.haie--papier { color: var(--papier); }
.haie--pre { color: var(--pre); }
.haie--bocage { color: var(--bocage-fonce); }
.haie--lin { color: var(--lin); }
.haie.sur-papier { background: var(--papier); }
.haie path { fill: currentColor; }

.band { position: relative; }
.band--papier { background: var(--papier); }
.band--pre { background: var(--pre); }
.band--bocage { background: var(--bocage-fonce); color: var(--creme-bois); }
.band--bocage h2, .band--bocage h3 { color: #fff; }
.band--bocage .muted, .band--bocage .lede { color: var(--sur-sombre); }
.band--bocage a:not(.btn) { color: #fff; }

.section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section--serre { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section-tete { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-tete > * + * { margin-top: 0.85rem; }

/* ---------- Accueil : héros + poteau indicateur ---------- */
.hero { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); }
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.hero__texte > * + * { margin-top: 1.4rem; }
.hero__texte .actions { margin-top: 2rem; }
.hero__signature {
  display: flex; align-items: center; gap: 0.85rem; margin-top: 2.25rem;
  color: var(--encre-doux); font-size: 0.98rem;
}
.hero__signature img {
  width: 3.25rem; height: 3.25rem; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--papier); box-shadow: 0 4px 12px -6px rgba(60, 40, 20, 0.5);
}

.poteau {
  position: relative;
  display: grid; justify-items: center;
  padding: 4.25rem 0 0;
  isolation: isolate;
}
.poteau::before { /* clairière derrière le poteau */
  content: ""; position: absolute; z-index: -2;
  inset: 8% -4% 6% -4%;
  background: var(--pre);
  border-radius: 46% 54% 40% 60% / 55% 45% 55% 45%;
}
.poteau__fut {
  position: absolute; z-index: -1; top: 0.5rem; bottom: 2.6rem; left: 50%;
  width: 24px; margin-left: -12px; border-radius: 4px 4px 0 0;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.09) 0 2px, transparent 2px 6px),
    linear-gradient(90deg, var(--bois-fonce), var(--bois) 40%, var(--bois-clair) 60%, var(--bois-fonce));
  box-shadow: 4px 0 10px -4px rgba(40, 25, 10, 0.4);
}
.poteau__chapeau {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 1rem; margin-bottom: 1.1rem;
  background: var(--papier); border-radius: var(--radius-s);
  font-weight: 600; font-size: 0.95rem;
  box-shadow: var(--ombre);
}
.poteau__planches { list-style: none; margin: 0; padding: 0; width: min(100%, 27rem); display: grid; gap: 1rem; }
.poteau__note {
  position: absolute; z-index: 2; right: 0; top: 0;
  transform: rotate(4deg); max-width: 9rem; text-align: center;
}
.poteau__note svg { width: 3rem; height: 2.4rem; margin: 0.1rem 0 0 1rem; display: block; color: var(--bois-fonce); }
@media (min-width: 861px) and (max-width: 1100px) {
  /* Tablette : colonne plus étroite, l'étiquette descend sous la note pour ne pas la toucher */
  .poteau { padding-top: 6.75rem; }
  .poteau__note { right: -0.5rem; }
}
.poteau__sol { width: 70%; height: 2.8rem; color: var(--bocage); margin-top: 0.4rem; }
.poteau__sol path { fill: currentColor; }

.planche {
  --decal: 1.4rem;
  position: relative;
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.85rem;
  padding: 0.95rem 3.8rem 0.95rem 1.35rem;
  min-height: 4.6rem;
  color: var(--creme-bois); text-decoration: none;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, var(--bois-clair) -40%, var(--bois) 35%, var(--bois-fonce) 140%);
  clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 50%, calc(100% - 2rem) 100%, 0 100%);
  filter: drop-shadow(0 8px 10px rgba(40, 25, 10, 0.28));
  transform: translateX(var(--decal)) rotate(-1.6deg);
  transition: transform 0.25s cubic-bezier(.3, 1.4, .5, 1), background-color 0.2s;
}
.planche--gauche {
  --decal: -1.4rem;
  padding: 0.95rem 1.35rem 0.95rem 3.8rem;
  clip-path: polygon(2rem 0, 100% 0, 100% 100%, 2rem 100%, 0 50%);
  transform: translateX(var(--decal)) rotate(1.4deg);
}
.planche:hover,
.planche:focus-visible { color: #fff; transform: translateX(calc(var(--decal) * 1.5)) rotate(0deg); }
.planche:focus-visible { outline: none; filter: drop-shadow(0 0 0 var(--bocage-fonce)) drop-shadow(0 0 3px var(--bocage-fonce)) drop-shadow(0 8px 10px rgba(40, 25, 10, 0.28)); }
.planche .pastille { grid-row: span 2; box-shadow: 0 0 0 2.5px var(--creme-bois); }
.planche__titre { font-family: var(--serif); font-size: 1.22rem; font-weight: 560; line-height: 1.2; font-variation-settings: "SOFT" 100; }
.planche__sous { font-size: 0.92rem; color: #f0dfc6; }
/* clous */
.planche::after {
  content: ""; position: absolute; top: 50%; right: 2.6rem; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: #4a2c17; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.planche--gauche::after { right: auto; left: 2.6rem; }

@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .poteau { margin-top: 0.5rem; padding-top: 1.5rem; }
  .poteau__note { display: none; }
  .planche, .planche--gauche { --decal: 0.4rem; }
  .planche--gauche { --decal: -0.4rem; }
}

/* ---------- Coches (symptômes) ---------- */
.coches { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 2.5rem; }
.coches legend { padding: 0; margin-bottom: 1.25rem; font-weight: 600; }
.coche {
  position: relative; display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.85rem; align-items: start;
  padding: 0.9rem 0.25rem 1rem; border-bottom: 1.5px dashed var(--trait); cursor: pointer;
}
.coche input { position: absolute; opacity: 0; width: 2rem; height: 2rem; margin: 0.15rem 0 0; cursor: pointer; }
.coche:hover .coche__case { background: var(--lin); }
.coche__case {
  width: 2rem; height: 2rem; margin-top: 0.1rem; border-radius: 5px;
  border: 2px solid var(--encre); background: var(--papier);
  display: grid; place-items: center;
  transform: rotate(-2deg);
}
.coche__case svg { width: 1.7rem; height: 1.7rem; color: var(--balise); opacity: 0; transform: scale(0.6); transition: opacity 0.15s, transform 0.2s cubic-bezier(.3, 1.6, .5, 1); }
.coche input:checked + .coche__case svg { opacity: 1; transform: scale(1); }
.coche input:focus-visible + .coche__case { outline: 3px solid var(--bocage-fonce); outline-offset: 3px; }
.coche__texte strong { display: block; font-weight: 600; }
.coche__texte span { color: var(--encre-doux); font-size: 0.97rem; }
.coches__verdict {
  margin-top: 2rem; min-height: 2.5rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem;
}
.coches__verdict .main-note { font-size: 1.75rem; }
@media (max-width: 720px) { .coches { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Le chemin (étapes) ---------- */
.chemin { list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.chemin::before {
  content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 0.9rem; height: 1.8rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='30' viewBox='0 0 160 30'%3E%3Cpath d='M0 15 C 40 2, 40 2, 80 15 S 120 28, 160 15' fill='none' stroke='%238a5530' stroke-width='2.5' stroke-dasharray='7 7' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / 160px 30px;
}
.etape { position: relative; }
.etape__borne {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 3.6rem; height: 3.6rem; margin-bottom: 1.25rem;
  border-radius: 50%; background: var(--papier); border: 3px solid var(--bocage);
  font: 600 1.5rem/1 var(--serif); color: var(--bocage);
  box-shadow: 0 0 0 6px var(--lin);
}
.band--papier .etape__borne { box-shadow: 0 0 0 6px var(--papier); }
.etape--depart .etape__borne { background: var(--bocage); color: var(--papier); }
.etape h3 { margin-bottom: 0.5rem; }
.etape p { color: var(--encre-doux); }
.etape .main-note { display: block; margin-top: 0.6rem; font-size: 1.45rem; }
@media (max-width: 860px) {
  .chemin { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; padding-left: 4.75rem; }
  .chemin::before {
    left: 1.8rem; right: auto; top: 1rem; bottom: 1rem; width: 0; height: auto;
    background: none; border-left: 2.5px dashed var(--bois);
  }
  .etape .etape__borne { position: absolute; left: -4.75rem; top: -0.4rem; }  /* le chemin de l'accueil seulement */
}

/* ---------- Trois situations (accueil) ---------- */
/* Colonnes partagées (subgrid) : alignées d'une situation à l'autre, la dernière à la largeur du plus long bouton */
.situations {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) auto; column-gap: 3rem;
}
.situation {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: subgrid;
  row-gap: 1.5rem; align-items: start;
  padding-block: 2.25rem;
  border-top: 1.5px dashed var(--trait);
}
.situation:last-child { border-bottom: 1.5px dashed var(--trait); }
.situation__titre h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); font-weight: 450; }
.situation p { color: var(--encre-doux); }
.situation .metiers { margin-top: 0.75rem; font-size: 0.95rem; }
.lien-suite { justify-self: end; max-width: 15rem; font-weight: 600; line-height: 1.4; text-decoration-thickness: 1.5px; }
.lien-suite span { display: inline-block; transition: transform 0.15s; }
.lien-suite:hover span { transform: translateX(3px); }
@media (max-width: 1100px) {
  /* Tablette : le bouton passe sous le texte plutôt que d'écraser la colonne du titre */
  .situations { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); }
  .situation .lien-suite { grid-column: 2; justify-self: start; }
}
@media (max-width: 860px) {
  .situations { grid-template-columns: minmax(0, 1fr); }
  .situation .lien-suite { grid-column: auto; }
  .situation { row-gap: 0.85rem; }
}

/* ---------- Bloc maîtrise d'ouvrage ---------- */
.moa { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.polaroid {
  justify-self: center;
  width: min(100%, 22rem);
  background: #fffdf8; padding: 0.85rem 0.85rem 0.4rem;
  border-radius: 3px;
  transform: rotate(-3deg);
  box-shadow: 0 22px 40px -22px var(--ombre-sombre);
}
.polaroid img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; border-radius: 2px; }
.polaroid--paysage { width: min(100%, 30rem); transform: rotate(-2deg); }
.polaroid--paysage img { aspect-ratio: 3 / 2; }
.polaroid figcaption { color: var(--bois-fonce); text-align: center; padding: 0.5rem 0 0.35rem; }
.citation {
  margin: 0;
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(1.55rem, 2.8vw, 2.2rem); line-height: 1.3;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: #fff;
}
@media (max-width: 860px) { .moa { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Appel final ---------- */
.appel {
  display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 2rem; align-items: center;
}
.appel h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
@media (max-width: 760px) { .appel { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Pages « situation » ---------- */
.page-tete { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); }
.page-tete .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(2rem, 5vw, 4rem); align-items: end; }
.page-tete__texte > * + * { margin-top: 1.25rem; }
.fil { font-size: 0.95rem; color: var(--encre-doux); }
.fil a { color: var(--encre-doux); }
.planche-seule { display: inline-grid; margin-bottom: 0.25rem; min-height: 3.4rem; }
.h1-situation .planche-seule { display: grid; width: fit-content; margin-bottom: 1.5rem; letter-spacing: 0; }
.h1-situation__accroche { display: block; }
.planche-seule .planche__sous:empty { display: none; }
.planche-seule.planche { transform: rotate(-1.6deg); }
.planche-seule.planche:hover { transform: rotate(0); }
.page-tete__aside {
  background: var(--papier); border-radius: var(--radius-l) var(--radius-l) var(--radius-l) 6px;
  padding: 1.6rem 1.75rem; box-shadow: var(--ombre);
}
.page-tete__aside .main-note { display: block; margin-bottom: 0.35rem; }
.page-tete__aside ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.page-tete__aside li + li { margin-top: 0.35rem; }
@media (max-width: 860px) { .page-tete .wrap { grid-template-columns: minmax(0, 1fr); } }

.reconnaitre { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 3rem; }
.reconnaitre li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.85rem; }
.reconnaitre .blaze { margin-top: 0.4rem; font-size: 1.1rem; }
.reconnaitre strong { display: block; font-weight: 600; }
.reconnaitre span.txt { color: var(--encre-doux); }
@media (max-width: 720px) { .reconnaitre { grid-template-columns: minmax(0, 1fr); } }

.briques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; }
.brique { padding: 1.75rem 2rem 1.9rem 0; border-top: 1.5px dashed var(--trait-pre); }
.brique:nth-child(even) { padding-left: 2rem; padding-right: 0; border-left: 1.5px dashed var(--trait-pre); }
.brique dt { font-family: var(--serif); font-size: 1.3rem; font-weight: 560; font-variation-settings: "SOFT" 100; margin-bottom: 0.5rem; }
.brique dd { margin: 0; color: var(--encre-doux); }
@media (max-width: 720px) {
  .briques { grid-template-columns: minmax(0, 1fr); }
  .brique, .brique:nth-child(even) { padding: 1.5rem 0; border-left: 0; }
}

.recit {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 0.35fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem);
  background: var(--papier); border-radius: 6px var(--radius-l) var(--radius-l) var(--radius-l);
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: var(--ombre);
}
.recit__cote h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.recit__cote .main-note { display: block; margin-top: 0.85rem; }
.recit__corps > * + * { margin-top: 1rem; }
@media (max-width: 760px) { .recit { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Réalisations ---------- */
.realisation { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.realisation__ecrans { position: relative; margin: 0 0 2.5rem; padding-right: 12%; }
.realisation__bureau { border-radius: var(--radius-m); box-shadow: var(--ombre); }
.realisation__mobile { position: absolute; right: 0; bottom: -2.5rem; width: 26%; border-radius: 14px; border: 4px solid var(--papier); box-shadow: var(--ombre); }
.realisation__texte h3 { font-size: 1.35rem; }
@media (max-width: 860px) { .realisation { grid-template-columns: minmax(0, 1fr); } }

.limites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.limites > div { padding: 1.75rem; border-radius: var(--radius-m); }
.limites .oui { background: var(--pre); }
.limites .non { border: 1.5px dashed var(--trait-fort); }
.limites h3 { margin-bottom: 0.85rem; font-size: 1.2rem; }
.limites ul { margin: 0; padding-left: 1.15rem; }
.limites li + li { margin-top: 0.5rem; }
@media (max-width: 720px) { .limites { grid-template-columns: minmax(0, 1fr); } }

.voisins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.voisins .planche { transform: none; }
.voisins .planche:hover { transform: translateX(0.4rem); }
.voisins .planche--gauche:hover { transform: translateX(-0.4rem); }
@media (max-width: 720px) { .voisins { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Méthode ---------- */
.etape-detail {
  display: grid; grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 0.8fr); gap: 1.25rem 2.5rem;
  padding-block: 2.5rem; border-top: 1.5px dashed var(--trait);
}
.etape-detail:last-of-type { border-bottom: 1.5px dashed var(--trait); }
.etape-detail .etape__borne { margin: 0; }
.etape-detail h2 { font-size: clamp(1.55rem, 2.5vw, 2rem); margin-bottom: 0.75rem; }
.etape-detail .recoit { background: var(--papier); border-radius: var(--radius-m); padding: 1.25rem 1.4rem; }
.etape-detail .recoit h3 { font-size: 1.05rem; font-family: var(--sans); font-weight: 600; margin-bottom: 0.5rem; }
.etape-detail .recoit ul { margin: 0; padding-left: 1.1rem; color: var(--encre-doux); }
@media (max-width: 860px) {
  .etape-detail { grid-template-columns: 3.6rem minmax(0, 1fr); gap: 1.25rem 1.25rem; }
  .etape-detail .recoit { grid-column: 2; }
}
@media (max-width: 560px) {
  .etape-detail .recoit { grid-column: 1 / -1; }
}

.faq { max-width: 46rem; }
.faq details { border-bottom: 1.5px dashed var(--trait); }
.faq summary {
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: 1.2rem; font-weight: 560;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.6rem/1 var(--sans); color: var(--bois); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p { padding: 0 0 1.25rem; color: var(--encre-doux); max-width: 40em; }

/* ---------- À propos ---------- */
.parcours { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.parcours li {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 2rem;
  padding-block: 2rem; border-top: 1.5px dashed var(--trait);
}
.parcours li:last-child { border-bottom: 1.5px dashed var(--trait); }
.parcours .duree { font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--bois); font-variation-settings: "SOFT" 100, "WONK" 1; }
.parcours .duree small { display: block; font: 500 0.9rem/1.3 var(--sans); color: var(--encre-doux); margin-top: 0.35rem; }
.parcours h3 { margin-bottom: 0.5rem; }
.parcours p { color: var(--encre-doux); }
@media (max-width: 640px) { .parcours li { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; } }

.devise {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2rem; align-items: center;
}
.devise__mot { font-family: var(--serif); font-style: italic; font-size: clamp(3rem, 8vw, 5.5rem); line-height: 1; color: #fff; font-variation-settings: "SOFT" 100, "WONK" 1; }
@media (max-width: 640px) { .devise { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.formulaire {
  background: var(--papier); border-radius: var(--radius-l); padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: var(--ombre);
}
.formulaire > * + * { margin-top: 1.4rem; }
.champs-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; align-items: end; }
.champ { display: grid; gap: 0.4rem; }
.champ label, .champ legend { font-weight: 600; }
.champ .aide { font-size: 0.9rem; color: var(--encre-doux); font-weight: 400; }
.champ input[type="text"],
.champ input[type="email"],
.champ input[type="tel"],
.champ textarea {
  width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem;
  font: inherit; color: var(--encre);
  background: #fff; border: 1.5px solid var(--champ-bord); border-radius: 10px;
}
.champ textarea { min-height: 9rem; resize: vertical; }
.champ input:focus, .champ textarea:focus { border-color: var(--bocage); outline: 3px solid rgba(43, 85, 68, 0.25); outline-offset: 0; }
fieldset.champ { border: 0; padding: 0; margin: 0; }
.formulaire fieldset.champ { margin-top: 1.75rem; }
fieldset.champ legend { margin-bottom: 0.6rem; }
.choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.choix label {
  display: flex; align-items: center; gap: 0.7rem; min-height: 3.1rem; padding: 0.55rem 0.9rem;
  border: 1.5px solid var(--champ-bord); border-radius: 10px; background: #fff; font-weight: 500; cursor: pointer;
}
.choix label:hover { border-color: var(--bocage); }
.choix label:has(input:checked) { border-color: var(--bocage); background: #eef2e8; }
.choix input { width: 1.15rem; height: 1.15rem; accent-color: var(--bocage); margin: 0; flex: none; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rgpd { font-size: 0.9rem; color: var(--encre-doux); }
.alerte {
  padding: 1rem 1.2rem; border-radius: 10px; background: #f7e3dd; color: #6b2015; border: 1.5px solid #e2a597;
}
.alerte p { margin: 0; font-weight: 600; }
.alerte ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.champ [aria-invalid="true"] { border-color: var(--balise); }
.ensuite { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.ensuite li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.85rem; padding-block: 1rem; border-top: 1.5px dashed var(--trait); }
.ensuite li:last-child { border-bottom: 1.5px dashed var(--trait); }
.ensuite .num { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 2.5px solid var(--bocage); font: 600 1.05rem var(--serif); color: var(--bocage); background: var(--papier); }
.ensuite strong { display: block; }
.ensuite span.txt { color: var(--encre-doux); font-size: 0.97rem; }
@media (max-width: 860px) { .contact { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .champs-2, .choix { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Pages simples ---------- */
.texte-legal > * { max-width: 46rem; }  /* aligné à gauche avec le titre, comme les autres pages */
.texte-legal h2 { font-size: 1.5rem; margin-top: 2.5rem; margin-bottom: 0.75rem; }
.texte-legal p + p { margin-top: 0.75rem; }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--bocage-fonce); color: var(--sur-sombre); }
.site-footer .wrap { padding-block: 3rem 2.5rem; display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 0.7fr)); gap: 2.5rem; }
.site-footer a { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.site-footer .pied-titre { font: 600 1rem var(--sans); color: #fff; margin-bottom: 0.85rem; }
.site-footer .logo, .site-footer .logo:hover { color: #fff; }
.site-footer .logo__nom { color: #fff; }
.site-footer .logo__sous { color: var(--logo-or); }
.site-footer .devise-pied { margin-top: 1.1rem; max-width: 26rem; }
.site-footer .bas { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 1.5rem; font-size: 0.9rem; color: var(--sur-sombre-doux); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
@media (max-width: 760px) { .site-footer .wrap { grid-template-columns: minmax(0, 1fr); } }

/* utilitaires sans style inline (CSP) */
[data-espace="l"] { margin-top: 3rem; }
figure.polaroid { margin: 0; }
.page-tete .polaroid { justify-self: center; }

/* ---------- Guide « 7 fuites » (page d'opt-in) ---------- */
.optin { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.optin__texte > * + * { margin-top: 1.25rem; }
.optin__texte .formulaire { margin-top: 2rem; }
.optin__couverture { margin: 0; justify-self: center; width: min(100%, 20rem); transform: rotate(2.5deg); }
.optin__couverture img { width: 100%; border-radius: 4px; box-shadow: 0 26px 44px -22px var(--ombre-sombre); }
.accord { display: flex; align-items: flex-start; gap: 0.7rem; font-weight: 400; cursor: pointer; }
.accord input { width: 1.15rem; height: 1.15rem; margin: 0.2rem 0 0; accent-color: var(--bocage); flex: none; }
.accord[aria-invalid="true"] { color: var(--balise); }
.sommaire { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 3rem; counter-reset: fuite; }
.sommaire li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.85rem; counter-increment: fuite; }
.sommaire li::before { content: counter(fuite); font: 700 2rem/1 var(--serif); color: var(--balise); }
.sommaire li.bonus::before { content: "+"; color: var(--bocage); }
.sommaire strong { display: block; font-weight: 600; }
.sommaire span.txt { color: var(--encre-doux); }
.auteur { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1.5rem; align-items: center; max-width: 46rem; }
.auteur img { width: 7rem; height: 7rem; border-radius: 50%; object-fit: cover; border: 3px solid var(--papier); box-shadow: var(--ombre); }
.site-header--simple .wrap { justify-content: flex-start; }
@media (max-width: 860px) { .optin { grid-template-columns: minmax(0, 1fr); } .optin__couverture { width: min(60%, 14rem); } }
@media (max-width: 720px) { .sommaire { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .auteur { grid-template-columns: minmax(0, 1fr); } }
.page-tete__texte [data-etat] > * + * { margin-top: 1.25rem; }