/* =============================================================
   LIVRES BLANCS — Styles de la page  /livre-blanc/{slug}/
   =============================================================

   PORTEE DE CE FICHIER
   Il ne contient QUE ce que ds-bundle.css (plugin lp-tools) ne fournit pas.
   Les polices, la palette, les espacements, les bordures, le motion, le focus,
   la grille, ainsi que les composants icon / text-styles / badge / button /
   action-button / link / icon-box / cta-section viennent de ds-bundle.css.
   Ne PAS redefinir ici un token ou un composant present dans ds-bundle.

   Ordre de chargement (voir app/hooks/livres-blancs.php) :
     1. fonts.css     (lp-tools)  — @font-face
     2. ds-bundle.css (lp-tools)  — tokens + composants DS
     3. ce fichier                — composants DS manquants + styles de page

   NE PAS EDITER A LA MAIN les blocs marques « source DS » : ils sont copies
   depuis le design system. Pour les mettre a jour, recopier la section du DS.

   Genere par reduction de livre-blanc/creation-entreprise/livre-blanc.css
   (4415 lignes) : 2766 lignes retirees car deja dans ds-bundle, plus les
   sections header / footer / logo (le theme fournit son propre en-tete et
   pied de page) et cover-mini (remplacee par les images mises en avant).
   ============================================================= */


/* =============================================================
   1. ISOLATION — cohabitation avec le CSS global du theme
   =============================================================
   Le theme charge main.css, last.css et custom-2026.css sur toutes les pages.
   Verifie a la construction : aucune collision exacte sur .btn ni sur les
   classes de cette page. guides_v2.css (qui contient le piege
   [class^="lp-"] { font-family: 'legalplace' !important }) n'est PAS charge
   sur ce type de contenu — d'ou l'absence de prefixe « lp- » sur nos classes.

   Le reset est donc scope au conteneur de page, et non global : un reset
   global casserait les marges de l'en-tete et du pied de page du theme.
   ============================================================= */

.livre-blanc-page,
.livre-blanc-page *,
.livre-blanc-page *::before,
.livre-blanc-page *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Le theme force « label { display: flex; width: 100% } » via main.css.
   Nos labels de formulaire sont des blocs simples. */
.livre-blanc-page label {
  display: block;
  width: auto;
}

/* Le theme applique ses propres styles de liste sur les <ul>/<ol> de contenu. */
.livre-blanc-page ul,
.livre-blanc-page ol {
  list-style: none;
}

/* Les titres de la page portent la typo DS, pas celle du theme. */
.livre-blanc-page h1,
.livre-blanc-page h2,
.livre-blanc-page h3 {
  font-family: var(--typography-font-family-es-rebond-grotesque), sans-serif;
  text-transform: none;
  letter-spacing: normal;
}

/* Volontairement PAS de regle generique « .livre-blanc-page img », meme
   defensive : sa specificite (0-1-1) ecrase celle des composants DS (0-1-0).
   Une regle « height: auto » cassait ici la hauteur imposee par
   .review-badge__logo et .review-badge__stars, qui rendaient alors a leur
   taille intrinseque. Chaque image est dimensionnee par sa propre classe. */

html { scroll-behavior: smooth; }

/* Fond et typographie de base, portes par la classe de body que WordPress
   ajoute automatiquement sur ce type de contenu. */
body.single-livre_blanc {
  background-color: var(--color-page);
  color: var(--color-content-primary);
  font-family: var(--typography-paragraph-font-family), sans-serif;
  font-weight: var(--typography-paragraph-font-weight);
  font-size: var(--typography-paragraph-font-size-2);
  line-height: var(--typography-paragraph-line-height-2);
  -webkit-font-smoothing: antialiased;
}


/* =============================================================
   2. TOKENS LOCAUX
   ============================================================= */

/* Variables locales — cohérence visuelle cartes */
:root {
  --lp-radius-card: 12px;

  /* Coche des points cles du hero. En masque CSS : la couleur reste pilotee
     par un token DS (voir .hero__bullets li::before), et le trace n'a pas a
     etre saisi en back-office. */
  --lb-check-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012l5%205%209-11%22%2F%3E%3C%2Fsvg%3E");
}

/* Tokens references par components/sections/reviews-section.css (source DS)
   mais absents de ds-bundle.css ET de la feuille statique : les declarations
   etaient donc invalides et ignorees par le navigateur, ce qui equivaut a
   « normal ». On les definit explicitement a « normal » pour reproduire a
   l'identique le rendu valide, sans declaration invalide.
   Si le DS finit par les exporter, supprimer ce bloc lui rend le controle. */
