/* ═══════════ Examen civique — feuille de style ═══════════ */

:root{
  --bleu:#000091; --bleu-clair:#6a6af4; --rouge:#c9191e; --vert:#18753c; --orange:#b34000;
  --bg:#f6f6f8; --card:#ffffff; --txt:#1b1b25; --txt2:#565664;
  --bord:#e0e0ea; --bord2:#cacad6;
  --ok-bg:#e6f4ea; --ok-bd:#18753c;
  --ko-bg:#fdeced; --ko-bd:#ce0500;
  --warn-bg:#fff4e5; --warn-bd:#b34000;
  --ombre:0 1px 2px rgba(0,0,20,.06), 0 4px 14px rgba(0,0,20,.05);
  --r:12px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14141c; --card:#1e1e2a; --txt:#eeeef4; --txt2:#a5a5b8;
    --bord:#2f2f40; --bord2:#3d3d52; --bleu:#8b8bff; --bleu-clair:#9b9bff;
    --ok-bg:#152b1d; --ko-bg:#2e1618; --warn-bg:#2c2113;
    --ombre:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  }
}
[data-theme="dark"]{
  --bg:#14141c; --card:#1e1e2a; --txt:#eeeef4; --txt2:#a5a5b8;
  --bord:#2f2f40; --bord2:#3d3d52; --bleu:#8b8bff; --bleu-clair:#9b9bff;
  --ok-bg:#152b1d; --ko-bg:#2e1618; --warn-bg:#2c2113;
  --ombre:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:"Public Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:16px; line-height:1.55; font-feature-settings:"kern" 1;
}
a{color:var(--bleu)}
h1,h2,.score,.qcard h2,.result-head .verdict-txt{
  font-family:"Spectral",Georgia,"Times New Roman",serif; font-weight:600; text-wrap:balance;}
h1{font-size:clamp(1.7rem,4vw,2.5rem); line-height:1.12; margin:.2em 0 .4em; letter-spacing:-.01em}
h2{font-size:1.32rem; margin:0 0 .5em; letter-spacing:-.005em}
h3{font-size:1.05rem; margin:1.4em 0 .5em; color:var(--txt2); text-transform:uppercase; letter-spacing:.04em; font-size:.82rem}
.muted{color:var(--txt2)}
.small{font-size:.87rem}
.lead{font-size:1.08rem; color:var(--txt2); max-width:62ch}
.h-inline{display:inline-block; margin:0}
.sec-title{margin:2.2rem 0 .3rem}

/* ─── En-tête ─── */
.topbar{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:1rem;
  padding:.55rem clamp(.8rem,3vw,2rem); background:var(--card);
  border-bottom:1px solid var(--bord); box-shadow:0 1px 3px rgba(0,0,20,.04);
}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit}
.flag{display:flex; width:22px; height:22px; border-radius:3px; overflow:hidden; box-shadow:0 0 0 1px var(--bord)}
.flag i{flex:1}
.flag i:nth-child(1){background:#000091}
.flag i:nth-child(2){background:#fff}
.flag i:nth-child(3){background:#e1000f}
.brand-txt{display:flex; flex-direction:column; line-height:1.1}
.brand-txt b{font-size:.98rem}
.brand-txt small{font-size:.7rem; color:var(--txt2); text-transform:uppercase; letter-spacing:.08em}
.topnav{display:flex; gap:.2rem; margin-left:auto; flex-wrap:wrap}
.topnav a{
  padding:.45rem .7rem; border-radius:8px; text-decoration:none; color:var(--txt2);
  font-size:.92rem; font-weight:500;
}
.topnav a:hover{background:var(--bg); color:var(--txt)}
.topnav a.on{color:var(--bleu); background:var(--bg)}
.icon-btn{
  background:none; border:1px solid var(--bord); color:var(--txt2); cursor:pointer;
  width:34px; height:34px; border-radius:8px; font-size:1rem; flex:0 0 auto;
}
.icon-btn:hover{background:var(--bg); color:var(--txt)}

/* ─── Structure ─── */
main{max-width:1060px; margin:0 auto; padding:1.4rem clamp(.8rem,3vw,2rem) 4rem}
.vue[hidden]{display:none}
.panel{
  background:var(--card); border:1px solid var(--bord); border-radius:var(--r);
  padding:1.2rem 1.3rem; margin:1.1rem 0; box-shadow:var(--ombre);
}

/* ─── Hero ─── */
.hero{
  display:grid; grid-template-columns:1fr auto; gap:1.6rem; align-items:center;
  background:linear-gradient(135deg,var(--card),var(--card)); border:1px solid var(--bord);
  border-radius:var(--r); padding:1.6rem clamp(1rem,3vw,2rem); box-shadow:var(--ombre);
  position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0 auto 0 0; width:5px;
  background:linear-gradient(#000091 33%,#fff 33% 66%,#e1000f 66%);
}
.eyebrow{
  display:inline-block; margin:0 0 .3rem; padding:.2rem .6rem; border-radius:99px;
  background:var(--ko-bg); color:var(--rouge); font-size:.76rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
}
.hero-cta{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.1rem}
.hero-stats{display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem}
.stat{
  background:var(--bg); border:1px solid var(--bord); border-radius:10px;
  padding:.7rem .9rem; text-align:center; min-width:90px;
}
.stat b{display:block; font-size:1.55rem; color:var(--bleu); line-height:1; font-variant-numeric:tabular-nums}
.stat span{font-size:.75rem; color:var(--txt2)}
@media(max-width:760px){ .hero{grid-template-columns:1fr} .hero-stats{grid-template-columns:repeat(4,1fr)} }
@media(max-width:460px){ .hero-stats{grid-template-columns:repeat(2,1fr)} }

/* ─── Boutons ─── */
.btn{
  font:inherit; font-weight:600; cursor:pointer; border-radius:9px; padding:.55rem 1rem;
  border:1px solid transparent; background:var(--bg); color:var(--txt); transition:.12s;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
.btn-lg{padding:.75rem 1.4rem; font-size:1.02rem}
.btn-mini{padding:.3rem .65rem; font-size:.83rem; font-weight:500}
.btn-primary{background:var(--bleu); color:#fff}
.btn-primary:hover{filter:brightness(1.15)}
.btn-ghost{background:transparent; border-color:var(--bord2); color:var(--txt)}
.btn-ghost:hover{background:var(--bg)}
.btn-warn{background:var(--warn-bg); color:var(--orange); border-color:var(--warn-bd)}
.btn-danger{background:transparent; color:var(--rouge); border-color:var(--bord2)}
.btn:disabled{opacity:.4; cursor:not-allowed; transform:none}
.btn-back{margin-bottom:.6rem}

/* ─── Segmenté ─── */
.segmented{display:flex; flex-wrap:wrap; gap:.4rem; margin:.3rem 0}
.segmented button{
  font:inherit; cursor:pointer; padding:.5rem .9rem; border-radius:99px;
  border:1px solid var(--bord2); background:var(--card); color:var(--txt2); font-weight:500;
}
.segmented button small{display:block; font-size:.72rem; opacity:.8; font-weight:400}
.segmented button:hover{border-color:var(--bleu); color:var(--txt)}
.segmented button.on{background:var(--bleu); border-color:var(--bleu); color:#fff}
.segmented button.on small{opacity:.85}
.level-panel{display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap}

/* ─── Progression ─── */
.pg-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.8rem}
.pg-body{display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap}
.donut{position:relative; width:104px; height:104px; flex:0 0 auto}
.donut svg{transform:rotate(-90deg); width:100%; height:100%}
.donut circle{fill:none; stroke-width:4}
.d-bg{stroke:var(--bord)}
.d-fg{stroke:var(--vert); stroke-linecap:round; stroke-dasharray:0 100; transition:stroke-dasharray .6s ease}
.donut-val{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.donut-val b{font-size:1.35rem; line-height:1; font-variant-numeric:tabular-nums}
.donut-val span{font-size:.63rem; color:var(--txt2)}
.pg-nums{display:flex; gap:1.6rem; flex-wrap:wrap}
.pg-nums div{display:flex; flex-direction:column}
.pg-nums b{font-size:1.5rem; line-height:1.1; font-variant-numeric:tabular-nums}
.pg-nums span{font-size:.8rem; color:var(--txt2)}
.pg-actions{display:flex; gap:.5rem; margin-left:auto; flex-wrap:wrap}

/* ─── Cartes de thème ─── */
.themes{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:.9rem; margin-top:.9rem}
.theme-card{
  background:var(--card); border:1px solid var(--bord); border-radius:var(--r);
  padding:1.05rem 1.15rem; box-shadow:var(--ombre); cursor:pointer; text-align:left;
  font:inherit; color:inherit; display:flex; flex-direction:column; gap:.55rem; transition:.15s;
}
.theme-card:hover{transform:translateY(-2px); border-color:var(--c)}
.tc-poids{display:flex; align-items:center; gap:.4rem; font-size:.73rem; color:var(--txt2)}
.tc-poids .segs{display:flex; gap:2px}
.tc-poids .segs i{width:7px; height:11px; border-radius:2px; background:var(--c); opacity:.85}
.tc-ico{display:grid; place-items:center; width:30px; height:30px; border-radius:8px;
  background:color-mix(in srgb, var(--c) 14%, transparent); flex:0 0 auto}
.tc-top{display:flex; align-items:center; gap:.6rem}
.tc-ico{font-size:1.05rem}
.tc-nom{font-weight:700; font-size:1.02rem; line-height:1.25}
.tc-nb{margin-left:auto; font-size:.75rem; color:var(--txt2); white-space:nowrap;
  background:var(--bg); border-radius:99px; padding:.15rem .55rem; border:1px solid var(--bord)}
.tc-res{font-size:.86rem; color:var(--txt2); line-height:1.4}
.tc-bar{height:6px; border-radius:99px; background:var(--bord); overflow:hidden}
.tc-bar i{display:block; height:100%; background:var(--c); width:0; transition:width .5s}
.tc-foot{display:flex; justify-content:space-between; font-size:.78rem; color:var(--txt2)}

/* ─── Quiz ─── */
.quizbar{display:flex; align-items:center; gap:1rem; margin-bottom:1rem}
.qb-mid{flex:1; display:flex; align-items:center; gap:.8rem}
.qb-count{font-size:.9rem; color:var(--txt2); white-space:nowrap}
.qb-count b{color:var(--txt); font-size:1.05rem}
.bar{flex:1; height:8px; background:var(--bord); border-radius:99px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--bleu); width:0; transition:width .35s}
.qb-timer{
  font-variant-numeric:tabular-nums; font-weight:700; font-size:1.05rem;
  padding:.25rem .65rem; border-radius:8px; background:var(--bg); border:1px solid var(--bord);
}
.qb-timer.urgent{background:var(--ko-bg); color:var(--rouge); border-color:var(--ko-bd)}

.qcard{
  background:var(--card); border:1px solid var(--bord); border-radius:var(--r);
  padding:clamp(1.1rem,3vw,1.8rem); box-shadow:var(--ombre);
}
.qmeta{display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.7rem}
.chip{
  font-size:.72rem; font-weight:600; padding:.2rem .6rem; border-radius:99px;
  background:var(--bleu); color:#fff; text-transform:uppercase; letter-spacing:.03em;
}
.chip-soft{background:var(--bg); color:var(--txt2); border:1px solid var(--bord)}
.chip-ms{background:var(--warn-bg); color:var(--orange); border:1px solid var(--warn-bd)}
.qcard h2{font-size:clamp(1.12rem,2.4vw,1.4rem); line-height:1.35; margin:0 0 1.1rem}

.options{display:flex; flex-direction:column; gap:.55rem}
.opt{
  display:flex; align-items:flex-start; gap:.7rem; width:100%; text-align:left;
  font:inherit; cursor:pointer; padding:.75rem .9rem; border-radius:10px;
  border:1.5px solid var(--bord2); background:var(--card); color:var(--txt); transition:.12s;
}
.opt:hover:not(:disabled){border-color:var(--bleu); background:var(--bg)}
.opt .lettre{
  flex:0 0 auto; width:24px; height:24px; border-radius:6px; display:grid; place-items:center;
  background:var(--bg); border:1px solid var(--bord2); font-size:.8rem; font-weight:700; color:var(--txt2);
}
.opt.sel{border-color:var(--bleu); background:var(--bg)}
.opt.sel .lettre{background:var(--bleu); color:#fff; border-color:var(--bleu)}
.opt.bon{border-color:var(--ok-bd); background:var(--ok-bg)}
.opt.bon .lettre{background:var(--ok-bd); color:#fff; border-color:var(--ok-bd)}
.opt.mauvais{border-color:var(--ko-bd); background:var(--ko-bg)}
.opt.mauvais .lettre{background:var(--ko-bd); color:#fff; border-color:var(--ko-bd)}
.opt:disabled{cursor:default}

.feedback{
  margin-top:1rem; padding:.9rem 1rem; border-radius:10px; border-left:4px solid;
  font-size:.94rem; line-height:1.5;
}
.feedback.ok{background:var(--ok-bg); border-color:var(--ok-bd)}
.feedback.ko{background:var(--ko-bg); border-color:var(--ko-bd)}
.feedback b.verdict{display:block; margin-bottom:.25rem}
.qnav{display:flex; gap:.6rem; justify-content:flex-end; margin-top:1.2rem}

/* ─── Résultats ─── */
.result-head{text-align:center; padding:1.8rem 1.3rem}
.result-head .score{font-size:clamp(2.6rem,9vw,4rem); font-weight:700; line-height:1; margin:.2em 0; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.result-head .verdict-txt{font-size:1.25rem; font-weight:700; margin:.3rem 0}
.result-head.reussi{border-color:var(--ok-bd); background:var(--ok-bg)}
.result-head.rate{border-color:var(--ko-bd); background:var(--ko-bg)}
.result-head .sous{color:var(--txt2)}
.res-themes{display:flex; flex-direction:column; gap:.7rem}
.res-line{display:grid; grid-template-columns:1fr auto; gap:.4rem .8rem; align-items:center}
.res-line .rl-nom{font-weight:600; font-size:.94rem}
.res-line .rl-val{font-variant-numeric:tabular-nums; font-size:.9rem; color:var(--txt2)}
.res-line .rl-bar{grid-column:1/-1; height:7px; border-radius:99px; background:var(--bord); overflow:hidden}
.res-line .rl-bar i{display:block; height:100%; border-radius:99px}
.res-actions{display:flex; gap:.6rem; flex-wrap:wrap; margin:1.2rem 0}
.filters{display:flex; gap:.4rem; margin:.6rem 0 1rem}
.chipbtn{
  font:inherit; font-size:.87rem; cursor:pointer; padding:.35rem .8rem; border-radius:99px;
  border:1px solid var(--bord2); background:var(--card); color:var(--txt2);
}
.chipbtn.on{background:var(--txt); color:var(--card); border-color:var(--txt)}

/* ─── Liste détaillée / révision ─── */
.detail-list{display:flex; flex-direction:column; gap:.7rem}
.dq{
  background:var(--card); border:1px solid var(--bord); border-left:4px solid var(--bord2);
  border-radius:10px; padding:.95rem 1.1rem; box-shadow:var(--ombre);
}
.dq.ok{border-left-color:var(--ok-bd)}
.dq.ko{border-left-color:var(--ko-bd)}
.dq-q{font-weight:600; margin:0 0 .5rem; line-height:1.4}
.dq-num{color:var(--txt2); font-weight:400; margin-right:.35rem}
.dq-r{font-size:.93rem; margin:.15rem 0}
.dq-r .lbl{color:var(--txt2); display:inline-block; min-width:8.5em}
.dq-r.bonne{color:var(--vert); font-weight:600}
.dq-r.fausse{color:var(--rouge)}
.dq-e{font-size:.9rem; color:var(--txt2); margin-top:.5rem; padding-top:.5rem; border-top:1px dashed var(--bord); line-height:1.5}
.dq-tags{display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.5rem}
.tag{font-size:.7rem; padding:.12rem .5rem; border-radius:99px; background:var(--bg); border:1px solid var(--bord); color:var(--txt2)}

.rev-tools{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center}
.rev-tools input[type=search], .rev-tools select{
  font:inherit; padding:.5rem .7rem; border-radius:9px; border:1px solid var(--bord2);
  background:var(--card); color:var(--txt);
}
.rev-tools input[type=search]{flex:1; min-width:200px}

/* ─── Fiches ─── */
.fiches{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:.9rem; margin-top:1rem}
.fiche{background:var(--card); border:1px solid var(--bord); border-radius:var(--r); box-shadow:var(--ombre); overflow:hidden}
.fiche h3{
  margin:0; padding:.8rem 1rem; background:var(--bg); border-bottom:1px solid var(--bord);
  font-size:.95rem; text-transform:none; letter-spacing:0; color:var(--txt); font-weight:700;
  display:flex; align-items:center; gap:.5rem;
}
.fiche dl{margin:0; padding:.4rem .3rem}
.fiche .li{display:grid; grid-template-columns:minmax(90px,34%) 1fr; gap:.5rem; padding:.4rem .7rem; font-size:.88rem}
.fiche .li:nth-child(odd){background:var(--bg)}
.fiche .li dt{font-weight:600}
.fiche .li dd{margin:0; color:var(--txt2)}

/* ─── Divers ─── */
.notice{background:var(--warn-bg); border-color:var(--warn-bd); font-size:.9rem; line-height:1.55}
.notice-inline{background:var(--warn-bg); border-left:4px solid var(--warn-bd); padding:.7rem .9rem; border-radius:8px; font-size:.9rem}
.tbl{width:100%; border-collapse:collapse; font-size:.94rem}
.tbl th,.tbl td{padding:.6rem .5rem; border-bottom:1px solid var(--bord); text-align:left; vertical-align:top}
.tbl th{width:34%; color:var(--txt2); font-weight:600}
.list{padding-left:1.2rem; line-height:1.7}
.list.links li{margin-bottom:.5rem}
.repart{display:flex; flex-direction:column; gap:.6rem; margin-top:.6rem}
.rp{display:grid; grid-template-columns:1fr auto; gap:.3rem .8rem; align-items:center}
.rp b{font-size:.94rem}
.rp .rp-n{font-weight:700; color:var(--bleu)}
.rp .rp-bar{grid-column:1/-1; height:9px; border-radius:99px; background:var(--bord); overflow:hidden}
.rp .rp-bar i{display:block; height:100%}
.cfg-count{margin:1.2rem 0 .8rem}
.config h1{margin-top:0}
.foot{
  border-top:1px solid var(--bord); padding:1.4rem clamp(.8rem,3vw,2rem); text-align:center;
  color:var(--txt2); font-size:.83rem; background:var(--card);
}
.foot p{max-width:70ch; margin:0 auto}
.empty{text-align:center; padding:2.5rem 1rem; color:var(--txt2)}

/* ─── Diagnostic ─── */
.diag-row{display:flex; gap:.7rem; align-items:center; padding:.4rem 0; border-bottom:1px solid var(--bord); font-size:.9rem}
.diag-row:last-child{border:0}
.diag-row .pastille{width:9px; height:9px; border-radius:99px; flex:0 0 auto}
.pastille.v{background:var(--vert)} .pastille.r{background:var(--rouge)} .pastille.o{background:var(--orange)}
.diag-err{font-family:ui-monospace,Consolas,monospace; font-size:.8rem; background:var(--ko-bg); padding:.5rem .7rem; border-radius:8px; margin:.3rem 0; word-break:break-word}

@media print{
  .topbar,.foot,.hero-cta,.qnav,.res-actions,.filters,.rev-tools,.pg-actions{display:none!important}
  body{background:#fff}
  .panel,.dq,.fiche{break-inside:avoid; box-shadow:none}
}

/* ─── Bandeau d'indépendance ─── */
.bandeau-indep{
  margin:0 0 1.1rem; padding:.55rem .85rem; border-radius:9px; font-size:.83rem;
  background:var(--warn-bg); border:1px solid var(--warn-bd); color:var(--txt);
  line-height:1.45;
}
:focus-visible{outline:2px solid var(--bleu); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
  .btn:hover,.theme-card:hover{transform:none}
}

/* ═══════════ Documents officiels ═══════════ */
.docs{
  border-color:var(--bleu);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bleu) 6%, transparent), transparent 120px),
    var(--card);
}
.docs-head{display:flex; gap:.9rem; align-items:flex-start; margin-bottom:1rem}
.docs-ico{
  font-size:1.5rem; flex:0 0 auto; width:44px; height:44px; border-radius:11px;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--bleu) 12%, transparent);
}
.docs-head p{margin:.3rem 0 0; max-width:66ch}

/* Bouton principal, mis en avant */
.btn-doc{
  display:flex; align-items:center; gap:.9rem; width:100%;
  padding:.95rem 1.15rem; border-radius:12px; text-decoration:none;
  background:var(--bleu); color:#fff; border:2px solid var(--bleu);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--bleu) 55%, transparent);
  animation:pulseDoc 2.4s ease-out infinite; transition:transform .12s, filter .12s;
}
.btn-doc:hover{filter:brightness(1.12); transform:translateY(-1px); animation-play-state:paused}
.btn-doc:active{transform:none}
.bd-ico{
  flex:0 0 auto; width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:rgba(255,255,255,.18); font-size:1.15rem; font-weight:700;
}
.bd-txt{display:flex; flex-direction:column; line-height:1.25}
.bd-txt b{font-size:1.03rem}
.bd-txt small{font-size:.8rem; opacity:.85}
@keyframes pulseDoc{
  0%   { box-shadow:0 0 0 0   color-mix(in srgb, var(--bleu) 55%, transparent); }
  70%  { box-shadow:0 0 0 14px color-mix(in srgb, var(--bleu) 0%, transparent); }
  100% { box-shadow:0 0 0 0   color-mix(in srgb, var(--bleu) 0%, transparent); }
}
.docs-alt{margin:.55rem 0 0}
.docs-alt a{font-weight:600}

/* Documents secondaires */
.docs-more{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:.55rem; margin-top:1rem}
.docs-more a{
  display:flex; flex-direction:column; gap:.15rem; padding:.7rem .85rem;
  border:1px solid var(--bord); border-radius:10px; background:var(--bg);
  text-decoration:none; color:var(--txt); transition:.12s;
}
.docs-more a:hover{border-color:var(--bleu); transform:translateY(-1px)}
.docs-more a b{font-size:.93rem}
.docs-more a span{font-size:.78rem; color:var(--txt2)}
.docs-note{margin:.9rem 0 0}

@media (prefers-reduced-motion: reduce){
  .btn-doc{animation:none; box-shadow:var(--ombre)}
}