/* ═══════════════════════════════════════════════════════════════════
   LES GUIDES PRO — la langue de la page d'accueil, appliquée à un
   article éditorial. Aucune retouche du contenu n'est nécessaire :
   tout se joue sur des sélecteurs génériques, pour qu'un nouveau
   métier n'ait qu'à assigner ce modèle et changer ses textes.

   Ce que ça remplace : une carte crème sur fond noir, en Playfair et
   Poppins, avec un rouge cardinal — un système parallèle à celui de
   l'accueil. Le site n'a pas besoin de deux grammaires.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --papier:#FAF8F4; --creux:#F1EEE7; --blanc:#FFFFFF;
  --encre:#17150F; --encre2:#4E4A3F; --gris:#8A8578;
  --filet:#E0DCD1; --filet2:#C6C0B1; --brun:#8A6A45; --noir:#15130F;
  --pad: clamp(20px, 5.2vw, 120px);
  --cap-h: clamp(56px, 4.8vw, 68px);
  --cap-t: clamp(10px, 1.5vw, 18px);
  --cap-px: clamp(18px, 2.2vw, 32px);
  --verre-fond: rgba(255,255,255,.15);
  --verre-filet: rgba(255,255,255,.28);
  --verre-ombre: 0 4px 20px rgba(0,0,0,.07), inset 0 -1px 11px rgba(255,255,255,.5);
  --verre-flou: blur(10px) saturate(1.15);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--papier); color:var(--encre);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.72; font-weight:300;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--brun); text-decoration:none; }
a:hover { color:#6E5336; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline:2px solid var(--brun); outline-offset:3px; border-radius:4px; }
.evitement { position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--encre); color:#fff; padding:12px 20px; border-radius:0 0 10px 0; }
.evitement:focus { left:0; color:#fff; }

/* ── la colonne ──────────────────────────────────────────────────── */
.guide-page { padding:calc(var(--cap-t) + var(--cap-h) + clamp(34px,5vw,72px)) var(--pad) 0; }
.guide { max-width:44rem; margin:0 auto; }
/* Les pages existantes enveloppent leur contenu dans un
   `div.welcome-article` — le sauvetage d'origine contre le fond noir du
   site. Le modèle n'en a plus besoin, mais on ne touche pas au contenu :
   les sélecteurs d'enfant direct acceptent donc les deux formes. */
:is(.guide, .guide > .welcome-article) > * + * { margin-top:1.15em; }

/* Le conteneur hérité ne peint plus rien : ni carte, ni fond, ni marge. */
.guide .welcome-article { background:none; color:inherit; max-width:none;
  margin:0; padding:0; border-radius:0; font:inherit; }

/* ── le titre ────────────────────────────────────────────────────── */
.guide h1 { margin:0 0 .5em; font-size:clamp(32px,4.4vw,52px); font-weight:200;
  letter-spacing:-0.035em; line-height:1.08; color:var(--encre); text-wrap:balance; }

/* ── la réponse courte : c'est la thèse, elle prend la voix sérif ── */
.gp-these, :is(.guide > .welcome-article) > p:first-of-type { font-family:"Instrument Serif",Georgia,serif;
  font-weight:400; font-size:clamp(20px,2.1vw,26px); line-height:1.44;
  letter-spacing:-0.005em; color:var(--encre); margin-top:0;
  padding-left:clamp(18px,2vw,26px); border-left:2px solid var(--brun); }
.gp-these strong, :is(.guide > .welcome-article) > p:first-of-type strong { font-weight:400; font-style:italic; }

/* ── les sections ────────────────────────────────────────────────── */
.guide h2 { margin:clamp(46px,5.4vw,78px) 0 .55em; padding-top:clamp(24px,2.6vw,34px);
  border-top:1px solid var(--filet); font-size:clamp(24px,3vw,34px); font-weight:300;
  letter-spacing:-0.028em; line-height:1.14; color:var(--encre); text-wrap:balance; }
.guide h3 { margin:clamp(26px,2.8vw,36px) 0 .4em; font-size:clamp(18px,1.6vw,20.5px);
  font-weight:400; letter-spacing:-0.018em; line-height:1.3; color:var(--encre); }

/* ── le corps ────────────────────────────────────────────────────── */
.guide p { color:var(--encre2); }
.guide strong, .guide b { color:var(--encre); font-weight:500; }
.guide em { font-style:italic; color:var(--encre2); }

/* ── les listes : un tiret brun, pas une puce ────────────────────── */
.guide ul, .guide ol { list-style:none; padding:0; margin-top:1.15em;
  display:flex; flex-direction:column; gap:11px; }
.guide li { color:var(--encre2); padding-left:1.5em; position:relative; }
.guide ul > li::before { content:"—"; position:absolute; left:0; top:0;
  color:var(--brun); font-weight:400; }
.guide ol { counter-reset:g; }
.guide ol > li { counter-increment:g; }
.guide ol > li::before { content:counter(g,decimal-leading-zero);
  position:absolute; left:0; top:.28em; font-family:"DM Mono",ui-monospace,monospace;
  font-size:11.5px; letter-spacing:.16em; color:var(--gris); }

/* ── le tableau : c'est la pièce que les IA citent ────────────────
   Pas de grille de cellules — des filets horizontaux et une seule
   ligne mise en avant. Welcome est TOUJOURS la dernière ligne du
   comparatif : c'est une règle du gabarit, pas un hasard. */