:root {
  --typography-headline-letter-spacing-3: normal;
  --typography-headline-letter-spacing-4: normal;
}

/* Marges larges cohérence Figma */
@media (min-width: 768px) {
  :root { --grid-margin: 48px; }
}
@media (min-width: 1024px) {
  :root { --grid-margin: 80px; }
}
@media (min-width: 1280px) {
  :root { --grid-margin: 120px; --grid-max-width: 1440px; }
}
@media (min-width: 1600px) {
  :root { --grid-margin: 146px; --grid-max-width: 1600px; }
}


/* =============================================================
   3. COMPOSANTS DS ABSENTS DE ds-bundle.css  (source DS)
   ============================================================= */


/* ── source DS: components/content/highlight.css ── */
/* =============================================
   COMPONENT — Highlight
   =============================================

   Variants
   --------
   Color : (default = brand/gold) | .highlight--on-dark

   Usage
   -----
   - Surligne un mot ou un groupe de mots pour le mettre en valeur
   - Fonctionne dans les titres (headline) et les paragraphes
   - Utiliser la balise <mark> pour la sémantique HTML
   - Le surlignage ne couvre que le texte, pas toute la ligne

   Règles
   ------
   - Toujours utiliser sur du texte inline (jamais sur un bloc)
   - Le texte conserve sa couleur d'origine — seul le fond change
   - Sur fond sombre, utiliser .highlight--on-dark (surlignage semi-transparent)
   - Ne pas abuser : 1 à 2 highlights par section maximum

   HTML
   ----
   <!-- Dans un titre -->
   <h2 class="headline-2">
     Votre comptabilité, entre <mark class="highlight">de bonnes mains</mark>.
   </h2>

   <!-- Dans un paragraphe -->
   <p class="paragraph-2">
     Un expert-comptable <mark class="highlight">certifié et dédié</mark> pour votre entreprise.
   </p>

   <!-- Sur fond sombre -->
   <h2 class="headline-2" style="color: white">
     Votre comptabilité, entre <mark class="highlight highlight--on-dark">de bonnes mains</mark>.
   </h2>

   ============================================= */


/* =====================
   Highlight — default (brand/gold)
   ===================== */

.highlight {
  background-color: var(--color-surface-decorative-brand);
  color: var(--color-content-primary);
  padding: 0.05em 0.2em;
  border-radius: var(--border-radius);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}


/* =====================
   Variant — On Dark
   ===================== */

.highlight--on-dark {
  background-color: var(--color-surface-decorative-brand);
  color: var(--color-content-primary);
}


/* ── source DS: components/content/review-badge.css ── */
/* =============================================
   COMPONENT — Review Badge
   =============================================

   Variants
   --------
   Source : .review-badge--trustpilot (default) | .review-badge--google

   Usage
   -----
   - Affichage de la note Trustpilot ou Google de LegalPlace
   - Layout vertical : logo → étoiles → score
   - Assets stockés dans assets/reviews/

   Scalabilité
   -----------
   Les custom properties suivantes permettent de contrôler la taille
   du badge selon le contexte :

   --rb-logo-h          hauteur du logo         (défaut : 36px)
   --rb-stars-h         hauteur des étoiles      (défaut : 44px)
   --rb-container-gap   gap logo ↔ étoiles       (défaut : 7px)
   --rb-gap             gap container ↔ score    (défaut : --spacing-8)

   Exemple — badge compact 48px (container logo + étoiles) :
   .mon-contexte .review-badge {
     --rb-logo-h:        20px;
     --rb-stars-h:       24px;
     --rb-container-gap: 4px;
     --rb-gap:           var(--spacing-4);
   }

   Règles
   ------
   - Utiliser <a> comme élément racine (lien vers le profil de la plateforme)
   - Pas d'<a> imbriqué dans l'<a> racine (HTML invalide)
   - Score : label medium · note extrabold · "|" regular · "N avis" souligné
   - NE PAS mettre d'espace avant le span .review-badge__score-link
     (l'espace est fourni par .review-badge__score-sep)

   HTML — Trustpilot
   -----------------
   <a class="review-badge review-badge--trustpilot" href="https://fr.trustpilot.com/review/legalplace.fr" target="_blank" rel="noopener noreferrer">
     <div class="review-badge__container">
       <img class="review-badge__logo" src="../../assets/reviews/trustpilot-logo.svg" alt="Trustpilot">
       <img class="review-badge__stars" src="../../assets/reviews/trustpilot-stars.svg" alt="" aria-label="4,4 étoiles sur 5">
     </div>
     <span class="review-badge__score">
       <span class="review-badge__score-label">TrustScore</span>
       <span class="review-badge__score-value"> 4,4</span>
       <span class="review-badge__score-sep"> | </span><span class="review-badge__score-link"><span class="review-badge__score-count">11 872</span> avis</span>
     </span>
   </a>

   HTML — Google
   -------------
   <a class="review-badge review-badge--google" href="https://www.google.com/search?q=legalplace+avis" target="_blank" rel="noopener noreferrer">
     <div class="review-badge__container">
       <img class="review-badge__logo" src="../../assets/reviews/google-logo.svg" alt="Google">
       <img class="review-badge__stars" src="../../assets/reviews/google-stars.svg" alt="" aria-label="4,5 étoiles sur 5">
     </div>
     <span class="review-badge__score">
       <span class="review-badge__score-label">Note</span>
       <span class="review-badge__score-value"> 4,5</span>
       <span class="review-badge__score-sep"> | </span><span class="review-badge__score-link"><span class="review-badge__score-count">6 300</span> avis</span>
     </span>
   </a>

   ============================================= */


