/* ══════════════════════════════════════════════════════════════
   PAGE PRÉCOMMANDE — styles spécifiques
   ──────────────────────────────────────────────────────────────
   Vient EN PLUS de styles.css (couleurs et polices y sont déjà).
   Pour changer un texte, un prix ou un lien Stripe : commande.html.
   ══════════════════════════════════════════════════════════════ */

/* ---------- 01 · barre de preuve sociale (tout en haut) ---------- */
.preuve{background:var(--vert);color:var(--craie);font-family:var(--mono);font-size:.74rem;letter-spacing:.07em;text-transform:uppercase}
.preuve .wrap{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;padding-top:11px;padding-bottom:11px;text-align:center}
.preuve .item{display:inline-flex;align-items:center;gap:.5em}
.preuve .etoiles{color:#F0C24B;letter-spacing:.12em}
.preuve .sep{opacity:.35}

/* ---------- 02 · hero produit ---------- */
.produit{padding:44px 0 20px}
.produit .wrap{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.produit-img{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:1/1;background:linear-gradient(160deg,#2C5238,#12271A);box-shadow:0 22px 54px rgba(18,39,26,.24)}
.produit-img img{width:100%;height:100%;object-fit:cover}
.produit-img .flag{position:absolute;top:20px;left:20px;background:var(--persille);color:var(--craie);font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;padding:.55em 1.1em;border-radius:999px;font-weight:600}

.produit h1{font-family:var(--display);font-size:clamp(2.1rem,4.6vw,3.1rem);font-weight:800;color:var(--vert-fonce);line-height:1.05;letter-spacing:-.02em;margin:.35em 0 .3em}
.produit .accroche{font-size:1.08rem;color:rgba(23,32,26,.78);max-width:30em}
.produit .note-ligne{display:flex;align-items:center;gap:.6em;font-size:.88rem;color:rgba(23,32,26,.65);margin-top:6px}
.produit .note-ligne .etoiles{color:#D9A21B;letter-spacing:.1em}

.prix-bloc{display:flex;align-items:baseline;gap:14px;margin:26px 0 8px;flex-wrap:wrap}
.prix-bloc .gros{font-family:var(--display);font-weight:800;font-size:2.7rem;color:var(--vert-fonce);line-height:1}
.prix-bloc .unite{font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;color:rgba(23,32,26,.6)}
.prix-bloc .offert{font-family:var(--mono);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;background:rgba(94,156,70,.16);color:var(--vert);padding:.45em 1em;border-radius:999px;font-weight:600}

.atouts{list-style:none;margin:22px 0 30px;display:grid;gap:11px}
.atouts li{display:flex;gap:.7em;align-items:flex-start;font-size:.97rem;color:rgba(23,32,26,.82)}
.atouts li::before{content:"✓";flex:none;width:21px;height:21px;border-radius:50%;background:var(--prairie);color:#fff;font-size:.72rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-top:.15em}

/* ---------- 03 · bandeau précommande ---------- */
.precommande{background:var(--vert-fonce);color:var(--craie);border-radius:20px;padding:28px 32px;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;margin:34px 0 0}
.precommande .ico{font-size:2rem;line-height:1}
.precommande h2{color:var(--craie);font-size:1.22rem;margin:0 0 .35em}
.precommande p{color:rgba(251,250,243,.82);font-size:.95rem;margin:0}
.precommande b{color:var(--prairie-clair)}

/* ---------- 04 · composition de la box ---------- */
.compo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.morceau{background:var(--craie);border:1px solid var(--ligne);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.morceau .ph{aspect-ratio:4/3;background:var(--paper-2);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.morceau .ph img{width:100%;height:100%;object-fit:cover}
.morceau .ph .repli{font-size:1.9rem;opacity:.28}
.morceau .txt{padding:15px 17px 18px}
.morceau h3{font-size:1rem;font-weight:700;margin-bottom:.25em}
.morceau p{font-size:.85rem;color:rgba(23,32,26,.66);line-height:1.5}
.compo-note{margin-top:26px;background:var(--paper-2);border-left:3px solid var(--prairie);border-radius:0 12px 12px 0;padding:16px 20px;font-size:.92rem;color:rgba(23,32,26,.78)}

/* ---------- 05 · piliers ---------- */
.piliers{background:var(--paper-2)}
.piliers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px}
.pilier{background:var(--craie);border:1px solid var(--ligne);border-radius:18px;padding:26px 24px}
.pilier .ico{font-size:1.6rem;display:inline-block;background:var(--paper-2);border-radius:12px;padding:.35em .5em;margin-bottom:14px}
.pilier h3{font-size:1.04rem;font-weight:700;margin-bottom:.4em}
.pilier p{font-size:.89rem;color:rgba(23,32,26,.68);line-height:1.55}

/* ---------- 06 · avis ---------- */
.avis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:38px}
.avis{background:var(--craie);border:1px solid var(--ligne);border-radius:18px;padding:26px 24px;display:flex;flex-direction:column}
.avis .etoiles{color:#D9A21B;letter-spacing:.15em;font-size:.95rem;margin-bottom:12px}
.avis blockquote{font-size:.96rem;color:rgba(23,32,26,.82);line-height:1.6;flex:1}
.avis .qui{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(23,32,26,.55);margin-top:18px;padding-top:14px;border-top:1px solid var(--ligne)}

/* ---------- 07 · bloc de conversion (fréquence + email + bouton) ---------- */
.conv{background:var(--vert-fonce);color:var(--craie)}
.conv .wrap{max-width:820px}
.conv .eyebrow{color:var(--prairie-clair)}
.conv h2{color:var(--craie)}
.conv .intro{color:rgba(251,250,243,.78);max-width:44em}

.freq-liste{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:34px 0 30px}
.freq{position:relative;border:2px solid rgba(251,250,243,.22);border-radius:18px;padding:24px 20px 22px;cursor:pointer;text-align:center;transition:border-color .15s ease,background .15s ease;background:rgba(251,250,243,.04)}
.freq:hover{border-color:rgba(143,193,114,.7)}
.freq.on{border-color:var(--prairie-clair);background:rgba(143,193,114,.13)}
.freq .rythme{font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--craie);line-height:1}
.freq .unite{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(251,250,243,.7);margin-top:8px}
.freq .pour{font-size:.86rem;color:rgba(251,250,243,.62);margin-top:12px}
.freq .tarif{font-family:var(--mono);font-size:.78rem;color:var(--prairie-clair);margin-top:14px;padding-top:12px;border-top:1px dashed rgba(251,250,243,.22)}
.freq .top{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--prairie);color:var(--vert-fonce);font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;padding:.35em .9em;border-radius:999px;font-weight:700;white-space:nowrap}

/* message affiché sous le bouton quand un lien Stripe manque */
.conv .alerte{display:none;font-size:.9rem;color:#F3B0A0;background:rgba(232,131,111,.12);border:1px solid rgba(243,176,160,.35);border-radius:13px;padding:14px 18px;margin-top:16px;text-align:center}
.conv .alerte.visible{display:block}

.conv .go{width:100%;justify-content:center;font-size:1.08rem;padding:1.05em 1.6em}
.conv .sous-go{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:rgba(251,250,243,.55);margin-top:14px;text-align:center}

/* ---------- 08 · rassurance ---------- */
.rassure-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:12px}
.rassure-item{text-align:center;padding:8px 10px}
.rassure-item .ico{font-size:1.7rem;display:block;margin-bottom:10px}
.rassure-item b{display:block;font-family:var(--display);font-size:1rem;color:var(--vert-fonce);margin-bottom:.25em}
.rassure-item span{font-size:.86rem;color:rgba(23,32,26,.65);line-height:1.5}

/* ---------- crédits photos (obligation des licences CC) ---------- */
.credits{flex-basis:100%;font-size:.7rem;line-height:1.75;color:rgba(251,250,243,.42);padding-top:16px;margin-top:6px;border-top:1px solid rgba(251,250,243,.1)}

/* ---------- 09 · barre collante mobile ---------- */
.barre-mobile{position:fixed;bottom:0;left:0;right:0;background:var(--craie);border-top:1px solid var(--ligne);box-shadow:0 -6px 24px rgba(18,39,26,.14);padding:12px 16px;display:none;align-items:center;gap:14px;z-index:60}
.barre-mobile .p{flex:1;min-width:0}
.barre-mobile .p b{display:block;font-family:var(--display);font-size:1.15rem;color:var(--vert-fonce);line-height:1.1}
.barre-mobile .p span{font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;color:rgba(23,32,26,.6)}
.barre-mobile .btn{flex:none;padding:.75em 1.4em}

/* ---------- responsive ---------- */
@media (max-width:940px){
  .produit .wrap{grid-template-columns:1fr;gap:34px}
  .produit-img{max-width:460px;margin:0 auto;width:100%}
  .compo-grid,.piliers-grid,.rassure-grid{grid-template-columns:repeat(2,1fr)}
  .avis-grid{grid-template-columns:1fr}
  .precommande{grid-template-columns:1fr;gap:14px;padding:24px 24px}
}
@media (max-width:640px){
  .preuve .wrap{gap:14px;font-size:.68rem}
  .preuve .sep{display:none}
  .freq-liste{grid-template-columns:1fr;gap:14px}
  .freq{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;text-align:left;align-items:center;padding:20px 20px}
  .freq .rythme{grid-row:1/3}
  .freq .unite{margin-top:0}
  .freq .pour{margin-top:2px}
  .freq .tarif{grid-column:1/-1;margin-top:12px}
  .freq .top{left:auto;right:16px;transform:none}
  .barre-mobile{display:flex}
  body{padding-bottom:82px}
}
@media (max-width:460px){
  .compo-grid{grid-template-columns:1fr 1fr;gap:12px}
  .morceau .txt{padding:12px 13px 15px}
  .morceau h3{font-size:.92rem}
  .morceau p{font-size:.79rem}
}