/*
  SCHICGIRL — guide-fiche.css
  La fiche produit en haut des pages de guide, plus la navigation et le
  pied de page du site.

  POURQUOI CE FICHIER EXISTE
  Les pages de guide etaient des mini-sites : 560 px de large, aucune
  navigation, aucun pied de page, et le prix a 70 % du defilement. Une
  visiteuse qui arrive de la boutique devait lire une page entiere avant
  de savoir combien ca coute.

  POURQUOI TOUT EST PREFIXE fp- / gnav- / gfoot-
  Les feuilles de guide et site-complete.css partagent dix noms de
  classes (.hero .section .badge .wrap .lead .price .faq .testi .hide
  .eyebrow). Charger les deux casserait tout. Ce fichier n'utilise donc
  aucun de ces noms : il s'ajoute sans rien recouvrir.

  Il reprend les variables deja definies par la feuille du guide
  (--gold, --ink, --stroke...) : rien a redeclarer.
  © 2024–2026 Schicgirl. All rights reserved.
*/

/* ── La barre de navigation du site ─────────────────────────── */
.gnav{
  position:sticky;top:0;z-index:60;
  background:rgba(253,248,242,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--stroke);
  margin:0 -18px 0;padding:0 18px;
}
.gnav-in{
  max-width:1120px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:62px;
}
.gnav-marque{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.gnav-marque img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.gnav-nom{font-family:var(--serif);font-size:22px;font-weight:500;color:var(--ink);line-height:1}
.gnav-nom span{color:var(--gold-deep);font-style:italic;font-weight:600}
.gnav-liens{display:flex;gap:22px}
.gnav-liens a{
  font-size:13.5px;font-weight:500;color:var(--ink-soft);text-decoration:none;
  transition:color .16s;
}
.gnav-liens a:hover{color:var(--gold-deep)}
@media(max-width:860px){ .gnav-liens{display:none} }

/* ── La fiche produit ───────────────────────────────────────── */
.fp{
  max-width:1120px;margin:26px auto 0;
  background:var(--glass);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.9);border-radius:var(--r);
  box-shadow:var(--shadow-warm);
  padding:30px;
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:36px;
  align-items:start;
}
@media(max-width:820px){
  .fp{grid-template-columns:1fr;gap:24px;padding:22px;margin-top:18px}
  .fp-couv{max-width:220px;margin-inline:auto}
}

.fp-couv{position:relative}
.fp-couv img{
  width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  border-radius:14px;border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  background:linear-gradient(135deg,var(--gold-pale),rgba(201,147,74,.25));
}
.fp-etiquette{
  position:absolute;top:12px;left:12px;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 12px;border-radius:100px;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.5);
}

.fp-sous{
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:10px;
}
.fp-titre{
  font-family:var(--serif);font-size:clamp(28px,4.4vw,40px);font-weight:600;
  line-height:1.12;color:var(--ink);margin:0 0 12px;
}
.fp-resume{font-size:16px;line-height:1.6;color:var(--ink-soft);margin:0 0 20px}

/* Le prix, tout de suite. C'est la premiere question. */
.fp-prix-ligne{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.fp-prix{font-family:var(--serif);font-size:42px;font-weight:600;color:var(--gold-deep);line-height:1}
.fp-cfa{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.fp-paiement{font-size:12.5px;color:var(--muted);margin-bottom:18px}

.fp-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.fp-meta span{
  background:var(--gold-pale);border:1px solid var(--stroke);
  border-radius:100px;padding:6px 13px;font-size:12.5px;color:var(--gold-deep);
}

.fp-inclus{list-style:none;margin:0 0 24px;padding:0}
.fp-inclus li{position:relative;padding-left:29px;margin:10px 0;font-size:14.5px;line-height:1.5;color:var(--ink)}
.fp-inclus li::before{
  content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;
  background:var(--gold);color:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
}

.fp-acheter{
  display:block;width:100%;text-align:center;text-decoration:none;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#fff;
  font-family:var(--sans);font-size:16px;font-weight:600;
  padding:17px 24px;border-radius:100px;
  box-shadow:0 10px 26px -10px rgba(160,109,40,.75);
  transition:transform .16s ease, box-shadow .16s ease;
}
.fp-acheter:hover{transform:translateY(-2px);box-shadow:0 14px 32px -10px rgba(160,109,40,.85)}
.fp-acheter:active{transform:translateY(0)}
.fp-rassure{font-size:12.5px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.6}

/* La couture vers la page de vente, qui reste dessous */
.fp-suite{
  max-width:1120px;margin:34px auto 4px;text-align:center;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);
}
.fp-suite::after{
  content:"";display:block;width:34px;height:1px;background:var(--gold);
  opacity:.5;margin:12px auto 0;
}

/* ── La page de vente, en dessous ────────────────────────────
   Les feuilles de guide n'ont AUCUNE regle responsive : .wrap est
   fige a 560 px, donc sur un ordinateur la page de vente reste une
   bande etroite sous une fiche large. On ne touche pas au texte —
   seulement a la largeur et au nombre de colonnes, a partir de la
   taille ou il y a la place. */
@media(min-width:900px){
  .wrap{max-width:1120px}

  /* Les cartes s'alignent au lieu de s'empiler sur un kilometre. */
  .why{grid-template-columns:1fr 1fr;gap:14px}
  .testi{grid-template-columns:1fr 1fr;gap:14px}

  .section{padding:30px 34px;margin-top:22px}
  h2{font-size:28px}

  /* Le texte suivi, lui, garde une largeur lisible : une ligne de
     1100 px se lit mal, l'oeil perd le debut de la ligne suivante.
     Et il se centre — un paragraphe etroit colle a gauche d'un bloc
     large donne une page bancale. Les cartes, elles, prennent toute
     la largeur : c'est la leur interet. */
  .pain,
  .section > p,
  .section > .lede,
  .section > .forwho,
  .section > .check,
  .section > .inside,
  .section > .faq,
  .section > .eyebrow,
  .section > h2{max-width:70ch;margin-inline:auto}

  /* Les blocs centres restent centres. */
  .section[style*="text-align:center"] > *{margin-inline:auto}

  /* Les apercus de pages cote a cote plutot que l'un sous l'autre. */
  .preview-img{max-width:520px;margin-inline:auto}
}

@media(min-width:1180px){
  .why{grid-template-columns:repeat(3,1fr)}
}

/* ── Le pied de page du site ────────────────────────────────── */
.gfoot{
  margin:56px -18px 0;padding:34px 18px calc(34px + env(safe-area-inset-bottom));
  border-top:1px solid var(--stroke);background:rgba(255,248,238,.5);
  text-align:center;
}
.gfoot-in{max-width:1120px;margin:0 auto}
.gfoot-liens{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;margin-bottom:14px}
.gfoot-liens a{
  font-size:12.5px;font-weight:600;color:var(--ink-soft);text-decoration:none;
  padding:0 12px;border-right:1px solid var(--stroke);
}
.gfoot-liens a:last-child{border-right:0}
.gfoot-liens a:hover{color:var(--gold-deep)}
.gfoot p{font-size:12px;color:var(--muted);line-height:1.7;margin:0}

@media(prefers-reduced-motion:reduce){
  .fp-acheter{transition:none}
}