/* ═══════════════════════════════════════════════════════════════════════════
   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}


.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 */

/* ═══════════════════════════════════════════════════════════════════════════
   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.6rem/1.04 var(--f-titre); letter-spacing:-.018em;
  margin-top:var(--e-3); max-width:15ch}
.ld-chapo{margin-top:var(--e-4); font-size:var(--t-1); line-height:1.6;
  color:var(--texte-doux); max-width:54ch}
.ld-chapo-mal{color:var(--encre); font-size:var(--t-1); line-height:1.5;
  padding-left:var(--e-4); border-left:var(--filet-fort) solid var(--accent); max-width:44ch}
.ld-chapo-mal em{font-style:normal; font-weight:600}
.ld-chapo-mal + .ld-chapo{margin-top:var(--e-3); max-width:46ch}
.ld-punch{margin-top:var(--e-4); font:400 1.2rem/1.66 var(--f-titre); max-width:46ch;
  padding:var(--e-4) 0 8px; border-top:var(--filet) solid var(--trait-veille);
  text-wrap:balance}
/* le trait part de « une fois », passe par « partout », puis descend sur les quatre sorties */
.pu-un,.pu-tout{font-style:normal; position:relative; display:inline-block; white-space:nowrap}
.pu-un::after,.pu-tout::after,.ld-formats strong::after{
  content:""; position:absolute; left:0; width:100%; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:0 50%;
}
.pu-un::after,.pu-tout::after{bottom:-1px}
.ld-formats strong::after{bottom:-3px}
.ld-formats strong{position:relative; display:inline-block; margin-bottom:4px}
.joue .pu-un::after{animation:trace .38s var(--courbe) .35s forwards}
.joue .pu-tout::after{animation:trace .38s var(--courbe) .95s forwards}
.joue .ld-formats li:nth-child(1) strong::after{animation:trace .32s var(--courbe) 1.45s forwards}
.joue .ld-formats li:nth-child(2) strong::after{animation:trace .32s var(--courbe) 1.60s forwards}
.joue .ld-formats li:nth-child(3) strong::after{animation:trace .32s var(--courbe) 1.75s forwards}
.joue .ld-formats li:nth-child(4) strong::after{animation:trace .32s var(--courbe) 1.90s forwards}
@keyframes trace{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .pu-un::after,.pu-tout::after,.ld-formats strong::after{transform:scaleX(1)}
}
.ld-chapo strong{color:var(--encre); font-weight:600}
.ld-boutons{display:flex; gap:var(--e-3); margin-top:var(--e-5); flex-wrap:wrap}
.ld-marque strong{font-size:var(--t-1); font-weight:600}
.ld-formats{display:flex; flex-wrap:wrap; gap:var(--e-2) var(--e-4); margin-top:var(--e-4);
  padding:var(--e-3) 0; border-top:var(--filet) solid var(--trait-veille);
  border-bottom:var(--filet) solid var(--trait-veille)}
.ld-formats li{display:flex; align-items:center; gap:7px}
.ld-formats .ic{width:17px; height:17px; color:var(--encre); flex:none}
.ld-formats span{display:flex; flex-direction:column; align-items:flex-start;
  font-size:var(--t--2); color:var(--texte-doux); line-height:1.3}
.ld-formats strong{font-size:var(--t--1); font-weight:500; color:var(--encre)}
.ld-preuves{display:flex; flex-wrap:wrap; gap:var(--e-2) var(--e-5); margin-top:var(--e-4)}
.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) 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)}

/* ── manifeste : traitement affiche imprimée, trame de points et gros titre ── */
.ld-manif{background:var(--papier);
  background-image:radial-gradient(var(--trait-veille) .5px, transparent .5px);
  background-size:14px 14px;
  border-top:var(--filet-fort) solid var(--encre); border-bottom:var(--filet-fort) solid var(--encre)}
