/* ============================================================
   Réseau Makers — Opération Octobre Rose 2026
   ============================================================ */

:root{
  --ground:#FAF7F8; --surface:#FFFFFF; --surface-2:#F4EFF1;
  --ink:#1A1017; --ink-soft:#6B5A64; --ink-faint:#9A8791;
  --line:#E8DEE3; --line-strong:#D6C6CE;
  --accent:#D6006E; --accent-ink:#FFFFFF; --accent-soft:#FDE7F0;
  --satin:#E886AF;
  --ok:#0E7A55; --ok-soft:#E1F3EC;
  --wait:#9C6508; --wait-soft:#FBF0DC;
  --info:#2D5BA8; --info-soft:#E6EDF9;
  --bad:#B3261E; --bad-soft:#FBE7E5;
  --shadow:0 1px 2px rgba(26,16,23,.06), 0 8px 24px -12px rgba(26,16,23,.18);
  --r:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#1B1319; --surface:#261C25; --surface-2:#302433;
    --ink:#FBF5F8; --ink-soft:#BCA9B4; --ink-faint:#8D7A85;
    --line:#3B2C37; --line-strong:#523E4C;
    --accent:#FF4D9D; --accent-ink:#20040F; --accent-soft:#3A0F26;
    --satin:#F2A6C4;
    --ok:#4CC896; --ok-soft:#10352A;
    --wait:#E3AB4B; --wait-soft:#38290F;
    --info:#7FA8E8; --info-soft:#16233C;
    --bad:#F2897F; --bad-soft:#3A1512;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#140E12; --surface:#1E1620; --surface-2:#271D28;
  --ink:#F8F1F4; --ink-soft:#AE9BA5; --ink-faint:#7E6B75;
  --line:#33262E; --line-strong:#463542;
  --accent:#FF4D9D; --accent-ink:#20040F; --accent-soft:#3A0F26;
  --satin:#F2A6C4;
  --ok:#4CC896; --ok-soft:#10352A;
  --wait:#E3AB4B; --wait-soft:#38290F;
  --info:#7FA8E8; --info-soft:#16233C;
  --bad:#F2897F; --bad-soft:#3A1512;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:"Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:15px; line-height:1.5;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3,h4,.disp{font-family:"Archivo","Public Sans",ui-sans-serif,system-ui,sans-serif; text-wrap:balance; margin:0}
img{max-width:100%}
a{color:var(--accent)}
button{font:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none !important}

/* ---- ossature ---- */
.topbar{
  position:sticky; top:0; z-index:40;
  background:var(--surface); border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top,0px);
}
.topbar-in{
  max-width:1060px; margin:0 auto; padding:12px 16px;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px 14px;
}
.topbar .right{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft);
  flex-wrap:wrap; justify-content:flex-end}
.wrap{max-width:1060px; margin:0 auto; padding:0 16px; padding-block:26px 64px}
.narrow{max-width:520px}

.brand{display:flex; align-items:center; gap:10px}
.brand-mark{
  width:32px; height:32px; border-radius:8px; flex:none;
  background:var(--ink); color:var(--ground); display:grid; place-items:center;
  font-family:"Archivo",sans-serif; font-weight:800; font-size:13px; letter-spacing:-.04em;
}
.brand-mark.pink{background:var(--accent); color:var(--accent-ink)}
.brand-name{font-family:"Archivo",sans-serif; font-weight:700; font-size:15px; letter-spacing:-.01em}
.brand-sub{font-size:11.5px; color:var(--ink-soft)}
.code-pill{
  font-family:"Archivo",sans-serif; font-weight:700; font-size:12px; letter-spacing:.04em;
  background:var(--accent-soft); color:var(--accent); padding:4px 9px; border-radius:6px;
}

/* ---- titres ---- */
.page-h{margin-bottom:20px}
.page-h h1{font-size:26px; letter-spacing:-.02em}
.page-h p{margin:6px 0 0; color:var(--ink-soft); font-size:14px; max-width:62ch}
.sec-h{
  font-family:"Archivo",sans-serif; font-size:11px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 9px;
}

/* ---- cartes ---- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); padding:20px 18px;
}

/* ---- formulaires ---- */
.field{margin-bottom:13px}
.field label{
  display:block; font-size:11px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:5px;
}
.field input, .field select, .field textarea{
  width:100%; padding:10px 12px; font:inherit; color:var(--ink);
  background:var(--ground); border:1px solid var(--line-strong); border-radius:9px;
}
.field textarea{min-height:100px; resize:vertical}
.field .help{font-size:12px; color:var(--ink-faint); margin-top:4px}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.check{display:flex; gap:9px; align-items:flex-start; font-size:13.5px; margin-bottom:11px; color:var(--ink-soft)}
.check input{margin-top:3px; flex:none; width:16px; height:16px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent);
  font-family:"Archivo",sans-serif; font-weight:700; font-size:14px;
  padding:11px 18px; border-radius:9px; width:100%;
}
.btn[disabled]{opacity:.55; cursor:not-allowed}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line-strong); font-weight:600}
.btn.dark{background:var(--ink); color:var(--ground); border-color:var(--ink)}
.btn.auto{width:auto}
.btn.sm{padding:6px 12px; font-size:12.5px; border-radius:7px}
.btns{display:flex; gap:8px; flex-wrap:wrap}

/* ---- messages ---- */
.msg{padding:12px 14px; border-radius:10px; font-size:13.5px; margin-bottom:14px}
.msg.err{background:var(--bad-soft); color:var(--bad)}
.msg.ok{background:var(--ok-soft); color:var(--ok)}
.msg.wait{background:var(--wait-soft); color:var(--wait)}

/* ---- compteurs ---- */
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.tile{background:var(--ground); border:1px solid var(--line); border-radius:11px; padding:13px 14px}
.tile.key{border-color:var(--accent); background:var(--accent-soft)}
.tile .k{font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft)}
.tile.key .k{color:var(--accent)}
.tile .v{font-family:"Archivo",sans-serif; font-weight:800; font-size:30px; letter-spacing:-.03em; margin-top:4px}
.tile.key .v{color:var(--accent)}
.tile .s{font-size:12px; color:var(--ink-soft); margin-top:1px}

.notif{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  background:var(--ok-soft); border:1px solid color-mix(in srgb, var(--ok) 32%, transparent);
  border-radius:11px; padding:13px 15px; margin-bottom:16px;
}
.notif .ico{
  width:26px; height:26px; border-radius:50%; background:var(--ok); color:var(--ok-soft);
  display:grid; place-items:center; font-weight:800; font-size:14px; flex:none; font-family:"Archivo",sans-serif;
}
.notif .txt{flex:1; min-width:180px; font-size:13.5px}
.notif-t{
  font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ok); margin-bottom:4px;
}
.notif-l{margin-top:3px}
.notif-l:first-of-type{margin-top:0}
.notif .txt b{color:var(--ok)}

.gapline{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  background:var(--wait-soft); border:1px solid color-mix(in srgb, var(--wait) 30%, transparent);
  border-radius:11px; padding:12px 14px; margin:12px 0 20px; font-size:13.5px;
}
.gapline b{color:var(--wait)}

.split{display:grid; grid-template-columns:1.25fr .95fr; gap:20px; align-items:start; margin-top:20px}

/* ---- listes ---- */
.rows{border:1px solid var(--line); border-radius:11px; overflow:hidden; background:var(--surface)}
.row{display:flex; gap:10px; align-items:center; padding:11px 13px; border-bottom:1px solid var(--line); font-size:13.5px; flex-wrap:wrap}
.row:last-child{border-bottom:none}
.row .who{flex:1; min-width:150px}
.row .who b{display:block; font-weight:600}
.row .who span{color:var(--ink-faint); font-size:12px}
.row .qty{font-family:"Archivo",sans-serif; font-weight:700; font-size:15px}
.vide{padding:16px 13px; color:var(--ink-faint); font-size:13.5px; text-align:center}

.chip{font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:999px; white-space:nowrap}
.chip.ok{background:var(--ok-soft); color:var(--ok)}
.chip.wait{background:var(--wait-soft); color:var(--wait)}
.chip.info{background:var(--info-soft); color:var(--info)}
.chip.bad{background:var(--bad-soft); color:var(--bad)}

