/* Lucien, site vitrine. Structure reprise du template Framer « Overtake » (gratuit), recodée en statique. */
:root{
  --ink:#14110E; --ink-2:#1C1814; --ink-3:#26211C;
  --gris:#F2F0EC; --blanc:#FFFFFF; --mute:#6E6A64; --mute-2:#B9B3AA;
  --orange:#FF5A1F; --orange-f:#E84A12; --peche:#FFD6C4; --sable:#F6E7CF;
  --r-section:30px; --r-carte:26px;
  --ease:cubic-bezier(.23,1,.32,1);
  --titre:"Switzer",system-ui,sans-serif; --texte:"Stack Sans Headline","Switzer",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip}
body{background:var(--blanc);color:var(--ink);font-family:var(--texte);font-size:16px;line-height:1.35;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-family:var(--titre);text-wrap:balance}
p{text-wrap:pretty}
.cadre{padding:0 30px}
.w{max-width:1140px;margin:0 auto}
.bloc{border-radius:var(--r-section)}

/* Logo */
.logo{height:26px;width:auto;fill:currentColor;display:block}

/* Pastille de section */
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--blanc);border-radius:100px;padding:6px 14px;font-size:14px;line-height:1.2}
.pill::before,.pill::after{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.sombre .pill{background:var(--ink-3);color:#fff}

/* Boutons */
.btn{display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 7px 0 24px;border-radius:100px;font-family:var(--titre);font-weight:500;font-size:16px;letter-spacing:-.01em;white-space:nowrap;transition:transform .16s var(--ease),background-color .2s ease,box-shadow .2s ease}
.btn:active{transform:scale(.97)}
.btn .rond{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;overflow:hidden}
.btn .rond svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.btn.noir{background:var(--ink);color:#fff;}
.btn.noir .rond{background:#fff;color:var(--ink)}
.btn.orange{background:var(--orange);color:#fff;}
.btn.orange .rond{background:#fff;color:var(--orange)}
.btn.blanc{background:#fff;color:var(--ink)}
.btn.blanc .rond{background:var(--ink);color:#fff}
.btn.trait{box-shadow:inset 0 0 0 1px var(--ink);padding:0 24px}
@media (hover:hover) and (pointer:fine){
  .btn:hover .rond svg{transform:translate(2px,-2px)}
  .btn.noir:hover{background:#2A2520}.btn.orange:hover{background:var(--orange-f)}
  .btn.trait:hover{background:rgba(20,17,14,.05)}
}
.btn.petit{height:44px;font-size:15px;padding-left:18px}.btn.petit .rond{width:32px;height:32px}

/* En-tête */
.entete{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px;padding:0 30px;max-width:1440px;margin:0 auto}
.entete .d{justify-self:end;display:flex;align-items:center;gap:22px}
.entete .tel{display:flex;align-items:center;gap:8px;font-family:var(--titre);font-weight:500;font-size:15px}
.entete .tel svg{width:16px;height:16px;color:var(--orange)}
.entete nav{display:flex;gap:4px}
.entete nav a{padding:8px 16px;border-radius:100px;color:var(--mute);transition:color .15s ease,background-color .15s ease}
.entete nav a:hover{color:var(--ink)}
.entete nav a.actif{color:var(--ink)}

/* Hero */
.hero{background:var(--gris);padding:56px 10px 10px;text-align:center;position:relative;overflow:hidden}
.hero h1{position:relative;font-size:clamp(40px,4.7vw,68px);font-weight:600;line-height:1.12;letter-spacing:-.025em;max-width:24ch;margin:18px auto 0}
.hero h1 .ticket-pill{display:inline-flex;align-items:center;gap:.18em;vertical-align:.08em;background:#fff;border-radius:0;padding:.04em .2em .04em .12em;font-size:.82em;line-height:1;transform:rotate(-3deg);position:relative}
.hero h1 .ticket-pill b{font-weight:600;color:var(--orange)}
.hero h1 .ticket-pill svg{width:.7em;height:.7em;color:var(--ink)}
.hero h1 .ticket-pill::after{content:"";position:absolute;left:0;right:0;bottom:-.1em;height:.12em;background:#fff;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/.16em 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/.16em 100%}
.hero .sous{position:relative;font-size:18px;line-height:1.6;color:var(--mute);max-width:640px;margin:18px auto 0}
.chip{display:inline-block;color:var(--ink);background:#fff;border-radius:8px;padding:1px 8px;line-height:1.5}
.chip.peche{background:var(--peche)}
.chip.noir{background:var(--ink);color:#fff}
.hero .actions{position:relative;display:flex;justify-content:center;gap:16px;margin-top:28px;flex-wrap:wrap}
.hero .media{position:relative;display:grid;grid-template-columns:830fr 500fr;gap:10px;margin-top:44px;text-align:left}
.hero .photo{border-radius:var(--r-carte);background:#3a2c20 url(img/menuisier.jpg) center 75%/cover;min-height:620px}

/* Carte ticket du hero */
.carte-ticket{background:var(--ink);border-radius:var(--r-carte);padding:10px;display:flex}
.carte-ticket .int{flex:1;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:28px 30px;display:flex;flex-direction:column;color:#fff}
.recu{background:#fff;color:#1A1A1A;font:400 14px/24px "Geist Mono",ui-monospace,monospace;border-radius:4px 4px 0 0;padding:20px 22px 22px;position:relative;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/12px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/12px 100%;padding-bottom:30px}
.recu .tete{display:flex;justify-content:space-between;color:#777;font-size:12px}
.recu .sep{height:20px;display:flex;align-items:center}.recu .sep::before{content:"";flex:1;border-top:1.5px dashed #C9C9C9}
.recu .l{display:flex;justify-content:space-between;gap:10px;white-space:nowrap}
.recu .l.o{color:var(--orange);font-weight:600}
.recu .tt{font-weight:600;font-size:17px}
.recu.imprime>*{visibility:hidden}.recu.imprime>*.vu{visibility:visible}
.carte-ticket .chiffre{display:flex;align-items:baseline;justify-content:space-between;margin-top:auto;padding-top:30px}
.carte-ticket .chiffre b{font-family:var(--titre);font-size:82px;font-weight:600;letter-spacing:-.02em;line-height:1}
.carte-ticket .chiffre span{font-size:18px;color:var(--mute-2);text-align:right}
.carte-ticket hr{border:0;border-top:1px solid rgba(255,255,255,.12);margin:26px 0}
.carte-ticket h2{font-size:28px;font-weight:500;letter-spacing:-.02em;line-height:1.2}

/* Bande de confiance */
.confiance{display:flex;align-items:center;gap:40px;padding:70px 0 90px;max-width:1140px;margin:0 auto}
.confiance p{color:var(--mute);font-size:16px;line-height:1.1;max-width:22ch;flex:none}
.confiance .sep-v{width:1px;align-self:stretch;background:var(--gris)}
.defile{flex:1;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.defile .piste{display:inline-flex;gap:56px;white-space:nowrap;animation:defile 30s linear infinite;font-family:var(--titre);font-size:24px;font-weight:500;letter-spacing:-.02em;color:#8E8880}
.defile .piste span{display:inline-flex;align-items:center;gap:56px}
@keyframes defile{to{transform:translateX(-50%)}}

/* Section sombre */
.sombre{background:var(--ink);color:#F0F0F0;padding:200px 0;position:relative;overflow:hidden}
.sombre .w{position:relative}
.titre-2{font-size:52px;font-weight:500;line-height:1.1;letter-spacing:-.02em}
.sombre .manifeste{max-width:1000px;margin-top:22px}
.sombre .manifeste em{font-style:normal;color:var(--orange)}
.fondateur{display:flex;align-items:center;gap:30px;margin-top:70px}
.fondateur .ph{width:88px;height:88px;border-radius:16px;background:var(--ink-3) url(img/portrait.jpg) center/cover;flex:none;display:grid;place-items:center;color:var(--mute-2);font-size:11px;text-align:center}
.fondateur p{color:#B9B3AA;font-size:17px;line-height:1.3;max-width:34ch}
.onglets{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:200px;align-items:start}
.onglets .liste{display:grid;gap:4px;margin-top:40px}
.onglets button{display:flex;align-items:baseline;gap:14px;text-align:left;padding:18px 20px;border-radius:14px;font-family:var(--titre);font-size:36px;font-weight:500;letter-spacing:-.03em;color:#8D8780;transition:background-color .2s ease,color .2s ease}
.onglets button small{font-size:16px;color:var(--orange);letter-spacing:0}
.onglets button[aria-selected="true"]{background:var(--ink-2);color:#fff}
.onglets .panneau img{border-radius:var(--r-carte);aspect-ratio:500/527;object-fit:cover;width:100%;transition:opacity .25s ease}
.onglets .panneau p{color:#B9B3AA;font-size:18px;line-height:1.2;margin-top:40px;max-width:42ch}

/* Bandeau défilant orange */
.bandeau{background:var(--orange);color:#fff;overflow:hidden;max-width:100%;padding:22px 0;margin-top:-30px;border-radius:0 0 var(--r-section) var(--r-section);position:relative;z-index:0;padding-top:52px}
.bandeau .piste{display:inline-flex;white-space:nowrap;animation:defile 40s linear infinite;font-size:22px}
.bandeau .piste span{display:inline-flex;align-items:center;gap:30px;padding-right:30px}
.bandeau .piste i{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.35);display:inline-block}

/* Prix, grille de cartes */
.section{padding:200px 0}
.entete-section{text-align:center;max-width:700px;margin:0 auto}
.entete-section p{color:var(--mute);font-size:18px;line-height:1.2;margin-top:14px}
.prix{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:790px;margin:60px auto 0}
.prix .c{border-radius:var(--r-carte);padding:30px;min-height:350px;display:flex;flex-direction:column}
.prix .c .tag{align-self:flex-start;background:var(--ink-2);color:#fff;border-radius:100px;padding:4px 10px;font-size:14px}
.prix .c .tag.clair{background:#fff;color:var(--ink)}
.prix .c b{font-family:var(--titre);font-size:52px;font-weight:500;letter-spacing:-.02em;line-height:1.1;margin-top:auto}
.prix .c p{font-size:18px;line-height:1.2;color:#4D4842;margin-top:10px;max-width:26ch}
.prix .orange{background:var(--orange);color:#fff}.prix .orange p{color:rgba(255,255,255,.9)}
.prix .gris{background:var(--gris)}
.prix .large{grid-column:1/-1;background:var(--ink-2);color:#fff;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.prix .large .g{display:grid;gap:22px}
.prix .large .ligne{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:18px}
.prix .large .ligne:last-child{border:0;padding:0}
.prix .large .ligne span{color:#B9B3AA;font-size:17px;line-height:1.25}
.prix .large .ligne b{margin:0;font-size:36px;color:var(--orange)}
.prix .large .d{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.prix .large .d p{color:#B9B3AA;margin:0}

/* Exemples */
.travaux .top-l{display:flex;justify-content:space-between;align-items:center}
.cas{position:relative;border-radius:var(--r-carte);overflow:hidden;min-height:556px;margin-top:60px;background:#3a2c20 center/cover;display:flex;justify-content:flex-end;padding:10px}
.cas+.cas{margin-top:60px}
.cas .panneau{width:400px;background:var(--ink);color:#fff;border-radius:20px;padding:30px;display:flex;flex-direction:column}
.cas .tags{display:flex;gap:8px;flex-wrap:wrap}
.cas .tags span{background:var(--ink-3);border-radius:100px;padding:5px 10px;font-size:14px}
.cas h3{font-size:36px;font-weight:500;letter-spacing:-.03em;margin-top:30px}
.cas .panneau>p{color:#B9B3AA;font-size:18px;line-height:1.2;margin-top:10px}
.cas .bas{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding-top:22px}
.cas .bas .m{display:flex;justify-content:space-between;align-items:baseline}
.cas .bas .m b{font-family:var(--titre);font-size:52px;font-weight:500;letter-spacing:-.02em;color:var(--orange)}
.cas .bas .m span{color:#B9B3AA;font-size:18px}
.cas .bas .btn{margin-top:22px;width:100%;justify-content:space-between}

/* Comment ça se passe */
.etapes{display:grid;grid-template-columns:700fr 650fr;gap:30px;align-items:center;max-width:1380px;margin:0 auto}
.etapes .g{background:var(--gris);border-radius:var(--r-section);padding:40px;min-height:610px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr}
.etapes .g h2{font-size:42px;font-weight:500;letter-spacing:-.02em;line-height:1.1}
.etapes .g .note{color:var(--mute);text-align:right;font-size:18px;line-height:1.2}
.etapes .g .ph{align-self:end;border-radius:24px;background:#3a2c20 url(img/boulanger.jpg) center/cover;aspect-ratio:285/330}
.etapes .g .gros{align-self:end;text-align:right}
.etapes .g .gros b{font-family:var(--titre);font-size:100px;font-weight:600;letter-spacing:-.03em;line-height:1}
.etapes .g .gros p{color:var(--mute);font-size:15px;line-height:1.2;margin-top:10px}
.rondeur{aspect-ratio:1;border-radius:50%;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;position:relative;box-shadow:inset 0 0 0 10px var(--ink),inset 0 0 0 11px rgba(255,255,255,.08)}
.rondeur .t{color:#fff;font-family:var(--titre);font-weight:500;font-size:18px}
.rondeur .carte{width:400px;max-width:72%;background:var(--orange);color:#fff;border-radius:var(--r-section);padding:40px;text-align:center;display:grid;justify-items:center;gap:14px;min-height:298px;transition:opacity .25s ease}
.rondeur .carte .n{width:60px;height:60px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-size:18px}
.rondeur .carte h3{font-size:36px;font-weight:500;letter-spacing:-.03em}
.rondeur .carte p{font-size:18px;line-height:1.2;color:rgba(255,255,255,.92)}
.rondeur .points{display:flex;gap:6px}
.rondeur .points i{width:80px;height:2px;background:rgba(255,255,255,.2);border-radius:2px;overflow:hidden;position:relative}
.rondeur .points i.on::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;animation:remplit 4s linear forwards}
@keyframes remplit{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Comparatif */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:30px;max-width:1200px;margin:60px auto 0;position:relative}
.compare .vs{position:absolute;left:50%;top:18px;transform:translateX(-50%);width:52px;height:52px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.15);display:grid;place-items:center;font-family:var(--titre);font-weight:600;z-index:1}
.compare .tete{height:72px;border-radius:10px;display:grid;place-items:center;font-size:18px}
.compare .a .tete{background:#1C1916}
.compare .b .tete{background:var(--orange);color:#fff}
.compare .b .tete svg{height:22px;fill:currentColor}
.compare ul{list-style:none;display:grid;gap:30px;padding:40px 60px 0;font-size:18px}
.compare li{display:flex;gap:12px;align-items:baseline}
.compare .a li{color:#B9B3AA}
.compare .b li{color:#fff}
.compare li i{font-style:normal;flex:none;width:16px}
.compare .b li i{color:var(--orange)}
.citation{max-width:690px;margin:120px auto 0;background:#1C1916;border-radius:var(--r-carte);padding:10px;display:grid;grid-template-columns:160px 1fr;gap:30px;align-items:center}
.citation .ph{width:160px;height:176px;border-radius:20px;background:var(--ink-3) url(img/portrait.jpg) center/cover;display:grid;place-items:center;color:var(--mute-2);font-size:12px;text-align:center}
.citation blockquote{font-size:20px;line-height:1.5;color:#B9B3AA;padding-right:30px}
.citation cite{display:flex;gap:10px;align-items:baseline;font-style:normal;margin-top:18px}
.citation cite b{color:#fff;font-family:var(--titre);font-weight:500;font-size:20px}
.citation cite span{color:#B9B3AA;font-size:14px}

/* Questions */
.faq{max-width:790px;margin:60px auto 0;display:grid;gap:10px}
.faq details{background:var(--gris);border-radius:20px}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 30px;font-family:var(--titre);font-size:21px;font-weight:500;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;flex:none;transition:transform .25s var(--ease)}
.faq details[open] summary .plus{transform:rotate(45deg)}
.faq details p{padding:0 30px 26px;color:var(--mute);font-size:17px;line-height:1.5;max-width:60ch}

/* Pied de page */
.pied{background:var(--ink-2);color:#F0F0F0;padding:200px 0 80px;position:relative;overflow:hidden}
.pied .w{position:relative}
.pied .appel{text-align:center;position:relative}
.pied .appel h2{font-size:clamp(52px,7vw,100px);font-weight:600;line-height:1.2;letter-spacing:-.02em;max-width:12ch;margin:0 auto}
.pied .appel .btn{transform:rotate(-6deg);margin-top:-30px;position:relative}
.pied .appel .btn:active{transform:rotate(-6deg) scale(.97)}
.pied .cols{display:grid;grid-template-columns:1.3fr .7fr .8fr 1fr;gap:40px;margin-top:160px}
.pied .cols h3{font-size:34px;font-weight:500;letter-spacing:-.02em}
.pied .cols .intro{color:#B9B3AA;font-size:17px;line-height:1.3;margin-top:14px}
.pied form{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:24px}
.pied form input{background:#2A2520;border:0;border-radius:12px;height:50px;padding:0 16px;color:#fff;font:400 15px var(--texte)}
.pied form input::placeholder{color:#8D8780}
.pied form input:focus{outline:1.5px solid var(--orange)}
.pied form button{grid-column:1/-1;height:50px;border-radius:12px;background:var(--orange);color:#fff;font-family:var(--titre);font-weight:500;font-size:16px;transition:background-color .2s ease,transform .16s var(--ease)}
.pied form button:hover{background:var(--orange-f)}.pied form button:active{transform:scale(.98)}
.pied .cols h4{font-size:14px;font-weight:600;font-family:var(--titre)}
.pied .cols nav{display:grid;gap:14px;margin-top:30px;font-size:20px;color:#B9B3AA}
.pied .cols nav a:hover{color:#fff}
.pied .geant{margin-top:140px;color:#fff}
.pied .geant svg{width:100%;height:auto;fill:currentColor;display:block}
.pied .legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:60px;color:#B9B3AA;font-size:15px}
.pied .legal b{color:#fff;font-weight:500}

/* Apparition */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.defile .piste,.bandeau .piste{animation:none}.rondeur .points i.on::after{animation:none}}

/* Mobile */
@media (max-width:900px){
  .cadre{padding:0 12px}
  .entete{grid-template-columns:1fr auto;height:64px;padding:0 20px}.entete nav,.entete .tel span{display:none}
  .hero{padding:60px 10px 10px}
  .hero .sous{font-size:16px;padding:0 10px}
  .hero .actions{gap:12px;padding:0 10px}.hero .actions .btn{width:100%;justify-content:space-between}.hero .actions .btn.trait{justify-content:center}
  .hero .media{grid-template-columns:1fr;gap:10px;margin-top:40px}
  .hero .photo{min-height:420px}
  .carte-ticket .chiffre b{font-size:60px}
  .confiance{flex-direction:column;align-items:flex-start;gap:24px;padding:50px 20px 60px}.confiance .sep-v{display:none}.defile{width:100%}
  .sombre,.section,.pied{padding:100px 0}
  .w{padding:0 8px}
  .titre-2{font-size:36px}
  .fondateur{flex-direction:column;align-items:flex-start;gap:16px;margin-top:40px}
  .onglets{grid-template-columns:1fr;gap:30px;margin-top:100px}
  .onglets button{font-size:26px;padding:14px 16px}
  .prix{grid-template-columns:1fr}.prix .large{grid-template-columns:1fr}
  .cas{min-height:auto;flex-direction:column;padding:260px 10px 10px}.cas .panneau{width:100%}
  .etapes{grid-template-columns:minmax(0,1fr)}.etapes>*{min-width:0}
  .rondeur .points i{width:48px}.etapes .g{min-height:0;grid-template-columns:1fr;gap:24px}.etapes .g .note,.etapes .g .gros{text-align:left}
  .rondeur{border-radius:var(--r-section);aspect-ratio:auto;padding:40px 16px}.rondeur .carte{max-width:100%;padding:30px 20px;min-height:0}
  .compare{grid-template-columns:1fr;gap:40px}.compare .vs{display:none}.compare ul{padding:24px 16px 0;gap:18px;font-size:16px}
  .citation{grid-template-columns:1fr;margin-top:80px}.citation .ph{width:100%;height:200px}.citation blockquote{padding:0 16px 16px;font-size:18px}
  .faq summary{font-size:18px;padding:20px}
  .pied .cols{grid-template-columns:minmax(0,1fr);margin-top:100px}.pied form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.pied form input{min-width:0}
  .sombre .w,.pied .w{padding:0 16px}.pied .appel .btn{margin-top:20px}
}

.grille-fond{display:none}

/* Bouton d'appel flottant, apparaît après le hero */
.flottant{position:fixed;right:24px;bottom:24px;z-index:40;display:flex;align-items:center;gap:10px;height:56px;padding:0 20px 0 8px;border-radius:100px;background:var(--orange);color:#fff;font-family:var(--titre);font-weight:500;font-size:16px;
  opacity:0;transform:translateY(16px) scale(.96);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease),background-color .2s ease}
.flottant.on{opacity:1;transform:none;pointer-events:auto}
.flottant .rond{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--orange);display:grid;place-items:center}
.flottant .rond svg{width:18px;height:18px}
.flottant:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.flottant:hover{background:var(--orange-f)}}
@media (max-width:900px){.flottant{left:12px;right:12px;bottom:12px;justify-content:center}}

/* ===== Système d'espacement unique (12/10) =====
   --g : marge des blocs au bord de l'écran. --c : marge du contenu, la même que l'en-tête.
   Les illustrations débordent du contenu jusqu'à 10 px du bord du bloc. */
:root{--g:max(24px,calc((100vw - 1600px)/2 + 24px));--c:max(64px,calc((100vw - 1600px)/2 + 64px));--i:calc(var(--c) - var(--g))}
@media (max-width:900px){:root{--g:10px;--c:24px}}
.entete{max-width:none;margin:0;padding-inline:var(--c)}
.cadre{padding-inline:var(--g)}
.w{max-width:none;margin:0;padding:0}
.hero{padding-inline:var(--i)}
.hero .media{margin-inline:calc(10px - var(--i))}
.sombre,.pied{padding-inline:var(--i)}
.section{padding-inline:var(--c)}
.confiance{max-width:none;margin:0;padding-inline:var(--c)}
.cas{margin-inline:calc(var(--g) + 10px - var(--c))}
.etapes{max-width:none}
@media (max-width:900px){.w,.sombre .w,.pied .w{padding:0}.confiance{padding-inline:var(--c)}.hero{padding-top:40px}}

/* ===== Carte du ticket : impression réelle, 4 variantes (?ticket=1..4) ===== */
.carte-ticket .int{padding:24px}
.machine{flex:1;position:relative;display:flex;flex-direction:column;min-height:0}
.recu{-webkit-mask:none;mask:none;padding:24px 22px;font-size:14px;line-height:24px;border-radius:0;position:relative}
.recu::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;background:#fff;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/12px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/12px 100%}
.recu>*{height:24px}
.recu .c{text-align:center;color:#777;font-size:12px}
.recu .tete{color:#1A1A1A;font-weight:600;font-size:13px}
.recu .tt{font-size:17px}
.fente{height:14px;border-radius:7px;background:#000;box-shadow:inset 0 2px 0 rgba(255,255,255,.08);position:relative;z-index:3;margin:0 -8px;flex:none}
.sortie{position:relative;overflow:hidden;padding:0 14px 14px}
.ecran-caisse{display:none}
.tampon{display:none}
.carte-ticket h2{margin-top:24px}

/* 1. Imprimante : le papier monte d'une fente, une ligne à la fois */
[data-ticket="1"] .machine,[data-ticket="4"] .machine{justify-content:flex-end}
[data-ticket="1"] .fente,[data-ticket="4"] .fente{order:2}
[data-ticket="1"] .sortie,[data-ticket="4"] .sortie{order:1;padding-bottom:0;padding-top:20px}
/* 2. Le papier descend de la fente du haut, chaque ligne apparaît au bord */
/* 3. Caisse : un afficheur passe à 490,00 pendant que le ticket sort */
[data-ticket="3"] .ecran-caisse{display:flex;justify-content:space-between;align-items:baseline;background:#0E0C0A;border-radius:12px;padding:16px 18px;margin-bottom:16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);flex:none}
[data-ticket="3"] .ecran-caisse .lib{font:500 12px/1 "Geist Mono";letter-spacing:.1em;text-transform:uppercase;color:#8D8780}
[data-ticket="3"] .ecran-caisse .val{font:600 30px/1 "Geist Mono";color:var(--orange);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* 4. Ticket détaché puis tamponné */
[data-ticket="4"] .tampon{display:block;position:absolute;right:40px;bottom:118px;border:3px solid var(--orange);color:var(--orange);font:600 18px/1 "Geist Mono";letter-spacing:.1em;text-transform:uppercase;padding:10px 14px;border-radius:6px;transform:rotate(-12deg) scale(1.5);opacity:0;z-index:4;pointer-events:none;mix-blend-mode:multiply}
[data-ticket="4"] .tampon.pose{opacity:1;transform:rotate(-12deg) scale(1);transition:transform .2s cubic-bezier(.2,1.6,.4,1),opacity .1s ease}
[data-ticket="4"] .recu.detache{transform:translateY(-6px) rotate(-2.5deg)!important;transition:transform .5s var(--ease)}

/* Barre de développement (à retirer avant la mise en ligne) */
.dev{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:100;display:flex;align-items:center;gap:4px;padding:6px;border-radius:100px;background:#14110E;color:#fff;font:500 13px/1 "Geist Mono",monospace;max-width:calc(100vw - 24px);overflow-x:auto}
.dev span{padding:0 10px 0 12px;color:#8D8780;text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.dev button{padding:9px 13px;border-radius:100px;color:#B9B3AA;white-space:nowrap;transition:background-color .15s ease,color .15s ease}
.dev button:hover{color:#fff}
.dev button[aria-pressed="true"]{background:var(--orange);color:#fff}
.dev .rejouer{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);margin-left:4px}
.dev ~ .flottant,.flottant{bottom:76px}

/* ===== Ticket retenu (12/10) : il sort d'une imprimante visible puis se penche ===== */
.carte-ticket .int{border:0;padding:24px 24px 0;overflow:hidden}
.carte-ticket h2{order:-1;margin:0 0 20px}
.carte-ticket .int{display:flex;flex-direction:column}
.machine{justify-content:flex-end}
.sortie{order:1;padding:16px 22px 0;overflow:hidden}
.recu{transform-origin:50% 100%}
.recu.detache{transform:rotate(-3deg)!important;transition:transform .6s var(--ease)}
.recu .logo-r{display:flex;justify-content:center;align-items:center}
.recu .logo-r svg{height:17px;width:auto;fill:#1A1A1A}
.recu .l i{font-style:normal;color:#9A9590;margin-right:4px}
.recu .code{background:repeating-linear-gradient(90deg,#1A1A1A 0 2px,transparent 2px 4px,#1A1A1A 4px 7px,transparent 7px 8px,#1A1A1A 8px 9px,transparent 9px 12px,#1A1A1A 12px 15px,transparent 15px 16px);margin:0 30px}
.recu .merci{color:#1A1A1A;font-weight:600;letter-spacing:.06em}
.imprimante{order:2;position:relative;z-index:3;height:78px;margin:0 -24px;background:#3A332D;border-radius:18px 18px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.14);flex:none}
.imprimante .fente{position:absolute;left:30px;right:30px;top:0;height:10px;transform:translateY(-50%);background:#0A0807;border-radius:5px;box-shadow:0 1px 0 rgba(255,255,255,.12)}
.imprimante .voyant{position:absolute;right:34px;bottom:26px;width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px rgba(255,90,31,.2)}
.dev{display:none}
.flottant{bottom:24px}
@media (max-width:900px){.flottant{bottom:12px}}
@media (max-width:900px){.recu{font-size:11.5px;padding:24px 14px}.recu .tt{font-size:14px}.sortie{padding:16px 6px 0}.recu .code{margin:0 16px}}

/* Deux largeurs seulement (12/10) :
   - contenu : à --c du bord, comme l'en-tête (titres, textes, prix, questions, formulaire) ;
   - illustration : pleine largeur, au ras des blocs (--g), ou à 10 px du bord quand elle est dans un bloc. */
.cas{margin-inline:calc(var(--g) - var(--c))}
.onglets{grid-template-columns:1fr 1.15fr}
.onglets .panneau{margin-right:calc(10px - var(--i))}
.onglets .panneau img{aspect-ratio:4/3.4;border-radius:20px}
.onglets .panneau p{padding-right:var(--i)}
section.cadre .etapes{gap:var(--g)}
@media (max-width:900px){.onglets{grid-template-columns:1fr}.onglets .panneau{margin-inline:calc(10px - var(--i))}.onglets .panneau p{padding-inline:var(--i)}}

/* ===== Deux largeurs franches (12/10, v2) =====
   Contenu : colonne de 1200 px au plus, 120 px de marge minimum sur ordinateur.
   Illustration : quasi bord à bord, les blocs sont à 12 px de l'écran. */
:root{--g:12px;--c:max(120px,calc((100vw - 1200px)/2));--i:calc(var(--c) - var(--g))}
@media (max-width:1100px){:root{--c:64px}}
@media (max-width:900px){:root{--g:8px;--c:22px}}
.hero{padding-top:96px;padding-bottom:12px}
.hero h1{margin-top:28px}
.hero .sous{margin-top:28px}
.hero .actions{margin-top:40px}
.hero .media{margin-top:96px;gap:12px;margin-inline:calc(4px - var(--i))}
.hero .photo{min-height:min(78vh,760px)}
.cadre+.cadre,.bandeau+*{margin-top:0}
.confiance{padding-block:110px 140px}
.sombre{padding-block:220px}
.onglets{margin-top:240px}
.cas{margin-inline:calc(var(--g) - var(--c));min-height:min(78vh,720px)}
.cas+.cas{margin-top:12px}
.section{padding-block:240px}
@media (max-width:900px){.hero{padding-top:56px}.hero .media{margin-top:48px}.sombre,.section{padding-block:110px}.confiance{padding-block:60px 80px}.onglets{margin-top:110px}.cas{min-height:0}}

/* ===== Quatre imprimantes (?imprimante=1..4) ===== */
.imprimante .ecran-tpe,.imprimante .clavier,.imprimante .marque{display:none}

/* 1. Socle : un socle brun clair sous la carte, fente et voyant */

/* 2. Thermique : carte orange, petite imprimante noire posée en bas, le papier en sort */
[data-imprimante="2"] .carte-ticket{background:var(--orange)}
[data-imprimante="2"] .carte-ticket h2{color:#fff}
[data-imprimante="2"] .sortie{padding-inline:56px}
[data-imprimante="2"] .imprimante{margin:0 20px;height:110px;background:#151210;border-radius:22px 22px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -30px 0 #0E0C0A}
[data-imprimante="2"] .imprimante .fente{left:44px;right:44px;background:#000;height:12px}
[data-imprimante="2"] .imprimante .voyant{right:30px;bottom:52px;background:#7BE27B;box-shadow:0 0 0 3px rgba(123,226,123,.18)}
[data-imprimante="2"] .imprimante .marque{display:block;position:absolute;left:30px;bottom:48px;font:600 11px/1 "Geist Mono";letter-spacing:.2em;color:#6E6760}

/* 3. Carte imprimante : la carte elle-même est la machine, une fente claire gravée en bas */
[data-imprimante="3"] .carte-ticket{background:#2A241F}
[data-imprimante="3"] .imprimante{height:96px;margin:0 -24px;background:#2A241F;border-radius:0;box-shadow:none;border-top:1px solid rgba(255,255,255,.06)}
[data-imprimante="3"] .imprimante .fente{left:24px;right:24px;height:6px;background:#0A0807;box-shadow:0 1px 0 rgba(255,255,255,.18),0 -1px 0 rgba(0,0,0,.6)}
[data-imprimante="3"] .imprimante .voyant{display:none}
[data-imprimante="3"] .imprimante .marque{display:block;position:absolute;left:0;right:0;bottom:30px;text-align:center;font:600 12px/1 "Geist Mono";letter-spacing:.4em;color:rgba(255,255,255,.22)}

/* 4. Terminal de paiement : écran 490,00 €, clavier, le ticket sort par le haut */
[data-imprimante="4"] .carte-ticket{background:var(--sable)}
[data-imprimante="4"] .carte-ticket h2{color:var(--ink)}
[data-imprimante="4"] .sortie{padding-inline:70px}
[data-imprimante="4"] .imprimante{margin:0 44px;height:190px;background:#1C1916;border-radius:28px 28px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
[data-imprimante="4"] .imprimante .fente{left:28px;right:28px;background:#000}
[data-imprimante="4"] .imprimante .voyant{display:none}
[data-imprimante="4"] .imprimante .ecran-tpe{display:flex;align-items:center;justify-content:flex-end;position:absolute;left:24px;right:24px;top:26px;height:46px;border-radius:8px;background:#A9C8A0;color:#1B2A18;font:600 22px/1 "Geist Mono";padding:0 14px;box-shadow:inset 0 2px 6px rgba(0,0,0,.25)}
[data-imprimante="4"] .imprimante .clavier{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;position:absolute;left:24px;right:24px;top:86px}
[data-imprimante="4"] .imprimante .clavier i{height:22px;border-radius:6px;background:#38322C}
[data-imprimante="4"] .imprimante .clavier i.ok{background:#3E8E4E}
[data-imprimante="4"] .imprimante .clavier i.non{background:#B4432F}

@media (max-width:900px){[data-imprimante="2"] .sortie,[data-imprimante="4"] .sortie{padding-inline:22px}[data-imprimante="4"] .imprimante{margin:0 10px}}

/* Barre de développement */
.dev{display:flex}
.flottant{bottom:76px}

/* ===== Carte imprimante, 4 variantes (?carte=a..d) ===== */
.imprimante .grille,.imprimante .bouton,.imprimante .vis,.imprimante .plaque{display:none}

/* B. Fente lumineuse : la fente est un trait orange qui brille pendant l'impression */
[data-carte="b"] .imprimante .fente{background:var(--orange);height:4px;box-shadow:0 0 18px 2px rgba(255,90,31,.55)}
[data-carte="b"] .imprimante .marque{color:rgba(255,255,255,.3)}

/* C. Fente au milieu : la carte est coupée en deux, le bas est la machine avec sa grille d'aération */
[data-carte="c"] .imprimante{height:150px;background:#332C26;border-top:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
[data-carte="c"] .imprimante .fente{left:0;right:0;height:8px;border-radius:0}
[data-carte="c"] .imprimante .grille{display:block;position:absolute;left:28px;right:28px;top:34px;height:44px;background:repeating-linear-gradient(0deg,#1C1814 0 4px,transparent 4px 10px);opacity:.9;border-radius:4px}
[data-carte="c"] .imprimante .bouton{display:block;position:absolute;right:28px;bottom:30px;width:36px;height:36px;border-radius:50%;background:var(--orange);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
[data-carte="c"] .imprimante .marque{left:28px;right:auto;bottom:40px;text-align:left;letter-spacing:.3em}

/* D. Plaque vissée : panneau métal, quatre vis et une plaque gravée */
[data-carte="d"] .imprimante{height:120px;background:#433C35;border-top:0}
[data-carte="d"] .imprimante .fente{left:40px;right:40px;height:10px;box-shadow:0 2px 0 rgba(255,255,255,.18),inset 0 2px 3px rgba(0,0,0,.8)}
[data-carte="d"] .imprimante .marque{display:none}
[data-carte="d"] .imprimante .vis{display:block;position:absolute;width:10px;height:10px;border-radius:50%;background:#7A7168;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
[data-carte="d"] .imprimante .vis::after{content:"";position:absolute;left:2px;right:2px;top:4px;height:2px;background:rgba(0,0,0,.45);transform:rotate(35deg)}
[data-carte="d"] .imprimante .v1{left:16px;top:22px}[data-carte="d"] .imprimante .v2{right:16px;top:22px}
[data-carte="d"] .imprimante .v3{left:16px;bottom:16px}[data-carte="d"] .imprimante .v4{right:16px;bottom:16px}
[data-carte="d"] .imprimante .plaque{display:block;position:absolute;left:50%;bottom:24px;transform:translateX(-50%);padding:8px 16px;border-radius:4px;background:#2A241F;color:#A79E94;font:600 11px/1 "Geist Mono";letter-spacing:.25em;box-shadow:inset 0 1px 2px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.1)}

/* ===== Carte gravée retenue (12/10) ===== */
/* La fente est une ouverture : plus de filet de part et d'autre, le papier en sort et passe devant sa moitié haute */
[data-imprimante="3"] .imprimante{border-top:0}
[data-imprimante="3"] .imprimante .fente{left:12px;right:12px;height:10px;top:0;transform:none;border-radius:5px;background:#050403;box-shadow:inset 0 3px 4px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.14)}
[data-imprimante="3"] .sortie{position:relative;z-index:4;margin-bottom:-6px;padding-inline:36px}
[data-imprimante="3"] .imprimante{z-index:3}
.imprimante .grave{display:none}
.titre-carte{font-size:24px;font-weight:500;letter-spacing:-.02em;line-height:1.2;white-space:nowrap}
.titre-carte span{display:inline}
/* 1. Titre en haut, une ligne */
/* 2. Pas de titre : le texte est gravé sous la fente à la place du nom */
[data-titre="2"] .titre-carte{display:none}
[data-titre="2"] .imprimante .marque{display:none}
[data-titre="2"] .imprimante .grave{display:block;position:absolute;left:0;right:0;bottom:30px;text-align:center;font:600 12px/1 "Geist Mono";letter-spacing:.3em;color:rgba(255,255,255,.28)}
/* 3. Titre sous la fente, dans la machine */
[data-titre="3"] .titre-carte{order:3;margin:-58px 0 0;position:relative;z-index:5;text-align:center;font-size:20px;color:rgba(255,255,255,.85);padding-bottom:28px}
[data-titre="3"] .imprimante .marque{display:none}
/* 4. Titre en deux, de part et d'autre */
[data-titre="4"] .titre-carte{display:flex;justify-content:space-between}
[data-titre="4"] .titre-carte span+span{color:#8D8780}
@media (max-width:900px){.titre-carte{font-size:19px}[data-imprimante="3"] .sortie{padding-inline:14px}}

/* ===== Titre de la carte sur deux lignes, quatre tickets (?recu=1..4) ===== */
.titre-carte{white-space:normal;font-size:26px;line-height:1.2}
.recu>*{height:auto;min-height:24px}
.recu .l.petit{font-size:12px;color:#777}
.recu .sep.double{border:0;height:24px}
.recu .sep.double::before{border-top:3px double #9A9590}
.recu .sep.egal::before{border-top:2px solid #1A1A1A}
.recu .l.pt b{flex:1;border-bottom:1.5px dotted #B5B0AA;margin:0 6px 6px}
.recu .l.geant{height:48px;align-items:center;font-size:24px;font-weight:600}
.recu .encadre{margin:6px auto;width:max-content;border:2px solid #1A1A1A;padding:2px 10px;font-weight:600;letter-spacing:.12em;line-height:20px}
.recu .coche{font-size:15px}
.recu .enorme{height:72px;display:flex;align-items:baseline;justify-content:space-between;font-family:var(--titre);font-weight:600;font-size:54px;letter-spacing:-.03em;line-height:72px}
.recu .enorme small{font:500 13px "Geist Mono";letter-spacing:0;color:#777}
.recu .enorme.o{color:var(--orange)}
.recu .entete-col{font-size:11px;color:#777;letter-spacing:.08em}
.recu .l i{display:inline-block;min-width:22px}
.recu .c{height:auto;line-height:20px;padding:2px 0}

/* Ticket facture retenu (12/10) : code-barres EAN-13 réel */
.recu .code-ean{display:grid;justify-items:center;gap:2px;padding:10px 0 2px}
.recu .code-ean .ean{width:190px;height:44px;fill:#1A1A1A}
.recu .code-ean span{font-size:11px;letter-spacing:.18em;color:#1A1A1A;line-height:14px}
.dev{display:none!important}
.flottant{bottom:24px}
@media (max-width:900px){.flottant{bottom:12px}}

/* ===== Section du problème, juste après le hero (12/10), 4 variantes (?pb=1..4) ===== */
.probleme{padding:200px var(--i)}
.pb-in{max-width:1200px;margin:0 auto}
.pb-titre{font-size:clamp(38px,4.4vw,64px);font-weight:500;letter-spacing:-.03em;line-height:1.08;margin-top:24px;max-width:18ch}
.pb-titre .mot{transition:color .25s ease}
.pb-sous{font-size:19px;line-height:1.55;color:var(--mute);max-width:52ch;margin-top:32px}
.pb-reponse{font-size:19px;line-height:1.55;max-width:52ch;margin-top:16px}
.pb-reponse em{font-style:normal;color:var(--orange);font-weight:500}
.pb-recus{display:none}
.mini{background:#fff;font:400 13px/22px "Geist Mono",monospace;padding:20px 20px 24px;box-shadow:0 0 0 1px rgba(20,17,14,.08)}
.mini b{display:block;font-weight:600;margin-bottom:10px;letter-spacing:.04em;text-transform:uppercase;font-size:12px}
.mini span{display:flex;justify-content:space-between;gap:16px}
.mini span i{font-style:normal}
.mini span i+i{color:#8D8780}
.mini .pied-m{border-top:1.5px dashed #C9C9C9;margin-top:10px;padding-top:10px}
.mini.b span i+i{color:var(--ink);font-weight:600}
.mini.b span:nth-of-type(2) i+i{color:var(--orange)}
/* 1. Manifeste : grand texte sur blanc, réponse en orange */
[data-pb="1"] .pb-titre{max-width:20ch}
/* 2. Deux tickets : le texte à gauche, deux mini-tickets à droite qui se comparent */
[data-pb="2"] .pb-in{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:center}
[data-pb="2"] .pb-in>:not(.pb-recus){grid-column:1}
[data-pb="2"] .pb-recus{display:grid;grid-template-columns:1fr 1fr;gap:16px;grid-column:2;grid-row:1/5;align-items:start}
[data-pb="2"] .mini.a{transform:rotate(-2deg)}
[data-pb="2"] .mini.b{transform:rotate(2deg);margin-top:60px}
[data-pb="2"] .pb-titre{font-size:clamp(34px,3.6vw,52px)}
/* 3. Bloc noir : le manifeste dans un bloc sombre pleine largeur */
[data-pb="3"] .probleme{background:var(--ink);color:#F0F0F0;margin:12px 0 0;border-radius:var(--r-section);padding:200px var(--i)}
[data-pb="3"] .probleme .pill{background:var(--ink-3);color:#fff}
[data-pb="3"] .pb-sous{color:#B9B3AA}
[data-pb="3"] .pb-reponse{color:#F0F0F0}
[data-pb="3"] #compris{margin-top:12px}
/* 4. Lecture au défilement : le titre très grand, gris clair, se colore mot à mot */
[data-pb="4"] .pb-titre{font-size:clamp(44px,5.6vw,84px);max-width:22ch;line-height:1.05}
[data-pb="4"] .pb-titre .mot{color:#D9D4CC}
[data-pb="4"] .pb-titre .mot.lu{color:var(--ink)}
@media (max-width:900px){.probleme{padding:100px var(--i)}[data-pb="2"] .pb-in{grid-template-columns:1fr;gap:40px}[data-pb="2"] .pb-recus{grid-column:1;grid-row:auto}[data-pb="3"] .probleme{padding:100px var(--i)}}
/* Barre de développement */
.dev2{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:100;display:flex;align-items:center;gap:4px;padding:6px;border-radius:100px;background:#14110E;color:#fff;font:500 13px/1 "Geist Mono",monospace;max-width:calc(100vw - 24px);overflow-x:auto}
.dev2 span{padding:0 10px 0 12px;color:#8D8780;text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.dev2 button{padding:9px 13px;border-radius:100px;color:#B9B3AA;white-space:nowrap}
.dev2 button[aria-pressed="true"]{background:var(--orange);color:#fff}
.flottant{bottom:76px}
/* Problème : le titre prend la largeur du contenu, les deux paragraphes se répondent en colonnes */
[data-pb="1"] .pb-titre,[data-pb="3"] .pb-titre{max-width:24ch;font-size:clamp(38px,4.6vw,68px)}
[data-pb="1"] .pb-in,[data-pb="3"] .pb-in{display:grid;grid-template-columns:1fr 1fr;column-gap:80px}
[data-pb="1"] .pb-in>.pill,[data-pb="1"] .pb-titre,[data-pb="3"] .pb-in>.pill,[data-pb="3"] .pb-titre{grid-column:1/-1;justify-self:start}
[data-pb="1"] .pb-sous,[data-pb="1"] .pb-reponse,[data-pb="3"] .pb-sous,[data-pb="3"] .pb-reponse{margin-top:56px;font-size:20px}
[data-pb="2"] .mini{font-size:14.5px;line-height:25px;padding:24px 24px 28px}
@media (max-width:900px){[data-pb="1"] .pb-in,[data-pb="3"] .pb-in{grid-template-columns:1fr}[data-pb="1"] .pb-reponse,[data-pb="3"] .pb-reponse{margin-top:16px}}
[data-pb="2"] .pb-in{grid-template-rows:auto auto auto 1fr;align-items:start}[data-pb="2"] .pb-recus{align-self:center}

/* ===== Problème : quatre lectures au défilement (?pb=1..4) ===== */
[data-pb] .probleme{background:none;color:inherit;margin:0;border-radius:0}
[data-pb] .pb-in{display:block}
[data-pb] .pb-recus{display:none}
[data-pb] .pb-titre{margin-top:0;font-size:clamp(44px,5.6vw,84px);max-width:22ch;line-height:1.05;letter-spacing:-.035em}
[data-pb] .pb-titre .mot{color:#DDD8D0;transition:color .2s ease}
[data-pb] .pb-titre .mot.lu{color:var(--ink)}
[data-pb] .pb-sous,[data-pb] .pb-reponse{margin-top:40px;font-size:20px;max-width:56ch}
[data-pb] .pb-reponse{margin-top:12px}
/* 1. Mot à mot : le titre se colore mot par mot, les deux phrases dessous */
/* 2. Plein écran : la section est collée à l'écran pendant la lecture, la réponse arrive à la fin */
[data-pb="2"] .probleme{height:240vh;padding:0 var(--i)}
[data-pb="2"] .pb-in{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
[data-pb="2"] .pb-titre{max-width:20ch}
[data-pb="2"] .pb-sous{display:none}
[data-pb="2"] .pb-reponse{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease);font-size:24px}
[data-pb="2"] .probleme.fini .pb-reponse{opacity:1;transform:none}
/* 3. Phrase entière : problème et réponse dans une seule phrase, les mots clés passent en orange */
[data-pb="3"] .pb-titre{max-width:26ch;font-size:clamp(40px,4.8vw,72px)}
[data-pb="3"] .pb-titre .mot.cle.lu{color:var(--orange)}
[data-pb="3"] .pb-titre .mot.apres{}
[data-pb="3"] .pb-sous,[data-pb="3"] .pb-reponse{display:none}
/* 4. Ligne à ligne : chaque ligne monte en entier, sans passer par le gris */
[data-pb="4"] .pb-titre .mot{display:inline-block;color:var(--ink);opacity:0;transform:translateY(.35em);transition:opacity .45s var(--ease),transform .45s var(--ease)}
[data-pb="4"] .pb-titre .mot.lu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-pb] .pb-titre .mot{color:var(--ink)!important;opacity:1!important;transform:none!important}[data-pb="2"] .probleme{height:auto;padding:100px var(--i)}[data-pb="2"] .pb-in{position:static;height:auto}[data-pb="2"] .pb-reponse{opacity:1;transform:none}}
@media (max-width:900px){[data-pb] .pb-titre{font-size:40px}}

/* ===== Plein écran, quatre variantes (?fs=1..4) ===== */
.pb-mois{display:none}
[data-pb="2"] .probleme{transition:background-color .6s var(--ease)}
/* 2. La nuit tombe : le fond passe au noir dès qu'on entre, les mots s'allument en blanc */
[data-fs="2"] .probleme.nuit{background:var(--ink)}
[data-fs="2"] .probleme.nuit .pb-titre .mot{color:#4A433D}
[data-fs="2"] .probleme.nuit .pb-titre .mot.lu{color:#F4F1EC}
[data-fs="2"] .probleme .pb-reponse{color:#B9B3AA}
[data-fs="2"] .probleme{margin-inline:calc(-1 * var(--g));padding-inline:var(--c)}
/* 3. Question puis réponse : le problème s'efface, la réponse prend sa place en grand */
[data-fs="3"] .pb-in{display:grid;place-items:center}
[data-fs="3"] .pb-titre,[data-fs="3"] .pb-reponse{grid-area:1/1;transition:opacity .5s var(--ease),transform .5s var(--ease),filter .5s var(--ease)}
[data-fs="3"] .pb-reponse{opacity:0;transform:translateY(20px);font-size:clamp(40px,4.8vw,72px);font-weight:500;letter-spacing:-.035em;line-height:1.08;max-width:20ch;margin:0}
[data-fs="3"] .pb-reponse em{font-weight:500}
[data-fs="3"] .probleme.bascule .pb-titre{opacity:0;transform:translateY(-20px) scale(.97);filter:blur(4px)}
[data-fs="3"] .probleme.bascule .pb-reponse{opacity:1;transform:none}
/* 4. Les mois défilent : un ticket « contrat classique » ajoute un mois à payer à chaque cran */
[data-fs="4"] .pb-in{display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:center;text-align:left;justify-items:start}
[data-fs="4"] .pb-titre{grid-column:1;font-size:clamp(40px,4.4vw,66px);max-width:16ch}
[data-fs="4"] .pb-reponse{grid-column:1}
[data-fs="4"] .pb-mois{display:block;grid-column:2;grid-row:1/3;width:100%;max-width:380px;justify-self:end;background:#fff;box-shadow:0 0 0 1px rgba(20,17,14,.08);font:400 15px/26px "Geist Mono",monospace;padding:24px 26px 30px;transform:rotate(2deg)}
[data-fs="4"] .mm-tete{display:flex;justify-content:space-between;border-bottom:1.5px dashed #C9C9C9;padding-bottom:12px;margin-bottom:12px}
[data-fs="4"] .mm-tete b{font-size:12px;letter-spacing:.06em;text-transform:uppercase}
[data-fs="4"] .mm-tete span{color:var(--orange);font-weight:600;font-variant-numeric:tabular-nums}
[data-fs="4"] .mm-lignes{height:234px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
[data-fs="4"] .mm-lignes span{display:flex;justify-content:space-between}
[data-fs="4"] .mm-lignes span i{font-style:normal}
[data-fs="4"] .mm-lignes span i+i{color:#8D8780}
@media (max-width:900px){[data-fs="4"] .pb-in{grid-template-columns:1fr;gap:28px}[data-fs="4"] .pb-mois{grid-column:1;grid-row:auto;justify-self:center;max-width:300px}[data-fs="4"] .mm-lignes{height:156px}}
/* correctifs de priorité des variantes plein écran */
html[data-fs="3"] .probleme .pb-in{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-content:center}
html[data-fs="3"] .probleme .pb-reponse{max-width:22ch;font-size:clamp(40px,4.6vw,70px);color:var(--ink)}
html[data-fs="4"] .probleme .pb-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-rows:auto auto;column-gap:80px;align-content:center;align-items:center;justify-items:start;text-align:left;max-width:1200px;margin:0 auto}
html[data-fs="4"] .probleme .pb-titre{grid-column:1;grid-row:1;max-width:16ch}
html[data-fs="4"] .probleme .pb-reponse{grid-column:1;grid-row:2}
html[data-fs="4"] .probleme .pb-mois{grid-column:2;grid-row:1/3;justify-self:end}
@media (max-width:900px){html[data-fs="4"] .probleme .pb-in{grid-template-columns:minmax(0,1fr)}html[data-fs="4"] .probleme .pb-mois{grid-column:1;grid-row:3;justify-self:center}}
html[data-fs="3"] .probleme .pb-in{height:100vh;grid-template-rows:minmax(0,1fr);align-items:center;position:sticky;top:0}

/* ===== Ce qui est compris, 4 variantes (?cp=1..4) ===== */
.cp-titre{margin-bottom:56px}
.onglets{margin-top:0}
.onglets>div>.liste{margin-top:0}
.cp2,.cp3,.cp4{display:none}
[data-cp="2"] .onglets,[data-cp="3"] .onglets,[data-cp="4"] .onglets{display:none}
/* 2. Volets : quatre panneaux côte à côte, celui qu'on clique s'ouvre avec son image */
[data-cp="2"] .cp2{display:flex;gap:10px;height:min(72vh,640px);margin-inline:calc(10px - var(--i))}
.volet{position:relative;flex:1;min-width:0;background:var(--ink-2);border-radius:22px;overflow:hidden;text-align:left;color:#fff;transition:flex-grow .6s var(--ease),background-color .3s ease;display:flex;flex-direction:column;justify-content:space-between;padding:26px}
.volet.on{flex:4.5;cursor:default}
.volet .vn{font:500 16px/1 "Geist Mono";color:var(--orange)}
.volet .vt{font-family:var(--titre);font-size:28px;font-weight:500;letter-spacing:-.02em;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;align-self:flex-start;transition:opacity .3s ease}
.volet.on .vt{opacity:0}
.volet .vc{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;opacity:0;transition:opacity .35s ease .15s;pointer-events:none}
.volet.on .vc{opacity:1}
.volet .vc img{width:100%;height:100%;object-fit:cover;min-height:0}
.volet .vc>span{padding:24px 28px 28px;background:var(--ink-2);font-size:18px;line-height:1.35;color:#B9B3AA}
.volet .vc b{display:block;font-family:var(--titre);font-weight:500;font-size:30px;letter-spacing:-.02em;color:#fff;margin-bottom:8px}
@media (hover:hover) and (pointer:fine){.volet:not(.on):hover{background:#2A2520}}
/* 3. Liste qui suit : les titres restent collés à gauche, les images défilent à droite */
[data-cp="3"] .cp3{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;margin-right:calc(10px - var(--i))}
.cp3-g{position:relative}
.cp3-liste{position:sticky;top:30vh;display:grid;gap:6px}
.cp3-item{display:flex;align-items:baseline;gap:14px;font-family:var(--titre);font-size:36px;font-weight:500;letter-spacing:-.03em;color:#5E5750;transition:color .3s ease;padding:10px 0}
.cp3-item small{font-size:16px;color:var(--orange)}
.cp3-item.on{color:#fff}
.cp3-d{display:grid;gap:120px}
.cp3-f img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:22px}
.cp3-f figcaption{margin-top:22px;color:#B9B3AA;font-size:18px;line-height:1.35;max-width:44ch}
.cp3-f figcaption b{display:none}
/* 4. Quatre cartes : tout est visible d'un coup */
[data-cp="4"] .cp4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-inline:calc(10px - var(--i))}
.cp4-c{background:var(--ink-2);border-radius:22px;overflow:hidden;display:flex;flex-direction:column}
.cp4-c img{width:100%;aspect-ratio:1;object-fit:cover}
.cp4-c>div{padding:24px 24px 30px;display:grid;gap:10px}
.cp4-c small{font:500 15px/1 "Geist Mono";color:var(--orange)}
.cp4-c b{font-family:var(--titre);font-size:26px;font-weight:500;letter-spacing:-.02em;color:#fff}
.cp4-c p{color:#B9B3AA;font-size:16px;line-height:1.4}
@media (max-width:900px){
  [data-cp="2"] .cp2{flex-direction:column;height:auto}.volet{min-height:84px}.volet.on{min-height:460px}.volet .vt{writing-mode:horizontal-tb;transform:none}
  [data-cp="3"] .cp3{grid-template-columns:1fr;gap:30px}.cp3-g{display:none}.cp3-f figcaption b{display:block;color:#fff;font-family:var(--titre);font-size:26px;margin-bottom:6px}.cp3-d{gap:60px}
  [data-cp="4"] .cp4{grid-template-columns:1fr 1fr}
}
/* Barre de développement à gauche, le bouton d'appel reste dans le coin bas droit */
.dev2{left:16px;transform:none}
.flottant{bottom:24px;right:24px}
@media (max-width:900px){.flottant{bottom:12px;left:auto;right:12px}.dev2{bottom:76px}}
.sombre{overflow:clip}

/* ===== Ce qui est compris v2 (12/10) : sans photo, des vignettes qui montrent la chose ===== */
#compris{padding-block:140px}
.cp-titre{margin-bottom:48px}
.ong,.c4{display:none}
[data-cp="1"] .ong,[data-cp="2"] .ong{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.ong-liste{display:grid;gap:4px}
.ong-liste button{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline;text-align:left;padding:18px 20px;border-radius:14px;color:#8D8780;transition:background-color .2s ease,color .2s ease}
.ong-liste small{font:500 16px/1 "Geist Mono";color:var(--orange)}
.ong-liste span{font-family:var(--titre);font-size:34px;font-weight:500;letter-spacing:-.03em;line-height:1.1}
.ong-liste p{display:none;grid-column:2;color:#B9B3AA;font-size:17px;line-height:1.4;margin-top:10px;max-width:40ch}
.ong-liste button[aria-selected="true"]{background:var(--ink-2);color:#fff}
.ong-panneau{position:relative}
.ong-vue{display:none}
.ong-vue.on{display:block;animation:apparait .35s var(--ease)}
@keyframes apparait{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ong-vue>p{color:#B9B3AA;font-size:18px;line-height:1.4;margin-top:24px;max-width:44ch}
/* 1. Onglets illustrés : la vignette de la chose à droite */
[data-cp="1"] .ong-panneau{background:var(--ink-2);border-radius:24px;padding:40px;min-height:420px;display:grid;align-items:center}
/* 2. Onglets texte : pas d'image, la description s'ouvre sous le titre actif */
[data-cp="2"] .ong{grid-template-columns:1fr}
[data-cp="2"] .ong-panneau{display:none}
[data-cp="2"] .ong-liste{max-width:760px}
[data-cp="2"] .ong-liste button[aria-selected="true"] p{display:block}
/* 3 et 4. Quatre cartes */
[data-cp="3"] .c4,[data-cp="4"] .c4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-inline:calc(10px - var(--i))}
.c4-c{background:var(--ink-2);border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:10px}
.c4-c>small{font:500 15px/1 "Geist Mono";color:var(--orange);margin-top:6px}
.c4-c>b{font-family:var(--titre);font-size:26px;font-weight:500;letter-spacing:-.02em;color:#fff}
.c4-c>p{color:#B9B3AA;font-size:16px;line-height:1.4}
.c4-vis{background:#2A2520;border-radius:16px;padding:20px;min-height:220px;display:grid;align-items:center;margin-bottom:10px}
.c4-ic{display:none;font-size:30px;color:var(--orange);width:56px;height:56px;border-radius:14px;background:#2A2520;place-items:center;margin-bottom:24px}
[data-cp="4"] .c4-vis{display:none}
[data-cp="4"] .c4-ic{display:grid}
[data-cp="4"] .c4-c{padding:30px 28px 34px}
/* Vignettes (illustrations des livrables) */
.mk{font-family:var(--texte);color:#1A1A1A;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.06);font-size:13px;width:100%;max-width:420px;justify-self:center}
.mk-bar{display:flex;align-items:center;gap:5px;padding:9px 12px;background:#EFEBE4}
.mk-bar i{width:8px;height:8px;border-radius:50%;background:#D3CCC1}
.mk-bar span{margin-left:10px;background:#fff;border-radius:99px;padding:4px 10px;font:500 11px "Geist Mono";color:#6E6A64}
.mk-page{padding:18px;display:grid;gap:6px;background:#2A2018;color:#fff}
.mk-page b{font-size:12px;opacity:.8}
.mk-page strong{font-family:var(--titre);font-size:22px;line-height:1.1;font-weight:600;letter-spacing:-.02em}
.mk-page em{font-style:normal;opacity:.75}
.mk-btn{justify-self:start;margin-top:6px;background:var(--orange);color:#fff;border-radius:99px;padding:6px 12px;font-weight:600}
.mk-dom{padding:16px;display:grid;gap:12px}
.mk-url{display:flex;gap:8px;align-items:center;background:#F2F0EC;border-radius:99px;padding:9px 14px;font:500 13px "Geist Mono"}
.mk-url .cad{font-size:11px}
.mk-lignes{display:grid;gap:6px;font:400 12px "Geist Mono"}
.mk-lignes span{display:flex;justify-content:space-between;border-bottom:1px dashed #DDD;padding-bottom:6px}
.mk-lignes i{font-style:normal;color:#8D8780}
.mk-lignes b{color:var(--orange)}
.mk-fiche{padding:16px;display:grid;gap:6px}
.mk-fiche>b{font-size:17px}
.mk-fiche .et{color:#E8A400;letter-spacing:1px}
.mk-fiche .et i{font-style:normal;color:#6E6A64;letter-spacing:0}
.mk-fiche .ouv{color:#1E8E3E;font-size:12px}
.mk-bt{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.mk-bt span{border:1px solid #DDD;border-radius:99px;padding:5px 10px;color:#1A56C9;font-weight:500;font-size:12px}
.mk-bt span.o{background:#1A56C9;color:#fff;border-color:#1A56C9}
.mk-seo{padding:14px;display:grid;gap:8px}
.mk-cherche{border:1px solid #DDD;border-radius:99px;padding:8px 14px;font-size:13px}
.mk-res{padding:8px 10px;border-radius:8px;display:grid;gap:2px;opacity:.45}
.mk-res b{color:#1A56C9;font-weight:500}
.mk-res span{font-size:12px;color:#555}
.mk-res.on{opacity:1;background:#FFF1EA;box-shadow:inset 3px 0 0 var(--orange)}
@media (max-width:900px){[data-cp="1"] .ong,[data-cp="2"] .ong{grid-template-columns:1fr;gap:28px}.ong-liste span{font-size:24px}[data-cp="3"] .c4,[data-cp="4"] .c4{grid-template-columns:1fr}#compris{padding-block:90px}}
[data-cp="1"] .ong-panneau .mk{max-width:480px;font-size:15px;transform:scale(1.12);transform-origin:center}
[data-cp="1"] .ong-panneau{min-height:460px;padding:56px}
.c4-vis{min-height:240px}
.c4-vis .mk{font-size:12px}
.c4-c{justify-content:flex-start}
.c4-vis{height:240px;min-height:0;overflow:hidden}

/* ===== Mobile, reprise complète (12/10) ===== */
@media (max-width:900px){
  /* barre de variantes en haut, hors du contenu */
  .dev2{top:8px;bottom:auto;left:8px;right:8px;transform:none;justify-content:flex-start}
  /* hero */
  .hero{padding-top:36px}
  .hero h1{font-size:40px;line-height:1.08}
  .hero .sous{font-size:16px;line-height:1.75}
  .hero .media{margin-top:36px;margin-inline:calc(6px - var(--i))}
  .hero .photo{min-height:340px}
  /* carte du ticket : tout centré, le ticket tient dans la largeur */
  .carte-ticket .int{padding:28px 14px 0;align-items:center;text-align:center}
  .titre-carte{font-size:24px;text-align:center;margin-bottom:24px!important;max-width:16ch}
  .machine{width:100%}
  [data-imprimante="3"] .sortie{padding:16px 0 0;display:flex;justify-content:center}
  .recu{width:100%;max-width:330px;margin:0 auto;font-size:11.5px;line-height:22px;padding:22px 16px;text-align:left}
  .recu .l i{min-width:16px}
  .recu .code-ean .ean{width:160px;height:38px}
  [data-imprimante="3"] .imprimante{margin:0 -14px;height:84px}
  [data-imprimante="3"] .imprimante .fente{left:10px;right:10px}
  /* problème */
  [data-pb] .pb-titre{font-size:36px}
  [data-pb="2"] .pb-reponse{font-size:18px;padding-inline:4px}
  /* compris */
  .cp-titre{text-align:center;margin-inline:auto;max-width:14ch}
  [data-cp="1"] .ong-panneau{padding:28px 18px;min-height:0}
  [data-cp="1"] .ong-panneau .mk{transform:none}
  .ong-liste button{padding:14px 14px}
  /* prix et exemples */
  .entete-section{padding-inline:4px}
  .prix .large .ligne{flex-direction:column;align-items:flex-start;gap:4px}
  .cas .panneau{padding:22px}
  .cas h3{font-size:28px}
  .cas .bas .m b{font-size:40px}
  /* comparatif et citation */
  .citation .ph{display:none}
  .citation{grid-template-columns:1fr;padding:24px}
  .citation blockquote{padding:0}
  /* pied */
  .pied .appel h2{font-size:44px}
  .pied .appel .btn{transform:rotate(-4deg)}
  .pied form{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:380px){.hero h1{font-size:34px}.recu{font-size:10.5px}}
@media (max-width:900px){
  [data-imprimante="3"] .sortie{padding:18px 18px 0;display:block}
  .recu{max-width:none}
  .recu.detache{transform:rotate(-2deg)!important}
}
@media (max-width:900px){.recu{transform-origin:50% 60%}}

/* ===== Ce qui est compris v3 : accordéon + illustration réaliste, 4 variantes (?cp=1..4) ===== */
.ong,.c4{display:none!important}
.acc{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.acc-liste{display:grid;gap:4px}
.acc-liste button{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline;text-align:left;padding:20px 22px;border-radius:16px;color:#8D8780;overflow:hidden;transition:background-color .25s ease,color .25s ease}
.acc-liste small{font:500 15px/1 "Geist Mono";color:var(--orange)}
.acc-liste>button>span{font-family:var(--titre);font-size:32px;font-weight:500;letter-spacing:-.03em;line-height:1.1}
.acc-liste>button>p{grid-column:2;color:#B9B3AA;font-size:17px;line-height:1.45;max-width:40ch;display:grid;grid-template-rows:0fr;overflow:hidden;opacity:0;transition:grid-template-rows .35s var(--ease),opacity .3s ease,margin .35s var(--ease)}
.acc-liste button[aria-selected="true"]{background:var(--ink-2);color:#fff}
.acc-liste button[aria-selected="true"]>p{opacity:1;margin-top:10px}
.acc-liste>button>p{max-height:0}
.acc-liste button[aria-selected="true"]>p{max-height:200px}
.acc-liste .barre{position:absolute;left:22px;right:22px;bottom:0;height:2px;background:transparent}
.acc-vis{position:relative;display:grid}
.acc-v{grid-area:1/1;opacity:0;transform:translateY(10px) scale(.985);transition:opacity .35s var(--ease),transform .35s var(--ease);pointer-events:none;display:grid;place-items:center}
.acc-v.on{opacity:1;transform:none;pointer-events:auto}
/* 1. Panneau clair : l'illustration posée sur un panneau crème */
[data-cp="1"] .acc-vis{background:#F3EEE6;border-radius:24px;padding:48px;min-height:480px}
/* 2. Bord à bord : panneau sable qui va jusqu'au bord du bloc */
[data-cp="2"] .acc-vis{background:#2A2520;border-radius:24px 0 0 24px;padding:56px;min-height:540px;margin-right:calc(10px - var(--i))}
/* 3. Défilement auto : comme 1, avec une barre qui se remplit, l'étape suivante s'ouvre seule */
[data-cp="3"] .acc-vis{background:#F3EEE6;border-radius:24px;padding:48px;min-height:480px}
[data-cp="3"] .acc-liste .barre{background:rgba(255,255,255,.08)}
[data-cp="3"] .acc-liste button.auto .barre::after{content:"";position:absolute;inset:0;background:var(--orange);transform-origin:left;animation:remplit 5s linear forwards}
/* 4. Image à gauche : l'illustration d'abord, la liste à droite */
[data-cp="4"] .acc{grid-template-columns:1.15fr .85fr}
[data-cp="4"] .acc-vis{order:-1;background:#F3EEE6;border-radius:24px;padding:48px;min-height:480px;margin-left:calc(10px - var(--i))}

/* Illustrations */
.ill{width:100%;max-width:520px;font-family:var(--texte);color:#1A1A1A;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.04),0 24px 50px -30px rgba(26,18,8,.45)}
.ill .ph{font-size:1em}
.nv-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#ECE7DF}
.nv-bar .pt{display:flex;gap:5px}.nv-bar .pt i{width:9px;height:9px;border-radius:50%;background:#D3CCC1}
.nv-url{flex:1;max-width:300px;display:flex;align-items:center;gap:6px;background:#fff;border-radius:99px;padding:5px 12px;font:500 12px "Geist Mono";color:#5A5550}
.nv-menu{display:flex;align-items:center;gap:16px;padding:12px 16px;font-size:12px;color:#5A5550;border-bottom:1px solid #F0ECE6}
.nv-menu b{color:#1A1A1A;font-size:13px;margin-right:auto}
.nv-menu em{font-style:normal;background:#1A1A1A;color:#fff;border-radius:99px;padding:5px 10px;font-weight:600}
.nv-hero{position:relative;height:200px;background:#3a2c20 center 40%/cover;display:flex;align-items:flex-end}
.nv-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,10,6,.75),rgba(15,10,6,.1))}
.nv-hero>div{position:relative;padding:18px;color:#fff;display:grid;gap:6px}
.nv-hero small{font-size:11px;opacity:.8}
.nv-hero strong{font-family:var(--titre);font-size:22px;line-height:1.1;font-weight:600;letter-spacing:-.02em;max-width:18ch}
.nv-hero em{justify-self:start;font-style:normal;background:#E8B04B;color:#1A1208;font-weight:700;font-size:12px;border-radius:6px;padding:7px 11px}
.nv-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 16px 16px}
.nv-cartes span{height:46px;border-radius:8px;background:#F3EFE9}
.ill-dom{padding:22px;display:grid;gap:0}
.dm-tete{display:flex;align-items:center;gap:10px;font:600 17px "Geist Mono";padding-bottom:16px;border-bottom:1px solid #EEE;margin-bottom:6px}
.dm-tete i{font-size:22px;color:var(--orange)}
.dm-tete em{margin-left:auto;font:600 11px "Geist Mono";color:#1E8E3E;background:#E7F5EA;border-radius:99px;padding:4px 9px}
.dm-l{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px dashed #E2DDD6;font-size:14px}
.dm-l span{color:#8D8780}
.dm-ok{display:flex;align-items:center;gap:8px;margin-top:16px;color:var(--orange);font-weight:600;font-size:15px}
.dm-ok i{font-size:20px}
.ill-gmb .gm-photos{display:grid;grid-template-columns:2fr 1fr 1fr;gap:3px;height:150px}
.gm-photos span{background:#3a2c20 center/cover}
.gm-corps{padding:16px 18px 18px;display:grid;gap:4px}
.gm-corps>b{font-size:20px;font-weight:500}
.gm-et{font-size:13px;color:#5A5550}.gm-et i{font-style:normal;color:#E8A400;letter-spacing:1px}
.gm-cat{font-size:13px;color:#5A5550}
.gm-ouv{font-size:13px;color:#5A5550}.gm-ouv em{font-style:normal;color:#1E8E3E;font-weight:600}
.gm-bt{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.gm-bt span{display:flex;align-items:center;gap:6px;border:1px solid #DADCE0;border-radius:99px;padding:7px 12px;color:#1A56C9;font-weight:500;font-size:13px}
.gm-bt span.o{background:#1A56C9;color:#fff;border-color:#1A56C9}
.ill-serp{padding:16px;display:grid;gap:10px}
.sr-cherche{display:flex;align-items:center;gap:10px;border:1px solid #DADCE0;border-radius:99px;padding:10px 16px;font-size:14px;box-shadow:0 1px 6px rgba(32,33,36,.12)}
.sr-cherche i{color:#8D8780}
.sr-carte{position:relative;height:120px;border-radius:10px;background:#E8EDE3;background-image:linear-gradient(90deg,transparent 48%,#fff 48% 52%,transparent 52%),linear-gradient(0deg,transparent 46%,#fff 46% 50%,transparent 50%),linear-gradient(30deg,transparent 60%,#fff 60% 63%,transparent 63%)}
.sr-carte .p{position:absolute;width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#EA4335}
.sr-carte .p1{left:22%;top:30%}.sr-carte .p2{left:70%;top:55%}
.sr-carte .p3{left:46%;top:22%;background:var(--orange);width:20px;height:20px;box-shadow:0 0 0 4px rgba(255,90,31,.25)}
.sr-res{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 12px;border-radius:10px;opacity:.5}
.sr-res b{color:#1A0DAB;font-weight:500;font-size:15px}
.sr-res span{grid-column:1;font-size:12px;color:#5A5550}
.sr-res em{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;width:32px;height:32px;border-radius:50%;background:#E8F0FE;color:#1A56C9;display:grid;place-items:center}
.sr-res.moi{opacity:1;background:#FFF1EA;box-shadow:inset 3px 0 0 var(--orange)}
@media (max-width:900px){
  .acc,[data-cp="4"] .acc{grid-template-columns:minmax(0,1fr);gap:28px}
  .acc-vis,[data-cp] .acc-vis{order:-1;margin:0!important;padding:22px!important;min-height:0!important;border-radius:20px!important}
  .acc-liste>button>span{font-size:24px}
  .acc-liste button{padding:16px}
  .nv-menu span{display:none}
  .nv-hero{height:160px}
}

/* Compris retenu (12/10) : défilement auto, sans numéros, illustration sans panneau */
.acc-liste button{grid-template-columns:1fr}
.acc-liste>button>p{grid-column:1}
[data-cp="3"] .acc-vis{background:none;padding:0;min-height:440px}
.ill{box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
@media (max-width:900px){
  .acc-vis,[data-cp] .acc-vis{order:2;padding:0!important;min-height:0!important;background:none!important}
  .acc{gap:24px}
}
@media (max-width:900px){.acc-v{place-items:start center}}

/* ===== Compris, retouches (12/10) ===== */
.cp-titre{text-align:center;margin-inline:auto;max-width:22ch}
.acc{max-width:1120px;margin:0 auto}
.acc-liste>button>span{font-weight:500}
.ill b,.ill strong{font-weight:500}
.dm-l b{font-weight:500}
.dm-ok{font-weight:500}
.sr-res b{font-weight:400}
/* le minuteur repart toujours de zéro */
.acc-liste button .barre::after{content:none}
.acc-liste button.auto .barre::after{content:"";position:absolute;inset:0;background:var(--orange);transform-origin:left;animation:remplit 5s linear forwards}
.acc-liste .barre{background:rgba(255,255,255,.08)}
/* nouvelle illustration du site */
.nv-menu em{display:flex;align-items:center;gap:5px;background:var(--orange)}
.nv-split{display:grid;grid-template-columns:1.1fr .9fr;min-height:210px}
.nv-txt{padding:22px 18px;display:flex;flex-direction:column;gap:9px;background:#FBF7F1}
.nv-txt small{font-size:11px;color:#6E6A64;display:flex;align-items:center;gap:4px}
.nv-txt small i{color:#E8A400}
.nv-txt strong{font-family:var(--titre);font-size:24px;line-height:1.05;letter-spacing:-.025em;color:#1A1208}
.nv-txt span{font-size:12px;line-height:1.4;color:#5A5550}
.nv-txt em{align-self:flex-start;margin-top:auto;font-style:normal;background:#1A1208;color:#fff;border-radius:99px;padding:8px 14px;font-size:12px;font-weight:500}
.nv-photo{background:#3a2c20 center/cover}
.nv-services{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #F0ECE6}
.nv-services span{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 6px;font-size:12px;color:#3A3530}
.nv-services span+span{border-left:1px solid #F0ECE6}
.nv-services i{color:var(--orange);font-size:15px}
/* mobile : l'illustration est rangée sous l'élément ouvert, dans le même bloc */
@media (max-width:900px){
  .acc-liste .acc-vis{order:0;margin:0 0 6px!important;padding:16px!important;background:var(--ink-2)!important;border-radius:0 0 16px 16px!important}
  .acc-liste button[aria-selected="true"]{border-radius:16px 16px 0 0}
  .acc-liste .acc-vis .ill{max-width:none;box-shadow:none}
  .acc-v{place-items:start stretch}
  .nv-split{grid-template-columns:1fr}
  .nv-photo{height:110px;order:-1}
  .nv-txt strong{font-size:21px}
}

.acc{align-items:start}
[data-cp="3"] .acc-vis{min-height:0;align-self:center}
.acc-v{align-items:center}
.acc-v:not(.on){visibility:hidden}
@media (max-width:900px){.acc-liste .acc-vis{display:block}.acc-v:not(.on){display:none}.acc-v.on{display:block}}

/* compris : desktop, l'illustration au centre de sa colonne ; mobile, copie sous l'élément ouvert */
.acc-vis{display:grid;grid-template:1fr/1fr;align-self:stretch}
.acc-v{display:flex!important;align-items:center;justify-content:center}
.acc-mob{display:none}
@media (max-width:900px){
  .acc-vis{display:none!important}
  .acc-mob.on{display:block;background:var(--ink-2);border-radius:0 0 16px 16px;padding:4px 16px 18px;margin:-4px 0 6px}
  .acc-mob .ill{max-width:none;box-shadow:none}
  .acc-liste button[aria-selected="true"]{border-radius:16px 16px 0 0}
}

.acc{grid-template-columns:minmax(0,440px) minmax(0,1fr)}
@media (max-width:900px){.acc{grid-template-columns:minmax(0,1fr)}}
.dev2{display:flex!important}
.nw{white-space:nowrap}

/* ===== Facture plus réaliste (12/10) ===== */
.recu .tete-f{display:flex;justify-content:space-between;align-items:center;height:auto;padding-bottom:6px}
.recu .tete-f .logo-r{display:block}
.recu .tete-f .logo-r svg{height:18px}
.recu .tete-f>span+span{text-align:right;font-size:11px;line-height:15px;color:#777}
.recu .l.note-f{height:auto;align-items:flex-start;gap:14px;font-size:11px;line-height:15px;color:#777;padding:6px 0 2px}
.recu .l.note-f span{white-space:normal}
.recu .l.note-f span+span{text-align:right;max-width:46%}
/* papier : fond légèrement chaud, ombre en couches, dents sans jour */
.recu{background:#FFFEFB;box-shadow:0 1px 1px rgba(0,0,0,.08),0 6px 12px -6px rgba(0,0,0,.35),0 26px 40px -24px rgba(0,0,0,.55)}
.recu::after{bottom:-9px;height:10px;background:#FFFEFB}
.recu::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.035),transparent 6%,transparent 94%,rgba(0,0,0,.035))}
/* le papier avance par à-coups, comme une vraie imprimante */
.recu{transition:transform 90ms cubic-bezier(.3,1.7,.5,1)}
.recu.detache{transform:translateY(4px) rotate(-3deg)!important;transition:transform .8s cubic-bezier(.2,1.5,.35,1)}
@media (max-width:900px){.recu.detache{transform:translateY(3px) rotate(-2deg)!important}}
@media (prefers-reduced-motion:reduce){.recu,.recu.detache{transition:none}}

/* ===== Header, 4 variantes (?hd=1..4) ===== */
.dev2 .sep-dev{margin-left:8px;border-left:1px solid rgba(255,255,255,.15);padding-left:14px}
.entete{position:relative;z-index:50}
.hd-logo .logo{height:26px}
.hd-menu{display:none;width:44px;height:44px;border-radius:50%;background:var(--gris);flex-direction:column;align-items:center;justify-content:center;gap:5px}
.hd-menu i{width:16px;height:1.5px;background:var(--ink);border-radius:2px}
.entete .d{display:flex;align-items:center;gap:20px}
/* A. Barre : fond blanc collant, filet discret quand on défile */
[data-hd="1"] .entete{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);transition:box-shadow .25s ease}
[data-hd="1"] .entete.defile{box-shadow:0 1px 0 rgba(20,17,14,.08)}
/* B. Pilule flottante : capsule centrée qui reste en haut */
[data-hd="2"] .entete{position:sticky;top:12px;height:64px;max-width:860px;margin:12px auto -76px;padding:0 8px 0 24px;border-radius:999px;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);box-shadow:0 0 0 1px rgba(20,17,14,.07),0 10px 30px -18px rgba(20,17,14,.45);grid-template-columns:auto 1fr auto}
[data-hd="2"] .hd-nav{justify-self:center}
[data-hd="2"] .entete .tel{display:none}
[data-hd="2"] .hero{padding-top:130px}
/* C. Menu : logo, téléphone en clair, bouton audit et bouton menu, pas de liens visibles */
[data-hd="3"] .entete{grid-template-columns:1fr auto}
[data-hd="3"] .hd-nav{display:none}
[data-hd="3"] .hd-menu{display:flex}
[data-hd="3"] .entete .tel span{display:inline}
[data-hd="3"] .entete .tel{font-size:16px}
/* D. Logo centré : liens à gauche, logo au milieu, actions à droite */
[data-hd="4"] .entete{grid-template-columns:1fr auto 1fr}
[data-hd="4"] .hd-logo{grid-column:2;grid-row:1}
[data-hd="4"] .hd-logo .logo{height:30px}
[data-hd="4"] .hd-nav{grid-column:1;grid-row:1;justify-self:start}
[data-hd="4"] .hd-nav a{padding-left:0}
[data-hd="4"] .entete .d{grid-column:3;grid-row:1;justify-self:end}
@media (max-width:900px){
  [data-hd] .entete{grid-template-columns:1fr auto}
  [data-hd] .hd-logo{grid-column:auto;grid-row:auto}
  [data-hd] .entete .d{grid-column:auto;grid-row:auto}
  [data-hd="2"] .entete{margin:8px 8px -72px;padding:0 6px 0 18px;height:58px}
  [data-hd="2"] .hero{padding-top:96px}
  [data-hd="3"] .entete .tel span{display:none}
  [data-hd="3"] .hd-menu{width:40px;height:40px}
}
[data-hd="3"] .entete,[data-hd="4"] .entete{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);transition:box-shadow .25s ease}
[data-hd="3"] .entete.defile,[data-hd="4"] .entete.defile{box-shadow:0 1px 0 rgba(20,17,14,.08)}
@media (max-width:900px){.dev2{top:auto;bottom:72px}}
@media (max-width:900px){[data-hd="3"] .entete .tel{display:none}.entete .d{gap:12px}}

/* ===== Barre d'en-tête, 4 variantes (?bar=1..4) ===== */
.hd-pastille{display:none}
.entete .hd-nav{position:relative}
/* 2. Liens à gauche, collés au logo, filet fin en permanence */
[data-bar="2"] .entete{grid-template-columns:auto 1fr auto;column-gap:40px;box-shadow:0 1px 0 rgba(20,17,14,.08)}
[data-bar="2"] .hd-nav{justify-self:start}
/* 3. Pastille qui glisse sous le lien survolé, bouton orange */
[data-bar="3"] .hd-pastille{display:block;position:absolute;left:0;top:50%;height:36px;margin-top:-18px;border-radius:99px;background:var(--gris);opacity:0;transition:transform .3s var(--ease),width .3s var(--ease),opacity .2s ease;z-index:-1}
[data-bar="3"] .hd-pastille.on{opacity:1}
[data-bar="3"] .hd-nav{isolation:isolate}
[data-bar="3"] .hd-nav a:hover{color:var(--ink)}
[data-bar="3"] .entete .btn.noir{background:var(--orange)}
[data-bar="3"] .entete .btn.noir .rond{color:var(--orange)}
/* 4. Se resserre au défilement : plus basse, logo plus petit, le numéro passe en avant */
[data-bar="4"] .entete{transition:height .3s var(--ease),box-shadow .25s ease}
[data-bar="4"] .entete .logo{transition:height .3s var(--ease)}
[data-bar="4"] .entete.defile{height:58px;box-shadow:0 1px 0 rgba(20,17,14,.08)}
[data-bar="4"] .entete.defile .logo{height:21px}
[data-bar="4"] .entete.defile .tel{color:var(--orange)}
[data-bar="4"] .entete.defile .btn{height:38px}
[data-bar="4"] .entete.defile .btn .rond{width:28px;height:28px}
@media (max-width:900px){[data-bar="2"] .entete{column-gap:12px}}

.dev2{display:none!important}

.recu{transition:transform 55ms cubic-bezier(.2,.9,.3,1)}
/* hero : même marge de 10 px autour de la photo et du ticket */
.hero{padding-bottom:10px}
.hero .media{margin-inline:calc(10px - var(--i));gap:10px}
@media (max-width:900px){.hero .media{margin-inline:calc(10px - var(--i))}}
/* le ticket monte un peu en s'inclinant quand il se détache */
.recu.detache{transform:translateY(-12px) rotate(-3deg)!important}
@media (max-width:900px){.recu.detache{transform:translateY(-8px) rotate(-2deg)!important}}

.dev2.on{display:flex!important}

/* header qui ne suit plus le défilement */
[data-hd] .entete{position:relative!important;top:auto!important;box-shadow:none!important}
/* facture : de la place au-dessus pour qu'elle puisse monter et pencher sans être coupée */
[data-imprimante="3"] .sortie{padding-top:48px;margin-top:-32px}
@media (max-width:900px){[data-imprimante="3"] .sortie{padding-top:44px;margin-top:-28px}}

/* ===== Bandeau défilant, 4 variantes (?tk=1..4) ===== */
.bandeau .piste span{gap:0;padding:0}
.bandeau .it{padding:0 26px}
.bandeau .sp{display:inline-grid;place-items:center;width:auto;height:auto;background:none;border-radius:0}
.bandeau .ic-r{width:22px;height:22px;opacity:.6}
.bandeau .p2{display:none}
/* 1. Orange, comme avant, avec l'icône facture entre les mots */
/* 2. Brun penché : bande sombre inclinée qui déborde, texte crème, icône orange */
[data-tk="2"] .bandeau{background:none;overflow:visible;margin-top:0;padding:40px 0;border-radius:0}
[data-tk="2"] .bandeau .piste:first-child{display:inline-flex;background:var(--ink);color:#F4F1EC;padding:20px 0;transform:rotate(-2.5deg);width:max-content;margin-left:-40px}
[data-tk="2"] .bandeau .ic-r{color:var(--orange);opacity:1}
/* 3. Croisés : une bande orange et une bande brune qui se croisent en sens inverse */
[data-tk="3"] .bandeau{background:none;overflow:hidden;margin-top:0;padding:70px 0;border-radius:0;position:relative}
[data-tk="3"] .bandeau .piste{display:inline-flex;padding:18px 0;width:max-content}
[data-tk="3"] .bandeau .piste:first-child{background:var(--orange);color:#fff;transform:rotate(-3deg);margin-left:-40px}
[data-tk="3"] .bandeau .p2{display:inline-flex;position:absolute;left:-40px;top:50%;margin-top:-30px;background:var(--ink);color:#F4F1EC;transform:rotate(3deg);animation-direction:reverse;z-index:-1}
[data-tk="3"] .bandeau .p2 .ic-r{color:var(--orange);opacity:1}
/* 4. Géant au trait : très grands mots en contour sur fond clair, défilement lent */
[data-tk="4"] .bandeau{background:none;color:var(--ink);margin-top:0;padding:56px 0;border-radius:0}
[data-tk="4"] .bandeau .piste{animation-duration:70s;font-family:var(--titre);font-size:clamp(56px,7vw,110px);font-weight:600;letter-spacing:-.03em;line-height:1}
[data-tk="4"] .bandeau .it{color:transparent;-webkit-text-stroke:1.5px var(--ink);padding:0 40px}
[data-tk="4"] .bandeau .it:nth-of-type(odd){color:var(--orange);-webkit-text-stroke:0}
[data-tk="4"] .bandeau .ic-r{width:.6em;height:.6em;opacity:1;color:var(--orange)}
@media (max-width:900px){.bandeau .it{padding:0 16px}[data-tk="2"] .bandeau .piste,[data-tk="3"] .bandeau .piste{font-size:17px}}
.bandeau .piste .it{padding:0 26px}
.bandeau .piste>span{display:inline-flex;align-items:center}
[data-tk="4"] .bandeau .piste .it{padding:0 40px}
[data-tk="3"] .bandeau .p2 .it,[data-tk="3"] .bandeau .piste .it{padding:0 22px}
@media (max-width:900px){.bandeau .piste .it{padding:0 16px}}
/* rotation par la propriété rotate pour ne pas se battre avec l'animation de défilement */
[data-tk="2"] .bandeau .piste:first-child{transform:none;rotate:-2.5deg}
[data-tk="3"] .bandeau{padding:90px 0}
[data-tk="3"] .bandeau .piste:first-child{transform:none;rotate:-3deg;position:relative;z-index:1}
[data-tk="3"] .bandeau .p2{transform:none;rotate:3deg;top:50%;margin-top:0;translate:0 -50%}
[data-tk="2"] .bandeau .piste:first-child,[data-tk="3"] .bandeau .piste{transform-origin:calc(50vw + 40px) 50%}

/* ===== Bandeau orange, 4 variantes (?tk=1,5,6,7) ===== */
/* 2. Grand : texte en grand, bande plus haute */
[data-tk="5"] .bandeau{padding-top:64px;padding-bottom:30px}
[data-tk="5"] .bandeau .piste:first-child{font-family:var(--titre);font-size:clamp(28px,3.4vw,46px);font-weight:500;letter-spacing:-.025em;animation-duration:55s}
[data-tk="5"] .bandeau .piste .it{padding:0 34px}
[data-tk="5"] .bandeau .ic-r{width:.75em;height:.75em;opacity:.55}
/* 3. Façon ticket : texte mono en capitales, encre sur orange, perforations en haut et en bas */
[data-tk="6"] .bandeau{color:var(--ink);padding-top:58px;padding-bottom:26px}
[data-tk="6"] .bandeau::before,[data-tk="6"] .bandeau::after{content:"";position:absolute;left:24px;right:24px;border-top:2px dashed rgba(20,17,14,.35)}
[data-tk="6"] .bandeau::before{top:40px}
[data-tk="6"] .bandeau::after{bottom:12px}
[data-tk="6"] .bandeau .piste:first-child{font:600 15px/1 "Geist Mono",monospace;letter-spacing:.14em;text-transform:uppercase}
[data-tk="6"] .bandeau .ic-r{opacity:.8}
/* 4. Deux rangs : un second rang plus petit défile en sens inverse */
[data-tk="7"] .bandeau{padding-bottom:18px}
[data-tk="7"] .bandeau .p2{display:inline-flex;margin-top:10px;font-size:15px;opacity:.7;animation-direction:reverse;animation-duration:55s}
[data-tk="7"] .bandeau .p2 .it{padding:0 18px}
[data-tk="7"] .bandeau .p2 .ic-r{width:15px;height:15px}
[data-tk="7"] .bandeau{display:flex;flex-direction:column}
.bandeau .piste i.sp{background:none;width:auto;height:auto;border-radius:0;display:inline-grid;place-items:center}

/* ===== Bandeau orange actuel, 4 déclinaisons (?tk=1,8,9,10) ===== */
/* 2. Point : un petit rond crème entre les mots */
[data-tk="8"] .bandeau .ic-r{display:none}
[data-tk="8"] .bandeau .piste i.sp::before{content:"";width:7px;height:7px;border-radius:50%;background:#FBF4EA}
/* 3. Coches : chaque mot précédé d'une coche, pas de séparateur */
[data-tk="9"] .bandeau .ic-r{display:none}
[data-tk="9"] .bandeau .piste i.sp{display:none}
[data-tk="9"] .bandeau .piste .it{padding:0 22px;display:inline-flex;align-items:center;gap:10px}
[data-tk="9"] .bandeau .piste .it::before{content:"";width:18px;height:18px;border-radius:50%;background:#FBF4EA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5A1F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;flex:none}
/* 4. Encre : texte et icônes en brun foncé sur l'orange */
[data-tk="10"] .bandeau{color:var(--ink)}
[data-tk="10"] .bandeau .ic-r{opacity:.75}

/* ===== Bandeau coches / icônes (?bd=1..4) ===== */
.bandeau .piste{animation-duration:60s}
.bandeau .piste .it{display:inline-flex;align-items:center;gap:12px;padding:0 26px}
.bandeau .piste .it::before{content:none!important}
.bandeau .coche{flex:none;width:20px;height:20px;border-radius:50%;background:#FBF4EA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5A1F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
.bandeau .it i.ph-bold{flex:none;width:34px;height:34px;border-radius:50%;background:#FBF4EA;color:var(--orange);display:grid;place-items:center;font-size:18px}
.bandeau[data-bd="3"] .it,.bandeau[data-bd="4"] .it{padding:0 34px}
@media (max-width:900px){.bandeau .it i.ph-bold{width:28px;height:28px;font-size:15px}.bandeau .piste .it{padding:0 16px}}

/* ===== Bandeau icônes, 4 styles (?ic=1..4) ===== */
/* 2. Icône seule, crème, sans fond */
.bandeau[data-ic="2"] .it i.ph-bold{background:none;color:#FBF4EA;width:auto;height:auto;font-size:24px}
/* 3. Carré brun arrondi, icône orange */
.bandeau[data-ic="3"] .it i.ph-bold{background:var(--ink);color:var(--orange);border-radius:10px}
/* 4. Pilules crème : chaque bénéfice dans sa pastille, texte brun */
.bandeau[data-ic="4"]{padding-bottom:16px}
.bandeau[data-ic="4"] .piste .it{background:#FBF4EA;color:var(--ink);border-radius:999px;padding:8px 20px 8px 8px;margin:0 7px;gap:10px}
.bandeau[data-ic="4"] .it i.ph-bold{background:var(--orange);color:#fff;width:32px;height:32px}
@media (max-width:900px){.bandeau[data-ic="4"] .piste .it{padding:6px 16px 6px 6px}}
.bandeau[data-ic="4"]{padding-bottom:26px}

/* ===== Pilules, 4 styles (?ic=4..7), centrées dans la partie orange visible ===== */
.bandeau[data-ic="4"],.bandeau[data-ic="5"],.bandeau[data-ic="6"],.bandeau[data-ic="7"]{padding-top:54px;padding-bottom:24px}
.bandeau[data-ic="5"] .piste .it,.bandeau[data-ic="6"] .piste .it,.bandeau[data-ic="7"] .piste .it{border-radius:999px;margin:0 7px;gap:10px}
/* 2. Crème, icône brune sans rond */
.bandeau[data-ic="5"] .piste .it{background:#FBF4EA;color:var(--ink);padding:12px 22px 12px 18px}
.bandeau[data-ic="5"] .it i.ph-bold{background:none;color:var(--ink);width:auto;height:auto;font-size:20px}
/* 3. Brunes : pastille brun foncé, texte crème, icône orange */
.bandeau[data-ic="6"] .piste .it{background:var(--ink);color:#FBF4EA;padding:8px 22px 8px 8px}
.bandeau[data-ic="6"] .it i.ph-bold{background:var(--orange);color:#fff;width:32px;height:32px}
/* 4. Contour : pastille au trait crème, texte blanc */
.bandeau[data-ic="7"] .piste .it{box-shadow:inset 0 0 0 1.5px rgba(251,244,234,.85);color:#fff;padding:12px 22px 12px 18px}
.bandeau[data-ic="7"] .it i.ph-bold{background:none;color:#FBF4EA;width:auto;height:auto;font-size:20px}
@media (max-width:900px){.bandeau[data-ic="5"] .piste .it,.bandeau[data-ic="7"] .piste .it{padding:9px 16px 9px 13px}.bandeau[data-ic="6"] .piste .it{padding:6px 16px 6px 6px}}
#compris{position:relative;z-index:1}

/* ===== Tarifs, 4 variantes (?tf=1..4), dans la largeur du contenu ===== */
#prix .w{max-width:1200px;margin:0 auto}
.tf{display:none;margin-top:56px}
[data-tf="1"] .tf1,[data-tf="2"] .tf2,[data-tf="3"] .tf3,[data-tf="4"] .tf4{display:grid}
.tf i.ph-bold{font-size:16px}
/* 1. Trois cartes : une page, trois à cinq pages en avant, options */
.tf1{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}
.tc{background:var(--gris);border-radius:var(--r-carte);padding:32px;display:flex;flex-direction:column;gap:8px;position:relative}
.tc-n{font-size:16px;color:var(--mute)}
.tc-p{font-family:var(--titre);font-size:64px;font-weight:600;letter-spacing:-.04em;line-height:1}
.tc-u{font-size:15px;color:var(--mute)}
.tc ul{list-style:none;display:grid;gap:12px;margin:24px 0 28px;font-size:16px;line-height:1.35}
.tc li{display:flex;gap:10px}
.tc li i{color:var(--orange);margin-top:2px}
.tc .btn{margin-top:auto;justify-content:space-between}
.tc.mis{background:var(--ink);color:#fff}
.tc.mis .tc-n,.tc.mis .tc-u{color:#B9B3AA}
.tc-badge{position:absolute;top:24px;right:24px;background:var(--orange);color:#fff;font-size:12px;font-weight:500;border-radius:99px;padding:5px 10px}
.tc-opt{display:grid;gap:4px;padding:18px 0;border-bottom:1px solid rgba(20,17,14,.1)}
.tc-opt b{font-family:var(--titre);font-size:34px;font-weight:600;letter-spacing:-.03em}
.tc-opt b small{font-size:16px;color:var(--mute);font-weight:500}
.tc-opt span{font-size:15px;color:var(--mute);line-height:1.35}
.tc-note{margin-top:auto;padding-top:20px;font-size:14px;color:var(--mute);line-height:1.4}
/* 2. Tableau comparatif */
.tf2{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px;align-items:start}
.tb{width:100%;border-collapse:separate;border-spacing:0;background:var(--gris);border-radius:var(--r-carte);overflow:hidden;font-size:16px}
.tb th,.tb td{padding:18px 24px;text-align:left;border-bottom:1px solid rgba(20,17,14,.08)}
.tb thead th{vertical-align:bottom;padding-top:28px}
.tb thead th span{display:block;font-weight:400;color:var(--mute);font-size:15px}
.tb thead th b{font-family:var(--titre);font-size:44px;font-weight:600;letter-spacing:-.04em}
.tb .mis{background:var(--ink);color:#fff}
.tb .mis span{color:#B9B3AA}
.tb tbody th{font-weight:400;color:var(--mute)}
.tb td i.ph-check{color:var(--orange)}
.tb td i.ph-minus{color:#B9B3AA}
.tb td:last-child{background:rgba(20,17,14,.03)}
.tb tfoot th,.tb tfoot td{border:0;font-weight:500}
.tb-cote{display:grid;gap:12px}
.tb-cote div{background:var(--gris);border-radius:var(--r-carte);padding:26px;display:grid;gap:4px}
.tb-cote b{font-family:var(--titre);font-size:32px;font-weight:600;letter-spacing:-.03em}
.tb-cote span{color:var(--mute)}
.tb-cote p{font-size:14px;color:var(--mute);line-height:1.4;padding:4px 8px}
/* 3. Calculateur : on compose, le total suit */
.tf3{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:12px}
.sm-g{background:var(--gris);border-radius:var(--r-carte);padding:32px;display:grid;gap:14px;align-content:start}
.sm-choix{display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:16px;padding:6px;gap:6px}
.sm-choix button{height:56px;border-radius:12px;font-family:var(--titre);font-weight:500;font-size:17px;color:var(--mute);transition:background-color .2s ease,color .2s ease}
.sm-choix button[aria-checked="true"]{background:var(--ink);color:#fff}
.sm-opt{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:#fff;border-radius:16px;padding:18px 20px;cursor:pointer;font-size:16px;line-height:1.35}
.sm-opt input{width:22px;height:22px;accent-color:var(--orange)}
.sm-opt em{font-style:normal;font-weight:600;white-space:nowrap}
.sm-note{font-size:14px;color:var(--mute);line-height:1.4;padding:4px}
.sm-d{background:var(--ink);color:#fff;border-radius:var(--r-carte);padding:36px;display:flex;flex-direction:column;gap:6px}
.sm-l{color:#B9B3AA;font-size:16px}
.sm-t{font-family:var(--titre);font-size:clamp(72px,7vw,110px);font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.sm-u{color:#B9B3AA}
.sm-m{color:var(--orange);font-weight:500;min-height:1.4em;margin-top:6px}
.sm-d .btn{margin-top:auto;justify-content:space-between}
/* 4. Ardoise : à gauche ce qu'on paie et ce qu'on ne paie pas, à droite les prix alignés comme sur une carte */
.tf4{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.ar-g h3{font-size:26px;font-weight:500;letter-spacing:-.02em}
.ar-g p{color:var(--mute);font-size:17px;line-height:1.5;margin-top:10px}
.ar-g .ar-non{margin-top:36px}
.ar-d{display:grid;border-top:1.5px solid var(--ink)}
.ar-l{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:baseline;padding:24px 0;border-bottom:1px solid rgba(20,17,14,.12)}
.ar-l span{display:grid;gap:4px}
.ar-l b{font-family:var(--titre);font-size:26px;font-weight:500;letter-spacing:-.02em}
.ar-l small{font-size:15px;color:var(--mute)}
.ar-l i{border-bottom:2px dotted rgba(20,17,14,.25);align-self:end;margin-bottom:8px}
.ar-l em{font-style:normal;font-family:var(--titre);font-size:40px;font-weight:600;letter-spacing:-.04em;color:var(--orange)}
.ar-l.opt em{font-size:28px;color:var(--ink)}
@media (max-width:900px){
  .tf1,.tf2,.tf3,.tf4{grid-template-columns:minmax(0,1fr);gap:12px}
  .tc{padding:26px}.tc-p{font-size:52px}
  .tb th,.tb td{padding:14px 12px;font-size:14px}.tb thead th b{font-size:30px}
  .sm-g,.sm-d{padding:22px}.sm-opt{grid-template-columns:auto 1fr;}.sm-opt em{grid-column:2}
  .tf4{gap:32px}.ar-l{grid-template-columns:1fr auto}.ar-l i{display:none}.ar-l em{font-size:30px}
}
.ar-l{grid-template-columns:auto 1fr auto;align-items:end}.ar-l i{margin-bottom:12px}

/* ===== Tarifs v2 : ce qu'un artisan paie vraiment (?tg=1..4) ===== */
.tf{display:none!important}
.tg{display:none;margin-top:56px}
[data-tg="1"] .tg1,[data-tg="2"] .tg2,[data-tg="3"] .tg3,[data-tg="4"] .tg4{display:grid}
.tg i.ph-check{color:var(--orange)}
.tg i.ph-x{color:#B9B3AA}
/* 1. Coût réel par année */
.tg1{gap:14px;justify-items:center}
.cr-choix{display:inline-grid;grid-template-columns:1fr 1fr;background:var(--gris);border-radius:999px;padding:5px;gap:4px}
.cr-choix button{height:48px;padding:0 24px;border-radius:999px;font-family:var(--titre);font-weight:500;font-size:16px;color:var(--mute);transition:background-color .2s ease,color .2s ease}
.cr-choix button[aria-checked="true"]{background:var(--ink);color:#fff}
.cr-ans{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.cr-an{background:var(--gris);border-radius:var(--r-carte);padding:30px;display:flex;flex-direction:column;gap:10px}
.cr-an:first-child{background:var(--ink);color:#fff}
.cr-q{font-size:15px;color:var(--mute)}
.cr-an:first-child .cr-q,.cr-an:first-child .cr-d{color:#B9B3AA}
.cr-v{font-family:var(--titre);font-size:56px;font-weight:600;letter-spacing:-.04em;line-height:1}
.cr-v small{font-size:20px;color:var(--mute);font-weight:500}
.cr-an:first-child .cr-v{color:var(--orange)}
.cr-d{font-size:15px;color:var(--mute);line-height:1.4}
.cr-tot{font-size:18px;margin-top:10px;text-align:center}
.cr-tot b{font-weight:600}
/* 2. Comme un devis */
.tg2{justify-items:center}
.dv{width:100%;max-width:960px;background:#fff;border-radius:6px;box-shadow:0 0 0 1px rgba(20,17,14,.08),0 30px 60px -36px rgba(20,17,14,.5);padding:44px 48px}
.dv-t{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:22px;border-bottom:2px solid var(--ink)}
.dv-t b{display:block;font-family:var(--titre);font-size:34px;font-weight:600;letter-spacing:-.03em}
.dv-t span{color:var(--mute);font-size:15px}
.dv-n{text-align:right;display:grid;font:500 13px/1.6 "Geist Mono",monospace;color:var(--mute)}
.dv-tb{width:100%;border-collapse:collapse;margin-top:8px;font-size:16px}
.dv-tb th{font:500 12px "Geist Mono",monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);text-align:left;padding:16px 10px}
.dv-tb th:not(:first-child),.dv-tb td:not(:first-child){text-align:center;width:130px}
.dv-tb td{padding:15px 10px;border-top:1px solid rgba(20,17,14,.08)}
.dv-tot td{border-top:2px solid var(--ink);font-family:var(--titre);font-size:28px;font-weight:600;letter-spacing:-.03em;padding-top:20px}
.dv-tot td:first-child{font-size:17px;font-family:var(--texte);font-weight:500;letter-spacing:0}
.dv-pied{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:26px;padding-top:22px;border-top:1px dashed rgba(20,17,14,.25);font-size:15px;line-height:1.45}
.dv-pied b{display:block;margin-bottom:4px}
.dv-pied span{color:var(--mute)}
/* 3. Compris, pas compris */
.tg3{grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr);gap:12px}
.cp-prix{background:var(--ink);color:#fff;border-radius:var(--r-carte);padding:32px;display:grid;gap:22px;align-content:start}
.cp-prix span{color:#B9B3AA;font-size:15px}
.cp-prix b{display:block;font-family:var(--titre);font-size:56px;font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--orange)}
.cp-prix p{color:#B9B3AA}
.cp-col{background:var(--gris);border-radius:var(--r-carte);padding:32px}
.cp-col h3{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:500;letter-spacing:-.02em}
.cp-col ul{list-style:none;display:grid;gap:12px;margin-top:18px;font-size:16px;line-height:1.4}
.cp-col li{padding-left:16px;position:relative}
.cp-col li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.35}
.cp-part{margin-top:30px;font-size:18px!important;color:var(--mute)}
/* 4. Les questions */
.tg4{max-width:900px;margin-left:auto;margin-right:auto}
.qa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:40px;padding:28px 0;border-top:1px solid rgba(20,17,14,.12)}
.qa:last-child{border-bottom:1px solid rgba(20,17,14,.12)}
.qa h3{font-size:24px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.qa p{font-size:18px;line-height:1.5;color:var(--mute)}
@media (max-width:900px){
  .cr-ans,.tg3{grid-template-columns:minmax(0,1fr)}
  .cr-v{font-size:44px}
  .dv{padding:24px 18px}.dv-tb{font-size:13px}.dv-tb th:not(:first-child),.dv-tb td:not(:first-child){width:62px}.dv-tot td{font-size:20px}.dv-pied{grid-template-columns:1fr}
  .qa{grid-template-columns:1fr;gap:10px}
}

/* ===== Tarifs v3 : base, options à prix fixe, sur mesure (?th=1..4) ===== */
.tg{display:none!important}
.th{display:none;margin-top:56px}
[data-th="1"] .th1,[data-th="2"] .th2,[data-th="3"] .th3,[data-th="4"] .th4{display:grid}
.th i.ph-check{color:var(--orange);flex:none;margin-top:2px}
.th-apart,.cf-d p,.dc-g p,.dv-pd{font-size:14px;line-height:1.45;color:var(--mute)}
/* lignes d'option communes */
.ol,.dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;padding:18px 0;border-top:1px solid rgba(20,17,14,.1)}
.ol span,.dl span{display:grid;gap:3px}
.ol b,.dl b{font-weight:500;font-size:17px}
.ol small,.dl small{color:var(--mute);font-size:14px;line-height:1.35}
.ol em,.dl em{font-style:normal;font-family:var(--titre);font-weight:600;font-size:22px;letter-spacing:-.02em;white-space:nowrap}
.sd em{font-family:var(--texte);font-size:13px;font-weight:500;background:var(--ink);color:#fff;border-radius:99px;padding:6px 12px;letter-spacing:0}
/* 1. Trois étages */
.th1{gap:12px}
.et{background:var(--gris);border-radius:var(--r-carte);padding:30px 32px 14px}
.et-base{background:var(--ink);color:#fff;padding-bottom:30px}
.et-t{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding-bottom:12px}
.et-n{width:40px;height:40px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-family:var(--titre);font-weight:600}
.et-t h3{font-size:26px;font-weight:500;letter-spacing:-.02em}
.et-t p{color:var(--mute);font-size:15px;margin-top:2px}
.et-base .et-t p{color:#B9B3AA}
.et-p{font-family:var(--titre);font-size:52px;font-weight:600;letter-spacing:-.04em;color:var(--orange);line-height:1;text-align:right}
.et-p small{display:block;font-size:14px;color:#B9B3AA;font-weight:400;letter-spacing:0;margin-top:4px}
.et-inc{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 32px;margin-top:14px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:16px}
.et-inc li{display:flex;gap:10px}
.th-apart{text-align:center;margin-top:8px}
/* 2. À composer */
.th2{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:12px;align-items:start}
.cf-g{display:grid;gap:10px}
.cf-base{background:var(--ink);color:#fff;border-radius:var(--r-carte);padding:28px 30px;display:grid;grid-template-columns:1fr auto;gap:20px}
.cf-base h3{font-size:24px;font-weight:500}
.cf-base ul{list-style:none;display:grid;gap:9px;margin-top:14px;font-size:15px}
.cf-base li{display:flex;gap:10px}
.cf-base>b{font-family:var(--titre);font-size:44px;font-weight:600;letter-spacing:-.04em;color:var(--orange)}
.cf-lab{font-size:14px;color:var(--mute);margin:14px 4px 0}
.cf-o{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;background:var(--gris);border-radius:18px;padding:18px 20px;cursor:pointer;transition:background-color .2s ease}
.cf-o:has(input:checked){background:#FFE7DC}
.cf-o input{width:22px;height:22px;accent-color:var(--orange)}
.cf-o span{display:grid;gap:3px}.cf-o b{font-weight:500}.cf-o small{color:var(--mute);font-size:14px}
.cf-o em{font-style:normal;font-weight:600;white-space:nowrap}
.cf-o.sd em{font-weight:500;font-size:13px;background:var(--ink);color:#fff;border-radius:99px;padding:6px 12px}
.cf-d{position:sticky;top:20px;background:var(--ink);color:#fff;border-radius:var(--r-carte);padding:32px;display:flex;flex-direction:column;gap:6px}
.cf-l,.cf-u{color:#B9B3AA}
.cf-t{font-family:var(--titre);font-size:clamp(64px,6vw,96px);font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.cf-m,.cf-dv{color:var(--orange);font-weight:500}
.cf-d p{color:#8D8780;margin:14px 0 20px}
.cf-d .btn{justify-content:space-between}
/* 3. Devis */
.th3{justify-items:center}
.dv2{max-width:900px}
.dv-s{display:flex;justify-content:space-between;align-items:baseline;margin-top:26px;padding-bottom:10px;border-bottom:2px solid var(--ink);font:600 12px/1 "Geist Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
.dv-s em{font-style:normal;font-family:var(--titre);font-size:30px;letter-spacing:-.03em;text-transform:none;color:var(--orange)}
.dv-inc{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;padding:16px 0 4px;font-size:16px}
.dv-inc li{display:flex;gap:10px}
.dv2 .dl{padding:15px 0}
.dv-pd{margin-top:22px;padding-top:16px;border-top:1px dashed rgba(20,17,14,.25)}
/* 4. Base et ajouts */
.th4{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;align-items:stretch}
.dc-g{background:var(--ink);color:#fff;border-radius:var(--r-carte);padding:34px;display:flex;flex-direction:column}
.dc-k{font:600 12px/1 "Geist Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}
.dc-p{font-family:var(--titre);font-size:76px;font-weight:600;letter-spacing:-.05em;line-height:1;margin-top:16px}
.dc-u{color:#B9B3AA;margin-top:6px}
.dc-g ul{list-style:none;display:grid;gap:12px;margin:28px 0;font-size:16px}
.dc-g li{display:flex;gap:10px}
.dc-g p{color:#8D8780;margin-top:auto}
.dc-d{background:var(--gris);border-radius:var(--r-carte);padding:34px}
.dc-d .dc-k{display:block;margin-bottom:12px}
.dc-lien{display:inline-block;margin-top:22px;font-weight:500;border-bottom:1.5px solid var(--orange);padding-bottom:2px}
@media (max-width:900px){
  .th2,.th4{grid-template-columns:minmax(0,1fr)}
  .et{padding:24px 20px 10px}.et-t{grid-template-columns:auto 1fr}.et-p{grid-column:1/-1;text-align:left;font-size:44px}.et-inc,.dv-inc{grid-template-columns:1fr}
  .cf-base{grid-template-columns:1fr}.cf-d{position:static}
  .ol em,.dl em{font-size:18px}
  .dc-g,.dc-d{padding:24px}.dc-p{font-size:60px}
}
@media (max-width:900px){.sd em{font-size:12px}}

/* 5. Base et ajouts à cocher : la base affiche le total */
[data-th="5"] .th5{display:grid}
.th5{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;align-items:stretch}
.th5 .dc-p{font-variant-numeric:tabular-nums}
.dc-m{color:var(--orange);font-weight:500;margin-top:6px}
.dc-m:empty{display:none}
.dcx{grid-template-columns:auto minmax(0,1fr) auto!important;cursor:pointer;border-radius:12px;padding-left:10px!important;padding-right:10px!important;transition:background-color .2s ease}
.dcx input{width:22px;height:22px;accent-color:var(--orange)}
.dcx:has(input:checked){background:#FFE7DC}
@media (max-width:900px){.th5{grid-template-columns:minmax(0,1fr)}.th5 .dc-g{position:sticky;top:8px;z-index:2}.th5 .dc-g ul,.th5 .dc-g p{display:none}}

/* ===== Base et ajouts, 4 variantes (?th=5..8) ===== */
[data-th="6"] .th6,[data-th="7"] .th7,[data-th="8"] .th8{display:grid}
.oic{display:none}
.tk-apart{font-size:14px;line-height:1.45;color:var(--mute);margin-top:14px}
/* 2. Le ticket qui s'allonge */
.th6{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px;align-items:start}
.tk-g{position:sticky;top:20px}
.tk-r{box-shadow:0 1px 1px rgba(0,0,0,.06),0 20px 40px -24px rgba(0,0,0,.45);transform:rotate(-1.5deg);margin:8px 6px 0}
.tk-r .tk-mois:empty,.tk-r .tk-dv:empty{display:none}
.tk-r .nouv{animation:imprimeLigne .35s linear}
@keyframes imprimeLigne{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.th6 .dc-d{background:var(--gris)}
.tk-inc{list-style:none;display:grid;gap:10px;font-size:15px;margin-top:6px}
.tk-inc li{display:flex;gap:10px}
/* 3. Tuiles */
.th7{gap:12px}
.tu-base{background:var(--ink);color:#fff;border-radius:var(--r-carte);padding:28px 32px}
.tu-base ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:14px;font-size:15px}
.tu-base li{display:flex;gap:8px}
.tu-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.tu{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--gris);border-radius:22px;padding:24px;cursor:pointer;min-height:220px;transition:background-color .2s ease,box-shadow .2s ease}
.tu input{position:absolute;top:18px;right:18px;width:22px;height:22px;accent-color:var(--orange)}
.tu .oic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#fff;color:var(--orange);font-size:22px}
.tu span{display:grid;gap:4px}.tu b{font-weight:500;font-size:17px}.tu small{color:var(--mute);font-size:14px;line-height:1.35}
.tu em{margin-top:auto;font-style:normal;font-family:var(--titre);font-weight:600;font-size:22px}
.tu.sd em{font-family:var(--texte);font-size:13px;font-weight:500;align-self:flex-start;background:var(--ink);color:#fff;border-radius:99px;padding:6px 12px}
.tu:has(input:checked){background:#FFE7DC;box-shadow:inset 0 0 0 2px var(--orange)}
.tu-barre{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--ink);color:#fff;border-radius:999px;padding:12px 12px 12px 30px;position:sticky;bottom:16px;z-index:5}
.tu-barre>span:first-child,.tu-u{color:#B9B3AA}
.tu-barre .cmp-p{font-family:var(--titre);font-size:34px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tu-barre .cmp-m,.tu-barre .cmp-d{color:var(--orange);font-size:14px}
.tu-barre .btn{margin-left:auto}
/* 4. Par besoin */
.th8{gap:12px;max-width:900px;margin-left:auto;margin-right:auto}
.bs-base{background:var(--ink);color:#fff;border-radius:var(--r-carte);padding:28px 32px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.bs-base p{color:#B9B3AA;font-size:15px;line-height:1.5;margin-top:10px}
.bs-base>b{font-family:var(--titre);font-size:48px;font-weight:600;letter-spacing:-.04em;color:var(--orange)}
.bs-g{background:var(--gris);border-radius:var(--r-carte);padding:22px 28px 10px}
.bs-g h3{font-size:20px;font-weight:500;letter-spacing:-.01em;padding-bottom:6px}
.bs-tot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border:1.5px solid var(--ink);border-radius:var(--r-carte);padding:24px 28px}
.bs-tot>div{display:grid;gap:2px}
.bs-tot>div>span:first-child{color:var(--mute);font-size:15px}
.bs-tot .cmp-p{font-family:var(--titre);font-size:52px;font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.bs-tot .cmp-m,.bs-tot .cmp-d{color:var(--orange);font-weight:500;font-size:14px}
.cmp-m:empty,.cmp-d:empty{display:none}
@media (max-width:900px){
  .th6{grid-template-columns:minmax(0,1fr);gap:20px}.tk-g{position:static}
  .tu-barre{border-radius:22px;padding:18px}.tu-barre .btn{margin-left:0;width:100%;justify-content:space-between}
  .bs-base{grid-template-columns:1fr}.bs-g{padding:18px 18px 6px}.bs-tot .btn{width:100%;justify-content:space-between}
}
@media (max-width:900px){.tu-barre{position:static}}

/* ===== Ticket qui s'allonge, mise en page de « base et ajouts » (?th=9..12) ===== */
[data-th="9"] .th9,[data-th="10"] .th10,[data-th="11"] .th11,[data-th="12"] .th12{display:grid}
.th9,.th10,.th11,.th12{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;align-items:stretch}
.th9 .dc-g,.th10 .dc-g,.th11 .dc-g,.th12 .dc-g{gap:0}
.dc-g .tk-inc li{color:#E9E4DC}
.dc-g .tk-inc{margin-top:26px}
.tk-r .nouv{animation:imprimeLigne .35s linear}
/* 1. Ticket blanc posé dans la carte brune */
.tk1 .tk-r{margin-top:18px;transform:rotate(-1.5deg)}
/* 2. Ticket sombre : mêmes lignes, en mono crème sur brun */
.tk-dark{margin-top:18px;font:400 14px/24px "Geist Mono",monospace;color:#E9E4DC;border-top:1px dashed rgba(255,255,255,.25);padding-top:12px}
.tk-dark .l{display:flex;justify-content:space-between}
.tk-dark .sep{height:14px;border-bottom:1px dashed rgba(255,255,255,.25);margin-bottom:14px}
.tk-dark .l.o{color:var(--orange)}
.tk-big{display:grid;gap:2px}
.tk-big .cmp-p{font-family:var(--titre);font-size:72px;font-weight:600;letter-spacing:-.05em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.tk-big span{color:#B9B3AA;font-family:var(--texte)}
/* 3. Le ticket sort d'une fente en haut de la carte */
.tk3{padding:30px 30px 0!important;overflow:hidden}
.tk3-tete{display:flex;justify-content:space-between;align-items:baseline}
.tk3-tete .cmp-p{font-family:var(--titre);font-size:48px;font-weight:600;letter-spacing:-.04em;color:var(--orange);font-variant-numeric:tabular-nums}
.tk3-fente{height:10px;border-radius:5px;background:#050403;box-shadow:0 1px 0 rgba(255,255,255,.12);margin:18px -6px 0}
.tk3-sortie{padding:0 16px;margin-top:-5px;position:relative}
.tk3-sortie .tk-r{transform:none}
/* 4. Inclus d'abord, le ticket en bas de la carte */
.tk4 .tk-inc{margin-top:16px}
.tk4-r{margin-top:auto;padding-top:24px}
.tk4-r .tk-r{transform:rotate(1deg)}
.tk-mois:empty{display:none}
/* Bloc hébergement, bien visible */
.heb{display:none;margin-top:12px;background:#FFF1EA;border:1.5px solid var(--orange);border-radius:var(--r-carte);padding:30px 32px;gap:24px}
[data-th="9"] .heb,[data-th="10"] .heb,[data-th="11"] .heb,[data-th="12"] .heb{display:grid}
.heb-t{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.heb-t>i{width:48px;height:48px;border-radius:14px;background:var(--orange);color:#fff;display:grid;place-items:center;font-size:22px}
.heb-t h3{font-size:24px;font-weight:500;letter-spacing:-.02em}
.heb-t p{font-size:17px;line-height:1.5;color:#4D4842;margin-top:6px;max-width:68ch}
.heb-p{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.heb-p div{background:#fff;border-radius:16px;padding:18px 20px;display:grid;gap:6px}
.heb-p b{font-weight:500}
.heb-p span{font-size:15px;color:var(--mute);line-height:1.4}
@media (max-width:900px){.th9,.th10,.th11,.th12{grid-template-columns:minmax(0,1fr)}.heb{padding:22px}.heb-p{grid-template-columns:1fr}.tk-big .cmp-p{font-size:56px}}

/* ===== Inclus puis ticket qui sort (?th=13..16) ===== */
[data-th="13"] .th13,[data-th="14"] .th14,[data-th="15"] .th15,[data-th="16"] .th16{display:grid}
[data-th="13"] .heb,[data-th="14"] .heb,[data-th="15"] .heb,[data-th="16"] .heb{display:grid}
.ps{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;align-items:stretch}
.ps-c{display:flex;flex-direction:column;overflow:hidden;padding-bottom:0!important}
.ps-c .tk-inc{margin-top:16px}
.ps-imp{margin-top:auto;padding-top:28px;display:flex;flex-direction:column}
.ps-sortie{position:relative;height:0;overflow:hidden;margin:0 18px;z-index:1}
.ps-sortie .ps-r{position:absolute;left:0;right:0;margin:0}
.ps-sortie[data-dir="up"] .ps-r{bottom:0}
.ps-sortie[data-dir="down"] .ps-r{top:0}
.ps-r .nouv{animation:none}
.ps-fente{height:12px;border-radius:6px;background:#050403;box-shadow:inset 0 3px 4px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.12);margin:0 -6px;position:relative;z-index:2;flex:none}
/* 1. Monte d'une fente en bas de la carte */
.ps13 .ps-imp{padding-bottom:30px}
.ps13 .ps-sortie{margin-bottom:-6px}
/* 2. Descend d'une fente placée sous la liste */
.ps14 .ps-imp{margin-top:28px;padding-top:0}
.ps14 .ps-sortie{margin-top:-6px;margin-bottom:30px}
/* 3. Imprimante gravée : socle plus clair sous la fente, comme dans le hero */
.ps15 .ps-sortie,.ps16 .ps-sortie{margin-bottom:-6px}
.ps-machine{height:84px;margin:0 -30px;background:#2A241F;display:grid;place-items:center;font:600 12px/1 "Geist Mono",monospace;letter-spacing:.35em;color:rgba(255,255,255,.22)}
.ps15 .ps-fente,.ps16 .ps-fente{margin:0 -30px;border-radius:0;height:10px}
/* 4. Pareil, puis le ticket se détache et penche une fois imprimé */
.ps16 .ps-sortie{overflow:visible;clip-path:inset(-60px -40px 0 -40px)}
.ps16 .ps-r{transition:transform .7s cubic-bezier(.2,1.5,.35,1)}
.ps16.detache .ps-r{transform:translateY(-10px) rotate(-3deg)!important}
@media (max-width:900px){.ps{grid-template-columns:minmax(0,1fr)}.ps-sortie{margin:0 6px}.ps-machine,.ps15 .ps-fente,.ps16 .ps-fente{margin-left:-24px;margin-right:-24px}}
@media (prefers-reduced-motion:reduce){.ps16 .ps-r{transition:none}}

.heb2{grid-template-columns:auto 1fr;align-items:center;gap:16px;padding:20px 24px}
.heb2>i{width:44px;height:44px;border-radius:12px;background:var(--orange);color:#fff;display:grid;place-items:center;font-size:20px}
.heb2 p{display:grid;gap:2px}
.heb2 b{font-weight:500;font-size:18px}
.heb2 span{color:#4D4842;font-size:15px}

/* ===== Tarifs retenus : inclus, puis le ticket qui descend de la fente ===== */
.th14.on,.ps.on{display:grid!important}
.heb{display:grid!important}
.ps14.ps-c{overflow:visible;position:relative;z-index:3}
.ps14 .ps-imp{margin-top:28px;padding-top:0;position:relative;flex:1;min-height:120px}
.ps14 .ps-sortie{position:absolute;left:18px;right:18px;top:6px;height:auto;margin:0;overflow:visible;clip-path:inset(0 -60px -2000px -60px)}
.ps14 .ps-sortie .ps-r{position:relative;top:auto;bottom:auto;box-shadow:0 1px 1px rgba(0,0,0,.08),0 18px 30px -18px rgba(0,0,0,.6)}
.ps14 .ps-fente{position:relative;z-index:4}
/* Hébergement expliqué */
.heb3{grid-template-columns:auto 1fr;gap:20px;align-items:start;padding:28px 32px;margin-top:40px}
.heb-ic{width:48px;height:48px;border-radius:14px;background:var(--orange);color:#fff;display:grid;place-items:center;font-size:22px}
.heb-txt h3{font-size:22px;font-weight:500;letter-spacing:-.02em}
.heb-txt>p{font-size:16px;line-height:1.5;color:#4D4842;margin-top:8px;max-width:70ch}
.heb-txt ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;font-size:15px;font-weight:500}
.heb-txt li{display:flex;gap:8px;align-items:center}
.heb-txt li i{color:var(--orange)}
.heb-aide{font-size:15px;color:var(--mute);margin-top:14px}
@media (max-width:900px){
  .ps14 .ps-imp{min-height:420px}
  .ps14 .ps-sortie{left:8px;right:8px}
  .heb3{grid-template-columns:1fr;padding:22px;gap:14px}
  .heb-txt ul{flex-direction:column}
}
.recu>.tk-lignes{min-height:0}.recu>.tk-lignes>.l{min-height:24px}

/* ===== Bloc hébergement, 4 variantes (?hb=1..4) ===== */
.heb{display:none!important}
.hb{display:none;margin-top:40px}
[data-hb="1"] .hb1,[data-hb="2"] .hb2,[data-hb="3"] .hb3,[data-hb="4"] .hb4{display:grid}
.hb h3{font-size:24px;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.hb p{font-size:16px;line-height:1.55;color:#4D4842}
.hb i.ph-check{color:var(--orange)}
/* 1. Direct */
.hb1{grid-template-columns:auto 1fr;gap:20px;background:var(--gris);border-radius:var(--r-carte);padding:30px 32px}
.hb-ic{width:48px;height:48px;border-radius:14px;background:#fff;color:var(--orange);display:grid;place-items:center;font-size:22px}
.hb1 p{margin-top:8px;max-width:70ch}
.hb1 ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;font-weight:500;font-size:15px}
.hb1 li{display:flex;gap:8px;align-items:center}
.hb-aide{color:var(--mute)!important;font-size:15px!important}
/* 2. Question */
.hb2{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;padding:36px 0;border-top:1.5px solid var(--ink);border-bottom:1px solid rgba(20,17,14,.12)}
.hb2 h3{font-size:32px}
.hb2 .hb-r{display:grid;gap:14px}
.hb2 b{font-weight:600;color:var(--ink)}
/* 3. Propriété */
.hb3{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:36px;background:var(--ink);color:#fff;border-radius:var(--r-carte);padding:36px}
.hb3-g>i{width:48px;height:48px;border-radius:14px;background:var(--orange);color:#fff;display:grid;place-items:center;font-size:22px;margin-bottom:18px}
.hb3 p{color:#B9B3AA;margin-top:10px}
.hb3 ul{list-style:none;display:grid;gap:10px;align-content:center}
.hb3 li{background:var(--ink-3);border-radius:14px;padding:14px 18px;font-size:15px;color:#B9B3AA;display:grid;gap:2px}
.hb3 li b{color:#fff;font-weight:500;font-size:16px}
/* 4. Une ligne */
.hb4{grid-template-columns:auto 1fr auto;gap:16px;align-items:center;background:var(--gris);border-radius:18px;padding:18px 22px}
.hb4>i{font-size:22px;color:var(--orange)}
.hb4 p{font-size:15px}
.hb4 b{font-weight:500;color:var(--ink)}
.hb4-p{font-family:var(--titre);font-weight:600;font-size:20px;white-space:nowrap}
/* ===== Tarifs sur mobile : dock collé en bas, le ticket monte de la fente ===== */
.ps-dock{display:none}
@media (max-width:900px){
  .hb1,.hb2,.hb3{grid-template-columns:minmax(0,1fr);gap:16px;padding:24px}
  .hb2{padding:24px 0}.hb2 h3{font-size:26px}
  .hb4{grid-template-columns:auto 1fr}.hb4-p{display:none}
  .ps-dock{display:block;position:sticky;bottom:10px;z-index:6;grid-column:1/-1;background:var(--ink);border-radius:22px;padding:0 14px 14px;margin-top:12px;color:#fff}
  .ps-dock-t{display:flex;justify-content:space-between;align-items:baseline;padding-top:14px;font-size:14px;color:#B9B3AA}
  .ps-dock-t b{font-family:var(--titre);font-size:28px;font-weight:600;color:var(--orange);letter-spacing:-.03em}
  .ps-dock .ps-imp{margin:0;min-height:0;display:flex;flex-direction:column-reverse}
  .ps-dock .ps-fente{margin:10px -6px 0;order:-1}
  .ps-dock .ps-sortie{position:absolute;left:24px;right:24px;bottom:calc(100% - 64px);top:auto;height:auto;overflow:hidden;max-height:150px;clip-path:none;display:flex;flex-direction:column;justify-content:flex-end;margin:0}
  .ps-dock .ps-sortie .ps-r{position:relative}
  .ps-dock .ps-r .recu,.ps-dock .ps-r{font-size:11px;line-height:20px}
  .ps14 .ps-imp{min-height:0}
}
@media (max-width:900px){
  .dev2{top:8px;bottom:auto}
  .ps-dock{padding:0 16px 14px}
  .ps-dock .ps-imp{display:block;position:static}
  .ps-dock .ps-fente{margin:0 -16px;border-radius:0 0 6px 6px;height:10px}
  .ps-dock .ps-sortie{left:28px;right:28px;bottom:calc(100% - 5px);max-height:170px}
  .ps-dock-t{order:2}
  .ps-dock{display:flex;flex-direction:column}
  .ps-dock .ps-imp{order:1}
}
@media (max-width:900px){.ps-dock .ps-sortie{max-height:130px}}

/* ===== Question « Et après, qu'est-ce que je paie ? », 4 variantes (?hb=2,5,6,7) ===== */
[data-hb="5"] .hb5,[data-hb="6"] .hb6,[data-hb="7"] .hb7{display:grid}
/* 2. Prix en grand sous la question */
.hb5{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;padding:36px 0;border-top:1.5px solid var(--ink);border-bottom:1px solid rgba(20,17,14,.12)}
.hb5 h3{font-size:32px}
.hb5-p{display:block;margin-top:18px;font-family:var(--titre);font-size:56px;font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--orange)}
.hb5-p small{font-size:18px;color:var(--mute);font-weight:400;letter-spacing:0;margin-left:6px}
.hb5 .hb-r{display:grid;gap:14px;align-content:start}
/* 3. Les trois coûts, alignés comme sur une note */
.hb6{gap:0;padding:36px 0;border-top:1.5px solid var(--ink)}
.hb6 h3{font-size:32px;margin-bottom:18px}
.hb6-l{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:baseline;padding:16px 0;border-bottom:1px solid rgba(20,17,14,.12);font-size:17px}
.hb6-l i{border-bottom:2px dotted rgba(20,17,14,.25)}
.hb6-l b{font-family:var(--titre);font-weight:600;font-size:22px;white-space:nowrap}
.hb6-l:nth-of-type(2) b{color:var(--orange)}
.hb6-l.opt{color:var(--mute)}.hb6-l.opt b{color:var(--mute);font-size:18px}
.hb6 p{margin-top:18px}
/* 4. À déplier, comme une question fréquente */
.hb7{background:var(--gris);border-radius:20px;padding:0}
.hb7 summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;padding:26px 30px}
.hb7 summary::-webkit-details-marker{display:none}
.hb7 h3{font-size:24px}
.hb7-p{font-family:var(--titre);font-weight:600;font-size:20px;color:var(--orange);white-space:nowrap}
.hb7 .plus{width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;transition:transform .25s var(--ease)}
.hb7[open] .plus{transform:rotate(45deg)}
.hb7 .hb-r{display:grid;gap:12px;padding:0 30px 28px;max-width:80ch}
@media (max-width:900px){
  .hb5{grid-template-columns:minmax(0,1fr);gap:16px;padding:24px 0}.hb5 h3,.hb6 h3{font-size:26px}.hb5-p{font-size:44px}
  .hb6-l{grid-template-columns:1fr auto;font-size:15px}.hb6-l i{display:none}
  .hb7 summary{grid-template-columns:1fr auto;padding:20px}.hb7-p{grid-column:1;grid-row:2}.hb7 .plus{grid-row:1/3;grid-column:2}.hb7 .hb-r{padding:0 20px 20px}
}

/* Question retenue : deux colonnes, montant en orange */
.hb2 b.orange-t{color:var(--orange)}
/* le papier sort du milieu de la fente : il passe devant la moitié basse */
.ps14 .ps-fente{z-index:1}
.ps14 .ps-sortie{z-index:5}
@media (max-width:900px){.ps-dock .ps-fente{position:relative;z-index:1}.ps-dock .ps-sortie{z-index:5;bottom:calc(100% - 5px)}}
/* dents : un nombre entier de dents sur toute la largeur */
.recu::after{-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 0 0/12px 100% round;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 0 0/12px 100% round}

/* ===== Tarifs mobile v2 : carte « Votre devis » après les options, barre de total en bas ===== */
.ps-dock{display:none!important}
.ps-fin,.ps-barre{display:none}
@media (max-width:900px){
  .ps-fin{display:flex;flex-direction:column;grid-column:1/-1;background:var(--ink);color:#fff;border-radius:var(--r-carte);padding:24px 24px 0;min-height:420px;overflow:visible;position:relative;z-index:2}
  .ps-fin .ps-imp{margin-top:18px;padding:0;position:relative;flex:1;min-height:0}
  .ps-fin .ps-fente{margin:0 -6px;position:relative;z-index:1}
  .ps-fin .ps-sortie{position:absolute;left:10px;right:10px;top:6px;height:auto;margin:0;overflow:visible;clip-path:inset(0 -40px -2000px -40px);z-index:5}
  .ps-fin .ps-sortie .ps-r{position:relative}
  .ps-c .ps-imp{display:none}
  .ps-barre{display:flex;align-items:center;gap:12px;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;background:var(--ink);color:#fff;border-radius:999px;padding:10px 12px 10px 22px;font-size:14px;transform:translateY(140%);transition:transform .3s var(--ease)}
  .ps-barre.on{transform:none}
  .ps-barre span:first-child{color:#B9B3AA}
  .ps-barre b{font-family:var(--titre);font-size:22px;font-weight:600;color:var(--orange);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .ps-barre em{margin-left:auto;font-style:normal;font-weight:500;background:#fff;color:var(--ink);border-radius:999px;padding:9px 14px}
  .ps-barre.pulse b{animation:pulse .35s var(--ease)}
  @keyframes pulse{50%{transform:scale(1.12)}}
  body:has(.ps-barre.on) .flottant{opacity:0;pointer-events:none}
}
@media (max-width:900px){.ps-fin{min-height:350px}}

/* ===== Passage d'uniformisation (12/10) ===== */
/* Un seul rythme vertical : 160 px entre les sections sur ordinateur, 96 px sur mobile.
   Titres de section : même taille, même écart avec leur contenu. */
:root{--sec:160px;--titre-ecart:56px}
@media (max-width:900px){:root{--sec:96px;--titre-ecart:36px}}
.section,.probleme{padding-block:var(--sec)!important}
.section+.section{padding-top:0!important}
#prix{padding-top:var(--sec)!important}
section.cadre:has(.etapes){padding-bottom:var(--sec)!important}
.sombre{padding-block:var(--sec)!important}
.titre-2,.cp-titre,.entete-section .titre-2{font-size:clamp(34px,3.6vw,52px)!important;font-weight:500;letter-spacing:-.02em;line-height:1.08}
.entete-section{margin-bottom:var(--titre-ecart)}
.entete-section p{margin-top:16px}
.tg,.th,.tf{margin-top:0!important}
.cp-titre{margin-bottom:var(--titre-ecart)!important}

/* Hero : le ticket sort de la fente placée sous le titre, vers le bas */
[data-imprimante="3"] .machine{justify-content:flex-start}
[data-imprimante="3"] .imprimante{order:0!important;height:12px;margin:0 -6px;background:none;box-shadow:none;border-radius:0;flex:none}
[data-imprimante="3"] .imprimante .fente{left:0;right:0;top:0;height:12px;border-radius:6px;transform:none;background:#050403;box-shadow:inset 0 3px 4px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.12);z-index:1}
[data-imprimante="3"] .imprimante>*:not(.fente){display:none!important}
[data-imprimante="3"] .sortie{order:1!important;margin:-6px 0 0!important;padding:0 18px 30px!important;position:relative;z-index:5;overflow:hidden;clip-path:inset(0 -40px -60px -40px)}
.carte-ticket .int{padding-bottom:0}
.recu{transform-origin:50% 0}
.recu.detache{transform:translateY(4px) rotate(-2deg)!important}
@media (max-width:900px){.recu.detache{transform:translateY(3px) rotate(-1.5deg)!important}}

/* Ce qui est compris : sur fond clair, carte brune pour la liste, carte grise pour l'illustration */
.compris2{background:none;color:var(--ink)}
.compris2 .cp-titre{text-align:center;max-width:22ch;margin-inline:auto}
.compris2 .acc{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;align-items:stretch;max-width:1200px}
.compris2 .acc-liste{background:var(--ink);border-radius:var(--r-carte);padding:18px;align-content:start;gap:6px}
.compris2 .acc-liste button{color:#8D8780;padding:18px 20px}
.compris2 .acc-liste button[aria-selected="true"]{background:var(--ink-3);color:#fff}
.compris2 .acc-liste>button>span{font-size:26px}
.compris2 .acc-liste .barre{left:20px;right:20px}
.compris2 .acc-vis{background:var(--gris);border-radius:var(--r-carte);padding:40px;min-height:0;display:grid}
.compris2 .ill{box-shadow:0 24px 50px -30px rgba(26,18,8,.45)}
@media (max-width:900px){.compris2 .acc{grid-template-columns:minmax(0,1fr)}.compris2 .acc-liste{padding:10px}.compris2 .acc-mob.on{background:var(--gris);border-radius:0 0 16px 16px;padding:16px;margin:0 0 6px}.compris2 .acc-liste button[aria-selected="true"]{border-radius:16px 16px 0 0}}

/* ===== Exemples, 4 variantes (?ex=1..4) ===== */
.travaux .cas{display:none}
.ex{display:none}
[data-ex="1"] .ex1,[data-ex="2"] .ex2,[data-ex="3"] .ex3,[data-ex="4"] .ex4{display:grid}
.ex-demo{display:inline-block;font:500 11px/1 "Geist Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);background:var(--gris);border-radius:99px;padding:6px 10px}
.ex-mock{max-width:none;width:100%}
.ex-mock .nv-services span{gap:5px}
/* 1. Trois sites, chacun dans sa carte */
.ex1{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ex1-c{background:var(--gris);border-radius:var(--r-carte);overflow:hidden;display:flex;flex-direction:column}
.ex1-v{padding:28px 24px 0}
.ex1-v .ill{border-radius:12px 12px 0 0;box-shadow:0 20px 40px -26px rgba(26,18,8,.5)}
.ex1-p{background:#fff;padding:22px 24px 24px;display:grid;gap:8px;flex:1;align-content:start}
.ex1-p .ex-demo{justify-self:start}
.ex1-p h3{font-size:22px;font-weight:500;letter-spacing:-.02em}
.ex1-p>p{color:var(--mute);font-size:15px;line-height:1.4}
.ex1-b{display:flex;align-items:baseline;gap:10px;margin-top:6px}
.ex1-b b{font-family:var(--titre);font-size:28px;font-weight:600;letter-spacing:-.03em}
.ex1-b span{color:var(--mute);font-size:14px}
/* téléphones */
.ex-tel{width:240px;aspect-ratio:9/18.5;border-radius:36px;background:#0B0B0B;padding:8px;box-shadow:0 30px 50px -30px rgba(0,0,0,.55)}
.ex-ecran{height:100%;border-radius:29px;overflow:hidden;background:#fff;display:flex;flex-direction:column;position:relative;font-family:var(--texte)}
.ex-encoche{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:70px;height:20px;border-radius:99px;background:#0B0B0B;z-index:2}
.ex-haut{display:flex;justify-content:space-between;align-items:center;padding:38px 16px 10px;font-size:12px}
.ex-photo{height:42%;background:#3a2c20 center/cover;margin:0 10px;border-radius:14px}
.ex-ecran strong{font-family:var(--titre);font-size:19px;line-height:1.1;letter-spacing:-.02em;padding:14px 16px 0;font-weight:600}
.ex-ecran p{font-size:11px;color:#5A5550;padding:6px 16px 0;line-height:1.35}
.ex-btn{margin:auto 14px 16px;height:40px;border-radius:99px;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:13px}
/* 2. Trois téléphones sur fond gris */
.ex2{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ex2-c{background:var(--gris);border-radius:var(--r-carte);padding:36px 24px 28px;display:grid;justify-items:center;gap:22px}
.ex2-p{display:grid;justify-items:center;gap:6px;text-align:center}
.ex2-p h3{font-size:22px;font-weight:500}
.ex2-p b{font-family:var(--titre);font-size:28px;font-weight:600;letter-spacing:-.03em}
.ex2-p span{color:var(--mute);font-size:14px}
/* 3. Par métier : onglets, ordinateur et téléphone côte à côte */
.ex3{gap:20px;justify-items:center}
.ex3-onglets{display:inline-flex;gap:4px;background:var(--gris);border-radius:99px;padding:5px}
.ex3-onglets button{display:flex;align-items:center;gap:8px;height:46px;padding:0 20px;border-radius:99px;font-family:var(--titre);font-weight:500;color:var(--mute);transition:background-color .2s ease,color .2s ease}
.ex3-onglets button[aria-selected="true"]{background:var(--ink);color:#fff}
.ex3-scene{width:100%;background:var(--gris);border-radius:var(--r-carte);padding:48px;display:grid}
.ex3-v{grid-area:1/1;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;opacity:0;visibility:hidden;transition:opacity .3s ease}
.ex3-v.on{opacity:1;visibility:visible}
.ex3-desk .ill{box-shadow:0 30px 60px -36px rgba(26,18,8,.55)}
.ex3-leg{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--mute);font-size:15px}
/* 4. Défilement continu de sites */
.ex4{gap:24px;overflow:hidden;margin-inline:calc(var(--g) - var(--c));-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ex4-piste{display:flex;gap:16px;width:max-content;animation:defile 50s linear infinite}
.ex4:hover .ex4-piste{animation-play-state:paused}
.ex4-c{width:440px;display:grid;gap:12px}
.ex4-p{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px}
.ex4-p span{font-weight:500}
.ex4-p b{font-family:var(--titre);font-size:22px;font-weight:600}
@media (prefers-reduced-motion:reduce){.ex4-piste{animation:none}}
@media (max-width:900px){
  .ex1,.ex2{grid-template-columns:minmax(0,1fr)}
  .ex3-scene{padding:22px 16px}.ex3-v{grid-template-columns:minmax(0,1fr)}.ex3-desk{display:none}.ex3-mob{justify-self:center}
  .ex3-onglets button{padding:0 12px;font-size:14px}.ex3-onglets{max-width:100%;overflow-x:auto}
  .ex4-c{width:300px}
}

/* ===== Ce qui est compris, fond sombre, 4 variantes (?cq=1..4) ===== */
#compris .cp-titre{text-align:center;max-width:22ch;margin:0 auto var(--titre-ecart)}
.cq{display:none}
[data-cq="1"] .cq1,[data-cq="2"] .cq2,[data-cq="3"] .cq3,[data-cq="4"] .cq4{display:grid}
#compris .cq-vis{background:var(--ink-3);border-radius:18px;display:grid;place-items:center;padding:36px}
#compris .cq-vis .ill{max-width:460px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
#compris .cq-t h4,#compris .cq2-t h4{font-family:var(--titre);font-size:28px;font-weight:500;letter-spacing:-.02em;line-height:1.15;color:#fff}
#compris .cq-t p,#compris .cq2-t p{font-size:17px;line-height:1.55;color:#B9B3AA;margin-top:10px;max-width:46ch}
#compris i.ph{font-size:22px;color:var(--orange)}
/* 1. Quatre cartes */
.cq1{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cq1-c{background:var(--ink-2);border-radius:var(--r-carte);padding:12px;display:grid;grid-template-rows:1fr auto}
.cq1-c .cq-vis{min-height:340px}
.cq1-c .cq-t{padding:24px 20px 18px}
/* 2. Au défilement */
.cq2{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px}
.cq2-t{min-height:62vh;display:flex;flex-direction:column;justify-content:center;opacity:.3;transition:opacity .4s ease}
.cq2-t.on{opacity:1}
.cq2-t>i.ph{margin-bottom:16px}
.cq2-mob{display:none!important}
.cq2-r .cq-vis{position:sticky;top:calc(50vh - 250px);height:500px;padding:40px}
.cq2-v{grid-area:1/1;width:100%;display:grid;place-items:center;opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease}
.cq2-v.on{opacity:1;transform:none}
.cq2-r .cq-vis{grid-template-areas:"a"}
/* 3. Onglets */
.cq3{justify-items:center;gap:20px}
.cq3-tabs{display:inline-flex;gap:4px;background:var(--ink-2);border-radius:99px;padding:5px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.cq3-tabs button{position:relative;overflow:hidden;display:flex;align-items:center;gap:8px;height:48px;padding:0 22px;border-radius:99px;font-family:var(--titre);font-size:16px;font-weight:500;color:#8D8780;white-space:nowrap;transition:background-color .2s ease,color .2s ease}
.cq3-tabs button i.ph{font-size:18px;color:inherit}
.cq3-tabs button[aria-selected="true"]{background:var(--ink-3);color:#fff}
.cq3-tabs button[aria-selected="true"] i.ph{color:var(--orange)}
.cq3-tabs button::after{content:"";position:absolute;left:18px;right:18px;bottom:6px;height:2px;border-radius:2px;background:var(--orange);transform:scaleX(0);transform-origin:left}
.cq3-tabs button.auto::after{animation:cq3-barre 5s linear forwards}
@keyframes cq3-barre{to{transform:scaleX(1)}}
.cq3-scene{width:100%;display:grid}
.cq3-p{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:12px;background:var(--ink-2);border-radius:var(--r-carte);padding:12px;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
.cq3-p.on{opacity:1;visibility:visible}
.cq3-p .cq-vis{min-height:460px}
.cq3-p .cq-t{align-self:center;padding:32px}
.cq3-p .cq-t h4{font-size:36px}
/* 4. Empilées */
.cq4{gap:0}
.cq4-c{position:sticky;top:calc(96px + var(--k) * 16px);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:12px;background:var(--ink-2);border-radius:var(--r-carte);padding:12px;margin-bottom:40px;min-height:480px;box-shadow:0 -20px 40px -20px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.05)}
.cq4-c:last-child{margin-bottom:0}
.cq4-c .cq-t{align-self:end;padding:32px}
.cq4-c .cq-t>i.ph{display:block;margin-bottom:18px;font-size:28px}
.cq4-c .cq-t h4{font-size:36px}
@media (max-width:900px){
  #compris .cq-vis{padding:18px}
  #compris .cq-t h4,#compris .cq2-t h4{font-size:24px}
  #compris .cq-t p,#compris .cq2-t p{font-size:16px}
  .cq1{grid-template-columns:minmax(0,1fr)}
  .cq1-c .cq-vis{min-height:0}.cq1-c .cq-t{padding:18px 10px 10px}
  .cq2{grid-template-columns:minmax(0,1fr);gap:0}.cq2-r{display:none}
  .cq2-t{min-height:0;opacity:1;padding:28px 0;border-top:1px solid rgba(255,255,255,.1)}.cq2-t:first-child{border-top:0;padding-top:0}
  .cq2-mob{display:grid!important;margin-top:20px}
  .cq3-tabs{justify-content:flex-start;width:100%}
  .cq3-tabs button{height:44px;padding:0 16px;font-size:15px}
  .cq3-p{grid-template-columns:minmax(0,1fr)}.cq3-p .cq-vis{min-height:0}.cq3-p .cq-t{padding:16px 10px 12px}.cq3-p .cq-t h4{font-size:26px}
  .cq4-c{grid-template-columns:minmax(0,1fr);top:calc(70px + var(--k) * 12px);min-height:0;margin-bottom:20px}
  .cq4-c .cq-t{padding:16px 10px 4px;order:-1}.cq4-c .cq-t h4{font-size:26px}.cq4-c .cq-t>i.ph{margin-bottom:10px}
}
@media (prefers-reduced-motion:reduce){.cq2-v,.cq2-t,.cq3-p{transition:none}}
.cq3-tabs button{flex:none}

/* ===== Exemples, 4 variantes inspirées (?ex=1..4) ===== */
[data-ex="1"] .ey1,[data-ex="2"] .ey2,[data-ex="3"] .ey3,[data-ex="4"] .ey4{display:grid}
.ey-leg{display:flex;gap:12px;align-items:center;flex-wrap:wrap;color:var(--mute);font-size:15px}
/* 1. Liste */
.ey1{position:relative;border-top:1px solid rgba(20,17,14,.14)}
.ey1-r{width:100%;display:grid;grid-template-columns:120px minmax(0,1fr) 220px 140px 56px;gap:28px;align-items:center;padding:22px 0;border-bottom:1px solid rgba(20,17,14,.14);text-align:left;cursor:pointer}
.ey1-th{width:120px;height:84px;border-radius:12px;background:center/cover;filter:grayscale(.2)}
.ey1-n{font-family:var(--titre);font-size:clamp(30px,3.6vw,52px);font-weight:500;letter-spacing:-.035em;line-height:1;transition:transform .35s var(--ease),color .2s ease}
.ey1-m{list-style:none;display:grid;gap:4px;font:500 12px/1.3 "Geist Mono",monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.ey1-m li::before{content:"+ ";color:var(--orange)}
.ey1-p{display:grid;gap:2px;text-align:right}.ey1-p b{font-family:var(--titre);font-size:24px;font-weight:600;letter-spacing:-.02em}.ey1-p small{font-size:13px;color:var(--mute)}
.ey1-f{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font-size:20px;transition:background-color .2s ease,color .2s ease,transform .3s var(--ease)}
.ey1-l:hover .ey1-n{transform:translateX(12px)}
.ey1-l:hover .ey1-f{background:var(--orange);border-color:var(--orange);color:#fff;transform:rotate(45deg)}
.ey1-o{display:none}
.ey1-l template{display:none}
.ey1-ap{position:absolute;left:0;top:0;width:460px;pointer-events:none;z-index:5;opacity:0;scale:.92;transition:opacity .25s ease,scale .3s var(--ease)}
.ey1-ap.on{opacity:1;scale:1}
.ey1-ap .ill{box-shadow:0 40px 80px -30px rgba(26,18,8,.55)}
.ey1 .ey-leg{margin-top:24px}
/* 2. Mosaïque */
.ey2{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:300px;gap:12px}
.ey2-t{position:relative;border-radius:var(--r-carte);overflow:hidden;display:grid;place-items:center;padding:32px}
.ey2-a{grid-column:span 2;grid-row:span 2;background:var(--gris)}
.ey2-a .ill{max-width:560px;box-shadow:0 40px 70px -40px rgba(26,18,8,.5)}
.ey2-b{grid-row:span 2;background:var(--peche);align-items:end;padding-bottom:0}
.ey2-b .ex-tel,.ey2-d .ex-tel{width:220px;margin-bottom:-90px}
.ey2-c{background:var(--ink);color:#fff;align-content:space-between;justify-items:start;padding:30px}
.ey2-c p{font-family:var(--titre);font-size:26px;line-height:1.2;letter-spacing:-.02em;font-weight:500}
.ey2-c b{color:var(--orange);font-weight:600}
.ey2-c .ex-demo{background:var(--ink-3);color:#B9B3AA}
.ey2-d{grid-row:span 2;background:var(--orange);align-items:end;padding-bottom:0}
.ey2-e{grid-column:span 2;background:var(--gris)}
.ey2-e .ill{max-width:440px;transform:translateY(40px);box-shadow:0 40px 70px -40px rgba(26,18,8,.5)}
.ey2-bd{position:absolute;left:16px;top:16px;background:var(--ink);color:#fff;font:500 11px/1 "Geist Mono",monospace;letter-spacing:.06em;text-transform:uppercase;padding:8px 10px;border-radius:8px}
.ey2-c{grid-column:4;grid-row:3}
/* 3. Bande */
.ey3{gap:24px;margin-inline:calc(-1 * var(--i));}
.ey3-piste{display:grid;grid-auto-flow:column;grid-auto-columns:min(880px,78vw);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:var(--i);scroll-padding-inline:var(--i)}
.ey3-piste::-webkit-scrollbar{display:none}
.ey3-c{scroll-snap-align:start;display:grid;gap:16px}
.ey3-sc{background:var(--gris);border-radius:var(--r-carte);height:540px;position:relative;display:grid;place-items:center;padding:40px 150px 40px 40px;overflow:hidden}
.ey3-sc .ill{max-width:600px;box-shadow:0 40px 70px -40px rgba(26,18,8,.5)}
.ey3-sc .ex-tel{position:absolute;right:40px;bottom:-60px;width:210px}
.ey3-p{display:flex;justify-content:space-between;align-items:baseline;padding:0 6px}
.ey3-p h3{font-family:var(--titre);font-size:24px;font-weight:500;letter-spacing:-.02em}
.ey3-p span{color:var(--mute)}
.ey3-nav{display:flex;justify-content:space-between;align-items:center;padding-inline:var(--i)}
.ey3-nav div{display:flex;gap:8px}
.ey3-nav button{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font-size:20px;transition:background-color .2s ease,color .2s ease}
.ey3-nav button:hover{background:var(--ink);color:#fff}
/* 4. À la une */
.ey4{gap:28px}
.ey4-tabs{display:flex;gap:36px;border-bottom:1px solid rgba(20,17,14,.14);overflow-x:auto;scrollbar-width:none}
.ey4-tabs button{flex:none;position:relative;padding:0 0 18px;font-family:var(--titre);font-size:22px;font-weight:500;letter-spacing:-.02em;color:var(--mute);transition:color .2s ease}
.ey4-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.ey4-tabs button[aria-selected="true"]{color:var(--ink)}
.ey4-tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.ey4-sc{display:grid}
.ey4-p{grid-area:1/1;display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:12px;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
.ey4-p.on{opacity:1;visibility:visible}
.ey4-g{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:8px 0}
.ey4-prix{font-family:var(--titre);font-size:clamp(56px,6vw,88px);font-weight:600;letter-spacing:-.05em;line-height:1}
.ey4-g>span{color:var(--mute);font-size:17px}
.ey4-g ul{list-style:none;display:grid;gap:10px;margin:28px 0 auto;font-size:17px;font-weight:500}
.ey4-g li{display:flex;gap:10px;align-items:center}.ey4-g li i{color:var(--orange)}
.ey4-g .ex-demo{margin-top:24px}
.ey4-v{background:var(--gris);border-radius:var(--r-carte);height:520px;position:relative;display:grid;place-items:center;padding:40px 170px 40px 48px;overflow:hidden}
.ey4-v .ill{max-width:620px;box-shadow:0 40px 70px -40px rgba(26,18,8,.5)}
.ey4-v .ex-tel{position:absolute;right:48px;bottom:-70px;width:220px}
@media (max-width:900px){
  .ey1-r{grid-template-columns:64px minmax(0,1fr) 40px;gap:14px;padding:16px 0}
  .ey1-th{width:64px;height:52px;border-radius:10px}
  .ey1-n{font-size:24px}.ey1-m,.ey1-p{display:none}
  .ey1-f{width:40px;height:40px;font-size:16px;transition:transform .3s var(--ease)}
  .ey1-l.ouv .ey1-f{transform:rotate(45deg);background:var(--orange);border-color:var(--orange);color:#fff}
  .ey1-l:hover .ey1-n{transform:none}
  .ey1-o{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
  .ey1-o>div{overflow:hidden}
  .ey1-l.ouv .ey1-o{grid-template-rows:1fr}
  .ey1-o .ill{margin:4px 0 18px}
  .ey1-ap{display:none}
  .ey2{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:8px}
  .ey2-t{padding:18px}
  .ey2-a,.ey2-e{grid-column:span 2;grid-row:auto;padding:44px 14px 14px}
  .ey2-e .ill{transform:none}
  .ey2-b,.ey2-d{grid-row:auto;height:300px;padding:44px 8px 0}
  .ey2-b .ex-tel,.ey2-d .ex-tel{width:150px;margin-bottom:-40px}
  .ey2-c{grid-column:span 2;grid-row:auto;gap:18px}.ey2-c p{font-size:22px}
  .ey3-piste{grid-auto-columns:86vw}
  .ey3-sc{height:auto;padding:18px 18px 150px;place-items:start center}
  .ey3-sc .ex-tel{right:16px;bottom:-130px;width:140px}
  .ey3-p h3{font-size:20px}
  .ey4-tabs{gap:24px}.ey4-tabs button{font-size:18px;padding-bottom:14px}
  .ey4-p{grid-template-columns:minmax(0,1fr);gap:18px}
  .ey4-g ul{margin:16px 0 0}
  .ey4-v{order:-1;height:auto;padding:18px 18px 150px;place-items:start center}
  .ey4-v .ex-tel{right:16px;bottom:-130px;width:140px}
}
@media (prefers-reduced-motion:reduce){.ey1-ap,.ey4-p,.ey1-o{transition:none}}
/* Exemples, corrections de la mosaïque et du mobile */
.ey2-c{grid-column:3/5;grid-row:3}
.ey2-e{place-items:start center;padding-top:64px}
.ey2-e .ill{transform:none;max-width:480px}
@media (max-width:900px){
  .ey2-c{grid-column:span 2;grid-row:auto}
  .ey2-b,.ey2-d{grid-column:span 2;height:360px}
  .ey2-b .ex-tel,.ey2-d .ex-tel{width:200px;margin-bottom:-110px}
  .ey2-e{padding-top:44px}
  .ey3-sc .ill,.ey4-v .ill{display:none}
  .ey3-sc,.ey4-v{height:380px;padding:28px 0 0;place-items:start center}
  .ey3-sc .ex-tel,.ey4-v .ex-tel{position:static;width:220px}
}
html[data-pb="2"] .probleme{padding-block:0!important}
html[data-pb="2"] #probleme{margin-bottom:-42px}
@media (max-width:900px){html[data-pb="2"] #probleme{margin-bottom:-163px}}

/* ===== Compris, 4 cartes à plat (?cq=1..4) : une seule épaisseur, l'illustration posée directement ===== */
[data-cq="1"] .ck1,[data-cq="2"] .ck2,[data-cq="3"] .ck3,[data-cq="4"] .ck4{display:grid}
#compris .ck-ill .ill{width:100%;max-width:440px;box-shadow:0 30px 60px -30px rgba(0,0,0,.85)}
#compris .ck-t h4{font-family:var(--titre);font-size:26px;font-weight:500;letter-spacing:-.02em;line-height:1.15;color:#fff}
#compris .ck-t p{font-size:17px;line-height:1.55;color:#B9B3AA;margin-top:10px;max-width:44ch}
/* 1. Cartes simples */
.ck1{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ck1-c{background:var(--ink-2);border-radius:var(--r-carte);padding:48px 44px 40px;display:grid;grid-template-rows:1fr auto;gap:40px}
.ck1 .ck-ill{display:grid;place-items:center}
/* 2. Sans cartes, de simples filets entre les cases */
.ck2{grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.1);border-block:1px solid rgba(255,255,255,.1)}
.ck2-c{background:var(--ink);padding:56px 48px;display:grid;grid-template-rows:1fr auto;gap:40px}
.ck2 .ck-ill{display:grid;place-items:center}
/* 3. En ligne, l'illustration remplit le haut de la carte */
.ck3{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ck3-c{background:var(--ink-2);border-radius:var(--r-carte);overflow:hidden;display:grid;grid-template-rows:280px auto}
.ck3 .ck-ill{position:relative;overflow:hidden;background:var(--ink-3)}
.ck3 .ck-ill .ill{position:absolute;left:28px;top:32px;width:420px;max-width:none;box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}
.ck3 .ck-t{padding:28px 26px 30px}
.ck3 .ck-t h4{font-size:22px}
#compris .ck3 .ck-t p{font-size:15px}
/* 4. Mosaïque, l'illustration déborde du bord de la carte */
.ck4{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:440px;gap:12px}
.ck4-c{position:relative;overflow:hidden;background:var(--ink-2);border-radius:var(--r-carte);padding:40px}
.ck4 .ck-0{grid-column:span 2}.ck4 .ck-3{grid-column:span 2}
.ck4 .ck-t{position:relative;z-index:1;max-width:340px}
.ck4 .ck-ill{position:absolute;right:-40px;bottom:-60px;width:440px}
.ck4 .ck-0 .ck-ill,.ck4 .ck-3 .ck-ill{right:40px;bottom:-40px;width:480px}
.ck4 .ck-1 .ck-ill,.ck4 .ck-2 .ck-ill{right:-120px;bottom:-110px}
@media (max-width:1100px){
  .ck3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .ck1,.ck2{grid-template-columns:minmax(0,1fr)}
  .ck1-c{padding:28px 20px 26px;gap:26px}
  .ck2-c{padding:36px 4px;gap:26px}.ck2{background:rgba(255,255,255,.1)}
  #compris .ck-t h4{font-size:24px}#compris .ck-t p{font-size:16px}
  .ck3{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--i));padding-inline:var(--i);scroll-padding-inline:var(--i)}
  .ck3::-webkit-scrollbar{display:none}
  .ck3-c{scroll-snap-align:start;grid-template-rows:240px auto}
  .ck3 .ck-ill .ill{width:360px;left:20px;top:24px}
  .ck4{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
  .ck4 .ck-0,.ck4 .ck-3{grid-column:auto}
  .ck4-c{padding:28px 20px 0;display:grid;gap:24px}
  .ck4 .ck-ill,.ck4 .ck-0 .ck-ill,.ck4 .ck-3 .ck-ill,.ck4 .ck-1 .ck-ill,.ck4 .ck-2 .ck-ill{position:relative;right:auto;bottom:auto;width:auto;margin:0 -10px -40px 10px;height:240px;overflow:hidden}
}
/* Compris, corrections 3 et 4 */
#compris .ck3 .ck-t h4{font-size:22px}
.ck3 .ck-ill .ill{left:50%;top:28px;width:420px;transform:translateX(-50%) scale(.6);transform-origin:top center}
.ck3-c{grid-template-rows:230px auto}
.ck4 .ck-t{max-width:330px}
.ck4 .ck-ill,.ck4 .ck-1 .ck-ill,.ck4 .ck-2 .ck-ill{left:40px;right:auto;top:210px;bottom:auto;width:420px}
.ck4 .ck-0 .ck-ill,.ck4 .ck-3 .ck-ill{left:auto;right:40px;top:48px;bottom:auto;width:460px}
@media (max-width:1100px){.ck3 .ck-ill .ill{transform:translateX(-50%) scale(.8)}.ck3-c{grid-template-rows:290px auto}}
@media (max-width:900px){
  .ck3 .ck-ill .ill{transform:translateX(-50%) scale(.62)}.ck3-c{grid-template-rows:230px auto}
  .ck4 .ck-t{order:-1;max-width:none}
  .ck4 .ck-ill,.ck4 .ck-0 .ck-ill,.ck4 .ck-3 .ck-ill,.ck4 .ck-1 .ck-ill,.ck4 .ck-2 .ck-ill{position:relative;left:auto;right:auto;top:auto;width:auto;height:230px;margin:0 -20px 0 0;overflow:hidden}
}
.ck4 .ck-0 .ck-t,.ck4 .ck-3 .ck-t{max-width:250px}
.ck4 .ck-0 .ck-ill,.ck4 .ck-3 .ck-ill{width:420px}
@media (max-width:1100px) and (min-width:901px){.ck4 .ck-0 .ck-ill,.ck4 .ck-3 .ck-ill{top:200px;left:40px;right:auto}.ck4 .ck-0 .ck-t,.ck4 .ck-3 .ck-t{max-width:none}}

/* ===== Compris « débordent » : zone d'illustration, 4 variantes (?ki=1..4) ===== */
.ck4 .ck-ill,.ck4 .ck-1 .ck-ill,.ck4 .ck-2 .ck-ill{position:absolute;left:40px;right:0;top:200px;bottom:0;width:auto}
.ck4 .ck-0 .ck-ill,.ck4 .ck-3 .ck-ill{left:auto;right:40px;top:40px;bottom:0;width:440px}
.ki{display:none}
[data-ki="1"] .ki1,[data-ki="2"] .ki2,[data-ki="3"] .ki3,[data-ki="4"] .ki4{display:block}
.ki{position:absolute;inset:0}
.ki-st{display:inline-flex;gap:1px;color:#F5A623}
/* 1. Téléphone */
.kt{position:absolute;left:50%;top:0;transform:translateX(-50%);width:290px;height:600px;border-radius:44px;background:#0B0B0B;padding:9px;box-shadow:0 40px 80px -30px rgba(0,0,0,.9),inset 0 0 0 1.5px #2a2622}
.ck4 .ck-1 .kt,.ck4 .ck-2 .kt{left:40px;transform:none}
.kt-ec{height:100%;border-radius:36px;background:#fff;overflow:hidden;position:relative;color:#1A1A1A;font-family:var(--texte);display:flex;flex-direction:column}
.kt-enc{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:84px;height:24px;border-radius:99px;background:#0B0B0B;z-index:2}
.kt-haut{display:flex;justify-content:space-between;align-items:center;padding:46px 18px 12px;font-size:14px}
.kt-ph{height:180px;margin:0 12px;border-radius:16px;background:center/cover}
.kt-ec strong{font-family:var(--titre);font-size:22px;line-height:1.1;letter-spacing:-.02em;font-weight:600;padding:16px 18px 0}
.kt-ec p{font-size:13px;color:#5A5550;padding:8px 18px 0;line-height:1.4}
.kt-btn{margin:18px 16px 0;height:48px;border-radius:99px;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px}
.kt-url{margin:46px 14px 0;height:36px;border-radius:12px;background:#F1EFEC;display:flex;align-items:center;justify-content:center;gap:6px;font:500 13px/1 "Geist Mono",monospace;color:#3C3833}
.kt-url i{color:#1F9D55;font-size:12px}
.kt-titre{font-family:var(--titre);font-size:20px;font-weight:600;letter-spacing:-.02em;padding:22px 18px 10px}
.kt-dom{margin:0 14px;border:1px solid #ECE8E3;border-radius:16px;padding:16px;display:grid;grid-template-columns:1fr auto;gap:10px 8px;font-size:13px}
.kt-dom b{font:600 14px/1.2 "Geist Mono",monospace}
.kt-dom em{font-style:normal;font-size:11px;font-weight:600;color:#1F9D55;background:#E6F6EC;border-radius:99px;padding:3px 9px;align-self:center}
.kt-dom span:nth-of-type(odd){color:#8A847C}.kt-dom span:nth-of-type(even){text-align:right;font-weight:500}
.kt-map{height:230px;background:#E8EEE6;position:relative;background-image:linear-gradient(28deg,transparent 46%,#fff 46%,#fff 52%,transparent 52%),linear-gradient(90deg,transparent 58%,#fff 58%,#fff 62%,transparent 62%),linear-gradient(0deg,transparent 40%,#fff 40%,#fff 44%,transparent 44%)}
.kt-pin{position:absolute;left:52%;top:42%;transform:translate(-50%,-100%);font-size:40px;color:#EA4335;filter:drop-shadow(0 4px 4px rgba(0,0,0,.25))}
.kt-sheet{margin-top:-18px;background:#fff;border-radius:20px 20px 0 0;padding:20px 18px;display:grid;gap:5px;font-size:13px;position:relative;box-shadow:0 -6px 18px rgba(0,0,0,.08)}
.kt-sheet b{font-family:var(--titre);font-size:20px;font-weight:600;letter-spacing:-.02em}
.kt-note{display:flex;align-items:center;gap:6px}
.kt-gris{color:#70757A}
.kt-ouv{font-style:normal;color:#188038;font-weight:600}
.kt-bts{display:flex;gap:8px;margin-top:10px}
.kt-bts span{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:99px;border:1px solid #DADCE0;color:#1A73E8;font-weight:500}
.kt-bts .o{background:#1A73E8;border-color:#1A73E8;color:#fff}
.kt-g{padding:48px 18px 0;text-align:center;font-family:var(--titre);font-size:26px;font-weight:600;letter-spacing:-.03em;color:#4285F4}
.kt-q{margin:14px 14px 0;height:44px;border-radius:99px;box-shadow:0 1px 6px rgba(32,33,36,.2);display:flex;align-items:center;gap:10px;padding:0 16px;font-size:14px}
.kt-r{margin:0 14px;padding:12px;border-radius:14px;display:grid;gap:3px;font-size:12.5px;position:relative}
.kt-r b{font-size:15px;color:#1A0DAB;font-weight:500}
.kt-r.moi{background:#FFF1EB;box-shadow:inset 3px 0 0 var(--orange)}
.kt-r>i{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:#E8F0FE;color:#1A73E8;display:grid;place-items:center}
/* 2. Gros plan */
.kg{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ck4 .ck-0 .kg,.ck4 .ck-3 .kg{top:30px}
.kg-url{display:flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:99px;background:var(--ink-3);color:#D9D3CB;font:500 15px/1 "Geist Mono",monospace}
.kg-url i,.kg-barre i{color:#3DDC84}
.kg-btn{display:flex;align-items:center;gap:16px;height:104px;padding:0 44px 0 30px;border-radius:99px;background:var(--orange);color:#fff;font-family:var(--titre);font-size:44px;font-weight:600;letter-spacing:-.03em;box-shadow:0 30px 60px -24px rgba(255,90,31,.6)}
.kg-btn i{width:66px;height:66px;border-radius:50%;background:#fff;color:var(--orange);display:grid;place-items:center;font-size:30px}
.kg-barre{display:flex;align-items:center;gap:12px;height:76px;padding:0 28px;border-radius:22px;background:#fff;color:#1A1A1A;font:500 28px/1 "Geist Mono",monospace;letter-spacing:-.02em;white-space:nowrap;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.kg-barre i{font-size:22px;color:#1F9D55}
.kg-chip{display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:99px;background:#E6F6EC;color:#14753D;font-weight:600;font-size:15px}
.kg-gmb{background:#fff;color:#1A1A1A;border-radius:24px;padding:26px 30px;gap:10px;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.kg-gmb b{font-family:var(--titre);font-size:30px;font-weight:600;letter-spacing:-.03em}
.kg-note{display:flex;align-items:center;gap:10px}.kg-note em{font-style:normal;font-family:var(--titre);font-size:30px;font-weight:600}
.kg-note .ki-st{font-size:28px}
.kg-ouv{display:flex;align-items:center;gap:8px;color:#188038;font-weight:600;font-size:17px}
.kg-ouv i,.kg-pt{width:9px;height:9px;border-radius:50%;background:#1E9E4A;display:inline-block}
.kg-q{display:flex;align-items:center;gap:12px;height:68px;padding:0 26px;border-radius:99px;background:#fff;color:#1A1A1A;font-size:24px;white-space:nowrap;box-shadow:0 20px 40px -24px rgba(0,0,0,.9)}
.kg-q i{color:#70757A}
.kg-res{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;margin-left:24px;padding:18px 26px 18px 18px;border-radius:20px;background:var(--orange);color:#fff}
.kg-res i{grid-row:span 2;font-size:34px}
.kg-res b{font-family:var(--titre);font-size:24px;font-weight:600;letter-spacing:-.02em}
.kg-res span{font-size:14px;opacity:.85}
/* 3. Photo et étiquettes */
.kp{position:absolute;inset:0 0 -40px 0;border-radius:22px 0 0 0;background:center/cover}
.ck4 .ck-0 .kp,.ck4 .ck-3 .kp{border-radius:22px 22px 0 0}
.ke{position:absolute;display:flex;align-items:center;gap:8px;height:46px;padding:0 18px;border-radius:99px;background:#fff;color:#1A1A1A;font-size:15px;font-weight:500;white-space:nowrap;box-shadow:0 20px 40px -18px rgba(0,0,0,.7)}
.ke b{font-weight:600}
.ke.o{background:var(--orange);color:#fff}
.ke-a{left:20px;top:22px}.ke-b{left:56px;top:82px}
.ke .ph-lock-simple,.ke .ph-check{color:#1F9D55}
/* 4. Animées : même gros plan, qui se joue quand la carte arrive */
.ki4 .kg-tape{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;border-right:2px solid transparent}
.ck4-c.joue .ki4 .kg-tape{animation:ki-tape 1.4s steps(19,end) .3s both,ki-car .7s step-end 1.7s 3}
.ck4-c.joue .ki4 .kg-serp .kg-tape{animation-timing-function:steps(18,end)}
@keyframes ki-tape{from{width:0;border-color:currentColor}to{width:var(--l,19ch);border-color:currentColor}}
@keyframes ki-car{50%{border-color:transparent}}
.ki4 .kg-dom .kg-tape{--l:19ch}.ki4 .kg-serp .kg-tape{--l:18ch}
.ki4 .kg-serp .kg-tape,.ki4 .kg-q{font-family:"Geist Mono",monospace;font-size:21px}
.ck4-c.joue .ki4 .kg-chip,.ck4-c.joue .ki4 .kg-res{animation:ki-monte .5s var(--ease) 1.8s both}
@keyframes ki-monte{from{opacity:0;transform:translateY(14px) scale(.96)}}
.ck4-c.joue .ki4 .kg-note .ki-st i{animation:ki-etoile .35s var(--ease) both}
.ck4-c.joue .ki4 .kg-note .ki-st i:nth-child(1){animation-delay:.3s}.ck4-c.joue .ki4 .kg-note .ki-st i:nth-child(2){animation-delay:.42s}.ck4-c.joue .ki4 .kg-note .ki-st i:nth-child(3){animation-delay:.54s}.ck4-c.joue .ki4 .kg-note .ki-st i:nth-child(4){animation-delay:.66s}.ck4-c.joue .ki4 .kg-note .ki-st i:nth-child(5){animation-delay:.78s}
@keyframes ki-etoile{from{opacity:0;transform:scale(.3)}}
.ck4-c.joue .ki4 .kg-ouv{animation:ki-monte .4s var(--ease) 1.1s both}
.ki4 .kg-btn{position:relative}
.ki4 .kg-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--orange);opacity:0}
.ck4-c.joue .ki4 .kg-btn::before{animation:ki-onde 1.8s ease-out .4s 3}
@keyframes ki-onde{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.25,1.6)}}
.ck4-c.joue .ki4 .kg-btn i{animation:ki-sonne .5s ease-in-out .4s 6}
@keyframes ki-sonne{25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
@media (prefers-reduced-motion:reduce){.ck4-c.joue .ki4 *,.ck4-c.joue .ki4 *::before{animation:none!important}.ki4 .kg-tape{width:auto!important}}
@media (max-width:900px){
  .ck4 .ck-ill,.ck4 .ck-0 .ck-ill,.ck4 .ck-3 .ck-ill,.ck4 .ck-1 .ck-ill,.ck4 .ck-2 .ck-ill{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;height:260px;margin:0 -20px 0 0;overflow:hidden}
  .kt,.ck4 .ck-1 .kt,.ck4 .ck-2 .kt{left:0;transform:none;width:250px;height:520px;border-radius:38px}
  .kt-ec{border-radius:30px}
  .ck4 .ck-0 .kg,.ck4 .ck-3 .kg{top:6px}
  .kg{top:6px;transform-origin:top left;scale:.72}
  .kp{inset:0 20px 0 0;border-radius:18px 18px 0 0}
}
.kt-gmb .kt-map{height:110px}

/* ===== Compris : illustrations « vitrine du commerce », 4 variantes (?ki=1..4) ===== */
.vi{display:none;position:absolute;inset:0}
[data-ki="1"] .vi-o,[data-ki="4"] .vi-o,[data-ki="2"] .vi-f,[data-ki="3"] .vi-l{display:block}
.vi{--creme:#F4EEE4;--trait:#14110E;font-family:"Geist Mono",monospace}
/* -- la devanture -- */
.vo-site,.vf-site{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;align-items:stretch}
.vs-enseigne{background:var(--orange);color:var(--ink);font:600 22px/1 var(--titre);letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:18px 0;border-radius:6px 6px 0 0}
.vs-store{display:grid;grid-template-columns:repeat(8,1fr);height:58px;position:relative;transform-origin:top}
.vs-store i:nth-child(odd){background:var(--creme)}.vs-store i:nth-child(even){background:var(--orange)}
.vs-store i{border-radius:0 0 50% 50% / 0 0 18px 18px}
.vs-vitrine{flex:1;margin:10px 22px 0;background:var(--ink-3);border:10px solid var(--creme);border-bottom:0;border-radius:4px 4px 0 0;padding:22px;display:grid;place-items:start}
.vs-ecran{background:var(--creme);border-radius:6px;padding:20px 22px;display:grid;gap:14px;color:var(--ink);width:min(320px,100%)}
.vs-ecran b{font:600 22px/1.15 var(--titre);letter-spacing:-.02em}
.vs-btn{justify-self:start;background:var(--orange);color:#fff;font:600 15px/1 var(--titre);padding:12px 20px;border-radius:99px}
/* -- la plaque -- */
.vo-dom{position:absolute;left:0;top:10px}
.vd-plaque{position:relative;background:var(--creme);color:var(--ink);border-radius:10px;padding:34px 40px 30px;display:grid;gap:10px;box-shadow:0 0 0 6px var(--ink),0 0 0 8px rgba(255,255,255,.12);min-width:300px}
.vd-plaque b{font:500 26px/1 "Geist Mono",monospace;letter-spacing:-.02em}
.vd-plaque small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.vis{position:absolute;width:12px;height:12px;border-radius:50%;background:#C9C0B2;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.vis::after{content:"";position:absolute;left:2px;right:2px;top:5px;height:2px;background:rgba(0,0,0,.35)}
.vis:nth-child(1){left:12px;top:12px}.vis:nth-child(2){right:12px;top:12px}.vis:nth-child(3){left:12px;bottom:12px}.vis:nth-child(4){right:12px;bottom:12px}
.vis:nth-child(2)::after{transform:rotate(60deg)}.vis:nth-child(3)::after{transform:rotate(-35deg)}.vis:nth-child(4)::after{transform:rotate(100deg)}
/* -- le panneau Ouvert -- */
.vo-gmb{position:absolute;left:0;top:0;width:260px;height:300px}
.vg-clou{position:absolute;left:124px;top:0;width:12px;height:12px;border-radius:50%;background:var(--creme)}
.vg-fil{position:absolute;left:30px;top:2px;width:200px;height:60px;fill:none;stroke:var(--creme);stroke-width:2}
.vg-pan{position:absolute;left:30px;top:58px;width:200px;height:112px;transform-style:preserve-3d;transform-origin:top center}
.vg-pan.fixe{position:relative;left:auto;top:auto;margin:0 auto}
.vg-face,.vg-dos{position:absolute;inset:0;border-radius:12px;display:grid;place-content:center;justify-items:center;gap:8px;backface-visibility:hidden}
.vg-face{background:var(--orange);color:#fff}
.vg-face b,.vg-dos b{font:700 34px/1 var(--titre);letter-spacing:.02em;text-transform:uppercase}
.vg-face span{font-size:13px;letter-spacing:.06em}
.vg-dos{background:var(--creme);color:var(--ink);transform:rotateY(180deg)}
.vg-hor{position:absolute;left:52px;top:196px;width:156px;background:var(--creme);color:var(--ink);padding:12px 14px;display:grid;gap:4px;font-size:13px;transform:rotate(-2deg);box-shadow:0 10px 20px -12px rgba(0,0,0,.6)}
.vg-hor::before{content:"Horaires";font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
/* -- la plaque de rue -- */
.vo-seo{position:absolute;left:30px;top:20px;width:420px;height:420px}
.vr-mat{position:absolute;left:44px;top:0;bottom:-60px;width:14px;background:#3A332C;border-radius:4px}
.vr-fl{position:absolute;left:0;display:flex;align-items:center;gap:20px;justify-content:space-between;height:66px;padding:0 54px 0 26px;clip-path:polygon(0 0,calc(100% - 34px) 0,100% 50%,calc(100% - 34px) 100%,0 100%);transform-origin:58px 50%}
.vr-fl b{font:600 24px/1 var(--titre);letter-spacing:-.01em}
.vr-fl span{font-size:15px}
.vr-1{top:26px;width:360px;background:var(--orange);color:#fff}
.vr-2{top:110px;width:330px;background:var(--creme);color:var(--ink)}
/* -- 2. une façade : chaque carte est un morceau du même mur -- */
[data-ki="2"] .ck4-c{background:#2B241E;background-image:repeating-linear-gradient(0deg,transparent 0 33px,rgba(0,0,0,.22) 33px 35px)}
.vf{position:absolute;inset:0}
.vf-trottoir{position:absolute;left:-40px;right:-60px;bottom:-1px;height:26px;background:#4A4038;border-top:4px solid #5A4F45}
.vf-site .vs-vitrine{margin-bottom:26px}
.vf-porte{position:absolute;left:0;top:30px;bottom:26px;width:150px;background:var(--orange);border:10px solid var(--creme);border-bottom:0;border-radius:6px 6px 0 0}
.vf-poignee{position:absolute;right:14px;top:50%;width:10px;height:44px;border-radius:5px;background:var(--creme)}
.vf-dom .vd-plaque.petite{position:absolute;left:180px;top:70px;min-width:0;padding:24px 26px 20px}
.vf-dom .vd-plaque.petite b{font-size:17px}
.vf-vitre{position:absolute;left:0;right:-40px;top:0;bottom:26px;background:rgba(244,238,228,.08);border:10px solid var(--creme);border-bottom:0;padding-top:30px}
.vf-vitre .vg-hor{position:absolute;left:auto;right:60px;top:40px}
.vf-seo .vo-seo{top:10px}
.vf-seo .vr-mat{bottom:26px}
/* -- 3. lettrage -- */
.vl{position:absolute;left:0;top:0;display:flex;flex-direction:column;color:var(--creme);line-height:.9}
.vl-site{top:10px}
.vl-l1,.vl-l2{font:700 76px/.92 var(--titre);letter-spacing:-.03em;text-transform:uppercase}
.vl-l2{color:var(--orange)}
.vl-tel{margin-top:22px;font-size:16px;letter-spacing:.08em;border-top:2px solid var(--creme);padding-top:14px;align-self:flex-start}
.vl-dom{top:30px;font:500 46px/1.05 "Geist Mono",monospace;letter-spacing:-.04em}
.vl-dom .o{color:var(--orange)}
.vl-gmb{top:20px;gap:14px}
.vl-ouv{font:700 64px/1 var(--titre);text-transform:uppercase;color:var(--ink);background:var(--orange);padding:14px 22px 10px;border-radius:12px;letter-spacing:.02em}
.vl-et{font-size:32px;color:var(--orange);letter-spacing:.1em}
.vl-seo{top:20px;font:700 84px/.95 var(--titre);letter-spacing:-.03em}
.vl-fl{color:var(--orange);font-size:56px}
/* -- 4. animés : mouvements mécaniques à l'arrivée de la carte -- */
[data-ki="4"] .ck4-c .vs-store{transform:scaleY(0)}
[data-ki="4"] .ck4-c.joue .vs-store{animation:vi-store .9s steps(8,end) .2s forwards}
@keyframes vi-store{to{transform:scaleY(1)}}
[data-ki="4"] .ck4-c .vs-btn{opacity:0}
[data-ki="4"] .ck4-c.joue .vs-btn{animation:vi-pop .3s var(--ease) 1.2s forwards}
@keyframes vi-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
[data-ki="4"] .ck4-c.joue .vis::after{animation:vi-vis .8s cubic-bezier(.3,0,.2,1) .3s both}
[data-ki="4"] .ck4-c.joue .vis:nth-child(2)::after{animation-delay:.5s}[data-ki="4"] .ck4-c.joue .vis:nth-child(3)::after{animation-delay:.7s}[data-ki="4"] .ck4-c.joue .vis:nth-child(4)::after{animation-delay:.9s}
@keyframes vi-vis{from{transform:rotate(-540deg)}}
[data-ki="4"] .ck4-c .vg-pan{transform:rotateY(180deg)}
[data-ki="4"] .ck4-c.joue .vg-pan{animation:vi-flip 1.1s cubic-bezier(.3,1.5,.4,1) .4s forwards}
@keyframes vi-flip{to{transform:rotateY(0)}}
[data-ki="4"] .ck4-c .vo-gmb .vg-pan{transform-origin:top center}
[data-ki="4"] .ck4-c.joue .vo-gmb{animation:vi-balance 2.4s ease-in-out 1.4s 2}
@keyframes vi-balance{25%{transform:rotate(2.5deg)}75%{transform:rotate(-2.5deg)}}
[data-ki="4"] .ck4-c .vr-fl{transform:rotate(-14deg);opacity:0}
[data-ki="4"] .ck4-c.joue .vr-1{animation:vi-fl .7s cubic-bezier(.3,1.6,.4,1) .3s forwards}
[data-ki="4"] .ck4-c.joue .vr-2{animation:vi-fl .7s cubic-bezier(.3,1.6,.4,1) .6s forwards}
@keyframes vi-fl{to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){[data-ki="4"] .ck4-c *{animation:none!important;transform:none!important;opacity:1!important}}
/* -- mobile -- */
@media (max-width:900px){
  .ck4 .ck-ill{height:300px!important;overflow:hidden}
  .vs-enseigne{font-size:16px;padding:12px 0}.vs-store{height:40px}.vs-vitrine{margin:8px 10px 0;padding:14px}
  .vs-ecran{padding:14px}.vs-ecran b{font-size:17px}
  .vd-plaque{min-width:0;padding:28px 28px 24px}.vd-plaque b{font-size:20px}
  .vo-seo{left:0}.vr-1{width:300px}.vr-2{width:280px}
  .vl-l1,.vl-l2{font-size:52px}.vl-dom{font-size:34px}.vl-ouv{font-size:46px}.vl-seo{font-size:58px}.vl-fl{font-size:40px}
  .vf-dom .vd-plaque.petite{left:170px}
}
/* vitrine, corrections de placement */
.vd-plaque{min-width:0;max-width:calc(100% - 20px)}
.vd-plaque b{font-size:19px;white-space:nowrap}
.vd-plaque small{font-size:10px;white-space:nowrap}
.vo-dom{right:20px}
.vo-gmb{height:240px}
.vg-pan{top:44px;height:96px}
.vg-face b,.vg-dos b{font-size:30px}
.vg-hor{top:156px;left:120px;width:140px}
.vr-fl b,.vr-fl span{white-space:nowrap}
.vf-porte{width:96px}
.vf-dom .vd-plaque.petite{left:116px;top:50px;padding:20px 18px 16px}
.vf-dom .vd-plaque.petite b{font-size:13px}
.vf-vitre .vg-hor{left:20px;right:auto;top:146px}
@media (max-width:900px){
  .vd-plaque b{font-size:17px}
  .vr-fl b{font-size:19px}.vr-1{width:270px}.vr-2{width:270px}
  .vg-hor{left:150px;top:150px}
  .vf-dom .vd-plaque.petite{left:116px}
}
.vg-pan.fixe{width:170px;height:84px;margin:0 0 0 20px}.vg-pan.fixe .vg-face b{font-size:26px}
.vf-vitre{padding-top:24px}.vf-vitre .vg-hor{top:126px;left:70px}

/* ===== Compris : illustrations façon Littlebird, carte de quartier (?ki=5) ===== */
[data-ki="5"] .vi-lb{display:block}
.vi-lb{font-family:var(--texte)}
.lb{position:absolute;inset:0;background:center/cover no-repeat}
/* zones : l'illustration remplit le bas de la carte et touche ses bords */
[data-ki="5"] .ck4 .ck-ill{left:0!important;right:0!important;bottom:0!important;width:auto!important;overflow:hidden;border-radius:0 0 var(--r-carte) var(--r-carte)}
[data-ki="5"] .ck4 .ck-1 .ck-ill,[data-ki="5"] .ck4 .ck-2 .ck-ill{top:210px!important}
[data-ki="5"] .ck4 .ck-0 .ck-ill,[data-ki="5"] .ck4 .ck-3 .ck-ill{left:46%!important;top:0!important;border-radius:0 var(--r-carte) var(--r-carte) 0}
/* le site : téléphone coupé */
.lb-site{background:var(--ink-3)}
.lb-tel{position:absolute;left:36px;top:40px;width:380px;height:640px;border-radius:58px;background:#0B0A09;padding:10px;box-shadow:0 0 0 2px #3A332C,0 40px 80px -30px rgba(0,0,0,.8)}
.lb-ecran{position:relative;height:100%;border-radius:48px;overflow:hidden;background:center/cover}
.lb-statut{display:flex;justify-content:space-between;align-items:center;padding:20px 30px 0;font:600 17px/1 -apple-system,"SF Pro Text",var(--texte);color:#14110E}
.lb-statut span{font-size:11px;letter-spacing:1px}
.lb-ile{width:110px;height:32px;border-radius:99px;background:#0B0A09}
.lb-notif{position:absolute;left:14px;right:14px;top:78px;padding:20px 20px 16px;border-radius:30px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 20px 40px -20px rgba(0,0,0,.35);color:#14110E}
.lb-notif b{font-size:19px;font-weight:600;letter-spacing:-.01em}
.lb-notif p{font-size:16px;line-height:1.35;color:#5C564F;margin-top:4px}
.lb-notif strong{color:#14110E;font-weight:600}
.lb-bts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.lb-bts span{height:52px;border-radius:99px;display:grid;place-items:center;font-size:17px;font-weight:500;background:rgba(20,17,14,.08)}
.lb-bts .o{background:var(--orange);color:#fff}
/* le domaine : ticket */
.lb-dom{background:var(--peche)}
.lb-ticket{position:absolute;left:50%;top:40px;width:250px;transform:translateX(-50%) rotate(-5deg);background:#FFFDF9;padding:22px 22px 30px;display:grid;gap:10px;color:var(--ink);box-shadow:0 30px 50px -24px rgba(120,50,20,.45);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%}
.lb-tk-k{font:500 11px/1 "Geist Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.lb-ticket b{font:500 19px/1.1 "Geist Mono",monospace;letter-spacing:-.02em;border-bottom:1px dashed #D8D0C4;padding-bottom:12px}
.lb-tk-l{display:flex;justify-content:space-between;font:13px/1 "Geist Mono",monospace;color:#5C564F}
.lb-tk-ok{justify-self:start;margin-top:4px;background:var(--orange);color:#fff;font-size:13px;font-weight:600;padding:7px 12px;border-radius:99px}
/* la fiche Google : grande forme et pastille */
.lb-blob{position:absolute;left:50%;top:50%;width:300px;height:190px;transform:translate(-50%,-56%);border-radius:999px;background:rgba(255,90,31,.32)}
.lb-pill{position:absolute;left:50%;top:50%;transform:translate(-50%,-62%);display:flex;align-items:center;gap:6px;padding:7px;border-radius:999px;background:#fff;box-shadow:0 14px 30px -14px rgba(20,17,14,.45)}
.lb-pill::after{content:"";position:absolute;left:50%;bottom:-9px;width:18px;height:18px;background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:3px;z-index:-1}
.lb-ph{width:92px;height:92px;border-radius:50%;background:center/cover;flex:none}
.lb-note{width:92px;height:92px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-content:center;justify-items:center;gap:2px}
.lb-note b{font:600 30px/1 var(--titre);letter-spacing:-.03em}
.lb-note i{font-style:normal;font-size:10px;letter-spacing:1px}
.lb-ouv{position:absolute;left:50%;top:calc(50% + 62px);transform:translateX(-50%);display:flex;align-items:center;gap:7px;background:#fff;color:#188038;font-size:14px;font-weight:600;padding:8px 14px;border-radius:99px;box-shadow:0 10px 20px -12px rgba(0,0,0,.35)}
.lb-ouv i{width:8px;height:8px;border-radius:50%;background:#1E9E4A}
/* le référencement : recherche + épingle */
.lb-cherche{position:absolute;left:32px;right:32px;top:32px;height:60px;border-radius:99px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:18px;color:var(--ink);box-shadow:0 14px 30px -16px rgba(20,17,14,.45)}
.lb-cherche i{font-size:22px;color:var(--mute)}
.lb-pin{position:absolute;left:50%;top:56%;transform:translate(-50%,-100%);display:flex;align-items:center;gap:12px;padding:7px 22px 7px 7px;border-radius:999px;background:var(--orange);color:#fff;box-shadow:0 0 0 14px rgba(255,90,31,.25),0 20px 40px -16px rgba(150,50,10,.6);white-space:nowrap}
.lb-pin::after{content:"";position:absolute;left:46px;bottom:-8px;width:16px;height:16px;background:var(--orange);transform:rotate(45deg);border-radius:3px}
.lb-pin .lb-ph{width:62px;height:62px;border:3px solid #fff}
.lb-pin b{display:block;font:600 19px/1.1 var(--titre);letter-spacing:-.01em}
.lb-pin small{font-size:13px;opacity:.9}
.lb-pt{position:absolute;left:calc(50% - 98px);top:calc(56% + 16px);width:14px;height:14px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px #fff}
@media (max-width:900px){
  [data-ki="5"] .ck4 .ck-ill,[data-ki="5"] .ck4 .ck-0 .ck-ill,[data-ki="5"] .ck4 .ck-3 .ck-ill,[data-ki="5"] .ck4 .ck-1 .ck-ill,[data-ki="5"] .ck4 .ck-2 .ck-ill{position:relative!important;left:auto!important;top:auto!important;height:300px!important;margin:0 -20px!important;border-radius:0 0 var(--r-carte) var(--r-carte)}
  [data-ki="5"] .ck4-c{padding-bottom:0}
  .lb-tel{left:24px;top:24px;width:310px;height:540px}
  .lb-notif{top:70px}.lb-notif b{font-size:17px}.lb-notif p{font-size:14px}
  .lb-cherche{left:18px;right:18px;top:18px;height:52px;font-size:16px}
  .lb-pin b{font-size:17px}
}
.lb-ticket{width:290px}.lb-ticket b{font-size:18px;white-space:nowrap}
.lb-blob{width:250px;height:150px;background:rgba(255,90,31,.28)}
.lb-ouv{top:calc(50% + 74px)}

/* ===== Littlebird, 4 décors (?lbv=1..4) ===== */
/* 2. Tout sur la carte : un seul quartier traverse les 4 cartes */
[data-lbv="2"] .lb-site,[data-lbv="2"] .lb-dom{background:url(img/carte.svg) center/cover}
[data-lbv="2"] .lb-gmb{background-position:20% 30%}[data-lbv="2"] .lb-seo{background-position:80% 60%}
[data-lbv="2"] .lb-ticket{box-shadow:0 30px 50px -24px rgba(20,17,14,.45)}
[data-lbv="2"] .lb-dom::before{content:"";position:absolute;left:50%;top:50%;width:220px;height:140px;transform:translate(-50%,-30%);border-radius:999px;background:rgba(255,90,31,.25)}
/* 3. Aplats chauds, sans carte, façon Thanks */
[data-lbv="3"] .lb-site{background:var(--orange)}
[data-lbv="3"] .lb-site .lb-ecran{background:#F4EEE4!important}
[data-lbv="3"] .lb-dom{background:var(--sable)}
[data-lbv="3"] .lb-gmb{background:var(--peche)!important}
[data-lbv="3"] .lb-seo{background:#F4EEE4!important}
[data-lbv="3"] .lb-blob{background:rgba(255,255,255,.55)}
[data-lbv="3"] .lb-pin{box-shadow:0 0 0 14px rgba(255,90,31,.18),0 20px 40px -16px rgba(150,50,10,.5)}
[data-lbv="3"] .lb-pt{display:none}

/* 4. Nuit : carte sombre, accents orange qui ressortent */
[data-lbv="4"] .lb-gmb,[data-lbv="4"] .lb-seo,[data-lbv="4"] .lb-site .lb-ecran{background-image:url(img/carte-nuit.svg)!important}
[data-lbv="4"] .lb-dom{background:url(img/carte-nuit.svg) center/cover}
[data-lbv="4"] .lb-statut{color:#F4EEE4}
[data-lbv="4"] .lb-notif{background:rgba(40,34,28,.72);color:#F4EEE4}
[data-lbv="4"] .lb-notif p{color:#B9B3AA}[data-lbv="4"] .lb-notif strong{color:#fff}
[data-lbv="4"] .lb-bts span:not(.o){background:rgba(255,255,255,.1)}
[data-lbv="4"] .lb-blob{background:rgba(255,90,31,.22);filter:blur(2px)}
[data-lbv="4"] .lb-pin{box-shadow:0 0 0 14px rgba(255,90,31,.18),0 0 60px rgba(255,90,31,.45)}
[data-lbv="4"] .lb-cherche{background:#2E2822;color:#F4EEE4}
[data-lbv="4"] .lb-ticket{box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
[data-lbv="3"] .lb-pin{top:62%}
html{font-synthesis:none}

/* ===== Mixte vu par un commerçant (?mx=1..4) ===== */
.mxv{display:none;position:absolute;inset:0}
[data-mx="1"] .mxv1,[data-mx="2"] .mxv2,[data-mx="4"] .mxv4{display:block}
[data-mx="1"] .vi-lb>.lb,[data-mx="2"] .vi-lb>.lb,[data-mx="4"] .vi-lb>.lb{display:none}
[data-mx="4"] .ck-3 .vi-lb>.lb{display:block}
.ck-q{display:none}
[data-mx="3"] .ck4 .ck-q{display:block}
[data-mx="3"] .ck4 .ck-t>h4,[data-mx="3"] .ck4 .ck-t>p{display:none}
.ck-q h4{font-family:var(--titre);font-size:26px;font-weight:500;letter-spacing:-.02em;line-height:1.15;color:#fff}
.ck-q p{font-size:17px;line-height:1.55;color:#B9B3AA;margin-top:10px;max-width:44ch}
/* 1. côté client */
.mx-site{background:var(--ink-3)}
.mx-sitecl{padding:14px 18px;display:grid;gap:12px;color:var(--ink)}
.mx-sh{display:flex;justify-content:space-between;align-items:center;font-size:15px;padding-top:8px}
.mx-ph{height:200px;border-radius:20px;background:center/cover}
.mx-sitecl strong{font:600 26px/1.1 var(--titre);letter-spacing:-.02em}
.mx-appel{position:relative;height:62px;border-radius:99px;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:19px}
.mx-doigt{position:absolute;right:46px;top:30px;width:46px;height:46px;border-radius:50%;background:rgba(20,17,14,.18);box-shadow:0 0 0 10px rgba(20,17,14,.07)}
.mx-dom{background:var(--peche);display:grid;align-content:center;justify-items:center;gap:14px;padding:24px}
.mx-barre{display:flex;align-items:center;gap:10px;height:62px;padding:0 24px;border-radius:99px;background:#fff;color:var(--ink);font:500 20px/1 "Geist Mono",monospace;box-shadow:0 20px 40px -20px rgba(120,50,20,.45);white-space:nowrap}
.mx-barre i{color:#1F9D55}
.mx-barre.petite{height:46px;font:15px/1 var(--texte);color:var(--mute);opacity:.8}.mx-barre.petite i{color:var(--mute)}
.mx-pin{position:absolute;left:50%;top:24%;transform:translate(-50%,-50%);font-size:46px;color:var(--orange);filter:drop-shadow(0 6px 6px rgba(0,0,0,.25))}
.mx-pin.b{left:72%;top:30%}
.mx-sheet{position:absolute;left:14px;right:14px;bottom:-14px;background:#fff;border-radius:22px 22px 0 0;padding:18px 18px 28px;display:grid;gap:5px;color:var(--ink);font-size:14px;box-shadow:0 -10px 30px -16px rgba(0,0,0,.35)}
.mx-sheet b{font:600 20px/1.1 var(--titre);letter-spacing:-.02em}
.mx-note i{font-style:normal;color:#F5A623;letter-spacing:1px}
.mx-ouv{display:flex;align-items:center;gap:6px;color:#188038;font-weight:500}.mx-ouv i{width:7px;height:7px;border-radius:50%;background:#1E9E4A}
.mx-bt{display:flex;gap:8px;margin-top:8px}.mx-bt span{display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:99px;border:1px solid #E2DDD4;font-weight:500}
.mx-bt .o{background:var(--orange);border-color:var(--orange);color:#fff}
.mx-res{position:absolute;left:32px;right:32px;top:108px;background:#fff;border-radius:22px;padding:8px;display:grid;gap:4px;box-shadow:0 20px 40px -20px rgba(20,17,14,.45)}
.mx-res>div{position:relative;display:flex;align-items:center;gap:12px;padding:10px;border-radius:16px;color:var(--ink)}
.mx-res>div.moi{background:#FFF1EA;box-shadow:inset 0 0 0 2px var(--orange)}
.mx-res .lb-ph,.mx-res .gr{width:46px;height:46px;border-radius:50%;flex:none}
.mx-res .gr{background:#ECE8E2}
.mx-res b{display:block;font:600 16px/1.2 var(--titre)}.mx-res small{font-size:13px;color:var(--mute)}
.mx-res .moi small{color:#8A5A40}
.mx-res .moi>i{margin-left:auto;width:38px;height:38px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center}
.mx-res>div:not(.moi){opacity:.55}
/* 2. côté vous : notifications */
.mx-n{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;margin:12px 14px 0;padding:14px;border-radius:24px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 16px 30px -18px rgba(0,0,0,.4);color:var(--ink)}
.lb-ecran .mx-n:first-of-type{margin-top:70px}
.mx-app{width:40px;height:40px;border-radius:11px;background:var(--orange);color:#fff;display:grid;place-items:center;font-size:19px}
.mx-n b{font-size:16px;font-weight:600}.mx-n p{font-size:14px;line-height:1.35;color:#5C564F;margin-top:2px}
.mx-n small{font-size:12px;color:#8A847C}
.mx-dom2{background:var(--peche);display:grid;align-content:center;padding:0 10px}
.mx-gmb2,.mx-seo2{display:grid;align-content:start;padding-top:18px}
.mx-seo2{padding-top:30px}.mx-seo2 .mx-n{max-width:420px}
.mx-route{position:absolute;left:30%;top:58%;width:42%;height:3px;background:repeating-linear-gradient(90deg,var(--orange) 0 10px,transparent 10px 18px);transform:rotate(-20deg);transform-origin:left}
/* 4. au quotidien */
.mx-agenda{background:var(--ink-3);display:grid;place-items:center;padding:28px}
.mx-ag{width:100%;max-width:400px;background:#FBF8F2;border-radius:22px;padding:20px;display:grid;gap:10px;color:var(--ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.mx-ag-h{display:flex;align-items:baseline;gap:8px;padding-bottom:8px;border-bottom:1px solid #ECE6DC}.mx-ag-h b{font:600 22px/1 var(--titre)}.mx-ag-h span{color:var(--mute)}
.mx-ag-l{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center}
.mx-ag-l small{font:13px/1 "Geist Mono",monospace;color:var(--mute)}
.mx-ag-l span{padding:12px 14px;border-radius:14px;font-size:15px;font-weight:500}
.mx-ag-l .gr{background:#EFEAE2;color:#8A847C}
.mx-ag-l .o{background:var(--orange);color:#fff;display:grid;gap:2px}.mx-ag-l .o em{font-style:normal;font-size:12px;font-weight:400;opacity:.85}
.mx-van{background:var(--sable);overflow:hidden}
.mx-camion{position:absolute;left:24px;right:-60px;bottom:40px;height:150px}
.mx-caisse{position:absolute;left:0;right:110px;top:0;bottom:24px;background:#fff;border-radius:14px 6px 6px 14px;padding:20px 22px;display:grid;align-content:center;gap:4px;color:var(--ink);box-shadow:0 20px 30px -20px rgba(0,0,0,.4)}
.mx-caisse b{font:700 22px/1 var(--titre);letter-spacing:-.02em;color:var(--orange)}
.mx-caisse span{font:500 17px/1.2 "Geist Mono",monospace}
.mx-caisse small{font-size:13px;color:var(--mute)}
.mx-cab{position:absolute;right:0;top:34px;width:120px;bottom:24px;background:var(--orange);border-radius:6px 40px 10px 6px}
.mx-cab::after{content:"";position:absolute;right:14px;top:12px;width:56px;height:38px;border-radius:4px 26px 4px 4px;background:#3A332C}
.mx-camion i{position:absolute;bottom:0;width:48px;height:48px;border-radius:50%;background:var(--ink);box-shadow:inset 0 0 0 12px var(--ink),inset 0 0 0 20px #8A847C}
.mx-camion .r1{left:40px}.mx-camion .r2{right:30px}
.mx-trace{position:absolute;inset:10% 15% 15% 10%;width:75%;height:75%;fill:none;stroke:var(--orange);stroke-width:6;stroke-linecap:round;stroke-dasharray:2 12}
.mx-moi{position:absolute;left:18%;top:80%;width:18px;height:18px;border-radius:50%;background:#2F7BF6;box-shadow:0 0 0 5px #fff,0 0 0 14px rgba(47,123,246,.2)}
.mx-tag{position:absolute;left:60%;top:12%;background:var(--orange);color:#fff;border-radius:16px;padding:10px 14px;display:grid;gap:2px;box-shadow:0 14px 30px -12px rgba(150,50,10,.6)}
.mx-tag b{font:600 16px/1.1 var(--titre)}.mx-tag span{font-size:12px;opacity:.9}
@media (max-width:900px){
  .mx-barre{font-size:16px;height:52px;padding:0 18px}
  .mx-res{left:18px;right:18px;top:84px}
  .mx-camion{left:16px;right:-40px;bottom:30px;height:130px}.mx-caisse b{font-size:18px}.mx-caisse span{font-size:14px}
  .mx-tag{left:50%}
}
.mx-ph{height:120px}.mx-sitecl strong{font-size:22px}.mx-sitecl{gap:10px}
.mx-camion{left:20px;right:20px;bottom:36px;height:150px}
.mx-caisse{right:96px}.mx-cab{width:104px}
@media (max-width:900px){.mx-camion{left:14px;right:14px}.mx-ph{height:100px}}

/* ===== Côté vous, 4 présentations (?nv=1..4, avec mx=2) ===== */
.nvv{display:none;position:absolute;inset:0}
[data-mx="2"][data-nv="2"] .nvv2,[data-mx="2"][data-nv="3"] .nvv3,[data-mx="2"][data-nv="4"] .nvv4{display:block}
[data-mx="2"][data-nv="2"] .mxv2,[data-mx="2"][data-nv="3"] .mxv2,[data-mx="2"][data-nv="4"] .mxv2{display:none}
/* 2. écran verrouillé */
.nv-lock{background:var(--ink-3);overflow:hidden}
.nv-tel{position:absolute;left:50%;top:26px;width:min(360px,calc(100% - 40px));height:640px;transform:translateX(-50%);border-radius:52px;background:#0B0A09;padding:9px;box-shadow:0 0 0 2px #3A332C,0 40px 80px -30px rgba(0,0,0,.8);overflow:hidden}
.nv-fond{position:absolute;inset:9px;border-radius:44px;background:center/cover;filter:brightness(.62) saturate(.9)}
.nv-heure{position:relative;text-align:center;color:#fff;padding-top:34px;display:grid}
.nv-heure small{font-size:15px;font-weight:500;opacity:.9}
.nv-heure b{font:600 78px/1 var(--titre);letter-spacing:-.03em}
.nv-lock .mx-n{position:relative;margin:12px 10px 0;background:rgba(255,255,255,.82)}
.nv-lock .mx-n+.mx-n{margin-top:8px}
/* 3. piles sur aplats */
.nv-pile{display:grid;align-content:center;justify-items:center;gap:14px;padding:20px}
.nv-c0{background:var(--orange)}.nv-c1{background:var(--sable)}.nv-c2{background:var(--peche)}.nv-c3{background:#F4EEE4}
.nv-tas{position:relative;width:min(400px,100%)}
.nv-tas .mx-n.haut{position:relative;z-index:2;margin:0;background:#fff;box-shadow:0 20px 40px -20px rgba(0,0,0,.45)}
.nv-tas i{position:absolute;left:50%;height:30px;border-radius:0 0 22px 22px;background:rgba(255,255,255,.7);transform:translateX(-50%)}
.nv-f1{bottom:-12px;width:92%;z-index:1}.nv-f2{bottom:-23px;width:82%;opacity:.6}
.nv-c0 .nv-tas i{background:rgba(255,255,255,.55)}
.nv-plus{margin-top:20px;font-size:13px;font-weight:500;color:rgba(20,17,14,.55)}
.nv-c0 .nv-plus{color:rgba(255,255,255,.85)}
/* 4. dynamic island */
.nv-ile{background:center/cover;display:grid;place-items:start center;padding-top:30px}
.nv-pill{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;width:min(430px,calc(100% - 32px));padding:14px;border-radius:40px;background:#000;color:#fff;box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06);transform-origin:top center}
.nv-av{width:52px;height:52px;border-radius:50%;background:center/cover}
.nv-t small{font-size:12px;color:#8D8780}
.nv-t b{display:block;font-size:17px;font-weight:600}
.nv-t p{font-size:13px;color:#B9B3AA;line-height:1.3;margin-top:2px}
.nv-bts{display:flex;gap:8px}
.nv-bts span{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:20px;color:#fff}
.nv-r{background:#FF3B30}.nv-v{background:#34C759}.nv-ic{background:var(--orange)}
[data-nv="4"] .ck4-c .nv-pill{opacity:0;transform:scale(.3,.25)}
[data-nv="4"] .ck4-c.joue .nv-pill{animation:nv-ile .9s cubic-bezier(.2,1.25,.35,1) .25s forwards}
[data-nv="4"] .ck4-c.joue .nv-pill>*{animation:nv-cont .4s ease .7s both}
@keyframes nv-ile{0%{opacity:1;transform:scale(.3,.25)}100%{opacity:1;transform:none}}
@keyframes nv-cont{from{opacity:0}}
[data-nv="4"] .ck4-c.joue .nv-v{animation:nv-cont .4s ease .7s both,nv-sonne 1.2s ease-in-out 1.3s 3}
@keyframes nv-sonne{0%,100%{box-shadow:0 0 0 0 rgba(52,199,89,.6)}50%{box-shadow:0 0 0 10px rgba(52,199,89,0)}}
@media (prefers-reduced-motion:reduce){[data-nv="4"] .ck4-c .nv-pill{opacity:1;transform:none}[data-nv="4"] .ck4-c *{animation:none!important}}
@media (max-width:900px){
  .nv-tel{width:300px;height:540px}.nv-heure b{font-size:62px}
  .nv-pill{gap:10px;padding:12px}.nv-av{width:42px;height:42px}.nv-bts span{width:40px;height:40px}
}
.nv-tas i{all:unset}.nv-tas>i{position:absolute;left:50%;height:30px;border-radius:0 0 22px 22px;background:rgba(255,255,255,.7);transform:translateX(-50%)}
.nv-tas .mx-app i{font-size:19px;color:#fff;display:inline-block}
.nv-c0 .nv-tas>i{background:rgba(255,255,255,.55)}
.nv-tas>.nv-f1{bottom:-12px;width:92%;z-index:1}.nv-tas>.nv-f2{bottom:-23px;width:82%;opacity:.6}
.ck4 .ck-1 .nv-tel,.ck4 .ck-2 .nv-tel{top:14px}
.ck4 .ck-1 .nv-heure,.ck4 .ck-2 .nv-heure{padding-top:18px}.ck4 .ck-1 .nv-heure b,.ck4 .ck-2 .nv-heure b{font-size:54px}

/* ===== Compris, « Côté vous » retenu : 4 variantes (?cv=1..4) ===== */
.ck4 .ck-ill{position:absolute;left:0;right:0;bottom:0;top:210px;width:auto;overflow:hidden;border-radius:0 0 var(--r-carte) var(--r-carte)}
.ck4 .ck-0 .ck-ill,.ck4 .ck-3 .ck-ill{left:46%;top:0;border-radius:0 var(--r-carte) var(--r-carte) 0}
.cv{display:none;position:absolute;inset:0}
[data-cv="1"] .cv1,[data-cv="2"] .cv2,[data-cv="3"] .cv3,[data-cv="4"] .cv4{display:block}
/* 2. typo géante */
.gt{background:var(--ink-3);display:grid;align-content:center;justify-items:start;gap:10px;padding:32px 36px}
.gt-ic{width:46px;height:46px;border-radius:13px;background:var(--orange);color:#fff;display:grid;place-items:center;font-size:22px}
.gt b{font:600 clamp(48px,5.4vw,84px)/.95 var(--titre);letter-spacing:-.04em;color:#F4EEE4}
.ck-2 .gt b{color:var(--orange);letter-spacing:.02em}
.gt small{font:500 14px/1.3 "Geist Mono",monospace;color:#8D8780;letter-spacing:.02em}
[data-cv="2"] .ck4-c .gt>*{opacity:0;transform:translateY(14px)}
[data-cv="2"] .ck4-c.joue .gt>*{animation:gt-in .6s var(--ease) forwards}
[data-cv="2"] .ck4-c.joue .gt>b{animation-delay:.12s}[data-cv="2"] .ck4-c.joue .gt>small{animation-delay:.24s}
@keyframes gt-in{to{opacity:1;transform:none}}
/* 3. appareils */
.ap{background:var(--ink-3);overflow:hidden}
.ap-call{position:absolute;left:50%;top:30px;width:340px;height:640px;transform:translateX(-50%);border-radius:52px;background:linear-gradient(#3A3029,#14110E);box-shadow:0 0 0 9px #0B0A09,0 0 0 11px #3A332C;display:grid;justify-items:center;align-content:start;padding-top:60px;gap:14px;color:#fff}
.ap-call small{font-size:14px;color:#B9B3AA}
.ap-av{width:110px;height:110px;border-radius:50%;background:#5A5048;display:grid;place-items:center;font-size:52px;color:#B9B3AA}
.ap-call b{font:600 32px/1 var(--titre)}
.ap-bts{display:flex;gap:90px;margin-top:150px}
.ap-bts span{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:30px}
.ap-bts .r{background:#FF3B30}.ap-bts .v{background:#34C759}
.ap-mac{position:absolute;left:24px;right:-80px;top:28px}
.ap-ecr{height:230px;border-radius:14px 14px 0 0;background:#E9E4DC;border:10px solid #1A1714;border-bottom:0;padding:22px}
.ap-base{display:block;height:14px;margin:0 -30px;border-radius:0 0 12px 12px;background:#B9B1A6}
.ap-mail{display:flex;gap:12px;background:#fff;border-radius:16px;padding:14px;max-width:300px;box-shadow:0 12px 24px -14px rgba(0,0,0,.4);color:var(--ink)}
.ap-mail b{font-size:15px;font-weight:600}.ap-mail p{font-size:13px;color:#5C564F;line-height:1.35;margin-top:2px}
.ap-ic{width:38px;height:38px;border-radius:11px;background:var(--orange);color:#fff;display:grid;place-items:center;font-size:18px;flex:none}
.ap-watch{position:absolute;left:50%;top:18px;transform:translateX(-50%);width:190px;height:230px;border-radius:52px;background:#0B0A09;padding:14px;box-shadow:0 0 0 3px #3A332C,0 30px 50px -20px rgba(0,0,0,.8)}
.ap-watch::before,.ap-watch::after{content:"";position:absolute;left:30px;right:30px;height:80px;background:#2A2420;z-index:-1}
.ap-watch::before{top:-70px;border-radius:14px 14px 0 0}.ap-watch::after{bottom:-70px;border-radius:0 0 14px 14px}
.ap-cad{height:100%;border-radius:40px;background:#000;display:grid;align-content:center;justify-items:center;gap:6px;color:#fff;text-align:center}
.ap-cad b{font-size:17px;font-weight:600}.ap-cad em{font-style:normal;color:var(--orange);font-size:20px;letter-spacing:2px}.ap-cad small{font-size:12px;color:#8D8780}
.ap-car{position:absolute;left:24px;right:-40px;top:50%;transform:translateY(-50%);height:300px;border-radius:28px;background:#0B0A09;padding:12px;display:grid;grid-template-columns:1.3fr 1fr;gap:12px;box-shadow:0 0 0 3px #3A332C}
.ap-carte{border-radius:18px;background:center/cover;position:relative}
.ap-trace{position:absolute;left:20%;top:30%;width:50%;height:45%;border:5px dashed var(--orange);border-left:0;border-bottom:0;border-radius:0 40px 0 0}
.ap-info{display:grid;align-content:center;gap:6px;color:#fff;padding-right:20px}
.ap-info small{font-size:13px;color:#8D8780}.ap-info b{font:600 26px/1.05 var(--titre)}.ap-info span{font-size:15px;color:var(--orange)}
/* 4. journal en ticket */
.jr{display:grid;justify-items:center;padding-top:28px}
.jr-tk{width:min(330px,calc(100% - 40px));background:#FFFDF9;padding:20px 20px 30px;display:grid;gap:8px;transform:rotate(-3deg);box-shadow:0 30px 50px -24px rgba(120,50,20,.45);color:var(--ink);font-family:"Geist Mono",monospace;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%}
.jr-h{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dashed #D8D0C4;padding-bottom:10px;margin-bottom:4px}
.jr-h b{font:600 20px/1 var(--titre)}.jr-h span{font-size:12px;color:var(--mute)}
.jr-l{display:grid;grid-template-columns:48px 1fr;gap:8px;font-size:14px;color:#A39B90;padding:6px 8px;border-radius:8px}
.jr-l.o{background:var(--orange);color:#fff}
.jr-f{margin-top:8px;padding-top:10px;border-top:1px dashed #D8D0C4;font-size:12px;text-align:center;color:var(--mute);letter-spacing:.08em;text-transform:uppercase}
[data-cv="4"] .ck4-c .jr-tk{transform:translateY(-110%) rotate(-3deg)}
[data-cv="4"] .ck4-c.joue .jr-tk{transition:transform 1.4s linear;transform:rotate(-3deg)}
@media (prefers-reduced-motion:reduce){[data-cv] .ck4-c *{animation:none!important;transition:none!important;opacity:1!important}[data-cv="4"] .ck4-c .jr-tk{transform:rotate(-3deg)}}
@media (max-width:900px){
  .ck4 .ck-ill,.ck4 .ck-0 .ck-ill,.ck4 .ck-3 .ck-ill{position:relative;left:auto;top:auto;height:300px;margin:0 -20px;border-radius:0 0 var(--r-carte) var(--r-carte)}
  .ck4-c{padding-bottom:0}
  .gt{padding:24px}.gt b{font-size:56px}
  .ap-call{width:300px;height:560px;top:20px}.ap-bts{margin-top:110px;gap:70px}
  .ap-car{left:14px;right:14px;height:240px;grid-template-columns:1fr 1fr}.ap-info b{font-size:20px}
}
.cq.ck4{display:grid}
.ck4 .ck-1 .ck-ill,.ck4 .ck-2 .ck-ill{left:0;right:0;top:210px;bottom:0;width:auto}
.ck4 .ck-0 .ck-ill,.ck4 .ck-3 .ck-ill{right:0;bottom:0;width:auto}
.ck-2 .gt b{font-size:clamp(40px,3.6vw,56px)}
.ap-call{padding-top:44px;gap:10px}.ap-av{width:84px;height:84px;font-size:40px}.ap-bts{margin-top:24px}
@media (max-width:900px){.ck4 .ck-1 .ck-ill,.ck4 .ck-2 .ck-ill,.ck4 .ck-0 .ck-ill,.ck4 .ck-3 .ck-ill{position:relative;left:auto;right:auto;top:auto;width:auto}.ap-bts{margin-top:20px}}

/* ===== Côté vous : l'écran verrouillé seulement pour le site, le reste selon la carte (?cv=1..4) ===== */
.cv-tout{display:block!important}
.cl-sable{background:var(--sable)}
.gt-mono{font-family:"Geist Mono",monospace!important;font-weight:500!important;font-size:clamp(30px,2.6vw,40px)!important;letter-spacing:-.04em!important;line-height:1.05!important}
.gt-mono span{color:var(--orange)}
.gt-st{font-style:normal;color:var(--orange);font-size:30px;letter-spacing:4px}
.ck-2 .gt b{color:#F4EEE4;font-size:clamp(64px,6vw,96px)}
.gt-q{font-size:clamp(40px,4vw,64px)!important}

/* ===== Nom de domaine, 4 variantes (?cv=1..4) ===== */
.dm1,.dm2,.dm4{background:var(--peche);display:grid;place-items:center;padding:20px}
.dm-carte{width:min(330px,100%);background:#FFFDF9;border-radius:6px;padding:24px 26px;display:grid;gap:6px;color:var(--ink);transform:rotate(-4deg);box-shadow:0 30px 50px -24px rgba(120,50,20,.5)}
.dm-carte b{font:700 22px/1 var(--titre);letter-spacing:-.02em}
.dm-carte>span{font-size:13px;color:var(--mute)}
.dm-carte>i{display:block;height:1px;background:#EAE3D8;margin:8px 0}
.dm-l{display:flex;align-items:center;gap:8px;font:14px/1.2 "Geist Mono",monospace;color:#5C564F}
.dm-l i{color:#B9B3AA}
.dm-l.o{color:var(--ink);font-weight:500;background:#FFE7DA;margin:0 -8px;padding:6px 8px;border-radius:6px}.dm-l.o i{color:var(--orange)}
.dm-cert{position:relative;width:min(340px,100%);background:#FFFDF9;padding:26px 26px 22px;display:grid;gap:8px;color:var(--ink);box-shadow:0 0 0 1px #E8DFD2,inset 0 0 0 6px #FFFDF9,inset 0 0 0 7px #E8C9B5,0 30px 50px -24px rgba(120,50,20,.45)}
.dm-cert small{font:500 11px/1 "Geist Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.dm-cert b{font:500 22px/1.1 "Geist Mono",monospace;letter-spacing:-.03em;padding-bottom:8px;border-bottom:1px dashed #D8D0C4}
.dm-cl{display:flex;justify-content:space-between;gap:10px;font-size:13px}.dm-cl span:first-child{color:var(--mute)}.dm-cl span:last-child{font-weight:500;text-align:right}
.dm-sceau{position:absolute;right:-16px;bottom:-16px;width:64px;height:64px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-size:32px;transform:rotate(-12deg);box-shadow:0 10px 20px -8px rgba(150,50,10,.6)}
.dm3{background:var(--sable);display:grid;align-content:center;justify-items:center;gap:14px;padding:20px}
.dm-mail{width:min(360px,100%);background:#fff;border-radius:18px;padding:8px 18px 18px;color:var(--ink);box-shadow:0 30px 50px -26px rgba(120,80,20,.45)}
.dm-mh{display:grid;grid-template-columns:52px 1fr;gap:8px;padding:10px 0;border-bottom:1px solid #F0EBE3;font-size:14px}
.dm-mh span{color:var(--mute)}.dm-mh b{font-weight:500}.dm-mh em{font-style:normal;color:var(--orange);font-weight:600}
.dm-mail p{font-size:14px;color:#5C564F;margin-top:12px}
.dm-vs{font-size:13px;color:#8A7A60}.dm-vs s{text-decoration-color:var(--orange);text-decoration-thickness:2px}
.dm-cle{position:relative;display:flex;align-items:center;transform:rotate(-8deg)}
.dm-anneau{width:70px;height:70px;border-radius:50%;border:7px solid #C9A86A;margin-right:-14px;box-shadow:0 10px 20px -10px rgba(0,0,0,.35)}
.dm-tete{width:76px;height:76px;border-radius:22px;background:var(--orange);color:#fff;display:grid;place-items:center;font-size:40px;z-index:1;box-shadow:0 16px 30px -12px rgba(150,50,10,.6)}
.dm-etiq{margin-left:-10px;background:#FFFDF9;padding:16px 20px 16px 26px;border-radius:6px 14px 14px 6px;display:grid;gap:2px;color:var(--ink);box-shadow:0 20px 40px -20px rgba(120,50,20,.5);clip-path:polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%)}
.dm-etiq small{font-size:12px;color:var(--mute)}.dm-etiq b{font:500 18px/1.1 "Geist Mono",monospace;letter-spacing:-.03em}.dm-etiq span{font-size:13px;color:var(--orange);font-weight:600}
@media (max-width:900px){.dm-etiq b{font-size:15px}.dm-tete{width:62px;height:62px;font-size:32px}.dm-anneau{width:56px;height:56px}}
.ck-1 .dm1,.ck-1 .dm2,.ck-1 .dm3,.ck-1 .dm4{padding:14px}
.dm-carte{width:280px;padding:18px 20px;gap:4px}.dm-carte b{font-size:19px}.dm-carte>i{margin:4px 0}
.dm-l{font-size:12px;white-space:nowrap}
.dm-cert{width:300px;padding:18px 20px 16px;gap:6px}.dm-cert b{font-size:17px;white-space:nowrap}.dm-cl{font-size:12px}
.dm-sceau{width:50px;height:50px;font-size:26px;right:-12px;bottom:-12px}
.dm-mail{width:300px;padding:4px 14px 12px}.dm-mh{padding:7px 0;font-size:12.5px;grid-template-columns:44px 1fr}.dm-mail p{font-size:12.5px;margin-top:8px}
.dm3{gap:8px}.dm-vs{font-size:12px}
.dm-etiq b{font-size:14px;white-space:nowrap}.dm-etiq{padding:12px 16px 12px 22px}
.dm-tete{width:58px;height:58px;font-size:30px;border-radius:18px}.dm-anneau{width:52px;height:52px;border-width:6px}
@media (max-width:900px){.dm-carte,.dm-cert,.dm-mail{width:min(300px,100%)}}
.dm-cert{padding-bottom:30px}.dm-sceau{bottom:-18px;right:-14px}
#compris .dm-tete i.ph-bold{color:#fff;font-size:30px}

/* ===== Nom de domaine, version simple (?cv=1..4) ===== */
.sd{display:grid;place-items:center;align-content:center;gap:12px;padding:20px}
.sd1,.sd3{background:var(--peche)}.sd2{background:var(--ink-3)}.sd4{background:var(--sable)}
.sd-url{display:flex;align-items:center;gap:10px;height:60px;padding:0 26px;border-radius:99px;background:#fff;color:var(--ink);font:500 20px/1 "Geist Mono",monospace;box-shadow:0 20px 40px -20px rgba(120,50,20,.45)}
.sd-url i{color:#1F9D55;font-size:16px}
.sd2 b{font:500 clamp(24px,2.3vw,32px)/1 "Geist Mono",monospace;letter-spacing:-.04em;color:#F4EEE4}
.sd2 b span{color:var(--orange)}
.sd-mail{font:18px/1 "Geist Mono",monospace;color:#8A5A40}
.sd-mail b{font-weight:500;color:var(--ink)}
.sd-tag{font:500 22px/1 "Geist Mono",monospace;color:var(--ink);letter-spacing:-.03em}
.sd-nom{display:flex;align-items:center;gap:6px;background:var(--orange);color:#fff;font-size:14px;font-weight:600;padding:8px 14px;border-radius:99px}
@media (max-width:900px){.sd-url{font-size:17px;height:52px;padding:0 20px}.sd-mail{font-size:16px}}

/* ===== Nom de domaine retenu : l'adresse mail, fond neutre ===== */
.ck-1 .sd3{background:var(--ink-3);gap:16px}
.sd-champ{display:flex;align-items:center;gap:14px;height:64px;padding:0 22px 0 8px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 24px 50px -24px rgba(0,0,0,.8)}
.sd-de{height:48px;padding:0 14px;border-radius:12px;background:#F2EEE8;display:grid;place-items:center;font-size:13px;font-weight:500;color:var(--mute)}
.ck-1 .sd-mail{font:500 18px/1 "Geist Mono",monospace;color:var(--mute);letter-spacing:-.02em}
.ck-1 .sd-mail b{color:var(--orange);font-weight:500}
.sd-cur{width:2px;height:24px;background:var(--orange);margin-left:-8px;animation:sd-cur 1s steps(2) infinite}
@keyframes sd-cur{50%{opacity:0}}
.sd-plutot{font-size:13px;color:#8D8780}
.sd-plutot s{text-decoration-color:var(--orange);text-decoration-thickness:1.5px}
@media (max-width:900px){.sd-champ{height:54px;gap:10px;padding:0 14px 0 6px}.sd-de{height:40px;padding:0 10px}.ck-1 .sd-mail{font-size:14px}}
@media (prefers-reduced-motion:reduce){.sd-cur{animation:none}}
.ck-1 .sd-mail{white-space:nowrap;font-size:15px}
.sd-champ{max-width:calc(100% - 8px);padding-right:16px;gap:10px}.sd-cur{margin-left:-6px;flex:none}
@media (max-width:900px){.ck-1 .sd-mail{font-size:13px}.sd-de{padding:0 8px;font-size:12px}}

/* ===== Tarifs : 4 variantes plus légères (?px=1..4), 0 = actuelle ===== */
.tk-inclus,.px-inc{display:none}
.tk-inclus .l span:last-child{color:var(--mute)}
/* 1. Épurée : options sans description, sans case visible lourde, lignes plus serrées */
[data-px="1"] #prix .dc-d small,[data-px="3"] #prix .dc-d small,[data-px="4"] #prix .dc-d small{display:none}
[data-px="1"] #prix .dl{padding-block:18px}
[data-px="1"] #prix .tk-inc{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;font-size:15px}
[data-px="1"] #prix .dc-lien{font-size:14px;color:var(--mute)}
/* 2. Tout sur le ticket : plus de liste à gauche, le ticket dit ce qui est inclus */
[data-px="2"] #prix .ps-c .dc-k,[data-px="2"] #prix .tk-inc{display:none}
[data-px="2"] #prix .tk-inclus{display:block}
[data-px="2"] #prix .ps14 .ps-imp{margin-top:0;min-height:520px}
/* 3. Une carte : les deux blocs fondus sur fond clair, inclus en une phrase */
[data-px="3"] #prix .px-inc,[data-px="4"] #prix .px-inc{display:block;text-align:center;max-width:62ch;margin:0 auto 32px;color:var(--mute);font-size:16px}
[data-px="3"] #prix .ps{gap:0;background:var(--gris);border-radius:var(--r-carte);padding:12px}
[data-px="3"] #prix .ps-c{background:var(--ink)}
[data-px="3"] #prix .ps-c>.dc-k,[data-px="3"] #prix .tk-inc{display:none}
[data-px="3"] #prix .dc-d{background:none}
[data-px="3"] #prix .ps14 .ps-imp{margin-top:0}
/* 4. Pastilles : options en pastilles à cocher, inclus en une phrase */
[data-px="4"] #prix .ps-c>.dc-k,[data-px="4"] #prix .tk-inc{display:none}
[data-px="4"] #prix .ps14 .ps-imp{margin-top:0}
[data-px="4"] #prix .dc-d{display:flex;flex-wrap:wrap;align-content:center;gap:10px}
[data-px="4"] #prix .dc-d>.dc-k{width:100%;margin-bottom:6px}
[data-px="4"] #prix .dl{display:inline-flex;align-items:center;gap:10px;width:auto;padding:12px 18px;border:1.5px solid #DDD6CC;border-radius:99px;background:#fff;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
[data-px="4"] #prix .dl input{position:absolute;opacity:0;pointer-events:none}
[data-px="4"] #prix .dl b{font-size:16px}
[data-px="4"] #prix .dl em{font-size:15px;padding:0;background:none;color:var(--mute)}
[data-px="4"] #prix .dl:has(input:checked){background:var(--ink);border-color:var(--ink);color:#fff}
[data-px="4"] #prix .dl:has(input:checked) em{color:var(--orange)}
[data-px="4"] #prix .dl:has(input:focus-visible){outline:2px solid var(--orange);outline-offset:2px}
[data-px="4"] #prix .dc-lien{width:100%;margin-top:14px}
@media (max-width:900px){[data-px="1"] #prix .tk-inc{grid-template-columns:1fr}}
[data-px] #prix .dl.sd>span{text-align:left;padding-left:0;margin-left:0}
[data-px="1"] #prix .dl>span,[data-px="3"] #prix .dl>span{text-align:left}
[data-px="2"] #prix .ps14 .ps-imp{min-height:440px}
[data-px="3"] #prix .px-inc,[data-px="4"] #prix .px-inc{margin-top:-24px}
@media (max-width:900px){[data-px="2"] #prix .ps-c,[data-px="3"] #prix .ps-c,[data-px="4"] #prix .ps-c{display:none}[data-px="3"] #prix .ps{padding:0;background:none}}
#prix .dl>span{justify-self:start}

/* ===== Tarifs retenus : une carte, inclus en pastilles, sous-lignes du ticket ===== */
#prix ul.px-inc{display:flex!important;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;max-width:none;margin:-20px auto 36px;padding:0}
#prix .px-inc li{display:flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:99px;background:var(--gris);font-size:15px;font-weight:500;color:var(--ink)}
#prix .px-inc li i{color:var(--orange);font-size:14px}
.recu .l.sous{padding-left:14px;opacity:.6;font-size:.88em;line-height:1.5;min-height:0}
.recu .l.sous span::before{content:"· "}
@media (max-width:900px){#prix ul.px-inc{margin:-12px auto 24px}#prix .px-inc li{height:34px;font-size:13.5px;padding:0 12px}}
@media (min-width:901px){#prix ul.px-inc{width:max-content;max-width:100%;flex-wrap:nowrap}}

/* ===== Tarifs, ce qui est compris (?inc=1..4) ===== */
#prix ul.px-inc{flex-wrap:wrap!important;width:auto!important;max-width:900px!important}
#prix .px-inc li{white-space:nowrap;flex:none}
.inc-p4{display:none}
/* 2. coches seules, sans fond */
[data-inc="2"] #prix .px-inc{gap:6px 26px}
[data-inc="2"] #prix .px-inc li{background:none;padding:0;height:auto;font-size:16px}
[data-inc="2"] #prix .px-inc li i{width:22px;height:22px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-size:12px}
/* 3. ligne de ticket : mono, pointillés */
[data-inc="3"] #prix .px-inc{gap:0;border-block:1.5px dashed #CFC6B8;padding:12px 6px}
[data-inc="3"] #prix .px-inc li{background:none;height:auto;padding:0 14px;font:500 13px/1.4 "Geist Mono",monospace;letter-spacing:.02em;text-transform:uppercase;color:#5C564F}
[data-inc="3"] #prix .px-inc li i{display:none}
[data-inc="3"] #prix .px-inc li+li::before{content:"·";color:var(--orange);margin-right:14px;font-weight:700}
/* 4. dans la phrase */
[data-inc="4"] #prix .px-inc,[data-inc="4"] #prix .inc-p{display:none!important}
[data-inc="4"] #prix .inc-p4{display:block;max-width:56ch;margin-inline:auto}
#prix .inc-p4 u{text-decoration:none;color:var(--ink);font-weight:500;background:linear-gradient(transparent 62%,rgba(255,90,31,.28) 62%)}
[data-inc="4"] #prix .ps{margin-top:8px}
@media (max-width:900px){[data-inc="3"] #prix .px-inc li{padding:2px 8px;font-size:11.5px}[data-inc="3"] #prix .px-inc li+li::before{margin-right:8px}[data-inc="2"] #prix .px-inc{gap:6px 16px}[data-inc="2"] #prix .px-inc li{font-size:14px}}
@media (max-width:900px){[data-inc="3"] #prix .px-inc{display:grid!important;grid-template-columns:1fr 1fr;gap:6px 0;text-align:center}[data-inc="3"] #prix .px-inc li::before{display:none}[data-inc="3"] #prix .px-inc li{white-space:normal}}

/* Tarifs : ce qui est compris, dans la phrase, comme le sous-titre du hero */
#prix .inc-p4{max-width:60ch;line-height:1.75}
#prix .inc-p4 .chip{font-weight:500}
#prix .inc-p4 .chip:not(.peche):not(.noir){background:var(--gris)}
#prix .inc-p4{font-size:18px;line-height:1.6;max-width:640px}#prix .inc-p4 .chip{font-weight:inherit}
@media (max-width:900px){#prix .inc-p4{font-size:16px;line-height:1.75}}

/* ===== Exemples, refaits : démo qui se remplit (?ex=1..4) ===== */
[data-ex="1"] .dx1,[data-ex="2"] .dx2,[data-ex="3"] .dx3,[data-ex="4"] .dx4{display:grid}
#exemples{--acc:#1F5FAD}
/* le téléphone */
.dm-tel{width:300px;height:620px;border-radius:50px;background:#0B0A09;padding:10px;box-shadow:0 0 0 1.5px #2A2622,0 50px 90px -40px rgba(26,18,8,.55);flex:none}
.dm-ecran{position:relative;height:100%;border-radius:41px;overflow:hidden;background:#fff}
.dm-ile{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:92px;height:26px;border-radius:99px;background:#0B0A09;z-index:3}
.dm-s{height:100%;display:flex;flex-direction:column;font-family:var(--texte);color:#16130F}
.dm-nav{display:flex;justify-content:space-between;align-items:center;padding:48px 18px 12px;font-size:15px}
.dm-nav b,.dm-pnav b{font-family:var(--titre);font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.dm-hero{position:relative;height:230px;margin:0 10px;border-radius:20px;background:center/cover;overflow:hidden;transition:background-image .3s}
.dm-voile{position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(0,0,0,.72))}
.dm-hx{position:absolute;left:16px;right:16px;bottom:16px;display:grid;gap:8px;color:#fff}
.dm-hx strong{font:600 22px/1.12 var(--titre);letter-spacing:-.02em}
.dm-av{justify-self:start;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;background:rgba(255,255,255,.92);color:#16130F;padding:4px 9px;border-radius:99px}
.dm-av i{color:#F5A623}
.dm-bts{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 10px}
.dm-call{display:flex;align-items:center;justify-content:center;gap:7px;height:46px;border-radius:99px;background:var(--acc);color:#fff;font-weight:600;font-size:15px;transition:background-color .3s}
.dm-cta2{display:flex;align-items:center;justify-content:center;height:46px;border-radius:99px;border:1.5px solid #E2DDD4;font-weight:500;font-size:14px;text-align:center;padding:0 8px}
.dm-serv{list-style:none;display:grid;gap:2px;padding:4px 10px}
.dm-serv li{display:flex;align-items:center;gap:10px;padding:10px 8px;border-bottom:1px solid #F0ECE6;font-size:14px}
.dm-serv i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 12%,#fff);color:var(--acc);font-size:16px}
.dm-hor{margin-top:auto;display:flex;align-items:center;gap:6px;padding:14px 18px 22px;font-size:13px;color:#5C564F}
.dm-hor i{width:7px;height:7px;border-radius:50%;background:#1E9E4A}
.dm-hor span:first-of-type{color:#188038;font-weight:500}
/* le navigateur */
.dm-nav-w{width:100%;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(20,17,14,.08),0 50px 90px -50px rgba(26,18,8,.5)}
.dm-barre{display:flex;align-items:center;gap:14px;height:44px;padding:0 16px;background:#F2EFEA}
.dm-barre .pt{display:flex;gap:6px}.dm-barre .pt i{width:10px;height:10px;border-radius:50%;background:#D8D2C8}
.dm-url{flex:1;max-width:420px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:6px;height:28px;border-radius:8px;background:#fff;font:13px/1 "Geist Mono",monospace;color:#3C3833}
.dm-url i{color:#1F9D55;font-size:11px}
.dm-page{font-family:var(--texte);color:#16130F}
.dm-pnav{display:flex;align-items:center;gap:26px;padding:18px 32px;font-size:14px;border-bottom:1px solid #F0ECE6}
.dm-pnav b{font-size:17px;margin-right:auto}
.dm-pnav .dm-call{height:38px;padding:0 16px;font-size:14px}
.dm-phero{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:32px}
.dm-ptx{display:grid;align-content:center;gap:16px}
.dm-ptx strong{font:600 clamp(26px,2.6vw,38px)/1.08 var(--titre);letter-spacing:-.025em}
.dm-ptx .dm-av{background:#F4F1EC}
.dm-ptx .dm-bts{padding:4px 0 0;max-width:360px}
.dm-pph{border-radius:18px;background:center/cover;min-height:280px}
.dm-page>.dm-serv{grid-template-columns:repeat(3,1fr);gap:12px;padding:0 32px 32px}
.dm-page>.dm-serv li{border:1px solid #F0ECE6;border-radius:14px;padding:14px}
/* les commandes */
.dm-champ{display:grid;gap:8px}
.dm-champ span{font-size:14px;font-weight:500;color:var(--mute)}
.dm-champ input{height:60px;border-radius:16px;border:1.5px solid #DDD6CC;background:#fff;padding:0 20px;font:500 20px/1 var(--titre);color:var(--ink);outline:none;transition:border-color .2s}
.dm-champ input:focus{border-color:var(--orange)}
.dm-mets{display:flex;flex-wrap:wrap;gap:8px}
.dm-mets button{height:44px;padding:0 18px;border-radius:99px;border:1.5px solid #DDD6CC;background:#fff;font-size:15px;font-weight:500;color:var(--ink);transition:background-color .2s,color .2s,border-color .2s}
.dm-mets button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.dm-leg{font-size:13px;color:var(--mute)}
/* 1. champ et téléphone */
.dx1{grid-template-columns:minmax(0,1fr) auto;gap:64px;align-items:center;background:var(--gris);border-radius:var(--r-carte);padding:56px 64px}
.dx1-g{display:grid;gap:22px;max-width:440px}
.dx1-d{display:grid;place-items:center}
/* 2. phrase à compléter */
.dx2{gap:36px;justify-items:center}
.dx2-phrase{font:500 clamp(26px,3vw,42px)/1.35 var(--titre);letter-spacing:-.02em;text-align:center;max-width:24ch}
.dx2-in{position:relative;display:inline-grid}
.dx2-in::after{content:attr(data-v);visibility:hidden;white-space:pre;grid-area:1/1;padding:0 6px}
.dx2-in input{grid-area:1/1;width:100%;min-width:4ch;border:0;border-bottom:3px solid var(--orange);background:none;font:inherit;color:var(--orange);text-align:center;outline:none;padding:0 6px}
.dx2 select{font:inherit;color:var(--orange);border:0;border-bottom:3px solid var(--orange);background:none;padding:0 4px;cursor:pointer;appearance:none}
.dx2-scene{position:relative;width:100%;padding-right:140px}
.dx2-scene .dm-tel{position:absolute;right:0;bottom:-40px;transform:scale(.82);transform-origin:bottom right}
/* 3. navigateur */
.dx3{gap:24px}
.dx3-h{display:flex;flex-wrap:wrap;align-items:end;gap:16px 24px}
.dx3-h .dm-champ{flex:1;min-width:280px;max-width:460px}
/* 4. démo qui tourne */
.dx4{grid-template-columns:auto minmax(0,1fr);gap:72px;align-items:center;background:var(--ink);color:#fff;border-radius:var(--r-carte);padding:56px 64px}
.dx4-x{display:grid;gap:22px;max-width:440px}
.dx4-k{font:600 clamp(30px,3vw,44px)/1.05 var(--titre);letter-spacing:-.03em}
.dx4 .dm-champ span,.dx4 .dm-leg{color:#B9B3AA}
.dx4 .dm-champ input{background:var(--ink-3);border-color:#3A332C;color:#fff}
.dx4 .dm-mets button{background:var(--ink-3);border-color:#3A332C;color:#D9D3CB}
.dx4 .dm-mets button[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#fff}
.dx4-t.chg .dm-s{animation:dx4-in .5s var(--ease)}
@keyframes dx4-in{from{opacity:0;transform:translateY(10px)}}
@media (max-width:900px){
  .dx1,.dx4{grid-template-columns:minmax(0,1fr);gap:32px;padding:28px 20px}
  .dx1-d{order:-1}.dx4-tels{display:grid;place-items:center}
  .dm-tel{width:270px;height:560px}
  .dx2-scene{padding-right:0}.dx2-scene .dm-nav-w{display:none}.dx2-scene .dm-tel{position:static;transform:none;margin:0 auto}
  .dm-pnav span{display:none}.dm-pnav{gap:12px;padding:14px 16px}
  .dm-phero{grid-template-columns:minmax(0,1fr);padding:16px;gap:16px}.dm-pph{min-height:180px;order:-1}
  .dm-page>.dm-serv{grid-template-columns:minmax(0,1fr);padding:0 16px 16px}
  .dm-champ input{height:54px;font-size:18px}
}
@media (prefers-reduced-motion:reduce){.dx4-t.chg .dm-s{animation:none}}
.dx2-in::after{display:none}.dx2-in input{width:auto;max-width:80vw}
.dx2-phrase{max-width:none}
.dx2-scene{padding-right:200px}
@media (max-width:900px){.dx2-scene{padding-right:0}.dx2-phrase{font-size:24px}}

/* ===== L'atelier : qui fait le site (à la place des réalisations, en attendant les premiers clients) ===== */
.at{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px;align-items:stretch}
.at-photo{min-height:460px;border-radius:var(--r-carte);background:var(--gris) center/cover;display:grid;place-items:center}
.at-photo span{font:500 13px/1 "Geist Mono",monospace;color:var(--mute);letter-spacing:.06em;text-transform:uppercase}
.at-t{background:var(--ink);color:#F0F0F0;border-radius:var(--r-carte);padding:56px;display:grid;align-content:center;justify-items:start;gap:20px}
.at-t .titre-2{color:#fff;max-width:16ch;margin:0}
.at-t p{font-size:18px;line-height:1.6;color:#B9B3AA;max-width:46ch}
.at-t .btn{margin-top:8px}
@media (max-width:900px){.at{grid-template-columns:minmax(0,1fr)}.at-photo{min-height:300px}.at-t{padding:32px 24px}.at-t p{font-size:16px}}
.at-t .btn.noir{background:var(--orange);color:#fff}

/* ===== Exemples : trois sites de commerces, façon réalisations ===== */
.rz-g{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto auto;gap:12px}
.rz{display:grid;grid-template-rows:1fr auto;gap:14px;color:var(--ink)}
.rz0{grid-row:span 2}
.rz-ph{position:relative;border-radius:var(--r-carte);background:#ddd center/cover;min-height:300px;overflow:hidden}
.rz0 .rz-ph{min-height:640px}
.rz-ph::after{content:"";position:absolute;inset:0;background:rgba(20,17,14,0);transition:background-color .3s ease}
.rz:hover .rz-ph::after{background:rgba(20,17,14,.12)}
.rz-tel{position:absolute;right:24px;bottom:-40px;width:150px;aspect-ratio:9/19;border-radius:26px;border:6px solid #0B0A09;background:#fff top/cover;box-shadow:0 30px 50px -20px rgba(0,0,0,.6);z-index:1;transition:transform .4s var(--ease)}
.rz0 .rz-tel{width:200px;bottom:-60px;right:36px}
.rz:hover .rz-tel{transform:translateY(-18px)}
.rz-t{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:end;padding:0 4px}
.rz-t b{display:block;font:600 22px/1.15 var(--titre);letter-spacing:-.02em}
.rz-t span{font-size:14px;color:var(--mute)}
.rz-t small{grid-column:1;font-size:14px;color:var(--mute)}
.rz-t em{grid-column:2;grid-row:1/3;font-style:normal;font-weight:500;font-size:15px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.rz-t em i{width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;transition:background-color .2s,transform .3s var(--ease)}
.rz:hover .rz-t em i{background:var(--orange);transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.rz-tel,.rz-t em i{transition:none}}
@media (max-width:900px){.rz-g{grid-template-columns:minmax(0,1fr)}.rz0{grid-row:auto}.rz0 .rz-ph,.rz-ph{min-height:360px}.rz-tel,.rz0 .rz-tel{width:120px;right:18px;bottom:-30px}}

/* ===== Étapes, 4 variantes (?et=0..4) ===== */
.ety{display:none}
[data-et="0"] .ety0,[data-et="1"] .ety1,[data-et="2"] .ety2,[data-et="3"] .ety3,[data-et="4"] .ety4{display:grid}
[data-et="0"] #etapes .entete-section{display:none}
.ety0>section{padding:0!important}
/* 1. ticket de suivi */
.ety1{justify-items:center}
.et1-fente{width:min(560px,100%);height:14px;border-radius:7px;background:var(--ink);box-shadow:inset 0 3px 4px rgba(0,0,0,.9);position:relative;z-index:2}
.et1-sortie{width:min(500px,calc(100% - 40px));margin-top:-7px;overflow:hidden;clip-path:inset(0 -60px -200px -60px)}
.et1-tk{background:#FFFDF9;padding:32px 28px 40px;font-family:"Geist Mono",monospace;color:var(--ink);box-shadow:0 30px 50px -24px rgba(26,18,8,.35);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%}
#etapes.joue .et1-tk{animation:et1-imp 2.4s linear both}
@keyframes et1-imp{from{transform:translateY(-100%)}}
.et1-h{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:14px;border-bottom:1.5px dashed #D8D0C4}
.et1-h b{font:600 18px/1 var(--titre)}.et1-h span{font-size:12px;color:var(--mute)}
.et1-l{display:grid;grid-template-columns:34px 1fr auto;gap:12px;padding:16px 0;border-bottom:1px dashed #E6DFD4;align-items:start}
.et1-n{font-size:13px;color:var(--orange);font-weight:600;padding-top:3px}
.et1-l b{font:600 17px/1.2 var(--titre);display:block}
.et1-l p{font:14px/1.5 var(--texte);color:#5C564F;margin-top:4px}
.et1-l>i{color:var(--orange);font-size:18px;padding-top:2px}
.et1-f{margin-top:18px;text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
/* 2. frise */
.ety2{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;position:relative}
.et2-ligne{position:absolute;left:26px;right:26px;top:26px;height:2px;background:#E2DDD4}
.et2-ligne i{position:absolute;inset:0;background:var(--orange);transform:scaleX(0);transform-origin:left}
#etapes.joue .et2-ligne i{transition:transform 2s var(--ease) .2s;transform:scaleX(1)}
.et2-c{position:relative;display:grid;gap:8px;align-content:start}
.et2-pt{width:54px;height:54px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:22px;margin-bottom:14px}
.et2-c:last-child .et2-pt{background:var(--orange)}
.et2-c small{font:500 12px/1 "Geist Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.et2-c b{font:600 24px/1.15 var(--titre);letter-spacing:-.02em}
.et2-c p{font-size:16px;line-height:1.55;color:var(--mute)}
/* 3. cartes empilées */
.ety3{gap:0;max-width:880px;margin:0 auto;width:100%}
.et3-c{position:sticky;top:calc(110px + var(--k) * 18px);display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;background:var(--gris);border-radius:var(--r-carte);padding:40px;margin-bottom:28px;min-height:200px;box-shadow:0 -14px 30px -20px rgba(26,18,8,.25)}
.et3-c:nth-child(even){background:var(--ink);color:#fff}.et3-c:nth-child(even) p{color:#B9B3AA}
.et3-c:last-child{background:var(--orange);color:#fff}.et3-c:last-child p{color:#fff;opacity:.9}
.et3-n{font:600 64px/1 var(--titre);letter-spacing:-.04em;opacity:.25}
.et3-c b{font:600 28px/1.15 var(--titre);letter-spacing:-.02em;display:block}
.et3-c p{font-size:17px;line-height:1.55;color:var(--mute);margin-top:6px;max-width:44ch}
.et3-c>i{font-size:34px}
/* 4. conversation */
.ety4{grid-template-columns:auto minmax(0,1fr);gap:64px;align-items:center;max-width:1040px;margin:0 auto;width:100%}
.et4-tel{width:330px;height:640px;border-radius:52px;background:#0B0A09;padding:10px;box-shadow:0 0 0 1.5px #2A2622,0 50px 90px -40px rgba(26,18,8,.55)}
.et4-ec{height:100%;border-radius:43px;background:#F4F1EC;overflow:hidden;display:flex;flex-direction:column}
.et4-h{display:flex;align-items:center;gap:10px;padding:44px 18px 12px;background:#fff;border-bottom:1px solid #ECE7E0}
.et4-av{width:36px;height:36px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font:700 16px/1 var(--titre)}
.et4-h b{font-size:15px}.et4-h small{display:block;font-size:11px;color:var(--mute)}
.et4-fil{display:flex;flex-direction:column;gap:8px;padding:14px 12px;overflow:hidden}
.et4-m{max-width:82%;padding:10px 13px;border-radius:18px;font-size:13.5px;line-height:1.4}
.et4-m.l{align-self:flex-start;background:#fff;border-bottom-left-radius:6px}
.et4-m.r{align-self:flex-end;background:var(--orange);color:#fff;border-bottom-right-radius:6px}
.et4-et{align-self:center;font:500 10px/1 "Geist Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding:6px 0}
#etapes.joue .et4-fil>*{animation:et4-in .4s var(--ease) both}
#etapes.joue .et4-fil>*:nth-child(1){animation-delay:.1s}#etapes.joue .et4-fil>*:nth-child(2){animation-delay:.5s}#etapes.joue .et4-fil>*:nth-child(3){animation-delay:1.1s}#etapes.joue .et4-fil>*:nth-child(4){animation-delay:1.5s}#etapes.joue .et4-fil>*:nth-child(5){animation-delay:2.1s}#etapes.joue .et4-fil>*:nth-child(6){animation-delay:2.5s}#etapes.joue .et4-fil>*:nth-child(7){animation-delay:3s}#etapes.joue .et4-fil>*:nth-child(8){animation-delay:3.4s}#etapes.joue .et4-fil>*:nth-child(9){animation-delay:3.9s}#etapes.joue .et4-fil>*:nth-child(10){animation-delay:4.3s}
@keyframes et4-in{from{opacity:0;transform:translateY(10px) scale(.97)}}
.et4-x{display:grid;gap:22px}
.et4-x b{font:600 22px/1.2 var(--titre);letter-spacing:-.02em}
.et4-x p{font-size:16px;line-height:1.55;color:var(--mute);margin-top:4px}
@media (prefers-reduced-motion:reduce){#etapes.joue *{animation:none!important;transition:none!important}.et2-ligne i{transform:none}}
@media (max-width:900px){
  .ety2{grid-template-columns:minmax(0,1fr);gap:28px}.et2-ligne{left:26px;right:auto;width:2px;top:26px;bottom:26px;height:auto}.et2-ligne i{transform:scaleY(0);transform-origin:top}#etapes.joue .et2-ligne i{transform:scaleY(1)}
  .et2-c{padding-left:76px;min-height:54px}.et2-pt{position:absolute;left:0;top:0;margin:0}
  .et3-c{grid-template-columns:minmax(0,1fr);gap:10px;padding:28px 24px;top:calc(76px + var(--k) * 14px)}.et3-n{font-size:44px}.et3-c>i{display:none}.et3-c b{font-size:23px}
  .ety4{grid-template-columns:minmax(0,1fr);gap:32px;justify-items:center}.et4-tel{width:300px;height:600px}
  .et1-l b{font-size:16px}
}
.et4-fil{flex:1;justify-content:flex-end}

/* ===== Conversation, 4 variantes (?cn=1..4) ===== */
.cnv{display:none}
[data-cn="1"] .cnv1,[data-cn="2"] .cnv2,[data-cn="3"] .cnv3,[data-cn="4"] .cnv4{display:block}
#etapes.joue .et4-fil>*:nth-child(11){animation-delay:4.7s}#etapes.joue .et4-fil>*:nth-child(12){animation-delay:5.1s}
/* 1. SMS : bulles bleues iOS côté artisan, grises côté Lucien */
.sms .et4-ec{background:#fff}
.sms .et4-m.l{background:#E9E9EB;color:#111}
.sms .et4-m.r{background:#0A84FF}
/* 2. WhatsApp */
.wa .et4-ec{background:#EFE7DD}
.wa .et4-h{background:#075E54;color:#fff;border:0}.wa .et4-h small{color:#BFE3DC}.wa .et4-av{background:var(--orange)}
.wa .et4-m.l{background:#fff;color:#111}
.wa .et4-m.r{background:#D9FDD3;color:#111}
.wa .et4-m.ph{padding:4px}.wa .et4-m.ph span{display:block;width:170px;height:110px;border-radius:12px;background:center/cover}
.et4-lien{display:grid;gap:2px;background:rgba(0,0,0,.06);border-left:3px solid #25D366;border-radius:8px;padding:8px 10px;margin-bottom:6px}
.et4-lien b{font-size:13px}.et4-lien small{font-size:11px;color:#667}
.wa .et4-et{background:#E1F2FB;color:#456;border-radius:8px;padding:5px 9px;font-size:9.5px}
/* 3. journal d'appels */
.appels .et4-ec{background:#fff}
.et4-h.ap{padding:48px 18px 10px;border:0}.et4-h.ap b{font:700 28px/1 -apple-system,var(--titre)}
.appels .et4-fil{justify-content:flex-start;gap:0;padding:0 14px}
.et4-ap{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:14px 4px;border-bottom:1px solid #EEE}
.et4-ic{width:36px;height:36px;border-radius:50%;background:#F1F1F3;color:#34C759;display:grid;place-items:center;font-size:17px}
.et4-ap b{font-size:15px;display:block}.et4-ap small{font-size:12.5px;color:#666;line-height:1.35;display:block;margin-top:2px}
.et4-ap em{font-style:normal;font-size:11px;color:#999;white-space:nowrap}
.et4-ap:nth-child(even) .et4-ic{color:var(--orange)}
/* 4. le soir : fond sombre, heures visibles */
.soir .et4-ec{background:#1C1C1E}
.soir .et4-h{background:#2C2C2E;border-color:#3A3A3C;color:#fff}.soir .et4-h small{color:#8E8E93}
.soir .et4-m.l{background:#3A3A3C;color:#fff}
.soir .et4-et{color:#8E8E93}
.ety.ety4{display:grid}
/* Conversation vue depuis le téléphone de l'artisan : ses messages à droite, Lucien à gauche */
.cnv .et4-m.l{align-self:flex-end;border-radius:18px;border-bottom-right-radius:6px}
.cnv .et4-m.r{align-self:flex-start;border-radius:18px;border-bottom-left-radius:6px}
.sms .et4-m.l{background:#0A84FF;color:#fff}.sms .et4-m.r{background:#E9E9EB;color:#111}
.wa .et4-m.l{background:#D9FDD3;color:#111}.wa .et4-m.r{background:#fff;color:#111}
.soir .et4-m.l{background:#0A84FF;color:#fff}.soir .et4-m.r{background:#3A3A3C;color:#fff}
.sms .et4-fil,.wa .et4-fil,.soir .et4-fil{gap:6px}

/* ===== Photos envoyées (?pw=1..4) et texte à droite (?tx=1..4) ===== */
.cnv2{display:block!important}.cnv1,.cnv3,.cnv4{display:none!important}
.pwv,.txv{display:none}
[data-pw="1"] .pw1,[data-pw="2"] .pw2,[data-pw="3"] .pw3,[data-pw="4"] .pw4{display:block}
[data-tx="1"] .tx1w,[data-tx="2"] .tx2w,[data-tx="3"] .tx3w,[data-tx="4"] .tx4w{display:grid;gap:22px}
.pw-site{display:grid;gap:3px;background:#fff;border-radius:12px;overflow:hidden;margin-bottom:8px;padding-bottom:8px}
.pw-site span{height:90px;background:center/cover}.pw-site b{padding:4px 10px 0;font-size:14px}.pw-site small{padding:0 10px;font-size:11.5px;color:#666}
.et4-m.voc{display:flex;align-items:center;gap:10px;min-width:210px}
.et4-m.voc>i{width:30px;height:30px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;font-size:13px;flex:none}
.pw-onde{display:flex;align-items:center;gap:2px;flex:1}.pw-onde i{width:3px;border-radius:2px;background:#5F8F67}
.et4-m.voc small{font-size:11px;color:#5F8F67}
.et4-m.alb{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:4px}
.et4-m.alb span{width:84px;height:84px;border-radius:8px;background:center/cover;position:relative}
.et4-m.alb .plus::after{content:"";position:absolute;inset:0;border-radius:8px;background:rgba(0,0,0,.45)}
.et4-m.alb .plus b{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:20px;z-index:1}
/* textes */
.tx2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tx2>div{background:var(--gris);border-radius:20px;padding:26px}
.tx2>div:first-child{background:var(--orange);color:#fff}
.tx2 small{font:500 12px/1 "Geist Mono",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.tx2 ul{list-style:none;display:grid;gap:12px;margin-top:16px;font-size:17px;line-height:1.4}
.tx2 li{display:flex;gap:10px}.tx2 li::before{content:"✓";font-weight:700}
.tx2>div:last-child li::before{color:var(--orange)}
.tx3 h3,.tx4 h3{font:600 clamp(28px,2.8vw,40px)/1.08 var(--titre);letter-spacing:-.03em}
.tx3 p{font-size:17px;line-height:1.55;color:var(--mute);padding-top:14px;border-top:1px solid #E7E1DA}
.tx3 b{color:var(--ink);font-weight:600}
.tx4 ol{list-style:none;counter-reset:n;display:grid;gap:10px}
.tx4 li{counter-increment:n;display:flex;align-items:center;gap:14px;font-size:18px;font-weight:500}
.tx4 li::before{content:"0" counter(n);width:40px;height:40px;border-radius:50%;background:var(--gris);display:grid;place-items:center;font:500 13px/1 "Geist Mono",monospace}
.tx4 li:last-child::before{background:var(--orange);color:#fff}
@media (max-width:900px){.tx2{grid-template-columns:minmax(0,1fr)}}
.wa .et4-m.ph span{width:150px;height:84px}
.wa .et4-m{font-size:13px;padding:8px 11px}
.et4-m.alb span{width:66px;height:66px}
.pw-site span{height:64px}
.wa .et4-lien{padding:6px 9px;margin-bottom:4px}
.et4-tel.wa{height:680px}

/* ===== Fournil (?fv=1..4) et étapes (?te=1..4) ===== */
.pwv,.txv{display:block!important}
.fvv,.tev{display:none}
[data-fv="1"] .fv1,[data-fv="2"] .fv2,[data-fv="3"] .fv3,[data-fv="4"] .fv4{display:block}
[data-te="1"] .te1w,[data-te="2"] .te2w,[data-te="3"] .te3w,[data-te="4"] .te4w{display:grid;gap:22px}
.te1w b{font:600 22px/1.2 var(--titre);letter-spacing:-.02em}.te1w p{font-size:16px;line-height:1.55;color:var(--mute);margin-top:4px}
/* fournil 2 : capture longue */
.et4-m.fv-cap{padding:5px;background:#fff!important}
.fv-long{display:grid;gap:6px;width:200px;background:#FBF6EE;border-radius:12px;padding:8px;color:#3B2416}
.fv-lh{display:flex;justify-content:space-between;align-items:center;font-size:12px}.fv-lh b{font-family:Georgia,serif}.fv-lh i{color:#B5652B}
.fv-lp{height:120px;border-radius:60px 60px 10px 10px;background:center/cover}
.fv-lt{font:600 15px/1.15 Georgia,serif}
.fv-lb{background:#B5652B;color:#fff;border-radius:99px;font-size:11px;font-weight:600;text-align:center;padding:7px}
.fv-lr{display:flex;justify-content:space-between;font-size:10.5px;border-top:1px dashed #E5D9C8;padding-top:6px}
/* fournil 3 : heures et coches */
.fv3 .et4-m em{display:block;text-align:right;font-style:normal;font-size:10px;color:#8A9A8F;margin-top:3px}
.fv3 .et4-m.l em{color:#53BDEB}
.fv-doc{display:flex;gap:10px;align-items:center;background:rgba(0,0,0,.05);border-radius:10px;padding:9px;margin-bottom:6px}
.fv-doc>i{font-size:28px;color:#E5483B}.fv-doc b{display:block;font-size:12.5px}.fv-doc small{font-size:11px;color:#777}
/* fournil 4 : grandes photos */
.wa .et4-m.ph.grand span{width:230px;height:160px}
/* étapes 2 : gros chiffres */
.te2{display:grid;gap:4px}
.te2-l{display:grid;grid-template-columns:90px 1fr;gap:16px;align-items:start;padding:16px 0;border-bottom:1px solid #E7E1DA}
.te2-l>span{font:600 56px/.9 var(--titre);letter-spacing:-.05em;color:var(--orange)}
.te2-l b{font:600 22px/1.2 var(--titre);letter-spacing:-.02em}.te2-l p{font-size:16px;line-height:1.5;color:var(--mute);margin-top:4px}
/* étapes 3 : votre part */
.te3{display:grid;gap:18px}
.te3-l b{font:600 21px/1.2 var(--titre);letter-spacing:-.02em}.te3-l p{font-size:15.5px;line-height:1.5;color:var(--mute);margin:4px 0 8px}
.te3-l small{display:inline-flex;align-items:center;gap:6px;background:#FFE7DA;color:#8A3A14;font-size:13.5px;font-weight:500;padding:5px 11px;border-radius:99px}
/* étapes 4 : cartes */
.te4{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.te4-c{background:var(--gris);border-radius:20px;padding:22px;display:grid;gap:6px;align-content:start}
.te4-c span{font:500 12px/1 "Geist Mono",monospace;color:var(--orange)}
.te4-c b{font:600 19px/1.2 var(--titre);letter-spacing:-.02em}.te4-c p{font-size:14.5px;line-height:1.5;color:var(--mute)}
.te4-c.o{background:var(--orange);color:#fff}.te4-c.o span,.te4-c.o p{color:#fff}
@media (max-width:900px){.te4{grid-template-columns:1fr}.te2-l{grid-template-columns:60px 1fr}.te2-l>span{font-size:40px}}

/* ===== Fin de conversation (?ln=1..4) et cartes (?cr=1..4) ===== */
.fvv,.tev{display:block!important}
.lnv,.crv{display:none}
[data-ln="1"] .ln1,[data-ln="2"] .ln2,[data-ln="3"] .ln3,[data-ln="4"] .ln4{display:block}
[data-cr="1"] .crw1,[data-cr="2"] .crw2,[data-cr="3"] .crw3,[data-cr="4"] .crw4{display:block}
/* en-tête WhatsApp plus fin, nom plus haut */
.wa .et4-h{padding:18px 14px 9px;gap:9px}
.wa .et4-av{width:30px;height:30px;font-size:13px}
.wa .et4-h b{font-size:14px}.wa .et4-h small{font-size:10.5px}
.lnv .et4-m em{display:block;text-align:right;font-style:normal;font-size:10px;color:#8A9A8F;margin-top:3px}
.lnv .et4-m.l em{color:#53BDEB}
.ln-url{display:grid;grid-template-columns:44px 1fr;gap:2px 10px;align-items:center;background:rgba(0,0,0,.05);border-radius:10px;padding:7px;margin-bottom:6px}
.ln-url>span{grid-row:span 2;width:44px;height:44px;border-radius:8px;background:center/cover}
.ln-url b{font:500 12.5px/1.1 "Geist Mono",monospace}.ln-url small{display:flex;align-items:center;gap:5px;font-size:11px;color:#1E9E4A}.ln-url small i{width:6px;height:6px;border-radius:50%;background:#1E9E4A}
.ln-g{display:grid;gap:6px;background:#fff;border-radius:10px;padding:8px;margin-bottom:6px;box-shadow:inset 0 0 0 1px #EEE}
.ln-q{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#444;border:1px solid #E3E3E3;border-radius:99px;padding:5px 9px}
.ln-res{display:grid;border-left:3px solid var(--orange);padding:2px 8px}.ln-res b{font-size:12.5px;color:#1A0DAB}.ln-res small{font-size:10.5px;color:#666}
/* cartes */
.te4-c{position:relative;overflow:hidden}
.cr2 .te4-c{padding-top:64px}
.cr-ic{position:absolute;left:22px;top:22px;width:34px;height:34px;border-radius:10px;background:#fff;color:var(--ink);display:grid;place-items:center;font-size:17px}
.cr-gros{position:absolute;right:14px;top:6px;font:600 64px/1 var(--titre);letter-spacing:-.05em;font-style:normal;color:rgba(20,17,14,.08)}
.cr2 .te4-c.o .cr-gros{color:rgba(255,255,255,.25)}.cr2 .te4-c.o .cr-ic{color:var(--orange)}
.cr3 .te4-c{background:var(--ink);color:#fff}.cr3 .te4-c p{color:#B9B3AA}.cr3 .te4-c.o{background:var(--orange)}.cr3 .te4-c.o p{color:#fff}
.cr4 .te4-c small{margin-top:6px;justify-self:start;background:#fff;color:var(--ink);font-size:12.5px;font-weight:500;padding:5px 10px;border-radius:99px}
.cr4 .te4-c.o small{color:var(--orange)}

.lnv.ln2,.crv.crw1{display:block!important}

/* ===== Comparatif, 4 variantes (?vsx=1..4) ===== */
.vsv{display:none}
[data-vsx="1"] .vs1w,[data-vsx="2"] .vs2w,[data-vsx="3"] .vs3w,[data-vsx="4"] .vs4w{display:block}
/* 2. tableau */
.vs2{max-width:1000px;margin:56px auto 0;text-align:left}
.vs2-h,.vs2-r{display:grid;grid-template-columns:.8fr 1.1fr 1.1fr;gap:12px;align-items:center}
.vs2-h>span{height:60px;border-radius:12px;display:grid;place-items:center;font-size:16px;color:#B9B3AA}
.vs2-h>span:nth-child(2){background:#1C1916}
.vs2-h .o{background:var(--orange);color:#fff}.vs2-h .o svg{height:20px;fill:currentColor}
.vs2-r{padding:22px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:17px}
.vs2-r b{font-weight:500;color:#8D8780;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.vs2-r span{display:flex;gap:10px;color:#B9B3AA;padding:0 16px}.vs2-r span i{font-style:normal}
.vs2-r .o{color:#fff;font-weight:500}.vs2-r .o i{color:var(--orange)}
/* 3. deux papiers */
.vs3{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1000px;margin:56px auto 0;align-items:center;text-align:left}
.vs3-doc{position:relative;background:#E9E4DC;color:#3C3833;border-radius:6px;padding:34px 32px;transform:rotate(-2deg);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.vs3-doc small{font:500 11px/1 "Geist Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:#7A736A}
.vs3-doc b{display:block;font:600 18px/1.2 Georgia,serif;margin:16px 0 12px}
.vs3-doc p{font:13px/1.5 Georgia,serif;margin:12px 0}
.vs3-l{display:grid;gap:8px}.vs3-l i{display:block;height:6px;border-radius:3px;background:#CFC8BD}
.vs3-tampon{position:absolute;right:26px;top:40%;border:3px solid #C0392B;color:#C0392B;font:700 18px/1 var(--titre);letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border-radius:6px;transform:rotate(-12deg);opacity:.85}
.vs3-tk{background:#FFFDF9;color:var(--ink);padding:26px 24px 34px;font-family:"Geist Mono",monospace;transform:rotate(2deg);box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%}
.vs3-tt{padding-bottom:14px;border-bottom:1.5px dashed #D8D0C4;margin-bottom:8px}.vs3-tt svg{height:22px;fill:var(--ink)}
.vs3-ll{display:flex;justify-content:space-between;padding:8px 0;font-size:15px}
.vs3-ll.tt{border-top:1.5px dashed #D8D0C4;margin-top:8px;padding-top:14px;font-weight:600}
/* 4. le jour où vous partez */
.vs4{max-width:820px;margin:56px auto 0;display:grid;justify-items:center;gap:24px}
.vs4-q{font:500 clamp(22px,2.2vw,30px)/1.25 var(--titre);color:#D9D3CB}
.vs4-sw{display:inline-flex;background:#1C1916;border-radius:99px;padding:5px;gap:4px}
.vs4-sw button{height:50px;padding:0 24px;border-radius:99px;font-size:16px;font-weight:500;color:#B9B3AA;transition:background-color .25s,color .25s}
.vs4-sw button[aria-selected="true"]{background:#fff;color:var(--ink)}
.vs4.lu .vs4-sw button[aria-selected="true"]{background:var(--orange);color:#fff}
.vs4-p{display:grid;width:100%}
.vs4-c{grid-area:1/1;display:grid;grid-template-columns:1fr 1fr;gap:10px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s,transform .3s var(--ease),visibility .3s}
.vs4-c.on{opacity:1;visibility:visible;transform:none}
.vs4-c>div{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;text-align:left;background:#1C1916;border-radius:18px;padding:22px}
.vs4-c i{grid-row:span 2;font-style:normal;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#2A2420;color:#B9B3AA}
.vs4-c b{font-size:18px;font-weight:600;color:#fff}.vs4-c span{color:#8D8780;font-size:15px}
.vs4-c[data-vs="1"] i{background:var(--orange);color:#fff}.vs4-c[data-vs="1"]>div{background:#2A2420}
@media (max-width:900px){
  .vs2-h,.vs2-r{grid-template-columns:1fr 1fr}.vs2-h>span:first-child,.vs2-r b{grid-column:1/-1}.vs2-h>span:first-child{display:none}.vs2-r span{padding:0;font-size:15px}
  .vs3{grid-template-columns:1fr;gap:32px}.vs4-c{grid-template-columns:1fr}.vs4-sw button{padding:0 16px;font-size:15px}
}

/* ===== Comparatif : 4 « actuel » (a1..a4) et 4 « tableau » (t1..t4) ===== */
.vsv{display:none!important}
[data-vsx="a1"] .vsa1,[data-vsx="a2"] .vsa2,[data-vsx="a3"] .vsa3,[data-vsx="a4"] .vsa4,[data-vsx="t1"] .vst1,[data-vsx="t2"] .vst2,[data-vsx="t3"] .vst3,[data-vsx="t4"] .vst4{display:block!important}
.vsv ul{list-style:none;display:grid;gap:20px;font-size:18px}.vsv li{display:flex;gap:12px;align-items:baseline}.vsv li i{font-style:normal;flex:none}
.vsv small svg{height:20px;fill:currentColor;vertical-align:middle}
/* a2 cartes */
.ac2{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1100px;margin:56px auto 0;text-align:left}
.ac2>div{border-radius:24px;padding:40px;display:grid;gap:26px;align-content:start}
.ac2-a{background:#1C1916;color:#8D8780}.ac2-a small{font-size:15px}
.ac2-b{background:#fff;color:var(--ink);box-shadow:0 0 0 3px var(--orange);transform:translateY(-12px)}.ac2-b small{color:var(--orange)}.ac2-b small svg{height:24px}.ac2-b i{color:var(--orange)}
.ac2-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font:700 15px/1 var(--titre);z-index:1;box-shadow:0 0 0 6px var(--ink)}
/* a3 barré */
.ac3{display:grid;grid-template-columns:1fr 1fr;gap:64px;max-width:1000px;margin:56px auto 0;text-align:left}
.ac3 small{display:block;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#8D8780;margin-bottom:24px}.ac3-b small{color:var(--orange)}.ac3-b small svg{height:22px}
.ac3-a li{color:#6E6760;font-size:20px}.ac3-a s{text-decoration-color:var(--orange);text-decoration-thickness:2px}
.ac3-b li{color:#fff;font-size:22px;font-weight:500}
.ac3-b li i{width:30px;height:30px;border-radius:50%;background:var(--orange);display:grid;place-items:center;font-size:14px;align-self:center}
/* a4 gros titres */
.ac4{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1100px;margin:56px auto 0;text-align:left}
.ac4>div{border-radius:24px;padding:40px;display:grid;gap:16px;align-content:start}
.ac4 b{font:600 clamp(28px,2.8vw,40px)/1.05 var(--titre);letter-spacing:-.03em}
.ac4 small{font-size:14px;opacity:.7;margin-bottom:10px}
.ac4-a{background:#1C1916;color:#8D8780}.ac4-a b{color:#B9B3AA}
.ac4-b{background:var(--orange);color:#fff}.ac4-b li{color:#fff}
/* t2 colonne Lucien surlignée */
.tb2{position:relative;max-width:1000px;margin:56px auto 0;text-align:left}
.tb2-col{position:absolute;top:-14px;bottom:-14px;right:0;width:calc((100% - 24px) * 1.1 / 3);border-radius:20px;background:var(--orange);display:grid;align-content:start;justify-items:center;padding-top:28px}
.tb2-h svg{height:22px;fill:#fff}
.tb2 .vs2-h .o,.tb2 .vs2-h>span:nth-child(2){background:none}
.tb2 .vs2-r{position:relative;border-color:rgba(255,255,255,.1)}
.tb2 .vs2-r .o i{color:#fff}
/* t3 ticket */
.tb3{max-width:880px;margin:56px auto 0;background:#FFFDF9;color:var(--ink);padding:34px 36px 44px;font-family:"Geist Mono",monospace;text-align:left;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/18px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/18px 100%}
.tb3-h,.tb3-r{display:grid;grid-template-columns:.8fr 1.1fr 1.1fr;gap:16px;padding:14px 0;border-bottom:1.5px dashed #D8D0C4;font-size:15px}
.tb3-h{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}.tb3-h span:last-child{color:var(--orange)}
.tb3-r span:first-child{color:var(--mute)}.tb3-r span:nth-child(2){color:#8D8780;text-decoration:line-through;text-decoration-color:rgba(255,90,31,.6)}.tb3-r span:last-child{font-weight:600}
.tb3-f{margin-top:22px;text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
/* t4 lignes avec icône */
.tb4{max-width:880px;margin:56px auto 0;display:grid;gap:10px;text-align:left}
.tb4-r{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;background:#1C1916;border-radius:20px;padding:22px 26px}
.tb4-ic{width:52px;height:52px;border-radius:14px;background:var(--orange);color:#fff;display:grid;place-items:center;font-size:24px}
.tb4-t small{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8D8780}
.tb4-t b{display:block;font:600 24px/1.2 var(--titre);color:#fff;letter-spacing:-.02em;margin:2px 0}
.tb4-t span{font-size:15px;color:#8D8780}
@media (max-width:900px){.ac2,.ac3,.ac4{grid-template-columns:1fr;gap:16px}.ac2-vs{display:none}.ac2-b{transform:none}.ac2>div,.ac4>div{padding:28px}
  .tb2-col{display:none}.tb3{padding:24px 18px 36px}.tb3-h,.tb3-r{grid-template-columns:1fr 1fr;font-size:13px}.tb3-h span:first-child,.tb3-r span:first-child{grid-column:1/-1}.tb3-h span:first-child{display:none}}

/* ===== Comparatif « gros titres », 4 variantes (b1..b4) ===== */
[data-vsx="b1"] .vsb1,[data-vsx="b2"] .vsb2,[data-vsx="b3"] .vsb3,[data-vsx="b4"] .vsb4{display:block!important}
.b2>div{padding:48px 44px;gap:14px}.b2 b{font-size:clamp(34px,3.6vw,52px)}.b2 p{font-size:17px;line-height:1.5;opacity:.85;max-width:32ch}
.b2 small{opacity:.7}.b2 .ac4-b small svg{height:22px;fill:#fff}
.b3-p{display:flex;flex-wrap:wrap;gap:8px}
.b3-p span{display:flex;gap:7px;align-items:center;padding:9px 14px;border-radius:99px;font-size:15px}
.b3-p i{font-style:normal}
.ac4-a .b3-p span{background:#26211C;color:#8D8780}
.ac4-b .b3-p span{background:rgba(255,255,255,.18);color:#fff;font-weight:500}
.b4{max-width:1100px;margin:56px auto 0;display:grid;gap:12px;text-align:left}
.b4-a{display:grid;grid-template-columns:auto 1fr;gap:6px 32px;align-items:center;background:#1C1916;border-radius:20px;padding:22px 28px;color:#8D8780}
.b4-a small{grid-column:1;font-size:13px}.b4-a b{grid-column:1;font:600 20px/1.2 var(--titre);color:#B9B3AA}
.b4-a ul{grid-column:2;grid-row:1/3;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:15px}.b4-a li{text-decoration:line-through;text-decoration-color:rgba(255,90,31,.6)}
.b4-b{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;background:var(--orange);color:#fff;border-radius:24px;padding:48px}
.b4-b small svg{height:22px;fill:#fff}.b4-b b{display:block;margin-top:12px;font:600 clamp(36px,4vw,60px)/1 var(--titre);letter-spacing:-.04em}
.b4-b ul{gap:14px;font-size:19px;font-weight:500}.b4-b li i{font-style:normal}
@media (max-width:900px){.b4-a,.b4-b{grid-template-columns:1fr;gap:16px;padding:24px}.b4-a ul{grid-column:1;grid-row:auto}}

/* ===== Comparatif gros titres, qui est qui (c1..c4), sans croix ni coches ===== */
[data-vsx="c1"] .vsc1,[data-vsx="c2"] .vsc2,[data-vsx="c3"] .vsc3,[data-vsx="c4"] .vsc4{display:block!important}
.gc{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1100px;margin:56px auto 0;text-align:left}
.gc>div{position:relative;border-radius:24px;padding:40px;display:grid;gap:18px;align-content:start}
.ga{background:#1C1916;color:#8D8780}.gb{background:var(--orange);color:#fff}
.gch{font:600 clamp(28px,2.8vw,40px)/1.05 var(--titre);letter-spacing:-.03em}.ga .gch{color:#B9B3AA}
.gc ul{list-style:none;display:grid;gap:0;font-size:17px}
.gc li{padding:13px 0;border-top:1px solid rgba(255,255,255,.1)}.gb li{border-color:rgba(255,255,255,.3);font-weight:500}
.gl svg,.gtab svg,.gc3-h svg{height:1em;fill:currentColor;vertical-align:-.12em}
/* 1 étiquette */
.gc1 .gl{justify-self:start;font-size:14px;font-weight:600;padding:8px 14px;border-radius:99px}
.gc1 .ga .gl{background:#2E2823;color:#D9D3CB}.gc1 .gb .gl{background:#fff;color:var(--orange);font-size:16px}
/* 2 en titre */
.gc2 .gl{font:600 22px/1.1 var(--titre);letter-spacing:-.02em;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.12)}
.gc2 .ga .gl{color:#D9D3CB}.gc2 .gb .gl{border-color:rgba(255,255,255,.35)}
.gc2 .gch{font-size:clamp(22px,2vw,28px);opacity:.85}
/* 3 au-dessus */
.gc3{max-width:1100px;margin:56px auto 0}
.gc3-h{display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:left}
.gc3-h span{font:600 clamp(22px,2.2vw,30px)/1 var(--titre);letter-spacing:-.02em;color:#8D8780;padding:0 8px}
.gc3-h .o{color:var(--orange)}
.gc3c{margin-top:16px}
/* 4 onglet */
.gc4{margin-top:84px}
.gtab{position:absolute;left:28px;top:-40px;height:42px;padding:0 20px;border-radius:14px 14px 0 0;display:flex;align-items:center;font-size:15px;font-weight:600}
.ga .gtab{background:#1C1916;color:#D9D3CB}.gb .gtab{background:var(--orange);color:#fff;font-size:17px}
@media (max-width:900px){.gc,.gc3-h{grid-template-columns:1fr}.gc3-h{display:none}.gc3c .ga::before{content:"Ailleurs, en général";font:600 18px/1 var(--titre);color:#D9D3CB}.gc3c .gb::before{content:"Chez Lucien";font:600 18px/1 var(--titre)}.gc>div{padding:28px}.gc4{gap:60px}}

.gl svg,.gtab svg,.gc3-h svg{display:inline-block}
.gc2 .gl{display:block}

/* ===== Onglet, 4 variantes (d1..d4) ===== */
[data-vsx="d1"] .vsd1,[data-vsx="d2"] .vsd2,[data-vsx="d3"] .vsd3,[data-vsx="d4"] .vsd4{display:block!important}
.otab svg,.od3-t svg{display:inline-block;height:1em;fill:currentColor;vertical-align:-.12em}
.od1,.od2,.od4{margin-top:96px}
.od1>div,.od2>div,.od4>div{border-top-left-radius:0}
.otab{position:absolute;left:0;bottom:100%;display:flex;align-items:center;gap:6px;height:48px;padding:0 24px;border-radius:18px 18px 0 0;font-size:15px;font-weight:600;white-space:nowrap}
.otab::after{content:"";position:absolute;left:100%;bottom:0;width:20px;height:20px;background:radial-gradient(circle at 100% 0,transparent 19.5px,var(--tab) 20px)}
.ga .otab{--tab:#1C1916;background:#1C1916;color:#D9D3CB}.gb .otab{--tab:var(--orange);background:var(--orange);color:#fff;font-size:17px}
/* 2 dossier épais : feuilles derrière le contrat classique */
.od2 .ga{z-index:auto}
.od2-p{position:absolute;left:10px;right:-10px;top:10px;bottom:-10px;border-radius:0 24px 24px 24px;background:#E9E4DC;z-index:-1;opacity:.14}
.od2-p:nth-child(3){left:20px;right:-20px;top:20px;bottom:-20px;opacity:.1}.od2-p:nth-child(4){left:30px;right:-30px;top:30px;bottom:-30px;opacity:.06}
.od2-pg{justify-self:end;font:500 12px/1 "Geist Mono",monospace;opacity:.7}
.od2 .gb{transform:rotate(1deg)}
/* 3 classeur : deux onglets côte à côte sur un même panneau */
.od3{max-width:1100px;margin:56px auto 0;text-align:left}
.od3-t{display:grid;grid-template-columns:1fr 1fr;gap:0}
.od3-t span{height:58px;display:flex;align-items:center;padding:0 32px;border-radius:20px 20px 0 0;font:600 18px/1 var(--titre)}
.od3-t .a{background:#1C1916;color:#D9D3CB}.od3-t .b{background:var(--orange);color:#fff;font-size:22px}
.od3-p{display:grid;grid-template-columns:1fr 1fr;border-radius:0 0 24px 24px;overflow:hidden}
.od3-p>div{padding:40px;display:grid;gap:18px;align-content:start}
.od3-p ul{list-style:none;font-size:17px}.od3-p li{padding:13px 0;border-top:1px solid rgba(255,255,255,.1)}.od3-p .gb li{border-color:rgba(255,255,255,.3);font-weight:500}
/* 4 grands onglets */
.od4{margin-top:120px}
.od4 .otab{height:72px;padding:0 30px;font:600 clamp(20px,2vw,28px)/1 var(--titre);letter-spacing:-.02em;border-radius:24px 24px 0 0}
.od4 .gb .otab{font-size:clamp(24px,2.4vw,34px)}
.od4 .otab::after{width:24px;height:24px;background:radial-gradient(circle at 100% 0,transparent 23.5px,var(--tab) 24px)}
@media (max-width:900px){.od1,.od2,.od4{gap:76px;margin-top:76px}.otab{max-width:calc(100% - 20px)}.od4 .otab{height:56px;font-size:19px}.od4 .gb .otab{font-size:22px}
  .od3-t,.od3-p{grid-template-columns:1fr}.od3-t{display:none}.od3-p{border-radius:24px}.od3-p .ga::before{content:"Un contrat de site classique";font:600 17px/1 var(--titre);color:#D9D3CB}.od3-p .gb::before{content:"Lucien";font:600 20px/1 var(--titre)}.od2-p{display:none}}
.od2-p{opacity:1!important;background:#26211C}.od2-p:nth-child(3){background:#211C18}.od2-p:nth-child(4){background:#1A1613}.od3-t span{position:relative}.od3-t .b{margin-left:-1px}
.od2{isolation:isolate}.od2-p{background:#3A332C!important}.od2-p:nth-child(3){background:#2E2823!important}.od2-p:nth-child(4){background:#26211C!important}

/* ===== Raccordé, 4 variantes (e1..e4) ===== */
[data-vsx="e1"] .vse1,[data-vsx="e2"] .vse2,[data-vsx="e3"] .vse3,[data-vsx="e4"] .vse4{display:block!important}
/* 2 avec icônes, onglet plus haut */
.e2 .otab{height:56px;padding:0 26px;gap:10px;font-size:16px}.e2 .gb .otab{font-size:19px}
.e2 .otab i{font-size:20px}.e2 .ga .otab i{color:#8D8780}
.e2 .gch{font-size:clamp(32px,3.2vw,46px)}
/* 3 en miroir : onglets vers l'extérieur */
.e3 .gb{border-top-left-radius:24px;border-top-right-radius:0}
.e3 .gb .otab{left:auto;right:0}
.e3 .gb .otab::after{left:auto;right:100%;background:radial-gradient(circle at 0 0,transparent 19.5px,var(--tab) 20px)}
.e3 .gb{text-align:right}.e3 .gb .gch{justify-self:end}
/* 4 carte blanche : Lucien en blanc, onglet orange */
.e4 .gb{background:#FFFDF9;color:var(--ink)}.e4 .gb .gch{color:var(--ink)}
.e4 .gb li{border-color:#ECE6DC;color:var(--ink)}
.e4 .gb .otab{--tab:#FFFDF9;background:#FFFDF9;color:var(--orange)}
.e4 .gb .gch{background:linear-gradient(transparent 62%,rgba(255,90,31,.3) 62%);justify-self:start}
.e3 .gb{text-align:left}.e3 .gb .gch{justify-self:start}

/* ===== Onglet Lucien, 4 variantes (f1..f4) ===== */
[data-vsx="f1"] .vsf1,[data-vsx="f2"] .vsf2,[data-vsx="f3"] .vsf3,[data-vsx="f4"] .vsf4{display:block!important}
.e2 .otab svg{overflow:visible}
.f1 .gb .otab{height:62px;padding:0 28px}.f1 .gb .otab svg{height:26px}.f1 .gb .otab i{font-size:22px}
.f2 .otab{height:62px;padding:0 30px}.f2 .gb .otab svg{height:30px}.f2 .ga .otab{font-size:17px}
.f3 .gb .otab{height:62px;padding:0 26px;gap:10px}.f3 .gb .otab svg{height:24px}
.f3 .otab em{font-style:normal;font-size:13px;font-weight:500;background:rgba(255,255,255,.2);padding:4px 10px;border-radius:99px;margin-left:4px}
.f4 .otab{height:62px;width:62%;justify-content:center;padding:0 20px}.f4 .gb .otab svg{height:28px}.f4 .gb .otab i{font-size:22px}
@media (max-width:900px){.f4 .otab{width:auto}.f3 .otab em{display:none}}

/* Comparatif retenu : onglets raccordés de même taille, logo Lucien */
.fin .otab,.fin .ga .otab,.fin .gb .otab{height:58px;padding:0 26px;font:600 19px/1 var(--titre);letter-spacing:-.01em}
.fin .gb .otab svg{height:22px}
@media (max-width:900px){.fin .otab,.fin .ga .otab,.fin .gb .otab{height:50px;padding:0 20px;font-size:16px}.fin .gb .otab svg{height:19px}}
.fin .gb .otab svg{height:14px}
@media (max-width:900px){.fin .gb .otab svg{height:12px}}

/* Citation, 4 variantes */
.qv{display:none}[data-q="1"] .q1,[data-q="2"] .q2,[data-q="3"] .q3,[data-q="4"] .q4{display:block}
.qv .citation{text-align:left}
.qa-q{font:600 24px/1.2 var(--titre);color:#fff;letter-spacing:-.02em;margin-bottom:10px}
.qa blockquote{font-size:18px}
.citation .qa-q{color:#fff!important;font:600 24px/1.2 var(--titre)!important;margin:0 0 10px!important;padding:0!important}
.citation.qa{grid-template-columns:160px 1fr!important;display:grid!important;padding:10px!important}

/* ===== Citation, 4 mises en page ===== */
.qv blockquote{margin:0}
.cl2{max-width:900px;margin:120px auto 0;text-align:center;display:grid;justify-items:center;gap:28px}
.cl2 blockquote{font:500 clamp(26px,2.8vw,40px)/1.3 var(--titre);letter-spacing:-.02em;color:#F0EBE4}
.cl2-s{display:flex;align-items:center;gap:14px}
.cl2 .ph,.cl3 .ph,.cl4 .ph{background:var(--ink-3) url(img/portrait.jpg) center/cover}
.cl2 .ph{width:52px;height:52px;border-radius:50%}
.qv cite{display:flex;gap:10px;align-items:baseline;font-style:normal}.qv cite b{color:#fff;font:500 20px/1 var(--titre)}.qv cite span{color:#B9B3AA;font-size:14px}
.cl3{max-width:1100px;margin:120px auto 0;display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center;text-align:left}
.cl3 .ph{aspect-ratio:4/5;border-radius:var(--r-carte)}
.cl3 blockquote{font:500 clamp(26px,2.6vw,38px)/1.3 var(--titre);letter-spacing:-.02em;color:#F0EBE4;margin-bottom:28px}
.cl4{max-width:880px;margin:120px auto 0;display:grid;grid-template-columns:auto 1fr;gap:0;align-items:center;text-align:left}
.cl4-pola{background:#FFFDF9;padding:12px 12px 16px;transform:rotate(-4deg);box-shadow:0 30px 50px -20px rgba(0,0,0,.8);z-index:1;margin-right:-30px}
.cl4-pola .ph{display:block;width:200px;height:220px}
.cl4-pola small{display:block;margin-top:10px;font:500 13px/1 "Geist Mono",monospace;color:var(--mute);text-align:center}
.cl4-note{background:#FFFDF9;color:var(--ink);padding:44px 48px 44px 70px;border-radius:6px;transform:rotate(1deg)}
.cl4-note blockquote{font:500 22px/1.45 var(--titre);letter-spacing:-.01em;margin-bottom:20px}
.cl4-note cite b{color:var(--ink)}.cl4-note cite span{color:var(--mute)}
@media (max-width:900px){.cl3,.cl4{grid-template-columns:1fr;gap:24px}.cl3 .ph{aspect-ratio:4/3}.cl4-pola{margin:0 auto -24px;justify-self:center}.cl4-note{padding:44px 24px 28px}.cl2,.cl3,.cl4{margin-top:80px}}

/* ===== FAQ, 4 variantes (?fq=1..4) ===== */
.fqv{display:none}[data-fq="1"] .fq1w,[data-fq="2"] .fq2w,[data-fq="3"] .fq3w,[data-fq="4"] .fq4w{display:block}
.fq2{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start;max-width:1200px;margin:0 auto}
.fq2-g{position:sticky;top:110px;display:grid;gap:22px;justify-items:start}
.fq2-g p{font:500 clamp(22px,2vw,28px)/1.3 var(--titre);letter-spacing:-.02em}
.fq2 .faq{max-width:none;margin:0}
.fq3{display:grid;gap:44px;max-width:900px;margin:0 auto}
.fq3-g h3{font:500 13px/1 "Geist Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin-bottom:6px}
.fq3 .faq{max-width:none;margin:0}
.fq4{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:1200px;margin:0 auto}
.fq4-c{background:var(--gris);border-radius:20px;padding:26px;display:grid;gap:10px;align-content:start}
.fq4-c b{font:600 19px/1.25 var(--titre);letter-spacing:-.01em}
.fq4-c p{font-size:15.5px;line-height:1.55;color:var(--mute)}
@media (max-width:900px){.fq2{grid-template-columns:1fr;gap:28px}.fq2-g{position:static}.fq4{grid-template-columns:1fr}}
@media (min-width:901px) and (max-width:1100px){.fq4{grid-template-columns:1fr 1fr}}

/* ===== Pied de page façon Bee (?bf=1..4) ===== */
.pied .bee-form{grid-template-columns:1.2fr .8fr;gap:56px;align-items:end}
.bee-pourquoi p{font-size:18px;line-height:1.55;color:#B9B3AA;max-width:38ch}
.bee{--bg:#14110E;--fg:#F0EBE4;--mu:#8D8780;--lg:var(--orange);margin-top:120px;background:var(--bg);color:var(--fg);border-radius:var(--r-carte);overflow:hidden;padding:36px 40px 0;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.bee-h{display:grid;grid-template-columns:1fr auto auto;gap:40px;align-items:start}
.bee-nav{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 28px;font-size:16px}
.bee-nav a,.bee-c a{color:var(--fg);text-decoration:none;transition:color .2s}.bee-nav a:hover,.bee-c a:hover{color:var(--lg)}
.bee-c{display:grid;gap:6px;font-size:16px}.bee-c span{color:var(--mu)}
.bee-bt{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 22px 0 6px;border-radius:99px;background:var(--lg);color:#fff;font:500 16px/1 var(--titre);text-decoration:none;white-space:nowrap}
.bee-bt .rond{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--lg);display:grid;place-items:center}
.bee-bt .rond svg{width:16px;height:16px}
.bee-g{margin:56px -6px -4.2vw;color:var(--lg);line-height:0}
.bee-g svg{width:100%;height:auto;fill:currentColor;display:block}
[data-bf] .pied .legal{margin-top:28px}
/* 2. orange */
[data-bf="2"] .bee{--bg:var(--orange);--fg:#fff;--mu:rgba(255,255,255,.75);--lg:var(--ink)}
[data-bf="2"] .bee-bt{background:var(--ink)}[data-bf="2"] .bee-bt .rond{color:var(--ink)}
/* 3. crème */
[data-bf="3"] .bee{--bg:#F4EEE4;--fg:var(--ink);--mu:#6E6A64;--lg:var(--orange)}
/* 4. coupé : le logo est tranché par le bas de la carte, plus gros */
[data-bf="4"] .bee-g{margin:40px -10px -9vw}
[data-bf="4"] .bee{padding-bottom:0}
@media (max-width:900px){
  .pied .bee-form{grid-template-columns:minmax(0,1fr);gap:24px}
  .bee{padding:26px 22px 0;margin-top:72px}
  .bee-h{grid-template-columns:1fr;gap:24px}
  .bee-nav{grid-template-columns:repeat(2,auto)}
  .bee-g{margin:36px -4px -5vw}[data-bf="4"] .bee-g{margin:28px -6px -10vw}
}
.pied .bee-form{grid-template-columns:minmax(0,640px)!important}

/* ===== Contact du pied, compact (?ap=1..4) ===== */
.pied{padding-top:var(--sec)!important}
.pied .bee-form{display:none}
.apv{display:none}[data-ap="1"] .apw1,[data-ap="2"] .apw2,[data-ap="3"] .apw3,[data-ap="4"] .apw4{display:block}
#formulaire h2{font:600 clamp(32px,3.4vw,50px)/1.05 var(--titre);letter-spacing:-.03em;color:#fff}
#formulaire p{font-size:17px;line-height:1.5;color:#B9B3AA;margin-top:12px;max-width:44ch}
.ap-f{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ap-f input{background:#2A2520;border:0;border-radius:12px;height:52px;padding:0 16px;color:#fff;font:400 15px var(--texte);min-width:0}
.ap-f input::placeholder{color:#8D8780}.ap-f input:focus{outline:1.5px solid var(--orange)}
.ap-f button{grid-column:1/-1;height:52px;border-radius:12px;background:var(--orange);color:#fff;font:500 16px/1 var(--titre);transition:background-color .2s ease,transform .16s var(--ease)}
.ap-f button:hover{background:var(--orange-f)}.ap-f button:active{transform:scale(.98)}
.ap1{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ap2{text-align:center;display:grid;justify-items:center}.ap2 p{margin-inline:auto}
.ap-f.ligne{grid-template-columns:repeat(4,minmax(0,1fr)) auto;width:100%;margin-top:28px}.ap-f.ligne button{grid-column:auto;padding:0 24px;white-space:nowrap}
.ap3{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;background:var(--orange);border-radius:var(--r-carte);padding:40px}
.ap3 p{color:#fff!important;opacity:.9}
.ap3-k{display:inline-block;font:500 12px/1 "Geist Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:#fff;opacity:.85;margin-bottom:14px}
.ap3 .ap-f input{background:rgba(255,255,255,.18);color:#fff}.ap3 .ap-f input::placeholder{color:rgba(255,255,255,.8)}
.ap3 .ap-f button{background:var(--ink)}.ap3 .ap-f button:hover{background:#000}
.ap4{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:end}
.ap4-tel{display:block;margin-top:14px;font:600 clamp(36px,4.4vw,64px)/1 var(--titre);letter-spacing:-.03em;color:var(--orange);text-decoration:none}
.ap-f.court{grid-template-columns:1fr}
@media (max-width:900px){.ap1,.ap3,.ap4{grid-template-columns:minmax(0,1fr);gap:24px}.ap3{padding:26px}.ap-f.ligne{grid-template-columns:1fr 1fr}.ap-f.ligne button{grid-column:1/-1}}

/* ===================================================================
   Passe finale : typographie, animations (principes Emil Kowalski)
   =================================================================== */
/* Plus aucun mot seul en fin de ligne, titres équilibrés */
p,li,blockquote,summary,small,figcaption,dd,.fq4-c p{text-wrap:pretty}
h1,h2,h3,h4,.titre-2,.gch,.dx2-phrase,.cl2 blockquote{text-wrap:balance}
/* Apparition au scroll : plus courte, plus nette */
.rv{transition:opacity .6s cubic-bezier(.23,1,.32,1),transform .6s cubic-bezier(.23,1,.32,1);transform:translateY(12px)}
/* Léger décalage entre éléments voisins qui apparaissent ensemble */
.rv+.rv{transition-delay:60ms}.rv+.rv+.rv{transition-delay:120ms}
/* Retour au toucher sur tout ce qui se presse */
.bee-bt,.rz,.dm-mets button,.hd-nav a,.ey3-nav button,.vs4-sw button,.cq3-tabs button{transition-property:transform,background-color,color,border-color;transition-duration:160ms;transition-timing-function:cubic-bezier(.23,1,.32,1)}
.bee-bt:active,.ap-f button:active,.faq summary:active,.rz:active{transform:scale(.98)}
/* Survols qui déplacent : seulement avec une vraie souris */
@media (hover:none),(pointer:coarse){
  .rz:hover .rz-tel,.rz:hover .rz-t em i{transform:none}
}
/* FAQ : la réponse apparaît en douceur */
.faq details[open] p{animation:faq-in .22s cubic-bezier(.23,1,.32,1)}
@keyframes faq-in{from{opacity:0;transform:translateY(-4px)}}
.faq summary .plus{transition:transform .2s cubic-bezier(.23,1,.32,1)}
/* Mouvement réduit : on garde les fondus, on retire les déplacements */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .rv{transform:none!important}
}
/* Uniformisation : titres de section, gris de texte */
.sombre h2.rv,.pied #formulaire h2{font-size:clamp(34px,3.6vw,52px)!important;font-weight:500!important;letter-spacing:-.03em;line-height:1.08}
.hb p,.hb2 p{color:var(--mute)}
.recu{--gris-r:#6E6A64}
.recu .tete-f span:last-child,.recu .note-f span,.recu .hd-col span{color:var(--mute)}
.hero .photo{background-image:url(img/hero-plombier.jpg)!important;background-position:55% 45%!important}
/* Recette : 901-1100 px, les cartes « compris » passent empilées pour ne pas chevaucher */
@media (min-width:901px) and (max-width:1100px){
  .ck4{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:auto!important}
  .ck4 .ck-0,.ck4 .ck-3{grid-column:auto!important}
  .ck4-c{display:grid;gap:20px;padding:28px 24px 0!important}
  .ck4 .ck-ill,.ck4 .ck-0 .ck-ill,.ck4 .ck-1 .ck-ill,.ck4 .ck-2 .ck-ill,.ck4 .ck-3 .ck-ill{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:auto!important;height:300px!important;margin:0 -24px!important;border-radius:0 0 var(--r-carte) var(--r-carte)}
  .ck4 .ck-t{max-width:none!important}
}
.qv cite,.cl2-s cite{gap:10px}.cl2-s cite b{margin-right:4px}

/* Formulaire branché (13/10) */
.ap-f .piege{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ap-msg{grid-column:1/-1;margin:4px 0 0;font:400 14px/1.45 var(--texte);color:#CFC8BF;min-height:0}
.ap-msg:empty{display:none}.ap-msg.err{color:#FFB199}
.ap-f button[disabled]{opacity:.6;cursor:progress}
.legal a{color:inherit;text-decoration:underline;text-underline-offset:3px}