.review-badge {
  /* Tokens de taille — surcharger selon le contexte */
  --rb-logo-h:        36px;
  --rb-stars-h:       44px;
  --rb-container-gap: 7px;
  --rb-gap:           var(--spacing-8);

  /* Layout vertical */
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rb-gap);

  /* Reset lien */
  text-decoration: none;
  color: inherit;
}


/* =====================
   Container — logo + étoiles groupés
   ===================== */

.review-badge__container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rb-container-gap);
}


/* =====================
   Logo
   ===================== */

.review-badge__logo {
  display: block;
  height: var(--rb-logo-h);
  width: auto;
}


/* =====================
   Étoiles (asset SVG officiel)
   ===================== */

.review-badge__stars {
  display: block;
  height: var(--rb-stars-h);
  width: auto;
}


/* =====================
   Score
   ===================== */

.review-badge__score {
  display: block;

  font-family: var(--typography-paragraph-font-family);
  font-size: var(--typography-paragraph-font-size-4);
  line-height: var(--typography-paragraph-line-height-4);
  color: var(--color-content-primary);
  white-space: nowrap;
}

/* Label ("TrustScore" / "Note") — medium */
.review-badge__score-label {
  font-weight: 500;
}

/* Note ("4,4") — extrabold */
.review-badge__score-value {
  font-weight: 800;
}

/* Séparateur ("|") — regular */
.review-badge__score-sep {
  font-weight: 400;
}

/* "N avis" — underline continu sur le nombre et le mot */
.review-badge__score-link {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

/* Nombre d'avis (dans score-link) — extrabold */
.review-badge__score-link .review-badge__score-count {
  font-weight: 800;
}


/* ── source DS: components/sections/reviews-section.css ── */
/* =============================================
   SECTION — Reviews Section
   =============================================

   Structure
   ---------
   section.reviews-section
   └── .reviews-section__inner
       ├── .reviews-section__headline
       │   ├── span.reviews-section__count      "+300 000"
       │   └── p.reviews-section__desc          "entrepreneurs gèrent leur société..."
       └── .reviews-section__badges
           ├── a.review-badge.review-badge--compact.review-badge--google
           ├── div.reviews-section__divider
           └── a.review-badge.review-badge--compact.review-badge--trustpilot

   Responsive (nos breakpoints)
   ----------------------------
   < 480px  : colonne — headline empilé · badges empilés · pas de divider
   ≥ 480px  : colonne — headline empilé · badges côte à côte + divider
   ≥ 768px  : grille 12 cols
              · headline : col 1–5 · flex-wrap (inline si assez de place)
              · badges   : col 6–12 · alignés à droite

   Scalabilité du Review Badge
   ---------------------------
   Dans ce contexte, le badge est réduit à 48px via les custom properties :
   · --rb-logo-h        → 20px
   · --rb-stars-h       → 24px
   · --rb-container-gap → 4px
   · --rb-gap           → var(--spacing-4)

   HTML
   ----
   <section class="reviews-section">
     <div class="reviews-section__inner">

       <div class="reviews-section__headline">
         <span class="reviews-section__count">+300 000</span>
         <p class="reviews-section__desc">entrepreneurs gèrent leur société avec LegalPlace.</p>
       </div>

       <div class="reviews-section__badges">
         <a class="review-badge review-badge--google" href="https://www.google.com/search?q=legalplace+avis" target="_blank" rel="noopener noreferrer">
           <div class="review-badge__container">
             <img class="review-badge__logo" src="..." alt="Google">
             <img class="review-badge__stars" src="..." alt="" aria-label="4,5 étoiles sur 5">
           </div>
           <span class="review-badge__score">
             <span class="review-badge__score-label">Note</span>
             <span class="review-badge__score-value"> 4,5</span>
             <span class="review-badge__score-sep"> | </span><span class="review-badge__score-link"><span class="review-badge__score-count">6 300</span> avis</span>
           </span>
         </a>
         <div class="reviews-section__divider" aria-hidden="true"></div>
         <a class="review-badge review-badge--trustpilot" href="https://fr.trustpilot.com/review/legalplace.fr" target="_blank" rel="noopener noreferrer">
           <div class="review-badge__container">
             <img class="review-badge__logo" src="..." alt="Trustpilot">
             <img class="review-badge__stars" src="..." alt="" aria-label="4,4 étoiles sur 5">
           </div>
           <span class="review-badge__score">
             <span class="review-badge__score-label">TrustScore</span>
             <span class="review-badge__score-value"> 4,4</span>
             <span class="review-badge__score-sep"> | </span><span class="review-badge__score-link"><span class="review-badge__score-count">11 872</span> avis</span>
           </span>
         </a>
       </div>

     </div>
   </section>

   ============================================= */


/* =====================
   Section — wrapper
   ===================== */

.reviews-section {
  background-color: var(--color-surface-primary);
  padding: var(--spacing-40) 0;
}


/* =====================
   Inner — conteneur centré
   ===================== */

.reviews-section__inner {
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: 0 var(--grid-margin);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24);
}


