@font-face { font-family: "Bricolage Grotesque"; src: url(/fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url(/fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(/fonts/instrument-sans-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(/fonts/instrument-sans-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(/fonts/instrument-sans-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --papier: #f6f3ea;
  --papier-carte: #ffffff;
  --trait: #dcd6c8;
  --trait-fort: #7a857f;
  --encre: #14221c;
  --encre-douce: #4f5b55;
  --sapin: #1f4d3b;
  --on-sapin: #f6f3ea;
  --sapin-profond: #173b2e;
  --on-sapin-profond: #f6f3ea;
  --sauge: #b9ccc2;
  --on-sapin-profond-doux: var(--sauge);
  --sapin-pale: #e3ece6;
  --colza: #f2c230;
  --on-colza: #14221c;
  --colza-pale: #fbefc4;
  --surligne: #f2c230;
  --erreur: #b3261e;
  --lien: var(--sapin);
  --ombre-s: 0 1px 2px #14221c14;
  --ombre-l: 0 12px 32px -8px #14221c33;
  --anneau-focus: 0 0 0 2px #f6f3ea, 0 0 0 4px #1f4d3b;
  --nuit: #0f2a20;
  --points: #1f4d3b2e;

  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-6: 24px;
  --espace-8: 32px;
  --espace-12: 48px;
  --espace-16: 64px;
  --espace-24: 96px;
  --rayon-s: 4px;
  --rayon-m: 8px;
  --rayon-l: 16px;
  --largeur-page: 1160px;
  --largeur-texte: 680px;
  --font-titre: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --font-texte: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #0f1a16;
    --papier-carte: #16241f;
    --trait: #2c3b35;
    --trait-fort: #6b7c74;
    --encre: #eeebe2;
    --encre-douce: #a9b4ae;
    --sapin: #7fcba6;
    --on-sapin: #0f1a16;
    --sapin-profond: #1f4d3b;
    --sapin-pale: #1b2b25;
    --colza-pale: #3d3414;
    --surligne: #5c4b0e;
    --erreur: #ff8a80;
    --ombre-s: 0 1px 2px #000000a6;
    --ombre-l: 0 12px 32px -8px #000000cc;
    --anneau-focus: 0 0 0 2px #0f1a16, 0 0 0 4px #7fcba6;
    --points: #b9ccc224;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; scroll-padding-bottom: 64px; }
body { margin: 0; background: var(--papier); color: var(--encre); font-family: var(--font-texte); font-size: 17px; line-height: 28px; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--lien); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid transparent; box-shadow: var(--anneau-focus); border-radius: var(--rayon-s); }
::selection { background: var(--colza); color: var(--on-colza); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lien-evitement { position: absolute; left: var(--espace-4); top: -200px; z-index: 100; padding: var(--espace-2) var(--espace-4); border-radius: var(--rayon-s); background: var(--colza); color: var(--on-colza); font-weight: 600; }
.lien-evitement:focus { top: var(--espace-2); }

.titre-xl { font-family: var(--font-titre); font-size: 56px; line-height: 60px; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.titre-l { font-family: var(--font-titre); font-size: 38px; line-height: 44px; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.titre-m { font-family: var(--font-titre); font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.01em; }
.chapo { max-width: var(--largeur-texte); font-size: 20px; line-height: 30px; color: var(--encre-douce); }
@media (max-width: 640px) {
  .titre-xl { font-size: 36px; line-height: 40px; }
  .titre-l { font-size: 30px; line-height: 36px; }
}

.conteneur { width: 100%; max-width: calc(var(--largeur-page) + 2 * var(--espace-8)); margin-inline: auto; padding-inline: var(--espace-4); }
.section { padding-block: var(--espace-16); }
.section--pale { background: var(--sapin-pale); }
.section--serre { padding-block: var(--espace-12); }
@media (min-width: 900px) {
  .conteneur { padding-inline: var(--espace-8); }
  .section { padding-block: var(--espace-24); }
  .section--serre { padding-block: var(--espace-12); }
}
.entete-section { display: grid; align-content: start; gap: var(--espace-3); max-width: 760px; margin-bottom: var(--espace-8); }
.entete-section--ligne { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--espace-4); max-width: none; }
.entete-section--ligne > div { display: grid; gap: var(--espace-3); }
.note { max-width: var(--largeur-texte); margin-top: var(--espace-8); font-size: 15px; line-height: 22px; color: var(--encre-douce); }
.note--encadre { max-width: none; padding: var(--espace-4) var(--espace-6); border-radius: var(--rayon-m); background: var(--colza-pale); color: var(--encre); font-size: 17px; line-height: 28px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); }
.lien-fleche { color: var(--lien); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.lien-fleche::after { content: " \2192"; }
.a-completer { display: inline-block; padding: 2px var(--espace-2); border-radius: var(--rayon-s); background: var(--colza-pale); color: var(--encre); font-family: var(--font-mono); font-size: 13px; line-height: 20px; letter-spacing: .04em; }

.et-mono { display: inline-block; flex: none; vertical-align: middle; }
.et-mono__lettres { fill: var(--sapin); }
.et-mono--inverse .et-mono__lettres { fill: var(--on-sapin-profond); }
.et-mono__curseur { fill: var(--colza); }
@keyframes et-clignote { 50% { opacity: 0; } }

.et-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-2); min-height: 48px; padding: 0 var(--espace-6); border: 2px solid transparent; border-radius: var(--rayon-m); font-family: var(--font-texte); font-size: 16px; line-height: 20px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease; }
@media (hover: hover) and (pointer: fine) { .et-btn:hover { box-shadow: inset 0 -4px 0 var(--colza); } }
.et-btn:focus-visible { outline: 2px solid transparent; box-shadow: var(--anneau-focus); }
.et-btn--principal { background: var(--sapin); color: var(--on-sapin); }
.et-btn--secondaire { background: transparent; color: var(--encre); border-color: var(--trait-fort); }
@media (hover: hover) and (pointer: fine) { .et-btn--secondaire:hover { border-color: var(--encre); } }
.et-btn--colza { background: var(--colza); color: var(--on-colza); }
@media (hover: hover) and (pointer: fine) { .et-btn--colza:hover { box-shadow: inset 0 -4px 0 var(--on-colza); } }
.et-btn--clair { background: transparent; color: var(--on-sapin-profond); border-color: var(--on-sapin-profond); }

.et-tag { display: inline-block; font-family: var(--font-mono); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--sapin); }
.et-tag::after { content: ""; display: inline-block; width: .7em; height: 3px; margin-left: 2px; background: var(--colza); }
.et-tag--inverse { color: var(--colza); }

.et-surligne { padding: 0 .04em; background: none; color: inherit; box-shadow: inset 0 -0.3em 0 var(--surligne); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.et-service { display: flex; flex-direction: column; gap: var(--espace-3); padding: var(--espace-6); border: 1px solid var(--trait); border-radius: var(--rayon-m); background: var(--papier-carte); }
.et-service__num { font-family: var(--font-mono); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-douce); }
.et-service__titre { font-family: var(--font-titre); font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.01em; color: var(--encre); }
.et-service__texte { color: var(--encre-douce); }
.et-service__points { display: grid; gap: var(--espace-1); }
.et-service__points li { position: relative; padding-left: var(--espace-6); }
.et-service__points li::before { content: ""; position: absolute; left: 0; top: 13px; width: 12px; height: 3px; background: var(--sapin); }
.et-service__lien { margin-top: auto; padding-top: var(--espace-2); color: var(--lien); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

.et-etape { display: grid; grid-template-columns: 48px 1fr; gap: var(--espace-4); align-items: start; }
.et-etape__num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--rayon-s); background: var(--sapin); color: var(--on-sapin); font-family: var(--font-titre); font-size: 24px; line-height: 24px; font-weight: 800; }
.et-etape__titre { margin-bottom: var(--espace-1); font-family: var(--font-titre); font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.01em; }
.et-etape__texte { color: var(--encre-douce); }

.et-bandeau { display: grid; justify-items: start; gap: var(--espace-4); padding: var(--espace-12); border-radius: var(--rayon-l); background: var(--sapin-profond); color: var(--on-sapin-profond); }
.et-bandeau__titre { font-family: var(--font-titre); font-size: 38px; line-height: 44px; font-weight: 700; letter-spacing: -.015em; color: var(--on-sapin-profond); }
.et-bandeau__titre::after { content: ""; display: inline-block; width: .5em; height: .12em; margin-left: .08em; background: var(--colza); }
.et-bandeau__texte { max-width: var(--largeur-texte); color: var(--on-sapin-profond-doux); }
.et-bandeau__actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); margin-top: var(--espace-2); }
@media (max-width: 640px) {
  .et-bandeau { padding: var(--espace-8) var(--espace-6); }
  .et-bandeau__titre { font-size: 30px; line-height: 36px; }
}

.entete { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--trait); background: var(--papier); }
.entete__barre { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--espace-6); min-height: 72px; }
.entete__marque { display: inline-flex; align-items: center; gap: var(--espace-3); color: var(--encre); font-family: var(--font-titre); font-size: 20px; line-height: 24px; font-weight: 800; letter-spacing: -.01em; text-decoration: none; }
.entete__nav { display: flex; align-items: center; gap: var(--espace-8); }
.entete__nav ul { display: flex; gap: var(--espace-6); }
.entete__lien { display: inline-block; padding: var(--espace-2) 0; border-bottom: 3px solid transparent; color: var(--encre); font-size: 16px; line-height: 20px; font-weight: 500; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .entete__lien:hover { border-bottom-color: var(--colza); } }
.entete__lien[aria-current] { color: var(--sapin); border-bottom-color: var(--sapin); }
.entete__menu { display: none; }
@media (max-width: 899px) {
  .entete__barre { min-height: 64px; }
  .entete__menu { display: inline-flex; align-items: center; gap: var(--espace-2); min-height: 44px; padding: 0 var(--espace-3); border: 2px solid var(--trait-fort); border-radius: var(--rayon-m); background: transparent; color: var(--encre); font: 600 16px/20px var(--font-texte); cursor: pointer; }
  .entete__menu-icone { position: relative; width: 18px; height: 12px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
  .entete__menu-icone::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 2px solid currentColor; }
  .entete__nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: var(--espace-6); padding: var(--espace-2) var(--espace-6) var(--espace-6); border-bottom: 1px solid var(--trait); background: var(--papier); box-shadow: var(--ombre-l); }
  .menu-ouvert .entete__nav { display: flex; }
  .entete__nav ul { flex-direction: column; gap: 0; }
  .entete__lien { display: block; padding: var(--espace-3) 0; border-bottom: 1px solid var(--trait); font-size: 18px; line-height: 24px; }
  .entete__lien[aria-current] { border-bottom-color: var(--trait); }
}
@media (max-width: 374px) {
  .entete__barre { gap: var(--espace-3); }
  .entete__marque { gap: var(--espace-2); font-size: 18px; white-space: nowrap; }
  .entete__menu { padding: 0 var(--espace-2); }
}

