/* Diag-Tertiaire, accueil. Piste C « franc-parler », combo pétrole clair retenu par Yannis le 11/10 ; la nuit reste une option manuelle (bouton du pied de page).
   Une seule source de couleurs : les variables --dt-* ci-dessous. Contrastes calculés (WCAG AA) dans controle/contrastes.py.
   Règle « aucun retour à la ligne inutile » : pas de text-wrap balance ou pretty, pas de max-width en ch ou em sur le texte ;
   un texte prend toute la largeur de sa colonne. Les deux derniers mots d'un bloc restent liés (build.py), pour éviter
   un mot seul en fin de bloc. Vérification à chaque version : controle/retours.py (doit afficher « Défauts : 0 »). */

@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-var.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Onest"; src: url("/fonts/onest-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Onest"; src: url("/fonts/onest-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* ========== Couleurs ========== */
:root {
  --dt-surface: #E4EDF0; --dt-creme: #F6F2EA; --dt-surface-alt: #D3E1E6; --dt-surface-alt-2: #BDD2D9; --dt-paper: #FFFFFF; --dt-erreur: #B3261E;
  --dt-ink: #0E3A47; --dt-ink-2: #3B5B64; --dt-ink-3: #4F666D;
  --dt-accent: #C2265D; --dt-action: #0E3A47; --dt-on-action: #FFFFFF; --dt-action-shadow: #C2265D; --dt-selected-2: #C9DCE2;
  --dt-band: #0E3A47; --dt-on-band: #FFFFFF; --dt-on-band-2: #C9DCE2; --dt-band-action: #FFFFFF; --dt-on-band-action: #0E3A47; --dt-band-action-shadow: #C2265D;
  --dt-you: #C2265D;
  --dt-encart: #D3E1E6; --dt-logo-fond: #0E3A47; --dt-logo-trait: #FFFFFF; --dt-logo-accent: #C2265D; --dt-carte-zone: #C2265D; --dt-carte-survol: #D9467A; --dt-on-zone: #FFFFFF;
  --dt-il-pap: #FFFFFF; --dt-il-pap2: #E2EDF0; --dt-il-cadre: #1F6F82; --dt-il-dedans: #0B2A33; --dt-il-chaud: #C2265D; --dt-il-vitre: #BFDCE3; --dt-il-encre: #0E3A47; --dt-shadow: #0E3A47;
  color-scheme: light;
}
/* Nuit : option manuelle (bouton du pied de page), posée par data-theme="dark" sur <html> */
[data-theme="dark"] {
  --dt-surface: #0E1F26; --dt-creme: var(--dt-surface); --dt-surface-alt: #1C3943; --dt-surface-alt-2: #23434F; --dt-paper: #16303A; --dt-erreur: #FFB4AB;
  --dt-ink: #F2ECE1; --dt-ink-2: #C9C1B4; --dt-ink-3: #A8A296;
  --dt-accent: #7CC3E6; --dt-action: #F2ECE1; --dt-on-action: #0E1F26; --dt-action-shadow: #7CC3E6; --dt-selected-2: #3E4A4F;
  --dt-band: #23434F; --dt-on-band: #F2ECE1; --dt-on-band-2: #D3CCC0; --dt-band-action: #F2ECE1; --dt-on-band-action: #0E1F26; --dt-band-action-shadow: #7CC3E6;
  --dt-you: #FF8DB3;
  --dt-encart: #23434F; --dt-logo-fond: #F2ECE1; --dt-logo-trait: #0E1F26; --dt-logo-accent: #E0457B; --dt-carte-zone: #C2265D; --dt-carte-survol: #D9467A;
  --dt-il-pap: #F2ECE1; --dt-il-pap2: #E2D9CA; --dt-il-cadre: #7CC3E6; --dt-il-dedans: #08151A; --dt-il-chaud: #FF8DB3; --dt-il-vitre: #2E5866; --dt-il-encre: #0E1F26; --dt-il-trait: #C9C1B4; --dt-il-ombre: #050C0F; --dt-shadow: #2E5866;
  color-scheme: dark;
}
/* Échelle énergie : réglementaire, identique dans tous les thèmes */
:root { --dt-dpe-a: #00A06D; --dt-dpe-b: #4FB948; --dt-dpe-c: #C9D200; --dt-dpe-d: #FFCB05; --dt-dpe-e: #F39200; --dt-dpe-f: #E84E0F; --dt-dpe-g: #C9220A; --dt-dpe-on: #0A1628; --dt-dpe-on-g: #FFFFFF; }

/* ========== Mesures ========== */
:root {
  --g: clamp(16px, 4vw, 48px);
  --max: 1296px;
  --sec: clamp(72px, 9vw, 128px);
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 24px; --esp-6: 32px; --esp-7: 48px; --esp-8: 64px; --esp-9: 96px;
  --r-control: 12px;
  --r-panel: 22px;
  /* Ombres papier découpé : un contour à l'encre et une ombre décalée sans flou (jamais d'ombre floue) */
  --ombre-decoupe: 0 0 0 2px var(--dt-ink), 6px 6px 0 var(--dt-shadow);
  --ombre-feuille: 8px 8px 0 var(--dt-shadow);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --display: "Bricolage Grotesque", "Onest", system-ui, sans-serif;
  --text: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ========== Base ========== */
* { box-sizing: border-box; }
html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
body { margin: 0; background: var(--dt-surface); color: var(--dt-ink); font: 400 17px/1.55 var(--text); font-variant-numeric: normal; -webkit-font-smoothing: antialiased; }
[data-theme="dark"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--dt-accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; margin: 0; letter-spacing: -0.03em; }
h2, h3 { scroll-margin-top: 24px; }
main [id] { scroll-margin-top: 96px; }
p { margin: 0; }
.nw { white-space: nowrap; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 60; background: var(--dt-ink); color: var(--dt-surface); padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }
.wrap, .top-in { max-width: calc(var(--max) + 2 * var(--g)); margin-left: auto; margin-right: auto; padding-left: var(--g); padding-right: var(--g); }

/* Illustrations papier découpé */
.f-pap { fill: var(--dt-il-pap); } .f-pap2 { fill: var(--dt-il-pap2); } .f-cadre { fill: var(--dt-il-cadre); } .f-dedans { fill: var(--dt-il-dedans); }
.f-chaud { fill: var(--dt-il-chaud); } .s-chaud { stroke: var(--dt-il-chaud); } .f-vitre { fill: var(--dt-il-vitre); } .f-encre { fill: var(--dt-il-encre); } .f-trait { fill: var(--dt-il-trait, var(--dt-il-encre)); } .s-pap { stroke: var(--dt-il-pap); } .s-encre { stroke: var(--dt-il-encre); }
.ombre-papier { flood-color: var(--dt-il-ombre, var(--dt-shadow)); flood-opacity: 0.22; }

/* ========== Boutons et liens ========== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; text-decoration: none; border-radius: 999px; font: 700 17px/1 var(--display); font-variation-settings: "opsz" 24; letter-spacing: -0.005em; background: var(--dt-action); color: var(--dt-on-action); box-shadow: 0 4px 0 var(--dt-action-shadow); transition: transform 140ms var(--ease), box-shadow 140ms var(--ease); white-space: nowrap; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--dt-action-shadow); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--dt-action-shadow); }
.btn svg { width: 22px; height: 22px; }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: 16px; }
.btn-lg { min-height: 62px; padding: 0 34px; font-size: 20px; }
.lien { color: var(--dt-ink); text-decoration: underline; text-decoration-color: var(--dt-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lien:hover { text-decoration-thickness: 3px; }

/* ========== En-tête ========== */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: var(--dt-surface); transition: box-shadow 200ms var(--ease); }
.top.colle { box-shadow: 0 2px 0 var(--dt-surface-alt-2); }
.top-in { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; }
.logo-symbole { width: 34px; height: 34px; flex: none; }
.mot { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -0.03em; font-variation-settings: "opsz" 32; white-space: nowrap; display: inline-flex; align-items: center; }
.mot i { display: inline-block; width: 0.42em; height: 0.2em; background: var(--dt-logo-accent); margin: 0.12em 0.06em 0; transform: rotate(-6deg); border-radius: 1px; }
.nav { margin-left: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.nav a, .deroule-btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 10px; text-decoration: none; font: 600 15px var(--text); color: var(--dt-ink); background: none; border: 0; cursor: pointer; }
.nav a:hover, .deroule-btn:hover, .deroule-btn[aria-expanded="true"] { background: var(--dt-surface-alt); }
.deroule { position: relative; }
.deroule-btn svg { width: 16px; height: 16px; transition: transform 180ms var(--ease); }
.deroule-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Entre 1260 et 1339 px, le menu complet et le bouton tiennent tout juste : liens un peu plus serrés (sinon 13 px de débordement) */
@media (min-width: 1260px) and (max-width: 1339px) { .nav a, .deroule-btn { padding: 0 8px; } }
.menu { position: absolute; right: 0; top: calc(100% + 10px); width: 380px; padding: 8px; border-radius: 18px; background: var(--dt-paper); box-shadow: var(--ombre-decoupe); display: grid; gap: 2px; }
.menu::before { content: ""; position: absolute; right: 34px; top: -8px; width: 14px; height: 14px; background: var(--dt-paper); border-left: 2px solid var(--dt-ink); border-top: 2px solid var(--dt-ink); transform: rotate(45deg); border-radius: 3px 0 0 0; }
.menu a { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; min-height: 60px; height: auto; white-space: normal; }
.menu a:hover, .menu a:focus-visible { background: var(--dt-surface-alt-2); box-shadow: inset 4px 0 0 var(--dt-accent); }
.menu b { display: block; font: 700 16px/1.2 var(--display); letter-spacing: -0.01em; }
.menu small { display: block; font: 400 14px/1.3 var(--text); color: var(--dt-ink-2); margin-top: 2px; }
.ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px 14px 11px 13px; background: var(--dt-surface-alt); color: var(--dt-ink); box-shadow: inset 0 0 0 1.5px var(--dt-surface-alt-2); }
.ico svg { width: 24px; height: 24px; }
.top .top-cta { transition: opacity 200ms var(--ease), visibility 0s linear 0s; }
.top .top-cta.cache { opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease), visibility 0s linear 200ms; }
.burger { display: none; width: 48px; height: 48px; border: 0; border-radius: 12px; background: var(--dt-surface-alt); color: var(--dt-ink); cursor: pointer; place-items: center; }
.burger svg { width: 26px; height: 26px; display: block; }
.burger .b-fermer, .burger[aria-expanded="true"] .b-ouvrir { display: none; }
.burger[aria-expanded="true"] .b-fermer { display: block; }
.menu-mobile { position: absolute; left: 0; right: 0; top: 100%; box-shadow: 0 8px 0 var(--dt-shadow); border-top: 2px solid var(--dt-surface-alt-2); padding: 8px var(--g) 20px; display: grid; gap: 2px; max-height: calc(100dvh - 72px); overflow-y: auto; background: var(--dt-surface); }
.menu-mobile a:not(.btn) { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 8px; border-radius: 12px; text-decoration: none; font: 700 19px var(--display); letter-spacing: -0.01em; }
.menu-mobile a:not(.btn):active { background: var(--dt-surface-alt); }
.menu-mobile .mm-titre { margin: 14px 8px 4px; font: 600 13px var(--text); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dt-ink-2); }
.menu-mobile .mm-pro { font: 600 17px var(--text); }
.menu-mobile .mm-pro svg { width: 22px; height: 22px; }
.menu-mobile .btn { margin-top: 14px; }

