/* Bary, Site web v2 — DA officielle (déclinaison équipe design, sept. 2026).
   RÈGLES FIXES, à ne jamais enfreindre :
   1) JAMAIS de blanc pur (#fff) sur fond sombre : sur navy, le texte est --sky / --paper.
   2) JAMAIS de noir pur (#000) sur fond clair : sur clair, le texte est --navy.
   3) Le jaune est un accent de REMPLISSAGE (surligneur, bouton, point) — jamais une couleur
      de texte sur fond clair.
   4) Pas de puce/rond décoratif devant les sur-titres, pas de tiret cadratin dans les textes.
   5) Les libellés de prix ne se coupent jamais (white-space:nowrap).
   6) AUCUN texte sous 4,5:1 de contraste, jamais, même pour un libellé secondaire.
      --pill-light (#5C6480) sur le navy ne donne que 3,15:1 : INTERDIT comme couleur
      de texte sur fond sombre. Sur navy, le plus discret qui reste lisible est
      --line-2 (10,8:1), puis --sky (14,7:1). Sur --paper, le plus clair est --faint
      (4,6:1). Un texte qu'on ne peut pas lire n'est pas discret, il est absent. */
:root{
  --navy:#0B122E; --navy-700:#171E3C; --navy-600:#232B4C;
  --pill-light:#5C6480; --pill-dark:#393F57;
  --sky:#E0E6EE; --paper:#EEF0F4; --white:#fff;
  --yellow:#E9FE63; --yellow-600:#D4EC3C; --yellow-100:#F4FFB8; --yellow-50:#FAFFE4;
  --star:#F5A623;
  --ink:#0B122E; --muted:#535A78; --faint:#666D8C; --line:#D7DCE8; --line-2:#BFC6D8;
  --r-sm:10px; --r:14px; --r-lg:20px; --r-pill:999px;
  --title:'Archivo',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif;
  --shadow-sm:0 2px 10px -6px rgba(11,18,46,.2);
  --shadow:0 24px 60px -34px rgba(11,18,46,.34);
  --maxw:1280px; --gutter:24px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--title);color:var(--navy);line-height:1.08;letter-spacing:-.015em;font-weight:800;text-wrap:balance}
p,li{text-wrap:pretty}
a{color:var(--navy)}
a:not(.btn):not(.f-col a):not(.head-nav a){text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);width:100%}
.section{padding:clamp(46px,6vw,84px) 0}
.soft{background:var(--sky)}
.center{text-align:center}
.mt-s{margin-top:10px}.mt-m{margin-top:18px}.mt-l{margin-top:32px}.mt-xl{margin-top:56px}
.h1{font-size:clamp(2.2rem,4.8vw,3.7rem)}
.h2{font-size:clamp(1.7rem,3.2vw,2.6rem)}
.h3{font-size:clamp(1.25rem,2vw,1.6rem)}
.lede{font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--muted);line-height:1.6}
.eyebrow{display:inline-flex;align-items:center;font-family:var(--title);font-weight:800;
  font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ln{display:block;text-wrap:initial}

/* Signatures de la DA : surligneur jaune + italique d'accentuation */
.hl{background:var(--yellow);color:var(--navy);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.it{font-style:italic}

/* Sections sombres : texte bleu-gris, jamais blanc pur */
.dark{background:var(--navy);color:var(--sky);position:relative;overflow:hidden}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--paper)}
.dark p,.dark li,.dark .lede{color:var(--sky)}
.dark .eyebrow{color:var(--line-2)}
.dark a:not(.btn){color:var(--paper);text-decoration:underline}
.dark .wrap{position:relative;z-index:1}

/* Motif de pilules de la DA, en décor d'angle sur les fonds navy */
.pillmotif{position:absolute;right:-70px;top:-70px;width:min(30%,340px);opacity:.9;pointer-events:none;z-index:0}
.pillmotif.bl{right:auto;top:auto;left:-70px;bottom:-70px}
@media (max-width:1100px){ .pillmotif{display:none} }

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--title);font-weight:700;
  font-size:1rem;padding:13px 24px;border-radius:var(--r-pill);border:1.5px solid transparent;cursor:pointer;
  transition:.16s;text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--navy);color:var(--paper)}
.btn-primary:hover{background:var(--navy-700)}
.btn-ghost{border-color:var(--navy);color:var(--navy);background:transparent}
.btn-ghost:hover{background:var(--navy);color:var(--paper)}
.dark .btn-ghost,.summary .btn-ghost,.cart-bar .btn-ghost,.quote-card .btn-ghost,.f .btn-ghost,.simu-res .btn-ghost{border-color:var(--pill-light);color:var(--paper);background:transparent}
.dark .btn-ghost:hover,.summary .btn-ghost:hover,.cart-bar .btn-ghost:hover,.quote-card .btn-ghost:hover,.f .btn-ghost:hover,.simu-res .btn-ghost:hover{background:var(--paper);color:var(--navy)}
.btn-lg{padding:16px 30px;font-size:1.05rem}
.btn[disabled]{opacity:.45;cursor:not-allowed}
/* Sur un écran de 390 px, « Voir les fonctionnalités » en grand corps et en nowrap
   dépassait la gouttière. Le libellé garde sa ligne, le bouton rétrécit. */
@media (max-width:480px){
  .btn{max-width:100%;padding:12px 18px}
  .btn-lg{padding:14px 20px;font-size:1rem}
}
.btn-add{width:100%;margin-top:16px}
.btn-add.in{background:var(--navy);color:var(--paper)}

/* Header */
.site-head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.site-head .row{display:flex;align-items:center;gap:20px;height:96px}
.brand img{height:28px}
.head-nav{display:flex;gap:26px;margin-left:18px}
.head-nav a{font-weight:600;color:var(--ink);font-size:.96rem;text-decoration:none}
.head-nav a{transition:color .14s}
.head-nav a:hover{color:var(--muted);text-decoration:none}
.head-nav a[aria-current="page"]:hover{color:var(--navy)}
.head-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.cart-btn{position:relative;display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--line-2);
  background:var(--white);border-radius:var(--r-pill);padding:11px 20px;font-family:var(--title);font-weight:700;
  color:var(--navy);cursor:pointer;text-decoration:none;white-space:nowrap}
.cart-btn:hover{border-color:var(--navy)}
.cart-count{min-width:22px;height:22px;border-radius:var(--r-pill);background:var(--yellow);color:var(--navy);
  font-size:.78rem;display:grid;place-items:center;padding:0 6px;font-weight:800}
.cart-count[data-empty="1"]{background:var(--line-2);color:var(--muted)}
@media (max-width:820px){ .head-nav{display:none} }

/* Menu mobile. Sous 820 px la navigation disparaissait sans rien pour la remplacer :
   le bouton et le panneau sont construits par ui.js à partir des liens déjà présents,
   pour n'avoir rien à changer dans les vingt pages. */
.burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  border:1.5px solid var(--line-2);border-radius:var(--r-pill);background:var(--white);
  color:var(--navy);cursor:pointer;padding:0}
.burger:hover{border-color:var(--navy)}
.head-panel{display:none;border-top:1px solid var(--line);background:var(--white)}
.head-panel .wrap{display:flex;flex-direction:column;gap:2px;padding-top:10px;padding-bottom:14px}
.head-panel a{font-family:var(--title);font-weight:700;color:var(--navy);text-decoration:none;
  padding:12px 2px;border-bottom:1px solid var(--line)}
.head-panel a:last-child{border-bottom:0}
.head-panel .btn{margin-top:12px;justify-content:center;border-bottom:0}
/* « .head-panel a » l'emporterait sur « .btn-primary » : navy sur navy, bouton illisible. */
.head-panel a.btn-primary{color:var(--paper)}
@media (max-width:820px){
  .burger{display:inline-flex}
  .site-head.menu-ouvert .head-panel{display:block}
  .site-head .row{gap:12px}
}
/* Sous 560 px, l'appel à la démo quitte le bandeau pour le panneau : à trois éléments,
   le bandeau débordait de 28 px sur un écran de 390 px. */
@media (max-width:560px){
  .head-right>.btn-primary{display:none}
  .cart-btn{padding:10px 14px;gap:8px}
  .site-head .row{height:72px}
  .site-head.is-scrolled .row{height:64px}
}

/* Hero, fond bleu-gris de la DA */
.hero{background:var(--sky);padding:clamp(48px,6vw,84px) 0 clamp(40px,5vw,68px);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center;position:relative;z-index:1}
.hero .h1{color:var(--navy)}
.hero .lede{color:var(--muted)}
.hero-points{margin-top:22px;display:grid;gap:10px}
.hero-points li{position:relative;padding-left:26px;color:var(--muted);font-size:.98rem}
.hero-points li::before{content:'';position:absolute;left:0;top:8px;width:10px;height:10px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 1.5px var(--navy)}
.hero-media{position:relative;min-width:0}
/* Un enfant de grille a min-width:auto : il refuse de passer sous la largeur de son
   contenu et débordait de quelques pixels sur un écran de 390 px. */
.hero-grid>*{min-width:0}
.browser-mock{max-width:100%}
@media (max-width:940px){ .hero-grid{grid-template-columns:1fr} }

