/* ============================================================================
   box-theme.css — THÈME DE LA PARTIE BOX INTERNET DU SITE PUBLIC (dossier /box/)
   ============================================================================
   CONVENTION COULEURS DU SITE :
     - partie MOBILE / site historique : GRIS   (css/theme-moderne.css)
     - partie IA (/ai/)                : VIOLETS (ai/ia-theme.css)
     - partie BOX (ce dossier /box/)   : BLEUS — nuit bleue, bleu roi, cyan
       néon (la palette bleue initialement dessinée pour la partie IA,
       naturelle pour l'internet/la fibre)
   Ce fichier est chargé PAR-DESSUS le thème gris via le crochet $css_extra
   du header commun (voir navig-axxa/header-niveau1-5684232.php) : le menu et
   le pied de page restent aux couleurs du site, le CONTENU passe en bleu.

   Toutes les classes sont préfixées « box- » pour ne jamais entrer en
   conflit avec le reste du site. Fichier créé le 04/07/2026 sur le modèle
   de ai/ia-theme.css (voir la checklist « Pièges du footer » du README
   admin : float:none, compteur 25/40px, cas « — » des données vides).
   ============================================================================ */

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

/* ---- LA PALETTE DE BLEUS (référence unique de la partie box) ---- */
:root{
  --box-nuit:#1c1c22;              /* fond le plus profond (nuit bleue)      */
  --box-panel:#24242a;             /* fond des panneaux (nuit +1)            */
  --box-panel2:#2a2a32;            /* fond des cartes au survol / éléments   */
  --box-piste:#3a3a44;             /* piste des curseurs (bleu sombre)       */
  --box-border:rgba(255,255,255,.18);  /* bordures bleu translucide           */
  --box-neon:#e5484d;              /* ACCENT PRINCIPAL : cyan néon           */
  --box-bleu:#f07478;              /* accent secondaire : titres, liens      */
  --box-ciel:#f0f0f0;              /* texte mis en avant (ciel clair)        */
  --box-texte:#c0c0c8;             /* texte courant                          */
  --box-sourdine:#8888a0;          /* texte secondaire / libellés            */
  --box-vert:#00c853;              /* promo active                           */
  --box-rouge:#f44336;             /* prix barré                             */
}

/* ---- CORRECTIF LAYOUT (voir _guides/README-ADMIN.md, « Pièges du footer ») ----
   css.css (l.600) flotte #texte à gauche (layout 2 colonnes du site
   historique). Sans sidebar ni clear, le footer remonterait se peindre
   par-dessus les cartes. Portée limitée aux pages box (cette feuille
   n'est chargée que par elles). */
#texte{float:none;}

