/*
Theme Name: Famille Prête - Landing
Theme URI: https://www.famille-prete.fr/
Author: Famille Prête
Description: Thème one-page pour la landing "Ce soir, on se prépare". Généré à partir de la maquette HTML/CSS statique.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: famille-prete
*/

:root{
  --violet:#3D3D8F;
  --violet-15:#E2E2F0;
  --violet-deep:#2E2E6B;
  --ambre:#F0B43C;
  --ambre-pale:#FDF6E8;
  --orange:#DC7814;
  --orange-dark:#B8600C;
  --vert:#27AE60;
  --bleu:#2471A3;
  --rouge:#C0392B;
  --papier:#FDFCFA;
  --encre:#1F1F2E;
  --encre-doux:#55556B;

  --serif:'Fraunces',Georgia,serif;
  --sans:'Source Sans 3',system-ui,-apple-system,sans-serif;

  --pad:clamp(56px,7vw,104px);
  --gut:clamp(20px,5vw,40px);
  --max:1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
body{
  background:var(--papier);
  color:var(--encre);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.narrow{max-width:720px}

h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.015em}
h1{font-size:clamp(40px,7.2vw,68px);font-weight:700}
h2{font-size:clamp(28px,4.2vw,40px);margin-bottom:24px}
h3{font-size:20px;font-weight:600;letter-spacing:0}
p{margin-bottom:18px;max-width:64ch}
a{color:var(--violet)}

.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--violet);margin-bottom:20px;display:block;
}

/* ---------- barre ---------- */
.bar{
  position:sticky;top:0;z-index:50;
  background:rgba(253,252,250,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--violet-15);
}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
.marque{font-family:var(--serif);font-weight:600;font-size:17px;color:var(--violet);letter-spacing:-.01em;margin:0}
.bar .btn{padding:9px 18px;font-size:14px}

