/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   SYSTÈME GRAPHIQUE ClairSign — chargé EN DERNIER sur toutes les pages, il a le dernier mot.
   Direction : « un service administratif français bien tenu : du blanc, une encre bleu nuit, un seul
   bleu pour agir, de vrais documents à la place des décorations ».
   Règles : 1 police (Plus Jakarta Sans) · 1 couleur d'accent · 2 arrondis (8 px contrôles, 12 px blocs)
   · 1 ombre discrète · fonds à plat (aucun dégradé, aucun halo, aucune forme floue) · icônes au trait
   d'une seule famille (assets/icones).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --encre:#0f1b33;        /* titres, fonds sombres */
  --texte:#2b3345;        /* texte courant (contraste 12:1 sur blanc) */
  --gris:#5a6275;         /* texte secondaire (6,1:1) */
  --fond:#ffffff; --fond-2:#f5f7fa; --fond-3:#eef2f7;
  --bord:#dfe4ec;
  --accent:#3966cd;       /* LE bleu d'action (6,0:1 sur blanc) */
  --accent-fonce:#2c52a8; --accent-clair:#edf2fc;
  --succes:#11734b; --succes-clair:#e7f5ee;
  --erreur:#b42318; --erreur-clair:#fdeceb;
  --attention:#7a4b00; --attention-clair:#fff6e5;
  --r-s:8px; --r-m:12px;
  --ombre:0 1px 2px rgba(15,27,51,.06),0 6px 18px rgba(15,27,51,.06);
  --e1:8px; --e2:16px; --e3:24px; --e4:32px; --e5:48px;
  /* on aligne les variables de leur feuille de style sur les nôtres */
  --fpt-blue:#3966cd;
}

