/* Thème sombre de l'app : le bloc <style> de la maquette docs/maquettes/accueil-v4-sombre.html,
   repris tel quel. La maquette fait foi : on ne retouche pas ce fichier, on le régénère.
   Seuls écarts permis :
   - chaque sélecteur est préfixé par .theme-sombre (la classe du <body> connecté) ;
   - les @font-face sont dans identite.css ;
   - --accent, --force et --image ne sont pas déclarés ici : style_personnalisation les pose
     sur <body> à partir des réglages enregistrés ;
   - « *{box-sizing} » et « a{color;text-decoration} » sont déjà dans le preflight de Tailwind
     (les répéter hors couche écraserait les utilitaires des autres pages).
   Ce que la maquette ne montre pas (repli sans JavaScript, logos d'entreprise, encoches,
   pages hors accueil) vit dans sombre_complements.css. */
/* Maquette de l'accueil jfb, v4 sombre. Même structure que la v4 ; habillage du guide de marque :
   noir mat, charbon, blanc cassé, Space Grotesk et Satoshi, plus UN accent turquoise.
   L'accent ne sert qu'à quatre choses : l'action principale, l'onglet actif, le focus clavier, les statuts.
   Données d'exemple, aucun lien actif. Forçage pour les captures : ?nav=index | rail | dock. */
