*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (min-width: 2000px){html{ font-size: 125%; }
}
body{ margin: 0; background: var(--fond); color: var(--texte); font: 400 var(--t-corps)/1.55 var(--corps); }
img, svg, canvas{ max-width: 100%; display: block; }
a{ color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover{ text-decoration-color: var(--accent); }
:focus-visible{ outline: 2px solid var(--focus, var(--sauge)); outline-offset: 3px; }
.section.claire, .scene--clair, .preuve, .vm-claire, .fn-claire, .cm, .vm3d, .fn-plan, .demande, .accueil-suite-gains, .accueil-suite-parcours, .commune .champ, .saut:focus{ --focus: var(--foret); }
.commune .champ input:focus-visible{ outline-offset: -4px; }
.saut{ position: absolute; left: -9999px; }
.saut:focus{ left: 16px; top: 16px; z-index: 50; background: var(--ivoire); color: var(--foret); padding: 8px 12px; }
.titre, h1, h2{ font-family: var(--titre); font-weight: 300; font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
h1{ font-size: var(--t-h1); line-height: 0.98; }
h2{ font-size: var(--t-h2); line-height: 1.02; }
h3{ font: 600 var(--t-h3)/1.25 var(--corps); margin: 0; text-wrap: balance; }
p{ margin: 0; text-wrap: pretty; }
.mono{ font-family: var(--mono); font-size: var(--t-mono); }
.repere{ font: 500 15px/1.4 var(--corps); }
.chapeau{ font-size: var(--t-chapeau); line-height: 1.4; color: var(--texte-2); text-wrap: pretty; }
.mesure{ max-width: var(--mesure); margin-inline: auto; }
.entete{ position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) var(--gouttiere-d) 14px var(--gouttiere); padding-inline: max(var(--marge), env(safe-area-inset-left, 0px)) max(var(--marge), env(safe-area-inset-right, 0px));
  background: var(--foret); transition: background 0.3s var(--entree); }
.js .entete:not(.pleine){ background: transparent; }
.entete .logo{ flex: none; }
.entete .logo img{ height: 44px; width: auto; margin-left: -8px; }
.menu{ display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; font-size: var(--t-petit); }
.menu a{ text-decoration: none; color: var(--texte-2); }
.menu a:hover, .menu a[aria-current]{ color: var(--texte); }
.pourqui{ position: relative; }
.pourqui > button{ all: unset; cursor: pointer; color: var(--texte-2); }
.pourqui ul{ position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); min-width: 300px; list-style: none; margin: 0; padding: 10px;
  background: var(--fond-2); border: 1px solid var(--filet); display: grid; gap: 2px; }
.pourqui ul a{ display: block; padding: 8px 10px; text-decoration: none; color: var(--texte); }
.pourqui ul a:hover{ background: rgba(185, 198, 163, 0.12); }
.bouton{ display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; font: 600 var(--t-petit)/1 var(--corps); text-decoration: none;
  background: var(--ivoire); color: var(--foret); border: 0; cursor: pointer; white-space: nowrap; min-height: 44px; max-width: 100%; }
@media (max-width: 420px){.bouton{ white-space: normal; text-align: left; }
}
.bouton:hover{ background: var(--blanc); }
.bouton.creux{ background: transparent; color: var(--texte); border: 1px solid var(--filet); }
@media (max-width: 900px){.menu{ display: none; }
}
.cadre{ position: absolute; inset: 88px var(--marge) 56px; pointer-events: none; color: rgba(241, 240, 223, 0.45); }
.cadre i{ position: absolute; width: 15px; height: 15px; }
.cadre i::before, .cadre i::after{ content: ""; position: absolute; background: currentColor; }
.cadre i::before{ left: 7px; top: 0; width: 1px; height: 15px; }
.cadre i::after{ top: 7px; left: 0; height: 1px; width: 15px; }
.cadre i:nth-child(1){ left: -7px; top: -7px; }
.cadre i:nth-child(2){ right: -7px; top: -7px; }
.cadre i:nth-child(3){ left: -7px; bottom: -7px; }
.cadre i:nth-child(4){ right: -7px; bottom: -7px; }
@media (max-width: 700px){.cadre{ display: none; }
}
.rail{ position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 20; list-style: none; margin: 0; padding: 0; pointer-events: none;
  display: grid; gap: 4px; justify-items: end; font-size: 13px; }