/* Le comparatif sort de la colonne de lecture : six colonnes dans 44 rem,
   c'est cinq lignes de texte par cellule. Il prend la largeur qu'il lui
   faut, centré, et ne défile que sur les petits écrans. */
.guide figure { margin:clamp(30px,3.4vw,44px) 0 0;
  width:min(1120px, calc(100vw - 2 * var(--pad)));
  margin-left:50%; transform:translateX(-50%); }
/* Le cadre blanc est fait pour un tableau, pas pour une photo. */
.guide figure:has(table) { overflow-x:auto; border:1px solid var(--filet);
  border-radius:8px; background:var(--blanc); }
.guide figure:has(img) figcaption { text-align:center; }
.guide table { width:100%; border-collapse:collapse; font-size:14.5px; min-width:820px;
  table-layout:fixed; }
.guide table col, .guide thead th:first-child, .guide tbody td:first-child { width:20%; }
.guide thead th:last-child, .guide tbody td:last-child { width:17%; }
.guide thead th { background:var(--creux); color:var(--gris);
  font-family:"DM Mono",ui-monospace,monospace; font-size:10.5px; font-weight:400;
  letter-spacing:.15em; text-transform:uppercase; text-align:left;
  padding:14px 16px; border-bottom:1px solid var(--filet); vertical-align:bottom; }
.guide tbody td { padding:15px 16px; border-bottom:1px solid var(--filet);
  color:var(--encre2); vertical-align:top; line-height:1.5; hyphens:none; }
.guide tbody td:first-child { color:var(--encre); font-weight:400; }
.guide tbody tr:last-child td { border-bottom:0; background:var(--creux);
  color:var(--encre); }
.guide tbody tr:last-child td:first-child { font-weight:500;
  box-shadow:inset 3px 0 0 var(--brun); }

/* ── les images ──────────────────────────────────────────────────── */
.guide img { border-radius:10px; margin-top:clamp(30px,3.4vw,44px); width:100%; }
.guide figcaption, .guide .wp-caption-text { margin-top:10px;
  font-family:"DM Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gris); }

.guide hr { border:0; border-top:1px solid var(--filet); margin:clamp(38px,4vw,56px) 0 0; }

/* ── la note de sources, tout en bas ─────────────────────────────── */
.gp-sources, :is(.guide > .welcome-article) > p:last-of-type { margin-top:clamp(34px,3.6vw,48px);
  padding-top:22px; border-top:1px solid var(--filet);
  font-size:14px; line-height:1.6; color:var(--gris); }

/* ── le pied d'article, posé par le modèle ───────────────────────── */
.guide-fin { max-width:44rem; margin:clamp(48px,5.4vw,78px) auto 0;
  padding:clamp(28px,3.2vw,40px); background:var(--creux);
  border:1px solid var(--filet); border-radius:10px;
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px; }
.guide-fin p { flex:1 1 18rem; margin:0; color:var(--encre2); font-size:16px; }
.guide-fin b { color:var(--encre); font-weight:500; }
/* 23/09 — l'essai et, à côté, « Voir la démo en vidéo » (style du lien : demo.css) */
.guide-fin-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; }
.btn-noir { display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--noir); color:#fff; border-radius:999px; font-weight:500;
  padding:15px 28px; font-size:16px; white-space:nowrap; border:0; cursor:pointer; }
.btn-noir:hover { color:#fff; background:#211D17; }

.guide-bas { padding:clamp(50px,6vw,90px) 0 0; }

@media (max-width:640px) {
  .guide figure { border-radius:8px; }
  .guide-fin { flex-direction:column; align-items:stretch; }
  .guide-fin .btn-noir { width:100%; }
  .guide-fin-actions { flex-direction:column; align-items:stretch; }
  .guide-fin-actions .lien-demo { align-self:center; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }

/* ═══════════════════════════════════════════════════════════════════
   LA STRUCTURE « GUIDE PRO » — les blocs que le contenu peut poser.
   Un nouveau métier réutilise ces classes telles quelles : seuls les
   textes changent. `.pleine` sort un bloc de la colonne de lecture.
   ═══════════════════════════════════════════════════════════════════ */
.guide > .pleine { width:min(1180px, 100vw - 2 * var(--pad));
  margin-left:50%; transform:translateX(-50%); }

/* ── la capsule pro : presque vide, et lisible partout ───────────── */
.capsule-pro { justify-content:space-between; }
.capsule-pro .cap-pro { display:inline; }
@media (max-width:600px) {
  .capsule-pro .cap-pro { display:none; }
  .capsule-pro .btn-fantome { padding:9px 16px; }
}

/* ── le premier écran du guide ───────────────────────────────────── */
.gp-hero { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(26px,4vw,64px); align-items:center; margin-top:clamp(6px,1vw,14px); }
.gp-hero-texte { display:flex; flex-direction:column; gap:clamp(16px,1.8vw,22px); }
.gp-sur { font-family:"DM Mono",ui-monospace,monospace; font-size:11.5px;
  letter-spacing:.19em; text-transform:uppercase; color:var(--gris); }
.guide .gp-hero h1 { margin:0; }
.gp-these { margin:0; }
.gp-cta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:4px; }
.btn-bord { display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; padding:14px 26px; font-weight:500; font-size:16px;
  color:var(--encre); border:1px solid var(--filet2); background:transparent;
  white-space:nowrap; }
.btn-bord:hover { color:var(--encre); border-color:var(--gris); background:rgba(23,21,15,.04); }
.gp-note { margin:0; font-size:14.5px; color:var(--gris); }
.gp-hero figure { margin:0; width:auto; transform:none; margin-left:0; }
.gp-hero img { margin:0; border-radius:12px; }

/* ── la bande de chiffres ────────────────────────────────────────── */
.gp-chiffres { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,40px); margin-top:clamp(40px,4.6vw,64px);
  border-top:1px solid var(--filet2); border-bottom:1px solid var(--filet2);
  padding:clamp(22px,2.6vw,32px) 0; }