.theme-sombre{
  --noir:#121212; --panneau:#1B1B1B; --charbon:#2F2F2F; --blanc:#F9F9F9;
  --ligne:#2F2F2F; --ligne-forte:#474747; --doux:#B5B5B5; --discret:#8C8C8C;
  /* Lueur : couleur d'accent choisie par l'utilisatrice dans « Personnaliser » ; l'encre et la lueur en découlent */
  --accent-encre:color-mix(in srgb,var(--accent) 14%,#080808);
  --lueur:0 0 calc(6px + var(--force)*.4px) color-mix(in srgb,var(--accent) calc(var(--force)*1%),transparent);
  --titre:"Space Grotesk",system-ui,sans-serif; --texte:"Satoshi",system-ui,sans-serif;
}
body.theme-sombre{margin:0;color:var(--blanc);font:15px/1.5 var(--texte);background:var(--noir);min-height:100vh}
.theme-sombre a:focus-visible,.theme-sombre button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.theme-sombre svg.i{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.theme-sombre .etiquette{font:600 11px var(--titre);letter-spacing:.16em;text-transform:uppercase;color:var(--doux)}

/* Bandeau d'accueil : la photo d'architecture, en couleur, qui se fond dans le noir */
.theme-sombre .bandeau{position:relative;margin:0 0 22px;padding:30px 28px 26px;border-radius:8px;overflow:hidden;border:1px solid var(--ligne);
  background:linear-gradient(90deg,var(--noir) 0%,rgba(18,18,18,.75) 30%,rgba(18,18,18,0) 62%),var(--image) 80% 32%/cover;}
.theme-sombre .bandeau>*{position:relative;z-index:1}
.theme-sombre .filet{display:block;width:40px;height:2px;background:var(--blanc);margin-bottom:14px}
.theme-sombre h1{font:600 clamp(1.7rem,3.4vw,2.3rem)/1.1 var(--titre);letter-spacing:-.02em;margin:0 0 6px}
.theme-sombre .date{color:var(--doux);font-size:14px}
.theme-sombre .outils{position:absolute;top:24px;right:24px;display:flex;gap:8px}
.theme-sombre .recherche,.theme-sombre .personnaliser{display:inline-flex;gap:10px;align-items:center;padding:9px 14px;border-radius:4px;color:var(--doux);font-size:14px;border:1px solid var(--ligne-forte);background:rgba(18,18,18,.7)}
.theme-sombre .personnaliser{cursor:pointer;font:inherit;font-size:14px}
.theme-sombre .personnaliser .pastille{width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:var(--lueur)}
.theme-sombre .recherche kbd{font:11px var(--titre);border:1px solid var(--ligne-forte);border-radius:3px;padding:1px 6px}

/* ---------- Contenu ---------- */
.theme-sombre main{padding:24px clamp(16px,3.5vw,48px) 130px;max-width:1120px}

/* Actions rapides : boutons secondaires du guide, contour clair, aucune couleur */
.theme-sombre .actions{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.theme-sombre .actions a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:0 16px;border-radius:4px;
  font-weight:600;font-size:15px;border:1px solid var(--ligne-forte);background:var(--panneau);transition:border-color .15s,background .15s}
.theme-sombre .actions a span{display:flex;align-items:center;gap:12px}
.theme-sombre .actions a:hover{border-color:var(--blanc);background:var(--charbon)}
.theme-sombre .actions .fleche{width:16px;height:16px;color:var(--discret)}

.theme-sombre .grille{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
.theme-sombre .panneau{border-radius:8px;padding:20px 22px;background:var(--panneau);border:1px solid var(--ligne)}
/* Cartes : l'image en touche discrète, cadrage propre à chaque carte ; le texte reste sur fond presque opaque */
.theme-sombre .avec-image{background:linear-gradient(var(--sens,100deg),var(--panneau) 0%,var(--panneau) 48%,rgba(27,27,27,.86) 72%,rgba(27,27,27,.55) 100%),var(--image) var(--cadrage,right center)/cover}
.theme-sombre .action{--cadrage:78% 22%}
.theme-sombre .heures{--cadrage:92% 70%;--sens:120deg}
.theme-sombre .mandats{--cadrage:70% 8%;--sens:170deg;background:linear-gradient(180deg,rgba(27,27,27,.5) 0%,var(--panneau) 110px),var(--image) var(--cadrage)/100% auto no-repeat,var(--panneau)}
.theme-sombre .puce-icone{display:inline-flex;align-items:center;gap:8px}
.theme-sombre .puce-icone svg{width:16px;height:16px}

/* Prochaine action : seul bouton en couleur de l'écran */
.theme-sombre .action h2{font:600 1.35rem/1.2 var(--titre);margin:10px 0 4px;letter-spacing:-.01em}
.theme-sombre .action p{margin:0 0 16px;color:var(--doux)}
.theme-sombre .bouton{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;border-radius:4px;background:var(--accent);color:var(--accent-encre);font-weight:700;box-shadow:var(--lueur)}
.theme-sombre .bouton svg{width:18px;height:18px}
.theme-sombre .ensuite{margin-top:18px;border-top:1px solid var(--ligne)}
.theme-sombre .ensuite a{display:flex;justify-content:space-between;gap:12px;padding:11px 0;font-size:14px;border-bottom:1px solid var(--ligne)}
.theme-sombre .ensuite a:last-child{border-bottom:0}
.theme-sombre .ensuite span{color:var(--doux)}

/* Anneau : blanc par défaut, accent quand c'est un statut à remarquer */
.theme-sombre .anneau{--p:50;--c:var(--blanc);position:relative;flex:none;width:var(--t,56px);height:var(--t,56px);border-radius:50%;
  background:conic-gradient(var(--c) calc(var(--p)*1%),var(--charbon) 0);display:grid;place-items:center}
.theme-sombre .anneau::before{content:"";position:absolute;inset:calc(var(--t,56px)*.1);border-radius:50%;background:var(--panneau)}
.theme-sombre .mandat.presque .anneau{box-shadow:var(--lueur)}
.theme-sombre .anneau b{position:relative;font:600 calc(var(--t,56px)*.24) var(--titre)}

/* Heures facturées */
.theme-sombre .heures .corps{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px}
.theme-sombre .gros{font:600 clamp(2.2rem,5vw,3rem)/1 var(--titre);letter-spacing:-.03em}
.theme-sombre .heures .sous{color:var(--doux);font-size:13px;margin-top:8px}
.theme-sombre .heures .sous b{color:var(--blanc)}
.theme-sombre .jours{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:16px;text-align:center}
.theme-sombre .jours div{padding:6px 0;border-radius:4px;background:var(--noir)}
.theme-sombre .jours span{display:block;font:600 10px var(--titre);letter-spacing:.12em;color:var(--doux)}
.theme-sombre .jours b{display:block;font:600 14px var(--titre);margin-top:2px}
.theme-sombre .jours .zero b{color:var(--discret);font-weight:500}
.theme-sombre .mois{margin-top:14px;padding-top:12px;border-top:1px solid var(--ligne);display:flex;justify-content:space-between;align-items:baseline;color:var(--doux);font-size:14px}
.theme-sombre .mois b{font:600 1.15rem var(--titre);color:var(--blanc)}

/* Mandats en cours */
.theme-sombre .mandats{margin-top:16px}
.theme-sombre .mandats header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.theme-sombre .mandats h2{font:600 1.15rem var(--titre);margin:0}
.theme-sombre .reserve{display:inline-flex;align-items:center;gap:10px;padding:6px 12px;border-radius:4px;border:1px solid var(--ligne-forte);font-size:13px;color:var(--doux)}
.theme-sombre .reserve b{color:var(--blanc)}
.theme-sombre .mandats ul{list-style:none;margin:0;padding:0}
.theme-sombre .mandat a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--ligne)}
.theme-sombre .mandat strong{display:block;font-weight:600}
.theme-sombre .mandat .detail{color:var(--doux);font-size:13px}
.theme-sombre .mandat .anneau{--t:60px}
/* États : contour neutre, sauf ce qui demande un geste (dépassé = plein blanc) et ce qui va bien (presque = accent) */
.theme-sombre .etat{display:inline-flex;align-items:center;gap:6px;border-radius:3px;padding:3px 10px;font:600 11px var(--titre);letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--ligne-forte);color:var(--doux);white-space:nowrap}
.theme-sombre .etat svg{width:13px;height:13px}
.theme-sombre .mandat.depasse .etat{background:var(--blanc);border-color:var(--blanc);color:var(--noir)}
.theme-sombre .mandat.presque .anneau{--c:var(--accent)}
.theme-sombre .mandat.presque .etat{border-color:var(--accent);color:var(--accent)}
.theme-sombre .anneau.libre{background:var(--charbon)}
.theme-sombre .note{margin-top:22px;color:var(--doux);font-size:13px;border-top:1px dashed var(--ligne-forte);padding-top:10px}

