/* ============================================================================
   Site public BoostMyLive — identité C1

   DEUX UNIVERS, ET LA FRONTIÈRE ENTRE EUX

   Le produit vit dans le sombre : Deep, Midnight, cyan et corail. C'est
   l'identité du cockpit, et un vendeur qui arrive sur le site doit
   reconnaître l'outil qu'il verra ensuite.

   L'éditorial vit dans l'ivoire. Un guide de 2 000 mots sur fond noir se lit
   mal, et personne ne le lit jusqu'au bout. Le contraste entre les deux
   surfaces sert aussi de repère : sombre = le produit, clair = ce qu'on vous
   explique.

   Pas de violet, pas de dégradé « IA générique ». Les mouvements sont rares
   et fonctionnels, et tous coupés par `prefers-reduced-motion`.
   ========================================================================== */

:root {
  /* Produit */
  --deep: #050A12;
  --midnight: #07111F;
  --surface: #0B1626;
  --surface2: #122236;
  --ligne: #1B2C42;
  --cyan: #00DDF5;
  --cyan-sombre: #00B4C8;
  --cyan-voile: rgba(0, 221, 245, .12);
  --corail: #FF5A68;
  --blanc: #F7FBFF;
  --slate: #91A4B7;
  --txt2: #C3D2E2;

  /* Éditorial */
  --ivoire: #F6F2EA;
  --ivoire2: #FFFDF9;
  --ivoire-ligne: #E4DCCE;
  --encre: #14202E;
  --encre2: #4A5A6C;

  --ok: #2ED47A;
  --attente: #FBBF24;

  --r: 10px;
  --r-lg: 16px;
  --largeur: 1200px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--deep);
  color: var(--txt2);
  font: 17px/1.65 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  color: var(--blanc); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 14px;
}
h1 { font-size: clamp(34px, 5.2vw, 56px); }
h2 { font-size: clamp(26px, 3.4vw, 38px); }
h3 { font-size: 20px; }
p { margin: 0 0 16px; }
a { color: var(--cyan); }

/* Le focus est VISIBLE. Un anneau retiré « parce que c'est plus propre »
   rend le site inutilisable au clavier, et personne ne s'en aperçoit en le
   testant à la souris. */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--corail); outline-offset: 3px; border-radius: 4px;
}

.saut {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--cyan); color: var(--deep); padding: 12px 20px;
  font-weight: 650; border-radius: 0 0 var(--r) 0;
}
.saut:focus { left: 0; }

.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }
.centre { text-align: center; }

/* ---------- En-tête ---------- */
.ent {
  display: flex; align-items: center; gap: 28px;
  max-width: var(--largeur); margin: 0 auto; padding: 18px 24px;
}
.marque {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; flex: none;
}
.bml-symb { width: 30px; height: 30px; }
.mot {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-weight: 700; font-size: 20px; letter-spacing: -.02em; color: var(--blanc);
}
.mot i { font-style: normal; color: var(--cyan); }

.nav { flex: 1; }
.nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
/* La navigation habille les liens ET les entrées neutralisées.

   Quand une page n'est pas encore écrite, le générateur remplace son lien
   par un `<span>`. Les règles ne visaient que `a` : les entrées perdaient
   leur rembourrage et se collaient les unes aux autres — « Pour qui ?
   Plateformes Guides Tarifs » en un seul bloc illisible. Une mise en forme
   qui ne tient qu'au nom de la balise casse à la première variante. */
.nav a, .nav .a-venir {
  display: block; padding: 9px 14px; border-radius: var(--r);
  color: var(--txt2); text-decoration: none; font-size: 15.5px; font-weight: 500;
}
.nav a:hover { background: var(--surface); color: var(--blanc); }
.nav a[aria-current] { color: var(--cyan); }

.ent-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.lien-sobre { color: var(--txt2); text-decoration: none; font-size: 15.5px; }
.lien-sobre:hover { color: var(--blanc); }

.burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.burger span {
  display: block; width: 22px; height: 2px; background: var(--blanc);
  border-radius: 2px; margin: 4px 0;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px; border-radius: var(--r); border: 1px solid transparent;
  font: inherit; font-size: 15.5px; font-weight: 650; text-decoration: none;
  cursor: pointer; white-space: nowrap; transition: filter .12s, background .12s;
}
.btn-lg { padding: 15px 30px; font-size: 16.5px; }
.btn-cyan { background: var(--cyan); color: var(--deep); }
.btn-cyan:hover { filter: brightness(1.08); }
.btn-fantome {
  background: rgba(255, 255, 255, .04); color: var(--blanc);
  border-color: rgba(255, 255, 255, .16);
}
.btn-fantome:hover { background: rgba(255, 255, 255, .09); }

