/* ==========================================================================
   Flokup : pages de contenu (comparatif, comment ça marche, agences, entreprises)
   Complète site.css sans le modifier : mêmes variables de thème (clair/sombre),
   plus l'orange du logo (#ffb21e → #ff5a14) pour les illustrations.
   Règle d'or : aucune largeur fixe qui dépasse 328 px (téléphone de 360 px moins
   les marges), sinon la page défile à l'horizontale. Les tableaux défilent DANS
   leur cadre, jamais la page.
   ========================================================================== */
:root {
  --or1: #ffb21e; --or2: #ff5a14; --or: #ff8a1e;
  --degrade-or: linear-gradient(135deg, #ffb21e, #ff5a14);
  --or-doux: rgba(255, 138, 30, .13);
  /* Illustrations : l'appareil reste sombre dans les deux thèmes (comme un vrai). */
  --il-corps: #1a1e29; --il-arete: #3a4254; --il-ecran: #0f1219;
  --il-carte: #1d2230; --il-ligne: #2c3344; --il-texte: #e8eaf0; --il-doux: #8b93a1;
}
:root[data-theme="light"] {
  --or-doux: rgba(255, 122, 26, .11);
  --il-carte: #ffffff; --il-ligne: #e3e7ee; --il-texte: #14161c; --il-doux: #8b93a1;
}

/* ---------- Fil d'Ariane ---------- */
.fil-ariane { padding-top: 14px; font-size: 14px; color: var(--gris); }
.fil-ariane ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.fil-ariane li { display: inline-flex; align-items: center; gap: 8px; }
.fil-ariane li + li::before { content: '›'; color: var(--gris-clair); }
.fil-ariane a { color: var(--gris); }
.fil-ariane a:hover { color: var(--texte); }
.fil-ariane [aria-current] { color: var(--texte); font-weight: 600; }

/* ---------- Hero en deux colonnes (texte + illustration) ---------- */
.ph { position: relative; overflow: hidden; padding: 30px 0 64px; }
.ph::before { content: ''; position: absolute; width: 620px; height: 620px; border-radius: 50%; background: var(--or2); opacity: .10; filter: blur(130px); top: -280px; right: -220px; pointer-events: none; }
.ph::after { content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: var(--violet); opacity: .10; filter: blur(130px); bottom: -320px; left: -200px; pointer-events: none; }
.ph .enveloppe { position: relative; z-index: 1; }
.ph-grille { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 44px; align-items: center; margin-top: 26px; }
.ph h1 { font-size: clamp(30px, 4.4vw, 48px); }
.ph .sous { font-size: 19px; color: var(--gris); margin: 18px 0 26px; max-width: 580px; }
.ph-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ph-note { margin-top: 14px; font-size: 14px; color: var(--gris-clair); }
.ph-illu svg, .illu svg { display: block; width: 100%; height: auto; }
.grad-or { background: var(--degrade-or); -webkit-background-clip: text; background-clip: text; color: transparent; }
.etiquette-or { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--or); background: var(--or-doux); padding: 6px 14px; border-radius: 999px; }
:root[data-theme="light"] .etiquette-or { color: #c2410c; }

/* ---------- Classes de couleur des illustrations SVG ---------- */
.il-corps { fill: var(--il-corps); stroke: var(--il-arete); }
.il-ecran { fill: var(--il-ecran); }
.il-carte { fill: var(--il-carte); stroke: var(--il-ligne); }
.il-ligne { fill: var(--il-ligne); }
.il-trait { stroke: var(--il-ligne); fill: none; }
.il-texte { fill: var(--il-texte); }
.il-doux { fill: var(--il-doux); }
.il-or { fill: var(--or); }
.il-or-trait { stroke: var(--or); fill: none; }
.il-sol { fill: var(--or2); opacity: .16; }
.il-gris-ecran { fill: #2a3142; }
.illu text, .ph-illu text { font-family: var(--police); }

/* ---------- Sections de contenu ---------- */
.pg-intro { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.pg-intro h2 { margin-bottom: 12px; }
.pg-intro p { color: var(--gris); font-size: 17.5px; }
.pg-texte { max-width: 820px; margin: 0 auto; }
.pg-texte h2 { margin: 0 0 14px; }
.pg-texte h3 { margin: 26px 0 8px; }
.pg-texte p { margin: 12px 0; font-size: 16.5px; }
.pg-texte p, .pg-texte li { color: var(--texte); }
.pg-texte ul { margin: 12px 0; padding-left: 22px; }
.pg-texte li { margin: 7px 0; font-size: 16px; }
.pg-texte strong { font-weight: 700; }

/* Cartes à icône (cas d'usage, critères) : grille qui se replie seule. */
.pg-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.pg-cartes.deux { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* Six cartes : 3 + 3 plutôt que 4 + 2 (une ligne orpheline fait négligé). */
.pg-cartes.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-cartes .carte { display: flex; flex-direction: column; }
.pg-cartes .carte p + p { margin-top: 10px; }
.pg-cartes .carte ul { margin: 10px 0 0; padding-left: 18px; color: var(--gris); font-size: 14.5px; }
.pg-cartes .carte li { margin: 4px 0; }
.ico-or { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--or-doux); color: var(--or); margin-bottom: 14px; flex-shrink: 0; }
:root[data-theme="light"] .ico-or { color: #ea580c; }
.ico-or svg { width: 24px; height: 24px; }
.carte .carte-lien { margin-top: auto; padding-top: 14px; font-weight: 650; font-size: 14.5px; }

/* Bloc « image + texte » alterné. */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.duo + .duo { margin-top: 64px; }
.duo.inverse .duo-illu { order: 2; }
.duo-illu { max-width: 520px; width: 100%; justify-self: center; }
.duo-txt h2, .duo-txt h3 { margin-bottom: 10px; }
.duo-txt p { color: var(--gris); font-size: 16.5px; margin: 10px 0; }
.duo-txt ul { margin: 12px 0 0; padding-left: 20px; color: var(--gris); }
.duo-txt li { margin: 6px 0; }
.duo-txt li strong, .duo-txt p strong { color: var(--texte); }

/* ---------- Tableau comparatif : défile dans son cadre, 1re colonne collée ---------- */
.tab-defile { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface); }
.tab-cmp { width: 100%; min-width: 960px; border-collapse: separate; border-spacing: 0; font-size: 14.5px; line-height: 1.45; }
.tab-cmp th, .tab-cmp td { padding: 13px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--bord); }
.tab-cmp tbody tr:last-child th, .tab-cmp tbody tr:last-child td { border-bottom: 0; }
.tab-cmp thead th { background: var(--fond-doux); font-weight: 750; font-size: 14.5px; white-space: nowrap; }
.tab-cmp tbody th { font-weight: 650; }
/* Colonne des critères collée : sinon, en faisant défiler, on lit « Oui » sans
   savoir à quoi il se rapporte. Fond opaque obligatoire (le texte passe dessous). */
.tab-cmp th:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); width: 190px; min-width: 190px; box-shadow: 1px 0 0 var(--bord); }
.tab-cmp thead th:first-child { background: var(--fond-doux); }
.tab-cmp .col-flokup { background: var(--or-doux); }
.tab-cmp thead .col-flokup { color: var(--or); }
:root[data-theme="light"] .tab-cmp thead .col-flokup { color: #c2410c; }
.tab-cmp .oui { color: var(--ok); font-weight: 700; }
.tab-cmp .ni { color: var(--gris-clair); font-style: italic; }
.tab-cmp small { display: block; color: var(--gris); font-size: 12.5px; margin-top: 3px; font-style: normal; font-weight: 400; }
.tab-aide { font-size: 13.5px; color: var(--gris); margin-top: 12px; }
.tab-indice { display: none; font-size: 13px; color: var(--gris); margin-bottom: 8px; }

/* Sources et notes de bas de tableau. */
.sources { font-size: 14px; color: var(--gris); margin-top: 22px; }
.sources h3 { font-size: 15px; margin-bottom: 6px; color: var(--texte); }
.sources ol { padding-left: 20px; }
.sources li { margin: 4px 0; overflow-wrap: anywhere; }

/* Points forts / limites (ton honnête du comparatif). */
.pour-contre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 980px; margin: 0 auto; }
.pour-contre .carte h3 { font-size: 18px; }
.pour-contre .carte p { margin-top: 6px; }
.pour-contre .mieux { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ok); margin-bottom: 6px; }