/* ── Typographie : une seule famille, une encre ─────────────────────────────────────────────────── */
body,button,input,select,textarea{font-family:'Plus Jakarta Sans',system-ui,sans-serif!important}
body{color:var(--texte)}
h1,h2,h3,h4,.dsp-2xl,.dsp-xl,.dsp-xl-8,.dsp-lg,.dsp-md,.dsp-lg-3,.card-title,.card-title-2,.title-country{color:var(--encre)}
.secondary.dsp-xl-8,.dsp-2xl.secondary,.dsp-lg.secondary,h1.secondary,.dsp-lg-3.secondary,.grey-02,.dsp-md.grey-02{color:#fff}
p,.text-md,.text-lg-2{color:inherit}
.label,.sub-title{color:var(--accent);font-weight:600;letter-spacing:.02em}
a{color:var(--accent)}
.link-blue,.text-card-popular.link-card{color:var(--accent)}

/* ── Boutons : un seul plein, un seul contour, mêmes états partout ──────────────────────────────── */
.button,.fpt-btn,.cx-btn{background:var(--accent)!important;border:1.5px solid var(--accent)!important;color:#fff!important;box-shadow:none!important;transition:background .15s,border-color .15s}
@media (hover:hover){.button:hover,.fpt-btn:hover,.cx-btn:hover{background:var(--accent-fonce)!important;border-color:var(--accent-fonce)!important}}
.button:active,.fpt-btn:active{transform:translateY(1px)}
.button.secondary,.button.secondary.white,.cx-btn-clair,.pc-actions .button.secondary{background:#fff!important;color:var(--accent)!important;border:1.5px solid var(--accent)!important}
@media (hover:hover){.button.secondary:hover,.cx-btn-clair:hover{background:var(--accent-clair)!important}}
.button.tertiary{background:#fff!important;color:var(--encre)!important;border-color:#fff!important}
.button[disabled],.button[aria-disabled=true],.cx-btn[disabled]{background:#e6eaf0!important;border-color:#e6eaf0!important;color:#4f5768!important;cursor:not-allowed;opacity:1!important}
.button-inline-navbar{color:var(--encre)}
:focus-visible{outline:3px solid var(--accent)!important;outline-offset:3px!important}
input:focus,select:focus,textarea:focus{border-color:var(--accent)!important;outline:3px solid rgba(57,102,205,.18)!important}
input[aria-invalid=true]{border-color:var(--erreur)!important;background:var(--erreur-clair)!important}

/* ── Fonds à plat : on retire vagues, halos, carte du monde et dégradés hérités ────────────────── */
.section.hero.home,.section.hero.features,.section.hero-section,.section.gradient-light,.section.map,
.section.bg-gradient-grey,.background-grey-light,.background-startnow-price{background-image:none!important}
.section.gradient-light{background:var(--fond-2)!important}
.background-grey-light{background:var(--fond-2)!important}
.section.bg-gradient-grey{background:var(--encre)!important}
.blue-dot,.card-blue-gradient,.industry-deco-1,.industry-deco-2{display:none!important}
.wrap-card-blue,.wrap-card-blue.full-width{background:var(--fond-3)!important;background-image:none!important}
.bloc-dark-blue{background:var(--encre)!important}
.section.start-now,.section.start-now-price .background-startnow-price{background:var(--encre)!important;background-image:none!important}
.section.start-now-price{background:#fff!important}
.section.hero-section.hero-hub{background:var(--encre)!important;background-image:none!important}
.cta-pricing{background-image:none!important;padding-left:0!important}
/* les carrés bleus dégradés derrière les maquettes des onglets → un aplat clair */
.image-radius.ratio-square{opacity:0!important}
.div-relative.overflow-hiden{background:#e8eef8;border-radius:var(--r-m)}

/* ── Blocs : 2 arrondis, 1 ombre, des bordures plutôt que des ombres ───────────────────────────── */
.card,.card-why,.fpt-card,.carte-simple,.pc-cadre,.cx-carte,.cx-espace,.mcp-usp-card,
.alohi---main-style-guide--card{border-radius:var(--r-m)!important}
.card.drop-shadow,.card.drop-shadow-light,.drop-shadow,.drop-shadow-light,.card-why,.fpt-card,.pc-cadre,.cx-carte{box-shadow:var(--ombre)!important}
.card,.carte-simple,.card-why,.alohi---main-style-guide--card{border:1px solid var(--bord)}
.card.bg-green,.card.grey-bg,.card.dark-green{border:0}
.carte-simple{box-shadow:none!important}
.image.radius,.image-card-why,.border-radius-20,.image-plateformes,.card-image,.image-card-blogs{border-radius:var(--r-m)!important}
.mcp-usp-card{border-color:var(--bord)!important}
.mcp-usp-card svg{color:var(--accent)}

/* ── Carrousel des formalités : encre au lieu du vert canard ───────────────────────────────────── */
.card.bg-green{background:var(--encre)!important}
.slider-green .card.bg-green .opa-56{opacity:.78}

/* ── Tableau « Tout ce qui est inclus », titres de groupe à plat ───────────────────────────────── */
.features-rows.background{background:var(--fond-3)!important}
.features-rows.background .title-country{color:var(--encre)!important}

/* ── Formulaires et alertes du parcours alignés sur le système ─────────────────────────────────── */
.pc-progression li.actif,.filtre-blog.actif{background:var(--accent);color:#fff}
.pc-zone{border-color:#9db4e0;background:var(--fond-2)}
.pc-zone:hover,.pc-zone.survol{border-color:var(--accent);background:var(--accent-clair)}
.pc-zone strong{color:var(--accent)}
.pc-alerte.erreur{background:var(--erreur-clair);color:#7a1a12;border-color:#f2b8b2}
.pc-alerte.info{background:var(--accent-clair);color:#0a3a8a;border-color:#bcd2f6}
.pc-demo{background:var(--attention-clair)!important;border-color:#efd59a!important;color:var(--attention)!important}
.pc-cadre{border-color:var(--bord)}
.barre-signer{background:var(--accent)!important}

/* ── Divers ─────────────────────────────────────────────────────────────────────────────────────── */
.logo-home.logo-texte{color:var(--gris)}
.text-xl.grey{color:var(--gris)}
.tag-blog{color:var(--accent)}
.ch-item{color:var(--encre)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.faits-confiance{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 32px;padding:0;margin:8px 0 0}
.faits-confiance li{display:flex;align-items:center;gap:10px;color:var(--encre);font-weight:600;font-size:15px}
.faits-confiance img{height:24px;width:auto}
.pied-faits{color:#c6cbd8;font-size:13px;line-height:1.6;margin:0}
.logo-conformite{background:#fff;border-radius:var(--r-s)}
/* Garanties : tuiles du haut en blanc, icônes de notre famille */
.cards-key-features{background:#fff!important;border:1px solid var(--bord)!important;box-shadow:none!important}
.cards-key-features .text-md{color:var(--encre)!important}
.cards-key-features:hover{border-color:var(--accent)!important}
.wrap-key-features{background:var(--fond-2)!important;box-shadow:none!important}
/* Hiérarchie : un seul bouton plein par rangée de cartes de prix (la signature) ; les autres en contour */
.wrapper-col>.col-4:not(:first-child) .wrap-card-parent-content-price .button{background:#fff!important;color:var(--accent)!important}
@media (hover:hover){.wrapper-col>.col-4:not(:first-child) .wrap-card-parent-content-price .button:hover{background:var(--accent-clair)!important}}
/* Carrousel : la carte centrale garde l'ombre commune, pas une ombre lourde */
.slick-slide.slick-center,.slick-slide.slick-current{box-shadow:0 8px 24px rgba(15,27,51,.14)!important}
.wrap-key-features .cards-key-features{flex:1 1 0!important;min-width:0!important}
/* Listes du forfait : toutes les lignes alignées à gauche, même sur 2 lignes */
.fpt-fi{text-align:left!important;align-items:flex-start!important}
/* Filtres du blog sur téléphone : plus compacts (2 lignes au lieu de 3) */
@media (max-width:600px){.filtre-blog{padding:8px 12px;font-size:14px;min-height:44px}.filtres-blog{gap:8px!important}}
/* Onglets « étapes » (Comment ça marche) : l'étape inactive reste lisible (6:1), l'active passe en bleu */
.wrapper-col-tab.left-horizontal .w-tab-link,.wrapper-col-tab.left-horizontal .w-tab-link div{color:var(--gris)!important}
.wrapper-col-tab.left-horizontal .w-tab-link.w--current,.wrapper-col-tab.left-horizontal .w-tab-link.w--current div{color:var(--accent)!important}
.pc-actions .button[disabled],.pc-actions .button[aria-disabled=true]{opacity:1!important}
/* Sur fond bleu nuit : étiquette en bleu clair lisible (9:1) et icônes posées sur un disque blanc */
.section.bg-gradient-grey .label,.bloc-dark-blue .label,.section.start-now .label{color:#a8c7fa!important}
.section.bg-gradient-grey img.icon,.section.bg-gradient-grey img.icon-contact,.bloc-dark-blue img.icon{background:#fff;border-radius:999px}
/* ── Échelle des titres : 4 niveaux seulement (ordinateur / téléphone) ─────────────────────────────
   T1 52/38 titre de page · T2 34/27 titre de section · T3 22/19 titre de carte · T4 17/16 petit titre */
:root{--t1:52px;--t2:34px;--t3:22px;--t4:17px}
@media (max-width:767px){:root{--t1:38px;--t2:27px;--t3:19px;--t4:16px}}
h1,.dsp-2xl,h1.dsp-xl,h1[class*="main-style-guide--heading"]{font-size:var(--t1)!important;line-height:1.12!important;letter-spacing:-.01em}
h1.cx-titre{font-size:var(--t3)!important;line-height:1.3!important}
h2.dsp-xl,.dsp-xl-8,div.dsp-xl,h2[class*="main-style-guide--heading"]{font-size:var(--t2)!important;line-height:1.2!important}
h3,h3.dsp-md,.dsp-lg,.dsp-lg-3,h4.dsp-lg,h2.dsp-lg,.card-title,.card-title-2,h4[class*="main-style-guide--dsp-md"],.fpt-plan-name,.dsp-sm.speci,h3[class*="main-style-guide--heading"]{font-size:var(--t3)!important;line-height:1.3!important}
.dsp-sm,h3.text-card-popular,.card-title-blog,h3[class*="main-style-guide--dsp-xs"]{font-size:var(--t4)!important;line-height:1.4!important}
p.dsp-lg{font-size:20px!important;line-height:1.5!important}
@media (max-width:767px){p.dsp-lg{font-size:18px!important}}
/* graisses : T1/T2 400 (le trait fin de fax.plus), T3 500, T4 600 */
h1,h2,.dsp-2xl,.dsp-xl,.dsp-xl-8{font-weight:400!important}
h3,h4,.dsp-lg,.dsp-lg-3,.card-title,.card-title-2,p.fpt-plan-name,h1.cx-titre{font-weight:500!important}
p.fpt-plan-name{font-size:var(--t3)!important;line-height:1.3!important}
.dsp-sm,h3.text-card-popular,.card-title-blog,h3[class*="main-style-guide--dsp-xs"]{font-weight:600!important}
p.dsp-lg{font-weight:400!important}
p.fpt-plan-name.dsp-lg{font-weight:500!important}
/* (relance 18/10 01:05) survols rangés dans @media (hover:hover) : au téléphone ils restaient affichés après un tap (mesuré, survol-cascade FEUILLES=toutes
   + avant-apres-tap.mjs). Les parties :focus-visible restent valables partout. */