.gp-chiffres > div { display:flex; flex-direction:column; gap:6px;
  padding-left:clamp(14px,1.6vw,22px); border-left:1px solid var(--filet); }
.gp-chiffres > div:first-child { border-left:0; padding-left:0; }
.gp-chiffres b { font-size:clamp(24px,2.4vw,32px); font-weight:300;
  letter-spacing:-0.03em; color:var(--encre); font-variant-numeric:tabular-nums; }
.gp-chiffres span { font-size:14.5px; line-height:1.5; color:var(--encre2); }

/* ── les trois étapes : une vraie séquence, donc des numéros ─────── */
.gp-etapes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,26px); margin-top:clamp(18px,2vw,26px); }
.gp-etapes > div { border-top:1px solid var(--filet2); padding-top:15px;
  display:flex; flex-direction:column; gap:7px; }
.gp-etapes .num { font-family:"DM Mono",ui-monospace,monospace; font-size:11.5px;
  letter-spacing:.19em; color:var(--brun); }
.gp-etapes h3 { margin:0; font-size:clamp(17px,1.5vw,20px); font-weight:400; }
.gp-etapes p { margin:0; font-size:15px; line-height:1.55; color:var(--encre2); }

/* ── la grille de fonctionnalités ────────────────────────────────── */
.gp-cartes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px); margin-top:clamp(20px,2.2vw,30px); }
.gp-carte { background:var(--blanc); border:1px solid var(--filet);
  border-radius:12px; padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; }
.gp-carte svg { color:var(--brun); flex:none; }
.gp-carte h3 { margin:0; font-size:17.5px; font-weight:500; letter-spacing:-0.015em; }
.gp-carte p { margin:0; font-size:15px; line-height:1.55; color:var(--encre2); }

/* ── l'offre : une seule, et l'essai d'abord ─────────────────────── */
.gp-offre { margin-top:clamp(20px,2.2vw,30px); background:var(--creux);
  border:1px solid var(--filet); border-radius:14px;
  padding:clamp(26px,3vw,42px); display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(22px,3vw,48px); align-items:center; }
.gp-offre-texte { display:flex; flex-direction:column; gap:14px; }
.gp-offre .badge { align-self:flex-start; font-family:"DM Mono",ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--brun);
  border:1px solid rgba(138,106,69,.4); border-radius:999px; padding:6px 13px; }
.gp-offre h3 { margin:0; font-size:clamp(23px,2.4vw,30px); font-weight:300;
  letter-spacing:-0.025em; line-height:1.18; }
.gp-offre-texte > p { margin:0; font-size:16px; color:var(--encre2); }
.gp-inclus { list-style:none; padding:0; margin:4px 0 0; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 22px; }
.gp-inclus li { margin:0; padding-left:1.4em; position:relative;
  font-size:15px; color:var(--encre2); }
.gp-inclus li::before { content:"—"; position:absolute; left:0; color:var(--brun); }
.gp-offre-action { display:flex; flex-direction:column; gap:12px;
  align-items:flex-start; padding-left:clamp(0px,2vw,26px);
  border-left:1px solid var(--filet2); }
.gp-offre-action .btn-noir { padding:16px 30px; font-size:16.5px; }
.gp-offre-action p { margin:0; font-size:14.5px; color:var(--gris); line-height:1.55; }
.gp-alt { margin-top:14px; font-size:14.5px; color:var(--gris); }

/* ── la FAQ : des tiroirs, comme sur l'accueil ───────────────────── */
.gp-faq { margin-top:clamp(18px,2vw,26px); border-top:1px solid var(--filet2); }
.gp-faq details { border-bottom:1px solid var(--filet2); }
.gp-faq summary { list-style:none; cursor:pointer; display:flex;
  align-items:baseline; justify-content:space-between; gap:18px;
  padding:17px 2px; font-size:clamp(16.5px,1.45vw,18.5px); font-weight:400;
  color:var(--encre); letter-spacing:-0.015em; }
.gp-faq summary::-webkit-details-marker { display:none; }
.gp-faq summary::after { content:"+"; flex:none; font-size:22px; font-weight:200;
  color:var(--gris); line-height:1; transition:transform .18s; }
.gp-faq details[open] summary::after { transform:rotate(45deg); color:var(--brun); }
.gp-faq details > p { margin:0 0 18px; max-width:62ch;
  font-size:15.5px; line-height:1.65; color:var(--encre2); }
.gp-sources { display:block; }

