/* ==========================================================================
   COULEURS
   Trois emplacements d'accent, herites de la maquette : --a1 la ou Loom met
   du violet, --a2 la ou il met de l'orange, --a3 la ou il met du vert. Chacun
   porte quatre valeurs : la couleur pleine, un voile de fond tres pale, un
   clair pour la fin des degrades, un fonce lisible sur le voile.
   Les anciens noms (violet, orange, vert) restent en alias plus bas : le
   document n'a pas eu a etre reecrit quand les teintes ont change.
   ========================================================================== */

/* --- TROIS BLEUS : chaque bleu a un emploi, aucun ne fait tout.
       Encre #1a4e7f pour les surfaces et les actions, c'est le registre de
       confiance que reconnait un dirigeant de TPE. Marine #123263 pour les
       aplats profonds, qui creusent les respirations de la page. Et le bleu
       de charte #0570E8 nulle part ailleurs que dans le logo, ou il a ete
       dessine pour vivre : un cercle de rayon 16 dans un dessin de 1006 sur
       177, soit 0,45 % de sa surface. C'est une ponctuation, pas un fond. -- */
:root {
  --a2-texte: #ffffff;
  --bleu: #1a4e7f; --bleu-fonce: #16456e; --bleu-nuit: #123263;
  --bleu-voile: #e8eff7; --bleu-clair: #9dbcd7;
  --a1: #1a4e7f; --a1-voile: #e8eff7; --a1-clair: #9dbcd7; --a1-fonce: #123263;
  --a2: #1a4e7f; --a2-voile: #e8eff7; --a2-clair: #9dbcd7; --a2-fonce: #123263;
  --a3: #1a4e7f; --a3-voile: #e8eff7; --a3-clair: #9dbcd7; --a3-fonce: #123263;
  --survol: #123263;

  /* 19/08/2026. Le bleu de charte cesse d'etre une valeur ecrite en dur dans
     la seule section des offres : il devient une variable, au meme rang que
     les deux autres. Il ne gagne aucune surface pour autant, il n'apparait
     qu'a trois endroits, tous minuscules : quatre lettres du titre, deux
     segments etroits du ruban, et les liens des offres. */
  --peps: #0570e8;

  /* 19/08/2026. Le peps passe de decor a fonction : il devient la couleur
     d'action de toute la page. .bouton et .lien-fleche lisent deja
     var(--action, var(--bleu)), il suffisait de declarer --action ici au
     lieu de la confiner a #offres. Le peps ne gagne aucune surface de fond
     pour autant : il ne peint que ce qui se clique. Blanc sur peps = 4,68:1
     pour un seuil de 4,5, c'est conforme mais sans marge, d'ou --action-fonce
     partout ou le fond n'est pas blanc. */
  --action: var(--peps);
  --action-fonce: #0a56b8;
}

/* --- Le seul endroit ou paraisse le bleu de charte. Seuls les liens de la
       section des offres le portent : les quatre bandeaux de carte et les
       puces restent en encre, c'est ce qui rend les quatre fiches identiques
       entre elles. La couleur vive ne sert qu'a designer le point de clic.
       La variable est declaree sur la section, elle descend donc a tout ce
       qu'elle contient sans qu'aucun composant ait a le savoir. --------- */
/* La regle qui posait --action sur #offres a ete retiree le 19/08/2026 :
   la variable est desormais declaree a la racine et vaut pour toute la page. */

/* ==========================================================================
   NEVENTIA · feuille de la page d'accueil
   Direction « Loom · trois bleus · offres en charte », en ligne depuis le
   14/08/2026. Les deux pages legales gardent styles.css, qui reste en service.

   Les trois emplacements d'accent (--a1, --a2, --a3) portent tous le meme
   bleu d'encre #1a4e7f : ce qui distingue une carte d'une autre n'est plus la
   teinte mais la typographie et l'espace. Le bleu de charte #0570E8, celui du
   logo, n'apparait qu'a un seul endroit, sur les liens de la section des
   offres, la ou il faut designer le point de clic.

   Le banc d'essai des palettes reste en local dans _labo-loom-palettes.html.
   ========================================================================== */

