:root{
  --brand-700:#1E40AF; --brand-600:#2563EB; --brand-500:#3B82F6; --brand-50:#EAF1FE;
  --violet-500:#6366F1; --violet-50:#EEF0FE;
  --grad:linear-gradient(135deg,#3B82F6 0%,#6366F1 100%);
  --coral:#F87C70; --teal:#2FA98E;
  --bg:#FFFFFF; --bg-soft:#F6F8FA; --surface:#FFFFFF;
  --border:#E7EAEF; --border-strong:#D4D9E0;
  --ink:#0F172A; --ink-muted:#475569; --ink-subtle:#8A93A0;
  --success:#10B981; --warning:#F59E0B; --danger:#F1564F;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;
  --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  /* Hauteur REELLE de la barre collante : 68px de contenu + 1px de bordure.
     Sert a la fois a .nav, au decalage des en-tetes de tableau collants et
     au plafond du panneau mobile. Une seule source, pas trois constantes. */
  --nav-h:69px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
/* 1280px : les proses longues restent plafonnees independamment (.legal-doc 820,
   .article-layout 1000, + les max-width inline des templates), donc seuls les
   grilles et les cartes gagnent de la place. */
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--s5)}
a{color:inherit;text-decoration:none}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-600);background:var(--brand-50);padding:6px 12px;border-radius:var(--r-pill)}
.eyebrows{display:flex;flex-wrap:wrap;gap:8px}
/* Hero de l'accueil : une couleur par cible, le titre de la cible active en prend la teinte
   (assets/js/hero-personas.js). Couleurs de texte >= 4,5:1 sur leur fond pale. */
