/* Mise en page de « pack-ouverture-micro-creche » — reprise telle quelle de la maquette validée le 29/08/2026. */

/* ---------- propre à la landing pack « Ouverture micro-crèche » ---------- */

/* Hero : même grille de 12 colonnes que la page d'accueil, mêmes respirations. */
.phero{padding-block:clamp(44px,5.2vw,80px) clamp(36px,4.2vw,64px)}
.phero-grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gutter); align-items:center}
.phero-txt{grid-column:1/7}
.phero-media{grid-column:8/13}
.phero h1{
  font-family:Newsreader,Georgia,serif; font-weight:400;
  font-size:clamp(33px,4.1vw,54px); line-height:1.05; letter-spacing:-.022em;
  margin:0 0 var(--s5); max-width:18ch; text-wrap:balance;
}
.phero .cta{display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s7)}

/* Configurateur : plus d'ombre, plus de remontée négative. Une bande de
   section tenue par le fond --surface-2, et six champs alignés. */
.cfields{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:var(--s5)}
.field .flabel{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:6px}

/* Sélecteur de places : un groupe de boutons soudés, pas des pastilles.
   La bordure porte l'information : elle utilise --field-line, pas --line. */
.seg{display:flex; border:1px solid var(--field-line); border-radius:var(--radius); overflow:hidden}
.seg button{
  flex:1; min-width:52px; min-height:46px; font-family:inherit; font-size:15px; font-weight:500;
  display:grid; place-items:center; padding-inline:var(--s2);
  border:0; border-left:1px solid var(--field-line);
  background:var(--surface); color:var(--ink-2); cursor:pointer;
  transition:background .15s, color .15s;
}
.seg button:first-child{border-left:0}
.seg button:hover{background:var(--surface-2); color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--accent); color:var(--on-accent)}

/* Composition : deux colonnes, le récapitulatif collant à droite. */
.split{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(32px,4vw,72px); align-items:start}

/* Zones : plus de bande beige en tête de zone. Un titre, un filet, des lignes. */
.zones{display:grid; gap:var(--s8)}
.zonehead{
  display:flex; align-items:baseline; gap:var(--s4); flex-wrap:wrap;
  padding-bottom:var(--s3); border-bottom:1px solid var(--line);
}
.zonehead .zn{font-family:Newsreader,Georgia,serif; font-weight:400; font-size:21px; letter-spacing:-.012em; margin:0}
.zonehead .zc{margin-left:auto; font-size:13px; color:var(--ink-3)}
.zline{
  display:grid; grid-template-columns:minmax(0,1fr) 76px 150px 44px;
  gap:var(--s4); align-items:center; min-height:60px;
  padding:var(--s3) 0; border-bottom:1px solid var(--line-soft); font-size:15px;
}
.zline:last-child{border-bottom:0}
/* ligne facultative : le pack fonctionne sans elle */
.zline.opt .nm{font-weight:500; color:var(--ink-2)}
.zline.opt .rl{font-style:italic}
.zline .nm{font-weight:600; letter-spacing:-.006em; line-height:1.35}
.zline .sk{
  display:block; margin-top:var(--s1); font-family:"IBM Plex Mono",monospace;
  font-size:11px; letter-spacing:.06em; color:var(--ink-3); font-weight:400;
}
.zline .qt{font-size:17px; font-weight:600; text-align:right; color:var(--ink); letter-spacing:-.01em}
.zline .rl{font-size:13px; color:var(--ink-3); text-align:right; line-height:1.4}
/* la case à cocher est enveloppée d'une cible de 44 px */
.zpick{
  display:grid; place-items:center; justify-self:end;
  width:44px; height:44px; border-radius:var(--radius); cursor:pointer;
}
.zpick:hover{background:var(--surface-2)}
.zpick input[type=checkbox]{width:18px; height:18px; accent-color:var(--accent); cursor:pointer}

/* Récapitulatif : panneau sobre, sans ombre, sans beige. */
.summary{
  position:sticky; top:calc(var(--head-h) + var(--s5));
  padding:var(--s6); border-radius:var(--radius-card);
}
.srow{
  display:flex; justify-content:space-between; gap:var(--s3);
  padding:var(--s3) 0; font-size:14.5px; color:var(--ink-2);
  border-bottom:1px solid var(--line);
}
.srow:last-of-type{border-bottom:0}
.srow strong{color:var(--ink); font-weight:600}
.samount{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s4); margin:var(--s5) 0 var(--s4);
}
.samount .k{font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--ink-3); margin-bottom:var(--s1)}
.samount .v{font-family:Newsreader,Georgia,serif; font-weight:400; font-size:23px; letter-spacing:-.015em; line-height:1.2}
.sfull{width:100%; justify-content:center}

/* Colonnes éditoriales : on réutilise .grid/.cell de pe.css, on ne recrée rien. */
.cell h3.t{margin:0; font-size:18px; font-weight:600; letter-spacing:-.008em}

/* FAQ */
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; display:flex; align-items:center;
  justify-content:space-between; gap:var(--s4);
  min-height:44px; padding:var(--s4) 0; font-size:16px; font-weight:600; letter-spacing:-.006em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--ink-3); font-size:20px; line-height:1; flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0; padding-bottom:var(--s5); font-size:15px; color:var(--ink-2); max-width:74ch}

/* Bloc devis : le seul aplat beige de la page. */
.dev-grid{display:grid; gap:var(--s6)}

@media (max-width:1000px){
  .phero-txt,.phero-media{grid-column:1/-1}
  .phero-media{margin-top:var(--s6)}
  .phero h1{max-width:20ch}
  .split{grid-template-columns:1fr; gap:var(--s8)}
  .summary{position:static}
}
@media (max-width:640px){
  /* la regle de calcul et le marqueur « option » ne disparaissent pas :
     ils passent sous le nom de la reference. */
  .zline{grid-template-columns:minmax(0,1fr) 64px 44px; gap:var(--s2) var(--s3)}
  .zline .rl{grid-column:1; grid-row:2; text-align:left; font-size:12.5px; margin-top:var(--s1)}
  .zonehead .zc{margin-left:0; width:100%}
}