@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-latin.woff2') format('woff2-variations');
  font-weight: 300 900; font-display: swap;
}

:root {
  --encre:       #101418;
  --encre-doux:  #5a6270;
  --blanc:       #ffffff;
  /* Alias : le document continue de parler de violet, d'orange et de vert.
     Ce ne sont plus des couleurs, ce sont des emplacements. */
  --violet:       var(--a1);
  --violet-voile: var(--a1-voile);
  --orange:       var(--a2);
  --orange-voile: var(--a2-voile);
  --vert:         var(--a3);
  --vert-voile:   var(--a3-voile);
  --vert-fonce:   var(--a3-fonce);
  --filet:        #e4e8ee;

  --largeur: 1180px;
  --gouttiere: 24px;
  --elan: cubic-bezier(.32, .72, 0, 1);
  --vite: .22s var(--elan);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--blanc); color: var(--encre);
  font-family: 'Figtree', system-ui, sans-serif; font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* --- Accessibilite -------------------------------------------------------
   Le lien d'evitement est le premier element focalisable du document : il
   permet a qui navigue au clavier de sauter la barre de navigation. Il ne
   s'affiche qu'une fois atteint. Le contour de focalisation, lui, ne parait
   qu'au clavier, jamais sous la souris. ---------------------------------- */
.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--encre); color: #fff; padding: 12px 20px;
  border-radius: 10px; text-decoration: none; font-weight: 700;
}
.evitement:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--action); outline-offset: 3px; border-radius: 3px; }

.enveloppe { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.03em; line-height: 1.04; }
p { margin: 0; }
a { color: inherit; }


/* -- Le bouton ------------------------------------------------------------
   Pilule pleine, jamais de contour. C'est la forme la plus reconnaissable de
   leur interface, et elle porte toute la couleur d'action de la page. */
.bouton {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--action, var(--bleu)); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 1.02rem;
  padding: 15px 30px; border-radius: 999px; border: 0; cursor: pointer;
  transition: background var(--vite), transform var(--vite);
}
.bouton:hover { background: var(--action-fonce); }
.bouton:active { transform: scale(.98); }
/* Le texte de ce bouton suit l emplacement sur lequel il est pose, il ne
   peut pas etre fixe une fois pour toutes : sur l orange de Loom il doit
   etre sombre, sur un bleu fonce il doit etre clair. */
.bouton--orange { background: var(--action, var(--orange)); color: #fff; }
.bouton--orange:hover { background: var(--action-fonce); }
.bouton--petit { padding: 11px 22px; font-size: .95rem; }

/* La couleur d'action est une variable a part : elle ne peint pas de
   surface, elle ne marque que ce sur quoi on peut cliquer. Non definie, elle
   retombe sur le bleu de la palette, donc rien ne change ailleurs. */
.lien-fleche {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--action, var(--bleu)); font-weight: 700; text-decoration: none;
}
/* Garde-fou. Aucun lien fleche ne vit aujourd'hui dans une section voilee,
   ils sont tous dans #offres qui est sur fond blanc. Mais le jour ou on en
   posera un, le peps y tomberait a 4,15:1, sous le seuil. Cette regle le
   rattrape d'avance, a 6,14:1. */
.section--voile .lien-fleche { color: var(--action-fonce); }
.lien-fleche::after { content: '→'; transition: transform var(--vite); }
.lien-fleche:hover::after { transform: translateX(3px); }

/* -- L'en-tête ------------------------------------------------------------ */
.entete {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--filet);
}
.entete__barre { display: flex; align-items: center; gap: 34px; height: 68px; }
.entete__logo { display: inline-flex; text-decoration: none; }
.entete__logo img { width: 148px; height: auto; display: block; }
.entete nav { display: flex; gap: 26px; margin-left: 8px; }
.entete nav a { text-decoration: none; font-weight: 600; font-size: .97rem; color: var(--encre); }
.entete nav a:hover { color: var(--bleu); }
.entete__fin { margin-left: auto; display: flex; align-items: center; gap: 18px; }
@media (max-width: 860px) { .entete nav { display: none; } }