/* Simulateur d'estimation de transport (reprend le parcours du produit) */
.estim{background:var(--white);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,28px);box-shadow:var(--shadow);border:1px solid var(--line)}
.estim h3{font-size:1.05rem}
.estim .sub{color:var(--muted);font-size:.86rem;margin-top:2px}
.estim .sub b{color:var(--navy);font-weight:800}
.e-row{display:grid;grid-template-columns:1fr 34px 1fr;gap:10px;align-items:end;margin-top:16px}
.e-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.e-field[hidden]{display:none}
.e-field label{font-family:var(--title);font-weight:700;font-size:.8rem;color:var(--navy)}
.e-field input,.e-field select{width:100%;padding:11px 12px;border:1.5px solid var(--line-2);border-radius:11px;
  font:inherit;font-size:.92rem;color:var(--ink);background:var(--white);min-width:0}
.e-field input:focus,.e-field select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px var(--yellow-100)}
.e-swap{width:34px;height:40px;display:grid;place-items:center;color:var(--muted);font-size:1rem}
.e-hint{color:var(--faint);font-size:.74rem}
.e-label{font-family:var(--title);font-weight:700;font-size:.8rem;color:var(--navy);margin-top:16px;display:block}
.e-opts{display:grid;gap:8px;margin-top:8px}
.e-opt{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line-2);border-radius:12px;padding:11px 13px;
  cursor:pointer;font-size:.9rem;color:var(--ink);transition:.14s;background:var(--white)}
.e-opt:hover{border-color:var(--navy)}
.e-opt input{accent-color:var(--navy);margin:0}
.e-opt.on{border-color:var(--navy);background:var(--yellow-50)}
.e-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.e-foot{margin-top:18px;display:flex;align-items:center;gap:14px;justify-content:flex-end}
.e-need{color:var(--faint);font-size:.78rem;margin-right:auto}
.e-result{margin-top:16px;background:var(--navy);color:var(--sky);border-radius:14px;padding:18px 20px;display:none}
.e-result.on{display:block}
.e-result .er-route{font-family:var(--title);font-weight:900;font-size:1.1rem;color:var(--paper)}
.e-result .er-km{font-size:.82rem;color:var(--line-2);margin-top:3px}
.e-result .er-amt{font-family:var(--title);font-weight:900;font-size:2.2rem;color:var(--yellow);margin-top:10px;white-space:nowrap;line-height:1}
.e-result .er-brk{margin-top:12px;border-top:1px solid var(--navy-600);padding-top:10px;display:grid;gap:5px}
.e-result .er-brk div{display:flex;justify-content:space-between;gap:14px;font-size:.84rem;color:var(--sky)}
.e-result .er-brk b{white-space:nowrap;color:var(--paper)}
.e-result .er-impact{margin-top:12px;border-top:1px solid var(--navy-600);padding-top:10px}
.e-result .er-impact b{display:block;color:var(--yellow);font-family:var(--title);font-size:.92rem}
.e-result .er-impact span{display:block;color:var(--sky);font-size:.82rem;line-height:1.45;margin-top:2px}
.e-legal{color:var(--faint);font-size:.74rem;margin-top:10px;text-align:center}
@media (max-width:560px){ .e-row{grid-template-columns:1fr} .e-swap{display:none} }

/* Mockup navigateur pour les captures produit */
.browser-mock{background:var(--white);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(11,18,46,.4);border:1px solid var(--line)}
.browser-mock .bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:var(--paper);border-bottom:1px solid var(--line)}
.browser-mock .bar span{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.browser-mock img{display:block;width:100%}
.mock-float{position:absolute;box-shadow:0 30px 60px -25px rgba(11,18,46,.4)}

/* Bandeau de logos clients : défilement continu, grands, en couleur */
.logos-wrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.logos-track{display:flex;align-items:center;gap:clamp(40px,6vw,76px);width:max-content;animation:logos-scroll 34s linear infinite}
.logos-wrap:hover .logos-track{animation-play-state:paused}
.logos-track img{height:44px;width:auto;object-fit:contain;flex:0 0 auto}
@keyframes logos-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .logos-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto} }
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(24px,4vw,52px)}
.logos img{height:40px;width:auto;object-fit:contain}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
.soft .step{background:var(--white)}
.dark .step{background:var(--navy-700);border-color:var(--navy-600)}
.dark .step p{color:var(--sky)}
.step-n{font-family:var(--title);font-weight:900;font-size:1.7rem;color:var(--navy);
  background:var(--yellow);width:52px;height:52px;border-radius:14px;display:grid;place-items:center}
.dark .step-n{background:var(--yellow);color:var(--navy)}
@media (max-width:820px){ .steps{grid-template-columns:1fr} }

/* Variante en lignes : trois cartes cote a cote obligent a lire en zigzag et
   prennent trois fois la hauteur qu'il faut. Une ligne par etape, le numero en
   pastille, le titre et la phrase sur la meme ligne. */
.steps.lignes{grid-template-columns:1fr;gap:8px}
.steps.lignes .step{display:flex;align-items:center;gap:16px;padding:14px 20px;border-radius:var(--r)}
.steps.lignes .step-n{flex:none;width:34px;height:34px;border-radius:10px;font-size:.95rem}
.steps.lignes h3{flex:none;font-size:1.05rem;margin:0}
.steps.lignes p{margin:0;font-size:.95rem;line-height:1.45}
@media (max-width:860px){
  .steps.lignes .step{align-items:flex-start;flex-wrap:wrap;row-gap:6px}
  .steps.lignes h3{flex:1 1 auto}
  .steps.lignes p{flex:1 0 100%}
}
/* La premiere etape colle a la promesse qui la precede. */
.petit-haut{padding-top:clamp(18px,2vw,30px)}

/* Feature grid */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;transition:.16s}
.feat-card:hover{border-color:var(--navy);box-shadow:var(--shadow)}
.feat-ico{width:46px;height:46px;border-radius:13px;background:var(--yellow);color:var(--navy);
  display:grid;place-items:center;margin-bottom:14px;font-family:var(--title);font-weight:800;font-size:.9rem}
@media (max-width:940px){ .feat-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .feat-grid{grid-template-columns:1fr} }
/* Cinq sections posent leur nombre de colonnes en style inline, qui bat la requête
   média : sur un écran de 320 px les cartes sortaient de l'écran sans pouvoir être
   atteintes. Le !important est le seul moyen de le reprendre sans rouvrir les pages. */
@media (max-width:620px){ .feat-grid[style]{grid-template-columns:1fr!important} }

/* Checklist avant / après */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.compare-col{border-radius:var(--r-lg);padding:26px}
.compare-col.no{background:var(--paper);border:1px solid var(--line)}
.compare-col.yes{background:var(--yellow);border:1px solid var(--yellow-600)}
.compare-col.yes .compare-row{color:var(--navy)}
.compare-row{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid rgba(11,18,46,.1)}
.compare-row:last-child{border-bottom:none}
.compare-row .mark{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:800}
.no .mark{background:var(--line-2);color:var(--navy)}
.yes .mark{background:var(--navy);color:var(--yellow)}
@media (max-width:760px){ .compare{grid-template-columns:1fr} }

/* Stats, façon cartes de la DA (une grise, une jaune) */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stat-card{background:var(--paper);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;justify-content:space-between;min-height:190px}
.stat-card:nth-child(2){background:var(--yellow)}
.stat-num{font-family:var(--title);font-weight:900;font-size:clamp(2.4rem,4.6vw,3.4rem);color:var(--navy);line-height:1;white-space:nowrap}
.stat-card p{color:var(--navy);font-weight:600;margin-bottom:auto}
.stat-card small{display:block;color:var(--muted);margin-top:8px;font-size:.82rem}
.dark .stat-card{background:var(--navy-700)}
.dark .stat-card:nth-child(2){background:var(--yellow)}
.dark .stat-card:nth-child(2) p,.dark .stat-card:nth-child(2) small,.dark .stat-card:nth-child(2) .stat-num{color:var(--navy)}
.dark .stat-num{color:var(--paper)}
.dark .stat-card p{color:var(--sky)}
@media (max-width:820px){ .stat-grid{grid-template-columns:1fr} }

/* Cards prix */
.cards{display:grid;gap:20px}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1080px){ .cards.c4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:820px){ .cards.c2,.cards.c3,.cards.c4{grid-template-columns:1fr} }

.pcard{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:26px;position:relative;display:flex;flex-direction:column}
.pcard.reco{border-color:var(--navy);box-shadow:var(--shadow)}
.pcard.in{border-color:var(--navy);background:var(--yellow-50)}
.ribbon{position:absolute;top:-13px;left:22px;background:var(--yellow);color:var(--navy);font-family:var(--title);
  font-weight:800;font-size:.78rem;padding:5px 14px;border-radius:var(--r-pill);white-space:nowrap}
.pc-name{font-size:1.2rem}
/* La taille de flotte est ce qui distingue les quatre formules, et la question
   posee par la section. Elle se lit avant le nom, en pastille. */
.pc-cible{display:inline-block;background:var(--paper);color:var(--muted);font-family:var(--title);
  font-weight:700;font-size:.8rem;padding:5px 12px;border-radius:var(--r-pill);margin:6px 0 0;
  border:1px solid var(--line)}