/* =====================
   Headline
   ===================== */

.reviews-section__headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4);

  text-align: center;

  font-family: var(--typography-headline-font-family);
  font-weight: var(--typography-headline-font-weight);
  color: var(--color-content-primary);
}

.reviews-section__count {
  font-size: var(--typography-headline-font-size-3);
  line-height: var(--typography-headline-line-height-3);
  letter-spacing: var(--typography-headline-letter-spacing-3);
  white-space: nowrap;
  flex-shrink: 0;
}

.reviews-section__desc {
  font-size: var(--typography-headline-font-size-4);
  line-height: var(--typography-headline-line-height-4);
  letter-spacing: var(--typography-headline-letter-spacing-4);
}


/* =====================
   Review Badge — taille réduite dans ce contexte
   Container logo + étoiles = 20px + 4px + 24px = 48px
   ===================== */

.reviews-section .review-badge {
  --rb-logo-h:        20px;
  --rb-stars-h:       24px;
  --rb-container-gap: 4px;
  --rb-gap:           var(--spacing-4);
}


/* =====================
   Badges — empilés par défaut
   ===================== */

.reviews-section__badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-16);
}

.reviews-section__divider {
  display: none;
}


/* =====================
   ≥ 480px — badges côte à côte
   ===================== */

@media (min-width: 480px) {
  .reviews-section__badges {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-24);
  }

  .reviews-section__divider {
    display: block;
    width: 1px;
    align-self: stretch;
    background-color: var(--color-divider-primary);
    flex-shrink: 0;
  }
}


/* =====================
   ≥ 768px — grille 12 cols
   ===================== */

@media (min-width: 768px) {

  /* Inner passe en grille */
  .reviews-section__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto;
    align-items: center;
    gap: var(--grid-gutter);
  }

  /* Headline : colonnes 1–5
     → inline si assez de place (flex-wrap + min-width sur le desc)
     → empilé sinon (desc passe à la ligne)                          */
  .reviews-section__headline {
    grid-column: 1 / span 5;
    align-self: center;
    text-align: left;

    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-4) var(--spacing-12);
  }

  /* Le desc inline se retrouve en ligne avec le count dès qu'il
     dispose d'au moins 280px — en dessous il passe à la ligne  */
  .reviews-section__desc {
    flex: 1;
    min-width: 280px;
  }

  /* Badges : colonnes 6–12, alignés à droite */
  .reviews-section__badges {
    grid-column: 6 / span 7;
    align-self: center;
    justify-self: end;

    flex-direction: row;
    align-items: center;
    gap: var(--spacing-24);
  }

  .reviews-section__divider {
    display: block;
  }
}


/* =====================
   ≥ 1280px — headline 7/12 cols
   Le texte tient sur une ligne à partir de la max-width
   ===================== */

@media (min-width: 1280px) {

  .reviews-section__headline {
    grid-column: 1 / span 7;
  }

  .reviews-section__badges {
    grid-column: 8 / span 5;
  }
}


/* =============================================================
   4. STYLES DE LA PAGE
   ============================================================= */

.hero {
  background-color: var(--color-surface-primary);
  padding: var(--spacing-40) 0 var(--spacing-48);
}
.hero__inner {
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-32);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--spacing-56);
  }
}