/* ========== Héros ========== */
.chapo { font-size: 20px; line-height: 1.45; color: var(--dt-ink-2); }
.start { margin-top: 24px; min-width: 0; }
.madlib { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 12px; font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.1vw, 30px); letter-spacing: -0.02em; font-variation-settings: "opsz" 48; }
.blank { position: relative; max-width: 100%; display: inline-flex; align-items: center; gap: 4px; min-height: 56px; padding: 0 10px; background: var(--dt-surface-alt); border-bottom: 4px solid var(--dt-ink); border-radius: var(--r-control) var(--r-control) 0 0; cursor: text; }
.blank:has(input:placeholder-shown), .blank:has(option[value=""]:checked) { border-bottom-style: dashed; }
.blank input { border: 0; background: transparent; font: inherit; color: var(--dt-ink); outline: none; padding: 0; min-width: 0; align-self: stretch; }
.blank input::placeholder { color: var(--dt-ink-2); font-weight: 500; opacity: 1; }
.liste { cursor: pointer; padding: 0; }
.liste[data-vide] { border-bottom-style: dashed; }
.liste-btn { display: inline-flex; align-items: center; gap: 8px; min-height: inherit; align-self: stretch; padding: 0 12px 0 10px; outline: none; border-radius: inherit; user-select: none; }
.liste[data-vide] .liste-val { color: var(--dt-ink-2); font-weight: 500; }
.liste-btn svg { transition: transform 180ms var(--ease); }
.liste-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.blank-surf input { width: 4.6em; text-align: center; }
.liste-btn > svg { width: 0.8em; height: 0.8em; flex: none; }
.liste-btn > svg path { stroke-width: 2.4; }
.blank:focus-within { border-bottom-color: var(--dt-accent); border-bottom-style: solid; outline: 3px solid var(--dt-accent); outline-offset: 3px; }
.go { margin-top: 24px; }
.libre { margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--dt-ink-2); }
.rassure { margin-top: 18px; font-size: 17px; font-weight: 600; }
@media (max-width: 1259px) { .menu-mobile .btn { justify-self: start; min-width: 300px; } }
svg.papier { display: block; width: 100%; max-width: 290px; height: auto; margin-left: auto; }
/* Colonne large : le dessin grandit avec la colonne */
@media (min-width: 1260px) {
  svg.papier { max-width: min(340px, calc((100% - 200px) * 1.07)); }
}
.t-qui { font-size: 14px; color: #3F5F68; padding-bottom: 10px; border-bottom: 2px dashed #BDD2D9; }
.t-classes { margin-top: 12px; display: flex; align-items: flex-start; gap: 8px 10px; flex-wrap: wrap; }
.cl-bloc { display: grid; justify-items: center; gap: 3px; }
.cl-bloc small { font: 600 12px/1.2 var(--text); color: #3F5F68; }
.cl { display: grid; place-items: center; min-width: 44px; height: 42px; padding: 0 9px; border-radius: 9px 11px 8px 10px; font: 800 24px/1 var(--display); letter-spacing: -0.02em; color: var(--t, #0A1628); background: var(--c, #F39200); box-shadow: 2px 2px 0 rgba(14, 58, 71, 0.3); white-space: nowrap; }
.cl.duo { font-size: 17px; }
.cl-fleche { width: 30px; height: 42px; flex: none; }
.cl-fleche path { fill: none; stroke: #0E3A47; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cl-gain { align-self: center; margin-left: auto; padding: 6px 11px; border-radius: 999px; background: #C2265D; color: #FFFFFF; font: 700 14px/1.1 var(--display); transform: rotate(3deg); white-space: nowrap; }
.t-hors { margin-top: 14px; font-size: 15px; color: #3F5F68; }
.t-qui span:first-child { font-weight: 600; color: #0E3A47; }
.t-gros { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.t-gros strong { font: 800 clamp(34px, 3vw, 42px)/1 var(--display); letter-spacing: -0.035em; color: #0E3A47; white-space: nowrap; }
.t-gros span { font: 700 18px/1.2 var(--display); color: #C2265D; }
.t-ligne { margin-top: 10px; font-size: 15px; line-height: 1.45; color: #3F5F68; }
.t-debut { margin-top: 10px; padding-top: 10px; border-top: 2px dashed #BDD2D9; font-size: 15px; line-height: 1.45; color: #3F5F68; }
.t-debut b { color: #C2265D; font-family: var(--display); font-size: 16px; white-space: nowrap; }
.t-ligne b { color: #0E3A47; font-family: var(--display); font-size: 16px; white-space: nowrap; }

/* Personnages des conseillers en papier découpé (en attendant de vraies photos) : visibles au repos, ils saluent en entrant à l'écran */
.perso { overflow: visible; }
.perso .tete { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 300ms var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .perso.vu { animation: salut 900ms var(--ease) both; animation-delay: calc(var(--i, 0) * 140ms); }
  .perso.vu .tete { animation: hoche 1100ms var(--ease) both; animation-delay: calc(var(--i, 0) * 140ms + 300ms); }
  .perso:hover .tete { transform: rotate(-7deg); }
  @keyframes salut { 0% { transform: translateY(10px) rotate(-4deg) scale(0.96); } 60% { transform: translateY(-3px) rotate(1deg); } 100% { transform: none; } }
  @keyframes hoche { 0%, 100% { transform: none; } 35% { transform: rotate(-8deg); } 65% { transform: rotate(4deg); } }
}


/* ========== Sections ========== */
.sec { padding: var(--sec) 0; }
.sec-tete h2, .h2 { font-variation-settings: "opsz" 72; font-size: clamp(34px, 4.4vw, 60px); line-height: 0.98; letter-spacing: -0.028em; }
.sec-tete { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.sec-tete > * { grid-column: 1 / -1; }
.sec-tete > p:not(.sur-titre) { grid-column: 1; }
.sec-tete p { margin-top: 18px; font-size: 19px; color: var(--dt-ink-2); }
p.sur-titre, h1.sur-titre, .sec-tete p.sur-titre, .reseau-txt > p.sur-titre { display: block; margin: 0 0 16px; font: 700 15px/1.2 var(--display); letter-spacing: 0.01em; color: var(--dt-ink); max-width: none; }
p.sur-titre, h1.sur-titre { position: relative; padding-left: 32px; }
main .sec p.sur-titre::before { background: var(--dt-ink-3); }
p.sur-titre::before, h1.sur-titre::before { content: ""; position: absolute; left: 0; top: 0.32em; width: 22px; height: 10px; border-radius: 2px; background: var(--dt-logo-accent); transform: rotate(-6deg); }
.filet { border: 0; border-top: 3px solid var(--dt-ink); margin: 0; }

/* Comment ça marche : une liste à lire, un aperçu à regarder */
.demo { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; align-items: center; margin-top: 48px; }
.etapes { list-style: none; margin: 0; padding: 0; }
.etapes li { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; align-items: start; padding: 14px 0; }
.etapes li + li { border-top: 2px solid var(--dt-surface-alt-2); }
.etapes .num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px 14px 11px 15px; background: var(--dt-surface-alt); font: 800 20px/1 var(--display); }
.etapes .fin .num { background: var(--dt-ink); color: var(--dt-surface); }
.etapes .num svg { width: 26px; height: 26px; }
.etapes h3 { font-size: 21px; line-height: 1.2; letter-spacing: -0.015em; padding-top: 2px; }
.etapes p { font-size: 16px; color: var(--dt-ink-2); margin-top: 4px; }

/* Le résultat */
/* Choix de l'activité de l'exemple : le rapport détaillé suit l'activité (app.js) */
.dpe-hors { margin-top: 12px; padding: 16px 18px; border-radius: 16px; background: var(--dt-encart); font-size: 16px; }
.jauge-zone h3, .dpe-zone h3 { font-size: 21px; letter-spacing: -0.015em; }
.jauge { display: block; width: 100%; max-width: 420px; height: auto; margin-top: 10px; overflow: visible; }
.j-piste { fill: none; stroke: var(--dt-surface-alt-2); stroke-width: 30; stroke-linecap: round; }
.j-valeur { fill: none; stroke: var(--dt-il-chaud); stroke-width: 30; stroke-linecap: round; }
.j-med { stroke: var(--dt-ink); stroke-width: 3; stroke-dasharray: 5 4; }
.j-med-txt { font: 600 15px var(--text); fill: var(--dt-ink); }
.j-repere { fill: var(--dt-paper); stroke: var(--dt-ink); stroke-width: 4; }
.j-gros { font-variant-numeric: tabular-nums; font: 800 56px var(--display); letter-spacing: -0.04em; fill: var(--dt-ink); }
.j-unite { font: 600 15px var(--text); fill: var(--dt-ink-2); }
.j-borne { font: 600 13px var(--text); fill: var(--dt-ink-2); }
.j-legende { display: flex; align-items: center; gap: 10px; margin-top: 2px; font-size: 15px; color: var(--dt-ink-2); }
.j-tiret { flex: none; width: 3px; height: 24px; background: repeating-linear-gradient(var(--dt-ink) 0 5px, transparent 5px 9px); }
.compare-txt { margin-top: 10px; font-size: 16px; color: var(--dt-ink-2); }
/* Animation : l'arc se remplit et le repère glisse jusqu'à la valeur (app.js pose « pret » puis « vu ») */
.j-aiguille { transform-box: view-box; transform-origin: 160px 172px; }
.jauge.pret .j-valeur { stroke-dasharray: 100 200; stroke-dashoffset: 101; }
.jauge.pret .j-aiguille { transform: rotate(calc(var(--a) * -1)); }
.jauge.pret.vu .j-valeur { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(0.25, 0.8, 0.25, 1); }
.jauge.pret.vu .j-aiguille { transform: none; transition: transform 1.6s cubic-bezier(0.25, 0.8, 0.25, 1); }
.dpe-zone.pret .onglet { opacity: 0; transform: translateX(18px); }
.dpe-zone.pret.vu .onglet { opacity: 1; transform: none; transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); }
.dpe-zone.pret.vu .ici .onglet { transition-delay: 0.3s; }
.dpe-zone.pret.vu .apres .onglet { transition-delay: 1.1s; }
.dpe { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.dpe li { display: flex; align-items: center; gap: 12px; }
.dpe .barre { flex: none; width: calc(var(--l) * var(--k, 1)); height: 30px; display: flex; align-items: center; padding-left: 12px; font: 800 17px var(--display); color: var(--t, var(--dt-dpe-on)); background: var(--c); border-radius: 4px 0 0 4px; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); filter: drop-shadow(2px 2px 0 rgba(14, 58, 71, .28)); }
.dpe li:nth-child(odd) .barre { transform: rotate(-0.6deg); } .dpe li:nth-child(even) .barre { transform: rotate(0.5deg); }
.dpe .ici .barre { height: 38px; font-size: 21px; transform: translateX(6px) rotate(-1.2deg); }
.dpe .onglet { white-space: nowrap; display: inline-flex; align-items: center; padding: 5px 10px 5px 14px; font: 700 14px var(--display); clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%); }
.dpe .ici .onglet { background: var(--dt-ink); color: var(--dt-surface); margin-left: 6px; }
.dpe .apres .onglet { background: var(--dt-surface-alt-2); color: var(--dt-ink); }
.dpe-txt { margin-top: 12px; font-size: 15px; color: var(--dt-ink-2); }
.actions { grid-column: 1 / -1; margin-top: 38px; }
.actions h3 { font-size: 21px; letter-spacing: -0.015em; }
.t-actions { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 16px; }
.t-actions th { text-align: left; font-weight: 600; font-size: 14px; color: var(--dt-ink-2); padding: 0 12px 10px 0; }
.t-actions td { padding: 14px 12px 14px 0; border-top: 1px solid var(--dt-surface-alt-2); vertical-align: middle; }
/* Un trait d'encre en tête et au total seulement : l'œil va à l'économie, en couleur, et non aux traits */
.t-actions tbody tr:first-child td, .t-actions tfoot td { border-top: 3px solid var(--dt-ink); }
.t-actions td:first-child { font-weight: 600; }
.aide-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--dt-encart); font: 600 14px var(--text); white-space: nowrap; box-shadow: inset 0 0 0 1.5px var(--dt-ink-3); }
.aide-chip.sans { background: none; box-shadow: none; padding-left: 0; color: var(--dt-ink-2); font-weight: 400; white-space: normal; }
/* Projection du financement : la facture d'aujourd'hui sert d'étalon (filet en pointillé), le prêt s'ajoute à la facture réduite */
.projection { margin-top: 26px; padding: 20px 22px 18px; border-radius: 18px; background: var(--dt-encart); }
.pj-titre { font: 800 20px/1.2 var(--display); letter-spacing: -0.01em; }
.pj-titre span { display: block; margin-top: 4px; font: 400 16px/1.45 var(--text); letter-spacing: 0; color: var(--dt-ink-2); }
.pj-lignes { position: relative; margin-top: 16px; display: grid; gap: 10px; }
.pj-ligne { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; align-items: center; }
.pj-lib { font-weight: 600; font-size: 15px; line-height: 1.2; }
.pj-lib small { display: block; font-weight: 400; font-size: 13px; color: var(--dt-ink-2); }
/* Les montants en clair à côté du libellé : seulement quand les barres sont trop étroites pour porter leurs chiffres (téléphone) */
.pj-val { display: none; }
.pj-barre { position: relative; display: flex; align-items: center; min-height: 40px; }
.pj-barre::after { content: ""; position: absolute; top: -6px; bottom: -6px; left: 100%; border-left: 2px dashed var(--dt-ink); }
.pj-barre i { display: flex; align-items: center; justify-content: flex-end; width: var(--v); min-height: 40px; padding: 0 10px; font: 700 15px/1 var(--display); font-style: normal; white-space: nowrap; }
.pj-facture { background: var(--dt-paper); color: var(--dt-ink); border-radius: 10px 0 0 10px; box-shadow: inset 0 0 0 2px var(--dt-ink); }
.pj-barre .pj-facture:last-child { border-radius: 10px; }
.pj-pret { background: var(--dt-ink); color: var(--dt-surface); border-radius: 0 10px 10px 0; }
.pj-barre .pj-eco { justify-content: center; border-radius: 0 10px 10px 0; box-shadow: inset 0 0 0 2px var(--dt-accent); color: var(--dt-accent); background: repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--dt-accent) 14%, transparent) 6px 12px); }
.pj-etalon { margin-top: 12px; display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; font-size: 13px; line-height: 1.6; color: var(--dt-ink-2); }
.pj-legende { display: flex; flex-wrap: wrap; gap: 2px 16px; }
.pj-legende > span { white-space: nowrap; }
.pj-cle { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border-radius: 3px; }
.pj-cle-f { background: var(--dt-paper); box-shadow: inset 0 0 0 2px var(--dt-ink); }
.pj-cle-p { background: var(--dt-ink); }
.pj-cle-t { width: 0; height: 14px; border-left: 2px dashed var(--dt-ink); border-radius: 0; vertical-align: -2px; }
.pj-note { margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--dt-ink-2); }
@media (max-width: 560px) {
  .projection { padding: 18px 16px 16px; }
  .pj-ligne, .pj-etalon { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pj-etalon > span:first-child { display: none; }
  .pj-lib small { display: inline; margin-left: 4px; }
  .pj-barre i { padding: 0 8px; font-size: 14px; }
  /* Sur téléphone, un segment de 15 % ne loge pas « 1 600 € » : les chiffres sortent des barres et passent sur la ligne du
     libellé, alignés à droite ; les barres gardent leurs longueurs et leurs couleurs, sans texte. */
  .pj-lib { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
  .pj-lib small { margin-left: 0; }
  .pj-val { display: block; margin-left: auto; font: 700 15px/1.2 var(--display); font-variant-numeric: tabular-nums; text-align: right; }
  .pj-barre, .pj-barre i { min-height: 28px; }
  .pj-barre i { font-size: 0; padding: 0; }
}
.t-actions .n { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; font-family: var(--display); font-weight: 700; font-size: 18px; }
.t-actions th.n { font-family: var(--text); font-size: 14px; font-weight: 600; }
.t-actions td.n:not(.eco) { font-family: var(--text); font-weight: 600; font-size: 16px; color: var(--dt-ink-2); }
.t-actions .eco { color: var(--dt-accent); }
.t-actions td.eco { font-size: 20px; }
.t-actions .autres td { font-weight: 400; font-size: 15px; color: var(--dt-ink-2); border-top-style: dashed; }
.t-actions tfoot td { padding-top: 18px; }
.t-actions tfoot strong { display: block; font: 800 18px/1.35 var(--display); letter-spacing: -0.005em; }
.t-actions tfoot span { display: block; margin-top: 6px; font-size: 14px; color: var(--dt-ink-2); }
.r-pied { grid-column: 1 / -1; margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.r-pied p { font-size: 15px; color: var(--dt-ink-2); }

/* On vous aide à décider */
.decide { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 72px; margin-top: 52px; align-items: start; }
.suite { list-style: none; margin: 0; padding: 0; position: relative; }
.suite li { display: grid; grid-template-columns: 112px 1fr; column-gap: 24px; align-items: center; padding: 18px 0; position: relative; }
.suite li + li { border-top: 3px dashed var(--dt-ink-3); }
.suite .objet { width: 112px; height: 84px; }
/* Une vraie photo à la place d'un objet (réseau, étape 1) : même emprise, détourée en rond */
/* Photo de personne dans un rond (Réseau, article du blog) */
.photo-rond { object-fit: cover; object-position: 50% 15%; border-radius: 50%; background: var(--dt-il-vitre); }
.suite .nrp-photo { justify-self: center; width: 84px; height: 84px; }
.suite h3 { font-size: clamp(21px, 2vw, 26px); line-height: 1.15; letter-spacing: -0.02em; }
.suite p { margin-top: 6px; color: var(--dt-ink-2); }
.conseiller { position: sticky; top: 24px; }
.duo { position: relative; display: flex; justify-content: center; padding: 18px 0 8px; }
.duo .perso { width: 46%; max-width: 190px; height: auto; }
.duo .perso + .perso { margin-left: -6%; margin-top: 34px; }
.bulle { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--dt-paper); box-shadow: 0 0 0 2px var(--dt-ink), 3px 3px 0 var(--dt-shadow); font: 700 14px var(--display); }
.bulle svg { width: 20px; height: 20px; color: var(--dt-accent); }
.b-visio { left: 0; top: 4px; transform: rotate(-4deg); }
.b-tel { right: 0; bottom: 20px; transform: rotate(3deg); }
.duo-txt { margin-top: 18px; font-size: 16px; }
.duo-txt strong { display: block; font: 800 22px/1.15 var(--display); letter-spacing: -0.015em; margin-bottom: 4px; }
.lien-equipe { display: inline-block; margin-top: 14px; padding: 11px 0; font-weight: 600; }
/* Le lien vers l'agenda en ligne (lot L10) : discret, à côté de la demande d'échange, jamais à sa place. */
.rdv-agenda, .sec-tete p.rdv-agenda { display: block; margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--dt-ink-2); }
.rdv-agenda a.lien { display: inline; padding: 0; font-weight: 600; white-space: normal; }

/* Réseau local : la carte en papier découpé */
.reseau { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.reseau-txt > p { margin-top: 18px; font-size: 19px; color: var(--dt-ink-2); }
/* Lien discret vers la page des entreprises de travaux, après le panneau */
.reseau-pro { margin-top: var(--esp-5); }
.reseau-pro p { margin-top: 14px; font-size: 15px; color: var(--dt-ink-2); }
.panneau { margin-top: 26px; padding: 20px; border-radius: var(--r-panel); background: var(--dt-paper); box-shadow: var(--ombre-decoupe); }
.pz-titre { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
@media (max-width: 1100px) { .pz-nom { min-height: 2.2em; } }
.pz-nom { font: 800 24px/1.1 var(--display); letter-spacing: -0.02em; }
.pz-etat { padding: 4px 10px; border-radius: 999px; font: 600 13px var(--text); background: var(--dt-encart); color: var(--dt-ink); }
.pz-etat.ok { background: var(--dt-carte-zone); color: var(--dt-on-zone); }
.panneau { display: grid; }
.pz-titre { grid-row: 1; }
.pz-metiers, .pz-vide { grid-row: 2; grid-column: 1; align-self: start; }
.pz-partout { grid-row: 3; }
.inactif { visibility: hidden; }
.pz-metiers { margin-top: 14px; }
/* L'équipe du réseau : des portraits qui se chevauchent, puis tous les métiers en pastilles (une seule ligne de lecture) */
.pz-liste { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pz-liste li { padding: 5px 11px; border-radius: 999px; background: var(--dt-encart); font: 600 14px/1.25 var(--text); }
.pz-vide { margin-top: 14px; display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; font-size: 15px; color: var(--dt-ink-2); }
.pz-vide .perso { width: 46px; height: 46px; }
.pz-vide b { display: block; color: var(--dt-ink); font-weight: 600; }
.pz-partout { margin-top: 14px; padding-top: 12px; border-top: 2px dashed var(--dt-surface-alt-2); font-size: 14px; color: var(--dt-ink-2); }
.carte { position: relative; margin: 0; max-width: 620px; justify-self: end; width: 100%; }
.carte-svg { display: block; width: 100%; height: auto; overflow: visible; }
.reg { fill: var(--dt-il-pap); stroke: var(--dt-surface); stroke-width: 2; stroke-linejoin: round; }
.reg { transition: transform 180ms var(--ease), fill 180ms var(--ease); cursor: pointer; outline: none; }
.reg.couverte { fill: var(--dt-carte-zone); }
.reg.survol { fill: var(--dt-surface-alt-2); }
.reg.couverte.survol, .reg.couverte:focus-visible { fill: var(--dt-carte-survol); }
/* Le Gard est couvert au même titre que l'Occitanie : même couleur, seulement son contour */
.dep { fill: none; stroke: var(--dt-surface-alt-2); stroke-width: 1.2; stroke-dasharray: 3 3; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.dep.couverte { stroke: var(--dt-on-zone); stroke-width: 1.4; opacity: 0.8; }
.reg.couverte:focus-visible { stroke: var(--dt-on-action); stroke-width: 3; }
.carte-nom { font: 800 20px var(--display); letter-spacing: -0.01em; fill: var(--dt-ink); paint-order: stroke; stroke: var(--dt-surface); stroke-width: 5px; stroke-linejoin: round; }
.carte-nom.dedans { fill: var(--dt-on-zone); stroke: none; pointer-events: none; }

/* Ce que ça vous coûte : un reçu en papier, total 0 €. Couleurs fixes à l'intérieur (papier clair, de jour comme de nuit) */
.paie { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; margin-top: 44px; align-items: start; }
/* Le reçu reste incliné mais net : son ombre est une feuille de même découpe glissée dessous (::before), et non un filtre
   posé sur un bloc tourné, qui floutait le texte. */
.recu { --dt-ink: #0E3A47; --dt-ink-2: #3F5F68; position: relative; transform: rotate(-1deg);
  --dent: 10px; --recu-decoupe: polygon(0 0, 100% 0, 100% calc(100% - var(--dent)), 95% 100%, 90% calc(100% - var(--dent)), 85% 100%, 80% calc(100% - var(--dent)), 75% 100%, 70% calc(100% - var(--dent)), 65% 100%, 60% calc(100% - var(--dent)), 55% 100%, 50% calc(100% - var(--dent)), 45% 100%, 40% calc(100% - var(--dent)), 35% 100%, 30% calc(100% - var(--dent)), 25% 100%, 20% calc(100% - var(--dent)), 15% 100%, 10% calc(100% - var(--dent)), 5% 100%, 0 calc(100% - var(--dent))); }
.recu::before { content: ""; position: absolute; inset: 0; transform: translate(6px, 6px); background: var(--dt-shadow); clip-path: var(--recu-decoupe); }
.recu-papier { background: var(--dt-il-pap); color: var(--dt-ink); padding: 26px clamp(20px, 3vw, 32px) 40px;
  position: relative; clip-path: var(--recu-decoupe); }
.recu-tete { font: 800 14px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; text-align: center; padding-bottom: 14px; border-bottom: 2px dashed #BDD2D9; }
.registre { margin: 0; }
.registre div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: baseline; padding: 13px 0; border-bottom: 2px dotted #BDD2D9; }
.registre dt { font-size: 17px; }
.registre dd { font-variant-numeric: tabular-nums; margin: 0; text-align: right; font: 800 20px/1.2 var(--display); letter-spacing: -0.01em; white-space: nowrap; }
.registre-coches div { align-items: center; }
.registre-coches dd svg { display: block; width: 26px; height: 26px; color: var(--dt-ink); }
.recu-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 18px; font: 800 20px/1.1 var(--display); letter-spacing: -0.01em; }
.recu-total strong { font-size: clamp(64px, 7vw, 96px); line-height: 0.85; letter-spacing: -0.05em; color: #C2265D; }
.travaux { padding: 22px 24px; border-radius: var(--r-panel); box-shadow: inset 0 0 0 3px var(--dt-ink); font-size: 17px; }
.travaux strong { display: block; font: 800 22px/1.15 var(--display); letter-spacing: -0.015em; margin-bottom: 6px; }
.finance { margin-top: 20px; padding: 22px 24px; border-radius: var(--r-panel); background: var(--dt-surface-alt); font-size: 17px; }
.finance strong { font-family: var(--display); font-size: 20px; letter-spacing: -0.01em; display: block; margin-bottom: 6px; }
.finance p + p { margin-top: 10px; color: var(--dt-ink-2); }

/* Page Équipe */
.equipe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.equipe-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 44px; }
.equipe-2 + .equipe-rejoindre { margin-top: var(--esp-7); }
.membre { padding: 0; }
.membre h2, .membre h3 { margin-top: 18px; font-size: 22px; line-height: 1.15; letter-spacing: -0.015em; }
.membre p { margin-top: 8px; font-size: 16px; color: var(--dt-ink-2); }
/* Mission, l'équipe : nous rejoindre, un encart à trait avec le bouton à droite */
.equipe-rejoindre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-4) var(--esp-6); padding: var(--esp-6); }
.equipe-rejoindre > * + * { margin-top: 0; }
.equipe-rejoindre h3 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -0.02em; }
.equipe-rejoindre p { margin-top: var(--esp-2); color: var(--dt-ink-2); }
.portrait-dessin, .portrait-photo { height: 190px; display: flex; align-items: flex-end; justify-content: center; border-bottom: 3px solid var(--dt-ink); }
.portrait-dessin .perso { width: 176px; height: 176px; }
.portrait-dessin .objet { width: 190px; height: auto; margin-bottom: 12px; }
.portrait-photo { position: relative; }
.portrait-photo::before { content: ""; position: absolute; bottom: 0; left: 50%; width: 176px; height: 150px; transform: translateX(-50%) rotate(-3deg); border-radius: 46% 54% 48% 52%; background: var(--dt-il-vitre); }
.portrait-photo img { position: relative; width: 196px; height: auto; transform: rotate(2deg); clip-path: inset(0 0 0 0 round 0 0 46% 46% / 0 0 30% 30%); }
.bic { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--dt-ink-2); }
.bic img { height: 40px; width: auto; background: #FFFFFF; padding: 4px 6px; border-radius: 6px; flex: none; }
.bic-logos a { display: flex; align-items: center; min-height: 44px; flex: none; border-radius: 6px; }
.pied .bic { margin-top: 18px; font-size: 13px; flex-wrap: wrap; }
.bic-logos { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; max-width: 100%; }
/* En attente du logo officiel : le nom en toutes lettres, sur le même cartouche blanc que le logo du BIC */

/* Questions */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.faq-tete p { margin-top: 18px; font-size: 17px; color: var(--dt-ink-2); }
.faq details { border-top: 3px solid var(--dt-ink); }
.faq details:last-of-type { border-bottom: 3px solid var(--dt-ink); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; min-height: 44px; font: 700 20px/1.25 var(--display); letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:active { color: var(--dt-ink-2); }
.faq summary svg { width: 26px; height: 26px; flex: none; transition: transform 200ms var(--ease); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { padding: 0 48px 22px 0; color: var(--dt-ink-2); }

/* Appel final */
.final { text-align: center; }
.sec.final { background: var(--dt-band); color: var(--dt-on-band); padding-top: var(--sec) !important; }
.final .btn { background: var(--dt-band-action); color: var(--dt-on-band-action); box-shadow: 0 4px 0 var(--dt-band-action-shadow); }
.final .btn:hover { box-shadow: 0 6px 0 var(--dt-band-action-shadow); }
.final .lien { color: var(--dt-on-band); }
.final h2 { font-variation-settings: "opsz" 96; font-size: clamp(38px, 5.4vw, 76px); line-height: 0.96; letter-spacing: -0.032em; margin: 0 auto; }
.final .btn { margin-top: 36px; }
.final p { margin: 16px auto 0; font-size: 15px; color: var(--dt-on-band-2); }

/* Pied de page */
.pied { border-top: 3px solid var(--dt-ink); padding: 56px 0 40px; font-size: 15px; }
.pied-grille { display: grid; grid-template-columns: minmax(0, 4fr) repeat(4, minmax(0, 2fr)); gap: 32px; }
.pied h3 { font: 700 16px var(--display); letter-spacing: -0.005em; margin-bottom: 10px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li a { display: inline-flex; min-height: 44px; align-items: center; line-height: 1.25; padding: 4px 0; text-decoration: none; color: var(--dt-ink-2); }
.pied li a:hover { color: var(--dt-ink); text-decoration: underline; text-decoration-color: var(--dt-accent); text-underline-offset: 4px; }
/* « Gestion des cookies » : un bouton (il rouvre le panneau de cookie-consent.js), dessiné comme les liens du pied */
.pied li .pied-lien { display: inline-flex; min-height: 44px; align-items: center; line-height: 1.25; padding: 4px 0; border: 0; background: none; font: inherit; color: var(--dt-ink-2); cursor: pointer; text-align: left; }
.pied li .pied-lien:hover { color: var(--dt-ink); text-decoration: underline; text-decoration-color: var(--dt-accent); text-underline-offset: 4px; }
.pied .marque p { margin-top: 10px; color: var(--dt-ink-2); }
.pied-bas { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 48px; margin-top: 40px; color: var(--dt-ink-2); font-size: 14px; }
@media (max-width: 760px) { .pied-bas { grid-template-columns: minmax(0, 1fr); justify-items: start; } }
.theme-btn { font: 600 14px var(--text); color: var(--dt-ink); background: var(--dt-surface-alt); border: 0; border-radius: 999px; min-height: 44px; padding: 0 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.theme-btn svg { width: 18px; height: 18px; }

/* ========== Téléphone ========== */
@media (max-width: 760px) {
  .top-in { gap: 10px; min-height: 64px; }
  .mot { font-size: 21px; }
  .logo-symbole { width: 30px; height: 30px; }
  .top .top-cta { margin-left: auto; }
  .top .top-cta.cache { display: none; }
  .top:has(.top-cta:not(.cache)):not(:has(.menu-mobile:not([hidden]))) .mot { display: none; }
  .top:has(.menu-mobile:not([hidden])) .top-cta { display: none; }
  .burger { margin-left: auto; }
  .top .top-cta:not(.cache) + .burger { margin-left: 0; }
  /* Menu ouvert : le bouton du haut est masque, le burger (devenu « fermer ») revient au bord droit. Meme specificite que
     la regle precedente : elle doit venir apres (avant le 2026-10-14, le bouton de fermeture collait au logo). */
  .top:has(.menu-mobile:not([hidden])) .burger { margin-left: auto; }
  .chapo { order: 1; font-size: 16px; }
  .start { order: 2; margin-top: 16px; }
  svg.papier { display: none; }
  .madlib { font-size: 22px; gap: 6px 8px; }
  .blank { min-height: 50px; padding: 0 8px; }
  .blank-surf input { width: 5.1em; }
  .go .btn { width: 100%; }
  .btn-lg { padding: 10px 22px; font-size: 18px; white-space: normal; line-height: 1.15; text-align: center; }
  .top .cta-plus { display: none; }
  .rassure { font-size: 14px; }

  .sec-tete p { font-size: 17px; }
  .sec-tete { grid-template-columns: minmax(0, 1fr); }
  .demo { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; }
  .etapes li { grid-template-columns: 44px 1fr; column-gap: 12px; padding: 12px 0; }
  .etapes .num { width: 40px; height: 40px; font-size: 18px; }
  .etapes h3 { font-size: 18px; }
  .etapes p { font-size: 15px; }

  .dpe-zone { margin-top: 28px; }
  .t-actions tr { grid-template-columns: 1fr 1fr; }
  .t-actions thead { display: none; }
  .t-actions, .t-actions tbody, .t-actions tr, .t-actions td, .t-actions tfoot { display: block; }
  .t-actions tr { border-top: 1px solid var(--dt-surface-alt-2); padding: 12px 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px 10px; }
  .t-actions td, .t-actions tbody tr:first-child td, .t-actions tfoot td { border: 0; padding: 0; }
  .t-actions td:first-child { grid-column: 1 / -1; font-size: 17px; }
  .t-actions td.n { text-align: left; font-size: 17px; white-space: normal; }
  .t-actions td.n::before { content: attr(data-l); display: block; font: 400 13px var(--text); color: var(--dt-ink-2); }
  .t-actions tbody tr:first-child, .t-actions tfoot tr { border-top: 3px solid var(--dt-ink); }
  .t-actions tfoot tr { grid-template-columns: 1fr; }

  .decide { grid-template-columns: 1fr; gap: 40px; margin-top: 32px; }
  .suite li { grid-template-columns: 76px 1fr; column-gap: 14px; align-items: start; }
  .suite .objet { width: 76px; height: 57px; }
  .suite .nrp-photo { width: 57px; height: 57px; }
  .conseiller { position: relative; top: auto; max-width: 380px; }
  .liste { position: static; padding: 0; }
  .madlib { position: relative; }
  .pied li a { min-height: 44px; }
  .paie { grid-template-columns: 1fr; gap: 32px; margin-top: 28px; }
  .registre dt { font-size: 16px; }
  .recu { transform: none; }
  .faq { grid-template-columns: 1fr; gap: 24px; }
  .faq summary { font-size: 18px; }
  .faq details p { padding-right: 0; }
  .final { text-align: left; }
  .final h2 { margin: 0; }
  .final .btn { width: 100%; }
  .final p { margin-left: 0; }
  .pied-grille { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .pied .marque { grid-column: 1 / -1; }
}
@media (max-width: 999px) {
  .equipe { grid-template-columns: 1fr; gap: 20px; }
  .membre { display: grid; grid-template-columns: 190px minmax(0, 1fr); column-gap: 24px; align-items: center; }
  .membre > div { grid-row: span 2; }
  .membre h2, .membre h3 { margin-top: 0; align-self: end; }
  .membre p { align-self: start; }
}
@media (max-width: 560px) {
  .membre { grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; }
  .portrait-dessin, .portrait-photo { height: 104px; }
  .portrait-dessin .perso { width: 96px; height: 96px; }
  .portrait-dessin .objet { width: 112px; margin-bottom: 8px; }
  .portrait-photo img { width: 104px; } .portrait-photo::before { width: 88px; height: 76px; }
  .membre h2, .membre h3 { font-size: 20px; }
}
@media (max-width: 1023px) {
  .reseau { grid-template-columns: 1fr; gap: 0; }
  .carte { margin-top: var(--esp-6); }
  .reseau-txt { display: contents; }
  .reseau-txt > h2, .reseau-txt > p { order: 1; }
  .carte { order: 2; justify-self: center; }
  .panneau { order: 3; margin-top: var(--esp-5); max-width: none; }
  .reseau-pro { order: 4; }
  .carte-nom { font-size: 26px; stroke-width: 6px; }
}
@media (max-width: 560px) {
  .dpe { --k: 0.7; }
  .dpe .onglet { font-size: 13px; padding: 4px 8px 4px 12px; }
  .j-med-txt { font-size: 19px; }
  .j-borne { font-size: 18px; }
  .j-unite { font-size: 19px; }
  .carte-nom { font-size: 30px; stroke-width: 7px; }
}
@media (max-width: 1259px) {
  .nav { display: none; }
  .burger { display: grid; }
  .top .top-cta { margin-left: auto; }
}
@media (max-width: 380px) {
  .mot { font-size: 18px; }
  .logo-symbole { width: 26px; height: 26px; }
  .top .btn-sm { padding: 0 14px; font-size: 15px; }
  .madlib { font-size: 20px; }
  .t-actions tr { grid-template-columns: 1fr 1fr; }
}
/* Tablette : le rapport passe sur une colonne (l'échelle énergie et ses onglets ont besoin de toute la largeur) */
@media (max-width: 1100px) { .dpe-zone { margin-top: 28px; } }
@media (forced-colors: active) {
  .btn, .theme-btn, .burger, .deroule-btn { border: 2px solid ButtonText; }
  .menu, .membre { border: 2px solid CanvasText; }
  .blank { border: 2px solid CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* ==========================================================================
   Pages intérieures : composants partagés (design system, refonte 2026-10)
   ========================================================================== */

/* Fil d'Ariane */
.fil { padding-top: var(--esp-4); font-size: 14px; color: var(--dt-ink-2); }
.fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.fil li + li::before { content: "/"; margin-right: 10px; color: var(--dt-ink-3); }
.fil a { color: var(--dt-ink-2); text-underline-offset: 3px; }
.fil a:hover { color: var(--dt-ink); }

/* En-tête de page : sur-titre, titre, chapô, et une illustration papier facultative */
.page-tete { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--esp-6) var(--esp-7); align-items: start; padding: clamp(24px, 4vw, 56px) 0 clamp(32px, 5vw, 72px); }
.page-tete.seul { grid-template-columns: minmax(0, 1fr); }
.page-tete.seul > div { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.page-tete.seul > div > * { grid-column: 1 / -1; }
.page-tete.seul > div > .chapo { grid-column: 1; }
.page-tete.seul > div > .maj, .page-tete.seul > div > .pastille { justify-self: start; }
.page-tete h1 { font-variation-settings: "opsz" 96; font-size: clamp(38px, 5.2vw, 76px); line-height: 0.96; letter-spacing: -0.032em; }
.page-tete .chapo { margin-top: var(--esp-5); }
.page-tete .actions-tete { margin-top: var(--esp-6); display: flex; flex-wrap: wrap; gap: var(--esp-4) var(--esp-5); align-items: center; }
.page-tete .art { justify-self: end; align-self: center; width: 100%; max-width: 420px; }
.page-tete .art svg { display: block; width: 100%; height: auto; }

/* Bouton secondaire : contour, même forme que le bouton principal */
.btn-2 { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; border: 2px solid var(--dt-ink); color: var(--dt-ink); background: transparent; font: 700 17px/1 var(--display); text-decoration: none; cursor: pointer; transition: background 140ms var(--ease); }
.btn-2:hover { background: var(--dt-surface-alt); }
.btn-2 svg { width: 20px; height: 20px; }

/* Texte long : la colonne vient de la grille (jamais d'un max-width sur le texte) */
.lecture { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: var(--esp-8); align-items: start; padding-bottom: var(--sec); }
.lecture.pleine { grid-template-columns: minmax(0, 1fr); }
.lecture > aside { align-self: stretch; }
.sommaire { position: sticky; top: 96px; max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 4px 8px 8px 6px; margin: -4px -8px 0 -6px; font-size: 15px; }
.sommaire p { font: 700 14px/1.2 var(--display); letter-spacing: 0.01em; margin-bottom: var(--esp-3); color: var(--dt-ink); }
.sommaire ol { list-style: none; margin: 0; padding: 0; border-left: 3px solid var(--dt-surface-alt-2); }
.sommaire a { display: block; padding: 7px 0 7px 14px; color: var(--dt-ink-2); text-decoration: none; line-height: 1.35; }
.sommaire a:hover, .sommaire a[aria-current="true"] { color: var(--dt-ink); box-shadow: -3px 0 0 var(--dt-accent); }
.prose { font-size: 18px; line-height: 1.65; color: var(--dt-ink); }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: var(--esp-8); font-size: clamp(28px, 3vw, 42px); line-height: 1.04; letter-spacing: -0.03em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--esp-6); font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; }
.prose h2 + *, .prose h3 + * { margin-top: var(--esp-3); }
.prose h2 + h3 { margin-top: var(--esp-5); }
.prose code, .encart code, .tableau code { font: 600 0.86em/1.35 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--dt-ink); white-space: nowrap; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--dt-accent); font-weight: 700; }
.prose a:not(.btn):not(.btn-2) { color: var(--dt-ink); text-decoration: underline; text-decoration-color: var(--dt-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.prose strong { font-weight: 600; }
.prose blockquote { margin: var(--esp-6) 0; padding: 0; font: 800 clamp(24px, 2.6vw, 34px)/1.12 var(--display); letter-spacing: -0.025em; }
.prose blockquote cite { display: block; margin-top: var(--esp-3); font: 400 15px/1.4 var(--text); font-style: normal; color: var(--dt-ink-2); letter-spacing: 0; }
.prose small, .petit { font-size: 15px; color: var(--dt-ink-2); }
.prose hr { border: 0; border-top: 3px dashed var(--dt-surface-alt-2); margin: var(--esp-7) 0; }
.maj { font-size: 14px; color: var(--dt-ink-2); }
.page-tete .maj { margin-top: var(--esp-5); display: inline-flex; align-items: center; gap: var(--esp-2); padding: 6px 14px; border-radius: 999px; background: var(--dt-surface-alt); }
.page-tete .maj strong { color: var(--dt-ink); font-weight: 600; }
.page-tete sup { font-size: 0.68em; line-height: 0; vertical-align: 0.42em; }

/* Fiche d'identité (pages légales, rapport) : un registre à filets, comme le reçu de l'accueil ; adresse une ligne par élément */
.fiche-id { margin-bottom: 0; border-top: 3px solid var(--dt-ink); }
.fiche-id > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: var(--esp-1) var(--esp-5); padding: 9px 0; border-bottom: 2px dotted var(--dt-surface-alt-2); }
.fiche-id dt { font-weight: 600; color: var(--dt-ink-2); }
.fiche-id dd { margin: 0; }
.prose .fiche-id + .fiche-id { margin-top: var(--esp-5); }
.adresse span { display: block; }

/* Lecture juridique : des titres de section à 28-30 px, qui ne prennent pas le pas sur le texte */
.lecture-legale .prose h2 { margin-top: var(--esp-7); font-size: clamp(24px, 2.1vw, 30px); line-height: 1.12; letter-spacing: -0.02em; }
.lecture-legale .prose h2:first-child { margin-top: 0; }
.lecture-legale .prose h3 { margin-top: var(--esp-5); font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; }
.lecture-legale .prose h2 + h3 { margin-top: var(--esp-4); }
/* En-tête : une bande de papier d'un bord à l'autre, fil d'Ariane compris (le texte reste dans la grille) */
.legale-tete { padding-bottom: var(--esp-9); background: var(--dt-paper); box-shadow: 0 0 0 100vmax var(--dt-paper); clip-path: inset(0 -100vmax); }
.legale-tete .page-tete { padding-bottom: 0; }

/* Corps : sommaire à gauche (on consulte un texte juridique par partie), texte au centre ;
   à partir de 1280 px, la colonne de texte laisse une marge à droite où débordent les blocs larges */
.lecture-legale { padding-top: var(--esp-9); }
@media (min-width: 1024px) {
  .lecture-legale { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
  .lecture-legale > aside { order: -1; }
  .lecture-legale .sommaire > p { padding-top: var(--esp-4); border-top: 3px solid var(--dt-ink); }
  .lecture-legale .sommaire-long a { padding-top: 6px; padding-bottom: 6px; font-size: 15px; }
}
@media (min-width: 1280px) {
  .lecture-legale .prose { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 2fr); column-gap: var(--esp-8); align-content: start; }
  .lecture-legale .prose > * { grid-column: 1; margin-bottom: 0; } /* en grille, les marges ne fusionnent plus */
  .lecture-legale .prose > .legale-large { grid-column: 1 / -1; }
}

/* Repères de section : un filet d'encre et un numéro, repris dans le sommaire (numéros décoratifs, tus aux lecteurs d'écran) */
.lecture-legale .prose { counter-reset: legale-s; }
.lecture-legale .prose h2 { counter-increment: legale-s; margin-top: var(--esp-8); padding-top: var(--esp-4); border-top: 3px solid var(--dt-ink); }
.lecture-legale .prose h2:first-child { margin-top: 0; }
.lecture-legale .prose h2::before { content: counter(legale-s, decimal-leading-zero) / ""; display: block; margin-bottom: var(--esp-3); font: 700 15px/1 var(--display); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--dt-ink-2); }
.lecture-legale .sommaire ol, .lecture-legale .sommaire-repli ol { counter-reset: legale-t; }
.lecture-legale .sommaire li, .lecture-legale .sommaire-repli li { counter-increment: legale-t; }
.lecture-legale .sommaire a { padding-left: 44px; }
.lecture-legale .sommaire-repli a { padding-left: 30px; }
.lecture-legale .sommaire a::before, .lecture-legale .sommaire-repli a::before { content: counter(legale-t, decimal-leading-zero) / ""; display: inline-block; width: 30px; margin-left: -30px; font: 700 13px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--dt-ink-2); }

/* Fiche d'identité : un papier au trait d'encre, une ligne par rubrique */
.lecture-legale .fiche-id { padding: var(--esp-2) var(--esp-5); border-top: 0; border-radius: var(--r-panel); background: var(--dt-paper); box-shadow: 0 0 0 2px var(--dt-ink); }
.lecture-legale .fiche-id > div { align-items: baseline; padding: var(--esp-3) 0; }
.lecture-legale .fiche-id > div:last-child { border-bottom: 0; }
.lecture-legale .fiche-id dt { font-size: 15px; }
@media (max-width: 760px) {
  .legale-tete { padding-bottom: var(--esp-8); }
  .lecture-legale { padding-top: var(--esp-8); }
  .lecture-legale .prose h2 { margin-top: var(--esp-7); }
  .lecture-legale .fiche-id { padding: var(--esp-1) var(--esp-4); }
}

/* Sommaire long (12 à 20 parties, pages légales).
   Ordinateur : la liste collante, resserrée. Tablette et téléphone : un <details> fermé, sur le modèle du rapport. */
@media (min-width: 1024px) {
  .sommaire-long a { padding: 5px 0 5px 14px; font-size: 14px; }
}
.sommaire-repli { display: none; border-radius: var(--r-panel); background: var(--dt-surface-alt); }
.sommaire-repli summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 20px; font: 700 17px/1.2 var(--display); letter-spacing: -0.01em; border-radius: var(--r-panel); }
.sommaire-repli summary::-webkit-details-marker { display: none; }
.sommaire-repli-n { margin-left: auto; font: 600 14px var(--text); color: var(--dt-ink-2); }
.sommaire-repli summary svg { flex: none; width: 22px; height: 22px; transition: transform 200ms var(--ease); }
.sommaire-repli[open] summary svg { transform: rotate(180deg); }
.sommaire-repli ol { list-style: none; margin: 0; padding: 0 20px 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); column-gap: 24px; }
.sommaire-repli a { display: block; min-height: 44px; padding: 12px 0; border-top: 2px solid var(--dt-surface-alt-2); font-size: 15px; line-height: 1.3; color: var(--dt-ink); text-decoration: none; }
.sommaire-repli a:hover { text-decoration: underline; text-decoration-color: var(--dt-accent); text-underline-offset: 4px; }
@media (max-width: 1023px) {
  .sommaire-long { display: none; }
  .sommaire-repli { display: block; }
}

/* Encart : un papier posé sur la page (jamais de bordure gauche colorée) */
.encart { padding: var(--esp-5) var(--esp-5); border-radius: var(--r-panel); background: var(--dt-encart); font-size: 17px; line-height: 1.55; }
.encart > strong:first-child, .encart > .encart-titre { display: block; font: 800 20px/1.2 var(--display); letter-spacing: -0.01em; margin-bottom: var(--esp-2); }
.encart > * + * { margin-top: 0.7em; }
.encart.papier { background: var(--dt-paper); box-shadow: var(--ombre-decoupe); }
.encart.contour { background: transparent; box-shadow: inset 0 0 0 3px var(--dt-ink); }

/* Cartes : grille de papiers découpés */
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--esp-5); }
.cartes.c2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.carte-p { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-5); border-radius: var(--r-panel); background: var(--dt-paper); box-shadow: 0 0 0 2px var(--dt-ink); }
.carte-p.saillie { box-shadow: var(--ombre-decoupe); }
.carte-p h3 { font-size: 22px; line-height: 1.15; letter-spacing: -0.015em; }
.carte-p p { color: var(--dt-ink-2); font-size: 16px; line-height: 1.55; }
.carte-p .objet, .carte-p .carte-art { width: 96px; height: 72px; }
.carte-p .num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px 14px 11px 15px; background: var(--dt-surface-alt); font: 800 20px/1 var(--display); }
.carte-p .ico { flex: none; }
a.carte-p { color: inherit; text-decoration: none; transition: transform 140ms var(--ease), box-shadow 140ms var(--ease); }
a.carte-p:hover { transform: translate(-2px, -2px); box-shadow: 0 0 0 2px var(--dt-ink), 8px 8px 0 var(--dt-shadow); }

/* Chiffres clés */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--esp-5) var(--esp-6); }
.chiffre b { display: block; font: 800 clamp(44px, 5vw, 68px)/0.95 var(--display); letter-spacing: -0.045em; }
.chiffre span { display: block; margin-top: var(--esp-2); font-size: 16px; color: var(--dt-ink-2); line-height: 1.45; }
/* Preuves de méthode : retirées de l'accueil le 12/10, gardées pour le composant PreuvesMethode de la bibliothèque du design system */
.preuves-chiffres .chiffre { padding-top: 18px; border-top: 3px solid var(--dt-ink); }
.preuves-lien { margin-top: var(--esp-6); }
/* Maquette seulement : emplacement à remplir avec de vrais cas, jamais avec un exemple inventé */
.emplacement-maquette { margin-top: var(--esp-6); padding: var(--esp-5); border: 2px dashed var(--dt-surface-alt-2); border-radius: var(--r-panel); font-size: 15px; color: var(--dt-ink-2); }

/* Tableau de données : filets à l'encre, défilement horizontal confiné sur petit écran */
.tableau-zone { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tableau { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
.tableau caption { text-align: left; font: 700 15px/1.3 var(--display); padding-bottom: var(--esp-3); color: var(--dt-ink-2); }
.tableau th { text-align: left; font-weight: 600; font-size: 14px; color: var(--dt-ink-2); padding: 0 14px 10px 0; vertical-align: bottom; }
.tableau td { padding: 13px 14px 13px 0; border-top: 2px solid var(--dt-ink); vertical-align: top; }
.tableau tbody tr:last-child td { border-bottom: 2px solid var(--dt-ink); }
.tableau td:first-child, .tableau th[scope="row"] { font-weight: 600; }
.tableau th[scope="row"] { padding: 13px 14px 13px 0; border-top: 2px solid var(--dt-ink); vertical-align: top; font-size: 16px; color: var(--dt-ink); }
.tableau tbody tr:last-child th[scope="row"] { border-bottom: 2px solid var(--dt-ink); }
.tableau .n { text-align: right; white-space: nowrap; }
.tableau .moi { background: var(--dt-surface-alt); }

/* Comparatif en colonnes (pré-diagnostic, DPE, audit) */
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--esp-5); }
.compare > div { padding: var(--esp-5); border-radius: var(--r-panel); box-shadow: inset 0 0 0 3px var(--dt-ink); }
.compare > div.nous { background: var(--dt-paper); box-shadow: 0 0 0 3px var(--dt-ink), 6px 6px 0 var(--dt-shadow); }
.compare h3 { font-size: 22px; letter-spacing: -0.015em; }
.compare dl { margin: var(--esp-4) 0 0; }
.compare dt { font-size: 13px; font-weight: 600; color: var(--dt-ink-2); text-transform: uppercase; letter-spacing: 0.06em; margin-top: var(--esp-3); }
.compare dd { margin: 2px 0 0; font-size: 16px; line-height: 1.45; }

/* Pastilles */
.pastille { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 600 13px/1.2 var(--text); background: var(--dt-encart); color: var(--dt-ink); white-space: nowrap; }
.pastille.forte { background: var(--dt-ink); color: var(--dt-surface); }
.pastille.chaude { background: var(--dt-accent); color: var(--dt-on-action); }

/* Formulaires : champs, choix en cartes, cases, aides et erreurs */
.formulaire { display: grid; gap: var(--esp-5); }
.champ { display: grid; gap: var(--esp-2); align-content: start; }
.champ > label:not(.case), .champ > .etiquette, fieldset > legend { font: 700 17px/1.3 var(--display); letter-spacing: -0.005em; color: var(--dt-ink); }
.champ .aide-champ { font-size: 14px; color: var(--dt-ink-2); line-height: 1.45; }
.saisie { width: 100%; min-height: 52px; padding: 12px 14px; border: 0; border-radius: var(--r-control) var(--r-control) 0 0; background: var(--dt-surface-alt); border-bottom: 3px solid var(--dt-ink); color: var(--dt-ink); font: 400 17px/1.4 var(--text); }
.saisie::placeholder { color: var(--dt-ink-2); opacity: 1; }
.saisie:focus { outline: 3px solid var(--dt-accent); outline-offset: 3px; border-bottom-color: var(--dt-accent); }
textarea.saisie { min-height: 120px; resize: vertical; }
select.saisie { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--dt-ink) 50%), linear-gradient(135deg, var(--dt-ink) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.champ.erreur .saisie { border-bottom-color: var(--dt-erreur); }
.message-erreur { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; font-weight: 600; color: var(--dt-erreur); }
.message-erreur svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset > legend { padding: 0; margin-bottom: var(--esp-3); }
.choix-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--esp-3); }
.choix { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; min-height: 64px; padding: 12px 14px; border-radius: 16px; background: var(--dt-surface-alt); cursor: pointer; font-weight: 600; font-size: 16px; line-height: 1.3; transition: background 140ms var(--ease), box-shadow 140ms var(--ease); }
.choix input { position: absolute; opacity: 0; pointer-events: none; font-size: 16px; }
.choix small { display: block; font-weight: 400; font-size: 14px; color: var(--dt-ink-2); margin-top: 2px; }
.choix .vig, .choix .ico { flex: none; }
.choix .vig { width: 56px; height: 42px; }
.choix:hover { background: var(--dt-surface-alt-2); }
.choix:has(input:checked) { background: var(--dt-ink); color: var(--dt-surface); box-shadow: 4px 4px 0 var(--dt-action-shadow); }
.choix:has(input:checked) small { color: var(--dt-selected-2); }
.choix:has(input:focus-visible) { outline: 3px solid var(--dt-accent); outline-offset: 3px; }
.case { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; min-height: 44px; padding: 9px 0; font-size: 16px; line-height: 1.45; cursor: pointer; }
.case input { appearance: none; width: 26px; height: 26px; margin: 0; font-size: 16px; border-radius: 7px; background: var(--dt-surface-alt); box-shadow: inset 0 0 0 2px var(--dt-ink); cursor: pointer; display: grid; place-items: center; }
.case input:checked { background: var(--dt-ink); }
.case input:checked::after { content: ""; width: 14px; height: 14px; background: var(--dt-surface); clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 26%, 86% 12%, 38% 72%); }
.case input:focus-visible { outline: 3px solid var(--dt-accent); outline-offset: 3px; }
.rangee { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--esp-4); }