/* ---------- Parcours (schéma SVG) : horizontal sur grand écran, vertical sur téléphone ---------- */
.parcours { max-width: 1040px; margin: 0 auto; }
.parcours .vertical { display: none; max-width: 360px; margin: 0 auto; }

/* ---------- Étapes détaillées (comment ça marche) ---------- */
.pas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 34px 0; border-top: 1px solid var(--bord); }
.pas:first-of-type { border-top: 0; }
.pas.inverse .pas-txt { order: 2; }
.pas-illu { max-width: 460px; width: 100%; justify-self: center; }
.pas-num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--degrade-or); color: #fff; font-weight: 800; font-size: 18px; margin-bottom: 12px; }
.pas-txt h2 { font-size: clamp(22px, 3vw, 28px); margin-bottom: 10px; }
.pas-txt p { color: var(--gris); font-size: 16.5px; margin: 10px 0; }
.pas-txt ul { margin: 10px 0 0; padding-left: 20px; color: var(--gris); }
.pas-txt li { margin: 5px 0; }
.pas-txt strong { color: var(--texte); }

/* Encadré de réassurance (confidentialité). */
.encadre-or { background: var(--or-doux); border-left: 3px solid var(--or); border-radius: 0 10px 10px 0; padding: 16px 18px; margin: 18px 0; }
.encadre-or p { margin: 0; color: var(--texte); }