.rail a{ pointer-events: auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 24px; min-width: 32px; text-decoration: none; color: rgba(241, 240, 223, 0.55); }
.rail a::after{ content: ""; width: 14px; height: 1px; background: currentColor; transition: width 0.3s var(--entree); }
.rail a span{ display: none; }
.rail a:focus-visible span{ display: block; position: absolute; right: 40px; padding: 6px 10px; background: var(--foret); color: var(--ivoire); border: 1px solid var(--ivoire); white-space: nowrap; }
.rail a:focus-visible{ outline-offset: 0; }
.rail a[aria-current]{ color: var(--sauge); }
.rail a[aria-current]::after{ width: 24px; }
@media (max-width: 1100px){.rail{ display: none; }
}
.section{ position: relative; padding-block: clamp(40px, 5.5vw, 80px); padding-inline: max(var(--marge), env(safe-area-inset-left, 0px)) max(var(--marge), env(safe-area-inset-right, 0px)); }
.section.claire{ background: var(--clair-fond); color: var(--clair-texte); --texte: var(--clair-texte); --texte-2: var(--clair-texte-2); --filet: var(--clair-filet); }
.section.claire .bouton{ background: var(--foret); color: var(--ivoire); }
.section .tete{ display: grid; gap: 24px; justify-items: center; text-align: center; max-width: 1100px; margin-inline: auto; }
.section .tete .repere{ color: var(--accent); }
.section.claire .tete .repere{ color: var(--clair-texte-2); }
.section .corps{ margin-top: clamp(40px, 6vh, 72px); display: grid; gap: 20px; }
.section .corps > p, .section .corps > ul, .section .corps > ol{ max-width: var(--mesure); margin-inline: auto; width: 100%; }
.chiffre{ display: grid; gap: 10px; justify-items: center; text-align: center; max-width: 900px; margin: 56px auto 0; }
.chiffre b{ font-family: var(--titre); font-weight: 300; font-variation-settings: "opsz" 144; font-size: var(--t-h2); line-height: 1; color: var(--accent); }
.section.claire .chiffre b{ color: var(--foret); }
.chiffre p{ font-size: var(--t-chapeau); line-height: 1.35; text-wrap: balance; }
.source{ font-family: var(--corps, sans-serif); font-size: var(--t-mono); color: var(--texte-2); }
.a-renseigner{ font-style: normal; border-bottom: 1px solid currentColor; }
.marque-etat{ display: inline-block; font: 600 13px/1 var(--corps); padding: 6px 10px; border: 1px solid currentColor; color: var(--accent); }
.section.claire .marque-etat{ color: var(--foret); }
.cartes{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1px; background: var(--filet); border: 1px solid var(--filet); max-width: 1200px; margin: 56px auto 0; }
.carte{ background: var(--fond); padding: 28px; display: grid; gap: 10px; align-content: start; text-decoration: none; min-width: 0; }
.section.claire .carte{ background: var(--clair-fond); }
.carte h3{ font-family: var(--titre); font-weight: 300; font-size: 1.75rem; letter-spacing: -0.01em; }
.carte p{ color: var(--texte-2); font-size: var(--t-petit); }
.carte:hover h3{ text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.questions{ max-width: 860px; margin: 56px auto 0; border-top: 1px solid var(--filet); }
.questions details{ border-bottom: 1px solid var(--filet); }
.questions summary{ cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative; font: 600 var(--t-h3)/1.3 var(--corps); }
.questions summary::-webkit-details-marker{ display: none; }
.questions summary::after{ content: "+"; position: absolute; right: 4px; top: 18px; font: 300 1.75rem/1 var(--titre); color: var(--accent); }
.questions details[open] summary::after{ content: "−"; }
.questions details > div{ padding: 0 0 24px; color: var(--texte-2); max-width: var(--mesure); }
.ariane{ font-size: var(--t-petit); color: var(--texte-2); display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; list-style: none; padding: 0; margin: 0 0 28px; }
.ariane li + li::before{ content: "/"; margin-right: 8px; color: var(--filet); }
.ariane a{ text-decoration: none; }
.page-tete{ padding-top: clamp(140px, 22vh, 240px); }
.liens-voisins{ max-width: 1100px; margin: 64px auto 0; display: grid; gap: 12px; justify-items: center; text-align: center; }
.liens-voisins ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center; }
.pied{ background: var(--foret); border-top: 1px solid var(--filet); padding-block: 72px calc(40px + env(safe-area-inset-bottom, 0px)); padding-inline: max(var(--marge), env(safe-area-inset-left, 0px)) max(var(--marge), env(safe-area-inset-right, 0px)); }
.pied .grille{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 40px; }
.pied h2{ font: 600 var(--t-petit)/1.3 var(--corps); letter-spacing: 0; margin-bottom: 14px; color: var(--sauge); }
.pied ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--t-petit); }
.pied a{ text-decoration: none; color: var(--texte-2); display: inline-block; padding-block: 4px; }
.pied a:hover{ color: var(--texte); }
.pied .credits{ margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--filet); color: var(--texte-2); font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.pied .logo img{ height: 40px; width: auto; margin-left: -8px; }
.descente{ position: relative; height: 320vh; }
.descente .ecran{ position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: linear-gradient(180deg, #103C32 0, #103C32 34%, #b9c6a3 47%, #103C32 60%); }
.descente canvas, .descente .repli{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.descente .vignette{ position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 60%, transparent 55%, rgba(16, 60, 50, 0.6) 100%); pointer-events: none; }
.descente .texte{ position: absolute; inset: 0; display: grid; align-content: start; justify-items: center; text-align: center; padding: clamp(110px, 16vh, 170px) max(var(--marge), 6vw) 0; }
.descente .etiquette{ font-size: clamp(1rem, 0.9rem + 0.4vw, 1.375rem); color: rgba(241, 240, 223, 0.85); margin-bottom: 22px; }
.descente h1{ max-width: 22ch; font-size: clamp(2rem, 1.1rem + 3vw, 4.25rem); line-height: 1.04; }
.descente .voile{ position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 62% 50% at 50% 36%, rgba(5, 22, 17, 0.66), rgba(5, 22, 17, 0.4) 58%, rgba(5, 22, 17, 0) 85%); }
.descente h1 .ligne{ display: block; }
.descente h1 .ligne + .ligne{ margin-top: 0.25em; }
.descente.anime h1 .ligne{ transition: opacity 0.5s var(--entree), transform 0.6s var(--entree); }
.descente.anime h1 .ligne:not(.active){ position: absolute; opacity: 0; transform: translateY(18px); pointer-events: none; }
.descente .appui{ margin-top: 28px; display: grid; gap: 14px; justify-items: center; }
.descente .appui p{ max-width: 52ch; color: rgba(241, 240, 223, 0.85); }
.descente .lieu, .descente .credit{ position: absolute; bottom: 24px; color: rgba(241, 240, 223, 0.72); }
.descente .lieu{ left: max(var(--marge), 24px); max-width: calc(50% - 40px); }
.descente .credit{ right: max(var(--marge), 24px); text-align: right; max-width: calc(50% - 40px); }
.descente .progression{ position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); width: 1px; height: 56px; background: rgba(241, 240, 223, 0.25); overflow: hidden; }
.descente .progression i{ position: absolute; inset: 0 0 auto; height: var(--p, 0%); background: var(--ivoire); }
@media (max-width: 700px){.descente{ height: auto; }
.descente .ecran{ position: relative; height: auto; min-height: 100svh; }
.descente.anime h1 .ligne:not(.active){ position: static; opacity: 1; transform: none; }
.descente h1{ font-size: clamp(1.625rem, 7.4vw, 2.125rem); max-width: none; }
.descente h1 .ligne + .ligne{ font-size: 0.64em; line-height: 1.25; margin-top: 0.7em; letter-spacing: -0.01em; }
.descente .texte{ position: relative; padding: 92px var(--gouttiere-d) 140px var(--gouttiere); }
.descente .etiquette{ font-size: 0.9375rem; margin-bottom: 14px; }
.descente .appui{ display: flex; flex-direction: column; align-items: center; margin-top: 22px; }
.descente .appui .bouton, .descente .appui .note{ order: -1; }
.descente .voile{ background: linear-gradient(180deg, rgba(5, 22, 17, 0.55), rgba(5, 22, 17, 0.62) 70%, rgba(5, 22, 17, 0.3)); }
.descente .lieu, .descente .credit{ left: var(--gouttiere); right: var(--gouttiere-d); max-width: none; text-align: center; }
.descente .lieu{ bottom: 72px; }
.descente .credit{ bottom: 28px; }
.descente .progression{ display: none; }
}
.parcelle{ position: relative; background: var(--foret); overflow: hidden; }
.parcelle .trame{ position: relative; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; }
.parcelle canvas{ position: absolute; inset: 0; width: 100%; height: 100%; }
.parcelle h2{ position: absolute; right: 4.6%; top: 11%; width: 40%; text-align: right; font-size: clamp(2rem, 3.6vw, 4.25rem); }
.parcelle .etiquettes{ list-style: none; margin: 0; padding: 0; }
.parcelle .et{ position: absolute; font-size: clamp(13px, 1.05vw, 20px); line-height: 1.3; padding: 0.4em 0.6em; background: rgba(16, 60, 50, 0.92); color: var(--ivoire); border-left: 3px solid var(--sauge); white-space: nowrap; }
.parcelle .et small{ display: block; font: 0.7em/1.4 var(--mono); color: var(--sauge); margin-top: 2px; }
.parcelle .et .v{ font-family: var(--mono); font-size: 0.85em; color: var(--sauge); margin-left: 8px; }
.parcelle .bas{ position: absolute; left: 4.6%; right: 4.6%; bottom: 2.6%; display: flex; justify-content: space-between; color: rgba(241, 240, 223, 0.72); gap: 16px; }
.parcelle .bas .echelle{ display: flex; align-items: center; gap: 10px; }
.parcelle .bas .echelle b{ display: inline-block; width: 5vw; height: 6px; border: 1px solid currentColor; border-top: 0; }
@media (max-width: 900px){.parcelle .trame{ aspect-ratio: 4 / 3; }
.parcelle canvas{ object-fit: cover; }
.parcelle h2{ position: static; width: auto; text-align: center; padding: 72px var(--gouttiere-d) 28px var(--gouttiere); }
.parcelle .etiquettes{ display: grid; gap: 10px; padding: 24px var(--gouttiere-d) 32px var(--gouttiere); }
.parcelle .et{ position: static; white-space: normal; font-size: 16px; }
.parcelle .bas{ position: static; padding: 0 var(--gouttiere-d) 40px var(--gouttiere); flex-direction: column; }
.parcelle .bas .echelle{ display: none; }
}
.commune{ position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; text-align: center; overflow: hidden; background: var(--foret); }
.commune .fond{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.95; }
.commune .halo{ display: none; }
.commune .contenu{ position: relative; display: grid; gap: 28px; justify-items: center; box-sizing: border-box; width: min(880px, calc(100% - var(--gouttiere) - var(--gouttiere-d))); margin: 96px 0 120px; padding: clamp(28px, 4vw, 56px); background: var(--foret); }
.commune .contenu{ min-width: 0; }
.commune form{ display: grid; min-width: 0; gap: 12px; justify-items: center; width: min(560px, 100%); }
.commune label{ color: var(--texte-2); font-family: var(--corps, sans-serif); font-size: var(--t-mono); }
.commune .champ{ display: flex; width: 100%; background: var(--ivoire); }
.commune input{ flex: 1; width: 100%; min-width: 0; border: 0; background: transparent; color: var(--foret); font: 300 clamp(1.75rem, 4vw, 2.875rem)/1 var(--titre); letter-spacing: -0.02em; padding: 18px 20px; }
.commune input::placeholder{ color: rgba(16, 60, 50, 0.68); font-size: 0.62em; letter-spacing: 0; }
.commune .champ .bouton{ background: var(--foret); color: var(--ivoire); margin: 8px; }
.commune .chiffres{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-family: var(--mono); font-size: var(--t-mono); color: var(--texte-2); }
.commune .chiffres b{ font-weight: 400; color: var(--sauge); }
.commune .credit{ position: absolute; left: max(var(--marge), 16px); right: max(var(--marge), 16px); bottom: 24px; color: rgba(241, 240, 223, 0.62); }
@media (prefers-reduced-motion: reduce){html{ scroll-behavior: auto; }
.descente{ height: auto; }
.descente .ecran{ position: relative; }
.descente.anime h1 .ligne:not(.active){ position: static; opacity: 1; transform: none; }
.descente .progression{ display: none; }
*{ transition-duration: 0s !important; animation-duration: 0s !important; }
}
.js .revele{ opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--entree), transform 0.8s var(--entree); }
.js .revele.vu{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){.js .revele{ opacity: 1; transform: none; }
}
[hidden]{ display: none !important; }
.descente.anime h1{ position: relative; }
.descente.anime h1 .ligne:not(.active){ left: 0; right: 0; top: 0; }
.note{ font-size: var(--t-petit); color: var(--texte-2); }
.action{ text-align: center; margin-top: 12px; }
.section .corps > .chapeau{ text-align: center; max-width: 52ch; margin-inline: auto; }
.grand{ font-family: var(--titre); font-weight: 300; font-variation-settings: "opsz" 144; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.2;
  text-align: center; max-width: 30ch; margin-inline: auto; text-wrap: balance; }
