/* ============================================================
   HABILLAGES  ·  les 6 chartes graphiques
   ------------------------------------------------------------
   Chargé APRÈS assets/site.css, par TOUTES les pages du site.

   Il ne contient aucune règle de mise en page : uniquement le
   sélecteur flottant et, pour chaque habillage, une redéfinition des
   variables de la charte. La mise en page, elle, vit dans site.css.

   Les composants n'ont rien à savoir de l'habillage : ils lisent déjà
   les variables. Ajouter un habillage revient donc à écrire un bloc de
   variables, sans toucher au HTML.

   Deux familles d'exceptions, parce que site.css les écrit en dur
   plutôt qu'en variables : les halos, et une poignée de pastilles
   colorées. Chaque habillage les réécrit explicitement.
   ============================================================ */


/* ============================================================
   SÉLECTEUR D'HABILLAGE
   Outil de comparaison, posé en bas à droite. Masqué tant que
   habillages.js ne l'a pas révélé.
   ============================================================ */
.ux-switch{
  position:fixed;right:18px;bottom:18px;z-index:70;
  display:flex;align-items:center;gap:6px;
  padding:7px 10px;
  background:var(--card);
  border:1px solid var(--ink-09);
  border-radius:999px;
  box-shadow:0 6px 24px rgba(29,29,31,.12);
}
.ux-switch-titre{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-42);padding:0 4px 0 2px;
}
.ux-btn{
  width:30px;height:30px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:13px;font-weight:700;
  color:var(--ink-64);
  background:none;border:1px solid transparent;border-radius:50%;
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.ux-btn[aria-pressed="true"]{
  background:var(--ink);color:#fff;border-color:var(--ink);
}
.ux-btn[disabled]{opacity:.32;cursor:not-allowed}
.ux-btn:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .ux-btn:not([disabled]):not([aria-pressed="true"]):hover{
    border-color:var(--ink-09);color:var(--ink);
  }
}
/* A huit habillages, la barre mesure 334 px : sous 400 px de large elle
   depassait par la gauche (mesure a 320 px : -32 px). On resserre et on retire
   le libelle « UX », que le lecteur d'ecran retrouve dans l'aria-label du
   groupe. Nouvelle largeur : 252 px. */
@media (max-width:399px){
  .ux-switch{right:10px;bottom:10px;gap:4px;padding:6px 8px}
  .ux-switch-titre{display:none}
  .ux-btn{width:26px;height:26px;font-size:12px}
}

/* ============================================================
   HABILLAGE 2 : terracotta
   Toute la bascule tient dans une redéfinition des variables de la
   charte. Les composants n'ont rien à savoir de l'habillage : ils
   lisent déjà ces variables, dans site.css comme ici.
   ============================================================ */