.hero__content { display: flex; flex-direction: column; gap: var(--spacing-16); }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  padding: 6px 14px;
  background-color: var(--color-page);
  border: var(--border-stroke-1) solid var(--color-border-tertiary);
  border-radius: var(--border-radius-full);
  font-family: var(--typography-paragraph-font-family), sans-serif;
  font-weight: var(--typography-headline-font-weight);
  font-size: var(--typography-paragraph-font-size-4);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-content-secondary);
  width: fit-content;
}
.hero__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background-color: var(--color-content-accent);
}
.hero__title {
  margin: 0;
  font-family: var(--typography-headline-font-family), sans-serif;
  font-weight: var(--typography-headline-font-weight);
  font-size: var(--typography-headline-font-size-2);
  line-height: 1.1;
  color: var(--color-content-primary);
}
.hero__title .highlight {
  padding: 0.04em 0.18em;
}
.hero__subtitle {
  font-size: var(--typography-paragraph-font-size-2);
  line-height: var(--typography-paragraph-line-height-2);
  color: var(--color-content-secondary);
  max-width: 540px;
}
/* Conteneur du champ WYSIWYG « Points cles ». Le contenu saisi est une <ul>
   (ou des <p>) : on ne stylise donc jamais .hero__bullets directement, mais
   ce qu'il contient. */
.hero__bullets ul,
.hero__bullets ol {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--spacing-8);
}
/* Positionnement (et non flex) : le champ « Points cles » est un WYSIWYG, le
   texte d'un <li> est donc un melange de <strong> et de noeuds texte. En flex,
   chacun devient un item separe et la phrase se casse en colonnes. En flux
   normal avec une coche en absolu, la phrase reste une phrase. */
.hero__bullets li {
  position: relative;
  padding-left: 32px;
  font-size: var(--typography-paragraph-font-size-3);
  line-height: var(--typography-paragraph-line-height-3);
  color: var(--color-content-primary);
}
/* La coche est dessinee par le CSS, pas saisie en back-office. SVG en masque
   pour que la couleur reste pilotee par un token DS. */
.hero__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  /* Centre la coche sur la premiere ligne de texte. Le token est une valeur
     en px (22px), d'ou le calcul direct. */
  top: calc((var(--typography-paragraph-line-height-3, 22px) - 20px) / 2);
  width: 20px; height: 20px;
  background-color: var(--color-content-positive);
  -webkit-mask: var(--lb-check-icon) center / 20px 20px no-repeat;
  mask: var(--lb-check-icon) center / 20px 20px no-repeat;
}
.hero__bullets strong,
.hero__bullets b { font-weight: var(--typography-headline-font-weight); }

/* Le WYSIWYG peut produire un <p> englobant : on neutralise ses marges. */
.hero__bullets > p:empty { display: none; }
.hero__bullets p { margin: 0; }

/* Paragraphes libres saisis dans le champ (hors liste a puces). */
.hero__bullets > p {
  font-size: var(--typography-paragraph-font-size-3);
  line-height: var(--typography-paragraph-line-height-3);
  color: var(--color-content-primary);
}

/* ============= FORM CARD ============= */
.form-card {
  position: relative;
  background-color: var(--color-page);
  border: var(--border-stroke-1) solid var(--color-border-tertiary);
  border-radius: var(--border-radius);
  padding: var(--spacing-24);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}
@media (min-width: 768px) {
  .form-card { padding: var(--spacing-32); }
}

.form-card__title {
  font-family: var(--typography-headline-font-family), sans-serif;
  font-weight: var(--typography-headline-font-weight);
  font-size: var(--typography-headline-font-size-4);
  line-height: 1.2;
  color: var(--color-content-primary);
  margin: 0;
}
.form-field { display: flex; flex-direction: column; gap: var(--spacing-4); }
.form-field__label {
  font-size: var(--typography-paragraph-font-size-4);
  font-weight: var(--typography-headline-font-weight);
  color: var(--color-content-primary);
  letter-spacing: 0.02em;
}
.form-field__input,
.form-field__select {
  width: 100%;
  padding: 14px 16px;
  background: var(--color-page);
  border: var(--border-stroke-1) solid var(--color-border-tertiary);
  border-radius: var(--border-radius);
  font-family: inherit;
  font-size: var(--typography-paragraph-font-size-2);
  color: var(--color-content-primary);
  transition: border-color var(--motion-transition-interactive);
}
.form-field__input::placeholder { color: var(--color-content-tertiary); }
.form-field__input:focus,
.form-field__select:focus {
  outline: none;
  border-color: var(--color-content-accent);
}
.form-field__select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}
.form-card__submit {
  width: 100%;
  justify-content: center;
  padding: 16px 24px;
  font-size: var(--typography-paragraph-font-size-2);
  margin-top: var(--spacing-4);
}
.form-card__footer {
  display: flex; align-items: center; justify-content: center;
  gap: var(--spacing-8);
  font-size: var(--typography-paragraph-font-size-4);
  color: var(--color-content-tertiary);
  text-align: center;
}
.form-card__footer svg { width: 14px; height: 14px; flex-shrink: 0; }