/* ---- ENVELOPPE DE LA PARTIE BOX ---- */
.box-page{
  background:linear-gradient(180deg, var(--box-nuit) 0%, #1c1c22 55%, var(--box-nuit) 100%);
  border:1px solid var(--box-border);
  border-radius:16px;
  padding:22px 24px 30px;
  font-family:'Space Grotesk',Arial,sans-serif;
}

/* titre : ciel clair avec halo bleu/cyan (sélecteur #texte .box-titre pour
   battre la règle « #texte h1 » du thème gris) */
#texte .box-titre,
.box-titre{
  color:var(--m-red-soft, #f07478) !important; /* H1 en ROUGE DOUX partout (13/07/2026, demande Nicolas — même couleur que les H1 du thème gris) */
  font-family:'Space Grotesk',sans-serif;
  letter-spacing:1px;font-size:22px;margin:4px 0 10px;
  text-shadow:none;
}
/* page BONS PLANS uniquement (.titre-bp, 12/07/2026, demande Nicolas) :
   même taille de police que le H1 des bons plans mobiles (30px) */
#texte .box-titre.titre-bp,
.box-titre.titre-bp{ font-size:30px; }
.box-intro{color:var(--box-texte);font-size:13px;line-height:1.6;margin:0 0 20px;}

/* ============================================================
   BLOC FILTRES (même organisation que la partie IA)
   ============================================================ */
.box-filtres-bloc{
  background:var(--box-panel);
  border:1px solid var(--box-border);
  border-radius:14px;
  padding:12px 16px 12px; /* compacté le 09/07/2026 (filtres sur une ligne : le grand rectangle ne se justifiait plus) */
  margin:0 0 20px;
}
.box-filtres-titre{
  font-family:'Space Grotesk',sans-serif;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--box-neon);
  margin:0 0 8px; /* resserré le 09/07/2026 (bloc compacté) */
  display:flex;align-items:center;gap:6px;
}
.box-filtres-titre::before{content:">_";opacity:.6;}
/* ── FILTRES SUR UNE LIGNE (09/07/2026, demande Nicolas) ──
   Le formulaire devient un flex : pastilles techno + case forfait +
   sélecteur opérateur + curseur budget se suivent sur la MÊME rangée
   (le budget prend la place restante). flex-wrap = repli propre en
   étroit ; les margins verticaux des 3 anciens sous-blocs sont annulés
   et le trait au-dessus du curseur n'a plus de sens sur une ligne. */
#form-box-filtres{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;}
#form-box-filtres .box-types,
#form-box-filtres .box-selects{margin:0;flex:0 1 auto;}
#form-box-filtres .box-sliders{border-top:none;padding:0;margin:0;flex:1 1 240px;min-width:230px;}
#form-box-filtres .box-slider-grp{max-width:none;}

/* pastilles à cocher (technologie ADSL / Fibre) */
.box-types{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px;}
.box-types label{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px;
  border:1px solid var(--box-border);
  border-radius:20px;
  background:rgba(255,255,255,.05);
  color:#e9f2ff;font-size:12px;cursor:pointer;
  transition:all .15s;
}
.box-types label:hover{border-color:var(--box-neon);color:#fff;background:rgba(229,72,77,.08);}
.box-types input[type=checkbox]{accent-color:var(--box-neon);width:14px;height:14px;cursor:pointer;}
.box-types label:has(input:checked){border-color:var(--box-neon);background:rgba(229,72,77,.12);color:#fff;}

/* filtre « Streaming inclus » (10/07/2026) : sa propre ligne dans le form flex */
#form-box-filtres .box-streaming{flex:1 1 100%;margin:0;align-items:center;}
.box-streaming-lbl{
  font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--box-neon);margin-right:4px;
}

/* select opérateur + bouton réinitialiser */
.box-selects{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 14px;}
.box-selects select{
  padding:7px 12px;
  border:1px solid var(--box-border);
  border-radius:8px;
  background:var(--box-nuit);
  color:#e9f2ff;font-size:13px;cursor:pointer;
  transition:border-color .15s;
}
.box-selects select:hover,.box-selects select:focus{border-color:var(--box-neon);outline:none;color:#fff;}
.box-selects option{background:var(--box-nuit);}
/* Bouton « Réinitialiser » : c'est un <a href> dans <section id="texte">, donc
   la règle historique « section a:link{color:#000} » (css.css l.132, spécificité
   0,0,1,2) le repeignait en NOIR par-dessus le color de .box-reset (0,0,1,0).
   On préfixe par #texte (un ID gagne) pour rétablir le bleu ciel voulu — même
   parade que pour .box-titre. */
#texte .box-reset,
.box-reset{
  padding:7px 14px;color:var(--box-bleu);font-size:12px;
  border:1px solid var(--box-border);border-radius:8px;
  background:transparent;cursor:pointer;
  text-decoration:none;transition:all .15s;font-family:inherit;
}
#texte .box-reset:hover,
.box-reset:hover{background:rgba(229,72,77,.10);border-color:var(--box-neon);color:var(--box-neon);}

/* ============================================================
   DOUBLE-CURSEUR (budget) — même implémentation maison que la
   partie IA : deux <input type=range> superposés, piste peinte
   via les variables --a/--b posées par le JS de la page.
   ============================================================ */
.box-sliders{
  display:flex;flex-wrap:wrap;gap:26px;
  padding:16px 2px 6px;
  border-top:1px solid var(--box-border);
}
.box-slider-grp{flex:1;min-width:200px;max-width:420px;}
.box-slider-lbl{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--box-sourdine);margin-bottom:6px;display:block;font-family:'Space Grotesk',sans-serif;}
.box-slider-vals{display:flex;justify-content:space-between;font-size:12px;color:var(--box-sourdine);margin-bottom:8px;}
.box-slider-vals b{color:var(--box-neon);font-family:monospace;font-weight:700;}

.box-range{position:relative;height:22px;}
.box-range .piste{
  position:absolute;left:0;right:0;top:8px;height:6px;border-radius:3px;
  background:linear-gradient(to right,
    var(--box-piste) 0%, var(--box-piste) var(--a,0%),
    var(--box-neon) var(--a,0%), var(--box-neon) var(--b,100%),
    var(--box-piste) var(--b,100%), var(--box-piste) 100%);
}
.box-range input[type=range]{
  position:absolute;left:0;right:0;top:0;width:100%;height:22px;
  -webkit-appearance:none;appearance:none;background:none;pointer-events:none;margin:0;
}
.box-range input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;pointer-events:auto;
  width:17px;height:17px;border-radius:50%;
  background:var(--box-nuit);
  border:2.5px solid var(--box-neon);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  cursor:pointer;margin-top:3px;
}
.box-range input[type=range]::-moz-range-thumb{
  pointer-events:auto;
  width:13px;height:13px;border-radius:50%;
  background:var(--box-nuit);
  border:2.5px solid var(--box-neon);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  cursor:pointer;
}
.box-range input[type=range]:focus{outline:none;}
.box-range input[type=range]:focus::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(229,72,77,.2);}