/* Carte de section sur fond papier (formulaire, résultat) */
.feuille { background: var(--dt-paper); border-radius: var(--r-panel); box-shadow: var(--ombre-feuille); padding: clamp(22px, 3.4vw, 44px); }

/* Page d'erreur ou de confirmation : un message, une action */
.message-page { min-height: 60vh; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--esp-7); align-items: center; padding-top: var(--esp-8); padding-bottom: var(--esp-8); }
.message-page h1 { font-size: clamp(40px, 5.5vw, 80px); line-height: 0.95; letter-spacing: -0.032em; }
.message-page h1 + p, .message-page p.chapo { margin-top: var(--esp-4); font-size: 19px; color: var(--dt-ink-2); }
.message-page .btn { margin-top: var(--esp-6); }

@media (min-width: 700px) and (max-width: 1023px) {
  .sommaire ol { columns: 2; column-gap: var(--esp-6); }
  .sommaire li { break-inside: avoid; }
}
@media (max-width: 1023px) {
  .lecture { grid-template-columns: minmax(0, 1fr); gap: var(--esp-6); }
  .lecture > aside { order: -1; align-self: auto; }
  .sommaire { position: static; max-height: none; overflow: visible; margin: 0; padding: var(--esp-5); border-radius: var(--r-panel); background: var(--dt-surface-alt); }
  .sommaire a { padding-top: 9px; padding-bottom: 9px; }
}
@media (max-width: 760px) {
  :root { --ombre-decoupe: 0 0 0 2px var(--dt-ink), 4px 4px 0 var(--dt-shadow); --ombre-feuille: 4px 4px 0 var(--dt-shadow); }
  .reseau-txt > p:not(.sur-titre) { font-size: 17px; }
  .page-tete, .message-page { grid-template-columns: minmax(0, 1fr); }
  .page-tete.seul > div { grid-template-columns: minmax(0, 1fr); }
  .page-tete .art { justify-self: start; max-width: 200px; }
  .page-tete h1 { font-size: 36px; }
  .prose { font-size: 17px; }
  .prose h2 { margin-top: var(--esp-7); }
  .page-tete .actions-tete .btn { width: 100%; }
  .tableau { font-size: 15px; }
  .btn-2 { white-space: normal; line-height: 1.15; text-align: center; padding-top: 10px; padding-bottom: 10px; }
  .fiche-id > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fiche-id dt { font-size: 15px; }
}
@media (forced-colors: active) {
  .carte-p, .encart, .compare > div, .feuille, .choix { border: 2px solid CanvasText; }
  .choix:has(input:checked) { outline: 3px solid Highlight; }
}