/* Sous 480 px, « Réserver mon audit » passait sur deux lignes et le bouton,
   devenu plus haut que la barre, debordait sur le ruban. Il tient sur une
   ligne des lors qu'on lui rend la place que prenaient la gouttiere entre le
   logo et lui, et son propre rembourrage. */
@media (max-width: 480px) {
  .entete__barre { gap: 12px; }
  .entete__logo img { width: 124px; }
  .entete .bouton--petit { white-space: nowrap; padding: 10px 16px; font-size: .88rem; }
}

/* -- Le ruban -------------------------------------------------------------
   Leur signature. Une bande de formes anguleuses juste sous l'en-tête, qui
   annonce la couleur, au sens propre, avant que la page ne commence. Chez eux
   elle est arc-en-ciel ; ici elle reste dans la famille bleue avec deux
   touches, sinon Neventia perd son sérieux dès la première seconde. */
.ruban { display: flex; height: 14px; overflow: hidden; }
.ruban span { flex: 1; transform: skewX(-22deg); transform-origin: bottom; }
/* 19/08/2026. Le ruban portait deux bleus, il en porte trois. Le peps est
   pose sur les deux seuls segments etroits qui l'encadrent bien, le 2 et le
   6, soit 2 parts sur 15,6 : 13 % de la largeur du ruban, sur une bande de
   14 px de haut. Les segments larges restent en encre, le marine garde les
   3 et 7 et continue de creuser. L'ordre encre / peps / marine se lit deux
   fois de suite, ce qui donne un rythme au lieu d'une suite de taches. */
.ruban span:nth-child(1) { background: var(--bleu); flex: 2.4; }
.ruban span:nth-child(2) { background: var(--peps); }
.ruban span:nth-child(3) { background: var(--bleu-nuit); flex: 1.6; }
.ruban span:nth-child(4) { background: var(--violet); }
.ruban span:nth-child(5) { background: var(--bleu); flex: 3; }
.ruban span:nth-child(6) { background: var(--peps); }
.ruban span:nth-child(7) { background: var(--bleu-nuit); flex: 2; }
.ruban span:nth-child(8) { background: var(--orange); }
.ruban span:nth-child(9) { background: var(--bleu); flex: 2.6; }

/* -- Le héros ------------------------------------------------------------- */
.heros { text-align: center; padding: clamp(64px, 9vw, 120px) 0 clamp(56px, 7vw, 96px); }
.heros h1 {
  font-size: clamp(2.6rem, 6.2vw, 4.2rem);
  max-width: 16ch; margin-inline: auto; text-wrap: balance;
}
/* Le mot en couleurs, lettre à lettre. C'est le geste le plus visible de leur
   page d'accueil, et le seul endroit où la fantaisie est totale. */
/* 19/08/2026. Les six lettres portaient la meme teinte, le geste ne se
   voyait plus. Elles portent maintenant les trois bleus : le peps sur
   quatre lettres, l'encre sur la troisieme, le marine sur la sixieme. Le
   titre fait au moins 41,6 px, donc du grand texte : le peps y est a
   4,68:1 pour un seuil de 3, l'encre a 8,61 et le marine a 11,2. */
.arc span:nth-child(6n+1) { color: var(--peps); }
.arc span:nth-child(6n+2) { color: var(--peps); }
.arc span:nth-child(6n+3) { color: var(--bleu); }
.arc span:nth-child(6n+4) { color: var(--peps); }
.arc span:nth-child(6n+5) { color: var(--peps); }
.arc span:nth-child(6n+6) { color: var(--bleu-nuit); }