.pcard.in .pc-cible{background:var(--white)}
.pc-price{margin-top:16px;display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.pc-price .amt{font-family:var(--title);font-weight:900;font-size:2.4rem;color:var(--navy)}
.pc-price .cur{font-weight:700;color:var(--muted);font-size:.95rem;white-space:nowrap}
.pc-price .cur small{white-space:nowrap;font-weight:600;margin-left:2px}
/* Économie de l'annuel : prix mensuel barré devant le prix, pastille jaune dessous */
.pc-was{font-family:var(--title);font-weight:700;font-size:1.05rem;color:var(--faint);text-decoration-thickness:2px}
.pc-was:empty{display:none}
.opt-price .pc-was{font-size:.9em;margin-right:6px}
.pc-eco{display:block;margin-top:6px;font-size:.82rem;line-height:1.3}
.pc-eco span{display:inline-block;background:var(--yellow);color:var(--navy);font-family:var(--title);font-weight:800;
  padding:6px 12px;border:1.5px solid var(--navy);border-radius:8px;white-space:nowrap}
.pc-alt:empty{display:none}
.pc-eco span.eng{background:var(--navy);color:var(--paper);border-color:var(--navy)}
.pc-eco button{display:block;margin-top:6px}
.pc-eco button{border:none;background:none;padding:0;cursor:pointer;font:inherit;font-weight:700;color:var(--navy);
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.pc-alt{color:var(--muted);font-size:.85rem;min-height:2.4em;line-height:1.4}
.pc-alt b{color:var(--navy);font-weight:700}
.pc-promise{font-family:var(--title);font-weight:800;color:var(--navy);margin-top:14px;
  background:var(--paper);border-left:3px solid var(--yellow);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:11px 14px;line-height:1.35}
.pcard.in .pc-promise{background:var(--white)}
.pcard.reco .pc-promise{border-left-color:var(--navy)}
.pc-list{margin-top:14px;margin-bottom:20px;display:grid;gap:9px}
.pc-list li{position:relative;padding-left:22px;font-size:.92rem;color:var(--muted)}
.pc-list li::before{content:'✓';position:absolute;left:0;color:var(--navy);font-weight:800}
.pc-list .sous{margin-top:6px;display:grid;gap:5px}
.pc-list .sous li{padding-left:14px;font-size:.9rem}
.pc-list .sous li::before{content:'•';color:var(--muted);font-weight:700}
.pc-note{margin-top:10px;font-size:.82rem;color:var(--faint);font-style:italic}
.pc-foot{margin-top:auto;padding-top:18px}

.opt-card{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:26px;
  display:flex;justify-content:space-between;gap:24px;align-items:center;flex-wrap:wrap}
.opt-card.in{border-color:var(--navy);background:var(--yellow-50)}
.opt-body{flex:1 1 300px}
.opt-act{flex:0 0 220px;text-align:right}
.opt-price{font-family:var(--title);font-weight:800;color:var(--navy);white-space:nowrap}
.opt-price small{display:block;font-weight:500;color:var(--faint);font-family:var(--body);font-size:.78rem;white-space:normal}

.cat-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-bottom:26px}
/* Le mot « Je paie » devant le selecteur : « Mensuel / Annuel » seul ne dit pas
   de quoi on parle, et un transporteur qui arrive sur la page ne devine pas qu'il
   choisit comment il regle. */
.billing-bloc{display:flex;align-items:center;gap:10px;flex:none}
.billing-lbl{font-family:var(--title);font-weight:700;color:var(--muted);font-size:.9rem;white-space:nowrap}
.billing{display:inline-flex;background:var(--white);border:1.5px solid var(--line-2);border-radius:var(--r-pill);padding:4px}
.bopt{border:none;background:transparent;font-family:var(--title);font-weight:700;padding:9px 18px;border-radius:var(--r-pill);
  cursor:pointer;color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap}
.bopt.on{background:var(--navy);color:var(--paper)}
.bopt .save{font-size:.72rem;background:var(--yellow);color:var(--navy);padding:1px 7px;border-radius:var(--r-pill);font-weight:800}

/* Témoignages */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testi-card{background:var(--navy-700);border-radius:var(--r-lg);padding:24px;color:var(--sky);
  position:relative;overflow:hidden;aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end}
.testi-card .dur{position:absolute;top:16px;right:16px;background:var(--yellow);color:var(--navy);font-size:.76rem;font-weight:800;padding:4px 10px;border-radius:var(--r-pill)}
.testi-card .who{font-weight:700;color:var(--paper)}
.testi-card .role{color:var(--sky);font-size:.85rem}
@media (max-width:940px){ .testi-grid{grid-template-columns:1fr} }
.logo-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;max-width:1080px;margin-inline:auto}
.logo-cell{flex:0 0 calc((100% - 6*14px)/7);background:var(--paper);border-radius:var(--r-lg);height:104px;display:flex;align-items:center;justify-content:center;padding:18px 22px}
.logo-cell img{max-height:52px;max-width:100%;width:auto;object-fit:contain}
.logo-grid-reseaux{max-width:800px}
.logo-grid-reseaux .logo-cell{flex-basis:calc((100% - 4*14px)/5);height:84px}
.logo-grid-reseaux .logo-cell img{max-height:40px}
@media (max-width:940px){ .logo-grid .logo-cell,.logo-grid-reseaux .logo-cell{flex-basis:calc((100% - 3*14px)/4)} }
@media (max-width:520px){ .logo-grid{gap:10px} .logo-grid .logo-cell,.logo-grid-reseaux .logo-cell{flex-basis:calc((100% - 10px)/2);height:80px;padding:14px} }

.quote-card{background:var(--navy);border-radius:var(--r-lg);padding:26px;color:var(--sky)}
.quote-card p,.article .quote-card p,.quote-card li,.article .quote-card li{color:var(--sky)}
.quote-card .h3,.quote-card h3,.article .quote-card h3{color:var(--paper)}
.quote-card a,.article .quote-card a{color:var(--yellow);text-decoration:underline}
.quote-card strong,.article .quote-card strong{color:var(--paper)}
.quote-stars{color:var(--yellow);letter-spacing:2px;margin-bottom:8px}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:none;border:none;padding:20px 0;display:flex;justify-content:space-between;
  align-items:center;cursor:pointer;font-family:var(--title);font-weight:700;font-size:1.02rem;color:var(--navy);list-style:none}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:'+';font-size:1.4rem;color:var(--navy);transition:.2s;margin-left:16px}
.faq-item[open] .faq-q::after{content:'−'}
.faq-a{padding:0 0 20px;color:var(--muted);max-width:70ch}

/* Blog */
.post-list{list-style:none;margin:0 auto;padding:0;max-width:960px;display:grid;gap:18px}
.post-row{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:28px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);transition:.16s}
.post-row:hover{border-color:var(--navy);box-shadow:var(--shadow)}
.post-row img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;display:block}
.post-row .cat{color:var(--muted);font-family:var(--title);font-weight:800;font-size:.74rem;text-transform:uppercase;letter-spacing:.1em}
.post-row h3{margin-top:6px;font-size:1.2rem}
.post-row:hover h3{text-decoration:underline;text-underline-offset:3px}
.post-date{display:inline-block;margin-top:10px;padding:3px 10px;border-radius:999px;background:var(--paper);color:var(--muted);font-size:.76rem;font-weight:600;line-height:1.5}
.post-row p{margin-top:10px;color:var(--muted);font-size:.95rem}
.post-row>div{padding:6px 14px 6px 0}
@media (max-width:720px){ .post-row{grid-template-columns:1fr;gap:16px} .post-row>div{padding:0 6px 8px} }

.article{max-width:74ch;margin:0 auto}
.article h2{margin-top:2em;font-size:1.5rem}
.article h3{margin-top:1.6em;font-size:1.2rem}
.article p{margin-top:1.1em;color:var(--ink);font-size:1.05rem;line-height:1.75}
.article ul,.article ol{margin-top:1.1em;padding-left:1.4em;color:var(--ink)}
.article li{margin-top:.5em}
.article a{color:var(--navy);text-decoration:underline}
.article .meta{color:var(--faint);font-size:.9rem}

/* Tables */
.tw{overflow-x:auto}
table.sched,table.cmp{width:100%;border-collapse:collapse;font-size:.92rem}
table.sched th,table.sched td,table.cmp th,table.cmp td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
table.sched .num,table.cmp .num{text-align:right;white-space:nowrap}
table.sched tbody tr.zero{color:var(--faint)}
table.sched tfoot td{border-top:2px solid var(--navy);border-bottom:none;padding-top:10px}
/* L'echeancier fait douze lignes : chacune tient sur une seule ligne de texte,
   le mois ayant sa propre colonne, et respire moins que les tableaux de comparaison. */
table.sched th,table.sched td{padding:6px 12px}
table.sched td.mois{color:var(--faint);white-space:nowrap}

/* Barre panier + page panier */
.cart-bar{position:fixed;left:0;right:0;bottom:-120px;background:var(--navy);color:var(--sky);z-index:70;transition:.25s;
  box-shadow:0 -16px 40px -20px rgba(11,18,46,.5)}
