/* ═══════════════════════════════════════════════════════════
THEME MODERNE — bestforfait.com
Override épuré gris clair · à charger APRÈS css.css et jquery-ui.css
Pour désactiver : retirer la ligne dans header-niveau1
═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{
--m-bg: #1c1c22; /* fond gris foncé */
--m-bg2: #ececf0; /* gris clair (menus, titres) */
--m-line: #3a3a44; /* bordures foncées */
--m-track: #3a3a44; /* rail slider foncé */
--m-handle: #d0d0d8; /* poignée gris clair */
--m-txt: #f0f0f0; /* texte blanc */
--m-txt-2: #c0c0c8; /* gris clair */
--m-txt-3: #8888a0; /* gris moyen */
--m-accent: #d0d0d8; /* accent clair */
--m-red: #e5484d; /* rouge accent */
--m-red2: #c0393e; /* rouge survol */
--m-red-soft: #f07478; /* rouge doux (liens, prix) */
--m-card: #2a2a32; /* fond carte */
--m-radius: 10px;
}
/* ── Police globale ── */
body, form, input, select, button, textarea,
#menu li a, .guideachat .texte, .bornes_casecadre,
#recherchefinal, footer {
font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif !important;
}
body{ color:var(--m-txt); }
.head452{ background:#1c1c22 !important; }
.head452 img{ border-radius:14px !important; }
/* Opérateurs (accueil) — AU REPOS : texte BLANC (--m-txt), fond TRANSPARENT
(on laisse voir le gris d'origine du #contenu dessous). */
.bande_ope a{ color:var(--m-txt) !important; }
/* AU SURVOL : le rectangle (blanc #F1F1F1 dans css.css) passe au ROUGE --m-red,
coins arrondis, et le texte (nom + "N offres") passe au NOIR.
Le fond rouge est scopé pour battre css.css .bande_ope li:hover{background:#F1F1F1}. */
.bande_ope li{ border-radius:var(--m-radius); transition:background .15s ease; }
.bande_ope li:hover{ background:var(--m-red) !important; border-radius:var(--m-radius) !important; }
/* Texte NOIR au survol — scopé #texte + tous les états du lien pour battre
.bande_ope a (--m-txt), section a et a:link/a:visited (1 ID > toute classe). */
#texte .bande_ope li:hover a,
#texte .bande_ope li:hover a:link,
#texte .bande_ope li:hover a:visited,
#texte .bande_ope li:hover a:hover,
#texte .bande_ope li:hover p{ color:#000 !important; }
/* LARGEUR CONTENUE (06/07/2026, demande Nicolas) : css.css met #contenu à
max-width:80% -> sur grand écran (>1600) le site s'étalait démesurément
(≈1540px à 1900). On borne à 1200px (comme footer .centre:1200) : le contenu
reste centré et « proportionné » quelle que soit la largeur d'écran. */
#contenu{ background:#24242a !important; max-width:1200px !important; }
/* LOGO CALÉ À GAUCHE (06/07/2026) : css.css centre le contenu du
(text-align:center) puis #logo{left:-500px} le décale — position qui DÉPEND
de la largeur de fenêtre. Résultat : sur grand écran le logo « dérivait »
vers la droite et venait CHEVAUCHER l'icône Accueil (1er onglet du menu, lui
centré). On supprime le centrage du header et on remet #logo à left:0 : le
logo reste ancré ~30px du bord gauche quelle que soit la largeur, dégagé du
menu. (Le header ne contient que #logo, aucun autre contenu impacté.) */
header{ text-align:left !important; }
/* LOGO CALÉ SUR LA BANDE DU MENU (06/07/2026, demande Nicolas : « pas totalement
à gauche, juste avant l'icône Accueil », cf. screenshot 1) :
le menu (#menu) est une bande CENTRÉE de 1150px max ; son 1er onglet (icône
Accueil = « Comparer abonnement… ») démarre à ~44px du bord GAUCHE de cette
bande. On ancre le logo au MÊME repère centré : left:calc(50% - 795px) place
le logo (img 220px + marge 30px) juste À GAUCHE de l'onglet Accueil (~40px
d'écart), relation CONSTANTE sur grand écran -> fini le logo « isolé dans le
coin » loin du menu centré.
CLAMP max(12px, …) : sur écran plus étroit (<~1540px) l'onglet Accueil se
recentre vers la gauche ; sans garde-fou le logo (220px de large) sortirait
HORS écran à gauche. Le max() le retient à 12px du bord : il revient alors se
caler près du menu (qui, à ces largeurs, longe déjà le bord — donc pas d'effet
« coin isolé »).
top:-56px : le logo est LÉGÈREMENT RELEVÉ dans la bande du bandeau haut (à
gauche, où la pub centrée ne va pas), son bas frôle la rangée du menu. Ce
décalage vertical évite tout chevauchement AVEC les onglets aux largeurs où le
logo doit se rapprocher du menu. Reset mobile (≤1024px) plus bas +
'header.fixed #logo{top:0}' pour le header fixé au scroll. */
#logo{ z-index:999999 !important; position:absolute !important; top:-64px !important; left:max(12px, calc(50% - 795px)) !important; margin-left:0 !important; }
img[src^="image/logo/"]{ border-radius:10px !important; }
/* ═══════════ MENU / HEADER ═══════════ */
header{
background:#24242a !important;
background-image:none !important;
border-bottom:1px solid var(--m-line);
}
#menu li a{
color:var(--m-txt) !important;
font-weight:600 !important;
font-size:13.5px !important;
letter-spacing:.01em;
}
#menu li:hover{
background:var(--m-red) !important;
border-radius:8px;
}
#menu li:hover a{ color:#fff !important; }
/* dropdowns du menu */
.dropdown_3,.dropdown_4,.dropdown_5{
background:var(--m-card) !important;
border:1px solid var(--m-line) !important;
border-radius:0 12px 12px 12px !important;
box-shadow:0 14px 40px -14px rgba(0,0,0,.55);
}
.dropdown_3 a,.dropdown_4 a,.dropdown_5 a{ color:var(--m-txt) !important; }
/* POLICE NETTE DANS LES MENUS DÉROULANTS (2026-07-05) :
css.css (l.79) pose « text-shadow:1px 1px 1px #ffffff » sur les items des
déroulants (#menu li ul li). Sur le fond sombre du thème, cette ombre
BLANCHE rend le texte flou/embossé. Son reset (css.css l.666) est dans le
bloc menu mobile → inactif sur desktop. On la neutralise ici pour tous les
déroulants + on active le lissage pour un rendu net. */
#menu li ul li,
#menu li ul li a,
#menu li .box1 li, #menu li .box2 li,
#menu li .box1 a, #menu li .box2 a,
.dropdown_3 a,.dropdown_4 a,.dropdown_5 a,
#menu .col_2 p, #menu .col_6 p{
text-shadow:none !important;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
/* listes internes des menus déroulants : cartes gris foncé arrondies */
#menu li .box1 li,
#menu li .box2 li{
background:var(--m-card) !important;
border:1px solid var(--m-line) !important;
border-radius:8px !important;
list-style:none !important;
height:auto !important;
padding:5px 10px !important;
transition:background .15s ease, border-color .15s ease;
}
/* survol : fond rouge, police gris foncé */
#menu li .box1 li:hover,
#menu li .box2 li:hover{
background:var(--m-red) !important;
border-color:var(--m-red) !important;
height:auto !important;
}
#menu li .box1 li:hover a,
#menu li .box2 li:hover a,
#menu li .box1 a:hover,
#menu li .box2 a:hover{
color:#24242a !important;
}
/* titres de colonnes des menus déroulants — ROUGES depuis le 09/07/2026
(demande Nicolas : en blanc ils se distinguaient mal des liens) */
#menu .col_2 p, #menu .col_6 p{
color:var(--m-red) !important;
border-bottom-color:var(--m-line) !important;
}
/* icônes du menu : rouges au repos, gris foncé au survol
(sinon invisibles sur l'onglet rouge quand le menu est ouvert) */
#menu li a img{ transition:filter .15s ease; }
#menu li:hover > a img{ filter:grayscale(1) brightness(.32); }
/* RÉSEAUX SOCIAUX DANS LA BARRE (06/07/2026) : groupe d'icônes (li#menu-social,
1er enfant de #menu) affiché à DROITE de l'onglet « Opérateurs » grâce au
float:right (le 1er élément flotté va le plus à droite). Ce n'est PAS un
onglet : on neutralise le fond rouge / la remontée du :hover des
et on
reprend le look des icônes du footer (.soc-ic), calibré pour la barre. */
#menu li#menu-social{
float:right;
display:flex; align-items:center; gap:7px;
height:45px; border:none; padding:0; margin:0 6px 0 16px;
}
#menu li#menu-social:hover{ background:transparent !important; height:45px; margin-top:0; }
#menu li#menu-social .soc-ic{
width:29px; height:29px; border-radius:8px;
background:#2a2a32; border:1.5px solid var(--m-line);
display:inline-flex; align-items:center; justify-content:center;
transition:border-color .15s ease, transform .15s ease;
}
#menu li#menu-social .soc-ic:hover{ border-color:var(--m-red); transform:translateY(-1px); }
#menu li#menu-social .soc-ic svg{ width:15px; height:15px; fill:var(--m-txt-2); }
#menu li#menu-social .soc-ic:hover svg{ fill:var(--m-txt); }
/* déroulants EMPILÉS par univers (#menucompareb « Nouveau 2026 » ET #menu6b
« Bons Plans ») — REFAIT/ÉTENDU 2026-07-05 : MARGES RÉGULIÈRES + LAYOUT
STABLE. L'ancienne version reposait sur des flottants : l'en-tête (.col_3)
et la colonne d'items (.col_1) se mettaient CÔTE À CÔTE en fenêtre large et
EMPILÉS en fenêtre étroite -> écarts irréguliers. On force l'empilement
(en-tête sur sa propre ligne, les items dessous) avec un padding de boîte
uniforme et des écarts verticaux IDENTIQUES (6px). Ciblé sur ces 2 ids pour
ne pas toucher les autres déroulants. */
/* #menu2b (« Aide et conseils », ajouté le 05/07/2026) partage ce même
gabarit empilé que #menucompareb / #menu6b. */
#menucompareb, #menu6b, #menu2b{ padding:12px 14px !important; box-sizing:border-box !important; }
#menucompareb .col_3, #menu6b .col_3, #menu2b .col_3{
float:none !important; clear:both !important;
width:auto !important; height:auto !important; display:block !important;
white-space:nowrap !important; /* titre de l'en-tête sur UNE seule ligne */
margin:0 0 6px 0 !important; /* même écart que celui entre les items */
}
#menucompareb .col_1, #menu6b .col_1, #menu2b .col_1{
float:none !important; clear:both !important;
width:auto !important; height:auto !important; margin:0 !important;
}
#menucompareb ul.box1, #menu6b ul.box1, #menu2b ul.box1{ float:none !important; width:auto !important; margin:0 !important; padding:0 !important; }
#menucompareb .box1 li, #menu6b .box1 li, #menu2b .box1 li{
float:none !important;
width:auto !important;
display:block !important;
white-space:nowrap; /* chaque libellé reste sur UNE seule ligne */
margin:0 0 6px 0 !important; /* écart identique entre chaque item */
}
#menucompareb .box1 li:last-child, #menu6b .box1 li:last-child, #menu2b .box1 li:last-child{ margin-bottom:0 !important; }
/* SOUS-MENU D'AIDE « forfaits mobiles » (05/07/2026) — remplace l'ancienne barre
« Par univers » (.menu-univers, supprimée). Le 3e item du déroulant Aide
(li.aide-item-sub) contient l'ancien menu d'aide détaillé (.aide-flyout,
3 colonnes .col_2). DESKTOP : caché, puis ouvert en FLYOUT vers la GAUCHE au
survol de l'item (le déroulant Aide est en bord droit -> on ouvre à gauche).
MOBILE : voir la règle @media plus bas (affiché en ligne dans l'accordéon). */
#menu li .aide-item-sub{ position:relative !important; }
/* petit chevron « ‹ » indiquant que l'item ouvre un sous-menu à gauche */
#menu li .aide-item-sub > a::before{
content:"\2039"; float:left; margin-right:7px; font-weight:800; opacity:.65;
}
.aide-flyout{
display:none; /* masqué tant qu'on ne survole pas l'item */
position:absolute; top:-1px; right:100%; /* collé au bord gauche de l'item */
width:560px; box-sizing:border-box; /* largeur FIXE -> pas de débordement
à gauche sur les desktops étroits */
padding:14px 16px; gap:18px;
background:var(--m-card);
border:1px solid var(--m-line);
border-radius:12px;
box-shadow:0 14px 40px -14px rgba(0,0,0,.55);
z-index:30001;
}
/* pont invisible entre l'item et le flyout : évite de perdre le survol dans
l'interstice (le flyout est descendant de l'item -> le survoler garde
:hover sur l'item). */
.aide-flyout::after{
content:""; position:absolute; top:0; left:100%; width:16px; height:100%;
}
#menu li .aide-item-sub:hover .aide-flyout{ display:flex; }
/* 3 colonnes côte à côte, largeurs égales (min-width:0 -> elles peuvent
rétrécir sous le contenu et le texte des liens revient à la ligne au lieu
d'élargir le flyout). */
.aide-flyout .col_2{
float:none !important; position:static !important;
width:auto !important; flex:1 1 0 !important; min-width:0 !important; margin:0 !important;
}
.aide-flyout .box2 a{ white-space:normal !important; }
/* Flyout IA passé à 4 colonnes (ajout « Réglementation & RGPD », 08/07/2026).
La largeur du flyout est FIXE (560px — l'élargir déborderait à GAUCHE, il
s'ouvre en right:100%). Pour ne pas serrer les libellés, on dispose ses 4
colonnes en GRILLE 2×2 (flex-wrap). Scopé #menu2aideia : les flyouts Box
(menu2aidebox) et forfaits (menu2aide) gardent leur rangée simple. */
#menu2aideia{ flex-wrap:wrap !important; }
#menu2aideia .col_2{ flex:1 1 46% !important; }
/* COULEUR DES LIENS DU SOUS-MENU (fix 05/07/2026) : le flyout n'étant pas un
.dropdown_X, ses liens ne recevaient pas le blanc des autres déroulants et
héritaient du gris foncé (#24242a). On les force en BLANC quand l'onglet est
ouvert (spécificité 1-3-2 pour battre '#menu li .box2 li:hover a' = 1-2-3),
et en gris foncé UNIQUEMENT au survol d'un lien précis (carte rouge). */
#menu li:hover .aide-flyout .box2 a{ color:#fff !important; }
#menu li .aide-flyout .box2 li:hover a,
#menu li .aide-flyout .box2 a:hover{ color:#24242a !important; }
/* l'item parent reste lisible même quand son
passe en rouge au survol */
#menu li .aide-item-sub:hover > a{ color:#24242a !important; }
/* ═══════════ SLIDERS jQuery UI — look épais façon origine, en gris ═══════════ */
.ui-slider,
.ui-slider-horizontal{
background:var(--m-track) !important;
background-image:none !important;
border:1px solid #d0d0d8 !important;
height:12px !important;
border-radius:7px !important;
}
.ui-slider .ui-slider-range{
background:#6a6a78 !important;
background-image:none !important;
border:none !important;
border-radius:7px !important;
}
.ui-slider .ui-slider-handle,
.ui-slider-horizontal .ui-slider-handle{
background:var(--m-handle) !important;
background-image:none !important;
border:2px solid #fff !important;
border-radius:6px !important;
width:22px !important;
height:22px !important;
top:-6px !important;
margin-left:-11px !important;
box-shadow:0 1px 5px rgba(0,0,0,.3) !important;
cursor:pointer !important;
transition:transform .12s ease, background .12s ease;
}
.ui-slider .ui-slider-handle:hover,
.ui-slider .ui-slider-handle:focus,
.ui-slider .ui-slider-handle.ui-state-active{
background:#e8e8f0 !important;
transform:scale(1.08);
outline:none !important;
}
/* libellés au-dessus des sliders */
#bornes_prix,#bornes_internet,#bornes_appel,#bornes_mms,#bornes_sms{
color:var(--m-txt-2) !important;
font-weight:600 !important;
font-size:13px !important;
}
#bornes_prix span,#bornes_internet span,#bornes_appel span{
color:var(--m-txt) !important;
font-weight:700 !important;
}
/* ═══════════ CADRES DU FORMULAIRE ═══════════ */
.bornes_casecadre{
background:#2a2a32 !important;
border:1px solid var(--m-line) !important;
border-radius:var(--m-radius) !important;
font-weight:500 !important;
color:var(--m-txt-2) !important;
box-shadow:0 2px 10px -6px rgba(0,0,0,.3);
padding:14px !important; /* padding fixe : permet au bandeau RIO de s'aligner bord à bord */
box-sizing:border-box !important; /* le padding est inclus dans la largeur : pas de décalage de colonnes */
}
/* ── les 3 colonnes du formulaire à la même hauteur ──
Grille (réorganisation 05/07/2026) :
colonne 1 = sliders + engagement + options (une seule carte haute),
colonne 2 = guide d'achat (3 cartes) + bandeau RIO, bouton résultats dessous,
colonne 3 = "Choix du réseau" (haut) + "Choix de l'opérateur" (bas).
3 rangées : la carte 1 couvre tout, le bouton occupe la rangée 3 en col. 2. */
@media (min-width:981px){
#formforfait{
display:grid;
grid-template-columns:1fr 1fr 1fr;
grid-template-rows:auto 1fr auto;
gap:12px;
align-items:stretch;
}
#formforfait > .bornes_casecadre{
width:auto !important;
margin:0 !important;
float:none !important;
min-height:0 !important;
}
#formforfait > .bornes_casecadre:nth-of-type(1){ grid-column:1; grid-row:1 / span 3; }
#formforfait > .bornes_casecadre:nth-of-type(2){
grid-column:2; grid-row:1 / span 2;
display:flex;
flex-direction:column;
}
/* le bandeau RIO reste collé au bas de sa carte */
#formforfait > .bornes_casecadre:nth-of-type(2) .rio-bandeau{ margin-top:auto; }
#formforfait > .bornes_casecadre:nth-of-type(3){ grid-column:3; grid-row:1; }
#formforfait > .bornes_casecadre:nth-of-type(4){ grid-column:3; grid-row:2 / span 2; }
/* bouton "voir les X offres" : dans la grille, sous la colonne centrale */
#formforfait > #recherchefinal{
grid-column:2; grid-row:3;
width:auto !important;
margin:0 !important;
float:none !important;
box-sizing:border-box;
}
}
/* ── guide d'achat DANS la carte centrale : cartes empilées ── */
.bornes_casecadre .guideachat{
border-top:none !important;
display:flex !important;
flex-direction:column;
flex-wrap:nowrap;
gap:10px;
margin:0 0 14px 0 !important;
padding:0 !important;
}
.bornes_casecadre .guideachat li{
margin:0 !important;
flex:0 0 auto !important;
width:auto !important;
background:var(--m-bg);
}
/* ── bandeau "Conserver son numéro / RIO 3179" ──
Il vit DANS la carte des cases à cocher : les marges négatives
annulent le remplissage (1%) de la carte pour qu'il soit bord à
bord avec elle, comme un pied de carte professionnel. */
.rio-bandeau{
clear:both;
margin:18px -14px -14px -14px; /* annule exactement le padding fixe (14px) de la carte parente */
padding:14px 10px;
background:var(--m-bg);
border-top:1px solid var(--m-line);
border-radius:0 0 9px 9px; /* épouse l'arrondi 10px de la carte (moins le liseré 1px) */
text-align:center;
}
.rio-bandeau .rio-titre{
/* 09/07/2026 (demande Nicolas) : même police et même couleur que le
numéro 3179 (.rio-numero span) — graisse 800 / rouge doux.
10/07/2026 (demande Nicolas) : titre réduit 26px -> 21px, tout le
reste inchangé (le 3179 garde ses 26px et reste le point focal). */
font-size:21px;
color:var(--m-red-soft);
text-transform:uppercase;
margin-bottom:5px;
font-weight:800;
}
.rio-bandeau .rio-numero{ font-size:15px; color:var(--m-txt); font-weight:600; }
.rio-bandeau .rio-numero span{
font-size:26px;
font-weight:800;
color:var(--m-red-soft);
vertical-align:middle;
margin-left:6px;
}
.rio-bandeau .rio-note{ font-size:11px; color:var(--m-txt-3); margin-top:4px; }
/* ═══════════ CHECKBOXES MODERNES ═══════════ */
.bornes_case input[type=checkbox],
.bornes_case2 input[type=checkbox],
.bornes_casecadre input[type=checkbox]{
appearance:none;
-webkit-appearance:none;
width:17px; height:17px;
border:1.5px solid #6a6a78;
border-radius:5px;
background:#2a2a32;
cursor:pointer;
vertical-align:-3px;
margin-right:6px;
position:relative;
transition:all .15s ease;
}
.bornes_case input[type=checkbox]:hover,
.bornes_case2 input[type=checkbox]:hover,
.bornes_casecadre input[type=checkbox]:hover{
border-color:var(--m-handle);
}
.bornes_case input[type=checkbox]:checked,
.bornes_case2 input[type=checkbox]:checked,
.bornes_casecadre input[type=checkbox]:checked{
background:var(--m-red);
border-color:var(--m-red);
}
.bornes_case input[type=checkbox]:checked::after,
.bornes_case2 input[type=checkbox]:checked::after,
.bornes_casecadre input[type=checkbox]:checked::after{
content:"";
position:absolute;
left:5px; top:2px;
width:4px; height:8px;
border:solid #fff;
border-width:0 2px 2px 0;
transform:rotate(45deg);
}
.bornes_case, .bornes_case2{
font-weight:500 !important;
color:var(--m-txt-2) !important;
font-size:13.5px;
}
/* ── GRILLE UNIQUE des cases à cocher du formulaire (08/07/2026, demande
Nicolas « harmonise les espaces »). Les DEUX groupes (engagement, puis
options) du fragment menu-formulaire-d69832.php sont chacun dans un