/* Concept : site vitrine d'une page, deux entrées (entreprises, soirées), bandeaux de couleur de la marque. */
:root{
  --bg:#FBF3E4; --surface:#FFFAF0; --fg:#531904; --muted:#5C4B42; --line:#E6D3BC;
  --yellow:#F9B937; --ocre:#DC8B18; --terre:#9E4406; --sand:#C29F85;
  --btn-bg:#9E4406; --btn-fg:#FFFFFF; --band-bg:#531904; --band-fg:#FBF3E4;
  --mark-fg:#531904;
  --display:'Lora',Georgia,'Times New Roman',serif;
  --body:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1D0F08; --surface:#2A1710; --fg:#F8ECDB; --muted:#D8C3AE; --line:#47291B;
    --btn-bg:#F9B937; --btn-fg:#3A1103; --band-bg:#2A1710; --band-fg:#F8ECDB;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1D0F08; --surface:#2A1710; --fg:#F8ECDB; --muted:#D8C3AE; --line:#47291B;
  --btn-bg:#F9B937; --btn-fg:#3A1103; --band-bg:#2A1710; --band-fg:#F8ECDB;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--fg); font-family:var(--body); font-size:16px; line-height:1.6;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
.wrap{max-width:1080px; margin:0 auto}
h1,h2,h3{font-family:var(--display); font-weight:500; line-height:1.15; text-wrap:balance; margin:0}
h1{font-size:clamp(2.1rem,5.2vw,3.4rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem)}
h3{font-size:1.3rem}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--yellow); outline-offset:3px; border-radius:4px}
.eyebrow{font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--terre)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .eyebrow{color:var(--yellow)}}
:root[data-theme="dark"] .eyebrow{color:var(--yellow)}
.hl{background:linear-gradient(transparent 58%, var(--yellow) 58%); padding:0 .12em}

/* En-tête */
header{position:sticky; top:env(safe-area-inset-top, 0px); z-index:10; background:var(--bg); border-bottom:1px solid var(--line);
  margin-left:calc(-1 * max(16px, env(safe-area-inset-left, 0px))); margin-right:calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
.bar{display:flex; align-items:center; gap:20px; padding-block:10px}
.logo{background:#FBF3E4; border-radius:14px; padding:4px 10px; display:flex}
.logo img{height:40px; width:auto; display:block}
nav{display:flex; gap:22px; margin-left:auto; font-size:.92rem; font-weight:500}
nav a{text-decoration:none; padding:6px 0; border-bottom:2px solid transparent}
nav a:hover{border-color:var(--yellow)}
.btn{display:inline-block; background:var(--btn-bg); color:var(--btn-fg); font:600 .95rem var(--body); text-decoration:none;
  padding:12px 22px; border-radius:999px; border:2px solid var(--btn-bg)}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--fg); border-color:var(--fg)}
@media (max-width:760px){nav{display:none} .bar .btn{margin-left:auto; padding:10px 16px}}

/* Hero */
.hero{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; padding-block:56px 64px}
.hero > *{min-width:0}
.hero p.lead{font-size:1.12rem; color:var(--muted); margin-top:20px; max-width:34em}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.photo{border-radius:36px 140px 36px 36px; overflow:hidden; aspect-ratio:3/4; max-width:100%; background:var(--sand)}
.photo img{width:100%; height:100%; object-fit:cover; display:block}
@media (max-width:820px){.hero{grid-template-columns:1fr; gap:32px; padding-block:36px 44px} .photo{max-width:340px}}

/* Bandeau de chiffres */
.stats{background:var(--band-bg); color:var(--band-fg); margin-inline:calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  padding-inline:max(16px, env(safe-area-inset-left, 0px))}
.stats .wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding-block:34px}
.stats b{font:500 clamp(1.8rem,4vw,2.6rem)/1 var(--display); color:var(--yellow); display:block; font-variant-numeric:tabular-nums}
.stats span{font-size:.88rem; opacity:.92}
.stats small{grid-column:1/-1; font-size:.75rem; opacity:.7}
@media (max-width:620px){.stats .wrap{grid-template-columns:1fr; gap:16px}}

section{padding-block:68px}
.head{max-width:40em; margin-bottom:36px; display:grid; gap:10px}
.head p{color:var(--muted)}