.persona{--p:var(--brand-700);--p-bg:var(--brand-50);font-family:inherit;border:1px solid transparent;cursor:pointer;color:var(--p);background:var(--p-bg);position:relative;overflow:hidden;opacity:.6;transition:opacity .2s,transform .2s,box-shadow .2s,background .2s,color .2s}
.persona[data-persona=proprietaire]{--p:#0F7B63;--p-bg:#E3F4EF}
.persona[data-persona=family-office]{--p:#B45309;--p-bg:#FDF1DD}
.persona:hover{opacity:1;transform:translateY(-1px);border-color:var(--p)}
.persona:focus-visible{outline:2px solid var(--p);outline-offset:2px;opacity:1}
.persona[aria-pressed=true]{opacity:1;background:var(--p);color:#fff;box-shadow:0 6px 16px -8px var(--p)}
.hero h1[data-persona-actif=agence] .persona-titre{color:var(--brand-700)}
.hero h1[data-persona-actif=proprietaire] .persona-titre{color:#0F7B63}
.hero h1[data-persona-actif=family-office] .persona-titre{color:#B45309}
.persona-titre .mot{display:inline-block;transition:transform .38s cubic-bezier(.2,.7,.2,1),opacity .38s}
.persona-titre.sortie .mot{transform:translateY(.45em);opacity:0}
.persona-titre.entree .mot{transform:translateY(-.45em);opacity:0;transition:none}
.persona-sous-titre{transition:opacity .35s,transform .35s}
.persona-sous-titre.sortie{opacity:0;transform:translateY(6px)}
@media (prefers-reduced-motion:reduce){.persona,.persona-titre .mot,.persona-sous-titre{transition:none}}
/* Pastille de forfait posee a cote de l'eyebrow : volontairement neutre, pour se
   lire comme une precision et non comme une seconde categorie. */
.tier-tag{display:inline-block;margin-left:8px;font-size:12px;font-weight:600;color:var(--ink-muted);background:var(--surface);border:1px solid var(--border);padding:5px 12px;border-radius:var(--r-pill);vertical-align:middle}
.tier-tag--sm{margin-left:6px;font-size:11px;padding:2px 8px}
.sec-head{text-align:center;max-width:780px;margin:0 auto var(--s7)}
.sec-head h2{font-size:34px;font-weight:800;letter-spacing:-.025em;line-height:1.1;margin:var(--s3) 0}
.sec-head p{color:var(--ink-muted);font-size:17px}

/* Buttons */
.btn{font:inherit;font-weight:600;border-radius:var(--r-pill);border:1.5px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:13px 24px;font-size:15px;transition:.15s}
.btn-primary{background:var(--brand-600);color:#fff}
.btn-primary:hover{background:var(--brand-700)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--border-strong)}
.btn-outline:hover{border-color:var(--ink);background:var(--bg-soft)}
.btn-link{background:none;color:var(--brand-600);padding:13px 6px}
.btn-link:hover{color:var(--brand-500)}
.btn-lg{padding:16px 30px;font-size:17px}

/* Header */
header{position:relative;z-index:50}
.mainbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
/* Trois colonnes : logo a gauche, menu au centre, actions a droite.
   Les deux colonnes laterales sont en 1fr afin que le menu soit centre sur la
   PAGE et pas sur la place qui reste : avec un simple space-between il serait
   decale, le bloc d'actions etant bien plus large que le logo. */
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:calc(var(--nav-h) - 1px);gap:clamp(16px,1.6vw,24px)}
/* grid-column EXPLICITE, sur les 3 items. Sans ca, le placement automatique
   de CSS Grid saute les items display:none : sous 1080px, <nav> (display:none)
   ne reservait plus sa colonne, et .nav-right atterrissait dans la colonne
   du MILIEU au lieu de la colonne de droite -- justify-self:end le collait
   alors au bord droit de cette colonne du milieu, 70 a 90px avant le bord
   reel de la barre. Mesure le 21/08 : le burger s'arretait a x=300 sur un
   viewport de 393px, au lieu de ~369. */
/* min-width EXPLICITE, mesure : sans lui, la piste 1fr de la grille se
   reduit a ~58px sous 1080px (un cas limite du calcul intrinseque de CSS
   Grid quand max-width:100% figure sur l element remplace) au lieu des
   ~79px que le logo demande a hauteur fixe (30px x ratio 969/367) -- la
   hauteur, elle, reste figee, donc le manque de largeur ecrasait le logo
   (ratio rendu mesure a 1.94 au lieu de 2.64). 90px = marge de securite. */
.nav>.brand{grid-column:1;justify-self:start;min-width:90px}
/* Palier etroit du mode desktop (1081-1150px) : le menu complet et le
   libelle "Se connecter" reapparaissent au meme seuil que le burger
   disparait, et c'etait juste trop juste a la frontiere. */
@media(max-width:1150px){
  .nav-actions{padding-left:14px}
  .nav-right{gap:12px}
}
.nav>nav{grid-column:2}
.nav>nav{justify-self:center}
.nav-right{grid-column:3;justify-self:end}
/* Barre unique : menu + connexion + langue + CTA. Les gaps sont fluides pour
   absorber la reduction de largeur sans casser la ligne. */
.nav-right{display:flex;align-items:center;gap:clamp(16px,1.6vw,22px)}
/* aspect-ratio EXPLICITE : les attributs HTML width/height de <img> se
   mappent en CSS de faible priorite (voir le correctif du logo du pied de
   page) ; le declarer ici aussi retire toute ambiguite, meme si ce point
   precis fonctionnait deja via width:auto. */
.nav img{height:34px;width:auto;max-width:100%;aspect-ratio:969/367;display:block}
@media(max-width:1080px){.nav img{height:30px}}
.nav nav{display:flex;gap:clamp(14px,1.7vw,22px)}
.nav nav a{font-size:14px;font-weight:500;color:var(--ink-muted);white-space:nowrap}
.nav nav a:hover{color:var(--ink)}
.nav-actions{display:flex;align-items:center;gap:14px;padding-left:20px;border-left:1px solid var(--border)}
.nav-actions a.login{font-size:13px;font-weight:500;color:var(--ink-muted);white-space:nowrap}
/* Meme motif que .cta-long/.cta-short : le libelle complet au-dessus du
   seuil, une icone carree en dessous. Avant, .login etait purement masque
   sous 1080px -- la connexion devenait injoignable sans ouvrir le panneau. */
/* display:none puis display:grid dans la MEME regle : la seconde valeur
   gagnait toujours (dernier declarant l'emporte a specificite egale), donc
   l'icone restait visible en permanence -- y compris au-dela de 1080px, ou
   elle aurait du s'effacer au profit du libelle texte. place-items:center
   ne s'active qu'une fois display:grid pose par la media query. */
.login-icon{display:none;flex:none;width:44px;height:44px;place-items:center;color:var(--ink);border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.login-icon:hover{border-color:var(--brand-600);color:var(--brand-700)}
.nav-actions .lang-switch summary{font-size:13px}
.nav .btn.nav-cta{padding:12px 20px;font-size:14px;white-space:nowrap;min-height:44px}
/* UN SEUL palier. Avant, trois seuils empiles (1080/1010/860) faisaient
   disparaitre les elements un a un sans remplacement : sous 860px il ne
   restait aucun lien de navigation, et « Se connecter » s'evaporait des
   1080px. Desormais : au-dessus de 1080px la barre complete, en dessous le
   panneau mobile, qui contient TOUT (menu, sous-menu, connexion, demo). */
.nav-mobile{display:none}
@media(max-width:1080px){
  .nav nav{display:none}
  .nav-actions a.login{display:none}
  .login-icon{display:grid}
  .nav-mobile{display:block}
}
/* Le padding compact du CTA court suit desormais le meme seuil que sa
   visibilite (1080px, voir plus haut) : sinon, juste au-dessus de 430px, le
   texte court "Demo" heritait quand meme du padding large (20px) et du
   font-size normal (14px) de la forme longue, ce qui debordait encore de
   quelques pixels a 431-440px. */
@media(max-width:1080px){.nav .btn.nav-cta{padding:12px 11px;font-size:13px}}
@media(max-width:430px){
  .nav{gap:10px}
  .nav-actions{padding-left:0;border-left:0;gap:8px}
  /* Sous ce seuil, chaque px compte : le plancher du logo (min-width:90px,
     necessaire pour ne plus l'ecraser -- voir .nav>.brand) reprend l'espace
     que cette rangee utilisait. Resserrer les espacements plutot que
     rogner les cibles tactiles (toutes restent a 44px). */
  .nav-right{gap:8px}
  .nav{gap:8px}
}

/* Libelle du CTA : complet des qu'il y a la place, court sur telephone.
   A 360px, « Demander une demo » faisait 183px et poussait la barre hors
   de l'ecran de 8px ; le masquer aurait coute l'action de conversion
   principale sur une barre collante, on le raccourcit donc. */
.cta-short{display:none}
/* Le seuil suit celui du burger (1080px), pas celui du resserrement des
   espacements (430px) : la barre reste en mode compact (langue + connexion +
   demo + burger) sur TOUTE la plage 360-1080px, pas seulement sous 430. Avec
   le seuil precedent, le libelle long revenait de 431 a ~600px et debordait
   -- signale via une capture a 480px (Content 542px, Iframe 480px). */
@media(max-width:1080px){.cta-long{display:none}.cta-short{display:inline}}

/* Panneau mobile. Ancre sur .mainbar (collante, donc contexte de
   positionnement) et non sur le bouton, pour occuper toute la largeur. */
.nav-mobile>summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--ink);transition:.15s}
.nav-mobile>summary::-webkit-details-marker{display:none}
.nav-mobile>summary:hover{border-color:var(--brand-600);color:var(--brand-700)}
.nav-mobile[open]>summary{border-color:var(--brand-600);color:var(--brand-700);background:var(--brand-50)}
.nav-panel{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);box-shadow:0 26px 50px -30px rgba(15,23,42,.40);padding:var(--s5) var(--s5) var(--s6);z-index:60;
  max-height:calc(100vh - var(--nav-h));max-height:calc(100dvh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain}
.nav-panel>.np-item{display:block;font-size:16px;font-weight:600;color:var(--ink);padding:12px 0;border-bottom:1px solid var(--border)}
.nav-panel>.np-item:hover{color:var(--brand-600)}

/* Ligne repliable : le titre A NAVIGUE (l'appui est intercepte par le lien),
   le chevron BASCULE (l'appui tombe sur le <summary>, pas sur un descendant
   interactif, donc le comportement natif de <details> s'applique). Verifie
   en Chromium reel : clic sur le texte -> navigation ; clic sur le chevron ->
   ouverture sans navigation ; au clavier, Tab s'arrete d'abord sur la ligne
   (Entree = bascule), puis sur le lien (Entree = navigation). Repliee par
   defaut : c'est ce qui rend le panneau lisible sans defilement. */
.np-sub{border-bottom:1px solid var(--border)}
.np-sub>summary{display:flex;align-items:center;list-style:none;cursor:pointer}
.np-sub>summary::-webkit-details-marker{display:none}
.np-sub>summary>.np-item{flex:1;padding:12px 0;font-size:16px;font-weight:600;color:var(--ink)}
.np-sub>summary>.np-item:hover{color:var(--brand-600)}
.np-sub>summary>.np-chev{flex:none;display:grid;place-items:center;width:44px;height:44px;color:var(--ink-subtle)}
.np-sub>summary>.np-chev svg{transition:transform .15s}
.np-sub[open]>summary>.np-chev svg{transform:rotate(180deg)}
/* display CONDITIONNE a [open] -- indispensable. Poser display:grid sans
   condition court-circuite le mecanisme natif de <details> qui masque ses
   enfants (hors <summary>) quand il est ferme : le contenu restait visible
   en permanence, le panneau ne se repliait jamais vraiment. */
.np-groups{display:none;padding-bottom:var(--s2)}
.np-sub[open]>.np-groups{display:grid}

.np-group{display:grid;gap:2px;padding:var(--s3) 0 var(--s4) var(--s3);border-bottom:1px solid var(--border)}
.np-group .np-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-subtle);padding:6px 0}
.np-group a{display:flex;align-items:center;min-height:44px;font-size:15px;color:var(--ink-muted);padding:6px 0}
.np-group a:hover{color:var(--brand-600)}
.np-groups>.np-group:last-child{border-bottom:0}
.np-foot{display:grid;gap:var(--s3);margin-top:var(--s5)}
.np-login{font-size:16px;font-weight:600;color:var(--ink);padding:12px 0}
.np-cta{justify-content:center;width:100%}

/* Hero */
.hero{position:relative;overflow:hidden;padding:var(--s9) 0 var(--s8)}
/* Accueil uniquement : le hero occupe la hauteur d'ecran restante sous la barre
   collante, contenu centre verticalement. Classe dediee et NON `.hero` tout
   court : 15 autres gabarits partagent cette classe (tarifs, contact,
   fonctionnalites...) avec leur propre padding en ligne, et doivent rester
   courts. Les y basculer en pleine hauteur serait une regression silencieuse.
   - flex-direction:column : en `row`, `.wrap` se reduirait a la largeur de son
     contenu et perdrait son max-width centre ;
   - min-height et non height : si le contenu depasse (fenetre courte, ou titre
     NL plus long de 20 caracteres), la section grandit au lieu de rogner ;
   - `svh` = plus petite hauteur de fenetre, barre d'URL mobile deployee : le
     hero ne sautera pas au premier defilement. La ligne `vh` qui precede sert
     de repli aux navigateurs qui ignorent `svh` ;
   - le padding n'est plus qu'un plancher : il ne joue que si la fenetre est
     trop courte pour le contenu ;
   - 92 % et non 100 % de la place disponible : le haut de la section suivante
     affleure sous le hero. Un hero pile a 100 % ne laisse rien depasser et se
     lit comme une page entiere, sans indice qu'il y a de la matiere plus bas.
     Ces 8 % suffisent a signaler le defilement sans amputer le hero. */
.hero-full{display:flex;flex-direction:column;justify-content:center;min-height:calc((100vh - var(--nav-h)) * .92);min-height:calc((100svh - var(--nav-h)) * .92);padding:var(--s8) 0}
.hero::before{content:"";position:absolute;top:-20%;right:-15%;width:55%;height:130%;background:radial-gradient(circle,rgba(99,102,241,.12),transparent 62%);z-index:0}
.hero::after{content:"";position:absolute;bottom:-30%;left:-15%;width:50%;height:120%;background:radial-gradient(circle,rgba(59,130,246,.10),transparent 62%);z-index:0}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.27fr .73fr;gap:var(--s7);align-items:center}
/* 48px + colonne ~750px : le titre tient sur 2 lignes en FR et EN (le NL, plus
   long de 20 caracteres, en demanderait 890 et etoufferait l'illustration). */
