/* Pilotia — design system: Trust & Authority + Conversion (via ui-ux-pro-max)
   Palette: navy/blue corporate trust + warm bronze accent. Typography: Calistoga (display) + Inter (body).
   Les polices sont auto-hébergées dans fonts/ et déclarées dans fonts/fonts.css,
   chargé via <link> dans le <head> de chaque page (pas d'@import ici) : un @import
   CSS n'est découvert qu'une fois ce fichier récupéré et parsé, ajoutant un
   aller-retour réseau complet avant même de savoir qu'il faut charger les polices.
   Des <link> dans le HTML sont vus immédiatement par le préchargeur du navigateur. */

:root{
  --ink:#0F172A;
  --ink-fixed:#0F172A; /* navy fixe, ne s'inverse jamais avec le thème — pour les éléments (ex. .banner) volontairement toujours sombres */
  --ink-soft:#475569;
  --paper:#F8FAFC;
  --paper-alt:#EEF2F7;
  --card:#FFFFFF;
  --line:#E2E8F0;
  --accent:#0369A1;
  --accent-soft:#E1EEF6;
  --accent-ink:#FFFFFF;
  /* --gold habille du texte (.eyebrow en 12px, .step-num) : il lui faut 4.5:1 (WCAG 1.4.3).
     L'ancien #AD7E3F plafonnait à 3.20:1 sur --paper-alt. #876231 conserve la teinte
     bronze (34°) et atteint 4.89:1, et 5.50:1 pour du blanc posé dessus. */
  --gold:#876231;
  --gold-soft:#F3E9DA;
  --vert:#15803D;
  --vert-soft:#ECFDF3;
  --danger:#DC2626;
  /* Bordure des champs de saisie : leur fond est blanc comme la page, donc la bordure
     est le seul indice qui identifie le champ — d'où le seuil de 3:1 (WCAG 1.4.11).
     --line reste réservé aux séparateurs décoratifs, non soumis à ce seuil. */
  --line-strong:#8190A4;
  --accent-fonce:#02527D;      /* survol : on assombrit l'accent, on ne change pas de teinte */
  --radius:18px;
  /* Les ombres portées sont un artifice de profondeur. Ici la hiérarchie vient
     du vide et de la taille du texte, donc elles ne servent plus qu'à décoller
     très légèrement une carte survolée. */
  --shadow-sm:none;
  --shadow-md:0 6px 28px rgba(15,23,42,.08);
  --max:1120px;
  /* Une seule famille sur tout le site. Le serif d'affichage a été retiré des
     titres : un grotesque neutre en très grand corps, avec un interlettrage
     resserré, porte mieux ce registre. Calistoga ne sert plus qu'au logotype
     des visuels sociaux (brand/social.css). */
  --font-display:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* Mode sombre automatique uniquement : il suit le réglage du système
   d'exploitation. Le bouton de bascule manuel a été retiré, donc plus aucune
   surcharge [data-theme] n'est nécessaire. */
@media (prefers-color-scheme: dark){
  :root{
    --ink:#F1F5F9;
    --ink-soft:#94A3B8;
    --paper:#0B1220;
    --paper-alt:#111A2C;
    --card:#16223A;
    --line:#22304A;
    --accent:#4CA9E0;
    --accent-soft:#16283D;
    --accent-ink:#08131F;
    --gold:#C69B62;
    --gold-soft:#2B2213;
    --vert:#4ADE80;
    --vert-soft:#0F2A1B;
    --danger:#F87171;
    --line-strong:#586C94;
    --accent-fonce:#7FC4EC;
    --shadow-md:0 6px 28px rgba(0,0,0,.42);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* Lien d'évitement : premier élément focusable de la page, hors écran tant qu'il n'a
   pas le focus. Permet d'atteindre le contenu sans retraverser toute la navigation
   au clavier ou au lecteur d'écran (WCAG 2.4.1). */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--accent);color:var(--accent-ink);
  padding:12px 20px;border-radius:0 0 var(--radius) 0;
  font-family:var(--font-body);font-size:15px;font-weight:600;text-decoration:none;
}
.skip-link:focus{left:0}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.022em;
  line-height:1.08;
  color:var(--ink);
  margin:0 0 .5em;
  text-wrap:balance;
}
h3,h4{letter-spacing:-0.014em;line-height:1.2}
p{margin:0 0 1em}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* Header */
.site-header{
  position:sticky;top:0;z-index:20;
  border-bottom:1px solid var(--line);
  /* Translucide au-dessus du contenu qui défile. Sans le repli, un navigateur
     sans backdrop-filter afficherait un en-tête à moitié transparent et un
     texte illisible par-dessus. */
  background:var(--paper);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .site-header{
    background:color-mix(in srgb, var(--paper) 72%, transparent);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    backdrop-filter:blur(20px) saturate(180%);
  }
}
.nav-inner{max-width:var(--max);margin:0 auto;padding:11px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;font-family:var(--font-body)}
.brand{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--ink)}
.brand-logo{height:32px;width:150px;object-fit:contain;object-position:left center;display:block}
.brand-logo-dark{display:none}
@media (prefers-color-scheme: dark){
  .brand-logo-light{display:none}
  .brand-logo-dark{display:block}
}
.nav-links{list-style:none;display:flex;align-items:center;gap:22px;margin:0;padding:0}
.nav-links a{white-space:nowrap;text-decoration:none;color:var(--ink-soft);font-size:15px;font-weight:500;transition:color .18s ease;display:inline-flex;align-items:center;min-height:44px}
.nav-links a.active,.nav-links a:hover{color:var(--accent)}
.nav-cta{background:var(--accent);color:var(--accent-ink) !important;padding:10px 18px;border-radius:999px;font-weight:600;transition:background .18s ease,transform .18s ease;display:inline-block}
.nav-cta:hover{background:var(--ink);transform:translateY(-1px)}

/* Dropdown ("Découvrir") */
.dropdown{position:relative}
.dropdown-trigger{
  white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-body);font-size:15px;font-weight:500;color:var(--ink-soft);
  background:none;border:none;padding:0;cursor:pointer;line-height:1.6;
  transition:color .18s ease;
}
.dropdown-trigger:hover,.dropdown-trigger.active{color:var(--accent)}
.dropdown-caret{font-size:10px;transition:transform .2s ease}
.dropdown.is-open .dropdown-caret{transform:rotate(180deg)}
.dropdown-menu{
  list-style:none;margin:0;padding:8px;
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  min-width:190px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-md);display:none;flex-direction:column;gap:1px;z-index:50;
}
.dropdown.is-open .dropdown-menu{display:flex}
.dropdown-menu a{display:block;padding:9px 12px;border-radius:8px;font-size:14px;white-space:nowrap}
.dropdown-menu a:hover{background:var(--paper-alt)}
.dropdown-menu a.active{color:var(--accent)}

/* Bouton hamburger (mobile uniquement) */
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;
  width:44px;height:44px;padding:10px;background:none;border:none;cursor:pointer;flex:none;
}
.nav-toggle span{display:block;width:100%;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s ease,opacity .2s ease,width .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);width:100%}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);width:100%}
/* Seuil relevé de 760 à 1080 px : en dessous, les sept entrées du menu ne
   tiennent plus sur une ligne et passaient sur deux. */
@media (max-width:1080px){
  .nav-inner{position:relative;flex-wrap:wrap}
  .nav-toggle{display:flex}
  .nav-links{
    display:none;flex-direction:column;align-items:stretch;gap:2px;
    position:absolute;top:100%;left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:6px 24px 20px;box-shadow:var(--shadow-md);
  }
  .nav-links.is-open{display:flex}
  .nav-links li{flex:none;width:100%}
  .nav-links a{display:block;padding:12px 2px}
  .nav-cta{white-space:nowrap;text-align:center;margin-top:8px}
  .dropdown-trigger{width:100%;justify-content:space-between;padding:12px 2px}
  .dropdown-menu{
    display:block;position:static;transform:none;box-shadow:none;border:none;
    background:none;padding:0 0 0 14px;min-width:0;
  }
  .dropdown-menu a{padding:10px 2px;font-size:15px}
  .dropdown-caret{display:none}
}

/* Hero */
.hero{
  padding:clamp(84px,11vw,150px) 0 clamp(64px,8vw,110px);
  /* Fond plat. Les deux halos colorés d'avant tiraient l'œil vers les angles ;
     dans ce registre, c'est le vide autour du titre qui doit faire l'effet. */
  background:var(--paper);
}
/* Le sur-titre passe du doré à l'encre douce : un seul accent sur la page,
   et il est réservé aux éléments cliquables. */