/* Formules */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:22px; overflow:hidden; display:flex; flex-direction:column; min-width:0}
.card .top{padding:18px 22px; font:500 1.35rem var(--display); color:var(--fg)}
.card:nth-child(1) .top{background:var(--yellow); color:#531904}
.card:nth-child(2) .top{background:var(--ocre); color:#531904}
.card:nth-child(3) .top{background:#531904; color:#F9B937}
.card .body{padding:22px; display:grid; gap:14px; flex:1}
.card dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:.92rem}
.card dt{color:var(--muted)}
.card dd{margin:0; font-weight:600}
.card p{color:var(--muted); font-size:.93rem}
@media (max-width:860px){.cards{grid-template-columns:1fr}}
.note{margin-top:24px; font-size:.92rem; color:var(--muted); max-width:46em}
.incl{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:44px}
.incl h3{font-size:1.1rem; margin-bottom:12px}
.incl ul{margin:0; padding:0; list-style:none; display:grid; gap:8px; font-size:.95rem}
.incl li{padding-left:22px; position:relative}
.incl li::before{content:""; position:absolute; left:0; top:.55em; width:10px; height:10px; border-radius:50%; background:var(--ocre)}
@media (max-width:700px){.incl{grid-template-columns:1fr}}

/* Soirées + signature */
.split{display:grid; grid-template-columns:1fr 1fr; gap:32px}
.split > *{min-width:0}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:30px; display:grid; gap:14px; align-content:start}
.panel.dark{background:var(--band-bg); color:var(--band-fg); border-color:transparent}
.panel.dark .eyebrow{color:var(--yellow)}
.panel p{color:var(--muted)}
.panel.dark p{color:var(--band-fg); opacity:.9}
@media (max-width:760px){.split{grid-template-columns:1fr}}
.swatches{display:flex; gap:8px; margin-top:4px}
.swatches i{width:34px; height:34px; border-radius:50%; display:block; border:2px solid rgba(255,255,255,.35)}

/* Étapes */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:0; margin:0; list-style:none; counter-reset:s}
.steps li{counter-increment:s; display:grid; gap:8px; align-content:start}
.steps li::before{content:counter(s); width:38px; height:38px; border-radius:50%; background:var(--yellow); color:#531904; display:grid; place-items:center; font:600 1rem var(--body)}
.steps h3{font-size:1.1rem}
.steps p{font-size:.92rem; color:var(--muted)}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* Avis */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:0; padding:0; list-style:none}
.quotes li{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:24px; display:grid; gap:12px; align-content:space-between; min-width:0}
.quotes q{font:italic 500 1.12rem/1.45 var(--display); quotes:"«\00a0" "\00a0»"}
.quotes cite{font:400 .82rem var(--body); color:var(--muted); font-style:normal}
@media (max-width:760px){.steps[style]{grid-template-columns:1fr !important}}
.todo-inline{background:#F9B937; color:#531904; padding:0 .25em; border-radius:3px}
@media (max-width:860px){.quotes{grid-template-columns:1fr}}
.review-cta{margin-top:28px; display:flex; flex-wrap:wrap; gap:16px 24px; align-items:center; justify-content:space-between; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:22px 24px}
.review-cta p{margin:0; max-width:52ch}
.review-cta .score{font:600 1.05rem var(--body)}


/* Contact */
.contact{background:var(--yellow); color:#531904; border-radius:28px; padding:clamp(24px,5vw,48px); display:grid; grid-template-columns:1.1fr .9fr; gap:32px}
.contact > *{min-width:0}
.contact h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
.contact .btn{background:#531904; color:#FBF3E4; border-color:#531904}
.coords{display:grid; gap:14px; align-content:start; font-size:.95rem}
.coords div{display:grid; gap:2px}
.coords small{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; opacity:.8}
.coords .row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.coords strong{font-weight:600; overflow-wrap:anywhere}
.copy{background:transparent; color:#531904; border:1.5px solid #531904; border-radius:999px; padding:8px 14px; min-height:40px; font:500 .8rem var(--body); cursor:pointer}
.copy:hover{background:#531904; color:#F9B937}
@media (max-width:760px){.contact{grid-template-columns:1fr}}

/* Pied de page */
footer{border-top:1px solid var(--line); padding-block:36px 48px; font-size:.85rem; color:var(--muted)}
footer .cols{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
footer h3{font:600 .8rem var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--fg); margin-bottom:8px}
footer p{margin-bottom:6px}
footer .todo{background:#F9B937; color:#531904; padding:0 .25em; border-radius:3px}
@media (max-width:760px){footer .cols{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

[hidden]{display:none !important}
nav a[aria-current="page"]{border-color:var(--yellow)}
.choice{display:grid; grid-template-columns:1fr 1fr; gap:20px; padding-bottom:56px}
.pick{display:grid; gap:10px; align-content:start; text-decoration:none; background:var(--surface); border:2px solid var(--line); border-radius:26px; padding:30px}
.pick strong{font:500 clamp(1.4rem,3vw,1.9rem)/1.2 var(--display)}
.pick > span:not(.eyebrow):not(.go){color:var(--muted)}
.pick .go{font-weight:600; color:var(--terre); margin-top:6px}
.pick.alt{background:var(--band-bg); color:var(--band-fg); border-color:transparent}
.pick.alt .eyebrow, .pick.alt .go{color:var(--yellow)}
.pick.alt > span:not(.eyebrow):not(.go){color:var(--band-fg); opacity:.9}
.pick:hover{border-color:var(--yellow)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pick .go{color:var(--yellow)}}
@media (max-width:760px){.choice{grid-template-columns:1fr}}

.faq{display:grid; gap:12px; max-width:52em}
.faq details{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:0 22px}
.faq summary{cursor:pointer; padding:18px 0; font:500 1.08rem var(--display); list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font:600 1.3rem var(--body); color:var(--terre); flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--muted); padding-bottom:18px; font-size:.95rem}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .faq summary::after{color:var(--yellow)}}

.rules{max-width:46em; display:grid; gap:10px}
.rules h2{font-size:1.25rem; margin-top:14px}
.rules p{color:var(--muted)}

.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px 12px;z-index:99}
.rules ul{margin:6px 0 10px 20px}.rules li{margin:3px 0}
footer a{color:inherit}