.hero h1{font-size:48px;font-weight:800;letter-spacing:-.03em;line-height:1.06;margin:var(--s4) 0}
.hero .sub{font-size:19px;color:var(--ink-muted);max-width:52ch}
.hero .cta{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-top:var(--s6)}
.hero .hero-badges{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-top:var(--s5)}
.hero .hbadge{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);font-size:12px;color:var(--ink-muted);font-weight:500}
.hero .hbadge img{height:26px;width:auto;display:block}
@media(max-width:920px){.hero .wrap{grid-template-columns:1fr;gap:var(--s7)}.hero h1{font-size:40px}}
/* 40px tenaient sur 4 lignes a 393px : un pave, pas un titre. */
@media(max-width:520px){.hero h1{font-size:34px}.hero .sub{font-size:17px}}

/* Hero visual */
.viz{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:0 2px 4px rgba(15,23,42,.04),0 30px 60px -34px rgba(15,23,42,.30);padding:var(--s5)}
.viz .vhead{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--ink-subtle);padding-bottom:var(--s3);border-bottom:1px solid var(--border);margin-bottom:var(--s4)}
.viz .vhead .lab{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink)}
.chan{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:10px;background:var(--bg-soft)}
.chan .ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:14px;flex:none;color:#fff}
.chan .t{font-size:13px;font-weight:600}
.chan .m{font-size:11px;color:var(--ink-subtle)}
.chan .pill{margin-left:auto;font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--r-pill)}
.pri-h{background:#FDEAE9;color:#C0322F}.pri-m{background:#FBF0DD;color:#B47214}.pri-ok{background:#E6F7F0;color:#0B7A56}

/* Generic section */
section.block{padding:var(--s9) 0;border-top:1px solid var(--border)}
.cards{display:grid;gap:var(--s4)}
.c3{grid-template-columns:repeat(3,1fr)}
.c4{grid-template-columns:repeat(4,1fr)}
.c2{grid-template-columns:repeat(2,1fr)}
@media(max-width:920px){.c3,.c4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.c3,.c4,.c2{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5);box-shadow:0 1px 2px rgba(15,23,42,.04),0 14px 28px -24px rgba(15,23,42,.20)}
.card .icon{width:42px;height:42px;border-radius:var(--r-md);display:grid;place-items:center;font-size:19px;margin-bottom:var(--s3)}
.card h3{font-size:17px;font-weight:700;margin-bottom:6px}
.card p{font-size:14px;color:var(--ink-muted)}

/* Pain quotes */
.pain{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.04),0 14px 28px -24px rgba(15,23,42,.20)}
.pain-img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.pain-body{padding:var(--s5)}
.pain .q{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:6px}
.pain p{font-size:14px;color:var(--ink-muted)}
.card-img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-md);margin-bottom:var(--s4);display:block}
.proof-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;display:block;margin:0 auto var(--s4);border:3px solid rgba(255,255,255,.18)}

/* Cost band */
.cost{background:var(--bg-soft);border-radius:var(--r-xl);padding:var(--s8) var(--s6)}
/* 32px de padding de chaque cote ne laissaient que 248px de contenu utile a
   360px de large. */
@media(max-width:520px){.cost{padding:var(--s7) var(--s4)}}
.cost-img{width:100%;height:210px;object-fit:cover;object-position:center 40%;border-radius:var(--r-lg);margin-bottom:var(--s6);display:block}
.cost .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);margin-top:var(--s7)}
@media(max-width:740px){.cost .stats{grid-template-columns:1fr;gap:var(--s7)}}
.cost .stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s6) var(--s5);display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 1px 2px rgba(15,23,42,.04),0 16px 30px -24px rgba(15,23,42,.18)}
.stat-ic{width:50px;height:50px;border-radius:50%;background:#FDECEB;color:var(--danger);display:grid;place-items:center;margin-bottom:var(--s3)}
.stat-ic svg{width:24px;height:24px}
.cost .stat .num{font-size:44px;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--danger)}
.cost .stat .unit{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);margin-top:6px}
.cost .stat .cap{font-size:14px;color:var(--ink-muted);margin-top:10px;max-width:30ch}
.cost .lever{margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--border);font-size:18px;color:var(--ink)}
.cost .lever b{color:var(--brand-700)}

