/* ============================================================================
   ia-usage.css — COMPARATEUR DE COÛT PAR USAGE IA
   ============================================================================
   Feuille dédiée à ai/comparateur-cout-usage-ia.php (créée le 04/07/2026
   d'après la maquette « Comparateur IA » fournie par le propriétaire).
   Depuis le 04/07/2026 au soir, la page est INTÉGRÉE AU GABARIT COMMUN du
   site (header BestForfait + fil d'ariane + panneau violet .ia-page de
   ia-theme.css), comme comparateur_de_forfait_Intelligence_artificielle.php.
   L'ancien bandeau autonome (.cu-header/.cu-nav) n'est plus affiché — ses
   règles restent ci-dessous au cas où, et le bloc « INTÉGRATION AU GABARIT
   COMMUN » en fin de fichier porte les adaptations.

   PALETTE : les mêmes violets que ai/ia-theme.css (nuit violette, violet
   néon, rose néon) déclinés en mode « application » : fond quasi noir,
   panneaux arrondis, accent violet #f07478 / rose #e5484d.

   Toutes les classes sont préfixées « cu- » (Coût par Usage) pour ne
   jamais entrer en conflit avec le reste du site.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root{
  --cu-fond:#1c1c22;              /* fond de page (nuit quasi noire)          */
  --cu-nuit:#1c1c22;              /* fond profond (repris de ia-theme)        */
  --cu-panel:#24242a;             /* panneaux                                  */
  --cu-panel2:#2a2a32;            /* cartes / éléments sur panneau             */
  --cu-piste:#3a3a44;             /* pistes des curseurs                       */
  --cu-border:rgba(255,255,255,.16);
  --cu-neon:#e5484d;              /* rose néon (accents forts)                 */
  --cu-violet:#f07478;            /* violet (accents, actifs)                  */
  --cu-violet-fonce:#c0393e;
  --cu-lavande:#f0f0f0;           /* titres                                    */
  --cu-texte:#c0c0c8;             /* texte courant                             */
  --cu-sourdine:#8888a0;          /* texte secondaire                          */
  --cu-vert:#22c55e;
  --cu-jaune:#ffc107;
  --cu-rouge:#f44336;
  --cu-radius:14px;
}
/* mode clair (bouton lune du bandeau) */
body.cu-clair{
  --cu-fond:#ececf0; --cu-nuit:#ffffff; --cu-panel:#ffffff; --cu-panel2:#e2e2e8;
  --cu-piste:#d0d0d8; --cu-border:rgba(0,0,0,.25);
  --cu-lavande:#2a2a32; --cu-texte:#3d3d47; --cu-sourdine:#6f6f7a;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body.cu-body{
  background:var(--cu-fond);
  color:var(--cu-texte);
  font-family:'Space Grotesk',Arial,sans-serif;
  font-size:14px;line-height:1.5;
}
.cu-body a{color:var(--cu-violet);text-decoration:none;}
.cu-body a:hover{color:var(--cu-neon);}

/* ============================================================
   BANDEAU (header propre à la page, comme sur la maquette)
   ============================================================ */