/* ========== Coque d'application (espaces) ========== */
/* Espaces connectés (agence, puis espace pro) : registre sobre d'application. Pétrole et blanc ; la framboise pour l'action
   principale, le focus et un chiffre clé ; aucune illustration, sauf un objet dans un état vide. Pas d'ombre décalée :
   un trait suffit. Classes préfixées app- ; la barre de maquette (maquette-) n'existe que dans la maquette. */

/* Barre de maquette : passer d'une page et d'une vue à l'autre (jamais en production) */
.maquette-barre { background: var(--dt-surface-alt); border-bottom: 2px dashed var(--dt-ink-3); font-size: 14px; }
.maquette-barre-in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-4); padding-top: var(--esp-1); padding-bottom: var(--esp-1); }
.maquette-titre { font: 800 13px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dt-ink-2); }
.maquette-pages, .maquette-vues { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.maquette-pages a, .maquette-vues button, .maquette-nuit { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--dt-ink); font: 600 14px/1.2 var(--text); text-decoration: none; cursor: pointer; white-space: nowrap; }
.maquette-pages a:hover, .maquette-vues button:hover, .maquette-nuit:hover { background: var(--dt-surface-alt-2); }
.maquette-pages a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--dt-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.maquette-vues { padding-left: var(--esp-3); border-left: 2px dashed var(--dt-ink-3); }
.maquette-vues button[aria-pressed="true"], .maquette-nuit[aria-pressed="true"] { background: var(--dt-ink); color: var(--dt-surface); }
.maquette-nuit { margin-left: auto; box-shadow: inset 0 0 0 2px var(--dt-ink-3); }