.grand strong{ display: block; font-weight: 500; }
.grand + .grand{ margin-top: 20px; }
.maquette{ margin: 48px auto 0; max-width: 1100px; width: 100%; aspect-ratio: 16 / 7; border: 1px dashed var(--filet); display: grid; place-content: center;
  justify-items: center; gap: 14px; text-align: center; padding: 24px; color: var(--texte-2); }
@media (max-width: 700px){.maquette{ aspect-ratio: 4 / 3; }
}
.relie-suite{ padding-block: clamp(40px, 5.5vw, 80px); }
.relie{ display: grid; gap: 30px; justify-items: center; max-width: 1100px; width: 100%; margin: 24px auto 0; }
.relie ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.relie .sources button{ all: unset; cursor: pointer; padding: 9px 14px; border: 1px solid var(--filet); font-size: var(--t-petit); color: var(--texte-2); transition: background 0.3s var(--entree), color 0.3s; }
.relie .sources button:hover{ color: var(--texte); border-color: var(--sauge); }
.relie .sources button[aria-pressed="true"]{ background: var(--ivoire); color: var(--foret); border-color: var(--ivoire); }
.relie .sources button:focus-visible{ outline: 2px solid var(--sauge); outline-offset: 3px; }
.relie .noeud{ position: relative; border: 1px solid var(--sauge); padding: 18px 26px; max-width: 560px; text-align: center; display: grid; gap: 6px; }
.relie .noeud::before, .relie .noeud::after{ content: ""; position: absolute; left: 50%; width: 1px; height: 30px; background: var(--sauge); }
.relie .noeud::before{ top: -31px; }
.relie .noeud::after{ bottom: -31px; }
.relie .noeud span{ color: var(--sauge); }
.relie .noeud p{ font-family: var(--titre); font-weight: 300; font-size: var(--t-h3); line-height: 1.3; }
.relie .profils li{ padding: 10px 16px; border: 1px solid var(--filet); color: var(--texte-2); transition: border-color 0.35s var(--entree) 0.35s, background 0.35s var(--entree) 0.35s, color 0.35s 0.35s; }
.relie .profils li.lie{ border-color: var(--sauge); color: var(--texte); background: rgba(185, 198, 163, 0.12); }
.relie .profils a{ text-decoration: none; }
.relie .fin{ font-family: var(--corps, sans-serif); font-size: var(--t-mono); color: var(--texte-2); }
.page-tete .tete{ gap: 28px; }
.page-tete h1{ font-size: clamp(2.25rem, 1.4rem + 3.4vw, 5rem); max-width: 22ch; }
.illustration{ margin: 0 auto; max-width: 1400px; padding-inline: max(var(--marge), env(safe-area-inset-left, 0px)) max(var(--marge), env(safe-area-inset-right, 0px)); }
.illustration img{ width: 100%; height: auto; }
.illustration .schema-regle{ display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; font-family: var(--corps); }
.liste-sources{ list-style: none; padding: 0; margin: 0 auto; display: grid; gap: 14px; max-width: 900px; width: 100%; }
.liste-sources li{ border-bottom: 1px solid var(--filet); padding-bottom: 14px; color: var(--texte-2); }
.liste-sources strong{ color: var(--texte); font-weight: 600; }
.demande{ display: grid; gap: 22px; max-width: 760px; width: 100%; margin-inline: auto; }
.demande label{ display: grid; gap: 6px; font-weight: 600; font-size: var(--t-petit); min-width: 0; }
.demande input:not([type="checkbox"]):not([type="radio"]){ width: 100%; min-width: 0; font: 400 var(--t-corps)/1.3 var(--corps); padding: 12px 14px;
  border: 1px solid rgba(16, 60, 50, 0.5); border-radius: 0; background: var(--blanc); color: var(--foret); }
