/* ===== Desktop / ≥981px (identique à l'origine) ===== */
:root{
  --bg:#0f172a; --panel:#111827; --card:rgba(255,255,255,.04);
  --text:#e5e7eb; --muted:#a3b1d1; --line:rgba(255,255,255,.12);
  --brand:#4a6cf7; --shine:#44c8f7a8; --ok:#10b981; --danger:#ef4444;
  --wrap:clamp(720px,92vw,1100px); --radius:16px;
  --shadow:0 10px 28px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{min-height:100%}
body{
  margin:0; background:linear-gradient(180deg,var(--bg),#0b1222); color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-size:15.5px; line-height:1.65;
}
.wrap{width:var(--wrap); margin:auto; padding:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.hero-bar{text-align:center; margin:4px 0 10px}
.hero{width:150px; height:150px; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
img.hero{margin-bottom:-50px}
.masthead{display:flex; gap:14px; align-items:flex-end; margin:0 0 8px; flex-wrap:wrap}
.brand{margin:0}
.brand span{
  background:linear-gradient(90deg,#d7ffe8,#ffffff,var(--shine),#c9f0ff,#d7ffe8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-size:44px; font-weight:800; letter-spacing:.2px;
  animation:blurLoop 9.6s ease-in-out infinite alternate, shimmer 12s linear infinite .6s;
  text-shadow:0 1px 6px rgba(0,0,0,.35);
}
.sub{margin:0 0 2px; color:var(--muted)}
@keyframes blurLoop{0%{filter:blur(10px)}15%{filter:blur(10px)}45%{filter:blur(0)}55%{filter:blur(0)}100%{filter:blur(10px)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@media (prefers-reduced-motion:reduce){.brand span{animation:none}}
.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; backdrop-filter:blur(6px); box-shadow:var(--shadow)}
h2{margin:0 0 12px; font-size:18px}
label{display:block; margin:10px 0}
input[type="number"],input[readonly],input[type="text"]{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:#0b1222; color:var(--text); outline:none; font-size:16px
}
input[type="number"]:focus,input[type="text"]:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(74,108,247,.25)}
input[type="range"]{width:100%; appearance:none; height:6px; border-radius:999px; background:rgba(255,255,255,.12)}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:var(--brand); border:0; box-shadow:0 0 0 3px rgba(74,108,247,.25)}
input[type="range"]::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:var(--brand); border:0}
.mt{margin-top:8px; display:block}
.row{display:flex; gap:12px; flex-wrap:wrap}
.col{flex:1}
.lbl{display:block; font-weight:600; margin-bottom:6px}
.pillset{display:flex; flex-wrap:wrap; gap:8px}
.pill{padding:10px 14px; border-radius:999px; border:1px solid var(--line); background:#0b1222; color:var(--text); cursor:pointer; line-height:1; font-size:15px; touch-action:manipulation}
.pill:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.pill.active{border-color:var(--brand); box-shadow:0 0 0 2px #000 inset}
.tag{font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid var(--line)}
.tag-ok{border-color:var(--ok); color:var(--ok)}
.actions{margin-top:12px}
button{cursor:pointer; border:1px solid var(--line); background:#0b1222; color:#fff; padding:12px 16px; border-radius:10px; font-size:16px; touch-action:manipulation}
button:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
button.danger{border-color:var(--danger); color:#fecaca}
.tiny{font-size:12px}
.foot{opacity:.9; text-align:center; padding:18px 0 28px}
.footnav{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.footnav a{color:#cfe3ff; text-decoration:none; border-bottom:1px dashed transparent}
.footnav a:hover{border-bottom-color:#cfe3ff}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}
#consent-popup{position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#333; color:#fff; padding:20px 30px; border-radius:10px; font-size:16px; text-align:center; opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:9999}
#consent-popup.show{opacity:1; pointer-events:auto}
#consent-popup button{display:inline-block; margin-top:12px; padding:10px 16px; background:#4a6cf7; color:#fff; border:0; border-radius:8px; font-size:16px}
.consent-tools{text-align:center; margin-top:20px}
@supports(padding:max(0px)){.wrap{padding-bottom:max(16px, env(safe-area-inset-bottom))}}

/* ===== Mobile / ≤980px ===== */
@media (max-width:980px){
  :root{
    --bg:#0f172a; --panel:#111827; --card:rgba(255,255,255,.04);
    --text:#e5e7eb; --muted:#a3b1d1; --line:rgba(255,255,255,.12);
    --brand:#4a6cf7; --shine:#44c8f7a8; --ok:#10b981; --danger:#ef4444;
    --wrap:clamp(320px,94vw,1100px); --radius:16px;
    --shadow:0 10px 28px rgba(0,0,0,.25);
  }
  body{font-size:clamp(14px,1.6vw,16px)}
  .wrap{
    width:var(--wrap); margin-inline:auto;
    padding:clamp(12px,3vw,24px);
    padding-bottom:calc(clamp(12px,3vw,24px) + env(safe-area-inset-bottom,0px));
  }
  img,svg{max-width:100%; height:auto; display:block}
  img.hero{display: inline-flex;margin-bottom:-40px}
  .hero-bar{ text-align:center; margin:6px 0 12px }
  .hero{width:clamp(90px,18vw,150px);height:clamp(90px,18vw,150px);object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
  .masthead{display:flex; gap:12px; align-items:flex-end; margin:0 0 8px; flex-wrap:wrap}
  .brand{margin:0}
  .brand span{font-size:clamp(28px,6vw,44px)}
  .sub{margin:0 0 2px; color:var(--muted); font-size:clamp(13px,2.8vw,15px)}
  .grid{display:grid; gap:clamp(10px,2.4vw,16px); grid-template-columns:repeat(12,minmax(0,1fr))}
  .card{grid-column:1/-1; padding:clamp(14px,3.2vw,18px)}
  @media (min-width:560px){.card{padding:clamp(16px,2.2vw,20px)}}
  @media (min-width:760px){.grid > .card:nth-child(1),.grid > .card:nth-child(2){grid-column:span 6} .grid > .card:nth-child(3),.grid > .card:nth-child(4){grid-column:span 6}}
  h2{font-size:clamp(16px,2.6vw,18px)}
  .actions{margin-top:12px}
  @media (max-width:480px){.actions button{width:100%}}

  /* ---- Popup consentement corrigé ---- */
  #consent-popup{
    position:fixed;
    bottom:max(12px, env(safe-area-inset-bottom));
    left:50%; right:auto; top:auto;
    transform:translateX(-50%);
    width:clamp(280px, 92vw, 520px);
    max-height:60vh; overflow:auto;
    background:#333; color:#fff;
    padding:16px 18px;
    border-radius:10px;
    font-size:16px; line-height:1.45;
    text-align:left;
    opacity:0; pointer-events:none;
    transition:opacity .25s ease;
    z-index:9999;
    display:flex; flex-direction:column; gap:10px;
  }
  #consent-popup.show{opacity:1; pointer-events:auto}
  #consent-popup button{
    width:100%; max-width:320px; align-self:center;
    padding:12px 16px; font-size:16px;
    border:0; border-radius:8px; background:#4a6cf7; color:#fff;
  }

  /* ---- Bouton "Revoir mes choix" ---- */
  .consent-tools{
    text-align:center;
    margin-top:16px;
    position:sticky;
    bottom:0;
    background:var(--card);
    padding:10px;
    border-top:1px solid var(--line);
    z-index:50;
  }
  .consent-tools button{
    width:100%; max-width:320px;
    padding:12px 16px; font-size:16px;
    border:1px solid var(--line);
    background:#0b1222; color:#fff;
    border-radius:10px;
  }
  .consent-tools button:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
}