/* Portes : connexion, inscription, accès. Un argument court à gauche, la feuille du formulaire à droite */
.app-porte-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-5); min-height: 72px; }
.app-marque { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--dt-ink); text-decoration: none; }
.app-retour { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 15px; }
.app-retour svg { width: 20px; height: 20px; }
.app-porte { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "dire feuille" "points feuille"; grid-template-rows: auto 1fr; gap: var(--esp-6) var(--esp-8); align-items: start; padding-top: var(--esp-7); padding-bottom: var(--esp-9); }
.app-porte.seule { grid-template-columns: minmax(0, 1fr); grid-template-areas: "feuille"; grid-template-rows: auto; justify-items: center; }
.app-porte.seule .app-feuille { width: 100%; max-width: 560px; }
.app-porte-dire { grid-area: dire; }
.app-porte-dire h1 { font-variation-settings: "opsz" 72; font-size: clamp(34px, 4.2vw, 58px); line-height: 0.98; letter-spacing: -0.03em; }
.app-porte-dire > p:not(.sur-titre) { margin-top: var(--esp-4); font-size: 19px; color: var(--dt-ink-2); }
.app-porte-points { grid-area: points; list-style: none; margin: 0; padding: 0; }
.app-porte-points li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--esp-3); padding: 14px 0; border-top: 2px solid var(--dt-surface-alt-2); }
.app-porte-points li:last-child { border-bottom: 2px solid var(--dt-surface-alt-2); }
.app-porte-points svg { width: 24px; height: 24px; margin-top: 1px; }
.app-porte-points b { font-weight: 600; }
.app-porte-detail { display: block; color: var(--dt-ink-2); font-size: 16px; }
.app-feuille { grid-area: feuille; padding: clamp(22px, 3vw, 40px); border-radius: var(--r-panel); background: var(--dt-paper); box-shadow: 0 0 0 2px var(--dt-ink); }
.app-feuille h1, .app-feuille h2 { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.05; letter-spacing: -0.025em; }
.app-feuille h1 + p, .app-feuille h2 + p { margin-top: var(--esp-2); color: var(--dt-ink-2); }
.app-feuille .formulaire, .app-feuille .app-message, .app-feuille .encart { margin-top: var(--esp-5); }
.app-feuille .formulaire .btn { width: 100%; }
.app-feuille-pied { margin-top: var(--esp-5); padding-top: var(--esp-4); border-top: 2px solid var(--dt-surface-alt-2); font-size: 15px; color: var(--dt-ink-2); }
.app-feuille-pied .lien { display: inline-block; padding: 10px 0; font-weight: 600; }
.app-feuille-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3) var(--esp-4); margin-top: var(--esp-5); }
.app-rond { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--esp-4); border-radius: 16px 18px 15px 17px; background: var(--dt-surface-alt); color: var(--dt-ink); }
.app-rond svg { width: 30px; height: 30px; }
.app-rond.ok { background: var(--dt-ink); color: var(--dt-surface); }
/* Bouton qui se lit comme un lien (mot de passe oublié, renvoyer le lien) */
.app-lien-btn { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--dt-ink); font: 600 16px/1.3 var(--text); text-decoration: underline; text-decoration-color: var(--dt-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
/* Mot de passe : le bouton pour l'afficher est dans le champ */
.app-mdp { position: relative; }
.app-mdp .saisie { padding-right: 56px; }
.app-mdp-oeil { position: absolute; right: 4px; top: 4px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; color: var(--dt-ink); cursor: pointer; }
.app-mdp-oeil svg { width: 22px; height: 22px; }
.app-mdp-oeil .o-cache, .app-mdp-oeil[aria-pressed="true"] .o-voir { display: none; }
.app-mdp-oeil[aria-pressed="true"] .o-cache { display: block; }
/* Robustesse du mot de passe : trois crans et un mot, jamais un score */
.app-jauge { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--dt-ink-2); }
.app-jauge-crans { display: grid; grid-template-columns: repeat(3, 32px); gap: 4px; }
.app-jauge-crans i { height: 6px; border-radius: 3px; background: var(--dt-surface-alt-2); }
.app-jauge[data-force="1"] i:nth-child(1), .app-jauge[data-force="2"] i:nth-child(-n+2), .app-jauge[data-force="3"] i { background: var(--dt-ink); }
/* Message d'un formulaire : confirmation, ou erreur (toujours un texte, jamais la couleur seule) */
.app-message { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border-radius: 12px; background: var(--dt-surface-alt); font-size: 15px; line-height: 1.45; }
.app-message svg { width: 22px; height: 22px; }
.app-feuille .encart .saisie, .app-feuille .encart .app-message { background: var(--dt-paper); }
.app-message.erreur { background: var(--dt-paper); box-shadow: inset 0 0 0 2px var(--dt-erreur); color: var(--dt-erreur); font-weight: 600; }

/* Barre haute de l'application */
.app-barre { position: sticky; top: 0; z-index: 30; background: var(--dt-paper); box-shadow: 0 2px 0 var(--dt-surface-alt-2); }
.app-barre-in { display: flex; align-items: center; gap: var(--esp-4); min-height: 68px; }
.app-barre .logo-symbole { width: 30px; height: 30px; }
.app-barre .mot { font-size: 20px; }
.app-onglets { margin-left: var(--esp-3); }
.app-onglets ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.app-onglets a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--dt-ink-2); font: 600 15px/1 var(--text); text-decoration: none; white-space: nowrap; }
.app-onglets a svg { width: 20px; height: 20px; }
.app-onglets a:hover { background: var(--dt-surface-alt); color: var(--dt-ink); }
.app-onglets a[aria-current="page"] { background: var(--dt-surface-alt); color: var(--dt-ink); box-shadow: inset 0 -3px 0 var(--dt-accent); }
.app-barre-fin { display: flex; align-items: center; gap: var(--esp-3); margin-left: auto; }
/* Logo de l'agence, sur une plaque claire de jour comme de nuit */
.app-logo-agence { height: 44px; width: auto; padding: 4px 8px; border-radius: 8px; background: var(--dt-il-pap); box-shadow: inset 0 0 0 1px var(--dt-surface-alt-2); }
.app-compte { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 2px 14px 2px 2px; border: 0; border-radius: 999px; background: var(--dt-surface-alt); color: var(--dt-ink); font: 600 15px/1 var(--text); text-decoration: none; cursor: pointer; white-space: nowrap; }
.app-aide { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: none; box-shadow: inset 0 0 0 2px var(--dt-ink); color: var(--dt-ink); font: 600 15px/1 var(--text); text-decoration: none; cursor: pointer; }
.app-aide svg { width: 20px; height: 20px; }
/* Initiales d'une personne */
.app-init { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--dt-ink); color: var(--dt-surface); font: 800 14px/1 var(--display); letter-spacing: 0.02em; }
/* Bandeau d'état de l'espace : démonstration, fermeture annoncée (foncé) ; conditions à faire accepter (clair) */
.app-bandeau { background: var(--dt-band); color: var(--dt-on-band); }
.app-bandeau p { display: flex; align-items: center; gap: 10px; padding-top: 10px; padding-bottom: 10px; font-size: 15px; font-weight: 600; }
.app-bandeau svg { width: 20px; height: 20px; flex: none; }
.app-bandeau .lien { color: inherit; }
.app-bandeau.clair { background: var(--dt-surface-alt); color: var(--dt-ink); }
/* Barre d'onglets du téléphone : « Envoyer » au centre, en relief */
.app-bas { display: none; }
.app-bas a { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 56px; border-radius: 12px; color: var(--dt-ink-2); font: 600 13px/1.1 var(--text); text-decoration: none; }
.app-bas a svg { width: 22px; height: 22px; }
.app-bas a[aria-current="page"] { background: var(--dt-surface-alt); color: var(--dt-ink); }
.app-bas .app-bas-action { color: var(--dt-ink); }
.app-bas-action span:first-child { display: grid; place-items: center; width: 50px; height: 50px; margin-top: -20px; border-radius: 50%; background: var(--dt-action); color: var(--dt-on-action); box-shadow: 0 4px 0 var(--dt-action-shadow); }

/* Page de l'application : un titre, puis une grille de blocs (8 et 4) */
.app-page { padding-top: var(--esp-6); padding-bottom: var(--esp-8); }
.app-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--esp-4) var(--esp-5); margin-bottom: var(--esp-5); }
.app-tete h1 { font-variation-settings: "opsz" 48; font-size: clamp(30px, 3vw, 42px); line-height: 1.02; letter-spacing: -0.028em; }
.app-tete p { margin-top: var(--esp-2); color: var(--dt-ink-2); }
.app-tete-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); }
.app-grille { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--esp-5); align-items: start; }
.app-colonne { display: grid; gap: var(--esp-5); min-width: 0; }
.app-bloc { min-width: 0; padding: var(--esp-5); border-radius: var(--r-panel); background: var(--dt-paper); box-shadow: 0 0 0 2px var(--dt-surface-alt-2); }
.app-bloc-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--esp-1) var(--esp-4); margin-bottom: var(--esp-4); }
.app-bloc-tete h2 { font-size: 22px; line-height: 1.15; letter-spacing: -0.015em; }
.app-bloc-tete p, .app-bloc-tete .lien { font-size: 15px; color: var(--dt-ink-2); }
.app-bloc-tete .lien { display: inline-block; padding: 10px 0; font-weight: 600; color: var(--dt-ink); }
.app-bloc > p { color: var(--dt-ink-2); font-size: 16px; }
.app-bloc .formulaire { gap: var(--esp-4); }
.app-bloc .saisie[readonly] { background: none; border-bottom-style: dashed; color: var(--dt-ink-2); }
.app-bloc .fiche-id > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.btn-2.app-petit { min-height: 44px; padding: 0 16px; font-size: 15px; }
.btn-2.app-petit svg { width: 18px; height: 18px; }

/* Couleurs d'étape d'un dossier, une par état, partagées par les tuiles, la frise et les badges : le diagnostic (bleu-vert pâle),
   le rapport (bleu-vert), la demande de rappel ou de mise en relation (framboise), le besoin confié à une entreprise (pétrole).
   Rien que des jetons de la refonte et leurs mélanges : la nuit suit d'elle-même. */
:root { --app-c1: color-mix(in srgb, var(--dt-il-cadre) 50%, var(--dt-paper)); --app-c2: var(--dt-il-cadre); --app-c3: var(--dt-you); --app-c4: var(--dt-ink); }