@media (max-width:900px) {
  .gp-hero { grid-template-columns:minmax(0,1fr); }
  .gp-cartes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gp-offre { grid-template-columns:minmax(0,1fr); }
  .gp-offre-action { border-left:0; padding-left:0; border-top:1px solid var(--filet2);
    padding-top:18px; }
}
@media (max-width:640px) {
  .gp-chiffres { grid-template-columns:minmax(0,1fr); gap:16px; }
  .gp-chiffres > div { border-left:0; padding-left:0; border-top:1px solid var(--filet);
    padding-top:12px; }
  .gp-chiffres > div:first-child { border-top:0; padding-top:0; }
  .gp-etapes { grid-template-columns:minmax(0,1fr); }
  .gp-cartes { grid-template-columns:minmax(0,1fr); }
  .gp-inclus { grid-template-columns:minmax(0,1fr); }
  .gp-offre-action .btn-noir { width:100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   V2 (14/11/2026) — LES GUIDES « gp- » SE LISENT COMME /pros/
   Demande de Nicolas : « beaucoup plus simple à la lecture », des
   boutons d'essai plus francs. L'ancien dessin (titres fins, gris,
   étiquettes monospace) est celui que la règle du 01/09 juge « froid »
   (REGLES-SITE.md §7). On reprend donc la langue validée de /pros/ :
   titres en 600, texte en 400 et plus grand, cartes blanches arrondies,
   un bloc d'offre sombre, un bouton d'essai par étape de lecture.

   PORTÉE : `body.guide-gp` seulement. Le modèle pose cette classe quand
   le contenu commence par `.gp-hero` (page-guide.php). Les trois pages
   générées (`.welcome-article` : prix, « combien gagne », « se lancer »)
   ont leur propre style embarqué et ne sont PAS touchées.

   Aucun contenu existant n'a besoin d'être réécrit : les anciens blocs
   (`gp-these`, `gp-chiffres`, `gp-etapes`, `gp-cartes`, `gp-offre`,
   `gp-faq`) sont redessinés tels quels. Les blocs nouveaux
   (`gp-sommaire`, `gp-compare`, `gp-bande`, `gp-duo`, `gp-avis`,
   `gp-pasfait`, `gp-liens`) sont facultatifs.
   ═══════════════════════════════════════════════════════════════════ */
body.guide-gp { --texte:#3B372E; --lin:#F6F2E9; --champagne:#C9A876;
  --ambre:#B0782A; --ambre-fond:#F6E8D2; --dore-fond:#FBF3E4;
  --vert:#2F6B3A; --vert-fond:#E2EEDF; --mvt:cubic-bezier(.22,1,.36,1);
  --ombre:0 10px 30px rgba(40,30,14,.06);
  font-size:18px; line-height:1.62; font-weight:400; }

/* ── un seul axe à gauche, comme /pros/ ──────────────────────────────
   Avant : une colonne de texte centrée (44 rem) et des blocs larges qui
   en sortaient, donc des titres décalés de 230 px par rapport aux cartes
   qu'ils annoncent. Maintenant l'article prend toute la largeur utile
   et le TEXTE seul est tenu à 43 rem : titres, paragraphes, tableaux et
   cartes partent du même bord. */
.guide-gp .guide { max-width:min(1180px, 100vw - 2 * var(--pad)); }
.guide-gp .guide > :where(p, ul, ol, h2, h3, .gp-faq, .etroit) { max-width:43rem; }
.guide-gp .guide > .pleine, .guide-gp .guide > figure { width:auto; margin-left:0; transform:none; }
.guide-gp .guide p, .guide-gp .guide li { color:var(--texte); }
.guide-gp .guide strong, .guide-gp .guide b { font-weight:600; }
.guide-gp .guide > p a, .guide-gp .guide > ul a, .guide-gp .gp-faq a, .guide-gp .gp-sources a {
  color:var(--encre); text-decoration:underline; text-decoration-color:var(--champagne);
  text-decoration-thickness:2px; text-underline-offset:3px; }
.guide-gp .guide > p a:hover, .guide-gp .guide > ul a:hover, .guide-gp .gp-faq a:hover {
  text-decoration-color:var(--brun); }

.guide-gp .guide h1 { font-weight:600; font-size:clamp(34px,4.6vw,58px);
  letter-spacing:-0.032em; line-height:1.04; }
.guide-gp .guide h2 { margin:clamp(60px,7vw,104px) 0 .5em; padding-top:0; border-top:0;
  font-weight:600; font-size:clamp(27px,3.3vw,42px); letter-spacing:-0.028em; line-height:1.1; }
.guide-gp .guide h3 { font-weight:600; font-size:clamp(19px,1.7vw,22px); letter-spacing:-0.015em; }

/* Une pastille dorée, pas un tiret : elle se repère en diagonale. */
.guide-gp .guide ul > li::before { content:""; left:.15em; top:.6em; width:7px; height:7px;
  border-radius:50%; background:var(--champagne); }
.guide-gp .guide ol > li::before { font-family:inherit; font-size:13px; font-weight:600;
  letter-spacing:0; color:var(--brun); top:.22em; }

/* ── le premier écran ─────────────────────────────────────────────── */
.guide-gp .gp-hero { gap:clamp(28px,4.4vw,72px); }
.guide-gp .gp-sur { font-family:inherit; font-size:13px; font-weight:600;
  letter-spacing:.07em; color:var(--brun); }
/* La réponse courte : une carte blanche lisible, plus un pavé en italique. */
.guide-gp .gp-these { font-family:inherit; font-size:clamp(17.5px,1.45vw,19.5px);
  line-height:1.55; letter-spacing:0; color:var(--encre);
  padding:clamp(18px,2vw,24px) clamp(20px,2.2vw,28px); background:var(--blanc);
  border:1px solid var(--filet); border-radius:20px; box-shadow:var(--ombre); }
.guide-gp .gp-these strong { font-style:normal; font-weight:600; }
.guide-gp .gp-these > strong:first-child, .guide-gp .gp-these > p:first-child > strong:first-child {
  margin-right:.35em; font-size:.74em; letter-spacing:.08em;
  text-transform:uppercase; color:var(--brun); }
.guide-gp .gp-these > p { margin:0; color:var(--encre); }
.guide-gp .gp-these > * + * { margin-top:.7em; }
.guide-gp .gp-these ul { margin-top:.7em; gap:8px; }
.guide-gp .gp-these li { color:var(--encre); font-size:.95em; line-height:1.45; }

/* ── les boutons : un essai qu'on ne peut pas rater ──────────────── */
.guide-gp .btn-noir { padding:17px 30px; font-size:17px; font-weight:600;
  box-shadow:0 10px 26px rgba(19,16,9,.2);
  transition:background .2s, transform .25s ease, box-shadow .25s ease; }
.guide-gp .btn-noir:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(19,16,9,.26); }
.guide-gp .btn-bord { padding:16px 26px; font-size:17px; background:var(--blanc);
  transition:border-color .2s, transform .25s ease; }
.guide-gp .btn-bord:hover { transform:translateY(-2px); background:var(--blanc); }
.guide-gp .gp-cta { gap:12px; margin-top:6px; }
.guide-gp .gp-note { font-size:15px; color:var(--encre2); }
.guide-gp .gp-hero img { border-radius:24px; box-shadow:0 24px 60px rgba(40,30,14,.14); }
.guide-gp .guide img { border-radius:22px; }
.guide-gp .guide figcaption, .guide-gp .guide .wp-caption-text { font-family:inherit;
  font-size:14px; letter-spacing:0; text-transform:none; color:var(--gris); line-height:1.5; }
.guide-gp .guide figure:has(table) figcaption { padding:12px 16px 14px; margin:0;
  border-top:1px solid var(--filet); background:var(--blanc); }

/* ── le sommaire : des pastilles, on saute où l'on veut ──────────── */
.gp-sommaire { display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-top:clamp(26px,3vw,40px); }
.gp-sommaire > span { font-size:12.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gris); margin-right:6px; }
.gp-sommaire a { display:inline-flex; align-items:center; padding:9px 16px; border-radius:999px;
  background:var(--blanc); border:1px solid var(--filet); color:var(--encre);
  font-size:15px; font-weight:500; line-height:1.2; transition:border-color .2s, transform .25s ease; }