.ld-manif-in{max-width:1200px; margin:0 auto; padding:var(--e-8) var(--e-6)}
.mf-tete{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--e-6) var(--e-8); align-items:end; margin-bottom:var(--e-7)}
.mf-tete h2{font:400 clamp(2rem,4.4vw,3.1rem)/1.05 var(--f-titre); letter-spacing:-.015em;
  margin-top:var(--e-3)}
.mf-web{font-variant-caps:all-small-caps; letter-spacing:.06em; color:var(--accent)}
.mf-chapo p{font-size:var(--t-0); line-height:1.65; color:var(--texte-doux)}
.mf-chapo p+p{margin-top:var(--e-3)}
.mf-liste{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--e-6) var(--e-8)}
.mf-liste article{padding-top:var(--e-4); border-top:var(--filet) solid var(--trait)}
.mf-h{display:flex; align-items:baseline; justify-content:space-between; gap:var(--e-4)}
.mf-h h3{font:400 var(--t-2)/1.22 var(--f-titre); letter-spacing:-.01em}
.mf-liste p{margin-top:var(--e-3); font-size:var(--t--1); line-height:1.65; color:var(--texte-doux)}
.mf-etat{flex:none; font-size:var(--t--2); letter-spacing:.09em; text-transform:uppercase;
  padding:3px 8px; border:var(--filet) solid currentColor; white-space:nowrap}
.mf-place{color:var(--accent)}
.mf-cours{color:var(--texte-doux)}
.mf-cap{color:var(--texte-eteint)}

@media (max-width:900px){
  .mf-tete,.mf-liste{grid-template-columns:minmax(0,1fr)}
  .mf-tete{align-items:start; gap:var(--e-4)}
  .ld-manif-in{padding:var(--e-7) var(--e-5)}
}
@media (max-width:520px){
  .mf-h{flex-direction:column; align-items:flex-start; gap:var(--e-2)}
}

.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-opt-tete{display:grid; grid-template-columns:minmax(0,26ch) minmax(0,1fr);
  gap:var(--e-6); align-items:start; margin-bottom:var(--e-5)}
.ld-opt-tete h3{font:400 1.8rem/1.16 var(--f-titre); margin-top:var(--e-2)}
.ld-opt-arg{grid-column:2; grid-row:1 / span 2; display:grid; gap:var(--e-3)}
.ld-opt-arg p{font-size:var(--t-0); line-height:1.68; color:#c9bdb0}
.ld-opt-arg p:first-child{color:var(--fond)}
.ld-opt{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--e-3); margin-top:var(--e-4);
  align-items:stretch}
.ld-devis{margin-top:var(--e-3)}

/* la bande « on continue à s'en occuper », sous les trois formules */
.ld-suivi{display:flex; align-items:center; justify-content:space-between; gap:var(--e-6);
  margin-top:var(--e-4); padding:var(--e-4) var(--e-5);
  border:var(--filet) solid rgba(255,255,255,.24); background:rgba(255,255,255,.045)}
