/* =====================================================================
Ocaz.be — thème sombre premium
Une seule feuille de style pour le site public et l'administration.
===================================================================== */
:root{
/* Fonds, du plus profond au plus clair */
--nuit:#080b11;
--fond:#0c111a;
--surface:#121926;
--surface-2:#18202f;
--bord:#222c3d;
--bord-clair:#2e3a4e;
/* Textes */
--texte:#e8edf5;
--doux:#8d9bb2;
--faible:#66748c;
/* Accent */
--accent:#f08023;
--accent-clair:#ff9a45;
--accent-sourd:rgba(240,128,35,.14);
--accent-bord:rgba(240,128,35,.35);
/* Sémantique */
--ok:#3ecf8e; --ok-sourd:rgba(62,207,142,.13);
--alerte:#f0b429; --alerte-sourd:rgba(240,180,41,.13);
--danger:#f2687a; --danger-sourd:rgba(242,104,122,.13);
--r:14px;
--r-s:9px;
--ombre:0 1px 2px rgba(0,0,0,.4), 0 10px 34px rgba(0,0,0,.34);
--large:1200px;
--police:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;min-height:100vh;display:flex;flex-direction:column;
background:var(--fond);color:var(--texte);
font:16px/1.6 var(--police);
-webkit-font-smoothing:antialiased;
}
main{flex:1}
a{color:inherit}
img{max-width:100%;display:block}
[hidden]{display:none !important}
::selection{background:var(--accent);color:#0b0e14}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.large{max-width:var(--large);margin:0 auto;padding:0 22px;width:100%}
.centre{text-align:center}
/* ------------------------------ En-tête ------------------------------ */
.entete{
background:rgba(8,11,17,.9);backdrop-filter:blur(12px);
border-bottom:1px solid var(--bord);position:sticky;top:0;z-index:40;
}
.entete .large{display:flex;align-items:center;gap:22px;min-height:66px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;white-space:nowrap;font-weight:800;font-size:21px;letter-spacing:-.6px}
.logo img{height:32px;width:auto}
.logo .point{color:var(--accent)}
.entete nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.entete nav a{
color:var(--doux);text-decoration:none;font-size:14.5px;font-weight:500;
padding:8px 13px;border-radius:var(--r-s);transition:color .15s,background .15s;
}
.entete nav a:hover{color:var(--texte);background:var(--surface)}
.entete nav a.actif{color:var(--accent);background:var(--accent-sourd)}
.langues{display:flex;gap:2px;margin-left:8px;padding-left:12px;border-left:1px solid var(--bord)}
.langues a{
font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
padding:6px 8px;border-radius:6px;text-decoration:none;color:var(--faible);
}
.langues a:hover{color:var(--texte);background:var(--surface)}
.langues a.actif{color:var(--accent);background:var(--accent-sourd)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--bord);
color:var(--texte);border-radius:var(--r-s);padding:8px 11px;cursor:pointer;font:inherit;font-size:14px}
@media(max-width:840px){
.burger{display:block}
.entete nav{
display:none;position:absolute;top:100%;left:0;right:0;
background:var(--nuit);border-bottom:1px solid var(--bord);
flex-direction:column;align-items:stretch;gap:0;padding:8px 14px 14px;
}
.entete nav.ouvert{display:flex}
.entete nav a{padding:12px 10px;border-radius:var(--r-s)}
.langues{margin:8px 0 0;padding:10px 0 0;border-left:0;border-top:1px solid var(--bord)}
}
/* ------------------------------ Bandeau ------------------------------ */
.hero{
position:relative;overflow:hidden;padding:56px 0 48px;
background:
radial-gradient(900px 340px at 78% -10%, rgba(240,128,35,.16), transparent 62%),
radial-gradient(700px 300px at 8% 110%, rgba(62,120,207,.10), transparent 60%),
linear-gradient(180deg,#0b101a,#0c111a);
border-bottom:1px solid var(--bord);
}
.hero h1{margin:0 0 14px;font-size:clamp(27px,4.4vw,42px);line-height:1.13;letter-spacing:-1.1px;max-width:24ch}
.hero p{margin:0;color:var(--doux);max-width:58ch;font-size:16.5px}
.chiffres{display:flex;gap:40px;margin-top:30px;flex-wrap:wrap}
.chiffres div{font-size:13px;color:var(--faible);text-transform:uppercase;letter-spacing:.7px}
.chiffres strong{display:block;font-size:27px;color:var(--texte);letter-spacing:-.8px;text-transform:none;font-weight:750;margin-bottom:1px}
.chiffres strong em{font-style:normal;color:var(--accent)}
.titre-page{padding:44px 0 6px}
.titre-page h1{margin:0 0 10px;font-size:clamp(24px,3.6vw,34px);letter-spacing:-.8px}
.titre-page p{margin:0;color:var(--doux);max-width:62ch}
/* ------------------------------ Filtres ------------------------------ */
.filtres{border-bottom:1px solid var(--bord);background:rgba(18,25,38,.5);padding:15px 0}
.filtres form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.filtres .champ{width:auto}
.filtres input[type=search]{flex:1;min-width:220px}
.filtres select{min-width:180px}
/* --------------------------- Grille produits -------------------------- */
.grille{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));padding:30px 0 60px}
.carte{
background:var(--surface);border:1px solid var(--bord);border-radius:var(--r);
overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;
transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.carte:hover{transform:translateY(-4px);border-color:var(--bord-clair);box-shadow:var(--ombre)}
.vignette{position:relative;aspect-ratio:4/3;background:var(--surface-2);overflow:hidden}
.vignette img,.vignette-svg{width:100%;height:100%;object-fit:cover;display:block}
.carte:hover .vignette img{transform:scale(1.03)}
.vignette img{transition:transform .4s ease}
.etiquette{
position:absolute;top:11px;left:11px;font-size:10.5px;font-weight:700;
text-transform:uppercase;letter-spacing:.7px;padding:5px 10px;border-radius:6px;
background:rgba(8,11,17,.82);backdrop-filter:blur(6px);color:var(--doux);
border:1px solid var(--bord);
}
.etiquette--avant{background:var(--accent);color:#0b0e14;border-color:transparent}
.etiquette--reserve{background:var(--alerte);color:#0b0e14;border-color:transparent}
.etiquette--vendu{background:rgba(8,11,17,.9);color:var(--doux)}
.carte .corps{padding:15px 16px 17px;display:flex;flex-direction:column;gap:7px;flex:1}
.meta{font-size:11.5px;color:var(--faible);text-transform:uppercase;letter-spacing:.7px;font-weight:600}
.carte h3{margin:0;font-size:15.5px;line-height:1.38;font-weight:650;letter-spacing:-.2px}
.etat-ligne{font-size:13px;color:var(--doux)}
.bas{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding-top:10px}
.prix{font-size:20px;font-weight:750;letter-spacing:-.5px;color:var(--texte)}
.prix--demande{
font-size:13px;font-weight:650;letter-spacing:0;color:var(--accent-clair);
background:var(--accent-sourd);border:1px solid var(--accent-bord);
padding:5px 11px;border-radius:7px;white-space:nowrap;
}
.stock{font-size:12.5px;color:var(--faible);white-space:nowrap}
/* ------------------------------- Fiche -------------------------------- */
.fiche{display:grid;grid-template-columns:1.08fr .92fr;gap:40px;padding:26px 0 70px;align-items:start}
@media(max-width:900px){.fiche{grid-template-columns:1fr;gap:26px}}
.galerie{display:flex;flex-direction:column;gap:12px}
.galerie .principale{
background:var(--surface);border:1px solid var(--bord);border-radius:var(--r);
overflow:hidden;aspect-ratio:4/3;
}
.galerie .principale img,.galerie .principale .vignette-svg{width:100%;height:100%;object-fit:cover}
.miniatures{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
.miniatures button{
padding:0;border:1px solid var(--bord);background:var(--surface);border-radius:var(--r-s);
overflow:hidden;aspect-ratio:4/3;cursor:pointer;transition:border-color .15s
}
.miniatures button:hover{border-color:var(--bord-clair)}
.miniatures button.actif{border-color:var(--accent)}
.miniatures img{width:100%;height:100%;object-fit:cover}
.fiche h1{margin:8px 0 12px;font-size:clamp(22px,3vw,30px);letter-spacing:-.7px;line-height:1.24}
.ligne-prix{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin:18px 0 22px}
.ligne-prix .prix{font-size:32px}
.ligne-prix .prix--demande{font-size:16px;padding:9px 15px}
.badge{font-size:12.5px;font-weight:650;padding:6px 12px;border-radius:999px;white-space:nowrap}
.badge--dispo{background:var(--ok-sourd);color:var(--ok)}
.badge--reserve{background:var(--alerte-sourd);color:var(--alerte)}
.badge--vendu{background:var(--surface-2);color:var(--doux)}
table.specs{
width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 22px;
background:var(--surface);border:1px solid var(--bord);border-radius:var(--r);overflow:hidden;
}
table.specs td{padding:11px 15px;border-bottom:1px solid var(--bord)}
table.specs tr:last-child td{border-bottom:0}
table.specs td:first-child{color:var(--doux);width:40%;white-space:nowrap}
.retour{font-size:14px;color:var(--doux);text-decoration:none;display:inline-block}
.retour:hover{color:var(--accent)}
/* ---------------------------- Blocs & formulaires --------------------- */
.bloc{background:var(--surface);border:1px solid var(--bord);border-radius:var(--r);padding:22px}
.bloc + .bloc{margin-top:18px}
.bloc h2{margin:0 0 5px;font-size:17.5px;letter-spacing:-.3px}
.bloc h3{margin:0 0 10px;font-size:14.5px;color:var(--doux);font-weight:650}
.bloc p.aide{margin:0 0 16px;color:var(--doux);font-size:14.5px}
.bloc p:last-child{margin-bottom:0}
label{display:block;font-size:13px;font-weight:650;color:var(--doux);margin-bottom:6px}
.champ{
width:100%;padding:11px 13px;border:1px solid var(--bord);border-radius:var(--r-s);
background:var(--nuit);color:var(--texte);font:inherit;font-size:14.5px;
transition:border-color .15s;
}
.champ::placeholder{color:var(--faible)}
.champ:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-sourd)}
select.champ{
appearance:none;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238d9bb2' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 13px center;padding-right:36px;
}
textarea.champ{min-height:104px;resize:vertical;font-family:inherit;line-height:1.55}
textarea.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;min-height:170px}
input[type=file].champ{padding:9px 12px;font-size:13.5px}
input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
.case{display:flex;gap:10px;align-items:flex-start;font-weight:500;color:var(--texte);font-size:14.5px;cursor:pointer}
.case input{margin-top:2px;flex:none}
.note{font-size:12.5px;color:var(--faible);margin-top:6px;line-height:1.5}
.note strong{color:var(--doux)}
.form-grille{display:grid;gap:16px}
.form-grille.deux{grid-template-columns:1fr 1fr}
@media(max-width:700px){.form-grille.deux{grid-template-columns:1fr}}
/* -------------------------------- Boutons ------------------------------ */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:11px 19px;border-radius:var(--r-s);border:1px solid transparent;
background:var(--accent);color:#0b0e14;font:inherit;font-size:14.5px;font-weight:700;
text-decoration:none;cursor:pointer;transition:background .15s,transform .1s,border-color .15s;
}
.btn:hover{background:var(--accent-clair)}
.btn:active{transform:translateY(1px)}
.btn--clair{background:var(--surface-2);color:var(--texte);border-color:var(--bord)}
.btn--clair:hover{background:var(--bord);border-color:var(--bord-clair)}
.btn--fantome{background:transparent;color:var(--doux);border-color:var(--bord)}
.btn--fantome:hover{background:var(--surface-2);color:var(--texte)}
.btn--danger{background:transparent;color:var(--danger);border-color:rgba(242,104,122,.32)}
.btn--danger:hover{background:var(--danger-sourd)}
.btn--pt{padding:7px 12px;font-size:13px;font-weight:650}
.btn--bloc{width:100%}
.boutons{display:flex;gap:10px;flex-wrap:wrap}
/* -------------------------------- Puces -------------------------------- */
.pastille{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.pastille--accent{background:var(--accent-sourd);color:var(--accent-clair)}
.pastille--ok{background:var(--ok-sourd);color:var(--ok)}
.pastille--alerte{background:var(--alerte-sourd);color:var(--alerte)}
.pastille--neutre{background:var(--surface-2);color:var(--doux)}
/* ------------------------------ Messages ------------------------------- */
.flash{
border-radius:var(--r-s);padding:13px 17px;margin:20px 0 0;font-size:14.5px;
border:1px solid var(--bord);background:var(--surface);
}
.flash--ok{background:var(--ok-sourd);border-color:rgba(62,207,142,.3);color:var(--ok)}
.flash--erreur{background:var(--danger-sourd);border-color:rgba(242,104,122,.3);color:var(--danger)}
.flash--info{background:var(--accent-sourd);border-color:var(--accent-bord);color:var(--accent-clair)}
.vide{text-align:center;padding:70px 20px;color:var(--doux)}
.vide p{margin:0 0 16px}
/* ------------------------------ Pagination ----------------------------- */
.pagination{display:flex;gap:6px;justify-content:center;padding:0 0 60px;flex-wrap:wrap}
.pagination a,.pagination span{
min-width:38px;text-align:center;padding:8px 11px;border-radius:var(--r-s);
border:1px solid var(--bord);text-decoration:none;font-size:14px;color:var(--doux);
}
.pagination a:hover{border-color:var(--bord-clair);color:var(--texte)}
.pagination .actuel{background:var(--accent);color:#0b0e14;border-color:transparent;font-weight:700}
/* -------------------------------- Pied --------------------------------- */
.pied{background:var(--nuit);border-top:1px solid var(--bord);padding:40px 0 30px;margin-top:auto;font-size:14px}
.pied-grille{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:34px}
@media(max-width:760px){.pied-grille{grid-template-columns:1fr;gap:26px}}
.pied h4{margin:0 0 12px;font-size:12px;text-transform:uppercase;letter-spacing:.9px;color:var(--faible)}
.pied ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pied a{color:var(--doux);text-decoration:none}
.pied a:hover{color:var(--accent)}
.pied p{margin:0 0 8px;color:var(--doux);max-width:42ch}
.pied-bas{
margin-top:30px;padding-top:20px;border-top:1px solid var(--bord);
display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--faible);font-size:13px;
}
/* ============================ ADMINISTRATION =========================== */
.admin-barre{background:var(--surface);border-bottom:1px solid var(--bord)}
.admin-barre .large{display:flex;align-items:center;gap:3px;min-height:56px;flex-wrap:wrap}
.admin-barre a{
font-size:14px;color:var(--doux);text-decoration:none;padding:8px 13px;
border-radius:var(--r-s);white-space:nowrap;
}
.admin-barre a:hover{background:var(--surface-2);color:var(--texte)}
.admin-barre a.actif{background:var(--accent-sourd);color:var(--accent)}
.admin-barre .droite{margin-left:auto;display:flex;gap:8px;align-items:center}
/* Un bouton dans la barre reste un bouton : il ne doit pas hériter du style des liens. */
.admin-barre a.btn{color:#0b0e14;background:var(--accent)}
.admin-barre a.btn:hover{background:var(--accent-clair);color:#0b0e14}
.admin-barre a.btn--clair{background:var(--surface-2);color:var(--texte);border-color:var(--bord)}
.admin-barre .compteur{
display:inline-block;margin-left:6px;background:var(--accent);color:#0b0e14;
font-size:11px;font-weight:800;padding:1px 6px;border-radius:999px;
}
.entete-page{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:28px 0 20px;flex-wrap:wrap}
.entete-page h1{margin:0;font-size:23px;letter-spacing:-.6px}
.entete-page .sous{color:var(--doux);font-size:14px;margin-top:4px}
.cartes-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px;margin-bottom:24px}
.cartes-chiffres .bloc{padding:17px 19px}
.cartes-chiffres b{display:block;font-size:26px;letter-spacing:-.8px;margin-bottom:2px}
.cartes-chiffres span{font-size:12.5px;color:var(--doux)}
.cartes-chiffres .accent b{color:var(--accent)}
.tableau{
width:100%;border-collapse:collapse;background:var(--surface);
border:1px solid var(--bord);border-radius:var(--r);overflow:hidden;font-size:14px;
}
.tableau th{
text-align:left;padding:12px 14px;background:var(--surface-2);
border-bottom:1px solid var(--bord);font-size:11.5px;text-transform:uppercase;
letter-spacing:.7px;color:var(--faible);font-weight:700;
}
.tableau td{padding:12px 14px;border-bottom:1px solid var(--bord);vertical-align:middle}
.tableau tr:last-child td{border-bottom:0}
.tableau tbody tr:hover td{background:var(--surface-2)}
.tableau .num{text-align:right;white-space:nowrap}
.tableau select.champ{min-width:132px;padding:7px 30px 7px 10px;font-size:13px}
.tableau .titre-cell{font-weight:650;color:var(--texte)}
.tableau-enveloppe{overflow-x:auto;border-radius:var(--r)}
.mini{width:56px;height:42px;border-radius:7px;overflow:hidden;background:var(--surface-2);flex:none}
.mini img,.mini .vignette-svg{width:100%;height:100%;object-fit:cover}
/* Les actions sont dans un flex, jamais un | en display:flex :
sinon la cellule ne s'étire pas à la hauteur de la ligne (Chromium). */
.actions{display:flex;gap:7px;justify-content:flex-end;align-items:center;flex-wrap:nowrap}
.tableau td:last-child{white-space:nowrap}
@media(max-width:1100px){.actions{flex-wrap:wrap;justify-content:flex-end}}
/* Onglets de langue des formulaires */
.onglets{display:flex;gap:4px;border-bottom:1px solid var(--bord);margin:0 0 18px}
.onglets button{
background:none;border:0;border-bottom:2px solid transparent;color:var(--doux);
font:inherit;font-size:14px;font-weight:650;padding:10px 15px;cursor:pointer;margin-bottom:-1px;
}
.onglets button:hover{color:var(--texte)}
.onglets button.actif{color:var(--accent);border-bottom-color:var(--accent)}
.onglets .requis{color:var(--accent);margin-left:4px}
.panneau[hidden]{display:none}
.grille-admin{display:grid;grid-template-columns:2fr 1fr;gap:20px;padding:0 0 70px;align-items:start}
@media(max-width:980px){.grille-admin{grid-template-columns:1fr}}
.colonne{display:grid;gap:20px;align-content:start}
.photos-admin{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px}
.photo-admin{position:relative;border:1px solid var(--bord);border-radius:var(--r-s);overflow:hidden;aspect-ratio:4/3;background:var(--surface-2)}
.photo-admin img{width:100%;height:100%;object-fit:cover}
.photo-admin .sup{
position:absolute;top:5px;right:5px;background:rgba(8,11,17,.85);border:1px solid var(--bord);
color:var(--danger);border-radius:6px;padding:3px 7px;font-size:11.5px;font-weight:700;cursor:pointer;
}
.photo-admin .principale-tag{
position:absolute;bottom:5px;left:5px;background:var(--accent);color:#0b0e14;
font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:2px 7px;border-radius:5px;
}
/* Écran de connexion */
.ecran-auth{display:flex;justify-content:center;align-items:flex-start;padding:64px 22px 80px}
.ecran-auth .bloc{max-width:412px;width:100%}
.ecran-auth .logo{justify-content:center;margin-bottom:22px;font-size:25px}
/* Page de maintenance */
.maintenance{display:flex;flex-direction:column;justify-content:center;align-items:center;
text-align:center;min-height:100vh;padding:40px 22px;gap:14px}
.maintenance h1{margin:0;font-size:clamp(24px,4vw,34px);letter-spacing:-.8px}
.maintenance p{margin:0;color:var(--doux);max-width:46ch}
/* Impression : on garde la fiche lisible sur papier */
@media print{
body{background:#fff;color:#000}
.entete,.pied,.filtres,form,.btn,.miniatures{display:none !important}
.bloc,.tableau,table.specs{border-color:#ccc;background:#fff;color:#000}
}
/* ======================= STATISTIQUES & JOURNAL ======================== */
/* Sélecteur de période */
.segments{display:flex;gap:2px;background:var(--surface);border:1px solid var(--bord);
border-radius:var(--r-s);padding:3px;flex-wrap:wrap}
.segments a{
padding:7px 14px;border-radius:7px;text-decoration:none;font-size:13.5px;
font-weight:600;color:var(--doux);white-space:nowrap;
}
.segments a:hover{color:var(--texte);background:var(--surface-2)}
.segments a.actif{background:var(--accent);color:#0b0e14}
.section-titre{
font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--faible);
font-weight:700;margin:34px 0 16px;padding-bottom:10px;border-bottom:1px solid var(--bord);
}
.section-titre:first-of-type{margin-top:6px}
/* Graphiques SVG */
.graphe-enveloppe{position:relative;margin-top:14px}
.graphe{width:100%;height:auto;display:block;overflow:visible}
.graphe .grille{stroke:var(--bord);stroke-width:1}
.graphe .base{stroke:var(--bord-clair);stroke-width:1}
.graphe .axe{fill:var(--faible);font-size:11px;font-family:var(--police)}
.graphe .zone{fill:transparent;cursor:crosshair}
.graphe .zone:hover{fill:rgba(255,255,255,.04)}
.graphe .barre,.graphe .courbe,.graphe .point{pointer-events:none}
.legende{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:10px;font-size:13px;color:var(--doux)}
.legende span{display:inline-flex;align-items:center;gap:7px}
.legende i{width:11px;height:11px;border-radius:3px;flex:none}
/* Infobulle partagée par tous les graphiques */
.infobulle{
position:fixed;z-index:80;pointer-events:none;opacity:0;transition:opacity .1s;
background:var(--nuit);border:1px solid var(--bord-clair);border-radius:8px;
padding:8px 12px;font-size:13px;color:var(--texte);white-space:nowrap;
box-shadow:0 6px 24px rgba(0,0,0,.5);
}
.infobulle.visible{opacity:1}
/* Barres horizontales */
.barres-h{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.barres-h li{display:grid;grid-template-columns:minmax(96px,1.4fr) minmax(60px,1.6fr) auto;gap:12px;align-items:center}
.bh-label{font-size:13.5px;color:var(--doux);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bh-piste{height:9px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.bh-barre{display:block;height:100%;border-radius:999px}
.bh-valeur{font-size:13.5px;font-weight:650;text-align:right;white-space:nowrap}
.bh-valeur em{display:block;font-style:normal;font-size:11.5px;font-weight:500;color:var(--faible)}
@media(max-width:560px){
.barres-h li{grid-template-columns:1fr auto;grid-template-areas:"l v" "p p";row-gap:6px}
.bh-label{grid-area:l}.bh-valeur{grid-area:v}.bh-piste{grid-area:p}
}
/* Tableau de repli sous chaque graphique */
.chiffres{margin-top:16px}
.chiffres summary{
cursor:pointer;font-size:13px;color:var(--doux);padding:7px 0;
list-style:none;display:inline-flex;align-items:center;gap:7px;
}
.chiffres summary::-webkit-details-marker{display:none}
.chiffres summary::before{content:"▸";color:var(--accent);font-size:11px}
.chiffres[open] summary::before{content:"▾"}
.chiffres summary:hover{color:var(--texte)}
.chiffres .tableau-enveloppe{margin-top:10px;max-height:320px;overflow:auto}
/* ============================ PAGE CONTACT ============================= */
/* Appeler / écrire : les deux raccourcis les plus utiles sur un téléphone,
placés avant le formulaire. */
.contact-rapide{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:22px 0 4px}
.contact-action{
justify-content:flex-start;gap:13px;padding:15px 18px;text-align:left;
font-size:15px;line-height:1.3;min-height:60px;
}
.contact-action > span:first-child{font-size:20px;line-height:1;flex:none}
.contact-action em{
display:block;font-style:normal;font-weight:500;font-size:13px;
opacity:.78;margin-top:3px;word-break:break-word;
}
.contact-grille{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;padding:22px 0 60px;align-items:start}
@media(max-width:860px){
.contact-grille{grid-template-columns:1fr;gap:18px;padding-top:18px}
/* Les coordonnées passent au-dessus du formulaire : on les lit avant d'écrire. */
.contact-infos{order:-1}
}
/* Coordonnées en liste de définitions : une colonne dès que c'est étroit,
contrairement à un tableau qui garde ses deux colonnes coûte que coûte. */
.infos-liste{margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.infos-liste > div{
display:grid;grid-template-columns:130px 1fr;gap:14px;
padding:11px 0;border-bottom:1px solid var(--bord);
}
.infos-liste > div:last-child{border-bottom:0}
.infos-liste dt{color:var(--doux);font-size:13.5px;margin:0}
.infos-liste dd{margin:0;font-size:14.5px;line-height:1.5}
.infos-liste dd a{color:var(--accent-clair);text-decoration:none;word-break:break-word}
.infos-liste dd a:hover{text-decoration:underline}
@media(max-width:520px){
.infos-liste > div{grid-template-columns:1fr;gap:3px;padding:12px 0}
.infos-liste dt{font-size:12px;text-transform:uppercase;letter-spacing:.6px}
}
/* Champ anti-robot : hors écran sans sortir du flux ni créer de débordement. */
.piege{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* ===================== ERGONOMIE TACTILE (tout le site) ================= */
@media(max-width:860px){
/* Sous 16px, Safari iOS zoome automatiquement à la mise au point d'un champ
et le visiteur se retrouve avec une page décalée. */
.champ,input.champ,select.champ,textarea.champ{font-size:16px;padding:13px 14px}
textarea.champ{min-height:132px}
/* Cibles tactiles confortables */
.btn{min-height:48px;padding:13px 20px}
.btn--pt{min-height:40px}
.entete nav a{min-height:44px;display:flex;align-items:center}
.langues a{min-width:44px;min-height:38px;display:inline-flex;align-items:center;justify-content:center}
/* Le bouton d'envoi prend toute la largeur : impossible à manquer */
form .btn[type=submit]{width:100%}
/* Le tableau de caractéristiques d'une fiche passe en une colonne */
table.specs td{display:block;width:auto !important;padding:10px 14px}
table.specs td:first-child{
padding-bottom:0;font-size:12px;text-transform:uppercase;letter-spacing:.6px;
color:var(--faible);border:0;
}
table.specs td:last-child{padding-top:3px;font-size:15px}
table.specs tr{display:block;border-bottom:1px solid var(--bord)}
table.specs tr:last-child{border-bottom:0}
table.specs td{border-bottom:0}
.titre-page{padding:26px 0 4px}
.ligne-prix{margin:14px 0 18px}
}
/* Sur grand écran, le bouton d'envoi n'a pas besoin de toute la largeur. */
@media(min-width:861px){
.contact-grille form .btn--bloc{width:auto;min-width:230px}
}
/* Accroche à côté du logo : elle s'efface dès que la barre devient étroite,
pour laisser la place au menu. */
.entete .baseline{color:var(--faible);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1100px){.entete .baseline{display:none}}
/* ===================== PAGES DE TEXTE (confidentialité…) ================ */
.texte-long{max-width:72ch;margin-bottom:60px;padding:26px 30px}
.texte-long h2{
margin:30px 0 10px;font-size:16px;letter-spacing:-.2px;color:var(--accent-clair);
padding-top:22px;border-top:1px solid var(--bord);
}
.texte-long h2:first-child{margin-top:0;padding-top:0;border-top:0}
.texte-long p{margin:0 0 14px;line-height:1.7;color:var(--doux);font-size:15px}
.texte-long p:last-child{margin-bottom:0}
.texte-long p:first-child{color:var(--faible);font-size:13.5px}
@media(max-width:620px){
.texte-long{padding:20px 18px}
.texte-long h2{margin-top:24px;padding-top:18px}
}
/* Signature du pied de page */
.pied .signature a{color:var(--doux);text-decoration:none;border-bottom:1px solid var(--bord)}
.pied .signature a:hover{color:var(--accent);border-bottom-color:var(--accent-bord)}
/* ================== STATISTIQUES : NOUVEAUX COMPOSANTS ================= */
/* Sommaire des sections */
.sommaire{
display:flex;gap:4px;flex-wrap:wrap;align-items:center;
background:var(--surface);border:1px solid var(--bord);border-radius:var(--r);
padding:8px;margin-bottom:8px;position:sticky;top:66px;z-index:14;
}
.sommaire a{
font-size:13.5px;color:var(--doux);text-decoration:none;padding:7px 12px;
border-radius:var(--r-s);white-space:nowrap;
}
.sommaire a:hover{background:var(--surface-2);color:var(--texte)}
.sommaire .sommaire-export{margin-left:auto;color:var(--accent);border:1px solid var(--accent-bord)}
.sommaire .sommaire-export:hover{background:var(--accent-sourd);color:var(--accent-clair)}
@media(max-width:860px){
.sommaire{position:static;overflow-x:auto;flex-wrap:nowrap}
.sommaire .sommaire-export{margin-left:0}
}
.section-titre{scroll-margin-top:130px}
/* Indicateur avec comparaison */
.indicateur{position:relative;display:flex;flex-direction:column;gap:2px}
.indicateur .ecart{
font-style:normal;font-size:12px;font-weight:700;margin-top:6px;
padding:2px 8px;border-radius:999px;align-self:flex-start;
}
.ecart--bon{background:var(--ok-sourd);color:var(--ok)}
.ecart--mauvais{background:var(--danger-sourd);color:var(--danger)}
.ecart--neutre{background:var(--surface-2);color:var(--doux)}
.indicateur .indic-note{
font-style:normal;font-size:11.5px;color:var(--faible);margin-top:6px;line-height:1.45;
}
.cartes-chiffres .accent b{color:var(--accent)}
/* Entonnoir */
.entonnoir{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:20px}
.entonnoir li{display:flex;flex-direction:column;gap:7px}
.ent-tete{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ent-label{font-size:14.5px;font-weight:600}
.ent-valeur{font-size:19px;font-weight:750;letter-spacing:-.4px}
.ent-piste{height:12px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.ent-barre{
height:100%;border-radius:999px;
background:linear-gradient(90deg,var(--accent),var(--accent-clair));
}
.entonnoir li:nth-child(even) .ent-barre{background:linear-gradient(90deg,#2f6db8,#3987e5)}
.ent-bas{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--faible)}
.ent-passage{color:var(--doux)}
.entonnoir .note{margin-top:2px}
/* Jauge */
.jauge{display:flex;flex-direction:column;gap:7px}
.jauge-tete{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px}
.jauge-tete span{color:var(--doux)}
.jauge-tete strong{font-size:16px;letter-spacing:-.3px}
.jauge-piste{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.jauge-barre{height:100%;border-radius:999px}
.jauge .note{margin-top:0}
/* Carte de chaleur */
.chaleur{margin-top:16px;overflow-x:auto;padding-bottom:4px}
.chaleur-heures,.chaleur-ligne{display:grid;grid-template-columns:40px repeat(24,minmax(14px,1fr));gap:3px;align-items:center}
.chaleur-heures{margin-bottom:5px}
.chaleur-heures span{font-size:10px;color:var(--faible);text-align:left}
.chaleur-ligne{margin-bottom:3px}
.chaleur-jour{font-size:11.5px;color:var(--doux);text-align:right;padding-right:8px}
.chaleur-case{
aspect-ratio:1;border-radius:3px;display:block;min-height:14px;
background:var(--surface-2);cursor:default;
}
.chaleur-case--vide{background:var(--surface-2);border:1px solid var(--bord)}
.chaleur-legende{
display:flex;align-items:center;gap:5px;margin-top:12px;
font-size:11.5px;color:var(--faible);
}
.chaleur-legende i{width:14px;height:14px;border-radius:3px;display:inline-block;aspect-ratio:auto}
.chaleur-legende span:last-child{margin-left:4px}
/* ------------------- Zone sensible : remise à zéro ---------------------- */
.bloc--sensible{
border-color:rgba(242,104,122,.34);
background:linear-gradient(180deg,var(--danger-sourd),transparent 120px),var(--surface);
}
.bloc--sensible h3{color:var(--danger)}
.liste-choix{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.liste-choix li{margin:0}
.liste-choix label{
display:flex;align-items:flex-start;gap:11px;
padding:12px 14px;border:1px solid var(--bord);border-radius:10px;
background:var(--surface-2);cursor:pointer;
}
.liste-choix label:hover{border-color:var(--bord-clair)}
.liste-choix input[type=checkbox]{margin-top:2px;width:17px;height:17px;flex:none;accent-color:var(--danger)}
.liste-choix input[type=checkbox]:disabled{opacity:.4}
.liste-choix input[type=checkbox]:disabled + span{opacity:.5}
.liste-choix label > span{display:flex;flex-direction:column;gap:2px;min-width:0}
.liste-choix strong{font-size:14.5px;font-weight:650}
.liste-choix .note{margin:0;font-size:12.5px}
label.confirme{
display:flex;align-items:flex-start;gap:11px;margin-top:16px;
font-size:13.5px;color:var(--doux);cursor:pointer;
}
label.confirme input[type=checkbox]{margin-top:1px;width:17px;height:17px;flex:none;accent-color:var(--danger)}
@media (max-width:860px){
.liste-choix label{padding:14px}
.liste-choix input[type=checkbox],
label.confirme input[type=checkbox]{width:20px;height:20px}
}
|