/* Compteurs : quatre tuiles teintées, chacune avec son icône et une jauge (sa part des diagnostics) */
.app-compteurs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-3); margin: 0; }
.app-compteurs > div { --c: var(--app-c4); position: relative; display: flex; flex-direction: column; gap: var(--esp-1); padding: var(--esp-4); border-radius: 16px; background: color-mix(in srgb, var(--c) 10%, var(--dt-paper)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 32%, var(--dt-paper)); }
.app-compteurs .t-diag { --c: var(--app-c1); }
.app-compteurs .t-rapport { --c: var(--app-c2); }
.app-compteurs .t-relation { --c: var(--app-c3); }
.app-compteurs dt { order: 2; margin-bottom: var(--esp-3); font-size: 15px; line-height: 1.35; color: var(--dt-ink-2); }
.app-compteurs dd { order: 1; margin: 0; font: 800 clamp(32px, 3vw, 42px)/1 var(--display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.app-compteur-ico { position: absolute; top: var(--esp-3); right: var(--esp-3); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px 13px 11px 12px; background: var(--c); color: var(--dt-paper); }
.app-compteurs .t-diag .app-compteur-ico { color: var(--dt-ink); }
.app-compteur-ico svg { width: 22px; height: 22px; }
.app-compteurs dd.app-compteur-barre { order: 3; height: 8px; margin-top: auto; padding-top: 0; border-radius: 4px; background: color-mix(in srgb, var(--c) 18%, var(--dt-paper)); overflow: hidden; }
.app-compteur-barre i { display: block; width: calc(var(--part, 0) * 100%); height: 100%; border-radius: 4px; background: var(--c); transform-origin: left center; }

/* Frise d'un dossier : quatre étapes, les étapes atteintes en couleur, la dernière en relief ; un dossier clos reste gris */
.app-frise { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 3px; width: 140px; margin-bottom: var(--esp-2); }
.app-frise i { height: 6px; border-radius: 3px; background: var(--dt-surface-alt-2); }
.app-frise:is([data-etape="1"], [data-etape="2"], [data-etape="3"], [data-etape="4"]) i:nth-child(1) { background: var(--app-c1); }
.app-frise:is([data-etape="2"], [data-etape="3"], [data-etape="4"]) i:nth-child(2) { background: var(--app-c2); }
.app-frise:is([data-etape="3"], [data-etape="4"]) i:nth-child(3) { background: var(--app-c3); }
.app-frise[data-etape="4"] i:nth-child(4) { background: var(--app-c4); }
.app-frise[data-etape="1"] i:nth-child(1), .app-frise[data-etape="2"] i:nth-child(2), .app-frise[data-etape="3"] i:nth-child(3), .app-frise[data-etape="4"] i:nth-child(4) { height: 12px; border-radius: 4px; }
.app-frise.clos[data-etape] i:nth-child(n) { height: 6px; background: var(--dt-surface-alt-2); }
.app-frise.clos[data-etape="2"] i:nth-child(-n+2) { background: var(--dt-ink-3); }

/* Recherche dans une liste */
.app-chercher { position: relative; margin-bottom: var(--esp-3); }
.app-chercher svg { position: absolute; left: 14px; top: 15px; width: 22px; height: 22px; pointer-events: none; }
.app-chercher .saisie { padding-left: 46px; }

/* Tableau de données de l'application : une ligne par dossier ; une carte par ligne sur téléphone */
.app-tableau { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
.app-tableau th { padding: 0 var(--esp-3) var(--esp-2) 0; text-align: left; vertical-align: bottom; font-size: 14px; font-weight: 600; color: var(--dt-ink-2); }
.app-tableau td { padding: var(--esp-3) var(--esp-3) var(--esp-3) 0; border-top: 2px solid var(--dt-surface-alt-2); vertical-align: middle; }
.app-tableau th:last-child, .app-tableau td:last-child { padding-right: 0; text-align: right; }
.app-tableau tr.app-cache, .app-cache { display: none; }
.app-tableau tbody tr[data-ligne] { cursor: pointer; }
.app-tableau tbody tr[data-ligne]:hover td { background: var(--dt-surface); }
.app-ouvrir { display: block; min-height: 44px; padding: 0; border: 0; background: none; color: var(--dt-ink); font: 700 17px/1.3 var(--display); letter-spacing: -0.005em; text-align: left; cursor: pointer; }
.app-ouvrir:hover { text-decoration: underline; text-decoration-color: var(--dt-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.app-sous { display: block; font-size: 14px; color: var(--dt-ink-2); }
.app-date { white-space: nowrap; font-size: 15px; font-variant-numeric: normal; color: var(--dt-ink-2); }
.app-evo { display: block; margin-top: 4px; font-size: 14px; color: var(--dt-ink-2); }
.app-tableau-note { margin-top: var(--esp-4); font-size: 15px; color: var(--dt-ink-2); }

/* États d'un dossier : un mot et une icône, la couleur ne porte jamais seule le sens */
.app-etat { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--dt-surface-alt); color: var(--dt-ink); font: 600 14px/1.2 var(--text); white-space: nowrap; }
.app-etat svg { width: 18px; height: 18px; flex: none; }
.app-etat.e-diag { background: color-mix(in srgb, var(--app-c2) 12%, var(--dt-paper)); }
.app-etat.e-rapport { background: color-mix(in srgb, var(--app-c2) 24%, var(--dt-paper)); }
.app-etat.e-diag svg, .app-etat.e-rapport svg { color: var(--app-c2); }
.app-etat.e-relation { background: color-mix(in srgb, var(--app-c3) 12%, var(--dt-paper)); box-shadow: inset 0 0 0 2px var(--app-c3); }
.app-etat.e-relation svg { color: var(--app-c3); }
.app-etat.e-charge { background: var(--dt-ink); color: var(--dt-surface); }
.app-etat.e-clos { background: none; color: var(--dt-ink-2); box-shadow: inset 0 0 0 2px var(--dt-surface-alt-2); }
/* Jeton : ce que la mise en relation ou l'accès demande */
.app-jeton { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: normal; }
.app-jeton svg { width: 18px; height: 18px; flex: none; }
.app-jeton.calme { color: var(--dt-ink-2); font-weight: 400; }

/* États vide et erreur d'un bloc */
.app-vide { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--esp-5); align-items: center; padding: var(--esp-5); border-radius: 16px; background: color-mix(in srgb, var(--app-c2) 10%, var(--dt-paper)); }
.app-vide .objet { width: 120px; height: 90px; }
.app-vide h3 { font-size: 21px; line-height: 1.2; letter-spacing: -0.015em; }
.app-vide p { margin-top: 6px; color: var(--dt-ink-2); }
.app-vide .btn { margin-top: var(--esp-4); }
.app-souci { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-4); border-radius: 16px; background: var(--dt-paper); box-shadow: inset 0 0 0 2px var(--dt-erreur); }
.app-souci p { display: flex; align-items: flex-start; gap: 8px; color: var(--dt-erreur); font-weight: 600; }
.app-souci svg { width: 22px; height: 22px; flex: none; }

/* Liste de personnes (équipe compacte) */
.app-membres { list-style: none; margin: 0; padding: 0; }
.app-membres li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--esp-3); align-items: center; padding: var(--esp-2) 0; }
.app-membres li + li { border-top: 2px dotted var(--dt-surface-alt-2); }
.app-membres b { font-weight: 600; }
.app-membres small { font-size: 14px; color: var(--dt-ink-2); white-space: nowrap; }
/* Rangées de navigation dans un bloc (aide, contact) */
.app-rangs { margin: calc(var(--esp-2) * -1) 0; }
.app-rangs a, .app-rangs button { display: flex; align-items: center; gap: var(--esp-3); width: 100%; min-height: 56px; padding: var(--esp-2) 0; border: 0; background: none; color: var(--dt-ink); font: 600 16px/1.3 var(--text); text-align: left; text-decoration: none; cursor: pointer; }
.app-rangs > * + * { border-top: 2px solid var(--dt-surface-alt-2); }
.app-rangs svg { width: 22px; height: 22px; flex: none; }
.app-rangs svg:last-child { margin-left: auto; }

/* Le lien personnel, à copier */
.app-lien { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--dt-surface); box-shadow: inset 0 0 0 2px var(--dt-surface-alt-2); font: 600 17px/1.35 var(--text); }
.app-lien svg { width: 22px; height: 22px; flex: none; }
.app-lien-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); margin-top: var(--esp-4); }
/* Message prêt à envoyer (partage, relance) */
.app-format { padding: var(--esp-4) 0; border-top: 2px solid var(--dt-surface-alt-2); }
.app-format:last-child { padding-bottom: 0; }
.app-bloc > p + .app-format { margin-top: var(--esp-4); }
.app-format-tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) 10px; }
.app-format-tete svg { width: 22px; height: 22px; flex: none; }
.app-format-tete b { font: 700 18px/1.2 var(--display); }
.app-format-tete span { margin-left: auto; font-size: 14px; color: var(--dt-ink-2); }
.app-format-objet { margin-top: var(--esp-2); font-size: 15px; }
.app-format-texte { margin-top: 10px; padding: 14px 16px; border-radius: 12px; background: var(--dt-surface); font-size: 16px; line-height: 1.5; }
.app-format-texte p + p { margin-top: var(--esp-2); }
.app-format-pied { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-3); margin-top: var(--esp-3); }

/* Tiroir latéral (feuille du bas sur téléphone) et modale ; le voile assombrit la page dans les deux thèmes */
.app-voile { position: fixed; inset: 0; z-index: 70; background: color-mix(in srgb, var(--dt-il-dedans) 55%, transparent); }
.app-tiroir { position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; display: flex; flex-direction: column; width: min(100%, 520px); background: var(--dt-paper); box-shadow: -2px 0 0 var(--dt-ink); }
.app-tiroir-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-4) var(--esp-4) var(--esp-4) var(--esp-5); border-bottom: 2px solid var(--dt-surface-alt-2); }
.app-tiroir-tete h2 { font-size: 22px; line-height: 1.15; letter-spacing: -0.015em; }
.app-tiroir-corps { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--esp-5); }
.app-tiroir-corps > * + * { margin-top: var(--esp-4); }
.app-tiroir-corps h3 { font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; }
.app-tiroir-corps > p { color: var(--dt-ink-2); }
.app-tiroir-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); }
.app-fermer { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--dt-surface-alt); color: var(--dt-ink); cursor: pointer; }
.app-fermer svg { width: 24px; height: 24px; }
.app-modale { position: fixed; inset: 0; z-index: 71; display: grid; place-items: center; padding: var(--g); background: color-mix(in srgb, var(--dt-il-dedans) 55%, transparent); }
.app-modale-boite { width: 100%; max-width: 520px; max-height: calc(100dvh - 2 * var(--g)); overflow-y: auto; overscroll-behavior: contain; padding: clamp(24px, 4vw, 36px); border-radius: var(--r-panel); background: var(--dt-paper); box-shadow: 0 0 0 2px var(--dt-ink); }
.app-modale-boite.large { max-width: 640px; }
.app-modale-boite h2 { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.05; letter-spacing: -0.025em; }
.app-modale-boite p { margin-top: var(--esp-3); color: var(--dt-ink-2); }
.app-modale-boite .app-porte-points { margin-top: var(--esp-4); }
.app-modale-boite .formulaire { margin-top: var(--esp-4); gap: var(--esp-3); }
.app-modale-boite .message-erreur { margin-top: 0; color: var(--dt-erreur); }
.app-modale-pied { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-5); }
.app-modale-boite .formulaire .app-modale-pied { margin-top: var(--esp-2); }
/* Geste qui ne se défait pas (fermer l'espace) : la couleur d'erreur, toujours avec un mot qui le dit */
.btn.app-grave { background: var(--dt-erreur); color: var(--dt-paper); box-shadow: 0 4px 0 var(--dt-ink); }
.btn.app-grave:hover { box-shadow: 0 6px 0 var(--dt-ink); }
.btn.app-grave:active { box-shadow: 0 1px 0 var(--dt-ink); }
.btn-2.app-grave { border-color: var(--dt-erreur); color: var(--dt-erreur); }
.app-bloc.app-grave { box-shadow: 0 0 0 2px var(--dt-erreur); }
@media (prefers-reduced-motion: no-preference) {
  .app-tiroir:not([hidden]) { animation: app-glisse 220ms var(--ease) both; }
  .app-modale:not([hidden]) .app-modale-boite { animation: app-pose 220ms var(--ease) both; }
  @keyframes app-glisse { from { transform: translateX(32px); opacity: 0; } }
  @keyframes app-pose { from { transform: translateY(12px); opacity: 0; } }
  /* Arrivée sur le tableau de bord (classe posée une seule fois par espace-agence.js) : jauges et frises se remplissent */
  .app-arrivee .app-compteur-barre i { animation: app-remplit 900ms var(--ease) 150ms both; }
  .app-arrivee .app-frise i { animation: app-remplit 420ms var(--ease) both; }
  .app-arrivee .app-frise i:nth-child(2) { animation-delay: 90ms; }
  .app-arrivee .app-frise i:nth-child(3) { animation-delay: 180ms; }
  .app-arrivee .app-frise i:nth-child(4) { animation-delay: 270ms; }
  @keyframes app-remplit { from { transform: scaleX(0); } }
}

/* Suivi d'un dossier : ce qui est fait (daté), ce qui est attendu, ce qui vient */
.app-chrono { list-style: none; margin: 0; padding: 0; }
.app-chrono li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--esp-3); padding: 10px 0; }
.app-chrono li + li::before { content: ""; position: absolute; left: 11px; top: -8px; width: 2px; height: 16px; background: var(--dt-surface-alt-2); }
.app-chrono svg { width: 24px; height: 24px; }
.app-chrono time { display: block; font-size: 14px; color: var(--dt-ink-2); }
.app-chrono .attendue { font-weight: 600; }
.app-chrono .avenir { color: var(--dt-ink-2); }
/* Rapport d'un dossier : l'agence l'ouvre si le client le lui partage ; sinon, une explication, jamais une relance */
.app-rapport { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--esp-3); align-items: start; padding: var(--esp-4); border-radius: 16px; background: var(--dt-surface); }
.app-rapport > svg { width: 24px; height: 24px; }
.app-rapport h3 { font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; }
.app-rapport p { margin-top: var(--esp-1); color: var(--dt-ink-2); }
.app-rapport .btn { margin-top: var(--esp-3); }
.app-rapport .app-rapport-note { margin-top: var(--esp-2); font-size: 14px; }
.app-rapport.partage { background: var(--dt-paper); box-shadow: inset 0 0 0 2px var(--dt-ink); }
.app-rapport.souci { background: var(--dt-paper); box-shadow: inset 0 0 0 2px var(--dt-erreur); }
.app-rapport.souci p:first-of-type { color: var(--dt-erreur); font-weight: 600; }
/* Marque d'un dossier dont le rapport est partagé, sous son nom dans la liste */
.app-partage { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.app-partage svg { width: 18px; height: 18px; flex: none; }
/* Questions dans un tiroir */
.app-qr details { border-top: 2px solid var(--dt-surface-alt-2); }
.app-qr details:last-child { border-bottom: 2px solid var(--dt-surface-alt-2); }
.app-qr summary { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); min-height: 52px; padding: 10px 0; list-style: none; font: 700 17px/1.3 var(--display); letter-spacing: -0.005em; cursor: pointer; }
.app-qr summary::-webkit-details-marker { display: none; }
.app-qr summary svg { width: 22px; height: 22px; flex: none; transition: transform 180ms var(--ease); }
.app-qr details[open] summary svg { transform: rotate(180deg); }
.app-qr details p { padding-bottom: var(--esp-4); color: var(--dt-ink-2); }
/* Une personne à joindre : photo dans un rond, nom, adresse */
.app-contact { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--esp-4); align-items: center; padding: var(--esp-4); border-radius: 16px; background: var(--dt-surface); }
.app-contact .photo-rond { width: 64px; height: 64px; }
.app-contact b { display: block; font: 700 17px/1.25 var(--display); }
.app-contact span { font-size: 15px; color: var(--dt-ink-2); }
.app-contact .btn-2 { grid-column: 1 / -1; justify-self: start; }