/* Liste « pour qui choisir quoi » : une ligne par profil. */
.choix { display: grid; gap: 14px; max-width: 900px; margin: 0 auto; }
.choix-ligne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 18px; align-items: start; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 18px 20px; }
.choix-ligne h3 { font-size: 17px; }
.choix-ligne p { color: var(--gris); font-size: 15px; }
.choix-ligne p strong { color: var(--texte); }

/* Liens vers les autres pages (maillage interne). */
.liens-pages { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.liens-pages a { display: block; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px 18px; color: var(--texte); transition: border-color .15s, transform .15s; }
.liens-pages a:hover { text-decoration: none; border-color: var(--or); transform: translateY(-2px); }
.liens-pages strong { display: block; font-size: 16px; margin-bottom: 4px; }
.liens-pages span { display: block; font-size: 14px; color: var(--gris); }

/* Offre mise en avant (agences / entreprises). */
.offre-encart { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 30px; align-items: center; background: var(--surface); border: 1px solid var(--bord); border-radius: 20px; padding: 32px; }
.offre-encart h2 { margin-bottom: 10px; }
.offre-encart p { color: var(--gris); }
.offre-encart ul { list-style: none; padding: 0; margin: 0; }
.offre-encart li { position: relative; padding-left: 26px; margin: 9px 0; font-size: 15px; }
.offre-encart li::before { content: '✓'; position: absolute; left: 0; color: var(--or); font-weight: 800; }
.offre-prix { font-size: 15px; color: var(--gris); margin-top: 12px; }
.offre-prix strong { color: var(--texte); font-size: 22px; }
.offre-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

/* FAQ de page : même composant que la FAQ du site, largeur de lecture. */
.pg-faq { max-width: 820px; margin: 0 auto; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .ph-grille, .duo, .pas, .offre-encart { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ph-illu { max-width: 480px; width: 100%; justify-self: center; }
  .duo.inverse .duo-illu, .pas.inverse .pas-txt { order: 0; }
  .duo-illu, .pas-illu { max-width: 440px; }
  .pg-cartes.trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ph { padding: 18px 0 44px; }
  .ph .sous { font-size: 17px; }
  .parcours .horizontal { display: none; }
  .parcours .vertical { display: block; }
  .choix-ligne { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pg-cartes.trois, .pour-contre { grid-template-columns: minmax(0, 1fr); }
  .offre-encart { padding: 24px 18px; }
  .tab-indice { display: block; }
  .tab-cmp { font-size: 13.5px; min-width: 860px; }
  .tab-cmp th, .tab-cmp td { padding: 11px 10px; }
  .tab-cmp th:first-child { width: 128px; min-width: 128px; }
}
@media (max-width: 440px) {
  /* Boutons longs (surtout en anglais) : pleine largeur, retour à la ligne permis. */
  .ph-actions .btn, .offre-actions .btn { width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
  .cta-bloc .btn { white-space: normal; line-height: 1.25; }
}