/* Steps */
.steps{display:grid;gap:var(--s5);counter-reset:st}
.stepi{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:start}
.stepi .n{width:40px;height:40px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.stepi h3{font-size:19px;font-weight:700}
.stepi p{font-size:15px;color:var(--ink-muted);margin-top:4px}
/* How it works - illustrated steps */
.how{display:grid;gap:var(--s9)}
.how-step{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:center}
.how-step.rev .how-text{order:2}
.how-step.rev .how-mock{order:1}
@media(max-width:880px){.how-step{grid-template-columns:1fr;gap:var(--s5)}.how-step.rev .how-text,.how-step.rev .how-mock{order:0}}
.how-num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;font-weight:700;font-size:15px;margin-bottom:var(--s3)}
.how-text h3{font-size:23px;font-weight:700;letter-spacing:-.01em}
.how-text p{color:var(--ink-muted);font-size:15px;margin-top:8px;max-width:44ch}
.mock{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:0 2px 4px rgba(15,23,42,.04),0 30px 60px -36px rgba(15,23,42,.32);padding:var(--s5)}
.mock-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--s3);border-bottom:1px solid var(--border);margin-bottom:var(--s4)}
.mock-head .lab{display:flex;align-items:center;gap:7px;font-weight:700;font-size:13px;color:var(--ink)}
.mock-head .dia{color:var(--brand-600)}
.mock-head .st{font-size:11px;color:var(--ink-subtle)}
.mrow{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:8px;background:var(--bg-soft)}
.mrow:last-child{margin-bottom:0}
.mrow .ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:13px;color:#fff;flex:none;font-weight:700}
.mrow .t{font-size:13px;font-weight:600;color:var(--ink)}
.mrow .m{font-size:11px;color:var(--ink-subtle)}
.mrow .pill{margin-left:auto;font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--r-pill)}
.mrow .star{margin-left:auto;font-size:12px;font-weight:700;color:#B47214;white-space:nowrap}
.mtag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:var(--r-pill);background:var(--brand-50);color:var(--brand-700);margin-left:6px}
.mq{font-size:14px;font-style:italic;color:var(--ink);background:var(--bg-soft);border-left:3px solid var(--brand-500);border-radius:6px;padding:10px 12px;margin-bottom:var(--s3)}
.mfields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:var(--s3)}
.mfields>div{border:1px solid var(--border);border-radius:var(--r-md);padding:8px 11px}
.mfields .k{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-subtle)}
.mfields b{font-size:13px;color:var(--ink)}
.mline{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;border-bottom:1px dashed var(--border)}
.mline.tot{border-bottom:0;font-weight:700;color:var(--ink)}
.mline .lbl{color:var(--ink-muted)}
.mbtns{display:flex;gap:8px;margin-top:var(--s4)}
.mbtn{flex:1;text-align:center;font-size:12px;font-weight:600;padding:9px;border-radius:var(--r-md)}
.mbtn.ghost{border:1px solid var(--border-strong);color:var(--ink-muted)}
.mbtn.primary{background:var(--brand-600);color:#fff}
.mok{display:flex;align-items:center;gap:8px;font-size:12px;color:#0B7A56;font-weight:600;margin-top:var(--s3)}
.mfoot{font-size:11px;color:var(--ink-subtle);margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--border)}
.mcap{text-align:center;font-size:11px;color:var(--ink-subtle);margin:8px 0}
/* Pourquoi - differentiator callout */
.vs-call{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s4);font-size:13px;font-weight:600;color:var(--brand-700);background:var(--brand-50);border:1px solid #CBDCFB;border-radius:var(--r-pill);padding:7px 14px}
.vs-call::before{content:"vs";font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--brand-600);border-radius:var(--r-pill);padding:2px 7px}
/* phone mock */
.phone{max-width:300px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:30px;box-shadow:0 2px 4px rgba(15,23,42,.04),0 30px 60px -36px rgba(15,23,42,.32);padding:14px}
.phone-notch{width:42%;height:6px;border-radius:var(--r-pill);background:var(--border-strong);margin:2px auto 14px}
.phone .ph-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--ink-subtle);margin-bottom:12px}
.phone .ph-head .who{font-weight:700;color:var(--ink);font-size:13px}
.phone .ptask{border:1px solid var(--border);border-radius:var(--r-md);padding:12px;background:var(--bg-soft);margin-bottom:12px}
.phone .ptask .tt{font-size:13px;font-weight:700;color:var(--ink)}
.phone .ptask .mt{font-size:11px;color:var(--ink-subtle);margin-top:2px}
.phone .pbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.phone .pbtn{text-align:center;font-size:12px;font-weight:600;padding:10px;border-radius:var(--r-md)}
.phone .pbtn.primary{background:var(--brand-600);color:#fff}
.phone .pbtn.ghost{border:1px solid var(--border-strong);color:var(--ink-muted)}
.phone .pphoto{margin-top:8px;text-align:center;font-size:12px;font-weight:600;color:#0B7A56;padding:9px;border:1px dashed #9FD3C4;border-radius:var(--r-md);background:#EAF7F2}
/* portals mock */
.ptabs{display:flex;gap:6px;margin-bottom:var(--s4);flex-wrap:wrap}
.ptab{font-size:11px;font-weight:600;padding:6px 11px;border-radius:var(--r-pill);background:var(--bg-soft);border:1px solid var(--border);color:var(--ink-muted)}
.ptab.on{background:var(--brand-50);border-color:var(--brand-600);color:var(--brand-700)}
.psync{display:flex;align-items:center;gap:8px;font-size:11px;color:#0B7A56;font-weight:600;margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--border)}
/* et aussi grid */
.also-head{text-align:center;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-subtle);margin:var(--s9) 0 var(--s5)}
.also{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
@media(max-width:760px){.also{grid-template-columns:1fr}}
.also .card h3{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:6px}
.also .card p{font-size:14px;color:var(--ink-muted)}
.also .card p a,.cards .card p a{color:var(--brand-600);font-weight:600}
.banklogos{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.banklogos .chip{width:84px;height:38px;border:1px solid var(--border);border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;padding:7px;overflow:hidden}
.banklogos .chip img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.banklogos .chip.more{font-size:20px;font-weight:800;color:var(--ink-subtle);letter-spacing:2px;background:var(--bg-soft)}
.c21logo{height:48px;width:auto;display:block;border:1px solid var(--border);border-radius:10px;background:#fff;padding:6px 12px}
/* proof bar under hero */
.proofbar{background:var(--bg-soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.proofbar .pb{display:flex;align-items:center;justify-content:center;gap:var(--s4) var(--s5);flex-wrap:wrap;padding:var(--s5) var(--s5);text-align:center}
.proofbar .txt{font-size:14px;color:var(--ink-muted);max-width:48ch}
.proofbar .c21{display:inline-flex;align-items:center;gap:9px;font-weight:800;letter-spacing:.04em;color:var(--ink);font-size:15px}
.proofbar .c21 .sq{background:#0F172A;color:#fff;font-size:11px;font-weight:800;padding:4px 8px;border-radius:5px;letter-spacing:.06em}
/* reassurance band */
.reassure{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s6);background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s7) var(--s6)}
@media(max-width:680px){.reassure{grid-template-columns:1fr;gap:var(--s5)}}
.reassure .ri{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.reassure .logobox{height:54px;min-width:120px;display:grid;place-items:center;padding:7px 14px;background:#fff;border:1px solid var(--border);border-radius:var(--r-md)}
.reassure .logobox img{max-height:38px;max-width:150px;object-fit:contain;display:block}
.reassure .ri b{font-size:15px;color:var(--ink)}
.reassure .ri span{font-size:12px;color:var(--ink-muted)}

/* USP feature row with check */
.usp h3{display:flex;align-items:center;gap:10px}
.tick{width:22px;height:22px;border-radius:50%;background:var(--brand-50);color:var(--brand-600);display:inline-grid;place-items:center;font-size:12px;flex:none}
.usp .vs{font-size:13px;color:var(--ink-subtle);margin-top:8px;padding-top:8px;border-top:1px dashed var(--border-strong)}

/* Proof */
.proof{background:linear-gradient(135deg,#0F172A,#1E293B);color:#fff;border-radius:var(--r-xl);padding:var(--s9) var(--s7);text-align:center}
.proof .q{font-size:24px;font-weight:600;line-height:1.4;max-width:46ch;margin:0 auto var(--s5)}
.proof .stars{color:#FBBF24;letter-spacing:3px;margin-bottom:var(--s5)}
.proof .who{font-weight:700}
.proof .who span{color:#94A3B8;font-weight:400}
.proof .badge-dp{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#93B4FB;background:rgba(59,130,246,.16);padding:6px 14px;border-radius:var(--r-pill);margin-bottom:var(--s6)}

/* Benefits */
.benef .icon.b1{background:var(--brand-50);color:var(--brand-600)}
.benef .icon.b2{background:var(--violet-50);color:var(--violet-500)}
.benef .icon.b3{background:#E6F7F0;color:#0B7A56}

/* Pricing */
.price-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s5);align-items:start}
@media(max-width:860px){.price-wrap{grid-template-columns:1fr}}
.plan{border:2px solid var(--brand-600);border-radius:var(--r-xl);padding:var(--s6);background:var(--surface);box-shadow:0 20px 50px -30px rgba(37,99,235,.5)}
.plan .tag{font-size:13px;font-weight:600;color:var(--brand-600)}
.plan .price{font-size:44px;font-weight:800;letter-spacing:-.02em;margin:var(--s2) 0}
.plan .price span{font-size:16px;font-weight:500;color:var(--ink-muted)}
.plan ul{list-style:none;display:grid;gap:10px;margin:var(--s5) 0}
.plan li{font-size:14px;padding-left:26px;position:relative;color:var(--ink-muted)}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--success);font-weight:800}
.plan li b{color:var(--ink)}
.plan .btn{width:100%;justify-content:center;margin-top:var(--s2)}
.ai{border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5);background:var(--bg-soft)}
.ai .tag{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--violet-500)}
.ai h3{font-size:18px;font-weight:700;margin:6px 0 var(--s4)}
.ai .tiers{display:grid;gap:10px}
.ai .tier{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px}
.ai .tier .nm{font-weight:600;font-size:14px}
.ai .tier .cr{font-size:12px;color:var(--ink-subtle)}
.ai .tier .pr{font-weight:700;font-size:14px}
.ai .tier.pop{border-color:var(--violet-500);box-shadow:0 0 0 3px var(--violet-50)}
.offer{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;justify-content:center;text-align:center;background:var(--brand-50);border:1px solid #CBDCFB;border-radius:var(--r-lg);padding:var(--s4) var(--s5);margin-bottom:var(--s6)}
.offer-tag{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--brand-600);padding:6px 12px;border-radius:var(--r-pill);flex:none}
.offer-txt{font-size:16px;color:var(--brand-700)}
.offer-txt span{color:var(--ink-muted);font-weight:500}
/* stretch (et non start) : les 3 cartes ont la meme hauteur quel que soit le
   nombre de puces ; le CTA est ensuite pousse en bas par margin-top:auto. */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);align-items:stretch}
@media(max-width:920px){.pricing-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}}
.pcard{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s6);box-shadow:0 1px 2px rgba(15,23,42,.04),0 18px 36px -28px rgba(15,23,42,.22)}
.pcard.reco{border:2px solid var(--brand-600);box-shadow:0 22px 50px -28px rgba(37,99,235,.45)}
.reco-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--brand-600);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:var(--r-pill);white-space:nowrap}
.pcard .name{font-size:19px;font-weight:700}
.pcard .tagline{font-size:13px;color:var(--ink-muted);margin-bottom:var(--s4)}
.pcard .price{font-size:40px;font-weight:800;letter-spacing:-.02em}
.pcard .price span{font-size:15px;font-weight:500;color:var(--ink-muted)}
.pcard .annual{font-size:12px;color:var(--brand-600);font-weight:600;margin-top:4px}
.pcard ul{list-style:none;display:grid;gap:11px;margin:var(--s5) 0}
.pcard li{font-size:14px;padding-left:26px;position:relative;color:var(--ink-muted);line-height:1.45}
.pcard li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--teal);font-weight:800}
.pcard li b{color:var(--ink)}
.pcard .btn{width:100%;justify-content:center;margin-top:auto}
.btn-soft{background:var(--bg-soft);color:var(--ink);border-color:var(--border-strong)}
.btn-soft:hover{border-color:var(--ink);background:#ECEFF3}
.pricing-foot{text-align:center;font-size:13px;color:var(--ink-subtle);margin-top:var(--s5)}
.pricing-foot a{color:var(--brand-600);font-weight:600}

/* FAQ */
.faq details{border:1px solid var(--border);border-radius:var(--r-md);padding:0;margin-bottom:12px;background:var(--surface);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:18px 20px;font-weight:600;font-size:16px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brand-600);font-weight:700;font-size:22px;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 20px 18px;color:var(--ink-muted);font-size:15px}