.heros p.plomb {
  margin: 26px auto 0; max-width: 52ch;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--encre-doux);
}
.heros__actions { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.reassurance { font-size: .92rem; color: var(--encre-doux); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .76rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--bleu); background: var(--bleu-voile);
  padding: 7px 15px; border-radius: 999px; margin-bottom: 22px;
}
.eyebrow svg { width: 13px; height: 13px; fill: currentColor; }

/* -- Les sections --------------------------------------------------------- */
.section { padding: clamp(64px, 8vw, 110px) 0; }
.section--voile { background: var(--bleu-voile); }
.section__tete { text-align: center; max-width: 34ch; margin: 0 auto clamp(40px, 5vw, 64px); }
.section__tete h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.section__tete p { margin-top: 16px; color: var(--encre-doux); }

/* -- Les cartes d'offre ---------------------------------------------------
   Le filet dégradé en tête de carte est leur autre marque de fabrique : c'est
   ce qui fait qu'une grille de quatre cartes blanches n'est pas grise. Chaque
   carte a sa couleur, aucune n'est plus grosse qu'une autre. */
.grille { display: grid; gap: 22px; }
@media (min-width: 720px)  { .grille--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .grille--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 720px)  { .grille--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .grille--3 { grid-template-columns: repeat(3, 1fr); } }

.carte {
  position: relative; display: flex; flex-direction: column;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: 16px;
  padding: 30px 26px 26px; overflow: hidden;
  transition: transform var(--vite), box-shadow var(--vite);
}
.carte::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 6px;
  background: linear-gradient(90deg, var(--a), var(--b));
}
.carte:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(16,20,24,.28); }
.carte--1 { --a: var(--a3);        --b: var(--a3-clair); }
.carte--2 { --a: var(--a1);        --b: var(--a1-clair); }
.carte--3 { --a: var(--a2);        --b: var(--a2-clair); }
.carte--4 { --a: var(--bleu);      --b: var(--bleu-clair); }
.carte h3 { font-size: 1.28rem; margin-bottom: 10px; }
.carte p { font-size: .97rem; color: var(--encre-doux); }
.carte ul { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 9px; }
.carte li { position: relative; padding-left: 22px; font-size: .93rem; color: var(--encre-doux); }
.carte li::before {
  content: ''; position: absolute; left: 0; top: .48em; width: 8px; height: 8px;
  border-radius: 3px; background: var(--a);
}
.carte .lien-fleche { margin-top: auto; font-size: .95rem; }

/* -- Le bloc plein ---------------------------------------------------------
   Un aplat de bleu sur toute la largeur, texte blanc, et surtout un bouton
   ORANGE. C'est le seul endroit de leur page où l'appel à l'action change de
   couleur, et c'est précisément ce qui le rend impossible à manquer. */
.plein {
  background: var(--bleu-nuit); color: #fff; border-radius: 24px;
  padding: clamp(44px, 6vw, 82px) clamp(24px, 4vw, 64px); text-align: center;
}
.plein h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); max-width: 20ch; margin-inline: auto; }
.plein p { margin: 20px auto 30px; max-width: 54ch; color: rgba(255,255,255,.82); }