.gp-sommaire a:hover { border-color:var(--champagne); color:var(--encre); transform:translateY(-1px); }

/* ── les chiffres : gros, et une ligne dessous ───────────────────── */
.guide-gp .gp-chiffres { border:0; padding:0; gap:clamp(12px,1.6vw,20px); }
.guide-gp .gp-chiffres > div, .guide-gp .gp-chiffres > div:first-child {
  background:var(--blanc); border:1px solid var(--filet); border-radius:22px;
  padding:clamp(20px,2.4vw,30px); gap:10px; box-shadow:var(--ombre); }
.guide-gp .gp-chiffres b { font-weight:600; font-size:clamp(36px,4.3vw,58px);
  letter-spacing:-0.04em; line-height:1; }
.guide-gp .gp-chiffres span { font-size:16px; line-height:1.4; color:var(--encre2); }

/* ── les étapes ──────────────────────────────────────────────────── */
.guide-gp .gp-etapes { gap:clamp(12px,1.6vw,20px); margin-top:clamp(20px,2.2vw,30px); }
.guide-gp .gp-etapes > div { border:1px solid var(--filet); background:var(--blanc);
  border-radius:22px; padding:clamp(20px,2.2vw,28px); gap:10px; box-shadow:var(--ombre); }
.guide-gp .gp-etapes .num { display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; background:var(--noir); color:#fff;
  font-family:inherit; font-size:14px; font-weight:600; letter-spacing:0; }
.guide-gp .gp-etapes h3 { font-size:clamp(18.5px,1.6vw,21px); font-weight:600; }
.guide-gp .gp-etapes p { font-size:16px; line-height:1.5; color:var(--texte); }

/* ── les cartes de fonctions ─────────────────────────────────────── */
.guide-gp .gp-carte { border-radius:22px; padding:24px 24px 26px; gap:12px; box-shadow:var(--ombre); }
.guide-gp .gp-carte svg { width:48px; height:48px; padding:11px; border-radius:14px;
  background:var(--ambre-fond); color:var(--brun); }
.guide-gp .gp-carte h3 { font-size:19px; font-weight:600; }
.guide-gp .gp-carte p { font-size:16px; line-height:1.5; color:var(--texte); }
.guide-gp .gp-cartes.par-trois { grid-template-columns:repeat(3,minmax(0,1fr)); }

/* ── l'offre : le bloc sombre, celui où l'on clique ──────────────── */
.guide-gp .gp-offre { background:var(--noir); border:0; border-radius:28px; color:var(--lin);
  padding:clamp(28px,4vw,60px); box-shadow:0 30px 70px rgba(19,16,9,.22); }
.guide-gp .gp-offre .badge { font-family:inherit; font-size:12.5px; font-weight:600;
  letter-spacing:.07em; color:var(--champagne); border-color:rgba(201,168,118,.5); }
.guide-gp .gp-offre h3 { color:#fff; font-weight:600; font-size:clamp(26px,3.1vw,40px);
  letter-spacing:-0.028em; line-height:1.08; }
