/* ===========================================================================
     PAGE PRODUIT — APEX BLOOM
     ---------------------------------------------------------------------------
     Meme vocabulaire visuel que l'accueil : memes couleurs, meme police, memes
     boutons. Ce qui change, c'est la structure : UN produit, UNE decision.

     LE PRIX apparait a 3 endroits, tous marques <!-- PRIX -->. Avant de le
     changer ici, changer d'abord les boutons PayPal et Stripe : un site qui
     annonce un prix que la caisse ne pratique pas est pire qu'un prix bas.
     =========================================================================== */
  :root {
    --noir:#08070A; --panneau:#111017; --panneau2:#16141D;
    --blanc:#F4F1F6; --gris:#B3ABB8; --gris2:#857D8C;
    --or:#F5C242; --rose:#FF6F9C; --trait:#241F2C;
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  html { scroll-behavior:smooth; }
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
  body {
    background:var(--noir); color:var(--blanc);
    font-family:Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size:17px; line-height:1.6; padding:0 20px;
  }
  .contenu { max-width:960px; margin:0 auto; }
  /* height:auto est indispensable : sans lui, une image dont la largeur est
     reduite garde sa hauteur d'origine et s'etire en ovale. */
  img { max-width:100%; height:auto; display:block; }
  a { color:var(--rose); text-underline-offset:3px; }
  a:focus-visible { outline:2px solid var(--or); outline-offset:3px; }

  /* ---------- barre du haut ---------- */
  .barre {
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; padding-block:22px; flex-wrap:wrap;
  }
  .barre .marque {
    font-size:13px; font-weight:600; letter-spacing:.42em;
    text-transform:uppercase; color:var(--gris2); text-decoration:none;
  }
  .barre nav { display:flex; gap:20px; font-size:15px; }
  .barre nav a { color:var(--gris); text-decoration:none; }
  .barre nav a:hover { color:var(--blanc); }

  /* ---------- le haut de page : le produit et son prix ---------- */
  .hero {
    display:grid; grid-template-columns:300px 1fr; gap:46px; align-items:center;
    padding-block:34px 56px; border-bottom:1px solid var(--trait);
  }
  @media (max-width:760px){ .hero{ grid-template-columns:1fr; gap:30px; text-align:center } }
  .hero img { width:100%; max-width:300px; margin-inline:auto; border-radius:50%; }
  .surtitre {
    font-size:13px; font-weight:700; letter-spacing:.3em;
    text-transform:uppercase; color:var(--rose);
  }
  h1 {
    font-size:clamp(30px,5.4vw,44px); font-weight:800; line-height:1.1;
    margin-top:14px; text-wrap:balance;
  }
  .accroche { color:var(--gris); margin-top:16px; max-width:46ch; font-size:17.5px; }
  @media (max-width:760px){ .accroche{ margin-inline:auto } }

  /* ---------- le bloc d'achat ---------- */
  .achat {
    margin-top:28px; background:var(--panneau2); border:1px solid var(--trait);
    border-radius:16px; padding:22px 24px;
  }
  /* Regle NON limitee a .achat : le bloc du bas (.caisse) l'utilise aussi, et
     sans elle le prix et sa note se retrouvaient colles l'un a l'autre. */
  .ligne-prix { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
  @media (max-width:760px){ .achat .ligne-prix{ justify-content:center } }
  .prix { font-size:38px; font-weight:800; line-height:1; letter-spacing:-.01em; }
  .prix-note { color:var(--gris2); font-size:15px; }
  .boutons { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
  @media (max-width:760px){ .boutons{ justify-content:center } }
  .bouton {
    display:inline-block; padding:14px 24px; border-radius:10px;
    font-size:16px; font-weight:600; text-decoration:none;
    border:1px solid var(--trait); background:var(--panneau); color:var(--blanc);
  }
  .bouton:hover { border-color:var(--gris2); }
  .bouton.fort { background:var(--or); color:#1A1206; border-color:var(--or); }
  .bouton.fort:hover { filter:brightness(1.08); }
  .rassure { color:var(--gris2); font-size:14.5px; margin-top:14px; }

  /* ---------- sections ---------- */
  section { padding-block:56px; border-top:1px solid var(--trait); }
  section:first-of-type { border-top:0; }
  section > h2 {
    font-size:clamp(25px,4.4vw,33px); font-weight:800; line-height:1.15; text-wrap:balance;
  }
  section > h2 em { font-style:normal; color:var(--or); }
  section > .sous { color:var(--gris); max-width:62ch; margin-top:14px; }

  /* ---------- la progression en images ---------- */
  .etapes { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:32px; }
  @media (max-width:760px){ .etapes{ grid-template-columns:repeat(3,1fr) } }
  @media (max-width:420px){ .etapes{ grid-template-columns:repeat(2,1fr) } }
  .etapes figure { text-align:center; }
  .etapes img { border-radius:50%; border:1px solid var(--trait); }
  .etapes figcaption { margin-top:10px; font-size:14px; color:var(--gris2); }
  .etapes b { display:block; color:var(--blanc); font-size:15px; font-weight:700; }

  /* ---------- listes ---------- */
  .points { list-style:none; margin-top:30px; display:grid; gap:18px; }
  .points li { display:grid; grid-template-columns:11px 1fr; gap:15px; align-items:start; }
  .points .puce { width:9px; height:9px; border-radius:50%; margin-top:10px; background:var(--rose); }
  .points b { display:block; font-size:18px; }
  .points span { display:block; color:var(--gris2); font-size:16px; margin-top:2px; }

  .planche { margin-top:32px; border-radius:14px; overflow:hidden; border:1px solid var(--trait); }
  .planche img { margin-inline:auto; }

  /* ---------- le grand bloc d'achat du bas ---------- */
  .caisse {
    background:var(--panneau2); border:1px solid var(--trait);
    border-radius:18px; padding:32px 30px; margin-top:8px;
  }
  .caisse h2 { font-size:clamp(23px,4vw,30px); font-weight:800; }
  .caisse .ligne-prix { margin-top:18px; }
  .inclus { list-style:none; margin-top:24px; display:grid; gap:11px; }
  .inclus li { display:grid; grid-template-columns:20px 1fr; gap:10px; color:var(--gris); font-size:16px; }
  .inclus .ok { color:var(--or); font-weight:700; }
  .inclus b { color:var(--blanc); font-weight:600; }
  .autre-moyen { margin-top:20px; font-size:15px; color:var(--gris2); }

  /* ---------- questions ---------- */
  .qr { margin-top:26px; display:grid; gap:20px; }
  .qr h3 { font-size:17.5px; font-weight:700; }
  .qr p { color:var(--gris); margin-top:5px; font-size:16px; }

  /* ---------- pied ---------- */
  footer {
    padding-block:44px 60px; border-top:1px solid var(--trait);
    color:var(--gris2); font-size:15px;
  }
  footer nav { display:flex; flex-wrap:wrap; gap:20px; margin-bottom:18px; }
  footer a { color:var(--gris); }

/* Quatre vignettes au lieu de cinq (page ORIGINAL) : sans cette regle elles
   occupaient 4 colonnes sur 5 et laissaient un vide a droite. */
.etapes.quatre { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) { .etapes.quatre { grid-template-columns: repeat(2, 1fr); } }

/* Le cadran du haut : meme traitement que les cartes de l'accueil (fond
   degrade + lueur, apporte par propositions/styles.css), mais sans le
   rembourrage d'une vraie carte -- l'image est ronde, elle se suffit. */
.carte.vitrine { padding: 26px; display: flex; align-items: center; justify-content: center; }
.carte.vitrine img { max-width: 260px; border-radius: 50%; }

/* Deux figures cote a cote (le soleil et la lune) : la grille des etapes est
   prevue pour cinq, il lui faut une variante a deux. */
.etapes.deux { grid-template-columns: repeat(2, 1fr); gap: 26px; }
.etapes.deux img { border-radius: 14px; border: 1px solid var(--trait); }
@media (max-width: 680px) { .etapes.deux { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   LES SYMBOLES METEO
   Wendy le 19/09 : « trop gros et pas beau ». Les captures agrandies ont ete
   remplacees par du vectoriel (voir le bloc <svg> dans les pages), et la
   presentation passe d'une grille de grandes vignettes a une simple ligne de
   reperes : ce n'est pas une galerie, c'est une legende.
   --------------------------------------------------------------------------- */
.meteo {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 30px;
}
.meteo li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--gris);
}
/* Fond noir et forme ronde : le symbole est montre comme il apparait a
   l'ecran de la montre, pas flottant dans le vide. */
.meteo svg {
  width: 42px;
  height: 42px;
  flex: none;
  background: #000;
  border-radius: 50%;
}
@media (max-width: 520px) {
  .meteo { gap: 14px 20px; }
  .meteo li { font-size: 14px; gap: 8px; }
  .meteo svg { width: 36px; height: 36px; }
}

/* Planches de la version 1.3 de BLOOM (bloom.html, section « Nouveau »).
   Portrait 900 x 1300 : 5 de front sur grand ecran, 2 sur telephone. */
.planches { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-top: 18px; }
.planches img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--trait); }
@media (max-width: 560px) { .planches { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
/* Les gestes de BLOOM en video (bloom.html, section « Les gestes »). Portrait 1080 x 1920,
   deux de front, meme sur telephone. Pas de legende sous-titree : le texte est dans la video. */
.gestes { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; gap: 26px; margin-top: 24px; }
.gestes figure { margin: 0; text-align: center; }
.gestes img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: #000; border-radius: 14px; border: 1px solid var(--trait); }
.gestes figcaption { margin-top: 10px; font-size: 14px; color: var(--gris2); }
.gestes b { display: block; color: var(--blanc); font-size: 15px; font-weight: 700; }
@media (max-width: 560px) { .gestes { gap: 10px; } }

/* Navigation des trois cadrans, y compris sur petit écran. */
.barre nav{flex-wrap:wrap;gap:12px 20px}