/* ---------- boutons ---------- */
.btn{
  display:inline-block;background:var(--orange);color:#fff;
  font-family:var(--sans);font-weight:600;font-size:17px;
  padding:16px 32px;border-radius:3px;text-decoration:none;
  border:none;cursor:pointer;transition:background .18s ease,transform .18s ease;
}
.btn:hover{background:var(--orange-dark);transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.btn-clair{background:var(--ambre);color:var(--violet-deep)}
.btn-clair:hover{background:#E5A62C}
.sous-btn{font-size:14.5px;color:var(--encre-doux);margin-top:14px;max-width:44ch}

/* ---------- sections ---------- */
section{padding:var(--pad) 0}
.s-ambre{background:var(--ambre-pale)}
.s-violet{background:var(--violet);color:#fff}
.s-violet h2,.s-violet h3{color:#fff}
.s-violet p{color:#DCDCEF}
.filet{height:1px;background:var(--violet-15);border:0}

/* ---------- hero ---------- */
.hero{padding-top:clamp(48px,6vw,84px);padding-bottom:clamp(40px,5vw,64px)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:1.15fr .85fr;gap:60px}}
.hero h1{margin-bottom:22px}
.hero .accroche{font-size:clamp(18px,2.2vw,21px);color:var(--encre-doux);max-width:34ch;margin-bottom:14px}
.hero .rituel{font-size:16px;color:var(--violet);font-weight:500;margin-bottom:30px}

/* couverture */
.couv{
  aspect-ratio:185/285;background:#fff;
  border:1px solid var(--violet-15);
  box-shadow:0 18px 44px -18px rgba(61,61,143,.34),0 2px 6px rgba(61,61,143,.08);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:30px;position:relative;overflow:hidden;
}
.couv::before{content:'';position:absolute;inset:0 auto 0 0;width:9px;background:var(--violet)}
.couv .ph{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#A9A9BE;line-height:1.7}
.couv .t{font-family:var(--serif);font-size:clamp(24px,3.4vw,32px);color:var(--violet);margin:16px 0 8px;font-weight:700;line-height:1.1}
.couv .st{font-size:14px;color:var(--encre-doux)}

/* repères */
.reperes{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--violet-15);border:1px solid var(--violet-15);margin-top:48px}
@media(min-width:760px){.reperes{grid-template-columns:repeat(4,1fr)}}
.repere{background:var(--papier);padding:22px 20px}
.repere .n{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--violet);display:block;line-height:1.1}
.repere .l{font-size:14.5px;color:var(--encre-doux);margin-top:6px;display:block}

/* ---------- questions ---------- */
.questions{list-style:none;margin:28px 0 0;max-width:640px}
.questions li{
  padding:15px 0 15px 26px;border-bottom:1px solid var(--violet-15);
  font-size:18px;position:relative;
}
.questions li::before{content:'';position:absolute;left:0;top:26px;width:12px;height:1px;background:var(--ambre)}
.questions li:last-child{border-bottom:0}

.citation{
  border-left:3px solid var(--ambre);padding:4px 0 4px 22px;margin:36px 0 0;
  font-family:var(--serif);font-size:clamp(19px,2.4vw,23px);color:var(--violet);line-height:1.45;
}

/* ---------- 3A ---------- */
.trois{display:grid;grid-template-columns:1fr;gap:1px;background:var(--violet-15);border:1px solid var(--violet-15);margin-top:40px}
@media(min-width:820px){.trois{grid-template-columns:repeat(3,1fr)}}
.a{background:var(--papier);padding:30px 26px}
.a .nom{font-family:var(--serif);font-size:22px;color:var(--violet);font-weight:600;margin-bottom:10px}
.a p{font-size:16px;color:var(--encre-doux);margin:0}

/* ---------- bénéfices ---------- */
.benef{display:grid;grid-template-columns:1fr;gap:36px;margin-top:8px}
@media(min-width:800px){.benef{grid-template-columns:repeat(2,1fr);gap:40px 56px}}
.benef h3{color:var(--violet);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--violet-15)}
.benef ul{list-style:none}
.benef li{position:relative;padding-left:26px;margin-bottom:11px;font-size:16.5px;color:var(--encre-doux)}
.benef li::before{
  content:'';position:absolute;left:2px;top:9px;width:9px;height:5px;
  border-left:2px solid var(--vert);border-bottom:2px solid var(--vert);transform:rotate(-45deg);
}

/* ---------- signature : les 30 soirées ---------- */
.soirees{margin:0 0 52px}
.soirees .lg{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#B9B9DC;margin-bottom:14px}
.grille{display:flex;flex-wrap:wrap;gap:5px;max-width:560px}
.soir{width:16px;height:16px;border-radius:2px;background:rgba(255,255,255,.16)}
.soir.w1{background:#F0B43C}
.soir.w2{background:#DC7814}
.soir.w3{background:#7EC8A0}
.soir.w4{background:#8FB8DE}
.legende{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;font-size:13.5px;color:#C7C7E4}
.legende span{display:flex;align-items:center;gap:7px}
.legende i{width:11px;height:11px;border-radius:2px;display:inline-block}

.semaines{display:grid;grid-template-columns:1fr;gap:1px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16)}
@media(min-width:860px){.semaines{grid-template-columns:repeat(2,1fr)}}
.sem{background:var(--violet);padding:30px 28px}
.sem .num{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ambre);font-weight:600}
.sem h3{margin:8px 0 12px;font-size:22px}
.sem p{font-size:16px;margin:0}

.plus{display:grid;grid-template-columns:1fr;gap:22px;margin-top:44px}
@media(min-width:820px){.plus{grid-template-columns:repeat(3,1fr)}}
.plus div{border-top:2px solid var(--ambre);padding-top:16px}
.plus h3{font-size:17px;margin-bottom:8px}
.plus p{font-size:15.5px;margin:0}

/* ---------- pour qui ---------- */
.pourqui{list-style:none;margin-top:8px;columns:1}
@media(min-width:840px){.pourqui{columns:2;column-gap:56px}}
.pourqui li{
  break-inside:avoid;padding:13px 0 13px 30px;position:relative;
  border-bottom:1px solid var(--violet-15);font-size:16.5px;
}
.pourqui li::before{
  content:'';position:absolute;left:4px;top:20px;width:8px;height:8px;
  border-radius:50%;border:2px solid var(--bleu);
}
.encadre{
  background:#fff;border:1px solid var(--violet-15);border-left:3px solid var(--vert);
  padding:22px 24px;margin-top:36px;font-size:16.5px;color:var(--encre-doux);max-width:640px;
}

/* ---------- n'est pas ---------- */
.tab{width:100%;border-collapse:collapse;margin-top:8px;font-size:16.5px}
.tab th{
  text-align:left;padding:12px 16px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--violet);border-bottom:2px solid var(--violet-15);
}
.tab td{padding:15px 16px;border-bottom:1px solid var(--violet-15);vertical-align:top}
.tab td:first-child{color:var(--encre-doux);width:42%}
.tab td:last-child{color:var(--encre);font-weight:500}

/* ---------- auteur ---------- */
.auteur{display:grid;grid-template-columns:1fr;gap:40px;align-items:start}
@media(min-width:880px){.auteur{grid-template-columns:.8fr 1.2fr;gap:56px}}
.portrait{
  aspect-ratio:4/5;background:#fff;border:1px solid var(--violet-15);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#A9A9BE;line-height:1.8;
}
.creds{list-style:none;margin:0 0 26px}
.creds li{padding:9px 0 9px 22px;position:relative;font-size:16px;color:var(--encre-doux);border-bottom:1px solid var(--violet-15)}
.creds li::before{content:'';position:absolute;left:0;top:20px;width:11px;height:1px;background:var(--violet)}

/* ---------- infos pratiques ---------- */
.fiche{border:1px solid var(--violet-15);background:#fff;max-width:720px}
.ligne{display:grid;grid-template-columns:1fr;gap:2px;padding:16px 22px;border-bottom:1px solid var(--violet-15)}
@media(min-width:640px){.ligne{grid-template-columns:180px 1fr;gap:20px;align-items:baseline}}
.ligne:last-child{border-bottom:0}
.ligne dt{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--violet);font-weight:600}
.ligne dd{font-size:16.5px}
.ligne dd small{display:block;color:var(--encre-doux);font-size:14.5px;margin-top:3px}
.legal-note{font-size:14.5px;color:var(--encre-doux);margin-top:20px;max-width:620px}

/* ---------- faq ---------- */
.faq{max-width:820px;border-top:1px solid var(--violet-15)}
details{border-bottom:1px solid var(--violet-15)}
summary{
  cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font-family:var(--serif);font-size:19px;font-weight:600;color:var(--violet);line-height:1.35;
}
summary::-webkit-details-marker{display:none}
summary:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
summary::after{
  content:'';position:absolute;right:8px;top:29px;width:11px;height:11px;
  border-right:2px solid var(--ambre);border-bottom:2px solid var(--ambre);
  transform:rotate(45deg);transition:transform .2s ease;
}
details[open] summary::after{transform:rotate(-135deg);top:33px}
details p{padding:0 0 22px;color:var(--encre-doux);font-size:16.5px;max-width:68ch}

/* ---------- final ---------- */
.final{text-align:center}
.final h2{max-width:16ch;margin:0 auto 26px}
.final p{margin-left:auto;margin-right:auto;text-align:center;max-width:52ch}
.final .btn{margin-top:16px}
.final .sous-btn{margin-left:auto;margin-right:auto;max-width:52ch;color:#C7C7E4}

/* ---------- footer ---------- */
footer{background:var(--violet-deep);color:#C7C7E4;padding:56px 0 32px;font-size:15px}
.fgrid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:760px){.fgrid{grid-template-columns:repeat(3,1fr)}}
footer h4{font-family:var(--serif);font-size:16px;color:#fff;margin-bottom:12px;font-weight:600}
footer a{color:#C7C7E4;text-decoration:none;display:block;padding:4px 0}
footer a:hover{color:var(--ambre)}
footer address{font-style:normal}
footer nav ul{list-style:none}
.acomp{color:var(--ambre)}
.mentions{border-top:1px solid rgba(255,255,255,.14);margin-top:40px;padding-top:22px;font-size:13.5px;color:#9B9BC4;line-height:1.7}

/* ---------- utilitaires ---------- */
.mt-28{margin-top:28px}
.mt-26{margin-top:26px}
.mt-30{margin-top:30px}
.mt-44{margin-top:44px}
.text-muted-16{font-size:16px;color:var(--encre-doux)}
.eyebrow-ambre{color:var(--ambre)}
.h3-espace{color:var(--violet);margin:30px 0 12px}
.leg-c1{background:#F0B43C}
.leg-c2{background:#DC7814}
.leg-c3{background:#7EC8A0}
.leg-c4{background:#8FB8DE}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* bandeau maquette : à retirer une fois le site prêt pour la mise en production */
.maquette{background:var(--rouge);color:#fff;font-size:13.5px;padding:9px 0;text-align:center;letter-spacing:.02em}

/* ---------- gabarits WordPress ---------- */
.entry-content{margin-top:8px}
.entry-content > *:last-child{margin-bottom:0}