.hero { overflow: hidden; background: var(--sapin-profond); color: var(--on-sapin-profond); }
.hero__grille { display: grid; align-items: center; gap: var(--espace-12); padding-block: var(--espace-12) var(--espace-16); }
.hero__texte { display: grid; justify-items: start; gap: var(--espace-6); }
.hero__titre { font-family: var(--font-titre); font-size: 62px; line-height: 68px; font-weight: 800; letter-spacing: -.02em; color: var(--on-sapin-profond); text-wrap: balance; }
.hero__accent { display: inline-block; margin: .1em 0 0 -.1em; padding: 0 .16em .08em; border-radius: 3px; background: var(--colza); color: var(--on-colza); font-style: normal; transform: rotate(-1.6deg); }
.curseur { display: inline-block; width: .45em; height: .1em; margin-left: .06em; background: var(--colza); }
.hero__chapo { max-width: 600px; font-size: 20px; line-height: 30px; color: var(--on-sapin-profond-doux); }
.hero__garanties { display: flex; flex-wrap: wrap; gap: var(--espace-2) var(--espace-6); font-family: var(--font-mono); font-size: 13px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-sapin-profond-doux); }
.hero__garanties li { display: inline-flex; align-items: center; gap: var(--espace-2); }
.hero__garanties li::before { content: ""; width: 8px; height: 3px; background: var(--colza); }
.hero__visuel { justify-self: center; width: 100%; max-width: 420px; padding: 0 var(--espace-4) var(--espace-4) 0; }
@media (min-width: 900px) {
  .hero__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--espace-16); padding-block: var(--espace-24); }
  .hero__visuel { justify-self: end; }
}
@media (max-width: 640px) { .hero__titre { font-size: 40px; line-height: 46px; } }
@media (max-width: 380px) { .hero__titre { font-size: 34px; line-height: 40px; } }

.portrait { position: relative; isolation: isolate; }
.portrait::before { content: ""; position: absolute; inset: var(--espace-4) calc(-1 * var(--espace-4)) calc(-1 * var(--espace-4)) var(--espace-4); z-index: -1; border-radius: var(--rayon-l); background: var(--colza); }
.portrait img, .portrait__vide { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--rayon-l); object-fit: cover; }
.portrait__vide { position: relative; display: flex; align-items: flex-end; overflow: hidden; padding: var(--espace-6); background: var(--sauge); }
.portrait__vide .motif { position: absolute; top: 14%; left: 12%; width: 76%; }
.portrait__etiquette { position: relative; font-family: var(--font-mono); font-size: 13px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-colza); }
.motif__ligne { fill: var(--on-sapin-profond); }
.motif__curseur { fill: var(--colza); }
.portrait--apropos { width: 100%; max-width: 400px; margin-right: var(--espace-4); }
.portrait--page { width: 100%; max-width: 340px; margin-right: var(--espace-4); }
.portrait--apropos::before { background: var(--sauge); }
.portrait--apropos .portrait__vide { background: var(--sapin-profond); }
.portrait--apropos .portrait__etiquette { color: var(--on-sapin-profond); }
.visuel-service { position: relative; isolation: isolate; grid-column: 1 / -1; margin: 0 var(--espace-4) var(--espace-4) 0; }
.visuel-service::before { content: ""; position: absolute; inset: var(--espace-4) calc(-1 * var(--espace-4)) calc(-1 * var(--espace-4)) var(--espace-4); z-index: -1; border-radius: var(--rayon-l); background: var(--colza); }
.visuel-service img { width: 100%; aspect-ratio: 3 / 2; border-radius: var(--rayon-l); object-fit: cover; object-position: center 70%; }
@media (min-width: 700px) { .visuel-service img { aspect-ratio: 21 / 9; } }