/* États du bouton submit */
.form-card__submit:disabled,
.form-card__submit[aria-busy="true"] {
  opacity: 0.65;
  cursor: progress;
}

/* Message d'erreur sous le bouton */
.form-card__status {
  padding: var(--spacing-12) var(--spacing-16);
  border-radius: var(--border-radius);
  font-size: var(--typography-paragraph-font-size-3);
  line-height: var(--typography-paragraph-line-height-3);
}
.form-card__status[hidden] { display: none; }
.form-card__status--error {
  background-color: var(--color-danger-300);
  color: var(--color-danger-900);
  border: var(--border-stroke-1) solid var(--color-border-danger-secondary);
}

/* Confirmation — remplace le formulaire après envoi réussi */
.form-card__success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-12);
  padding: var(--spacing-24) 0;
}
.form-card__success:focus { outline: none; }
/* En mode succès : on masque tout le reste, on affiche la confirmation */
.form-card--success > *:not(.form-card__success) { display: none; }
.form-card--success .form-card__success { display: flex; }
.form-card__success-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background-color: var(--color-positive-300);
  color: var(--color-content-positive);
  display: inline-flex; align-items: center; justify-content: center;
}
.form-card__success-icon svg { width: 30px; height: 30px; }
.form-card__success-title {
  font-family: var(--typography-headline-font-family), sans-serif;
  font-weight: var(--typography-headline-font-weight);
  font-size: var(--typography-headline-font-size-4);
  line-height: 1.2;
  color: var(--color-content-primary);
  margin: 0;
}
.form-card__success-text {
  font-size: var(--typography-paragraph-font-size-3);
  line-height: var(--typography-paragraph-line-height-3);
  color: var(--color-content-secondary);
  max-width: 340px;
  margin: 0;
}

@media (max-width: 767px) {
  .hero { padding: var(--spacing-32) 0 var(--spacing-40); }
  .hero__title { font-size: var(--typography-headline-font-size-3); }
}

/* ==============================
   REVIEWS STRIP — collée au hero
   ============================== */
.reviews-section { padding: var(--spacing-16) 0; }
@media (min-width: 1200px) {
  .reviews-section__headline {
    grid-column: 1 / span 7 !important;
    flex-wrap: nowrap !important;
  }
  .reviews-section__desc { min-width: 0 !important; white-space: nowrap; }
  .reviews-section__badges { grid-column: 8 / -1 !important; }
}
@media (max-width: 767px) {
  .reviews-section { padding: var(--spacing-12) 0 !important; }
  .reviews-section__inner { gap: var(--spacing-16) !important; }
  .reviews-section__count { font-size: var(--typography-headline-font-size-5); }
  .reviews-section__desc { font-size: var(--typography-paragraph-font-size-3); }
  .reviews-section__badges {
    flex-direction: row !important;
    gap: var(--spacing-12) !important;
    align-items: center;
  }
  .reviews-section .review-badge__score-sep,
  .reviews-section .review-badge__score-link { display: none; }
}

/* ==============================
   SECTION GÉNÉRIQUE
   ============================== */
.section { padding: var(--spacing-104) 0; }
@media (max-width: 767px) { .section { padding: var(--spacing-56) 0; } }
.section--alt { background-color: var(--color-surface-secondary); }
.section--compact { padding: var(--spacing-48) 0; }
@media (max-width: 767px) { .section--compact { padding: var(--spacing-32) 0; } }
.section__header--tight { margin-bottom: var(--spacing-24); }
.section__inner {
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
}
.section__header { margin-bottom: var(--spacing-48); }
.section__header--centered {
  max-width: 720px;
  margin-left: auto; margin-right: auto;
  text-align: center;
}
.section__title {
  font-family: var(--typography-headline-font-family), sans-serif;
  font-weight: var(--typography-headline-font-weight);
  font-size: var(--typography-headline-font-size-2);
  line-height: 1.15;
  color: var(--color-content-primary);
  margin: 0;
}
.section__intro {
  margin-top: var(--spacing-16);
  font-size: var(--typography-paragraph-font-size-2);
  color: var(--color-content-secondary);
  max-width: 720px;
}
.section__header--centered .section__intro { margin-left: auto; margin-right: auto; }