/* compteur de résultats : même échelle que le bouton « voir les X offres »
   du comparateur mobile (#recherchefinal : mots 25px, nombre 40px, blanc
   gras sur pastille arrondie + halo) — version bleue de la partie box */
.box-total{
  display:table;               /* pastille ajustée au contenu, centrée */
  margin:0 auto 18px;
  padding:8px 36px;
  text-align:center;
  background:linear-gradient(135deg,var(--box-neon) 0%,var(--box-bleu) 100%);
  color:#fff;
  border-radius:12px;
  font-size:25px;font-weight:800;
  font-family:'Space Grotesk',Arial,sans-serif;
  letter-spacing:.5px;
  box-shadow:0 4px 18px -6px rgba(229,72,77,.55);
}
.box-total b{font-size:40px;color:#fff;vertical-align:-2px;padding-right:4px;}
/* note sous le compteur quand le filtre « Avec forfait mobile » est actif */
.box-total-note{
  text-align:center;margin:-8px auto 18px;max-width:640px;
  color:var(--box-vert);font-size:12px;line-height:1.5;
}

/* ============================================================
   CARTES BOX (une ligne-grille par box)
   rangée 1 : CHAPEAU rouge pleine largeur (nom de l'offre en
              capitales — harmonisation site du 09/07/2026, même
              gabarit que le .forti des bons plans mobiles)
   rangée 2 : logo | opérateur | (espace) | techno | promo | prix
   rangée 3 : détail de l'offre + lien de sortie
   NB : l'ancienne cellule .c-nom (col 3) a été SUPPRIMÉE du PHP,
   le nom ne vit plus que dans le chapeau ; la colonne 3 (1fr)
   reste dans la grille comme espace souple entre les cellules.
   ============================================================ */
.box-carte{
  background:var(--box-panel);
  border:1px solid var(--box-border);
  border-radius:12px;
  padding:14px 18px;
  margin:0 0 8px;
  display:grid;
  grid-template-columns: 96px 100px 1fr 100px 140px 118px; /* col1 élargie 07/07: logo comme les forfaits mobiles */
  grid-template-rows:auto auto auto;
  gap:0 12px;
  align-items:center;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.box-carte:hover{border-color:rgba(229,72,77,.4);box-shadow:0 4px 22px rgba(229,72,77,.10);background:var(--box-panel2);}
/* le chapeau « sort » du padding de la carte (marges négatives) pour
   peindre le bandeau bord à bord, arrondi raccord avec la carte */
.box-carte .c-chapeau{
  grid-column:1/-1;
  grid-row:1;
  margin:-14px -18px 12px;
  padding:8px 14px;
  min-height:40px;
  box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  background:var(--box-neon);
  color:#fff;
  font-weight:800;
  font-size:16px;
  line-height:1.3;
  letter-spacing:.5px;
  text-transform:uppercase;
  text-align:center;
  border-radius:11px 11px 0 0;
}
.box-carte .c-logo{grid-column:1;}
.box-carte .c-operateur{grid-column:2;font-weight:700;color:var(--box-bleu);font-size:11px;text-transform:uppercase;letter-spacing:.5px;}
.box-carte .c-techno{grid-column:4;text-align:center;}
.box-carte .c-promo{grid-column:5;text-align:center;font-size:11px;color:var(--box-sourdine);}
.box-carte .c-promo .fin{display:block;font-size:10px;}
.box-carte .c-prix{grid-column:6;text-align:right;}
.box-carte .c-prix strong{color:var(--box-neon);font-size:18px;display:block;}
.box-carte .c-prix strong small{font-size:11px;font-weight:400;}
.box-carte .c-prix .barre{color:var(--box-sourdine);font-size:12px;text-decoration:line-through;}
/* ── répartition « dans la longueur » (08/07/2026, maquette Nicolas) ──
   Rangée 1 : ② TV & streaming | ③ Ajouter un forfait | ④ Total par mois
   Rangée 2 : ① Détails de l'offre en PLEINE LARGEUR (le texte court sur
   toute la carte) avec les boutons (Voir l'offre / PDF / Comparer) empilés
   à droite. L'ordre VISUEL est piloté par `order` (le DOM garde ① en tête). */
.box-carte .c-desc{
  grid-column:1/-1;
  display:flex;flex-wrap:wrap;gap:16px;align-items:stretch;
  padding-top:10px;margin-top:8px;
  border-top:1px solid rgba(255,255,255,.10);
  line-height:1.6;
}
.c-desc-detail{
  order:4;
  flex:1 1 100%;max-width:none;
  padding:10px 14px;
  background:rgba(229,72,77,.05);
  border:1px solid rgba(229,72,77,.18);
  border-radius:8px;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:"titre actions" "texte actions";
  column-gap:20px;
  align-items:start;
}
.c-desc-detail .c-bloc-titre{grid-area:titre;}
.c-desc-detail .c-desc-text{grid-area:texte;}
.c-desc-detail .c-desc-actions{grid-area:actions;}
.c-desc-text{font-size:12px;color:var(--box-texte);margin:0;line-height:1.6;}
/* boutons empilés à droite du bloc détails, tous à la même largeur */
.c-desc-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:0;min-width:150px;}
.c-desc-actions .box-btn-offre,
.box-carte .c-desc .c-desc-actions a.box-btn-offre{float:none;margin-left:0;text-align:center;}
.c-desc-actions .box-pdf-link{text-align:center;}
.c-desc-actions .cmp-pick{justify-content:center;}
.c-desc-forfaits{flex:1 1 300px;margin-left:auto;}
@media(max-width:900px){
  .box-carte .c-desc{flex-direction:column;}
  .c-desc-detail{flex:1;max-width:none;}
  .c-desc-forfaits{flex:none;width:100%;margin-left:0;}
}
@media(max-width:600px){
  /* écran étroit : le bloc détails redevient vertical, boutons en rangée dessous */
  .c-desc-detail{display:block;}
  .c-desc-actions{flex-direction:row;flex-wrap:wrap;align-items:center;margin-top:8px;min-width:0;}
}

/* pastille logo (initiales si pas d'image) */
.box-logo-ph{
  width:84px;height:46px;border-radius:10px;
  background:rgba(229,72,77,.07);
  border:1px solid var(--box-border);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--box-neon);
  font-family:'Space Grotesk',sans-serif;
}
.box-logo-img{width:84px;max-height:46px;object-fit:contain;background:#fff;padding:6px 9px;border-radius:10px;border:1px solid var(--box-border);box-sizing:border-box;}

/* badges technologie */
.box-badge-type{display:inline-block;padding:3px 9px;border-radius:10px;font-size:10px;font-weight:600;white-space:nowrap;}
.box-badge-type.adsl{background:rgba(255,255,255,.16);color:var(--box-bleu);}
.box-badge-type.fibre{background:rgba(229,72,77,.14);color:var(--box-neon);}

/* badge promo */
.box-badge-promo{display:inline-block;padding:2px 9px;border-radius:10px;font-size:10px;font-weight:700;background:rgba(0,200,83,.15);color:var(--box-vert);}

/* bouton « Voir l'offre » (05/07/2026) : lien résolu par lien-offre-box.php
   (lien en dur box > affiliation opérateur > site officiel), TOUJOURS
   visible — flotte à droite de la ligne détail. Sélecteur doublé pour
   battre la règle « .box-carte .c-desc a » plus spécifique. */
.box-btn-offre,
.box-carte .c-desc a.box-btn-offre{
  float:right;margin-left:14px;
  display:inline-block;padding:8px 16px;border-radius:8px;
  background:linear-gradient(45deg,#0b8f43,#00c853);
  color:#fff !important;font-size:12px;font-weight:700;text-decoration:none;
  transition:filter .15s;white-space:nowrap;
}
.box-btn-offre:hover{filter:brightness(1.15);}
/* pas encore de lien saisi : visible mais neutralisé (s'allume tout seul
   dès qu'un lien en dur / une affiliation est renseigné dans l'admin) */
.box-btn-offre.inactif,
.box-carte .c-desc a.box-btn-offre.inactif{
  background:linear-gradient(45deg,#274a38,#2e6b4c);
  opacity:.75;cursor:default;
}

/* lien PDF fiche offre */
.box-pdf-link{
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 12px;border-radius:8px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--box-border);
  color:var(--box-bleu);font-size:11px;font-weight:600;white-space:nowrap;
  text-decoration:none;transition:all .15s;
}
.box-pdf-link:hover{background:rgba(229,72,77,.14);border-color:var(--box-neon);color:var(--box-neon);}

/* comparateur box : case « Comparer » dans le thème bleu nuit */
.box-carte .cmp-pick{
  background:var(--box-panel2);border-color:var(--box-border);
  color:var(--box-texte);
}
.box-carte .cmp-pick:hover{border-color:var(--box-neon);background:var(--box-panel);}
.box-carte .cmp-pick span{color:var(--box-neon) !important;}
.box-carte .cmp-pick input{accent-color:var(--box-neon);}
.box-carte.cmp-selected{border-color:var(--box-neon) !important;box-shadow:inset 0 0 0 1px var(--box-neon);}

/* ============================================================
   LE PONT BOX <-> FORFAITS MOBILES (case « Avec forfait mobile »)
   ============================================================ */
/* la pastille du filtre : mise en avant (vert = économies) */
.box-types .box-avantage-toggle{
  border-color:rgba(0,200,83,.4);
  background:rgba(0,200,83,.06);
}
.box-types .box-avantage-toggle:hover{border-color:var(--box-vert);background:rgba(0,200,83,.12);}
.box-types .box-avantage-toggle:has(input:checked){border-color:var(--box-vert);background:rgba(0,200,83,.16);}
.box-types .box-avantage-toggle input[type=checkbox]{accent-color:var(--box-vert);}
.box-types .box-avantage-toggle small{color:var(--box-sourdine);font-size:10px;}

/* le bloc « forfaits remisés » dans la carte (colonne droite de c-desc) */
.c-desc-forfaits{
  padding:10px 12px;
  background:rgba(0,200,83,.05);
  border:1px solid rgba(0,200,83,.18);
  border-radius:8px;
  font-size:12px;color:var(--box-texte);line-height:1.7;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px 16px;
}
.c-desc-forfaits .c-forfaits-titre{
  grid-column:1/-1;
  display:block;font-weight:700;color:var(--box-vert);
  font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;
}
.box-forfait-ligne{display:flex;align-items:center;flex-wrap:nowrap;gap:4px;white-space:nowrap;}
.box-forfait-ligne s{color:var(--box-sourdine);font-size:11px;}
.box-forfait-ligne b{color:#fff;}
.box-forfait-ligne small{color:var(--box-sourdine);font-size:10px;}
.box-remise{
  display:inline-block;padding:2px 10px;
  border-radius:10px;font-size:10px;font-weight:800;
  background:var(--box-vert);color:#fff;white-space:nowrap;letter-spacing:.3px;
}
.c-desc-forfaits.c-forfaits-aucun{
  display:block;
  background:transparent;border-style:dashed;border-color:var(--box-border);
  color:var(--box-sourdine);font-size:11px;
}

/* ============================================================
   LA RANGÉE DE 4 BLOCS SOUS CHAQUE BOX (08/07/2026)
   ① Détails de l'offre (enfin titré) | ② TV & streaming inclus |
   ③ Ajouter un forfait mobile | ④ Total par mois
   ============================================================ */
.c-bloc-titre{
  display:block;font-weight:700;color:var(--box-neon);
  font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;
}
.c-desc-services,.c-desc-addff,.c-desc-total{
  padding:10px 12px;border-radius:8px;box-sizing:border-box;
  background:var(--box-panel2);border:1px solid var(--box-border);
  font-size:12px;color:var(--box-texte);line-height:1.5;
}
/* rangée 1 (ordre visuel via `order`, cf. .c-desc) : les trois blocs se
   répartissent TOUTE la largeur de la carte (Ajouter grandit 2× plus vite) */
.c-desc-services{order:1;flex:1 1 200px;}
.c-desc-addff{order:2;flex:2 1 300px;}
.c-desc-total{order:3;flex:0 0 170px;margin-left:auto;text-align:center;border-color:rgba(229,72,77,.35);}

/* ② pastilles services — couleurs de MARQUE (Netflix, Prime…) : c'est de la
   DONNÉE (identité des services), pas une entorse au thème gris/rouge */
.box-svc-liste{display:flex;flex-wrap:wrap;gap:6px;}
.box-svc{
  display:inline-block;padding:3px 10px;border-radius:12px;
  font-size:10.5px;font-weight:800;letter-spacing:.3px;white-space:nowrap;
  background:#15151b;border:1px solid var(--box-border);
}
.box-svc.svc-netflix{color:#e50914;}
.box-svc.svc-prime{color:#00a8e1;}
.box-svc.svc-apple{color:#f0f0f0;}
.box-svc.svc-disney{color:#7ec8ff;}
.box-svc.svc-canal{color:#fff;}
.box-svc.svc-neutre{color:var(--box-texte);}
.box-svc.svc-sport{color:var(--box-vert);border-color:rgba(0,200,83,.35);}
.box-svc-aucun,.bx-addff-aucun{color:var(--box-sourdine);font-size:11px;}

/* ③ la case « Avec un forfait … » + la liste des forfaits remisés (radios) */
.bx-addff-pick{display:flex;align-items:flex-start;gap:7px;cursor:pointer;font-weight:600;color:var(--box-texte);}
.bx-addff-pick input{accent-color:var(--box-vert);margin-top:3px;}
.bx-addff-pick small{color:var(--box-sourdine);font-weight:400;}
.bx-ff-liste{margin-top:8px;display:flex;flex-direction:column;gap:5px;}
.bx-ff-liste[hidden]{display:none;}   /* l'attribut hidden doit battre le display:flex */
.bx-ff-choix{white-space:normal;flex-wrap:wrap;cursor:pointer;padding:4px 6px;border-radius:6px;border:1px solid transparent;}
.bx-ff-choix:hover{background:rgba(0,200,83,.07);}
.bx-ff-choix:has(input:checked){border-color:rgba(0,200,83,.45);background:rgba(0,200,83,.10);}
.bx-ff-choix input{accent-color:var(--box-vert);}

/* ④ le total (accent rouge, comme le prix de la box) */
.bx-total-prix{color:var(--box-neon);font-size:15px;font-weight:800;line-height:1.2;}
.bx-total-prix b{font-size:24px;}
.bx-total-detail{color:var(--box-sourdine);font-size:10.5px;margin-top:5px;line-height:1.4;}

@media(max-width:900px){
  .c-desc-services,.c-desc-addff,.c-desc-total{flex:none;width:100%;margin-left:0;}
  .c-desc-total{text-align:left;}
}

/* aucun résultat */
.box-vide{text-align:center;color:var(--box-sourdine);padding:60px 0;font-size:13px;letter-spacing:1px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  /* le chapeau garde la rangée 1 (règle de base) ; les cellules descendent d'un cran */
  .box-carte{grid-template-columns:74px 1fr 104px;grid-template-rows:auto auto auto auto;}
  .box-carte .c-logo{grid-column:1;grid-row:2;}
  .box-carte .c-operateur{display:none;}
  .box-carte .c-techno{grid-column:2;grid-row:2;text-align:left;}
  .box-carte .c-promo{grid-column:1/2;grid-row:3;text-align:left;}
  .box-carte .c-prix{grid-column:2/-1;grid-row:3;text-align:left;}
  .box-carte .c-desc{grid-row:4;}
}
@media(max-width:600px){
  .box-page{padding:14px 12px 20px;}
  .box-carte{grid-template-columns:1fr;}
  .box-carte .c-logo{display:none;}
  .box-carte .c-chapeau{font-size:14px;}
  .box-carte .c-techno{grid-column:1;grid-row:2;text-align:left;}
  .box-carte .c-promo{grid-column:1;grid-row:3;text-align:left;}
  .box-carte .c-prix{grid-column:1;grid-row:4;text-align:left;}
  .box-carte .c-desc{grid-row:5;}
  .box-sliders{flex-direction:column;gap:18px;}
  .c-desc-forfaits{grid-template-columns:1fr;}
}

/* ============================================================
   BONS PLANS BOX (box/bons-plans-box.php, 06/07/2026)
   Cartes des box en promotion — gabarit inspiré des .cadpro de
   bonsplansforfaits.php, aux couleurs de la section (nuit bleue).
   ============================================================ */
.bpbox-grille{display:flex;flex-wrap:wrap;gap:18px;margin:22px 0;}
.bpbox-carte{
  flex:1 1 280px;max-width:340px;min-width:250px;
  background:var(--box-panel);border:1px solid var(--box-border);
  border-radius:14px;padding:18px;text-align:center;
  transition:border-color .15s, transform .15s;
}
.bpbox-carte:hover{border-color:var(--box-neon);transform:translateY(-3px);}
/* CHAPEAU ROUGE (09/07/2026, harmonisation site) : le titre devient le bandeau
   rouge en capitales en tête de carte (même gabarit que le .forti des bons
   plans mobiles). Marges négatives = bord à bord malgré le padding:18px ;
   le PHP place ce div en PREMIER dans la carte (avant le badge PROMO). */
.bpbox-titre{
  margin:-18px -18px 12px;
  padding:8px 14px;
  min-height:40px;
  box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  background:var(--box-neon);
  color:#fff;
  font-size:16px;font-weight:800;line-height:1.3;
  letter-spacing:.5px;text-transform:uppercase;
  border-radius:13px 13px 0 0;
}
.bpbox-ope{color:var(--box-sourdine);font-size:12px;margin-bottom:10px;}
.bpbox-ope img{max-height:36px;max-width:110px;border-radius:6px;background:#fff;padding:2px 6px;}
.bpbox-badge{display:inline-block;background:var(--box-vert);color:#fff;font-size:11px;
  font-weight:800;border-radius:20px;padding:2px 10px;margin-bottom:8px;letter-spacing:.5px;}
.bpbox-prix{color:var(--box-neon);font-size:34px;font-weight:800;line-height:1;}
.bpbox-prix small{font-size:13px;color:var(--box-texte);font-weight:400;}
.bpbox-barre{color:var(--box-rouge);text-decoration:line-through;font-size:14px;margin-left:8px;}
.bpbox-info{color:var(--box-texte);font-size:12.5px;line-height:1.5;margin:10px 0;}
.bpbox-fin{color:var(--box-sourdine);font-size:11.5px;margin-bottom:12px;}
.bpbox-btn{display:inline-block;background:var(--box-neon);color:#06121f !important;
  font-weight:800;font-size:13px;border-radius:10px;padding:9px 18px;text-decoration:none;}
.bpbox-btn:hover{filter:brightness(1.15);color:#06121f !important;}
.bpbox-vide{color:var(--box-texte);background:var(--box-panel);border:1px dashed var(--box-border);
  border-radius:14px;padding:26px;text-align:center;margin:22px 0;}

/* ============================================================
   BONS PLANS BOX : case « Comparer » + bloc « Avec un forfait
   mobile » (08/07/2026) — mêmes mécanismes que le comparateur,
   portés sur les cartes verticales .bpbox-carte.
   ============================================================ */
.bpbox-carte .cmp-pick{
  background:var(--box-panel2);border-color:var(--box-border);
  color:var(--box-texte);margin-top:12px;
}
.bpbox-carte .cmp-pick:hover{border-color:var(--box-neon);background:var(--box-panel);}
.bpbox-carte .cmp-pick span{color:var(--box-neon) !important;}
.bpbox-carte .cmp-pick input{accent-color:var(--box-neon);}
.bpbox-carte.cmp-selected{border-color:var(--box-neon) !important;box-shadow:inset 0 0 0 1px var(--box-neon);}
/* le bloc « Avec un forfait … » : rectangle aligné à gauche dans la carte centrée */
.bpbox-addff{
  margin-top:14px;padding:10px 12px;border-radius:8px;box-sizing:border-box;
  background:var(--box-panel2);border:1px solid var(--box-border);
  font-size:12px;color:var(--box-texte);line-height:1.5;text-align:left;
}
.bpbox-addff .c-desc-total{margin:10px 0 0;flex:none;width:auto;}
/* le bouton « Profiter de l'offre » vit EN DERNIER dans la carte (sous
   « Comparer », 08/07/2026) : sa rangée l'isole sur sa propre ligne */
.bpbox-btn-rangee{margin-top:12px;}

/* ============================================================
   MODALE « Comparer mes box » (08/07/2026)
   Les cartes verticales .bpbox-carte sont réutilisées DANS la grille
   .cmp-cartes de la modale (theme-moderne.css). On neutralise leur flex
   (flex:1 1 280px / min-width:250px / max-width:340px) pour qu'elles
   remplissent proprement la cellule de grille — sinon le min-width fait
   déborder la modale 2 colonnes en mobile.
   ============================================================ */
.cmp-cartes .bpbox-carte{flex:none;min-width:0;max-width:none;width:auto;margin:0;}