.cart-bar.show{bottom:0}
.cart-bar .row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:16px}
.cb-total{font-family:var(--title);font-weight:900;font-size:1.3rem;color:var(--yellow);white-space:nowrap}
.cb-lbl{color:var(--sky);font-size:.85rem}
.cb-right{display:flex;align-items:center;gap:16px}

/* Le titre et le selecteur de periodicite sur la meme ligne : le selecteur pilote
   toute la page, il n'a pas a etre enterre dans la colonne de gauche. */
.cart-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.cart-head>div:first-child{min-width:0}
.cart-head .billing-bloc{flex:none}
@media (max-width:640px){ .cart-head{flex-wrap:wrap;align-items:flex-start} }
.cart-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:start}
@media (max-width:900px){ .cart-grid{grid-template-columns:1fr} }
.cart-lines{display:grid;gap:14px}
.line{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:flex;align-items:center;gap:10px}
.line>div:first-child{flex:1;min-width:0}
.line-t{font-weight:700;color:var(--navy)}
.line-d{color:var(--muted);font-size:.92rem;margin-top:3px}
.line-p{font-family:var(--title);font-weight:800;color:var(--navy);text-align:right;white-space:nowrap;min-width:104px}
.line-p small{display:block;font-weight:500;color:var(--faint);font-family:var(--body);font-size:.75rem;white-space:nowrap}
.line-p s{color:var(--faint);font-weight:600;margin-right:6px}
.rm{border:none;background:none;color:var(--faint);cursor:pointer;font-size:1rem;padding:0 2px}
/* Changer de formule sans vider puis recomposer son panier. */
.ch-slot{flex:none;width:22px;display:flex;justify-content:flex-end}
.ch{border:none;background:none;color:var(--faint);cursor:pointer;padding:0;display:block;transition:color .14s}
.ch svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.ch:hover{color:var(--navy)}
.mkt-reco.actuelle{background:var(--navy);color:var(--paper)}
.rm:hover{color:#C0392B}
.qty{display:inline-flex;align-items:center;gap:10px}
.qty button{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);background:var(--white);cursor:pointer}
/* Ce qui reste a prendre, propose la ou le panier se regarde. Meme carte blanche
   que les lignes du panier, pour qu'on lise les deux blocs comme un seul objet. */
.suggest-zone{margin-top:34px}
.sugg-h{color:var(--faint);font-weight:700}

/* La question B2P Connect, posee dans le panier : cochee, elle met la formule
   Starter a zero. Elle vit sous les lignes, la ou on regarde ce qu'on paye. */
.b2p-check{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;cursor:pointer;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px}
.b2p-check:hover{border-color:var(--yellow-600)}
.b2p-check input{width:17px;height:17px;accent-color:var(--navy);cursor:pointer;flex:none}
.b2p-check span{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--navy)}
.b2p-check img{height:17px;width:auto}
.b2p-check small{color:var(--faint);font-size:.8rem}
.b2p-check.on{border-color:var(--yellow-600);background:var(--yellow-50)}
.b2p-check[hidden]{display:none}

/* Logo B2P Connect, servi depuis nos propres fichiers : un logo appele chez eux
   casserait le jour ou ils le deplacent, et leur livrerait l'adresse de nos visiteurs. */
/* L'offre B2P Connect : un encadre jaune pale plutot qu'un surlignage, le libelle
   tient sur deux lignes dans une colonne de formule et le surligneur decoupait mal. */
.pc-legende{margin-top:18px;color:var(--faint);font-size:.82rem;font-style:italic;line-height:1.55;max-width:80ch}
.pc-note.b2p{font-style:normal;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin:auto 0 0;background:var(--yellow-50);border:1px solid var(--yellow-600);
  border-radius:var(--r-sm);padding:9px 11px;color:var(--navy);font-weight:600;line-height:1.4}