.ls-txt strong{display:block; font:400 var(--t-2)/1.2 var(--f-titre)}
.ls-txt p{margin-top:var(--e-2); font-size:var(--t--1); line-height:1.6; color:#c9bdb0; max-width:78ch}
.ls-prix{flex:none; display:flex; flex-direction:column; align-items:flex-end; text-align:right}
.ls-prix b{font:600 var(--t-4)/1 var(--f-ui); color:#e2865e; letter-spacing:-.02em}
.ls-prix span{margin-top:6px; font-size:var(--t--2); color:#c9bdb0}
@media (max-width:760px){
  .ld-suivi{flex-direction:column; align-items:flex-start; gap:var(--e-3)}
  .ls-prix{flex-direction:row; align-items:baseline; text-align:left; gap:var(--e-2)}
  .ls-prix span{margin-top:0}
}

/* la section tarifs se resserre : 1200 px étalait les phrases sur 130 signes */
#ld-prix > *{max-width:1020px; margin-left:auto; margin-right:auto}
#ld-prix .ld-tete h2,#ld-prix .ld-tete .ld-intro{max-width:62ch}
#ld-prix .ld-opt-tete{grid-template-columns:minmax(0,27ch) minmax(0,66ch)}
#ld-prix .ld-opt{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--e-4)}
@media (max-width:820px){
  #ld-prix .ld-opt{grid-template-columns:minmax(0,1fr)}
}
.ld-opt article{display:flex; flex-direction:column; position:relative}
.lo-mis{outline:var(--filet-fort) solid #e2865e; outline-offset:-2px; border-color:transparent}
.lo-ruban{position:absolute; left:-1px; top:-1px; background:#e2865e; color:var(--encre);
  font-size:var(--t--2); letter-spacing:.06em; text-transform:uppercase; padding:4px 10px}
.lo-mis strong{margin-top:var(--e-4)}
.ld-opt article > p:first-of-type{flex:1}
.lo-inclus{display:flex; align-items:flex-start; gap:7px; margin-top:var(--e-3);
  padding-top:var(--e-3); border-top:var(--filet) solid rgba(255,255,255,.2)}
.lo-inclus .ic{width:15px; height:15px; color:#e2865e; flex:none; margin-top:2px}
.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)}


/* ── écrans étroits ─────────────────────────────────────────────────── */
@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}
}
@media (max-width:980px){
  .ld-liens{display:none}
  .ld-pb,.ld-etapes,.ld-eng,.ld-prix{grid-template-columns:1fr}
  .ld-opt{grid-template-columns:1fr 1fr}
  .ld-opt-tete{grid-template-columns:1fr; gap:var(--e-3)}
  .ld-opt-arg{grid-column:1; grid-row:auto}
  .ld-compare{grid-template-columns:1fr}
  .ld-hero h1{font-size:2.4rem}
}
@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-punch{font-size:1.06rem; max-width:none}
  .ld-hero-vis{display:none}
  .ld-tete h2{font-size:1.7rem}
  .ld-opt{grid-template-columns:1fr}
  .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}
}

/* ═══════════════════════════════════════════════════════════════════════════
   OÙ EN EST L'OUTIL
   La bande d'honnêteté sous le hero : le catalogue déclaré doit fonctionner,
   la page de vente suit la même règle.
   ═══════════════════════════════════════════════════════════════════════════ */

.ld-formats li[data-etat="a-venir"]{opacity:.62}
.ld-formats li[data-etat="a-venir"] em{
  font-style:normal; font-size:var(--t--2); color:var(--accent);
  border:var(--filet) solid var(--accent); padding:0 5px; margin-left:6px; white-space:nowrap;
}

.ld-etat{padding:var(--e-7) var(--e-8); background:var(--papier);
  border-top:var(--filet) solid var(--trait); border-bottom:var(--filet) solid var(--trait)}
.ld-etat-in{max-width:1000px; margin:0 auto}
.ld-etat h2{font-family:var(--f-titre); font-size:1.9rem; margin-top:var(--e-2)}
.ld-etat-cols{display:grid; grid-template-columns:1fr 1fr; gap:var(--e-6); margin-top:var(--e-5)}
.ld-etat-cols h3{font-size:var(--t-0); text-transform:uppercase; letter-spacing:.06em;
  padding-bottom:var(--e-2); border-bottom:var(--filet-fort) solid var(--encre)}
.ld-etat-cols div:last-child h3{border-bottom-color:var(--trait-veille); color:var(--texte-doux)}
.ld-etat-cols ul{margin-top:var(--e-3); display:grid; gap:var(--e-2)}
.ld-etat-cols li{padding-left:var(--e-4); position:relative; line-height:1.5}
.ld-etat-cols li::before{content:""; position:absolute; left:0; top:.62em;
  width:7px; height:7px; background:var(--accent)}
.ld-etat-cols div:last-child li::before{background:none; border:var(--filet) solid var(--trait)}
.ld-etat .aide{margin-top:var(--e-5); font-size:var(--t--1); color:var(--texte-doux)}

@media (max-width:820px){
  .ld-etat{padding:var(--e-6) var(--e-4)}
  .ld-etat-cols{grid-template-columns:1fr; gap:var(--e-5)}
  .ld-etat h2{font-size:1.6rem}
}