/* ==============================
   SOMMAIRE DU GUIDE
   ============================== */
.guide-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-56);
  align-items: center;
}
@media (min-width: 992px) {
  .guide-content { grid-template-columns: 1fr 1.2fr; gap: var(--spacing-80); }
}

.guide-visual {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: var(--spacing-24);
}
.guide-visual__img {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  border-radius: var(--lp-radius-card);
}

.guide-toc__eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: var(--color-content-decorative-gold);
  border-radius: var(--border-radius-full);
  font-family: var(--typography-headline-font-family), sans-serif;
  font-weight: var(--typography-headline-font-weight);
  font-size: var(--typography-paragraph-font-size-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-content-primary);
  margin-bottom: var(--spacing-20);
}
.guide-toc__title {
  font-family: var(--typography-headline-font-family), sans-serif;
  font-weight: var(--typography-headline-font-weight);
  font-size: var(--typography-headline-font-size-2);
  line-height: 1.15;
  color: var(--color-content-primary);
  margin: 0 0 var(--spacing-24);
}
.guide-toc__intro {
  font-size: var(--typography-paragraph-font-size-2);
  color: var(--color-content-secondary);
  margin-bottom: var(--spacing-32);
  max-width: 540px;
}
.guide-toc__list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-8);
}
@media (min-width: 600px) {
  .guide-toc__list { grid-template-columns: 1fr 1fr; gap: var(--spacing-12); }
}
.guide-toc__list li {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-12) var(--spacing-16);
  background: var(--color-page);
  border: var(--border-stroke-1) solid var(--color-border-tertiary);
  border-radius: var(--lp-radius-card);
}
.guide-toc__num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-content-primary);
  color: var(--color-page);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--typography-headline-font-family), sans-serif;
  font-weight: var(--typography-headline-font-weight);
  font-size: var(--typography-paragraph-font-size-3);
}
.guide-toc__num--bonus {
  background: var(--color-content-decorative-gold);
  color: var(--color-content-primary);
}
.guide-toc__item-title {
  font-family: var(--typography-headline-font-family), sans-serif;
  font-weight: var(--typography-headline-font-weight);
  font-size: var(--typography-paragraph-font-size-3);
  color: var(--color-content-primary);
  line-height: 1.25;
}

/* ==============================
   BÉNÉFICES — 4 PICTOS
   ============================== */
.benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-32);
}
@media (min-width: 992px) { .benefits { grid-template-columns: repeat(4, 1fr); } }

.benefit {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: var(--spacing-12);
}
.benefit__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-surface-decorative-linen-medium);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-content-primary);
}
.benefit__icon svg { width: 24px; height: 24px; }
.benefit__title {
  font-family: var(--typography-headline-font-family), sans-serif;
  font-weight: var(--typography-headline-font-weight);
  font-size: var(--typography-paragraph-font-size-1);
  color: var(--color-content-primary);
  margin: 0;
}
.benefit__desc {
  font-size: var(--typography-paragraph-font-size-3);
  color: var(--color-content-secondary);
}

/* ==============================
   AUTEUR — Compact, photo + bio courte
   ============================== */
.author {
  display: flex; align-items: center;
  gap: var(--spacing-24);
  max-width: 720px;
  margin: 0 auto;
  padding: var(--spacing-24);
  background: var(--color-page);
  border: var(--border-stroke-1) solid var(--color-border-tertiary);
  border-radius: var(--lp-radius-card);
}
@media (max-width: 600px) {
  .author { flex-direction: column; text-align: center; padding: var(--spacing-20); }
}
.author__photo {
  width: 88px; height: 88px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-surface-decorative-linen-medium);
}
.author__body { flex: 1; }
/* Le nom pointe vers la page auteur : signal d'entite utile en SEO et en GEO.
   Il garde neanmoins l'apparence d'un titre, pas celle d'un lien de contenu —
   le soulignement n'apparait qu'au survol. */
.author__name a {
  color: inherit;
  text-decoration: none;
}
.author__name a:hover,
.author__name a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.author__name {
  font-family: var(--typography-headline-font-family), sans-serif;
  font-weight: var(--typography-headline-font-weight);
  font-size: var(--typography-paragraph-font-size-1);
  color: var(--color-content-primary);
  margin: 0;
}
.author__role {
  font-size: var(--typography-paragraph-font-size-3);
  color: var(--color-content-tertiary);
  margin: 2px 0 var(--spacing-8);
}
.author__bio {
  font-size: var(--typography-paragraph-font-size-3);
  line-height: var(--typography-paragraph-line-height-3);
  color: var(--color-content-secondary);
  margin: 0;
}