.pc-note.b2p + .pc-foot{margin-top:0;padding-top:12px}
.pc-note.b2p img{height:18px;width:auto;flex:none}
.soutien{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.soutien img{height:19px;width:auto}

/* Modale. Fond navy translucide plutot que noir, carte blanche, et un maximum de
   hauteur avec defilement interne : sur un portable pose a l'horizontale, la liste
   des arguments sort sinon de l'ecran et le bouton devient injoignable. */
.modale{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:rgba(11,18,46,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:24px}
.modale-carte{position:relative;background:var(--white);border-radius:var(--r-lg);padding:clamp(20px,3vw,32px);
  width:100%;max-width:780px;max-height:calc(100vh - 48px);overflow:auto;box-shadow:var(--shadow)}
.modale-fermer{position:absolute;top:14px;right:16px;border:none;background:none;color:var(--faint);
  font-size:1rem;cursor:pointer;padding:4px}
.modale-fermer:hover{color:var(--navy)}
.modale-lede{margin-top:8px;color:var(--muted);line-height:1.55}
.modale-liste{margin:16px 0 0;padding:0;list-style:none}
.modale-liste li{padding:9px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:1rem;line-height:1.55}
.modale-liste li b{color:var(--navy);display:block;margin-bottom:2px}
.modale-liste li span{display:block;position:relative;padding-left:22px}
.modale-liste li span::before{content:'✓';position:absolute;left:0;color:var(--navy);font-weight:800}
.modale-label{display:block;margin-top:22px;font-family:var(--title);font-weight:700;color:var(--navy)}

/* Courbes. Le trace est peint ici et non dans des attributs SVG : var() ne
   fonctionne pas dans un attribut de presentation, aucun navigateur ne l'accepte. */
.mkt-graphes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.mkt-g{margin:0;background:var(--paper);border-radius:var(--r);padding:12px 14px 8px}
.mkt-g figcaption{font-size:.78rem;font-weight:700;color:var(--navy);margin-bottom:8px;line-height:1.3}
.mkt-g svg{display:block;width:100%;height:42px;overflow:visible}
.mkt-g .trait{fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mkt-g .bout{fill:var(--yellow);stroke:var(--navy);stroke-width:2}
/* Les trois tons du deck Bary : navy, ardoise, jaune fluo. Une courbe par ton,
   chacune sous son propre titre : la couleur ne porte jamais l'information seule. */
.t-jaune .aire{fill:var(--yellow-100)}
.t-ardoise .aire{fill:var(--line-2)}
.t-ardoise .trait{stroke:var(--pill-dark)}
.t-ardoise .bout{fill:var(--sky);stroke:var(--pill-dark)}
.t-fluo .aire{fill:var(--yellow)}
.modale-legende{margin-top:10px;color:var(--faint);font-size:.76rem;font-style:italic;line-height:1.45}

/* Trois formules cliquables plutot qu'une liste deroulante : le menu natif est
   dessine par le systeme, il ne suit ni la DA ni la meme apparence d'un navigateur
   a l'autre. */
.mkt-formules{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.modale-carte.large{max-width:1000px}
.modale-actions{display:flex;justify-content:center;gap:10px;margin-top:20px;flex-wrap:wrap}
.modale-actions .btn{padding:12px 24px}
@media (max-width:520px){ .modale-actions{flex-direction:column} .modale-actions .btn{width:100%} }
.mkt-f{position:relative;text-align:left;background:var(--white);border:1.5px solid var(--line-2);
  border-radius:var(--r);padding:14px;cursor:pointer;font:inherit;transition:.14s;display:block;width:100%}
.mkt-f:hover{border-color:var(--navy)}
.mkt-f.on{border-color:var(--navy);background:var(--yellow-50);box-shadow:var(--shadow-sm)}
.mkt-f:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.mkt-reco{position:absolute;top:-9px;right:10px;background:var(--yellow);color:var(--navy);
  font-size:.66rem;font-weight:800;padding:2px 8px;border-radius:var(--r-pill);letter-spacing:.02em}
.mkt-f-nom{display:block;font-family:var(--title);font-weight:800;color:var(--navy);font-size:1.2rem}
.mkt-f-prix{display:block;font-family:var(--title);font-weight:900;color:var(--navy);margin-top:6px;
  white-space:nowrap;font-size:1.5rem}
.mkt-f-prix small{font-weight:600;color:var(--muted);font-family:var(--body);font-size:.9rem;margin-left:2px}
.mkt-f-cible{display:block;color:var(--muted);font-size:.9rem;margin-top:4px}
.mkt-f .pc-list{margin-top:12px;gap:8px}
.mkt-f-note{display:block;color:var(--faint);font-size:.82rem;margin-top:10px;font-style:italic}
@media (max-width:860px){ .mkt-formules{grid-template-columns:repeat(2,1fr)!important} }
@media (max-width:640px){
  .mkt-graphes{grid-template-columns:1fr}
  .mkt-formules{grid-template-columns:1fr!important}
  .mkt-reco{top:-9px;right:12px}
}
.modale-cta{width:100%;margin-top:18px}
.modale-carte.devis{max-width:520px}
/* Le recapitulatif du devis : chaque ligne avec son rythme et son montant, puis
   les deux totaux. C'est le document que le chargeur va transmettre, il doit se
   lire sans le panier a cote. */
.devis-recap{background:var(--paper);border-radius:var(--r);padding:4px 16px;margin-top:16px}
.devis-l{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--line)}
.devis-l:last-child{border-bottom:none}
.devis-l span{color:var(--navy);font-weight:600;line-height:1.3}
.devis-l span small{display:block;color:var(--faint);font-weight:400;font-size:.78rem;margin-top:2px}
.devis-l b{font-family:var(--title);font-weight:800;color:var(--navy);white-space:nowrap;text-align:right}
.devis-l b small{display:block;font-family:var(--body);font-weight:500;color:var(--faint);font-size:.75rem}
.devis-l.cle{border-top:1.5px solid var(--navy);border-bottom:none;padding-top:12px}
.devis-l.cle span{font-family:var(--title)}
.devis-l.total b{background:var(--yellow);padding:0 6px;border-radius:3px}
.devis-mentions{margin-top:12px;color:var(--faint);font-size:.76rem;font-style:italic;line-height:1.5}
.modale-carte.devis .modale-cta{margin-top:10px}
.modale-input{width:100%;margin-top:8px;padding:12px 14px;border:1.5px solid var(--line-2);border-radius:var(--r);
  background:var(--white);color:var(--navy);font:inherit}
.modale-input:focus-visible{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
.devis-erreur{margin-top:8px;color:#C0392B;font-size:.85rem}
.lien-nu{border:none;background:none;padding:0;font:inherit;font-size:.85rem;color:var(--muted);
  text-decoration:underline;cursor:pointer}
.lien-nu:hover{color:var(--navy)}
.modale-note{margin-top:12px;text-align:center;font-size:.85rem}
.modale-note a{color:var(--muted)}

/* Une ligne par option, pleine largeur : la meme forme que les lignes du panier
   juste au-dessus, en sourdine. On lit « ce que j'ai » puis « ce que je pourrais
   avoir » sans changer de grammaire visuelle. */
.sugg-grid{display:flex;flex-direction:column;gap:8px}
/* En sourdine tant que ce n'est pas pris : meme carte blanche que les lignes du
   panier, on ne saurait plus ce qu'on a deja choisi. Le survol la ramene au
   premier plan, comme un aperçu de ce qu'elle deviendrait dans le panier. */
.sugg{background:transparent;border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;transition:.16s}
.sugg>div:first-child{flex:1;min-width:0}
/* Tout le texte de la carte descend a --faint, le gris le plus clair qui reste
   lisible sur ce fond (4,5:1). Seul le bouton garde le navy : c'est lui qu'on
   vient chercher. Plus clair que ca, la carte deviendrait illisible. */
.sugg-t{font-weight:700;color:var(--faint);transition:.16s}
.sugg-d{color:var(--faint);font-size:.92rem;margin-top:3px;line-height:1.45;transition:.16s}
.sugg-foot{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex:none}
@media (max-width:560px){ .sugg{flex-direction:column;align-items:stretch;gap:12px} .sugg-foot{justify-content:space-between} }
.sugg-p{font-family:var(--title);font-weight:800;color:var(--faint);white-space:nowrap;transition:.16s}
.sugg-p small{font-weight:500;color:var(--faint);font-family:var(--body);font-size:.75rem}
.sugg .btn{padding:9px 18px}
.sugg:hover,.sugg:focus-within{background:var(--white);border-color:var(--navy);box-shadow:var(--shadow-sm)}
.sugg:hover .sugg-t,.sugg:focus-within .sugg-t,
.sugg:hover .sugg-p,.sugg:focus-within .sugg-p{color:var(--navy)}
.sugg:hover .sugg-d,.sugg:focus-within .sugg-d{color:var(--muted)}

.empty{background:var(--paper);border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:40px;text-align:center;color:var(--muted)}
.summary{background:var(--navy);color:var(--sky);border-radius:var(--r-lg);padding:26px;position:sticky;top:96px}
.summary h3{color:var(--paper)}
.summary a:not(.btn){color:var(--yellow)}
/* Le rappel de la plateforme manquante, dans la carte de resume : jaune sur navy,
   c'est la seule chose a regler avant de parler chiffres. */
.sum-alerte{margin-top:14px;background:var(--navy-700);border:1px solid var(--yellow);border-radius:var(--r);
  padding:14px 16px;display:grid;gap:12px}
.sum-alerte span{color:var(--paper);font-size:.88rem;line-height:1.45}
.sum-alerte .btn{width:100%}
.sum-block{margin-top:14px}
.sum-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--navy-600);gap:14px}
.sum-row span small{display:block;color:var(--sky);font-size:.78rem}
.sum-row b{white-space:nowrap;color:var(--paper)}
.sum-row b small{display:block;font-weight:500;color:var(--sky);font-size:.75rem;white-space:nowrap}
.sum-key{display:flex;justify-content:space-between;padding:16px 0 6px;font-weight:700;color:var(--paper);gap:14px}
.sum-key b{white-space:nowrap}
.sum-total{display:flex;justify-content:space-between;padding-top:6px;color:var(--yellow);font-size:.92rem;gap:14px}
.sum-total b{white-space:nowrap}
.sum-note{margin-top:12px;color:var(--sky);font-size:.8rem;line-height:1.5}
.summary .btn,.cart-bar .btn{padding:12px 22px;font-size:1.02rem}
.sum-cta{display:flex;flex-direction:column;gap:10px;margin:18px auto 0;max-width:330px}
.sum-copie{display:block;margin:14px auto 0;color:var(--sky);font-size:.8rem}
.sum-copie:hover{color:var(--yellow)}

/* Footer, fond navy, texte bleu-gris */
.f{background:var(--navy);color:var(--sky);padding:52px 0 34px;font-size:.9rem;position:relative;overflow:hidden}
.f .wrap{position:relative;z-index:1}
.f a{color:var(--sky);text-decoration:none}
.f a:hover{color:var(--paper);text-decoration:underline}
.f-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px}
.f-col h4{color:var(--paper);font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}
.f-col a{display:block;padding:5px 0;color:var(--sky)}
.f-bottom{margin-top:40px;padding-top:24px;border-top:1px solid var(--navy-600);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.f-end{display:flex;align-items:center;gap:20px}
.f-end .btn{padding:9px 18px;font-size:.88rem}
@media (max-width:820px){ .f-grid{grid-template-columns:1fr 1fr} }

@media (max-width:560px){
  .hero{padding-top:36px}
  .cat-head{align-items:flex-start}
}

/* Formulaire (page démo) */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px);box-shadow:var(--shadow)}
.form-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-top:16px;display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--title);font-size:.86rem;font-weight:700;color:var(--navy)}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line-2);
  border-radius:11px;font:inherit;color:var(--ink);background:var(--white);transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px var(--yellow-100)}
.field textarea{resize:vertical}
.form-note{margin-top:12px;color:var(--faint);font-size:.8rem;text-align:center}
@media (max-width:760px){ .form-row2{grid-template-columns:1fr} }

/* Étiquettes et badges */
.tag{display:inline-block;font-size:.75rem;font-weight:700;color:var(--muted);background:var(--paper);border:1px solid var(--line);padding:4px 10px;border-radius:var(--r-pill);white-space:nowrap}
.pcard .cat-badge{position:absolute;left:14px;top:14px;background:var(--yellow);color:var(--navy);font-family:var(--title);font-weight:800;font-size:.72rem;padding:5px 12px;border-radius:var(--r-pill);letter-spacing:.02em;white-space:nowrap}

/* Équipe (manifesto) */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tm{text-align:center}
.tm img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-lg);margin-bottom:10px;background:var(--paper)}
.tm b{display:block;color:var(--navy);font-size:.96rem}
.tm span{display:block;color:var(--muted);font-size:.82rem;margin-top:2px}
.dark .tm b{color:var(--paper)}
.dark .tm span{color:var(--sky)}
@media (max-width:820px){ .team-grid{grid-template-columns:repeat(2,1fr)} }
.founders{display:inline-flex;align-items:center;gap:16px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-pill);padding:10px 20px 10px 10px}
.f-photos{display:flex}
.f-photos img{width:54px;height:54px;border-radius:50%;object-fit:cover;border:3px solid var(--white);box-shadow:0 0 0 1px var(--line)}
.f-photos img+img{margin-left:-16px}
.f-txt strong{display:block;color:var(--navy);font-family:var(--title)}
.f-txt span{color:var(--muted);font-size:.86rem}

@media (max-width:700px){ h1[style*="nowrap"]{white-space:normal !important} }

/* Un titre placé dans une colonne du hero dispose de moins de largeur :
   on le calibre pour qu'il tienne sur deux lignes au lieu de trois. */
.hero-grid .h1{font-size:clamp(2rem,3.5vw,3rem)}
.hero-grid .h2{font-size:clamp(1.6rem,2.6vw,2.2rem)}

/* Filet de progression sous le menu : montre où on en est dans la page. */
.scrollbar{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--navy);
  transition:width .08s linear;pointer-events:none}

/* Onglet actif du menu */
.head-nav a[aria-current="page"]{color:var(--navy);font-weight:700;position:relative}
.head-nav a[aria-current="page"]::after{content:'';position:absolute;left:0;right:0;bottom:-6px;
  height:3px;border-radius:2px;background:var(--navy)}

/* Réponses de FAQ : colonne de lecture plus large, moins de retours à la ligne */
.faq-a{max-width:92ch}
.faq{max-width:none}

