/* ═══════════════════════════════════════════════════════════════════════════
   Suite créative · la démo du hero
   Un plateau de 1180 × 664 dessiné en pixels réels, mis à l'échelle par --k.
   Tout ce qui est montré doit ressembler à la chose : un navigateur ressemble
   à un navigateur, une affiche A4 tient le rapport 210 × 297, une lettre a son
   en-tête. Les objets sont posés en absolu sur le plateau.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* le plateau */
  --dm-l:1180px; --dm-h:664px;
  /* l'identité de Camille, qui doit se lire comme la sienne */
  --ca-encre:#26302a; --ca-accent:#3f5d4f; --ca-terre:#a9552f;
  --ca-papier:#f6f1e7; --ca-filet:#c8c2b4;
}

/* ── le bouton de lancement, au-dessus des images du hero ── */
.ld-hero-cote{display:flex; flex-direction:column; gap:var(--e-5)}
.ld-lance{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:var(--e-4);
  width:100%; text-align:left; padding:var(--e-4) var(--e-5);
  background:var(--papier); border:var(--filet-fort) solid var(--encre);
  box-shadow:var(--decalage); position:relative; overflow:hidden;
  transition:transform var(--d-moyen) var(--courbe), box-shadow var(--d-moyen) var(--courbe);
}
.ld-lance::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .45s var(--courbe);
}
.ld-lance:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 0 var(--trait-veille)}
.ld-lance:hover::after{transform:scaleX(1)}
.ld-lance-jouer{
  width:42px; height:42px; flex:none; display:grid; place-items:center;
  background:var(--accent); color:var(--fond);
}
.ld-lance-jouer svg{width:15px; height:17px; fill:currentColor;
  transition:transform var(--d-moyen) var(--courbe)}
.ld-lance:hover .ld-lance-jouer svg{transform:translateX(3px)}
/* la ligne d'appui vise son élément : un sélecteur .ld-lance span l'emporterait sur
   .ld-lance-jouer, qui perdrait sa grille et sa couleur */
.ld-lance-txt b{display:block; font-size:var(--t-1); font-weight:600; line-height:1.2}
.ld-lance-txt i{display:block; margin-top:3px; font-style:normal; font-size:var(--t--1);
  line-height:1.45; color:var(--texte-doux)}

/* ── la mise en place ──────────────────────────────────────────────────────
   Le texte se retire, les quatre aperçus se dispersent vers l'extérieur, puis
   le plateau s'ouvre à leur place. Le repli de la colonne de gauche par une
   grille en 0fr a été écarté : la largeur min-content du texte subsistait et
   le hero passait à plus de trois mille pixels de haut.                     */
.ld-hero-txt{transition:opacity .3s var(--courbe), transform .46s var(--courbe)}
.lv,.lv-source,.lv-fil{transition:opacity .34s var(--courbe), transform .46s var(--courbe)}
body[data-sort] .ld-hero-txt{opacity:0; transform:translateX(-30px)}
body[data-sort] .lv-source,body[data-sort] .lv-fil{opacity:0}
body[data-sort] .lv{opacity:0}
body[data-sort] .lv-1{transform:translate(-64px,26px) rotate(-5deg); transition-delay:.04s}
body[data-sort] .lv-2{transform:translate(58px,-30px) rotate(4deg); transition-delay:.1s}
body[data-sort] .lv-3{transform:translate(62px,30px) rotate(5deg); transition-delay:.16s}
body[data-sort] .lv-4{transform:translate(-46px,42px) rotate(-4deg); transition-delay:.22s}
body[data-sort] .ld-lance{opacity:0; transform:translateY(10px)}

body[data-demo] .ld-hero{display:block; max-width:1400px;
  padding:var(--e-5) var(--e-6) var(--e-6)}
body[data-demo] .ld-defil{overflow:hidden}
body[data-fin] .ld-defil{overflow-y:auto}
body[data-demo] .ld-hero ~ *{opacity:.1; pointer-events:none;
  transition:opacity .5s var(--courbe)}
body[data-demo] .ld-hero-txt,body[data-demo] .ld-hero-vis,
body[data-demo] .ld-lance{display:none}

/* ── le bloc démo ── */
.ld-demo{display:none; flex-direction:column; gap:var(--e-3)}
body[data-demo] .ld-demo{display:flex}
body[data-demo] .dm-tete{animation:dm-descend .5s var(--courbe) both}
body[data-demo] .dm-barre{animation:dm-descend .5s var(--courbe) .12s both}
body[data-demo] .dm-cadre{animation:dm-ouvre .62s var(--courbe) both}
@keyframes dm-descend{from{opacity:0; transform:translateY(-10px)} to{opacity:1}}
@keyframes dm-ouvre{from{opacity:0; clip-path:inset(0 14% round 0)}
  to{opacity:1; clip-path:inset(0 0 round 0)}}