/* ---- matière / licence ---- */
.matter{border:1px solid var(--line); border-radius:11px; padding:14px; background:var(--ground)}
.matter p{margin:0 0 10px; font-size:12.5px; color:var(--ink-soft)}
.swatches{display:flex; gap:8px; margin:10px 0 12px}
.sw{
  flex:1; border-radius:8px; height:44px; border:1px solid var(--line-strong); position:relative;
  display:block; text-decoration:none;
  transition:transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}
a.sw:hover{
  transform:translateY(-2px); border-color:var(--ink);
  box-shadow:0 10px 20px -10px rgba(0,0,0,.6);
}
a.sw::after{
  content:"↗"; position:absolute; top:5px; right:7px; font-size:11px; font-weight:700; opacity:.65;
}
.sw:nth-child(1)::after{color:#fff}
.sw:nth-child(2)::after{color:#2A0A18}
.sw span{position:absolute; left:7px; bottom:5px; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase}

.licence{
  border:1px solid var(--line-strong); border-radius:11px; padding:14px;
  background:var(--ground); font-size:13px; color:var(--ink-soft); margin-bottom:12px;
}
.licence h4{font-size:13.5px; color:var(--ink); margin-bottom:8px}
.licence ul{margin:6px 0 0; padding-left:18px}
.licence li{margin-bottom:3px}

/* ---- podium / classement ---- */
.podium{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px}
.pod{border:1px solid var(--line); border-radius:11px; padding:14px 13px; background:var(--surface); display:flex; flex-direction:column; gap:3px}
.pod.first{border-color:var(--accent); border-width:2px; background:var(--accent-soft)}
.pod .rank{font-family:"Archivo",sans-serif; font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint)}
.pod.first .rank{color:var(--accent)}
.pod .name{font-family:"Archivo",sans-serif; font-weight:700; font-size:15.5px; letter-spacing:-.01em; margin-top:3px}
.pod .city{font-size:12px; color:var(--ink-soft)}
.pod .score{font-family:"Archivo",sans-serif; font-weight:800; font-size:26px; letter-spacing:-.03em; margin-top:7px}
.pod .prize{margin-top:9px; padding-top:9px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-soft)}
.pod .prize b{display:block; color:var(--ink); font-size:13px; font-weight:600}

.total{
  display:flex; gap:20px; flex-wrap:wrap; align-items:baseline;
  background:var(--ink); color:var(--ground); border-radius:var(--r); padding:18px 20px; margin-bottom:20px;
}
.total div{flex:1; min-width:130px}
.total .k{font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; opacity:.62}
.total .v{font-family:"Archivo",sans-serif; font-weight:800; font-size:31px; letter-spacing:-.03em; margin-top:2px}
.total .v.pink{color:var(--satin)}

.tablewrap{
  overflow:hidden; overflow-x:auto;
  border:1px solid var(--line); border-radius:14px;
  background:var(--surface); box-shadow:var(--shadow);
}
table{width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px}
th{
  text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-faint);
  padding:12px 14px; background:var(--surface-2); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:1;
}
td{padding:12px 14px; border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}
/* les lignes mises en avant sont arrondies comme des cartes */
tr.maison td:first-child, tr.top3 td:first-child{border-radius:10px 0 0 10px}
tr.maison td:last-child,  tr.top3 td:last-child{border-radius:0 10px 10px 0}
tr.me td{background:var(--accent-soft)}
tr.me td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
td.r, th.r{text-align:right}

/* ---- accueil ---- */
.hero{padding-block:8px 24px}
.hero h1{font-size:32px; letter-spacing:-.025em; max-width:18ch}
.hero .lede{font-size:16px; color:var(--ink-soft); max-width:60ch; margin-top:10px}
.steps{display:flex; gap:8px; flex-wrap:wrap; margin:22px 0}
.step{flex:1; min-width:160px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 13px}
.step .n{font-family:"Archivo",sans-serif; font-weight:800; font-size:10.5px; letter-spacing:.09em; color:var(--accent)}
.step b{display:block; font-size:13.5px; margin-top:2px}
.step span{font-size:12.5px; color:var(--ink-soft)}

.deal{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:6px 0 20px}
.deal div{background:var(--ground); border:1px solid var(--line); border-radius:10px; padding:12px 13px}
.deal .k{font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft)}
.deal .v{font-family:"Archivo",sans-serif; font-weight:800; font-size:22px; letter-spacing:-.02em; margin-top:2px}

.foot{margin-top:40px; padding-top:18px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-faint)}

@media (max-width:760px){
  .split{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  .podium{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr}
  .deal{grid-template-columns:1fr}
  .total .v{font-size:27px}
  .hero h1{font-size:26px}
}

/* ---- logo 3D'Clypse dans la barre ---- */
.logo3d{display:inline-flex; align-items:center; flex:none}
.logo3d img{height:54px; width:auto; display:block}
@media (max-width:520px){ .logo3d img{height:42px} }
.logo3d .l-dark{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo3d .l-light{display:none}
  :root:not([data-theme="light"]) .logo3d .l-dark{display:block}
}
:root[data-theme="dark"] .logo3d .l-light{display:none}
:root[data-theme="dark"] .logo3d .l-dark{display:block}
.foot a{color:var(--accent); text-decoration:none}
.foot a:hover{text-decoration:underline}

/* ---- boutons de la barre ---- */
.topbar .right{gap:8px}
.nav{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:"Archivo",sans-serif; font-weight:600; font-size:13px; line-height:1;
  padding:9px 15px; border-radius:9px; text-decoration:none; white-space:nowrap;
  color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line-strong);
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.nav:hover{
  background:var(--accent-soft); border-color:var(--accent); color:var(--accent);
}
.nav:active{transform:translateY(1px)}

.nav.plein{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700;
}
.nav.plein:hover{
  background:var(--ink); border-color:var(--ink); color:var(--ground);
}

@media (max-width:520px){
  .nav{padding:8px 12px; font-size:12.5px}
}

/* ---- lampe torche qui suit le curseur (accueil) ---- */
.torche{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition:opacity .45s ease;
  background:
    radial-gradient(200px circle at var(--mx,50%) var(--my,40%),
      color-mix(in srgb, var(--accent) 26%, transparent) 0%,
      color-mix(in srgb, var(--accent) 12%, transparent) 32%,
      color-mix(in srgb, var(--accent) 4%,  transparent) 58%,
      transparent 74%),
    radial-gradient(420px circle at var(--mx,50%) var(--my,40%),
      color-mix(in srgb, var(--accent) 7%, transparent) 0%,
      transparent 70%);
}
.torche.on{opacity:1}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .torche{
    background:
      radial-gradient(190px circle at var(--mx,50%) var(--my,40%),
        color-mix(in srgb, var(--accent) 34%, transparent) 0%,
        color-mix(in srgb, var(--accent) 16%, transparent) 34%,
        color-mix(in srgb, var(--accent) 6%,  transparent) 60%,
        transparent 76%),
      radial-gradient(440px circle at var(--mx,50%) var(--my,40%),
        color-mix(in srgb, var(--accent) 9%, transparent) 0%,
        transparent 72%);
  }
}
:root[data-theme="dark"] .torche{
  background:
    radial-gradient(190px circle at var(--mx,50%) var(--my,40%),
      color-mix(in srgb, var(--accent) 34%, transparent) 0%,
      color-mix(in srgb, var(--accent) 16%, transparent) 34%,
      color-mix(in srgb, var(--accent) 6%,  transparent) 60%,
      transparent 76%),
    radial-gradient(440px circle at var(--mx,50%) var(--my,40%),
      color-mix(in srgb, var(--accent) 9%, transparent) 0%,
      transparent 72%);
}

/* le contenu passe au-dessus du halo */
.wrap{position:relative; z-index:1}

/* pas de curseur : pas de halo */
@media (hover: none), (pointer: coarse){ .torche{display:none} }
@media (prefers-reduced-motion: reduce){ .torche{transition:none} }