/* Message bref après une action (lien copié, accès suspendu) */
.app-toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 999px; background: var(--dt-ink); color: var(--dt-surface); font-size: 15px; font-weight: 600; transform: translateX(-50%); }
.app-toast:empty { opacity: 0; pointer-events: none; }
/* Visite guidée : un halo sur l'élément réel, une bulle qui l'explique */
.app-halo { position: absolute; z-index: 72; border-radius: var(--r-panel); box-shadow: 0 0 0 4px var(--dt-accent), 0 0 0 100vmax color-mix(in srgb, var(--dt-il-dedans) 55%, transparent); pointer-events: none; }
.app-bulle { position: fixed; right: 24px; bottom: 24px; z-index: 73; width: min(calc(100% - 32px), 400px); padding: var(--esp-5); border-radius: 18px; background: var(--dt-paper); box-shadow: 0 0 0 2px var(--dt-ink); }
.app-bulle-rang { font-size: 14px; font-weight: 600; color: var(--dt-ink-2); }
.app-bulle h2 { margin-top: var(--esp-1); font-size: 22px; line-height: 1.15; letter-spacing: -0.015em; }
.app-bulle p:not(.app-bulle-rang) { margin-top: var(--esp-2); color: var(--dt-ink-2); font-size: 16px; }
.app-bulle-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); margin-top: var(--esp-4); }

@media (max-width: 1099px) {
  .app-onglets, .app-compte-nom, .app-espace { display: none; }
  .app-bas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--dt-paper); box-shadow: 0 -2px 0 var(--dt-surface-alt-2); }
  .app-page { padding-bottom: 128px; }
  .app-grille { grid-template-columns: minmax(0, 1fr); }
  .app-compte { padding-right: 2px; }
  .app-toast { bottom: 96px; }
  .app-bulle { bottom: 88px; }
}
@media (max-width: 899px) {
  .app-tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .app-tableau, .app-tableau tbody, .app-tableau tr, .app-tableau td { display: block; }
  .app-tableau tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--esp-2) var(--esp-3); align-items: center; padding: var(--esp-3) 0; border-top: 2px solid var(--dt-surface-alt-2); }
  .app-tableau td { padding: 0; border: 0; text-align: left; }
  .app-tableau td:first-child, .app-tableau td[data-l] { grid-column: 1 / -1; }
  .app-tableau td:last-child { text-align: left; }
  .app-tableau td[data-l]::before { content: attr(data-l) " "; font-size: 14px; color: var(--dt-ink-2); }
  .app-tableau tbody tr[data-ligne]:hover td { background: none; }
}
@media (max-width: 760px) {
  .maquette-barre-in { flex-wrap: nowrap; overflow-x: auto; gap: var(--esp-3); }
  .maquette-pages, .maquette-vues { flex-wrap: nowrap; }
  .maquette-pages a, .maquette-vues button, .maquette-nuit { min-height: 44px; }
  .app-porte { grid-template-columns: minmax(0, 1fr); grid-template-areas: "dire" "feuille" "points"; padding-top: var(--esp-5); padding-bottom: var(--esp-8); }
  .app-porte-dire h1 { font-size: 32px; }
  .app-porte-dire > p:not(.sur-titre) { font-size: 17px; }
  .app-barre-in { gap: var(--esp-2); min-height: 60px; }
  .app-barre .mot { display: none; }
  .app-aide-mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .app-aide { width: 44px; padding: 0; justify-content: center; }
  .app-logo-agence { height: 40px; }
  .app-page { padding-top: var(--esp-5); }
  .app-tete-actions, .app-tete-actions .btn, .app-tete-actions .btn-2 { width: 100%; }
  .app-compteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-compteur-ico { width: 34px; height: 34px; }
  .app-compteur-ico svg { width: 20px; height: 20px; }
  .app-bloc { padding: var(--esp-4); }
  .app-vide { grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); padding: var(--esp-4); }
  .app-vide .objet { width: 96px; height: 72px; }
  .app-tiroir { top: auto; left: 0; width: 100%; max-height: 92dvh; border-radius: var(--r-panel) var(--r-panel) 0 0; box-shadow: 0 -2px 0 var(--dt-ink); }
  .app-tiroir-corps { padding: var(--esp-4); }
  .app-bulle { right: 16px; }
}
@media (forced-colors: active) {
  .app-feuille, .app-bloc, .app-compteurs > div, .app-tiroir, .app-modale-boite, .app-bulle, .app-etat, .app-lien, .app-rapport { border: 2px solid CanvasText; }
  .app-frise i, .app-compteur-barre i { forced-color-adjust: none; }
  .app-halo { outline: 4px solid Highlight; }
}

/* ========== Bandeau et panneau des cookies (habillage de cookie-consent.js, qui n'est jamais modifié) ==========
   Le script crée #dt-cb (bandeau), #dt-panel-bg et #dt-panel (préférences) et injecte en fin de <head> sa feuille
   #dt-cb-style (bleue, Inter). Toutes les règles ci-dessous commencent par « html body » : elles passent devant la feuille
   injectée sans !important. Couleurs : jetons --dt-* seulement (le mode nuit suit tout seul).
   Obligation CNIL (JOURNAL-DECISIONS.md, 2026-10-05) : « Tout refuser » et « Tout accepter » ont partout la même taille,
   le même style de bouton plein et le même niveau. Le côté ludique tient au ton, au cookie croqué et à l'explication,
   jamais à une asymétrie : aucune règle ne vise l'un des deux boutons seul.
   Le cookie croqué : quatre couches de papier découpé empilées (ombre, biscuit, pépites, pépite framboise), dessinées
   par des masques SVG sans couleur et peintes avec les jetons. Bandeau : #dt-cb::before et ::after, #dt-cb-inner::before
   et ::after ; panneau : #dt-panel-head et #dt-panel-title. Il est posé à cheval sur le bord du bandeau.
   Ombre décalée : seulement sur le cookie (un objet) ; le bandeau et le panneau (des conteneurs) n'ont qu'un contour. */
:root {
  --cb-biscuit: var(--dt-il-vitre); --cb-pepite: var(--dt-il-encre); --cb-framboise: var(--dt-il-chaud);
  --cb-corps: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='8.5,53.0 8.8,43.0 12.5,34.0 19.3,26.0 27.4,19.0 36.8,14.3 46.0,11.4 57.7,12.7 59.9,15.6 61.4,19.4 63.2,21.6 65.1,23.1 67.2,24.1 69.7,24.7 71.3,26.5 72.2,29.0 73.4,31.0 74.8,32.7 76.6,34.2 78.9,35.5 81.3,36.9 81.5,39.5 82.1,41.8 83.3,43.9 85.2,46.0 88.9,48.1 90.8,50.7 90.9,53.6 91.1,56.4 89.2,67.7 84.7,77.1 76.9,84.6 67.5,91.8 57.5,94.5 46.4,95.8 35.3,91.8 24.9,85.5 16.2,79.1 11.7,70.1 8.3,61.0'/%3E%3Cpolygon points='92.4,18.6 94.7,21.6 93.7,25.4 89.5,24.5 88.8,20.5'/%3E%3Cpolygon points='97.3,38.0 95.5,36.7 95.7,34.6 98.1,33.6 99.1,36.5'/%3E%3Cpolygon points='90.3,7.9 88.6,9.4 86.9,9.0 86.4,6.8 88.5,6.3'/%3E%3C/svg%3E");
  --cb-pepites: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='23.9,33.8 29.6,30.1 34.9,33.0 36.0,39.1 30.4,42.1 26.5,39.5'/%3E%3Cpolygon points='48.5,26.7 53.6,27.0 57.0,30.6 54.7,34.0 50.6,34.2 46.7,31.4'/%3E%3Cpolygon points='27.1,66.3 23.6,62.6 22.3,56.9 26.9,53.7 30.9,57.5 31.2,63.1'/%3E%3Cpolygon points='50.5,72.8 49.5,77.5 44.5,79.9 41.1,75.1 42.1,70.2 47.5,67.0'/%3E%3Cpolygon points='64.0,56.6 69.7,58.8 72.5,62.9 68.4,67.9 62.8,66.0 61.8,61.1'/%3E%3Cpolygon points='64.5,47.1 62.4,49.2 59.9,47.6 59.3,44.9 61.6,43.4 65.5,43.7'/%3E%3Cpolygon points='39.7,52.5 36.7,52.5 34.0,50.5 36.0,47.3 39.0,47.6 41.1,49.7'/%3E%3C/svg%3E");
  --cb-framb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='48.1,50.3 52.0,53.1 49.4,57.5 45.8,59.3 41.0,57.5 40.6,52.7 44.1,49.9'/%3E%3C/svg%3E");
}
[data-theme="dark"] { --cb-biscuit: var(--dt-il-pap2); }

/* Bandeau. Ordinateur : une feuille posée en bas de l'écran, le cookie à cheval sur son bord gauche ; le texte prend toute
   la largeur, les trois boutons sont dessous, dans l'ordre du script (clavier compris). */
html body #dt-cb { --cb-t: 104px; --cb-x: 32px; --cb-y: -34px; --cb-r: -14deg;
  left: var(--g); right: var(--g); bottom: var(--esp-4); max-width: 1120px; margin: 0 auto; background: var(--dt-paper); color: var(--dt-ink); border: 0; border-radius: var(--r-panel); box-shadow: 0 0 0 2px var(--dt-ink); backdrop-filter: none; font: 400 16px/1.5 var(--text); transform: translateY(calc(100% + 64px)); transition: transform 280ms var(--ease); }
html body #dt-cb.dt-in { transform: none; }
html body #dt-cb-inner { position: static; max-width: none; margin: 0; padding: var(--esp-5) var(--esp-6) var(--esp-6) 158px; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--esp-4); }
html body #dt-cb-text { min-width: 0; }
html body #dt-cb-text h2 { margin: 0 0 6px; font: 800 23px/1.15 var(--display); letter-spacing: -0.02em; color: var(--dt-ink); }
html body #dt-cb-text p { max-width: none; margin: 0; font-size: 15px; line-height: 1.5; color: var(--dt-ink-2); }
html body #dt-cb-text a { color: var(--dt-ink); text-decoration: underline; text-decoration-color: var(--dt-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
html body #dt-cb-text a:hover { color: var(--dt-ink); text-decoration-thickness: 3px; }
/* Refuser et accepter dans deux colonnes égales, de part et d'autre de « Personnaliser » */
html body #dt-cb-btns { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--esp-3); }

/* Le cookie croqué (couches communes au bandeau et au panneau) */
html body #dt-cb::before, html body #dt-cb::after, html body #dt-cb-inner::before, html body #dt-cb-inner::after,
html body #dt-panel-head::before, html body #dt-panel-head::after, html body #dt-panel-title::before, html body #dt-panel-title::after {
  content: ""; position: absolute; left: var(--cb-x); top: var(--cb-y); width: var(--cb-t); height: var(--cb-t); rotate: var(--cb-r); pointer-events: none;
  -webkit-mask: var(--cb-forme) center / contain no-repeat; mask: var(--cb-forme) center / contain no-repeat; }
html body #dt-cb::before, html body #dt-panel-head::before { --cb-forme: var(--cb-corps); z-index: 0; translate: 3px 5px; background: var(--dt-shadow); opacity: 0.22; }
html body #dt-cb::after, html body #dt-panel-head::after { --cb-forme: var(--cb-corps); z-index: 1; background: var(--cb-biscuit); }
html body #dt-cb-inner::before, html body #dt-panel-title::before { --cb-forme: var(--cb-pepites); z-index: 2; background: var(--cb-pepite); }
html body #dt-cb-inner::after, html body #dt-panel-title::after { --cb-forme: var(--cb-framb); z-index: 3; background: var(--cb-framboise); }
/* Il se pose en tournant quand le bandeau monte */
@keyframes cb-pose { from { rotate: -80deg; scale: 0.3; } 65% { rotate: calc(var(--cb-r) + 9deg); scale: 1.06; } to { rotate: var(--cb-r); scale: 1; } }
html body #dt-cb.dt-in::before, html body #dt-cb.dt-in::after, html body #dt-cb.dt-in #dt-cb-inner::before, html body #dt-cb.dt-in #dt-cb-inner::after { animation: cb-pose 560ms var(--ease) 180ms backwards; }

/* Boutons : ceux du système (.btn plein pour refuser et accepter, .btn-2 contour pour personnaliser) */
html body .dt-btn { min-height: 48px; padding: 0 var(--esp-5); border-radius: 999px; font: 700 16px/1.15 var(--display); letter-spacing: -0.005em; text-align: center; white-space: nowrap; transition: transform 140ms var(--ease), box-shadow 140ms var(--ease), background 140ms var(--ease); }
html body .dt-btn:focus-visible, html body #dt-panel-close:focus-visible { outline: 3px solid var(--dt-accent); outline-offset: 3px; }
html body .dt-btn-primary, html body .dt-btn-dark { background: var(--dt-action); border: 2px solid var(--dt-action); color: var(--dt-on-action); box-shadow: 0 4px 0 var(--dt-action-shadow); }
html body .dt-btn-primary:hover, html body .dt-btn-dark:hover { background: var(--dt-action); border-color: var(--dt-action); transform: translateY(-2px); box-shadow: 0 6px 0 var(--dt-action-shadow); }
html body .dt-btn-primary:active, html body .dt-btn-dark:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--dt-action-shadow); }
html body .dt-btn-outline { background: transparent; border: 2px solid var(--dt-ink); color: var(--dt-ink); box-shadow: none; }
html body .dt-btn-outline:hover { background: var(--dt-surface-alt); border-color: var(--dt-ink); }

/* Panneau de préférences : une feuille sur un voile, un contour comme les fenêtres du site ; le cookie dans l'en-tête */
html body #dt-panel-bg { padding: var(--esp-4); background: color-mix(in srgb, var(--dt-il-dedans) 55%, transparent); }
html body #dt-panel { --cb-t: 60px; --cb-x: 26px; --cb-y: 18px; --cb-r: -12deg;
  max-width: 540px; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; background: var(--dt-paper); color: var(--dt-ink); border-radius: var(--r-panel); box-shadow: 0 0 0 2px var(--dt-ink); font: 400 16px/1.5 var(--text); }
html body #dt-panel-head { position: relative; min-height: 96px; padding: var(--esp-5) var(--esp-5) var(--esp-3) 104px; border-bottom: 0; align-items: flex-start; gap: var(--esp-4); }
html body #dt-panel-head h2 { position: static; padding-top: 6px; font: 800 26px/1.1 var(--display); letter-spacing: -0.025em; color: var(--dt-ink); }
html body #dt-panel-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: var(--r-control); background: var(--dt-surface-alt); color: var(--dt-ink); font-size: 18px; }
html body #dt-panel-close:hover { background: var(--dt-surface-alt-2); color: var(--dt-ink); }
html body #dt-panel-body { padding: 0 var(--esp-6); gap: 0; }
html body .dt-cat { align-items: center; gap: var(--esp-4); padding: var(--esp-4) 0; background: none; border: 0; border-top: 2px dotted var(--dt-surface-alt-2); border-radius: 0; }
html body .dt-cat-info strong { margin-bottom: 2px; font: 700 18px/1.25 var(--display); letter-spacing: -0.01em; color: var(--dt-ink); }
html body .dt-cat-info p { font-size: 15px; line-height: 1.45; color: var(--dt-ink-2); }
/* Interrupteurs : 44 px de haut pour le doigt. Éteint : un contour ; allumé : bleu-vert, et la pastille devient un petit
   cookie ; toujours actif : pétrole plein. */
html body .dt-toggle { width: 56px; height: 44px; margin: 0; }
html body .dt-toggle-track { inset: 6px 0; background: var(--dt-surface-alt); box-shadow: inset 0 0 0 2px var(--dt-ink-3); transition: background 180ms var(--ease); }
html body .dt-toggle-track::before { top: 5px; left: 5px; width: 22px; height: 22px; background: var(--dt-ink-3); box-shadow: none; transition: transform 180ms var(--ease); }
html body .dt-toggle input:checked + .dt-toggle-track { background: var(--dt-il-cadre); box-shadow: inset 0 0 0 2px var(--dt-il-cadre); }
html body .dt-toggle input:checked + .dt-toggle-track::before { transform: translateX(24px); box-shadow: 0 0 0 2px var(--dt-il-encre);
  background: radial-gradient(circle at 34% 36%, var(--dt-il-encre) 2.4px, transparent 2.9px), radial-gradient(circle at 66% 42%, var(--dt-il-encre) 1.8px, transparent 2.3px), radial-gradient(circle at 48% 70%, var(--dt-il-encre) 2.1px, transparent 2.6px), var(--dt-il-pap); }
