/* ==========================================================================
   PAGES SECONDAIRES . le vocabulaire commun
   ==========================================================================
   Chargee par toutes les pages fabriquees par tools/pages.py. Une page n'y
   ajoute rien : ce qui lui est propre va dans son propre <style>, dans
   _src/<slug>.html. Les briques :

     .p-tete        l'en-tete de page : kicker, grand titre, chapeau
     .p-bloc        une section de page, avec sa marge
     .p-deux        deux colonnes : sommaire collant a gauche, texte a droite
     .p-sommaire    le sommaire collant d'une page longue
     .prose         le texte courant (legal, guides) : titres, listes, tableaux
     .encart        un encadre qui compte (pre-commande, delai, condition)
     .etapes        une suite d'etapes numerotees qui EST une suite
     .cartes        une grille de cartes de liens ou d'arguments
     .faq           des <details> qui s'ouvrent
     .formulaire    les champs (contact, suivi, checkout)
     .ph / .ph-bloc les placeholders (dans boutique.css)
   ========================================================================== */

/* L'en-tete fixe n'a pas de hero a survoler : il est plein d'emblee. */
.page .nav{background:transparent}
.page-main{padding-top:clamp(110px,15vh,170px);min-height:60vh}
/* La vague du pied prolonge le sable de la page, pas le marine de la
   precommande de l'accueil. */
.page .wave-foot{color:var(--sand);
  /* La vague est retournee (scaleY(-1)) et chevauche le pied sombre : son
     bord droit, adouci par l'anticrenelage, dessinait un trait. Une bande
     pleine de 3 px le recouvre ; en bas dans son repere, donc en haut a
     l'ecran. */
  background:linear-gradient(var(--sand),var(--sand)) bottom/100% 3px no-repeat}

/* ---------------- en-tete de page ---------------- */
.p-tete{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto;
  padding-bottom:clamp(30px,5vh,60px)}
.p-tete h1{font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(46px,7.4vw,112px);line-height:.9;letter-spacing:-.008em;text-wrap:balance}
.p-tete .lede{margin-top:clamp(16px,2.4vh,26px);max-width:40ch}
.p-maj{margin-top:14px;font-size:13px;color:var(--ink-60)}

/* ---------------- sections ---------------- */
.p-bloc{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto;
  padding-block:clamp(26px,4vh,48px)}
.p-bloc + .p-bloc{border-top:1px solid var(--ink-12)}
.p-bloc > h2{font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(30px,3.6vw,52px);line-height:.95;margin-bottom:clamp(14px,2vh,22px)}
.p-fond{background:var(--sand-lt)}

/* ---------------- deux colonnes ---------------- */
.p-deux{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto;
  display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);
  gap:clamp(28px,5vw,80px);align-items:start;padding-bottom:clamp(40px,6vh,80px)}
.p-sommaire{position:sticky;top:clamp(96px,12vh,130px);display:grid;gap:2px;
  font-size:14px}
.p-sommaire b{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mango);margin-bottom:10px}
.p-sommaire a{padding:6px 0;color:var(--ink-60);border-left:2px solid transparent;
  padding-left:12px;transition:color .2s,border-color .2s}
.p-sommaire a:hover,.p-sommaire a[aria-current="true"]{color:var(--ink);border-color:var(--mango)}
@media(max-width:900px){
  .p-deux{grid-template-columns:1fr}
  .p-sommaire{position:static;padding:16px 18px;border-radius:var(--r);background:var(--sand-lt)}
}

/* ---------------- texte courant ---------------- */
.prose{max-width:70ch;font-size:16px;line-height:1.65;color:var(--ink)}
.prose > * + *{margin-top:1em}
.prose h2{font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(26px,2.6vw,36px);line-height:1;margin-top:1.9em;scroll-margin-top:120px}
.prose h2:first-child{margin-top:0}
.prose h3{font-weight:700;font-size:17px;margin-top:1.6em;scroll-margin-top:120px}
.prose p,.prose li{color:rgba(30,42,90,.86)}
.prose ul,.prose ol{padding-left:1.25em}
.prose li + li{margin-top:.4em}
.prose ul li::marker{color:var(--mango)}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--mango);
  text-underline-offset:3px;text-decoration-thickness:1.5px}