/* ---- bloc produit ---- */
.produit{
  display:grid; grid-template-columns:minmax(200px,300px) 1fr; gap:28px; align-items:center;
  margin:8px 0 30px;
}
.produit-vue{
  position:relative; display:grid; place-items:center; padding:18px 0;
}
.produit-vue::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(48% 42% at 50% 50%,
    color-mix(in srgb, var(--accent) 34%, transparent) 0%,
    color-mix(in srgb, var(--accent) 12%, transparent) 45%,
    transparent 72%);
  filter:blur(6px);
}
.produit-vue svg{position:relative; z-index:1}
@keyframes flotte{
  0%,100%{transform:translateY(0) rotate(-1.5deg)}
  50%{transform:translateY(-12px) rotate(1.5deg)}
}


.specs{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.specs div{
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 12px;
}
.specs span{
  display:block; font-size:10.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-soft);
}
.specs b{font-family:"Archivo",sans-serif; font-size:15px; font-weight:700; letter-spacing:-.01em}

.rendement{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 18px;
}
.rendement .gros{text-align:center; padding-right:18px; border-right:1px solid var(--line)}
.rendement .gros b{
  display:block; font-family:"Archivo",sans-serif; font-weight:800; font-size:46px;
  letter-spacing:-.04em; color:var(--accent); line-height:1;
}
.rendement .gros span{font-size:12px; color:var(--ink-soft); display:block; margin-top:4px}
.rendement .l{
  display:flex; justify-content:space-between; gap:12px; font-size:13.5px;
  padding:4px 0; border-bottom:1px dashed var(--line);
}
.rendement .l:last-child{border-bottom:none}
.rendement .l span{color:var(--ink-soft)}
.rendement .l b{font-family:"Archivo",sans-serif; font-weight:700}
.rendement .l b.rose{color:var(--accent)}

@media (max-width:760px){
  .produit{grid-template-columns:1fr; gap:14px}
  .sifflets{max-width:260px}
  .rendement{grid-template-columns:1fr; gap:12px}
  .rendement .gros{border-right:none; border-bottom:1px solid var(--line); padding:0 0 12px}
}

/* ---- titre centré dans la barre ---- */
.titre-ope{
  font-family:"Archivo",sans-serif; font-weight:700; font-size:17px;
  letter-spacing:-.01em; color:var(--ink); text-align:center; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; min-width:0; pointer-events:none;
}
/* place trop juste : le titre passe sur sa propre ligne, centré */
@media (max-width:1080px){
  .topbar-in{grid-template-columns:auto 1fr}
  .titre-ope{grid-column:1 / -1; grid-row:2; font-size:15px; padding-top:2px}
  .topbar .right{grid-column:2; grid-row:1}
}
@media (max-width:420px){
  .titre-ope{font-size:14px}
  .topbar .right{gap:6px}
  .nav{padding:7px 10px; font-size:12px}
}

/* ---- coordonnées bancaires de l'association ---- */
.rib{display:grid; gap:6px; margin-top:4px}
.rib div{
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:8px 10px;
}
.rib span{font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft)}
.rib b{font-family:"Archivo",sans-serif; font-weight:700; font-size:13.5px; word-break:break-all; text-align:right}

/* ============================================================
   Habillage : ambiance rose, grain, motifs ruban
   ============================================================ */

body{
  background-color:var(--ground);
  background-image:
    radial-gradient(52rem 32rem at 12% -6%,  color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
    radial-gradient(44rem 30rem at 96% 14%,  color-mix(in srgb, var(--satin) 13%, transparent), transparent 60%),
    radial-gradient(60rem 40rem at 50% 108%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 64%);
  background-attachment:fixed;
}

/* grain discret, pour casser les aplats */
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.topbar{z-index:40}

/* ---- petit ruban rose, en puce de titre ---- */
.sec-h.ruban{display:flex; align-items:center; gap:8px}
.sec-h.ruban::before{
  content:""; width:13px; height:17px; flex:none;
  background:var(--accent);
  -webkit-mask:var(--ruban) center/contain no-repeat;
          mask:var(--ruban) center/contain no-repeat;
}
:root{
  --ruban:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 31.2 6.6 20.5c-2.6-5.2-4-8.3-4-11.2C2.6 4.3 6 1 10.1 1c1.9 0 2.9.9 1.9 2.3-1.6 2.2-1.6 5 .1 8.2l7 13.1-2.2 4.2-4.9-9.1c-2-3.8-2-7.4-.1-10.1.5-.7.2-1.2-.6-1.2-2.4 0-4.4 2.2-4.4 5.4 0 2.2 1.2 5 3.6 9.7L12 31.2z'/%3E%3C/svg%3E");
}
.ruban-mini{
  display:inline-block; width:11px; height:14px; background:var(--accent);
  -webkit-mask:var(--ruban) center/contain no-repeat; mask:var(--ruban) center/contain no-repeat;
}

/* ---- accroche ---- */
.hero{padding-block:14px 26px}
.eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-family:"Archivo",sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  padding:6px 12px; border-radius:999px; margin-bottom:14px;
}
.cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  background:var(--accent); color:var(--accent-ink); text-decoration:none;
  font-family:"Archivo",sans-serif; font-weight:700; font-size:14.5px;
  padding:12px 22px; border-radius:10px;
  box-shadow:0 8px 22px -10px color-mix(in srgb, var(--accent) 80%, transparent);
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.cta:hover{background:var(--ink); color:var(--ground); transform:translateY(-1px);
  box-shadow:0 12px 26px -12px rgba(0,0,0,.6)}
.cta:active{transform:translateY(1px)}