.lien-fleche {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--cyan); text-decoration: none; font-weight: 600; font-size: 15.5px;
}
.lien-fleche::after { content: '→'; transition: transform .12s; }
.lien-fleche:hover::after { transform: translateX(3px); }

/* ---------- Hero ---------- */
/* La colonne de texte est un peu plus large que le visuel.

   À parts égales, elle mesurait 552 px et les deux appels à l'action en
   demandaient 553 : le second passait à la ligne POUR UN PIXEL, ce qui se
   lit comme un choix de mise en page alors que c'est un accident. Un pixel
   grappillé sur le rembourrage aurait tenu jusqu'au premier mot plus long. */
.hero {
  max-width: var(--largeur); margin: 0 auto; padding: 40px 24px 72px;
  display: grid; grid-template-columns: 1.08fr 1fr; gap: 48px; align-items: center;
}
.hero h1 i { font-style: normal; color: var(--cyan); }
.hero-p { font-size: 18.5px; color: var(--txt2); max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
/* Les deux appels tenaient sur 578 px pour 576 px disponibles : le second
   passait à la ligne pour deux pixels. On resserre le rembourrage du hero
   plutôt que de réduire la police, qui est la même partout. */
.hero .btn-lg { padding: 15px 26px; }

.compat {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  margin-top: 32px; font-size: 14.5px; color: var(--slate);
}
/* « à l'étude » se retrouvait seul sur une ligne, en jaune, détaché des
   plateformes qu'il qualifie — une mention de prudence qui ressemblait à un
   avertissement isolé. Chaque état reste solidaire de son texte. */
.compat .etat { display: inline-flex; align-items: center; gap: 8px; }
.compat strong { color: var(--txt2); }
.compat em { font-style: normal; color: var(--attente); }
/* Le séparateur disparaît quand la ligne se coupe : un « · » en fin de
   ligne pend dans le vide et ressemble à une coquille. */
.compat .sep { opacity: .4; }
@media (max-width: 1200px) { .compat .sep { display: none; } }
.pastille { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pastille.ok { background: var(--ok); }
.pastille.attente { background: var(--attente); }

/* ---------- Sections ---------- */
.sect { padding: 76px 0; }
.sect > .conteneur > h2 { max-width: 20em; }
.chapeau {
  font-size: 18px; color: var(--txt2); max-width: 46em; margin-bottom: 40px;
}

.fond-ivoire { background: var(--ivoire); color: var(--encre2); }
.fond-ivoire h2, .fond-ivoire h3 { color: var(--encre); }
.fond-ivoire .chapeau { color: var(--encre2); }
.fond-ivoire .carte {
  background: var(--ivoire2); border-color: var(--ivoire-ligne);
}
.fond-ivoire .carte p { color: var(--encre2); }
.fond-ivoire .limites li { border-color: var(--ivoire-ligne); }
.fond-ivoire .limites strong { color: var(--encre); }
.fond-ivoire .limites span { color: var(--encre2); }

.fond-sombre { background: var(--midnight); }

/* ---------- Grilles et cartes ---------- */
.grille { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }

.carte {
  background: var(--surface); border: 1px solid var(--ligne);
  border-radius: var(--r-lg); padding: 24px; min-width: 0;
}
.carte h3 { margin-bottom: 8px; }
.carte p { font-size: 15.5px; margin-bottom: 14px; }
.carte-plateforme { display: flex; flex-direction: column; }
.carte-plateforme .lien-fleche { margin-top: auto; }

.badge {
  display: inline-flex; align-items: center; align-self: flex-start;
  padding: 4px 11px; border-radius: 99px; margin-bottom: 14px;
  font-size: 12.5px; font-weight: 650;
}
.badge-ok { background: rgba(46, 212, 122, .13); color: var(--ok); }
.badge-attente { background: rgba(251, 191, 36, .13); color: var(--attente); }

/* ---------- Photos de mise en scène ----------
   Ce sont des scènes d'illustration, pas des clients. Le pied de page le dit
   une fois pour tout le site ; ici on se contente de les afficher proprement.

   `aspect-ratio` figé sur le cadre : les fichiers font tous 3/2, mais un
   remplacement futur au mauvais format ferait sauter la mise en page à
   l'arrivée de l'image. Le cadre décide, `object-fit` recadre. */
.photo { margin: 0 0 18px; }
.photo picture { display: block; }
.photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; border-radius: var(--r);
  border: 1px solid rgba(145, 164, 183, .18);
  background: rgba(145, 164, 183, .08);
}
.hero-visuel .photo img { aspect-ratio: 4 / 3; }
.fond-ivoire .photo img { border-color: rgba(20, 32, 46, .12); }

/* ---------- Illustration à côté du texte ----------
   La photo passe SOUS le texte sur téléphone : on lit l'argument avant de
   regarder l'image, et l'image ne repousse pas le contenu hors de l'écran. */
.duo { display: grid; grid-template-columns: 42% 1fr; gap: 32px; align-items: start; }
.duo .photo { margin: 0; position: sticky; top: 96px; }
@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; gap: 24px; }
  .duo-image { order: 2; }
  .duo .photo { position: static; }
}