/* Demo + form */
.demo-sec{padding:var(--s9) 0;background:var(--bg-soft);border-top:1px solid var(--border)}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:center}
@media(max-width:880px){.demo-grid{grid-template-columns:1fr;gap:var(--s7)}}
.demo-intro h2{font-size:36px;font-weight:800;letter-spacing:-.025em;line-height:1.1;margin:var(--s3) 0}
.demo-intro p{color:var(--ink-muted);font-size:17px}
.demo-intro .alt{margin-top:var(--s5);font-size:15px}
.demo-intro .alt a{color:var(--brand-600);font-weight:600}
/* Reservation directe dans l'agenda : la voie courte, pour le prospect deja
   convaincu qui ne veut ni remplir cinq champs ni attendre un rappel. Simple
   groupe dans le flux de la colonne, sans carte : la seule carte de la section
   est le formulaire, et en dresser une seconde en face brouillait la lecture. */
.demo-direct{margin-top:var(--s5)}
/* Selecteur volontairement NON prefixe par .demo-intro : le meme composant
   sert desormais sur l'accueil ET sur la page contact. Il doit malgre tout
   l'emporter sur `.demo-intro p` (17px, --ink-muted), qui a la meme
   specificite : c'est sa position PLUS BAS dans le fichier qui tranche. */
.demo-direct p{margin-top:var(--s3);font-size:14px;color:var(--ink-subtle)}
.form-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s6);box-shadow:0 2px 4px rgba(15,23,42,.04),0 30px 60px -34px rgba(15,23,42,.30)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media(max-width:520px){.form-row{grid-template-columns:1fr}}
.fg{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s4)}
.fg label{font-size:13px;font-weight:500;color:var(--ink-muted)}
.fg input{font:inherit;background:var(--surface);border:1.5px solid var(--border-strong);color:var(--ink);border-radius:var(--r-md);padding:11px 14px;font-size:15px}
.fg input::placeholder{color:var(--ink-subtle)}
.fg input:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-50)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-check input{position:absolute;opacity:0;pointer-events:none}
.chip-check span{display:inline-block;padding:8px 14px;border:1.5px solid var(--border-strong);border-radius:var(--r-pill);font-size:13px;font-weight:500;cursor:pointer;transition:.12s}
.chip-check input:checked + span{background:var(--brand-50);border-color:var(--brand-600);color:var(--brand-700)}
.chip-check input:focus-visible + span{box-shadow:0 0 0 3px var(--brand-50)}

/* Footer */
footer{background:var(--bg-soft);border-top:1px solid var(--border);padding:var(--s8) 0 var(--s6)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1fr 1fr;gap:var(--s6)}
@media(max-width:740px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.fgrid{grid-template-columns:1fr;gap:var(--s5)}}
/* width:auto est INDISPENSABLE : les attributs HTML width/height de <img>
   se mappent en CSS width/height de faible priorite (un simple hint de
   presentation, pas aspect-ratio). En ne redefinissant QUE height ici, width
   restait fige a 969px par l attribut : le logo du pied de page s affichait a
   969x28, debordant le document de plus de 600px sur mobile. */
footer img{height:28px;width:auto;max-width:100%;aspect-ratio:969/367;margin-bottom:var(--s4)}
footer .tg{font-size:13px;color:var(--ink-muted);max-width:30ch}
footer h4{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-subtle);margin-bottom:var(--s4)}
footer ul{list-style:none;display:grid;gap:10px}
footer li a,footer li{font-size:14px;color:var(--ink-muted)}
footer li a:hover{color:var(--ink)}
.legal{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--ink-subtle)}

/* Nav dropdown (mega-menu Fonctionnalités) */
.has-dd{position:relative;display:flex;align-items:center}
.has-dd>a::after{content:"⌄";font-size:11px;margin-left:5px;color:var(--ink-subtle);position:relative;top:-1px}
.dd{position:absolute;top:100%;left:0;margin-top:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:0 24px 60px -28px rgba(15,23,42,.38);padding:var(--s5) var(--s6);display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:var(--s6);opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s;z-index:60;
  /* visibility:hidden CONSERVE la boite dans le calcul de mise en page : ce
     panneau invisible comptait dans le scrollWidth du document. Combine au
     white-space:nowrap ci-dessous, il faisait deborder toutes les pages EN
     de 121px et NL de 55px entre 880 et 1010px (mesure du 21/08). Le
     plafond ci-dessous empeche le defaut de revenir avec un futur libelle
     plus long. */
  max-width:calc(100vw - 48px)}
/* :focus-within est indispensable : sans lui, un utilisateur au clavier peut
   tabuler jusqu'a « Fonctionnalites » mais n'atteint JAMAIS les 8 liens de
   second niveau, a aucune largeur. */