/* ---------- Navigation : seule surface en verre, sobre ---------- */
.theme-sombre nav.p{position:fixed;z-index:5;border-radius:8px;background:rgba(27,27,27,.86);border:1px solid var(--ligne);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 12px 32px rgba(0,0,0,.45)}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){.theme-sombre nav.p{background:var(--panneau);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:var(--ligne-forte)}}
/* Colonne et rail : la même image, sur toute la hauteur ; les liens restent sur fond sombre, l'image se révèle dans l'espace libre du bas */
body.theme-sombre[data-nav=index] nav.p,body.theme-sombre[data-nav=rail] nav.p{
  background:linear-gradient(180deg,rgba(18,18,18,.96) 0%,rgba(18,18,18,.94) 52%,rgba(18,18,18,.25) 80%,rgba(18,18,18,.55) 92%,rgba(18,18,18,.85) 100%),var(--image) 84% center/cover;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.theme-sombre nav.p a{display:flex;align-items:center;color:var(--doux)}
.theme-sombre nav.p a:hover{color:var(--blanc)}
.theme-sombre .logo img{display:block;height:auto}
.theme-sombre .logo-mono{display:none !important}
body.theme-sombre[data-nav=rail] .logo-mono{display:block !important}
body.theme-sombre[data-nav=rail] .logo-mot{display:none}
.theme-sombre .bascule{border:0;background:none;color:var(--doux);cursor:pointer;font:600 11px var(--titre);letter-spacing:.12em;text-transform:uppercase;padding:10px}
body.theme-sombre[data-nav=dock] .bascule{display:none}

body.theme-sombre[data-nav=index] main{margin-left:236px}
body.theme-sombre[data-nav=index] nav.p{left:12px;top:12px;bottom:12px;width:208px;padding:20px 0;display:flex;flex-direction:column}
body.theme-sombre[data-nav=index] .logo{padding:0 20px 18px}
body.theme-sombre[data-nav=index] nav.p a{padding:8px 20px;gap:12px;font-size:15px;font-weight:600;border-left:2px solid transparent}
body.theme-sombre[data-nav=index] nav.p a em{font:500 11px var(--titre);font-style:normal;color:var(--discret);width:20px}
body.theme-sombre[data-nav=index] nav.p a svg{display:none}
body.theme-sombre[data-nav=index] nav.p a.on{color:var(--blanc);border-left-color:var(--accent);background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent)}
body.theme-sombre[data-nav=index] nav.p a.on em{color:var(--accent)}
body.theme-sombre[data-nav=index] nav.p .etiquette{padding:16px 20px 4px;font-size:10px}
body.theme-sombre[data-nav=index] .espace{flex:1}
body.theme-sombre[data-nav=index] .rail-seul{display:none}

body.theme-sombre[data-nav=rail] main{margin-left:112px}
body.theme-sombre[data-nav=rail] nav.p{left:12px;top:12px;bottom:12px;width:84px;padding:14px 0;display:flex;flex-direction:column;align-items:center;gap:2px}
body.theme-sombre[data-nav=rail] nav.p .etiquette,body.theme-sombre[data-nav=rail] nav.p a em,body.theme-sombre[data-nav=rail] .index-seul{display:none}
body.theme-sombre[data-nav=rail] .logo{margin-bottom:14px}
body.theme-sombre[data-nav=rail] nav.p a{flex-direction:column;gap:4px;width:74px;padding:9px 0;border-radius:4px;font:600 9px var(--titre);letter-spacing:.06em;text-transform:uppercase}
body.theme-sombre[data-nav=rail] nav.p a.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
body.theme-sombre[data-nav=rail] .espace{flex:1}

