/* ═══════════════════════════════════════════════════════════════
   offres-commun.css — styles partagés par les pages offres
   (portrait.html, revelation.html, dialogue.html, portrait-a-deux.html)
   Toute modification ici s'applique aux quatre pages à la fois.
   Chaque page ne garde en <style> inline que ses blocs spécifiques
   (steps, final-cta, checkout...).
   ═══════════════════════════════════════════════════════════════ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#F6F3EC;--bg-alt:#EDEAE2;--white:#FDFCF9;--text:#252422;--text-soft:#6B6560;--accent:#87715A;--accent-text:#6B5842;--border:rgba(37,36,34,0.08);--font:'Courier Prime','Courier New',monospace;--ease:cubic-bezier(0.25,1,0.5,1)}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit}

.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 3rem;background:rgba(246,243,236,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-logo{font-size:.85rem;font-weight:700;letter-spacing:-.02em;text-decoration:none}
.nav-logo .dot{color:var(--accent)}
.nav-back{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft);text-decoration:none;transition:color .3s var(--ease)}
.nav-back:hover{color:var(--text)}

.hero{max-width:640px;margin:0 auto;padding:8.5rem 2rem 3rem;text-align:center}
.hero-label{font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:1.25rem}
.hero h1{font-size:clamp(1.7rem,4.5vw,2.5rem);font-weight:700;letter-spacing:-.03em;line-height:1.2;margin-bottom:1.1rem}
.hero-sub{font-size:.9rem;color:var(--text-soft);line-height:1.85;max-width:36rem;margin:0 auto 2rem}
.hero-price{font-size:1.7rem;font-weight:700;margin-bottom:.35rem}
.hero-price-note{font-size:.75rem;color:var(--text-soft);letter-spacing:.02em;margin-bottom:1.75rem}
.btn{display:inline-block;font-family:var(--font);font-size:.75rem;font-weight:700;letter-spacing:.03em;text-decoration:none;border-radius:50px;padding:.95rem 2.1rem;transition:all .3s var(--ease);cursor:pointer;border:1px solid var(--text)}
.btn-filled{background:var(--text);color:var(--white)}
.btn-filled:hover{background:var(--accent);border-color:var(--accent)}
.btn-outline{background:transparent;color:var(--text)}
.btn-outline:hover{background:var(--text);color:var(--white)}
.hero-note{font-size:.75rem;color:var(--text-soft);opacity:.8;margin-top:1rem}
.disclaimer{font-size:.75rem;color:var(--text-soft);opacity:.8;margin-top:1.75rem;letter-spacing:.02em}
.disclaimer a{color:var(--accent);text-decoration:underline}

section{max-width:640px;margin:0 auto;padding:3.5rem 2rem}
.section-label{font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem;text-align:center}
h2{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;text-align:center;margin-bottom:2rem}

.includes{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:2.25rem 2rem;box-shadow:0 18px 50px rgba(37,36,34,0.07)}
.includes ul{list-style:none}
.includes li{font-size:.82rem;color:var(--text-soft);line-height:1.7;padding-left:1.3rem;position:relative;margin-bottom:1rem}
.includes li:last-child{margin-bottom:0}
.includes li::before{content:"—";position:absolute;left:0;color:var(--accent)}

.quote-block{text-align:center;padding:3rem 2rem;background:var(--bg-alt)}
.quote-mark{font-size:2.2rem;color:var(--accent);opacity:.3;line-height:1;margin-bottom:.5rem}
.quote-text{font-size:.92rem;font-style:italic;line-height:1.8;max-width:34rem;margin:0 auto 1rem}
.quote-attr{font-size:.75rem;color:var(--text-soft);letter-spacing:.02em}

.compare{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;text-align:center}
.compare-card{border:1px solid var(--border);border-radius:12px;padding:1.5rem 1rem}
.compare-card.current{border-color:var(--accent);background:var(--white)}
.compare-name{font-size:.78rem;font-weight:700;margin-bottom:.3rem}
.compare-price{font-size:.95rem;font-weight:700;color:var(--accent-text);margin-bottom:.6rem}
.compare-desc{font-size:.75rem;color:var(--text-soft);line-height:1.6}

.faq-item{border-bottom:1px solid var(--border);padding:1.25rem 0}
.faq-q{font-size:.82rem;font-weight:700;margin-bottom:.5rem}
.faq-a{font-size:.78rem;color:var(--text-soft);line-height:1.8}

footer{border-top:1px solid var(--border);padding:2.5rem 2rem;text-align:center}
footer p{font-size:.75rem;color:var(--text-soft);opacity:.75;letter-spacing:.02em}
footer a{color:var(--text-soft);text-decoration:underline}

@media(max-width:640px){
  .nav{padding:0 1.25rem}
  .hero{padding:7rem 1.5rem 2.5rem}
  section{padding:2.75rem 1.5rem}
  .compare{grid-template-columns:1fr}
}

/* ═══ Accessibilité clavier — cases à cocher custom (pattern unifié) ═══
   .cgv-check-input remplace display:none : la case reste atteignable au
   clavier (Tab + Espace) tout en étant visuellement masquée. */
.cgv-check-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cgv-check-input:focus-visible + .cgv-circle,
.cgv-check-input:focus-visible + span,
.cgv-check-input:focus-visible + div{outline:2px solid var(--accent);outline-offset:3px}