.prose a:hover{color:var(--mango)}
.prose strong{font-weight:600;color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;font-size:14.5px}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--ink-12);vertical-align:top}
.prose th{font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60)}
.prose td{font-variant-numeric:tabular-nums}
.tableau{overflow-x:auto}

/* ---------------- encart ---------------- */
.encart{border-radius:var(--r);padding:clamp(18px,2.4vw,28px);background:#fff6e6;
  box-shadow:inset 0 0 0 1.3px rgba(255,122,26,.30)}
.encart > * + *{margin-top:.6em}
.encart h3{margin-top:0;font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:24px;line-height:1}
.encart.marine{background:var(--ink);color:var(--sand);box-shadow:none}
.encart.marine p{color:rgba(242,227,201,.82)}

/* ---------------- etapes ---------------- */
.etapes,.prose .etapes{list-style:none;padding:0;display:grid;gap:0;counter-reset:etape}
.etapes > li{position:relative;display:grid;grid-template-columns:52px 1fr;gap:16px;
  padding-bottom:clamp(20px,3vh,30px);counter-increment:etape}
.etapes > li::before{content:counter(etape);display:grid;place-items:center;width:52px;aspect-ratio:1;
  border-radius:50%;background:var(--ink);color:var(--sand);
  font-family:var(--disp);font-weight:800;font-size:24px}
.etapes > li::after{content:'';position:absolute;left:25px;top:56px;bottom:4px;width:2px;background:var(--ink-12)}
.etapes > li:last-child::after{display:none}
.etapes h3{font-weight:700;font-size:17px;margin:12px 0 4px}
.etapes p{color:var(--ink-60);max-width:58ch}

/* ---------------- cartes ---------------- */
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(12px,1.5vw,20px)}
.carte{display:flex;flex-direction:column;gap:8px;padding:clamp(18px,2vw,26px);border-radius:var(--r);
  background:var(--sand-lt);box-shadow:inset 0 0 0 1px var(--ink-12);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
a.carte:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1.4px var(--mango)}
.carte h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:24px;line-height:1}
.carte p{color:var(--ink-60);font-size:14.5px}
.carte .fleche{margin-top:auto;font-weight:600;font-size:14px;color:var(--mango)}

/* ---------------- faq ---------------- */
.faq{border-top:1px solid var(--ink-12)}
.faq details{border-bottom:1px solid var(--ink-12)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:18px;
  padding:18px 0;font-weight:600;font-size:16.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1.3px var(--ink-12);font-weight:400;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--ink);color:var(--sand);box-shadow:none}
.faq .rep{padding:0 0 20px;max-width:66ch;color:rgba(30,42,90,.82);line-height:1.6}
.faq .rep > * + *{margin-top:.7em}

/* ---------------- formulaires ---------------- */
.formulaire{display:grid;gap:16px}
.rangee{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px}
.champ{display:grid;gap:6px;min-width:0}
.champ label{font-size:13px;font-weight:600}
.champ .aide{font-size:12.5px;color:var(--ink-60)}
.champ input,.champ select,.champ textarea{width:100%;border:0;border-radius:12px;padding:14px 16px;
  font:15px/1.4 var(--body);color:var(--ink);background:#fffaf2;
  box-shadow:inset 0 0 0 1.3px var(--ink-12);transition:box-shadow .2s}
.champ textarea{min-height:140px;resize:vertical}
/* Les cases et boutons radio gardent leur taille native : la regle
   ci-dessus les etirait sur toute la largeur. */
.champ input[type="checkbox"],.champ input[type="radio"],
.case input[type="checkbox"],.case input[type="radio"]{width:auto;padding:0;box-shadow:none;
  background:none;border-radius:0;flex:none;accent-color:var(--mango)}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:0;box-shadow:inset 0 0 0 1.8px var(--mango)}
.champ [aria-invalid="true"]{box-shadow:inset 0 0 0 1.8px #D0402B}
.erreur{font-size:12.5px;color:#B3321F}
.case{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.case input{margin-top:3px;accent-color:var(--mango)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;
  border-radius:var(--r-pill);padding:16px 28px;background:var(--grad);color:#fff;
  font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:20px;letter-spacing:-.005em;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,93,143,.3)}
.btn.sobre{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.6px var(--ink)}
.btn.sobre:hover{background:var(--ink);color:var(--sand);box-shadow:none}
.btn:focus-visible,.champ :focus-visible{outline:2px solid var(--ink);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .carte,.btn,.faq summary::after{transition:none}
}