body.theme-sombre[data-nav=dock] main{margin:0 auto;padding-bottom:120px}
body.theme-sombre[data-nav=dock] nav.p{left:50%;bottom:14px;top:auto;transform:translateX(-50%);display:flex;gap:2px;padding:6px;max-width:calc(100vw - 16px)}
body.theme-sombre[data-nav=dock] nav.p a{flex-direction:column;gap:3px;min-width:68px;padding:8px;border-radius:4px;font:600 10px var(--titre);letter-spacing:.04em;text-transform:uppercase}
body.theme-sombre[data-nav=dock] nav.p a.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
body.theme-sombre[data-nav=dock] .logo,body.theme-sombre[data-nav=dock] nav.p .etiquette,body.theme-sombre[data-nav=dock] nav.p a em,body.theme-sombre[data-nav=dock] .espace,body.theme-sombre[data-nav=dock] .index-seul{display:none}
.theme-sombre .logo-page{display:none;margin-bottom:18px}
body.theme-sombre[data-nav=dock] .logo-page{display:block}

/* Fenêtre « Personnaliser » */
.theme-sombre dialog{width:min(520px,calc(100vw - 32px));padding:0;border:1px solid var(--ligne-forte);border-radius:8px;background:var(--panneau);color:var(--blanc)}
.theme-sombre dialog::backdrop{background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.theme-sombre dialog form{padding:22px}
.theme-sombre dialog header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.theme-sombre dialog h2{font:600 1.25rem var(--titre);margin:0}
.theme-sombre .fermer{border:0;background:none;color:var(--doux);font-size:26px;line-height:1;cursor:pointer;width:44px;height:44px}
.theme-sombre dialog fieldset{border:0;margin:0 0 18px;padding:0}
.theme-sombre dialog legend{margin-bottom:10px}
.theme-sombre .teintes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.theme-sombre .teintes label{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border:1px solid var(--ligne-forte);border-radius:4px;cursor:pointer;font-size:14px}
.theme-sombre .teintes input{position:absolute;opacity:0;pointer-events:none}
.theme-sombre .teintes span{width:16px;height:16px;border-radius:50%;background:var(--t);box-shadow:0 0 12px color-mix(in srgb,var(--t) 50%,transparent)}
.theme-sombre .teintes label:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.theme-sombre .teintes label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.theme-sombre .intensite{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 12px;margin-top:16px;font-size:14px;font-weight:600}
.theme-sombre .intensite output{font:600 13px var(--titre);color:var(--accent)}
.theme-sombre .intensite input{grid-column:1/-1;width:100%;height:28px;margin:0;accent-color:var(--accent);cursor:pointer}
.theme-sombre .intensite .bornes{grid-column:1/-1;display:flex;justify-content:space-between;color:var(--doux);font:500 12px var(--texte)}
.theme-sombre .apercu-image{height:96px;border-radius:4px;border:1px solid var(--ligne);background:linear-gradient(90deg,var(--noir) 0%,rgba(18,18,18,0) 60%),var(--image) 80% 32%/cover}
.theme-sombre .aide{color:var(--doux);font-size:13px;margin:10px 0}
.theme-sombre .boutons-image{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.theme-sombre .secondaire{min-height:44px;padding:0 16px;border-radius:4px;border:1px solid var(--ligne-forte);background:none;color:var(--blanc);font:600 14px var(--texte);cursor:pointer}
.theme-sombre .lien{color:var(--accent);font-size:14px;text-decoration:underline;text-underline-offset:3px}
.theme-sombre dialog footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--ligne)}
.theme-sombre dialog .bouton{border:0;cursor:pointer;font:700 15px var(--texte)}

@media (max-width:700px){
  .theme-sombre dialog{margin:auto 0 0;width:100vw;max-width:100vw;max-height:90vh;overflow:auto;border-radius:16px 16px 0 0;border-bottom:0}
  .theme-sombre dialog form{padding:12px 18px 26px}
  .theme-sombre dialog form::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--ligne-forte);margin:0 auto 10px}
  .theme-sombre .teintes{grid-template-columns:1fr 1fr}
  .theme-sombre .outils{position:static;margin-top:16px}
  .theme-sombre .recherche{display:none}
  .theme-sombre .bandeau{padding:22px 18px 20px;background:linear-gradient(90deg,var(--noir) 0%,rgba(18,18,18,.8) 55%,rgba(18,18,18,.2) 100%),var(--image) 78% 30%/cover}
  .theme-sombre .actions{grid-template-columns:1fr 1fr}
  .theme-sombre .actions .fleche{display:none}
  .theme-sombre .grille{grid-template-columns:1fr}
  body.theme-sombre[data-nav=dock] nav.p{left:8px;right:8px;transform:none;justify-content:space-around;max-width:none}
  body.theme-sombre[data-nav=dock] nav.p a{min-width:0;flex:1;padding:7px 1px;font-size:9px}
  body.theme-sombre[data-nav=dock] nav.p a.rail-seul{display:none}
  .theme-sombre .jours b{font-size:12px}
  .theme-sombre .mandat a{grid-template-columns:auto 1fr}
  .theme-sombre .mandat .etat{grid-column:2;justify-self:start}
}