/* Mel Résilience — feuille de style unique. Aucune police ni ressource externe (respect de la vie privée). */
:root{
  --navy:#1B2456; --navy-deep:#0E1433; --ink:#171A2B; --muted:#565B74; --paper:#F6F2E9; --card:#FFFFFF;
  --line:#E4DCC8; --gold:#B8862E; --gold-text:#86621A; --gold-light:#EFC777; --blue:#3654F5; --green:#0B7A55; --coral:#D2553A; --coral-text:#B0402A;
  --soft-blue:#EEF1FE; --soft-green:#EAF6F0; --soft-gold:#FBF4E4; --soft-coral:#FCEFEB;
  --shadow:0 1px 2px rgba(14,20,51,.06), 0 4px 16px rgba(14,20,51,.06);
  --shadow-lg:0 24px 60px rgba(14,20,51,.22);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --radius:14px; --nav-h:64px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --navy:#B9C6FB; --navy-deep:#070A18; --ink:#ECE9DF; --muted:#A3A8C3; --paper:#0C0F1C; --card:#151A2C;
    --line:#29304A; --gold:#EFC777; --gold-text:#EFC777; --blue:#8098FF; --green:#40D39F; --coral:#FF8D70; --coral-text:#FF8D70;
    --soft-blue:#1A2140; --soft-green:#11261F; --soft-gold:#2A2414; --soft-coral:#2E1A16;
    --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 24px 60px rgba(0,0,0,.6); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --navy:#B9C6FB; --navy-deep:#070A18; --ink:#ECE9DF; --muted:#A3A8C3; --paper:#0C0F1C; --card:#151A2C;
  --line:#29304A; --gold:#EFC777; --gold-text:#EFC777; --blue:#8098FF; --green:#40D39F; --coral:#FF8D70; --coral-text:#FF8D70;
  --soft-blue:#1A2140; --soft-green:#11261F; --soft-gold:#2A2414; --soft-coral:#2E1A16;
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 24px 60px rgba(0,0,0,.6); color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-padding-top:80px;}
body{margin:0; background:var(--paper); color:var(--ink); font:16px/1.6 var(--sans); -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));}
@media (min-width:900px){ body{padding-bottom:0;} }
img,svg{max-width:100%;}
a{color:var(--blue);}
h1,h2,h3{font-family:var(--serif); color:var(--navy); line-height:1.2; text-wrap:balance; margin:0;}
[hidden]{display:none!important;}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:6px;}
@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important; scroll-behavior:auto!important;} }
.wrap{width:100%; max-width:1120px; margin:0 auto; padding-inline:16px;}
@media (min-width:640px){ .wrap{padding-inline:24px;} }
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---------- En-tête ---------- */
.topbar{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top,0px);}
.topbar .wrap{display:flex; align-items:center; gap:16px; min-height:60px;}
.marque{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--navy); font:700 1.08rem var(--serif); white-space:nowrap;}
.marque .logo{width:38px; height:38px; display:block; flex-shrink:0;}
.marque .logo img{width:100%; height:100%; display:block;}
.nav-haut{display:none; margin-left:auto; gap:4px;}
@media (min-width:900px){ .nav-haut{display:flex;} }
.nav-haut a{padding:8px 12px; border-radius:9px; color:var(--muted); text-decoration:none; font-weight:600; font-size:.92rem;}
.nav-haut a:hover{color:var(--navy); background:var(--soft-blue);}
.nav-haut a[aria-current="page"]{color:var(--navy); background:var(--soft-gold);}

/* Barre du bas (téléphones et tablettes) */
.nav-bas{position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--card); border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(5,1fr); padding-bottom:env(safe-area-inset-bottom,0px); box-shadow:0 -4px 20px rgba(14,20,51,.06);}
@media (min-width:900px){ .nav-bas{display:none;} }
.nav-bas a{white-space:nowrap; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:var(--nav-h);
  color:var(--muted); text-decoration:none; font-size:.7rem; font-weight:600;}
.nav-bas a svg{width:22px; height:22px;}
.nav-bas a[aria-current="page"]{color:var(--navy);}
.nav-bas a[aria-current="page"] svg{color:var(--gold);}