.grille-services { display: grid; gap: var(--espace-6); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (min-width: 1100px) { .grille-services { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.service-annexe { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--espace-1) var(--espace-6); margin-top: var(--espace-6); padding: var(--espace-6); border: 1px solid var(--trait-fort); border-radius: var(--rayon-m); color: var(--encre); text-decoration: none; transition: box-shadow .15s ease, border-color .15s ease; }
@media (hover: hover) and (pointer: fine) { .service-annexe:hover { border-color: var(--encre); box-shadow: inset 0 -4px 0 var(--colza); } }
.service-annexe__titre { font-family: var(--font-titre); font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.01em; }
.service-annexe__texte { grid-column: 2; color: var(--encre-douce); }
.service-annexe__lien { grid-column: 3; grid-row: 1 / span 2; color: var(--lien); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 700px) {
  .service-annexe { grid-template-columns: minmax(0, 1fr); gap: var(--espace-2); }
  .service-annexe__texte, .service-annexe__lien { grid-column: auto; grid-row: auto; }
}

.arguments { display: grid; gap: var(--espace-8) var(--espace-6); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.arguments li { display: grid; align-content: start; gap: var(--espace-2); padding-top: var(--espace-4); border-top: 3px solid var(--sapin); }
.arguments h3 { font-family: var(--font-titre); font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.01em; }
.arguments p { color: var(--encre-douce); }
.etapes { display: grid; gap: var(--espace-8); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.grille-realisations { display: grid; gap: var(--espace-6); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.realisation { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--trait); border-radius: var(--rayon-m); background: var(--papier-carte); }
.realisation--exemple { border-style: dashed; border-color: var(--trait-fort); }
.realisation__visuel { display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--sauge); }
.realisation__visuel .motif { width: 56%; }
.realisation__visuel img { width: 100%; height: 100%; object-fit: cover; }
.realisation__corps { display: grid; justify-items: start; gap: var(--espace-2); padding: var(--espace-6); }
.realisation__titre { font-family: var(--font-titre); font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.01em; }
.realisation__corps p { color: var(--encre-douce); }

.apropos { display: grid; align-items: center; gap: var(--espace-12); }
.apropos__texte { display: grid; justify-items: start; gap: var(--espace-4); }
.apropos__texte .et-btn { margin-top: var(--espace-2); }
@media (min-width: 900px) { .apropos { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--espace-16); } }
.zone__texte { display: grid; justify-items: start; gap: var(--espace-3); }
.communes, .puces { display: flex; flex-wrap: wrap; gap: var(--espace-2); }
.communes li, .puces li { padding: var(--espace-1) var(--espace-3); border: 1px solid var(--trait-fort); border-radius: var(--rayon-s); background: var(--papier-carte); font-size: 15px; line-height: 22px; }
.communes .communes__base { border-color: var(--sapin); background: var(--sapin); color: var(--on-sapin); font-weight: 600; }
.encadre-aides { display: grid; gap: var(--espace-3); padding: var(--espace-8); border-radius: var(--rayon-l); background: var(--colza-pale); }
.encadre-aides h3 { font-family: var(--font-titre); font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.01em; }
.section--bandeau { padding-block: var(--espace-16); }

.pied { background: var(--sapin-profond); color: var(--on-sapin-profond); }
.pied a { color: var(--on-sapin-profond); text-decoration: none; }
.pied a:hover { text-decoration: underline; text-decoration-color: var(--colza); text-decoration-thickness: 2px; }
.pied__grille { display: grid; gap: var(--espace-8); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding-block: var(--espace-16) var(--espace-12); }
@media (min-width: 1000px) { .pied__grille { grid-template-columns: 2fr 1fr 1fr 1.3fr; } }
.pied__marque { display: grid; align-content: start; gap: var(--espace-3); }
.pied__logo { display: inline-flex; align-items: center; gap: var(--espace-3); font-family: var(--font-titre); font-size: 22px; line-height: 28px; font-weight: 800; }
.pied__marque p { color: var(--on-sapin-profond-doux); }
.pied__titre { margin-bottom: var(--espace-4); font-family: var(--font-mono); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--colza); }
.pied ul { display: grid; gap: var(--espace-2); }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--espace-2) var(--espace-6); padding-block: var(--espace-6); border-top: 1px solid var(--on-sapin-profond-doux); }
.pied__fin { padding-bottom: var(--espace-2); }
.pied__bas p { font-size: 15px; line-height: 22px; color: var(--on-sapin-profond-doux); }

.fil-ariane { padding-top: var(--espace-6); }
.fil-ariane ol { display: flex; flex-wrap: wrap; gap: var(--espace-2); font-size: 15px; line-height: 22px; color: var(--encre-douce); }
.fil-ariane li + li::before { content: "/"; margin-right: var(--espace-2); color: var(--trait-fort); }
.fil-ariane a { color: var(--encre-douce); }
.intro { padding-block: var(--espace-8) var(--espace-16); }
.intro__grille { display: grid; align-items: start; gap: var(--espace-12); }
.intro__texte { display: grid; justify-items: start; gap: var(--espace-6); }
@media (min-width: 1000px) { .intro__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--espace-16); } }
.en-bref { display: grid; gap: var(--espace-6); padding: var(--espace-8); border: 1px solid var(--trait); border-radius: var(--rayon-l); background: var(--papier-carte); }
.en-bref__titre { font-family: var(--font-mono); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--sapin); }
.en-bref dl { display: grid; gap: var(--espace-4); }
.en-bref dl > div { display: grid; gap: 2px; padding-bottom: var(--espace-4); border-bottom: 1px solid var(--trait); }
.en-bref dt { font-size: 15px; line-height: 22px; color: var(--encre-douce); }
.en-bref dd { font-weight: 600; }
.situations { display: grid; gap: var(--espace-6); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.situations li { padding: var(--espace-6); border: 1px solid var(--trait); border-radius: var(--rayon-m); background: var(--papier-carte); font-size: 18px; line-height: 28px; }
.situations li::before { content: ""; display: block; width: 24px; height: 4px; margin-bottom: var(--espace-4); background: var(--sapin); }
.grille-offres { display: grid; gap: var(--espace-6); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.test-questions { display: grid; gap: var(--espace-6); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); counter-reset: none; }
.test-questions li { display: grid; grid-template-columns: 48px 1fr; align-items: start; gap: var(--espace-4); padding: var(--espace-6); border: 1px solid var(--trait); border-radius: var(--rayon-m); background: var(--papier-carte); font-family: var(--font-titre); font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -.01em; }
.test-questions__num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--rayon-s); background: var(--colza); color: var(--on-colza); font-size: 24px; line-height: 24px; font-weight: 800; }
.test-conclusion { margin-top: var(--espace-8); padding: var(--espace-4) var(--espace-6); border-radius: var(--rayon-m); background: var(--sapin-profond); color: var(--on-sapin-profond); font-size: 18px; line-height: 28px; font-weight: 600; }
.grille-exemples { display: grid; gap: var(--espace-6); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.exemple { display: grid; align-content: start; gap: var(--espace-3); padding: var(--espace-6); border: 1px solid var(--trait); border-radius: var(--rayon-m); background: var(--papier-carte); }
.exemple__titre { font-family: var(--font-titre); font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.01em; }
.exemple__avant-apres { display: grid; gap: var(--espace-3); }
.exemple__avant-apres > div { display: grid; gap: 2px; }
.exemple__avant-apres dt { font-family: var(--font-mono); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.exemple__avant dt, .exemple__avant dd { color: var(--encre-douce); }
.exemple__apres { padding: var(--espace-3) var(--espace-4); border-radius: var(--rayon-s); background: var(--sapin-pale); }
.exemple__apres dt { color: var(--sapin); }
.aussi__titre { margin: var(--espace-12) 0 var(--espace-4); }
.faq { display: grid; gap: var(--espace-8); }
@media (min-width: 1000px) { .faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } .faq .entete-section { margin-bottom: 0; } }
.faq__liste { border-top: 1px solid var(--trait-fort); }
.faq__item { border-bottom: 1px solid var(--trait-fort); }
.faq__item summary { display: flex; justify-content: space-between; gap: var(--espace-4); padding: var(--espace-6) 0; cursor: pointer; list-style: none; font-family: var(--font-titre); font-size: 20px; line-height: 28px; font-weight: 700; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex: none; font-family: var(--font-mono); font-size: 24px; color: var(--sapin); }
.faq__item[open] summary::after { content: "\2013"; }
.faq__item p { max-width: var(--largeur-texte); padding-bottom: var(--espace-6); color: var(--encre-douce); }
.autres-services { display: flex; flex-wrap: wrap; gap: var(--espace-3); margin-top: var(--espace-6); }
.autres-services a { display: inline-flex; align-items: center; gap: var(--espace-3); min-height: 48px; padding: 0 var(--espace-6); border: 2px solid var(--trait-fort); border-radius: var(--rayon-m); color: var(--encre); font-weight: 600; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .autres-services a:hover { border-color: var(--encre); box-shadow: inset 0 -4px 0 var(--colza); } }

.apropos-page { display: grid; align-items: start; gap: var(--espace-12); }
.apropos-page__texte { display: grid; justify-items: start; gap: var(--espace-6); }
@media (min-width: 720px) { .apropos-page { grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: var(--espace-12); } }
@media (min-width: 1000px) { .apropos-page { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--espace-16); } }