/* ---- lots ---- */
.lots{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:12px}
.lot{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:16px 16px 18px; display:flex; flex-direction:column; gap:10px;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.lot::before{
  content:""; position:absolute; inset:-30% -10% auto -10%; height:74%;
  background:radial-gradient(60% 70% at 50% 60%, color-mix(in srgb, var(--medaille) 30%, transparent), transparent 70%);
  pointer-events:none;
}
.lot:hover{transform:translateY(-3px); border-color:color-mix(in srgb, var(--medaille) 55%, transparent);
  box-shadow:0 16px 34px -20px rgba(0,0,0,.7)}
.lot.or     {--medaille:#E8B33A}
.lot.argent {--medaille:#AFB6BE}
.lot.bronze {--medaille:#C2814E}
.lot.or{border-color:color-mix(in srgb, #E8B33A 42%, transparent)}

.lot-rang{
  position:relative; z-index:1; align-self:flex-start;
  font-family:"Archivo",sans-serif; font-weight:800; font-size:12px; letter-spacing:.06em;
  color:#2A1A08; background:var(--medaille);
  padding:4px 11px; border-radius:999px;
}
.lot-img{
  position:relative; z-index:1; height:150px; display:grid; place-items:center;
}
.lot-img img{
  max-height:150px; width:auto; max-width:100%;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.45));
}
.lot-txt{position:relative; z-index:1}
.lot-txt b{display:block; font-family:"Archivo",sans-serif; font-size:17px; font-weight:700; letter-spacing:-.015em}
.lot-txt span{display:block; font-size:12.5px; color:var(--ink-soft); margin-top:2px}

.note{font-size:12.5px; color:var(--ink-faint); margin:0 0 28px; max-width:72ch}
.note b{color:var(--ink-soft)}

/* ---- partage / étapes, relookés ---- */
.deal{margin-bottom:28px}
.deal .fort{border-color:color-mix(in srgb, var(--accent) 45%, transparent); background:var(--accent-soft)}
.deal .fort .k{color:var(--accent)}
.deal .fort .v{color:var(--accent)}
.step{transition:border-color .18s ease, transform .18s ease}
.step:hover{border-color:color-mix(in srgb, var(--accent) 40%, transparent); transform:translateY(-2px)}
.step .n{
  display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink); font-size:11px; margin-bottom:4px;
}
.steps{margin-bottom:28px}

.card{border-radius:16px}
.produit, .lots, .deal, .steps, .card, .rendement, .specs div{position:relative; z-index:1}

/* ---- pied de page ---- */
.foot{text-align:center}

@media (max-width:760px){
  .lots{grid-template-columns:1fr}
  .lot-img{height:130px}
  .lot-img img{max-height:130px}
  .hero h1{font-size:25px}
}

/* ---- appel au partage Instagram (espace maker) ---- */
.insta{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  background:linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 16%, var(--surface)),
      color-mix(in srgb, #F9A03F 10%, var(--surface)));
  border:1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius:14px; padding:15px 17px; margin-bottom:18px;
}
.insta-ico{
  width:30px; height:30px; flex:none; border-radius:9px;
  background:linear-gradient(45deg,#F9A03F,#E1306C 45%,#A233B5);
  -webkit-mask:var(--ig) center/20px 20px no-repeat, linear-gradient(#000,#000);
  -webkit-mask-composite:destination-out;
  mask:var(--ig) center/20px 20px no-repeat, linear-gradient(#000,#000);
  mask-composite:exclude;
}
:root{
  --ig:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.07 1.2.05 1.8.25 2.2.42.6.22 1 .48 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c0 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2 0-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c0-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2zm0 3.1A6.7 6.7 0 1 0 18.7 12 6.7 6.7 0 0 0 12 5.3zm0 11A4.3 4.3 0 1 1 16.3 12 4.3 4.3 0 0 1 12 16.3zm6.9-11.2a1.6 1.6 0 1 1-1.6-1.6 1.6 1.6 0 0 1 1.6 1.6z'/%3E%3C/svg%3E");
}
.insta-txt{flex:1; min-width:210px; font-size:13px; color:var(--ink-soft)}
.insta-txt b{display:block; color:var(--ink); font-family:"Archivo",sans-serif; font-size:14.5px; margin-bottom:2px}
.insta-txt span b{display:inline; font-family:inherit; font-size:inherit; color:var(--accent)}
.insta .btn{
  background:linear-gradient(45deg,#F9A03F,#E1306C 50%,#A233B5);
  border-color:transparent; color:#fff;
}
.insta .btn:hover{filter:brightness(1.08)}

/* ---- sifflets dessinés ---- */
.sifflets{width:100%; max-width:320px; height:auto; display:block; overflow:visible}
.sifflet{filter:drop-shadow(0 16px 22px rgba(0,0,0,.42))}
.sifflet.s1{animation:flotte1 7s ease-in-out infinite}
.sifflet.s2{animation:flotte2 7s ease-in-out infinite; animation-delay:-3.5s}
@keyframes flotte1{
  0%,100%{transform:rotate(-4deg) translateY(0)}
  50%    {transform:rotate(-1deg) translateY(-11px)}
}
@keyframes flotte2{
  0%,100%{transform:rotate(4deg) translateY(0)}
  50%    {transform:rotate(1deg) translateY(-11px)}
}
@media (prefers-reduced-motion: reduce){ .sifflet.s1,.sifflet.s2{animation:none} }

.produit-vue{padding:10px 0}
.produit-vue::before{
  background:radial-gradient(52% 44% at 50% 52%,
    color-mix(in srgb, var(--accent) 30%, transparent) 0%,
    color-mix(in srgb, var(--accent) 11%, transparent) 46%,
    transparent 74%);
}

/* ---- ligne hors concours ---- */
tr.hc td{opacity:.78; background:color-mix(in srgb, var(--info) 8%, transparent)}
tr.hc td:first-child{box-shadow:inset 3px 0 0 var(--info)}
tr.att td{opacity:.52}
tr.att td .chip{font-size:11px; opacity:.8}

/* ---- fenêtre d'invitation Instagram ---- */
.modale{
  position:fixed; inset:0; z-index:90; padding:18px;
  /* flex + margin:auto plutot que grid : sur un petit ecran d'iPhone, une
     boite plus haute que la fenetre reste entierement atteignable au scroll,
     alors qu'un grid centre la rogne en haut ET en bas (bouton inaccessible). */
  display:flex; align-items:center; justify-content:center;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  background:rgba(12,7,11,.62); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .25s ease;
}
.modale.on{opacity:1}
.modale-boite{
  width:min(420px,100%); text-align:center; position:relative;
  margin:auto; flex:0 0 auto;
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:26px 22px 22px; box-shadow:0 30px 70px -30px rgba(0,0,0,.8);
  transform:translateY(10px) scale(.98); transition:transform .25s ease;
}
/* croix de fermeture : il doit toujours exister une sortie visible a l'ecran */
.modale-x{
  position:absolute; top:8px; right:8px; width:36px; height:36px; line-height:34px;
  border:0; border-radius:50%; background:transparent; color:var(--ink-soft);
  font-size:22px; cursor:pointer; padding:0;
}
.modale-x:hover{background:var(--line); color:var(--ink)}
.modale.on .modale-boite{transform:none}
.modale-boite h3{font-size:19px; letter-spacing:-.015em; margin:14px 0 8px}
.modale-boite p{font-size:13.5px; color:var(--ink-soft); margin:0 0 18px}
.modale-boite .btn{margin-bottom:8px}
.modale-boite .btn:first-of-type{
  background:linear-gradient(45deg,#F9A03F,#E1306C 50%,#A233B5); border-color:transparent; color:#fff;
  text-decoration:none;
}
.insta-ico.grand{width:46px; height:46px; border-radius:13px; margin:0 auto; display:block}
.insta-ico.grand{
  -webkit-mask:var(--ig) center/30px 30px no-repeat, linear-gradient(#000,#000);
  mask:var(--ig) center/30px 30px no-repeat, linear-gradient(#000,#000);
}
@media (prefers-reduced-motion: reduce){
  .modale, .modale-boite{transition:none}
}

/* ---- logo dans une ligne de classement ---- */
.logo-ligne{display:inline-flex; align-items:center; vertical-align:middle}
.logo-ligne img{height:28px; width:auto; display:block}
.logo-ligne.grand img{height:38px}
.logo-ligne .l-dark{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-ligne .l-light{display:none}
  :root:not([data-theme="light"]) .logo-ligne .l-dark{display:block}
}
:root[data-theme="dark"] .logo-ligne .l-light{display:none}
:root[data-theme="dark"] .logo-ligne .l-dark{display:block}

/* ---- bandeau classement en tête de l'espace maker ---- */
.bandeau{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px 12px; margin-bottom:18px; position:relative;
}
.bandeau-tot{
  display:flex; gap:18px; flex-wrap:wrap;
  padding-bottom:11px; margin-bottom:11px; border-bottom:1px solid var(--line);
}
.bandeau-tot div{flex:1; min-width:104px}
.bandeau-tot span{
  display:block; font-size:9.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint);
}
.bandeau-tot b{
  display:block; font-family:"Archivo",sans-serif; font-weight:800; font-size:19px;
  letter-spacing:-.02em; margin-top:1px;
}
.bandeau-tot b.rose{color:var(--accent)}

.bandeau-top{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.bandeau-top li{
  display:flex; align-items:center; gap:10px; font-size:13px;
  padding:5px 8px; border-radius:7px;
}
.bandeau-top li.moi{background:var(--accent-soft)}
.bandeau-top .p{
  width:20px; flex:none; text-align:center;
  font-family:"Archivo",sans-serif; font-weight:800; font-size:12px; color:var(--ink-faint);
}
.bandeau-top li:nth-child(1) .p{color:#E8B33A}
.bandeau-top li:nth-child(2) .p{color:#AFB6BE}
.bandeau-top li:nth-child(3) .p{color:#C2814E}
.bandeau-top .n{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bandeau-top .c{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:12px; opacity:.6; margin-left:8px}
.bandeau-top .v{font-family:"Archivo",sans-serif; font-weight:700}
.bandeau-top .logo-ligne img{height:22px}

.bandeau-lien{
  display:inline-block; margin-top:9px; font-size:12.5px; color:var(--accent); text-decoration:none;
}
.bandeau-lien:hover{text-decoration:underline}

@media (max-width:520px){
  .bandeau-tot div{min-width:calc(50% - 9px)}
  .bandeau-tot b{font-size:17px}
}

/* ---- signaler un bug ---- */
.foot-actions{margin-top:12px}
.lien-bug{
  background:none; border:1px solid var(--line-strong); color:var(--ink-faint);
  font-size:12px; padding:6px 13px; border-radius:999px;
  transition:color .15s ease, border-color .15s ease;
}
.lien-bug:hover{color:var(--accent); border-color:var(--accent)}
.modale.bug .modale-boite{text-align:left}
.modale.bug h3{margin-top:0}
.modale.bug .field{margin-bottom:11px}
.modale.bug textarea{min-height:104px}
.modale.bug .btn{margin-bottom:8px}
.modale.bug .btn:first-of-type{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}

/* un <a> qui porte .btn ne doit pas être souligné */
a.btn{text-decoration:none; white-space:nowrap}

/* champ piège à robots : invisible pour un humain, rempli par un automate */
.piege{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* numéro de département, à côté de la ville */
.dept{color:var(--ink-faint); font-size:.88em; font-variant-numeric:tabular-nums}

/* ---- bannière d'annonce, sous la barre ---- */
.banniere{
  position:sticky; top:0; z-index:35;
  border-bottom:1px solid var(--line);
  background:var(--accent-soft); color:var(--ink);
}
.banniere.important{background:var(--wait-soft)}
.banniere.bonne{background:var(--ok-soft)}
.banniere-in{
  max-width:1060px; margin:0 auto; padding:11px 16px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:13.5px; line-height:1.45;
}
.banniere-in::before{
  content:""; width:12px; height:16px; flex:none;
  background:var(--accent);
  -webkit-mask:var(--ruban) center/contain no-repeat; mask:var(--ruban) center/contain no-repeat;
}
.banniere.important .banniere-in::before{background:var(--wait)}
.banniere.bonne .banniere-in::before{background:var(--ok)}
.banniere-txt{flex:1; min-width:180px}
.banniere-lien{
  flex:none; font-family:"Archivo",sans-serif; font-weight:700; font-size:12.5px;
  text-decoration:none; padding:6px 13px; border-radius:999px; white-space:nowrap;
  background:var(--accent); color:var(--accent-ink);
}
.banniere.important .banniere-lien{background:var(--wait); color:#2A1A08}

/* Banniere "important" : jaune vif opaque, texte centre et en gras.
   Les couleurs sont en dur pour qu elle reste lisible en clair comme en sombre. */
.banniere.important{background:#FFD400; border-bottom-color:#D9AF00}
.banniere.important .banniere-in{
  justify-content:center; text-align:center;
  font-weight:700; color:#1A1A1F;
}
.banniere.important .banniere-txt{flex:0 1 auto}
.banniere.important .banniere-in::before{background:#1A1A1F}
.banniere.important .banniere-lien{background:#1A1A1F; color:#FFD400}
.banniere.bonne .banniere-lien{background:var(--ok); color:var(--ok-soft)}
.banniere-lien:hover{filter:brightness(1.1)}
@media (max-width:520px){
  .banniere-in{font-size:13px; padding:10px 16px}
}

.note-cadre{
  margin:10px 0 0; padding:11px 14px; border-radius:10px;
  border:1px solid var(--line); background:var(--surface-2);
  font-size:12.5px; line-height:1.55; opacity:.82;
}

/* ---- Bloc association (AVLC) ---- */
.asso-bloc{
  display:flex; gap:18px; align-items:flex-start;
  padding:16px 18px; border:1px solid var(--line); border-radius:14px;
  background:var(--surface);
}
.asso-logo{
  flex:0 0 auto; width:92px; height:92px; border-radius:12px;
  background:#FFFFFF; border:1px solid rgba(0,0,0,.07); display:flex; align-items:center; justify-content:center;
  padding:10px; box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}
.asso-logo img{max-width:100%; max-height:100%; display:block}
.asso-txt{min-width:0}
.asso-txt b{display:block; font-family:"Archivo",sans-serif; font-size:15px; margin-bottom:4px}
.asso-txt p{margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-soft)}
.asso-liens{display:flex; gap:8px; flex-wrap:wrap; margin-top:11px}
.asso-liens .btn{padding:8px 13px; font-size:12.5px}
@media (max-width:640px){
  .asso-bloc{flex-direction:column; align-items:center; text-align:center}
  .asso-liens{justify-content:center}
}

/* ---- bouton Ressources + sa fenêtre ---- */
.res-bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:16px 0 4px;
}
.res-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 20px; font-size:14px; letter-spacing:.02em;
}
:root{
  --ico-dossier:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6.2C3 5 4 4 5.2 4h4.1c.7 0 1.3.3 1.7.9l.9 1.3h7c1.2 0 2.2 1 2.2 2.2v9.4c0 1.2-1 2.2-2.2 2.2H5.2C4 20 3 19 3 17.8V6.2z'/%3E%3C/svg%3E");
}
.res-ico{
  width:17px; height:17px; flex:none; background:currentColor;
  -webkit-mask:var(--ico-dossier) center/contain no-repeat;
  mask:var(--ico-dossier) center/contain no-repeat;
}
.res-n{
  min-width:21px; height:21px; padding:0 6px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent-ink); color:var(--accent);
  font-size:12px; font-weight:700;
}
/* pastille « Licence a accepter » : elle doit se lire, pas juste compter */
.res-n.lic{
  background:#FFD400; color:#2a1b00; font-weight:800; letter-spacing:.01em;
  padding:0 10px; height:22px; white-space:nowrap;
}
.res-aide b{color:var(--ink); font-weight:700}

.res-aide{color:var(--ink-soft); font-size:12.5px}

.fenetre{
  position:fixed; inset:0; z-index:80;
  background:rgba(26,16,23,.55); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:18px;
  overflow:auto;
}
.fenetre[hidden]{display:none}
body.fenetre-ouverte{overflow:hidden}
.fenetre-in{
  width:100%; max-width:720px;
  /* svh : sur iPhone, 100vh compte la barre d'adresse et la fenêtre déborde */
  max-height:calc(100vh - 36px); max-height:calc(100svh - 36px);
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow);
}
.fenetre-h{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; border-bottom:1px solid var(--line);
}
.fenetre-h h3{
  margin:0; font-family:"Archivo",sans-serif; font-size:17px; font-weight:800;
  letter-spacing:-.01em;
}
.fenetre-x{
  border:0; background:var(--surface-2); color:var(--ink-soft);
  width:32px; height:32px; border-radius:999px; font-size:20px; line-height:1;
  cursor:pointer;
}
.fenetre-x:hover{background:var(--line); color:var(--ink)}
.fenetre-b{padding:18px; overflow:auto; -webkit-overflow-scrolling:touch}

.fic-grille{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(148px, 1fr));
}
.fic{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:16px 12px 13px; text-align:center; text-decoration:none;
  color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line); border-radius:12px;
  transition:border-color .12s, transform .12s;
}
.fic:hover{border-color:var(--accent); transform:translateY(-2px)}
.fic-ico{
  width:78px; height:78px; flex:none; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface);
  border:1.5px solid var(--line-strong);
  border-radius:10px;
}
/* L'apercu recouvre l'icone quand il existe ; sinon l'extension reste visible. */
.fic-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; background:var(--surface);
}
.fic-ext{
  font-family:"Archivo",sans-serif; font-weight:800; font-size:13px;
  letter-spacing:.04em; color:var(--ink-faint);
}
.fic.fam-tranche .fic-ico{border-color:var(--accent); background:var(--accent-soft)}
.fic.fam-tranche .fic-ext{color:var(--accent)}
.fic.fam-modele .fic-ico{border-color:var(--info); background:var(--info-soft)}
.fic.fam-modele .fic-ext{color:var(--info)}
.fic.fam-doc .fic-ico{border-color:var(--wait); background:var(--wait-soft)}
.fic.fam-doc .fic-ext{color:var(--wait)}
.fic.fam-image .fic-ico{border-color:var(--ok); background:var(--ok-soft)}
.fic.fam-image .fic-ext{color:var(--ok)}
.fic-nom{
  font-size:12.5px; line-height:1.3; word-break:break-word;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.fic-s{font-size:11px; color:var(--ink-faint); line-height:1.35}
.fic-dl{
  margin-top:2px; font-size:11px; font-weight:700; color:var(--accent);
  opacity:0; transition:opacity .12s;
}
.fic:hover .fic-dl{opacity:1}
.fic-note{margin:14px 0 0; font-size:11.5px; color:var(--ink-soft)}
@media (max-width:520px){
  .fic-grille{grid-template-columns:repeat(auto-fill, minmax(124px, 1fr))}
  .fenetre{padding:0; align-items:flex-end}
  .fenetre-in{max-width:none; max-height:88vh; max-height:88svh; border-radius:var(--r) var(--r) 0 0}
}

/* ---- quatre compteurs, et les trois étapes de déclaration ---- */
.tiles.quatre{grid-template-columns:repeat(4,1fr)}
@media (max-width:760px){ .tiles.quatre{grid-template-columns:repeat(2,1fr)} }

.etapes{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px;
}
.etape{
  position:relative; padding:12px 13px 12px 38px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:11px;
}
.etape .n{
  position:absolute; left:12px; top:12px;
  width:20px; height:20px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--accent-ink);
  font-family:"Archivo",sans-serif; font-weight:800; font-size:11.5px;
}
.etape b{display:block; font-size:12.5px}
.etape span:not(.n){display:block; font-size:11px; color:var(--ink-soft); line-height:1.4; margin-top:2px}
@media (max-width:620px){ .etapes{grid-template-columns:1fr} }

/* ---- les dépôts, commerce par commerce ---- */
.etape.option{border-style:dashed}
.rows.depots .row.depot{align-items:center; gap:10px}
.row.depot .reste{
  flex:none; min-width:62px; text-align:center; padding:4px 8px;
  background:var(--accent-soft); border-radius:9px;
}
.row.depot .reste b{
  display:block; font-family:"Archivo",sans-serif; font-weight:800;
  font-size:19px; color:var(--accent); line-height:1.1;
}
.row.depot .reste span{font-size:9.5px; color:var(--accent); text-transform:uppercase; letter-spacing:.06em}
.row.depot .actes{display:flex; gap:6px; flex:none; flex-wrap:wrap; justify-content:flex-end}
@media (max-width:520px){
  .rows.depots .row.depot{flex-wrap:wrap}
  .row.depot .actes{width:100%; justify-content:flex-start}
}

/* ---- les boutons d'action, sous Ressources ---- */
.actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.act{gap:9px; padding:11px 16px; font-size:13.5px}
.act-n{
  width:19px; height:19px; flex:none; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent-ink); color:var(--accent);
  font-size:11px; font-weight:800;
}
.act.ghost .act-n{background:var(--line); color:var(--ink-soft)}
.actions-aide{margin:8px 0 0; font-size:11.5px; color:var(--ink-soft)}

.carte-dec{margin-bottom:18px; border-color:var(--accent)}
.dec-h{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:-2px 0 12px;
}
.dec-h h3{
  margin:0; font-family:"Archivo",sans-serif; font-size:15.5px; font-weight:800;
  letter-spacing:-.01em;
}
@media (max-width:520px){ .act{width:100%; justify-content:flex-start} }
.tab-note{margin:10px 0 0; font-size:11.5px; color:var(--ink-soft)}

/* ---- la ligne 3D'Clypse ressort dans le classement ---- */
tr.maison td{
  font-size:1.18em; padding-top:15px; padding-bottom:15px;
  opacity:1; background:color-mix(in srgb, var(--accent) 9%, transparent);
}
tr.maison td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tr.maison .num{font-weight:700}

/* ---- podium : or, argent, bronze ---- */
.medaille{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:999px;
  font-family:"Archivo",sans-serif; font-weight:800; font-size:13px;
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.22), 0 1px 2px rgba(0,0,0,.18);
}
.medaille.or     {background:linear-gradient(145deg,#FFE486,#DFA300); color:#4A3200}
.medaille.argent {background:linear-gradient(145deg,#F4F4F7,#B4B8C1); color:#3A3A42}
.medaille.bronze {background:linear-gradient(145deg,#EBB98F,#AE6A33); color:#3E2110}

tr.top3 td{padding-top:13px; padding-bottom:13px}
tr.top3.or td     {font-size:1.12em; background:color-mix(in srgb, #E0A500 10%, transparent)}
tr.top3.argent td {font-size:1.07em; background:color-mix(in srgb, #9BA0AA 10%, transparent)}
tr.top3.bronze td {font-size:1.02em; background:color-mix(in srgb, #AE6A33 10%, transparent)}
tr.top3.or td:first-child     {box-shadow:inset 3px 0 0 #DFA300}
tr.top3.argent td:first-child {box-shadow:inset 3px 0 0 #A7ACB6}
tr.top3.bronze td:first-child {box-shadow:inset 3px 0 0 #AE6A33}

/* ---- ma place, en tête de l'espace ---- */
.ma-place{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding-top:14px; margin-top:14px; border-top:1px solid var(--line);
}
.mp-rang{
  font-family:"Archivo",sans-serif; font-weight:800; font-size:26px;
  letter-spacing:-.02em; color:var(--accent); line-height:1;
}
.mp-rang.mp-vide{font-size:19px; color:var(--ink-soft)}
.mp-sur{font-size:13px; font-weight:600; color:var(--ink-soft); margin-left:7px}
.mp-dit{flex:1; min-width:180px; font-size:12.5px; color:var(--ink-soft)}

/* ---- les compteurs racontent le parcours du sifflet ---- */
.tiles.parcours{position:relative}
.tiles.parcours .tile{position:relative}
.tiles.parcours .tile + .tile::before{
  content:""; position:absolute; left:-11px; top:50%; z-index:2;
  width:14px; height:14px; margin-top:-7px;
  background:var(--ink-faint);
  -webkit-mask:var(--ico-fleche) center/contain no-repeat;
  mask:var(--ico-fleche) center/contain no-repeat;
}
@media (max-width:760px){ .tiles.parcours .tile + .tile::before{display:none} }
:root{
  --ico-fleche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4.6 16.4 12 9 19.4l-1.8-1.8L12.8 12 7.2 6.4z'/%3E%3C/svg%3E");
}

/* ---- les icônes des boutons d'action ---- */
.act-ico{
  width:15px; height:15px; flex:none; border-radius:4px;
  border:1.6px solid currentColor; opacity:.55;
}
.act-ico.vente{border-radius:999px; opacity:.8}

/* ---- Instagram, collé en bas à droite ---- */
.insta-flot{
  position:fixed; right:18px; bottom:18px; z-index:60;
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
}
.if-bulle{
  position:relative; max-width:170px;
  background:var(--surface); color:var(--ink);
  border:2px solid var(--ink); border-radius:16px;
  padding:9px 13px; font-size:12.5px; line-height:1.3; font-weight:600;
  box-shadow:0 6px 18px -8px rgba(26,16,23,.5);
}
.if-bulle::after{
  content:""; position:absolute; right:-9px; bottom:13px;
  width:9px; height:9px; border-radius:999px;
  background:var(--surface); border:2px solid var(--ink);
}
.if-rond{
  width:54px; height:54px; flex:none; border-radius:17px;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
  box-shadow:0 8px 20px -8px rgba(214,36,159,.8);
  transition:transform .15s;
}
.insta-flot:hover .if-rond{transform:scale(1.06)}
.if-ico{
  width:28px; height:28px; background:#fff;
  -webkit-mask:var(--ico-insta) center/contain no-repeat;
  mask:var(--ico-insta) center/contain no-repeat;
}
:root{
  --ico-insta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.07 1.2.06 1.8.25 2.2.42.6.22 1 .48 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c0 1.2-.2 1.8-.4 2.2a3.8 3.8 0 0 1-.9 1.4c-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2 0-1.8-.2-2.2-.4a3.8 3.8 0 0 1-1.4-.9 3.8 3.8 0 0 1-.9-1.4c-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c0-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2zm0 1.8c-3.1 0-3.5 0-4.7.07-1.1.05-1.7.24-2.1.4-.5.2-.9.44-1.3.84-.4.4-.64.8-.84 1.3-.16.4-.35 1-.4 2.1C2.6 9.9 2.6 10.3 2.6 12s0 2.1.06 3.3c.05 1.1.24 1.7.4 2.1.2.5.44.9.84 1.3.4.4.8.64 1.3.84.4.16 1 .35 2.1.4 1.2.06 1.6.06 4.7.06s3.5 0 4.7-.06c1.1-.05 1.7-.24 2.1-.4.5-.2.9-.44 1.3-.84.4-.4.64-.8.84-1.3.16-.4.35-1 .4-2.1.06-1.2.06-1.6.06-3.3s0-2.1-.06-3.3c-.05-1.1-.24-1.7-.4-2.1a3.5 3.5 0 0 0-.84-1.3 3.5 3.5 0 0 0-1.3-.84c-.4-.16-1-.35-2.1-.4C15.5 4 15.1 4 12 4zm0 3.1a4.9 4.9 0 1 1 0 9.8 4.9 4.9 0 0 1 0-9.8zm0 8.1a3.2 3.2 0 1 0 0-6.4 3.2 3.2 0 0 0 0 6.4zm6.2-8.3a1.15 1.15 0 1 1-2.3 0 1.15 1.15 0 0 1 2.3 0z'/%3E%3C/svg%3E");
}
@media (max-width:620px){
  .insta-flot{right:12px; bottom:12px; gap:8px}
  .if-bulle{max-width:130px; font-size:11.5px; padding:7px 10px}
  .if-rond{width:46px; height:46px; border-radius:14px}
  .if-ico{width:24px; height:24px}
}

/* ---- respirations : quelques sections sur fond blanc ---- */
.respire{
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:22px 24px; margin:26px 0;
}
.respire > .sec-h:first-child{margin-top:0}

/* ---- le réseau en direct, sur l'accueil ---- */
.live-tot{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:6px}
.live-tot > div{display:flex; flex-direction:column; gap:3px}
.live-tot span{font-size:10.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint)}
.live-tot b{font-family:"Archivo",sans-serif; font-weight:800; font-size:25px; letter-spacing:-.02em}
.live-tot b.rose{color:var(--accent)}
@media (max-width:620px){ .live-tot{grid-template-columns:repeat(2,1fr)} }

.live-podium{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:8px}
.live-podium li{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:12px; background:var(--surface-2);
}
.live-podium li.or     {background:color-mix(in srgb, #E0A500 12%, transparent)}
.live-podium li.argent {background:color-mix(in srgb, #9BA0AA 12%, transparent)}
.live-podium li.bronze {background:color-mix(in srgb, #AE6A33 12%, transparent)}
.lp-nom{font-weight:700; font-size:14px}
.lp-ville{flex:1; font-size:12px; color:var(--ink-soft)}
.lp-v{font-family:"Archivo",sans-serif; font-weight:800; font-size:17px}


/* ---- le pari : curseur + flammes ---- */
.modale.pari .modale-boite{max-width:460px; overflow:hidden}
.modale-boite.chaud{box-shadow:0 30px 70px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(249,115,22,.35)}
.modale-boite.brasier{box-shadow:0 30px 70px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(239,68,68,.55),
  0 0 44px -12px rgba(249,115,22,.5)}

.pari-scene{
  position:relative; height:150px; margin:-14px -22px 2px; display:grid; place-items:center;
  overflow:hidden;
  background:radial-gradient(130% 80% at 50% 128%,
    rgba(249,115,22,calc(.20 + var(--feu,0) * .40)) 0%,
    rgba(249,115,22,calc(.06 + var(--feu,0) * .14)) 42%, transparent 70%);
}
/* braise au ras du sol : sans elle, les flammes semblent flotter */
.pari-scene::after{
  content:''; position:absolute; left:8%; right:8%; bottom:-14px; height:26px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(60% 100% at 50% 50%,
    rgba(253,224,71,calc(.30 + var(--feu,0) * .55)) 0%,
    rgba(249,115,22,calc(.16 + var(--feu,0) * .40)) 45%, transparent 75%);
  filter:blur(5px);
}
.pari-flammes{position:absolute; inset:0; z-index:1; pointer-events:none}

/* Deux couches : l'exterieur monte (translation pure), l'interieur porte la
   forme tournee a 45deg. Melanger les deux faisait partir les flammes en
   diagonale au lieu de monter droit. */
.flam{
  position:absolute; bottom:4px; width:16px; height:16px; margin-left:-8px;
  animation:monter 1.4s ease-out infinite;
}
.flam::before{
  content:''; position:absolute; inset:0;
  /* coin vif en haut : c'est lui qui fait la pointe de la flamme */
  border-radius:0 50% 50% 50%;
  transform:rotate(45deg);
  background:linear-gradient(to top,#FDE047 0%,#FB923C 34%,#F97316 62%,#EF4444 100%);
  filter:blur(.35px);
}
/* coeur clair : une flamme n'est pas d'une seule couleur */
.flam::after{
  content:''; position:absolute; left:26%; right:26%; bottom:8%; height:46%;
  border-radius:0 50% 50% 50%;
  transform:rotate(45deg);
  background:linear-gradient(to top,#FEF9C3,#FDE047 70%,rgba(253,224,71,0));
  opacity:calc(.35 + var(--feu,0) * .5);
}
@keyframes monter{
  0%   {transform:translateY(8px) scale(.5);  opacity:0}
  16%  {opacity:calc(.6 + var(--feu,0) * .4)}
  58%  {transform:translateY(calc(-22px - var(--feu,0) * 54px)) scale(1.1); opacity:calc(.5 + var(--feu,0) * .4)}
  100% {transform:translateY(calc(-46px - var(--feu,0) * 82px)) scale(.2);  opacity:0}
}
.pari-nb{position:relative; z-index:3; text-align:center; line-height:1}
/* halo derriere le chiffre : les flammes qui passent dessous ne doivent pas
   manger la lecture du nombre */
.pari-nb::before{
  content:''; position:absolute; z-index:-1; inset:-10px -22px -6px;
  background:radial-gradient(60% 60% at 50% 45%, var(--surface) 0%,
    color-mix(in srgb, var(--surface) 72%, transparent) 58%, transparent 78%);
}
.pari-nb b{
  display:block; font-size:46px; font-weight:800; letter-spacing:-.03em; color:var(--ink);
  text-shadow:0 2px 20px rgba(249,115,22,calc(var(--feu,0) * .8));
  font-variant-numeric:tabular-nums;
}
.pari-nb span{font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.09em}
.pari-nb.gros b{font-size:58px}

.pari-range{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; margin:6px 0 4px;
  border-radius:999px; background:linear-gradient(90deg,#FDE047,#F97316 55%,#EF4444);
  outline:none; cursor:pointer;
}
.pari-range::-webkit-slider-thumb{
  -webkit-appearance:none; width:30px; height:30px; border-radius:50%;
  background:var(--surface); border:3px solid #F97316; cursor:grab;
  box-shadow:0 3px 12px rgba(0,0,0,.4);
}
.pari-range::-moz-range-thumb{
  width:30px; height:30px; border-radius:50%; border:3px solid #F97316;
  background:var(--surface); cursor:grab; box-shadow:0 3px 12px rgba(0,0,0,.4);
}
.pari-range:active::-webkit-slider-thumb{cursor:grabbing; transform:scale(1.08)}
.pari-mot{min-height:34px; font-size:13px; color:var(--ink-soft); margin:2px 0 14px}
.pari-err{color:#EF4444}
.pari-fait{text-align:center; padding:6px 0 0}
.pari-fait h3{margin:10px 0 6px}

@media (prefers-reduced-motion: reduce){
  .flam{animation:none; opacity:calc(.35 + var(--feu,0) * .45)}
}


/* ---- pronostic : denominateur + jauge sur la tuile Vendus ---- */
.tile .v-sur{
  font-size:.52em; font-weight:700; color:var(--ink-faint);
  letter-spacing:-.01em; margin-left:1px;
}
.jauge{
  height:5px; border-radius:999px; background:var(--line);
  overflow:hidden; margin:7px 0 5px;
}
.jauge i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#FDE047,#F97316 55%,#EF4444);
  transition:width .6s cubic-bezier(.2,.7,.2,1);
}


/* ---- classement sur mobile : une ligne devient une carte ----
   Six colonnes ne tiennent pas sur un telephone. Plutot qu'un scroll
   lateral, chaque <tr> se remet en grille : le rang a gauche, le nom et
   le score en haut, le reste en petit dessous. */
@media (max-width: 680px){
  .tab-clt{overflow-x:visible}
  .tab-clt table{display:block; font-size:14px}
  .tab-clt thead{display:none}
  .tab-clt tbody{display:block}

  .tab-clt tbody tr{
    display:grid; gap:1px 10px;
    grid-template-columns:38px minmax(0,1fr) auto;
    grid-template-areas:
      "rang nom    vendus"
      "rang ville  euros"
      "rang depot  depot";
    align-items:center;
    padding:11px 13px;
    border-top:1px solid var(--line);
  }
  .tab-clt tbody tr:first-child{border-top:0}

  .tab-clt tbody td{
    display:block; border:0; padding:0;
    white-space:normal; text-align:left;
  }
  .tab-clt td[data-c="rang"]{
    grid-area:rang; font-size:15px; font-weight:700;
    color:var(--ink-soft); text-align:center;
  }
  .tab-clt td[data-c="nom"]{
    grid-area:nom; font-weight:650; line-height:1.25;
    overflow-wrap:anywhere;
  }
  .tab-clt td[data-c="vendus"]{
    grid-area:vendus; text-align:right; font-size:21px; line-height:1.1;
  }
  .tab-clt td[data-c="vendus"]::after{
    content:'vendus'; display:block;
    font-size:9.5px; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:var(--ink-faint);
  }
  .tab-clt td[data-c="ville"]{
    grid-area:ville; font-size:12.5px; color:var(--ink-soft);
  }
  .tab-clt td[data-c="euros"]{
    grid-area:euros; text-align:right; font-size:12.5px; color:var(--ink-soft);
  }
  .tab-clt td[data-c="depot"]{
    grid-area:depot; font-size:12px; color:var(--ink-faint);
  }
  .tab-clt td[data-c="depot"]::before{content:'en dépôt '}

  /* une puce qui suit le nom ne doit pas coller a la ligne suivante */
  .tab-clt td[data-c="nom"] .chip{margin-left:0 !important; margin-top:3px; display:inline-block}

  /* En carte, les fonds et liseres poses sur les <td> en version bureau
     deviennent des rectangles qui debordent : on les neutralise et on
     porte la couleur sur la ligne entiere. */
  .tab-clt tbody td{background:none !important; box-shadow:none !important; border-radius:0 !important}
  .tab-clt tbody tr.top3 td{padding:0; font-size:inherit}

  .tab-clt tbody tr.top3{border-left:3px solid transparent; padding-left:10px}
  .tab-clt tbody tr.or     {border-left-color:#DFA300; background:color-mix(in srgb, #E0A500 9%, transparent)}
  .tab-clt tbody tr.argent {border-left-color:#9AA3AD; background:color-mix(in srgb, #9BA0AA 9%, transparent)}
  .tab-clt tbody tr.bronze {border-left-color:#B87333; background:color-mix(in srgb, #AE6A33 9%, transparent)}
  .tab-clt tbody tr.maison{border-left:3px solid var(--accent); padding-left:10px}

  /* la pastille de rang doit tenir entierement dans sa colonne */
  .tab-clt td[data-c="rang"]{overflow:visible}
  .tab-clt td[data-c="rang"] .medaille{
    width:26px; height:26px; line-height:26px; font-size:13px; margin:0 auto;
  }

  /* une mention longue passe sous le nom plutot que de l'ecraser */
  .tab-clt td[data-c="nom"] .chip{font-size:10.5px; padding:1px 7px}
}

/* --- Confirmation du virement sur une declaration de vente --- */
.virc{
  border:1px solid var(--accent);
  background:var(--accent-soft);
  border-radius:10px;
  padding:11px 13px 2px;
  margin:2px 0 12px;
}
.virc .check{margin-bottom:9px; color:var(--ink); font-weight:600}
.virc .check input{accent-color:var(--accent)}

/* --- Lockup partenaire RGTLAB dans le header --- */
.marque{display:flex; align-items:center; gap:12px; min-width:0}
.collab{display:inline-flex; align-items:center; gap:10px; flex:none; text-decoration:none}
.collab-x{color:var(--ink-soft); font-family:"Archivo",sans-serif; font-weight:700; font-size:16px; line-height:1}
.collab img{height:30px; width:auto; display:block; opacity:.92; transition:opacity .15s}
.collab:hover img{opacity:1}
@media (max-width:520px){ .collab img{height:23px} .collab-x{font-size:13px} .collab{gap:7px} }
.collab .l-dark{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .collab .l-light{display:none}
  :root:not([data-theme="light"]) .collab .l-dark{display:block}
}
:root[data-theme="dark"] .collab .l-light{display:none}
:root[data-theme="dark"] .collab .l-dark{display:block}

/* --- Bulle "Vos pronos" en haut à droite du classement --- */
.page-h-clt{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap}
.page-h-clt .page-h-txt{min-width:0}
.prono-bulle{position:relative; flex:none; background:var(--accent-soft); border:1.5px solid var(--accent);
  border-radius:16px; padding:12px 16px 13px; min-width:186px; max-width:262px;
  display:flex; flex-direction:column; align-items:flex-end; text-align:right}
.prono-bulle::after{content:""; position:absolute; bottom:-9px; right:28px; width:15px; height:15px;
  background:var(--accent-soft); border-right:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent);
  transform:rotate(45deg)}
.pb-eyebrow{font-family:"Archivo",sans-serif; font-weight:800; font-size:11.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--accent)}
.pb-num{font-family:"Archivo",sans-serif; font-weight:800; font-size:30px; line-height:1.04; color:var(--ink); letter-spacing:-.02em}
.pb-unit{font-size:11.5px; color:var(--ink-soft); margin-top:1px}
.pb-phrase{font-size:12.5px; color:var(--ink); margin-top:8px; font-style:italic; line-height:1.35}
@media (max-width:560px){
  .page-h-clt{flex-wrap:wrap}
  .prono-bulle{align-self:stretch; align-items:flex-start; text-align:left; max-width:none; width:100%}
  .prono-bulle::after{right:auto; left:28px}
}

/* --- Carte de couverture du réseau (accueil) --- */
.carte-intro{margin:2px 0 14px; color:var(--ink-soft); font-size:14px}
.carte-wrap{max-width:560px; margin:0 auto; position:relative}
.carte-fr{width:100%; height:auto; display:block}
.carte-fr .dep{fill:var(--dep, #e9e9ee); stroke:var(--surface); stroke-width:1.1; transition:fill .2s}
.carte-fr .dep.on{fill:#F7B8D6}
.carte-fr .dep.on.n2{fill:#EE6FB0}
.carte-fr .dep.on.n3{fill:var(--accent)}
.carte-leg{text-align:center; margin:14px 0 0; font-weight:700; color:var(--ink); font-family:"Archivo",sans-serif; letter-spacing:.01em}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .carte-fr .dep:not(.on){fill:#403848}
  :root:not([data-theme="light"]) .carte-fr .dep.on{fill:#F58FC2}
  :root:not([data-theme="light"]) .carte-fr .dep.on.n2{fill:#F23DA0}
  :root:not([data-theme="light"]) .carte-fr .dep.on.n3{fill:#FF2E90}
}
:root[data-theme="dark"] .carte-fr .dep:not(.on){fill:#403848}
:root[data-theme="dark"] .carte-fr .dep.on{fill:#F58FC2}
:root[data-theme="dark"] .carte-fr .dep.on.n2{fill:#F23DA0}
:root[data-theme="dark"] .carte-fr .dep.on.n3{fill:#FF2E90}


.field label .opt{color:var(--ink-soft); font-weight:400; font-size:12px}

/* --- Bannière : rotation animée des phrases --- */
.banniere-txt{display:inline-block; will-change:opacity,transform}
.banniere-txt.ban-out{opacity:0; transform:translateY(-9px); transition:opacity .34s ease, transform .34s ease}
.banniere-txt.ban-in{animation:ban-enter .46s cubic-bezier(.2,.8,.2,1)}
@keyframes ban-enter{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }