/* ═══════════════════════════════════════════════════════════════════════════
   Suite créative · maquette
   Direction artistique « papier tenu ». Rayon 0, filet 1 px, une seule couleur
   d'action. La peau de l'atelier se tait, les aperçus portent la couleur.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Inter";src:url(fonts/inter-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  color-scheme:light;

  --fond:#f5f1e8; --papier:#fdfbf7; --encre:#251c16; --accent:#962d12;
  --fond-survol:#e7e3da; --trait-veille:#c2bdb4; --texte-eteint:#9b948b;
  --trait:#857e76; --texte-doux:#524a43; --voile:rgba(37,28,22,.55);

  --f-ui:"Inter",system-ui,sans-serif;
  --f-titre:"Newsreader",Georgia,serif;

  --t--2:.6875rem; --t--1:.8125rem; --t-0:.9375rem; --t-1:1.0625rem;
  --t-2:1.25rem; --t-3:1.5rem; --t-4:2rem;

  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px; --e-6:32px; --e-7:48px; --e-8:72px;

  --filet:1px; --filet-fort:2px; --r:0;
  --decalage:3px 3px 0 0 var(--trait-veille);
  --rail-gauche:308px; --rail-panneau:400px;

  --d-court:90ms; --d-moyen:160ms; --d-long:220ms;
  --courbe:cubic-bezier(.2,0,0,1);

  /* identité du produit */
  --p-fond:#f5f1e8; --p-papier:#fdfbf7; --p-encre:#251c16; --p-accent:#962d12;
  --p-titre:"Newsreader",Georgia,serif;
  --p-texte:"Inter",system-ui,sans-serif;
  --p-filet:1px; --p-densite:1;

  /* réglages du site et de la lettre */
  --s-mesure:62ch; --s-titre:44px; --s-image:320px; --s-espace:40px;
  --m-titre:27px; --m-inter:108%;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--fond); color:var(--encre);
  font:400 var(--t-0)/1.45 var(--f-ui);
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
h1,h2,h3{margin:0; font-weight:600; text-wrap:balance}
p{margin:0}
img{display:block; max-width:100%}
button,input,textarea,select{font:inherit; color:inherit}
button{background:none; border:0; padding:0; cursor:pointer}
ul{margin:0; padding:0; list-style:none}
blockquote{margin:0}
:focus-visible{outline:var(--filet-fort) solid var(--accent); outline-offset:2px}

.ic{width:18px; height:18px; flex:none; fill:none; stroke:none}
.ic use{stroke:currentColor}
.ic-gros{width:30px; height:30px}

.vue{display:none; height:100%; flex-direction:column}
body[data-vue="landing"] #vue-landing,
body[data-vue="onboarding"] #vue-onboarding,
body[data-vue="accueil"] #vue-accueil,
body[data-vue="atelier"] #vue-atelier,
body[data-vue="site"] #vue-site,
body[data-vue="identite"] #vue-identite{display:flex}

/* ── contrôles ────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:var(--e-2);
  padding:7px 13px; border:var(--filet) solid var(--trait);
  background:var(--papier); border-radius:var(--r);
  font-size:var(--t--1); font-weight:500; white-space:nowrap;
  transition:background var(--d-court) var(--courbe);
}
.btn:hover{background:var(--fond-survol)}
.btn-fort{background:var(--accent); border-color:var(--accent); color:var(--papier)}
.btn-fort:hover{background:#7d250f; border-color:#7d250f}
.btn-plein{width:100%; justify-content:center}
.btn-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; flex:none;
  border:var(--filet) solid transparent; font-size:var(--t-1); line-height:1;
}
.btn-ic:hover{background:var(--fond-survol); border-color:var(--trait)}
.lien-btn{color:var(--accent); font-size:var(--t--1); text-decoration:underline;
  text-underline-offset:2px; text-align:left}
.sep{height:var(--filet); background:var(--trait-veille); margin:var(--e-5) 0}
.aide{color:var(--texte-doux); font-size:var(--t--1); margin:0}
.aide-serre{margin-top:var(--e-1); font-size:var(--t--2)}

input[type=text], textarea, select{
  width:100%; padding:7px 9px; background:var(--papier);
  border:var(--filet) solid var(--trait); border-radius:var(--r);
  font-size:var(--t-0); resize:vertical;
}
textarea{line-height:1.45}
select{cursor:pointer}

.coche{display:flex; align-items:center; gap:var(--e-3); cursor:pointer; padding:var(--e-2) 0}
.coche input{width:16px; height:16px; accent-color:var(--accent); flex:none; margin:0}
.coche .ic{color:var(--texte-doux)}
.coche span{display:flex; flex-direction:column; min-width:0}
.coche em{font-style:normal; font-size:var(--t--1); color:var(--texte-doux)}
.coche-large{padding:9px 0; border-bottom:var(--filet) solid var(--trait-veille)}
.coche-large strong{font-weight:500; font-size:var(--t-0)}

input[type=range]{width:100%; height:20px; accent-color:var(--accent);
  background:none; border:0; padding:0; cursor:pointer}
output{font-size:var(--t--2); color:var(--texte-doux); font-variant-numeric:tabular-nums}

.segm{display:flex; border:var(--filet) solid var(--trait)}
.segm button{flex:1; padding:6px 4px; font-size:var(--t--1); background:var(--papier);
  border-right:var(--filet) solid var(--trait); white-space:nowrap}
.segm button:last-child{border-right:0}
.segm button:hover{background:var(--fond-survol)}
.segm button.actif{background:var(--encre); color:var(--fond)}
.segm-fin button{padding:4px 9px; font-size:var(--t--2); flex:none}

/* ═══════════════════════════ ACCUEIL ═══════════════════════════ */
#vue-accueil{overflow:hidden}
.acc-defil{flex:1; overflow-y:auto}
.acc-haut{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--e-4) var(--e-6); border-bottom:var(--filet) solid var(--trait);
  background:var(--fond); flex:none;
}
.acc-marque{display:flex; align-items:center; gap:var(--e-3)}
.acc-marque strong{display:block; font-size:var(--t-0)}
.acc-sous{font-size:var(--t--2); color:var(--texte-doux)}
.acc-logo{display:grid; place-items:center; width:34px; height:34px;
  background:var(--encre); color:var(--fond); font:600 var(--t--1)/1 var(--f-ui); letter-spacing:.04em}

/* la mission */
.mission{
  display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:var(--e-8);
  max-width:1180px; margin:0 auto; padding:var(--e-8) var(--e-6) var(--e-7);
  align-items:center;
}
.mission-sur{font-size:var(--t--2); letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.mission h1{font:400 2.9rem/1.08 var(--f-titre); letter-spacing:-.012em; margin-top:var(--e-3); max-width:19ch}
.mission-corps{margin-top:var(--e-4); font-size:var(--t-1); line-height:1.55; color:var(--texte-doux); max-width:56ch}
.mission-piliers{display:grid; gap:var(--e-3); margin-top:var(--e-6);
  border-top:var(--filet) solid var(--trait-veille); padding-top:var(--e-4)}
.mission-piliers li{display:grid; grid-template-columns:190px 1fr; gap:var(--e-4); align-items:baseline}
.mission-piliers strong{font-size:var(--t-0); font-weight:600}
.mission-piliers span{font-size:var(--t--1); color:var(--texte-doux)}

.mission-vis{position:relative; height:400px}
.mv{margin:0; position:absolute; background:var(--papier); border:var(--filet) solid var(--trait);
  box-shadow:var(--decalage); padding:8px}
.mv img{width:100%; height:100%; object-fit:cover}
.mv figcaption{position:absolute; left:8px; bottom:-11px; white-space:nowrap; background:var(--encre); color:var(--fond);
  font-size:9px; letter-spacing:.09em; text-transform:uppercase; padding:3px 7px}
.mv-1{left:0; top:14px; width:216px; height:306px; z-index:3}
.mv-2{right:0; top:0; width:230px; height:150px; z-index:2}
.mv-2 figcaption{left:auto; right:8px}
.mv-3{right:34px; bottom:0; width:186px; height:186px; z-index:1}

.acc-corps{max-width:1180px; margin:0 auto; padding:0 var(--e-6) 110px; width:100%}
.acc-titre{font:400 2rem/1.1 var(--f-titre); border-top:var(--filet) solid var(--trait); padding-top:var(--e-6)}
.acc-intro{margin-top:var(--e-2); max-width:56ch; color:var(--texte-doux); font-size:var(--t-0)}

.acc-grille{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e-4); margin-top:var(--e-5)}
.carte{display:flex; flex-direction:column; text-align:left; padding:0 0 var(--e-4);
  background:var(--papier); border:var(--filet) solid var(--trait);
  transition:box-shadow var(--d-court) var(--courbe)}
.carte:hover{box-shadow:var(--decalage)}
.carte:hover .carte-vis img{transform:scale(1.03)}
.carte h3{font-size:var(--t-1); margin:var(--e-4) var(--e-4) 0}
.carte p{margin:var(--e-2) var(--e-4) 0; font-size:var(--t--1); color:var(--texte-doux); flex:1}
.carte-large{grid-column:span 2}
.carte-large .carte-vis{height:210px}
.carte-formats{display:flex; align-items:center; gap:var(--e-2);
  margin:var(--e-4) var(--e-4) 0; padding-top:var(--e-3);
  border-top:var(--filet) solid var(--trait-veille); color:var(--texte-doux)}
.carte-formats span{font-size:var(--t--2); margin-left:auto}
.carte-vis{position:relative; height:168px; overflow:hidden; background:var(--fond);
  border-bottom:var(--filet) solid var(--trait); display:flex; align-items:center; justify-content:center}
.carte-vis img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(.15) contrast(.95); transition:transform var(--d-long) var(--courbe)}
.carte-vis::after{content:""; position:absolute; inset:0; background:rgba(245,241,232,.66)}
.carte-vis-vide{color:var(--texte-doux)}
.carte-vis-vide::after{display:none}
.carte-vide{border-style:dashed}
.mini-suite{display:flex; align-items:center; gap:var(--e-3); position:relative; z-index:1}
.mini{background:var(--p-papier); border:var(--filet) solid var(--trait);
  padding:5px; display:flex; flex-direction:column; gap:3px; box-shadow:2px 2px 0 rgba(37,28,22,.14)}
.mini i{display:block; height:3px; background:var(--trait-veille)}
.mini b{display:block; height:9px; background:var(--p-accent)}
.mini-site{width:92px; height:64px}
.mini-site i:first-child{background:var(--p-encre); height:4px}
.mini-affiche{width:50px; height:70px}
.mini-post{width:60px; height:60px}
.mini-nl{width:48px; height:70px}

.acc-section{font-size:var(--t--1); text-transform:uppercase; letter-spacing:.08em;
  color:var(--texte-doux); margin-top:var(--e-7); font-weight:500}
.acc-reprise{margin-top:var(--e-3); border-top:var(--filet) solid var(--trait-veille)}
.acc-reprise button{display:flex; align-items:center; gap:var(--e-4); width:100%; text-align:left;
  padding:var(--e-2) var(--e-2); border-bottom:var(--filet) solid var(--trait-veille)}
.acc-reprise button:hover{background:var(--fond-survol)}
.acc-reprise img{width:48px; height:36px; object-fit:cover; border:var(--filet) solid var(--trait-veille); flex:none}
.acc-reprise strong{font-weight:500; font-size:var(--t-0)}
.acc-reprise span{margin-left:auto; font-size:var(--t--1); color:var(--texte-doux); text-align:right}
.acc-pied{margin-top:var(--e-6); font-size:var(--t--2); color:var(--texte-doux)}

/* ═══════════════════════════ BARRE ═══════════════════════════ */
.barre{display:flex; align-items:center; gap:var(--e-4);
  padding:var(--e-2) var(--e-4); background:var(--fond);
  border-bottom:var(--filet) solid var(--trait); flex:none; height:56px}
.barre-g{display:flex; align-items:center; gap:var(--e-2); min-width:0}
.barre-nom{display:flex; flex-direction:column; min-width:0}
.barre-nom strong{font-size:var(--t--1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.barre-nom span{font-size:var(--t--2); color:var(--texte-doux); white-space:nowrap}
.barre-d{display:flex; align-items:center; gap:var(--e-2); margin-left:auto}
.chips{display:flex; margin:0 auto; border:var(--filet) solid var(--trait); background:var(--papier)}
.chip{display:flex; align-items:center; gap:6px; padding:6px 12px;
  border-right:var(--filet) solid var(--trait); font-size:var(--t--1); color:var(--texte-doux)}
.chip:last-child{border-right:0}
.chip:hover{background:var(--fond-survol); color:var(--encre)}
.chip.actif{background:var(--encre); color:var(--fond)}
.chip-plus{padding:6px 9px}

/* ═══════════════════════════ CORPS ═══════════════════════════ */
.corps{display:flex; flex:1; min-height:0}
.gauche{width:var(--rail-gauche); flex:none; display:flex; flex-direction:column;
  border-right:var(--filet) solid var(--trait); background:var(--fond); min-height:0}
.onglets{display:flex; border-bottom:var(--filet) solid var(--trait); flex:none}
.onglet{flex:1; padding:10px 0; font-size:var(--t--1); font-weight:500; color:var(--texte-doux);
  border-bottom:var(--filet-fort) solid transparent; margin-bottom:calc(var(--filet-fort) * -1)}
.onglet:hover{background:var(--fond-survol); color:var(--encre)}
.onglet.actif{color:var(--encre); border-bottom-color:var(--encre)}
.volet{display:none; overflow-y:auto; padding:var(--e-4); flex:1}
.volet.actif{display:block}
.volet-aide{color:var(--texte-doux); font-size:var(--t--2); margin-bottom:var(--e-3)}
.volet-titre{font-size:var(--t--1); font-weight:600; margin-bottom:var(--e-2)}

.champ{margin-bottom:var(--e-4)}
.champ label{display:block; font-size:var(--t--1); color:var(--texte-doux); margin-bottom:var(--e-1)}
.champ-pied{display:flex; align-items:center; gap:var(--e-2); margin-top:3px; min-height:15px}
.compte{margin-left:auto; font-size:var(--t--2); color:var(--texte-doux); font-variant-numeric:tabular-nums}
.compte.trop{color:var(--accent); font-weight:500}
.champ.vise input,.champ.vise textarea{border-color:var(--encre); border-width:var(--filet-fort); padding:6px 8px}
.champ-hors label{color:var(--texte-eteint)}
.usages{display:flex; align-items:center; gap:3px}
.usages i{width:15px; height:15px; display:grid; place-items:center;
  border:var(--filet) solid var(--trait-veille); color:var(--trait-veille)}
.usages i.on{border-color:var(--texte-doux); color:var(--texte-doux)}
.usages i svg{width:10px; height:10px}
.usages b{font-size:var(--t--2); color:var(--texte-doux); font-weight:400;
  margin-left:var(--e-1); white-space:nowrap}
.usages-fixe{font-size:var(--t--2); color:var(--texte-doux)}

.depot{display:flex; gap:var(--e-3); align-items:flex-start}
.depot-vue{width:68px; height:52px; flex:none; object-fit:cover; border:var(--filet) solid var(--trait)}
.depot-txt{display:flex; flex-direction:column; gap:2px; font-size:var(--t--2); min-width:0; align-items:flex-start}
.depot-txt strong{font-size:var(--t--1); line-height:1.25}
.depot-txt span{color:var(--texte-doux)}

.niveau{display:flex; border:var(--filet) solid var(--trait); margin-bottom:var(--e-5)}
.niv{flex:1; padding:6px; font-size:var(--t--1); background:var(--papier);
  border-right:var(--filet) solid var(--trait)}
.niv:last-child{border-right:0}
.niv:hover{background:var(--fond-survol)}
.niv.actif{background:var(--encre); color:var(--fond)}
.avance{display:none}
[data-niveau-actif="complet"] .avance{display:block}

.reg{margin-bottom:var(--e-4)}
.reg label{display:block; font-size:var(--t--1); color:var(--texte-doux); margin-bottom:var(--e-1)}
.reg-ligne{display:grid; gap:var(--e-1)}
.reg-large{max-width:420px}

/* modèles */
.modeles{display:grid; gap:var(--e-2); margin-bottom:var(--e-3)}
.mod{position:relative; overflow:hidden; border:var(--filet) solid var(--trait);
  background:var(--p-papier)}
.mod:hover{border-color:var(--encre)}
.mod.actif{outline:var(--filet-fort) solid var(--encre); outline-offset:-2px}
.mi{position:absolute; display:block}
.mi-img{background-size:cover; background-position:50% 45%}
.mi-t{border-radius:0}

/* calques */
.calques{border:var(--filet) solid var(--trait); background:var(--papier)}
.calques li{display:flex; align-items:center; gap:var(--e-2); padding:6px 8px;
  border-bottom:var(--filet) solid var(--trait-veille); font-size:var(--t--1); cursor:pointer}
.calques li:last-child{border-bottom:0}
.calques li:hover{background:var(--fond-survol)}
.calques li.actif{background:var(--encre); color:var(--fond)}
.calques li.actif em{color:var(--trait-veille)}
.calques .ic{width:14px; height:14px; color:var(--texte-doux)}
.calques li.actif .ic{color:var(--fond)}
.calques span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.calques em{margin-left:auto; font-style:normal; font-size:var(--t--2); color:var(--texte-doux);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:44%}

/* ═══════════════════════════ SCÈNE ═══════════════════════════ */
.scene{flex:1; display:flex; flex-direction:column; min-width:0; min-height:0;
  background:var(--fond); position:relative}
.scene-haut{display:flex; align-items:center; gap:var(--e-4);
  padding:var(--e-2) var(--e-4); border-bottom:var(--filet) solid var(--trait-veille); flex:none}
.scene-nom{flex:none; font-size:var(--t--1); font-weight:500; display:flex; flex-direction:column}
.scene-nom em{font-style:normal; font-size:var(--t--2); color:var(--texte-doux); font-weight:400}
.scene-outils{display:flex; align-items:center; gap:var(--e-1); min-width:0;
  overflow-x:auto; scrollbar-width:none}
.scene-outils::-webkit-scrollbar{display:none}
.outil{display:flex; align-items:center; gap:6px; padding:5px 9px;
  border:var(--filet) solid transparent; font-size:var(--t--1); color:var(--texte-doux); white-space:nowrap}
.outil:hover{background:var(--papier); border-color:var(--trait); color:var(--encre)}
.outil.actif{background:var(--papier); border-color:var(--trait); color:var(--encre)}
.outil-sep{width:var(--filet); height:20px; background:var(--trait-veille); margin:0 var(--e-2); flex:none}
.scene-zoom{display:flex; align-items:center; gap:var(--e-1); margin-left:auto; flex:none;
  font-size:var(--t--2); color:var(--texte-doux); font-variant-numeric:tabular-nums}

.scene-aire{flex:1; overflow:auto; padding:var(--e-5); display:grid; place-items:center}
.fmt{display:none}
.fmt.actif{display:block}

/* la toile */
.toile-cadre{position:relative; box-shadow:var(--decalage); border:var(--filet) solid var(--trait)}
.toile{position:relative; transform-origin:0 0; transform:scale(var(--ech,1)); overflow:hidden;
  background:var(--p-papier); color:var(--p-encre)}
.toile[data-fond="fond"]{background:var(--p-fond)}
.toile[data-fond="encre"]{background:var(--p-encre)}
.toile[data-fond="image"]{background:var(--p-fond)}
.toile.quadrille::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    repeating-linear-gradient(to right, rgba(37,28,22,.13) 0 1px, transparent 1px var(--pas)),
    repeating-linear-gradient(to bottom, rgba(37,28,22,.13) 0 1px, transparent 1px var(--pas));
}
.toile[data-fond="encre"].quadrille::before{
  background:
    repeating-linear-gradient(to right, rgba(255,255,255,.16) 0 1px, transparent 1px var(--pas)),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.16) 0 1px, transparent 1px var(--pas));
}
.el{position:absolute; cursor:move; z-index:1; touch-action:none}
.el-image{background-size:cover; background-repeat:no-repeat}
.el-texte{display:flex; flex-direction:column; justify-content:flex-start; overflow:visible}
.el-txt{display:block; outline:none}
.el-etiq{display:block; text-transform:uppercase; letter-spacing:.09em;
  color:var(--p-accent); margin-bottom:.35em; line-height:1}
.el-texte[data-clair] .el-etiq{color:currentColor; opacity:.72}
.el:hover{outline:calc(1px / var(--ech,1)) solid var(--trait)}
.el.choisi{outline:0}
.el.vise{outline:calc(2px / var(--ech,1)) solid var(--p-accent)}

.poignees{position:absolute; z-index:5; pointer-events:none;
  outline:calc(1.5px / var(--ech,1)) solid var(--encre)}
.poi{position:absolute; pointer-events:auto;
  width:calc(10px / var(--ech,1)); height:calc(10px / var(--ech,1));
  background:var(--papier); border:calc(1.5px / var(--ech,1)) solid var(--encre)}
.poi-no{left:calc(-5px / var(--ech,1)); top:calc(-5px / var(--ech,1)); cursor:nwse-resize}
.poi-n{left:50%; top:calc(-5px / var(--ech,1)); margin-left:calc(-5px / var(--ech,1)); cursor:ns-resize}
.poi-ne{right:calc(-5px / var(--ech,1)); top:calc(-5px / var(--ech,1)); cursor:nesw-resize}
.poi-e{right:calc(-5px / var(--ech,1)); top:50%; margin-top:calc(-5px / var(--ech,1)); cursor:ew-resize}
.poi-se{right:calc(-5px / var(--ech,1)); bottom:calc(-5px / var(--ech,1)); cursor:nwse-resize}
.poi-s{left:50%; bottom:calc(-5px / var(--ech,1)); margin-left:calc(-5px / var(--ech,1)); cursor:ns-resize}
.poi-so{left:calc(-5px / var(--ech,1)); bottom:calc(-5px / var(--ech,1)); cursor:nesw-resize}
.poi-o{left:calc(-5px / var(--ech,1)); top:50%; margin-top:calc(-5px / var(--ech,1)); cursor:ew-resize}

.guide{position:absolute; z-index:4; background:var(--p-accent); pointer-events:none}
.guide-v{left:50%; top:0; bottom:0; width:calc(1px / var(--ech,1))}
.guide-h{top:50%; left:0; right:0; height:calc(1px / var(--ech,1))}

/* barre contextuelle */
.contextuelle{
  position:absolute; z-index:12; display:flex; align-items:center; gap:2px; padding:4px;
  background:var(--papier); border:var(--filet) solid var(--trait); box-shadow:var(--decalage);
  max-width:calc(100% - 16px); overflow-x:auto; scrollbar-width:none;
}
.contextuelle::-webkit-scrollbar{display:none}
.cx{display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:26px;
  padding:0 5px; border:var(--filet) solid transparent; font-size:var(--t--1); flex:none}
.cx:hover{background:var(--fond-survol); border-color:var(--trait)}
.cx.actif{background:var(--encre); color:var(--fond); border-color:var(--encre)}
.cx-txt{font-size:var(--t--1); font-weight:500}
.cx-nom{font-size:var(--t--2); color:var(--texte-doux); padding:0 6px; white-space:nowrap; flex:none}
.cx-val{font-size:var(--t--2); color:var(--texte-doux); min-width:22px; text-align:center;
  font-variant-numeric:tabular-nums; flex:none}
.cx-sep{width:var(--filet); height:18px; background:var(--trait-veille); margin:0 3px; flex:none}
.cx-coul{background:var(--c); border-color:var(--trait); min-width:22px; width:22px; height:22px}
.cx-coul.actif{outline:var(--filet-fort) solid var(--encre); outline-offset:1px; background:var(--c)}

/* ── publication ── */
.post-double{display:flex; gap:var(--e-5); align-items:flex-start}
.post-col{display:flex; flex-direction:column; gap:var(--e-3)}
.post-onglets{display:flex; border:var(--filet) solid var(--trait); background:var(--papier); align-self:flex-start}
.post-og{padding:5px 11px; font-size:var(--t--1); border-right:var(--filet) solid var(--trait); color:var(--texte-doux)}
.post-og:last-child{border-right:0}
.post-og:hover{background:var(--fond-survol)}
.post-og.actif{background:var(--encre); color:var(--fond)}
.post-texte{width:330px; flex:none}
.bloc{margin-bottom:var(--e-4)}
.bloc label{display:block; font-size:var(--t--1); color:var(--texte-doux); margin-bottom:var(--e-1)}
.bloc-ligne{display:flex; align-items:center; gap:var(--e-3)}
.bloc-ligne label{margin:0; flex:none; width:96px}
.tags{display:flex; flex-wrap:wrap; gap:5px; padding:6px;
  border:var(--filet) solid var(--trait); background:var(--papier)}
.tag{display:inline-flex; align-items:center; gap:4px; padding:2px 5px 2px 7px;
  border:var(--filet) solid var(--trait-veille); font-size:var(--t--1); background:var(--fond)}
.tag button{color:var(--texte-doux); font-size:var(--t-0); line-height:1}
.tag button:hover{color:var(--accent)}
.tags input{flex:1; min-width:90px; border:0; background:none; padding:2px; font-size:var(--t--1)}
.tags input:focus{outline:0}

/* ── lettre ── */
.page{background:var(--p-papier); color:var(--p-encre); font-family:var(--p-texte);
  border:var(--filet) solid var(--trait); box-shadow:var(--decalage)}
.page h1{font-family:var(--p-titre); font-weight:600}
.nl-double{display:flex; gap:var(--e-5); align-items:flex-start}
.nl{width:400px; padding:calc(24px * var(--p-densite))}
.nl-entete{display:flex; align-items:center; gap:7px; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; padding-bottom:12px; border-bottom:var(--p-filet) solid var(--p-accent)}
.nl h1{font-size:var(--m-titre); line-height:calc(var(--m-inter) / 100);
  margin:calc(16px * var(--p-densite)) 0 calc(14px * var(--p-densite))}
.nl-img{width:100%; height:150px; object-fit:cover; margin-bottom:calc(14px * var(--p-densite))}
.nl p{font-size:14px; line-height:1.55}
.nl-infos{margin:calc(16px * var(--p-densite)) 0; border-top:var(--filet) solid var(--trait-veille)}
.nl-infos li{display:flex; gap:12px; padding:6px 0;
  border-bottom:var(--filet) solid var(--trait-veille); font-size:13px}
.nl-infos span{width:56px; flex:none; color:var(--p-accent); font-size:10px;
  text-transform:uppercase; letter-spacing:.06em; padding-top:3px}
.nl-infos strong{font-weight:500}
.nl-bouton{display:block; text-align:center; padding:11px; background:var(--p-accent);
  color:var(--p-papier); font-size:13px; font-weight:500}
.nl-pied{margin-top:20px; padding-top:12px; border-top:var(--filet) solid var(--trait-veille);
  font-size:10px; color:var(--texte-doux); line-height:1.5}
.nl-reg{width:330px; flex:none}
.blocs{border:var(--filet) solid var(--trait); background:var(--papier); margin-bottom:var(--e-2)}
.blocs li{display:flex; align-items:center; gap:var(--e-2); padding:7px 9px;
  border-bottom:var(--filet) solid var(--trait-veille); font-size:var(--t--1); cursor:grab}
.blocs li:last-child{border-bottom:0}
.blocs li:hover{background:var(--fond-survol)}
.blocs em{margin-left:auto; font-style:normal; font-size:var(--t--2); color:var(--texte-doux)}
.poignee{width:9px; height:12px; flex:none;
  background:radial-gradient(circle,var(--trait) 1px,transparent 1.2px) 0 0/4.5px 4px}

/* ── agenda ── */
.ag-fiche{width:440px; max-width:88vw; background:var(--papier); border:var(--filet) solid var(--trait);
  box-shadow:var(--decalage); padding:var(--e-5)}
.ag-haut{display:flex; align-items:center; gap:var(--e-2); font-size:var(--t--1);
  padding-bottom:var(--e-3); border-bottom:var(--filet) solid var(--trait-veille); color:var(--texte-doux)}
.ag-fiche dl{display:grid; grid-template-columns:96px 1fr; gap:var(--e-2) var(--e-4); margin:var(--e-4) 0}
.ag-fiche dt{font-size:var(--t--1); color:var(--texte-doux)}
.ag-fiche dd{margin:0; font-size:var(--t--1)}
.ag-aide{font-size:var(--t--2); color:var(--texte-doux);
  border-top:var(--filet) solid var(--trait-veille); padding-top:var(--e-3)}

/* ═══════════════════════════ SITE ═══════════════════════════ */
#vue-site{background:var(--p-fond); position:relative; overflow:hidden}
.site-page{flex:1; overflow-y:auto; background:var(--p-papier); color:var(--p-encre);
  font-family:var(--p-texte); padding-bottom:130px}
.s-nav{display:flex; align-items:center; justify-content:space-between;
  padding:18px 40px; border-bottom:var(--p-filet) solid var(--p-encre);
  position:sticky; top:0; background:var(--p-papier); z-index:1}
.s-marque{display:flex; align-items:center; gap:9px; font-size:12px; letter-spacing:.1em; text-transform:uppercase}
.pastille{display:grid; place-items:center; width:20px; height:20px; flex:none;
  background:var(--p-encre); color:var(--p-papier); font:600 9px/1 var(--f-ui); letter-spacing:.03em}
.pastille-gros{width:56px; height:56px; font-size:20px}
.pastille-claire{background:var(--p-papier); color:var(--p-encre)}
.s-nav nav{display:flex; gap:26px; font-size:14px}
.s-nav a{cursor:pointer; padding-bottom:2px; border-bottom:2px solid transparent}
.s-nav a:hover{border-bottom-color:var(--trait-veille)}
.s-actif{border-bottom-color:var(--p-accent)}
.s-hero{max-width:var(--s-mesure); margin:0 auto;
  padding:calc(var(--s-espace) * 1.6 * var(--p-densite)) 40px calc(var(--s-espace) * var(--p-densite))}
.s-hero-large{max-width:none; text-align:center}
.s-hero-large h1{max-width:22ch; margin:0 auto}
.s-hero-large .s-chapo{max-width:56ch; margin:14px auto 0}
.s-sur{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--p-accent)}
.s-hero h1{font-family:var(--p-titre); font-size:var(--s-titre); line-height:1.07; margin-top:10px}
.s-chapo{margin-top:14px; font-size:17px; line-height:1.55}
.s-meta{display:flex; flex-wrap:wrap; gap:20px; margin-top:20px; padding-top:14px;
  border-top:var(--p-filet) solid var(--p-encre); font-size:13px}
.s-corps{display:grid; grid-template-columns:minmax(0,var(--s-mesure)) 240px;
  gap:var(--e-7); justify-content:center; padding:calc(var(--s-espace) * var(--p-densite)) 40px}
.s-corps-large{grid-template-columns:minmax(0,var(--s-mesure))}
.site-page[data-dispo="pleine"] .s-corps{grid-template-columns:minmax(0,var(--s-mesure))}
.site-page[data-dispo="pleine"] .s-cote{display:none}
.s-texte p{font-size:16px; line-height:1.62; margin-bottom:16px}
.s-texte h2{font-family:var(--p-titre); font-size:26px; margin-bottom:12px}
.s-texte blockquote{font-family:var(--p-titre); font-size:22px; line-height:1.35;
  border-left:3px solid var(--p-accent); padding-left:18px; margin:22px 0}
.s-cote{border-left:var(--filet) solid var(--trait-veille); padding-left:var(--e-5)}
.s-cote h2{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--p-accent)}
.s-cote ul{margin:14px 0}
.s-cote li{display:flex; justify-content:space-between; gap:var(--e-3); padding:7px 0;
  border-bottom:var(--filet) solid var(--trait-veille); font-size:14px}
.s-cote span{color:var(--texte-doux)}
.s-liens li{display:block}
.s-liens a{cursor:pointer; text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--trait-veille)}
.s-inscription{margin-top:var(--e-5); padding:var(--e-4);
  border:var(--p-filet) solid var(--p-encre)}
.s-inscription strong{display:block; font-family:var(--p-titre); font-size:18px}
.s-inscription p{font-size:13px; color:var(--texte-doux); margin:4px 0 12px}
.s-bouton{display:block; text-align:center; padding:11px; background:var(--p-accent);
  color:var(--p-papier); font-size:14px; font-weight:500; margin-top:18px; cursor:pointer}
.s-bouton-large{display:inline-block; margin:26px auto 0; padding:13px 34px}
.s-ics{display:block; text-align:center; padding:9px; margin-top:8px; font-size:13px;
  border:var(--p-filet) solid var(--p-encre); cursor:pointer}
.s-pied{display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--e-3);
  padding:24px 40px; margin-top:calc(var(--s-espace) * var(--p-densite));
  border-top:var(--p-filet) solid var(--p-encre); font-size:12px; color:var(--texte-doux)}

[data-edit]{cursor:text; outline-offset:3px}
.site-page [data-edit]:hover{box-shadow:0 0 0 2px var(--trait-veille)}
.site-page [data-edit].vise{box-shadow:0 0 0 2px var(--p-accent)}

.flot{position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:var(--e-2); padding:6px;
  background:var(--papier); border:var(--filet) solid var(--trait);
  box-shadow:var(--decalage); z-index:3; max-width:calc(100vw - 24px);
  overflow-x:auto; scrollbar-width:none}
.flot::-webkit-scrollbar{display:none}
.flot-sep{width:var(--filet); height:24px; background:var(--trait-veille); flex:none}
.flot-fmts{display:flex; gap:2px}
.flot-f{display:flex; flex-direction:column; align-items:center; gap:2px; padding:5px 10px;
  color:var(--texte-doux); border:var(--filet) solid transparent; flex:none}
.flot-f em{font-style:normal; font-size:9px; letter-spacing:.04em}
.flot-f:hover{background:var(--fond-survol); border-color:var(--trait); color:var(--encre)}
.flot-f.actif{background:var(--encre); color:var(--fond); border-color:var(--encre)}
.site-info{position:absolute; bottom:96px; left:50%; transform:translateX(-50%);
  background:var(--encre); color:var(--fond); padding:7px 13px; font-size:var(--t--1);
  z-index:3; max-width:min(560px, calc(100vw - 32px))}

/* ═══════════════════════════ IDENTITÉ ═══════════════════════════ */
.id-corps{flex:1; display:flex; min-height:0}
.id-reglages{flex:1; overflow-y:auto; min-width:0}
.id-dedans{max-width:760px; padding:var(--e-6)}
.id-bloc{margin-bottom:var(--e-7)}
.id-tete{margin-bottom:var(--e-4)}
.id-tete h2{font:400 var(--t-3)/1.2 var(--f-titre); margin-bottom:var(--e-1)}

.id-styles{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--e-3)}
.id-sty{border:var(--filet) solid var(--trait); background:var(--papier); padding:var(--e-2); text-align:left}
.id-sty:hover{border-color:var(--encre)}
.id-sty.actif{outline:var(--filet-fort) solid var(--encre); outline-offset:-2px}
.sty-vue{display:block; padding:12px; margin-bottom:var(--e-2); min-height:112px}
.sty-t{display:block; font-size:20px; font-weight:600; line-height:1.05}
.sty-f{display:block; margin:8px 0}
.sty-p{display:block; font-size:9px; line-height:1.45; opacity:.85}
.id-sty strong{display:block; font-size:var(--t--1)}
.id-sty em{display:block; font-style:normal; font-size:var(--t--2); color:var(--texte-doux); margin-top:2px}

.id-couleurs{display:flex; gap:var(--e-5); flex-wrap:wrap}
.id-coul{display:flex; flex-direction:column; gap:var(--e-2)}
.id-coul > span{font-size:var(--t--1); color:var(--texte-doux)}
.id-choix{display:flex; gap:5px; align-items:center}
.id-pt{width:28px; height:28px; border:var(--filet) solid var(--trait); cursor:pointer}
.id-pt:hover{outline:var(--filet) solid var(--encre); outline-offset:1px}
.id-pt.actif{outline:var(--filet-fort) solid var(--encre); outline-offset:2px}
.id-libre{position:relative; width:28px; height:28px; display:grid; place-items:center;
  border:var(--filet) dashed var(--trait); cursor:pointer; color:var(--texte-doux); font-size:var(--t-0)}
.id-libre input{position:absolute; inset:0; opacity:0; cursor:pointer; border:0; padding:0}
.id-verif{margin-top:var(--e-4); border:var(--filet) solid var(--trait-veille);
  background:var(--papier); max-width:520px}
.id-verif div{display:flex; align-items:center; gap:var(--e-3); padding:7px 12px; min-height:36px;
  border-bottom:var(--filet) solid var(--trait-veille); font-size:var(--t--1)}
.id-verif div:last-child{border-bottom:0}
.repare{margin-left:var(--e-2)}
.id-verif b{margin-left:auto; font-variant-numeric:tabular-nums; font-weight:500}
.id-verif .etat{width:8px; height:8px; flex:none; background:#2f6b46}
.id-verif .faible .etat{background:var(--accent)}
.id-verif .faible b{color:var(--accent)}

.id-polices{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--e-3)}
.id-pol{border:var(--filet) solid var(--trait); background:var(--papier);
  padding:var(--e-3) var(--e-4); text-align:left}
.id-pol:hover{background:var(--fond-survol)}
.id-pol.actif{outline:var(--filet-fort) solid var(--encre); outline-offset:-2px}
.id-pol strong{display:block; font-size:var(--t-2); font-weight:600; line-height:1.15}
.id-pol span{display:block; font-size:var(--t--1); margin-top:4px; line-height:1.5}
.id-pol em{display:block; font-style:normal; font-size:var(--t--2); color:var(--texte-doux);
  margin-top:var(--e-2); font-family:var(--f-ui)}

.id-logo{display:flex; gap:var(--e-4); align-items:flex-start; flex-wrap:wrap}
.id-logo-vue{width:104px; height:104px; flex:none; display:grid; place-items:center;
  border:var(--filet) solid var(--trait); background:var(--p-papier)}
.id-logo-sombre{background:var(--p-encre)}
.id-logo-act{flex:1; min-width:220px; display:flex; flex-direction:column;
  gap:var(--e-2); align-items:flex-start}

.id-apercu{width:420px; flex:none; border-left:var(--filet) solid var(--trait);
  background:var(--fond); overflow-y:auto; padding:var(--e-5); display:flex; flex-direction:column; gap:var(--e-3)}
.id-apercu-haut{display:flex; align-items:center; justify-content:space-between; gap:var(--e-3)}
.id-apercu h3{font-size:var(--t--1); text-transform:uppercase; letter-spacing:.08em;
  color:var(--texte-doux); font-weight:500}
.id-vign{display:grid; grid-template-columns:1fr 1fr; gap:var(--e-3); align-items:start}
.id-vign > *{min-width:0}
.id-vign[data-vue="affiche"] .id-mini-post,
.id-vign[data-vue="affiche"] .id-mini-site{display:none}
.id-vign[data-vue="affiche"] .id-mini-affiche{grid-column:1 / -1; max-width:280px; margin:0 auto}
.id-mini-affiche{aspect-ratio:.707; padding:calc(13px * var(--p-densite));
  display:flex; flex-direction:column; gap:calc(8px * var(--p-densite))}
.id-mini-affiche h1{font-size:21px; line-height:1.05;
  border-bottom:var(--p-filet) solid var(--p-accent); padding-bottom:6px}
.id-mini-affiche img{flex:1; min-height:30px; width:100%; object-fit:cover}
.id-mini-affiche p{font-size:9px; line-height:1.45}
.a-marque{display:flex; align-items:center; gap:6px; font-size:7px;
  letter-spacing:.1em; text-transform:uppercase}
.a-marque .pastille{width:14px; height:14px; font-size:6px}
.ima-infos{display:flex; gap:8px; border-top:var(--p-filet) solid var(--p-encre); padding-top:6px}
.ima-infos span{color:var(--p-accent); font-size:7px; text-transform:uppercase; letter-spacing:.06em; padding-top:2px}
.ima-infos strong{font-size:9px; font-weight:500}
.id-mini-post{aspect-ratio:1; display:flex; flex-direction:column}
.id-mini-post img{flex:1; width:100%; object-fit:cover; min-height:0}
.imp-bas{padding:10px 11px 12px; border-top:2px solid var(--p-accent)}
.imp-bas h1{font-size:15px; line-height:1.05}
.imp-bas p{margin-top:4px; font-size:7px; color:var(--p-accent);
  text-transform:uppercase; letter-spacing:.06em}
.id-mini-site{grid-column:1 / -1; padding:calc(14px * var(--p-densite));
  display:flex; flex-direction:column; gap:calc(8px * var(--p-densite))}
.ims-nav{display:flex; align-items:center; gap:6px; padding-bottom:8px;
  border-bottom:var(--p-filet) solid var(--p-encre)}
.ims-nav i{flex:1; height:3px; background:var(--trait-veille); max-width:22px}
.ims-nav .pastille{width:14px; height:14px; font-size:6px}
.id-mini-site h1{font-size:20px; line-height:1.08}
.id-mini-site p{font-size:10px; line-height:1.5}
.id-mini-site img{width:100%; height:84px; object-fit:cover}
.ims-btn{align-self:flex-start; padding:7px 13px; background:var(--p-accent);
  color:var(--p-papier); font-size:10px}

/* ═══════════════════════════ PANNEAUX ═══════════════════════════ */
.panneau{position:fixed; top:0; right:0; bottom:0; width:var(--rail-panneau); max-width:100vw;
  background:var(--papier); border-left:var(--filet) solid var(--trait);
  display:flex; flex-direction:column; z-index:20; animation:glisse var(--d-long) var(--courbe)}
.panneau-large{width:min(760px, 100vw)}
@keyframes glisse{from{transform:translateX(100%)}}
.panneau-haut{display:flex; align-items:center; gap:var(--e-3);
  padding:var(--e-3) var(--e-4); border-bottom:var(--filet) solid var(--trait); flex:none}
.panneau-haut h2{font-size:var(--t-1); flex:1; min-width:0}
.panneau-corps{flex:1; overflow-y:auto; padding:var(--e-4)}
.panneau-bas{display:flex; gap:var(--e-2); justify-content:flex-end; margin-top:var(--e-5);
  padding-top:var(--e-4); border-top:var(--filet) solid var(--trait-veille)}
.panneau-bas-fixe{margin:0; padding:var(--e-3) var(--e-4); flex:none;
  border-top:var(--filet) solid var(--trait); background:var(--fond)}
.ombre{position:fixed; inset:0; background:var(--voile); z-index:19; animation:parait var(--d-moyen)}
@keyframes parait{from{opacity:0}}

/* banque d'images */
.banque-filtres{display:flex; align-items:center; gap:var(--e-3); flex-wrap:wrap;
  padding:var(--e-3) var(--e-4); border-bottom:var(--filet) solid var(--trait-veille); flex:none}
.cherche{display:flex; align-items:center; gap:var(--e-2); flex:1; min-width:180px;
  padding:5px 9px; border:var(--filet) solid var(--trait); background:var(--papier); color:var(--texte-doux)}
.cherche input{border:0; background:none; padding:0; flex:1; min-width:0; font-size:var(--t--1)}
.cherche input:focus{outline:0}
.banque-corps{padding:var(--e-4) var(--e-4) var(--e-6)}
.banque{display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:var(--e-3)}
.bq{display:flex; flex-direction:column; text-align:left; border:var(--filet) solid var(--trait);
  background:var(--papier); overflow:hidden}
.bq:hover{border-color:var(--encre)}
.bq.actif{outline:var(--filet-fort) solid var(--accent); outline-offset:-2px}
.bq img{width:100%; aspect-ratio:4/3; object-fit:cover;
  border-bottom:var(--filet) solid var(--trait-veille)}
.bq-txt{display:block; padding:6px 8px 8px}
.bq-txt strong{display:block; font-size:var(--t--2); font-weight:500; line-height:1.3}
.bq-txt em{display:block; font-style:normal; font-size:var(--t--2); color:var(--texte-doux); margin-top:2px}
.banque-pied{display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); flex-wrap:wrap}

/* types d'ajout */
.types{display:grid; gap:var(--e-3); margin-top:var(--e-4)}
.type{display:flex; align-items:center; gap:var(--e-4); text-align:left; padding:var(--e-4);
  border:var(--filet) solid var(--trait); background:var(--papier)}
.type:hover{box-shadow:var(--decalage); border-color:var(--encre)}
.type-ic{display:grid; place-items:center; width:44px; height:44px; flex:none;
  border:var(--filet) solid var(--trait-veille); color:var(--encre)}
.type-ic .ic{width:22px; height:22px}
.type-txt{flex:1; min-width:0}
.type-txt strong{display:block; font-size:var(--t-1)}
.type-txt em{display:block; font-style:normal; font-size:var(--t--1);
  color:var(--texte-doux); margin-top:3px}
.type-cree{display:flex; align-items:center; gap:5px; flex:none; color:var(--texte-doux)}
.type-cree b{font-size:var(--t--2); font-weight:400; margin-left:var(--e-1); white-space:nowrap}
.type-quoi{font-size:var(--t--1); color:var(--texte-doux)}
.type-cree-large{display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-3)}
.type-cree-large span{display:inline-flex; align-items:center; gap:6px; padding:4px 9px;
  border:var(--filet) solid var(--trait-veille); background:var(--fond);
  font-size:var(--t--2); color:var(--texte-doux)}

.tf{margin-bottom:var(--e-4)}
.tf label{display:block; font-size:var(--t--1); color:var(--texte-doux); margin-bottom:var(--e-1)}
.tf-grand{font-size:var(--t-1); padding:9px}
.tf-deux{display:grid; grid-template-columns:1fr 1fr; gap:var(--e-2)}
.tf-deux span{display:block}
.tf-deux em{display:block; font-style:normal; font-size:var(--t--2);
  color:var(--texte-doux); margin-bottom:2px}
.tf-image{display:flex; align-items:center; gap:var(--e-3); width:100%; text-align:left;
  padding:var(--e-2); border:var(--filet) solid var(--trait); background:var(--papier)}
.tf-image:hover{background:var(--fond-survol)}
.tf-image img{width:72px; height:54px; object-fit:cover; flex:none;
  border:var(--filet) solid var(--trait-veille)}
.tf-image span{display:flex; flex-direction:column; gap:1px; min-width:0}
.tf-image strong{font-size:var(--t--1); font-weight:500}
.tf-image em{font-style:normal; font-size:var(--t--2); color:var(--texte-doux)}
.tf-image b{font-size:var(--t--2); font-weight:400; color:var(--accent);
  text-decoration:underline; text-underline-offset:2px; margin-top:3px}
.tf-vign{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e-2)}
.tf-vign button{padding:10px 6px; border:var(--filet) solid var(--trait);
  background:var(--papier); font-size:var(--t--1)}
.tf-vign button:hover{background:var(--fond-survol)}
.tf-vign button.actif{background:var(--encre); color:var(--fond); border-color:var(--encre)}

/* pages */
.pages li{display:flex; align-items:center; gap:var(--e-3); padding:10px 6px;
  border-bottom:var(--filet) solid var(--trait-veille); cursor:pointer}
.pages li:hover{background:var(--fond-survol)}
.pages li.actif{background:var(--fond-survol); box-shadow:inset 3px 0 0 var(--accent)}
.pg-nom{display:flex; flex-direction:column; min-width:0; flex:1}
.pg-nom strong{font-size:var(--t-0); font-weight:500}
.pg-nom em{font-style:normal; font-size:var(--t--2); color:var(--texte-doux)}
.pg-etat{font-size:var(--t--2); color:var(--texte-doux); padding:2px 7px;
  border:var(--filet) solid var(--trait-veille); white-space:nowrap}
.pg-etat.brouillon{color:var(--accent); border-color:var(--accent)}

/* liens, reprises, recadrage, mise en ligne */
.carte-liens{margin-top:var(--e-4); border-top:var(--filet) solid var(--trait-veille)}
.cl{display:flex; align-items:center; gap:var(--e-3); padding:9px 4px;
  border-bottom:var(--filet) solid var(--trait-veille); font-size:var(--t--1)}
.cl > span:first-child{width:96px; flex:none}
.cl .usages{margin-left:auto}
.cl.seul > span:first-child{color:var(--texte-doux)}
.reprises li{border-bottom:var(--filet) solid var(--trait-veille)}
.reprises button{display:flex; align-items:center; gap:var(--e-3); width:100%; text-align:left;
  padding:10px 4px; color:var(--texte-doux)}
.reprises button:hover{background:var(--fond-survol)}
.reprises strong{display:block; font-size:var(--t--1); color:var(--encre); font-weight:500}
.reprises em{font-style:normal; font-size:var(--t--2)}
.reprises-choix{border-top:var(--filet) solid var(--trait-veille); margin-top:var(--e-3)}
.reprises-choix button.actif{background:var(--fond-survol)}
.diff{margin-top:var(--e-4); border:var(--filet) solid var(--trait-veille); background:var(--fond)}
.diff-l{padding:9px 11px; border-bottom:var(--filet) solid var(--trait-veille); font-size:var(--t--1)}
.diff-l:last-child{border-bottom:0}
.diff-l span{display:block; font-size:var(--t--2); color:var(--texte-doux); margin-bottom:3px}
.diff-l del{display:block; color:var(--texte-doux); text-decoration-color:var(--texte-eteint)}
.diff-l ins{display:block; text-decoration:none; color:var(--encre); font-weight:500}
.diff-l ins::before{content:"→ "; color:var(--accent)}

.rec-grand{position:relative; height:230px; border:var(--filet) solid var(--trait); overflow:hidden}
.rec-grand img{width:100%; height:100%; object-fit:cover}
.rec-point{position:absolute; left:50%; top:50%; width:24px; height:24px; margin:-12px 0 0 -12px;
  border:var(--filet-fort) solid #fff; background:rgba(150,45,18,.55); cursor:grab; z-index:1;
  box-shadow:0 0 0 1px rgba(0,0,0,.45); touch-action:none}
.rec-vign{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--e-2); margin-top:var(--e-3)}
.rec-v{border:var(--filet) solid var(--trait); overflow:hidden; position:relative}
.rec-v img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.rec-v em{position:absolute; left:0; bottom:0; right:0; background:rgba(37,28,22,.75); color:#fff;
  font-style:normal; font-size:9px; padding:2px 4px; text-align:center}
.prov{font-size:var(--t--1); color:var(--texte-doux); padding:8px 10px;
  border:var(--filet) solid var(--trait-veille); background:var(--fond)}

.ligne-liste li{border-bottom:var(--filet) solid var(--trait-veille)}
.ligne-verif{margin-top:var(--e-5); border:var(--filet) solid var(--trait-veille);
  background:var(--fond); padding:var(--e-3)}
.ligne-verif p{font-size:var(--t--1); margin-bottom:var(--e-2)}
.ligne-verif li{display:flex; align-items:baseline; gap:var(--e-2); font-size:var(--t--1);
  color:var(--texte-doux); padding:3px 0}