.demande fieldset{ border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.demande legend{ font-weight: 600; font-size: var(--t-petit); padding: 0; margin-bottom: 6px; }
.demande .case{ display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: var(--t-corps); }
.demande .case{ min-height: 44px; align-items: center; cursor: pointer; }
.demande .case input{ appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; flex: none; display: grid; place-content: center; border: 2px solid var(--foret); border-radius: 0; background: #FFFFFF; }
.demande .case input:checked::after{ content: ""; width: 12px; height: 12px; background: var(--foret); }
.demande .case input[type="radio"]:checked{ background: var(--foret); }
.demande .case input[type="radio"]:checked::after{ width: 8px; height: 8px; background: var(--ivoire); }
.demande .cases{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 8px 20px; }
.demande .ligne2{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 22px; }
.demande .facultatif{ font-weight: 400; color: var(--texte-2); }
.demande-merci{ max-width: 760px; margin-inline: auto; text-align: center; display: grid; gap: 16px; }
.illustration figcaption{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 12px; color: var(--texte-2); font-size: var(--t-petit); }
.liste-sources li, .fiche-ref span{ overflow-wrap: anywhere; }
.chiffre p.source{ font-size: var(--t-mono); line-height: 1.5; }
.commune .contenu{ box-sizing: border-box; width: min(880px, calc(100% - 2 * var(--marge))); }
.commune .champ{ box-sizing: border-box; }
.commune .champ .bouton{ flex: none; }
@media (max-width: 700px){.entete{ gap: 12px; }
.entete .logo img{ height: 32px; margin-left: -6px; }
.entete > .bouton{ padding: 9px 12px; font-size: 14px; }
.commune .champ{ flex-wrap: wrap; }
.commune .champ input{ flex-basis: 100%; font-size: 1.75rem; }
.commune .champ .bouton{ flex: 1; justify-content: center; }
}
.tableau-defile{ overflow-x: auto; }
.tableau-defile:focus-visible{ outline: 3px solid var(--foret); outline-offset: 2px; }
.indice-defile{ display: none; margin: 6px 0 0; font-size: 13px; }
@media (max-width: 480px){.indice-defile{ display: block; }
}
table.fonctions{ width: 100%; border-collapse: collapse; font-size: var(--t-corps, 17px); }
table.fonctions th{ text-align: left; font: 500 13px/1.4 var(--corps, sans-serif); color: var(--texte-2); padding: 0 12px 10px 0; border-bottom: 1px solid var(--bord, currentColor); }
table.fonctions td{ padding: 14px 12px 14px 0; border-bottom: 1px solid rgba(185, 198, 163, 0.25); vertical-align: top; }
table.fonctions td:first-child{ min-width: 16em; }
table.fonctions td:nth-child(2), table.fonctions td:nth-child(3){ white-space: nowrap; }
.etat-existe{ display: inline-block; font: 600 13px/1 var(--corps); padding: 6px 10px; background: var(--sauge); color: var(--foret); }
.note-etat{ font-size: var(--t-petit); color: var(--texte-2); }
.schema{ margin: 48px auto 0; max-width: 1100px; width: 100%; border: 1px solid var(--filet); padding: clamp(20px, 3vw, 32px); display: grid; gap: 18px; }
.schema figcaption{ font-family: var(--titre); font-size: var(--t-chapeau); line-height: 1.3; text-wrap: balance; }
.schema .poses{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; counter-reset: pose; }
.schema .poses li{ counter-increment: pose; border: 1px solid var(--filet); padding: 8px 12px; min-width: 0; }
.schema .poses li::before{ content: counter(pose) "  "; font-family: var(--mono, monospace); color: var(--texte-2); }
.schema .source{ color: var(--texte-2); font-size: .85em; }
.gains{ list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.gain{ border: 1px solid var(--filet); border-radius:0; padding: 24px; background: rgba(255, 255, 255, 0.35); }
.gain[data-nature="gagner"]{ background: var(--foret); color: var(--ivoire); border-color: var(--foret); }
.gain-nature{ font: var(--t-mono)/1.4 var(--corps, sans-serif); opacity: .8; }
.gain h3{ font: 500 clamp(1.25rem, 1.05rem + .6vw, 1.5rem)/1.2 var(--titre); margin: 12px 0 10px; }
.gain p{ margin: 0; font-size: var(--t-petit); line-height: 1.55; }
.calcul{ min-width: 0; }
.calcul h3{ font: 400 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.2 var(--titre); margin: 0 0 20px; }
.calc-blocs{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.calc-bloc{ min-width: 0; min-inline-size: 0; border: 1px solid var(--filet); border-radius:0; padding: 18px 20px; margin: 0; display: grid; gap: 12px; }
.calc-bloc legend{ font: 600 var(--t-petit)/1.3 var(--corps); padding: 0 6px; }
.calc-champ{ display: grid; gap: 4px; font-size: var(--t-petit); }
.calc-saisie{ display: grid; grid-template-columns: minmax(0, 1fr) 5.5em; align-items: center; gap: 8px; }
.calcul, .calc-saisie input{ font-variant-numeric: lining-nums proportional-nums; }
.calc-resultat b{ font-variant-numeric: lining-nums tabular-nums; }
.calc-saisie input{ flex: 1; min-width: 0; font: inherit; padding: 8px 10px; border: 1px solid var(--foret); border-radius:0; background: var(--blanc); color: var(--foret); }
.calc-saisie em{ font-style: normal; font-size: var(--t-mono); white-space: nowrap; }
.calc-resultat{ margin: 4px 0 0; font-size: var(--t-petit); min-height: 3em; }
.calc-resultat b{ display: block; font: 500 1.75rem/1.2 var(--titre); }
.calc-note{ font-size: var(--t-mono); opacity: .8; margin-top: 14px; }
#gains .corps, #calcul .corps{ grid-template-columns: minmax(0, 1fr); }
.descente .credit, .commune .credit{ font: 400 13px/1.5 var(--corps); letter-spacing: 0; }
.descente .credit a, .commune .credit a{ color: inherit; text-underline-offset: 3px; }
.grand{ font: 400 18px/1.6 var(--corps); max-width: 62ch; text-wrap: pretty; }
.grand strong{ font: 400 clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem)/1.2 var(--titre); margin-bottom: 8px; }
.grand + .grand{ margin-top: 36px; }
.calc-exemple{ margin: 0 0 16px; font: 400 15px/1.5 var(--corps); }
.calc-exemple b{ font-weight: 600; }
.calc-exemple.is-modifie{ opacity: .55; }
.bascule-animations{ all: unset; cursor: pointer; font: 400 15px/1.4 var(--corps); color: var(--texte-2); text-decoration: underline; text-underline-offset: 0.2em; padding-block: 10px; }
.bascule-animations:hover{ color: var(--texte); }
.bascule-animations:focus-visible{ outline: 2px solid var(--focus, var(--sauge)); outline-offset: 3px; }
.maquette, figure.schema{ display: none; }
.section.claire, .demande, form{ color-scheme: light; accent-color: var(--foret); }
.liste-sources strong{ color: inherit; }
.section .corps li, .section .corps p{ overflow-wrap: anywhere; }
.section .corps{ min-width: 0; }
.menu a{ display: inline-flex; align-items: center; min-height: 44px; }
.ariane a{ display: inline-flex; align-items: center; min-height: 32px; }
li > a:not(.bouton), .vm-lien, .accueil-suite-gains a:not(.bouton){ display: inline-block; padding-block: 6px; }
.menu li > a{ padding-block: 0; }
#ne-fait-pas .corps, #prix .corps{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px) clamp(32px, 5vw, 72px); max-width: 1240px; margin-inline: 0; justify-items: start; }
#ne-fait-pas .grand, #prix .grand{ text-align: left; max-width: 44ch; margin: 0; }
#ne-fait-pas .corps > :not(.grand), #prix .corps > :not(.grand){ grid-column: 1 / -1; }
#ne-fait-pas .corps > .action, #prix .corps > .action{ text-align: left; }
#prix .corps > .note, #prix .corps > p:not(.grand){ margin-inline: 0; max-width: 62ch; }
@media (max-width: 800px){#ne-fait-pas .corps, #prix .corps{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px){.section .corps:has(> .questions){ margin-top: 32px; }
.corps > .questions{ margin-top: 0; }
}
#ne-fait-pas > .tete, #calcul > .tete, #prix > .tete, #questions > .tete{ justify-items: start; text-align: left; max-width: none; margin-inline: 0; }
#ne-fait-pas > .tete h2, #calcul > .tete h2, #prix > .tete h2, #questions > .tete h2, #chez-vous h2{ font-variation-settings: normal; }
#ne-fait-pas > .tete h2, #calcul > .tete h2, #prix > .tete h2, #questions > .tete h2{ font-weight: 400; font-size: clamp(1.875rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1.1; letter-spacing: -0.01em; max-width: 24ch; text-wrap: balance; }
#calcul > .corps, #questions > .corps{ margin-inline: 0; }
#calcul .corps > p, #calcul .corps > ul, #questions .corps > p{ margin-inline: 0; }
#questions .questions{ margin-inline: 0; max-width: 860px; }
#calcul .corps > *, #ne-fait-pas .corps > *, #prix .corps > *, #questions .corps > *{ margin-inline: 0; }
#calcul .corps > .action, #prix .corps > .action, #ne-fait-pas .corps > .action{ justify-self: start; text-align: left; width: auto; }
.commune{ text-align: left; }
.commune .contenu, .commune form{ justify-items: start; }
.commune .chiffres{ justify-content: flex-start; }
.commune .contenu h2{ font-weight: 400; font-size: clamp(1.875rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1.1; text-align: left; }
#ne-fait-pas .grand:first-child strong{ width: fit-content; padding-inline: 4px; background: linear-gradient(var(--sauge), var(--sauge)) no-repeat 0 82% / 100% 30%; }
@supports (animation-timeline: view()){@media (prefers-reduced-motion: no-preference){#ne-fait-pas .grand:first-child strong{ background-size: 0% 30%; animation: marque-tiree linear both; animation-timeline: view(); animation-range: entry 25% cover 35%; }
}
}
@keyframes marque-tiree{ to { background-size: 100% 30%; } }
.demande .piege{ position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.demande[aria-busy="true"] .bouton{ opacity: .7; cursor: progress; }
.demande-erreur{ max-width: 760px; margin: 22px auto 0; padding: 14px 18px; border: 2px solid var(--foret); background: #FFFFFF; color: var(--foret); font-weight: 600; }
.demande-erreur p{ margin: 0; }
.demande-merci:focus{ outline: none; }