.has-dd:hover .dd,.has-dd:focus-within .dd{opacity:1;visibility:visible;transform:translateY(0)}
.dd::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.dd-col{display:grid;gap:9px;align-content:start}
.dd-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-subtle);margin-bottom:2px}
.dd-col a{font-size:14px;font-weight:500;color:var(--ink-muted)}
.dd-col a:hover{color:var(--brand-600)}

/* Feature hub */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
@media(max-width:920px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.feat-grid{grid-template-columns:1fr}}
.feat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5);box-shadow:0 1px 2px rgba(15,23,42,.04),0 14px 28px -24px rgba(15,23,42,.20);scroll-margin-top:100px}
.feat .fic{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;font-size:20px;margin-bottom:var(--s3);background:var(--brand-50);color:var(--brand-600)}
.feat h3{font-size:17px;font-weight:700;margin-bottom:6px}
.feat p{font-size:14px;color:var(--ink-muted)}
.grp-head{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-600);margin:var(--s7) 0 var(--s4)}

/* Blog home */
.cat-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:var(--s7)}
.cat-chip{font-size:13px;font-weight:600;padding:8px 16px;border-radius:var(--r-pill);border:1.5px solid var(--border-strong);color:var(--ink-muted);background:var(--surface)}
.cat-chip:hover,.cat-chip.on{background:var(--brand-50);border-color:var(--brand-600);color:var(--brand-700)}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
@media(max-width:920px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.post-grid{grid-template-columns:1fr}}
.post-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(15,23,42,.04),0 14px 28px -24px rgba(15,23,42,.20);transition:.15s}
.post-card:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(15,23,42,.04),0 26px 46px -26px rgba(15,23,42,.30)}
.post-card .pc-img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--bg-soft)}
.post-card .pc-body{padding:var(--s5);display:flex;flex-direction:column;gap:8px;flex:1}
.post-card .pc-cat{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-600)}
.post-card h3{font-size:18px;font-weight:700;line-height:1.28;color:var(--ink)}
.post-card .pc-exc{font-size:14px;color:var(--ink-muted);flex:1}
.post-card .pc-meta{font-size:12px;color:var(--ink-subtle);margin-top:2px}
/* Pagination du blog : meme structure que TablePagination de l'app (compteur a gauche,
   Precedent / numeros / Suivant a droite, boutons outline de 32px, page courante pleine). */
.pager{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-top:var(--s6)}
.blog-list{padding-bottom:var(--s8)}
.pager-count{font-size:14px;color:var(--ink-muted)}
.pager-count strong{font-weight:600;color:var(--ink)}
.pager-nav,.pager-pages{display:flex;align-items:center;gap:4px}
.pager-btn,.pager-num{height:32px;display:inline-flex;align-items:center;justify-content:center;gap:4px;border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-size:14px;font-weight:500;line-height:1;transition:background .15s,border-color .15s}
.pager-btn{padding:0 12px}
.pager-num{width:32px}
a.pager-btn:hover,a.pager-num:hover{background:var(--bg-soft);border-color:var(--ink-subtle)}
.pager-num.is-current{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.pager-btn.is-disabled{opacity:.5;cursor:not-allowed}
.pager-ico{flex:none}
.pager-ellipsis{padding:0 8px;color:var(--ink-subtle)}
.pager-mobile{display:none;padding:0 8px;font-size:14px;color:var(--ink-muted)}
@media(max-width:620px){.pager{flex-direction:column-reverse}.pager-pages,.pager-lbl{display:none}.pager-mobile{display:inline}.pager-btn{padding:0 8px}}

/* Article */
.breadcrumb{font-size:13px;color:var(--ink-subtle);margin-bottom:var(--s5)}
.breadcrumb a{color:var(--ink-muted);display:inline-block;padding:6px 0}
.breadcrumb a:hover{color:var(--ink)}
.article-head{max-width:760px;margin:0 auto var(--s6)}
.article-head h1{font-size:40px;font-weight:800;letter-spacing:-.025em;line-height:1.08;margin:var(--s3) 0}
.article-meta{font-size:13px;color:var(--ink-subtle);display:flex;gap:16px;flex-wrap:wrap}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s7);align-items:start;max-width:1000px;margin:0 auto}
@media(max-width:900px){.article-layout{grid-template-columns:1fr}.sidebar{position:static !important}}
.article-body{font-size:17px;line-height:1.72}
.article-body .lead{font-size:20px;color:var(--ink);font-weight:500;margin-bottom:var(--s5)}
.article-body h2{font-size:26px;font-weight:800;letter-spacing:-.01em;margin:var(--s7) 0 var(--s3);color:var(--ink);scroll-margin-top:90px}
.article-body h3{font-size:19px;font-weight:700;margin:var(--s5) 0 var(--s2);color:var(--ink)}
.article-body p{margin-bottom:var(--s4);color:var(--ink-muted)}
.article-body ul,.article-body ol{margin:0 0 var(--s4) 22px;color:var(--ink-muted);display:grid;gap:9px}
.article-body a{color:var(--brand-600);font-weight:600}
.article-body .callout{background:var(--bg-soft);border-left:3px solid var(--brand-500);border-radius:8px;padding:var(--s4) var(--s5);margin:var(--s5) 0;font-size:15px;color:var(--ink)}
.sidebar{position:sticky;top:100px;display:grid;gap:var(--s4)}
.toc{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5)}
.toc h4{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-subtle);margin-bottom:var(--s3)}
.toc a{display:block;font-size:14px;color:var(--ink-muted);padding:5px 0}
.toc a:hover{color:var(--brand-600)}
.side-cta{background:var(--grad);color:#fff;border-radius:var(--r-lg);padding:var(--s5);text-align:center}
.side-cta h4{font-size:16px;font-weight:700;margin-bottom:6px}
.side-cta p{font-size:13px;opacity:.92;margin-bottom:var(--s4)}
.side-cta a{display:inline-block;background:#fff;color:var(--brand-700);font-weight:600;padding:10px 18px;border-radius:var(--r-pill);font-size:14px}

/* Contact */
.fg textarea{font:inherit;background:var(--surface);border:1.5px solid var(--border-strong);color:var(--ink);border-radius:var(--r-md);padding:11px 14px;font-size:15px;resize:vertical;min-height:130px;width:100%}
.fg textarea:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-50)}
.contact-info{display:grid;gap:var(--s5)}
.contact-info .ci{display:flex;gap:14px;align-items:flex-start}
.contact-info .ci .cic{width:40px;height:40px;border-radius:var(--r-md);background:var(--brand-50);color:var(--brand-600);display:grid;place-items:center;flex:none;font-size:17px}
.contact-info .ci b{display:block;font-size:15px;color:var(--ink)}
.contact-info .ci span,.contact-info .ci a{font-size:14px;color:var(--ink-muted)}

/* Article TOC inline (colonne principale) */
.article-toc{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s4) var(--s5);margin:0 0 var(--s6)}
.article-toc h4{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-subtle);margin-bottom:var(--s3)}
.article-toc ol{list-style:none;display:grid;gap:9px;counter-reset:toc;margin:0;padding:0}
.article-toc li{padding-left:2px}
.article-toc li{counter-increment:toc;margin:0}
.article-toc a{font-size:14.5px;color:var(--brand-600);font-weight:500}
.article-toc a::before{content:counter(toc) ". ";color:var(--ink-subtle);font-weight:600}
.article-toc a:hover{color:var(--brand-700)}

/* Article cover image */
.article-cover{display:block;width:100%;max-width:1000px;margin:0 auto var(--s7);border-radius:var(--r-xl);object-fit:cover;aspect-ratio:16/7;background:var(--bg-soft)}

/* Photo illustrant une section de la page A propos (Le constat, La genese). aspect-ratio:16/9 colle a
   quasi 1% pres au format source (1376x768) : object-fit:cover ne recadre
   donc presque rien, les visages restent entiers. */