/* ---------- Captures produit ----------
   UNE CAPTURE SOMBRE SUR UN FOND SOMBRE DISPARAÎT.

   Le cockpit est une interface Deep/Midnight, posée sur une page Deep : au
   premier rendu, il ne restait qu'un rectangle vide avec une ombre. L'image
   était pourtant bien chargée — elle se fondait dans le fond.

   La maquette réglait ça en la posant sur une photo claire. Les photos
   n'existent pas encore ; on lui donne donc un socle légèrement plus clair,
   qui la détache sans rien ajouter de décoratif. */
.capture { margin: 0; }
.capture picture { display: block; }
.capture img {
  width: 100%; height: auto; display: block;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-lg);
  background: var(--surface2);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 221, 245, .10);
}
.hero-visuel .capture img {
  /* Un halo cyan très léger : le même signal que la pastille « Live » du
     cockpit, pas un dégradé décoratif. */
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 221, 245, .22),
              0 0 70px -20px rgba(0, 221, 245, .35);
}
/* Une capture verticale — l'écran mobile du préparateur — ne doit pas
   occuper un écran entier. */
.capture.portrait img { max-height: 620px; width: auto; margin: 0 auto; }
.capture figcaption {
  margin-top: 10px; font-size: 13.5px; color: var(--slate); text-align: center;
}
.fond-ivoire .capture figcaption { color: var(--encre2); }

/* ---------- Étapes ---------- */
.etapes {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.etape {
  background: var(--surface); border: 1px solid var(--ligne);
  border-radius: var(--r-lg); padding: 26px;
}
.etape-n {
  width: 32px; height: 32px; border-radius: 50%; margin-bottom: 14px;
  background: var(--cyan-voile); color: var(--cyan);
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.etape p { font-size: 15.5px; }
.etape-note {
  margin: 0; padding-top: 14px; border-top: 1px solid var(--ligne);
  font-size: 14px; color: var(--slate);
}

/* ---------- Limites ---------- */
.limites { list-style: none; margin: 0; padding: 0; }
.limites li {
  padding: 18px 0; border-bottom: 1px solid var(--ligne);
  display: grid; grid-template-columns: 15em 1fr; gap: 20px; align-items: baseline;
}
.limites li:last-child { border-bottom: 0; }
.limites strong { color: var(--blanc); font-weight: 650; font-size: 16px; }
.limites span { color: var(--txt2); font-size: 15.5px; }

/* ---------- FAQ ---------- */
.faq-q {
  border-bottom: 1px solid var(--ligne); padding: 4px 0;
}
.faq-q summary {
  cursor: pointer; padding: 16px 0; font-weight: 600; color: var(--blanc);
  font-size: 16.5px; list-style: none;
}
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary::before { content: '+ '; color: var(--cyan); }
.faq-q[open] summary::before { content: '– '; }
.faq-r { padding-bottom: 18px; font-size: 15.5px; }
.fond-ivoire .faq-q { border-color: var(--ivoire-ligne); }
.fond-ivoire .faq-q summary { color: var(--encre); }

/* ---------- Fil d'Ariane ---------- */
.ariane { max-width: var(--largeur); margin: 0 auto; padding: 20px 24px 0; }
.ariane ol {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0;
  font-size: 14px; color: var(--slate);
}
.ariane li + li::before { content: '/'; margin-right: 8px; opacity: .5; }
.ariane a { color: var(--slate); text-decoration: none; }
.ariane a:hover { color: var(--cyan); }

/* ---------- Appel final ---------- */
.appel { text-align: center; background: var(--midnight); }
.appel .chapeau { margin-left: auto; margin-right: auto; }
.appel .hero-actions { justify-content: center; }

/* ---------- Pied de page ---------- */
.pied {
  background: var(--midnight); border-top: 1px solid var(--ligne);
  padding: 56px 24px 28px;
}
.pied-grille {
  max-width: var(--largeur); margin: 0 auto;
  display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 36px;
}
.pied-marque p { font-size: 14.5px; color: var(--slate); margin-top: 14px; max-width: 26em; }
.pied h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--slate); margin-bottom: 14px; font-family: 'Inter', sans-serif;
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 9px; }
.pied li a, .pied li .a-venir {
  color: var(--txt2); text-decoration: none; font-size: 14.5px;
}
.pied li a:hover { color: var(--cyan); }
.pied-independance {
  max-width: var(--largeur); margin: 36px auto 0; padding-top: 22px;
  border-top: 1px solid var(--ligne);
  font-size: 13px; line-height: 1.6; color: var(--slate); max-width: 62em;
}
.pied-bas {
  max-width: var(--largeur); margin: 22px auto 0; padding-top: 22px;
  border-top: 1px solid var(--ligne);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  font-size: 13.5px; color: var(--slate);
}
.pied-bas p { margin: 0; }
.pied-bas ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }

/* ---------- Adaptation ---------- */
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; gap: 36px; padding-bottom: 56px; }
  .g3, .etapes { grid-template-columns: 1fr 1fr; }
  .duo { grid-template-columns: 1fr; }
  .pied-grille { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 720px) {
  .nav {
    display: none; position: absolute; top: 70px; left: 0; right: 0; z-index: 90;
    background: var(--surface); border-block: 1px solid var(--ligne); padding: 10px;
  }
  .nav.ouvert { display: block; }
  .nav ul { flex-direction: column; }
  .nav a { padding: 13px 14px; }
  .burger { display: block; order: 3; margin-left: auto; }
  .ent { position: relative; flex-wrap: wrap; gap: 12px; }
  .ent-actions .lien-sobre { display: none; }
  .g2, .g3, .etapes { grid-template-columns: 1fr; }
  .limites li { grid-template-columns: 1fr; gap: 6px; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
  .sect { padding: 52px 0; }
}

/* ---------- Liens vers des pages en cours d'écriture ----------
   Le générateur transforme en texte tout lien dont la page n'existe pas
   encore. Le visiteur lit la même phrase et ne clique pas dans le vide ;
   le jour où la page est écrite, le lien réapparaît de lui-même.
   Il reste discret : ce n'est pas une erreur, c'est un chantier. */
.a-venir {
  color: var(--slate); cursor: default; text-decoration: none;
  opacity: .62;
}
.a-venir::after { content: none; }
.fond-ivoire .a-venir { color: var(--encre2); }

/* ---------- Fraîcheur d'une page plateforme ----------
   Les règles des plateformes changent. Une page non datée vieillit sans
   prévenir, et le lecteur n'a aucun moyen de savoir s'il lit l'état de l'an
   dernier. La date et la source vivent donc dans la page, pas en note. */
.fraicheur {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px;
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--ivoire-ligne);
  font-size: 13.5px; color: var(--encre2);
}
.fraicheur time { font-weight: 600; }
.fraicheur a { color: var(--cyan-sombre); font-weight: 600; }
.fraicheur-note { flex-basis: 100%; color: var(--encre2); opacity: .8; }

/* ---------- Guides ----------
   Un hero sans visuel : le sujet est le texte. La colonne de lecture est
   bornée à ~68 caractères — au-delà, l'œil perd la ligne suivante, et un
   guide de deux mille mots ne se lit pas jusqu'au bout. */
.hero-guide { grid-template-columns: 1fr; padding-bottom: 40px; }
.hero-guide .hero-txt { max-width: 46em; }
.hero-guide h1 { font-size: clamp(30px, 4.4vw, 46px); }

.dates {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--ligne);
  font-size: 13.5px; color: var(--slate);
}
.dates time { font-weight: 600; color: var(--txt2); }
.dates-src { flex-basis: 100%; }
.dates-src a { color: var(--cyan); }

/* Une formule se lit d'un coup d'œil, ou elle ne se lit pas. */
.formule {
  background: var(--surface); border: 1px solid var(--ligne);
  border-left: 3px solid var(--cyan);
  border-radius: var(--r); padding: 16px 20px; margin: 18px 0;
  font-size: 17px; color: var(--blanc);
}
.fond-ivoire .formule {
  background: var(--ivoire2); border-color: var(--ivoire-ligne);
  border-left-color: var(--cyan-sombre); color: var(--encre);
}

/* Le corps d'un guide garde une largeur de lecture, même en pleine page. */
.sect > .conteneur > p { max-width: 46em; }