/* ==============================
   AUTRES GUIDES — Card verticale : visuel carré + titre
   ============================== */
.other-guides {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-32);
}
@media (min-width: 600px) { .other-guides { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .other-guides { grid-template-columns: repeat(3, 1fr); } }

.guide-card {
  display: flex; flex-direction: column;
  gap: var(--spacing-12);
  text-decoration: none;
  color: inherit;
}
.guide-card__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--border-radius);
  background: var(--color-surface-decorative-linen-medium);
  transition: transform var(--motion-transition-interactive);
}
.guide-card:hover .guide-card__visual {
  transform: translateY(-2px);
}
/* La couverture est l'image mise en avant, de proportions libres. « contain »
   plutot que « cover » : sur une couverture de livre, le titre est porteur
   d'information, le rogner serait une perte. Le fond lin comble l'espace. */
.guide-card__visual img {
  display: block;
  width: 100%;
  height: 100%;
  padding: var(--spacing-16);
  object-fit: contain;
  object-position: center;
}
.guide-card__tag {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 12px;
  background: var(--color-surface-secondary);
  border-radius: var(--border-radius-full);
  font-family: var(--typography-paragraph-font-family), sans-serif;
  font-weight: var(--typography-headline-font-weight);
  font-size: var(--typography-paragraph-font-size-4);
  color: var(--color-content-secondary);
  margin-top: var(--spacing-8);
}
.guide-card__title {
  font-family: var(--typography-headline-font-family), sans-serif;
  font-weight: var(--typography-headline-font-weight);
  font-size: var(--typography-paragraph-font-size-1);
  line-height: 1.25;
  color: var(--color-content-primary);
  margin: 0;
}
.guide-card:hover .guide-card__title {
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

/* ==============================
   CTA GUIDE — Renvoi vers le formulaire (scroll up)
   ============================== */
.cta-guide {
  background-color: var(--color-surface-primary);
  padding: var(--spacing-56) 0;
}
@media (max-width: 767px) { .cta-guide { padding: var(--spacing-40) 0; } }
.cta-guide__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--grid-margin);
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-20);
}
.cta-guide__title {
  font-family: var(--typography-headline-font-family), sans-serif;
  font-weight: var(--typography-headline-font-weight);
  font-size: var(--typography-headline-font-size-3);
  line-height: 1.15;
  color: var(--color-content-primary);
  margin: 0;
}
.cta-guide__btn {
  padding: 16px 28px;
  font-size: var(--typography-paragraph-font-size-2);
}
.cta-guide__btn .icon { width: 18px; height: 18px; }

/* ==============================
   CTA SECTION — Compact, inspiré outils-simulateurs
   ============================== */
.cta-final {
  background-color: var(--color-brand-1000);
  color: var(--color-content-inverse-primary);
  padding: var(--spacing-48) 0;
  text-align: center;
}
@media (max-width: 767px) { .cta-final { padding: var(--spacing-32) 0; } }
.cta-final__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--grid-margin);
  display: flex; flex-direction: column;
  align-items: center;
  gap: var(--spacing-16);
}
.cta-final__title {
  font-family: var(--typography-headline-font-family), sans-serif;
  font-weight: var(--typography-headline-font-weight);
  font-size: var(--typography-headline-font-size-4);
  line-height: 1.2;
  color: var(--color-content-inverse-primary);
  margin: 0;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .cta-final__title {
    font-size: var(--typography-headline-font-size-5);
    white-space: normal;
  }
}
.cta-final__title .highlight {
  background-color: var(--color-content-decorative-gold);
  color: var(--color-content-primary);
  padding: 0.04em 0.18em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.cta-final__desc {
  font-size: var(--typography-paragraph-font-size-3);
  line-height: var(--typography-paragraph-line-height-3);
  color: var(--color-content-inverse-secondary);
  max-width: 520px;
  margin: 0;
}
.cta-final__btn {
  background-color: var(--color-page);
  color: var(--color-content-accent);
  border: none;
  padding: 12px 24px;
  border-radius: var(--border-radius-full);
  font-family: var(--typography-paragraph-font-family), sans-serif;
  font-weight: var(--typography-headline-font-weight);
  font-size: var(--typography-paragraph-font-size-3);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  transition: background-color var(--motion-transition-interactive);
  margin-top: var(--spacing-4);
}
.cta-final__btn:hover { background-color: var(--color-surface-secondary); }
.cta-final__btn svg { width: 16px; height: 16px; }