html body .dt-toggle input:disabled + .dt-toggle-track { opacity: 1; background: var(--dt-ink); box-shadow: inset 0 0 0 2px var(--dt-ink); }
html body .dt-toggle input:disabled + .dt-toggle-track::before { background: var(--dt-paper); box-shadow: none; }
html body .dt-toggle:focus-within .dt-toggle-track { outline: 3px solid var(--dt-accent); outline-offset: 3px; }
/* Refuser et accepter côte à côte, à égalité ; enregistrer ses choix en dessous, dans le même bouton plein */
html body #dt-panel-footer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-4) var(--esp-3); margin-top: var(--esp-2); padding: var(--esp-5) var(--esp-6) var(--esp-6); border-top: 3px solid var(--dt-ink); }
html body #dt-panel-footer .dt-btn { flex: none; }
html body #dt-panel-footer .dt-btn-dark { grid-column: 1 / -1; }

/* Pied de page : « Gestion des cookies » est un bouton (il ouvre le panneau) ; un petit cookie le distingue des liens */
.pied li .pied-lien[data-dt-cookies-ouvrir] { gap: var(--esp-2); }
.pied li .pied-lien[data-dt-cookies-ouvrir]::before { content: ""; flex: none; width: 20px; height: 20px; rotate: -14deg; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='white'/%3E%3Cpolygon points='23.9,33.8 29.6,30.1 34.9,33.0 36.0,39.1 30.4,42.1 26.5,39.5' fill='black'/%3E%3Cpolygon points='48.5,26.7 53.6,27.0 57.0,30.6 54.7,34.0 50.6,34.2 46.7,31.4' fill='black'/%3E%3Cpolygon points='27.1,66.3 23.6,62.6 22.3,56.9 26.9,53.7 30.9,57.5 31.2,63.1' fill='black'/%3E%3Cpolygon points='50.5,72.8 49.5,77.5 44.5,79.9 41.1,75.1 42.1,70.2 47.5,67.0' fill='black'/%3E%3Cpolygon points='64.0,56.6 69.7,58.8 72.5,62.9 68.4,67.9 62.8,66.0 61.8,61.1' fill='black'/%3E%3Cpolygon points='64.5,47.1 62.4,49.2 59.9,47.6 59.3,44.9 61.6,43.4 65.5,43.7' fill='black'/%3E%3Cpolygon points='39.7,52.5 36.7,52.5 34.0,50.5 36.0,47.3 39.0,47.6 41.1,49.7' fill='black'/%3E%3Cpolygon points='48.1,50.3 52.0,53.1 49.4,57.5 45.8,59.3 41.0,57.5 40.6,52.7 44.1,49.9' fill='black'/%3E%3C/mask%3E%3Cg mask='url%28%23m%29'%3E%3Cpolygon points='8.5,53.0 8.8,43.0 12.5,34.0 19.3,26.0 27.4,19.0 36.8,14.3 46.0,11.4 57.7,12.7 59.9,15.6 61.4,19.4 63.2,21.6 65.1,23.1 67.2,24.1 69.7,24.7 71.3,26.5 72.2,29.0 73.4,31.0 74.8,32.7 76.6,34.2 78.9,35.5 81.3,36.9 81.5,39.5 82.1,41.8 83.3,43.9 85.2,46.0 88.9,48.1 90.8,50.7 90.9,53.6 91.1,56.4 89.2,67.7 84.7,77.1 76.9,84.6 67.5,91.8 57.5,94.5 46.4,95.8 35.3,91.8 24.9,85.5 16.2,79.1 11.7,70.1 8.3,61.0'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='white'/%3E%3Cpolygon points='23.9,33.8 29.6,30.1 34.9,33.0 36.0,39.1 30.4,42.1 26.5,39.5' fill='black'/%3E%3Cpolygon points='48.5,26.7 53.6,27.0 57.0,30.6 54.7,34.0 50.6,34.2 46.7,31.4' fill='black'/%3E%3Cpolygon points='27.1,66.3 23.6,62.6 22.3,56.9 26.9,53.7 30.9,57.5 31.2,63.1' fill='black'/%3E%3Cpolygon points='50.5,72.8 49.5,77.5 44.5,79.9 41.1,75.1 42.1,70.2 47.5,67.0' fill='black'/%3E%3Cpolygon points='64.0,56.6 69.7,58.8 72.5,62.9 68.4,67.9 62.8,66.0 61.8,61.1' fill='black'/%3E%3Cpolygon points='64.5,47.1 62.4,49.2 59.9,47.6 59.3,44.9 61.6,43.4 65.5,43.7' fill='black'/%3E%3Cpolygon points='39.7,52.5 36.7,52.5 34.0,50.5 36.0,47.3 39.0,47.6 41.1,49.7' fill='black'/%3E%3Cpolygon points='48.1,50.3 52.0,53.1 49.4,57.5 45.8,59.3 41.0,57.5 40.6,52.7 44.1,49.9' fill='black'/%3E%3C/mask%3E%3Cg mask='url%28%23m%29'%3E%3Cpolygon points='8.5,53.0 8.8,43.0 12.5,34.0 19.3,26.0 27.4,19.0 36.8,14.3 46.0,11.4 57.7,12.7 59.9,15.6 61.4,19.4 63.2,21.6 65.1,23.1 67.2,24.1 69.7,24.7 71.3,26.5 72.2,29.0 73.4,31.0 74.8,32.7 76.6,34.2 78.9,35.5 81.3,36.9 81.5,39.5 82.1,41.8 83.3,43.9 85.2,46.0 88.9,48.1 90.8,50.7 90.9,53.6 91.1,56.4 89.2,67.7 84.7,77.1 76.9,84.6 67.5,91.8 57.5,94.5 46.4,95.8 35.3,91.8 24.9,85.5 16.2,79.1 11.7,70.1 8.3,61.0'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }

/* Téléphone (600 px et moins) : le bandeau s'arrime au bas de l'écran, le cookie à cheval sur son bord haut, à côté du
   titre. Il ne dépasse pas 36 % de la hauteur (300 px au plus) : à 390 x 844, le bouton principal de l'accueil reste
   visible au-dessus ; le script réserve sa hauteur sous la page. Le titre et les trois boutons restent visibles, le texte
   défile entre eux s'il est trop long (une ombre en bas le signale). */
@media (max-width: 600px) {
  html body #dt-cb { --cb-t: 58px; --cb-x: 12px; --cb-y: -22px; --cb-r: -14deg;
    left: 0; right: 0; bottom: 0; max-width: none; max-height: none; overflow: visible; border-radius: var(--r-panel) var(--r-panel) 0 0; transform: translateY(calc(100% + 32px)); }
  html body #dt-cb-inner { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; max-height: min(36dvh, 300px); gap: var(--esp-2); padding: var(--esp-3) var(--g) calc(var(--esp-3) + env(safe-area-inset-bottom, 0px)); }
  html body #dt-cb-text { display: contents; }
  html body #dt-cb-text h2 { flex: none; min-height: 36px; margin: 0; padding-left: 62px; font-size: 19px; line-height: 1.2; }
  html body #dt-cb-text p { flex: 1 1 auto; min-height: 44px; overflow-y: auto; overscroll-behavior: contain; font-size: 14.5px; line-height: 1.45;
    background: linear-gradient(var(--dt-paper), var(--dt-paper)) bottom / 100% 14px no-repeat local, radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--dt-ink) 22%, transparent), transparent) bottom / 100% 10px no-repeat scroll; }
  html body #dt-cb-btns { flex: none; width: 100%; margin-top: var(--esp-1); gap: var(--esp-2); }
  html body #dt-cb-btns .dt-btn { width: 100%; padding: 0 var(--esp-3); font-size: 15px; line-height: 1.1; white-space: normal; }
  html body #dt-panel-bg { padding: var(--esp-3); }
  html body #dt-panel { --cb-t: 48px; --cb-x: 18px; --cb-y: 16px; max-height: calc(100dvh - 24px); }
  html body #dt-panel-head { min-height: 80px; padding: var(--esp-4) var(--esp-4) var(--esp-2) 80px; }
  html body #dt-panel-head h2 { font-size: 22px; }
  html body #dt-panel-body { padding: 0 var(--esp-5); }
  html body #dt-panel-footer { padding: var(--esp-4) var(--esp-5) var(--esp-5); }
  html body #dt-panel-footer .dt-btn { padding: 0 var(--esp-3); font-size: 15px; line-height: 1.1; white-space: normal; }
}
/* 420 px et moins : les trois boutons tiennent sur une ligne (« Tout refuser » et « Tout accepter » sur deux lignes) */
@media (max-width: 420px) {
  html body #dt-cb-btns { gap: 6px; }
  html body #dt-cb-btns .dt-btn { padding: 0 6px; font-size: 14px; }
}
/* Bandeau compact sur téléphone (validé par Yannis le 20/10/2026, blog#75) : il couvrait le quart du premier écran à
   390 x 844 et plus du tiers à 360 x 640. Le titre reste dans le DOM et à l'oreille (lecteurs d'écran) mais ne s'affiche
   plus ; le cookie, réduit, se pose à gauche du texte au lieu de mordre dessus ; marges resserrées. Obligation CNIL
   inchangée : « Tout refuser » et « Tout accepter » gardent la même taille, le même style et le même niveau, et le texte
   d'information reste au premier niveau ; plus long que celui du blog, il défile au-dessus des boutons (l'ombre du bas le
   signale). Hauteur plafonnée à 170 px, celle du bandeau du blog : 20 % de l'écran à 390 x 844, 27 % à 360 x 640.
   Même règle dans le blog : public/styles/site.css, section d'adaptation (là, le bandeau flotte à 8 px du bas). */
@media (max-width: 600px) {
  html body #dt-cb { --cb-t: 46px; --cb-x: 10px; --cb-y: 10px; }
  html body #dt-cb-inner { max-height: 170px; gap: var(--esp-2); padding-top: var(--esp-2); }
  html body #dt-cb-text h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html body #dt-cb-text p { min-height: 46px; padding-left: 52px; font-size: 14px; line-height: 1.4; }
  html body #dt-cb-btns { margin-top: 0; }
  html body #dt-cb-btns .dt-btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html body #dt-cb, html body #dt-panel-bg, html body #dt-panel, html body .dt-btn, html body .dt-toggle-track, html body .dt-toggle-track::before { transition: none; }
  html body #dt-cb, html body #dt-panel { transform: none; }
  html body #dt-cb.dt-in::before, html body #dt-cb.dt-in::after, html body #dt-cb.dt-in #dt-cb-inner::before, html body #dt-cb.dt-in #dt-cb-inner::after { animation: none; }
  html body .dt-btn-primary:hover, html body .dt-btn-primary:active, html body .dt-btn-dark:hover, html body .dt-btn-dark:active { transform: none; }
}
@media (forced-colors: active) {
  html body #dt-cb, html body #dt-panel { border: 2px solid CanvasText; }
  html body .dt-btn { border: 2px solid ButtonText; }
  html body #dt-cb::before, html body #dt-cb::after, html body #dt-cb-inner::before, html body #dt-cb-inner::after,
  html body #dt-panel-head::before, html body #dt-panel-head::after, html body #dt-panel-title::before, html body #dt-panel-title::after { display: none; }
  html body .dt-toggle-track { outline: 2px solid CanvasText; outline-offset: -2px; }
  html body .dt-toggle-track::before { forced-color-adjust: none; background: CanvasText; }
  html body .dt-toggle input:checked + .dt-toggle-track { forced-color-adjust: none; background: Highlight; }
  html body .dt-toggle input:checked + .dt-toggle-track::before { background: HighlightText; }
}
@media print {
  html body #dt-cb, html body #dt-panel-bg { display: none; }
}

/* ========== Rideau de papier (transition d'ouverture du diagnostic, validée par Yannis le 14/10) ==========
   Quatre bandes de papier (pétrole, bleu-vert, framboise, blanc) balaient l'écran en biais, le logo se pose au centre,
   puis les bandes repartent et découvrent la page. Sur l'accueil, le clic les fait entrer (.entre) ; sur /diagnostic,
   l'écran démarre couvert (sans classe) et le formulaire prêt les fait sortir (.sort). Tout en CSS : couvert dès le
   premier affichage, avant le JavaScript. Jetons de dt.css seulement ; ombre décalée sans flou sur le bord des bandes. */
/* Au-dessus du bandeau de consentement (#dt-cb 99990, #dt-panel-bg 99991) : il apparaît dès que le rideau est parti. */
.rideau { position: fixed; inset: 0; z-index: 100000; overflow: hidden; pointer-events: none; }
/* Le biais de 14 deg decale le haut et le bas d'une bande d'environ 0,17 fois la hauteur de l'ecran : sur un telephone
   en portrait, une largeur de 140 % laissait deux coins a decouvert. La bande s'elargit donc avec la hauteur. */
.rideau-bande { position: absolute; top: -20%; left: calc(-20% - 20vh); width: calc(140% + 40vh); height: 140%; transform: skewX(-14deg); box-shadow: 8px 0 0 var(--dt-ink); }
.rideau-bande:nth-child(1) { --i: 0; background: var(--dt-ink); }
.rideau-bande:nth-child(2) { --i: 1; background: var(--dt-il-cadre); }
.rideau-bande:nth-child(3) { --i: 2; background: var(--dt-accent); }
.rideau-bande:nth-child(4) { --i: 3; background: var(--dt-paper); }
.rideau-logo { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px;
  animation: rideau-respire 1.6s ease-in-out infinite; }
.rideau-lent { position: absolute; left: 0; right: 0; top: calc(50% + 84px); padding: 0 24px; text-align: center; font: 600 16px/1.4 var(--text); color: var(--dt-ink-2);
  opacity: 0; animation: rideau-apparait 400ms ease 8s forwards; }
/* Attente (sur /diagnostic, tant que le formulaire n'est pas prêt) : seul le logo respire, les bandes restent immobiles.
   Le dépôt 39d2fa9c les faisait reculer en boucle : sans carte graphique (Chromium de la CI, bureaux à distance), ces
   quatre calques plus grands que l'écran gelaient l'affichage jusqu'à 20 s après le départ du rideau, formulaire
   pourtant prêt (mesure du 14/10 ; JOURNAL-DECISIONS 2026-10-14 (6)). */
/* Entrée (au clic, sur la page de départ) : les bandes arrivent de la gauche, l'une après l'autre */
.rideau.entre .rideau-bande { animation: rideau-entre 520ms cubic-bezier(0.7, 0, 0.2, 1) calc(var(--i) * 90ms) both; }
.rideau.entre .rideau-logo { animation: rideau-pose 420ms cubic-bezier(0.2, 0.7, 0.2, 1) 560ms both; }
.rideau.entre .rideau-lent { display: none; }
/* Sortie (le formulaire est prêt) : le logo s'efface, les bandes repartent vers la droite, la blanche d'abord */
.rideau.sort .rideau-bande { animation: rideau-sort 520ms cubic-bezier(0.7, 0, 0.2, 1) calc((3 - var(--i)) * 80ms) both; }
.rideau.sort .rideau-logo { animation: rideau-part 220ms ease both; }
.rideau.sort .rideau-lent { display: none; }
@keyframes rideau-entre { from { transform: translateX(-140%) skewX(-14deg); } to { transform: translateX(0) skewX(-14deg); } }
@keyframes rideau-sort { from { transform: translateX(0) skewX(-14deg); } to { transform: translateX(140%) skewX(-14deg); } }
@keyframes rideau-pose { 0% { transform: scale(0) rotate(-30deg); } 70% { transform: scale(1.15) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes rideau-respire { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(-4deg); } }
@keyframes rideau-part { to { transform: scale(0.6); opacity: 0; } }
@keyframes rideau-apparait { to { opacity: 1; } }
/* Mouvement réduit : pas de balayage ; le rideau blanc et le logo apparaissent puis s'effacent en fondu */
@media (prefers-reduced-motion: reduce) {
  .rideau-bande:not(:nth-child(4)) { display: none; }
  .rideau-logo, .rideau.entre .rideau-logo { animation: none; }
  .rideau.entre { animation: rideau-apparait 200ms ease both; }
  .rideau.entre .rideau-bande, .rideau.sort .rideau-bande { animation: none; }
  .rideau.sort { animation: rideau-part 300ms ease both; }
  .rideau-lent { animation: none; opacity: 1; }
}
@media print { .rideau { display: none; } }