/* -- Le chiffre ------------------------------------------------------------ */
.chiffre { text-align: center; }
.chiffre b {
  display: block; font-size: clamp(3.4rem, 8vw, 5.6rem); font-weight: 800;
  line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.chiffre span { display: block; margin-top: 12px; color: var(--encre-doux); font-size: .97rem; }

/* -- Le pied --------------------------------------------------------------- */
.pied { padding: 0 0 44px; }
.pied__panneau { background: #f6f8fb; border-radius: 24px; padding: clamp(32px, 4vw, 54px); }
.pied__grille { display: grid; gap: 30px; }
@media (min-width: 720px) { .pied__grille { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.pied__rubrique { margin: 0 0 14px; font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--encre-doux); font-weight: 800; }
.pied a { display: block; text-decoration: none; font-size: .95rem; padding: 5px 0; color: var(--encre); }
.pied a:hover { color: var(--bleu); }
.pied__grille span { display: block; font-size: .95rem; padding: 5px 0; }
.pied__bas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; margin-top: 30px; font-size: .88rem; color: var(--encre-doux); }


/* Le nombre et son unité ne se séparent jamais. « 3 300 h » se coupait entre
   le nombre et le « h » dans une colonne étroite, et le h se retrouvait seul
   sur la ligne du dessous. */
.chiffre b { white-space: nowrap; }

/* -- Le rappel d'action --------------------------------------------------
   Le vrai site en pose quatre au fil de la page, avec à chaque fois une
   phrase de réassurance différente, adaptée à l'endroit où on se trouve. La
   maquette n'en avait aucun : on lisait dix sections avant de retrouver un
   bouton. C'est ce qui manquait le plus. */
.rappel { text-align: center; margin-top: clamp(38px, 5vw, 58px); }
.rappel .reassurance { display: block; margin-top: 14px; }
.section--voile .rappel .reassurance { color: var(--encre-doux); }

/* -- Le cadre coloré des photos -------------------------------------------
   Chez Loom, une image n'est jamais posée nue : elle repose sur deux blocs de
   couleur légèrement décalés, l'un derrière en haut, l'autre derrière à
   droite. C'est ce qui donne le relief et la gaieté, et c'est ce que ma
   première version n'avait pas du tout. */
.cadre { position: relative; isolation: isolate; }
.cadre::before, .cadre::after {
  content: ''; position: absolute; z-index: -1; border-radius: 14px;
}
.cadre::before { inset: -22px auto auto -18px; width: 42%; height: 62%; background: var(--c1, var(--violet)); transform: rotate(-2.5deg); }
.cadre::after  { inset: auto -20px -24px auto; width: 46%; height: 58%; background: var(--c2, var(--orange)); transform: rotate(2deg); }
.cadre img { display: block; width: 100%; height: auto; border-radius: 16px; position: relative; }
@media (max-width: 720px) {
  .cadre::before { inset: -12px auto auto -10px; width: 46%; height: 56%; transform: rotate(-2deg); }
  .cadre::after  { inset: auto -11px -13px auto; width: 48%; height: 54%; transform: rotate(1.5deg); }
}

/* Une proportion plutot qu'une hauteur fixe : la colonne change de largeur
   selon la fenetre, une hauteur en pixels ferait varier le cadrage. En 4/3 la
   photo montre nettement plus de scene qu'en bandeau. */
.cas__photo { border-radius: 14px; width: 100%; height: auto; aspect-ratio: 7 / 6; object-fit: cover; margin-bottom: 20px; display: block; }

.bande-photo { border-radius: 20px; overflow: hidden; margin-bottom: clamp(28px, 4vw, 46px); }
.bande-photo img { display: block; width: 100%; height: clamp(220px, 34vw, 380px); object-fit: cover; }

/* -- L'inventaire des tâches (bloc 01) -------------------------------------
   Remplace les neuf pastilles pastel. Neuf pastilles identiques dans un
   nuage centré, c'est le motif le plus générique qui soit : aucune
   hiérarchie, aucun sens dans l'ordre, rien qui se retienne. Ici la grille
   est franche, les cellules ne sont plus des objets mais des lignes, et le
   texte revient à sa taille de lecture.

   La couleur ne disparaît pas pour autant : elle quitte le fond et passe
   dans le filet du haut, exactement comme le fait déjà le quadrillage des
   raisons plus bas dans la page. C'est la même signature, appliquée à un
   contenu de plus. Elle ne peut pas passer dans le chiffre : à cette
   taille, l'orange plein sur blanc tombe à 1,8 de contraste et le vert à
   2,4. Sur un filet, la question ne se pose pas. */

/* Le repère annonce ce que le lecteur regarde avant qu'il le regarde. Aligné
   à gauche sur la grille, pas centré sur le chapeau : il appartient à
   l'inventaire, pas au titre. */
.annonce-inv {
  margin: 0 0 38px; text-align: left;
  font-size: .84rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--encre);
}
/* Le gris-bleu du repere le posait au meme niveau que les neuf lignes : on
   pouvait le prendre pour un dixieme item, ou pour le titre de la seule
   premiere colonne. En encre pleine, il redevient ce qu'il est, l'annonce
   de tout ce qui suit. La distinction ne tient pas qu'au gras : le repere
   est en capitales espacees, les neuf lignes sont en bas de casse. Deux
   registres differents ne se confondent pas. */
.inventaire {
  list-style: none; margin: 0; padding: 0; text-align: left;
  display: grid; column-gap: clamp(24px, 3.6vw, 52px);
}
@media (min-width: 700px)  { .inventaire { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .inventaire { grid-template-columns: repeat(3, 1fr); } }
.inventaire li {
  border-top: 2px solid var(--c);
  padding: 17px 0 21px;
  display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: baseline;
  font-size: .99rem; line-height: 1.42;
}
.inventaire b {
  font-size: .74rem; font-weight: 800; letter-spacing: .06em;
  font-variant-numeric: tabular-nums; color: var(--encre-doux);
}
.inventaire li:nth-child(4n+1) { --c: var(--bleu); }
.inventaire li:nth-child(4n+2) { --c: var(--a1); }
.inventaire li:nth-child(4n+3) { --c: var(--a3); }
.inventaire li:nth-child(4n+4) { --c: var(--a2); }
@media (max-width: 560px) {
  .inventaire li { grid-template-columns: 26px 1fr; gap: 10px; font-size: .95rem; padding: 14px 0 17px; }
}

/* -- Le simulateur --------------------------------------------------------- */
.simu { display: grid; gap: 20px; }
@media (min-width: 900px) { .simu { grid-template-columns: 1.05fr .95fr; } }
.simu__carte { background: var(--blanc); border: 1px solid var(--filet); border-radius: 18px; padding: clamp(22px, 3vw, 32px); }
.champ + .champ { margin-top: 26px; }
.champ__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.champ__nom { font-size: .93rem; color: var(--encre-doux); }
.champ__valeur { font-weight: 800; font-size: 1.22rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.curseur { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; display: block; background: transparent; cursor: pointer; }
.curseur::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--bleu) var(--p,50%), var(--filet) var(--p,50%)); }
.curseur::-moz-range-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--bleu) var(--p,50%), var(--filet) var(--p,50%)); }
.curseur::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff; border: 3px solid var(--bleu); box-shadow: 0 2px 8px rgba(16,20,24,.18); }
.curseur::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--bleu); }
@media (pointer: coarse) { .curseur { height: 44px; } .curseur::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -10px; } }
.champ__bornes { display: flex; justify-content: space-between; font-size: .78rem; color: var(--encre-doux); }
.resultat { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.resultat__chiffre { font-size: clamp(3rem, 6.6vw, 4.6rem); font-weight: 800; line-height: .96; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.resultat__unite { font-size: .32em; color: var(--bleu); margin-left: .16em; }
.resultat__cout { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--filet); }
.resultat__cout b { display: block; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--bleu); letter-spacing: -.03em; }
.equiv { margin-top: 20px; background: var(--bleu-nuit); color: #fff; border-radius: 18px; padding: clamp(22px, 3vw, 32px); }
.equiv__grille { display: grid; gap: 22px; margin-top: 18px; }
@media (min-width: 720px) { .equiv__grille { grid-template-columns: repeat(3, 1fr); gap: 30px; } }
.equiv b { display: block; font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.equiv span { display: block; margin-top: 9px; font-size: 1.05rem; line-height: 1.5; color: rgba(255,255,255,.8); }

/* -- Le bandeau de chiffres ------------------------------------------------
   Il portait quatre chiffres dont le premier repetait celui que le
   simulateur venait de calculer juste au-dessus. Un chiffre deja lu ne
   produit rien. Il porte maintenant l'etat du marche, mesure par un tiers,
   et se termine sur le seul engagement qui soit de nous.

   Une regle a tenir : la source est affichee. Sur une page qui vend de la
   rigueur a des dirigeants mefiants, un pourcentage sans provenance vaut
   moins que pas de pourcentage du tout. */
.bandeau { background: var(--bleu); color: #fff; }
.bandeau .chiffre span { color: rgba(255,255,255,.78); }
.bandeau__annonce {
  margin: 0 0 clamp(28px, 4vw, 44px); text-align: center;
  font-size: .78rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.66);
}
.bandeau__source {
  margin: clamp(30px, 4vw, 46px) auto 0; max-width: 62ch; text-align: center;
  font-size: .84rem; line-height: 1.5; color: rgba(255,255,255,.6);
}


/* -- Essai contre integration ---------------------------------------------
   Ce bloc traite la seule objection que le lecteur a deja formee a cet
   endroit de la page : « j'ai deja essaye, ca n'a rien change ». Il arrive
   donc apres le chiffrage et avant la methode, pas ailleurs. Une objection
   qu'on laisse vivre jusqu'aux offres a deja fait son travail.

   Deux colonnes de valeur inegale, et c'est voulu : celle de gauche est en
   retrait, sans filet de couleur ni graisse, celle de droite porte l'encre
   et l'accent. La preference se lit avant qu'on ait lu un mot. */
.bascule { display: grid; gap: 18px; align-items: start; }
@media (min-width: 820px) { .bascule { grid-template-columns: 1fr 1fr; gap: 26px; } }
.bascule__col {
  border-radius: 20px; padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--filet); background: var(--blanc);
}
.bascule__col--essai { background: #f6f8fb; border-color: transparent; }
.bascule__col--integre { border-top: 3px solid var(--bleu); box-shadow: 0 18px 44px -24px rgba(16,20,24,.3); }
.bascule__etiq {
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--encre-doux); margin: 0 0 6px;
}
.bascule__col--integre .bascule__etiq { color: var(--bleu); }
.bascule h3 { font-size: clamp(1.24rem, 2vw, 1.5rem); margin-bottom: 18px; }
.bascule ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.bascule li {
  display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: baseline;
  font-size: 1rem; line-height: 1.45;
}
.bascule__col--essai li { color: var(--encre-doux); }
.bascule li::before { content: ''; width: 8px; height: 8px; border-radius: 3px; margin-top: .42em; background: currentColor; opacity: .34; }
.bascule__col--integre li::before { background: var(--bleu); opacity: 1; }
.bascule__chute {
  margin: clamp(34px, 4.4vw, 50px) auto 0; max-width: 46ch; text-align: center;
  font-size: clamp(1.14rem, 1.9vw, 1.36rem); line-height: 1.42; font-weight: 800; letter-spacing: -.02em;
}

/* -- La méthode ------------------------------------------------------------
   Cinq temps en colonne, chacun coiffé d'une pastille numérotée de couleur.
   L'ordre doit se lire d'un coup d'oeil, c'est tout l'intérêt du bloc. */
.etapes { display: grid; gap: 18px; }
.etape {
  display: grid; gap: 6px 22px; align-items: start;
  grid-template-columns: 52px 1fr;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: 16px;
  padding: 26px;
}
@media (min-width: 900px) { .etape { grid-template-columns: 52px 1fr 260px; } }
.etape__num {
  grid-row: 1 / 3; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 1.22rem;
  background: var(--c); color: #fff;
}
.etape:nth-child(1) .etape__num { --c: var(--bleu); }
.etape:nth-child(2) .etape__num { --c: var(--violet); }
.etape:nth-child(3) .etape__num { --c: var(--orange); color: var(--a2-texte); }
.etape:nth-child(4) .etape__num { --c: var(--vert); }
.etape:nth-child(5) .etape__num { --c: var(--bleu-nuit); }
.etape__duree { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-doux); }
.etape h3 { font-size: 1.18rem; margin: 2px 0 8px; }
.etape p { font-size: .95rem; color: var(--encre-doux); }
.etape__gain {
  grid-column: 2; font-size: .9rem; font-weight: 700; color: var(--bleu);
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--filet);
}
@media (min-width: 900px) { .etape__gain { grid-column: 3; grid-row: 1 / 3; margin: 0; padding: 0; border: 0; align-self: center; } }