/* Sur-titre en pastille : en gris fin, il disparaissait sous le titre. Fond et
   texte viennent des jetons d'accent, donc la pastille suit le thème et les
   sections sombres sans règle de plus. */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px 6px 12px;border-radius:14px;
  background:var(--accent-soft);color:var(--accent);
  font-family:var(--font-body);text-transform:uppercase;letter-spacing:.1em;
  font-size:12.5px;font-weight:700;line-height:1.3;margin-bottom:18px;
}
.eyebrow::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
@media (max-width:420px){.eyebrow{font-size:11.5px;letter-spacing:.07em}}
.hero h1{font-size:clamp(38px,6.2vw,72px);max-width:15ch;letter-spacing:-0.032em}
.lead{font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:var(--ink-soft);max-width:52ch;margin-top:22px}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.btn{
  font-family:var(--font-body);
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;
  padding:12px 24px;
  border-radius:999px;
  text-decoration:none;
  font-size:15px;font-weight:600;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
  border:1px solid transparent;
}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-fonce)}
.btn-secondary{background:transparent;color:var(--accent);border-color:var(--line-strong)}
.btn-secondary:hover{background:var(--accent-soft);border-color:var(--accent)}

/* Sections & cards */
section{padding:clamp(72px,9vw,132px) 0}
.hero + section,.hero + div > section:first-child{padding-top:clamp(40px,5vw,72px)}
.section-title{font-size:clamp(28px,4vw,46px);letter-spacing:-0.026em;max-width:20ch}
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{
  background:var(--card);
  border:1px solid transparent;   /* garde la géométrie, sans le trait */
  border-radius:var(--radius);
  padding:34px;
  transition:box-shadow .25s ease,transform .25s ease;
}
a.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card h3,.card h2{font-size:19px;font-family:var(--font-body);font-weight:700}
.tarif{
  font-size:clamp(25px,2.4vw,31px);font-weight:700;letter-spacing:-0.022em;
  line-height:1.15;margin:12px 0;text-wrap:balance;
}
.tarif-petit{font-size:clamp(20px,1.8vw,23px)}

.pill{
  display:inline-block;font-family:var(--font-body);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  background:var(--accent-soft);color:var(--accent);
  padding:6px 13px;border-radius:999px;margin-bottom:10px;
}

/* Trois piliers en triangle (page d'accueil) */
 /* Le triangle (une carte au-dessus, deux en dessous) laissait deux vides de
    350 px de part et d'autre de la carte du haut, et ne se lisait pas comme un
    triangle. Trois colonnes égales remplissent la largeur et se comparent. */
.triangle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px;align-items:stretch}
.triangle-card{max-width:none;width:100%;height:100%}
.triangle-base{display:contents}
@media (max-width:900px){
  .triangle-grid{grid-template-columns:1fr}
}

.path-cards{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.path-card{background:var(--card);border-radius:var(--radius);padding:42px;transition:box-shadow .25s ease,transform .25s ease}
.path-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.path-card h3,.path-card h2{font-size:22px;font-family:var(--font-body);font-weight:700}
.path-card .btn{margin-top:18px}

/* ─── Film de lancement (index.html) ───────────────────────────────────── */
.film{margin:26px 0 0}
.film video{
  display:block;width:100%;height:auto;
  border:1px solid var(--line);border-radius:var(--radius);background:#070B16;
}
/* Masqué à l'écran, lu par les technologies d'assistance. Sert au résumé du
   film : la section doit rester épurée, mais retirer le texte tout court
   rendrait la vidéo muette inaccessible. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* ─── Plan de trésorerie (plan-tresorerie.html) ─────────────────────────── */
.treso-params{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-top:16px}
.treso-params label{display:block;margin-bottom:6px}
.treso-params input,.treso-params select{width:100%}
.treso-aide{font-family:var(--font-body);font-size:14px;color:var(--ink-soft);margin:10px 0 0}

.treso-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:20px}
.kpi{background:var(--card);border-radius:var(--radius);padding:26px 28px;display:flex;flex-direction:column;gap:6px}
.kpi-titre{font-family:var(--font-body);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft)}
.kpi-valeur{font-family:var(--font-body);font-size:29px;font-weight:700;color:var(--ink);line-height:1.15}
.kpi-note{font-family:var(--font-body);font-size:13px;color:var(--ink-soft)}
/* Le point bas change de couleur selon qu'il passe ou non sous le seuil : c'est
   l'unique information que le solde du jour ne donne jamais. */