/* Un paragraphe de corps de page garde la même typo que ses voisins */
.body-txt{font-size:1.05rem;color:var(--muted);line-height:1.7;max-width:64ch}

/* Une carte seule occupe toute la largeur disponible */
.cards.full{grid-template-columns:1fr}
.cards.full .opt-card{width:100%}

/* Le texte courant doit rester lisible quand la section est sur fond sombre. */
.dark .body-txt{color:var(--sky)}

/* Capture de hero : le bas de l'écran source est vide, on cadre sur la partie utile
   et on rend le mockup plus large que haut pour équilibrer la colonne de texte. */
.mock-crop img{aspect-ratio:4/3;object-fit:cover;object-position:center top}
@media (max-width:940px){ .mock-crop img{aspect-ratio:16/10} }

/* Barre panier : le montant se lit juste avant le bouton qui y mène. */
.cb-amount{text-align:right}

/* Page panier : un récapitulatif se lit d'un coup d'œil, on resserre les hauteurs de moitié. */
.sched-note{margin-top:18px;color:var(--faint);font-size:.78rem;font-style:italic;line-height:1.5}

/* Fond gris et cartes blanches : sans ce contraste, les lignes du panier et
   l'echeancier flottaient sur un fond de la meme couleur qu'eux. */
.page-panier{background:var(--paper)}
/* Sur la page panier, la pastille se prolonge vers le bas par une pointe : ce
   qu'on ajoute tombe la-dedans, et ce qui est dedans se lit juste en dessous.
   Un carre tourne a 45 degres, de la meme couleur et avec les deux memes bords
   que la pastille, dont la moitie haute passe derriere elle. */
.page-panier .cart-btn::before{content:'';position:absolute;left:50%;bottom:-2px;width:15px;height:4px;
  background:var(--white);transform:translateX(-50%);z-index:1}
.page-panier .cart-btn::after{content:'';position:absolute;left:50%;bottom:-7px;width:13px;height:13px;
  background:var(--white);border-right:1.5px solid var(--line-2);border-bottom:1.5px solid var(--line-2);
  border-bottom-right-radius:3px;transform:translateX(-50%) rotate(45deg);z-index:2}
.page-panier .cart-btn:hover::after{border-right-color:var(--navy);border-bottom-color:var(--navy)}
/* La page se lit en deux temps : la selection sur le gris, l'echeancier sur une
   bande blanche pleine largeur. */
.page-panier .bande-blanche{background:var(--white)}
/* En-tete et pied du tableau en navy : le tableau repond a la carte de resume au
   lieu d'etre une grille grise de plus. */
.page-panier table.sched thead th{background:var(--navy);color:var(--sky);border-bottom:none}
.page-panier table.sched thead th:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.page-panier table.sched thead th:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
.page-panier table.sched tfoot td{background:var(--navy);color:var(--paper);border-top:none;padding-top:10px}
.page-panier table.sched tfoot td:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.page-panier table.sched tfoot td:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
.page-panier .section{padding:clamp(23px,3vw,42px) 0}
.page-panier .mt-l{margin-top:16px}
.page-panier .mt-m{margin-top:9px}
.page-panier .mt-s{margin-top:5px}
.page-panier .cart-grid{gap:14px}
.page-panier .cart-lines{gap:8px}
.page-panier .line{padding:11px 14px}
.page-panier .summary{padding:16px 18px}
.page-panier .sum-block{margin-top:8px}
.page-panier .sum-row{padding:6px 0}
.page-panier .sum-key{padding:9px 0 4px}
.page-panier .sum-note{margin-top:8px}

/* Simulateur : une colonne par choix, chacune portant ce qui la concerne. */
.e-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.e-choice{border:1.5px solid var(--line-2);border-radius:12px;padding:11px 13px;background:var(--white);
  transition:.14s;display:flex;flex-direction:column}
.e-choice:hover{border-color:var(--navy)}
.e-choice:has(.e-opt.on){border-color:var(--navy);background:var(--yellow-50)}
.e-choice .e-opt{border:none;border-radius:0;padding:0;background:transparent}
.e-choice .e-opt.on{background:transparent}
.e-choice-sub{margin-top:10px}
.e-choice-sub label{font-size:.74rem}
.e-choice-note{margin-top:10px;color:var(--faint);font-size:.78rem;line-height:1.4;margin-bottom:auto}
@media (max-width:560px){ .e-choices{grid-template-columns:1fr} }

/* Marchandise non conditionnée : on reprend la saisie du produit, dimensions puis
   quantités, avec le récapitulatif que le chargeur lit avant de demander son prix. */
.e-step[hidden]{display:none}
.e-vrac{margin-top:10px;border:1.5px solid var(--line-2);border-radius:12px;
  padding:12px 13px;background:var(--paper)}
.e-dims{display:grid;grid-template-columns:1fr 1fr 1fr .8fr;gap:8px}
.e-dims.two{grid-template-columns:1fr 1fr;margin-top:10px}
.e-dims .e-field label{font-size:.74rem}
.e-metrics{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:11px;padding-top:10px;
  border-top:1px solid var(--line);font-size:.78rem;color:var(--faint)}
.e-metrics b{color:var(--navy);font-weight:800}
/* Une option cochée ouvre la précision qu'elle appelle, et rien de plus. */
.e-opt-sub{margin:-2px 0 2px;padding-left:13px}
.e-opt-sub label{font-size:.74rem}
@media (max-width:560px){ .e-dims{grid-template-columns:1fr 1fr} .e-dims.two{grid-template-columns:1fr} }


/* Vider le panier. Il etait invisible deux fois : efface par defaut, et ecrit dans
   un bleu a 3,15:1 sur le navy quand il apparaissait. Il est lisible en permanence. */
.cb-clear{display:block;margin-left:auto;border:none;background:none;padding:2px 0;
  font:inherit;font-size:.78rem;color:var(--sky);text-decoration:underline;
  cursor:pointer;transition:color .14s}
.cb-clear:hover{color:var(--yellow)}

/* Sur fond sombre, le bleu marine du CTA disparaîtrait : il y reprend le jaune. */
.dark .btn-primary,.f .btn-primary,.summary .btn-primary,.cart-bar .btn-primary,.quote-card .btn-primary,.simu-res .btn-primary{
  background:var(--yellow);color:var(--navy)}
.dark .btn-primary:hover,.f .btn-primary:hover,.summary .btn-primary:hover,.cart-bar .btn-primary:hover,.simu-res .btn-primary:hover,
.quote-card .btn-primary:hover{background:var(--yellow-600)}

/* Logo deux fois plus grand à l'arrivée, il reprend sa taille dès qu'on scrolle. */
.brand img{height:56px;transition:height .22s ease}
.site-head .row{transition:height .22s ease}
.site-head.is-scrolled .row{height:72px}
.site-head.is-scrolled .brand img{height:28px}
@media (prefers-reduced-motion:reduce){ .brand img,.site-head .row{transition:none} }

/* Le simulateur garde son bouton jaune : c'est le seul geste attendu dans la carte. */
.estim .btn-primary{background:var(--yellow);color:var(--navy)}
.estim .btn-primary:hover{background:var(--yellow-600)}

/* Les deux CTA de l'accueil tiennent sur une seule ligne, et ne se cassent
   qu'en dessous de la largeur où ils ne rentrent plus du tout. */
.cta-row{display:flex;gap:12px;flex-wrap:nowrap}
.cta-row .btn{white-space:nowrap}
@media (max-width:620px){ .cta-row{flex-wrap:wrap} }

/* ==========================================================================
   Simulateur. Repris de la landing /bary/simulateur, rhabille aux composants
   et aux couleurs du site : formulaire a gauche, resultat sur une carte navy
   collante a droite, hypotheses repliees.
   ========================================================================== */
.simu-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start}
@media (max-width:940px){ .simu-grid{grid-template-columns:1fr} }