/* -- Les agents ------------------------------------------------------------ */
.agent { text-align: left; }
.agent img { height: 116px; width: auto; display: block; margin-bottom: 16px; }
.agent__role { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--a); margin-bottom: 10px; }
.agent h3 { font-size: 1.3rem; margin-bottom: 8px; }
.agent__preuve { margin-top: auto; padding-top: 14px; font-size: .84rem; color: var(--encre-doux); }

/* La carte « Et le vôtre » garde le fond blanc et le trait plein des fiches
   d'agents. Ce qui la distingue, c'est son texte centré et l'absence de barre
   de couleur en tête : rien à cliquer, donc rien qui se soulève au survol. Le
   rembourrage est inversé, 24 px en haut contre 32 en bas, parce que sans
   figurine l'asymétrie d'origine poussait le texte vers le bas. */
.carte--surmesure {
  text-align: center; justify-content: center;
  padding: 24px 26px 32px;
}
.carte--surmesure::before { display: none; }
.carte--surmesure:hover { transform: none; box-shadow: none; }

/* -- Les cas ---------------------------------------------------------------- */
.cas { display: grid; gap: 22px; }
/* auto-fit plutot qu'un nombre fixe : a deux cas la rangee en met deux, a
   trois elle en met trois, et jamais de case vide a droite. Rien a modifier
   le jour ou le troisieme cas arrive. */