.kpi-alerte .kpi-valeur{color:var(--danger)}
.kpi-ok .kpi-valeur{color:#15803D}
@media (prefers-color-scheme: dark){.kpi-ok .kpi-valeur{color:#4ADE80}}

.treso-verdict{margin-top:20px;font-size:15px}
/* Ces variantes se posent sur un élément qui porte aussi .note, déclaré plus
   bas dans ce fichier. À spécificité égale, la règle la plus tardive gagne :
   sans le .note en tête du sélecteur, le vert et le rouge ne s'affichaient
   jamais et toute alerte ressortait en doré, y compris un solde négatif. */
.note.treso-verdict-vert{background:#ECFDF3;border-color:#15803D;color:#14532D}
.note.treso-verdict-orange{background:var(--gold-soft);border-color:var(--gold);color:var(--ink)}
.note.treso-verdict-rouge{background:#FEF2F2;border-color:var(--danger);color:#7F1D1D}
@media (prefers-color-scheme: dark){
  .note.treso-verdict-vert{background:#0D2318;border-color:#4ADE80;color:#BBF7D0}
  .note.treso-verdict-rouge{background:#2A1315;border-color:var(--danger);color:#FECACA}
}

.treso-graph{margin-top:14px}
.treso-graph svg{width:100%;height:auto;display:block}

/* Le tableau déborde volontairement : douze mois ne tiennent pas sur un
   téléphone, et réduire la police le rendrait illisible. */
.treso-table-hote{margin-top:16px;overflow-x:auto;padding:0}
.treso-table{width:100%;min-width:640px;border-collapse:collapse;margin:0}
.treso-table th,.treso-table td{font-family:var(--font-body);font-size:14px;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.treso-table thead th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);background:var(--paper-alt);position:sticky;top:0}
.treso-table tbody th{text-align:left;font-weight:500;color:var(--ink)}
.treso-num{text-align:right;font-variant-numeric:tabular-nums}
.treso-pos{color:#15803D}
.treso-neg{color:var(--danger)}
@media (prefers-color-scheme: dark){.treso-pos{color:#4ADE80}}
.treso-ligne-forte th,.treso-ligne-forte td{font-weight:700;background:var(--paper-alt)}
.treso-ligne-fin td{font-size:15px}
.treso-ligne-in th,.treso-ligne-out th{font-weight:600}
.treso-sous th{padding-left:30px;color:var(--ink-soft);font-weight:400;font-size:13.5px}
.treso-sous td{color:var(--ink-soft);font-size:13.5px}

.treso-titre-in,.treso-titre-out{display:flex;align-items:center;gap:8px}
.treso-titre-in::before,.treso-titre-out::before{content:"";width:10px;height:10px;border-radius:3px;flex:none}
.treso-titre-in::before{background:#15803D}
.treso-titre-out::before{background:var(--danger)}

/* minmax(0,1fr) et non 1fr : un champ de saisie a une largeur intrinsèque
   d'environ 170 px qu'une colonne « 1fr » refuse de réduire, ce qui pousse
   toute la grille hors de la carte. Le min-width:0 sur les champs complète
   le remède. */
.treso-entetes,.treso-ligne{display:grid;grid-template-columns:minmax(0,1fr) 92px 130px 62px 34px;gap:8px;align-items:center}
.treso-entetes>*,.treso-ligne>*,.treso-facture>*{min-width:0}
.treso-entetes{font-family:var(--font-body);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin:14px 0 6px}
.treso-ligne{margin-bottom:8px}
.treso-ligne input,.treso-ligne select{font-size:14px;padding:9px 10px;min-height:40px;min-width:0;width:100%}
.treso-suppr{
  width:34px;height:34px;flex:none;border-radius:8px;cursor:pointer;
  border:1px solid var(--line-strong);background:var(--card);color:var(--ink-soft);
  font-size:19px;line-height:1;padding:0;
}
.treso-suppr:hover{border-color:var(--danger);color:var(--danger)}
.treso-ajout{margin-top:12px;font-size:14px}

/* Factures engagées */
/* Les listes de saisie occupent toute la largeur et s'empilent : en deux
   colonnes, la place restante pour le libellé tombe sous 70 px. */
.treso-colonnes{display:flex;flex-direction:column;gap:18px;margin-top:20px}

.treso-total{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--accent);margin:4px 0 0}
.treso-entetes-f{grid-template-columns:minmax(0,1fr) 88px 146px 84px 34px}
.treso-facture{display:grid;grid-template-columns:minmax(0,1fr) 88px 146px 84px 34px;gap:8px;align-items:center;margin-bottom:8px}
.treso-facture input[type="text"],.treso-facture input[type="number"],.treso-facture input[type="date"]{font-size:14px;padding:9px 10px;min-height:40px;min-width:0;width:100%}
/* Une facture réglée ne compte plus dans la projection : elle doit se voir
   comme telle sans pour autant disparaître de la liste. */
.treso-facture-reglee input[type="text"],.treso-facture-reglee input[type="number"],.treso-facture-reglee input[type="date"]{opacity:.55;text-decoration:line-through}
.treso-regle{display:flex;align-items:center;gap:6px;font-family:var(--font-body);font-size:13px;color:var(--ink-soft);cursor:pointer;margin:0}
.treso-regle input{width:18px;height:18px;min-height:0;margin:0}
.treso-facture-note{grid-column:1 / -1;margin:0 0 4px}
.treso-alerte{font-family:var(--font-body);font-size:12.5px;color:var(--danger);font-weight:600}
.treso-hors{font-family:var(--font-body);font-size:12.5px;color:var(--ink-soft)}

@media (max-width:640px){
  .treso-entetes-f{display:none}
  .treso-facture{grid-template-columns:1fr 1fr;gap:6px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line)}
  .treso-facture input[type="text"]{grid-column:1 / -1}
  .treso-facture .treso-suppr{justify-self:end}
}
.treso-vide{font-family:var(--font-body);font-size:14px;color:var(--ink-soft);margin:10px 0}

/* Mois déjà écoulés et comparaison au réalisé */
.treso-entetes-r{grid-template-columns:150px minmax(0,1fr) minmax(0,1fr) 34px}
.treso-reel{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1fr) 34px;gap:8px;align-items:center;margin-bottom:8px}
.treso-reel>*{min-width:0}
.treso-reel input{font-size:14px;padding:9px 10px;min-height:40px;min-width:0;width:100%}
.treso-moyennes{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.treso-moy{display:flex;flex-direction:column;gap:3px}
.treso-moy-titre{font-family:var(--font-body);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.treso-moy-valeur{font-family:var(--font-body);font-size:22px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.treso-moy-valeur.treso-neg{color:var(--danger)}
.treso-moy-valeur.treso-pos{color:#15803D}
@media (prefers-color-scheme: dark){.treso-moy-valeur.treso-pos{color:#4ADE80}}
.treso-moy-note{font-family:var(--font-body);font-size:13px;color:var(--ink-soft)}
.note.treso-verdict-neutre{background:var(--paper-alt);border-color:var(--line-strong);color:var(--ink-soft)}
@media (max-width:640px){
  .treso-entetes-r{display:none}
  .treso-reel{grid-template-columns:1fr 1fr;gap:6px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line)}
  .treso-reel input[data-rchamp="mois"]{grid-column:1 / -1}
  .treso-reel .treso-suppr{justify-self:end}
}

/* Comparatif tableur / outil */
.treso-compare{display:grid;grid-template-columns:1fr;gap:18px;margin-top:26px}
@media (min-width:860px){.treso-compare{grid-template-columns:1fr 1fr}}
.treso-compare-fort{border-color:var(--accent)}
.treso-compare ul{list-style:none;padding:0;margin:14px 0 0}
.treso-compare li{font-family:var(--font-body);font-size:15px;line-height:1.55;padding-left:26px;position:relative;margin-bottom:11px}
.treso-liste-moins li::before{content:"\2022";position:absolute;left:6px;color:var(--ink-soft);font-weight:700}
.treso-liste-plus li::before{content:"\2192";position:absolute;left:2px;color:var(--accent);font-weight:700}
.treso-liste-moins li{color:var(--ink-soft)}

/* L'input file natif est illisible et instylable : on le masque et c'est son
   <label> qui fait office de bouton. Il reste atteignable au clavier. */
.treso-import-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.treso-import-label{cursor:pointer}
.treso-import-input:focus-visible + .treso-import-label,
.treso-import-label:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.treso-lien-danger{
  background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--font-body);font-size:14px;color:var(--danger);text-decoration:underline;
}

@media (max-width:640px){
  .treso-entetes{display:none}
  .treso-ligne{grid-template-columns:1fr 1fr;gap:6px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line)}
  .treso-ligne input[data-champ="categorie"]{grid-column:1 / -1}
  .treso-suppr{justify-self:end;min-width:44px;min-height:44px}
}

/* Illustrations de marque insérées en SVG dans la page (et non via <img>) :
   elles héritent ainsi des jetons de couleur et suivent le thème clair/sombre,
   ce qu'une image externe ne peut pas faire. */
/* width:100% en plus de max-width : sans dimensions intrinsèques, un SVG
   retombe sinon sur la taille par défaut de 300 px. */
.illu{margin:0;width:100%;max-width:620px}
.illu svg{width:100%;height:auto;display:block}

/* Bloc « fondateur » : avatar + nom alignés, empilés sur petit écran. */
.bio-head{display:flex;align-items:center;gap:18px;margin-bottom:18px;flex-wrap:wrap}
.bio-avatar{width:104px;height:104px;border-radius:50%;flex:none;display:block}

.step{display:flex;gap:18px;align-items:flex-start;margin-bottom:28px}
.step-num{font-family:var(--font-display);color:var(--gold);font-size:22px;flex:none;line-height:1.3}
/* Sans taille explicite, un titre d'étape prend celle par défaut du navigateur pour
   son niveau — un h2 y serait bien plus gros qu'un h3 alors que le rôle visuel est
   le même. On fixe la taille pour que le niveau reste un choix sémantique. */
.step h2,.step h3{font-size:19px}

.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font-family:var(--font-body);font-weight:600;min-height:44px;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary{list-style:none;gap:14px}
.faq summary::after{content:"+";margin-left:auto;flex:none;font-size:22px;line-height:1;color:var(--accent)}
.faq details[open] summary::after{content:"\2212"}

table{width:100%;border-collapse:collapse;margin:18px 0}
th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line);font-size:15px}
th{font-family:var(--font-body);font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}

form{display:grid;gap:14px;max-width:520px}
label{font-family:var(--font-body);font-size:14px;font-weight:600;display:block;margin-bottom:6px}
input:not([type="radio"]):not([type="checkbox"]),select,textarea{
  font-family:var(--font-body);font-size:15px;padding:12px 14px;min-height:44px;
  border:1px solid var(--line-strong);border-radius:8px;background:var(--card);color:var(--ink);
  transition:border-color .18s ease,box-shadow .18s ease;
}
input:not([type="radio"]):not([type="checkbox"]):hover,select:hover,textarea:hover{border-color:var(--accent)}
input[type="radio"],input[type="checkbox"]{
  width:20px;height:20px;min-height:0;flex:none;
  accent-color:var(--accent);cursor:pointer;margin:0;
}

/* Formulaires de téléchargement protégés par email (ressources.html, outils.html) */
.gated-download{max-width:none;gap:8px;margin-top:16px}
.gated-download-row{display:flex;gap:8px;flex-wrap:wrap}
.gated-download-row input[type="email"]{flex:1 1 180px;min-width:0}
.gated-download-row button{flex:none}
.gated-download-msg{font-family:var(--font-body);font-size:13px;color:var(--ink-soft);margin:0;min-height:1.2em}

/* Case de consentement : la case et son libellé sont alignés en haut, le libellé
   restant cliquable sur toute sa longueur pour agrandir la cible. */
.consent-row{display:flex;align-items:flex-start;gap:11px}
.consent-row label{font-family:var(--font-body);font-size:14px;line-height:1.55;color:var(--ink-soft);font-weight:400;cursor:pointer;margin:0}
.consent-row input[type="checkbox"]{margin-top:2px}
/* Champ leurre : sorti du flux visuel sans display:none, que les robots qui
   n'évaluent pas le CSS le remplissent quand même. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg-error{color:var(--danger)}
.form-msg-ok{color:var(--accent)}

.banner{background:var(--ink-fixed);color:#fff;padding:56px 0;text-align:center}
.banner h2{color:#fff}
.banner .btn-primary{background:#fff;color:var(--ink-fixed)}
.banner .btn-primary:hover{background:var(--gold);color:#fff}

.site-footer{border-top:1px solid var(--line);padding:44px 0;font-family:var(--font-body);font-size:14px;color:var(--ink-soft)}
.footer-links{list-style:none;display:flex;gap:18px;flex-wrap:wrap;padding:0;margin:14px 0 0}
/* Cible tactile : 44 px de haut, sinon ces liens sont trop fins pour un pouce. */
.footer-links a{display:inline-flex;align-items:center;min-height:44px}

/* Un tableau large ne doit pas pousser toute la page : il défile dans son
   propre cadre. La région est focalisable au clavier, sans quoi un tableau
   défilant n'est atteignable qu'à la souris. */
.table-defile{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.table-defile table{margin-top:0}
.table-defile:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.footer-links a{color:var(--ink-soft);transition:color .18s ease}
.footer-links a:hover{color:var(--accent)}

.note{background:var(--gold-soft);border:1px solid var(--gold);border-radius:var(--radius);padding:16px 20px;font-family:var(--font-body);font-size:14px;color:var(--ink-soft)}
/* Marqueur inline des informations légales encore manquantes (structure non créée).
   Volontairement voyant : il doit sauter aux yeux avant toute mise en ligne. */
.legal-todo{background:var(--gold-soft);color:var(--ink);border:1px dashed var(--gold);border-radius:6px;padding:1px 7px;font-family:var(--font-body);font-size:.92em;font-weight:600}
.legal-page h2{margin-top:38px;scroll-margin-top:90px}
.legal-page h3{margin-top:24px}
.legal-page p,.legal-page li{font-family:var(--font-body);font-size:15.5px;line-height:1.7;color:var(--ink-soft)}
.legal-page li{margin-bottom:7px}
.legal-page table{width:100%;border-collapse:collapse;margin:18px 0;display:block;overflow-x:auto;white-space:normal}
.legal-page th{font-family:var(--font-body);font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);vertical-align:bottom}
.legal-page td{font-family:var(--font-body);font-size:14px;color:var(--ink-soft);vertical-align:top;min-width:150px}
.legal-toc{background:var(--paper-alt);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin:28px 0}
.legal-toc ol{margin:10px 0 0;padding-left:20px}
.legal-toc a{color:var(--accent)}
.legal-updated{font-family:var(--font-body);font-size:14px;color:var(--ink-soft);margin-top:6px}

/* Icônes de carte (SVG outline, dessinées à la main — style Phosphor) */
.card-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;
  background:var(--accent-soft);color:var(--accent);
  margin-bottom:16px;
}
.card-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.path-card .card-icon{background:var(--gold-soft);color:var(--gold)}

/* Scroll reveal (progressive enhancement — voir animations.js).
   Le gate ".js" est posé par un script synchrone dans <head>, avant le premier rendu :
   sans JS ou sous prefers-reduced-motion, ce sélecteur ne s'applique jamais et le
   contenu reste visible normalement — pas de flash, pas de dépendance dure au JS.
   Le hero n'en fait volontairement pas partie : il est toujours visible à l'écran
   dès le chargement (jamais découvert au scroll), donc le faire attendre un aller-retour
   IntersectionObserver n'apporte rien et retarde juste son apparition — voir plus bas
   pour son animation d'entrée, en CSS pur, sans dépendance au JS. */
.js .card,.js .path-card,.js .step,.js .faq details,
.js section .section-title{
  opacity:0;transform:translateY(14px);transition:opacity .45s ease-out,transform .45s ease-out;
}
.js .card.is-visible,.js .path-card.is-visible,.js .step.is-visible,.js .faq details.is-visible,
.js section .section-title.is-visible{
  opacity:1;transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .js .card,.js .path-card,.js .step,.js .faq details,
  .js section .section-title{
    opacity:1;transform:none;transition:none;
  }
}

/* Entrée du hero : animation CSS pure (pas d'IntersectionObserver, pas d'attente du JS
   différé) — le contenu au-dessus de la ligne de flottaison doit apparaître dès que
   possible, jamais après un aller-retour JS. */
.js .hero .eyebrow,.js .hero h1,.js .hero .lead,.js .hero .btn-row{
  animation: hero-fade-in .5s ease-out both;
}
.js .hero .eyebrow{animation-delay:0s}
.js .hero h1{animation-delay:.06s}
.js .hero .lead{animation-delay:.12s}
.js .hero .btn-row{animation-delay:.18s}
@keyframes hero-fade-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){
  .js .hero .eyebrow,.js .hero h1,.js .hero .lead,.js .hero .btn-row{
    animation:none;opacity:1;transform:none;
  }
}

@media (max-width:600px){
  section{padding:48px 0}
  .hero{padding:48px 0 40px}
}

/* ─── Récapitulatif des formules (offres.html) ──────────────────────────── */
/* Ce n'était pas un vrai comparatif : une seule colonne portait des valeurs
   comparables (le tarif), « Contenu » était de la prose, et « Pour qui » ne
   prenait que trois valeurs répétées — elle devient un titre de groupe.
   Une liste de prix se lit d'un coup d'œil et n'a pas besoin de défiler
   latéralement sur un téléphone. */
.offres-groupe + .offres-groupe{margin-top:40px}
.offres-groupe h3{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--accent);
  margin:0 0 10px;
}
.offres-groupe h3::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.offres-groupe ul{list-style:none;margin:0;padding:0}
.offre-ligne{
  display:flex;align-items:baseline;gap:24px;
  padding:18px 0;border-top:1px solid var(--line);
}
.offre-nom{flex:1 1 auto;min-width:0}
.offre-nom b{
  display:block;font-family:var(--font-display);font-weight:600;font-size:17px;
  letter-spacing:-.01em;color:var(--ink);
}
.offre-nom span{
  display:block;margin-top:5px;font-family:var(--font-body);
  font-size:14.5px;line-height:1.5;color:var(--ink-soft);
}
.offre-prix{
  flex:0 0 auto;text-align:right;white-space:nowrap;
  font-family:var(--font-body);font-size:17px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.offre-prix em{
  display:block;font-style:normal;font-weight:400;font-size:12.5px;
  color:var(--ink-soft);margin-bottom:2px;
}
@media (max-width:560px){
  .offre-ligne{flex-direction:column;gap:10px}
  .offre-prix{text-align:left}
}

/* ─── Photographies de contexte ─────────────────────────────────────────── */
/* Le rapport est imposé par la mise en page, pas par le fichier : les sources
   n'ont pas la même orientation, et un recadrage en CSS évite d'en exporter
   une version par point de rupture. */
.photo{margin:0}
.photo img{
  display:block;width:100%;height:auto;
  aspect-ratio:20/9;object-fit:cover;object-position:center;
  border-radius:var(--radius);border:1px solid var(--line);
  background:var(--paper-alt);
}
/* Le téléphone est un sujet large : lui imposer le rapport des deux autres
   rognerait les icônes sur les bords en écran étroit. */
.photo-bande img{aspect-ratio:2.4/1}
@media (max-width:700px){
  .photo img{aspect-ratio:3/2}
  .photo-bande img{aspect-ratio:2/1}
}


/* ─── Section sombre ────────────────────────────────────────────────────── */
/* Une page de 6 000 px dont cinq sections sur sept ont le même fond blanc n'a
   aucun rythme. Celle-ci redéfinit les jetons plutôt que de peindre un fond :
   tout ce qu'on y place s'adapte, sans règle supplémentaire par composant. */
.section-sombre{
  background:var(--ink-fixed);
  --ink:#F1F5F9;
  --ink-soft:#94A3B8;
  --paper:#0F172A;
  --paper-alt:#16223A;
  --card:#16223A;
  --line:#2A3A57;
  --accent:#4CA9E0;
  --accent-soft:#16283D;
  --accent-ink:#08131F;
  --accent-fonce:#7FC4EC;
  --gold:#C69B62;
  --gold-soft:#2B2213;
  --vert:#4ADE80;
  --vert-soft:#0F2A1B;
  color:var(--ink);
}
/* En mode sombre la page est déjà foncée : sans ces filets, la section se
   fondrait dans son voisinage au lieu de le ponctuer. */
@media (prefers-color-scheme: dark){
  .section-sombre{border-top:1px solid #22304A;border-bottom:1px solid #22304A}
}

/* ─── Pastilles d'icône colorées ────────────────────────────────────────── */
/* Une couleur par pilier : la couleur porte une distinction, elle ne décore pas. */
.card-icon-bleu{background:var(--accent-soft);color:var(--accent)}
.card-icon-vert{background:var(--vert-soft);color:var(--vert)}
.card-icon-bronze{background:var(--gold-soft);color:var(--gold)}

/* ─── Avis clients ──────────────────────────────────────────────────────── */
/* L'italique sur un paragraphe entier fatigue la lecture, et quatre colonnes
   laissaient une cinquième carte orpheline. Trois colonnes donnent 3 + 2, et
   un guillemet coloré signale la citation mieux que l'italique. */
.avis{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.avis figure{
  position:relative;margin:0;background:var(--card);
  border-radius:var(--radius);padding:52px 28px 28px;
}
.avis figure::before{
  content:"\201C";position:absolute;top:22px;left:26px;
  font-family:var(--font-display);font-size:52px;line-height:.7;
  color:var(--accent);opacity:.30;
}
.avis blockquote{margin:0;font-size:15.5px;line-height:1.62;color:var(--ink)}
.avis figcaption{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--font-body);font-size:13px;color:var(--ink-soft);
}

/* ─── Grille numérotée (défis des pages métier, volets) ──────────────── ─────────────────────────────────────────── */
/* Quatre cartes en auto-fit donnaient 3 + 1 sur grand écran. On force 2 × 2,
   et un numéro coloré donne à chaque défi un point d'entrée visuel. */
.grille-num{grid-template-columns:repeat(2,1fr);counter-reset:num}
.grille-num .card{counter-increment:num;border-top:3px solid var(--accent)}
.grille-num .card::before{
  content:counter(num,decimal-leading-zero);display:block;margin-bottom:10px;
  font-family:var(--font-display);font-size:28px;line-height:1;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.grille-num .card:nth-child(2){border-top-color:var(--vert)}
.grille-num .card:nth-child(2)::before{color:var(--vert)}
.grille-num .card:nth-child(3){border-top-color:var(--gold)}
.grille-num .card:nth-child(3)::before{color:var(--gold)}
.card > :last-child{margin-bottom:0}
@media (max-width:700px){.grille-num{grid-template-columns:1fr}.grille-num .card{padding:28px 24px}}
.avis-seul{grid-template-columns:1fr;max-width:72ch}

/* ─── Page outils ───────────────────────────────────────────────────────── */
.outil-vedette{display:flex;align-items:center;justify-content:space-between;gap:28px 48px;flex-wrap:wrap}
.outil-vedette > div{flex:1 1 420px}
.outil-vedette p{color:var(--ink-soft);max-width:60ch;margin:0}
.outil-vedette .btn{flex:none}
.outil-phare{border-color:var(--accent)}
.grid-fill{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.grid-2x2{grid-template-columns:repeat(2,1fr)}
@media (max-width:700px){.grid-2x2{grid-template-columns:1fr}}

/* ─── Annonce Peppol (accueil) ──────────────────────────────────────────── */
.annonce{
  display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;
  background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--radius);
  padding:24px 28px;
}
.annonce > div{flex:1 1 420px}
.annonce h2{font-size:clamp(20px,2.2vw,24px);margin:0 0 6px}
.annonce p{margin:0;color:var(--ink-soft)}
.annonce .btn{flex:none}
sup{line-height:0;font-size:.62em}
.form-2col{max-width:760px;grid-template-columns:1fr 1fr;gap:16px 20px}
.form-2col .plein{grid-column:1 / -1}
@media (max-width:640px){.form-2col{grid-template-columns:1fr}}
.form-2col input:not([type="checkbox"]):not([type="radio"]),.form-2col select,.form-2col textarea{width:100%}

/* ─── Rappel de la série Instagram « Services » ───────────────────────────── */
/* Une couleur par service, la même que sur les carrousels et les Reels
   (brand/services.css) : qui arrive depuis une publication verte retrouve du
   vert. La couleur signale le service, elle ne décore pas ; texte courant,
   formulaires et pages légales restent sobres.
   Posée sur <body> (page de service) ou sur une carte, la classe .svc
   remplace les jetons d'accent : boutons, sur-titre, liens et pastille
   d'icône suivent sans autre règle. Les teintes « texte » sont assombries
   par rapport aux carrousels pour tenir 4,5:1 (vérifié sur blanc, fond,
   fond alternatif et pastille claire ; en sombre, sur fond, carte et
   section sombre). --svc-vif sert seulement aux filets décoratifs. */
.svc-peppol     {--svc:#1D4ED8;--svc-soft:#DBEAFE;--svc-fonce:#1E40AF;--svc-vif:#2563EB;--svc-d:#60A5FA;--svc-d-soft:#14213D;--svc-d-fonce:#93C5FD}
.svc-payeurs    {--svc:#C2410C;--svc-soft:#FFEDD5;--svc-fonce:#9A3412;--svc-vif:#F9563B;--svc-d:#FB923C;--svc-d-soft:#2C1A10;--svc-d-fonce:#FDBA74}
.svc-affacturage{--svc:#157A3B;--svc-soft:#DCFCE7;--svc-fonce:#166534;--svc-vif:#16A34A;--svc-d:#4ADE80;--svc-d-soft:#0F2A1B;--svc-d-fonce:#86EFAC}
.svc-diagnostic {--svc:#6D28D9;--svc-soft:#EDE9FE;--svc-fonce:#5B21B6;--svc-vif:#7C3AED;--svc-d:#A78BFA;--svc-d-soft:#211A3D;--svc-d-fonce:#C4B5FD}
.svc-presence   {--svc:#BE185D;--svc-soft:#FCE7F3;--svc-fonce:#9D174D;--svc-vif:#EC4899;--svc-d:#F472B6;--svc-d-soft:#2E1426;--svc-d-fonce:#F9A8D4}
.svc-independant{--svc:#AD4F0A;--svc-soft:#FEF3C7;--svc-fonce:#92400E;--svc-vif:#F59E0B;--svc-d:#FBBF24;--svc-d-soft:#2B2211;--svc-d-fonce:#FCD34D}
.svc-pilotage   {--svc:#4338CA;--svc-soft:#E0E7FF;--svc-fonce:#3730A3;--svc-vif:#4F46E5;--svc-d:#818CF8;--svc-d-soft:#1B1D40;--svc-d-fonce:#A5B4FC}
.svc-outils     {--svc:#0F766E;--svc-soft:#CCFBF1;--svc-fonce:#115E59;--svc-vif:#0D9488;--svc-d:#2DD4BF;--svc-d-soft:#0E2A29;--svc-d-fonce:#5EEAD4}
.svc{--accent:var(--svc);--accent-soft:var(--svc-soft);--accent-fonce:var(--svc-fonce)}
@media (prefers-color-scheme: dark){
  .svc{--accent:var(--svc-d);--accent-soft:var(--svc-d-soft);--accent-fonce:var(--svc-d-fonce);--svc-vif:var(--svc-d)}
}
/* La section sombre redéfinit ses jetons : elle reprend la variante sombre. */
.svc .section-sombre,.section-sombre .svc{--accent:var(--svc-d);--accent-soft:var(--svc-d-soft);--accent-fonce:var(--svc-d-fonce)}
/* Page de service : un filet de la couleur du service sous l'en-tête. */
body.svc .hero{border-top:6px solid var(--svc-vif)}
/* Carte de service : filet en haut et pastille d'icône à la couleur du service. */
.card.svc,.path-card.svc{border-top:5px solid var(--svc-vif)}
.card.svc .card-icon,.path-card.svc .card-icon{background:var(--accent-soft);color:var(--accent)}

/* ─── Signature : contour marine et ombre décalée ──────────────────────── */
/* Le trait des publications (contour épais, ombre franche sans flou), dosé :
   sur le bouton principal, et sur les cartes cliquables au survol seulement.
   En sombre le marine disparaîtrait dans le fond : le trait passe au noir. */
:root{--trait:#0F172A}
@media (prefers-color-scheme: dark){:root{--trait:#000000}}
.btn-primary,.nav-cta{border:2px solid var(--trait);box-shadow:3px 3px 0 var(--trait)}
.btn-primary:hover,.nav-cta:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--trait)}
.btn-primary:active,.nav-cta:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--trait)}
/* Sur fond marine (bandeau, section sombre), l'ombre marine ne se verrait pas. */
.banner,.section-sombre{--trait:#000000}
a.card:hover,.path-card:hover{
  transform:translate(-3px,-3px);
  box-shadow:0 0 0 2px var(--trait),6px 6px 0 2px var(--trait);
}
@media (prefers-reduced-motion: reduce){
  .btn-primary:hover,.btn-primary:active,.nav-cta:hover,.nav-cta:active,a.card:hover,.path-card:hover{transform:none}
}

/* ─── Fond crème (accueil) ─────────────────────────────────────────────── */
/* Le papier des publications, sur deux sections seulement : le bloc des
   services et l'appel final. En sombre, le crème éblouirait : il devient le
   fond alternatif. */
:root{--creme:#FFF8EC}
@media (prefers-color-scheme: dark){:root{--creme:#111A2C}}
.section-creme{background:var(--creme)}

/* Appel final en version crème : texte à l'encre, bouton d'accent, et deux
   ronds de couleur qui débordent du cadre comme sur la grille du profil. */
.banner.banner-creme{position:relative;overflow:hidden;background:var(--creme);color:var(--ink);--trait:#0F172A;padding:clamp(64px,8vw,96px) 0}
@media (prefers-color-scheme: dark){.banner.banner-creme{--trait:#000000}}
.banner.banner-creme h2{color:var(--ink)}
.banner.banner-creme p{color:var(--ink-soft)}
.banner.banner-creme .btn-primary{background:var(--accent);color:var(--accent-ink)}
.banner.banner-creme .btn-primary:hover{background:var(--accent-fonce);color:var(--accent-ink)}
.banner.banner-creme .wrap{position:relative}
.banner.banner-creme::before,.banner.banner-creme::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.banner.banner-creme::before{width:260px;height:260px;left:-90px;top:-110px;background:#7C3AED}
.banner.banner-creme::after{width:200px;height:200px;right:-60px;bottom:-80px;background:#FACC15;border:4px solid #0F172A}
@media (max-width:700px){
  .banner.banner-creme::before{width:150px;height:150px;left:-70px;top:-80px}
  .banner.banner-creme::after{width:120px;height:120px;right:-50px;bottom:-60px}
}

/* ─── Le mot PILOTIA multicolore ───────────────────────────────────────── */
/* Les sept lettres de la mosaïque Instagram, une couleur de service chacune.
   Décoratif (aria-hidden) : le nom accessible est porté par le lien. */
.mot-pilotia{font-family:var(--font-display);font-weight:900;letter-spacing:.06em;line-height:1;white-space:nowrap}
.mot-pilotia span{text-shadow:2px 2px 0 var(--trait)}
.mot-pilotia span:nth-child(1){color:#2563EB}
.mot-pilotia span:nth-child(2){color:#F9563B}
.mot-pilotia span:nth-child(3){color:#16A34A}
.mot-pilotia span:nth-child(4){color:#7C3AED}
.mot-pilotia span:nth-child(5){color:#EC4899}
.mot-pilotia span:nth-child(6){color:#F59E0B}
.mot-pilotia span:nth-child(7){color:#4F46E5}
.mot-insta{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-top:10px;color:var(--ink-soft);text-decoration:none;font-weight:600}
.mot-insta .mot-pilotia{font-size:22px}
.mot-insta:hover .mot-pilotia{text-decoration:none}
.mot-insta:hover .mot-suite{color:var(--accent);text-decoration:underline}
.mot-pilotia-grand{display:block;font-size:clamp(56px,11vw,120px);margin-bottom:28px;letter-spacing:.04em}
.mot-pilotia-grand span{-webkit-text-stroke:3px var(--trait);paint-order:stroke fill;text-shadow:5px 5px 0 var(--trait)}

/* ─── Motion design sur le site ────────────────────────────────────────────
   Quatre gestes, tous légers (CSS, SVG et un peu de JS maison, aucune
   bibliothèque) et tous coupés sous prefers-reduced-motion : l'état final
   s'affiche directement. Formulaires, prix et pages légales ne bougent pas. */

/* 1. Films verticaux (9:16) : le texte à gauche, le film à droite sur grand
   écran ; empilés sur téléphone. preload="none" : rien n'est téléchargé
   avant le clic, seule l'affiche (30 Ko) est chargée. */
.film-bloc{display:grid;gap:clamp(28px,5vw,64px);align-items:center;grid-template-columns:minmax(0,1fr) minmax(0,340px)}
.film-bloc .lead{margin-top:14px}
.film-vertical{margin:0;justify-self:center;width:100%;max-width:340px}
.film-vertical video{
  display:block;width:100%;height:auto;aspect-ratio:9/16;
  border:2px solid var(--trait);border-radius:22px;background:#070B16;
  box-shadow:6px 6px 0 var(--trait);
}
@media (max-width:820px){
  .film-bloc{grid-template-columns:1fr}
  .film-vertical{max-width:300px}
}

/* 2. Tracé du logo dans le hero de l'accueil : le point turquoise part, la
   ligne se dessine, la flèche se pose. Une seule fois, 1,6 s. Décoratif
   (aria-hidden) et réservé aux écrans larges, où la droite du hero est vide. */
.hero-accueil .wrap{position:relative}
.hero-trace{display:none}
@media (min-width:1000px){
  .hero-trace{
    display:block;position:absolute;right:0;top:46%;
    width:clamp(200px,20vw,300px);height:auto;transform:translateY(-50%);
    overflow:visible;pointer-events:none;
  }
}
.hero-trace .trace-ligne{fill:none;stroke:var(--ink);stroke-width:21;stroke-linecap:round;stroke-linejoin:round}
.hero-trace .trace-fleche{fill:var(--ink)}
.hero-trace .trace-point{fill:#22D3C3}
.js .hero-trace .trace-point{animation:trace-point .35s cubic-bezier(.34,1.56,.64,1) .35s both;transform-origin:115px 365px}
.js .hero-trace .trace-ligne{stroke-dasharray:1;animation:trace-ligne 1.05s cubic-bezier(.55,.1,.3,1) .55s both}
.js .hero-trace .trace-fleche{animation:trace-fleche .4s cubic-bezier(.34,1.56,.64,1) 1.5s both;transform-origin:352px 198px}
@keyframes trace-point{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes trace-ligne{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes trace-fleche{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}

/* 3. Micro-interactions.
   Icône de carte : un petit saut au survol d'une carte cliquable. */
a.card:hover .card-icon,a.path-card:hover .card-icon,.path-card:hover .card-icon{animation:icone-saut .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes icone-saut{0%{transform:translateY(0)}35%{transform:translateY(-6px) rotate(-6deg)}70%{transform:translateY(1px) rotate(2deg)}100%{transform:none}}
/* Pastilles (« Gratuit »…) : elles se posent quand leur carte apparaît. */
.js .card.is-visible .pill{animation:pastille-pop .45s cubic-bezier(.34,1.56,.64,1) .3s both}
@keyframes pastille-pop{from{opacity:0;transform:scale(.4) rotate(-8deg)}to{opacity:1;transform:none}}

/* 4a. Titres de section mot par mot (animations.js découpe les mots ; le titre
   complet reste lu d'un bloc par les lecteurs d'écran). */
.js section .section-title.mots{opacity:1;transform:none;transition:none}
.section-title .mot{display:inline-block;opacity:0;transform:translateY(.45em);transition:opacity .4s ease-out,transform .5s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 55ms)}
.section-title.is-visible .mot{opacity:1;transform:none}

/* 4b. Frise de la méthode : les étapes sont reliées par un filet qui se
   remplit au défilement ; chaque numéro s'allume quand le filet l'atteint.
   Sans JS ou sous reduced-motion, --trace vaut 1 : le filet est plein. */
.etapes .step{position:relative;gap:22px;margin-bottom:0;padding-bottom:34px}
.etapes .step:last-child{padding-bottom:0}
.etapes .step-num{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  border:2px solid var(--accent);background:var(--card);color:var(--accent);
  position:relative;z-index:1;transition:background .3s ease,color .3s ease,transform .3s cubic-bezier(.34,1.56,.64,1);
}
.etapes .step-num.atteinte{background:var(--accent);color:var(--accent-ink);transform:scale(1.08)}
.etapes .step:not(:last-child)::before,.etapes .step:not(:last-child)::after{
  content:"";position:absolute;left:22px;top:50px;bottom:4px;width:2px;border-radius:2px;
}
.etapes .step:not(:last-child)::before{background:var(--line)}
.etapes .step:not(:last-child)::after{background:var(--accent);transform-origin:top;transform:scaleY(var(--trace,1))}

@media (prefers-reduced-motion: reduce){
  .js .hero-trace .trace-point,.js .hero-trace .trace-ligne,.js .hero-trace .trace-fleche,
  a.card:hover .card-icon,a.path-card:hover .card-icon,.path-card:hover .card-icon,
  .js .card.is-visible .pill{animation:none}
  .js .hero-trace .trace-ligne{stroke-dasharray:none}
  .section-title .mot{opacity:1;transform:none;transition:none}
  .etapes .step-num{transition:none}
  .etapes .step-num.atteinte{transform:none}
}

/* ─── Format app (téléphone et tablette) ──────────────────────────────────
   brand/format-app-CONCEPTION.md. Le mode app commence à 1 080 px, le seuil
   où le menu du haut se repliait déjà. Rien dans cette section ne change le
   rendu sur ordinateur, sauf l'encadré « L'essentiel ». */
:root{--hauteur-onglets:64px}
.onglets,.app-retour,.segment-cadre,.acces-rapide,.duree{display:none}

@media (max-width:1080px){
  body{padding-bottom:calc(var(--hauteur-onglets) + env(safe-area-inset-bottom))}

  /* En-tête : logo, ou lien retour sur les pages de détail, et bouton ☰. */
  .nav-links{display:none !important}
  .nav-toggle{width:48px;height:48px;padding:12px}
  .site-header{view-transition-name:entete}
  .site-header.a-retour .brand{display:none}
  .app-retour{
    display:inline-flex;align-items:center;gap:2px;min-height:48px;padding:0 12px 0 2px;margin-left:-10px;
    color:var(--accent);font-family:var(--font-body);font-size:17px;font-weight:600;text-decoration:none;
  }
  .app-retour svg{flex:none;width:26px;height:26px}

  /* Barre d'onglets. Elle garde les couleurs de la marque sur toutes les
     pages, même celles qui prennent la couleur d'un service (valeurs des
     jetons de :root, clair puis sombre). */
  .onglets{
    --accent:#0369A1;--accent-soft:#E1EEF6;--accent-ink:#FFFFFF;
    display:flex;justify-content:space-around;align-items:flex-start;
    position:fixed;left:0;right:0;bottom:0;z-index:30;
    height:calc(var(--hauteur-onglets) + env(safe-area-inset-bottom));
    padding:6px max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
    background:var(--card);border-top:1px solid var(--line);
    font-family:var(--font-body);view-transition-name:onglets;
  }
  .onglet{
    flex:1 1 0;min-width:48px;max-width:96px;min-height:52px;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;
    color:var(--ink-soft);text-decoration:none;font-size:11.5px;font-weight:600;line-height:16px;
    -webkit-tap-highlight-color:transparent;
  }
  .onglet-icone{width:56px;height:30px;border-radius:15px;display:flex;align-items:center;justify-content:center;transition:background .18s ease}
  .onglet svg{width:24px;height:24px}
  .onglet[aria-current]{color:var(--accent)}
  .onglet[aria-current] .onglet-icone{background:var(--accent-soft)}
  .onglet-libelle{white-space:nowrap}
  .onglet-centre{position:relative;color:var(--ink);font-weight:700}
  .onglet-rond{
    position:absolute;top:-24px;left:50%;margin-left:-30px;width:60px;height:60px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--accent);color:var(--accent-ink);border:2px solid var(--trait);box-shadow:3px 3px 0 var(--trait);
  }
  .onglet-rond svg{width:28px;height:28px}
  .onglet-centre[aria-current]{color:var(--accent)}
  .onglet-centre[aria-current] .onglet-rond{box-shadow:3px 3px 0 var(--trait),0 0 0 5px var(--accent-soft)}
  .onglet:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;border-radius:12px}
  .saisie .onglets{display:none}

  /* Panneau « Plus » : un <dialog> qui monte du bas de l'écran. */
  .plus{
    position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;max-height:min(85vh,640px);
    border:none;border-radius:24px 24px 0 0;padding:10px 0 calc(20px + env(safe-area-inset-bottom));
    background:var(--card);color:var(--ink);overflow-y:auto;font-family:var(--font-body);
    box-shadow:0 -10px 40px rgba(15,23,42,.25);
  }
  .plus::backdrop{background:rgba(15,23,42,.45)}
  .plus[open]{animation:plus-monte .22s cubic-bezier(.2,.8,.2,1)}
  .plus-poignee{width:40px;height:5px;border-radius:3px;background:var(--line-strong);opacity:.6;margin:0 auto 6px}
  .plus-tete{display:flex;align-items:center;justify-content:space-between;padding:0 10px 4px 22px}
  .plus-titre{margin:0;font-family:var(--font-body);font-size:20px;font-weight:700}
  .plus-fermer{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:12px;color:var(--ink);cursor:pointer}
  .plus-fermer svg{width:24px;height:24px}
  .plus-groupe{margin:14px 22px 2px;font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
  .plus-liste{list-style:none;margin:0;padding:0 22px}
  .plus-liste li{border-bottom:1px solid var(--line)}
  .plus-liste li:last-child{border-bottom:none}
  .plus-liste a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;color:var(--ink);text-decoration:none;font-size:16.5px;font-weight:500}
  .plus-liste a[aria-current]{color:var(--accent);font-weight:600}
  .plus-liste svg{flex:none;width:18px;height:18px;color:var(--ink-soft)}

  /* Correctif : une liste déroulante au libellé long élargissait le
     formulaire au-delà de l'écran (calculateurs de cotisations et du coût
     d'un salarié, en 360 et 390 px). */
  form{grid-template-columns:minmax(0,1fr)}
  select{max-width:100%}
}
@media (max-width:1080px) and (prefers-color-scheme: dark){
  .onglets{--accent:#4CA9E0;--accent-soft:#16283D;--accent-ink:#08131F}
}
@keyframes plus-monte{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}

/* Fondu entre deux pages ; les deux barres restent en place. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}
@media (prefers-reduced-motion: reduce){
  @view-transition{navigation:none}
  .plus[open]{animation:none}
}
@media print{
  .onglets,.plus,.app-retour,.segment-cadre,.replis-outils{display:none !important}
  body{padding-bottom:0}
}

/* Sections repliables (app.js), sur téléphone seulement : au-delà de 760 px
   le script retire ses enveloppes et la page reste celle d'origine. */
@media (max-width:760px){
  section.repli-actif{padding:0 !important;background:none !important;border:none !important}
  section.repli-actif > .wrap{padding:0;margin:0 24px 10px;background:var(--card);border-radius:16px}
  .repli-actif:not(section){padding:0;margin:0 0 10px;background:var(--card);border-radius:16px}
  /* h2.… : passe devant « .legal-page h2 » et « .card h2 », de même poids mais plus anciennes. */
  h2.repli-titre{margin:0;max-width:none;font-family:var(--font-body);font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
  .repli-titre .mot{opacity:1;transform:none;transition:none}
  .repli-bouton{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:12px 16px;background:none;border:none;border-radius:16px;color:inherit;font:inherit;text-align:left;cursor:pointer}
  .repli-chevron{flex:none;width:20px;height:20px;color:var(--ink-soft);transition:transform .2s ease}
  .repli-ouvert .repli-bouton{color:var(--accent)}
  .repli-ouvert .repli-chevron{transform:rotate(180deg);color:var(--accent)}
  .repli-corps:not([hidden]){padding:0 16px 16px}
  .repli-corps > .eyebrow{margin:2px 0 14px}
  .repli-corps .card{padding:18px;background:var(--paper-alt)}
  .repli-actif [id]{scroll-margin-top:72px}
  .replis-outils{display:flex;justify-content:flex-end;margin:0 24px 4px}
  .wrap > .replis-outils{margin:0 0 4px}
  .replis-tout{min-height:48px;padding:0 4px;background:none;border:none;color:var(--accent);font:600 14.5px var(--font-body);cursor:pointer}
}
@media (max-width:760px) and (prefers-reduced-motion: reduce){.repli-chevron{transition:none}}

/* Écrans Services et Mon espace : tuiles, lignes à toucher, pastilles. Sur
   ordinateur, la même page en grille. */
.hero-app{padding:clamp(36px,6vw,88px) 0 clamp(16px,3vw,32px)}
.hero-app h1{font-size:clamp(32px,5vw,56px);margin-bottom:8px}
.hero-app .lead{margin-top:6px}
/* section.… : plus précis que « .hero + section », qui ajouterait un grand vide. */
section.section-app{padding:0 0 clamp(48px,7vw,96px)}
.titre-groupe{margin:22px 0 10px;font-family:var(--font-body);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.tuiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tuile{display:flex;flex-direction:column;gap:5px;height:100%;padding:16px 14px 18px;background:var(--card);border-radius:var(--radius);border-top:4px solid var(--svc-vif,var(--accent));color:var(--ink);text-decoration:none;font-family:var(--font-body)}
.tuile-icone{width:40px;height:40px;margin-bottom:6px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent)}
.tuile-icone svg{width:22px;height:22px}
.tuile-titre{font-size:16px;font-weight:700;line-height:1.25}
.tuile-texte{font-size:13.5px;line-height:1.4;color:var(--ink-soft)}
.liste-app{list-style:none;margin:0;padding:0;background:var(--card);border-radius:var(--radius);overflow:hidden}
.liste-app li + li{border-top:1px solid var(--line)}
.ligne-app{display:flex;align-items:center;gap:13px;min-height:64px;padding:10px 16px;color:var(--ink);text-decoration:none;font-family:var(--font-body)}
.ligne-icone{flex:none;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent)}
.ligne-icone svg{width:21px;height:21px}
.ligne-texte{flex:1;min-width:0}
.ligne-titre{display:block;font-size:16px;font-weight:600;line-height:1.3}
.ligne-sous{display:block;margin-top:2px;font-size:13.5px;line-height:1.4;color:var(--ink-soft)}
.ligne-app > svg{flex:none;width:18px;height:18px;color:var(--ink-soft)}
.puces{list-style:none;margin:0;padding:0 0 4px;display:flex;flex-wrap:wrap;gap:8px}
.puces a{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--ink);text-decoration:none;font:600 15px var(--font-body)}
.carte-pas-sur{margin-top:28px;padding:20px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);font-family:var(--font-body)}
.carte-pas-sur p{margin:0 0 12px}
@media (min-width:761px){
  .liste-app{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:none;border-radius:0;overflow:visible}
  .liste-app li{background:var(--card);border-radius:var(--radius)}
  .liste-app li + li{border-top:none}
  .carte-pas-sur{display:flex;align-items:center;justify-content:space-between;gap:20px}
  .carte-pas-sur p{margin:0}
}
@media (max-width:760px){
  .puces{flex-wrap:nowrap;overflow-x:auto;margin:0 -24px;padding:0 24px 6px;scrollbar-width:none}
  .puces::-webkit-scrollbar{display:none}
  .puces li{flex:none}
}

/* Sous-onglets d'Outils (Outils, Conseils, Guides), en mode app. */
@media (max-width:1080px){
  .segment-cadre{display:block;padding-top:14px}
  .segment{display:grid;grid-template-columns:repeat(3,1fr);padding:3px;border-radius:12px;background:var(--paper-alt);font-family:var(--font-body)}
  .segment a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:10px;color:var(--ink-soft);text-decoration:none;font-size:15px;font-weight:600}
  .segment a[aria-current]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(15,23,42,.14)}
  .segment-cadre + section.hero{padding-top:28px !important}
}

/* Grille de cartes qui devient une liste sur téléphone. Carte-lien : icône à
   la couleur de la page, titre, description limitée à deux lignes (le texte
   complet reste dans la page et s'affiche sur ordinateur), chevron. Carte
   avec un formulaire (guides à télécharger) : une ligne compacte. Les
   !important l'emportent sur le style="display:block" des cartes-liens. */
@media (max-width:760px){
  .grille-liste{gap:0;background:var(--card);border-radius:var(--radius);overflow:hidden}
  .grille-liste > .card{border-radius:0;border-bottom:1px solid var(--line);padding:16px}
  .grille-liste > .card:last-child{border-bottom:none}
  .grille-liste > .card h2,.grille-liste > .card h3{margin:0 0 4px;font-size:16px;line-height:1.3}
  .grille-liste > a.card{display:grid !important;grid-template-columns:40px minmax(0,1fr) 12px;column-gap:13px;align-items:start;padding:14px}
  .grille-liste > a.card > .card-icon{grid-column:1;grid-row:1 / span 3;width:40px;height:40px;margin:0;background:var(--accent-soft);color:var(--accent)}
  .grille-liste > a.card > :not(.card-icon){grid-column:2;margin:0}
  .grille-liste > a.card > p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;line-height:1.4;color:var(--ink-soft)}
  .grille-liste > a.card > .pill{margin:0 0 5px;justify-self:start}
  .grille-liste > a.card::after{content:"";grid-column:3;grid-row:1 / span 3;align-self:center;width:8px;height:8px;border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);transform:rotate(-45deg)}
  .grille-liste > a.card:not(:has(> .card-icon)){grid-template-columns:minmax(0,1fr) 12px}
  .grille-liste > a.card:not(:has(> .card-icon)) > *{grid-column:1}
  .grille-liste > a.card:not(:has(> .card-icon))::after{grid-column:2}
  .grille-liste > div.card > p{font-size:14px;margin-bottom:8px}
}

/* Mon espace. */
.espace-prive{display:flex;align-items:center;gap:8px;margin:6px 0 0;font:500 14px var(--font-body);color:var(--ink-soft)}
.espace-prive svg{flex:none;width:17px;height:17px}
#espace-titre:focus{outline:none}
.espace-intro{margin-top:0}
.departs{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.depart,.espace-carte{padding:18px;background:var(--card);border-radius:var(--radius);font-family:var(--font-body)}
.espace-tete{display:flex;align-items:center;gap:12px}
.espace-icone{flex:none;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent)}
.espace-icone svg{width:22px;height:22px}
.depart h2,.espace-carte h2{margin:0;font-family:var(--font-body);font-size:17px;font-weight:700;letter-spacing:-.01em}
.depart p{margin:10px 0 8px;font-size:14.5px;color:var(--ink-soft)}
.espace-date{margin:2px 0 0;font-size:13px;color:var(--ink-soft)}
.espace-score{margin:14px 0 10px;font-size:15px;color:var(--ink-soft)}
.espace-score strong{margin-right:2px;font-size:36px;letter-spacing:-.02em;color:var(--ink)}
.espace-score .pill{margin:0 0 0 8px;vertical-align:8px}
.espace-themes{list-style:none;margin:0 0 6px;padding:0}
.espace-themes li{display:grid;grid-template-columns:1fr auto;gap:2px 8px;margin-bottom:8px;font-size:13.5px}
.espace-themes .jauge{grid-column:1 / -1;height:7px;border-radius:4px;background:var(--paper-alt);overflow:hidden}
.espace-themes .jauge span{display:block;height:100%;border-radius:4px;background:var(--accent)}
.espace-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.espace-kpi{margin:14px 0 4px;font-size:15px;color:var(--ink-soft)}
.espace-kpi strong{font-size:26px;letter-spacing:-.02em;color:var(--ink)}
.lien-fleche{display:inline-flex;align-items:center;min-height:48px;font:600 15px var(--font-body);color:var(--accent);text-decoration:none}
#espace-resultats{display:grid;gap:12px;align-items:start}
#espace-resultats[hidden]{display:none}
#espace-resultats .titre-groupe{margin-bottom:0}
.effacer{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin-top:8px;background:none;border:none;color:#B91C1C;font:600 14.5px var(--font-body);cursor:pointer}
.effacer svg{width:18px;height:18px}
@media (prefers-color-scheme: dark){.effacer{color:#F87171}}
@media (min-width:761px){
  .departs{grid-template-columns:repeat(3,1fr)}
  #espace-resultats{grid-template-columns:1fr 1fr}
  #espace-resultats > .titre-groupe,#espace-resultats > .liste-app,#espace-resultats > .effacer{grid-column:1 / -1}
  #espace-resultats > .effacer{justify-self:start}
}

/* Encadré « L'essentiel » (pages de service et articles) : trois points au
   plus, tirés de la page, juste avant les boutons du haut de page s'il y en
   a. Visible partout, y compris sur ordinateur. */
.essentiel{margin:26px 0 0;max-width:62ch;padding:16px 18px 14px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--svc-vif,var(--accent));border-radius:var(--radius);font-family:var(--font-body)}
.essentiel-titre{display:flex;align-items:center;gap:7px;margin:0 0 6px;color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.essentiel-titre svg{flex:none;width:17px;height:17px}
.essentiel ul{list-style:none;margin:0;padding:0}
.essentiel li{display:flex;gap:9px;padding:5px 0;color:var(--ink);font-size:15px;line-height:1.45}
.essentiel li svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--accent)}
.js .hero .essentiel{animation:hero-fade-in .5s ease-out .15s both}
@media (prefers-reduced-motion: reduce){.js .hero .essentiel{animation:none}}

/* Formulaires au pouce et résultats de calcul mis en valeur (mode app).
   16 px au moins : l'iPhone ne zoome plus à la saisie. */
@media (max-width:1080px){
  input:not([type="radio"]):not([type="checkbox"]),select,textarea{font-size:16px;min-height:48px}
  .resultat{padding:14px 16px;border-radius:14px;background:var(--accent-soft);scroll-margin-top:72px;scroll-margin-bottom:calc(var(--hauteur-onglets) + 24px)}
  .resultat > p:last-child{margin-bottom:0}
}

/* Rendez-vous (contact.html) : la réservation passe en premier. */
@media (max-width:1080px){
  .rdv-carte{padding:20px 18px;background:var(--card);border:2px solid var(--trait);border-radius:var(--radius);box-shadow:4px 4px 0 var(--trait)}
  .rdv-carte .section-title{margin-bottom:8px;font-size:22px}
  .rdv-carte .btn{width:100%}
  .duree{display:inline-flex;align-items:center;margin:0 0 10px;padding:5px 11px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font:700 12.5px var(--font-body)}
}

/* Accueil en mode app : quatre accès rapides à la place des deux boutons du
   haut (leurs actions restent dans les accès et le bouton Rendez-vous), puis
   les piliers, les parcours et les avis en cartes à faire glisser. */
@media (max-width:1080px){
  .page-accueil .hero-accueil .btn-row{display:none}
  /* section.… : plus précis que « .hero + section ». */
  section.acces-rapide{display:block;padding:0 0 32px}
  .acces-titre{margin:0 0 12px;font-family:var(--font-body);font-size:20px;font-weight:700;letter-spacing:-.02em}
  .acces-grille{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .acces{display:flex;flex-direction:column;justify-content:space-between;gap:12px;height:100%;min-height:96px;padding:13px 12px 14px;background:var(--card);border-radius:16px;border-top:4px solid var(--svc-vif,var(--accent));color:var(--ink);text-decoration:none;font-family:var(--font-body);font-size:15px;font-weight:700;line-height:1.25}
  .acces-icone{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent)}
  .acces-icone svg{width:20px;height:20px}
}
@media (min-width:600px) and (max-width:1080px){.acces-grille{grid-template-columns:repeat(4,1fr)}}
@media (max-width:760px){
  .page-accueil .triangle-grid,.page-accueil .path-cards,.page-accueil .avis{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:-24px;margin-right:-24px;padding:4px 24px 14px;scroll-padding:0 24px;scrollbar-width:none}
  .page-accueil .triangle-grid::-webkit-scrollbar,.page-accueil .path-cards::-webkit-scrollbar,.page-accueil .avis::-webkit-scrollbar{display:none}
  .page-accueil .triangle-grid > *,.page-accueil .triangle-base > *,.page-accueil .path-cards > *,.page-accueil .avis > *{flex:0 0 84%;scroll-snap-align:start}
  .page-accueil .avis:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
}