/* La Devanture — charte : blanc, noir, gris, bleu anthracite. Police : Times. */
@view-transition { navigation: auto; }
:root{
  --blanc:#ffffff; --fond:#f5f6f8; --gris-clair:#e6e8ec; --gris:#8a9099; --gris-fonce:#4a5059;
  --noir:#0f1114; --anthracite:#1f2a37; --anthracite-2:#2c3a4b; --ligne:#d9dce1; --ok:#1f6b45;
  --serif:"Times New Roman",Times,Georgia,serif;
  --ombre:0 1px 2px rgba(15,17,20,.06),0 8px 28px rgba(15,17,20,.08);
}
*{box-sizing:border-box}
html{font-size:20px;scroll-behavior:smooth}
body{margin:0;background:var(--blanc);color:var(--noir);font-family:var(--serif);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--anthracite)}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:2.8rem} h2{font-size:2rem} h3{font-size:1.25rem}
.surtitre{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin-bottom:12px;display:block}
.aide{color:var(--gris-fonce)}
.cache{display:none!important}

/* En-tête */
header.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--gris-clair)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:76px}
.logo{font-family:var(--serif);font-weight:700;font-size:1.45rem;color:var(--noir);text-decoration:none;display:flex;align-items:center;gap:12px;letter-spacing:.01em}
.store{display:inline-flex;width:40px;height:16px;border-radius:3px 3px 0 0;overflow:hidden}
.store i{flex:1;background:var(--anthracite)} .store i:nth-child(even){background:#c9ced6}
.lien-top{color:var(--noir);text-decoration:none;font-size:.95rem;border-bottom:1px solid var(--noir);padding-bottom:2px}

/* Boutons */
.btn{display:block;width:100%;max-width:520px;margin:0 auto 14px;padding:21px 28px;border-radius:10px;border:2px solid var(--anthracite);
     background:var(--anthracite);color:#fff;font-size:1.2rem;font-family:var(--serif);font-weight:700;letter-spacing:.02em;text-align:center;text-decoration:none;cursor:pointer;
     transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn:hover{background:var(--noir);border-color:var(--noir);transform:translateY(-2px);box-shadow:0 10px 24px rgba(31,42,55,.25)}
.btn.secondaire{background:transparent;color:var(--anthracite)}
.btn.secondaire:hover{background:var(--anthracite);color:#fff}
.btn:active{transform:translateY(0)}
.btn:focus-visible,.choix:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #4b7bd1;outline-offset:3px}

/* Accueil */
.hero{background:linear-gradient(180deg,var(--fond),var(--blanc));padding:72px 0 64px;border-bottom:1px solid var(--gris-clair)}
.hero .grille{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero p.lead{font-size:1.25rem;color:var(--gris-fonce);margin:0 0 30px;max-width:540px}
.hero .btn{margin:0 0 14px}
.telephone{width:290px;margin:0 auto;border:10px solid var(--noir);border-radius:36px;overflow:hidden;background:#fff;box-shadow:var(--ombre),0 30px 60px rgba(15,17,20,.18);aspect-ratio:9/18.5;position:relative}
.telephone .ecran{position:absolute;inset:0;overflow:hidden;font-size:11px}
.telephone .ecran>div{transform-origin:top left;width:200%;transform:scale(.5)}
section.bloc{padding:80px 0;border-bottom:1px solid var(--gris-clair)}
section.bloc.gris{background:var(--fond)}
.titre-section{text-align:center;max-width:680px;margin:0 auto 44px}
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:e}
.etape{background:var(--blanc);border:1px solid var(--ligne);border-radius:14px;padding:30px;position:relative}
.etape::before{counter-increment:e;content:counter(e);display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--anthracite);color:#fff;font-weight:700;font-size:1.2rem;margin-bottom:16px}
.avantages{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.carte{background:var(--blanc);border:1px solid var(--ligne);border-radius:14px;padding:28px;box-shadow:var(--ombre)}
.carte .ico{width:46px;height:46px;border-radius:12px;background:var(--fond);border:1px solid var(--ligne);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.carte .ico svg{width:24px;height:24px;stroke:var(--anthracite);fill:none;stroke-width:1.8}
.prix-bloc{max-width:640px;margin:0 auto;text-align:center;background:var(--anthracite);color:#fff;border-radius:18px;padding:44px 32px;box-shadow:var(--ombre)}
.prix-bloc .ligne-prix{display:flex;align-items:baseline;justify-content:center;gap:12px;margin:8px 0}
.prix-bloc .gros{font-size:3.2rem;font-weight:700;line-height:1}
.prix-bloc .petit{color:#c9ced6}
.prix-bloc ul{list-style:none;padding:0;margin:22px auto 28px;text-align:left;max-width:420px}
.prix-bloc li{padding:8px 0 8px 32px;position:relative;border-bottom:1px solid rgba(255,255,255,.12)}
.prix-bloc li::before{content:"✓";position:absolute;left:4px;color:#9fb6d1;font-weight:700}
.prix-bloc .btn{background:#fff;color:var(--anthracite);border-color:#fff}
.prix-bloc .btn:hover{background:var(--fond)}
.faq details{border-bottom:1px solid var(--ligne);padding:18px 4px}
.faq summary{cursor:pointer;font-weight:700;font-size:1.1rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--gris)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:12px 0 0;color:var(--gris-fonce)}
.contact-grille{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}

/* Ancien bloc prix (questionnaire) */
.prix{text-align:center}
.prix .gros{font-size:2.4rem;font-weight:700;color:var(--anthracite)}
.prix .petit{color:var(--gris-fonce)}

/* Formulaires */
label{display:block;font-weight:700;margin:18px 0 6px}
input[type=text],input[type=tel],input[type=email],textarea{width:100%;font-size:1.1rem;padding:16px 18px;border:1.5px solid var(--ligne);border-radius:10px;background:#fff;font-family:var(--serif);color:var(--noir);transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus{border-color:var(--anthracite);box-shadow:0 0 0 4px rgba(31,42,55,.08)}
textarea{min-height:110px}
.note{background:#fdf6e7;border:1px solid #ecd9a6;border-radius:10px;padding:16px;margin:16px 0}
.succes{background:#e8f3ec;border:1px solid #a9d1b8;border-radius:10px;padding:16px;margin:16px 0;color:var(--ok);font-weight:700}
footer{background:var(--noir);color:#aeb4bd;padding:44px 0;font-size:.85rem}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:#fff}

/* Questionnaire */
.page-q{max-width:820px;margin:0 auto;padding:40px 24px 60px}
.progress{height:6px;background:var(--gris-clair);border-radius:3px;overflow:hidden;margin:0 0 10px}
.progress>div{height:100%;background:var(--anthracite);width:0;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.etape-num{color:var(--gris);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:22px}
.choix-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:22px 0}
.choix{display:flex;align-items:center;gap:14px;background:var(--blanc);border:1.5px solid var(--ligne);border-radius:12px;padding:20px;font-size:1.1rem;cursor:pointer;text-align:left;font-family:var(--serif);color:var(--noir);width:100%;
       transition:border-color .2s,transform .2s,box-shadow .2s;animation:monter .45s cubic-bezier(.2,.7,.2,1) both}
.choix:hover{border-color:var(--anthracite);transform:translateY(-2px);box-shadow:var(--ombre)}
.choix .em{font-size:1.6rem}
.choix[aria-pressed=true]{border:2px solid var(--anthracite);background:#eef1f5}
.choix[aria-pressed=true]::after{content:"✓";margin-left:auto;font-weight:700;color:#fff;background:var(--anthracite);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex:none}
.choix:nth-child(2){animation-delay:.04s}.choix:nth-child(3){animation-delay:.08s}.choix:nth-child(4){animation-delay:.12s}.choix:nth-child(5){animation-delay:.16s}.choix:nth-child(6){animation-delay:.2s}.choix:nth-child(7){animation-delay:.24s}
.vignette{display:block;padding:0;overflow:hidden}
.vignette .apercu{height:120px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.vignette .nom{padding:14px 18px;display:flex;align-items:center;border-top:1px solid var(--gris-clair)}
.pastille{width:46px;height:46px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--ligne);flex:none}
.nav-q{display:flex;gap:12px;margin-top:28px}
.nav-q .btn{margin:0}
.nav-q .btn.retour{max-width:200px}
.anim-q{animation:monter .5s cubic-bezier(.2,.7,.2,1) both}
.cadre-apercu{border:1px solid var(--ligne);border-radius:16px;overflow:hidden;background:#fff;margin:22px 0;box-shadow:var(--ombre)}
.cadre-apercu .barre{background:var(--fond);border-bottom:1px solid var(--ligne);color:var(--gris-fonce);font-size:.8rem;padding:10px 16px;display:flex;align-items:center;gap:8px}
.cadre-apercu .barre i{width:10px;height:10px;border-radius:50%;background:var(--gris-clair);display:inline-block}

/* Animations */
@keyframes monter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes apparaitre{from{opacity:0}to{opacity:1}}
main{animation:apparaitre .5s ease both}
.revele{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.revele.vu{opacity:1;transform:none}
.hero .anim{animation:monter .8s cubic-bezier(.2,.7,.2,1) both}
.hero .anim.d1{animation-delay:.1s}.hero .anim.d2{animation-delay:.2s}.hero .anim.d3{animation-delay:.3s}.hero .anim.d4{animation-delay:.45s}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.revele{opacity:1;transform:none}@view-transition{navigation:none}}

@media (max-width:860px){
  .hero .grille,.contact-grille{grid-template-columns:1fr;gap:40px}
  .etapes,.avantages{grid-template-columns:1fr}
  .telephone{width:240px}
}
@media (max-width:600px){
  html{font-size:18px} h1{font-size:2.1rem} h2{font-size:1.6rem}
  .hero{padding:44px 0}
  section.bloc{padding:56px 0}
  .nav-q{flex-direction:column-reverse} .nav-q .btn.retour{max-width:none}
  .lien-top{font-size:.85rem}
}

/* ===== v3 : accueil cinématographique ===== */
.page-accueil header.top{position:fixed;left:0;right:0;top:18px;background:none;border:0;backdrop-filter:none;z-index:30;pointer-events:none}
.page-accueil header.top .wrap{height:auto}
.pilule{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:1080px;margin:0 auto;
  padding:12px 14px 12px 24px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease}
.pilule .logo{color:#fff;font-size:1.25rem}
.pilule .store i{background:#fff} .pilule .store i:nth-child(even){background:rgba(255,255,255,.45)}
.pilule nav{display:flex;align-items:center;gap:22px}
.pilule nav a{color:#fff;text-decoration:none;font-size:.9rem}
.pilule nav a.cta{background:#fff;color:var(--anthracite);padding:10px 18px;border-radius:999px;font-weight:700}
.pilule.solide{background:rgba(255,255,255,.94);border-color:var(--gris-clair);box-shadow:0 8px 30px rgba(15,17,20,.10)}
.pilule.solide .logo,.pilule.solide nav a{color:var(--noir)}
.pilule.solide .store i{background:var(--anthracite)} .pilule.solide .store i:nth-child(even){background:#c9ced6}
.pilule.solide nav a.cta{background:var(--anthracite);color:#fff}

.hero-photo{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;color:#fff;background:#1a1f26}
.hero-photo .image{position:absolute;inset:-4% 0 0 0;background:#1a1f26 center/cover no-repeat;transform:scale(1.08);transition:transform 2.2s cubic-bezier(.2,.7,.2,1);will-change:transform}
.hero-photo.pret .image{transform:scale(1)}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,13,18,.55) 0%,rgba(10,13,18,.25) 35%,rgba(10,13,18,.82) 100%)}
.hero-photo .contenu{position:relative;z-index:2;width:100%;padding:0 0 9vh}
.hero-photo h1{font-size:clamp(2.4rem,6vw,4.6rem);color:#fff;max-width:900px;margin-bottom:.35em}
.hero-photo .surtitre{color:rgba(255,255,255,.75)}
.hero-photo p.lead{color:rgba(255,255,255,.88);font-size:1.25rem;max-width:620px;margin:0 0 30px}
.hero-photo .actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-photo .actions .btn{margin:0;width:auto;min-width:240px;flex:0 1 auto}
.hero-photo .btn{background:#fff;color:var(--anthracite);border-color:#fff}
.hero-photo .btn:hover{background:var(--fond);border-color:var(--fond)}
.hero-photo .btn.secondaire{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.7);backdrop-filter:blur(6px)}
.hero-photo .btn.secondaire:hover{background:rgba(255,255,255,.2)}
.defiler{position:absolute;right:24px;bottom:28px;z-index:2;color:rgba(255,255,255,.7);font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;writing-mode:vertical-rl;display:flex;align-items:center;gap:10px}
.defiler::after{content:"";width:1px;height:46px;background:rgba(255,255,255,.6);animation:fil 2.2s ease-in-out infinite}
@keyframes fil{0%,100%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
.hero-photo .anim{animation:monter 1s cubic-bezier(.2,.7,.2,1) both}
.hero-photo .anim.d1{animation-delay:.25s}.hero-photo .anim.d2{animation-delay:.4s}.hero-photo .anim.d3{animation-delay:.55s}

.chiffres{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--gris-clair)}
.chiffres div{padding:34px 24px;text-align:center;border-right:1px solid var(--gris-clair)}
.chiffres div:last-child{border-right:0}
.chiffres strong{display:block;font-size:2.2rem;line-height:1.1}
.chiffres span{color:var(--gris-fonce);font-size:.95rem}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
ul.liste{list-style:none;padding:0;margin:22px 0 0}
ul.liste li{padding:12px 0 12px 34px;border-bottom:1px solid var(--gris-clair);position:relative}
ul.liste li::before{content:"";position:absolute;left:0;top:19px;width:16px;height:16px;border-radius:50%;border:2px solid var(--anthracite)}
.carte-edit{max-width:380px;margin:0 auto;background:#fff;border:1px solid var(--ligne);border-radius:18px;box-shadow:var(--ombre),0 30px 60px rgba(15,17,20,.10);overflow:hidden}
.carte-edit .entete{background:var(--anthracite);color:#fff;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;font-size:.9rem}
.carte-edit .entete b{font-size:1.1rem}
.carte-edit .ligne{display:flex;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--gris-clair);font-size:.95rem}
.carte-edit .ligne .px{font-weight:700;white-space:nowrap;transition:color .3s}
.carte-edit .ligne.maj{animation:surligne 1.6s ease}
@keyframes surligne{0%{background:#fff}20%{background:#e9eef5}100%{background:#fff}}
.carte-edit .pied{padding:14px 20px;display:flex;align-items:center;gap:10px;color:var(--ok);font-size:.85rem;min-height:50px}
.carte-edit .pied .point{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.option-ia{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;background:var(--fond);border:1px solid var(--ligne);border-radius:20px;padding:44px}
.badge{display:inline-block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--anthracite);color:var(--anthracite);border-radius:999px;padding:5px 12px;margin-bottom:14px}
.bulles .m{background:#fff;border:1px solid var(--ligne);border-radius:14px;padding:12px 14px;margin:10px 0;max-width:88%;font-size:.95rem;box-shadow:0 2px 8px rgba(15,17,20,.04)}
.bulles .m.client{margin-left:auto;background:var(--anthracite);color:#fff;border-color:var(--anthracite)}
.prix-duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:900px;margin:0 auto}
.offre{border:1px solid var(--ligne);border-radius:18px;padding:36px 30px;background:#fff;box-shadow:var(--ombre);display:flex;flex-direction:column}
.offre.sombre{background:var(--anthracite);color:#fff;border-color:var(--anthracite)}
.offre .nom-offre{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.offre.sombre .nom-offre{color:#9fb0c4}
.offre .montant{font-size:3rem;font-weight:700;line-height:1;margin:14px 0 4px}
.offre .detail{color:var(--gris-fonce);margin-bottom:18px}
.offre.sombre .detail{color:#c9ced6}
.offre ul{list-style:none;padding:0;margin:0 0 24px;flex:1}
.offre li{padding:9px 0 9px 28px;position:relative;border-bottom:1px solid var(--gris-clair)}
.offre.sombre li{border-color:rgba(255,255,255,.12)}
.offre li::before{content:"✓";position:absolute;left:2px;font-weight:700;color:var(--anthracite)}
.offre.sombre li::before{color:#9fb6d1}
.offre .btn{max-width:none;margin:0}
.offre.sombre .btn{background:#fff;color:var(--anthracite);border-color:#fff}
.note-prix{text-align:center;color:var(--gris-fonce);margin-top:26px}
@media (max-width:860px){
  .duo,.option-ia,.prix-duo{grid-template-columns:1fr;gap:36px}
  .option-ia{padding:28px}
  .pilule nav a:not(.cta){display:none}
  .chiffres{grid-template-columns:1fr}
  .chiffres div{border-right:0;border-bottom:1px solid var(--gris-clair)}
}
@media (max-width:600px){
  .page-accueil header.top{top:10px}
  .pilule{padding:8px 8px 8px 16px}
  .pilule .logo{font-size:1.05rem}
  .pilule nav a.cta{padding:9px 14px;font-size:.8rem}
  .hero-photo .actions .btn{width:100%;min-width:0}
  .defiler{display:none}
  .hero-photo .contenu{padding-bottom:6vh;padding-top:110px}
}