/* height:auto est OBLIGATOIRE ici : sans lui, l attribut HTML height=768
   (pose pour reserver l espace et eviter le CLS) reste une valeur definie
   au sens CSS -- pas la valeur-cle auto -- et aspect-ratio ne s applique
   QUE si au moins une dimension vaut auto. Meme piege deja rencontre sur
   .nav img et footer img plus tot dans ce chantier. */
.section-photo{display:block;width:100%;height:auto;margin-top:var(--s6);border-radius:var(--r-xl);border:1px solid var(--border);object-fit:cover;aspect-ratio:16/9;box-shadow:0 1px 2px rgba(15,23,42,.04),0 14px 28px -24px rgba(15,23,42,.20)}

/* Legal pages */
.legal-doc{max-width:820px;margin:0 auto}
.legal-doc .lbc{font-size:13px;color:var(--ink-subtle);margin-bottom:var(--s5)}
.legal-doc .lbc a{color:var(--ink-muted)}
.legal-doc h1{font-size:36px;font-weight:800;letter-spacing:-.02em;margin-bottom:var(--s2)}
.legal-doc .updated{font-size:13px;color:var(--ink-subtle);margin-bottom:var(--s6)}
.legal-doc h2{font-size:21px;font-weight:700;margin:var(--s6) 0 var(--s3);color:var(--ink)}
.legal-doc p{color:var(--ink-muted);margin-bottom:var(--s4);font-size:16px;line-height:1.7}
.legal-doc ul{margin:0 0 var(--s4) 22px;color:var(--ink-muted);display:grid;gap:8px}
.legal-doc a{color:var(--brand-600);font-weight:600}
.legal-doc .box{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5);margin-top:var(--s5)}
.legal-doc .box b{color:var(--ink)}
.legal-note{background:#FFF8E6;border:1px solid #F3E2A8;border-radius:var(--r-md);padding:12px 16px;font-size:13.5px;color:#8A6D1B;margin-bottom:var(--s6)}

/* Legal tables + note */
/* Conteneur pose par le filtre the_content (voir seido_enveloppe_tables_du_contenu).
   Il confine le depassement AU TABLEAU au lieu de le propager a la page :
   la politique de cookies faisait defiler le document de 81px a 360px. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--s4) 0;max-width:100%}
.table-scroll>table{margin:0}
.legal-doc table{width:100%;border-collapse:collapse;margin:var(--s4) 0;font-size:13px}
@media(max-width:520px){
  .legal-doc table{font-size:12px}
  .legal-doc th,.legal-doc td{padding:6px 7px}
}
.legal-doc th,.legal-doc td{border:1px solid var(--border);padding:8px 10px;text-align:left;vertical-align:top;color:var(--ink-muted)}
.legal-doc th{background:var(--bg-soft);color:var(--ink);font-weight:700}
.legal-doc em{font-style:italic}

/* ===== Alternatives ===== */
.alt-tldr{display:grid;gap:10px;margin:var(--s5) 0}
.alt-tldr .tl{padding:14px 16px;border:1px solid var(--border);border-radius:var(--r-lg,14px);background:var(--surface);font-size:15px;line-height:1.5}
.alt-tldr .tl b{font-weight:700}
.alt-tldr .tl-yes{border-left:4px solid var(--brand-600)}
.alt-tldr .tl-alt{border-left:4px solid var(--ink-subtle)}
.alt-tldr .tl-eq{border-left:4px solid var(--violet-500)}
.alt-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:var(--s4) 0 var(--s6)}
.alt-facts>div{padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-lg,14px);background:var(--surface)}
.alt-facts span{display:block;font-size:11px;color:var(--ink-subtle);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.alt-facts b{font-weight:600;font-size:15px}
.alt-body h2{margin-top:var(--s6)}
.alt-body ul{margin:0 0 var(--s4);padding-left:1.2em}
.alt-body ul li{margin:6px 0}
.alt-table,.alt-matrix{width:100%;border-collapse:collapse;margin:var(--s3) 0 var(--s5);font-size:14px}
.alt-table th,.alt-table td,.alt-matrix th,.alt-matrix td{border:1px solid var(--border);padding:10px 12px;text-align:left;vertical-align:top}
.alt-table thead th,.alt-matrix thead th{background:var(--brand-50);font-weight:700}
.alt-table tbody th,.alt-matrix tbody th{background:#f8fafc;font-weight:600;width:34%}
.alt-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:var(--s5) 0}
.alt-card{display:block;padding:18px;border:1px solid var(--border);border-radius:var(--r-lg,14px);background:var(--surface);text-decoration:none;color:inherit;transition:border-color .15s}
.alt-card:hover{border-color:var(--brand-600)}
.alt-card h3{margin:0 0 6px;font-size:18px}
.alt-card .foc{color:var(--ink-muted);font-size:14px;margin:2px 0}
.alt-card .go{color:var(--brand-700);font-weight:600;font-size:14px;margin-top:10px;display:inline-block}

/* ===== Sélecteur de langue (header, menu déroulant) ===== */
/* Libelle reserve aux lecteurs d ecran : present dans l arbre d accessibilite,
   absent de l affichage. Ne PAS utiliser display:none, qui le retirerait aussi
   de l arbre. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Le gap du flex .nav-right espace deja les enfants ; cette marge s'ajoutait
   en double (heritage d'avant l'introduction du gap). */
.lang-switch{position:relative}
.lang-switch summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:13px;font-weight:600;color:var(--ink);padding:6px 11px;min-height:44px;border:1px solid var(--border);border-radius:9px;background:var(--surface);line-height:1}
.lang-switch summary::-webkit-details-marker{display:none}
.lang-switch summary:hover{border-color:var(--brand-600);color:var(--brand-700)}
.lang-switch .chev{transition:transform .15s;color:var(--ink-subtle)}
.lang-switch[open] summary{border-color:var(--brand-600);color:var(--brand-700)}
.lang-switch[open] .chev{transform:rotate(180deg);color:var(--brand-700)}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:66px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 28px rgba(15,23,42,.12);padding:4px;z-index:60;display:flex;flex-direction:column;gap:2px}
.lang-menu a{display:flex;align-items:center;font-size:13px;font-weight:600;color:var(--ink-muted);text-decoration:none;padding:7px 12px;min-height:44px;border-radius:7px;line-height:1}
.lang-menu a:hover{background:var(--brand-50);color:var(--brand-700)}
.lang-menu a.on{background:var(--brand-50);color:var(--brand-700)}

/* Tableau comparatif des forfaits (page Tarifs). Reprend le langage visuel de
   .alt-matrix (bordures, en-tete brand-50) en y ajoutant les lignes de section
   et les marques oui/non centrees. */
/* position:relative sert d'ancrage au degrade qui signale le defilement. */
.cmp-scroll{position:relative}
.cmp-scroll::after{content:"";position:absolute;top:0;bottom:0;right:0;width:26px;pointer-events:none;
  background:linear-gradient(to right,rgba(15,23,42,0),rgba(15,23,42,.10))}
@media(min-width:1024px){.cmp-scroll::after{display:none}}
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--s5) 0 0}
/* border-collapse:separate est OBLIGATOIRE ici : avec collapse, une cellule
   en position:sticky perd ses bordures. On redessine donc la grille bord
   par bord pour garder un trait de 1px sans doublon. */
.cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;min-width:680px}
.cmp th,.cmp td{border:0;border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:10px 12px;vertical-align:middle}
.cmp tr>*:first-child{border-left:1px solid var(--border)}
.cmp thead tr>*{border-top:1px solid var(--border)}
/* Cale sous la barre de navigation, elle-meme collante : a top:0 l'en-tete se
   placerait DERRIERE elle (z-index 50) et resterait invisible. */
