/* ------------------------------------------------------------------
   theme.css : thème unique (public + espace client + administration)
   Palette : noir circuit et vert du logo Sysevo ; aucune police externe
   (Loi 25 : aucune requête vers un tiers au chargement).
   ------------------------------------------------------------------ */

:root {
    --nuit: #0b0f0d;
    --nuit-2: #1a241e;
    --accent: #2b7a3d;          /* vert interface : contraste AA avec le blanc */
    --vert-logo: #6cc46e;      /* vert du logo, sur fond foncé seulement */
    --accent-fonce: #1f5c2d;
    --glace: #e2efe4;
    --glace-2: #f3f8f4;
    --fond: #f5f7f6;
    --surface: #ffffff;
    --encre: #121815;
    --encre-douce: #4d5952;
    --ligne: #d8e0db;
    --ok: #1d6a46;
    --ok-fond: #e3f2ea;
    --alerte: #a3301f;
    --alerte-fond: #fbe9e6;
    --avert: #845400;
    --avert-fond: #fdf2dc;
    --info-fond: #e9efeb;

    --police: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --police-titre: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

    --r-petit: 4px;
    --r: 8px;
    --r-grand: 14px;
    --largeur: 1140px;
    --focus: 0 0 0 3px #ffffff, 0 0 0 5px var(--accent);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}
body {
    margin: 0;
    font-family: var(--police);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--encre);
    background: var(--fond);
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: .18em; }
a:hover { color: var(--accent-fonce); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-petit); }
h1, h2, h3 { font-family: var(--police-titre); line-height: 1.2; letter-spacing: -.012em; margin: 0 0 .6em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
code { font-family: var(--mono); font-size: .88em; background: var(--glace-2); border: 1px solid var(--ligne); border-radius: var(--r-petit); padding: .05em .35em; word-break: break-all; }
hr { border: 0; border-top: 1px solid var(--ligne); margin: 1.5rem 0; }
[hidden] { display: none !important; }

.visuel-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saut { position: absolute; left: 1rem; top: -3rem; background: var(--nuit); color: #fff; padding: .5rem 1rem; z-index: 100; border-radius: var(--r); }
.saut:focus { top: 1rem; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.conteneur { width: min(100% - 2.5rem, var(--largeur)); margin-inline: auto; }
.conteneur--etroit { max-width: 720px; }
.centre { text-align: center; }
.droite { text-align: right; }
.en-ligne { display: inline-flex; align-items: center; gap: .5rem; margin: 0; flex-wrap: wrap; }
.aide { color: var(--encre-douce); font-size: .9rem; }
.facultatif { color: var(--encre-douce); font-weight: 400; font-size: .85em; }

/* Boutons --------------------------------------------------------- */
.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font: inherit; font-weight: 600; font-size: .95rem; line-height: 1.2;
    padding: .7rem 1.15rem; border-radius: var(--r);
    border: 1px solid var(--accent); background: var(--accent); color: #fff;
    text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s;
}
.bouton:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); color: #fff; }
.bouton--secondaire { background: var(--surface); color: var(--accent); border-color: var(--ligne); }
.bouton--secondaire:hover { background: var(--glace-2); color: var(--accent-fonce); border-color: var(--accent); }
.bouton--danger { background: var(--alerte); border-color: var(--alerte); }
.bouton--danger:hover { background: #82241a; border-color: #82241a; }
.bouton--petit { padding: .45rem .8rem; font-size: .88rem; }
.bouton--grand { padding: .9rem 1.5rem; font-size: 1.02rem; }
.bouton--plein { width: 100%; }
.bouton[disabled], .bouton[aria-busy="true"] { opacity: .6; cursor: progress; }
.lien-bouton { font: inherit; background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.lien-bouton--clair { color: #c8d1cb; }
.lien-bouton--danger { color: var(--alerte); }

/* Avis, badges ---------------------------------------------------- */
.avis { padding: .8rem 1rem; border-radius: var(--r); margin-bottom: 1rem; border-left: 4px solid; background: var(--info-fond); border-color: var(--accent); }
.avis--succes { background: var(--ok-fond); border-color: var(--ok); }
.avis--erreur { background: var(--alerte-fond); border-color: var(--alerte); }
.avis--alerte { background: var(--avert-fond); border-color: var(--avert); }
.badge { display: inline-block; font-size: .78rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.badge--ok { background: var(--ok-fond); color: var(--ok); }
.badge--info { background: var(--info-fond); color: var(--accent-fonce); }
.badge--alerte { background: var(--alerte-fond); color: var(--alerte); }
.badge--neutre { background: #edf0f3; color: var(--encre-douce); }
.etat { font-size: .88rem; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }
.etat::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.etat--ok { color: var(--ok); }
.etat--non { color: var(--alerte); }
.pastille { display: inline-block; min-width: 1.3rem; padding: 0 .35rem; border-radius: 999px; background: #e5484d; color: #fff; font-size: .75rem; text-align: center; margin-left: .3rem; }

/* Formulaires ----------------------------------------------------- */
.formulaire { display: grid; gap: 1rem; margin-bottom: 1rem; }
.formulaire--ligne { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.formulaire--ligne .champ { flex: 1 1 200px; }
.formulaire--ligne .champ--large { flex: 3 1 280px; }
.rangee { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; align-items: end; }
.champ { display: grid; gap: .35rem; font-weight: 600; font-size: .92rem; }
.champ .aide { font-weight: 400; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], select, textarea {
    font: inherit; font-weight: 400; color: var(--encre); width: 100%;
    padding: .62rem .75rem; border: 1px solid #b7c2bb; border-radius: var(--r); background: var(--surface);
}
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--accent); }
.case { display: flex; gap: .55rem; align-items: flex-start; font-size: .95rem; }
.case input { margin-top: .3rem; width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }
.adresse-saisie { display: flex; }
.adresse-saisie input { border-radius: var(--r) 0 0 var(--r); }
.adresse-saisie select { width: auto; max-width: 55%; border-left: 0; border-radius: 0 var(--r) var(--r) 0; background: var(--glace-2); }
.mdp-genere { font-family: var(--mono); }
.separateur { display: flex; align-items: center; gap: .75rem; color: var(--encre-douce); font-size: .85rem; margin: 1rem 0; }
.separateur::before, .separateur::after { content: ""; flex: 1; border-top: 1px solid var(--ligne); }

/* Tableaux ------------------------------------------------------- */
.defilement { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; font-size: .94rem; }
.tableau th, .tableau td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.tableau thead th { font-size: .82rem; color: var(--encre-douce); font-weight: 600; border-bottom-width: 2px; }
.tableau tbody tr:hover { background: var(--glace-2); }
.tableau .droite { text-align: right; }
.tableau--compact th, .tableau--compact td { padding: .45rem .5rem; font-size: .88rem; }
.journal--erreur td:first-child { box-shadow: inset 3px 0 var(--alerte); }
.journal--securite td:first-child { box-shadow: inset 3px 0 var(--avert); }
.journal--avertissement td:first-child { box-shadow: inset 3px 0 #c9a227; }
.details-json { font-family: var(--mono); font-size: .8rem; white-space: pre-wrap; background: var(--glace-2); padding: .5rem; border-radius: var(--r-petit); }

.pagination { display: flex; gap: .3rem; flex-wrap: wrap; margin: 1.25rem 0; }
.pagination a, .pagination span { padding: .35rem .7rem; border: 1px solid var(--ligne); border-radius: var(--r-petit); text-decoration: none; background: var(--surface); }
.pagination [aria-current] { background: var(--nuit); color: #fff; border-color: var(--nuit); }

/* ================================================================
   PUBLIC
   ================================================================ */
.entete { background: var(--nuit); color: #fff; position: sticky; top: 0; z-index: 20; }
.entete__barre { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 1rem; }
.marque { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--police-titre); font-weight: 700; font-size: 1.2rem; color: #fff; text-decoration: none; letter-spacing: -.02em; }
.marque:hover { color: #fff; }
.marque__logo { display: block; height: 46px; width: auto; }
.lateral .marque__logo { height: 42px; }
.entete__nav { display: flex; align-items: center; gap: 1.4rem; }
.entete__nav a { color: #dbe3de; text-decoration: none; font-weight: 500; }
.entete__nav a:hover, .entete__nav a[aria-current] { color: #fff; }
.entete__nav a[aria-current] { text-decoration: underline; text-underline-offset: .4em; }
.entete__nav .bouton { color: #fff; }
.entete__menu { display: none; background: none; border: 1px solid rgba(255,255,255,.3); border-radius: var(--r); width: 44px; height: 40px; cursor: pointer; align-items: center; justify-content: center; }
.entete__menu-icone, .entete__menu-icone::before, .entete__menu-icone::after { display: block; width: 20px; height: 2px; background: #fff; position: relative; }
.entete__menu-icone::before, .entete__menu-icone::after { content: ""; position: absolute; left: 0; }
.entete__menu-icone::before { top: -6px; }
.entete__menu-icone::after { top: 6px; }

@media (max-width: 760px) {
    .entete__menu { display: inline-flex; }
    .entete__nav { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--nuit); flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1.25rem 1.25rem; border-top: 1px solid var(--nuit-2); }
    .entete__nav.ouvert { display: flex; }
    .entete__nav a { padding: .8rem 0; border-bottom: 1px solid var(--nuit-2); }
    .entete__nav .bouton { margin-top: .8rem; border-bottom: 0; }
}

.flashs { padding-top: 1rem; }

.hero { background: var(--nuit); color: #fff; padding: 4.5rem 0 5rem; overflow: hidden; }
.hero__grille { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3.5rem; align-items: center; }
.hero__titre { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.06; max-width: 15ch; margin-bottom: 1.25rem; }
.hero__intro { font-size: 1.15rem; color: #c8d1cb; max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0 1rem; }
.hero .bouton--secondaire { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.hero .bouton--secondaire:hover { background: var(--nuit-2); border-color: #fff; color: #fff; }
.hero__note { color: #9aa79f; font-size: .92rem; }

/* L'élément signature : l'adresse du client et ses services */
.adresse-demo { background: var(--surface); color: var(--encre); border-radius: var(--r-grand); padding: 1.6rem 1.6rem 1rem; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55); }
.adresse-demo__adresse { font-family: var(--police-titre); font-size: clamp(1.25rem, 2.3vw, 1.6rem); font-weight: 700; letter-spacing: -.02em; margin-bottom: 1.2rem; overflow-wrap: anywhere; }
.adresse-demo__adresse span { color: var(--accent); }
.adresse-demo__liste { list-style: none; margin: 0; padding: 0; }
.adresse-demo__liste li { display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; padding: .75rem 0; border-top: 1px solid var(--ligne); font-weight: 600; }
.adresse-demo__liste small { grid-column: 2; font-weight: 400; color: var(--encre-douce); font-size: .88rem; }
.point { width: .7rem; height: .7rem; border-radius: 50%; margin-top: .4rem; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-fond); }

.bande { padding: 4.5rem 0; }
.bande--claire { background: var(--surface); border-block: 1px solid var(--ligne); }
.bande__titre { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 1.75rem; }
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2.5rem 2rem; }
.service { border-top: 3px solid var(--nuit); padding-top: 1rem; }
.service p { color: var(--encre-douce); }
.etapes__liste { counter-reset: etape; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; }
.etapes__liste li { counter-increment: etape; position: relative; padding-top: 3.2rem; color: var(--encre-douce); }
.etapes__liste li::before { content: counter(etape); position: absolute; top: 0; left: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--glace); color: var(--nuit); font-weight: 700; display: grid; place-items: center; }
.etapes__liste strong { color: var(--encre); display: block; }
.appel { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.appel p { max-width: 60ch; color: var(--encre-douce); }

.page { padding: 3.5rem 0 4.5rem; }
.page__titre { font-size: clamp(1.8rem, 3.4vw, 2.5rem); letter-spacing: -.025em; }
.page__intro { font-size: 1.1rem; color: var(--encre-douce); max-width: 60ch; margin-bottom: 2rem; }
.texte-long { line-height: 1.7; }
.texte-long h2 { margin-top: 2rem; }

.bascule { display: inline-flex; border: 1px solid var(--ligne); border-radius: 999px; padding: 4px; background: var(--surface); margin-bottom: 2rem; }
.bascule a { padding: .45rem 1rem; border-radius: 999px; text-decoration: none; color: var(--encre-douce); font-weight: 600; font-size: .92rem; }
.bascule a[aria-current] { background: var(--nuit); color: #fff; }

.forfaits { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; align-items: stretch; }
.forfait { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-grand); padding: 1.75rem; display: flex; flex-direction: column; }
.forfait--actuel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.forfait__nom { font-size: 1.3rem; margin-bottom: .25rem; }
.forfait__desc { color: var(--encre-douce); min-height: 3em; }
.forfait__prix { font-family: var(--police-titre); font-size: 2.1rem; font-weight: 700; letter-spacing: -.03em; margin: .5rem 0 1rem; }
.forfait__prix span { font-size: .95rem; font-weight: 500; color: var(--encre-douce); letter-spacing: 0; }
.forfait__liste { list-style: none; padding: 0; margin: 0 0 1.5rem; flex: 1; }
.forfait__liste li { padding: .45rem 0 .45rem 1.5rem; border-top: 1px solid var(--glace); position: relative; }
.forfait__liste li::before { content: ""; position: absolute; left: .2rem; top: .95rem; width: .55rem; height: .3rem; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.forfait__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.forfaits--compact .forfait { padding: 1.25rem; }
.forfaits--compact .forfait__prix { font-size: 1.6rem; margin-bottom: 0; }

.page--auth { display: grid; place-items: start center; }
.carte-auth { width: min(100% - 2.5rem, 440px); background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-grand); padding: 2rem; }
.carte-auth--large { width: min(100% - 2.5rem, 600px); }
.carte-auth__titre { font-size: 1.6rem; }
.carte-auth__liens { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 0; font-size: .92rem; }

.pied { background: var(--nuit); color: #c8d1cb; padding: 3rem 0 1.5rem; margin-top: auto; }
.pied__grille { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.pied__nom { color: #fff; font-weight: 700; font-size: 1.1rem; margin-bottom: .3rem; }
.pied__texte { max-width: 40ch; font-size: .92rem; }
.pied__liens { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; }
.pied__liens a, .pied__liens .lien-bouton { color: #c8d1cb; font-size: .92rem; }
.pied__bas { border-top: 1px solid var(--nuit-2); margin-top: 2rem; padding-top: 1.25rem; font-size: .85rem; color: #8c9891; }
body.public { display: flex; flex-direction: column; min-height: 100vh; }
body.public main { flex: 1; }

/* Loi 25 : noms neutres (Brave) */
.loi25 { position: fixed; inset: auto 1rem 1rem 1rem; z-index: 60; display: flex; justify-content: center; pointer-events: none; }
.loi25__boite { pointer-events: auto; width: min(100%, 720px); background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-grand); padding: 1.25rem 1.4rem; box-shadow: 0 20px 50px -15px rgba(5,10,7,.5); }
.loi25__titre { font-size: 1.1rem; }
.loi25__options { display: grid; gap: .4rem; margin-bottom: 1rem; }
.loi25__actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

@media (max-width: 860px) {
    .hero { padding: 3rem 0 3.5rem; }
    .hero__grille { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ================================================================
   ESPACE CONNECTÉ
   ================================================================ */
body.app { background: var(--fond); }
.app__cadre { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.lateral { background: var(--nuit); color: #dbe3de; padding: 1.25rem 1rem; display: flex; flex-direction: column; gap: .4rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.lateral .marque { margin: 0 .5rem 1.2rem; }
.lateral__compte { margin: 0 .6rem .4rem; font-size: .82rem; color: #9aa79f; overflow-wrap: anywhere; }
.lateral__section { margin: 1.4rem .6rem .3rem; font-size: .8rem; font-weight: 700; color: #f0c674; }
.lateral__nav { display: grid; gap: 2px; }
.lateral__nav a { color: #dbe3de; text-decoration: none; padding: .55rem .7rem; border-radius: var(--r); font-size: .95rem; }
.lateral__nav a:hover { background: var(--nuit-2); color: #fff; }
.lateral__nav a[aria-current] { background: #fff; color: var(--nuit); font-weight: 600; }
.lateral__bas { margin-top: auto; padding: 1rem .6rem 0; border-top: 1px solid var(--nuit-2); display: grid; gap: .3rem; font-size: .88rem; }
.lateral__usager { color: #fff; overflow-wrap: anywhere; }
.lateral__bas form { margin: 0; }

.app__principal { min-width: 0; }
.app__entete { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 2rem .4rem; }
.app__titre { font-size: 1.6rem; margin: 0; overflow-wrap: anywhere; }
.app__contenu { padding: 1rem 2rem 3rem; max-width: 1180px; }
.entete__menu--app { border-color: var(--ligne); }
.entete__menu--app .entete__menu-icone, .entete__menu--app .entete__menu-icone::before, .entete__menu--app .entete__menu-icone::after { background: var(--nuit); }

.bandeau-imp { background: var(--avert-fond); color: var(--avert); border-bottom: 1px solid #e6cf99; padding: .6rem 1.25rem; font-size: .92rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

@media (max-width: 900px) {
    .app__cadre { grid-template-columns: 1fr; }
    .lateral { position: fixed; inset: 0 auto 0 0; width: 270px; z-index: 50; transform: translateX(-100%); transition: transform .2s; }
    .lateral.ouvert { transform: none; box-shadow: 0 0 0 100vmax rgba(5,10,7,.5); }
    .entete__menu--app { display: inline-flex; }
    .app__entete, .app__contenu { padding-inline: 1.1rem; }
}

.bloc { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-grand); padding: 1.4rem 1.5rem; margin-bottom: 1.25rem; }
.bloc > h2:first-child { margin-bottom: 1rem; }
.bloc__entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.bloc__entete h2 { margin: 0; }
.bloc--accent { border-color: var(--accent); background: var(--glace-2); }
.bloc--danger { border-color: #e7c2bc; }
.bloc--danger summary, .site__danger summary { cursor: pointer; color: var(--alerte); font-weight: 600; }
.bloc--danger[open] summary { margin-bottom: 1rem; }
.vide { color: var(--encre-douce); }
div.vide, section.vide { text-align: left; }
.fil { font-size: .9rem; color: var(--encre-douce); margin-top: -.5rem; }
.note-essai { background: var(--glace); border-radius: var(--r); padding: .6rem 1rem; display: inline-block; }
.deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 1.25rem; }

.jauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.jauge { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-grand); padding: 1rem 1.2rem; }
.jauge__libelle { font-size: .85rem; color: var(--encre-douce); margin: 0; }
.jauge__valeur { font-family: var(--police-titre); font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; margin: .1rem 0 .4rem; }
.jauge__valeur span { font-size: .95rem; font-weight: 500; color: var(--encre-douce); }
.jauge__valeur--vide { font-size: 1.1rem; color: var(--encre-douce); }
meter { width: 100%; height: .55rem; }
meter::-webkit-meter-bar { background: var(--glace); border: 0; border-radius: 999px; height: .55rem; }
meter::-webkit-meter-optimum-value { background: var(--accent); border-radius: 999px; }
meter::-moz-meter-bar { background: var(--accent); border-radius: 999px; }

.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.chiffre { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-grand); padding: 1rem 1.2rem; text-decoration: none; color: inherit; display: grid; }
a.chiffre:hover { border-color: var(--accent); }
.chiffre__valeur { font-family: var(--police-titre); font-size: 1.65rem; font-weight: 700; letter-spacing: -.02em; }
.chiffre__libelle { font-size: .85rem; color: var(--encre-douce); }
.chiffres--secondaires .chiffre__valeur { font-size: 1.3rem; }

.raccourcis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; }
.raccourcis li { border: 1px solid var(--ligne); border-radius: var(--r); padding: .9rem 1rem; display: grid; }
.raccourcis a { font-weight: 600; }
.raccourcis span { font-size: .85rem; color: var(--encre-douce); }

.liste-simple { list-style: none; margin: 0; padding: 0; }
.liste-simple li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--glace); }
.liste-simple li span:last-child { color: var(--encre-douce); font-size: .88rem; }
.colonnes-adresses { columns: 2 280px; margin: 0; padding-left: 1.1rem; }
.colonnes-adresses li { break-inside: avoid; padding: .15rem 0; }

.resume { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem 1.5rem; margin: 0 0 1.25rem; }
.resume dt { font-size: .82rem; color: var(--encre-douce); }
.resume dd { margin: .1rem 0 0; font-weight: 600; }
.resume--compact { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--glace); }

.barre-filtres { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: 1rem; }
.barre-filtres .champ { flex: 1 1 160px; }
.barre-filtres .champ--large { flex: 3 1 280px; }
.actions-fiche { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1.25rem; }
.actions-user { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0; }
.actions-user select { width: auto; padding: .35rem .5rem; font-size: .85rem; }

/* DNS ------------------------------------------------------------ */
.resultat-verif { font-weight: 600; min-height: 1.5em; }
.resultat-verif.ok { color: var(--ok); }
.resultat-verif.non { color: var(--alerte); }
.dns { display: grid; gap: .75rem; }
.dns__ligne { border: 1px solid var(--ligne); border-radius: var(--r); padding: .9rem 1rem; }
.dns__tete { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.dns__type { font-family: var(--mono); font-weight: 700; background: var(--nuit); color: #fff; padding: .1rem .5rem; border-radius: var(--r-petit); font-size: .82rem; }
.dns__requis { font-size: .82rem; color: var(--encre-douce); }
.dns__etat { margin-left: auto; }
.dns__champs { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0 0 .5rem; }
.dns__champs > div { display: contents; }
.dns__champs dt { font-size: .85rem; color: var(--encre-douce); padding-top: .15rem; }
.dns__champs dd { margin: 0; display: flex; gap: .5rem; align-items: flex-start; min-width: 0; }
.dns__valeur { display: block; max-height: 7.5em; overflow-y: auto; }
.dns__message { font-size: .88rem; margin: 0; }
.dns__option { margin: .3rem 0 .5rem; padding: .6rem .75rem; background: var(--ok-fond); border-radius: var(--r-petit); }
.dns__option .aide { display: block; margin: .15rem 0 0; }
.dns__ligne.ok { border-color: #a9d3bd; }
.dns__ligne.non { border-color: #e7c2bc; }
.dns__ligne > .aide { margin-bottom: .2rem; }
.copier { font: inherit; font-size: .78rem; font-weight: 600; padding: .15rem .5rem; border: 1px solid var(--ligne); border-radius: var(--r-petit); background: var(--surface); color: var(--accent); cursor: pointer; flex: none; }
.copier:hover { border-color: var(--accent); }
.copier.copie { color: var(--ok); border-color: var(--ok); }

/* Boîtes, sites, accès -------------------------------------------- */
.filtre select { width: auto; }
.liste-boites { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ligne); }
.boite { border-bottom: 1px solid var(--ligne); }
.boite summary { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; padding: .8rem .4rem; cursor: pointer; list-style: none; }
.boite summary::-webkit-details-marker { display: none; }
.boite summary::before { content: ""; width: .45rem; height: .45rem; border-right: 2px solid var(--encre-douce); border-bottom: 2px solid var(--encre-douce); transform: rotate(-45deg); transition: transform .15s; }
.boite details[open] summary::before { transform: rotate(45deg); }
.boite__adresse { font-weight: 600; overflow-wrap: anywhere; }
.boite__nom { color: var(--encre-douce); }
.boite__meta { margin-left: auto; color: var(--encre-douce); font-size: .9rem; }
.boite__actions { padding: .4rem .4rem 1.2rem 1.6rem; display: grid; gap: .5rem; }
.boite__actions .formulaire { margin: 0; }
.formulaire--danger { border-top: 1px dashed #e7c2bc; padding-top: .8rem; margin-top: .4rem; }

.site { border: 1px solid var(--ligne); border-radius: var(--r); padding: 1rem 1.1rem; margin-bottom: .9rem; }
.site__tete { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.site__tete h3 { margin: 0; }
.site__details { margin: .5rem 0; padding-left: 1.1rem; color: var(--encre-douce); font-size: .92rem; }
.site__danger { margin-top: .5rem; }
.site__danger[open] summary { margin-bottom: .8rem; }

.acces { display: grid; gap: .5rem; margin: 0; }
.acces > div { display: grid; grid-template-columns: minmax(130px, 220px) 1fr; gap: 1rem; align-items: start; }
.acces dt { color: var(--encre-douce); font-size: .9rem; }
.acces dd { margin: 0; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
@media (max-width: 560px) { .acces > div { grid-template-columns: 1fr; gap: .1rem; } .dns__champs { grid-template-columns: 1fr; } }

.grille-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 1.25rem; }
.app-dl p { color: var(--encre-douce); }
.app-dl__liens { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.app-dl__liens a { display: inline-block; padding: .4rem .8rem; border: 1px solid var(--ligne); border-radius: var(--r); text-decoration: none; font-weight: 600; font-size: .9rem; }
.app-dl__liens a:hover { border-color: var(--accent); }
.config { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }

.etapes-a2f { padding-left: 1.2rem; display: grid; gap: 1rem; }
.cle-a2f { font-size: 1.05rem; letter-spacing: .08em; }

.message--lu { opacity: .72; }
.message__texte { white-space: normal; margin: 0; }

@media print {
    .lateral, .app__entete .entete__menu, .loi25, .entete, .pied { display: none !important; }
    .app__cadre { display: block; }
}

/* Configuration des services -------------------------------------- */
.page-intro-app { color: var(--encre-douce); max-width: 75ch; }
.ancres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.ancres a { padding: .35rem .8rem; border: 1px solid var(--ligne); border-radius: 999px; text-decoration: none; font-size: .9rem; background: var(--surface); }
.ancres a:hover { border-color: var(--accent); }
.grille-config { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.1rem 1.5rem; }
.champ--case { align-content: start; font-weight: 400; }
.case--petite { font-weight: 400; font-size: .85rem; display: flex; gap: .4rem; align-items: center; }
.champ--sudo { max-width: 380px; padding-top: .5rem; border-top: 1px dashed var(--ligne); }
.source { font-size: .7rem; font-weight: 700; padding: .05rem .4rem; border-radius: var(--r-petit); vertical-align: middle; margin-left: .25rem; }
.source--admin { background: var(--info-fond); color: var(--accent-fonce); }
.source--env { background: #edf0f3; color: var(--encre-douce); }
.source--defaut { background: #fff; color: var(--encre-douce); border: 1px dashed var(--ligne); }
.actions-config { display: flex; flex-wrap: wrap; gap: .6rem; }
.resultats-test:empty { display: none; }
.resultats-test { border-top: 1px solid var(--ligne); padding-top: 1rem; }
.resultats-test__resume { font-weight: 700; }
.resultats-test__resume.ok { color: var(--ok); }
.resultats-test__resume.non { color: var(--alerte); }
.etapes-test { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.etape-test { padding: .55rem .8rem .55rem 2.1rem; border-radius: var(--r); position: relative; font-size: .92rem; overflow-wrap: anywhere; }
.etape-test::before { position: absolute; left: .7rem; top: .55rem; font-weight: 700; }
.etape-test--ok { background: var(--ok-fond); }
.etape-test--ok::before { content: "\2713"; color: var(--ok); }
.etape-test--erreur { background: var(--alerte-fond); }
.etape-test--erreur::before { content: "\2715"; color: var(--alerte); }
.etape-test--avert { background: var(--avert-fond); }
.etape-test--avert::before { content: "!"; color: var(--avert); }
.etape-test--info { background: var(--glace-2); }
.etape-test--info::before { content: "i"; color: var(--accent); font-style: italic; }

/* Sélecteur de langue -------------------------------------------- */
.langues { display: inline-flex; border: 1px solid var(--ligne); border-radius: 999px; padding: 2px; font-size: .82rem; font-weight: 700; }
.langues a { padding: .2rem .55rem; border-radius: 999px; text-decoration: none; color: var(--encre-douce); }
.langues a[aria-current] { background: var(--nuit); color: #fff; }
.langues--sombre { border-color: rgba(255,255,255,.3); }
.langues--sombre a { color: #c8d1cb; }
.langues--sombre a[aria-current] { background: #fff; color: var(--nuit); }
.langues--app { margin-left: auto; }
.champ--court { max-width: 320px; }
@media (max-width: 760px) { .entete__nav .langues { align-self: flex-start; margin-top: .8rem; } .entete__nav .langues a { border-bottom: 0; padding: .3rem .7rem; } }

/* Touches du logo ------------------------------------------------- */
.entete { border-bottom: 1px solid var(--nuit-2); }
.hero { background: radial-gradient(ellipse at 85% 20%, rgba(108,196,110,.10), transparent 55%), var(--nuit); }
.hero .bouton:not(.bouton--secondaire) { background: var(--vert-logo); border-color: var(--vert-logo); color: var(--nuit); }
.hero .bouton:not(.bouton--secondaire):hover { background: #82d384; border-color: #82d384; color: var(--nuit); }
.lateral__nav a[aria-current] { box-shadow: inset 3px 0 var(--vert-logo); }
.lateral__section { color: var(--vert-logo); }
.pied__nom { color: var(--vert-logo); }

/* Déconnexion dans les menus */
.lateral__nav form { margin: 0; }
.lateral__lien { font: inherit; font-size: .95rem; width: 100%; text-align: left; background: none; border: 0; color: #dbe3de; padding: .55rem .7rem; border-radius: var(--r); cursor: pointer; }
.lateral__lien:hover { background: var(--nuit-2); color: #fff; }
.lateral__sep { border-top: 1px solid var(--nuit-2); margin: .5rem .6rem; }
.entete__nav form { margin: 0; }
.entete__nav .lien-bouton { color: #dbe3de; text-decoration: none; font-weight: 500; }
.entete__nav .lien-bouton:hover { color: #fff; }

/* Abonnement : forfait visé, options à la carte -------------------- */
.forfait--vise { border-color: var(--vert-logo); box-shadow: 0 0 0 3px rgba(108,196,110,.25); }
.bienvenue .bouton { margin-top: .25rem; }
.options { display: grid; gap: .75rem; }
.option { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border: 1px solid var(--ligne); border-radius: var(--r); padding: .9rem 1rem; }
.option--active { border-color: var(--accent); background: var(--glace-2); }
.option h3 { margin: 0 0 .2rem; }
.option p { margin: 0; color: var(--encre-douce); font-size: .92rem; }
.option .option__prix { color: var(--encre); font-weight: 700; margin-top: .3rem; }
.option__prix span { font-weight: 400; color: var(--encre-douce); }
.option__quantite { display: flex; align-items: center; gap: .5rem; margin: 0; }
.option__quantite .bouton { min-width: 2.4rem; font-size: 1.1rem; }
.option__q { min-width: 2rem; text-align: center; font-weight: 700; font-size: 1.1rem; }
.tarifs__soustitre { margin-top: 3rem; font-size: 1.6rem; }
.carte-options { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.carte-options li { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-grand); padding: 1.1rem 1.25rem; display: grid; gap: .3rem; }
.carte-options span { color: var(--encre-douce); font-size: .92rem; }
.carte-options em { font-style: normal; font-weight: 700; }

/* Renvoi « nom de domaine non inclus » */
.renvoi { color: var(--encre-douce); margin-left: .1rem; }
.note-domaine { color: var(--encre-douce); font-size: .92rem; max-width: 75ch; margin-top: 1.25rem; }

/* Comptes FTP et bases d'un site */
.liste-comptes { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 1px solid var(--ligne); }
.liste-comptes > li { border-bottom: 1px solid var(--ligne); }
.liste-comptes summary { padding: .7rem .3rem; cursor: pointer; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.liste-comptes__actions { padding: .2rem .3rem 1rem 1.2rem; display: grid; gap: .6rem; }
.liste-comptes__actions .formulaire { margin: 0; }
.prefixe { display: inline-flex; align-items: center; padding: 0 .6rem; border: 1px solid #b7c2bb; border-right: 0; border-radius: var(--r) 0 0 var(--r); background: var(--glace-2); font-family: var(--mono); font-size: .9rem; color: var(--encre-douce); }
.adresse-saisie .prefixe + input { border-radius: 0 var(--r) var(--r) 0; }

/* Jauges cliquables */
a.jauge { text-decoration: none; color: inherit; display: block; }
a.jauge:hover { border-color: var(--accent); }

/* Stockage */
.stockage__total { font-size: 1.15rem; margin-bottom: .4rem; }
.stockage__jauge { width: 100%; height: 1rem; }
.evolution { width: 100%; height: 120px; display: block; }
.evolution rect { fill: var(--accent); }
.evolution rect:hover { fill: var(--vert-logo); }

/* Transfert d'un domaine : avertissement sur les partages */
.transfert-partages { border-left-width: 6px; color: var(--alerte); }
.transfert-partages h2 { color: var(--alerte); font-size: 1.15rem; margin: 0 0 .5rem; }
.transfert-partages ul { margin: .4rem 0 0; padding-left: 1.2rem; color: var(--encre); }
.transfert-partages code { overflow-wrap: anywhere; }

/* Onglets des groupes du menu admin (Offre et facturation, Journal et stockage, Réglages) */
.onglets { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--ligne); margin: 0 0 1.5rem; }
.onglets a { padding: .6rem 1rem; text-decoration: none; color: var(--encre-douce); font-weight: 600; font-size: .95rem; border-bottom: 3px solid transparent; margin-bottom: -1px; border-radius: var(--r) var(--r) 0 0; }
.onglets a:hover { color: var(--encre); background: var(--glace); }
.onglets a[aria-current] { color: var(--encre); border-bottom-color: var(--accent); }
@media (max-width: 600px) {
    .onglets { flex-wrap: nowrap; overflow-x: auto; }
    .onglets a { white-space: nowrap; }
}