/* Direction : galerie blanche. Noir, blanc, gris. Une seule famille sans-serif.
     Pas de dore, pas de creme, pas de serif : c'est le produit (les scenes peintes) qui apporte la couleur. */
  :root{
    --bg:#ffffff; --bg-2:#f4f4f2; --ink:#0d0d0d; --muted:#6e6e6e; --line:#e3e3e0;
    --btn:#0d0d0d; --btn-ink:#ffffff;
  }
  /* un seul theme, clair, quel que soit le reglage du telephone */
  :root{color-scheme:light}

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 Inter,-apple-system,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
  a{color:inherit}
  img{display:block;max-width:100%}
  .wrap{max-width:1200px;margin:0 auto;padding:0 16px}
  @media (min-width:720px){ .wrap{padding:0 32px} }
  h1,h2,h3{font-family:"Inter Tight",Inter,-apple-system,"Helvetica Neue",Arial,sans-serif;font-weight:500;letter-spacing:-.03em;line-height:1.02;margin:0}
  .label{font:500 12px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px;border:1px solid var(--ink);border-radius:0;
       font:500 15px/1 Inter,sans-serif;text-decoration:none;cursor:pointer;background:transparent;color:var(--ink)}
  .btn.solid{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
  .btn:hover{opacity:.85}
  section{padding:88px 0;border-top:1px solid var(--line)}
  .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px;margin-bottom:40px}
  .head h2,.head h1.h2{font-size:clamp(32px,5vw,56px);max-width:14em}
  .head p{max-width:26em;color:var(--muted);margin:0}

  /* nav */
  nav{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
  nav .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
  /* marque : « Save the Oui ». « Save the » en capitales espacées, « Oui » en calligraphie, comme les prénoms d'un faire-part */
  .logo{display:inline-flex;align-items:baseline;gap:7px;text-decoration:none;color:var(--ink);white-space:nowrap}
  .logo span{font:500 12px/1 "Inter Tight",Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase}
  .logo b{font:400 27px/1 "Great Vibes",cursive;letter-spacing:0;position:relative;top:1px}
  .logo.small{font-size:13px;color:var(--muted)} .logo.small span{font-size:11px} .logo.small b{font-size:22px;color:var(--ink)}
  nav .links{display:flex;gap:28px;align-items:center;font-size:14px}
  nav .links a:not(.btn){text-decoration:none;color:var(--muted)}
  nav .btn{height:38px;padding:0 16px;font-size:14px}
  nav .btn em{display:none;font-style:normal}
  @media (max-width:720px){ nav .btn span{display:none} nav .btn em{display:inline} }

  /* hero : le texte a gauche, le telephone a droite ; sur mobile, le telephone vient juste apres le titre, puis les boutons */
  .hero{padding:48px 0 72px;border-top:0}
  .hero .grid{display:grid;grid-template-columns:1.2fr .8fr;grid-template-areas:"copy car" "more car";gap:0 48px;align-items:center}
  .hero-copy{grid-area:copy;align-self:end}
  .hero-more{grid-area:more;align-self:start}
  .car{grid-area:car}
  @media (max-width:900px){ .hero .grid{grid-template-columns:1fr;grid-template-areas:"copy" "car" "more";gap:0} .hero-copy{margin-bottom:28px} }
  .hero h1{font-size:clamp(44px,7.4vw,88px);max-width:8.5em}
  .hero p{color:var(--muted);font-size:18px;max-width:30em;margin:28px 0 0}
  .hero .ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
  .facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:56px;border-top:1px solid var(--line)}
  .facts div{padding:18px 16px 0 0}
  .facts b{display:block;font:500 28px/1 "Inter Tight",Inter,sans-serif;letter-spacing:-.02em}
  .facts span{font-size:13px;color:var(--muted)}

  /* haut de page : un seul téléphone qui fait défiler tous nos faire-part (ex-deux colonnes). Le téléphone,
     qui passe tout seul d'un exemple à l'autre (flèches pour choisir, toucher pour ouvrir la démo). */
  .car{--car-w:min(260px,62vw);justify-self:center;width:100%;max-width:600px;min-width:0}
  .duo{display:grid;grid-template-columns:1fr;gap:18px;align-items:stretch}
  .duo-col{min-width:0;text-align:center;display:flex;flex-direction:column}
  .hero .duo-k{margin:0;color:var(--ink);font:500 clamp(16px,2vw,20px)/1.2 "Inter Tight",Inter,sans-serif;letter-spacing:-.01em}
  .hero .duo-s{flex:1;margin:6px auto 0;max-width:17em;font-size:13px;line-height:1.45;color:var(--muted)}
  .duo-ph{position:relative;width:min(var(--car-w),100%);aspect-ratio:9/19.5;margin:16px auto 0;flex:none}
  .car-item{position:absolute;inset:0;display:block;border-radius:32px;overflow:hidden;border:7px solid #111;background:#111;box-shadow:0 30px 50px -30px rgba(0,0,0,.5);
    color:#fff;text-decoration:none;opacity:0;pointer-events:none;transition:opacity .7s ease;-webkit-tap-highlight-color:transparent}
  .car-item.on{opacity:1;pointer-events:auto}
  .film{position:absolute;left:0;top:0;width:100%;height:400%;display:flex;flex-direction:column;will-change:transform;transition:transform .85s cubic-bezier(.3,0,.2,1)}
  .car-item[data-f="1"] .film{transform:translateY(-25%)}
  .car-item[data-f="2"] .film{transform:translateY(-50%)}
  .car-item[data-f="3"] .film{transform:translateY(-75%)}
  .film .pv-sc{height:25%;flex:none}
  .film .pv-sc>.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  /* faire-part en continu : un seul long tableau, que le telephone descend lentement tout seul */
  .roll{position:absolute;inset:0;overflow:hidden}
  .roll img{display:block;width:100%;height:auto;will-change:transform;animation:rollPan 16s cubic-bezier(.45,.05,.55,.95) infinite alternate;animation-play-state:paused}
  .car-item.on .roll img{animation-play-state:running}
  @keyframes rollPan{0%,6%{transform:translateY(0)}94%,100%{transform:translateY(calc(var(--car-w) * 19.5 / 9 - 14px - 100%))}}
  .roll-txt{position:absolute;left:0;right:0;top:11%;text-align:center;padding:0 8%}
  .roll-txt .ey{font:500 10px/1 Inter,sans-serif;letter-spacing:.24em;text-transform:uppercase;opacity:.92}
  /* « Bismillah » s'écrit en arabe, en calligraphie (ligature basmala « ﷽ » d'Amiri), comme dans le faire-part (invite.css, .ey.ar) */
  .ey.ar{font:400 clamp(22px,6.6vw,29px)/1.5 "Amiri","Scheherazade New",serif!important;letter-spacing:0!important;text-transform:none!important;direction:rtl;white-space:nowrap}
  .roll-txt .ey.ar{font-size:calc(var(--car-w) * .066)!important}
  .roll-txt .nm{margin:10px 0 6px;line-height:1.05}
  .roll-txt .tx{font:italic 400 clamp(13px,1.8vh,16px)/1.35 "Cormorant Garamond",Georgia,serif}
  @media (prefers-reduced-motion:reduce){ .roll img{animation:none} }
  /* pourquoi nous, et pas un modele, un studio, une IA */
  .why{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
  @media (max-width:820px){ .why{grid-template-columns:1fr} }
  .why div{padding:22px 28px 26px 0;border-bottom:1px solid var(--line);min-width:0}
  .why h3{font-size:24px;margin:14px 0 12px;max-width:14em}
  .why p:not(.label){margin:0;color:var(--muted)}

  .car-tag{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:max-content;max-width:88%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:500 11px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;
    color:#fff;padding:8px 12px;border-radius:999px;background:rgba(0,0,0,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .4s}
  .car-item.on .car-tag{opacity:1}
  .duo-nav{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px}
  .car-arrow{width:44px;height:44px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:400 18px/1 Inter,sans-serif;cursor:pointer;flex:none}
  .car-arrow:hover{border-color:var(--ink)}
  .car-arrow:disabled{opacity:.3;cursor:default}
  .car-label{text-align:center;min-width:0;flex:1}
  .car-open{white-space:nowrap}
  .car-label b{display:block;font:500 16px/1.2 "Inter Tight",Inter,sans-serif;letter-spacing:-.01em}
  .car-label span{display:block;font-size:12px;line-height:1.35;color:var(--muted);margin-top:4px}
  @media (max-width:600px){ .duo{gap:10px} .hero .duo-s{font-size:12px} .duo-nav .car-arrow{width:34px;height:34px;font-size:15px} .car-label span{display:none} .car-item{border-width:5px;border-radius:24px} }
  @media (prefers-reduced-motion:reduce){ .car-item,.film{transition:none} }

  /* scenes */
  .rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .rail figure{margin:0;scroll-snap-align:start}
  .rail img{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--bg-2)}
  .rail figcaption{display:flex;gap:10px;margin-top:10px;font-size:14px}
  .rail figcaption i{font-style:normal;color:var(--muted)}
  .rail .more .plus{aspect-ratio:9/16;display:grid;place-items:center;background:var(--bg-2);font:400 56px/1 "Inter Tight",sans-serif;color:var(--muted)}

  /* steps */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
  @media (max-width:820px){ .steps{grid-template-columns:1fr} }
  .steps div{padding:22px 24px 0 0}
  .steps b{font:500 13px/1 Inter;color:var(--muted)}
  .steps h3{font-size:26px;margin:14px 0 10px}
  .steps p{margin:0;color:var(--muted)}
  .steps img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:6px;margin:0 0 20px;background:#f3eee6}
  @media (max-width:820px){ .steps img{aspect-ratio:4/3} .steps div{padding-bottom:18px} }
  /* ceux qui l'ouvrent */
  .people{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
  @media (max-width:900px){ .people{grid-template-columns:1fr 1fr} .people figure:first-child{grid-column:1/-1} }
  @media (max-width:560px){ .people{grid-template-columns:1fr} .people img,.people figure:first-child img{aspect-ratio:4/3} }
  .people figure{margin:0;min-width:0}
  .people img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:6px;background:#f3eee6}
  @media (max-width:900px){ .people figure:first-child img{aspect-ratio:16/10;height:auto} }
  .people figcaption{margin-top:14px;color:var(--muted);font-size:15px;line-height:1.5}
  .people figcaption b{display:block;color:var(--ink);font:500 20px/1.2 "Inter Tight",Inter,sans-serif;letter-spacing:-.02em;margin-bottom:6px}

  /* modeles */
  .cont-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
  @media (max-width:560px){ .cont-grid{grid-template-columns:1fr 1fr;gap:12px} .cont .txt{padding:12px} .cont .txt b{font-size:16px} .cont .txt span{font-size:13px} }
  a.cont{display:block;color:inherit;text-decoration:none;background:var(--bg-2)}
  .cont .pic{aspect-ratio:5/8;overflow:hidden}
  .cont .pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
  a.cont:hover .pic img{transform:scale(1.03)}
  .cont .txt{display:grid;gap:4px;padding:16px 16px 18px}
  .cont .txt b{font:500 19px/1.2 Inter,sans-serif;letter-spacing:-.01em}
  .cont .txt span{color:var(--muted);font-size:14px}
  .cont .txt em{font-style:normal;font-size:14px;margin-top:6px}
  .cont-more{margin-top:22px;color:var(--muted)}
  .cont-more a{color:var(--ink)}
  .models{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
  @media (max-width:1000px){ .models{grid-template-columns:repeat(2,1fr)} }
  .models>.model{min-width:0}
  @media (max-width:560px){ .model .meta{flex-direction:column;gap:8px} .model h3{font-size:18px} }
  .model{background:var(--bg-2)}
  .model .pic{aspect-ratio:4/5;position:relative;overflow:hidden;background:var(--bg-2)}
  .model .pic img{width:100%;height:100%;object-fit:cover}
  .model .pic .soon{position:absolute;inset:0;display:grid;place-items:center;font:500 13px/1 Inter;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
  .model .meta{padding:16px;display:flex;justify-content:space-between;gap:12px}
  .model h3{font-size:22px}
  .model p{margin:6px 0 0;font-size:14px;color:var(--muted)}
  .tag{align-self:start;font-size:12px;border:1px solid var(--line);padding:4px 8px;white-space:nowrap}

  /* bibliotheque de lieux */
  .places{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
  @media (max-width:820px){ .places{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:820px){ .places .place:last-child:nth-child(odd){grid-column:span 2} .places .place:last-child:nth-child(odd) .pic{aspect-ratio:3/2} }
  .place{border:1px solid var(--line)}
  .place .pic{aspect-ratio:3/4;background:var(--bg-2)}
  .place .pic img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
  .place .meta{padding:12px 14px;font-size:14px}
  .place .meta span{display:block;color:var(--muted);font-size:13px}
  .place .pic.soon{display:grid;place-items:center;font:500 12px/1 Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .place.add .pic{display:grid;place-items:center;font:400 44px/1 "Inter Tight",sans-serif;color:var(--muted)}

  /* prix */
  .prices{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
  @media (max-width:820px){ .prices{grid-template-columns:1fr} }
  .price{padding:24px 24px 32px 0;display:flex;flex-direction:column}
  @media (min-width:821px){ .price+.price{padding-left:24px;border-left:1px solid var(--line)} }
  @media (max-width:820px){ .price+.price{border-top:1px solid var(--line)} }
  .price h3{font-size:22px;display:flex;gap:10px;align-items:center}
  .price h3 .tag{font-family:Inter;letter-spacing:0}
  .amount{font:500 56px/1 "Inter Tight",Inter,sans-serif;letter-spacing:-.04em;margin:18px 0 6px}
  .amount small{font-size:15px;letter-spacing:0;color:var(--muted);font-weight:400}
  .price ul{list-style:none;padding:0;margin:18px 0 28px;font-size:15px;flex:1}
  .price li{padding:9px 0;border-bottom:1px solid var(--line)}
  .note{margin-top:28px;font-size:14px;color:var(--muted);max-width:44em}

  /* musique */
  .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media (max-width:720px){ .two{grid-template-columns:1fr} }
  .box{background:var(--bg-2);padding:28px}
  .box h3{font-size:26px;margin-bottom:10px}
  .box p{margin:0;color:var(--muted)}

  /* faq */
  details{border-top:1px solid var(--line);padding:20px 0}
  details:last-child{border-bottom:1px solid var(--line)}
  summary{cursor:pointer;font:500 18px/1.35 "Inter Tight",Inter,sans-serif;list-style:none;display:flex;justify-content:space-between;gap:16px}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+";color:var(--muted)}
  details[open] summary::after{content:"−"}
  details p{color:var(--muted);margin:10px 0 0;max-width:46em}

  /* cta */
  .cta h2,.cta h1.h2{font-size:clamp(40px,7vw,88px)}
  form{display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;gap:0;margin-top:36px;border:1px solid var(--ink)}
  @media (max-width:820px){ form{grid-template-columns:1fr} }
  input,select{height:56px;padding:0 16px;border:0;border-right:1px solid var(--line);background:var(--bg);color:var(--ink);font:15px Inter,sans-serif;min-width:0;border-radius:0}
  @media (max-width:820px){ input,select{border-right:0;border-bottom:1px solid var(--line)} }
  form .btn{height:56px;border:0}
  .order{position:fixed;inset:0;z-index:1000;background:rgba(10,10,10,.55);display:flex;align-items:center;justify-content:center;padding:16px}
  .order[hidden]{display:none}
  .order-in{position:relative;width:100%;max-width:460px;max-height:calc(100dvh - 32px);overflow:auto;background:#fff;padding:28px 24px 22px;text-align:left}
  .order-in h3{font:500 28px/1.15 Inter,sans-serif;letter-spacing:-.02em;margin:8px 0 6px}
  .order-sub,.order-note{color:var(--muted);font-size:14px;margin:0 0 14px}
  .order-note{margin:12px 0 0;font-size:13px}
  .order-x{position:absolute;top:10px;right:12px;width:36px;height:36px;border:0;background:none;font-size:26px;line-height:1;color:var(--muted);cursor:pointer}
  #ordForm{display:grid;grid-template-columns:1fr;gap:10px;border:0;padding:0;max-width:none;margin:0;background:none}
  #ordForm input[type=text],#ordForm input[type=email],#ordForm input[type=date]{height:48px;border:1px solid var(--line);padding:0 14px;font:inherit;background:#fff;color:var(--ink)}
  #ordForm .chk{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:13.5px;line-height:1.45;color:#333;align-items:start}
  #ordForm .chk input{width:18px;height:18px;margin:1px 0 0}
  #ordForm .btn{width:100%;height:54px;margin-top:4px}
  .ok{display:none;margin-top:18px}
  /* demos */
  .demos{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  @media (max-width:1000px){ .demos{grid-template-columns:repeat(3,1fr)} }
  @media (max-width:720px){ .demos{grid-template-columns:repeat(2,1fr);gap:14px} }
  .demo{display:block;color:var(--ink);text-decoration:none;min-width:0}
  .demo .pic{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:6px;background:var(--bg-2)}
  .demo .pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
  .demo:hover .pic img{transform:scale(1.04)}
  .demo .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.45),transparent 45%)}
  .demo .nm{position:absolute;left:0;right:0;top:14px;z-index:1;text-align:center;color:#fff;font-size:26px;line-height:1.1;padding:0 10px;text-shadow:0 2px 10px rgba(0,0,0,.5)}
  .demo .meta{padding-top:10px}
  .demo h3{font-size:17px;margin:0 0 2px}
  .demo p{margin:0;color:var(--muted);font-size:13px;line-height:1.4}
  .dash-cta{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;margin-top:36px;padding:24px;border:1px solid var(--line);border-radius:6px}
  .dash-cta h3{font-size:24px;margin:8px 0 6px}
  .dash-cta p{margin:0;color:var(--muted);max-width:40em}
  a.model{color:inherit;text-decoration:none}
  .model .pic .cn{position:absolute;left:0;right:0;top:14px;z-index:2;text-align:center;color:#fff;font-size:24px;line-height:1.1;padding:0 10px;text-shadow:0 2px 10px rgba(0,0,0,.55);pointer-events:none}
  .model .pic::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(0,0,0,.42),transparent 42%);pointer-events:none}
  .car-open{display:inline-block;margin-top:8px;font:500 13px Inter,sans-serif;color:var(--ink)}
  .car-open[hidden]{display:none}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:14px;color:var(--muted);cursor:pointer}
  .consent input{height:auto;width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--ink)}
  .err{color:#a3402a;margin:10px 0 0;font-size:14px}
  .price-note{color:var(--muted);font-size:14px;margin-top:18px}
  footer .legal a{color:inherit}

  /* apercu de theme (modal) */
  .model[data-theme]{cursor:pointer}
  .model[data-theme]:hover .pic img{transform:scale(1.03)}
  .model .pic img{transition:transform .6s ease}
  .model .pic .pic2{position:absolute;inset:0;opacity:0;transition:opacity .5s ease,transform .6s ease}
  @media (hover:hover){ .model[data-theme]:hover .pic .pic2{opacity:1} }
  .pv{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;gap:28px;padding:16px;background:rgba(250,250,248,.985)}
  .pv.on{display:flex}
  .pv-side{color:var(--ink);max-width:260px}
  .pv-side h3{font-size:32px;margin:10px 0 8px}
  .pv-side p{color:var(--muted);margin:0 0 18px;font-size:15px}
  .pv-tabs{display:flex;flex-wrap:wrap;gap:6px}
  .pv-tabs button{background:var(--bg);border:1px solid var(--line);color:var(--ink);font:500 13px Inter,sans-serif;padding:8px 10px;cursor:pointer}
  .pv-tabs button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .pv-close{position:absolute;top:14px;right:16px;background:none;border:0;color:var(--ink);font:300 34px/1 Inter,sans-serif;cursor:pointer}
  .pv-phone{height:min(86vh,760px);aspect-ratio:9/19.5;border-radius:34px;overflow:hidden;border:8px solid #111;box-shadow:0 30px 60px -30px rgba(0,0,0,.45);background:#000;flex:none}
  /* défilement continu : le doigt entraîne la page, elle se cale doucement (proximity, jamais mandatory : « swipe brusque ») */
  .pv-scroll{height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain}
  .pv-scroll::-webkit-scrollbar{display:none}
  /* même échelle de lecture que le moteur (invite.css) : chapeaux 13 px, texte 17 px et plus, rien sous 11 px */
  .pv-sc{position:relative;height:100%;background:center/cover no-repeat;display:flex;flex-direction:column;align-items:center;text-align:center;padding:12% 8% 0;color:#fff}
  /* comme dans le moteur : pas de halo sombre derrière le texte (il traçait une ligne entre deux pages au glissement) */
  .pv-sc.light .ey,.pv-sc.light .nm,.pv-sc.light .tx,.pv-sc.light .bt,.pv-sc.light .pv-hint{text-shadow:none}
  .pv-sc>*{position:relative}
  .pv-sc .ey{font:500 13px/1.3 Inter,sans-serif;letter-spacing:.22em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.5)}
  .pv-sc .nm{font:400 clamp(38px,5.4vh,54px)/1.08 "Great Vibes",cursive;margin:16px 0 12px;text-shadow:0 2px 14px rgba(0,0,0,.45)}
  .pv-sc .tx{font:italic 400 clamp(17px,2.4vh,21px)/1.45 "Cormorant Garamond",Georgia,serif;text-shadow:0 1px 10px rgba(0,0,0,.55);max-width:17em}
  .pv-sc .tx+.tx{margin-top:8px}
  /* même bouton que le faire-part (invite.css .b) : pastille en verre, médaillon à la couleur du couple, garamond 17 px */
  .pv-sc .bt{margin-top:24px;display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:5px 20px 5px 6px;border:1px solid rgba(255,255,255,.3);border-radius:999px;font:500 17px/1.1 "Cormorant Garamond",Georgia,serif;letter-spacing:.01em;white-space:nowrap;background:rgba(18,15,12,.5);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);box-shadow:0 1px 2px rgba(0,0,0,.12),0 8px 22px -8px rgba(0,0,0,.45);text-shadow:0 1px 6px rgba(0,0,0,.35)}
  .pv-sc .bt svg{width:32px;height:32px;flex:none;padding:8px;border-radius:50%;color:#fff;background:var(--pal,#b8975a);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 2px 6px rgba(0,0,0,.18)}
  .pv-sc.light .bt{background:rgba(255,255,255,.72);border-color:rgba(127,127,127,.3);border-color:color-mix(in srgb,var(--pal,#b8975a) 35%,transparent);box-shadow:0 1px 2px rgba(60,40,10,.08),0 10px 24px -10px rgba(60,40,10,.3)}
  .pv-hint{position:absolute;bottom:18px;left:0;right:0;text-align:center;font:500 11.5px Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.6)}
  @media (max-width:760px){ .pv{flex-direction:column;gap:12px} .pv-side{text-align:center;max-width:none} .pv-side p{display:none} .pv-side h3{font-size:24px;margin:0 0 8px} .pv-tabs{justify-content:center} .pv-phone{height:min(72vh,680px)} }
  /* filtres de style */
  .filters{display:flex;flex-wrap:wrap;gap:8px;margin:-16px 0 24px}
  .chip{background:var(--bg);border:1px solid var(--line);color:var(--ink);font:500 13px Inter,sans-serif;padding:9px 14px;cursor:pointer}
  .chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .model[hidden]{display:none}
  .model .style{font-size:12px;color:var(--muted);margin-top:2px}

  /* composer */
  .comp{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:start}
  @media (max-width:900px){ .comp{grid-template-columns:1fr;gap:32px} }
  .comp .comp-form{display:grid;grid-template-columns:1fr;gap:26px;min-width:0;border:0;margin:0}
  .comp .comp-form input{border-right:1px solid var(--line)}
  .fld{display:grid;gap:10px}
  .fld>span{font:500 12px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .names{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
  .names b{font:400 22px "Great Vibes",cursive;color:var(--muted)}
  .comp input[type=text],.comp input[type=date]{height:50px;border:1px solid var(--line);padding:0 14px;font:16px Inter,sans-serif;color:var(--ink);background:var(--bg);width:100%;min-width:0;border-radius:0}
  .comp input:focus{outline:2px solid var(--ink);outline-offset:-1px}
  .opts{display:flex;flex-wrap:wrap;gap:8px}
  .sw{width:44px;height:44px;border-radius:50%;border:2px solid var(--bg);box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
  .sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
  .sw-name{font-size:13px;color:var(--muted);margin-top:-2px}
  .fo{background:var(--bg);border:1px solid var(--line);color:var(--ink);padding:10px 14px;cursor:pointer;display:grid;gap:4px;justify-items:start;min-width:104px}
  .fo b{font-size:24px;font-weight:400;line-height:1}
  .fo small{font:500 11px Inter,sans-serif;color:var(--muted)}
  .fo[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
  .comp-prev{display:grid;justify-items:center;gap:16px}
  /* configurateur Essentiel en 3 étapes : thème, écrans (simple ou scène), validation */
  @media (min-width:901px){ .comp-prev{position:sticky;top:84px} }
  .step{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:baseline;border-top:1px solid var(--ink);padding-top:18px}
  .step b{font:500 13px "Inter Tight",Inter,sans-serif}
  .step h3{margin:0;font-size:22px}
  .step p{grid-column:2;margin:0;font-size:14px;color:var(--muted)}
  .more{border:1px solid var(--line)}
  .more summary{cursor:pointer;padding:14px;font:500 14px Inter,sans-serif;list-style:none;display:flex;justify-content:space-between;gap:12px}
  .more summary::-webkit-details-marker{display:none}
  .more summary small{font-weight:400;color:var(--muted)}
  .more summary::after{content:'+';font-size:18px;line-height:1}
  .more[open] summary::after{content:'−'}
  .more-in{display:grid;gap:22px;padding:4px 14px 18px}
  .story{list-style:none;margin:0;padding:0;display:grid;gap:10px}
  .story>li{border:1px solid var(--line);padding:14px;display:grid;gap:12px;min-width:0}
  .story>li.fixed{display:flex;justify-content:space-between;gap:12px;align-items:baseline;color:var(--muted);font-size:14px}
  .story>li.fixed b{color:var(--ink);font-weight:500}
  .story .ev-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
  .story .ev-h b{font:500 15px "Inter Tight",Inter,sans-serif}
  .story .ev-h small{font-size:12px;color:var(--muted)}
  .ev-f{display:grid;grid-template-columns:1fr 110px;gap:8px}
  .ev-f input:last-child{grid-column:1/-1}
  .comp .ev-f input{height:44px;font-size:15px}
  .comp input[type=time]{height:44px;border:1px solid var(--line);padding:0 10px;font:15px Inter,sans-serif;color:var(--ink);background:var(--bg);min-width:0;border-radius:0}
  .seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}
  .seg button{background:var(--bg);border:0;padding:11px 10px;cursor:pointer;font:500 13px Inter,sans-serif;color:var(--ink);display:grid;gap:2px}
  .seg button small{font-weight:400;font-size:11.5px;color:var(--muted)}
  .seg button+button{border-left:1px solid var(--line)}
  .seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
  .seg button[aria-pressed="true"] small{color:rgba(255,255,255,.75)}
  .lieux{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
  .lieux[hidden]{display:none}
  .lieux button{border:0;padding:0;background:none;cursor:pointer;display:grid;gap:5px;font:500 11.5px Inter,sans-serif;color:var(--ink);min-width:0}
  .lieux span{display:block;aspect-ratio:9/16;background:#eee center/cover no-repeat;outline:1px solid var(--line)}
  .recap{display:grid;gap:12px}
  .recap p{margin:0;font-size:14px;color:var(--muted)}
  .recap .btn{justify-self:start}
  .cp-phone{position:relative;width:min(300px,78vw);aspect-ratio:9/19.5;border-radius:34px;overflow:hidden;border:8px solid #111;background:#111;box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
  .cp-tint{position:absolute;inset:0;mix-blend-mode:soft-light;opacity:.55;transition:background .4s;pointer-events:none;z-index:2}
  /* décors du configurateur : des calques fixes derrière les pages, le suivant se fond par-dessus le précédent au fil du
     défilement (comme le moteur, invite.css .bgl) : on ne « change pas de page », le décor change en continu */
  .cp-bgs{position:absolute;left:0;right:0;top:0;z-index:0;background:#111}
  .cp-bg{position:absolute;left:0;right:0}
  .cp-bg i{position:sticky;top:0;display:block;width:100%;height:100%;background:center/cover no-repeat}
  /* comme le moteur (.bg::before) : la première bande de l'image, étirée, remplit la bande de fondu ; l'image garde la taille de l'écran */
  #cpScroll.cal{background:center/cover no-repeat}
  #cpScroll.cal .cp-bgs{background:none}
  .cp-bg.cal i{background:none}
  .cp-bg.cal i::before{display:none}
  .cp-bg i .sub{position:absolute;left:0;bottom:0;width:100%;height:auto;max-height:100%;object-fit:contain;object-position:center bottom;pointer-events:none;display:block}
  .cp-bg i::before{content:'';position:absolute;left:0;right:0;top:0;height:var(--strip,0px);background:var(--img) center top/var(--bs,cover) no-repeat;transform:scaleY(-1)}
  .cp-phone .pv-scroll{position:absolute;inset:0;z-index:1}
  .cp-phone .pv-sc{padding-top:14%;background:none;will-change:opacity,transform;z-index:1;border-top:0} /* sans la bordure des sections de la vitrine : elle traçait une ligne entre deux écrans */
  .cp-phone .pv-sc .nm{margin:14px 0 10px}
  .cp-phone .pv-sc .tx{font-size:17px}
  .cd{display:flex;justify-content:center;gap:16px;margin-top:24px}
  .cd div{display:grid;justify-items:center;gap:6px;min-width:44px}
  .cd b{font:500 28px/1 "Inter Tight",Inter,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  .cd span{font:500 11px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
  .cd.big{gap:18px;margin-top:26px}
  .cd.big b{font-size:42px}
  .chip.x{font-size:12px;padding:8px 12px}
  .pv-card{position:relative;width:100%;max-width:260px;margin-top:20px;padding:6px 12px;text-align:left;font:400 15px/1.4 "Cormorant Garamond",Georgia,serif;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .pv-card div{display:grid;grid-template-columns:44px 1fr;gap:8px;padding:9px 0;border-bottom:1px solid rgba(127,127,127,.3)}
  .pv-card div:last-child{border-bottom:0}
  .pv-card b{font:500 12px/1.5 Inter,sans-serif;letter-spacing:.04em}
  .pv-card.one div{grid-template-columns:1fr}
  .pv-sws{position:relative;display:flex;gap:10px;margin:16px 0 14px}
  .pv-sws i{width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.75)}
  .pv-fam{position:relative;font:500 17px/1.35 "Cormorant Garamond",Georgia,serif;margin:14px 0 10px}
  .cp-dl{display:flex;align-items:center;gap:10px;margin-top:14px;font:500 14px/1.2 "Cormorant Garamond",Georgia,serif;white-space:nowrap}
  .cp-dl i{display:block;width:26px;height:1px;background:currentColor;opacity:.75}
  .cp-phone .pv-hint{z-index:1}
  .cp-scrim{position:absolute;inset:0 0 45% 0;background:linear-gradient(rgba(0,0,0,.35),transparent)}
  .cp-body{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:12% 8% 0}
  /* sceau de cire du configurateur : même cire et mêmes initiales gravées que sur l'enveloppe (voir .op-seal) */
  .cp-seal{width:80px;height:80px;background:center/contain no-repeat;display:grid;place-items:center;container-type:inline-size;margin-bottom:16px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.38))}
  .cp-seal b{font:400 24cqw/1.15 "Great Vibes",cursive;letter-spacing:-.01em;margin-top:2cqw;padding:0 .08em;white-space:nowrap;
    background:linear-gradient(165deg,var(--l) 0%,var(--m) 48%,var(--d) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 1px 0 rgba(255,244,214,.55)) drop-shadow(0 -1px .6px rgba(40,22,4,.75)) drop-shadow(0 1.5px 1.5px rgba(40,22,4,.35))}
  .cp-seal b i{font-style:normal;font-size:.62em;margin:0 .02em}
  .cp-ey{font:500 13px/1.4 Inter,sans-serif;letter-spacing:.22em;text-transform:uppercase}
  .cp-nm{font-size:44px;line-height:1.08;margin:16px 0 12px;word-break:break-word}
  .cp-tx{font:italic 400 18px/1.45 "Cormorant Garamond",Georgia,serif;max-width:17em}
  .cp-date{display:flex;align-items:center;gap:12px;margin-top:16px;font:500 17px/1.2 "Cormorant Garamond",Georgia,serif}
  .cp-date i{display:block;width:26px;height:1px;background:currentColor;opacity:.7}
  .cp-bt{margin-top:24px;border:1px solid currentColor;padding:11px 16px;font:500 12.5px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase}

  /* ouvertures : enveloppe, rideau, voile, grandes portes (mêmes règles que invite.css) */
  .op-card{background:var(--bg);border:1px solid var(--line);color:var(--ink);padding:12px 14px;cursor:pointer;display:grid;gap:3px;justify-items:start;text-align:left;min-width:128px}
  .op-card b{font:500 15px "Inter Tight",Inter,sans-serif}
  .op-card small{font-size:12px;color:var(--muted)}
  .op-card[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
  .op{position:absolute;inset:0;z-index:5;cursor:pointer;overflow:hidden;transition:opacity .42s ease,visibility .42s ease}
  .op>div{position:absolute;inset:0;display:none}
  .op[data-type="env"] .op-env,.op[data-type="cur"] .op-cur,.op[data-type="door"] .op-doors,.op[data-type="voile"] .op-voile{display:block}
  .op.opening{pointer-events:none}
  .op.gone{opacity:0;visibility:hidden}
  .op>.op-tap{position:absolute;left:50%;right:auto;top:auto;bottom:22px;z-index:6;transform:translateX(-50%);width:max-content;display:block;text-align:center;
    color:rgba(255,250,240,.92);font:700 9.5px/1.5 Inter,Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;
    padding:9px 16px;border:1px solid rgba(232,207,139,.4);border-radius:999px;background:rgba(15,26,46,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:tapPulse 2.6s ease-in-out infinite}
  @keyframes tapPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,207,139,0)}50%{box-shadow:0 0 0 12px rgba(232,207,139,.1)}}
  .op>.op-to{display:none!important;position:absolute;left:0;right:0;top:9%;bottom:auto;z-index:6;display:block;text-align:center;font:italic 400 20px/1.3 "Cormorant Garamond",Georgia,serif;color:#6d5a40;padding:0 12%}
  .op[data-type="cur"] .op-to,.op[data-type="door"] .op-to{color:#f3e2bb;text-shadow:0 1px 10px rgba(0,0,0,.7)}
  .op.opening .op-tap,.op.opening .op-to{opacity:0;transition:opacity .2s ease}

  /* enveloppe */
  .op-env{perspective:2400px;perspective-origin:50% 30%;transform-style:preserve-3d;background:linear-gradient(175deg,#ece3ce 0%,#e2d7bd 55%,#d6c9a9 100%)}
  .op-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(135% 105% at 30% 16%,rgba(255,253,244,.34) 0%,transparent 44%,transparent 66%,rgba(84,60,28,.22) 100%)}
  .op-env-in{position:absolute;top:0;height:100%;aspect-ratio:620/1110;left:50%;translate:-50% 0;transform:scale(1.32);transform-origin:50% 58%;transform-style:preserve-3d}
  .op-body{position:absolute;inset:0;z-index:3;background:url("/img/open/env-body.webp") center/100% 100% no-repeat}
  .op-fshadow{position:absolute;left:0;top:34%;width:100%;height:24%;z-index:4;pointer-events:none;opacity:.24;filter:blur(5px);
    background:radial-gradient(28% 10% at 50% 58%,rgba(62,42,18,.18),transparent 72%),
      linear-gradient(34deg,transparent 0 45%,rgba(60,41,18,.16) 49%,transparent 54%) left top/50% 100% no-repeat,
      linear-gradient(-34deg,transparent 0 45%,rgba(60,41,18,.16) 49%,transparent 54%) right top/50% 100% no-repeat;
    clip-path:polygon(0 0,100% 0,50% 100%)}
  .op-flap{position:absolute;left:0;top:0;width:100%;z-index:5;transform-origin:50% 0;transform-style:preserve-3d;will-change:transform;transform:rotateX(0deg) translateZ(0)}
  .op-flap img{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 15px rgba(72,50,22,.28))}
  /* le sceau est un enfant du rabat : il avance vers la caméra et tourne avec l'ouverture */
  .op-seal{position:absolute;left:50%;top:94%;width:26.5%;aspect-ratio:1;transform:translate(-50%,-50%) translateZ(10px);
    background:center/contain no-repeat;filter:drop-shadow(0 6px 9px rgba(60,38,8,.5));display:grid;place-items:center;container-type:inline-size}
  .op-seal b{font:400 23cqw/1.15 "Great Vibes",cursive;letter-spacing:-.01em;margin-top:2cqw;padding:0 .08em;white-space:nowrap;
    background:linear-gradient(165deg,var(--l) 0%,var(--m) 48%,var(--d) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 1px 0 rgba(255,244,214,.55)) drop-shadow(0 -1px .6px rgba(40,22,4,.75)) drop-shadow(0 1.5px 1.5px rgba(40,22,4,.35))}
  .op-seal b i{font-style:normal;font-size:.62em;margin:0 .02em}
  .op.opening .op-flap{animation:flapPartial 2.1s cubic-bezier(.32,0,.34,1) forwards}
  .op.opening .op-fshadow{opacity:0;transition:opacity .5s ease}
  @keyframes flapPartial{0%{transform:rotateX(0deg)}100%{transform:rotateX(40deg)}}

  /* lumière commune aux trois ouvertures */
  .cp-flash{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;
    background:radial-gradient(130% 110% at 50% 44%,#fffdf7 0%,rgba(255,250,238,.98) 44%,rgba(250,242,224,.82) 100%)}
  .cp-flash.bloom{animation:flashBloom 1.1s cubic-bezier(.4,0,.2,1) forwards}
  /* rideau, portes et voile : la lumière part au toucher et monte avec le mouvement (mêmes courbes que invite.css) */
  .cp-flash.soft.bloom{animation:flashSoft 2s cubic-bezier(.35,0,.25,1) forwards}
  @keyframes flashSoft{0%{opacity:0}45%{opacity:.75}100%{opacity:0}}
  .cp-flash.door.bloom{animation:flashDoor 1.1s cubic-bezier(.35,0,.25,1) forwards}
  @keyframes flashDoor{0%{opacity:0}42%{opacity:.45}100%{opacity:0}}
  .op[data-type="cur"].gone{transition:opacity .95s cubic-bezier(.4,0,.6,1),visibility .95s}
  .op[data-type="door"].gone{transition:opacity .5s cubic-bezier(.4,0,.6,1),visibility .5s}
  .op[data-type="voile"].gone{transition:opacity .8s cubic-bezier(.4,0,.6,1),visibility .8s}
  @keyframes flashBloom{0%{opacity:0}44%{opacity:1}54%{opacity:1}100%{opacity:0}}

  /* rideau : il se tasse un instant, puis monte d'un seul geste (lent, accélère, ralentit), en se plissant légèrement */
  .op-cur{background:var(--cur,url("/img/open/rideau.webp")) center/cover no-repeat;transform-origin:50% 0;will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
  .op-cur-edge{position:absolute;left:0;right:0;bottom:-40px;height:40px;background:linear-gradient(rgba(0,0,0,.4),transparent)}
  .op-mono{position:absolute;left:0;right:0;top:38%;text-align:center;font:400 54px/1 "Great Vibes",cursive;color:#e9c879;text-shadow:0 2px 0 #7a5a14,0 6px 16px rgba(0,0,0,.5);transition:opacity .45s ease,transform .6s ease}
  .op.opening .op-cur{animation:opCurtain 1.75s both}
  .op.opening .op-mono{opacity:0;transform:translateY(-6px) scale(.97)}
  @keyframes opCurtain{
    0%{transform:translate3d(0,0,0) scaleY(1);animation-timing-function:cubic-bezier(.33,0,.5,1)}
    5%{transform:translate3d(0,.5%,0) scaleY(1.003);animation-timing-function:cubic-bezier(.45,.05,.25,1)}
    100%{transform:translate3d(0,-106%,0) scaleY(.9)}}

  /* grandes portes : les battants partent LENTEMENT (petit déclic, puis un seul mouvement qui s'étire sur 2,6 s),
     la salle est d'abord une lumière chaude derrière eux, puis cette lumière s'efface pendant l'ouverture et laisse
     voir la page à travers l'entrebâillement ; la caméra avance doucement. Le mouvement commence bien avant
     la lumière blanche, qui vient tard et douce : aucun temps mort sur un écran de lumière. */
  .op-doors{overflow:hidden;will-change:transform}
  .op-room{position:absolute;inset:0;z-index:0;background:radial-gradient(75% 60% at 50% 50%,#fffefa 0%,#fff6e2 40%,#f6e4bd 75%,#e9cf98 100%)}
  .op-doors-in{position:absolute;inset:0;z-index:2;perspective:620px;perspective-origin:50% 50%;transform-style:preserve-3d}
  .op-leaf{position:absolute;top:0;bottom:0;width:50%;background:var(--door,url("/img/open/portes.webp")) no-repeat;background-size:200% 100%;backface-visibility:hidden;will-change:transform;transform:rotateY(0) translateZ(0)}
  .op-leaf.l{left:0;background-position:0 0;transform-origin:0 50%}
  .op-leaf.r{right:0;background-position:100% 0;transform-origin:100% 50%}
  .op-leaf::after{content:"";position:absolute;inset:0;opacity:0}
  .op-leaf.l::after{background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,.5))}
  .op-leaf.r::after{background:linear-gradient(270deg,rgba(0,0,0,.12),rgba(0,0,0,.5))}
/* (plus de trait lumineux vertical entre les battants : l'utilisateur l'a trouvé moche, retiré) */
  .op-glow{position:absolute;inset:0;z-index:1;background:radial-gradient(60% 50% at 50% 50%,#fffdf7 0%,rgba(255,240,205,.9) 38%,rgba(255,220,160,.25) 70%,transparent 85%);opacity:0;pointer-events:none;will-change:opacity,transform}
  /* les portiers (option « doormen », image img/open/<thème>-portier.webp) : un de chaque côté, les mains sur son battant ;
     ils avancent avec la porte qu'ils poussent (enfants du battant), en marquant le pas. Désactivés pour l'instant (DOORMEN vide) */
  .op-man{position:absolute;bottom:0;width:74%;aspect-ratio:460/880;background:var(--man) center bottom/contain no-repeat;z-index:2;
    filter:drop-shadow(0 8px 10px rgba(0,0,0,.45));backface-visibility:hidden;transform-origin:50% 100%;animation:manIdle 3.4s ease-in-out infinite}
  .op-leaf.l .op-man{right:2%}
  .op-leaf.r .op-man{left:2%;transform:scaleX(-1)}
  @keyframes manIdle{0%,100%{translate:0 0}50%{translate:0 -.6%}}
  .op.opening .op-doors{animation:opPush 3.1s cubic-bezier(.45,0,.25,1) .1s both}
  .op.opening .op-room{animation:opRoom .9s cubic-bezier(.4,0,.3,1) .6s both}
  .op.opening .op-leaf.l{animation:opDoorL 2.9s both}
  .op.opening .op-leaf.r{animation:opDoorR 2.9s both}
  .op.opening .op-leaf::after{animation:opShade 2.2s ease-in .35s both}
  .op.opening .op-glow{animation:opGlow 1.1s cubic-bezier(.3,0,.4,1) .5s both}
  .op.opening .op-man{animation:manPush 2.9s cubic-bezier(.45,0,.25,1) both}
  @keyframes opDoorL{
  0%{transform:rotateY(0);animation-timing-function:cubic-bezier(.6,0,.8,.4)}
  7%{transform:rotateY(-1.5deg);animation-timing-function:cubic-bezier(.35,0,.55,1)}
  64%{transform:rotateY(-84deg);animation-timing-function:cubic-bezier(.2,0,.4,1)}
  86%{transform:rotateY(-103deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  100%{transform:rotateY(-100deg)}}
  @keyframes opDoorR{
  0%{transform:rotateY(0);animation-timing-function:cubic-bezier(.6,0,.8,.4)}
  7%{transform:rotateY(1.5deg);animation-timing-function:cubic-bezier(.35,0,.55,1)}
  64%{transform:rotateY(84deg);animation-timing-function:cubic-bezier(.2,0,.4,1)}
  86%{transform:rotateY(103deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  100%{transform:rotateY(100deg)}}
  @keyframes opRoom{from{opacity:1}to{opacity:0}}
  @keyframes opShade{from{opacity:0}to{opacity:1}}
  @keyframes opGlow{0%{opacity:0;transform:scale(.6)}45%{opacity:.9;transform:scale(1.1)}100%{opacity:0;transform:scale(1.4)}}
  @keyframes opPush{from{transform:scale(1)}to{transform:scale(1.16)}}
  /* le portier se penche dans la poussée, puis fait trois pas avec la porte */
  @keyframes manPush{0%{translate:0 0;scale:1}10%{translate:0 .4%;scale:1 .985}30%{translate:0 -.5%;scale:1 1}50%{translate:0 .3%}70%{translate:0 -.5%}90%{translate:0 .3%}100%{translate:0 0}}

  /* voile : un grand rideau OPAQUE (le tissu du thème, coupé en deux pans) qui s'ouvre par le milieu, les pans se tassent
     chacun vers son bord, en plis (mêmes règles que invite.css) */
  .op-voile{overflow:hidden}
  .op-sheer{position:absolute;top:0;bottom:0;width:50%;background:var(--cur,url("/img/open/rideau.webp")) no-repeat;background-size:200% 100%;
    will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
  .op-sheer.l{left:0;background-position:0 0;transform-origin:0 50%}
  .op-sheer.r{right:0;background-position:100% 0;transform-origin:100% 50%}
  .op-sheer::after{content:"";position:absolute;top:0;bottom:0;width:22%;opacity:0}
  .op-sheer.l::after{right:0;background:linear-gradient(270deg,rgba(0,0,0,.45),transparent)}
  .op-sheer.r::after{left:0;background:linear-gradient(90deg,rgba(0,0,0,.45),transparent)}
  .op-voile .op-mono{top:40%}
  .op.opening .op-sheer.l{animation:opSheerL 2.4s cubic-bezier(.62,0,.22,1) both,opWaveL 2.4s ease-in-out both}
  .op.opening .op-sheer.r{animation:opSheerR 2.4s cubic-bezier(.62,0,.22,1) both,opWaveR 2.4s ease-in-out both}
  .op.opening .op-sheer::after{animation:opShade 1.6s ease-in .3s both}
  .op.opening .op-voile .op-mono{opacity:0;transform:translateY(-6px) scale(.97)}
  /* un seul geste : le pan part lentement, accélère, puis ralentit jusqu'à se poser (une seule courbe, aucun arrêt
     intermédiaire) ; l'ondulation du tissu est une animation à part (skewY), superposée au mouvement */
  @keyframes opSheerL{from{scale:1 1;translate:0 0}to{scale:.13 1;translate:-3% 0}}
  @keyframes opSheerR{from{scale:1 1;translate:0 0}to{scale:.13 1;translate:3% 0}}
  @keyframes opWaveL{0%{transform:skewY(0)}40%{transform:skewY(-1.3deg)}75%{transform:skewY(.4deg)}100%{transform:skewY(0)}}
  @keyframes opWaveR{0%{transform:skewY(0)}40%{transform:skewY(1.3deg)}75%{transform:skewY(-.4deg)}100%{transform:skewY(0)}}
  .replay{background:none;border:0;padding:0;color:var(--muted);text-decoration:underline;font:inherit;font-size:13px;cursor:pointer}
  @media (prefers-reduced-motion:reduce){ .op-flap,.op-env,.op-cur,.op-leaf{transition-duration:.01s!important;transition-delay:0s!important} .op-man{animation:none} .op.opening .op-leaf,.op.opening .op-doors,.op.opening .op-room,.op.opening .op-sheer,.op.opening .op-man,.op.opening .op-doors-in,.op.opening .op-glow,.op.opening .op-leaf::after,.op.opening .op-flap{animation-duration:.01s!important} }

  /* ----- mobile ----- */
  @media (max-width:720px){
    section{padding:56px 0}
    .head{margin-bottom:28px}
    .hero{padding:24px 0 48px}
    .hero h1{font-size:clamp(38px,11vw,48px)}
    .hero p{font-size:16px;margin-top:16px}
    .hero-copy{margin-bottom:22px}
    .hero .ctas{margin-top:28px}
    .car-hint{font-size:12px;line-height:1.4;padding:0 8px}
    .facts{margin-top:32px}
    .facts b{font-size:20px}
    .facts span{font-size:12px;line-height:1.35;display:block;margin-top:4px}
    .facts div{padding-right:8px}
    .hero .ctas .btn{flex:1 1 auto}
    /* sur téléphone : l'aperçu reste collé en haut, en petit, pendant qu'on configure (plus besoin de remonter) ;
       « Agrandir » l'ouvre en plein écran */
    .comp-prev{order:-1;position:sticky;top:60px;z-index:7;background:var(--bg);border-bottom:1px solid var(--line);margin:0 -16px 8px;padding:8px 16px;display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:start;justify-items:stretch;height:214px}
    .comp-prev .cp-phone{width:300px;transform:scale(.31);transform-origin:top left;margin:0;height:650px;position:absolute;top:8px;left:16px}
    .comp-prev .replay,.comp-prev #cpGo{display:none}
    .cp-mini-side{grid-column:2;display:grid;gap:4px;align-content:start;min-width:0}
    .cp-sum{font-size:12px;line-height:1.4;color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical} .cp-sum b{color:var(--ink);font-weight:500}
    #cpMiniSteps{margin-top:4px;border-top:1px solid var(--line)}
    .cp-mini-side .lk{background:none;border:0;padding:0;font:500 12.5px Inter,sans-serif;color:var(--ink);text-decoration:underline;cursor:pointer;justify-self:start}
    /* les étapes dans le bandeau : 2 x 2, compactes */
    #cpMiniSteps .wz-nav{position:static;grid-template-columns:repeat(5,1fr);gap:0 6px;padding:0;margin:0;border:0;background:none}
    #cpMiniSteps .wz-nav button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    #cpMiniSteps .wz-nav button{padding:6px 0 0;gap:4px;display:flex;align-items:baseline;font-size:11.5px;border-top-width:2px}
    #cpMiniSteps .wz-nav button b{font-size:15px}
    .cp-close{display:none}
    .comp-prev.big{position:fixed;inset:0;top:0;z-index:40;height:auto;margin:0;padding:24px 16px;display:grid;grid-template-columns:1fr;justify-items:center;align-content:center;gap:12px;border:0}
    .comp-prev.big .cp-phone{position:relative;top:auto;left:auto;transform:none;width:min(300px,78vw);height:auto;margin:0}
    .comp-prev.big .replay,.comp-prev.big #cpGo{display:inline-flex}
    .comp-prev.big .cp-mini-side{display:none}
    .comp-prev.big .cp-close{display:grid;place-items:center;position:absolute;top:12px;right:12px;z-index:50;width:40px;height:40px;border:1px solid var(--line);background:var(--bg);font-size:22px;cursor:pointer;border-radius:50%}
    .op-card{min-width:0;flex:1 1 30%;padding:10px}
    .fo{min-width:0;flex:1 1 30%}
    .pv-tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;max-width:100vw;padding:0 16px 4px;scrollbar-width:none}
    .pv-tabs::-webkit-scrollbar{display:none}
    .pv-tabs button{flex:none}
    .pv-side{width:100%}
    .cmp-wrap .cmp{min-width:0}
    /* sur mobile : fait soi-même contre Sceau, c'est la comparaison qui compte */
    .cmp th:nth-child(2),.cmp td:nth-child(2),.cmp th:nth-child(4),.cmp td:nth-child(4){display:none}
    .cmp th,.cmp td{padding-right:10px;font-size:14px}
    .amount{font-size:46px}
    .cta h2{font-size:36px}
  }

  /* ce que vous achetez */
  .incl{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
  @media (max-width:1000px){ .incl{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:560px){ .incl{grid-template-columns:1fr} }
  .incl div{padding:22px 22px 26px 0;border-bottom:1px solid var(--line);min-width:0}
  .incl svg{display:block;width:26px;height:26px;margin-bottom:14px}
  .incl h3{font-size:20px;margin:0 0 8px}
  .incl p{margin:0;color:var(--muted);font-size:15px}
  .cmp-wrap{overflow-x:auto;margin-top:56px}
  .cmp{width:100%;min-width:620px;border-collapse:collapse;font-size:15px}
  .cmp th,.cmp td{text-align:left;padding:14px 16px 14px 0;border-bottom:1px solid var(--line);vertical-align:top}
  .cmp thead th{font:500 12px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .cmp tbody th{font-weight:500}
  .cmp td{color:var(--muted)}
  .cmp .us{color:var(--ink);font-weight:500}
  .cmp thead .us{color:var(--ink)}
  footer{border-top:1px solid var(--line);padding:28px 0 40px;font-size:13px;color:var(--muted)}
  footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}

  /* ===== vitrine en quatre pages : onglets, infographies, tableau des formules ===== */
  nav .links a[aria-current]{color:var(--ink);font-weight:500;border-bottom:1px solid var(--ink);padding-bottom:2px}
  nav .links{gap:22px}
  @media (max-width:720px){ nav .links{gap:12px} nav .links a:not(.btn){font-size:12.5px} nav .btn{padding:0 12px;font-size:13px} .logo b{font-size:23px} .logo span{font-size:10.5px;letter-spacing:.14em} }
  @media (max-width:720px){ nav .links a[href="/"]{display:none} .logo{margin-right:10px} } /* sur téléphone : le logo vaut Accueil, Questions est dans Formules */
  /* « ce que vous recevez » : quatre temps, numérotés, reliés par des flèches */
  .flow{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);counter-reset:f}
  @media (max-width:820px){ .flow{grid-template-columns:1fr 1fr} }
  @media (max-width:480px){ .flow{grid-template-columns:1fr} }
  .flow>div{position:relative;padding:26px 28px 30px 0;border-bottom:1px solid var(--line);min-width:0}
  /* le numéro dans un cercle, relié au suivant par un filet : une frise, pas des flèches qui flottent */
  .flow .n{display:flex;align-items:center;gap:12px;margin:0 -28px 22px 0}
  .flow .n b{flex:none;width:32px;height:32px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font:500 12px/1 Inter,sans-serif;letter-spacing:.04em}
  .flow .n::after{content:'';flex:1;height:1px;background:var(--line)}
  .flow>div:last-child .n::after{display:none}
  @media (max-width:820px){ .flow>div:nth-child(2) .n::after{display:none} }
  @media (max-width:480px){ .flow .n::after{display:none} }
  .flow svg{display:block;width:40px;height:40px;margin:0 0 14px}
  .flow h3{font-size:22px;margin:0 0 8px}
  .flow p{margin:0;color:var(--muted);font-size:15px}
  /* formules en bref (accueil) */
  .offers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  @media (max-width:820px){ .offers{grid-template-columns:1fr} }
  .offer{background:var(--bg-2);padding:26px;display:flex;flex-direction:column;gap:10px;min-width:0}
  .offer h3{font-size:22px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0}
  .offer h3 small{font:500 18px "Inter Tight",Inter,sans-serif;letter-spacing:-.01em}
  .offer p{margin:0;color:var(--muted);font-size:15px;flex:1}
  .offer p b{color:var(--ink);font-weight:500}
  .offer .btn{align-self:flex-start;margin-top:8px}
  /* tableau des formules */
  .price .one{margin:6px 0 0;color:var(--muted);font-size:15px;min-height:2.9em}
  .price li b{font-weight:500}
  .plans-wrap{overflow-x:auto}
  .plans{width:100%;min-width:640px;border-collapse:collapse;font-size:15px}
  .plans th,.plans td{text-align:left;padding:13px 16px 13px 0;border-bottom:1px solid var(--line);vertical-align:top}
  .plans thead th{font:500 13px Inter,sans-serif;color:var(--muted);padding-top:0;vertical-align:bottom}
  .plans thead th b{display:block;font:500 22px/1.1 "Inter Tight",Inter,sans-serif;letter-spacing:-.02em;color:var(--ink);margin-bottom:4px}
  .plans tbody th{font-weight:500;width:30%;color:var(--ink)}
  .plans td{color:var(--muted);width:23%}
  .plans td.y{color:var(--ink)}
  .plans td b{font-weight:500}
  .plans td.n{color:#b9b4ac}
  .plans .yes{font-weight:500}
  .plans .yes{font-size:18px;line-height:1}
  /* options Signature, proposées au même endroit que les autres, avec leur étiquette */
  .chip.sig i,.sig-tag,.lieux button i{font:500 10px/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;font-style:normal;color:var(--muted)}
  .chip.sig i{margin-left:8px;padding-left:8px;border-left:1px solid var(--line)}
  .chip.sig[aria-pressed="true"] i{color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.3)}
  .story>li.more{padding:0;border:0}
  .story>li.more[hidden]{display:none}
  .story .ev-h a{color:var(--muted)}
  .lieux{grid-template-columns:repeat(6,1fr)}
  .lieux button i{display:block;margin-top:2px}
  .pv-photo{position:relative;margin-top:28px;padding:10px 14px;border:1px dashed currentColor;font:italic 400 14px/1.4 "Cormorant Garamond",Georgia,serif;opacity:.9}
  @media (max-width:560px){ .lieux{grid-template-columns:repeat(3,1fr)} }
  /* configurateur en étapes */
  .wz-nav{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
  .wz-nav button{width:100%;background:none;border:0;border-top:2px solid var(--line);padding:12px 0 0;text-align:left;cursor:pointer;display:grid;gap:4px;color:var(--muted);font:500 13px Inter,sans-serif}
  .wz-nav button b{font:500 11px/1 Inter,sans-serif;letter-spacing:.08em}
  .wz-nav button[aria-current="true"]{border-top-color:var(--ink);color:var(--ink)}
  .wz-nav button.done{border-top-color:var(--ink)}
  .wz{display:grid;gap:26px}
  .wz[hidden]{display:none}
  .wz .step{grid-template-columns:1fr;border-top:0;padding-top:0}
  .wz .step p{grid-column:1}
  .wz-foot{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:18px}
  .wz-foot button[hidden]{display:none}
  .wz-foot #wzNext{margin-left:auto}
  @media (max-width:560px){ .wz-nav button span{font-size:12px} }

  /* galerie des thèmes : une seule liste, étiquette « Composer » ou « Avec nous » */
  .model .pic{display:block;color:inherit;text-decoration:none}
  .k{display:inline-block;font:500 10.5px/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:6px 8px;border-radius:2px;vertical-align:middle}
  .k-c{background:var(--ink);color:var(--bg)} .k-n{background:var(--bg);color:var(--ink);border:1px solid var(--ink)}
  .model .pic .k{position:absolute;left:10px;bottom:10px;z-index:2}
  .model .meta{flex-direction:column;gap:12px}
  .model .acts{display:flex;gap:16px;font-size:14px} .model .acts a{color:var(--muted)} .model .acts a.go{color:var(--ink);font-weight:500}
  /* formules : la composition type de chaque formule, en vignettes */
  .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:18px 0 6px}
  .strip figure{margin:0;position:relative;min-width:0}
  .strip img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--bg-2)}
  .strip figcaption{font:500 11.5px/1.3 Inter,sans-serif;margin-top:6px} .strip figcaption small{display:block;font-weight:400;color:var(--muted);font-size:11px}
  .strip .ph{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 1px 4px rgba(0,0,0,.25)} .strip .ph svg{width:14px;height:14px}
  .strip-l{margin:0 0 6px;font-size:13px;color:var(--muted)}
  /* étapes : le numéro en italique à côté du mot */
  .wz-nav button{display:flex;align-items:baseline;gap:8px}
  .wz-nav button b{font:italic 400 24px/1 "Cormorant Garamond",Georgia,serif;letter-spacing:0;color:var(--ink)}
  .wz-nav button[aria-current="true"] span{font-weight:500}
  /* thèmes en vignettes dans le configurateur */
  .opts.themes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} /* la famille Mille et une nuits : quatre variantes */
  @media (max-width:560px){ .opts.themes{grid-template-columns:repeat(2,1fr)} }
  .th{border:0;padding:0;background:none;cursor:pointer;display:grid;gap:6px;font:500 12px Inter,sans-serif;color:var(--ink);min-width:0;text-align:left}
  .th span{display:block;aspect-ratio:3/4;background:#eee center 30%/cover no-repeat;outline:1px solid var(--line)}
  .fld .hint{margin:0;font-size:13px;color:var(--muted)}
  /* fin du configurateur : récapitulatif et la suite */
  .sum{margin:0;border-top:1px solid var(--ink)}
  .sum div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
  .sum dt{font:500 12px/1.5 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .sum dd{margin:0}
  .next{list-style:none;margin:0;padding:0;display:grid;gap:10px}
  .next li{display:flex;gap:12px;align-items:baseline;font-size:15px;color:var(--muted)}
  .next li b{font:italic 400 22px/1 "Cormorant Garamond",Georgia,serif;color:var(--ink);flex:none;width:18px}

  /* vignettes (thèmes, lieux) : la sélection se voit par une coche, pas par un cadre noir ; le reste s'estompe un peu */
  .th span,.lieux button span{position:relative;transition:opacity .2s}
  .th[aria-pressed="false"] span,.lieux button[aria-pressed="false"] span{opacity:.72}
  .th[aria-pressed="true"] span::after,.lieux button[aria-pressed="true"] span::after{content:'✓';position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font:600 12px/22px Inter,sans-serif;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.3)}
  .th[aria-pressed="true"]{font-weight:600}
  .th small,.lieux button small{display:block;font-weight:400;color:var(--muted);font-size:10.5px;margin-top:1px}
  /* « votre lieu, d'après votre photo » : le lieu du thème en fond, un appareil photo dans une pastille blanche */
  .lieux button.sig span{display:grid;place-items:center;background-position:center;background-size:cover}
  .lieux button.sig span::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.28)}
  .lieux button.sig span svg{position:relative;width:36px;height:36px;padding:9px;border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 1px 6px rgba(0,0,0,.3)}
  .pv-long{justify-content:flex-start;padding-top:22%!important}
  /* formules : chaque ligne avec son icône, les nouveautés d'une formule marquées « en plus » */
  .feat li{display:flex;align-items:flex-start;gap:12px;padding:10px 0}
  .feat svg{flex:none;width:22px;height:22px;margin-top:1px;color:var(--ink)}
  .feat span{flex:1} .feat b{font-weight:500}
  /* « Tout Essentiel + » : la formule précédente est comprise, en bloc, puis la liste de ce qui s'ajoute */
  .feat li.feat-incl{position:relative;display:flex;align-items:baseline;gap:10px;background:var(--bg-2);padding:14px 16px;margin:0 0 14px;border:0}
  .feat li.feat-incl b{font:500 16px "Inter Tight",Inter,sans-serif} .feat li.feat-incl span{flex:1;color:var(--muted);font-size:14px}
  .feat li.feat-incl i{position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--bg);font:500 18px/28px Inter,sans-serif;text-align:center;font-style:normal}
  .feat li.feat-incl+li{margin-top:14px;border-top:0}
  .next li{font-size:14px} .sum div{font-size:14px}

  .th.sig small{color:var(--ink);font-weight:500}
  .k-c+.k-c{margin-left:4px}

  /* deux formats : cartes de la galerie, choix dans le configurateur, section de l'accueil */
  .fmts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 10px}
  .fmts a{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);text-decoration:none;color:inherit;font-size:13px}
  .fmts a b{font-weight:500} .fmts a span{color:var(--muted);font-size:12px}
  .opts.fmts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .op-card.fmt{display:grid;grid-template-columns:44px 1fr;gap:4px 12px;align-items:start;min-width:0}
  .op-card.fmt i{grid-row:1/3;width:44px;aspect-ratio:9/16;background:#eee center 72%/cover no-repeat;outline:1px solid var(--line)}
  .op-card.fmt[data-id="long"] i{background-position:center top}
  .op-card.fmt small{white-space:normal;line-height:1.35}
  .roll-prev{position:relative} .roll-prev img{display:block;width:100%;height:auto}
  .roll-prev .roll-txt{position:absolute;left:0;right:0;top:0;padding:16% 8% 0;text-align:center}
  .roll-prev .roll-txt .tx{font:italic 400 15px/1.4 "Cormorant Garamond",Georgia,serif;margin-top:8px}
  .fmt2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media (max-width:720px){ .fmt2{grid-template-columns:1fr} }
  .fmt2 a{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center;padding:18px;background:var(--bg-2);color:inherit;text-decoration:none}
  .fmt2 img{width:120px;aspect-ratio:9/16;object-fit:cover;object-position:center 72%;border-radius:10px;border:4px solid #111}
  .fmt2 a:last-child img{object-position:top}
  .fmt2 b{display:block;font:500 22px/1.2 "Inter Tight",Inter,sans-serif;letter-spacing:-.02em;margin-bottom:8px}
  .fmt2 p{margin:0 0 10px;color:var(--muted);font-size:15px} .fmt2 em{font-style:normal;font-size:14px}

  @media (min-width:721px){ .cp-mini-side,.cp-close{display:none} }
  /* la barre des étapes reste visible tout le temps : collée sous le menu (et sous l'aperçu réduit sur téléphone) */
  .wz-nav{position:sticky;top:60px;z-index:6;background:var(--bg);padding-top:6px;margin-top:-6px}


  @media (min-width:721px){ .cp-sum{display:none} }

  /* recette : rien sous 11 px, et des cibles tactiles d'au moins 32 px sur téléphone */
  .k{font-size:11px}
  .chip.sig i,.sig-tag,.lieux button i{font-size:11px}
  .roll-txt .ey{font-size:11px}
  .th small,.lieux button small{font-size:11px}
  .cta .ctx{margin:14px auto 0;max-width:34em;font-size:14px;color:var(--ink);background:var(--bg-2);padding:10px 14px;display:inline-block}
  @media (max-width:720px){
    .logo span{font-size:11px}
    nav .links a:not(.btn):not([href="/"]){display:inline-flex;align-items:center;min-height:36px;padding:0 2px}
    footer .legal a,.fld .hint a,.cont-more a,.model .acts a{display:inline-block;padding:8px 0}
    .cp-mini-side .lk{min-height:32px;display:inline-flex;align-items:center}
    #cpMiniSteps .wz-nav button{min-height:32px}
  }
  .fld small{font-size:11px}
  .cp-phone .op-tap{font-size:11px}
  /* recette : le menu tient dans 390 px sans défilement horizontal ; liens d'un doigt */
  nav .wrap,nav .links{min-width:0} nav .links{flex-wrap:nowrap}
  @media (max-width:420px){ nav .links{gap:8px} nav .links a:not(.btn):not([href="/"]){font-size:12px;padding:0} nav .btn{padding:0 10px} .logo{margin-right:6px} }
  .car-open{padding:8px 0;margin-top:4px}
  .flow p a,.offer p a,.price-note a,.head p a{display:inline-block;padding:6px 0}
  .cta .ctx[hidden]{display:none}
  /* Safari iOS : rien ne doit permettre de « pousser » la page vers la gauche (un débordement invisible suffisait) */
  html,body{overflow-x:hidden;overflow-x:clip;max-width:100%}
  /* vignettes de thème (3:4 dans une image 9:16) : on cadre sur le sujet, en bas, pas sur le ciel vide */
  .th span{background-position:center 88%}
  .model .pic img{object-position:center 80%}

  /* grand tableau : l'étape 3 montre les parties du tableau (lg-only), l'aperçu est le vrai moteur dans un cadre */
  .story>li.lg-only{display:none}
  .story.long>li.lg-only{display:grid}
  .story>li.part .opts{display:flex;flex-wrap:wrap;gap:6px}
  .cp-phone iframe.cp-lg{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1;background:#111;transition:opacity .25s}
  .pv-scroll[hidden]{display:none}