.guide-gp .gp-offre-texte > p { color:rgba(246,242,233,.8); font-size:17px; }
.guide-gp .guide .gp-inclus { gap:11px 24px; margin-top:8px; }
.guide-gp .guide .gp-inclus > li { color:var(--lin); font-size:16.5px; padding-left:1.8em; }
.guide-gp .guide .gp-inclus > li::before { content:""; left:0; top:.2em; width:1.15em; height:1.15em;
  border-radius:50%; background:var(--champagne) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.5 12.6l3.6 3.6 7.4-8' stroke='%23131009' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/72% no-repeat; }
.guide-gp .gp-offre-action { border-left-color:rgba(255,255,255,.16); gap:14px; }
.guide-gp .gp-offre-action .btn-noir { background:#FFFDF8; color:var(--noir);
  padding:18px 32px; font-size:17.5px; box-shadow:none; }
.guide-gp .gp-offre-action .btn-noir:hover { background:#fff; color:var(--noir);
  box-shadow:0 12px 30px rgba(0,0,0,.45); }
.guide-gp .gp-offre-action p { color:rgba(246,242,233,.74); font-size:15px; }
.guide-gp .gp-offre-action .gp-alt { color:rgba(246,242,233,.56); }

/* ── la bande d'essai, entre deux parties ────────────────────────── */
.gp-bande { margin-top:clamp(28px,3.4vw,44px); display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:18px 32px; background:var(--ambre-fond);
  border-radius:26px; padding:clamp(22px,2.8vw,36px) clamp(22px,3vw,44px); }
.gp-bande > div { flex:1 1 20rem; }
.guide-gp .guide .gp-bande h3 { margin:0; font-size:clamp(21px,2.2vw,28px); letter-spacing:-0.022em; line-height:1.15; }
.guide-gp .guide .gp-bande p { margin:6px 0 0; font-size:16px; color:var(--encre2); }

/* ── les tableaux ────────────────────────────────────────────────── */
.guide-gp .guide figure:has(table) { border-radius:22px; box-shadow:var(--ombre); }
.guide-gp .guide table { font-size:15.5px; }
.guide-gp .guide figure.etroit table { min-width:0; }
.guide-gp .guide thead th { font-family:inherit; font-size:12.5px; font-weight:600;
  letter-spacing:.05em; color:var(--encre2); padding:15px 16px; }
.guide-gp .guide tbody td { padding:16px; color:var(--texte); }
.guide-gp .guide tbody td:first-child { font-weight:600; color:var(--encre); }
.guide-gp .guide tbody tr:last-child td { background:var(--dore-fond); }
.guide-gp .guide tbody tr:last-child td:first-child { font-weight:600; box-shadow:inset 4px 0 0 var(--champagne); }

/* Le comparatif nommé : Welcome en tête (`tr.nous`), des familles
   (`tr.groupe`), et dans chaque case un repère (oui / non / en partie)
   suivi d'une ligne de détail. Le texte reste dans le HTML : c'est lui
   que les IA lisent, les pictos ne sont que du dessin. */
.guide-gp .guide table.gp-compare { min-width:980px; }
.guide-gp .guide .gp-compare th:nth-child(1), .guide-gp .guide .gp-compare td:nth-child(1) { width:16%; }
.guide-gp .guide .gp-compare th:nth-child(2), .guide-gp .guide .gp-compare td:nth-child(2) { width:20%; }
.guide-gp .guide .gp-compare th:nth-child(n+3), .guide-gp .guide .gp-compare td:nth-child(n+3) { width:12.8%; }
.guide-gp .guide .gp-compare tbody tr:last-child td { background:none; }
.guide-gp .guide .gp-compare tbody tr:last-child td:first-child { box-shadow:none; }
.guide-gp .guide .gp-compare tr.groupe th { text-align:left; padding:22px 16px 9px;
  font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brun); background:var(--blanc); border-bottom:1px solid var(--filet); }
.guide-gp .guide .gp-compare tr.nous td { background:var(--dore-fond); color:var(--encre); }
.guide-gp .guide .gp-compare tr.nous td:first-child { box-shadow:inset 4px 0 0 var(--champagne); }
.gp-compare .outil { display:block; font-size:16.5px; font-weight:600; color:var(--encre); line-height:1.25; }
.gp-compare .prix { display:block; font-size:16.5px; font-weight:600; color:var(--encre); line-height:1.25; }
.gp-compare small { display:block; margin-top:4px; font-size:13.5px; font-weight:400;
  line-height:1.4; color:var(--encre2); }
.gp-compare .oui, .gp-compare .non, .gp-compare .mi { display:inline-flex; align-items:flex-start;
  gap:7px; font-weight:600; font-size:15px; line-height:1.3; color:var(--encre); }
.gp-compare .oui::before, .gp-compare .non::before, .gp-compare .mi::before { content:"";
  flex:none; width:20px; height:20px; border-radius:50%; background-position:center;
  background-repeat:no-repeat; background-size:66%; }
