/* angle-mort.css · Mon EAU Nette & ma Ville (build 587)
   Le parcours « L'angle mort », six pièces d'un même puzzle.
   Pierre (09/10, 08h57) : « est-ce que c'est bien fait pour les copies
   écran, est-ce qu'on peut partager, est-ce que c'est agréable à lire ?
   Je veux que ça jette. Il ne faut pas qu'il y ait de pages qui ne donnent
   pas envie. »
   Règle de cette feuille : chaque bloc est une CARTE qui tient dans un écran
   de téléphone (690 px de haut à 390 de large, mesuré), porte sa signature
   (une capture dit toujours d'où elle vient) et se partage seule. */
:root{
  --bg:#EEF3F7;--ink:#13222E;--muted:#4A5B68;--rule:#DCE5EC;--nuit:#0A1B2A;--nuit2:#14324A;
  --or:#E6C76A;--or2:#B8860B;--bleu:#176AA3;--eau:#4FB3E8;--rouge:#C4182C;
  --acc:#4FB3E8;--acc2:#176AA3;
  --sans:"Poppins",system-ui,sans-serif;--serif:"Lora",Georgia,serif;color-scheme:light}
body.p1{--acc:#4FB3E8;--acc2:#176AA3}
body.p3{--acc:#E6C76A;--acc2:#9A6F0A}
body.p4{--acc:#B39DDB;--acc2:#6B3FB0}
body.p5{--acc:#F08A8A;--acc2:#A3121F}
body.p6{--acc:#F2B544;--acc2:#B86B0A}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:14px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;overflow-x:hidden}
a{color:var(--bleu)}
a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--or);outline-offset:2px;border-radius:8px}

/* ── En-tête : un chiffre qui frappe ── */
.tete{position:relative;overflow:hidden;background:radial-gradient(120% 100% at 50% 0%,#1B4565 0%,#0C2231 55%,#0A1B2A 100%);color:#F2F7FA;text-align:center;padding:26px 18px 30px}
.tete::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,transparent,var(--acc),transparent)}
.tete .sur{font:600 .7rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--or);margin:0 0 12px}
.tete .piece{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;padding:5px 13px;border-radius:999px;border:1px solid rgba(230,199,106,.5);font-size:.78rem;color:#F2E2AE;background:rgba(10,27,42,.4)}
.tete .choc{display:block;font:700 clamp(2.9rem,15vw,4.6rem)/1 var(--serif);color:var(--acc);margin:4px 0 6px;letter-spacing:-.01em;text-shadow:0 6px 30px rgba(0,0,0,.35)}
.tete .choc-sous{display:block;font-size:.92rem;color:#C9DCE8;margin:0 auto 16px;max-width:22em}
.tete h1{font:600 clamp(1.4rem,6vw,2.1rem)/1.22 var(--serif);margin:0 auto 10px;max-width:15em;text-wrap:balance}
.tete p.bonjour{margin:0 auto;max-width:27em;color:#A9C2D4;font-size:.9rem}

main{max-width:640px;margin:0 auto;padding:18px 14px 20px}

/* ── La carte ── */
.carte{position:relative;background:#fff;border-radius:20px;padding:20px 18px 14px;margin:0 0 18px;box-shadow:0 1px 0 rgba(10,27,42,.04),0 10px 28px rgba(10,27,42,.08);scroll-margin-top:14px;overflow:hidden}
.carte::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--acc),var(--acc2))}
.carte.sombre{background:linear-gradient(165deg,#0C2231,#14324A);color:#EAF2F8}
.carte.sombre .c-src{color:#A9C2D4}.carte.sombre .c-src a{color:#8FD0F2}
.carte.sombre .c-sig{color:#7F9BB0;border-top-color:rgba(169,194,212,.18)}
.c-eti{font:700 .68rem/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--acc2);margin:0 0 8px}
.carte.sombre .c-eti{color:var(--or)}
.carte h2{font:600 1.32rem/1.25 var(--serif);margin:0 0 10px;text-wrap:balance}
.carte p{margin:0 0 10px}
.carte .dit{font-size:1.02rem;line-height:1.55;text-align:center;margin:12px auto;max-width:28em;text-wrap:pretty}
.carte .dit b{color:var(--acc2)}.carte.sombre .dit b{color:#FFE7A0}
mark{background:linear-gradient(transparent 55%,#FFD56B 55%);color:inherit;padding:0 2px}

/* Le grand chiffre d'une carte */
.gc{text-align:center;margin:6px 0 4px}
.gc b{display:block;font:700 clamp(2.4rem,12vw,3.3rem)/1.05 var(--serif);color:var(--acc2)}
.carte.sombre .gc b{color:#FFE7A0}
.gc span{display:block;font-size:.88rem;color:var(--muted);margin-top:2px}
.carte.sombre .gc span{color:#C9DCE8}

/* Tuiles */
.tuiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 6px}
.tuiles.t3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tuiles div{background:#F3F7FA;border-radius:14px;padding:12px 8px;text-align:center;font-size:.76rem;line-height:1.3;color:var(--muted)}
.tuiles div b{display:block;font:700 1.3rem/1.1 var(--serif);color:var(--ink);margin-bottom:4px}
.tuiles div.fort{background:linear-gradient(160deg,var(--acc2),#0C2231);color:#EAF2F8}
.tuiles div.fort b{color:#fff}
.carte.sombre .tuiles div{background:rgba(255,255,255,.07);color:#C9DCE8}
.carte.sombre .tuiles div b{color:#fff}

/* Barres */
.bars{list-style:none;margin:10px 0 4px;padding:0}
.bars li{display:grid;grid-template-columns:minmax(0,8.2em) 1fr auto;align-items:center;gap:8px;padding:6px 2px;font-size:.86rem}
.bars li.moi{background:#FFF7E0;border-radius:8px;font-weight:700;padding-left:6px}
.bars .sp{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bars .sb{height:16px;background:#EEF2F5;border-radius:99px;overflow:hidden}
.bars .sb i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.bars .ss{text-align:right;white-space:nowrap;font:700 .86rem var(--sans)}

/* Compteur vivant */
.compteur{text-align:center;margin:8px 0}
.compteur .eti{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--or);margin:0 0 6px}
.compteur output{display:block;font:700 clamp(2rem,10vw,2.8rem)/1.1 ui-monospace,Menlo,monospace;color:#fff;font-variant-numeric:tabular-nums}
.compteur .sous{font-size:.8rem;color:#A9C2D4;margin:6px 0 0}
.compteur.rouge output{color:#FFB3B3}
.compteur+.compteur{margin-top:18px;padding-top:16px;border-top:1px solid rgba(169,194,212,.18)}

/* Frise */
.frise{list-style:none;margin:8px 0 0;padding:0 0 0 20px;border-left:3px solid #CFE2EF}
.frise li{position:relative;margin:0 0 12px;padding-left:4px;font-size:.88rem;line-height:1.45}
.frise li::before{content:"";position:absolute;left:-28px;top:4px;width:13px;height:13px;border-radius:50%;background:var(--acc);border:3px solid #fff;box-shadow:0 0 0 2px var(--acc)}
.frise .an{font:700 .76rem/1 ui-monospace,Menlo,monospace;color:var(--acc2);letter-spacing:.06em}
.frise b{display:block;font-size:.98rem;margin:1px 0}

/* Deux colonnes oui / non */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.duo div{border-radius:14px;padding:12px 10px;font-size:.82rem;line-height:1.4}
.duo .oui{background:#E6F5EC;color:#0F4D2C}.duo .non{background:#FDECEE;color:#5E0E18}
.duo h3{font:700 .8rem/1.2 var(--sans);margin:0 0 6px;text-transform:uppercase;letter-spacing:.06em}
.duo ul{margin:0;padding-left:1.05em}.duo li{margin:0 0 4px}

/* Étapes */
.etapes{list-style:none;counter-reset:e;margin:10px 0;padding:0;display:grid;gap:8px}
.etapes li{counter-increment:e;display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:start;background:#F3F7FA;border-radius:14px;padding:10px 12px;font-size:.88rem;line-height:1.4}
.etapes li::before{content:counter(e);display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(160deg,var(--acc),var(--acc2));color:#fff;font:700 1rem var(--serif)}
.etapes b{display:block}
.carte.sombre .etapes li{background:rgba(255,255,255,.07)}

/* Citation */
.citation{font:italic 600 1.28rem/1.45 var(--serif);text-align:center;margin:10px auto 8px;max-width:22em;text-wrap:balance}
.citation small{display:block;font:normal .82rem/1.5 var(--sans);color:var(--muted);margin-top:10px}
.carte.sombre .citation small{color:#A9C2D4}

/* Ratio de personnages */
.ratio{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 6px;text-align:center}
.ratio div{background:#F3F0FA;border-radius:14px;padding:12px 6px}
.ratio .ic{font-size:1.7rem;letter-spacing:2px;line-height:1.2}
.ratio b{display:block;font:700 1.15rem var(--serif);margin-top:4px}
.ratio span{font-size:.76rem;color:var(--muted)}

/* Repli */
.plus{margin-top:8px}
.plus>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:center;border:1px dashed #B9CAD6;border-radius:12px;font-weight:600;font-size:.86rem;color:var(--nuit);list-style:none;text-align:center;padding:4px 10px}
.plus>summary::-webkit-details-marker{display:none}
.plus[open]>summary{margin-bottom:10px}
.plus ol,.plus ul{padding-left:1.2em;font-size:.9rem}

/* Image */
figure.tableau{margin:4px 0 0;text-align:center}
figure.tableau img{width:100%;max-width:290px;height:auto;border-radius:14px;box-shadow:0 10px 26px rgba(10,27,42,.25)}
figure.tableau figcaption{font:italic 1rem var(--serif);color:var(--ink);margin-top:10px}
.illu{border-radius:14px;overflow:hidden;margin:4px 0 10px}

/* Gestes */
.gestes{display:grid;gap:8px;margin:10px 0 4px}
.gestes a{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;min-height:56px;padding:10px 12px;border-radius:14px;background:#FFF6E3;border:1px solid #F2D9A0;text-decoration:none;color:var(--ink);font-size:.9rem;line-height:1.35}
.gestes a .ic{font-size:1.5rem;text-align:center}
.gestes a b{display:block}
.gestes a .go{color:var(--acc2);font-weight:700}

/* Source et signature, en pied de chaque carte */
.c-src{display:block;font-size:.72rem;line-height:1.45;color:var(--muted);margin:10px 0 0}
.c-src a{word-break:break-word}
.c-sig{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 8px;margin:12px -2px 0;padding-top:10px;border-top:1px solid var(--rule);font-size:.68rem;color:#7A8C99;letter-spacing:.02em}
.c-sig .marque{flex:1 1 auto;min-width:0;line-height:1.35}
.c-sig .marque b{color:inherit;font-weight:700}
.c-part{display:flex;gap:6px;flex:0 0 auto}
.c-part button{min-height:36px;min-width:44px;padding:4px 10px;border-radius:999px;border:1px solid #C9D6E0;background:#F7FAFC;color:var(--nuit);font:600 .74rem var(--sans);cursor:pointer}
.carte.sombre .c-part button{background:rgba(255,255,255,.08);border-color:rgba(169,194,212,.35);color:#EAF2F8}
.c-part button:hover{border-color:var(--acc2)}
.c-msg{font-size:.74rem;color:var(--muted);text-align:center;margin:6px 0 0;min-height:0}
.c-msg:empty{display:none}

footer{text-align:center;color:var(--muted);font-size:.8rem;padding:14px 16px 34px;line-height:1.9}
footer .devise{display:block;font:italic 1rem var(--serif);color:var(--nuit);margin-bottom:4px}

@media (max-width:380px){.tuiles.t3{grid-template-columns:repeat(3,minmax(0,1fr))}.tuiles div b{font-size:1.12rem}.bars li{grid-template-columns:minmax(0,7.2em) 1fr auto;font-size:.8rem}}
@media (min-width:700px){main{padding-top:26px}.carte{padding:24px 26px 16px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}