/* top:0 et NON var(--nav-h) : le scrollport de ce sticky est .cmp-wrap
   (overflow-x:auto fait calculer overflow-y a auto), pas la fenetre. Le
   wrap ne defile jamais verticalement — mesure sur la page servie le
   2026-09-24 : scrollHeight == clientHeight. L'en-tete n'etait donc jamais
   epingle a l'ecran : il etait pousse 69px plus bas DANS le tableau, ce qui
   creusait un trou en haut et recouvrait les deux premieres lignes. */
.cmp thead th{background:var(--brand-50);font-weight:700;text-align:center;position:sticky;top:0;z-index:5}
.cmp thead th:first-child{text-align:left}
.cmp thead th small{display:block;font-size:12px;font-weight:500;color:var(--ink-muted)}
/* Sans cette colonne figee, faire defiler vers « Max » fait perdre de vue la
   fonctionnalite dont on lit la valeur : a 393px, la moitie du tableau est
   hors ecran. */
/* Variante NON figee : sur une table courte, un en-tete sticky se pose
   par-dessus la premiere ligne au lieu de la surplomber. On conserve tout
   le style de .cmp et on ne neutralise que le comportement de scroll. */
.cmp--flat thead th,.cmp--flat tbody th{position:static}
.cmp tbody th{background:#f8fafc;font-weight:500;text-align:left;width:40%;color:var(--ink-muted);position:sticky;left:0;z-index:4}
.cmp td{text-align:center;width:20%}
.cmp .cmp-sec th{background:var(--surface);position:static;border-left:0;border-right:0;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brand-600);padding-top:var(--s5)}
.cmp .yes{color:var(--teal);font-weight:800}
.cmp .no{color:var(--ink-subtle)}
.cmp .val{font-size:13px;font-weight:600;color:var(--ink)}
.cmp .col-reco{background:rgba(37,99,235,.04)}
.cmp thead th.col-reco{background:var(--brand-600);color:#fff}
.cmp thead th.col-reco small{color:rgba(255,255,255,.75)}

/* Anneau de focus homogene. Il n'existait qu'aux deux champs de formulaire ;
   il devient necessaire des lors que la navigation, le mega-menu et le
   panneau mobile se parcourent au clavier. */
.btn:focus-visible,.nav nav a:focus-visible,.dd-col a:focus-visible,
.lang-switch summary:focus-visible,.lang-menu a:focus-visible,
.nav-mobile>summary:focus-visible,.nav-panel a:focus-visible,
.brand:focus-visible,footer a:focus-visible,.breadcrumb a:focus-visible{
  outline:2px solid var(--brand-600);outline-offset:2px;border-radius:6px}

/* Banniere cookies (CookieYes). Ses trois boutons passaient a la ligne sans
   espacement vertical, avec une marge droite de 8 px sur les deux premiers
   seulement : bords decales, rangees collees. On les empile a pleine largeur,
   « Accepter tout » en tete ; le refus suit immediatement, au meme style,
   pour garder la symetrie acceptation/refus (APD, EDPB). */
.cky-consent-container .cky-notice-btn-wrapper{flex-direction:column;align-items:stretch;gap:8px}
.cky-consent-container .cky-notice-btn-wrapper .cky-btn{flex:none;width:100%;margin:0}
.cky-consent-container .cky-notice-btn-wrapper .cky-btn-accept{order:1}
.cky-consent-container .cky-notice-btn-wrapper .cky-btn-reject{order:2}
.cky-consent-container .cky-notice-btn-wrapper .cky-btn-customize{order:3}

/* Calculateur d'indexation (inc/calculateur-indexation.php) */
.calc-index{margin:var(--s6) 0;padding:var(--s5)}
.article-body .calc-index p.calc-titre{font-size:21px;font-weight:800;color:var(--ink);margin-bottom:var(--s2)}
.article-body .calc-index p.calc-intro{font-size:15px;margin-bottom:var(--s4)}
.calc-type{border:0;padding:0;flex-direction:row;flex-wrap:wrap;gap:var(--s4)}
.calc-type legend{font-size:13px;font-weight:500;color:var(--ink-muted);margin-bottom:6px;width:100%}
.calc-type label,.calc-check{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink);font-weight:500}
.calc-check{margin-bottom:var(--s4)}
.fg select{font:inherit;background:var(--surface);border:1.5px solid var(--border-strong);color:var(--ink);border-radius:var(--r-md);padding:11px 14px;font-size:15px}
.fg select:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-50)}
.calc-index [hidden]{display:none}
.calc-submit{width:100%;justify-content:center}
.calc-resultat{margin-top:var(--s5);padding:var(--s5);background:var(--bg-soft);border-radius:var(--r-md)}
.article-body .calc-resultat p{margin-bottom:var(--s2)}
.article-body .calc-resultat p.calc-res-titre{font-size:14px;font-weight:600;color:var(--ink-muted)}
.article-body .calc-resultat p.calc-res-montant{font-size:34px;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-bottom:0}
.article-body .calc-resultat p.calc-res-hausse{font-size:15px;color:var(--brand-600);font-weight:600}
.calc-res-details{display:grid;grid-template-columns:auto 1fr;gap:6px var(--s4);font-size:14px;margin:var(--s4) 0}
.calc-res-details dt{color:var(--ink-muted);font-weight:500}
.calc-res-details dd{margin:0;color:var(--ink)}
.article-body .calc-resultat a.calc-cta{display:inline-block;margin-top:var(--s2)}
.article-body .calc-resultat p.calc-erreur{color:var(--ink);margin:0}
.article-body .calc-index p.calc-avertissement{font-size:12px;color:var(--ink-subtle);margin:var(--s4) 0 0}
@media (max-width:600px){.calc-res-details{grid-template-columns:1fr}.calc-res-details dd{margin-bottom:6px}}
/* Bandeau cookies (CookieYes) sur mobile : barre compacte collee en bas, au plus ~20 %
   d'un ecran 375x812 (decision D-12 du 18/10/2026). Memes trois choix RGPD, Refuser et
   Accepter cote a cote et de meme poids ; le texte complet reste lisible en defilant. */
@media (max-width:576px){
.cky-consent-container{left:0!important;right:0!important;bottom:0!important;width:100%!important;max-width:none!important}
.cky-consent-container .cky-consent-bar{padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))!important;border-radius:0!important;box-shadow:0 -4px 16px rgba(0,0,0,.12)!important}
.cky-consent-container .cky-notice .cky-title{font-size:13px!important;line-height:1.3!important;margin:0 0 2px!important;padding:0!important}
.cky-consent-container .cky-notice-group{display:block!important}
.cky-consent-container .cky-notice-des{font-size:12px!important;line-height:1.4!important;max-height:4.2em;overflow-y:auto;margin:0!important;padding:0!important}
.cky-consent-container .cky-notice-des p{margin:0!important;font-size:12px!important;line-height:1.4!important}
.cky-consent-container .cky-notice-btn-wrapper{display:flex!important;flex-flow:row wrap;gap:6px;margin:8px 0 0!important;padding:0!important}
.cky-consent-container .cky-notice-btn-wrapper .cky-btn{flex:1 1 auto;width:auto!important;margin:0!important;padding:6px 8px!important;font-size:12px!important;line-height:1.2!important;min-height:40px}
.cky-consent-container .cky-notice-btn-wrapper .cky-btn-customize{order:3;flex:0 0 auto;padding:6px 4px!important;border-color:transparent!important;text-decoration:underline}
.cky-consent-container .cky-notice-btn-wrapper .cky-btn-reject{order:1}
.cky-consent-container .cky-notice-btn-wrapper .cky-btn-accept{order:2}
}