.gp-compare .oui::before { background-color:var(--vert-fond);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.5 12.6l3.6 3.6 7.4-8' stroke='%232F6B3A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.gp-compare .non { color:var(--encre2); }
.gp-compare .non::before { background-color:#ECE8DF;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7.5 7.5l9 9M16.5 7.5l-9 9' stroke='%238A8578' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.gp-compare .mi::before { background-color:var(--ambre-fond);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 12h10' stroke='%23B0782A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.gp-compare .nd { font-size:14px; color:var(--gris); }

/* La colonne « Outil » reste collée quand le tableau défile de côté.
   `border-collapse:separate` : avec `collapse`, les filets d'une cellule
   collée ne la suivent pas. */
.guide-gp .guide table.gp-compare { border-collapse:separate; border-spacing:0; }
.guide-gp .guide .gp-compare thead th:first-child, .guide-gp .guide .gp-compare tbody td:first-child {
  position:sticky; left:0; z-index:1; }
.guide-gp .guide .gp-compare tbody td:first-child { background:var(--blanc); }
.guide-gp .guide .gp-compare tr.nous td:first-child { background:var(--dore-fond); }
.gp-compare tr.groupe th > span { position:sticky; left:16px; display:inline-block; }

/* ── texte + photo, avec une vraie capture posée dessus (comme /pros/) ── */
.gp-duo { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px); align-items:center; margin-top:clamp(20px,2.2vw,30px); }
.gp-duo .gp-etapes { grid-template-columns:minmax(0,1fr); margin-top:0; }
.gp-visuel { position:relative; border-radius:24px; overflow:hidden; aspect-ratio:4/3;
  background:var(--creux); box-shadow:0 24px 60px rgba(40,30,14,.14); }
.guide-gp .guide .gp-visuel > img { width:100%; height:100%; object-fit:cover; margin:0; border-radius:0; }
.gp-visuel .capture { position:absolute; height:var(--ch,88%); width:auto; left:var(--cl,auto);
  right:var(--cr,4%); top:var(--ct,auto); bottom:var(--cb,2%); pointer-events:none; }
.guide-gp .guide .gp-visuel .capture img { height:100%; width:auto; margin:0; border-radius:0;
  filter:drop-shadow(0 20px 34px rgba(20,17,9,.30)) drop-shadow(0 3px 10px rgba(20,17,9,.18)); }

/* ── les avis : des vraies personnes, donc des cartes ────────────── */
.gp-avis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.6vw,20px); margin-top:clamp(20px,2.2vw,30px); }
.gp-avis blockquote { margin:0; background:var(--blanc); border:1px solid var(--filet);
  border-radius:22px; padding:24px 24px 22px; display:flex; flex-direction:column; gap:16px;
  box-shadow:var(--ombre); }
.guide-gp .guide .gp-avis blockquote p { margin:0; font-size:17px; line-height:1.5; color:var(--encre); }
.gp-avis .etoiles { color:var(--ambre); font-size:15px; letter-spacing:.12em; line-height:1; }
.gp-avis footer { margin-top:auto; display:flex; align-items:center; gap:12px; }
.guide-gp .guide .gp-avis footer img { width:44px; height:44px; border-radius:50%; object-fit:cover;
  flex:none; margin:0; background:var(--creux); }
.gp-avis cite { font-style:normal; display:flex; flex-direction:column; font-size:14px;
  line-height:1.35; color:var(--gris); }
.gp-avis cite b { color:var(--encre); font-size:15.5px; }

/* ── « pour qui ce n'est pas fait » ──────────────────────────────── */
.gp-pasfait { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.6vw,20px); margin-top:clamp(20px,2.2vw,30px); }
.gp-pasfait > div { background:var(--creux); border-radius:22px; padding:24px 24px 26px;
  display:flex; flex-direction:column; gap:8px; }
.guide-gp .guide .gp-pasfait h3 { margin:0; font-size:18.5px; line-height:1.25; }
.guide-gp .guide .gp-pasfait p { margin:0; font-size:16px; line-height:1.5; }

/* ── « pour aller plus loin » : des liens qu'on a envie d'ouvrir ─── */
.gp-liens { display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.4vw,16px); margin-top:clamp(20px,2.2vw,30px); }
.gp-liens a { display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--blanc); border:1px solid var(--filet); border-radius:18px;
  padding:18px 20px; color:var(--encre); font-size:16.5px; font-weight:500; line-height:1.35;
  transition:border-color .2s, transform .25s ease; }
.gp-liens a::after { content:"→"; flex:none; color:var(--brun); font-size:19px; }
.gp-liens a:hover { color:var(--encre); border-color:var(--champagne); transform:translateY(-2px); }
.gp-liens a small { display:block; margin-top:2px; font-size:14px; font-weight:400; color:var(--gris); }

/* ── la FAQ : des tiroirs qu'on voit ─────────────────────────────── */
.guide-gp .gp-faq { border-top:0; display:flex; flex-direction:column; gap:10px; }
.guide-gp .gp-faq details { border:1px solid var(--filet); border-radius:18px;
  background:var(--blanc); padding:0 20px; transition:border-color .2s; }
.guide-gp .gp-faq details[open] { border-color:var(--champagne); }
.guide-gp .gp-faq summary { align-items:center; padding:18px 0;
  font-size:clamp(17px,1.5vw,19px); font-weight:600; }
.guide-gp .gp-faq summary::after { content:"+"; display:inline-flex; align-items:center;
  justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--creux);
  font-size:21px; font-weight:400; color:var(--encre); }
.guide-gp .gp-faq details[open] summary::after { background:var(--ambre-fond); color:var(--brun); }
.guide-gp .gp-faq details > p { margin:0 0 20px; max-width:none; font-size:16.5px;
  line-height:1.6; color:var(--texte); }
.guide-gp .gp-sources { font-size:14px; line-height:1.6; color:var(--gris); }
.guide-gp .guide .gp-sources strong { color:var(--encre2); }