.contact { display: grid; align-items: start; gap: var(--espace-12); }
@media (min-width: 1000px) { .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--espace-16); } }
.contact__texte { display: grid; justify-items: start; gap: var(--espace-6); }
.coordonnees { display: grid; gap: var(--espace-4); }
.coordonnees li { display: grid; gap: 2px; }
.coordonnees__label { font-family: var(--font-mono); font-size: 13px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-douce); }
.coordonnees a { font-size: 20px; line-height: 30px; font-weight: 600; }
.formulaire { padding: var(--espace-8); border: 1px solid var(--trait); border-radius: var(--rayon-l); background: var(--papier-carte); }
@media (max-width: 640px) { .formulaire { padding: var(--espace-6) var(--espace-4); } }
.formulaire form { display: grid; gap: var(--espace-6); }
.formulaire form .et-btn { justify-self: start; }
.champs-2 { display: grid; gap: var(--espace-6); }
@media (min-width: 640px) { .champs-2 { grid-template-columns: 1fr 1fr; } }
.champ { display: grid; gap: var(--espace-2); }
.champ label { font-size: 16px; line-height: 20px; font-weight: 600; }
.champ .facultatif { font-weight: 400; color: var(--encre-douce); }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 48px; padding: var(--espace-3) var(--espace-4); border: 2px solid var(--trait-fort); border-radius: var(--rayon-s); background: var(--papier-carte); color: var(--encre); font: inherit; }
.champ textarea { min-height: 160px; resize: vertical; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { border-color: var(--sapin); }
.champ [aria-invalid="true"] { border-color: var(--erreur); }
.champ__erreur { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--erreur); }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.champ__aide { font-size: 15px; line-height: 22px; color: var(--encre-douce); }
.js .verification { display: none; }
.js.sans-preuve .verification { display: grid; }
.formulaire__mention { font-size: 15px; line-height: 22px; color: var(--encre-douce); }
.message { display: grid; gap: var(--espace-2); margin-bottom: var(--espace-6); padding: var(--espace-6); border-radius: var(--rayon-m); }
.message--ok { margin-bottom: 0; background: var(--sapin-pale); }
.message--ok h2 { font-family: var(--font-titre); font-size: 24px; line-height: 30px; font-weight: 700; }
.message--erreur { border: 2px solid var(--erreur); background: var(--papier-carte); }
.message--erreur strong { color: var(--erreur); }

.page-texte { padding-block: var(--espace-8) var(--espace-24); }
.page-texte .titre-xl { margin-block: var(--espace-3) var(--espace-8); }
.prose { display: grid; gap: var(--espace-4); max-width: var(--largeur-texte); }
.prose h2 { margin-top: var(--espace-6); font-family: var(--font-titre); font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.01em; }
.prose ul { display: grid; gap: var(--espace-2); padding-left: var(--espace-6); list-style: disc; }

.orienteur { padding-block: var(--espace-12); border-bottom: 1px solid var(--trait); }
.orienteur__grille { display: grid; align-items: center; gap: var(--espace-8); }
@media (min-width: 1000px) { .orienteur__grille { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--espace-16); } }
.orienteur__question { display: grid; justify-items: start; gap: var(--espace-3); }
.orienteur__choix { display: flex; flex-wrap: wrap; gap: var(--espace-2); margin-top: var(--espace-3); }
.orienteur__bouton { min-height: 44px; padding: var(--espace-2) var(--espace-4); border: 2px solid var(--trait-fort); border-radius: var(--rayon-m); background: var(--papier-carte); color: var(--encre); font: 500 16px/22px var(--font-texte); text-align: left; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background-color .2s ease; }
@media (hover: hover) and (pointer: fine) { .orienteur__bouton:hover { border-color: var(--encre); transform: translateY(-2px); } }
.orienteur__bouton[aria-pressed="true"] { border-color: var(--sapin); background: var(--sapin); color: var(--on-sapin); }
.orienteur__reponses { position: relative; min-height: 220px; padding: var(--espace-8); border-radius: var(--rayon-l); background: var(--sapin-pale); }
.orienteur__attente { font-family: var(--font-titre); font-size: 24px; line-height: 32px; font-weight: 700; color: var(--encre-douce); }
.orienteur__reponse { display: grid; justify-items: start; gap: var(--espace-3); }
.orienteur__reponse + .orienteur__reponse { margin-top: var(--espace-8); }
.orienteur__rappel { font-size: 15px; line-height: 22px; color: var(--encre-douce); }
.orienteur__texte { font-family: var(--font-titre); font-size: 22px; line-height: 30px; font-weight: 700; }
html:not(.js) .orienteur__choix, html:not(.js) .orienteur__attente { display: none; }
.js .orienteur__reponse { display: none; }
.js .orienteur__reponse.est-choisie { display: grid; margin-top: 0; animation: monter .45s cubic-bezier(.2,.7,.2,1) both; }
.js .orienteur.a-choisi .orienteur__attente { display: none; }
.en-frappe::after { content: ""; display: inline-block; width: .5em; height: .12em; margin-left: .06em; background: var(--colza); }

.test-questions__corps { display: grid; gap: var(--espace-4); }
.test-questions__reponses { display: flex; gap: var(--espace-2); }
html:not(.js) .test-questions__reponses { display: none; }
.test-bouton { min-width: 72px; min-height: 40px; padding: 0 var(--espace-4); border: 2px solid var(--trait-fort); border-radius: var(--rayon-m); background: transparent; color: var(--encre); font: 600 16px/20px var(--font-texte); cursor: pointer; transition: transform .2s ease, background-color .2s ease, border-color .2s ease; }
@media (hover: hover) and (pointer: fine) { .test-bouton:hover { border-color: var(--encre); transform: translateY(-2px); } }
.test-bouton[aria-pressed="true"][data-valeur="oui"] { border-color: var(--sapin); background: var(--sapin); color: var(--on-sapin); }
.test-bouton[aria-pressed="true"][data-valeur="non"] { border-color: var(--encre-douce); background: var(--encre-douce); color: var(--papier-carte); }
.test-questions__num { transition: transform .3s ease, background-color .3s ease; }
.test-questions li.est-oui .test-questions__num { transform: scale(1.12) rotate(-4deg); }
.test-questions li.est-non .test-questions__num { background: var(--trait); color: var(--encre-douce); }
.test-conclusion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-4); }
.test-conclusion .et-btn { flex: none; }
.test-conclusion--resultat { animation: pulsation .6s cubic-bezier(.2,.7,.2,1); }
.test-conclusion--oui { box-shadow: inset 0 -4px 0 var(--colza); }
.test-conclusion__texte { max-width: 760px; }