.simu-form{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(18px,2.4vw,26px)}
.preset{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.preset-lab{font-family:var(--title);font-weight:700;color:var(--muted);font-size:.9rem;margin-right:2px}
.pb{border:1.5px solid var(--line-2);background:var(--white);color:var(--navy);font:inherit;font-family:var(--title);
  font-weight:700;font-size:.88rem;padding:8px 14px;border-radius:var(--r-pill);cursor:pointer;transition:.14s}
.pb:hover{border-color:var(--navy)}
.pb.on{background:var(--navy);color:var(--paper);border-color:var(--navy)}

.simu-champ{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--line)}
.simu-champ:last-child{border-bottom:none}
.simu-champ label{color:var(--navy);font-weight:600;line-height:1.35}
.simu-champ label small{display:block;color:var(--faint);font-weight:400;font-size:.82rem;margin-top:3px;line-height:1.4}
.simu-in{display:inline-flex;align-items:center;gap:6px;flex:none}
.simu-in input{width:112px;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--white);color:var(--navy);font:inherit;font-family:var(--title);font-weight:700;text-align:right}
.simu-in input:focus-visible{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
.simu-in .u{color:var(--muted);font-size:.85rem;white-space:nowrap;min-width:38px}

.simu-hyp summary{cursor:pointer;font-family:var(--title);font-weight:700;color:var(--navy);padding:12px 0;
  border-top:1px solid var(--line)}
.hyp-titre{margin:16px 0 8px;font-family:var(--title);font-weight:700;color:var(--muted);font-size:.85rem;
  text-transform:uppercase;letter-spacing:.06em}
.hyp-grille{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
@media (max-width:620px){ .hyp-grille{grid-template-columns:1fr} }
.hyp-champ{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hyp-champ label{color:var(--muted);font-size:.88rem;line-height:1.35}
.hyp-champ .simu-in input{width:82px;padding:7px 9px;font-size:.9rem}
.hyp-champ .simu-in .u{font-size:.78rem;min-width:44px}

.simu-res{background:var(--navy);color:var(--sky);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,28px);
  position:sticky;top:96px}
.simu-scope{color:var(--sky);font-size:.9rem;line-height:1.5}
.simu-scope b{color:var(--paper)}
.simu-gain{margin-top:18px;background:var(--navy-700);border-radius:var(--r);padding:18px 20px;
  border:1px solid var(--yellow)}
.simu-gain .lab{display:block;color:var(--sky);font-size:.92rem}
.simu-gain .big{display:block;font-family:var(--title);font-weight:900;font-size:clamp(2rem,4vw,2.8rem);
  color:var(--yellow);line-height:1.1;margin-top:4px;white-space:nowrap}
.simu-gain .per{color:var(--sky);font-size:.92rem}
.simu-gain .yr,.simu-gain .hrs{display:block;color:var(--sky);font-size:.88rem;margin-top:6px}
.simu-gain .yr b,.simu-gain .hrs b{color:var(--paper)}

.simu-cmp{display:flex;align-items:center;gap:12px;margin-top:18px}
.simu-cmp>div{flex:1;background:var(--navy-700);border-radius:var(--r);padding:12px 14px}
.simu-cmp .k{display:block;color:var(--sky);font-size:.8rem}
.simu-cmp .v{display:block;font-family:var(--title);font-weight:800;color:var(--paper);margin-top:2px;white-space:nowrap}
.simu-cmp .b .v{color:var(--yellow)}
.simu-cmp .fl{color:var(--line-2);font-size:1.2rem}

.simu-detail{margin-top:18px}
.simu-detail summary{cursor:pointer;color:var(--sky);font-size:.9rem;padding:10px 0;border-top:1px solid var(--navy-600)}
.simu-detail .rgroup{margin:12px 0 4px;color:var(--line-2);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.simu-detail .rrow{display:flex;justify-content:space-between;gap:14px;padding:6px 0;font-size:.88rem;color:var(--sky)}
.simu-detail .rrow b{color:var(--paper);white-space:nowrap}
.simu-note{margin-top:16px;color:var(--line-2);font-size:.78rem;font-style:italic;line-height:1.5}
.simu-cta{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.simu-res .btn{width:100%}

/* Bas de la page panier : l'echeancier et le retour sur investissement se
   partagent la largeur. */
.bas-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:start}
@media (max-width:1000px){ .bas-grid{grid-template-columns:1fr} }
.bas-grid{position:relative}
@media (min-width:1001px){
  .bas-grid #roiBox{padding-left:26px;border-left:2px dashed var(--line-2)}
}
.roi-card{padding:0}
.roi-champs{display:grid;gap:10px}
.roi-champ{display:flex;align-items:center;justify-content:space-between;gap:12px}
.roi-champ label{color:var(--navy);font-size:.9rem;font-weight:600;line-height:1.35}
.roi-card .simu-in input{width:104px}
.roi-card .simu-in .u{color:var(--muted);min-width:16px;text-align:left}
.roi-cta{display:block;width:fit-content;margin:16px auto 0}
.roi-hyp{margin-top:16px}
.roi-hyp summary{cursor:pointer;font-family:var(--title);font-weight:700;color:var(--navy);
  padding:11px 0;border-top:1px solid var(--line);font-size:.92rem}
.roi-hyp .hyp-titre{margin:14px 0 8px}
.roi-hyp .roi-champ label{font-weight:400;color:var(--muted);font-size:.86rem}
.roi-hyp .simu-in input{width:78px;padding:7px 9px;font-size:.9rem}
.roi-hyp .simu-in .u{font-size:.78rem;min-width:44px}
.roi-res{margin-top:16px;background:var(--yellow-50);border:1.5px solid var(--yellow-600);border-radius:var(--r);padding:16px 18px}
.roi-res .k{display:block;color:var(--muted);font-size:.88rem}
.roi-res b{display:block;font-family:var(--title);font-weight:900;font-size:1.9rem;color:var(--navy);
  line-height:1.15;margin-top:2px;white-space:nowrap}
.roi-res b small{font-family:var(--body);font-weight:500;font-size:.85rem;color:var(--muted);margin-left:8px}
.roi-res .an{display:block;color:var(--muted);font-size:.85rem;margin-top:4px}
.roi-lignes{margin-top:14px;display:grid;gap:2px}
.roi-lignes div{display:flex;justify-content:space-between;gap:14px;padding:7px 0;
  border-bottom:1px solid var(--line);font-size:.88rem;color:var(--muted)}
.roi-lignes div:last-child{border-bottom:none}
.roi-lignes b{color:var(--navy);white-space:nowrap}
.roi-note{margin-top:14px;color:var(--faint);font-size:.78rem;font-style:italic;line-height:1.5}
.roi-note a{color:var(--muted)}


/* Impression. La page se replie sur le seul recapitulatif : un devis qu'on
   transmet ne contient ni menu, ni suggestions, ni pied de page. */
#devisImpression{display:none}
@media print{
  body{background:#fff}
  .site-head,.cart-bar,.f,.modale,#suggestBox,#roiBox,.cart-head,.cart-grid,#scheduleBox,
  .sched-note,.b2p-check,.bas-grid{display:none !important}
  #devisImpression{display:block;padding:0;color:#0B122E;font-family:Arial,Helvetica,sans-serif}
  #devisImpression .di-logo{height:34px;width:auto}
  #devisImpression h1{font-size:20pt;margin:18px 0 2px}
  #devisImpression .di-date{color:#535A78;font-size:10pt;margin:0 0 18px}
  #devisImpression table{width:100%;border-collapse:collapse;font-size:11pt}
  #devisImpression th{text-align:left;border-bottom:2px solid #0B122E;padding:8px 6px;font-size:9pt;
    text-transform:uppercase;letter-spacing:.06em}
  #devisImpression td{padding:9px 6px;border-bottom:1px solid #D7DCE8;vertical-align:top}
  #devisImpression .n{text-align:right;white-space:nowrap}
  #devisImpression .di-d{color:#666D8C;font-size:9pt}
  #devisImpression tfoot td{border-bottom:none;border-top:2px solid #0B122E;font-size:12pt}
  #devisImpression .di-m{color:#535A78;font-size:9pt;line-height:1.5;margin-top:16px}
  @page{margin:16mm}
}


/* Les mentions de reserve portent toutes le meme « i » entoure, dessine en CSS
   plutot qu'avec un caractere : la pastille ronde n'existe pas dans toutes les
   polices, et elle y change de taille d'un systeme a l'autre. */
.pc-note:not(.b2p),.sched-note,.roi-note,.simu-note,.modale-legende,.mkt-f-note{
  display:flex;align-items:flex-start;gap:7px}
.pc-note:not(.b2p)::before,.sched-note::before,.roi-note::before,.simu-note::before,
.modale-legende::before,.mkt-f-note::before{
  content:'i';flex:none;width:15px;height:15px;margin-top:.15em;border:1.2px solid currentColor;
  border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;
  font-size:.66rem;line-height:1;font-family:var(--title)}


/* La tresorerie se distingue de la marge : meme forme, ton plus sobre, et une
   phrase qui dit ce que c'est. Un encaissement anticipe n'est pas un benefice. */

/* Lien « Notre histoire » du pied de page, mis en avant en jaune fluo (demande PA, 23/09). */
.f-col a.f-fluo{color:var(--yellow);font-weight:700}


/* Articles, cas clients et pages legales repris de l'ancien WordPress (02/10) :
   images, tableaux, videos et boutons du contenu d'origine. */
.art-hero{width:100%;margin-top:28px;margin-bottom:-24px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.article img{max-width:100%;height:auto;border-radius:var(--r-lg);margin-top:1.4em}
.article figure{margin:1.4em 0 0}
.article video{width:100%;border-radius:var(--r-lg);margin-top:1.4em;background:var(--navy)}
.art-video{position:relative;aspect-ratio:16/9;margin-top:1.4em;border-radius:var(--r-lg);overflow:hidden}
.art-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.article p.art-cta{margin-top:1.6em}
.article p.art-cta a.btn{text-decoration:none}
.article table{width:100%;border-collapse:collapse;margin-top:1.4em;font-size:.95rem;display:block;overflow-x:auto}
.article td,.article th{border:1px solid var(--line);padding:10px 12px;vertical-align:top;text-align:left}
.article tr:first-child td{background:var(--soft,#EEF0F4);font-weight:600;color:var(--navy)}
.article .faq{margin-top:1.4em}
.article .faq-a p{margin-top:0;font-size:1rem;color:var(--muted)}
.f-legal{display:flex;gap:16px;flex-wrap:wrap;font-size:.88rem}
.f-legal a{color:inherit;opacity:.85}
.f-legal a:hover{opacity:1;text-decoration:underline}

/* Formulaires HubSpot des aimants a prospects (calculateur, cas clients) */
.calc-form{background:var(--navy);color:var(--paper);border-radius:var(--r-lg);padding:clamp(24px,4vw,40px)}
.calc-form .h3{color:var(--paper)}
/* Formulaires HubSpot sur fond navy : la feuille de HubSpot passe après la nôtre, d'où les !important */
.calc-form .hs-form label,.calc-form .hs-form label span,.calc-form .hs-form legend,.calc-form .hs-form .hs-richtext,.calc-form .hs-form .hs-richtext p{color:var(--sky)!important;font-size:.9rem!important;font-family:inherit!important}
.calc-form .hs-form .hs-form-required{color:var(--yellow)!important}
.calc-form .hs-form .hs-input:not([type=checkbox]):not([type=radio]){width:100%!important;box-sizing:border-box!important;padding:12px 14px!important;border-radius:var(--r-sm)!important;border:1px solid var(--navy-600)!important;background:var(--paper)!important;color:var(--ink)!important;margin:6px 0 12px!important;font:inherit!important;height:auto!important;box-shadow:none!important}
.calc-form .hs-form textarea.hs-input{min-height:120px!important}
.calc-form .hs-form .hs-input:focus{outline:2px solid var(--yellow)!important;outline-offset:1px!important;border-color:var(--yellow)!important}
.calc-form .hs-form .hs-input::placeholder{color:var(--faint)!important}
.calc-form .hs-form fieldset{max-width:none!important}
.calc-form .hs-form .hs-button,.calc-form .hs-form input[type=submit]{background:var(--yellow)!important;color:var(--navy)!important;border:0!important;border-radius:var(--r-pill)!important;padding:14px 28px!important;font:inherit!important;font-weight:700!important;cursor:pointer!important;box-shadow:none!important;text-shadow:none!important;margin-top:8px!important}
.calc-form .hs-form .hs-button:hover{background:var(--yellow-600)!important}
.calc-form .hs-error-msgs{list-style:none;padding:0;margin:0 0 8px}
.calc-form .hs-error-msgs label,.calc-form .hs-error-msg,.calc-form .hs-main-font-element{color:var(--yellow)!important;font-size:.85rem!important}
.calc-form .submitted-message,.calc-form .submitted-message p{color:var(--paper)!important}
.article .calc-form{margin-top:2em}
.article .calc-form p.h3{margin-top:0;color:var(--paper)}
.article a.btn-primary{color:var(--paper);text-decoration:none}
.guide-chiffres{list-style:none;padding:0;display:flex;gap:28px;flex-wrap:wrap}
.guide-chiffres li{color:var(--muted)}
.guide-chiffres strong{display:block;font-family:var(--title);font-weight:900;font-size:2.2rem;color:var(--navy);line-height:1}
.article p,.article li,.article td{overflow-wrap:break-word}
.article p.art-cta a.btn{white-space:normal;max-width:100%;text-align:center;height:auto}

/* équipe : cartes cliquables, initiales quand il n'y a pas de photo, fiche membre */
a.tm{text-decoration:none;color:inherit;transition:transform .2s}
a.tm:hover{transform:translateY(-3px)}
a.tm:hover b{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:3px}
.tm-ini{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;border-radius:var(--r-lg);margin-bottom:10px;
  background:var(--navy);color:var(--yellow);font-family:var(--title);font-weight:900;font-size:clamp(1.8rem,4vw,3rem)}
.crumbs{font-size:.88rem;color:var(--muted)}
.crumbs a{color:var(--navy)}
.mbr{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.mbr-visuel img,.mbr-visuel .tm-ini{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);margin:0}
.mbr-visuel .tm-ini{font-size:clamp(3rem,9vw,6rem)}
@media (max-width:820px){ .mbr{grid-template-columns:1fr} .mbr-visuel{max-width:280px} }

/* Liste en grille de cartes sur toute la largeur du site (1 280 px), image au-dessus du texte.
   Page webinar ; réutilisable pour toute liste courte de contenus. */
.post-list.post-grille{max-width:none;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}
.post-grille .post-row{grid-template-columns:1fr;align-items:start;align-content:start;gap:16px;height:100%}
.post-grille .post-row>div{padding:0 8px 10px}
/* Contenu sans image : un aplat navy au même format, avec le motif de pilules */
.post-visuel{display:grid;place-items:center;aspect-ratio:16/10;border-radius:12px;background:var(--navy);overflow:hidden}
.post-visuel img{width:70%;height:auto;aspect-ratio:auto;opacity:.5}

/* Menu déroulant « Ressources » du bandeau. S'ouvre au survol, au clavier (focus) et au clic
   (classe .ouvert posée par ui.js, pour les écrans tactiles). Sous 820 px, ses liens passent
   dans le panneau mobile sous un intertitre. */
.head-nav{align-items:center}
.nav-drop{position:relative}
.nav-drop-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-weight:600;font-size:.96rem;color:var(--ink);transition:color .14s}
.nav-drop-btn:hover{color:var(--muted)}
.nav-drop-btn svg{transition:transform .16s}
.nav-drop:has(a[aria-current="page"]) .nav-drop-btn{color:var(--navy);font-weight:700}
.nav-drop-menu{position:absolute;top:calc(100% + 14px);left:-14px;z-index:70;min-width:200px;display:none;
  flex-direction:column;gap:2px;padding:8px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow)}
/* pont invisible entre le bouton et le menu : le survol ne se perd pas en descendant */
.nav-drop-menu::before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu,.nav-drop.ouvert .nav-drop-menu{display:flex}
.nav-drop:hover .nav-drop-btn svg,.nav-drop.ouvert .nav-drop-btn svg{transform:rotate(180deg)}
.head-nav .nav-drop-menu a{padding:9px 12px;border-radius:var(--r-sm);white-space:nowrap;color:var(--navy)}
.head-nav .nav-drop-menu a:hover{background:var(--paper);color:var(--navy)}
.head-nav .nav-drop-menu a[aria-current="page"]{background:var(--sky)}
.head-nav .nav-drop-menu a[aria-current="page"]::after{display:none}
.head-panel-titre{font-family:var(--title);font-weight:800;font-size:.74rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);padding:16px 2px 4px}
.head-panel a.sous{padding-left:14px}

/* CTA, règle PA du 13/10/2026 : partout, fond noir (navy) au repos, fond jaune et texte noir au survol.
   Placée en dernier et avec les mêmes contextes que les anciennes règles (fond sombre, pied de page,
   panier, simulateur, articles) pour l'emporter sur elles, y compris sur « .f a:hover » qui soulignait
   le texte du bouton en clair sur le jaune. */
.btn-primary,.dark .btn-primary,.f .btn-primary,.f a.btn-primary,.summary .btn-primary,.cart-bar .btn-primary,
.quote-card .btn-primary,.simu-res .btn-primary,.estim .btn-primary,.head-panel a.btn-primary,.article a.btn-primary,
.btn-add.in{
  background:var(--navy);color:var(--paper);border-color:var(--navy);text-decoration:none}
.btn-primary:hover,.dark .btn-primary:hover,.f .btn-primary:hover,.f a.btn-primary:hover,.summary .btn-primary:hover,
.cart-bar .btn-primary:hover,.quote-card .btn-primary:hover,.simu-res .btn-primary:hover,.estim .btn-primary:hover,
.head-panel a.btn-primary:hover,.article a.btn-primary:hover,.btn-add.in:hover{
  background:var(--yellow);color:var(--navy);border-color:var(--yellow);text-decoration:none}
/* Sur fond navy, un bouton navy disparaîtrait : un filet clair en dessine le contour. */
.dark .btn-primary,.f .btn-primary,.f a.btn-primary,.summary .btn-primary,.cart-bar .btn-primary,.quote-card .btn-primary,
.simu-res .btn-primary{border-color:var(--sky)}
/* Boutons secondaires (contour) : même survol jaune, texte noir. */
.btn-ghost:hover,.dark .btn-ghost:hover,.summary .btn-ghost:hover,.cart-bar .btn-ghost:hover,.quote-card .btn-ghost:hover,
.f .btn-ghost:hover,.simu-res .btn-ghost:hover{background:var(--yellow);color:var(--navy);border-color:var(--yellow);text-decoration:none}
.btn[disabled]:hover{background:var(--navy);color:var(--paper);border-color:var(--navy)}

/* Main au survol de tout ce qui se clique, sur toutes les pages. */
a[href],button:not([disabled]),summary,label[for],select,[role="button"],[onclick],
input[type="checkbox"],input[type="radio"],input[type="submit"],input[type="button"],.btn,
[data-copier],[data-rdv],[data-devis-envoi],[data-devis-pdf],[data-devis-passer],[data-modale],[data-choix],
[data-add],[data-bill-vers],[data-cart-clear],[data-fermer],[data-modale-add],[data-q],[data-rm],.bopt,
.pb,.e-swap,.tv-play,.post-row,.nav-drop-btn,.burger{cursor:pointer}
.article .hs-formulaire{margin:24px 0 8px}