.cu-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:14px;
  padding:12px 28px;
  background:rgba(13,9,22,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--cu-border);
}
body.cu-clair .cu-header{background:rgba(255,255,255,.92);}
.cu-logo{
  width:42px;height:42px;flex:0 0 42px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#2a2a32,#2a2a32);
  border:1px solid var(--cu-border);border-radius:12px;
  font-size:22px;
}
.cu-titre-site{display:flex;flex-direction:column;line-height:1.2;margin-right:auto;}
.cu-titre-site b{color:var(--cu-lavande);font-family:'Space Grotesk',sans-serif;font-size:16px;letter-spacing:.5px;}
.cu-titre-site small{color:var(--cu-sourdine);font-size:11px;}
.cu-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.cu-nav a{
  padding:7px 14px;border-radius:20px;font-size:13px;color:var(--cu-texte);
  border:1px solid transparent;transition:all .15s;white-space:nowrap;
}
.cu-nav a:hover{color:#fff;background:rgba(255,255,255,.08);}
.cu-nav a.actif{color:#fff;border-color:var(--cu-violet);background:rgba(255,255,255,.12);}
.cu-lune{
  width:36px;height:36px;border-radius:50%;cursor:pointer;
  border:1px solid var(--cu-border);background:var(--cu-panel2);
  color:var(--cu-lavande);font-size:15px;line-height:1;
}
.cu-lune:hover{border-color:var(--cu-violet);}

/* ============================================================
   HERO + STATISTIQUES
   ============================================================ */
.cu-conteneur{max-width:1180px;margin:0 auto;padding:26px 20px 60px;}
.cu-hero h1{
  margin:14px 0 6px;font-family:'Space Grotesk',sans-serif;font-size:30px;
  color:var(--cu-lavande);letter-spacing:.5px;
  text-shadow:none;
}
.cu-hero h1 .violet{color:var(--cu-violet);}
.cu-hero p{margin:0 0 22px;color:var(--cu-texte);font-size:15px;}

/* ---- BASCULE DE DEVISE € / $ (ajoutée le 04/07/2026) ----
   En ÉVIDENCE sur la même ligne que le titre : 2 gros boutons € / $
   (l'actif est allumé en dégradé violet/rose) + le taux du jour dessous.
   Les prix sont stockés en $ US et convertis en € (défaut) via le taux. */
.cu-hero-ligne{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.cu-devise{display:flex;flex-direction:column;align-items:flex-end;gap:5px;}
.cu-devise-btns{display:flex;border:1px solid var(--cu-border);border-radius:14px;overflow:hidden;background:var(--cu-panel);}
.cu-devise-btns button{
  display:flex;align-items:center;gap:8px;padding:11px 20px;border:none;cursor:pointer;
  background:none;color:var(--cu-sourdine);
  font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:1px;
  transition:all .15s;
}
.cu-devise-btns button .symb{font-size:20px;font-weight:700;line-height:1;}
.cu-devise-btns button:hover{color:#fff;}
.cu-devise-btns button.actif{
  background:linear-gradient(45deg,var(--cu-violet-fonce),var(--cu-neon));color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.cu-taux{color:var(--cu-sourdine);font-size:11.5px;}

.cu-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 24px;}
.cu-stat{
  display:flex;align-items:center;gap:12px;
  background:var(--cu-panel);border:1px solid var(--cu-border);
  border-radius:var(--cu-radius);padding:16px 18px;
}
.cu-stat .ico{
  width:40px;height:40px;flex:0 0 40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:19px;
  background:rgba(255,255,255,.12);border:1px solid var(--cu-border);
}
.cu-stat b{display:block;color:var(--cu-lavande);font-size:19px;font-family:'Space Grotesk',sans-serif;}
.cu-stat small{color:var(--cu-sourdine);font-size:12px;}

/* ============================================================
   GRILLE PRINCIPALE : barre latérale + contenu
   ============================================================ */
/* minmax(0,1fr) et PAS 1fr (07/07/2026) : une colonne 1fr ne descend jamais
   sous la largeur naturelle de son contenu (min-width:auto) — le tableau des
   résultats (en-têtes insécables) forçait <main> à ~1020px et tous les blocs
   de résultats débordaient du site, plafonné à 1200px (#contenu de
   theme-moderne.css). minmax(0,1fr) laisse la colonne rétrécir : le tableau
   défile alors DANS son bloc (overflow-x:auto de .cu-table-bloc). */
.cu-grille{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start;}

/* Colonne de gauche NON sticky (08/07/2026) : elle défile avec les résultats.
   Avant, position:sticky;top:76px la figeait pendant qu'on scrollait le tableau
   -> effet « deux scrolls » déroutant, et le bas (Étape 3) pouvait rester coincé
   hors écran. Comme les résultats ne se recalculent PAS en direct (il faut
   re-cliquer « Lancer la comparaison »), garder les réglages à l'écran n'apportait
   rien : on préfère un défilement unique, plus lisible et plus simple à cocher. */
.cu-aside{display:flex;flex-direction:column;gap:16px;}
.cu-panneau{
  background:var(--cu-panel);border:1px solid var(--cu-border);
  border-radius:var(--cu-radius);padding:16px;
}
/* titre du parcours MANUEL (pendant du « Simulateur de projet ») en tête de l'étape 1 */
.cu-manuel-titre{margin:0 0 4px;color:var(--cu-lavande);font-family:'Space Grotesk',Arial,sans-serif;font-size:16px;font-weight:700;}
.cu-manuel-sous{margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--cu-border);color:var(--cu-sourdine);font-size:12px;line-height:1.4;}
.cu-etape{color:var(--cu-sourdine);font-size:11px;letter-spacing:1px;text-transform:uppercase;margin:0 0 2px;}
.cu-panneau h3{margin:0 0 12px;color:var(--cu-lavande);font-size:14px;}

/* --- Étape 1 : accordéon des usages (flèche ▶ / ▼) --- */
.cu-acc{border:1px solid var(--cu-border);border-radius:10px;margin:0 0 8px;background:var(--cu-panel2);overflow:hidden;}
.cu-acc-tete{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 12px;cursor:pointer;background:none;border:none;text-align:left;
  color:var(--cu-lavande);font-family:inherit;font-size:13px;
}
.cu-acc-tete .ico{
  width:28px;height:28px;flex:0 0 28px;border-radius:8px;font-size:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);
}
.cu-acc-tete .lib{flex:1;}
.cu-acc-tete .lib b{display:block;font-size:13px;}
.cu-acc-tete .lib small{color:var(--cu-sourdine);font-size:10.5px;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px;}
.cu-acc-tete .fleche{color:var(--cu-sourdine);font-size:10px;transition:transform .2s;}
.cu-acc.ouvert .fleche{transform:rotate(90deg);}
.cu-acc-corps{display:none;padding:2px 12px 10px 50px;}
.cu-acc.ouvert .cu-acc-corps{display:block;}
.cu-acc-corps label{
  display:flex;align-items:center;gap:8px;padding:4px 0;
  font-size:12.5px;color:var(--cu-texte);cursor:pointer;
}
.cu-acc-corps input[type=checkbox]{accent-color:var(--cu-neon);width:14px;height:14px;cursor:pointer;}

/* --- Étape 2 : préférences --- */
.cu-pref-lbl{display:flex;justify-content:space-between;color:var(--cu-texte);font-size:12.5px;margin:12px 0 6px;}
.cu-pref-lbl:first-of-type{margin-top:0;}
.cu-pref-lbl b{color:var(--cu-lavande);}
input.cu-range{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--cu-violet) var(--pc,50%),var(--cu-piste) var(--pc,50%));
  outline:none;margin:4px 0 2px;
}
input.cu-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid var(--cu-neon);cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
input.cu-range::-moz-range-thumb{
  width:12px;height:12px;border-radius:50%;background:#fff;
  border:3px solid var(--cu-neon);cursor:pointer;
}
.cu-chips{display:flex;gap:6px;flex-wrap:wrap;}
.cu-chips label{
  padding:6px 12px;border:1px solid var(--cu-border);border-radius:8px;
  font-size:12px;color:var(--cu-texte);cursor:pointer;background:var(--cu-panel2);
  transition:all .15s;
}
.cu-chips input{display:none;}
.cu-chips label:hover{border-color:var(--cu-violet);color:#fff;}
.cu-chips label:has(input:checked){border-color:var(--cu-violet);background:rgba(255,255,255,.18);color:#fff;}

/* étoiles de qualité */
.cu-etoiles{display:flex;gap:4px;font-size:20px;}
.cu-etoiles label{cursor:pointer;color:var(--cu-piste);transition:color .1s;}
.cu-etoiles label.plein{color:var(--cu-violet);text-shadow:none;}
.cu-etoiles input{display:none;}

/* sélecteurs éditeur / type / licence */
.cu-panneau select{
  width:100%;padding:8px 10px;margin:0 0 4px;
  border:1px solid var(--cu-border);border-radius:8px;
  background:var(--cu-panel2);color:var(--cu-lavande);font-size:12.5px;
  font-family:inherit;cursor:pointer;
}
.cu-panneau select:hover,.cu-panneau select:focus{border-color:var(--cu-violet);outline:none;}

/* bouton principal */
.cu-lancer{
  width:100%;padding:13px 10px;border:none;border-radius:10px;cursor:pointer;
  background:linear-gradient(45deg,#c0393e,var(--cu-neon));color:#fff;
  font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:1.5px;
  text-transform:uppercase;box-shadow:0 4px 14px rgba(229,72,77,.35);
  transition:filter .15s;
}
.cu-lancer:hover{filter:brightness(1.15);}

/* encart « comprendre les résultats » */
.cu-comprendre small{display:block;color:var(--cu-sourdine);margin:0 0 8px;}
.cu-comprendre ul{margin:0;padding:0;list-style:none;}
.cu-comprendre li{padding:3px 0;font-size:12.5px;color:var(--cu-texte);}
.cu-comprendre li::before{content:"\2713";color:var(--cu-vert);margin-right:8px;}

/* ============================================================
   CARTES D'USAGE (colonne principale)
   ============================================================ */
.cu-usages-bloc{background:var(--cu-panel);border:1px solid var(--cu-border);
  border-radius:var(--cu-radius);padding:18px;}
.cu-usages-tete{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px;}
.cu-usages-tete h2{margin:0;color:var(--cu-lavande);font-size:16px;}
.cu-usages-tete h2 small{color:var(--cu-sourdine);font-weight:400;font-size:12px;}
.cu-raz{font-size:12.5px;color:var(--cu-violet);background:none;border:none;cursor:pointer;font-family:inherit;}
.cu-raz:hover{color:var(--cu-neon);}

.cu-usages{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.cu-usage{
  background:var(--cu-panel2);border:1px solid var(--cu-border);
  border-radius:12px;padding:14px;transition:border-color .15s;
}
.cu-usage.actif{border-color:rgba(255,255,255,.5);}
.cu-usage-tete{display:flex;align-items:center;gap:10px;margin:0 0 4px;}
.cu-usage-tete .ico{
  width:32px;height:32px;flex:0 0 32px;border-radius:9px;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);
}
.cu-usage-tete b{flex:1;color:var(--cu-lavande);font-size:13.5px;}
.cu-usage>small{display:block;color:var(--cu-sourdine);font-size:11.5px;margin:0 0 12px;}

/* interrupteur (toggle) */
.cu-switch{position:relative;display:inline-block;width:40px;height:22px;flex:0 0 40px;}
.cu-switch input{opacity:0;width:0;height:0;}
.cu-switch .glisse{
  position:absolute;inset:0;border-radius:22px;cursor:pointer;
  background:var(--cu-piste);transition:background .2s;
}
.cu-switch .glisse::before{
  content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;
  border-radius:50%;background:#fff;transition:transform .2s;
}
.cu-switch input:checked + .glisse{background:linear-gradient(45deg,var(--cu-violet),var(--cu-neon));}
.cu-switch input:checked + .glisse::before{transform:translateX(18px);}

.cu-vol{margin-top:2px;}
.cu-vol .lbl{color:var(--cu-sourdine);font-size:11px;display:block;margin:0 0 5px;}
.cu-vol-ligne{
  display:flex;align-items:center;gap:8px;
  background:var(--cu-nuit);border:1px solid var(--cu-border);border-radius:8px;
  padding:7px 10px;
}
.cu-vol-ligne input[type=number]{
  flex:1;width:60px;background:none;border:none;color:var(--cu-lavande);
  font-size:13.5px;font-family:inherit;outline:none;
}
.cu-vol-ligne .unite{color:var(--cu-sourdine);font-size:12px;white-space:nowrap;}
.cu-vol input.cu-range{margin-top:8px;}
.cu-usage:not(.actif) .cu-vol{opacity:.35;pointer-events:none;}

/* options avancées */
.cu-avance-lien{
  display:block;width:100%;text-align:center;margin:16px 0 0;padding:9px;
  background:none;border:none;color:var(--cu-violet);cursor:pointer;
  font-family:inherit;font-size:13px;
}
.cu-avance-lien:hover{color:var(--cu-neon);}
.cu-avance{display:none;margin-top:12px;padding:14px;border:1px dashed var(--cu-border);
  border-radius:10px;}
.cu-avance.ouvert{display:block;}
.cu-avance .cu-chips label{margin:0;}

/* ============================================================
   RÉSULTATS
   ============================================================ */
/* scroll-margin-top : après une recherche, le JS fait #resultats.scrollIntoView
   ({block:'start'}) ; sans marge, le header FIXE du site (header.fixed height:50px)
   recouvre le 1er élément (le titre « Les 3 meilleurs résultats… »). On réserve
   la hauteur du header + un peu d'air pour que le titre reste bien visible. */
.cu-resultats{margin-top:18px;scroll-margin-top:72px;}
/* Titres rouges des sections de résultats (08/07/2026, maquette Nicolas) :
   « Les 3 meilleurs résultats… » au-dessus du podium, « Autres résultats… »
   au-dessus du tableau. Police du SITE (Space Grotesk) + rouge du thème. */
/* ⚠ scopé #texte + !important (même parade que #texte .cu-hero h1 plus bas) :
   sinon la règle du gabarit « #texte h2{color:var(--m-txt)!important} »
   (theme-moderne.css) écrase le rouge et les titres ressortent en gris. */
#texte .cu-res-titre{
  font-family:'Space Grotesk',Arial,sans-serif;
  color:var(--cu-neon)!important;font-weight:700;line-height:1.2;
  font-size:26px;margin:4px 0 14px;
}
#texte .cu-res-titre.cu-res-autres{margin-top:22px;}
@media (max-width:620px){ #texte .cu-res-titre{font-size:21px;} }
.cu-reco{
  margin-top:0;
  background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(229,72,77,.08));
  border:1px solid var(--cu-border);border-radius:var(--cu-radius);
  padding:16px 18px;margin:0 0 16px;font-size:14px;color:var(--cu-lavande);
}
.cu-reco b{color:#fff;}

/* podium des 3 meilleurs */
.cu-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 18px;}
.cu-pod{
  background:var(--cu-panel);border:1px solid var(--cu-border);
  border-radius:var(--cu-radius);padding:16px;position:relative;
}
.cu-pod.or{border-color:rgba(255,193,7,.4);}
/* CHAPEAU ROUGE (09/07/2026, harmonisation site) : le nom du modèle en
   capitales sur bandeau rouge bord à bord (marges négatives = padding:16px
   de la carte annulé), même gabarit que le .forti des bons plans mobiles.
   Padding latéral 44px : la médaille absolue (top/right) se pose SUR le
   bandeau sans chevaucher le texte centré. */
.cu-pod-chapeau{
  margin:-16px -16px 12px;
  padding:8px 44px;
  min-height:40px;
  box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  background:var(--cu-neon);
  color:#fff;
  font-weight:800;font-size:16px;line-height:1.3;
  letter-spacing:.5px;text-transform:uppercase;text-align:center;
  border-radius:calc(var(--cu-radius) - 1px) calc(var(--cu-radius) - 1px) 0 0;
}
.cu-pod .medaille{position:absolute;top:10px;right:14px;font-size:20px;}
.cu-pod .qui{display:flex;align-items:center;gap:10px;margin:0 0 10px;}
.cu-pod .qui b{display:block;color:var(--cu-lavande);font-size:14.5px;}
.cu-pod .qui small{color:var(--cu-sourdine);font-size:11.5px;}
.cu-pod .prix{font-family:'Space Grotesk',sans-serif;font-size:21px;color:#fff;margin:0 0 2px;}
.cu-pod .prix small{font-size:11px;color:var(--cu-sourdine);font-family:'Space Grotesk',sans-serif;}
.cu-pod .mode{font-size:11px;color:var(--cu-violet);margin:0 0 8px;}
.cu-pod ul{margin:0 0 12px;padding:0;list-style:none;}
.cu-pod li{font-size:12px;color:var(--cu-texte);padding:2px 0;}
.cu-pod li::before{content:"\2713";color:var(--cu-vert);margin-right:7px;}

/* logo / initiales */
.cu-ini{
  width:36px;height:36px;flex:0 0 36px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#2a2a32,#2a2a32);
  color:var(--cu-violet);font-weight:700;font-size:13px;
  border:1px solid var(--cu-border);
}
.cu-ini img{width:100%;height:100%;object-fit:contain;border-radius:9px;}

/* bouton violet (voir le détail) */
.cu-btn{
  display:inline-block;padding:8px 16px;border:none;border-radius:8px;cursor:pointer;
  background:linear-gradient(45deg,var(--cu-violet-fonce),var(--cu-neon));
  color:#fff;font-size:12px;font-family:inherit;font-weight:600;
  transition:filter .15s;text-align:center;
}
.cu-btn:hover{filter:brightness(1.15);color:#fff;}

/* bouton « Voir l'offre » (04/07/2026) : porte le lien d'affiliation résolu
   par ai/lien-offre-ia.php — vert « offre » pour se distinguer du violet
   « Voir le détail », toujours affiché EN DESSOUS de lui */
.cu-btn-offre{
  display:block;margin-top:6px;
  background:linear-gradient(45deg,#0b8f43,#00c853);
  color:#fff !important;
}
/* pas encore d'affiliation saisie : bouton visible mais neutralisé
   (lien « # », curseur normal, vert éteint) — il s'allume tout seul dès
   que l'affiliation est renseignée dans l'admin */
.cu-btn-offre.inactif{
  background:linear-gradient(45deg,#274a38,#2e6b4c);
  opacity:.75;cursor:default;
}
.cu-actions .cu-btn{display:block;width:100%;}
.cu-pod .cu-btn-offre{display:block;}

/* mention « facultatif » des champs non obligatoires de la recherche (04/07/2026) */
.cu-fac{
  font-size:10px;font-style:italic;font-weight:400;
  color:var(--cu-sourdine);letter-spacing:.3px;
}

/* tableau des résultats */
.cu-table-bloc{background:var(--cu-panel);border:1px solid var(--cu-border);
  border-radius:var(--cu-radius);padding:18px;overflow-x:auto;}
.cu-table-tete{display:flex;align-items:center;gap:10px;margin:0 0 12px;}
.cu-table-tete h2{margin:0;color:var(--cu-lavande);font-size:16px;flex:1;}
.cu-pastille{
  padding:4px 10px;border:1px solid var(--cu-border);border-radius:14px;
  font-size:11.5px;color:var(--cu-sourdine);
}
table.cu-table{width:100%;border-collapse:collapse;font-size:13px;}
/* 07/07/2026 : en-têtes SANS white-space:nowrap (ils peuvent passer sur 2
   lignes) + retraits resserrés — c'est ce qui permettait au tableau de
   forcer ~1020px de large ; compacté, il tient dans la colonne (~830px)
   sans barre de défilement depuis le plafonnement du site à 1200px. */
.cu-table th{
  text-align:left;padding:10px 7px;color:var(--cu-sourdine);font-size:11px;
  text-transform:uppercase;letter-spacing:.4px;line-height:1.35;
  border-bottom:1px solid var(--cu-border);
}
.cu-table td{padding:12px 7px;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:middle;}
.cu-table tr.ligne:hover td{background:rgba(255,255,255,.04);}
.cu-modele{display:flex;align-items:center;gap:10px;}
.cu-modele b{display:block;color:var(--cu-lavande);font-size:13.5px;}
.cu-modele small{color:var(--cu-sourdine);font-size:11.5px;}
.cu-cout b{color:#fff;font-size:14.5px;}
.cu-cout small{display:block;color:var(--cu-violet);font-size:11px;cursor:pointer;}
.cu-cout small:hover{color:var(--cu-neon);}
.cu-scorebar{width:72px;}
.cu-scorebar b{color:var(--cu-lavande);font-size:13px;}
.cu-scorebar .barre{height:5px;border-radius:3px;background:var(--cu-piste);margin-top:5px;overflow:hidden;}
.cu-scorebar .barre i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--cu-vert),#7dd87d);}
.cu-scorebar.mid .barre i{background:linear-gradient(90deg,var(--cu-jaune),#ffe082);}
.cu-scorebar.low .barre i{background:linear-gradient(90deg,var(--cu-rouge),#ef9a9a);}
.cu-points{font-size:12px;color:var(--cu-texte);max-width:170px;}
.cu-points span{display:block;padding:1px 0;}
.cu-couvre{font-size:11px;color:var(--cu-sourdine);}
.cu-couvre .ok{color:var(--cu-vert);}
.cu-couvre .ko{color:var(--cu-rouge);}

/* ligne de détail dépliable (fiche + décomposition du coût) */
tr.cu-detail{display:none;}
tr.cu-detail.ouvert{display:table-row;}
tr.cu-detail>td{background:var(--cu-panel2);border-radius:10px;padding:16px 18px;}
.cu-fiche{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px 22px;font-size:12.5px;}
.cu-fiche div small{display:block;color:var(--cu-sourdine);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;}
.cu-fiche div b{color:var(--cu-lavande);font-weight:600;}
.cu-fiche .oui{color:var(--cu-vert);}
.cu-fiche .non{color:var(--cu-sourdine);}
.cu-decomp{margin:14px 0 0;padding:12px 14px;background:var(--cu-nuit);
  border:1px solid var(--cu-border);border-radius:10px;font-size:12.5px;}
.cu-decomp b{color:var(--cu-lavande);}
.cu-decomp table{border-collapse:collapse;margin-top:6px;}
.cu-decomp td{padding:3px 18px 3px 0;border:none;color:var(--cu-texte);}
.cu-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.cu-badges span{
  padding:4px 10px;border-radius:12px;font-size:11px;
  background:rgba(255,255,255,.12);border:1px solid var(--cu-border);color:var(--cu-lavande);
}

/* bouton « voir tous les modèles » */
.cu-voir-tout{display:block;margin:16px auto 0;padding:10px 26px;
  background:var(--cu-panel2);color:var(--cu-lavande);border:1px solid var(--cu-border);
  border-radius:10px;cursor:pointer;font-family:inherit;font-size:13px;transition:border-color .15s;}
.cu-voir-tout:hover{border-color:var(--cu-violet);}
tr.cu-plus{display:none;}
table.cu-table.tout tr.cu-plus{display:table-row;}
table.cu-table.tout tr.cu-plus.cu-detail{display:none;}
table.cu-table.tout tr.cu-plus.cu-detail.ouvert{display:table-row;}

.cu-vide{padding:30px;text-align:center;color:var(--cu-sourdine);}

/* ============================================================
   AIDE (« Comment lire ces résultats ? ») + pied de page
   ============================================================ */
.cu-aide{margin-top:22px;background:var(--cu-panel);border:1px solid var(--cu-border);
  border-radius:var(--cu-radius);padding:18px;}
.cu-aide h2{margin:0 0 14px;color:var(--cu-lavande);font-size:15px;}
.cu-aide-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.cu-aide-carte{background:var(--cu-panel2);border:1px solid var(--cu-border);
  border-radius:10px;padding:13px;}
.cu-aide-carte .ico{font-size:17px;margin:0 0 6px;display:block;}
.cu-aide-carte b{display:block;color:var(--cu-lavande);font-size:12.5px;margin:0 0 4px;}
.cu-aide-carte small{color:var(--cu-sourdine);font-size:11.5px;line-height:1.45;display:block;}
/* « Comment lire ces résultats ? » déplacé dans la colonne de gauche (08/07/2026) :
   dans la sidebar de 250px la grille 4 colonnes s'EMPILE en 1 colonne, et le grand
   margin-top est annulé (l'espacement vient du gap flex de .cu-aside). */
.cu-aside .cu-aide{margin-top:0;}
.cu-aside .cu-aide-grille{grid-template-columns:1fr;}

.cu-pied{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:26px;padding-top:16px;border-top:1px solid var(--cu-border);
  color:var(--cu-sourdine);font-size:11.5px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .cu-grille{grid-template-columns:minmax(0,1fr);} /* même parade anti-débordement qu'en desktop */
  .cu-aside{position:static;}
  .cu-stats{grid-template-columns:repeat(2,1fr);}
  .cu-usages{grid-template-columns:repeat(2,1fr);}
  .cu-podium{grid-template-columns:1fr;}
  .cu-aide-grille{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:620px){
  .cu-header{padding:10px 14px;}
  .cu-nav{display:none;}
  .cu-usages{grid-template-columns:1fr;}
  .cu-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cu-aide-grille{grid-template-columns:1fr;}
}
/* très petits écrans : les stats (icône + libellé « abonnements et API ») ne tiennent
   pas à 2 colonnes -> 1 colonne (évite tout débordement horizontal) */
@media (max-width:480px){
  .cu-stats{grid-template-columns:1fr;}
}

/* ============================================================
   INTÉGRATION AU GABARIT COMMUN (04/07/2026)
   ============================================================
   La page vit désormais dans le panneau .ia-page du site (header
   BestForfait + fil d'ariane) : le <body> n'a plus la classe
   cu-body et l'ancien bandeau cu-header n'est plus affiché.
   1. la base typographique (police, couleur, liens) qui était sur
      body.cu-body est reportée sur .cu-conteneur ;
   2. le titre est armé contre la règle « #texte h1 » du thème gris
      (plus spécifique qu'une simple classe) ;
   3. le conteneur perd sa largeur maxi/centrage : c'est le panneau
      .ia-page qui cadre désormais la page.
   NB : le mode clair (bouton lune) continue de poser body.cu-clair,
   qui ne fait que redéfinir les variables --cu-* : il reste
   fonctionnel dans le panneau sans toucher au reste du site.
   ============================================================ */
.cu-conteneur{
  color:var(--cu-texte);
  font-family:'Space Grotesk',Arial,sans-serif;
  font-size:14px;line-height:1.5;
  max-width:none;margin:0;padding:4px 0 10px;
}
.cu-conteneur a{color:var(--cu-violet);text-decoration:none;}
.cu-conteneur a:hover{color:var(--cu-neon);}
/* !important obligatoire : theme-moderne.css pose
   « #texte h1 { color: var(--m-txt) !important } » (thème gris) */
#texte .cu-hero h1{color:var(--cu-lavande) !important;}
#texte .cu-hero h1 .violet{color:var(--cu-violet) !important;}

/* ══════════ « Où part l'argent ? » : répartition du coût par usage ══════════
   (ajouté le 08/07/2026, #2 de la feuille de route) — barre SVG + légende,
   dans le bloc « Détail du coût estimé ». Couleurs sobres portées par le SVG
   (rouge -> ambre -> gris chaud) ; ici juste la mise en page, neutre clair/sombre. */
.cu-repartition{margin:12px 0 2px;padding-top:10px;border-top:1px solid rgba(127,127,127,.22);}
.cu-repartition>b{font-size:13px;}
.cu-repartition small{opacity:.7;margin-left:6px;font-size:11.5px;}
.cu-rep-bar{display:block;margin:8px 0 9px;border-radius:6px;overflow:hidden;background:rgba(127,127,127,.15);}
.cu-rep-legende{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;}
.cu-rep-leg{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.cu-rep-leg i{width:11px;height:11px;border-radius:3px;flex:0 0 auto;}
.cu-rep-leg b{font-weight:600;}

/* ── CORRECTION LISIBILITÉ 08/07/2026 ──────────────────────────────────────
   La page est intégrée au gabarit commun ; son contenu vit dans <form id="cu-form">.
   Or css.css pose « form{color:#004e9d} » (bleu marine) -> tout le texte NON
   coloré en héritait, illisible sur fond sombre. Et le bouton « Voir le détail »
   (un <a>) recevait un rouge de lien qui écrasait son color:#fff -> rouge sur
   rouge. On rétablit les couleurs du thème, scopé au comparateur. */
#cu-form{color:var(--cu-texte);}                                     /* texte courant lisible (gris clair), fini le bleu hérité */
#cu-form a:not(.cu-btn):not(.cu-btn-offre){color:var(--cu-violet);}  /* liens = rouge doux du thème */
#cu-form .cu-btn{color:#fff !important;}                             /* « Voir le détail » : BLANC sur fond rouge (fini le rouge sur rouge) */
#cu-form .cu-repartition small,
#cu-form .cu-decomp .cu-mode{color:var(--cu-violet);}               /* libellés d'accent en rouge du thème */

/* ══════════ SIMULATEUR DE PROJET (v1 — 08/07/2026) ══════════
   Zone d'entrée en langage naturel (en haut, à la place des anciennes stats).
   Panneau sobre, accent rouge à gauche ; tous les textes sont colorés
   explicitement (la zone est HORS du <form>, pas de bleu hérité à corriger). */
.cu-simulateur{
  background:linear-gradient(180deg,var(--cu-panel),var(--cu-panel2));
  border:1px solid var(--cu-border);border-left:3px solid var(--cu-neon);
  border-radius:var(--cu-radius);padding:15px 18px;margin:0 0 18px;
}
/* ── Titre GEO « Comment comparer ? » + 2 parcours numérotés (badges) ── */
.cu-comment{
  text-align:center;margin:2px 0 22px;color:var(--cu-neon);
  font-family:'Space Grotesk',Arial,sans-serif;font-size:21px;font-weight:700;line-height:1.3;
}
/* même parade que .cu-res-titre : bat #texte h2{color:var(--m-txt)!important} du gabarit */
#texte .cu-comment{color:var(--cu-neon)!important;}
.cu-comment span{display:block;margin-top:3px;color:var(--cu-texte);font-weight:400;font-size:15px;}
.cu-comment b{color:var(--cu-lavande);font-weight:700;white-space:nowrap;}
/* chaque parcours = bloc en position relative ; le numéro est un BADGE posé
   PAR-DESSUS le coin haut-gauche (aucune indentation du contenu -> le tableau
   de résultats garde toute sa largeur). Offsets contenus dans la marge de
   .ia-page -> pas de débordement horizontal. */
.cu-choix{position:relative;margin:0 0 20px;}
.cu-choix-num{
  position:absolute;top:-14px;left:-6px;z-index:5;
  width:46px;height:46px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#e5484d,#b0343a);color:#fff;
  font-family:'Space Grotesk',Arial,sans-serif;font-weight:800;font-size:25px;line-height:1;
  box-shadow:0 6px 16px rgba(229,72,77,.45);border:3px solid var(--cu-fond);
}
/* on décale seulement les TITRES pour dégager le badge (le reste reste plein cadre) */
.cu-choix .cu-simu-tete{padding-left:26px;}
.cu-choix .cu-manuel-titre{padding-left:26px;}
@media (max-width:620px){
  .cu-comment{font-size:17px;}
  .cu-comment span{font-size:13px;}
  .cu-choix-num{width:36px;height:36px;border-radius:11px;font-size:20px;top:-12px;left:-6px;}
  .cu-choix .cu-simu-tete{padding-left:22px;}
  .cu-choix .cu-manuel-titre{padding-left:22px;}
}
.cu-simu-tete{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px;}
.cu-simu-tete h2{margin:0;color:var(--cu-lavande);font-size:25px;line-height:1.15;font-family:'Space Grotesk',Arial,sans-serif;}
.cu-simu-tete p{margin:3px 0 0;color:var(--cu-sourdine);font-size:12.5px;}
.cu-simu-badge{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:20px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;background:var(--cu-neon);color:#fff;vertical-align:middle;}
.cu-simu-zone{
  width:100%;box-sizing:border-box;resize:vertical;min-height:52px;
  background:var(--cu-nuit);border:1px solid var(--cu-border);border-radius:10px;
  color:var(--cu-lavande);font-family:inherit;font-size:14px;line-height:1.45;padding:10px 12px;
}
.cu-simu-zone:focus{outline:none;border-color:var(--cu-neon);}
.cu-simu-zone::placeholder{color:var(--cu-sourdine);}
.cu-simu-ligne{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;}
.cu-simu-complex{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:12.5px;color:var(--cu-texte);}
.cu-simu-complex>span{color:var(--cu-sourdine);}
.cu-simu-complex label{display:inline-flex;align-items:center;gap:5px;cursor:pointer;}
.cu-simu-complex input{accent-color:var(--cu-neon);}
.cu-simu-btn{
  background:linear-gradient(45deg,var(--cu-violet-fonce),var(--cu-neon));color:#fff;
  border:none;border-radius:9px;padding:10px 18px;font-family:inherit;font-size:13px;font-weight:700;
  cursor:pointer;transition:filter .15s;
}
.cu-simu-btn:hover{filter:brightness(1.12);}
.cu-simu-detecte{margin-top:10px;padding:9px 12px;border-radius:8px;background:rgba(229,72,77,.10);border:1px solid var(--cu-border);font-size:12.5px;color:var(--cu-texte);}
.cu-simu-detecte b{color:var(--cu-lavande);}
/* invitation « à préciser vous-même » (usage nommé mais non chiffrable) */
.cu-simu-apreciser{display:block;margin-top:7px;color:var(--cu-jaune);font-size:12px;line-height:1.45;}
.cu-simu-apreciser b{color:var(--cu-jaune);}
/* bouton « Lancer la comparaison » interne au simulateur (révélé après analyse) */
.cu-simu-lancer{margin-top:12px;}
/* stats déplacées en bas : un peu d'air au-dessus */
.cu-stats-bas{margin-top:10px;}