/* ---------- Héros ---------- */
.heros{background:radial-gradient(900px 480px at 85% -10%, rgba(80,110,255,.35), transparent 60%),
  radial-gradient(700px 420px at -10% 110%, rgba(140,70,220,.28), transparent 60%), linear-gradient(150deg,#090D22,#161D4B 45%,#2B1F63);
  color:#F4F1E8; padding-block:40px 36px;}
@media (min-width:900px){ .heros{padding-block:64px 56px;} }
.heros h1{color:#fff; font-size:clamp(1.9rem, 5.5vw, 3.1rem); max-width:18ch;}
.heros .accroche{font-size:clamp(1rem,2.4vw,1.15rem); color:rgba(244,241,232,.85); max-width:52ch; margin:14px 0 0;}
.promesse{margin:14px 0 0; color:var(--gold-light); font-weight:700; font-size:.82rem; letter-spacing:.04em;}
.recherche{margin-top:22px; position:relative; max-width:620px;}
.recherche input{width:100%; min-height:54px; border-radius:14px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.96);
  color:#171A2B; padding:0 16px 0 48px; font:16px var(--sans);}
.recherche svg{position:absolute; left:16px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:#565B74;}
.badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;}
.badge{display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:#F4F1E8;}
.independant{margin:16px 0 0; font-size:.78rem; color:rgba(244,241,232,.8); max-width:60ch;}

/* ---------- Sections ---------- */
main{min-height:60vh;}
.vue{padding-block:28px 40px;}
.vue[hidden]{display:none;}
.titre-section{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px; margin:0 0 16px;}
.titre-section h2{font-size:clamp(1.35rem,3.4vw,1.8rem);}
.sous{color:var(--muted); margin:6px 0 0; max-width:65ch;}
.etapes{list-style:none; padding:0; margin:0 0 28px; display:grid; gap:10px; grid-template-columns:1fr;}
@media (min-width:700px){ .etapes{grid-template-columns:repeat(3,1fr);} }
.etapes li{display:flex; gap:12px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px;}
.etapes .num{flex-shrink:0; width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#EFC777,#B8862E); color:#0E1433; font:700 .9rem var(--serif); display:grid; place-items:center;}
.etapes b{display:block; color:var(--navy);}
.etapes span{font-size:.85rem; color:var(--muted);}

.saison{background:var(--soft-coral); border:1px solid color-mix(in srgb, var(--coral) 30%, var(--line)); border-radius:var(--radius); padding:16px; margin-bottom:24px;}
.saison h3{font-size:1.02rem; margin-bottom:10px;}
.puces{display:flex; flex-wrap:wrap; gap:8px;}
.puce{border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:999px; padding:9px 14px; font:600 .85rem var(--sans); cursor:pointer; min-height:40px; text-align:left;}
.puce:hover{border-color:var(--gold);}

.filtres{display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:18px; scrollbar-width:thin; -webkit-overflow-scrolling:touch;}
.filtre{flex-shrink:0; border:1px solid var(--line); background:var(--card); color:var(--muted); border-radius:999px; padding:8px 14px; font:600 .85rem var(--sans); cursor:pointer; min-height:40px; white-space:nowrap;}
.filtre[aria-pressed="true"]{background:var(--navy); color:var(--paper); border-color:var(--navy);}

.categorie{margin-bottom:28px;}
.categorie h3{display:flex; align-items:center; gap:10px; font-size:1.1rem; margin-bottom:12px;}
.categorie h3 .ico{width:32px; height:32px; border-radius:9px; background:var(--soft-gold); color:var(--gold-text); display:grid; place-items:center; flex-shrink:0;}
.categorie h3 .ico svg{width:17px; height:17px;}
.grille{display:grid; gap:12px; grid-template-columns:1fr;}
@media (min-width:600px){ .grille{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1024px){ .grille{grid-template-columns:repeat(3,1fr);} }
.carte{display:flex; flex-direction:column; gap:8px; text-align:left; width:100%; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; cursor:pointer; font:inherit; color:inherit; box-shadow:var(--shadow); transition:transform .15s, border-color .15s;}
.carte:hover{transform:translateY(-2px); border-color:color-mix(in srgb, var(--gold) 60%, var(--line));}
.carte .nom{font-weight:700; color:var(--ink); line-height:1.35;}
.carte .desc{font-size:.85rem; color:var(--muted); line-height:1.45; flex:1;}
.carte .pied{display:flex; justify-content:space-between; align-items:center; gap:8px;}
.prix{font:700 1rem var(--serif); color:var(--navy); background:var(--soft-gold); padding:3px 10px; border-radius:8px; font-variant-numeric:tabular-nums;}
.acquis{font-size:.78rem; font-weight:700; color:var(--green);}
.cta{font-size:.85rem; font-weight:700; color:var(--blue);}
.vide{color:var(--muted); padding:20px 0;}

.offres{display:grid; gap:20px 12px; grid-template-columns:1fr; margin-bottom:28px; padding-top:12px;}
/* Les 2 offres phares (pass, Pack Étranger) en grand sur la 1re ligne, les 3 petits packs en dessous. */
@media (min-width:760px){ .offres{grid-template-columns:repeat(6,1fr);} .offres .offre{grid-column:span 2;} .offres .offre.vedette, .offres .offre.meilleure{grid-column:span 3;} }
.offre .autres{list-style:none; margin-left:-18px; color:var(--muted); font-style:italic;}
.offre{background:var(--card); border:1px solid color-mix(in srgb, var(--gold) 40%, var(--line)); border-radius:var(--radius); padding:18px; display:flex; flex-direction:column; gap:10px;}
.offre{position:relative;}
.offre .etiquette{position:absolute; top:-11px; right:14px; padding:3px 10px; border-radius:999px; font:700 .72rem/1.3 var(--sans); background:#0E1433; color:#fff; letter-spacing:.02em; box-shadow:0 0 0 2px var(--card);}
.offre.meilleure{border-color:var(--coral); box-shadow:0 0 0 1px var(--coral);}
.offre.meilleure .etiquette{background:#A8321E;}
.offre.vedette{background:linear-gradient(160deg, var(--soft-gold), var(--card));}
.offre h3{font-size:1.1rem;}
.offre p{margin:0; font-size:.88rem; color:var(--muted);}
.offre .montant{font:700 1.5rem var(--serif); color:var(--navy);}
.offre .montant s{font:500 .9rem var(--sans); color:var(--muted); margin-right:6px;}
.offre ul{margin:0; padding-left:18px; font-size:.82rem; color:var(--ink);}

/* ---------- Boutons, champs ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 20px; border-radius:11px; border:0;
  font:700 .98rem var(--sans); cursor:pointer; text-decoration:none; background:var(--navy); color:var(--paper);}
.btn:hover{filter:brightness(1.12);}
.btn.or{background:linear-gradient(135deg,#EFC777,#B8862E); color:#0E1433;}
.btn.clair{background:var(--card); color:var(--navy); border:1px solid var(--line);}
.btn.plein{width:100%;}
.btn[disabled]{opacity:.45; cursor:not-allowed; filter:grayscale(.3);}
.champ{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.champ label{font-size:.85rem; font-weight:600; color:var(--muted);}
input,select,textarea{font:16px var(--sans); color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; width:100%; min-height:48px;}
textarea{min-height:110px; resize:vertical;}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent);}
.deux{display:grid; gap:0 14px; grid-template-columns:1fr;}
@media (min-width:640px){ .deux{grid-template-columns:1fr 1fr;} }

/* ---------- Fenêtre document ---------- */
dialog.fenetre{border:0; padding:0; background:var(--card); color:var(--ink); width:100%; max-width:760px; max-height:100%; height:100%; margin:0; border-radius:0;}
@media (min-width:760px){ dialog.fenetre{height:auto; max-height:calc(100dvh - 48px); margin:auto; border-radius:18px; box-shadow:var(--shadow-lg);} }
dialog.fenetre::backdrop{background:rgba(9,13,31,.62); backdrop-filter:blur(4px);}
.fenetre-tete{position:sticky; top:0; z-index:2; background:var(--card); border-bottom:1px solid var(--line); padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px; display:flex; gap:12px; align-items:flex-start;}
.fenetre-tete h2{font-size:1.2rem; flex:1;}
.fermer{flex-shrink:0; width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:1.4rem; cursor:pointer; line-height:1;}
.fenetre-corps{padding:16px 16px calc(24px + env(safe-area-inset-bottom,0px)); overflow:auto;}
@media (min-width:760px){ .fenetre-corps{padding:20px 24px 24px;} }
.sous + form, .meta + form{margin-top:14px;}
.info{font-size:.85rem; line-height:1.55; border-radius:10px; padding:12px 14px; margin:0 0 14px;}
.info.vert{background:var(--soft-green); border:1px solid color-mix(in srgb, var(--green) 30%, var(--line));}
.info.bleu{background:var(--soft-blue); border:1px solid color-mix(in srgb, var(--blue) 25%, var(--line));}
.info.or{background:var(--soft-gold); border:1px solid color-mix(in srgb, var(--gold) 35%, var(--line));}
.meta{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px;}
.etiquette{font-size:.75rem; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--soft-green); color:var(--green);}
.apercu{position:relative; background:#fff; color:#15171f; border:1px solid var(--line); border-radius:12px; padding:22px 20px; font:15px/1.65 Georgia,"Times New Roman",serif;
  white-space:pre-wrap; word-break:break-word; min-height:180px; margin:6px 0 16px;}
.apercu.partiel{padding-bottom:110px;}
.apercu .flou{position:absolute; left:0; right:0; bottom:0; height:120px; border-radius:0 0 12px 12px;
  background:linear-gradient(transparent, #fff 55%); display:flex; align-items:flex-end; justify-content:center; padding-bottom:16px; font:600 .85rem var(--sans); color:#565B74;}
.achat{background:var(--soft-gold); border:1px solid color-mix(in srgb, var(--gold) 40%, var(--line)); border-radius:14px; padding:16px; display:grid; gap:12px;}
.achat .ligne{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.achat .ligne b{font:700 1.5rem var(--serif); color:var(--navy);}
.case{display:flex; gap:12px; align-items:flex-start; font-size:.86rem; line-height:1.5; cursor:pointer;}
.case input{width:22px; height:22px; min-height:0; flex-shrink:0; margin-top:2px; accent-color:var(--navy);}
.petit{font-size:.78rem; color:var(--muted); margin:0;}
.actions{display:flex; flex-wrap:wrap; gap:10px; margin:10px 0;}
.actions .btn{flex:1 1 200px;}
.envoi{margin-top:16px;}
.envoi ol{margin:6px 0 0; padding-left:20px; display:grid; gap:4px;}

/* ---------- Calculateurs ---------- */
.calcs{display:grid; gap:16px; grid-template-columns:1fr;}
@media (min-width:1000px){ .calcs{grid-template-columns:1fr 1fr;} }
.calc{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);}
.calc h3{font-size:1.08rem; margin-bottom:14px;}
.resultat{margin-top:14px; background:var(--soft-green); border:1px solid color-mix(in srgb, var(--green) 30%, var(--line)); border-radius:12px; padding:14px; font-size:.9rem;}
.resultat p{margin:4px 0;}
.gros{font:700 1.7rem var(--serif); color:var(--navy); font-variant-numeric:tabular-nums;}

/* ---------- Suivi et achats ---------- */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
table{width:100%; border-collapse:collapse; font-size:.9rem;}
th{text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:8px; border-bottom:2px solid var(--line);}
td{padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:middle;}
.ajout{display:grid; gap:10px; grid-template-columns:1fr; margin-bottom:16px;}
@media (min-width:640px){ .ajout{grid-template-columns:2fr 1fr auto;} }
.liste-achats{display:grid; gap:10px;}
.ligne-achat{display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px;}

/* ---------- Pages de contenu ---------- */
.page{padding-block:32px 48px;}
.page .contenu{max-width:720px;}
.page h1{font-size:clamp(1.7rem,4.5vw,2.4rem); margin-bottom:12px;}
.page h2{font-size:1.2rem; margin:26px 0 8px;}
.page p,.page li{max-width:68ch;}
.fil{font-size:.85rem; color:var(--muted); margin-bottom:14px;}
.fil a{color:var(--muted);}
.a-completer{background:#FFF1C2; color:#7A5300; padding:0 5px; border-radius:4px; font-weight:600;}
.encart{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin:18px 0;}

/* ---------- Pied de page ---------- */
footer.pied{border-top:1px solid var(--line); padding-block:28px 32px; font-size:.85rem; color:var(--muted);}
footer.pied .liens{display:flex; flex-wrap:wrap; gap:2px 18px; margin:12px 0;}
footer.pied .liens a, footer.pied .liens button.lien{display:inline-flex; align-items:center; min-height:32px;}
footer.pied a, footer.pied button.lien{color:var(--navy); font:600 .85rem var(--sans); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px;}

/* ---------- Notifications ---------- */
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom,0px)); z-index:100;
  max-width:min(92vw,480px); background:var(--navy); color:var(--paper); padding:12px 16px; border-radius:12px; box-shadow:var(--shadow-lg); font-weight:600; font-size:.9rem;}
@media (min-width:900px){ .toast{bottom:24px;} }
.installer{display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:var(--soft-blue); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:20px; font-size:.88rem;}

/* =====================================================================
   Version premium : héros vivant, guide, recherche éclair, lettre vivante
   ===================================================================== */
/* Barre du haut : bouton de recherche */
.outils{margin-left:auto; display:flex; gap:8px;}
@media (min-width:900px){ .outils{margin-left:24px; order:3;} .nav-haut{margin-left:auto;} }
.outil{display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 12px; border-radius:11px; border:1px solid var(--line); background:var(--card); color:var(--muted); font:600 .88rem var(--sans); cursor:pointer;}
.outil svg{width:18px; height:18px;}
.outil:hover{border-color:var(--gold); color:var(--navy);}
.outil-lib{display:none;}
@media (min-width:600px){ .outil-lib{display:inline;} }
kbd{font:600 .72rem var(--sans); padding:2px 6px; border-radius:6px; border:1px solid var(--line); background:var(--paper); color:var(--muted);}
.outil kbd{display:none;}
@media (min-width:900px) and (hover:hover){ .outil kbd{display:inline;} }

/* Héros */
.heros{padding-block:36px 28px;}
@media (min-width:900px){ .heros{padding-block:64px 36px;} }
.heros-grille{display:grid; gap:40px; align-items:center;}
@media (min-width:980px){ .heros-grille{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);} }
.surtitre{margin:0 0 12px; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-light);}
.heros h1{letter-spacing:-.015em;}
.rapides{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.rapide{min-height:38px; padding:0 13px; border-radius:999px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#F4F1E8; font:600 .84rem var(--sans); cursor:pointer; transition:background .15s, border-color .15s;}
.rapide:hover{background:rgba(255,255,255,.16); border-color:var(--gold-light);}
.guide-lien{margin-top:16px; background:none; border:0; padding:6px 0; color:var(--gold-light); font:700 .95rem var(--sans); cursor:pointer; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px;}
.guide-lien:hover{text-decoration-thickness:2px;}

/* Démonstration : la lettre qui se remplit */
.demo{position:relative; display:none;}
@media (min-width:980px){ .demo{display:block;} }
.papier{background:#FFFDF8; color:#1d1f2b; border-radius:6px; padding:34px 36px 30px; font:14.5px/1.6 Georgia,"Times New Roman",serif; transform:rotate(-1.2deg);
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 30px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.06);}
.papier p{margin:0 0 10px;}
.p-exp{margin-bottom:16px;}
.p-dest{margin:0 0 14px auto; width:max-content; max-width:60%; text-align:left;}
.p-date{text-align:right; margin-bottom:14px; font-size:13.5px;}
.p-objet{margin-bottom:14px; font-weight:700;}
.p-objet i{font-weight:400;}
.champ-vif{background:linear-gradient(transparent 58%, rgba(239,199,119,.65) 58%); padding:0 2px; border-radius:2px;}
.champ-vif.frappe{animation:frappe .6s steps(12) both;}
@keyframes frappe{from{clip-path:inset(0 100% 0 0);} to{clip-path:inset(0 0 0 0);}}
.loi{color:#0E6B4B; border-bottom:2px solid rgba(14,143,99,.35);}
.p-lignes{display:grid; gap:9px; margin-top:6px;}
.p-lignes i{display:block; height:8px; border-radius:4px; background:#ECE7DA;}
.p-lignes i:nth-child(2){width:88%;} .p-lignes i:nth-child(3){width:54%;}
.demo-pastille{position:absolute; padding:9px 14px; border-radius:12px; background:#fff; color:#0E1433; font:700 .82rem var(--sans); box-shadow:0 14px 34px rgba(0,0,0,.28);}
.demo-p1{left:28px; top:-18px; animation:flotte 5s ease-in-out infinite;}
.demo-p2{right:-10px; bottom:14px; animation:flotte 5s ease-in-out 1.6s infinite;}
@keyframes flotte{0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);}}

.chiffres{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin:36px 0 0; border-radius:14px; overflow:hidden; background:rgba(255,255,255,.12);}
@media (min-width:760px){ .chiffres{grid-template-columns:repeat(4,1fr);} }
.chiffres div{background:rgba(9,13,34,.55); padding:14px 16px;}
.chiffres dt{font:700 1.6rem var(--serif); color:#fff; font-variant-numeric:tabular-nums;}
.chiffres dd{margin:0; font-size:.8rem; color:rgba(244,241,232,.82);}

/* Carte « guide » */
.guide-carte{display:flex; align-items:center; gap:14px; width:100%; margin:0 0 20px; padding:16px 18px; border-radius:16px; cursor:pointer; text-align:left; font:inherit; color:inherit;
  border:1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); background:linear-gradient(120deg, var(--soft-gold), var(--card) 70%); box-shadow:var(--shadow); transition:transform .15s;}
.guide-carte:hover{transform:translateY(-2px);}
.guide-ico{font-size:1.8rem; line-height:1;}
.guide-txt{display:flex; flex-direction:column; gap:2px; flex:1;}
.guide-txt b{color:var(--navy); font:700 1.05rem var(--serif);}
.guide-txt span{font-size:.88rem; color:var(--muted);}
.guide-fleche{font-size:1.4rem; color:var(--gold-text);}

/* Guide dans la fenêtre */
.guide-fil{display:flex; justify-content:space-between; align-items:center; font-size:.8rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px;}
.lien-retour{background:none; border:0; color:var(--blue); font:600 .88rem var(--sans); cursor:pointer; text-transform:none; letter-spacing:0; min-height:40px;}
.guide-question{font:700 clamp(1.3rem,4vw,1.6rem) var(--serif); color:var(--navy); margin:4px 0 16px;}
.guide-choix{display:grid; gap:10px;}
@media (min-width:600px){ .guide-choix{grid-template-columns:1fr 1fr;} }
.choix{display:flex; align-items:center; gap:12px; min-height:64px; padding:12px 16px; border-radius:14px; border:1px solid var(--line); background:var(--card); color:var(--ink); font:600 .98rem var(--sans); text-align:left; cursor:pointer; transition:border-color .15s, transform .15s;}
.choix:hover,.choix:focus-visible{border-color:var(--gold); transform:translateY(-1px);}
.choix-ico{font-size:1.5rem;}
.choix span:nth-child(2){flex:1;}
.choix-fleche{color:var(--gold-text); font-size:1.2rem;}
.guide-resultats{display:grid; gap:10px; margin-bottom:14px;}
.carte.conseil{border-color:var(--gold); background:linear-gradient(160deg, var(--soft-gold), var(--card) 60%);}
.carte .etiquette{align-self:flex-start;}

/* Recherche éclair */
dialog.palette{border:0; padding:0; width:min(640px, calc(100% - 24px)); max-height:min(72dvh, 620px); margin:12dvh auto auto; border-radius:18px; background:var(--card); color:var(--ink); box-shadow:var(--shadow-lg); display:none; flex-direction:column; overflow:hidden;}
dialog.palette[open]{display:flex;}
dialog.palette::backdrop{background:rgba(9,13,31,.55); backdrop-filter:blur(3px);}
.palette-tete{display:flex; align-items:center; gap:10px; padding:10px 12px 10px 16px; border-bottom:1px solid var(--line);}
.palette-tete svg{width:20px; height:20px; color:var(--muted); flex-shrink:0;}
.palette-tete input{border:0; box-shadow:none!important; padding:10px 0; min-height:48px; font-size:1.05rem; background:transparent;}
.palette-liste{list-style:none; margin:0; padding:6px; overflow:auto;}
.palette-liste li{display:grid; grid-template-columns:auto 1fr auto; gap:4px 12px; align-items:center; padding:11px 12px; border-radius:11px; cursor:pointer;}
.palette-liste li.actif{background:var(--soft-gold);}
.p-type{font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); min-width:92px;}
.p-titre{font-weight:600; color:var(--ink);}
.p-vide{color:var(--muted); cursor:default!important;}
@media (max-width:560px){ .palette-liste li{grid-template-columns:1fr auto;} .p-type{grid-column:1 / -1; min-width:0;} dialog.palette{margin-top:calc(8px + env(safe-area-inset-top,0px));} }
.palette-aide{margin:0; padding:10px 16px; border-top:1px solid var(--line); font-size:.78rem; color:var(--muted); display:none;}
@media (hover:hover) and (pointer:fine){ .palette-aide{display:block;} }

/* Lettre vivante */
mark.vif{background:linear-gradient(transparent 55%, rgba(239,199,119,.7) 55%); color:inherit; padding:0 1px; border-radius:2px; animation:eclat .9s ease-out;}
mark.manque{background:#FDECEA; color:#A12F1C; padding:0 3px; border-radius:4px;}
@keyframes eclat{from{background-color:rgba(239,199,119,.55);} to{background-color:transparent;}}
.jauge{display:grid; gap:6px; margin:6px 0 12px;}
.jauge-barre{height:8px; border-radius:99px; background:var(--line); overflow:hidden;}
.jauge-barre i{display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg, var(--gold), #EFC777); transition:width .35s ease;}
.jauge.complete .jauge-barre i{background:linear-gradient(90deg, var(--green), #40D39F);}
.jauge-txt{font-size:.82rem; font-weight:600; color:var(--muted);}
.barre-fenetre{position:sticky; bottom:calc(-24px - env(safe-area-inset-bottom,0px)); margin:16px -16px calc(-24px - env(safe-area-inset-bottom,0px)); padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  display:flex; align-items:center; justify-content:space-between; gap:12px; background:color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter:blur(10px); border-top:1px solid var(--line);}
@media (min-width:760px){ .barre-fenetre{display:none;} }

/* Comparatif, FAQ, références */
.comparatif{margin-bottom:32px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card);}
.comparatif table{min-width:560px;}
.comparatif th[scope="row"]{font-size:.9rem; text-transform:none; letter-spacing:0; color:var(--ink); border-bottom:1px solid var(--line); font-weight:600;}
.comparatif thead th{padding:14px 12px;}
.comparatif td,.comparatif th{padding:12px;}
.comparatif .nous{background:var(--soft-gold); color:var(--navy); font-weight:700;}
.faq{display:grid; gap:8px; margin-bottom:24px; max-width:820px;}
.faq details{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:0 16px;}
.faq summary{cursor:pointer; list-style:none; padding:14px 0; font-weight:700; color:var(--navy); display:flex; justify-content:space-between; gap:12px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+'; color:var(--gold-text); font-size:1.3rem; line-height:1; transition:transform .2s;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{margin:0 0 14px; color:var(--muted); font-size:.92rem;}
.refs{padding-left:0; list-style:none; display:grid; gap:6px;}
.refs li{padding:8px 12px; border-left:3px solid var(--green); background:var(--soft-green); border-radius:0 8px 8px 0; font-size:.9rem;}

/* Transitions entre les vues */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){animation:.18s ease-out both fondu-sortie;}
  ::view-transition-new(root){animation:.24s ease-out both fondu-entree;}
}
@keyframes fondu-sortie{to{opacity:0;}}
@keyframes fondu-entree{from{opacity:0; transform:translateY(6px);}}

/* ---------------- Signature au doigt ---------------- */
.avertissement{margin:8px 2px 4px; font-style:italic;}
.signature-bloc{margin:6px 0 16px; padding:16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card);}
.signature-bloc h3{font-size:1.1rem; margin-bottom:4px;}
.signature-bloc .petit{margin-bottom:10px;}
.signature-bloc .confidentiel{margin:10px 0 0;}
.pad{position:relative; background:#fff; border:1.5px dashed color-mix(in srgb, var(--navy) 35%, #d8d2c2); border-radius:12px; overflow:hidden;
  background-image:linear-gradient(180deg,#fff, #fdfbf6);}
.pad-toile{display:block; width:100%; height:clamp(150px, 34vw, 210px); touch-action:none; cursor:crosshair; -webkit-user-select:none; user-select:none;}
.pad-ligne{position:absolute; left:8%; right:8%; bottom:26%; border-bottom:1.5px solid #d9d3c4; pointer-events:none;}
.pad-ligne::before{content:"×"; position:absolute; left:-18px; bottom:-4px; color:#b3ab98; font:600 18px/1 var(--sans);}
.pad-indice{position:absolute; inset:0; display:grid; place-items:center; color:#b3ab98; font:italic 1.35rem/1 var(--serif); pointer-events:none; letter-spacing:.02em;}
@media (orientation:landscape) and (max-height:500px){ .pad-toile{height:58vh;} }
.pad:focus-within, .pad:hover{border-color:var(--gold);}
.signature-lettre{display:block; height:62px; max-width:220px; object-fit:contain; object-position:left center; margin:0 0 2px -4px;}
.signee{display:flex; align-items:center; gap:12px;}
.signature-mini{height:40px; max-width:120px; object-fit:contain; background:#fff; border-radius:6px; padding:2px 6px; flex:none;}

/* ---------------- Tableau de bord privé ---------------- */
#tableau{max-width:1040px;}
#tableau h2{margin:0 0 12px; font-size:1.15rem;}
.tb-tete{margin-bottom:18px;}
.tb-connexion{max-width:420px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); margin-bottom:22px;}
.tb-connexion .btn{width:100%; margin-bottom:12px;}
.tb-barre{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;}
.segments{display:inline-flex; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:4px; gap:2px;}
.segments button{border:0; background:none; color:var(--muted); font:600 .88rem var(--sans); padding:9px 14px; border-radius:9px; cursor:pointer; min-height:40px;}
.segments button[aria-pressed="true"]{background:var(--navy); color:var(--card);}
.tb-outils{display:flex; gap:16px;}
.tb-outils .lien{background:none; border:0; color:var(--navy); font:600 .85rem var(--sans); cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:6px 0;}
.tb-tuiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:14px;}
@media (min-width:820px){ .tb-tuiles{grid-template-columns:repeat(4,minmax(0,1fr));} }
.tb-tuile{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; display:flex; flex-direction:column; gap:4px; min-width:0; box-shadow:var(--shadow);}
.tb-tuile-titre{font-size:.78rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;}
.tb-tuile-valeur{font:700 clamp(1.3rem,4vw,1.75rem)/1.15 var(--serif); color:var(--navy); font-variant-numeric:tabular-nums; overflow-wrap:anywhere;}
.tb-tuile-detail{font-size:.78rem; color:var(--muted);}
.tb-conseil{font-size:.9rem;}
.tb-carte{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:14px; box-shadow:var(--shadow); min-width:0;}
.tb-carte-tete{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap;}
.tb-deux{display:grid; gap:14px;}
@media (min-width:820px){ .tb-deux{grid-template-columns:1fr 1fr;} .tb-deux .tb-carte{margin-bottom:0;} .tb-deux{margin-bottom:14px;} }
.tb-jours{display:grid; grid-template-columns:repeat(var(--n,30),minmax(0,1fr)); align-items:end; gap:2px; height:150px; padding-top:6px; border-bottom:1px solid var(--line);}
.tb-col{height:100%; display:flex; align-items:flex-end; cursor:default;}
.tb-col i{display:block; width:100%; background:var(--gold); border-radius:4px 4px 0 0; min-height:0; transition:height .4s ease;}
.tb-col:hover i{background:var(--navy);}
.tb-col.zero i{background:var(--line); height:2px!important;}
.tb-axe{display:flex; justify-content:space-between; gap:8px; margin-top:6px;}
.tb-barres{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
.tb-barres li{display:grid; grid-template-columns:1fr auto; grid-template-areas:"lib val" "piste piste"; gap:4px 12px; align-items:baseline;}
.tb-lib{grid-area:lib; font-size:.9rem; min-width:0; overflow-wrap:anywhere;}
.tb-val{grid-area:val; font-size:.85rem; white-space:nowrap; font-variant-numeric:tabular-nums;}
.tb-val span{color:var(--muted);}
.tb-piste{grid-area:piste; height:8px; background:color-mix(in srgb, var(--line) 60%, transparent); border-radius:99px; overflow:hidden;}
.tb-piste i{display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-light)); border-radius:99px;}
.tb-vide{color:var(--muted); font-size:.9rem;}
.tb-liens .puces{margin-bottom:12px;}
.tb-lien-ligne{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.tb-lien{flex:1 1 260px; min-width:0; overflow-wrap:anywhere; background:var(--soft-gold); border:1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); border-radius:10px; padding:12px 14px; font:600 .95rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--ink);}
.tb-lien.vide{color:var(--muted); font-weight:400; font-family:var(--sans);}
.tb-lien-ligne .btn{flex:0 0 auto;}
.tb-liens .petit{margin-top:10px;}
.tb-liens .sous{margin-bottom:14px;}
#tb-contenu > .petit:last-child{margin-bottom:18px;}
.tb-barres + .petit{margin-top:12px;}

/* Pages légales : informations restant à remplir */
.a-completer{background:#FFE58A; color:#3a2d00; padding:0 4px; border-radius:4px; font-weight:700;}
.page .tb-carte h2{margin-top:0;}
.page .contenu:has(#tb-contenu){max-width:none;}
.page .meta{margin-top:14px;}

/* ---------- Un seul appel à l'action, bien visible ---------- */
.cta-principal{margin-top:22px; display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.btn.cta{min-height:56px; padding:0 26px; font-size:1.05rem; border-radius:14px; white-space:nowrap; box-shadow:0 10px 30px rgba(239,199,119,.28);}
.btn.cta span{transition:transform .2s;}
.btn.cta:hover span{transform:translateX(3px);}
.cta-note{margin:0; font-size:.82rem; color:rgba(244,241,232,.82);}
.heros .recherche{margin-top:22px;}
.rapides-titre{margin:16px 0 0; font-size:.8rem; font-weight:600; color:rgba(244,241,232,.8);}
.rapides{margin-top:8px;}
.rapide{min-height:36px; font-size:.8rem;}
@media (max-width:640px){
  .btn.cta{width:100%; font-size:1rem; padding:0 16px;}
  .cta-principal{align-items:stretch; text-align:center;}
  /* Les raccourcis tiennent sur une ligne qu'on fait glisser, au lieu de six lignes. */
  .rapides{flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; scroll-padding-inline:16px; margin-inline:-16px; padding:2px 16px 6px; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent);
            mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 28px),transparent);}
  .rapides::-webkit-scrollbar{display:none;}
  .rapide{flex:0 0 auto; scroll-snap-align:start; white-space:nowrap;}
}
@media (prefers-reduced-motion:reduce){ .btn.cta span{transition:none;} }

/* ---------- Validation des champs ---------- */
.champ .erreur{display:block; margin-top:4px; font-size:.78rem; font-weight:600; color:var(--coral-text);}
.champ [aria-invalid="true"]{border-color:var(--coral-text); box-shadow:0 0 0 3px color-mix(in srgb, var(--coral) 18%, transparent);}

/* ---------- Page introuvable ---------- */
.introuvable .recherche-404{display:flex; gap:8px; margin:18px 0 8px; flex-wrap:wrap;}
.introuvable .recherche-404 input{flex:1 1 220px; min-height:48px; padding:0 14px; border-radius:11px; border:1px solid var(--line); background:var(--card); color:var(--ink); font:inherit;}
.introuvable .populaires{display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); padding:0; list-style:none;}
.introuvable .populaires a{display:flex; align-items:center; min-height:48px; padding:10px 14px; border-radius:11px; background:var(--card); border:1px solid var(--line); color:var(--navy); font-weight:600; text-decoration:none;}
.introuvable .populaires a:hover{border-color:var(--gold);}
.heros-texte{min-width:0;} /* la ligne de raccourcis glisse dans sa colonne au lieu d'élargir la page */
.categorie .cat-note{margin:-4px 0 14px; max-width:72ch;}

/* ---------- À la une : documents chauds ---------- */
.alaune{margin:0 0 22px;}
.alaune-titre{display:flex; align-items:center; gap:10px; font:700 1.15rem var(--serif); color:var(--navy); margin:0 0 12px;}
.alaune-point{width:10px; height:10px; border-radius:50%; background:var(--coral); flex-shrink:0; box-shadow:0 0 0 0 color-mix(in srgb, var(--coral) 55%, transparent); animation:pouls 2s infinite;}
@keyframes pouls{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--coral) 55%, transparent);} 70%{box-shadow:0 0 0 9px transparent;} 100%{box-shadow:0 0 0 0 transparent;}}
.alaune-liste{display:grid; gap:12px; grid-template-columns:repeat(3,1fr);}
.une{display:grid; grid-template-rows:auto auto 1fr auto; align-content:stretch; gap:8px; text-align:left; min-width:0; padding:16px; border-radius:16px; cursor:pointer; font:inherit; color:inherit;
  background:linear-gradient(165deg, var(--soft-coral), var(--card) 55%); border:1px solid color-mix(in srgb, var(--coral) 32%, var(--line)); box-shadow:var(--shadow); transition:transform .15s, border-color .15s;}
.une:hover,.une:focus-visible{transform:translateY(-2px); border-color:var(--coral);}
.une .nom{font:700 1rem/1.35 var(--serif); color:var(--ink);}
.une .desc{font-size:.84rem; line-height:1.45; color:var(--muted); align-self:start; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.une .pied{display:flex; justify-content:space-between; align-items:center; gap:8px;}
.pastilles{display:flex; flex-wrap:wrap; gap:6px; align-self:flex-start;}
.pastille{display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; font:700 .72rem/1.3 var(--sans); letter-spacing:.02em; white-space:nowrap;}
.pastille.urgent{background:var(--coral-text); color:#fff;}
.pastille.urgent::before{content:"⏳";}
.pastille.demande{background:var(--soft-gold); color:var(--navy); border:1px solid color-mix(in srgb, var(--navy) 20%, transparent);}
.pastille.demande::before{content:"🔥";}
.pastille.nouveau{background:var(--soft-blue); color:var(--blue); border:1px solid color-mix(in srgb, var(--blue) 30%, transparent);}

.info.rouge{background:var(--soft-coral); border:1px solid color-mix(in srgb, var(--coral) 40%, var(--line)); font-weight:600;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pastille.urgent{color:#1a0d09;} }
:root[data-theme="dark"] .pastille.urgent{color:#1a0d09;}
@media (max-width:760px){
  /* Sur téléphone : une rangée qu'on fait glisser, la carte suivante dépasse pour inviter au geste. */
  .alaune-liste{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:82%; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:16px;
    margin-inline:-16px; padding:2px 16px 8px; scrollbar-width:none;}
  .alaune-liste::-webkit-scrollbar{display:none;}
  .une{scroll-snap-align:start;}
}
@media (prefers-reduced-motion:reduce){ .alaune-point{animation:none;} .une{transition:none;} }