/* robinet.app — feuille unique, servie en statique.
   Les polices sont auto-hébergées : aucune requête vers un tiers, donc aucun
   consentement à demander pour une fonte.
   🪤 Source Sans 3 est une fonte variable : Google ne sert QU'UN fichier par
      sous-ensemble, quel que soit le nombre de graisses demandées. On déclare
      donc une PLAGE (300 700), pas six @font-face — sinon le navigateur
      télécharge six fois le même fichier. */

@font-face { font-family:'Clash Grotesk'; font-weight:400; font-style:normal;
  font-display:swap; src:url(/polices/clash-grotesk-400.woff2) format('woff2'); }
@font-face { font-family:'Clash Grotesk'; font-weight:500; font-style:normal;
  font-display:swap; src:url(/polices/clash-grotesk-500.woff2) format('woff2'); }
@font-face { font-family:'Clash Grotesk'; font-weight:600; font-style:normal;
  font-display:swap; src:url(/polices/clash-grotesk-600.woff2) format('woff2'); }
@font-face { font-family:'Clash Grotesk'; font-weight:700; font-style:normal;
  font-display:swap; src:url(/polices/clash-grotesk-700.woff2) format('woff2'); }
@font-face { font-family:'Source Sans 3'; font-weight:300 700; font-style:normal;
  font-display:swap; src:url(/polices/source-sans-3-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
  U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
  U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Source Sans 3'; font-weight:300 700; font-style:normal;
  font-display:swap; src:url(/polices/source-sans-3-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
  U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Source Sans 3'; font-weight:300 700; font-style:italic;
  font-display:swap; src:url(/polices/source-sans-3-italique-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
  U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
  U+2215,U+FEFF,U+FFFD; }

:root {
  color-scheme: light;
  --bleu:#244FF0;    --bleu-voile:#D0D9FB;   --bleu-fonce:#1A3BB8;
  --ambre:#F0A223;   --ambre-texte:#9B640A;  --ambre-voile:#FBEBD0;
  --cyan:#24D0F0;    --cyan-texte:#097487;   --cyan-voile:#D0F4FB;
  --vert:#24F0A2;    --vert-texte:#087D50;   --vert-voile:#D5FCED;
  --rouge:#F02423;   --rouge-texte:#C11615;  --rouge-voile:#FCD5D5;
  --taupe:#706149;   --taupe-voile:#EBE7E0;
  --ardoise:#495170; --ardoise-voile:#E0E2EB;
  --papier:#FFFFFF;  --creux:#F5F6F9;        --encre:#131A2B;
  --trait:#E3E6EE;   --trait-fort:#C4CAD8;
  --titre:'Clash Grotesk',system-ui,sans-serif;
  --texte:'Source Sans 3','Helvetica Neue',Arial,sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--papier); color:var(--encre);
  font:400 17px/1.6 var(--texte); font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased; }
h1,h2,h3 { font-family:var(--titre); margin:0; line-height:1.08;
  letter-spacing:-.012em; font-weight:700; text-wrap:balance; }
p { margin:0; }
a { color:var(--bleu); text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--bleu); outline-offset:3px; }
.env { max-width:1120px; margin:0 auto; padding-inline:24px; }
.bt { display:inline-block; padding:11px 19px; border-radius:7px;
  font:700 15.5px var(--texte); letter-spacing:.005em; text-decoration:none;
  white-space:nowrap; border:0; cursor:pointer; }
.bt.plein { background:var(--bleu); color:#fff; }
.bt.plein:hover { background:var(--bleu-fonce); color:#fff; }
.bt.creux { border:1px solid var(--trait-fort); color:var(--encre); background:var(--papier); }
.bt.creux:hover { border-color:var(--bleu); color:var(--bleu); }

/* ── Bandeau et menu ──────────────────────────────────────────────────── */
.haut { border-bottom:1px solid var(--trait); position:sticky; top:0;
  background:rgba(255,255,255,.95); backdrop-filter:blur(8px); z-index:40; }
.haut > .env { display:flex; align-items:center; gap:18px; padding-block:11px;
  position:relative; }
.marque { display:flex; align-items:center; gap:10px; text-decoration:none;
  color:inherit; margin-right:auto; }
.marque img { width:34px; height:34px; border-radius:8px; display:block; }
.marque b { font:700 20px/1 var(--titre); letter-spacing:-.01em; }
.principal { display:flex; gap:4px; align-items:center; }
.principal > a, .depli > button { font:400 15.5px/1 var(--texte); color:var(--ardoise);
  text-decoration:none; padding:10px 12px; border-radius:7px; background:none;
  border:0; cursor:pointer; display:flex; align-items:center; gap:6px; }
.principal > a:hover, .depli > button:hover { color:var(--encre); background:var(--creux); }
.depli > button svg { width:11px; height:7px; fill:none; stroke:currentColor;
  stroke-width:1.8; transition:transform .16s; }
.depli { position:static; }

/* 🪤 Le panneau était ancré sur le bouton « Produit », qui se trouve au
      milieu du bandeau : à 900 px de large, ses 760 px partaient 300 px au-delà
      du bord droit. Il est `visibility:hidden`, donc on ne le VOYAIT pas — mais
      il comptait dans la largeur de la page, et poussait TOUTES les pages de
      travers entre 900 et 1150 px. Il s'ancre désormais sur le conteneur du
      bandeau, et ne peut plus dépasser sa largeur. */
.voile { position:absolute; top:calc(100% + 9px); right:0; left:auto;
  width:min(760px,100%);
  background:var(--papier); border:1px solid var(--trait-fort);
  box-shadow:0 14px 34px -12px rgba(19,26,43,.28); opacity:0; visibility:hidden;
  transform:translateY(-5px); transition:opacity .15s, transform .15s, visibility .15s; }
.depli:hover .voile, .depli:focus-within .voile,
.depli > button[aria-expanded="true"] + .voile {
  opacity:1; visibility:visible; transform:none; }
.depli:hover > button svg, .depli > button[aria-expanded="true"] svg { transform:rotate(180deg); }
.voile .dedans { display:grid; grid-template-columns:1fr 1fr; gap:0 1px;
  background:var(--trait); }
.voile .dedans > div { background:var(--papier); padding:18px 16px 20px; }
.voile .cat { font:700 12.5px var(--texte); letter-spacing:.06em;
  text-transform:uppercase; color:var(--taupe); margin-bottom:10px; padding-left:10px; }
.voile a { display:flex; gap:12px; padding:9px 10px; border-radius:8px;
  text-decoration:none; color:inherit; align-items:flex-start; }
.voile a:hover { background:var(--creux); }
.voile a[aria-current] { background:var(--bleu-voile); }
.voile a svg { flex:none; width:19px; height:19px; margin-top:3px; fill:none;
  stroke:var(--bleu); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.voile a b { display:block; font:600 15.5px var(--texte); }
.voile a em { display:block; font-style:normal; font-size:13.5px; color:var(--ardoise);
  line-height:1.4; margin-top:2px; }
.voile .pied-menu { grid-column:1/-1; background:var(--creux);
  display:flex; gap:20px; align-items:center; justify-content:space-between;
  padding:14px 20px; flex-wrap:wrap; }
.voile .pied-menu p { font-size:14.5px; color:var(--ardoise); max-width:54ch; }
.voile .pied-menu a { font-weight:600; color:var(--bleu); padding:0; display:inline; }
.voile .pied-menu a:hover { background:none; text-decoration:underline; }

.burger { display:none; background:none; border:0; cursor:pointer; padding:8px;
  flex-direction:column; gap:4px; }
.burger span { display:block; width:21px; height:2px; background:var(--encre); }

/* ── Bandeau d'offre ──────────────────────────────────────────────────── */
.offre { background:var(--encre); color:#fff; font-size:14.5px; }
.offre .env { padding-block:9px; display:flex; gap:12px; align-items:center;
  justify-content:center; flex-wrap:wrap; text-align:center; }
.offre b { font-weight:700; color:var(--ambre); }
.offre a { color:#fff; font-weight:600; display:inline-block; padding-block:3px; }

/* ── Fil et ouverture de page ─────────────────────────────────────────── */
.fil { font-size:14px; color:var(--ardoise); padding-block:18px 0; }
.fil a { color:var(--ardoise); text-decoration:none; }
.fil a:hover { color:var(--bleu); text-decoration:underline; }
.ouvre { padding-block:40px 54px; border-bottom:1px solid var(--trait); }
.ouvre .env { display:grid; gap:46px; grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  align-items:start; }
.ouvre .rub { font:700 13px var(--texte); letter-spacing:.07em; color:var(--bleu);
  text-transform:uppercase; }
.ouvre h1 { margin-top:10px; font-size:clamp(34px,4.6vw,52px); letter-spacing:-.02em;
  max-width:17ch; }
.ouvre .sous { margin-top:20px; font-size:18.5px; line-height:1.55; color:var(--ardoise);
  max-width:56ch; }
.ouvre .sous b { color:var(--encre); font-weight:600; }
.ouvre .actions { margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.ouvre .note { margin-top:13px; font-size:14.5px; color:var(--ardoise); }

/* ── Le panneau de démonstration ──────────────────────────────────────── */
.demo { border:1px solid var(--trait-fort); background:var(--papier);
  min-width:0; }
.demo > header { padding:12px 15px; border-bottom:1px solid var(--trait);
  background:var(--creux); display:flex; justify-content:space-between;
  align-items:baseline; gap:10px; }
.demo > header b { font:700 14.5px var(--texte); }
.demo > header span { font-size:13px; color:var(--ardoise); }
.demo .corps { padding:16px 15px; display:grid; gap:12px; }
.demo .ligne { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px;
  align-items:center; padding-bottom:12px; border-bottom:1px solid var(--trait); }
.demo .ligne:last-child { border-bottom:0; padding-bottom:0; }
.demo .ligne .dom { font:600 15px var(--texte); overflow-wrap:anywhere; }
.demo .ligne .pq { grid-column:1/-1; font-size:13.5px; color:var(--ardoise); line-height:1.45; }
.demo .ligne .pq.alerte { color:var(--rouge-texte); font-weight:600; }
.demo .mono { font:400 12.5px/1.6 ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  background:var(--encre); color:#C9D1E4; padding:14px 15px; overflow-x:auto;
  white-space:pre; }
.demo .mono i { font-style:normal; color:var(--cyan); }
.demo .mono u { text-decoration:none; color:var(--vert); }
.demo .mono s { text-decoration:none; color:#F08C8C; }
.demo .mono b { color:#fff; font-weight:600; }
.etiq { display:inline-block; font:700 11.5px var(--texte); letter-spacing:.03em;
  padding:3px 8px; border-radius:4px; }
.etiq.ok { background:var(--vert-voile); color:var(--vert-texte); }
.etiq.att { background:var(--ambre-voile); color:var(--ambre-texte); }
.etiq.ko { background:var(--rouge-voile); color:var(--rouge-texte); }
.etiq.inf { background:var(--bleu-voile); color:var(--bleu-fonce); }

/* La jauge : le geste signature, le réservoir vu de côté. */
.jg { display:block; position:relative; width:84px; height:16px;
  background:var(--creux); border:1px solid var(--trait-fort); }
.jg i { position:absolute; inset:1px auto 1px 1px; background:var(--vert);
  animation:remplir .7s cubic-bezier(.2,.7,.3,1) both; }
.jg.bas i { background:var(--ambre); }
.jg.vide { background:var(--rouge-voile); border-color:var(--rouge); }
.jg.vide i { background:var(--rouge); }
.jg::after { content:""; position:absolute; top:-2px; bottom:-2px; left:25%;
  width:2px; background:var(--encre); opacity:.45; }
@keyframes remplir { from { width:0 !important; } }

/* ── Sections ─────────────────────────────────────────────────────────── */
section { padding-block:60px; border-bottom:1px solid var(--trait); }
section.creuse { background:var(--creux); }
.tete { margin-bottom:32px; }
.tete h2 { font-size:clamp(27px,3.4vw,38px); letter-spacing:-.015em; }
.tete p { margin-top:12px; color:var(--ardoise); max-width:64ch; font-size:17.5px; }

/* Les faits : ce que le module fait vraiment, un par un.
   🪤 Le trait de séparation est porté par la CARTE (une bague de 1px), pas par
      le fond de la grille. Sinon une rangée incomplète affiche un grand
      rectangle gris à la place des cases manquantes. */
.faits { display:grid; gap:1px; background:var(--papier);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.ft { background:var(--papier); padding:24px 22px; min-width:0;
  box-shadow:0 0 0 1px var(--trait); }
.ft h3 { font-size:20px; }
.ft p { margin-top:10px; font-size:16px; color:var(--ardoise); line-height:1.52; }
.ft .det { margin-top:12px; font-size:14.5px; padding-left:13px;
  border-left:2px solid var(--bleu); color:var(--encre); line-height:1.45; }

/* Le piège : le détail technique qui prouve qu'on y est allé. */
.piege { border:1px solid var(--trait-fort); background:var(--papier);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); }
.piege > div { padding:28px 26px; min-width:0; }
.piege > div:first-child { background:var(--ambre-voile); }
.piege .quoi { font:700 12.5px var(--texte); letter-spacing:.07em;
  text-transform:uppercase; color:var(--ambre-texte); }
.piege h3 { margin-top:9px; font-size:23px; }
.piege p { margin-top:12px; font-size:16px; line-height:1.55; color:var(--ardoise); }
.piege p b { color:var(--encre); font-weight:600; }
.piege > div:first-child p { color:#6B4A0C; }
.piege > div:first-child p b { color:#3D2A06; }

/* Ce qu'il ne fait pas. */
.limites { display:grid; gap:26px 36px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.lm { min-width:0; }
.lm h3 { font-size:19px; }
.lm p { margin-top:9px; font-size:15.5px; color:var(--ardoise); line-height:1.55; }

/* La suite : les pages voisines. */
.suite { display:grid; gap:1px; background:var(--papier);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.suite a { background:var(--papier); padding:22px 20px; text-decoration:none;
  color:inherit; min-width:0; display:block; box-shadow:0 0 0 1px var(--trait); }
.suite a:hover { background:var(--creux); }
.suite b { display:block; font:700 18px var(--texte); }
.suite span { display:block; margin-top:7px; font-size:14.5px; color:var(--ardoise);
  line-height:1.45; }
.suite em { display:block; margin-top:12px; font-style:normal; font-size:14.5px;
  font-weight:600; color:var(--bleu); }

/* ── Appel final ──────────────────────────────────────────────────────── */
.appel { background:var(--encre); color:#fff; border-bottom:0; }
.appel h2 { color:#fff; font-size:clamp(27px,3.4vw,38px); letter-spacing:-.015em; }
.appel > .env > p { margin-top:13px; color:#A7B0C6; max-width:62ch; font-size:17.5px; }
.form { margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.form input, .form select { font:400 16px var(--texte); padding:13px 15px;
  border-radius:7px; border:1px solid #39415C; background:#1C2439; color:#fff; }
.form input { flex:1 1 300px; min-width:0; }
.form input::placeholder { color:#79829B; }
.form .bt.plein { background:var(--ambre); color:var(--encre); }
.form .bt.plein:hover { background:#fff; }
.apres { margin-top:15px; font-size:14.5px; color:#79829B; }
#msg { display:none; margin-top:16px; padding:12px 15px; border-radius:7px;
  font-weight:600; font-size:15.5px; }
#msg.ok { display:block; background:var(--vert); color:var(--encre); }
#msg.ko { display:block; background:var(--rouge); color:#fff; }

/* ── Pied ─────────────────────────────────────────────────────────────── */
footer { padding-block:46px 40px; background:var(--creux); }
.plan { display:grid; gap:28px 32px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  padding-bottom:34px; border-bottom:1px solid var(--trait); }
.plan > div { min-width:0; }
.plan p { font:700 13px var(--texte); letter-spacing:.07em; text-transform:uppercase;
  color:var(--taupe); margin-bottom:12px; }
.plan ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.plan a { font-size:15px; color:var(--ardoise); text-decoration:none;
  display:inline-block; padding-block:3px; }
.plan a:hover { color:var(--bleu); text-decoration:underline; }
.bas { padding-top:26px; display:grid; gap:12px; }
.bas .marque b { font-size:18px; }
.bas p { font-size:14.5px; color:var(--ardoise); max-width:74ch; }
.bas .legal a { color:var(--ardoise); display:inline-block; padding-block:3px; }

@media (max-width:980px) {
  /* 🪤 `1fr` vaut `minmax(auto,1fr)` : une colonne de grille refuse alors de
        descendre sous la largeur min-content de son contenu. Le panneau de
        démonstration contient du texte en `white-space:pre`, dont la
        min-content est la ligne la plus longue — la colonne réclamait 408px
        sur un écran de 390 et poussait TOUTE la page de travers. */
  .ouvre .env { grid-template-columns:minmax(0,1fr); gap:34px; }
  .piege { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:860px) {
  .principal, .connexion { display:none; }
  .burger { display:flex; }
  .haut.ouvert .principal { display:flex; position:absolute; top:100%; left:0; right:0;
    background:var(--papier); border-bottom:1px solid var(--trait-fort);
    flex-direction:column; align-items:stretch; padding:10px 16px 18px; gap:0; }
  .haut.ouvert .principal > a { padding:13px 4px; border-bottom:1px solid var(--trait); }
  .haut.ouvert .depli { position:static; }
  .haut.ouvert .depli > button { width:100%; justify-content:space-between;
    padding:13px 4px; border-bottom:1px solid var(--trait); }
  .haut.ouvert .voile { position:static; width:auto; opacity:1; visibility:visible;
    transform:none; border:0; box-shadow:none; display:none; }
  .haut.ouvert .depli > button[aria-expanded="true"] + .voile { display:block; }
  .haut.ouvert .voile .dedans { grid-template-columns:1fr; background:none; gap:0; }
  .haut.ouvert .voile .dedans > div { padding:6px 0 12px; }
  .haut.ouvert .voile .pied-menu { display:none; }
}
@media (max-width:620px) {
  .env { padding-inline:16px; }
  section { padding-block:44px; }
  .ouvre { padding-block:26px 38px; }
  /* Le bandeau doit tenir : logo + bouton + menu, sur 390 points. */
  .haut .bt.plein { padding:9px 13px; font-size:14px; }
  .haut > .env { gap:10px; }
  .marque b { font-size:18px; }
  .ouvre .actions .bt { flex:1 1 auto; text-align:center; }
}
@media (prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; } }

/* ── Grille de tarifs ─────────────────────────────────────────────────── */
.grille { display:grid; gap:1px; background:var(--trait-fort);
  border:1px solid var(--trait-fort);
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); }
.col { background:var(--papier); padding:28px 24px 26px; display:flex;
  flex-direction:column; min-width:0; position:relative; }
.col.phare { background:var(--creux); }
.tag { position:absolute; top:0; right:0; background:var(--bleu); color:#fff;
  font:700 12px var(--texte); padding:4px 10px; letter-spacing:.03em; }
.col h3 { font-size:24px; }
.col .sites { margin-top:6px; font-weight:600; font-size:15.5px; color:var(--bleu); }
.col .px { margin-top:16px; display:flex; align-items:baseline; gap:7px; }
.col .px b { font:700 48px/1 var(--titre); letter-spacing:-.03em; }
.col .px span { font-size:15px; color:var(--ardoise); }
.col .pour { margin-top:10px; font-size:15px; color:var(--ardoise); min-height:4.4em;
  line-height:1.5; }
.col ul { list-style:none; margin:20px 0 24px; padding:0; display:grid; gap:9px; }
.col li { font-size:15.5px; padding-left:24px; position:relative; line-height:1.4; }
.col li::before { content:""; position:absolute; left:4px; top:8px; width:9px;
  height:9px; border-radius:50%; background:var(--vert); }
.col li.non { color:var(--taupe); }
.col li.non::before { background:none; border:1.5px solid var(--trait-fort); }
.col .bt { margin-top:auto; text-align:center; }

.credits { margin-top:26px; border:1px solid var(--trait); padding:24px; }
.credits h3 { font-size:20px; margin-bottom:18px; }
.credits dl { display:grid; gap:18px 32px; margin:0;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.credits div { min-width:0; }
.credits dt { font-family:var(--texte); font-weight:700; font-size:16.5px; }
.credits dd { margin:5px 0 0; font-size:15px; color:var(--ardoise); line-height:1.5; }

/* ── Questions ────────────────────────────────────────────────────────── */
.q { border-bottom:1px solid var(--trait); }
.q summary { padding:19px 0; font:700 18.5px var(--texte); letter-spacing:0;
  cursor:pointer; list-style:none; display:flex; justify-content:space-between;
  gap:16px; align-items:center; }
.q summary::-webkit-details-marker { display:none; }
.q summary::after { content:"+"; font:400 24px var(--titre); color:var(--bleu); flex:none; }
.q[open] summary::after { content:"\2013"; }
.q p { padding:0 0 20px; color:var(--ardoise); max-width:72ch; font-size:16.5px; }

/* ── Étapes numérotées (affiliation) ──────────────────────────────────── */
/* Quatre étapes : quatre colonnes, puis deux, puis une. Jamais trois —
   ce serait la rangée bancale une fois de plus. */
.etapes { display:grid; gap:1px; background:var(--papier);
  grid-template-columns:repeat(4,minmax(0,1fr)); counter-reset:et; }
@media (max-width:1000px) { .etapes { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .etapes { grid-template-columns:minmax(0,1fr); } }
.et { background:var(--papier); padding:24px 22px; min-width:0;
  box-shadow:0 0 0 1px var(--trait); }
.et::before { counter-increment:et; content:counter(et); display:block;
  font:700 13px var(--texte); color:var(--bleu); letter-spacing:.04em; }
.et h3 { font-size:19px; margin-top:8px; }
.et p { margin-top:10px; font-size:15.5px; color:var(--ardoise); line-height:1.5; }

/* ── Texte long (mentions) ────────────────────────────────────────────── */
.texte { max-width:70ch; }
.texte h2 { font-size:24px; margin-top:38px; }
.texte h2:first-child { margin-top:0; }
.texte p { margin-top:14px; font-size:16.5px; color:var(--ardoise); line-height:1.6; }
.texte p b { color:var(--encre); font-weight:600; }
.texte ul { margin-top:14px; padding-left:20px; color:var(--ardoise);
  font-size:16.5px; line-height:1.6; }

/* ── Colonnes imposées ────────────────────────────────────────────────────
   🪤 `auto-fit` choisit le nombre de colonnes selon la largeur, pas selon le
      nombre d'éléments. Quatre cartes dans trois colonnes laissent une case
      vide qui montre le fond gris de la grille — ça ressemble à un bug, et
      c'en est un. On impose donc la grille là où le compte est connu. */
.faits.deux, .suite.deux { grid-template-columns:repeat(2,minmax(0,1fr)); }
.faits.trois, .suite.trois { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px) {
  .faits.trois, .suite.trois { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .faits.deux, .faits.trois, .suite.deux, .suite.trois { grid-template-columns:1fr; }
}

/* ── Deux chemins pour prendre plus d'articles ────────────────────────────
   Les paquets ne sont pas des cartes de prix : ce sont des lignes d'un même
   barème, et elles se lisent en colonne — volume, prix, prix à l'article. */
.deuxvoies { display:grid; gap:1px; background:var(--papier);
  grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:760px) { .deuxvoies { grid-template-columns:minmax(0,1fr); } }
.voie { background:var(--papier); padding:28px 26px; min-width:0;
  box-shadow:0 0 0 1px var(--trait-fort); display:flex; flex-direction:column; }
.voie-quoi { font:700 12.5px var(--texte); letter-spacing:.07em;
  text-transform:uppercase; color:var(--taupe); }
.voie h3 { margin-top:9px; font-size:23px; }
.voie-dit { margin-top:12px; font-size:16px; color:var(--ardoise); line-height:1.55; }
.voie-dit b { color:var(--encre); font-weight:600; }
.paquets { list-style:none; margin:20px 0 0; padding:0; display:grid; gap:1px;
  background:var(--trait); border:1px solid var(--trait); }
.paquets li { background:var(--papier); padding:13px 15px; display:grid;
  grid-template-columns:minmax(0,1fr) auto; gap:2px 14px; align-items:baseline; }
.paquets b { font:600 16px var(--texte); }
.paquets span { font:700 19px var(--titre); letter-spacing:-.01em; }
.paquets em { grid-column:1/-1; font-style:normal; font-size:13.5px;
  color:var(--ardoise); }
.voie-fin { margin-top:auto; padding-top:16px; font-size:14.5px; color:var(--ardoise);
  line-height:1.5; padding-left:13px; border-left:2px solid var(--bleu); }

/* ── Le débit d'une formule ───────────────────────────────────────────────
   La jauge est le seul endroit où le monde du robinet entre dans la grille.
   Elle n'est pas décorative : elle rapporte le volume de la formule au plus
   gros abonnement, donc les quatre se comparent sans lire les chiffres. */
.col .debit { margin-top:12px; display:flex; align-items:center; gap:9px;
  font-size:14.5px; color:var(--ardoise); }
.col .debit > span:last-child { min-width:0; }
.col .debit b { font-weight:700; color:var(--encre); }
.col .debit .jg { width:62px; flex:none; }
.jg.plan { background:var(--bleu-voile); border-color:var(--trait-fort); }
.jg.plan i { background:var(--bleu); }
.jg.plan::after { display:none; }
.jg.libre { border-color:var(--bleu); }
/* 🪤 `auto-fit` décide du nombre de colonnes d'après la largeur, jamais
      d'après le nombre de blocs. Partout où le compte est connu — et il l'est
      presque toujours — on impose la grille. C'est ce qui laissait une carte
      seule sur sa ligne et une case vide à côté. */
.grille { grid-template-columns:repeat(3,minmax(0,1fr)); }
.col { padding:26px 22px 24px; }
.col .px b { font-size:46px; }
.col .pour { min-height:4.6em; }
@media (max-width:980px) { .grille { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:660px) { .grille { grid-template-columns:minmax(0,1fr); } }

/* ── La bande Agence ──────────────────────────────────────────────────────
   Une autre nature d'offre, donc une autre forme : pas de prix à chercher,
   pas de colonne à comparer. Elle tient sur une ligne et se lit d'un trait. */
.bande { margin-top:1px; border:1px solid var(--trait-fort); background:var(--encre);
  color:#fff; display:grid; gap:28px 36px; padding:30px 28px;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) auto; align-items:center; }
.bande h3 { color:#fff; font-size:27px; margin-top:7px; }
.bande .voie-quoi { color:var(--ambre); }
.bande .bande-dit p:last-child { margin-top:11px; font-size:15.5px; line-height:1.55;
  color:#A7B0C6; }
.bande .bande-dit p b { color:#fff; font-weight:600; }
.bande-liste { list-style:none; margin:0; padding:0; display:grid; gap:8px;
  grid-template-columns:repeat(2,minmax(0,1fr)); }
.bande-liste li { font-size:14.5px; color:#C9D1E4; padding-left:18px; position:relative;
  line-height:1.4; }
.bande-liste li::before { content:""; position:absolute; left:2px; top:7px; width:7px;
  height:7px; border-radius:50%; background:var(--vert); }
.bande .bt.plein { background:var(--ambre); color:var(--encre); }
.bande .bt.plein:hover { background:#fff; }
@media (max-width:1000px) {
  .bande { grid-template-columns:minmax(0,1fr); gap:22px; }
  .bande .bt { justify-self:start; }
}
@media (max-width:560px) { .bande-liste { grid-template-columns:minmax(0,1fr); } }


/* ── L'index des modules ──────────────────────────────────────────────────
   Neuf modules en deux groupes ne se rangent pas en grille : cinq et quatre
   laissent toujours une rangée bancale. Ils se LISENT, comme dans le menu —
   une colonne par groupe, un module par ligne. Aucun compte ne peut casser. */
.modules { display:grid; gap:34px 40px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.groupe { min-width:0; }
.groupe > header { padding-bottom:14px; border-bottom:2px solid var(--encre); }
.groupe > header h2 { font-size:26px; }
.groupe > header p { margin-top:7px; font-size:15.5px; color:var(--ardoise); }
.groupe a { display:flex; gap:14px; padding:17px 0; text-decoration:none;
  color:inherit; align-items:flex-start; border-bottom:1px solid var(--trait); }
.groupe a:hover b { color:var(--bleu); }
.groupe a:hover .fleche { transform:translateX(3px); }
.groupe a svg { flex:none; width:21px; height:21px; margin-top:3px; fill:none;
  stroke:var(--bleu); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.groupe a > span { min-width:0; flex:1; }
.groupe a b { display:block; font:700 18px var(--texte); }
.groupe a em { display:block; font-style:normal; font-size:15px; color:var(--ardoise);
  line-height:1.45; margin-top:4px; }
.groupe .fleche { flex:none; color:var(--taupe); font-size:18px; margin-top:3px;
  transition:transform .15s; }
@media (max-width:760px) { .modules { grid-template-columns:minmax(0,1fr); } }