/* ── le pied d'article : la dernière marche, en sombre ───────────── */
.guide-gp .guide-fin { max-width:min(1180px, 100vw - 2 * var(--pad)); background:var(--noir);
  border:0; border-radius:28px; color:var(--lin); flex-direction:column; align-items:center;
  text-align:center; gap:24px; padding:clamp(36px,5vw,76px) clamp(24px,5vw,76px); }
.guide-gp .guide-fin p { flex:none; max-width:38rem; color:rgba(246,242,233,.8); font-size:18px; }
.guide-gp .guide-fin b { display:block; margin-bottom:12px; color:#fff; font-weight:600;
  font-size:clamp(27px,3.4vw,44px); letter-spacing:-0.03em; line-height:1.08; }
.guide-gp .guide-fin-actions { justify-content:center; gap:14px 26px; }
.guide-gp .guide-fin .btn-noir { background:#FFFDF8; color:var(--noir); box-shadow:none; }
.guide-gp .guide-fin .btn-noir:hover { background:#fff; color:var(--noir); box-shadow:0 12px 30px rgba(0,0,0,.45); }
.guide-gp .guide-fin .lien-demo.sur-clair { color:var(--lin); border-bottom-color:rgba(246,242,233,.4); }
.guide-gp .guide-fin .lien-demo.sur-clair:hover { border-color:#fff; }
.guide-gp .guide-fin .lien-demo.sur-clair svg { color:var(--champagne); }

/* ── la barre d'essai collante, au téléphone (même patron que /pros/) ── */
.gp-colle { position:fixed; left:0; right:0; bottom:0; z-index:30; background:rgba(19,16,9,.97);
  border-top:1px solid rgba(201,168,118,.25);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  display:none; align-items:center; justify-content:center; gap:14px;
  transform:translateY(100%); transition:transform .35s ease; }
.gp-colle.visible { transform:none; }
.gp-colle a { background:#FFFDF8; color:#131009; border-radius:999px; padding:13px 22px;
  font-weight:600; font-size:15.5px; line-height:1; white-space:nowrap; }
.gp-colle a:hover { background:#fff; color:#131009; }
.gp-colle span { font-size:12px; line-height:1.35; color:rgba(246,242,233,.66); }

@media (max-width:900px) {
  .guide-gp .gp-offre-action { border-top-color:rgba(255,255,255,.16); }
  .gp-duo { grid-template-columns:minmax(0,1fr); }
  .gp-pasfait { grid-template-columns:minmax(0,1fr); }
  .guide-gp .gp-cartes.par-trois { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:760px) {
  .gp-colle { display:flex; }
  .gp-avis, .gp-liens { grid-template-columns:minmax(0,1fr); }
  .gp-bande .btn-noir { width:100%; }

  /* Au téléphone, le comparatif reste un tableau : on compare en lisant une
     colonne de haut en bas, ce que des fiches empilées ne permettent pas
     (essayé le 14/11 : dix fiches, 4 900 px de haut). Il défile de côté et
     la colonne « Outil » reste collée (règles plus haut). */
  .guide-gp .guide table.gp-compare { min-width:840px; font-size:14.5px; }
  .guide-gp .guide .gp-compare th:nth-child(1), .guide-gp .guide .gp-compare td:nth-child(1) { width:13.5%; }
  .guide-gp .guide .gp-compare th:nth-child(2), .guide-gp .guide .gp-compare td:nth-child(2) { width:19%; }
  .guide-gp .guide .gp-compare th:nth-child(n+3), .guide-gp .guide .gp-compare td:nth-child(n+3) { width:13.5%; }
  .guide-gp .guide .gp-compare thead th, .guide-gp .guide .gp-compare tbody td { padding:13px 11px; }
  .guide-gp .guide .gp-compare thead th { font-size:11.5px; }
  .gp-compare .outil, .gp-compare .prix { font-size:15px; }
  .gp-compare .oui, .gp-compare .non, .gp-compare .mi { font-size:14px; gap:6px; }
  .gp-compare small { font-size:12.5px; }
  /* un filet à droite de la colonne collée : on voit qu'elle recouvre le reste */
  .guide-gp .guide .gp-compare thead th:first-child, .guide-gp .guide .gp-compare tbody td:first-child {
    box-shadow:1px 0 0 var(--filet2); }
  .guide-gp .guide .gp-compare tr.nous td:first-child {
    box-shadow:inset 4px 0 0 var(--champagne), 1px 0 0 var(--filet2); }
  .guide-gp .guide figure:has(.gp-compare)::before { content:"Faites glisser le tableau  →";
    display:block; position:sticky; left:0; width:max-content; padding:11px 14px 0;
    font-size:13px; font-weight:600; color:var(--brun); }
}
@media (max-width:640px) {
  .guide-gp .gp-chiffres { gap:10px; }
  .guide-gp .gp-chiffres > div, .guide-gp .gp-chiffres > div:first-child {
    border:1px solid var(--filet); padding:18px 20px; flex-direction:row; align-items:center; gap:16px; }
  .guide-gp .gp-chiffres b { flex:none; min-width:4.2ch; font-size:34px; }
  .guide-gp .gp-chiffres span { font-size:15.5px; }
  .guide-gp .gp-cta .btn-noir, .guide-gp .gp-cta .btn-bord { width:100%; }
  .guide-gp .guide-fin { border-radius:24px; }
  .guide-gp .guide-fin .btn-noir { width:100%; }
}