html[data-ux="2"]{
  --bg-light:#F4EDE6;
  --ink:#2C1B13;
  --bg-dark:#55271A;
  --off-white:#F8F2EC;
  --card:#FFFCF9;

  /* Les cinq accents deviennent une gamme chaude. On garde cinq teintes
     distinctes : elles codent les 6 offres et les briques des cas clients,
     un aplat unique les rendrait indistinguables. */
  --blue:#A4462B;
  --violet:#C0562E;
  --pink:#D2743C;
  --orange:#E0A055;
  --green:#7C8A5C;

  --grad: linear-gradient(90deg, #A4462B 0%, #C0562E 38%, #D2743C 70%, #E0A055 100%);

  --ink-64: rgba(44,27,19,.66);
  --ink-42: rgba(44,27,19,.46);
  --ink-09: rgba(44,27,19,.11);
  --light-64: rgba(248,242,236,.66);
  --light-42: rgba(248,242,236,.46);
  --light-09: rgba(248,242,236,.13);

  /* CTA : le terracotta porte le blanc a 4,55 et sa forme se lit a 3,93 sur le
     sable. Sur le brun fonce des sections sombres il tombe a 2,73 de forme,
     donc c'est l'ocre chaud de la charte qui prend, a 5,52. */
  --cta-fond:#C0562E;       --cta-texte:#fff;          --cta-bord:transparent;
  --cta-clair-fond:#E0A055; --cta-clair-texte:#2C1B13; --cta-clair-bord:transparent;
}
/* Les halos sont écrits en dur dans site.css, ils ne suivent pas les
   variables : on les réchauffe explicitement. */
html[data-ux="2"] body::before{
  background:
    radial-gradient(62% 46% at 100% 0%, rgba(210,116,60,.20) 0%, rgba(224,160,85,.12) 42%, rgba(224,160,85,0) 72%),
    radial-gradient(62% 50% at 0% 100%, rgba(164,70,43,.18) 0%, rgba(192,86,46,.12) 42%, rgba(192,86,46,0) 72%);
}
html[data-ux="2"] .section-dark::before{
  background:
    radial-gradient(58% 44% at 100% 0%, rgba(224,160,85,.22) 0%, rgba(210,116,60,.12) 42%, rgba(210,116,60,0) 72%),
    radial-gradient(58% 48% at 0% 100%, rgba(164,70,43,.28) 0%, rgba(192,86,46,.16) 42%, rgba(192,86,46,0) 72%);
}
/* La pilule de navigation est une surface blanche en dur : sur le sable, un
   blanc pur trancherait. */
html[data-ux="2"] .nav-inner{background:rgba(255,252,249,.88)}
html[data-ux="2"] .nav.is-scrolled .nav-inner{
  background:rgba(255,252,249,.96);
  box-shadow:0 6px 26px rgba(44,27,19,.10);
}
html[data-ux="2"] .ux-switch{box-shadow:0 6px 24px rgba(44,27,19,.14)}
/* Les médaillons des offres sont des photos : une teinte chaude les raccorde
   au reste de l'habillage. */
html[data-ux="2"] .offre-medaillon.acc-blue{--accent-doux:rgba(164,70,43,.16)}
html[data-ux="2"] .offre-medaillon.acc-violet{--accent-doux:rgba(192,86,46,.16)}
html[data-ux="2"] .offre-medaillon.acc-pink{--accent-doux:rgba(210,116,60,.16)}
html[data-ux="2"] .offre-medaillon.acc-orange{--accent-doux:rgba(224,160,85,.18)}
html[data-ux="2"] .offre-medaillon.acc-green{--accent-doux:rgba(124,138,92,.16)}

/* ------------------------------------------------------------
   Habillage 2 : les violets ecrits en dur
   site.css et les regles ci-dessus posent quelques violets en
   valeur litterale plutot qu'en variable. Ils ne suivent donc pas
   la bascule et ressortaient en violet sur le terracotta. On les
   reecrit un par un.
   ------------------------------------------------------------ */
/* Sur-titre des sections sombres : blanc, pour ressortir sans violet. */
html[data-ux="2"] .section-dark .tag{color:var(--off-white)}
/* Pastilles d'icone des services. */
html[data-ux="2"] .ico-blue{background:rgba(164,70,43,.12)}
html[data-ux="2"] .ico-violet{background:rgba(192,86,46,.12)}
html[data-ux="2"] .ico-pink{background:rgba(210,116,60,.12)}
html[data-ux="2"] .ico-orange{background:rgba(224,160,85,.16)}
html[data-ux="2"] .ico-green{background:rgba(124,138,92,.14)}
/* Badges de taille d'entreprise sur les cartes de cas. */
html[data-ux="2"] .cas-type-tpe{
  color:var(--blue);border-color:rgba(164,70,43,.30);background:rgba(164,70,43,.10);
}
html[data-ux="2"] .cas-type-pme{
  color:var(--violet);border-color:rgba(192,86,46,.30);background:rgba(192,86,46,.10);
}
html[data-ux="2"] .cas-type-startup{
  color:#B4652A;border-color:rgba(224,160,85,.38);background:rgba(224,160,85,.16);
}

/* ============================================================
   HABILLAGE 3 : charte fournie (Archivo, papier gris, rouge vif)
   Reprise fidele des jetons du document de charte :
     papier #F3F2F2, encre #201E1D, accent #EC3013, second #E15B47,
     Archivo en 800 pour les titres, et surtout des angles droits
     (radius-sm, md et lg sont tous a 0).
   Aucun bloc ajoute ni retire : uniquement de l'habillage.
   ============================================================ */
html[data-ux="3"]{
  --bg-light:#F3F2F2;   /* papier */
  --ink:#201E1D;        /* encre */
  --bg-dark:#201E1D;    /* sections sombres : l'encre elle-meme */
  --off-white:#F8F4F4;  /* neutral-100 */
  --card:#FFFFFF;

  /* La charte n'a qu'un rouge et une gamme de neutres. On etale les cinq
     accents sur sa rampe rouge, plus un neutre fonce : ils codent les 6
     offres et les briques, une teinte unique les rendrait indistinguables. */
  --blue:#7C1405;       /* accent-800 */
  --violet:#EC3013;     /* accent */
  --pink:#E15B47;       /* accent-2 */
  --orange:#FF9783;     /* accent-400 */
  --green:#444141;      /* neutral-800 */

  --grad: linear-gradient(90deg, #7C1405 0%, #EC3013 40%, #FF563C 75%, #FF9783 100%);

  --ink-64: rgba(32,30,29,.66);
  --ink-42: rgba(32,30,29,.46);
  --ink-09: rgba(32,30,29,.12);
  --light-64: rgba(248,244,244,.66);
  --light-42: rgba(248,244,244,.46);
  --light-09: rgba(248,244,244,.14);

  /* CTA : a #EC3013 le libelle blanc n'est qu'a 4,20, sous le 4,5 exige pour du
     17 px en graisse 700. Un cran plus fonce le met a 4,69. Sur les sections
     sombres c'est l'accent-400 de la charte qui prend, a 5,26. */
  --cta-fond:#DE2C11;       --cta-texte:#fff;          --cta-bord:transparent;
  --cta-clair-fond:#FF563C; --cta-clair-texte:#201E1D; --cta-clair-bord:transparent;

  --radius:0px;
}
/* Angles droits partout : la charte met radius-sm, md et lg a 0. Un seul
   selecteur plutot qu'une liste, sinon le moindre composant oublie garderait
   ses coins ronds et trahirait l'habillage. */
html[data-ux="3"] *{border-radius:0}
/* Deux exceptions : les visages et les photos des services restent ronds.
   Carres, ils lisaient comme des vignettes brutes plutot que comme des
   portraits. */
html[data-ux="3"] .avatar,
html[data-ux="3"] .avatar img,
/* La bulle est detouree par un clipPath, pas par un rayon : la mise a zero
   des rayons de cet habillage ne l'atteint pas, rien a rattraper ici. */
html[data-ux="3"] .offre-num,
html[data-ux="3"] .besoin-radio{border-radius:50%}

/* Archivo, injectee par habillages.js uniquement quand cet habillage est actif. */
html[data-ux="3"] body{font-family:"Archivo",system-ui,-apple-system,sans-serif}
html[data-ux="3"] h1,
html[data-ux="3"] h2,
html[data-ux="3"] h3{font-weight:800}
html[data-ux="3"] .btn{font-weight:700}

/* Les halos sont ecrits en dur dans site.css : on les repasse sur le rouge. */
html[data-ux="3"] body::before{
  background:
    radial-gradient(62% 46% at 100% 0%, rgba(236,48,19,.11) 0%, rgba(255,151,131,.07) 42%, rgba(255,151,131,0) 72%),
    radial-gradient(62% 50% at 0% 100%, rgba(124,20,5,.10) 0%, rgba(225,91,71,.07) 42%, rgba(225,91,71,0) 72%);
}
html[data-ux="3"] .section-dark::before{
  background:
    radial-gradient(58% 44% at 100% 0%, rgba(236,48,19,.26) 0%, rgba(255,86,60,.12) 42%, rgba(255,86,60,0) 72%),
    radial-gradient(58% 48% at 0% 100%, rgba(124,20,5,.30) 0%, rgba(225,91,71,.14) 42%, rgba(225,91,71,0) 72%);
}
html[data-ux="3"] .nav-inner{background:rgba(255,255,255,.90)}
html[data-ux="3"] .nav.is-scrolled .nav-inner{
  background:#fff;box-shadow:0 3px 10px rgba(45,43,43,.16);
}
/* Les memes violets en dur que pour l'habillage 2 (voir plus haut). */
html[data-ux="3"] .section-dark .tag{color:var(--off-white)}
html[data-ux="3"] .ico-blue{background:rgba(124,20,5,.10)}
html[data-ux="3"] .ico-violet{background:rgba(236,48,19,.10)}
html[data-ux="3"] .ico-pink{background:rgba(225,91,71,.12)}
html[data-ux="3"] .ico-orange{background:rgba(255,151,131,.20)}
html[data-ux="3"] .ico-green{background:rgba(68,65,65,.10)}
html[data-ux="3"] .cas-type-tpe{
  color:var(--blue);border-color:rgba(124,20,5,.32);background:rgba(124,20,5,.08);
}
html[data-ux="3"] .cas-type-pme{
  color:var(--violet);border-color:rgba(236,48,19,.32);background:rgba(236,48,19,.08);
}
html[data-ux="3"] .cas-type-startup{
  color:#B4401F;border-color:rgba(255,151,131,.45);background:rgba(255,151,131,.20);
}
html[data-ux="3"] .offre-medaillon.acc-blue{--accent-doux:rgba(124,20,5,.14)}
html[data-ux="3"] .offre-medaillon.acc-violet{--accent-doux:rgba(236,48,19,.13)}
html[data-ux="3"] .offre-medaillon.acc-pink{--accent-doux:rgba(225,91,71,.15)}
html[data-ux="3"] .offre-medaillon.acc-orange{--accent-doux:rgba(255,151,131,.24)}
html[data-ux="3"] .offre-medaillon.acc-green{--accent-doux:rgba(68,65,65,.12)}
/* Archivo est plus large qu'Inter : au corps de la charte de base, le titre
   du hero passait sur trois lignes. On descend d'un cran. */
html[data-ux="3"] .hero h1{font-size:clamp(34px,7.4vw,62px)}
/* La puce « oui » vaut --green, un neutre fonce dans cette charte : sur la
   section sombre elle tombait a 1,6 de contraste, donc invisible. On la passe
   sur l'accent, seule couleur vive de la charte. */
html[data-ux="3"] .section-dark .mark-yes{background:var(--violet)}

/* ============================================================
   HABILLAGE 4 : charte « pin, beurre, creme »
   Jetons repris du document :
     Pin    #1E3A2F  titres, sections sombres
     Beurre #F3D36B  action, surligneur
     Ocre   #6E5300  petit texte, liens
     Creme  #F8F5EC  fond de page
     Lichen #E6E9DF  champs, cartes
   Trois regles de la charte sont structurantes et appliquees ici :
     1. tout au fer a gauche, jamais de hero centre ;
     2. ni degrade ni ombre ;
     3. le beurre surligne, il ne s'ecrit jamais en texte sur fond clair.
   Aucun bloc ajoute ni retire : uniquement de l'habillage.
   ============================================================ */
html[data-ux="4"]{
  --bg-light:#F8F5EC;   /* creme */
  --ink:#1E3A2F;        /* pin */
  --bg-dark:#1E3A2F;    /* pin */
  --off-white:#F8F5EC;  /* le texte courant sur pin reste creme */
  --card:#E6E9DF;       /* lichen */

  /* Les cinq accents codent les 6 offres et les briques. La charte n'ayant
     que pin, beurre et ocre, on complete avec sa gamme pin pour garder cinq
     valeurs distinguables. */
  --blue:#1E3A2F;       /* pin */
  --violet:#6E5300;     /* ocre : petit texte et liens */
  --pink:#5B6659;       /* pin clair */
  --orange:#E5C24F;     /* beurre fonce */
  --green:#3E4A3F;

  /* Pas de degrade : la charte l'interdit. La variable sert de repli aux
     composants qui la lisent, .grad est traite en surligneur plus bas. */
  --grad: none;

  --ink-64: rgba(30,58,47,.78);
  /* Le texte discret du site vit a 42 % d'encre, ce qui le laisse sous le
     seuil AA sur tous les habillages. La charte demande au contraire que le
     petit texte reste lisible sur creme : on le remonte a 72 %, mesure a
     4,9 contre 2,9, sans le rendre aussi present que le texte courant. */
  --ink-42: rgba(30,58,47,.72);
  --ink-09: rgba(30,58,47,.14);
  --light-64: rgba(248,245,236,.78);
  --light-42: rgba(248,245,236,.62);
  --light-09: rgba(248,245,236,.16);

  /* CTA : le beurre porte le pin a 8,43, donc le libelle est parfaitement
     lisible. La SILHOUETTE du bouton, elle, ne vaut que 1,34 sur la creme :
     sans bordure, on ne voit pas ou il commence. Le filet ocre qui reglait ca
     a ete retire a la demande du client, qui le trouvait trop marque. */
  --cta-fond:#F3D36B;       --cta-texte:#1E3A2F;       --cta-bord:transparent;
  --cta-clair-fond:#F3D36B; --cta-clair-texte:#1E3A2F; --cta-clair-bord:transparent;

  --radius:6px;         /* « arrondis discrets : rayon 6 px » */
}
html[data-ux="4"] body{font-family:"Archivo",system-ui,-apple-system,sans-serif}

/* Rayon 6px partout, y compris la ou d'autres regles posent des pilules. */
html[data-ux="4"] .btn,
html[data-ux="4"] .nav-inner,
html[data-ux="4"] .nav-cta,
html[data-ux="4"] .cas-tag,
html[data-ux="4"] .ux-switch,
html[data-ux="4"] .app-tile span{border-radius:6px}
html[data-ux="4"] .ux-btn{border-radius:4px}

/* Ni degrade ni ombre. */
html[data-ux="4"] body::before,
html[data-ux="4"] .section-dark::before{background:none}
html[data-ux="4"] .nav.is-scrolled .nav-inner{box-shadow:none;background:#fff}
html[data-ux="4"] .nav-inner{background:rgba(255,255,255,.92)}
html[data-ux="4"] .ux-switch{box-shadow:none;border-color:var(--ink-09)}

/* Le beurre surligne : il passe derriere un mot du titre, jamais en texte
   sur fond clair. Le mot porte donc l'encre pin sur un aplat beurre. */
html[data-ux="4"] .grad{
  background:#F3D36B;
  -webkit-background-clip:initial;background-clip:initial;
  color:#1E3A2F;-webkit-text-fill-color:#1E3A2F;
  padding:0 .06em;border-radius:0;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
/* La charte fait deborder le titre de la moitie du padding du surlignage,
   pour que le bord de l'aplat s'aligne sur le texte des lignes suivantes. */
/* Bouton principal : rempli de beurre, libelle en pin. */
html[data-ux="4"] .btn-ghost{background:none;color:var(--ink);border-color:var(--ink-09)}

/* Tout au fer a gauche : la charte interdit le hero centre, et aligne aussi
   les libelles de boutons. */

/* Typographie de la charte : display 84, section 32, bloc 24, corps 17/28,
   kicker 13 en capitales espacees et graisse normale. */
/* La charte annonce 84px pour le display. Archivo 800 a cette taille renvoie
   « Sauf dans votre entreprise. » a la ligne : mesure, la bascule se fait a
   68px en large et a 62px vers 1024px. On cale le clamp juste en dessous. */
html[data-ux="4"] h1{font-size:clamp(36px,5.6vw,68px);line-height:1.06;letter-spacing:-.02em}
html[data-ux="4"] h2{font-size:clamp(25px,5vw,32px);line-height:1.15;letter-spacing:-.02em}
html[data-ux="4"] h3{font-size:clamp(19px,4.4vw,24px)}
html[data-ux="4"] h1,html[data-ux="4"] h2,html[data-ux="4"] h3{font-weight:800}
html[data-ux="4"] body{font-size:17px;line-height:1.65}
/* Les habillages 4 et 5 imposent leur echelle de h2, plus specifique que la
   classe du titre a tenir sur une ligne. On la reprend ici, calee un cran plus
   bas pour qu'Archivo en graisse 800 passe aussi sous 700px de large. */
html[data-ux="4"] .titre-une-ligne,
html[data-ux="5"] .titre-une-ligne,
html[data-ux="7"] .titre-une-ligne{font-size:clamp(25px,4vw,32px)}

html[data-ux="4"] .tag,
html[data-ux="4"] .eyebrow{
  font-size:13px;font-weight:400;letter-spacing:.12em;color:var(--violet);
}
/* Sur fond pin, le beurre peut porter un titre. */
html[data-ux="4"] .section-dark .tag{color:#F3D36B}

/* Pastilles et badges, dans la gamme de la charte. */
html[data-ux="4"] .ico-blue{background:rgba(30,58,47,.10)}
html[data-ux="4"] .ico-violet{background:rgba(110,83,0,.12)}
html[data-ux="4"] .ico-pink{background:rgba(91,102,89,.14)}
html[data-ux="4"] .ico-orange{background:rgba(229,194,79,.28)}
html[data-ux="4"] .ico-green{background:rgba(62,74,63,.12)}
html[data-ux="4"] .cas-type-tpe{
  color:var(--blue);border-color:rgba(30,58,47,.32);background:rgba(30,58,47,.08);
}
html[data-ux="4"] .cas-type-pme{
  color:var(--violet);border-color:rgba(110,83,0,.34);background:rgba(110,83,0,.09);
}
html[data-ux="4"] .cas-type-startup{
  color:#6E5300;border-color:rgba(229,194,79,.55);background:rgba(243,211,107,.35);
}
html[data-ux="4"] .offre-medaillon.acc-blue{--accent-doux:rgba(30,58,47,.12)}
html[data-ux="4"] .offre-medaillon.acc-violet{--accent-doux:rgba(110,83,0,.13)}
html[data-ux="4"] .offre-medaillon.acc-pink{--accent-doux:rgba(91,102,89,.16)}
html[data-ux="4"] .offre-medaillon.acc-orange{--accent-doux:rgba(243,211,107,.40)}
html[data-ux="4"] .offre-medaillon.acc-green{--accent-doux:rgba(62,74,63,.14)}
/* Le repere de la liste numerotee est beurre, sur pin. */
html[data-ux="4"] .offre-num{background:#F3D36B;color:#1E3A2F}
/* La charte donne 58ch au chapeau du hero. */
/* La puce « oui » vaut --green, un vert sombre dans cette charte : sur la
   section pin elle disparaissait. Beurre fonce et glyphe pin, conformement a
   « sur fond pin, le beurre peut porter un titre ». */
html[data-ux="4"] .section-dark .mark-yes{background:#E5C24F;color:#1E3A2F}
/* « oui » plein, « non » en contour : sur cette palette les deux pastilles
   pleines tombaient a 1,6 de contraste l'une contre l'autre, donc
   indistinguables d'un coup d'oeil. Le remplissage les separe mieux que la
   couleur. */
html[data-ux="4"] .section-dark .mark-no{
  background:transparent;color:var(--off-white);
  border:1.5px solid rgba(248,245,236,.55);
}

/* ============================================================
   HABILLAGE 5 : charte « graphite, lime, blanc casse »
     Graphite    #1C1D21  titres, sections sombres
     Lime        #D3E84A  action, surligneur
     Olive       #4F5D0A  petit texte, liens
     Blanc casse #F2F2EF  fond de page
     Beton       #E5E6E1  champs, cartes
   Memes regles que l'habillage 4, dont elle reprend la structure :
   fer a gauche, ni degrade ni ombre, le lime signale sans jamais s'ecrire
   en texte sur fond clair, rayon 6 px, Archivo.
   ============================================================ */
html[data-ux="5"]{
  --bg-light:#F2F2EF;
  --ink:#1C1D21;
  --bg-dark:#1C1D21;
  --off-white:#F2F2EF;
  --card:#E5E6E1;

  --blue:#1C1D21;
  --violet:#4F5D0A;     /* olive : petit texte et liens, 6,4 sur blanc casse */
  --pink:#5F6166;
  --orange:#C2D83A;     /* lime fonce */
  --green:#3B3D43;

  --grad: none;

  /* Le texte discret du site vit a 42 % d'encre, sous le seuil AA. Remonte a
     66 %, mesure a 5,2 contre 3,4, comme pour l'habillage 4. */
  --ink-64: rgba(28,29,33,.74);
  --ink-42: rgba(28,29,33,.66);
  --ink-09: rgba(28,29,33,.13);
  --light-64: rgba(242,242,239,.76);
  --light-42: rgba(242,242,239,.58);
  --light-09: rgba(242,242,239,.15);

  /* CTA : le lime porte le graphite a 12,36. Sa silhouette ne vaut que 1,21 sur
     le blanc casse ; le filet olive qui la dessinait a ete retire a la demande
     du client. Voir la note de l'habillage 4. */
  --cta-fond:#D3E84A;       --cta-texte:#1C1D21;       --cta-bord:transparent;
  --cta-clair-fond:#D3E84A; --cta-clair-texte:#1C1D21; --cta-clair-bord:transparent;

  --radius:6px;
}
html[data-ux="5"] body{font-family:"Archivo",system-ui,-apple-system,sans-serif}
html[data-ux="5"] .btn,
html[data-ux="5"] .nav-inner,
html[data-ux="5"] .nav-cta,
html[data-ux="5"] .cas-tag,
html[data-ux="5"] .ux-switch,
html[data-ux="5"] .app-tile span{border-radius:6px}
html[data-ux="5"] .ux-btn{border-radius:4px}

html[data-ux="5"] body::before,
html[data-ux="5"] .section-dark::before{background:none}
html[data-ux="5"] .nav.is-scrolled .nav-inner{box-shadow:none;background:#fff}
html[data-ux="5"] .nav-inner{background:rgba(255,255,255,.92)}
html[data-ux="5"] .ux-switch{box-shadow:none;border-color:var(--ink-09)}

/* Le lime signale : aplat derriere le mot, encre graphite par-dessus. */
html[data-ux="5"] .grad{
  background:#D3E84A;
  -webkit-background-clip:initial;background-clip:initial;
  color:#1C1D21;-webkit-text-fill-color:#1C1D21;
  padding:0 .06em;border-radius:0;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
html[data-ux="5"] .btn-ghost{background:none;color:var(--ink);border-color:var(--ink-09)}


html[data-ux="5"] h1{font-size:clamp(36px,5.6vw,68px);line-height:1.06;letter-spacing:-.02em}
html[data-ux="5"] h2{font-size:clamp(25px,5vw,32px);line-height:1.15;letter-spacing:-.02em}
html[data-ux="5"] h3{font-size:clamp(19px,4.4vw,24px)}
html[data-ux="5"] h1,html[data-ux="5"] h2,html[data-ux="5"] h3{font-weight:800}
html[data-ux="5"] body{font-size:17px;line-height:1.65}
html[data-ux="5"] .tag,
html[data-ux="5"] .eyebrow{
  font-size:13px;font-weight:400;letter-spacing:.12em;color:var(--violet);
}
html[data-ux="5"] .section-dark .tag{color:#D3E84A}

html[data-ux="5"] .ico-blue{background:rgba(28,29,33,.09)}
html[data-ux="5"] .ico-violet{background:rgba(79,93,10,.12)}
html[data-ux="5"] .ico-pink{background:rgba(95,97,102,.14)}
html[data-ux="5"] .ico-orange{background:rgba(211,232,74,.34)}
html[data-ux="5"] .ico-green{background:rgba(59,61,67,.12)}
html[data-ux="5"] .cas-type-tpe{
  color:var(--blue);border-color:rgba(28,29,33,.30);background:rgba(28,29,33,.07);
}
html[data-ux="5"] .cas-type-pme{
  color:var(--violet);border-color:rgba(79,93,10,.34);background:rgba(79,93,10,.09);
}
html[data-ux="5"] .cas-type-startup{
  color:#4F5D0A;border-color:rgba(194,216,58,.60);background:rgba(211,232,74,.34);
}
html[data-ux="5"] .offre-medaillon.acc-blue{--accent-doux:rgba(28,29,33,.11)}
html[data-ux="5"] .offre-medaillon.acc-violet{--accent-doux:rgba(79,93,10,.12)}
html[data-ux="5"] .offre-medaillon.acc-pink{--accent-doux:rgba(95,97,102,.15)}
html[data-ux="5"] .offre-medaillon.acc-orange{--accent-doux:rgba(211,232,74,.42)}
html[data-ux="5"] .offre-medaillon.acc-green{--accent-doux:rgba(59,61,67,.13)}
html[data-ux="5"] .offre-num{background:#D3E84A;color:#1C1D21}
/* Meme parti que l'habillage 4 : « oui » plein, « non » en contour, sinon les
   deux pastilles se confondent en clarte sur le graphite. */
html[data-ux="5"] .section-dark .mark-yes{background:#D3E84A;color:#1C1D21}
html[data-ux="5"] .section-dark .mark-no{
  background:transparent;color:var(--off-white);
  border:1.5px solid rgba(242,242,239,.55);
}

/* ============================================================
   HABILLAGE 6  ·  beige et lime fluo
   Beige clair  #F6F6F3  fond principal
   Encre        #242424  texte, sections sombres
   Lime fluo    #C3FA0A  accent
   Gris-brun    #45453F  texte secondaire
   Separateurs  rgba(36,36,36,.10) et rgba(36,36,36,.12)
   Inactifs     rgba(36,36,36,.18)

   La demande ne portait que sur les couleurs : la typographie, les rayons et
   la structure restent ceux de la charte d'origine. Seule la palette change.

   Une contrainte commande tout le reste : le lime est un fluo CLAIR, de
   luminance 0,80. Sur le beige il donne 1,14 de contraste, il ne peut donc
   jamais s'ecrire en texte sur fond clair. Il ne vit qu'en aplat, avec
   l'encre par-dessus (12,6), ou en texte sur les sections sombres (12,6).
   D'ou la bascule des boutons : encre sur fond clair, lime sur fond sombre.
   ============================================================ */
html[data-ux="6"]{
  --bg-light:#F6F6F3;
  --ink:#242424;
  --bg-dark:#242424;
  --off-white:#F6F6F3;
  /* Le beige est le fond ; les cartes prennent le blanc pour garder un relief,
     sans quoi elles disparaitraient dans la page. Ce sont les separateurs de
     la charte qui dessinent leur contour. */
  --card:#FFFFFF;

  /* Les cinq accents de la charte d'origine se replient sur les deux encres :
     dans cette palette, c'est l'aplat de lime qui differencie, pas la teinte. */
  --blue:#242424;
  --violet:#45453F;     /* sur-titres, liens, focus : 8,9 sur le beige */
  --pink:#45453F;
  --orange:#242424;
  --green:#242424;

  --grad: none;

  /* Le texte discret du site vit a 42 % d'encre, sous le seuil AA. La charte
     donne ici une vraie couleur de texte secondaire : 8,9 pour #45453F, et
     5,9 pour le cran en dessous. */
  --ink-64: #45453F;
  --ink-42: rgba(36,36,36,.72);
  --ink-09: rgba(36,36,36,.12);
  --light-64: rgba(246,246,243,.76);
  --light-42: rgba(246,246,243,.58);
  --light-09: rgba(246,246,243,.15);

  /* CTA : le fluo porte l'encre a 12,57. Sa silhouette ne vaut que 1,14 sur le
     beige, le pire des huit habillages ; le filet encre qui la dessinait a ete
     retire a la demande du client. Voir la note de l'habillage 4. */
  --cta-fond:#C3FA0A;       --cta-texte:#242424;       --cta-bord:transparent;
  --cta-clair-fond:#C3FA0A; --cta-clair-texte:#242424; --cta-clair-bord:transparent;
}

/* Les halos de la charte d'origine melangent rose, orange, bleu et violet :
   aucune de ces teintes n'existe ici. Ils passent au lime, tres dilue, et a
   l'encre. Mesure sur la section sombre halo compris : 9,2 pour le titre,
   4,3 pour le texte discret. */
html[data-ux="6"] body::before{
  background:
    radial-gradient(62% 46% at 100% 0%, rgba(195,250,10,.22) 0%, rgba(195,250,10,0) 66%),
    radial-gradient(62% 50% at 0% 100%, rgba(36,36,36,.07) 0%, rgba(36,36,36,0) 66%);
}
html[data-ux="6"] .section-dark::before{
  background:
    radial-gradient(58% 44% at 100% 0%, rgba(195,250,10,.16) 0%, rgba(195,250,10,0) 66%),
    radial-gradient(58% 48% at 0% 100%, rgba(195,250,10,.07) 0%, rgba(195,250,10,0) 66%);
}

/* Le degrade signature devient un aplat de lime, encre par-dessus. */
html[data-ux="6"] .grad{
  background:#C3FA0A;
  -webkit-background-clip:initial;background-clip:initial;
  color:#242424;-webkit-text-fill-color:#242424;
  padding:0 .06em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

/* Bouton encre a texte lime sur fond clair, bouton lime a texte encre sur
   fond sombre. Un bouton lime sur le beige n'aurait aucune arete lisible,
   1,14 de contraste : c'est sa forme qui disparaitrait, pas son texte. */
html[data-ux="6"] .btn-ghost{background:none;color:var(--ink);border-color:var(--ink-09)}

/* Le lime prend enfin la parole en texte, la ou il contraste : 12,6. */
html[data-ux="6"] .section-dark .tag{color:#C3FA0A}

html[data-ux="6"] .ico-blue{background:rgba(36,36,36,.08)}
html[data-ux="6"] .ico-violet{background:rgba(36,36,36,.13)}
html[data-ux="6"] .ico-pink{background:rgba(195,250,10,.30)}
html[data-ux="6"] .ico-orange{background:rgba(195,250,10,.52)}
html[data-ux="6"] .ico-green{background:rgba(36,36,36,.18)}
/* Trois badges de taille d'entreprise pour deux encres seulement : ils se
   distinguent par la forme, pas par la teinte. Colores comme dans la charte
   d'origine, « TPE » et « PME » sortaient deux gris identiques.
   Contour, aplat d'encre, aplat de lime. */
html[data-ux="6"] .cas-type-tpe{
  color:var(--ink);border-color:rgba(36,36,36,.32);background:transparent;
}
html[data-ux="6"] .cas-type-pme{
  color:#242424;border-color:transparent;background:rgba(36,36,36,.13);
}
html[data-ux="6"] .cas-type-startup{
  color:#242424;border-color:transparent;background:rgba(195,250,10,.60);
}
html[data-ux="6"] .offre-medaillon.acc-blue{--accent:#242424;--accent-doux:rgba(36,36,36,.10)}
html[data-ux="6"] .offre-medaillon.acc-violet{--accent:#45453F;--accent-doux:rgba(69,69,63,.13)}
html[data-ux="6"] .offre-medaillon.acc-pink{--accent:#242424;--accent-doux:rgba(195,250,10,.34)}
html[data-ux="6"] .offre-medaillon.acc-orange{--accent:#242424;--accent-doux:rgba(195,250,10,.58)}
html[data-ux="6"] .offre-medaillon.acc-green{--accent:#45453F;--accent-doux:rgba(36,36,36,.15)}
html[data-ux="6"] .offre-num{background:#242424;color:#C3FA0A}

/* Meme parti que les habillages 4 et 5 : « oui » plein, « non » en contour.
   Deux pastilles pleines se confondraient en clarte sur l'encre. */
html[data-ux="6"] .section-dark .mark-yes{background:#C3FA0A;color:#242424}
html[data-ux="6"] .section-dark .mark-no{
  background:transparent;color:var(--off-white);
  border:1.5px solid rgba(246,246,243,.55);
}

/* L'etat inactif de la charte, rgba(36,36,36,.18) : barre de progression de
   lecture et onglets de besoin au repos. L'etat actif passe au lime. */
html[data-ux="6"] .nav-progress{background:#242424;opacity:.18}
html[data-ux="6"] .besoin{border-color:rgba(36,36,36,.18)}
html[data-ux="6"] .besoin.is-active{
  border-color:rgba(36,36,36,.34);background:rgba(195,250,10,.20);color:var(--ink);
}
/* Pastille verte codee en dur dans site.css, seul reste de la charte
   d'origine que les jetons ne peuvent pas atteindre. */
html[data-ux="6"] .agence-badge-check{background:rgba(195,250,10,.44);color:#242424}

html[data-ux="6"] .ux-btn[aria-pressed="true"]{
  background:#242424;color:#C3FA0A;border-color:#242424;
}

/* ============================================================
   HABILLAGE 7 : charte « graphite, bleu, blanc casse »
     Graphite    #1C1D21  titres, sections sombres
     Bleu clair  #8E9BFF  sur les sections graphite
     Bleu        #5B6CFF  surligneur, aplats, bordures
     Bleu fonce  #4C5BE8  boutons
     Bleu profond#3B49C4  petit texte, liens
     Blanc casse #F2F2EF  fond de page
     Beton       #E5E6E1  champs, cartes

   C'est l'habillage 5 dont le lime devient bleu. Meme structure, meme
   typographie (Archivo), meme rayon de 6 px, ni degrade ni ombre.

   ⚠️ Une difference de fond avec l'habillage 5, et elle explique les trois
   bleus. Le lime #D3E84A est tres clair : il ne peut jamais s'ecrire en texte
   sur fond clair, mais il porte du graphite partout (12,4 de contraste). Le
   bleu #5B6CFF est a mi-hauteur : il ne porte ni le blanc (4,17) ni le
   graphite (4,04) pour du petit texte, et ne passe pas non plus en texte sur
   le blanc casse (3,72). Il tient donc le role d'aplat, jamais celui de
   support de petit texte :

     #8E9BFF  petit texte bleu sur le graphite (6,64) et pastilles pleines a
              chiffres graphite (6,64) : c'est lui le vrai equivalent du lime
     #5B6CFF  plate du surligneur (les titres font 36 a 68 px, donc « grand
              texte » : le seuil est 3 et le blanc y est a 4,17), aplats
              d'icones, bordures, surfaces sans texte
     #4C5BE8  boutons et pastilles a libelle blanc (5,29)
     #3B49C4  petit texte, liens, tags. Il faut aller jusque-la parce que la
              surface la plus foncee du fond clair est le beton #E5E6E1 des
              cartes : #4C5BE8 n'y vaut que 4,22, alors que #3B49C4 y est a
              5,70, soit le poids exact de l'olive de l'habillage 5 (5,77)

   Quatre crans d'un seul bleu, comme une echelle 300 / 500 / 600 / 700 :
   a l'oeil, c'est une seule couleur.
   ============================================================ */
html[data-ux="7"]{
  --bg-light:#F2F2EF;
  --ink:#1C1D21;
  --bg-dark:#1C1D21;
  --off-white:#F2F2EF;
  --card:#E5E6E1;

  --blue:#1C1D21;
  --violet:#3B49C4;     /* bleu profond : petit texte et liens, 6,4 sur blanc casse */
  --pink:#5F6166;
  --orange:#5B6CFF;     /* le bleu demande */
  --green:#3B3D43;

  --grad: none;

  /* Meme remontee que les habillages 4 et 5 : le texte discret du site vit a
     42 % d'encre, sous le seuil AA. */
  --ink-64: rgba(28,29,33,.74);
  --ink-42: rgba(28,29,33,.66);
  --ink-09: rgba(28,29,33,.13);
  --light-64: rgba(242,242,239,.76);
  --light-42: rgba(242,242,239,.58);
  --light-09: rgba(242,242,239,.15);

  /* CTA : un libelle de 17 px en graisse 600 n'est pas du « grand texte », il
     lui faut 4,5. Sur #5B6CFF le blanc plafonne a 4,17, d'ou le cran plus
     fonce, a 5,29 ; la forme se lit a 4,72 sur le blanc casse. */
  --cta-fond:#4C5BE8;       --cta-texte:#fff;          --cta-bord:transparent;
  --cta-clair-fond:#4C5BE8; --cta-clair-texte:#fff;    --cta-clair-bord:transparent;

  --radius:6px;
}
html[data-ux="7"] body{font-family:"Archivo",system-ui,-apple-system,sans-serif}
html[data-ux="7"] .btn,
html[data-ux="7"] .nav-inner,
html[data-ux="7"] .nav-cta,
html[data-ux="7"] .cas-tag,
html[data-ux="7"] .ux-switch,
html[data-ux="7"] .app-tile span{border-radius:6px}
html[data-ux="7"] .ux-btn{border-radius:4px}

html[data-ux="7"] body::before,
html[data-ux="7"] .section-dark::before{background:none}
html[data-ux="7"] .nav.is-scrolled .nav-inner{box-shadow:none;background:#fff}
html[data-ux="7"] .nav-inner{background:rgba(255,255,255,.92)}
html[data-ux="7"] .ux-switch{box-shadow:none;border-color:var(--ink-09)}

/* Le bleu signale : aplat derriere le mot, blanc par-dessus. Polarite inverse
   de l'habillage 5, ou le lime clair portait du graphite. */
html[data-ux="7"] .grad{
  background:#5B6CFF;
  -webkit-background-clip:initial;background-clip:initial;
  color:#FFFFFF;-webkit-text-fill-color:#FFFFFF;
  padding:0 .06em;border-radius:0;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
html[data-ux="7"] .btn-ghost{background:none;color:var(--ink);border-color:var(--ink-09)}

html[data-ux="7"] h1{font-size:clamp(36px,5.6vw,68px);line-height:1.06;letter-spacing:-.02em}
html[data-ux="7"] h2{font-size:clamp(25px,5vw,32px);line-height:1.15;letter-spacing:-.02em}
html[data-ux="7"] h3{font-size:clamp(19px,4.4vw,24px)}
html[data-ux="7"] h1,html[data-ux="7"] h2,html[data-ux="7"] h3{font-weight:800}
html[data-ux="7"] body{font-size:17px;line-height:1.65}
html[data-ux="7"] .tag,
html[data-ux="7"] .eyebrow{
  font-size:13px;font-weight:400;letter-spacing:.12em;color:var(--violet);
}
/* Sur le graphite, c'est le bleu clair qui prend : #5B6CFF n'y est qu'a 4,04
   et #3B49C4 a 2,35, tous deux sous le seuil pour 13 px. */
html[data-ux="7"] .section-dark .tag{color:#8E9BFF}

html[data-ux="7"] .ico-blue{background:rgba(28,29,33,.09)}
html[data-ux="7"] .ico-violet{background:rgba(91,108,255,.13)}
html[data-ux="7"] .ico-pink{background:rgba(95,97,102,.14)}
html[data-ux="7"] .ico-orange{background:rgba(91,108,255,.20)}
html[data-ux="7"] .ico-green{background:rgba(59,61,67,.12)}
html[data-ux="7"] .cas-type-tpe{
  color:var(--blue);border-color:rgba(28,29,33,.30);background:rgba(28,29,33,.07);
}
html[data-ux="7"] .cas-type-pme{
  color:var(--violet);border-color:rgba(91,108,255,.38);background:rgba(91,108,255,.07);
}
html[data-ux="7"] .cas-type-startup{
  color:var(--violet);border-color:rgba(91,108,255,.55);background:rgba(91,108,255,.16);
}
html[data-ux="7"] .offre-medaillon.acc-blue{--accent-doux:rgba(28,29,33,.11)}
html[data-ux="7"] .offre-medaillon.acc-violet{--accent-doux:rgba(91,108,255,.13)}
html[data-ux="7"] .offre-medaillon.acc-pink{--accent-doux:rgba(95,97,102,.15)}
html[data-ux="7"] .offre-medaillon.acc-orange{--accent-doux:rgba(91,108,255,.22)}
html[data-ux="7"] .offre-medaillon.acc-green{--accent-doux:rgba(59,61,67,.13)}
html[data-ux="7"] .offre-num{background:#4C5BE8;color:#fff}
/* Meme parti que les habillages 4 et 5 : « oui » plein, « non » en contour.
   Le plein prend le bleu clair, seul a porter du graphite sur fond sombre. */
html[data-ux="7"] .section-dark .mark-yes{background:#8E9BFF;color:#1C1D21}
html[data-ux="7"] .section-dark .mark-no{
  background:transparent;color:var(--off-white);
  border:1.5px solid rgba(242,242,239,.55);
}
/* Pastille verte codee en dur dans site.css, hors d'atteinte des jetons. */
html[data-ux="7"] .agence-badge-check{background:rgba(91,108,255,.16);color:var(--violet)}

html[data-ux="7"] .ux-btn[aria-pressed="true"]{
  background:#1C1D21;color:#8E9BFF;border-color:#1C1D21;
}

/* ============================================================
   HABILLAGE 8 (et 9) : l'habillage 3 en bleu
   ⚠️ Chaque selecteur de ce bloc vise AUSSI l'habillage 9, qui n'est que
   l'habillage 8 a deux regles pres, ecrites juste apres. Ne pas defaire ce
   jumelage : une couleur ajoutee ici doit valoir pour les deux.
   Papier   #F3F2F2  fond de page
   Encre    #201E1D  titres, sections sombres
   Bleu     #76A7FF  le bleu demande : aplats, surlignage, pastilles
   Archivo en 800, angles droits partout, comme l'habillage 3.

   La rampe de bleus est calculee sur la teinte exacte du #76A7FF
   (218,5° de teinte, saturation 100 %), en descendant la clarte. Elle
   occupe les memes positions que la rampe rouge de l'habillage 3 :

     #003085  L26, 11,9 sur carte   equivalent de l'accent-800 #7C1405
     #005BFF  L50,  5,3 sur carte   l'accent, equivalent du #EC3013
     #0045C2  L38,  8,0 sur carte   equivalent de l'accent-2 #E15B47
     #76A7FF  L73,  2,4 sur carte   le bleu demande, equivalent du #FF9783
     #444141  le neutre fonce de la charte, inchange

   ⚠️ Deux ecarts assumes avec l'habillage 3, tous deux sur la lisibilite.

   1. Le #76A7FF est clair : a 2,15 sur le papier il ne peut pas s'ecrire en
      texte, mais il porte l'encre a 6,90. Il tient donc les aplats, le
      surlignage, les pastilles et la fin du degrade, jamais le petit texte.
      C'est l'accent #005BFF qui porte les tags et les liens, a 4,77 sur le
      papier, la ou le rouge de l'habillage 3 plafonnait a 3,76.

   2. Le texte discret est remonte a 66 et 74 % d'encre, comme dans les
      habillages 4, 5 et 7. L'habillage 3 le laisse a 46 %, soit 2,84, ce qui
      explique a lui seul la plupart de ses echecs AA. Rien n'oblige un
      habillage derive a reprendre le point faible de son modele.
   ============================================================ */
html[data-ux="8"],html[data-ux="9"]{
  --bg-light:#F3F2F2;   /* papier */
  --ink:#201E1D;        /* encre */
  --bg-dark:#201E1D;    /* sections sombres : l'encre elle-meme */
  --off-white:#F8F4F4;
  --card:#FFFFFF;

  /* Les cinq accents codent les 6 offres et les briques : une teinte unique
     les rendrait indistinguables, d'ou la rampe. */
  --blue:#003085;
  --violet:#005BFF;     /* l'accent : vif et lisible, 4,8 sur le papier */
  --pink:#0045C2;
  --orange:#76A7FF;     /* le bleu demande */
  --green:#444141;

  --grad: linear-gradient(90deg, #003085 0%, #005BFF 40%, #2976FF 75%, #76A7FF 100%);

  /* Remontes par rapport a l'habillage 3 : voir l'ecart 2 ci-dessus. */
  --ink-64: rgba(32,30,29,.74);
  --ink-42: rgba(32,30,29,.66);
  --ink-09: rgba(32,30,29,.12);
  --light-64: rgba(248,244,244,.76);
  --light-42: rgba(248,244,244,.58);
  --light-09: rgba(248,244,244,.14);

  /* CTA : libelle blanc, demande par le client. Sur le #76A7FF le blanc ne
     vaut que 2,40, illisible ; le fond descend donc sur l'accent #005BFF de la
     meme rampe, ou le blanc remonte a 5,33. Bonus : la silhouette passe de
     2,15 a 4,77 sur le papier, donc la bordure n'a plus lieu d'etre. Sur les
     sections sombres, la silhouette vaut 3,12, juste au-dessus du seuil. */
  --cta-fond:#005BFF;       --cta-texte:#fff;          --cta-bord:transparent;
  --cta-clair-fond:#005BFF; --cta-clair-texte:#fff;    --cta-clair-bord:transparent;

  --radius:0px;
}
/* Angles droits partout, comme l'habillage 3 : un seul selecteur, sinon le
   moindre composant oublie garderait ses coins ronds. */
html[data-ux="8"] *,html[data-ux="9"] *{border-radius:0}
/* Memes deux exceptions : les visages et les pastilles numerotees restent
   ronds. La bulle des photos d'offres est detouree par un clipPath, que la
   mise a zero des rayons n'atteint pas. */
html[data-ux="8"] .avatar,html[data-ux="9"] .avatar,
html[data-ux="8"] .avatar img,html[data-ux="9"] .avatar img,
html[data-ux="8"] .offre-num,html[data-ux="9"] .offre-num,
html[data-ux="8"] .besoin-radio,html[data-ux="9"] .besoin-radio{border-radius:50%}

html[data-ux="8"] body,html[data-ux="9"] body{font-family:"Archivo",system-ui,-apple-system,sans-serif}
html[data-ux="8"] h1,html[data-ux="9"] h1,
html[data-ux="8"] h2,html[data-ux="9"] h2,
html[data-ux="8"] h3,html[data-ux="9"] h3{font-weight:800}
html[data-ux="8"] .btn,html[data-ux="9"] .btn{font-weight:700}

/* Les halos sont ecrits en dur dans site.css : on les repasse sur le bleu. */
html[data-ux="8"] body::before,html[data-ux="9"] body::before{
  background:
    radial-gradient(62% 46% at 100% 0%, rgba(0,91,255,.10) 0%, rgba(118,167,255,.09) 42%, rgba(118,167,255,0) 72%),
    radial-gradient(62% 50% at 0% 100%, rgba(0,48,133,.09) 0%, rgba(71,137,255,.08) 42%, rgba(71,137,255,0) 72%);
}
html[data-ux="8"] .section-dark::before,html[data-ux="9"] .section-dark::before{
  background:
    radial-gradient(58% 44% at 100% 0%, rgba(0,91,255,.30) 0%, rgba(118,167,255,.14) 42%, rgba(118,167,255,0) 72%),
    radial-gradient(58% 48% at 0% 100%, rgba(0,48,133,.32) 0%, rgba(71,137,255,.16) 42%, rgba(71,137,255,0) 72%);
}
html[data-ux="8"] .nav-inner,html[data-ux="9"] .nav-inner{background:rgba(255,255,255,.90)}
html[data-ux="8"] .nav.is-scrolled .nav-inner,html[data-ux="9"] .nav.is-scrolled .nav-inner{
  background:#fff;box-shadow:0 3px 10px rgba(45,43,43,.16);
}
/* Sur le graphite, le bleu demande passe a 6,90 : c'est la qu'il peut enfin
   s'ecrire en texte, contrairement au fond clair. */
html[data-ux="8"] .section-dark .tag,html[data-ux="9"] .section-dark .tag{color:#76A7FF}
/* Le degrade part du bleu le plus fonce : sur le papier c'est ce qui lui donne
   son elan, mais sur la section sombre ce debut tombe a 1,39, donc invisible.
   On redefinit le jeton sur les trois crans clairs, tous au-dessus du seuil de
   3 exige par un titre de 32 a 52 px : 3,12 puis 4,06 puis 6,91. L'habillage 3
   ne le fait pas et son degrade y demarre a 1,55, aussi illisible. */
html[data-ux="8"] .section-dark,html[data-ux="9"] .section-dark{
  --grad: linear-gradient(90deg, #005BFF 0%, #2976FF 45%, #76A7FF 100%);
}
html[data-ux="8"] .ico-blue,html[data-ux="9"] .ico-blue{background:rgba(0,48,133,.10)}
html[data-ux="8"] .ico-violet,html[data-ux="9"] .ico-violet{background:rgba(0,91,255,.10)}
html[data-ux="8"] .ico-pink,html[data-ux="9"] .ico-pink{background:rgba(0,69,194,.11)}
html[data-ux="8"] .ico-orange,html[data-ux="9"] .ico-orange{background:rgba(118,167,255,.26)}
html[data-ux="8"] .ico-green,html[data-ux="9"] .ico-green{background:rgba(68,65,65,.10)}
html[data-ux="8"] .cas-type-tpe,html[data-ux="9"] .cas-type-tpe{
  color:var(--blue);border-color:rgba(0,48,133,.32);background:rgba(0,48,133,.08);
}
html[data-ux="8"] .cas-type-pme,html[data-ux="9"] .cas-type-pme{
  color:var(--violet);border-color:rgba(0,91,255,.32);background:rgba(0,91,255,.08);
}
html[data-ux="8"] .cas-type-startup,html[data-ux="9"] .cas-type-startup{
  color:#0045C2;border-color:rgba(118,167,255,.55);background:rgba(118,167,255,.26);
}
html[data-ux="8"] .offre-medaillon.acc-blue,html[data-ux="9"] .offre-medaillon.acc-blue{--accent-doux:rgba(0,48,133,.12)}
html[data-ux="8"] .offre-medaillon.acc-violet,html[data-ux="9"] .offre-medaillon.acc-violet{--accent-doux:rgba(0,91,255,.12)}
html[data-ux="8"] .offre-medaillon.acc-pink,html[data-ux="9"] .offre-medaillon.acc-pink{--accent-doux:rgba(0,69,194,.13)}
html[data-ux="8"] .offre-medaillon.acc-orange,html[data-ux="9"] .offre-medaillon.acc-orange{--accent-doux:rgba(118,167,255,.30)}
html[data-ux="8"] .offre-medaillon.acc-green,html[data-ux="9"] .offre-medaillon.acc-green{--accent-doux:rgba(68,65,65,.12)}
/* Archivo est plus large qu'Inter : meme descente d'un cran que l'habillage 3,
   sinon le titre du hero passe sur trois lignes. */
html[data-ux="8"] .hero h1,html[data-ux="9"] .hero h1{font-size:clamp(34px,7.4vw,62px)}
/* La puce « oui » vaut --green, un neutre fonce : sur la section sombre elle
   tombait a 1,6. On la passe sur le bleu demande, qui y porte l'encre a 6,90. */
html[data-ux="8"] .section-dark .mark-yes,html[data-ux="9"] .section-dark .mark-yes{background:#76A7FF;color:#201E1D}
/* Pastille verte codee en dur dans site.css, hors d'atteinte des jetons. */
html[data-ux="8"] .agence-badge-check,html[data-ux="9"] .agence-badge-check{background:rgba(118,167,255,.26);color:#003085}

html[data-ux="8"] .ux-btn[aria-pressed="true"],html[data-ux="9"] .ux-btn[aria-pressed="true"]{
  background:#201E1D;color:#76A7FF;border-color:#201E1D;
}


/* ============================================================
   HABILLAGE 9 : l'habillage 8, en surligne et a bords arrondis
   Il ne porte AUCUNE couleur propre : chaque selecteur de l'habillage 8
   ci-dessus l'inclut, et c'est voulu. Toute couleur ecrite ici serait une
   occasion de divergence silencieuse le jour ou l'habillage 8 bouge.

   Deux differences, et deux seulement :
     1. les boutons ont des coins arrondis de 6 px, comme l'habillage 5,
        alors que l'habillage 8 met tous les rayons a zero ;
     2. les mots mis en avant sont SURLIGNES et non en degrade, toujours
        comme l'habillage 5 : aplat de #005BFF, blanc par-dessus a 5,33.
        L'aplat reprend volontairement le bleu des boutons, pour que la
        charte n'affiche qu'un seul bleu vif.

   Le jeton --grad n'est pas touche : il reste le degrade de l'habillage 8.
   Seule la regle .grad, celle du texte, est reecrite. Le jeton sert encore
   ailleurs, et le mettre a none ferait disparaitre ces aplats-la.
   ============================================================ */
/* Les rayons sont a zero partout (regle heritee de l'habillage 8) : on ne les
   rend qu'aux boutons. Le selecteur porte une classe, donc il l'emporte sur le
   html[data-ux="9"] * qui met tout a plat. */
html[data-ux="9"] .btn{border-radius:6px}
/* Le bleu signale : aplat derriere le mot, blanc par-dessus. L'aplat prend le
   #005BFF des boutons et non le #76A7FF, pour que la charte n'affiche qu'un
   seul bleu vif : deux bleus a l'ecran se lisaient comme une erreur. Le blanc
   y vaut 5,33, et les mots surlignes font 44 a 76 px, donc bien au-dela du
   seuil. */
html[data-ux="9"] .grad{
  background:#005BFF;
  -webkit-background-clip:initial;background-clip:initial;
  color:#fff;-webkit-text-fill-color:#fff;
  padding:0 .06em;border-radius:0;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
/* Le degrade redefini par l'habillage 8 sur les sections sombres n'a plus
   d'objet ici, le surlignage ne l'utilise pas. Il reste inoffensif. */

/* ------------------------------------------------------------
   Correctif : « Ils nous font confiance » et les titres de colonne
   du pied de page sont des <h2> porteurs de leur propre taille, 12px.
   La regle de taille des titres de section des habillages 4 et 5 est
   plus specifique qu'elles et les faisait passer a 32px en graisse 800.
   On les reaffirme.
   ------------------------------------------------------------ */
html[data-ux="3"] .logos-title,
html[data-ux="3"] .footer-titre,
html[data-ux="4"] .logos-title,
html[data-ux="4"] .footer-titre,
html[data-ux="5"] .logos-title,
html[data-ux="5"] .footer-titre,
html[data-ux="7"] .logos-title,
html[data-ux="7"] .footer-titre,
html[data-ux="8"] .logos-title,
html[data-ux="8"] .footer-titre,
html[data-ux="9"] .logos-title,
html[data-ux="9"] .footer-titre{
  font-size:12px;font-weight:700;letter-spacing:.14em;
}

/* ------------------------------------------------------------
   Cartouche des logos clients
   site.css pose un fond blanc derriere le logo des cartes de cas. Sur le
   #FBFBFD de la charte d'origine il est invisible ; sur les fonds chauds des
   habillages 2, 4 et 5 il dessinait un rectangle blanc franc. Le logo se pose
   donc directement sur la carte, quel que soit l'habillage.
   ------------------------------------------------------------ */
.cas-visuel{background:transparent}