.dm-tete{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--e-4)}
.dm-tete-g{min-width:0}
.dm-chap{font-size:var(--t--2); letter-spacing:.15em; text-transform:uppercase;
  color:var(--accent)}
.dm-titre{font:400 1.45rem/1.15 var(--f-titre); margin-top:4px; letter-spacing:-.01em}
.dm-fermer{display:flex; align-items:center; gap:7px; flex:none;
  font-size:var(--t--1); color:var(--texte-doux); padding:6px 12px;
  border:var(--filet) solid var(--trait-veille)}
.dm-fermer:hover{color:var(--encre); border-color:var(--encre)}

/* le cadre : sa hauteur est posée par le script d'après l'échelle */
.dm-cadre{
  position:relative; overflow:hidden; background:var(--fond); margin:0 auto;
  border:var(--filet-fort) solid var(--encre);
  background-image:radial-gradient(var(--trait-veille) .8px, transparent .8px);
  background-size:15px 15px;
}
.dm-plateau{
  position:absolute; left:0; top:0; width:var(--dm-l); height:var(--dm-h);
  transform:scale(var(--k,1)); transform-origin:0 0;
}
.dm-plateau *{box-sizing:border-box}
/* Sous 760 px, une mise à l'échelle par la largeur ramènerait le texte à trois pixels.
   On cale alors sur la hauteur et le cadre suit l'objet qui entre. L'espaceur donne
   au défilement sa largeur, le plateau étant en absolu. */
.dm-cadre.dm-pan{overflow-x:auto; scroll-behavior:smooth; overscroll-behavior-x:contain}
.dm-espace{height:1px}

/* ── la barre de lecture ── */
.dm-barre{display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:var(--e-4); padding-top:var(--e-2)}
.dm-cmd{display:flex; gap:var(--e-2)}
.dm-cmd button{width:34px; height:34px; display:grid; place-items:center;
  border:var(--filet) solid var(--trait); background:var(--papier)}
.dm-cmd button:hover{border-color:var(--encre); background:var(--fond-survol)}
.dm-cmd svg{width:14px; height:14px; fill:var(--encre)}
.dm-cmd .ic{fill:none; stroke:var(--encre); stroke-width:1.6}

.dm-pistes{display:grid; gap:2px; min-width:0}
.dm-piste{display:flex; gap:3px}
.dm-piste button{flex:1; height:5px; background:var(--trait-veille); position:relative;
  overflow:hidden}
.dm-piste button::after{content:""; position:absolute; inset:0; background:var(--accent);
  transform:scaleX(var(--p,0)); transform-origin:0 50%}
.dm-piste button:hover{background:var(--trait)}
.dm-noms{display:flex; gap:3px; font-size:var(--t--2); color:var(--texte-eteint)}
.dm-noms span{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding-top:3px}
.dm-noms span.ici{color:var(--encre)}
.dm-horloge{font-size:var(--t--1); color:var(--texte-doux);
  font-variant-numeric:tabular-nums; flex:none}

/* ═══════════════ LES OBJETS DU PLATEAU ═══════════════ */

.dm-o{position:absolute; opacity:0; transition:opacity .42s var(--courbe),
  transform .52s var(--courbe)}
.dm-o.la{opacity:1}

/* entrées */
.dm-monte{transform:translateY(22px)}   .dm-monte.la{transform:none}
.dm-gauche{transform:translateX(-26px)} .dm-gauche.la{transform:none}
.dm-droite{transform:translateX(26px)}  .dm-droite.la{transform:none}
.dm-pose{transform:scale(.94)}          .dm-pose.la{transform:scale(1)}

/* ── fenêtre de navigateur ── */
.dm-fen{background:var(--papier); border:var(--filet) solid var(--trait);
  box-shadow:4px 4px 0 0 rgba(37,28,22,.14); overflow:hidden}