@media (min-width: 760px) { .cas { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
.cas__carte { background: var(--blanc); border: 1px solid var(--filet); border-radius: 18px; padding: clamp(24px, 3vw, 34px); }
.cas__etiquette { display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px; background: var(--v); color: var(--c); margin-bottom: 16px; }
.cas__carte:nth-child(1) .cas__etiquette { --v: var(--violet-voile); --c: var(--a1-fonce); }
.cas__carte:nth-child(2) .cas__etiquette { --v: var(--vert-voile); --c: var(--vert-fonce); }
.cas__carte:nth-child(3) .cas__etiquette { --v: var(--orange-voile); --c: var(--a2-fonce); }
.cas__carte h3 { font-size: 1.3rem; margin-bottom: 14px; }
.cas__carte p { font-size: .95rem; color: var(--encre-doux); margin-bottom: 12px; }
.cas__chiffre { margin-top: 18px; padding: 16px 20px; border-radius: 14px; background: var(--bleu-voile); font-weight: 700; color: var(--bleu-nuit); }
.cas__note { font-size: .84rem; color: var(--encre-doux); margin-top: 12px; }

/* -- L'équipe ---------------------------------------------------------------- */
.gens { display: grid; gap: 22px; }
@media (min-width: 760px) { .gens { grid-template-columns: repeat(2, 1fr); } }
.gens img { width: 116px; height: 116px; border-radius: 50%; object-fit: cover; margin-bottom: 18px; }
.gens h3 { font-size: 1.2rem; }
.gens .role { font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--bleu); margin: 4px 0 12px; }
.gens p { font-size: .95rem; color: var(--encre-doux); }
.parcours { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--filet); font-size: .9rem; }

/* -- La FAQ ------------------------------------------------------------------ */
.faq { max-width: 780px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--filet); }
.faq summary {
  cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative;
  font-weight: 700; font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--bleu); transition: transform var(--vite);
}
.faq details[open] summary::after { content: '\2212'; }
.faq summary:hover { color: var(--bleu); }
.faq p { padding: 0 0 24px; font-size: .97rem; color: var(--encre-doux); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Paragraphe d'ancrage vannetais sous les deux cofondateurs, 27/09/2026. */
.ancrage { max-width: 62ch; margin: clamp(36px, 5vw, 56px) auto 0; text-align: center; color: var(--encre-doux); }