.rideau { display: none; }
.avec-intro .rideau { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--sapin-profond); cursor: pointer; animation: rideau-monte .55s cubic-bezier(.7,0,.3,1) 1.15s forwards; }
.avec-intro .rideau.rideau--fini { animation: rideau-monte .3s cubic-bezier(.7,0,.3,1) forwards; }
.rideau__contenu { display: grid; justify-items: center; gap: var(--espace-4); }
.rideau__nom { font-family: var(--font-titre); font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -.01em; color: var(--on-sapin-profond); animation: monter .45s ease .55s both; }
.rideau .m { transform-box: fill-box; animation-duration: .28s; animation-timing-function: cubic-bezier(.3,.7,.3,1); animation-fill-mode: both; }
.rideau .m-fut-e, .rideau .m-fut-t { transform-origin: center top; animation-name: pousser-y; }
.rideau .m-haut, .rideau .m-milieu, .rideau .m-bas { transform-origin: left center; animation-name: pousser-x; }
.rideau .m-fut-e { animation-delay: .05s; }
.rideau .m-haut { animation-delay: .18s; }
.rideau .m-milieu { animation-delay: .28s; }
.rideau .m-bas { animation-delay: .34s; }
.rideau .m-fut-t { animation-delay: .44s; }
.rideau .et-mono__curseur { animation: curseur-arrive .5s steps(1) .7s both; }
@keyframes rideau-monte { to { transform: translateY(-100%); visibility: hidden; } }
@keyframes pousser-x { from { transform: scaleX(0); } }
@keyframes pousser-y { from { transform: scaleY(0); } }
@keyframes curseur-arrive { 0% { opacity: 0; } 20% { opacity: 1; } 50% { opacity: 0; } 75% { opacity: 1; } }
@keyframes monter { from { opacity: 0; transform: translateY(18px); } }
@keyframes glisser { from { opacity: 0; transform: translateX(28px); } }
@keyframes decaler { from { transform: translate(calc(-1 * var(--espace-4)), calc(-1 * var(--espace-4))); } }
@keyframes pulsation { 40% { transform: scale(1.02); } }
@keyframes charger { from { transform: scaleX(0); } to { transform: scaleX(.85); } }

:root { --depart: .05s; }
.avec-intro { --depart: 1.3s; }
.js .hero__texte > * { animation: monter .7s cubic-bezier(.2,.7,.2,1) both; }
.js .hero__texte > :first-child { animation-delay: var(--depart); }
.js .hero__texte > :nth-child(2) { animation-delay: calc(var(--depart) + .08s); }
.js .hero__texte > :nth-child(3) { animation-delay: calc(var(--depart) + .16s); }
.js .hero__texte > :nth-child(4) { animation-delay: calc(var(--depart) + .24s); }
.js .hero__texte > :nth-child(5) { animation-delay: calc(var(--depart) + .32s); }
.js .hero__visuel { animation: glisser .8s cubic-bezier(.2,.7,.2,1) calc(var(--depart) + .15s) both; }
.js .hero .portrait::before { animation: decaler .6s cubic-bezier(.2,.7,.2,1) calc(var(--depart) + .6s) both; }

.js .motif rect { transform-box: fill-box; transform-origin: left center; }
.js .hero .motif__ligne rect, .js .est-visible .motif__ligne rect { animation: pousser-x .35s cubic-bezier(.3,.7,.3,1) both; }
.js .hero .motif__curseur, .js .est-visible .motif__curseur { animation: curseur-arrive 1.2s steps(1) both; }
.js .hero .motif { --motif: calc(var(--depart) + .5s); }
.js .est-visible .motif { --motif: .35s; }
.js .motif__ligne rect:nth-child(1) { animation-delay: var(--motif); }
.js .motif__ligne rect:nth-child(2) { animation-delay: calc(var(--motif) + .06s); }
.js .motif__ligne rect:nth-child(3) { animation-delay: calc(var(--motif) + .12s); }
.js .motif__ligne rect:nth-child(4) { animation-delay: calc(var(--motif) + .18s); }
.js .motif__ligne rect:nth-child(5) { animation-delay: calc(var(--motif) + .24s); }
.js .motif__ligne rect:nth-child(6) { animation-delay: calc(var(--motif) + .3s); }
.js .motif__ligne rect:nth-child(7) { animation-delay: calc(var(--motif) + .36s); }
.js .motif__ligne rect:nth-child(8) { animation-delay: calc(var(--motif) + .42s); }
.js .motif__ligne rect:nth-child(9) { animation-delay: calc(var(--motif) + .48s); }
.js .motif__ligne rect:nth-child(10) { animation-delay: calc(var(--motif) + .54s); }
.js .motif__ligne rect:nth-child(11) { animation-delay: calc(var(--motif) + .6s); }
.js .motif__ligne rect:nth-child(12) { animation-delay: calc(var(--motif) + .66s); }
.js .motif__ligne rect:nth-child(13) { animation-delay: calc(var(--motif) + .72s); }
.js .motif__curseur { animation-delay: calc(var(--motif) + .8s); }

.et-mono .m { transform-box: fill-box; }
.et-mono .m-haut, .et-mono .m-milieu, .et-mono .m-bas { transform-origin: left center; }
.et-mono .m-fut-e, .et-mono .m-fut-t { transform-origin: center top; }
.entete .et-mono__curseur { animation: et-clignote 1s steps(1) calc(var(--depart) + .2s) 3; }
@media (hover: hover) and (pointer: fine) {
  .entete__marque:hover .et-mono__curseur, .pied__logo:hover .et-mono__curseur { animation: et-clignote .7s steps(1) infinite; }
  .entete__marque:hover .m-haut, .pied__logo:hover .m-haut { animation: pousser-x .3s cubic-bezier(.3,.7,.3,1) both; }
  .entete__marque:hover .m-milieu, .pied__logo:hover .m-milieu { animation: pousser-x .3s cubic-bezier(.3,.7,.3,1) .08s both; }
  .entete__marque:hover .m-bas, .pied__logo:hover .m-bas { animation: pousser-x .3s cubic-bezier(.3,.7,.3,1) .14s both; }
  .entete__marque:hover .m-fut-t, .pied__logo:hover .m-fut-t { animation: pousser-y .3s cubic-bezier(.3,.7,.3,1) .2s both; }
}
.js .pied__logo.est-visible .m-fut-e { animation: pousser-y .3s cubic-bezier(.3,.7,.3,1) .2s both; }
.js .pied__logo.est-visible .m-haut { animation: pousser-x .3s cubic-bezier(.3,.7,.3,1) .3s both; }
.js .pied__logo.est-visible .m-milieu { animation: pousser-x .3s cubic-bezier(.3,.7,.3,1) .38s both; }
.js .pied__logo.est-visible .m-bas { animation: pousser-x .3s cubic-bezier(.3,.7,.3,1) .44s both; }
.js .pied__logo.est-visible .m-fut-t { animation: pousser-y .3s cubic-bezier(.3,.7,.3,1) .52s both; }
.js .pied__logo.est-visible .et-mono__curseur { animation: curseur-arrive 1.2s steps(1) .8s both; }

.tape-en-cours .tf { visibility: hidden; }
.tape-en-cours .tf.vu { visibility: visible; }
.tape-en-cours::after, .tape-en-cours .curseur { visibility: hidden; animation: none; }
.curseur-mobile { display: inline-block; width: .45em; height: .1em; margin-left: .04em; background: var(--colza); }
.et-tag .curseur-mobile { width: .7em; height: 3px; margin-left: 2px; }
.et-bandeau__titre .curseur-mobile { width: .5em; height: .12em; margin-left: .08em; }
.tape-fini::after, .tape-fini .curseur { animation: et-clignote 1s steps(1) 3; }
@media (hover: hover) and (pointer: fine) { .et-tag.tape-fini:hover::after { animation: et-clignote .9s steps(1) infinite; } }