.ligne-verif li::before{content:""; width:7px; height:7px; flex:none;
  background:#2f6b46; transform:translateY(-1px)}
.ligne-verif .att::before{background:var(--accent)}
.ligne-verif .att{color:var(--accent)}

.voile{position:fixed; inset:0; background:var(--voile); z-index:30; display:grid;
  place-items:center; animation:parait var(--d-moyen); padding:var(--e-4)}
.boite{width:min(440px,100%); background:var(--papier); border:var(--filet) solid var(--trait);
  box-shadow:var(--decalage); padding:var(--e-5)}
.boite-haut{display:flex; align-items:center; justify-content:space-between}
.boite-haut h2{font-size:var(--t-2); font-family:var(--f-titre); font-weight:400}
.boite-aide{margin-top:var(--e-2); font-size:var(--t--1); color:var(--texte-doux)}
.boite-choix{margin:var(--e-4) 0; border-top:var(--filet) solid var(--trait-veille)}
.boite-choix .coche{border-bottom:var(--filet) solid var(--trait-veille)}
.boite-bas{display:flex; gap:var(--e-2); justify-content:flex-end}

.note{position:fixed; left:var(--e-4); bottom:var(--e-4); z-index:40;
  display:flex; align-items:center; gap:var(--e-3); max-width:min(520px, calc(100vw - 32px));
  padding:8px 12px; background:var(--encre); color:var(--fond); font-size:var(--t--2)}
.note strong{letter-spacing:.06em; text-transform:uppercase; font-size:var(--t--2); flex:none}
.note span{color:#d8cfc4; line-height:1.35}
.note button{color:var(--fond); font-size:var(--t-1); line-height:1; margin-left:auto; flex:none}
body[data-vue="site"] .note,
body[data-vue="onboarding"] .note{display:none}
body[data-vue="landing"] .note{left:auto; right:var(--e-4)}

/* ═══════════════════════════ RESPONSIVE ═══════════════════════════ */
@media (max-width:1280px){
  .mission{grid-template-columns:minmax(0,1fr) 340px; gap:var(--e-6)}
  .mission-vis{height:340px}
  .mv-1{width:184px; height:260px}
  .mv-2{width:190px; height:126px}
  .mv-3{width:156px; height:156px; right:20px}
  .id-apercu{width:340px}
  .id-styles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1080px){
  .acc-grille{grid-template-columns:repeat(2,1fr)}
  .carte-large{grid-column:span 2}
  .mission{grid-template-columns:1fr}
  .mission-vis{display:none}
  .mission h1{font-size:2.4rem}
}
@media (max-width:980px){
  .chip span{display:none}
  .chip{padding:6px 10px}
  .cache-court{display:none}
  .post-double,.nl-double{flex-direction:column}
  .post-texte,.nl-reg{width:100%; max-width:420px}
  .id-corps{flex-direction:column}
  .id-apercu{width:auto; border-left:0; border-top:var(--filet) solid var(--trait)}
  .id-dedans{max-width:none}
  .id-vign{grid-template-columns:repeat(3,1fr)}
  .id-mini-site{grid-column:auto}
}
@media (max-width:820px){
  .acc-grille{grid-template-columns:1fr}
  .carte-large{grid-column:span 1}
  .acc-corps{padding:0 var(--e-4) 110px}
  .acc-haut{padding:var(--e-3) var(--e-4)}
  .mission{padding:var(--e-6) var(--e-4) var(--e-5)}
  .mission h1{font-size:2rem}
  .mission-piliers li{grid-template-columns:1fr; gap:2px}

  .corps{flex-direction:column-reverse}
  .gauche{width:auto; border-right:0; border-top:var(--filet) solid var(--trait);
    flex:0 0 46%; min-height:0}
  .barre{flex-wrap:wrap; height:auto; padding-bottom:var(--e-2); gap:var(--e-2)}
  .barre-g{flex:1; min-width:0}
  .barre-nom span{display:none}
  .chips{order:3; width:100%; margin:var(--e-2) 0 0; overflow-x:auto}
  .chip{flex:1; justify-content:center}
  .scene-aire{padding:var(--e-3)}
  .contextuelle{left:8px !important; right:8px; top:auto !important; bottom:8px; max-width:none}
  .panneau{width:100%}
  .panneau-large{width:100%}
  .s-corps,.s-corps-large{grid-template-columns:1fr}
  .s-cote{border-left:0; border-top:var(--filet) solid var(--trait-veille); padding:var(--e-4) 0 0}
  .s-hero,.s-corps,.s-pied,.s-nav{padding-left:20px; padding-right:20px}
  .s-nav nav{gap:14px; font-size:13px}
  .flot{gap:var(--e-1); padding:5px; bottom:10px; left:8px; right:8px; transform:none;
    justify-content:flex-start}
  .flot-f{padding:5px 7px}
  .flot-f em{display:none}
  .flot .btn{padding:6px 9px; font-size:var(--t--2)}
  .site-info{bottom:78px}
  .id-polices,.id-styles{grid-template-columns:1fr}
  .id-vign{grid-template-columns:1fr 1fr}
  .note span{display:none}
  .note{gap:var(--e-2)}
  .banque{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .tf-vign{grid-template-columns:repeat(2,1fr)}
  .type{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ═════════════════════════════════════════════════════════════════════════
   LE SITE COMPOSÉ : sections, dispositions, animations
   ═════════════════════════════════════════════════════════════════════════ */

.site-page{--an-vitesse:1}
.s-sect{position:relative}
.s-sect > .s-etiq{
  position:absolute; left:0; top:0; z-index:6; display:none; align-items:center; gap:6px;
  padding:4px 9px; background:var(--encre); color:var(--fond);
  font:500 11px/1 var(--f-ui); letter-spacing:.02em;
}
.s-etiq-p{width:8px; height:8px; background:var(--accent); flex:none}
.s-sect:hover > .s-etiq,.s-sect.choisie > .s-etiq{display:inline-flex}
.s-sect:hover{outline:var(--filet) dashed var(--trait); outline-offset:-1px}
.s-sect.choisie{outline:var(--filet-fort) solid var(--accent); outline-offset:-2px}
.s-sect > .s-plus{
  position:absolute; left:50%; bottom:-14px; transform:translateX(-50%); z-index:6;
  display:none; align-items:center; gap:6px; padding:4px 10px;
  background:var(--papier); border:var(--filet) solid var(--trait);
  font:400 11px/1 var(--f-ui); color:var(--texte-doux);
}
.s-sect:hover > .s-plus{display:inline-flex}
.s-sect > .s-plus:hover{border-color:var(--accent); color:var(--accent)}
.s-plus .ic{width:12px; height:12px}

.s-outils{
  position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:8;
  display:flex; align-items:center; gap:3px; padding:5px;
  background:var(--papier); border:var(--filet) solid var(--trait); box-shadow:var(--decalage);
  max-width:calc(100vw - 24px); overflow-x:auto; scrollbar-width:none;
}
.s-outils::-webkit-scrollbar{display:none}
.so-nom{font-size:var(--t--1); font-weight:500; padding:0 8px; white-space:nowrap; flex:none}
.so-etq{font-size:var(--t--2); color:var(--texte-doux); padding:0 4px; white-space:nowrap; flex:none}
.so-dispo{flex:none}
.cx-large{padding:0 9px; gap:6px; white-space:nowrap}

/* ── animations ── */
.s-sect[data-anim="apparition"],.s-sect[data-anim="glisse"],.s-sect[data-anim="devoilement"]{
  transition:
    opacity calc(var(--an-duree,700ms) / var(--an-vitesse,1)) var(--courbe) var(--an-retard,0ms),
    transform calc(var(--an-duree,700ms) / var(--an-vitesse,1)) var(--courbe) var(--an-retard,0ms),
    clip-path calc(var(--an-duree,700ms) / var(--an-vitesse,1)) var(--courbe) var(--an-retard,0ms);
  clip-path:inset(0 0 0 0);
}
.s-sect[data-anim="apparition"]:not(.vu){opacity:0; transform:translateY(30px)}
.s-sect[data-anim="glisse"]:not(.vu){opacity:0; transform:translateX(-56px)}
.s-sect[data-anim="devoilement"]:not(.vu){clip-path:inset(0 0 100% 0)}
.mot{display:inline-block; opacity:0; transform:translateY(.42em);
  transition:opacity .5s var(--courbe), transform .5s var(--courbe);
  transition-delay:calc(var(--i) * 55ms + var(--an-retard,0ms))}
.vu .mot{opacity:1; transform:none}
.s-sect[data-anim="parallaxe"] .s-img-cadre{overflow:hidden}
.s-sect[data-anim="parallaxe"] img{transform:scale(1.14); will-change:transform}

/* ── ruban défilant ── */
.ruban{overflow:hidden; background:var(--p-accent); color:var(--p-papier);
  padding:13px 0; border-top:var(--p-filet) solid transparent}
.s-sect[data-dispo="encre"] .ruban{background:var(--p-encre)}
.s-sect[data-dispo="fin"] .ruban{background:none; color:var(--p-encre);
  border-top:var(--p-filet) solid var(--p-encre); border-bottom:var(--p-filet) solid var(--p-encre)}
.ruban-defile{display:flex; width:max-content; animation:defile 34s linear infinite}
.ruban-piste,.ruban-copie{white-space:nowrap; font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; padding-right:0}
@keyframes defile{to{transform:translateX(-50%)}}
.s-sect[data-anim="aucune"] .ruban-defile{animation:none}

/* ── ouverture ── */
.ho{position:relative}
.s-sect[data-dispo="deborde"] .ho{min-height:540px; padding-bottom:56px}
.s-sect[data-dispo="deborde"] .ho-img{margin-left:32%; height:520px}
.s-sect[data-dispo="deborde"] .ho-img img{width:100%; height:100%; object-fit:cover}
.s-sect[data-dispo="deborde"] .ho-txt{position:absolute; left:44px; top:78px;
  width:min(54%,560px); background:var(--p-papier); padding:38px 42px 42px;
  border:var(--p-filet) solid var(--p-encre)}
.s-sect[data-dispo="deborde"] .ho-filet{position:absolute; left:44px; top:0; width:var(--p-filet);
  height:78px; background:var(--p-encre)}
.s-sect[data-dispo="centre"] .ho{text-align:center; padding:0 40px 48px}
.s-sect[data-dispo="centre"] .ho-txt{max-width:46ch; margin:0 auto; padding:56px 0 40px}
.s-sect[data-dispo="centre"] .ho-img img{width:100%; height:420px; object-fit:cover}
.s-sect[data-dispo="plein"] .ho{min-height:600px; display:grid}
.s-sect[data-dispo="plein"] .ho-img{grid-area:1/1}
.s-sect[data-dispo="plein"] .ho-img img{width:100%; height:600px; object-fit:cover}
.s-sect[data-dispo="plein"] .ho-img::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(20,14,10,.78), rgba(20,14,10,.15) 62%)}
.s-sect[data-dispo="plein"] .ho-txt{grid-area:1/1; align-self:center; z-index:1;
  max-width:52ch; padding:0 40px; color:#fff}
.s-sect[data-dispo="plein"] .ho-txt .s-sur{color:#fff; opacity:.85}
.s-sect[data-dispo="cote"] .ho{display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:48px; padding:56px 40px}
.s-sect[data-dispo="cote"] .ho-img img{width:100%; height:440px; object-fit:cover}
.ho-txt h1{font-family:var(--p-titre); font-size:clamp(34px, 4.2vw, 58px); line-height:1.03;
  margin-top:14px; letter-spacing:-.015em}
.ho-chapo{margin-top:16px; font-size:17px; line-height:1.55; max-width:44ch}
.ho .s-bouton{display:inline-block; margin-top:24px; padding:12px 26px}
.ho-filet{display:none}
.s-sect[data-dispo="deborde"] .ho-filet{display:block}

/* ── chiffres ── */
.chif{display:grid; grid-template-columns:repeat(4,1fr);
  border-top:var(--p-filet) solid var(--p-encre); border-bottom:var(--p-filet) solid var(--p-encre)}
.chif > div{padding:30px 26px; border-right:var(--filet) solid var(--trait-veille)}
.chif > div:last-child{border-right:0}
.chif b{display:block; font-family:var(--p-titre); font-size:52px; line-height:1; font-weight:600}
.chif span{display:block; font-size:13px; color:var(--texte-doux); margin-top:8px}
.s-sect[data-dispo="pile"] .chif{grid-template-columns:1fr}
.s-sect[data-dispo="pile"] .chif > div{border-right:0; border-bottom:var(--filet) solid var(--trait-veille);
  display:flex; align-items:baseline; gap:18px}
.s-sect[data-dispo="pile"] .chif span{margin-top:0}
.s-sect[data-dispo="bande"] .chif{background:var(--p-encre); color:var(--p-papier); border:0}
.s-sect[data-dispo="bande"] .chif > div{border-right-color:rgba(255,255,255,.2)}
.s-sect[data-dispo="bande"] .chif span{color:inherit; opacity:.75}

/* ── texte long ── */
.tx{display:grid; grid-template-columns:150px minmax(0,var(--s-mesure));
  gap:44px; justify-content:center; padding:calc(var(--s-espace) * 1.4 * var(--p-densite)) 40px}
.tx-etq{position:sticky; top:96px; align-self:start; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--p-accent)}
.tx-corps p{font-size:17px; line-height:1.66; margin-bottom:18px}
.s-sect[data-dispo="lettrine"] .tx-corps > p:first-child::first-letter{
  float:left; font-family:var(--p-titre); font-size:74px; line-height:.76;
  padding:8px 14px 0 0; color:var(--p-accent)}
.s-sect[data-dispo="simple"] .tx{grid-template-columns:minmax(0,var(--s-mesure))}
.s-sect[data-dispo="simple"] .tx-etq{display:none}
.s-sect[data-dispo="deux"] .tx{grid-template-columns:150px minmax(0,900px)}
.s-sect[data-dispo="deux"] .tx-corps{columns:2; column-gap:44px}

/* ── galerie créditée ── */
.gal{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  padding:0 40px calc(var(--s-espace) * var(--p-densite)); align-items:start}
.gal-i{margin:0; cursor:pointer}
.gal-i img{width:100%; height:330px; object-fit:cover;
  transition:filter var(--d-long) var(--courbe)}
.gal-i:hover img{filter:contrast(1.05) saturate(1.05)}
.gal-i figcaption{display:flex; flex-direction:column; gap:3px; margin-top:12px;
  padding-top:10px; border-top:var(--p-filet) solid var(--p-encre)}
.gal-i strong{font-size:14px; font-weight:500}
.gal-i em{font-style:normal; font-size:12px; color:var(--p-accent);
  text-decoration:underline; text-underline-offset:3px}
.s-sect[data-dispo="decale"] .gal-i:nth-child(2){margin-top:76px}
.s-sect[data-dispo="decale"] .gal-i:nth-child(3){margin-top:28px}
.s-sect[data-dispo="bande"] .gal{grid-template-columns:repeat(3,1fr); gap:0; padding:0}
.s-sect[data-dispo="bande"] .gal-i img{height:280px}
.s-sect[data-dispo="bande"] .gal-i figcaption{padding:12px 16px; margin:0; border-top:0}

/* ── prochaines dates ── */
.dt-tete{display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:0 40px 14px; margin:0 40px 0; border-bottom:var(--p-filet) solid var(--p-encre);
  margin-left:0; margin-right:0}
.dt-tete h2{font-family:var(--p-titre); font-size:30px}
.dt-tout{font-size:13px; color:var(--p-accent); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.dt{padding:0 40px calc(var(--s-espace) * var(--p-densite))}
.dt li{display:flex; align-items:center; gap:24px; padding:20px 0;
  border-bottom:var(--filet) solid var(--trait-veille); cursor:pointer}
.dt li:hover{background:rgba(0,0,0,.02)}
.dt-j{display:flex; align-items:baseline; gap:7px; width:88px; flex:none;
  font-family:var(--p-titre); font-size:34px; line-height:1}
.dt-j em{font-style:normal; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--p-accent)}
.dt-n{display:flex; flex-direction:column; gap:3px; flex:1; min-width:0}
.dt-n strong{font-size:17px; font-weight:500}
.dt-n em{font-style:normal; font-size:13px; color:var(--texte-doux)}
.dt li img{width:0; height:62px; object-fit:cover; opacity:0; flex:none;
  transition:width var(--d-long) var(--courbe), opacity var(--d-long) var(--courbe)}
.dt li:hover img{width:96px; opacity:1}
.dt-fl{font-size:20px; color:var(--p-accent); flex:none;
  transition:transform var(--d-moyen) var(--courbe)}
.dt li:hover .dt-fl{transform:translateX(6px)}
.s-sect[data-dispo="grille"] .dt{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.s-sect[data-dispo="grille"] .dt li{flex-direction:column; align-items:flex-start; gap:10px;
  border:var(--p-filet) solid var(--p-encre); padding:20px}
.s-sect[data-dispo="grille"] .dt li img{display:none}

/* ── citation ── */
.cit{padding:76px 40px; text-align:center}
.s-sect[data-dispo="encre"] .cit{background:var(--p-encre); color:var(--p-papier)}
.cit blockquote{font-family:var(--p-titre); font-size:clamp(26px,3vw,40px); line-height:1.2;
  max-width:22ch; margin:0 auto}
.cit cite{display:block; margin-top:22px; font-style:normal; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; opacity:.7}
.s-sect[data-dispo="gros"] .cit blockquote{font-size:clamp(34px,5vw,64px); max-width:16ch}

/* ── image en section ── */
.s-img-cadre{margin:0 40px; overflow:hidden}
.s-image{width:100%; height:var(--s-image); object-fit:cover; margin:0}
.s-sect[data-dispo="plein"] .s-img-cadre{margin:0}
.s-sect[data-dispo="etroit"] .s-img-cadre{max-width:var(--s-mesure); margin:0 auto}
.s-sect[data-dispo="large"] .s-hero,.s-sect[data-dispo="large"] .s-corps{max-width:none}
.s-sect[data-dispo="pleine"] .s-corps{grid-template-columns:minmax(0,var(--s-mesure))}
.s-sect[data-dispo="pleine"] .s-cote{display:none}

/* ═══════════════ LES DEUX BANQUES ═══════════════ */
.bq-onglets{display:flex; border-bottom:var(--filet) solid var(--trait); flex:none}
.bq-og{display:flex; align-items:center; gap:var(--e-2); padding:11px 18px;
  font-size:var(--t-0); color:var(--texte-doux);
  border-bottom:var(--filet-fort) solid transparent; margin-bottom:calc(var(--filet-fort) * -1)}
.bq-og:hover{background:var(--fond-survol); color:var(--encre)}
.bq-og.actif{color:var(--encre); border-bottom-color:var(--encre); font-weight:500}
.bq-og b{font-size:var(--t--2); font-weight:400; color:var(--texte-doux);
  padding:1px 6px; border:var(--filet) solid var(--trait-veille)}
.bq-intro{display:flex; align-items:center; gap:var(--e-4); flex-wrap:wrap;
  padding:var(--e-3) var(--e-4); background:var(--fond);
  border-bottom:var(--filet) solid var(--trait-veille); flex:none}
.bq-mot{font-size:var(--t--1); color:var(--texte-doux); flex:1; min-width:220px; line-height:1.5}
.bq-mot strong{color:var(--encre); font-weight:600}

.art-rang{display:flex; gap:var(--e-2); overflow-x:auto; padding-bottom:var(--e-3);
  margin-bottom:var(--e-4); border-bottom:var(--filet) solid var(--trait-veille); scrollbar-width:thin}
.art-p{display:flex; align-items:center; gap:var(--e-2); padding:6px 11px 6px 6px; flex:none;
  border:var(--filet) solid var(--trait); background:var(--papier); text-align:left}
.art-p:hover{border-color:var(--encre)}
.art-p.actif{background:var(--encre); color:var(--fond); border-color:var(--encre)}
.art-p.actif em{color:var(--trait-veille)}
.art-av{display:grid; place-items:center; width:30px; height:30px; flex:none;
  background:var(--accent); color:var(--papier); font:600 var(--t--2)/1 var(--f-ui); letter-spacing:.04em}
.art-av-mini{width:17px; height:17px; font-size:9px}
.art-av-gros{width:64px; height:64px; font-size:var(--t-2)}
.art-n{display:flex; flex-direction:column}
.art-n strong{font-size:var(--t--1); font-weight:500}
.art-n em{font-style:normal; font-size:var(--t--2); color:var(--texte-doux)}

.banque-art{grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
.bq{display:flex; flex-direction:column; border:var(--filet) solid var(--trait);
  background:var(--papier); overflow:hidden}
.bq:hover{border-color:var(--encre)}
.bq.actif{outline:var(--filet-fort) solid var(--accent); outline-offset:-2px}
.bq-im{display:block; width:100%}
.bq img{width:100%; aspect-ratio:4/3; object-fit:cover;
  border-bottom:var(--filet) solid var(--trait-veille)}
.bq-txt{display:flex; flex-direction:column; gap:5px; padding:8px 9px; flex:1}
.bq-txt strong{font-size:var(--t--1); font-weight:500; line-height:1.3}
.bq-txt em{font-style:normal; font-size:var(--t--2); color:var(--texte-doux)}
.bq-art{display:flex; align-items:center; gap:5px; font-size:var(--t--2);
  color:var(--accent); text-align:left; margin-top:auto}
.bq-art:hover{text-decoration:underline; text-underline-offset:2px}
.ic-mini{width:11px; height:11px}
.bq-choix{padding:7px; border-top:var(--filet) solid var(--trait-veille);
  font-size:var(--t--2); color:var(--texte-doux); background:var(--fond)}
.bq-choix:hover{background:var(--encre); color:var(--fond)}

/* profil d'artiste */
.art-tete{position:relative; margin:calc(var(--e-4) * -1) calc(var(--e-4) * -1) 0}
.art-cover{width:100%; height:170px; object-fit:cover}
.art-id{display:flex; align-items:flex-start; gap:var(--e-3); padding:0 var(--e-4);
  margin-top:-30px; position:relative}
.art-av-gros{box-shadow:0 0 0 3px var(--papier)}
.art-id > div{padding-top:38px}
.art-id strong{display:block; font:400 var(--t-3)/1.2 var(--f-titre)}
.art-id em{display:block; font-style:normal; font-size:var(--t--1); color:var(--texte-doux)}
.art-bio{margin-top:var(--e-4); font-size:var(--t-0); line-height:1.6; color:var(--texte-doux)}
.art-chif{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e-2); margin-top:var(--e-4);
  border:var(--filet) solid var(--trait-veille); background:var(--fond)}
.art-chif > div{padding:var(--e-3); border-right:var(--filet) solid var(--trait-veille)}
.art-chif > div:last-child{border-right:0}
.art-chif b{display:block; font:400 var(--t-2)/1 var(--f-titre)}
.art-chif span{display:block; font-size:var(--t--2); color:var(--texte-doux); margin-top:3px}
.art-grille{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:var(--e-2)}
.art-o{border:var(--filet) solid var(--trait); background:var(--papier); overflow:hidden; text-align:left}
.art-o:hover{border-color:var(--encre)}
.art-o img{width:100%; aspect-ratio:1; object-fit:cover}
.art-o em{display:block; font-style:normal; font-size:var(--t--2); padding:5px 7px;
  color:var(--texte-doux); line-height:1.3}

/* ═══════════════ COMPOSITION ET ANIMATIONS ═══════════════ */
.compo{border:var(--filet) solid var(--trait); background:var(--papier); margin-top:var(--e-3)}
.compo li{display:flex; align-items:center; gap:var(--e-2); padding:9px 10px;
  border-bottom:var(--filet) solid var(--trait-veille); cursor:pointer}
.compo li:last-child{border-bottom:0}
.compo li:hover{background:var(--fond-survol)}
.compo li.actif{background:var(--fond-survol); box-shadow:inset 3px 0 0 var(--accent)}
.cp-p{width:9px; height:12px; flex:none;
  background:radial-gradient(circle,var(--trait) 1px,transparent 1.2px) 0 0/4.5px 4px}
.cp-n{flex:1; min-width:0; display:flex; flex-direction:column}
.cp-n strong{font-size:var(--t--1); font-weight:500}
.cp-n em{font-style:normal; font-size:var(--t--2); color:var(--texte-doux)}
.cp-b{display:flex; gap:2px; flex:none}
.cp-b button{display:grid; place-items:center; width:24px; height:24px;
  border:var(--filet) solid transparent; color:var(--texte-doux)}
.cp-b button:hover{border-color:var(--trait); background:var(--fond)}
.cp-b .ic{width:14px; height:14px}
.compo-neuf{display:grid; grid-template-columns:1fr 1fr; gap:var(--e-2)}
.cn{display:flex; align-items:center; gap:var(--e-2); padding:9px 10px;
  border:var(--filet) solid var(--trait); background:var(--papier);
  font-size:var(--t--1); text-align:left}
.cn:hover{border-color:var(--encre); background:var(--fond-survol)}
.cn .ic{color:var(--texte-doux)}

.an-choix{display:grid; grid-template-columns:1fr 1fr; gap:var(--e-2); margin-top:var(--e-3)}
.an{display:flex; flex-direction:column; gap:3px; padding:var(--e-2); text-align:left;
  border:var(--filet) solid var(--trait); background:var(--papier)}
.an:hover{border-color:var(--encre)}
.an.actif{outline:var(--filet-fort) solid var(--encre); outline-offset:-2px}
.an strong{font-size:var(--t--1); font-weight:500}
.an em{font-style:normal; font-size:var(--t--2); color:var(--texte-doux); line-height:1.35}
.an-vue{display:flex; flex-direction:column; gap:3px; height:34px; justify-content:center;
  padding:5px 6px; background:var(--fond); border:var(--filet) solid var(--trait-veille);
  margin-bottom:var(--e-1); overflow:hidden}
.an-vue i{display:block; height:4px; background:var(--trait); width:100%}
.an-vue i:nth-child(2){width:72%}
.an-vue i:nth-child(3){width:46%}
.an-vue-apparition i{animation:apA 2.4s var(--courbe) infinite}
.an-vue-apparition i:nth-child(2){animation-delay:.12s}
.an-vue-apparition i:nth-child(3){animation-delay:.24s}
@keyframes apA{0%,10%{opacity:0;transform:translateY(7px)}35%,80%{opacity:1;transform:none}100%{opacity:0}}
.an-vue-devoilement{position:relative}
.an-vue-devoilement::after{content:""; position:absolute; inset:0; background:var(--fond);
  animation:apD 2.4s var(--courbe) infinite}
@keyframes apD{0%{transform:translateY(0)}45%,80%{transform:translateY(100%)}100%{transform:translateY(100%)}}
.an-vue-glisse i{animation:apG 2.4s var(--courbe) infinite}
.an-vue-glisse i:nth-child(2){animation-delay:.1s}
.an-vue-glisse i:nth-child(3){animation-delay:.2s}
@keyframes apG{0%,10%{opacity:0;transform:translateX(-18px)}40%,80%{opacity:1;transform:none}100%{opacity:0}}
.an-vue-mots i{animation:apA 2.4s var(--courbe) infinite}
.an-vue-mots i:nth-child(2){animation-delay:.2s}
.an-vue-mots i:nth-child(3){animation-delay:.4s}
.an-vue-parallaxe i{animation:apP 2.6s ease-in-out infinite alternate}
.an-vue-parallaxe i:nth-child(2){animation-duration:3.4s}
.an-vue-parallaxe i:nth-child(3){animation-duration:4.2s}
@keyframes apP{to{transform:translateY(-7px)}}
.an-vue-ruban i{animation:apR 2.2s linear infinite}
@keyframes apR{to{transform:translateX(-24px)}}
.an-vue-aucune i{opacity:.5}

@media (max-width:980px){
  .compo-neuf,.an-choix{grid-template-columns:1fr}
  .banque-art{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media (max-width:820px){
  .s-sect[data-dispo="deborde"] .ho{min-height:0; padding-bottom:0}
  .s-sect[data-dispo="deborde"] .ho-img{margin-left:0; height:260px}
  .s-sect[data-dispo="deborde"] .ho-txt{position:static; width:auto; padding:24px 20px 28px;
    border:0; border-bottom:var(--p-filet) solid var(--p-encre)}
  .s-sect[data-dispo="deborde"] .ho-filet{display:none}
  .s-sect[data-dispo="cote"] .ho{grid-template-columns:1fr; padding:24px 20px}
  .chif{grid-template-columns:1fr 1fr}
  .chif > div{padding:20px 16px}
  .chif b{font-size:38px}
  .tx{grid-template-columns:1fr; gap:16px; padding:32px 20px}
  .tx-etq{position:static}
  .s-sect[data-dispo="deux"] .tx-corps{columns:1}
  .gal{grid-template-columns:1fr; padding:0 20px 32px}
  .s-sect[data-dispo="decale"] .gal-i:nth-child(2),
  .s-sect[data-dispo="decale"] .gal-i:nth-child(3){margin-top:0}
  .gal-i img{height:240px}
  .dt,.dt-tete{padding-left:20px; padding-right:20px}
  .dt li img{display:none}
  .s-sect[data-dispo="grille"] .dt{grid-template-columns:1fr}
  .cit{padding:48px 20px}
  .s-img-cadre{margin:0 20px}
  .s-outils{left:8px; right:8px; transform:none; top:8px; justify-content:flex-start}
  .so-etq{display:none}
  .art-rang{margin-bottom:var(--e-3)}
}

@media (max-width:820px){
  .s-nav{padding:12px 20px; gap:14px}
  .s-marque{flex:none}
  .s-marque > :not(.pastille){display:none}
  .s-nav nav{flex:1; justify-content:flex-end; overflow-x:auto; scrollbar-width:none; white-space:nowrap}
  .s-nav nav::-webkit-scrollbar{display:none}
  .art-cover{height:130px}
  .art-chif{grid-template-columns:1fr}
  .art-chif > div{border-right:0; border-bottom:var(--filet) solid var(--trait-veille)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING
   ═══════════════════════════════════════════════════════════════════════════ */

#vue-landing{overflow:hidden}
.ld-defil{flex:1; overflow-y:auto; scroll-behavior:smooth}
.ld-barre{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:var(--e-5);
  padding:var(--e-3) var(--e-6); background:var(--fond);
  border-bottom:var(--filet) solid var(--trait);
}
.ld-liens{display:flex; gap:var(--e-5); margin:0 auto; font-size:var(--t--1)}
.ld-liens a{color:var(--texte-doux); text-decoration:none; padding-bottom:2px;
  border-bottom:var(--filet-fort) solid transparent}
.ld-liens a:hover{color:var(--encre); border-bottom-color:var(--encre)}
.ld-act{display:flex; gap:var(--e-2); flex:none}
.btn-gros{padding:11px 22px; font-size:var(--t-0)}

.ld-hero{
  display:grid; grid-template-columns:minmax(0,1.05fr) 460px; gap:var(--e-8);
  max-width:1200px; margin:0 auto; padding:var(--e-8) var(--e-6) var(--e-8); align-items:center;
}
.ld-sur{font-size:var(--t--2); letter-spacing:.15em; text-transform:uppercase; color:var(--accent)}
.ld-hero h1{font:400 3.2rem/1.06 var(--f-titre); letter-spacing:-.016em;
  margin-top:var(--e-3); max-width:17ch}
.ld-chapo{margin-top:var(--e-4); font-size:var(--t-1); line-height:1.6;
  color:var(--texte-doux); max-width:54ch}
.ld-boutons{display:flex; gap:var(--e-3); margin-top:var(--e-5); flex-wrap:wrap}
.ld-preuves{display:flex; flex-wrap:wrap; gap:var(--e-2) var(--e-5); margin-top:var(--e-5);
  padding-top:var(--e-4); border-top:var(--filet) solid var(--trait-veille)}
.ld-preuves li{display:flex; align-items:center; gap:7px; font-size:var(--t--1); color:var(--texte-doux)}
.ld-preuves .ic{width:15px; height:15px; color:var(--accent)}

.ld-hero-vis{position:relative; height:440px}
.lv{margin:0; position:absolute; background:var(--papier);
  border:var(--filet) solid var(--trait); box-shadow:var(--decalage); padding:7px}
.lv img{width:100%; height:100%; object-fit:cover}
.lv figcaption{position:absolute; left:7px; bottom:-11px; white-space:nowrap;
  background:var(--encre); color:var(--fond); font-size:9px;
  letter-spacing:.09em; text-transform:uppercase; padding:3px 7px}
.lv-1{left:4%; top:60px; width:190px; height:268px; z-index:4}
.lv-2{right:0; top:16px; width:224px; height:146px; z-index:3}
.lv-3{right:22px; bottom:76px; width:158px; height:158px; z-index:2}
.lv-4{left:26%; bottom:0; width:146px; height:106px; z-index:1}
.lv-source{position:absolute; left:0; top:8px; z-index:5; font-size:var(--t--2);
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
  padding:4px 9px; border:var(--filet) solid var(--accent); background:var(--fond)}
.lv-fil{position:absolute; background:var(--trait-veille); z-index:0}
.lv-fil-1{left:46px; top:36px; width:var(--filet); height:24px}
.lv-fil-2{left:46px; top:36px; width:200px; height:var(--filet)}
.lv-fil-3{right:110px; top:36px; width:var(--filet); height:-webkit-fill-available; height:100px}

.ld-sect{max-width:1200px; margin:0 auto; padding:var(--e-8) var(--e-6);
  border-top:var(--filet) solid var(--trait-veille)}
.ld-sect-fonce{max-width:none; background:var(--encre); color:var(--fond); border-top:0}
.ld-sect-fonce .ld-tete,.ld-sect-fonce .ld-etapes,.ld-sect-fonce .ld-prix,
.ld-sect-fonce .ld-options{max-width:1200px; margin-left:auto; margin-right:auto}
.ld-sect-fonce .ld-intro,.ld-sect-fonce .aide{color:#c9bdb0}
.ld-tete{max-width:62ch; margin-bottom:var(--e-6)}
.ld-etq{font-size:var(--t--2); letter-spacing:.15em; text-transform:uppercase; color:var(--accent)}
.ld-sect-fonce .ld-etq{color:#e2865e}
.ld-tete h2{font:400 2.2rem/1.14 var(--f-titre); margin-top:var(--e-2); letter-spacing:-.01em}
.ld-intro{margin-top:var(--e-3); font-size:var(--t-1); line-height:1.6; color:var(--texte-doux)}

.ld-pb{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e-4)}
.ld-pb article{padding:var(--e-5); background:var(--papier);
  border:var(--filet) solid var(--trait); display:flex; flex-direction:column}
.ld-pb-n{font:400 var(--t-1)/1 var(--f-titre); color:var(--accent)}
.ld-pb h3{font-size:var(--t-1); margin-top:var(--e-3); line-height:1.3}
.ld-pb-mal{margin-top:var(--e-3); font-size:var(--t--1); line-height:1.6;
  color:var(--texte-doux); flex:1}
.ld-pb-bien{margin-top:var(--e-4); padding-top:var(--e-3);
  border-top:var(--filet) solid var(--trait-veille); font-size:var(--t--1); line-height:1.6}

.ld-etapes{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e-6)}
.ld-etapes article{border-top:var(--filet-fort) solid var(--accent); padding-top:var(--e-4)}
.ld-num{font:400 var(--t-4)/1 var(--f-titre)}
.ld-etapes h3{font-size:var(--t-1); margin-top:var(--e-2)}
.ld-etapes p{margin-top:var(--e-2); font-size:var(--t--1); line-height:1.6; color:#c9bdb0}

.ld-compare{display:grid; grid-template-columns:1fr 1fr; gap:var(--e-4)}
.ld-col{padding:var(--e-5); border:var(--filet) solid var(--trait); background:var(--papier)}
.ld-col-avant{background:var(--fond)}
.ld-col h3{font-size:var(--t-1); padding-bottom:var(--e-3);
  border-bottom:var(--filet) solid var(--trait-veille)}
.ld-col ul{margin:var(--e-3) 0}
.ld-col li{display:flex; align-items:center; gap:var(--e-3); padding:8px 0;
  border-bottom:var(--filet) solid var(--trait-veille); font-size:var(--t--1)}
.ld-col li span{flex:1}
.ld-col li b{font-variant-numeric:tabular-nums; font-weight:500; white-space:nowrap}
.ld-col-avant li{color:var(--texte-doux)}
.ld-col-apres .ic{color:var(--accent); flex:none}
.ld-col-tot{display:flex; align-items:baseline; justify-content:space-between; gap:var(--e-3);
  margin-top:var(--e-4); padding-top:var(--e-3); border-top:var(--filet-fort) solid var(--encre)}
.ld-col-tot span{font-size:var(--t--1); color:var(--texte-doux)}
.ld-col-tot b{font:400 var(--t-3)/1 var(--f-titre)}
.ld-col-apres .ld-col-tot b{color:var(--accent)}
.ld-col-note{margin-top:var(--e-2); font-size:var(--t--2); color:var(--texte-doux)}

.ld-sect-art{display:grid; grid-template-columns:minmax(0,1fr) 440px; gap:var(--e-8); align-items:center}
.ld-art-p{margin:var(--e-4) 0 var(--e-5)}
.ld-art-p li{padding:10px 0; border-bottom:var(--filet) solid var(--trait-veille);
  font-size:var(--t-0); line-height:1.55}
.ld-art-vis{display:grid; grid-template-columns:1fr 1fr; gap:var(--e-3)}
.ld-art-vis figure{margin:0; background:var(--papier); border:var(--filet) solid var(--trait); padding:7px}
.ld-art-vis img{width:100%; height:150px; object-fit:cover}
.ld-art-vis figcaption{display:flex; align-items:center; gap:6px; margin-top:8px;
  font-size:var(--t--2); color:var(--texte-doux)}
.ld-art-vis figure:nth-child(2){margin-top:26px}
.ld-art-vis figure:nth-child(3){margin-top:-26px}

.ld-eng{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e-5)}
.ld-eng article{border-left:var(--filet-fort) solid var(--trait-veille); padding-left:var(--e-4)}
.ld-eng .ic{width:22px; height:22px; color:var(--accent)}
.ld-eng h3{font-size:var(--t-0); margin-top:var(--e-2)}
.ld-eng p{margin-top:var(--e-2); font-size:var(--t--1); line-height:1.6; color:var(--texte-doux)}

.ld-prix{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e-4); align-items:stretch}
.lp{position:relative; padding:var(--e-5); background:var(--papier); color:var(--encre);
  border:var(--filet) solid var(--trait); display:flex; flex-direction:column}
.lp-mis{outline:var(--filet-fort) solid var(--accent); outline-offset:-2px}
.lp-ruban{position:absolute; right:-1px; top:-1px; background:var(--accent); color:var(--papier);
  font-size:var(--t--2); letter-spacing:.06em; text-transform:uppercase; padding:4px 10px}
.lp h3{font:400 var(--t-2)/1.2 var(--f-titre)}
.lp-p{display:flex; align-items:baseline; gap:var(--e-2); margin-top:var(--e-2)}
.lp-p b{font:600 var(--t-4)/1 var(--f-ui); letter-spacing:-.02em}
.lp-p span{font-size:var(--t--1); color:var(--texte-doux)}
.lp-q{margin-top:var(--e-3); font-size:var(--t--1); color:var(--texte-doux); min-height:2.8em}
.lp ul{margin:var(--e-4) 0; flex:1}
.lp li{display:flex; align-items:flex-start; gap:var(--e-2); padding:6px 0; font-size:var(--t--1)}
.lp li .ic{width:15px; height:15px; color:var(--accent); flex:none; margin-top:2px}
.lp li em{font-style:normal; font-family:var(--f-titre)}

.ld-options{margin-top:var(--e-7); padding-top:var(--e-5);
  border-top:var(--filet) solid rgba(255,255,255,.2)}
.ld-options h3{font:400 var(--t-2)/1.2 var(--f-titre)}
.ld-opt{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--e-3); margin-top:var(--e-4)}
.ld-opt article{padding:var(--e-4); border:var(--filet) solid rgba(255,255,255,.24)}
.ld-opt strong{display:block; font-size:var(--t-0)}
.ld-opt b{display:block; font:600 var(--t-2)/1 var(--f-ui); margin-top:var(--e-2); color:#e2865e}
.ld-opt p{margin-top:var(--e-2); font-size:var(--t--1); line-height:1.6; color:#c9bdb0}

.ld-faq{display:grid; gap:var(--e-1); max-width:840px}
.ld-faq details{border:var(--filet) solid var(--trait-veille); background:var(--papier)}
.ld-faq summary{padding:14px 16px; cursor:pointer; font-size:var(--t-0); font-weight:500;
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:var(--e-3)}
.ld-faq summary::-webkit-details-marker{display:none}
.ld-faq summary::after{content:"+"; color:var(--accent); font-size:var(--t-2); line-height:1}
.ld-faq details[open] summary::after{content:"−"}
.ld-faq details[open] summary{border-bottom:var(--filet) solid var(--trait-veille)}
.ld-faq p{padding:14px 16px; font-size:var(--t--1); line-height:1.65; color:var(--texte-doux)}

.ld-final{text-align:center; padding:var(--e-8) var(--e-6) var(--e-7);
  border-top:var(--filet) solid var(--trait)}
.ld-final h2{font:400 2.4rem/1.12 var(--f-titre); max-width:18ch; margin:0 auto}
.ld-final > p{margin-top:var(--e-3); color:var(--texte-doux)}
.ld-final .ld-boutons{justify-content:center}
.ld-pied{margin-top:var(--e-7); padding-top:var(--e-4);
  border-top:var(--filet) solid var(--trait-veille); font-size:var(--t--2); color:var(--texte-doux)}

/* ═══════════════════════════ ONBOARDING ═══════════════════════════ */
#vue-onboarding{background:var(--fond)}
.ob-barre{display:flex; align-items:center; gap:var(--e-5); flex:none;
  padding:var(--e-3) var(--e-6); border-bottom:var(--filet) solid var(--trait); position:relative}
.ob-jauge{position:absolute; left:0; bottom:-1px; right:0; height:2px; background:var(--trait-veille)}
.ob-jauge span{display:block; height:100%; background:var(--accent);
  transition:width var(--d-long) var(--courbe)}
.ob-barre .btn{margin-left:auto}
.ob-corps{flex:1; display:grid; grid-template-columns:minmax(0,1fr) 420px; min-height:0}
.ob-question{overflow-y:auto; padding:var(--e-7) var(--e-6)}
.ob-question > *{max-width:720px}
.ob-etq{font-size:var(--t--2); letter-spacing:.15em; text-transform:uppercase; color:var(--accent)}
.ob-question h2{font:400 2.1rem/1.14 var(--f-titre); margin-top:var(--e-2)}
.ob-sous{margin-top:var(--e-3); font-size:var(--t-0); line-height:1.6; color:var(--texte-doux); max-width:58ch}

.ob-cartes{display:grid; grid-template-columns:1fr 1fr; gap:var(--e-3); margin-top:var(--e-5)}
.ob-c{display:flex; flex-direction:column; gap:var(--e-2); text-align:left; padding:var(--e-4);
  border:var(--filet) solid var(--trait); background:var(--papier)}
.ob-c:hover{border-color:var(--encre); box-shadow:var(--decalage)}
.ob-c.actif{outline:var(--filet-fort) solid var(--accent); outline-offset:-2px}
.ob-c-ic{display:grid; place-items:center; width:40px; height:40px;
  border:var(--filet) solid var(--trait-veille); color:var(--accent)}
.ob-c-ic .ic{width:22px; height:22px}
.ob-c strong{font-size:var(--t-1)}
.ob-c em{font-style:normal; font-size:var(--t--1); color:var(--texte-doux)}

.ob-liste{display:grid; gap:var(--e-2); margin-top:var(--e-5)}
.ob-l{display:flex; align-items:flex-start; gap:var(--e-3); text-align:left;
  padding:var(--e-4); border:var(--filet) solid var(--trait); background:var(--papier)}
.ob-l:hover{border-color:var(--encre)}
.ob-l.actif{outline:var(--filet-fort) solid var(--accent); outline-offset:-2px}
.ob-l-m{display:grid; place-items:center; width:22px; height:22px; flex:none;
  border:var(--filet) solid var(--trait); color:var(--papier); background:var(--papier)}
.ob-l.actif .ob-l-m{background:var(--accent); border-color:var(--accent)}
.ob-l-m .ic{width:14px; height:14px}
.ob-l-t{display:flex; flex-direction:column; gap:2px}
.ob-l strong{font-size:var(--t-0); font-weight:500}
.ob-l em{font-style:normal; font-size:var(--t--1); color:var(--texte-doux)}

.ob-champ{margin-top:var(--e-5)}
.ob-champ input{font-size:var(--t-2); padding:14px 16px; font-family:var(--f-titre)}
.ob-ex{display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-2)}
.ob-e{padding:6px 11px; border:var(--filet) dashed var(--trait); background:var(--papier);
  font-size:var(--t--1); color:var(--texte-doux); text-align:left}
.ob-e:hover{border-style:solid; color:var(--encre)}

.ob-styles{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--e-3); margin-top:var(--e-5)}

.ob-bas{display:flex; align-items:center; gap:var(--e-4); flex:none;
  padding:var(--e-3) var(--e-6); border-top:var(--filet) solid var(--trait); background:var(--fond)}
.ob-aide{font-size:var(--t--1); color:var(--texte-doux); margin-left:auto}
.ob-bas .btn-fort{margin-left:0}
.ob-bas #ob-retour{margin-right:auto}

.ob-vue{background:var(--papier); border-left:var(--filet) solid var(--trait);
  overflow-y:auto; padding:var(--e-5); display:flex; flex-direction:column; gap:var(--e-3)}
.obv-etq{font-size:var(--t--2); letter-spacing:.1em; text-transform:uppercase; color:var(--texte-doux)}
.obv-page{border:var(--filet) solid var(--trait); box-shadow:var(--decalage);
  padding:var(--e-4); display:flex; flex-direction:column; gap:var(--e-2)}
.obv-nav{display:flex; align-items:center; gap:6px; padding-bottom:9px;
  border-bottom:var(--filet) solid rgba(0,0,0,.14)}
.obv-pastille{display:grid; place-items:center; width:16px; height:16px;
  font:600 7px/1 var(--f-ui); flex:none}
.obv-nav i{height:3px; width:20px; background:currentColor; opacity:.3}
.obv-page h3{font-size:var(--t-1); line-height:1.15; font-weight:600}
.obv-filet{width:100%}
.obv-page img{width:100%; height:112px; object-fit:cover}
.obv-page p{font-size:var(--t--2); line-height:1.5; opacity:.85}
.obv-fmts{display:flex; flex-wrap:wrap; gap:5px}
.obv-fmts span{display:inline-flex; align-items:center; gap:5px; padding:4px 8px;
  border:var(--filet) solid var(--trait-veille); font-size:var(--t--2);
  color:var(--texte-eteint); opacity:.55}
.obv-fmts span .ic{width:13px; height:13px}
.obv-fmts span.on{opacity:1; color:var(--encre); border-color:var(--encre); background:var(--fond)}
.obv-encart{padding:var(--e-3); border:var(--filet) solid var(--accent); background:var(--fond)}
.obv-encart strong{display:block; font-size:var(--t--1); color:var(--accent)}
.obv-encart p{margin-top:var(--e-1); font-size:var(--t--2); line-height:1.55; color:var(--texte-doux)}
.obv-rep{border-top:var(--filet) solid var(--trait-veille); margin-top:auto}
.obv-rep li{display:flex; gap:var(--e-3); padding:6px 0;
  border-bottom:var(--filet) solid var(--trait-veille); font-size:var(--t--2)}
.obv-rep span{width:76px; flex:none; color:var(--texte-doux)}
.obv-rep b{font-weight:500}

.ob-recap{margin-top:var(--e-5); display:grid; gap:var(--e-4)}
.obr-bloc{padding:var(--e-5); background:var(--papier); border:var(--filet) solid var(--trait)}
.obr-bloc h3{font:400 var(--t-2)/1.25 var(--f-titre)}
.obr-fmts{display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-3)}
.obr-fmts span{display:inline-flex; align-items:center; gap:7px; padding:7px 12px;
  border:var(--filet) solid var(--encre); font-size:var(--t--1)}
.obr-act{margin-top:var(--e-3); counter-reset:a}
.obr-act li{display:flex; flex-direction:column; gap:3px; padding:12px 0 12px 38px; position:relative;
  border-bottom:var(--filet) solid var(--trait-veille)}
.obr-act li:last-child{border-bottom:0}
.obr-act li::before{counter-increment:a; content:counter(a); position:absolute; left:0; top:12px;
  width:24px; height:24px; display:grid; place-items:center;
  border:var(--filet) solid var(--accent); color:var(--accent); font-size:var(--t--2)}
.obr-act strong{font-size:var(--t-0); font-weight:500}
.obr-act span{font-size:var(--t--1); color:var(--texte-doux); line-height:1.55}
.obr-formule{background:var(--encre); color:var(--fond); border-color:var(--encre)}
.obr-formule .ob-etq{color:#e2865e}
.obr-formule h3{margin-top:var(--e-2)}
.obr-formule h3 em{font-style:normal; font-size:var(--t-0); color:#c9bdb0}
.obr-formule p{margin-top:var(--e-3); font-size:var(--t--1); line-height:1.6; color:#c9bdb0}
.obr-maquette{padding:var(--e-4); border:var(--filet) dashed var(--accent); background:var(--fond)}
.obr-maquette strong{display:block; font-size:var(--t-0); color:var(--accent)}
.obr-maquette p{margin-top:var(--e-2); font-size:var(--t--1); line-height:1.6; color:var(--texte-doux)}

@media (max-width:1180px){
  .ld-hero{grid-template-columns:1fr; gap:var(--e-6)}
  .ld-hero-vis{height:320px; max-width:520px}
  .ld-sect-art{grid-template-columns:1fr}
  .ob-corps{grid-template-columns:minmax(0,1fr) 340px}
}
@media (max-width:980px){
  .ld-liens{display:none}
  .ld-pb,.ld-etapes,.ld-eng,.ld-prix,.ld-opt{grid-template-columns:1fr}
  .ld-compare{grid-template-columns:1fr}
  .ld-hero h1{font-size:2.4rem}
  .ob-corps{grid-template-columns:1fr}
  .ob-vue{border-left:0; border-top:var(--filet) solid var(--trait)}
  .ob-styles{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .ld-barre{padding:var(--e-3) var(--e-4); gap:var(--e-3)}
  .ld-act .btn{padding:7px 11px; font-size:var(--t--2)}
  .ld-hero,.ld-sect,.ld-final{padding-left:var(--e-4); padding-right:var(--e-4)}
  .ld-hero{padding-top:var(--e-6); padding-bottom:var(--e-6)}
  .ld-hero h1{font-size:2rem}
  .ld-hero-vis{display:none}
  .ld-tete h2{font-size:1.7rem}
  .ld-art-vis{grid-template-columns:1fr 1fr}
  .ld-art-vis figure:nth-child(2),.ld-art-vis figure:nth-child(3){margin-top:0}
  .ob-barre,.ob-bas{padding-left:var(--e-4); padding-right:var(--e-4)}
  .ob-question{padding:var(--e-5) var(--e-4)}
  .ob-question h2{font-size:1.6rem}
  .ob-cartes,.ob-styles{grid-template-columns:1fr}
  .ob-champ input{font-size:var(--t-1)}
}