.dm-chrome{display:flex; align-items:center; gap:8px; padding:7px 10px;
  background:#e9e4db; border-bottom:var(--filet) solid var(--trait-veille)}
.dm-pt{width:8px; height:8px; border-radius:50%; background:var(--trait-veille); flex:none}
.dm-url{flex:1; display:flex; align-items:center; gap:5px; background:var(--papier);
  border:var(--filet) solid var(--trait-veille); padding:3px 8px; font-size:11px;
  color:var(--texte-doux); font-family:var(--f-ui)}
.dm-url svg{width:9px; height:9px; flex:none; stroke:var(--texte-eteint); fill:none;
  stroke-width:1.8}
.dm-url b{font-weight:500; color:var(--encre)}
.dm-onglet{font-size:10px; color:var(--texte-eteint); padding:2px 8px;
  border:var(--filet) solid var(--trait-veille); background:var(--fond)}

/* ── le vieux site : Verdana, liens bleus soulignés, tout centré ── */
.dm-vieux{font-family:Verdana,Geneva,sans-serif; background:#fff; color:#222;
  padding:14px; text-align:center}
.dm-vieux .v-ban{background:#264b7a; color:#fff; padding:9px; font-size:15px;
  font-weight:bold; letter-spacing:.02em}
.dm-vieux .v-liens{margin-top:9px; font-size:11px}
.dm-vieux .v-liens a{color:#0000ee; text-decoration:underline; margin:0 6px}
.dm-vieux .v-img{margin:11px auto 0; width:186px; height:96px; object-fit:fill;
  filter:saturate(.55) contrast(.86); border:3px double #999}
.dm-vieux .v-t{margin-top:11px; font-size:13px; font-weight:bold; color:#264b7a}
.dm-vieux .v-p{margin-top:6px; font-size:10.5px; line-height:1.5; color:#555}
.dm-vieux .v-date{display:inline-block; margin-top:9px; padding:3px 7px;
  border:1px solid #c9c2b4; background:#f7f4ec; font-size:10.5px}
.dm-vieux .v-pied{margin-top:12px; padding-top:7px; border-top:1px dotted #bbb;
  font-size:9.5px; color:#999}

/* la mise en cause : un filet rouge tiré vers la ligne fautive */
.dm-faute{position:absolute; display:flex; align-items:center; gap:0}
.dm-faute-fil{height:var(--filet-fort); background:var(--accent); width:0;
  transition:width .38s var(--courbe)}
.dm-faute.la .dm-faute-fil{width:var(--w,64px)}
.dm-faute-txt{background:var(--accent); color:var(--fond); font-size:11px;
  padding:4px 9px; white-space:nowrap; opacity:0; transition:opacity .3s var(--courbe) .3s}
.dm-faute.la .dm-faute-txt{opacity:1}
.dm-cerne{position:absolute; border:var(--filet-fort) solid var(--accent);
  opacity:0; transform:scale(1.1); transition:opacity .3s, transform .4s var(--courbe)}
.dm-cerne.la{opacity:1; transform:none}

/* ── le courriel du prestataire ── */
.dm-mel{background:var(--papier); border:var(--filet) solid var(--trait);
  box-shadow:4px 4px 0 0 rgba(37,28,22,.14)}
.dm-mel-tete{padding:9px 12px; border-bottom:var(--filet) solid var(--trait-veille);
  background:#efeae1}
.dm-mel-de{display:flex; align-items:center; gap:7px; font-size:11px; color:var(--texte-doux)}
.dm-mel-de b{color:var(--encre); font-weight:600}
.dm-mel-obj{margin-top:5px; font-size:12.5px; font-weight:600}
.dm-mel-corps{padding:11px 12px; font-size:11.5px; line-height:1.62; color:var(--texte-doux)}
.dm-mel-corps mark{background:none; color:var(--accent); font-weight:600}
.dm-mel-pied{padding:8px 12px; border-top:var(--filet) solid var(--trait-veille);
  font-size:10.5px; color:var(--texte-eteint)}

/* ── le téléphone ── */
.dm-tel{background:var(--encre); border-radius:22px; padding:9px 7px 13px}
.dm-tel-ecr{background:var(--papier); border-radius:14px; overflow:hidden; height:100%}
.dm-tel-h{display:flex; align-items:center; justify-content:space-between;
  padding:6px 11px 5px; font-size:9px; color:var(--texte-eteint)}
.dm-tel-t{padding:0 11px 7px; border-bottom:var(--filet) solid var(--trait-veille);
  display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600}
.dm-pastille{background:var(--accent); color:var(--fond); font-size:9px; min-width:15px;
  height:15px; border-radius:8px; display:grid; place-items:center; padding:0 4px}
.dm-msg{padding:8px 11px; border-bottom:var(--filet) solid var(--trait-veille);
  display:grid; grid-template-columns:22px 1fr; gap:8px; align-items:start}
.dm-jeton{width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:9px; font-weight:600; background:var(--fond-survol); color:var(--texte-doux);
  border:var(--filet) solid var(--trait-veille)}
.dm-msg b{display:block; font-size:10.5px; font-weight:600}
.dm-msg p{font-size:10px; line-height:1.42; color:var(--texte-doux); margin-top:2px}
.dm-msg .h{font-size:9px; color:var(--texte-eteint); float:right}
.dm-msg.neuf b::after{content:""; display:inline-block; width:5px; height:5px;
  border-radius:50%; background:var(--accent); margin-left:5px; vertical-align:middle}

/* ── l'affiche ratée ── */
.dm-rate{background:#fff; border:var(--filet) solid var(--trait); padding:12px;
  text-align:center; box-shadow:4px 4px 0 0 rgba(37,28,22,.14)}
.dm-rate .r-t{font:bold 19px/1.06 Verdana,Geneva,sans-serif; color:#1c3f7a;
  text-shadow:1.5px 1.5px 0 #b9c6da; letter-spacing:-.01em}
.dm-rate .r-s{font:italic 12px/1.2 "Times New Roman",Times,serif; color:#8a6a2a;
  margin-top:5px}
.dm-rate img{width:100%; height:74px; object-fit:fill; margin-top:9px;
  filter:saturate(.6) contrast(.8); border:2px solid #d8d2c6}
.dm-rate .r-d{margin-top:9px; font:bold 12px Verdana,Geneva,sans-serif; color:#a01e1e}
.dm-rate .r-p{margin-top:6px; font:10px/1.4 "Times New Roman",Times,serif; color:#666}
.dm-fichier{margin-top:7px; font-size:10px; color:var(--texte-eteint);
  font-family:var(--f-ui); text-align:left}

/* ── la note de calendrier ── */
.dm-post{background:#f0e7cd; padding:11px 13px; box-shadow:3px 3px 0 0 rgba(37,28,22,.16);
  font-family:var(--f-ui)}
.dm-post b{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#8a7440}
.dm-post ul{margin-top:7px; display:grid; gap:5px}
.dm-post li{font-size:11.5px; color:#4a4028; display:flex; gap:7px}
.dm-post li s{color:#9a8f70}

/* ── la réplique posée sur le plateau ── */
.dm-dit{position:absolute; font:400 1.62rem/1.3 var(--f-titre); color:var(--encre);
  max-width:520px; text-wrap:balance}
.dm-dit em{font-style:normal; color:var(--accent)}
.dm-dit small{display:block; margin-top:9px; font:400 var(--t--1)/1.5 var(--f-ui);
  color:var(--texte-doux)}
.dm-voile{position:absolute; inset:0; background:var(--fond); opacity:0;
  transition:opacity .45s var(--courbe)}
.dm-voile.la{opacity:.93}

/* ── la visio ── */
.dm-visio{background:var(--encre); padding:10px; box-shadow:4px 4px 0 0 rgba(37,28,22,.2)}
.dm-tuiles{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.dm-tuile{background:#3a2e26; aspect-ratio:4/3; position:relative; overflow:hidden;
  display:grid; place-items:end start}
.dm-tuile svg{position:absolute; inset:0; width:100%; height:100%}
.dm-tuile span{position:relative; margin:7px; font-size:10px; color:var(--fond);
  background:rgba(0,0,0,.45); padding:2px 7px}
.dm-tuile.parle{outline:var(--filet-fort) solid #7fa87f; outline-offset:-2px}
.dm-visio-bas{display:flex; align-items:center; justify-content:space-between;
  margin-top:9px; padding-top:8px; border-top:var(--filet) solid #4a3d34}
.dm-visio-bas div{display:flex; gap:6px}
.dm-visio-bas i{width:24px; height:24px; border-radius:50%; background:#4a3d34;
  display:grid; place-items:center}
.dm-visio-bas i svg{width:11px; height:11px; stroke:var(--fond); fill:none; stroke-width:1.7}
.dm-visio-bas b{font-size:10px; color:#c9bdb0; font-weight:400;
  font-variant-numeric:tabular-nums}

/* ── le bloc-notes de l'appel ── */
.dm-notes{background:var(--papier); border:var(--filet) solid var(--trait); padding:14px 15px;
  box-shadow:4px 4px 0 0 rgba(37,28,22,.14)}
.dm-notes b{font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent)}
.dm-notes ul{margin-top:10px; display:grid; gap:9px}
.dm-notes li{display:grid; grid-template-columns:16px 1fr; gap:9px; align-items:start;
  font-size:11.5px; line-height:1.45; color:var(--texte-doux)}
.dm-notes li i{width:14px; height:14px; border:var(--filet) solid var(--trait);
  display:grid; place-items:center; margin-top:1px}
.dm-notes li i svg{width:9px; height:9px; stroke:var(--fond); fill:none; stroke-width:2.4;
  opacity:0; transition:opacity .2s}
.dm-notes li.ok i{background:var(--accent); border-color:var(--accent)}
.dm-notes li.ok i svg{opacity:1}
.dm-notes li.ok{color:var(--encre)}

/* ── la carte de devis ── */
.dm-devis{background:var(--papier); border:var(--filet-fort) solid var(--encre); padding:15px 17px;
  box-shadow:5px 5px 0 0 var(--trait-veille)}
.dm-devis .d-q{font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent)}
.dm-devis h4{margin:6px 0 0; font:400 1.12rem/1.2 var(--f-titre); font-weight:400}
.dm-devis .d-p{display:flex; align-items:baseline; gap:8px; margin-top:9px;
  padding-top:9px; border-top:var(--filet) solid var(--trait-veille)}
.dm-devis .d-p b{font:400 1.5rem/1 var(--f-titre); font-variant-numeric:tabular-nums}
.dm-devis .d-p span{font-size:11px; color:var(--texte-doux)}
.dm-devis ul{margin-top:10px; display:grid; gap:5px}
.dm-devis li{font-size:11px; line-height:1.4; color:var(--texte-doux); display:flex; gap:7px}
.dm-devis li::before{content:""; width:5px; height:5px; background:var(--accent);
  margin-top:5px; flex:none}

/* ═══════════════ LE SITE DE CAMILLE ═══════════════ */
.dm-site{background:var(--ca-papier); color:var(--ca-encre); font-family:var(--f-ui)}
.dm-site-nav{display:flex; align-items:center; justify-content:space-between;
  padding:11px 18px; border-bottom:var(--filet) solid var(--ca-filet)}
.dm-site-nav b{font:400 15px var(--f-titre); letter-spacing:.01em}
.dm-site-nav b i{font-style:normal; display:block; font-family:var(--f-ui); font-size:8px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ca-accent); margin-top:1px}
.dm-site-nav ul{display:flex; gap:15px; font-size:10.5px; color:var(--ca-accent)}
.dm-site-hero{display:grid; grid-template-columns:1fr 200px; gap:20px; padding:22px 18px 20px;
  align-items:center}
.dm-site-hero h1{font:400 27px/1.1 var(--f-titre); letter-spacing:-.015em; max-width:14ch}
.dm-site-hero p{margin-top:10px; font-size:11px; line-height:1.6; color:#5c6660; max-width:36ch}
.dm-site-hero .s-fil{width:44px; height:var(--filet-fort); background:var(--ca-terre);
  margin-bottom:12px}
.dm-site-hero img{width:100%; height:132px; object-fit:cover;
  border:var(--filet) solid var(--ca-filet)}
.dm-site-bloc{padding:16px 18px; border-top:var(--filet) solid var(--ca-filet)}
.dm-site-bloc h2{font:400 15px var(--f-titre); display:flex; align-items:baseline; gap:9px}
.dm-site-bloc h2 span{font-family:var(--f-ui); font-size:8px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ca-accent)}
.dm-stage{display:grid; grid-template-columns:88px 1fr auto; gap:13px; align-items:center;
  margin-top:11px; padding:11px; background:#fff; border:var(--filet) solid var(--ca-filet)}
.dm-stage img{width:88px; height:62px; object-fit:cover}
.dm-stage h3{font:400 14px var(--f-titre); font-weight:400}
.dm-stage .s-l{margin-top:5px; display:flex; flex-wrap:wrap; gap:4px 12px; font-size:10px;
  color:#5c6660}
.dm-stage .s-l b{font-weight:600; color:var(--ca-encre); font-variant-numeric:tabular-nums}
.dm-stage .s-b{background:var(--ca-accent); color:#fff; font-size:10.5px; padding:7px 13px;
  white-space:nowrap}
.dm-site-pied{padding:12px 18px; border-top:var(--filet) solid var(--ca-filet);
  display:flex; justify-content:space-between; font-size:9.5px; color:#7d857f}

/* les curseurs du montage à deux */
.dm-curseur{position:absolute; z-index:8; pointer-events:none;
  transition:transform .62s cubic-bezier(.35,0,.2,1); opacity:0}
.dm-curseur.la{opacity:1}
.dm-curseur svg{width:15px; height:19px; display:block; filter:drop-shadow(1px 1px 0 rgba(0,0,0,.2))}
.dm-curseur b{display:inline-block; margin:2px 0 0 9px; font-size:9.5px; font-weight:500;
  color:var(--fond); padding:2px 6px; white-space:nowrap}
.dm-curseur.eq svg path{fill:var(--accent)} .dm-curseur.eq b{background:var(--accent)}
.dm-curseur.ca svg path{fill:var(--ca-accent)} .dm-curseur.ca b{background:var(--ca-accent)}

/* le champ modifiable sur la page réelle */
.dm-modif{outline:var(--filet-fort) solid var(--accent); outline-offset:3px; position:relative}
.dm-modif::after{content:"Titre de la page"; position:absolute; left:0; top:-17px;
  font:500 9px var(--f-ui); background:var(--accent); color:var(--fond); padding:2px 6px}

/* ═══════════════ LA FICHE ET LES QUATRE SORTIES ═══════════════ */
.dm-fiche{background:var(--papier); border:var(--filet-fort) solid var(--encre);
  box-shadow:5px 5px 0 0 var(--trait-veille)}
.dm-fiche-t{display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-bottom:var(--filet) solid var(--trait)}
.dm-fiche-t b{font-size:12px; font-weight:600}
.dm-fiche-t span{font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent)}
.dm-champs{padding:12px 14px; display:grid; gap:10px}
.dm-champ{display:grid; grid-template-columns:56px 1fr; gap:11px; align-items:center}
.dm-champ label{font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--texte-eteint); padding-top:1px}
.dm-champ .val{border:var(--filet) solid var(--trait-veille); background:var(--papier);
  padding:6px 9px; font-size:11.5px; min-height:28px; display:flex; align-items:center;
  gap:7px; transition:border-color .2s, background .2s}
.dm-champ.vif .val{border-color:var(--accent); background:#fff;
  box-shadow:0 0 0 2px rgba(150,45,18,.12)}
.dm-champ .val img{width:20px; height:20px; object-fit:cover; flex:none}
.dm-champ .val b{font-weight:600; font-variant-numeric:tabular-nums}
.dm-caret{display:inline-block; width:1px; height:13px; background:var(--accent);
  animation:dm-clign .9s steps(1,end) infinite}
@keyframes dm-clign{50%{opacity:0}}

/* le filament qui relie un champ à ses sorties */
.dm-fils{position:absolute; inset:0; pointer-events:none; z-index:6}
.dm-fils path{fill:none; stroke:var(--accent); stroke-width:1.4;
  stroke-dasharray:var(--d); stroke-dashoffset:var(--d);
  transition:stroke-dashoffset .5s var(--courbe), opacity .4s}
.dm-fils path.la{stroke-dashoffset:0}
.dm-fils path.parti{opacity:0}

/* les quatre sorties, chacune sur son support */
.dm-sortie{position:absolute; transition:opacity .4s, transform .5s var(--courbe)}
.dm-etiq{position:absolute; left:0; top:-16px; font:500 9px var(--f-ui);
  letter-spacing:.1em; text-transform:uppercase; background:var(--encre); color:var(--fond);
  padding:2px 7px; white-space:nowrap}
.dm-vide{color:var(--trait-veille)}
.dm-neuf{animation:dm-neuf .7s var(--courbe)}
@keyframes dm-neuf{0%{background:rgba(150,45,18,.22)} 100%{background:transparent}}

/* l'affiche A4 : 210 × 297, tenu au pixel près */
.dm-affiche{background:var(--ca-papier); color:var(--ca-encre); width:196px; height:277px;
  padding:15px 14px; display:flex; flex-direction:column;
  border:var(--filet) solid var(--ca-filet); box-shadow:4px 4px 0 0 rgba(37,28,22,.16)}
.dm-affiche .a-sur{font-size:7.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ca-accent)}
.dm-affiche h3{margin-top:9px; font:400 23px/1.02 var(--f-titre); letter-spacing:-.02em}
.dm-affiche .a-fil{height:var(--filet-fort); background:var(--ca-terre); margin-top:11px}
.dm-affiche .a-d{margin-top:10px}
.dm-affiche .a-d b{display:block; font:400 15px/1.1 var(--f-titre); color:var(--ca-terre);
  font-weight:400; white-space:nowrap}
.dm-affiche .a-d span{display:block; font-family:var(--f-ui); font-size:9px;
  color:var(--ca-encre); margin-top:3px}
.dm-affiche img{width:100%; height:118px; object-fit:cover; margin-top:12px; flex:none}
.dm-affiche .a-pied{margin-top:auto; padding-top:9px;
  border-top:var(--filet) solid var(--ca-filet); font-size:8.5px; line-height:1.4;
  display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.dm-affiche .a-pied span{min-width:0}
.dm-affiche .a-pied b{font-weight:600; white-space:nowrap; font-size:9.5px}

/* la publication carrée */
.dm-post-c{width:186px; height:186px; background:var(--ca-papier); position:relative;
  overflow:hidden; border:var(--filet) solid var(--ca-filet);
  box-shadow:4px 4px 0 0 rgba(37,28,22,.16)}
.dm-post-c img{width:100%; height:104px; object-fit:cover}
.dm-post-c .p-bas{padding:8px 11px}
.dm-post-c .p-sur{font-size:7.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ca-accent)}
.dm-post-c h3{margin-top:4px; font:400 15px/1.04 var(--f-titre); color:var(--ca-encre)}
.dm-post-c .p-d{margin-top:5px; font-size:9.5px; color:var(--ca-terre); font-weight:600}

/* la lettre */
.dm-lettre{background:var(--papier); border:var(--filet) solid var(--trait); overflow:hidden;
  box-shadow:4px 4px 0 0 rgba(37,28,22,.14)}
.dm-lettre-t{padding:8px 11px; background:#efeae1;
  border-bottom:var(--filet) solid var(--trait-veille)}
.dm-lettre-t .l-de{font-size:10px; color:var(--texte-doux)}
.dm-lettre-t .l-de b{color:var(--encre); font-weight:600}
.dm-lettre-t .l-obj{margin-top:3px; font-size:11px; font-weight:600}
.dm-lettre-c{padding:11px; background:var(--ca-papier); color:var(--ca-encre)}
.dm-lettre-c img{width:100%; height:56px; object-fit:cover; margin-bottom:9px}
.dm-lettre-c h3{font:400 14px/1.1 var(--f-titre)}
.dm-lettre-c p{margin-top:6px; font-size:9.5px; line-height:1.55; color:#5c6660}
.dm-lettre-c .l-b{margin-top:9px; display:inline-block; background:var(--ca-accent);
  color:#fff; font-size:9.5px; padding:6px 12px}

/* le compteur de la fin d'acte */
.dm-compte{position:absolute; display:flex; gap:0; border:var(--filet-fort) solid var(--encre);
  background:var(--papier); box-shadow:4px 4px 0 0 var(--trait-veille)}
.dm-compte div{padding:9px 15px; border-right:var(--filet) solid var(--trait-veille);
  text-align:center}
.dm-compte div:last-child{border-right:0}
.dm-compte b{display:block; font:400 1.35rem/1 var(--f-titre); color:var(--accent);
  font-variant-numeric:tabular-nums}
.dm-compte span{display:block; margin-top:4px; font-size:9.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--texte-doux)}

/* le passage d'une date à l'autre */
.dm-bascule{position:relative; display:inline-grid; overflow:hidden; vertical-align:bottom}
.dm-bascule span{grid-area:1/1; transition:transform .42s var(--courbe), opacity .3s}
.dm-bascule .part{transform:translateY(-105%); opacity:0}
.dm-bascule .vient{transform:translateY(105%); opacity:0}
.dm-bascule.tourne .part{transform:translateY(-105%); opacity:0}
.dm-bascule.tourne .vient{transform:none; opacity:1; color:var(--accent)}

/* ── les inscriptions ── */
.dm-insc{background:var(--papier); border:var(--filet) solid var(--trait); padding:10px 13px;
  display:grid; grid-template-columns:26px 1fr auto; gap:11px; align-items:center;
  box-shadow:3px 3px 0 0 rgba(37,28,22,.12)}
.dm-insc .dm-jeton{width:26px; height:26px; font-size:10px; background:var(--ca-papier);
  color:var(--ca-accent); border-color:var(--ca-filet)}
.dm-insc b{font-size:11.5px; font-weight:600; display:block}
.dm-insc span{font-size:9.5px; color:var(--texte-eteint)}
.dm-insc i{font-style:normal; font-size:10px; color:var(--ca-accent); font-weight:600;
  white-space:nowrap}
.dm-jauge{background:var(--papier); border:var(--filet-fort) solid var(--encre);
  padding:12px 14px}
.dm-jauge-h{display:flex; justify-content:space-between; align-items:baseline;
  font-size:10.5px}
.dm-jauge-h b{font:400 1.25rem/1 var(--f-titre); font-variant-numeric:tabular-nums}
.dm-jauge-b{margin-top:8px; height:8px; background:var(--fond-survol);
  border:var(--filet) solid var(--trait-veille)}
.dm-jauge-b i{display:block; height:100%; background:var(--accent); width:0;
  transition:width .55s var(--courbe)}
.dm-bandeau{position:absolute; left:0; right:0; background:var(--accent); color:var(--fond);
  font:500 11px var(--f-ui); letter-spacing:.16em; text-transform:uppercase;
  text-align:center; padding:5px; transform:scaleY(0); transform-origin:50% 50%;
  transition:transform .3s var(--courbe)}
.dm-bandeau.la{transform:scaleY(1)}

/* ── la silhouette gravée ── */
.dm-portrait{background:var(--papier); border:var(--filet) solid var(--trait); padding:8px;
  box-shadow:4px 4px 0 0 rgba(37,28,22,.14)}
.dm-portrait svg{display:block; width:100%; height:auto; background:var(--fond)}
.dm-portrait figcaption{margin-top:8px; padding-top:7px;
  border-top:var(--filet) solid var(--trait-veille); font-size:10.5px; color:var(--texte-doux)}
.dm-portrait figcaption b{display:block; font:400 15px/1.2 var(--f-titre); color:var(--encre);
  font-weight:400; margin-bottom:2px}

/* ═══════════════ LE QUESTIONNAIRE DE FIN ═══════════════ */
.dm-fin{display:grid; grid-template-columns:1fr 1fr; background:var(--fond);
  border:var(--filet-fort) solid var(--encre)}
.dm-fin[hidden]{display:none !important}
.dm-fin-g{padding:44px 40px; display:flex; flex-direction:column; justify-content:center;
  border-right:var(--filet) solid var(--trait)}
.dm-fin-g .f-q{font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent)}
.dm-fin-g h3{margin-top:10px; font:400 2rem/1.1 var(--f-titre); letter-spacing:-.015em}
.dm-fin-g p{margin-top:13px; font-size:13px; line-height:1.65; color:var(--texte-doux);
  max-width:40ch}
.dm-fin-g ul{margin-top:20px; display:grid; gap:8px}
.dm-fin-g li{display:flex; gap:9px; align-items:center; font-size:12px;
  color:var(--texte-doux)}
.dm-fin-g li svg{width:13px; height:13px; stroke:var(--accent); fill:none; stroke-width:2}
.dm-fin-d{padding:34px 38px; display:flex; flex-direction:column; justify-content:center;
  background:var(--papier); overflow-y:auto}
.dm-q{margin-bottom:19px}
.dm-q > b{display:block; font-size:12px; font-weight:600}
.dm-q > i{display:block; font-style:normal; font-size:10.5px; color:var(--texte-eteint);
  margin-top:2px}
.dm-q-opts{margin-top:9px; display:grid; gap:6px}
.dm-q-opts.deux{grid-template-columns:1fr 1fr}
.dm-q button{text-align:left; padding:8px 11px; font-size:11.5px;
  border:var(--filet) solid var(--trait-veille); background:var(--fond);
  transition:border-color var(--d-court), background var(--d-court)}
.dm-q button:hover{border-color:var(--encre)}
.dm-q button[aria-pressed="true"]{border-color:var(--accent); background:#fff;
  box-shadow:inset 3px 0 0 0 var(--accent)}
.dm-fin-act{margin-top:6px; padding-top:15px; border-top:var(--filet) solid var(--trait-veille)}
.dm-fin-act .btn{width:100%; justify-content:center}
.dm-fin-act p{margin-top:9px; font-size:10.5px; color:var(--texte-eteint); text-align:center}
.dm-fin-rejouer{margin-top:9px; font-size:11px; color:var(--texte-doux);
  text-decoration:underline; text-underline-offset:3px; display:block; width:100%;
  text-align:center}

/* ═══════════════ ADAPTATION ═══════════════ */
@media (max-width:1080px){
  body[data-demo] .ld-hero{grid-template-columns:0fr minmax(0,1fr)}
}
@media (max-width:900px){
  .ld-hero-cote{gap:var(--e-4)}
  .dm-titre{font-size:1.2rem}
  .dm-noms{display:none}
}
@media (max-width:620px){
  .ld-lance{padding:var(--e-3) var(--e-4); gap:var(--e-3)}
  .ld-lance-jouer{width:34px; height:34px}
  .dm-tete{flex-direction:column; align-items:flex-start; gap:var(--e-2)}
  .dm-fin{grid-template-columns:1fr}
  .dm-fin-g{display:none}
  .dm-fin-d{padding:20px}
}

@media (prefers-reduced-motion:reduce){
  .dm-o,.dm-o *,.dm-curseur,.dm-fils path{transition:none !important; animation:none !important}
  .ld-hero,.ld-hero-txt{transition:none}
  .dm-caret{animation:none; opacity:1}
}