.js .revele { transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js .revele:not(.est-visible) { opacity: 0; transform: translateY(28px); }

.et-btn { background-image: linear-gradient(var(--colza), var(--colza)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 4px; transition: background-size .3s ease, transform .2s ease, border-color .15s ease; }
@media (hover: hover) and (pointer: fine) { .et-btn:hover { box-shadow: none; background-size: 100% 4px; transform: translateY(-2px); } }
.et-btn--colza { background-image: linear-gradient(var(--on-colza), var(--on-colza)); }
@media (hover: hover) and (pointer: fine) { .et-btn--colza:hover { box-shadow: none; } }
.et-btn:active { transform: translateY(0); }
.et-btn:focus-visible { box-shadow: var(--anneau-focus); }
.avec-intro.intro-finie .rideau { display: none; }
.grille-offres--trois { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (min-width: 1000px) { .grille-offres--cinq { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grille-offres--cinq > * { grid-column: span 2; } .grille-offres--cinq > :nth-child(n+4) { grid-column: span 3; } }
.et-service, .exemple, .realisation, .situations li, .test-questions li, .service-annexe { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
@media (hover: hover) and (pointer: fine) { .et-service:hover, .exemple:hover, .realisation:hover, .situations li:hover { transform: translateY(-4px); border-color: var(--trait-fort); box-shadow: var(--ombre-s); } }
.lien-fleche::after, .et-service__lien::after { content: "\2192"; display: inline-block; margin-left: .3em; transition: transform .2s ease; }
@media (hover: hover) and (pointer: fine) { .lien-fleche:hover::after, .et-service__lien:hover::after, .et-service:hover .et-service__lien::after { transform: translateX(4px); } }
.communes li { transition: transform .2s ease, border-color .2s ease; }
@media (hover: hover) and (pointer: fine) { .communes li:hover { transform: translateY(-2px); border-color: var(--encre); } }
.portrait img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) and (pointer: fine) { .portrait:hover img { transform: scale(1.02); } }
.entete { transition: box-shadow .25s ease; }
.entete--defile { box-shadow: var(--ombre-s); }
.faq__item summary::after { transition: transform .3s ease; }
.faq__item[open] summary::after { content: "+"; transform: rotate(45deg); }
:root { interpolate-size: allow-keywords; }
.faq__item::details-content { height: 0; overflow: clip; transition: height .35s ease, content-visibility .35s allow-discrete; }
.faq__item[open]::details-content { height: auto; }

.barre-chargement { position: fixed; top: 0; left: 0; z-index: 400; width: 100%; height: 3px; background: var(--colza); transform: scaleX(0); transform-origin: left center; pointer-events: none; }
.navigation-en-cours .barre-chargement { animation: charger 2.4s cubic-bezier(.1,.6,.3,1) forwards; }
@view-transition { navigation: auto; }
.entete { view-transition-name: entete; }
::view-transition-old(root) { animation: .22s ease both page-sort; }
::view-transition-new(root) { animation: .38s cubic-bezier(.2,.7,.2,1) both page-entre; }
@keyframes page-sort { to { opacity: 0; transform: translateY(-10px); } }
@keyframes page-entre { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .js .revele:not(.est-visible) { opacity: 1; transform: none; }
}

.stats .titre-l { margin-block: var(--espace-3) var(--espace-2); }
.stats__intro { color: var(--encre-douce); }
.stats__periodes { display: flex; gap: var(--espace-2); margin-block: var(--espace-6); }
.stats__periode { padding: var(--espace-1) var(--espace-3); border: 1px solid var(--trait-fort); border-radius: var(--rayon-s); color: var(--encre); font-size: 15px; text-decoration: none; }
.stats__periode[aria-current] { border-color: var(--sapin); background: var(--sapin); color: var(--on-sapin); }
.stats__tuiles { display: grid; gap: var(--espace-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: var(--espace-6); }
.stats__tuile, .stats__carte { display: grid; gap: var(--espace-2); margin: 0; padding: var(--espace-6); border: 1px solid var(--trait); border-radius: var(--rayon-m); background: var(--papier-carte); }
.stats__libelle { font-size: 15px; line-height: 22px; color: var(--encre-douce); }
.stats__valeur { font-family: var(--font-texte); font-size: 40px; line-height: 44px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stats__titre { font-family: var(--font-texte); font-size: 17px; line-height: 24px; font-weight: 600; }
.stats__graphique { display: block; width: 100%; height: auto; overflow: visible; }
.stats__grille { stroke: var(--trait); stroke-width: 1; }
.stats__axe { fill: var(--encre-douce); font-family: var(--font-texte); font-size: 13px; }
.stats__zone { fill: transparent; }
.stats__barre { fill: var(--sapin); transition: opacity .15s ease; }
.stats__col { outline: none; }
.stats__col:hover .stats__barre, .stats__col:focus .stats__barre { opacity: .75; }
.stats__bulle { fill: var(--encre); font-family: var(--font-texte); font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none; }
.stats__col:hover .stats__bulle, .stats__col:focus .stats__bulle { opacity: 1; }
.stats__col:focus-visible .stats__zone { stroke: var(--sapin); stroke-width: 2; }
.stats__tableau summary { cursor: pointer; color: var(--lien); font-weight: 600; }
.stats__tableau table { width: 100%; margin-top: var(--espace-3); border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.stats__tableau th, .stats__tableau td { padding: var(--espace-1) var(--espace-2); border-bottom: 1px solid var(--trait); text-align: left; }
.stats__listes { display: grid; gap: var(--espace-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: var(--espace-6); }
.stats__carte { align-content: start; }
.stats__classement { display: grid; align-content: start; gap: var(--espace-3); }
.stats__classement li { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--espace-3); font-size: 15px; line-height: 22px; }
.stats__nombre { font-weight: 600; font-variant-numeric: tabular-nums; }
.stats__jauge { grid-column: 1 / -1; width: 100%; height: 6px; }
.stats__piste { fill: var(--sapin-pale); }
.stats__rempli { fill: var(--sapin); }
.stats__vide { color: var(--encre-douce); }

.parcours { margin-bottom: var(--espace-8); }

.realisation__visuel .illu { width: 100%; height: 100%; display: block; --illu-moyen: #8fb3a2; }
.illu [class*="a-"] { transform-box: fill-box; transform-origin: center; }
.illu .i-clair { fill: var(--on-sapin-profond); }
.illu .i-fonce { fill: var(--sapin-profond); }
.illu .i-moyen { fill: var(--illu-moyen); }
.illu .i-colza { fill: var(--colza); }
.illu .i-eclair { fill: var(--colza); opacity: 0; }
.illu .i-trait { fill: none; stroke: var(--sapin-profond); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.illu .i-route { fill: none; stroke: var(--illu-moyen); stroke-width: 5; stroke-linecap: round; }
.illu .i-chemin { fill: none; stroke: var(--colza); stroke-width: 4; stroke-linecap: round; }
.illu .i-anneau { fill: none; stroke: var(--colza); stroke-width: 3; opacity: 0; }
.illu .i-coche { fill: none; stroke: var(--on-sapin-profond); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.illu .i-arc { fill: none; stroke: var(--sapin-profond); stroke-width: 6; stroke-linecap: round; }
.illu .i-mono { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: .08em; fill: var(--sapin-profond); }
.illu .i-titre { font-family: var(--font-titre); font-size: 28px; font-weight: 800; fill: var(--sapin-profond); }
.illu-joue .a-pop { animation: illu-pop .45s cubic-bezier(.3,1.4,.5,1) both; }
.illu-joue .a-glisse { animation: illu-glisse .5s cubic-bezier(.3,.7,.3,1) both; }
.illu-joue .a-large { transform-origin: left center; animation: illu-large .5s cubic-bezier(.3,.7,.3,1) both; }
.illu-joue .a-monte { transform-origin: center bottom; animation: illu-monte .5s cubic-bezier(.3,.7,.3,1) both; }
.illu-joue .a-tombe { transform-origin: center bottom; animation: illu-tombe .5s cubic-bezier(.3,.7,.3,1) both; }
.illu-joue .a-trace { stroke-dasharray: 1; animation: illu-trace .6s ease both; }
.illu-joue .a-pulse { animation: illu-pulse .5s ease both; }
.illu-joue .a-onde { animation: illu-onde .7s ease-out forwards; }
.illu-joue .a-flash { animation: illu-flash .6s ease forwards; }
.illu-joue .a-tourne { animation: illu-tourne 1.2s cubic-bezier(.5,0,.3,1) both; }
.illu-joue .a-lent { animation-duration: 1.4s; }
@keyframes illu-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes illu-glisse { from { opacity: 0; transform: translateX(-24px); } }
@keyframes illu-large { from { transform: scaleX(0); } }
@keyframes illu-monte { from { transform: scaleY(0); } }
@keyframes illu-tombe { 0% { opacity: 0; transform: translateY(-30px); } 60% { opacity: 1; transform: translateY(3px); } }
@keyframes illu-trace { from { stroke-dashoffset: 1; opacity: 0; } 5% { opacity: 1; } to { stroke-dashoffset: 0; } }
@keyframes illu-pulse { 40% { transform: scale(1.18); } }
@keyframes illu-onde { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.3); } }
@keyframes illu-flash { 0% { opacity: 0; } 30% { opacity: .55; } 100% { opacity: 0; } }
@keyframes illu-tourne { from { transform: rotate(-360deg); } }
.illu-joue .t1 { animation-delay: 0.27s; }
.illu-joue .t2 { animation-delay: 0.39s; }
.illu-joue .t3 { animation-delay: 0.51s; }
.illu-joue .t4 { animation-delay: 0.63s; }
.illu-joue .t5 { animation-delay: 0.75s; }
.illu-joue .t6 { animation-delay: 0.87s; }
.illu-joue .t7 { animation-delay: 0.99s; }
.illu-joue .t8 { animation-delay: 1.11s; }
.illu-joue .t9 { animation-delay: 1.23s; }
.illu-joue .t10 { animation-delay: 1.35s; }
.illu-joue .t11 { animation-delay: 1.47s; }
.illu-joue .t12 { animation-delay: 1.59s; }
.illu-joue .t13 { animation-delay: 1.71s; }
.illu-joue .t14 { animation-delay: 1.83s; }
.illu-joue .t15 { animation-delay: 1.95s; }
.illu-joue .t16 { animation-delay: 2.07s; }
@media (prefers-reduced-motion: reduce) { .illu-joue * { animation: none !important; } }

.points { background-image: radial-gradient(circle at 1.5px 1.5px, var(--points) 1.3px, transparent 1.8px); background-size: 26px 26px; }

.metiers { position: sticky; bottom: 0; z-index: 40; overflow: hidden; background: var(--nuit); color: var(--on-sapin-profond); box-shadow: 0 -1px 0 #f6f3ea14; }
.metiers__piste { display: flex; width: max-content; padding: 14px 0; font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; animation: metiers 80s linear infinite; }
.metiers__piste span::after { content: "\00b7"; margin: 0 18px; color: var(--colza); }
@media (hover: hover) and (pointer: fine) { .metiers:hover .metiers__piste { animation-play-state: paused; } }
@keyframes metiers { to { transform: translateX(-50%); } }
@media (max-width: 640px) { .metiers__piste { padding: 9px 0; font-size: 12px; line-height: 16px; letter-spacing: .1em; animation-duration: 60s; } .metiers__piste span::after { margin: 0 12px; } }

.galerie__defile { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: var(--rayon-l); }
.galerie__defile::-webkit-scrollbar { display: none; }
.galerie__defile:focus-visible { box-shadow: var(--anneau-focus); }
.galerie__photo { position: relative; flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.galerie__photo img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.galerie .galerie__photo img { border-radius: 0; }
.galerie__commandes { position: absolute; left: var(--espace-3); bottom: var(--espace-3); z-index: 2; display: flex; align-items: center; padding: 2px; border-radius: 999px; background: #14221cb8; }
html:not(.js) .galerie__commandes { display: none; }
.galerie__fleche { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #f6f3ea; cursor: pointer; }
.galerie__fleche::before { content: ""; width: 9px; height: 9px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateX(2px) rotate(45deg); }
.galerie__fleche--apres::before { transform: translateX(-2px) rotate(-135deg); }
@media (hover: hover) and (pointer: fine) { .galerie__fleche:hover { background: #f6f3ea26; } }
.galerie__points { display: flex; }
.galerie__point { display: grid; place-items: center; width: 18px; height: 36px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.galerie__point::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: #f6f3ea8c; transition: width .25s ease, background-color .25s ease; }
.galerie__point[aria-current] { width: 24px; }
.galerie__point[aria-current]::before { width: 16px; background: var(--colza); }

.mention-ia { position: absolute; right: var(--espace-3); bottom: var(--espace-3); z-index: 2; }
.mention-ia__court { display: block; padding: 3px 7px; border-radius: 6px; background: #14221cb8; color: #f6f3ea; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .08em; cursor: help; }
.mention-ia__long { position: absolute; right: 0; bottom: calc(100% + 6px); width: max-content; max-width: 230px; padding: 6px 10px; border-radius: 6px; background: #14221ceb; color: #f6f3ea; font-size: 13px; line-height: 18px; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
@media (hover: hover) and (pointer: fine) { .galerie__photo:hover .mention-ia__long { opacity: 1; transform: none; } }
.montre-ia .mention-ia__long, figure:has(:focus-visible) .mention-ia__long { opacity: 1; transform: none; }

.orienteur__libre { display: grid; gap: var(--espace-2); width: 100%; margin-top: var(--espace-3); }
html:not(.js) .orienteur__libre, html:not(.js) .orienteur__ou, html:not(.js) .orienteur__reponse--libre { display: none; }
.orienteur__label { font-weight: 600; }
.orienteur__saisie { display: grid; gap: var(--espace-3); }
.orienteur__saisie textarea { width: 100%; min-height: 56px; padding: var(--espace-3) var(--espace-4); border: 2px solid var(--trait-fort); border-radius: var(--rayon-m); background: var(--papier-carte); color: var(--encre); font: inherit; resize: vertical; }
.orienteur__saisie textarea:focus-visible { border-color: var(--sapin); }
.orienteur__discret { font-size: 14px; line-height: 20px; color: var(--encre-douce); }
.orienteur__boutons { display: flex; flex-wrap: wrap; gap: var(--espace-2); }
.bouton-micro { display: inline-flex; align-items: center; gap: var(--espace-2); min-height: 48px; padding: 0 var(--espace-4); border: 2px solid var(--trait-fort); border-radius: var(--rayon-m); background: var(--papier-carte); color: var(--encre); font: 600 16px/20px var(--font-texte); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.bouton-micro svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.bouton-micro svg rect { fill: currentColor; stroke: none; }
@media (hover: hover) and (pointer: fine) { .bouton-micro:hover { border-color: var(--encre); } }
.bouton-micro[aria-pressed="true"] { border-color: var(--colza); background: var(--colza); color: var(--on-colza); }
.bouton-micro[aria-pressed="true"] svg { animation: micro 1s ease-in-out infinite; }
@keyframes micro { 50% { transform: scale(1.18); } }
.micro-etat { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--sapin); }
.micro-etat:empty { display: none; }
html:not(.js) .bouton-micro { display: none; }
.micro-outils { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2) var(--espace-3); }
.micro-outils .bouton-micro { min-height: 40px; padding: 0 var(--espace-3); font-size: 15px; }
.orienteur__ou { margin-top: var(--espace-4); font-size: 15px; line-height: 22px; color: var(--encre-douce); }
.orienteur .orienteur__choix { margin-top: 0; }
.orienteur__reponse .actions { margin-top: var(--espace-1); }
.orienteur__aussi { font-size: 15px; line-height: 22px; color: var(--encre-douce); }
.orienteur__aussi:empty { display: none; }

.zone { display: grid; gap: var(--espace-12); align-items: center; }
@media (min-width: 900px) { .zone { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--espace-16); } }
.zone__villes { max-width: var(--largeur-texte); margin-top: var(--espace-2); font-size: 15px; line-height: 24px; color: var(--encre-douce); }
.zone__villes-titre { display: block; margin-bottom: var(--espace-1); font-family: var(--font-mono); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--sapin); }
.zone__texte .note { margin-top: 0; }
.zone__texte .encadre-aides { margin-top: var(--espace-6); }
.carte-zone { --T: 2.4s; overflow: hidden; padding: var(--espace-8) var(--espace-6) var(--espace-6); border-radius: var(--rayon-l); background: var(--sapin-profond); }
.carte-zone__svg { display: block; width: 100%; max-width: 420px; height: auto; margin-inline: auto; overflow: visible; }
.carte-zone__fond { fill: none; stroke: var(--sauge); stroke-opacity: .3; stroke-width: 4.4; stroke-linecap: round; }
.carte-zone__lueur { fill: none; stroke: var(--colza); stroke-width: 4.4; stroke-linecap: round; opacity: 0; }
.carte-zone__vague { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.carte-zone__aura { fill: none; stroke: var(--colza); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
.carte-zone__rayon { fill: none; stroke: var(--colza); stroke-opacity: .32; stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-opacity .2s ease, stroke-width .2s ease; }
.carte-zone__cible { fill: transparent; }
.carte-zone__point { fill: var(--on-sapin-profond); transform-box: fill-box; transform-origin: center; transition: fill .2s ease; }
.carte-zone__ville, .carte-zone__base { cursor: default; }
.carte-zone__ville text, .carte-zone__base text { font-family: var(--font-mono); font-weight: 500; paint-order: stroke; stroke: var(--sapin-profond); stroke-width: 4px; stroke-linejoin: round; }
.carte-zone__ville text { fill: var(--sauge); font-size: 12px; letter-spacing: .03em; opacity: 0; transition: opacity .2s ease; }
.carte-zone__ville--nommee text { opacity: 1; }
.carte-zone__ville.est-active text { opacity: 1; fill: var(--on-sapin-profond); }
.carte-zone__ville.est-active .carte-zone__point { fill: var(--colza); }
.carte-zone__ville.est-active .carte-zone__rayon { stroke-opacity: .95; stroke-width: 1.8; }
@media (hover: hover) and (pointer: fine) {
  .carte-zone__ville:hover text { opacity: 1; fill: var(--on-sapin-profond); }
  .carte-zone__ville:hover .carte-zone__point { fill: var(--colza); }
  .carte-zone__ville:hover .carte-zone__rayon { stroke-opacity: .95; stroke-width: 1.8; }
}
.carte-zone__base .carte-zone__point { fill: var(--colza); }
.carte-zone__base text { fill: var(--colza); font-size: 14px; }
.carte-zone__base .carte-zone__onde { fill: none; stroke: var(--colza); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.carte-zone__base.est-active .carte-zone__point { transform: scale(1.3); }
.carte-joue .carte-zone__vague { animation: carte-vague var(--T) linear backwards; }
.carte-joue .carte-zone__lueur { animation: carte-lueur var(--T) ease-out backwards; }
.carte-joue .carte-zone__aura { animation: carte-aura var(--T) linear backwards; }
.carte-joue .carte-zone__onde { animation: onde 2.6s ease-out 3; }
.carte-joue .carte-zone__rayon { animation: carte-rayon .6s cubic-bezier(.3,.7,.3,1) backwards; animation-delay: calc(var(--d, 0) * var(--T) - .3s); }
.carte-joue .carte-zone__ville .carte-zone__point { animation: carte-ville .8s ease-out backwards; animation-delay: calc(var(--d, 0) * var(--T)); }
.carte-joue .carte-zone__ville--nommee text { animation: carte-nom .5s ease-out backwards; animation-delay: calc(var(--d, 0) * var(--T) + .15s); }
@keyframes carte-vague { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes carte-lueur { 0% { opacity: 0; } 8% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes carte-aura { 0% { opacity: .9; transform: scale(0); } 80% { opacity: .45; } 100% { opacity: 0; transform: scale(1); } }
@keyframes carte-rayon { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes carte-ville { 0% { fill: var(--on-sapin-profond); transform: scale(1); } 30% { fill: var(--colza); transform: scale(2.1); } 100% { fill: var(--on-sapin-profond); transform: scale(1); } }
@keyframes carte-nom { from { opacity: 0; } to { opacity: 1; } }
@keyframes onde { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(1.9); } }
.carte-zone__aide { margin-top: var(--espace-4); font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: .04em; text-align: center; color: var(--sauge); }
.carte-zone__aide-souris { display: none; }
@media (hover: hover) and (pointer: fine) { .carte-zone__aide-souris { display: inline; } .carte-zone__aide-doigt { display: none; } }
html:not(.js) .carte-zone__aide { display: none; }
@media (hover: hover) and (pointer: fine) { .zone__ville { border-bottom: 1px dotted transparent; transition: color .15s ease, border-color .15s ease; } .zone__ville:hover { color: var(--sapin); border-bottom-color: var(--colza); } }

.introuvable { padding-block: var(--espace-12) var(--espace-24); }
.introuvable__grille { display: grid; align-items: center; gap: var(--espace-12); }
@media (min-width: 900px) { .introuvable__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--espace-16); } }
.introuvable__texte { display: grid; justify-items: start; gap: var(--espace-6); }
.introuvable__liens { display: grid; gap: var(--espace-3); width: 100%; max-width: 560px; }
.introuvable__liens a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 2px var(--espace-4); padding: var(--espace-4) var(--espace-6); border: 1px solid var(--trait-fort); border-radius: var(--rayon-m); background: var(--papier-carte); color: var(--encre); text-decoration: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
@media (hover: hover) and (pointer: fine) { .introuvable__liens a:hover { transform: translateY(-2px); border-color: var(--encre); box-shadow: inset 0 -4px 0 var(--colza); } }
.introuvable__num { grid-row: 1 / span 2; font-family: var(--font-mono); font-size: 13px; line-height: 16px; letter-spacing: .06em; color: var(--encre-douce); }
.introuvable__liens strong { font-family: var(--font-titre); font-size: 20px; line-height: 26px; }
.introuvable__liens span:last-child { color: var(--encre-douce); font-size: 15px; line-height: 22px; }
.sourire { justify-self: center; width: min(100%, 240px); height: auto; }
.sourire__oeil { fill: var(--sapin); }
.sourire__bouche { fill: var(--colza); }
.sourire__clin { transform-box: fill-box; transform-origin: center; animation: clin 4s ease-in-out .8s 3; }
@keyframes clin { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.12); } }