/* L'ATTRIBUT `hidden` DOIT GAGNER, TOUJOURS.

   La feuille du navigateur declare `[hidden]{display:none}` avec une
   specificite de (0,0,1,0). N'IMPORTE quelle regle d'auteur qui pose
   un `display` la bat : `.rail-nav a{display:flex}` suffit. Le
   resultat est un element qu'on croit masque et qui reste a l'ecran,
   sans erreur nulle part — `el.hidden = true` semble simplement ne
   rien faire.

   Ce fichier portait deja CINQ rustines de ce genre, posees une par
   une au fil des rencontres : .maj-pastille, .cloche-pastille,
   .notif-panneau, .palette-fond, .avertissement. Constate une sixieme
   fois le 2026-09-10 sur l'entree du rail et sa pastille. Une regle
   globale coute une ligne et ferme le sujet. */
[hidden]{ display: none !important; }

/* ===================================================================
   Espace client LocWeb — feuille unique.

   Public tres different de la console operateur : un commercant, pas
   forcement a l'aise avec l'informatique, qui vient ici deux fois par
   mois depuis son telephone entre deux clients. Donc : gros boutons,
   peu de choix visibles a la fois, aucun jargon technique, jamais deux
   facons de faire la meme chose.

   Meme famille creme/blanc/gris que la console, mais entierement
   monochrome — pas de rouge en decoration ni en bouton. Le seul rouge
   qui subsiste est --alerte, reserve aux badges "urgent" et aux actions
   destructives, jamais a un bouton d'action normale ni au logo.
   ------------------------------------------------------------------- */

:root{
  --fond:          #FAF9F6;
  --surface:       #FFFFFF;
  --surface-creux: #F5F3EE;
  --encre:         #16161A;
  --encre-douce:   #52525B;
  --sourdine:      #8B8880;
  --trait:         #EAE6DE;
  --trait-fort:    #D8D2C7;

  --accent:        #1A1A1E;   /* action principale : encre presque noire, pas de couleur de marque */
  --accent-fonce:  #000000;
  --accent-voile:  rgba(26, 26, 30, .05);

  --vert:          #2F7D4E;
  --vert-voile:    rgba(47, 125, 78, .10);
  --ambre:         #9A6B10;
  --ambre-voile:   rgba(196, 138, 31, .12);
  --alerte:        #B8331F;
  --alerte-voile:  rgba(184, 51, 31, .09);

  /* Ombres en paliers : une carte au repos flotte a peine, un element
     survole ou detache monte franchement. Un seul niveau partout donnait
     un aspect "tout au meme plan" peu credible pour un outil paye. */
  --ombre-fine:  0 1px 2px rgba(22,22,26,.05);
  --ombre:       0 1px 2px rgba(22,22,26,.04), 0 4px 12px rgba(22,22,26,.045);
  --ombre-haute: 0 12px 32px rgba(22,22,26,.13);

  /* Inter : la police de reference des tableaux de bord SaaS. Droite,
     neutre, excellente en petites tailles et en chiffres tabulaires. */
  --police: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 12px;
  --r-s: 8px;
}

*, *::before, *::after{ box-sizing: border-box; }
*{ margin:0; padding:0; }

body{
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

/* Barres de defilement discretes.

   L'application Windows affiche sinon la barre classique de Windows,
   avec ses fleches aux extremites — ce qui trahit la page web dans ce
   qui doit passer pour une application. Ces deux proprietes sont
   standard et valent aussi bien pour le navigateur. */
html{
  scrollbar-width: thin;
  scrollbar-color: var(--trait-fort) transparent;
}

button, input, select, textarea{ font: inherit; color: inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color: inherit; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- connexion ---------- */

.connexion{
  min-height: 100dvh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(ellipse 60% 45% at 50% 0%, var(--accent-voile), transparent 70%), var(--fond);
}
.connexion-boite{
  width: min(380px, 100%); background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r); box-shadow: var(--ombre); padding: 36px 30px 30px;
}
.marque{ display:flex; align-items:baseline; gap:6px; font-size:1.3rem; font-weight:800; letter-spacing:-.02em; margin-bottom:6px; }
.marque em{ font-style:normal; color:var(--accent); }
.connexion-boite > p{ color: var(--sourdine); margin-bottom: 24px; font-size: .92rem; }

.champ{ display:block; margin-bottom: 14px; }
.champ span{ display:block; font-size:.8rem; font-weight:600; color:var(--encre-douce); margin-bottom:6px; }
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], textarea, select{
  width:100%; background: var(--surface); border:1px solid var(--trait-fort);
  border-radius: var(--r-s); padding: 11px 13px; font-size: .95rem;
  transition: border-color .15s, box-shadow .15s;
}
/* Anneau de focus discret plutot qu'un simple changement de bordure :
   c'est ce qui distingue un champ "actif" d'un champ simplement survole. */
input:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--accent);
  box-shadow: 0 0 0 3px var(--accent-voile);
}
input::placeholder, textarea::placeholder{ color: var(--sourdine); }
textarea{ resize: vertical; min-height: 84px; line-height:1.5; }
select{ cursor: pointer; }

.bt{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height: 42px; padding: 0 18px; border-radius: var(--r-s);
  font-size: .92rem; font-weight: 650; letter-spacing: -.005em;
  border: 1px solid transparent; white-space: nowrap;
  transition: background-color .14s, border-color .14s, box-shadow .14s, transform .1s, opacity .14s;
}
a.bt{ text-decoration:none; }
.bt:active{ transform: translateY(1px); }
.bt[disabled]{ opacity:.4; pointer-events:none; }
.bt-vif{ background: var(--accent); color:#fff; box-shadow: var(--ombre-fine); }
.bt-vif:hover{ background: var(--accent-fonce); box-shadow: var(--ombre); }
.bt-plein{ background: var(--surface); border-color: var(--trait-fort); color: var(--encre); box-shadow: var(--ombre-fine); }
.bt-plein:hover{ background: var(--surface-creux); }
.bt-nu{ color: var(--encre-douce); min-height: 38px; padding: 0 12px; font-size:.9rem; }
.bt-nu:hover{ background: var(--surface-creux); color: var(--encre); }
.bt-mini{ min-height: 34px; padding: 0 14px; font-size: .86rem; }
.bt-large{ width:100%; min-height: 46px; }

.mot{ padding: 11px 14px; border-radius: 9px; font-size: .9rem; margin-top: 4px; }
.mot[data-ton="alerte"]{ background:#FBEAE7; color:#B8331F; }
.mot[data-ton="bien"]{ background: var(--vert-voile); color: var(--vert); }
.mot:empty{ display:none; }

/* ---------- navigation ---------- */

:root{ --rail: 232px; }

.rail{
  position: fixed; inset: 0 auto 0 0; width: var(--rail); z-index: 40;
  background: var(--surface); border-right: 1px solid var(--trait);
  display: flex; flex-direction: column; padding: 22px 14px 16px;
  overflow-y: auto;
}
.rail-marque{ padding: 0 10px 26px; margin-bottom: 0; }

/* Intitule de groupe facon SaaS : minuscule, espace, discret — il
   structure sans prendre la place des liens eux-memes. */
.rail-titre{
  font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--sourdine); padding: 0 12px 8px;
}

.rail-nav{ display: flex; flex-direction: column; gap: 1px; }
.rail-nav a{
  display: flex; align-items: center; gap: 11px;
  min-height: 40px; padding: 0 12px; border-radius: var(--r-s);
  color: var(--encre-douce); text-decoration: none; font-weight: 550; font-size: .9rem;
  letter-spacing: -.005em;
  transition: background-color .12s, color .12s;
}
.rail-nav a:hover{ background: var(--surface-creux); color: var(--encre); }
/* L'onglet actif est une pilule pleine, contrastee : sur une palette
   monochrome, un simple fond gris clair se remarque a peine. */
.rail-nav a[aria-current="page"]{
  background: var(--accent); color: #fff; font-weight: 650;
  box-shadow: var(--ombre-fine);
}
.rail-nav a[aria-current="page"] .ic{ color: #fff; }
.rail-nav a[aria-current="page"] .pastille{ background: #fff; color: var(--alerte); }
.rail-nav .pastille{
  margin-left: auto; min-width: 19px; height: 19px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 100px;
  background: var(--alerte); color: #fff; font-size: .72rem; font-weight: 700;
}
.ic{ width: 18px; height: 18px; flex: none; color: var(--sourdine); transition: color .12s; }

.rail-pied{ margin-top: auto; padding-top: 14px; border-top: 1px solid var(--trait); }
.rail-site{
  padding: 12px; margin: 8px 0 4px; border-radius: var(--r-s);
  background: var(--surface-creux);
  font-size: .8rem; color: var(--sourdine);
  display: flex; flex-direction: column; gap: 3px;
}
.rail-site span{ font-weight: 650; color: var(--encre); font-size: .86rem; }
.rail-site a{ color: var(--sourdine); text-decoration: none; }
.rail-site a:hover{ color: var(--encre); }
.rail-pied > .bt{ width: 100%; margin-top: 4px; min-height: 40px; font-size: .88rem; }

/* Le retrait sous le contenu — la place de la barre de publication
   fixe — etait porte par `body`, qui s'ajoutait donc aux 100dvh de
   cette zone : chaque page depassait de 90 pixels et faisait
   apparaitre une barre de defilement meme sur un ecran vide. Ici il
   est compris dans la hauteur, grace au `box-sizing: border-box`. */
.zone{ margin-left: var(--rail); min-height: 100dvh; padding-bottom: 90px; }

/* ---------- entete haute ---------- */

.entete{
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--trait);
  padding: 0 clamp(18px,3vw,34px); height: 64px;
  display: flex; align-items: center; gap: 14px;
}
.entete-salut{ font-size: .95rem; color: var(--sourdine); }
.entete-salut b{ color: var(--encre); font-weight: 650; }
.entete-droite{ margin-left: auto; display: flex; align-items: center; gap: 12px; }
.entete-lien{
  font-size: .86rem; font-weight: 600; color: var(--encre-douce); text-decoration: none;
  padding: 8px 14px; border-radius: var(--r-s); border: 1px solid var(--trait-fort);
  background: var(--surface); transition: background-color .14s;
}
.entete-lien:hover{ background: var(--surface-creux); }
.entete-avatar{
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: .8rem; font-weight: 700;
}

.page{ max-width: 1080px; margin: 0 auto; padding: clamp(22px,3vw,32px) clamp(18px,3vw,34px) 48px; }

/* ---------- titre de page ---------- */

.page > h1{
  font-size: 1.4rem; font-weight: 700; letter-spacing: -.025em;
  margin-bottom: 20px;
}

/* ---------- carte de section ---------- */

.section{
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r);
  box-shadow: var(--ombre-fine); margin-bottom: 18px; overflow: hidden;
  transition: box-shadow .18s;
}
.section:hover{ box-shadow: var(--ombre); }
.section-tete{ padding: 16px 22px; border-bottom: 1px solid var(--trait); }
.section-tete h2{ font-size: .98rem; font-weight: 700; letter-spacing:-.015em; }
.section-tete p{ color: var(--sourdine); font-size: .85rem; margin-top: 2px; }
.section-corps{ padding: 6px 22px 20px; }

.champ-inline{ padding: 14px 0; border-bottom: 1px solid var(--trait); }
.champ-inline:last-child{ border-bottom:0; }
.champ-inline label{ display:block; font-size:.84rem; font-weight:650; margin-bottom: 8px; }
.champ-inline .aide{ font-size:.8rem; color:var(--sourdine); margin-top:6px; }
.champ-inline.modifie{ background: var(--ambre-voile); margin: 0 -20px; padding: 14px 20px; border-radius: 8px; }
.champ-inline .drapeau{
  display:inline-flex; align-items:center; gap:5px; margin-left:8px;
  font-size:.72rem; font-weight:700; color: var(--ambre); vertical-align:middle;
}
.champ-inline .drapeau svg{ width:9px; height:9px; }

/* ---------- horaires : une ligne par jour, sur mobile en pile ---------- */

.ligne-horaire{ display:grid; grid-template-columns: 108px 1fr; gap: 12px; align-items:center; padding: 10px 0; border-bottom:1px solid var(--trait); }
.ligne-horaire:last-child{ border-bottom:0; }
.ligne-horaire .jour{ font-weight:650; font-size:.92rem; }
.ligne-horaire.modifie{ background: var(--ambre-voile); margin:0 -20px; padding:10px 20px; border-radius:8px; }

/* ---------- images ---------- */

.ligne-image{ display:flex; align-items:center; gap:14px; padding: 14px 0; border-bottom:1px solid var(--trait); }
.ligne-image:last-child{ border-bottom:0; }
.ligne-image img{ width:52px; height:52px; border-radius:9px; object-fit:cover; background:var(--surface-creux); border:1px solid var(--trait); flex:none; }
.ligne-image .info{ flex:1; min-width:0; }
.ligne-image label{ display:block; font-weight:650; font-size:.88rem; margin-bottom:4px; }
.entree-fichier{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background: var(--surface-creux); border:1px solid var(--trait); border-radius:8px;
  padding: 9px 14px; font-size:.86rem; font-weight:600; transition: border-color .15s;
}
.entree-fichier:hover{ border-color: var(--trait-fort); }
.entree-fichier input{ display:none; }

/* ---------- produits ---------- */

.produit{ background: var(--surface-creux); border:1px solid var(--trait); border-radius: 10px; padding: 16px; margin-bottom: 12px; }
.produit-tete{ display:flex; gap:12px; align-items:flex-start; margin-bottom:12px; }
.produit-tete img{ width:56px; height:56px; border-radius:8px; object-fit:cover; background:var(--surface); border:1px solid var(--trait); flex:none; }
.produit-grille{ display:grid; grid-template-columns: 2fr 1fr; gap:10px; }
.produit-grille .champ{ margin-bottom:0; }
.produit-desc{ grid-column: 1/-1; margin-top:10px; }
.produit-bas{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:12px; border-top:1px solid var(--trait); gap:10px; flex-wrap:wrap; }
.produit-dispo{ display:flex; align-items:center; gap:8px; font-size:.86rem; }
.produit-dispo input{ width:auto; accent-color: var(--accent); }

/* ---------- ce que je ne gere pas moi-meme ---------- */

.hors-portee{
  background: var(--surface-creux); border: 1px dashed var(--trait-fort); border-radius: var(--r);
  padding: 18px 20px; margin-bottom: 16px; font-size: .9rem; color: var(--encre-douce);
}
.hors-portee strong{ display:block; color:var(--encre); margin-bottom:4px; font-size:.94rem; }
.hors-portee .liens{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- barre de publication ---------- */

.publication{
  position: fixed; left: var(--rail); right:0; bottom:0; z-index:30;
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px);
  border-top: 1px solid var(--trait); box-shadow: 0 -4px 20px rgba(22,22,26,.05);
  padding: 13px clamp(18px,4vw,32px); display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.publication .texte{ font-size:.9rem; color: var(--encre-douce); }
.publication .texte b{ color: var(--encre); font-weight:700; }
.publication .droite{ margin-left:auto; display:flex; gap:8px; }

/* ---------- accueil : sous-titre, banniere, cartes de menu ---------- */

.sous-titre{ color: var(--sourdine); font-size: .95rem; margin: -14px 0 24px; }

.banniere{
  display:flex; align-items:center; gap:14px; text-decoration:none;
  background: var(--surface); border:1px solid var(--trait); border-radius: var(--r);
  padding: 16px 20px; margin-bottom: 20px; box-shadow: var(--ombre-fine);
  transition: box-shadow .16s, border-color .16s, transform .16s;
}
.banniere:hover{ box-shadow: var(--ombre); border-color: var(--trait-fort); transform: translateY(-1px); }
.banniere-pastille{
  min-width:32px; height:32px; padding:0 9px; flex:none;
  display:grid; place-items:center; border-radius:100px;
  background: var(--alerte); color:#fff; font-weight:700; font-size:.9rem;
}
.banniere strong{ font-size:.95rem; font-weight:650; }
.banniere-fleche{ margin-left:auto; color: var(--sourdine); font-size:1.1rem; }

/* Pastille ronde facon SaaS, mais en gris : la couleur ne porte aucune
   information ici, elle ne servirait qu'a decorer. */

/* ---------- onglets de periode ---------- */

.barre-outils{ display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.onglets-periode{
  display:inline-flex; gap:2px; padding:3px;
  background: var(--surface-creux); border:1px solid var(--trait); border-radius:10px;
}
.onglet{
  padding: 7px 16px; border-radius: 7px; font-size:.88rem; font-weight:600;
  color: var(--sourdine); transition: background-color .14s, color .14s, box-shadow .14s;
}
.onglet:hover{ color: var(--encre); }
.onglet.actif{ background: var(--surface); color: var(--encre); box-shadow: var(--ombre-fine); }

/* ---------- cartes KPI (Performances) ---------- */

.grille-kpi{ display:grid; grid-template-columns: repeat(auto-fit,minmax(212px,1fr)); gap:16px; margin-bottom:20px; }
.grille-duo{ display:grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap:16px; }

.kpi{
  background: var(--surface); border:1px solid var(--trait); border-radius:16px;
  padding: 20px; box-shadow: var(--ombre-fine);
  transition: box-shadow .16s, border-color .16s;
  display:flex; flex-direction:column;
}
.kpi:hover{ box-shadow: var(--ombre); border-color: var(--trait-fort); }
/* Icone en carre arrondi ajoure : le trait suffit a identifier la
   metrique, un aplat de couleur n'ajouterait aucune information. */
.kpi-icone{
  width:42px; height:42px; border-radius:12px; margin-bottom:16px;
  display:grid; place-items:center;
  border:1px solid var(--trait-fort); color: var(--encre);
}
.kpi-icone svg{ width:20px; height:20px; }
.kpi-etiq{ font-size:.88rem; color: var(--sourdine); font-weight:500; }
.kpi-val{
  font-size:1.85rem; font-weight:700; letter-spacing:-.035em; line-height:1.15;
  font-variant-numeric: tabular-nums; margin-top:2px;
}
.kpi-pied{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--trait);
}
.kpi-periode{ font-size:.8rem; color: var(--sourdine); }

/* La variation est la seule information de cet ecran ou la couleur
   porte du sens (progression / recul) — elle reste donc coloree malgre
   la palette monochrome du reste. */
.badge-var{
  margin-left:auto; display:inline-flex; align-items:center; gap:4px;
  padding: 4px 10px; border-radius:100px;
  font-size:.8rem; font-weight:650; font-variant-numeric: tabular-nums;
}
.badge-var.hausse{ background: var(--vert-voile); color: var(--vert); }
.badge-var.baisse{ background: var(--alerte-voile); color: var(--alerte); }
.badge-var.neutre{ background: var(--surface-creux); color: var(--sourdine); }
.badge-fleche{ font-size:.9rem; line-height:1; }

/* ---------- cartes de synthese (Accueil) ---------- */

.synthese{ display:grid; grid-template-columns: repeat(auto-fit,minmax(168px,1fr)); gap:12px; margin-bottom:20px; }
.mesure{
  background: var(--surface); border:1px solid var(--trait); border-radius: var(--r);
  padding: 18px 18px 16px; box-shadow: var(--ombre-fine);
  transition: box-shadow .16s, border-color .16s;
}
.mesure:hover{ box-shadow: var(--ombre); border-color: var(--trait-fort); }
/* Chiffre en chasse tabulaire : sans ca, une colonne de nombres danse
   d'une ligne a l'autre selon les chiffres qui la composent. */
.mesure .val{
  font-size:1.75rem; font-weight:700; letter-spacing:-.03em; line-height:1.1;
  font-variant-numeric: tabular-nums;
}
.mesure .etiq{ font-size:.85rem; color: var(--encre); font-weight:600; margin-top:5px; }
.mesure .sous{ font-size:.78rem; color: var(--sourdine); margin-top:2px; line-height:1.4; }

/* ---------- listes / tableaux simples ---------- */

.liste-carte{
  background: var(--surface); border:1px solid var(--trait); border-radius: var(--r);
  box-shadow: var(--ombre-fine); overflow:hidden; margin-bottom:18px;
}
.ligne-liste{
  display:flex; align-items:center; gap:14px; padding: 15px 22px;
  border-bottom:1px solid var(--trait); transition: background-color .12s;
}
.ligne-liste:hover{ background: var(--surface-creux); }
.ligne-liste:last-child{ border-bottom:0; }
.ligne-liste .principal{ flex:1; min-width:0; }
.ligne-liste .principal strong{ display:block; font-size:.93rem; font-weight:650; }
.ligne-liste .principal span{ display:block; font-size:.82rem; color: var(--sourdine); margin-top:2px; }

.etat{
  display:inline-flex; align-items:center; gap:6px; padding: 4px 11px 4px 8px; border-radius:100px;
  font-size:.76rem; font-weight:650; letter-spacing:-.003em;
  background: var(--surface-creux); color: var(--encre-douce);
}
.etat::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.etat[data-ton="bien"]{ background: var(--vert-voile); color: var(--vert); }
.etat[data-ton="veille"]{ background: var(--ambre-voile); color: var(--ambre); }
.etat[data-ton="action"]{ background: var(--alerte-voile); color: var(--alerte); }

/* ---------- squelette et messages ---------- */

.vide{ padding: 30px 4px; color: var(--sourdine); font-size:.92rem; }
.squelette{ background: var(--surface-creux); border-radius:9px; height:52px; margin-bottom:10px; animation: respire 1.3s ease-in-out infinite; }
@keyframes respire{ 0%,100%{opacity:.55} 50%{opacity:1} }

#souffle{
  position: fixed; bottom: 96px; left: calc(50% + var(--rail) / 2); transform: translateX(-50%) translateY(10px) scale(.97);
  z-index: 90; padding: 11px 20px; border-radius: 100px; box-shadow: var(--ombre-haute);
  font-size: .92rem; font-weight: 650; pointer-events:none; opacity:0;
  transition: opacity .2s cubic-bezier(.16,1,.3,1), transform .2s cubic-bezier(.16,1,.3,1), left .2s;
}

/* ---------- accueil : synthese narrative ---------- */


.titre-section{
  font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color: var(--sourdine); margin: 28px 0 12px;
}

/* Invite : une carte qui propose une action manquante, sans faire
   croire que la donnee existe deja. */
.invite .bt{ margin-left:auto; }

.kpi-haut{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.kpi-haut .badge-var{ margin-left:auto; }
.kpi-sous{ font-size:.78rem; color: var(--sourdine); margin-top:2px; }
.kpi-graphe{ margin-top:14px; opacity:.7; }

/* ---------- taux de conversion ---------- */

.conversion-repere{ font-size:.8rem; color: var(--sourdine); margin-top:10px; }

/* ---------- theme sombre ---------- */

:root[data-theme="sombre"]{
  --fond:          #0E0E11;
  --surface:       #17171B;
  --surface-creux: #202026;
  --encre:         #EDEBE7;
  --encre-douce:   #B4B2AD;
  --sourdine:      #85837E;
  --trait:         #26262C;
  --trait-fort:    #383840;

  --accent:        #EDEBE7;   /* clair sur fond sombre, toujours monochrome */
  --accent-fonce:  #FFFFFF;
  --accent-voile:  rgba(237,235,231,.08);
  --sur-accent:    #17171B;

  --vert:          #5DBE84;
  --vert-voile:    rgba(93,190,132,.13);
  --ambre:         #E0A93F;
  --ambre-voile:   rgba(224,169,63,.14);
  --alerte:        #F0705C;
  --alerte-voile:  rgba(240,112,92,.13);

  --ombre-fine:  0 1px 2px rgba(0,0,0,.4);
  --ombre:       0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.35);
  --ombre-haute: 0 14px 36px rgba(0,0,0,.6);
}
/* En sombre, le bouton principal devient clair : il lui faut donc un
   texte fonce, pas le blanc du theme clair. */
:root[data-theme="sombre"] .bt-vif{ color: var(--sur-accent); }
:root[data-theme="sombre"] .rail-nav a[aria-current="page"]{ color: var(--sur-accent); }
:root[data-theme="sombre"] .rail-nav a[aria-current="page"] .ic{ color: var(--sur-accent); }
:root[data-theme="sombre"] .appel-icone{ color: var(--sur-accent); }
:root[data-theme="sombre"] .choix.actif .choix-icone,
:root[data-theme="sombre"] .choix.actif .choix-case{ color: var(--sur-accent); }
:root[data-theme="sombre"] .entete-avatar{ color: var(--sur-accent); }
:root[data-theme="sombre"] .bulle{ background: var(--surface-creux); border:1px solid var(--trait-fort); }
:root[data-theme="sombre"] .bulle::after{ border-top-color: var(--surface-creux); }
:root[data-theme="sombre"] .bulle.vers-bas::after{ border-bottom-color: var(--surface-creux); }

/* ---------- entete : icone et menu du compte ---------- */

.entete-icone{
  width:36px; height:36px; border-radius:9px; flex:none;
  display:grid; place-items:center; color: var(--encre-douce);
  border:1px solid var(--trait-fort); background: var(--surface);
  transition: background-color .14s, color .14s;
}
.entete-icone:hover{ background: var(--surface-creux); color: var(--encre); }
.entete-icone .ic{ width:17px; height:17px; color:inherit; }

.menu-compte{ position:relative; }
button.entete-avatar{ cursor:pointer; border:0; }
.menu-deroulant{
  position:absolute; top:calc(100% + 8px); right:0; z-index:80;
  min-width:220px; padding:6px;
  background: var(--surface); border:1px solid var(--trait); border-radius:12px;
  box-shadow: var(--ombre-haute);
}
.menu-entete{
  padding:10px 12px 12px; border-bottom:1px solid var(--trait); margin-bottom:6px;
}
.menu-entete b{ display:block; font-size:.9rem; font-weight:650; }
.menu-entete span{ display:block; font-size:.8rem; color: var(--sourdine); margin-top:2px; word-break:break-all; }
.menu-item{
  display:block; width:100%; text-align:left;
  padding:9px 12px; border-radius:8px;
  font-size:.88rem; font-weight:550; color: var(--encre-douce); text-decoration:none;
  transition: background-color .12s, color .12s;
}
.menu-item:hover{ background: var(--surface-creux); color: var(--encre); }
.menu-item-danger{ color: var(--alerte); }
.menu-item-danger:hover{ background: var(--alerte-voile); color: var(--alerte); }

/* ---------- modale de confirmation ---------- */

.fond-modale{
  position:fixed; inset:0; z-index:150;
  background: rgba(22,22,26,.45); backdrop-filter: blur(3px);
  display:grid; place-items:center; padding:20px;
  animation: apparait .14s ease;
}
@keyframes apparait{ from{ opacity:0; } to{ opacity:1; } }
.modale{
  width:min(440px,100%); background: var(--surface);
  border:1px solid var(--trait); border-radius:16px;
  box-shadow: var(--ombre-haute); padding:24px;
  animation: monte .18s cubic-bezier(.16,1,.3,1);
}
@keyframes monte{ from{ opacity:0; transform: translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }
.modale-titre{ font-size:1.06rem; font-weight:700; letter-spacing:-.018em; }
.modale-texte{ color: var(--encre-douce); font-size:.92rem; margin-top:8px; line-height:1.55; }
.modale-pied{ display:flex; gap:10px; justify-content:flex-end; margin-top:22px; flex-wrap:wrap; }

.lien-retour{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:18px;
  font-size:.88rem; font-weight:600; color: var(--sourdine);
  transition: color .14s;
}
.lien-retour:hover{ color: var(--encre); }

/* ---------- bulle d'aide au survol ---------- */

/* Le pointille discret signale qu'une explication existe, sans alourdir
   la lecture. */
.a-aide{
  cursor:help; text-decoration:underline dotted var(--trait-fort);
  text-underline-offset:3px; display:inline-block;
}
.a-aide:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }

/* Bulle unique, enfant du <body> : en position fixed elle echappe au
   `overflow: hidden` des cartes, qui la tronquait. */
.bulle{
  position:fixed; z-index:200; max-width:280px;
  background: var(--encre); color:#fff;
  font-size:.79rem; font-style:italic; font-weight:400; line-height:1.45;
  padding:9px 12px; border-radius:9px; box-shadow: var(--ombre-haute);
  opacity:0; visibility:hidden; transform: translateY(4px);
  transition: opacity .15s, transform .15s, visibility .15s;
  pointer-events:none; white-space:normal; text-transform:none; letter-spacing:0;
}
.bulle.visible{ opacity:1; visibility:visible; transform: translateY(0); }
.bulle::after{
  content:''; position:absolute; top:100%; left:var(--fleche,18px);
  margin-left:-5px; border:5px solid transparent; border-top-color: var(--encre);
}
.bulle.vers-bas::after{
  top:auto; bottom:100%; border-top-color:transparent; border-bottom-color: var(--encre);
}

/* ---------- squelettes calibres ----------
   Chaque squelette occupe exactement la hauteur de l'element qu'il
   remplace : la page ne bouge pas quand les donnees arrivent. */
/* Hauteurs relevees sur le rendu reel, pas estimees : une carte de
   repartition complete mesure 253 px (titre + corps + camembert). */
.sq-kpi{ height:158px; border-radius:16px; margin-bottom:0; }
.sq-graphe{ height:302px; border-radius:12px; margin:18px 0; }
.sq-carte{ height:253px; border-radius:12px; margin-bottom:0; }

/* Hauteur minimale garantie : le contenu reel occupe au moins la place
   du squelette, donc rien ne remonte au moment de la substitution. */
.kpi{ min-height:158px; }
.camembert{ min-height:156px; }

/* ---------- camembert (anneau + legende) ---------- */

.camembert{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.camembert-legende{ flex:1; min-width:150px; display:grid; gap:9px; }
.camembert-ligne{ display:flex; align-items:center; gap:9px; font-size:.86rem; }
.camembert-puce{
  width:11px; height:11px; border-radius:3px; flex:none; background: var(--encre);
}
.camembert-nom{ font-weight:550; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.camembert-val{
  margin-left:auto; color: var(--sourdine); font-size:.82rem;
  font-variant-numeric: tabular-nums; white-space:nowrap;
}

/* ---------- repartitions (barres horizontales) ---------- */

.repartition{ display:grid; gap:11px; }
.repartition-ligne{ display:grid; grid-template-columns: minmax(78px,26%) 1fr auto; gap:12px; align-items:center; }
.repartition-nom{ font-size:.86rem; font-weight:550; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.repartition-piste{ height:8px; border-radius:100px; background: var(--surface-creux); overflow:hidden; }
.repartition-barre{ height:100%; border-radius:100px; background: var(--encre); }
.repartition-val{ font-size:.82rem; color: var(--sourdine); font-variant-numeric: tabular-nums; min-width:34px; text-align:right; }

.grille-duo{ display:grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap:16px; }

/* ---------- grands blocs depliables (Performances) ---------- */

.bloc-pliable{ margin-bottom:22px; }
.bloc-tete{
  display:flex; align-items:center; gap:12px; cursor:pointer; list-style:none;
  padding:14px 2px; border-bottom:1px solid var(--trait); margin-bottom:2px;
}
.bloc-tete::-webkit-details-marker{ display:none; }
.bloc-titre{ font-size:1rem; font-weight:700; letter-spacing:-.018em; }
.bloc-chevron{
  margin-left:auto; color: var(--sourdine); font-size:1.5rem; line-height:1;
  transition: transform .2s;
}
.bloc-pliable[open] .bloc-chevron{ transform: rotate(90deg); }
.bloc-corps{ padding-top:18px; }

/* ---------- avis Google ---------- */

.note-globale{
  display:flex; align-items:center; gap:16px; padding-bottom:16px;
  border-bottom:1px solid var(--trait); margin-bottom:4px;
}
.note-chiffre{ font-size:2.4rem; font-weight:700; letter-spacing:-.04em; line-height:1; }
.note-etoiles{ color: var(--ambre); font-size:1.05rem; letter-spacing:.08em; }
.note-compte{ font-size:.84rem; color: var(--sourdine); margin-top:3px; }

.avis-liste{ display:grid; gap:2px; }
.avis{ padding:14px 0; border-bottom:1px solid var(--trait); }
.avis:last-child{ border-bottom:0; }
.avis-tete{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.avis-auteur{ font-size:.9rem; font-weight:650; }
.avis-note{ color: var(--ambre); font-size:.86rem; letter-spacing:.06em; }
.avis-tete .etat{ margin-left:auto; }
.avis-texte{ font-size:.88rem; color: var(--encre-douce); margin-top:6px; line-height:1.55; }

/* ---------- mon editeur : sections depliables ---------- */

.section-pliable{ overflow:hidden; }
.section-resume{
  display:flex; align-items:center; gap:14px; padding:16px 20px;
  cursor:pointer; list-style:none; transition: background-color .14s;
}
.section-resume::-webkit-details-marker{ display:none; }
.section-resume:hover{ background: var(--surface-creux); }
.section-icone{
  width:40px; height:40px; border-radius:11px; flex:none;
  display:grid; place-items:center; border:1px solid var(--trait-fort); color: var(--encre);
}
.section-icone svg{ width:19px; height:19px; }
.section-infos{ flex:1; min-width:0; }
.section-nom{ display:block; font-size:.96rem; font-weight:650; letter-spacing:-.012em; }
.section-desc{ display:block; font-size:.83rem; color: var(--sourdine); margin-top:2px; }
.section-compte{ font-size:.82rem; color: var(--sourdine); white-space:nowrap; }
.section-chevron{
  color: var(--sourdine); font-size:1.4rem; line-height:1; flex:none;
  transition: transform .2s;
}
.section-pliable[open] .section-chevron{ transform: rotate(90deg); }
.section-pliable[open] .section-resume{ border-bottom:1px solid var(--trait); }
.section-pliable .section-corps{ padding-top:6px; }

/* ---------- acquisition : appel a l'action ---------- */

.appel-action{
  background: var(--surface); border:1px solid var(--trait); border-radius:16px;
  padding: 36px 28px; text-align:center; box-shadow: var(--ombre-fine);
  display:flex; flex-direction:column; align-items:center;
}
.appel-icone{
  width:52px; height:52px; border-radius:14px; margin-bottom:18px;
  display:grid; place-items:center;
  background: var(--accent); color:#fff;
}
.appel-icone svg{ width:24px; height:24px; }
.appel-titre{ font-size:1.15rem; font-weight:700; letter-spacing:-.02em; }
.appel-texte{ color: var(--sourdine); font-size:.92rem; margin:8px 0 20px; max-width:48ch; line-height:1.55; }

/* ---------- methode en 4 etapes ---------- */

.methode{ display:grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.methode-etape{
  background: var(--surface); border:1px solid var(--trait); border-radius:14px;
  padding: 20px; box-shadow: var(--ombre-fine);
}
.methode-num{
  display:grid; place-items:center; width:28px; height:28px; border-radius:8px;
  background: var(--surface-creux); color: var(--encre);
  font-size:.82rem; font-weight:700; margin-bottom:12px;
}
.methode-titre{ font-size:.93rem; font-weight:650; letter-spacing:-.01em; }
.methode-texte{ font-size:.84rem; color: var(--sourdine); margin-top:5px; line-height:1.5; }

/* ---------- blocs d'information en ligne ---------- */

.recap-ligne{ display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:24px; }
.bloc-info{ background: var(--surface-creux); border-radius:12px; padding:14px 16px; }
.bloc-info-etiq{ font-size:.75rem; color: var(--sourdine); font-weight:500; }
.bloc-info-val{ font-size:.95rem; font-weight:650; margin-top:3px; letter-spacing:-.01em; }

.champ-titre{ font-size:.85rem; font-weight:650; margin-bottom:10px; }

/* Choix a selection unique : pastille radio, pas de case a cocher —
   la forme dit a elle seule qu'un seul choix est possible. */
.choix-radio{
  width:20px; height:20px; border-radius:50%; flex:none;
  border:1.5px solid var(--trait-fort); position:relative; transition: border-color .14s;
}
.choix-radio.actif{ border-color: var(--accent); border-width:6px; }

/* ---------- mots-cles : puces et suggestions ---------- */

.puces{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; min-height:34px; }
.puce{
  display:inline-flex; align-items:center; gap:7px;
  background: var(--surface-creux); border:1px solid var(--trait);
  border-radius:100px; padding:7px 8px 7px 14px; font-size:.87rem; font-weight:500;
}
.puce-x{
  width:18px; height:18px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:.9rem; line-height:1;
  color: var(--sourdine); transition: background-color .14s, color .14s;
}
.puce-x:hover{ background: var(--alerte-voile); color: var(--alerte); }

.ajout-ligne{ display:flex; gap:10px; }
.ajout-ligne input{ flex:1; }

.suggestions{ display:flex; flex-wrap:wrap; gap:8px; }
.suggestion{
  background: var(--surface); border:1px dashed var(--trait-fort); border-radius:100px;
  padding:7px 14px; font-size:.86rem; color: var(--encre-douce);
  transition: border-color .14s, color .14s, background-color .14s;
}
.suggestion:hover{ border-style:solid; border-color: var(--accent); color: var(--encre); background: var(--surface-creux); }

/* ---------- estimations ---------- */

.estim-duo{ display:grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.estim{
  background: var(--surface-creux); border-radius:14px; padding:24px 20px; text-align:center;
}
.estim-val{ font-size:2rem; font-weight:700; letter-spacing:-.04em; font-variant-numeric: tabular-nums; }
.estim-etiq{ font-size:.84rem; color: var(--sourdine); margin-top:5px; }

/* Note de prudence : c'est elle qui empeche une estimation d'etre lue
   comme une promesse. Discrete mais jamais absente. */
.note-prudence{
  font-size:.82rem; color: var(--sourdine); line-height:1.55;
  margin-top:18px; padding-left:14px; border-left:2px solid var(--trait-fort);
}

/* ---------- recapitulatif ---------- */

.recap-tableau{
  background: var(--surface); border:1px solid var(--trait); border-radius:14px; overflow:hidden;
}
.recap-tableau-ligne{
  display:flex; justify-content:space-between; gap:16px;
  padding:15px 20px; border-bottom:1px solid var(--trait); font-size:.93rem;
}
.recap-tableau-ligne:last-child{ border-bottom:0; }
.recap-tableau-ligne span:last-child{ font-weight:600; font-variant-numeric: tabular-nums; }
.recap-tableau-ligne.fort{ background: var(--surface-creux); font-weight:700; font-size:1rem; }

/* ---------- onboarding (premiere connexion) ---------- */

/* Pendant l'onboarding, le menu lateral et l'entete disparaissent : il
   n'y a rien a piloter tant que l'espace n'est pas configure. */
#espace.mode-onboarding .rail,
#espace.mode-onboarding .entete{ display: none; }
#espace.mode-onboarding .zone{ margin-left: 0; }
#espace.mode-onboarding .page{ max-width: none; padding: 0; }
#espace.mode-onboarding{ background: var(--fond); }

/* Collant : sur un ecran de telephone, les cartes de l'etape 5 poussent
   le bandeau hors de vue et le client perd le repere de ou il est — et
   la seule sortie du questionnaire avec. */
.onb-barre{
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--trait); background: var(--surface);
}
/* Le contenu du bandeau suit la meme colonne que le questionnaire :
   une marque plaquee tout a gauche d'un ecran large, au-dessus d'un
   texte centre, donne une page mal montee. */
.onb-barre-dedans{
  display: flex; align-items: center; gap: 14px;
  max-width: 620px; margin: 0 auto;
  padding: 16px clamp(18px,4vw,24px);
}
.onb-barre .marque{ margin-bottom: 0; font-size: 1.15rem; }
.onb-barre .bt{ margin-left: auto; }

/* Ce qui se fera apres le questionnaire : une explication, pas une
   action — d'ou l'absence de bouton. */
.onb-apres{
  display: flex; align-items: flex-start; gap: 14px; margin-top: 20px;
  padding: 16px 18px; border-radius: 14px;
  background: var(--surface-creux); border: 1px dashed var(--trait-fort);
}
.onb-apres-icone{
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--trait-fort);
  color: var(--encre-douce);
}
.onb-apres-icone svg{ width: 17px; height: 17px; }
.onb-apres b{ display: block; font-size: .93rem; font-weight: 650; }
.onb-apres p{ font-size: .87rem; color: var(--sourdine); line-height: 1.55; margin-top: 4px; }

.onb{ max-width: 620px; margin: 0 auto; padding: clamp(24px,5vh,64px) clamp(18px,4vw,24px) 48px; }
.onb-compteur{
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color: var(--sourdine); margin-bottom:10px;
}
.onb h1{ font-size:1.9rem; font-weight:700; letter-spacing:-.03em; margin-bottom:8px; }
.onb-sous{ color: var(--sourdine); font-size:.95rem; margin-bottom:28px; line-height:1.5; }

.onb-grille{ display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.onb-grille .champ{ margin-bottom:0; }

.onb-pied{ display:flex; align-items:center; gap:12px; margin-top:32px; }
.onb-pied > .bt-vif{ margin-left:auto; min-width:150px; }

/* Cartes d'objectifs : cochables, l'etat se lit au cadre ET a la coche
   — la couleur seule serait invisible sur une palette monochrome. */
.onb-choix{ display:grid; grid-template-columns: repeat(auto-fit,minmax(248px,1fr)); gap:12px; }
.choix{
  display:flex; align-items:center; gap:12px; text-align:left; width:100%;
  padding:16px; border-radius:14px; border:1.5px solid var(--trait);
  background: var(--surface); transition: border-color .14s, box-shadow .14s, background-color .14s;
}
.choix:hover{ border-color: var(--trait-fort); }
.choix.actif{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-voile); }
.choix-icone{
  width:38px; height:38px; border-radius:10px; flex:none;
  display:grid; place-items:center; border:1px solid var(--trait-fort); color: var(--encre);
}
.choix.actif .choix-icone{ background: var(--accent); border-color: var(--accent); color:#fff; }
.choix-icone svg{ width:18px; height:18px; }
.choix-texte{ flex:1; font-size:.93rem; font-weight:600; }
.choix-case{
  width:22px; height:22px; border-radius:6px; flex:none;
  display:grid; place-items:center; border:1.5px solid var(--trait-fort);
  font-size:.8rem; color:#fff;
}
.choix.actif .choix-case{ background: var(--accent); border-color: var(--accent); }

/* Interrupteur */
.onb-bascule{
  grid-column: 1/-1; display:flex; align-items:center; gap:16px;
  padding:16px; border:1px solid var(--trait); border-radius:12px; background: var(--surface);
}
.onb-bascule-titre{ font-size:.93rem; font-weight:600; }
.onb-bascule-aide{ font-size:.82rem; color: var(--sourdine); margin-top:2px; }
.bascule{
  margin-left:auto; flex:none; width:46px; height:26px; border-radius:100px;
  background: var(--trait-fort); position:relative; transition: background-color .18s;
}
.bascule.active{ background: var(--accent); }
.bascule-pastille{
  position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow: var(--ombre-fine); transition: transform .18s;
}
.bascule.active .bascule-pastille{ transform: translateX(20px); }

.onb-connexion .bt, .onb-connexion .etat{ margin-left:auto; }

/* ---------- ecran de preparation ---------- */

.prepa{
  display:flex; flex-direction:column; align-items:center;
  padding: clamp(40px,10vh,90px) 0; text-align:center;
}
.prepa h1{ font-size:1.5rem; font-weight:700; letter-spacing:-.025em; margin-bottom:26px; }
.prepa-rond{
  width:34px; height:34px; border-radius:50%; margin-bottom:20px;
  border:2.5px solid var(--trait); border-top-color: var(--accent);
  animation: tourne .8s linear infinite;
}
@keyframes tourne{ to{ transform: rotate(360deg); } }
.prepa-coche{
  width:52px; height:52px; border-radius:50%; margin-bottom:20px;
  display:grid; place-items:center; font-size:1.5rem;
  background: var(--vert-voile); color: var(--vert);
}

.prepa-liste{ display:flex; flex-direction:column; gap:14px; text-align:left; }
.prepa-ligne{
  display:flex; align-items:center; gap:12px;
  font-size:.92rem; color: var(--sourdine); opacity:.45; transition: opacity .3s, color .3s;
}
.prepa-ligne.encours{ opacity:1; color: var(--encre); }
.prepa-ligne.faite{ opacity:1; color: var(--encre-douce); }
.prepa-ligne.echoue{ opacity:1; color: var(--alerte); }
.prepa-puce{
  width:18px; height:18px; border-radius:50%; flex:none;
  border:1.5px solid var(--trait-fort); transition: background-color .3s, border-color .3s;
  display:grid; place-items:center;
}
.prepa-ligne.encours .prepa-puce{ border-top-color: var(--accent); animation: tourne .8s linear infinite; }
.prepa-ligne.faite .prepa-puce{ background: var(--vert); border-color: var(--vert); }
.prepa-ligne.faite .prepa-puce::after{ content:'✓'; color:#fff; font-size:.68rem; }
.prepa-ligne.echoue .prepa-puce{ background: var(--alerte); border-color: var(--alerte); }
.prepa-ligne.echoue .prepa-puce::after{ content:'!'; color:#fff; font-size:.7rem; font-weight:700; }

/* ---------- mobile ---------- */

@media (max-width: 820px){
  :root{ --rail: 0px; }
  .rail{
    inset: auto 0 0 0; width: auto; height: auto; flex-direction: row; align-items: center;
    border-right: 0; border-top: 1px solid var(--trait); padding: 6px 6px;
    overflow-x: auto; scrollbar-width: none;
  }
  .rail::-webkit-scrollbar{ display:none; }
  .rail-marque{ display:none; }
  .rail-nav{ flex-direction: row; gap: 2px; }
  .rail-nav a{ flex-direction: column; gap: 3px; font-size: .68rem; padding: 6px 12px; min-height: auto; white-space: nowrap; position: relative; }
  .rail-nav .pastille{ position: absolute; top: 2px; right: 4px; margin: 0; min-width:16px; height:16px; font-size:.66rem; }
  .rail-pied{ margin-top: 0; padding-top: 0; border-top: 0; display: flex; flex-direction: row; align-items: center; }
  .rail-site, .rail-pied > .bt{ display: none; }
  .zone{ padding-bottom: 66px; }
  .page{ padding-bottom: 90px; }
  .publication{ bottom: 60px; }
  #souffle{ bottom: 156px; left: 50%; }
}

@media (max-width: 560px){
  .produit-grille{ grid-template-columns: 1fr; }
  .ligne-horaire{ grid-template-columns: 84px 1fr; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* ---------- champ verrouille ----------
   Une cle d'API ou un identifiant de propriete ne se modifie pas par
   inadvertance : au repos c'est du texte, l'edition demande un clic. */

.champ-verrou{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background: var(--surface-creux); border:1px solid var(--trait);
  border-radius:10px; padding:10px 12px;
}
.champ-verrou input{
  flex:1 1 200px; min-width:0; margin:0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.86rem;
}
.champ-verrou-val{
  flex:1 1 200px; min-width:0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.86rem; color: var(--encre); font-weight:600;
  overflow-wrap:anywhere;
}
.champ-verrou-val.vide{
  font-family: inherit; font-weight:500; font-style:italic;
  color: var(--encre-douce);
}

/* ---------- bouton nouveautes ----------
   En bas a droite, hors du flux : present sur toutes les pages sans
   prendre de place dans la navigation, qui est deja chargee. */

.maj-bouton{
  position: fixed; right:22px; bottom:22px; z-index: 60;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface); color: var(--encre-douce);
  border:1px solid var(--trait-fort); box-shadow: var(--ombre);
  cursor:pointer; transition: transform .16s, box-shadow .16s, color .16s;
}
.maj-bouton:hover{ transform: translateY(-2px); color: var(--encre); box-shadow: var(--ombre-haute); }
.maj-bouton svg{ width:20px; height:20px; }
.maj-pastille{
  position:absolute; top:8px; right:8px;
  width:9px; height:9px; border-radius:50%;
  background: var(--accent); border:2px solid var(--surface);
  box-sizing: content-box;
}
.maj-pastille[hidden]{ display:none; }

.modale-large{ width:min(560px,100%); }
.maj-liste{ margin-top:18px; max-height:min(52vh,440px); overflow-y:auto; }
.maj-version{ padding:16px 0; border-top:1px solid var(--trait); }
.maj-version:first-child{ border-top:0; padding-top:4px; }
.maj-entete{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.maj-num{ font-size:.8rem; font-weight:700; color: var(--encre); letter-spacing:-.01em; }
.maj-date{ font-size:.78rem; color: var(--encre-douce); margin-left:auto; }
.maj-titre{ font-size:.95rem; font-weight:650; color: var(--encre); margin-top:8px; }
.maj-points{ list-style:none; margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.maj-points li{
  position:relative; padding-left:16px;
  font-size:.89rem; color: var(--encre-douce); line-height:1.5;
}
.maj-points li::before{
  content:''; position:absolute; left:2px; top:.55em;
  width:5px; height:5px; border-radius:50%; background: var(--trait-fort);
}

@media (max-width: 760px){
  .maj-bouton{ right:16px; bottom:16px; }
}

/* ===================================================================
   Modules premium : progression, notifications, recherche, rapports,
   parrainage. Tout passe par les memes jetons de couleur que le reste
   de la maquette — aucun de ces blocs n introduit sa propre palette.
   =================================================================== */

.aide{ font-size:.86rem; color: var(--sourdine); line-height:1.55; }
.aide b{ color: var(--encre); font-weight:650; }

/* ---------- progression ---------- */

.prog-bloc{ overflow:hidden; }
.prog-tete{ display:flex; align-items:center; gap:18px; padding:20px 22px; }
.prog-anneau{ flex:none; }
.prog-titre{ font-size:1rem; font-weight:700; letter-spacing:-.015em; }
.prog-sous{ font-size:.87rem; color: var(--sourdine); margin-top:3px; line-height:1.5; }
.prog-liste{ border-top:1px solid var(--trait); }
.prog-tache{
  display:flex; align-items:center; gap:14px;
  padding:14px 22px; border-bottom:1px solid var(--trait);
  text-decoration:none; color:inherit; transition: background-color .12s;
}
.prog-tache:last-child{ border-bottom:0; }
.prog-tache:hover{ background: var(--surface-creux); }
.prog-tache:hover .prog-fleche{ transform: translateX(3px); color: var(--encre); }
.prog-case{
  width:18px; height:18px; border-radius:50%; flex:none;
  border:2px dashed var(--trait-fort);
}
.prog-texte{ flex:1; min-width:0; }
.prog-texte b{ display:block; font-size:.92rem; font-weight:650; }
.prog-texte span{ display:block; font-size:.82rem; color: var(--sourdine); margin-top:2px; }
.prog-fleche{ color: var(--sourdine); font-size:1rem; transition: transform .16s, color .16s; }

/* ---------- notifications ---------- */

.cloche{ position:relative; }
.cloche-pastille{
  position:absolute; top:3px; right:3px; min-width:16px; height:16px;
  padding:0 4px; border-radius:9px; box-sizing:border-box;
  background: var(--accent); color: var(--sur-accent, #fff);
  font-size:.64rem; font-weight:700; line-height:16px; text-align:center;
  border:2px solid var(--surface);
}
.cloche-pastille[hidden]{ display:none; }
.notif-panneau{
  position:absolute; top: calc(100% + 8px); right:0; z-index:70;
  width:min(360px, calc(100vw - 32px));
  background: var(--surface); border:1px solid var(--trait);
  border-radius:14px; box-shadow: var(--ombre-haute); overflow:hidden;
  animation: monte .16s cubic-bezier(.16,1,.3,1);
}
.notif-panneau[hidden]{ display:none; }
.notif-tete{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px 12px 16px; border-bottom:1px solid var(--trait);
  font-size:.86rem; font-weight:700;
}
.notif-liste{ max-height:min(60vh, 420px); overflow-y:auto; }
.notif-vide{ padding:26px 16px; text-align:center; font-size:.86rem; color: var(--sourdine); }
.notif-ligne{
  display:flex; align-items:flex-start; gap:12px; padding:13px 16px;
  border-bottom:1px solid var(--trait); text-decoration:none; color:inherit;
  transition: background-color .12s;
}
.notif-ligne:last-child{ border-bottom:0; }
a.notif-ligne:hover{ background: var(--surface-creux); }
.notif-icone{
  width:30px; height:30px; border-radius:9px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface-creux); color: var(--sourdine);
}
.notif-icone svg{ width:15px; height:15px; }
.notif-icone[data-type="demande"]{ color: var(--accent); }
.notif-icone[data-type="alerte"]{ color: var(--accent); }
.notif-icone[data-type="publication"]{ color: var(--vert); }
.notif-texte{ flex:1; min-width:0; }
.notif-texte b{ display:block; font-size:.87rem; font-weight:650; line-height:1.4; }
.notif-texte span{
  display:block; font-size:.8rem; color: var(--sourdine); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.notif-texte time{ display:block; font-size:.74rem; color: var(--sourdine); margin-top:4px; }
.notif-point{
  width:7px; height:7px; border-radius:50%; background: var(--accent);
  flex:none; margin-top:6px;
}

/* ---------- recherche globale ---------- */

.recherche-declencheur{
  display:flex; align-items:center; gap:8px;
  height:36px; padding:0 10px 0 11px; border-radius: var(--r-s);
  background: var(--surface-creux); border:1px solid var(--trait);
  color: var(--sourdine); font-size:.85rem; cursor:pointer;
  transition: border-color .14s, color .14s;
}
.recherche-declencheur:hover{ border-color: var(--trait-fort); color: var(--encre); }
.recherche-declencheur .ic{ width:15px; height:15px; }
kbd{
  font-family: inherit; font-size:.72rem; font-weight:600;
  padding:2px 6px; border-radius:5px;
  background: var(--surface); border:1px solid var(--trait-fort);
  color: var(--sourdine);
}
.palette-fond{
  position:fixed; inset:0; z-index:90;
  background: rgba(22,22,26,.34); backdrop-filter: blur(3px);
  display:flex; align-items:flex-start; justify-content:center;
  padding: max(10vh, 60px) 16px 16px;
}
.palette-fond[hidden]{ display:none; }
.palette{
  width:min(560px,100%); background: var(--surface);
  border:1px solid var(--trait); border-radius:16px;
  box-shadow: var(--ombre-haute); overflow:hidden;
  animation: monte .18s cubic-bezier(.16,1,.3,1);
}
.palette-tete{
  display:flex; align-items:center; gap:11px;
  padding:14px 16px; border-bottom:1px solid var(--trait);
}
.palette-tete .ic{ width:17px; height:17px; flex:none; }
.palette-saisie{
  flex:1; min-width:0; margin:0; padding:0;
  border:0; background:none; box-shadow:none;
  font-size:.98rem; color: var(--encre);
}
.palette-saisie:focus{ outline:none; box-shadow:none; }
.palette-resultats{ max-height:min(56vh,420px); overflow-y:auto; padding:6px; }
.palette-vide{ padding:28px 16px; text-align:center; font-size:.87rem; color: var(--sourdine); }
.palette-ligne{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:11px 12px; border-radius:9px; border:0; background:none;
  text-align:left; cursor:pointer; color:inherit;
}
.palette-ligne.actif{ background: var(--surface-creux); }
.palette-texte{ flex:1; min-width:0; }
.palette-texte b{ display:block; font-size:.9rem; font-weight:650; }
.palette-texte span{
  display:block; font-size:.8rem; color: var(--sourdine); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.palette-badge{
  flex:none; font-size:.7rem; font-weight:600; color: var(--sourdine);
  padding:3px 8px; border-radius:20px; background: var(--surface-creux);
  border:1px solid var(--trait);
}

/* ---------- rapports ---------- */

.rapport-phrase{
  font-size:1.05rem; line-height:1.6; font-weight:550;
  letter-spacing:-.01em; margin-top:12px; max-width:62ch;
}
.ecart{
  display:inline-block; margin-top:6px;
  font-size:.76rem; font-weight:700;
  padding:2px 7px; border-radius:20px;
}
.ecart[data-sens="haut"]{ background: var(--vert-voile); color: var(--vert); }
.ecart[data-sens="bas"]{ background: var(--surface-creux); color: var(--sourdine); }

/* ---------- parrainage ---------- */

.parrain-code{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 18px; border-radius:12px;
  background: var(--surface-creux); border:1px dashed var(--trait-fort);
}
.parrain-etiq{ font-size:.78rem; font-weight:600; color: var(--sourdine); }
.parrain-val{
  flex:1; min-width:0; font-size:1.3rem; font-weight:800;
  letter-spacing:.06em; color: var(--encre);
}
.parrain-lien{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.parrain-lien input{ flex:1 1 240px; min-width:0; font-size:.86rem; }

@media (max-width: 760px){
  .recherche-declencheur span, .recherche-declencheur kbd{ display:none; }
  .recherche-declencheur{ width:36px; justify-content:center; padding:0; }
  .notif-panneau{ position:fixed; top:66px; right:12px; left:12px; width:auto; }
  .prog-tete{ padding:16px; gap:14px; }
  .parrain-val{ font-size:1.1rem; }
}

/* L'etat d'un compte se lit a droite de son titre, pas colle contre.
   Le selecteur reprend `.champ-inline label` : sans ca, la regle plus
   specifique du bloc parent gagne et remet un display:block. */
.champ-inline label.champ-tete{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}

/* Marche a suivre iOS : une liste numerotee, pas un paragraphe. */

/* Choix unique : la pastille est ronde. Un carre veut dire "plusieurs
   reponses possibles" — le detail est minuscule mais c'est ce qui evite
   au client de cliquer partout en croyant tout pouvoir cocher. */
[role="radiogroup"] .choix-case{ border-radius:50%; }

.prepa-boutons{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:22px;
}

/* ===================================================================
   Refonte clarte : le verdict, le bloc "A faire", et les etats de
   connexion. Les anciennes classes .synthese-* et .conversion-* ne
   sont plus produites par aucun ecran.
   =================================================================== */

/* Le verdict remplace le bloc "synthese narrative" : meme role, moins
   de mots. Pas d'encadre, pas de badge — c'est la premiere chose lue,
   elle n'a besoin d'aucune decoration pour se faire remarquer. */
.verdict{ margin-bottom: 22px; }
.verdict-titre{
  font-size: clamp(1.35rem, 3.2vw, 1.7rem); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.2; text-wrap: balance;
}
.verdict-texte{
  font-size: .95rem; color: var(--sourdine);
  margin-top: 7px; line-height: 1.55; max-width: 56ch;
}

/* Bloc "A faire" : plus compact que l'ancienne barre de progression,
   parce qu'il n'est plus seul sur l'ecran. */
.prog-tete{ display:flex; align-items:center; gap:14px; padding:16px 20px; }
.prog-titre{ font-size:1rem; font-weight:700; letter-spacing:-.015em; }
.prog-reste{
  padding: 11px 20px; font-size: .82rem; color: var(--sourdine);
  border-top: 1px solid var(--trait);
}

/* Lien discret a droite d'un titre de section : "Tout voir" sans
   fabriquer un bouton, qui appellerait plus l'oeil que le graphe. */
.section-tete{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.section-tete h2{ flex:1; min-width:0; }
.section-lien{
  font-size:.84rem; font-weight:600; color: var(--sourdine);
  text-decoration:none; white-space:nowrap;
}
.section-lien:hover{ color: var(--encre); }

/* Etat d'une connexion : la couleur seule ne suffit pas a distinguer
   connecte de pas connecte, le texte le dit aussi. */
.ligne-etat{ font-size:.86rem; color: var(--sourdine); }
.ligne-etat[data-ok="oui"]{ color: var(--vert); font-weight:600; }
.mini-etat{ font-size:.82rem; color: var(--sourdine); }
.mini-etat[data-ok="oui"]{ color: var(--vert); font-weight:650; }

/* Barre d'outils des statistiques : onglets a gauche, actions a droite. */
.barre-outils{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* ---------- impression ----------
   Le bouton "Imprimer" des Statistiques produisait un PDF avec le menu
   lateral, l'entete et les boutons. On ne garde que le contenu. */
@media print{
  .rail, .entete, .maj-bouton, .barre-outils, .publication,
  .palette-fond, .notif-panneau, .bt, .prog-fleche{ display:none !important; }
  .zone{ margin:0; }
  .page{ max-width:none; padding:0; }
  .section, .kpi, .mesure{
    box-shadow:none !important; border-color:#ddd !important;
    break-inside: avoid;
  }
  body{ background:#fff; }
}


/* Adresse du site : la meme case qu'un champ de reseau social, mais
   c'est un lien. Le domaine ne se modifie pas ici — en revanche le
   client veut souvent aller voir son site, et l'icone de lien externe
   dit exactement ce qui va se passer au clic. */
.champ-lien{
  display:flex; align-items:center; gap:10px; width:100%;
  background: var(--surface-creux); border:1px solid var(--trait-fort);
  border-radius: var(--r-s); padding: 11px 13px;
  font-size:.95rem; font-weight:600; color: var(--encre);
  text-decoration:none; overflow-wrap:anywhere;
  transition: border-color .15s, background-color .15s;
}
a.champ-lien:hover{ background: var(--surface); border-color: var(--accent); }
a.champ-lien:focus-visible{
  outline:none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-voile);
}
.champ-lien-icone{ width:15px; height:15px; flex:none; margin-left:auto; color: var(--sourdine); }
a.champ-lien:hover .champ-lien-icone{ color: var(--encre); }
.champ-lien.vide{ font-weight:500; font-style:italic; color: var(--sourdine); }

/* ===================================================================
   LA CARTE DANS L'EDITEUR

   Avant : chaque plat depliait son formulaire complet, en pleine
   largeur. Quatre-vingts plats faisaient quatre-vingts ecrans, et
   atteindre les boissons demandait une minute de defilement.

   Maintenant : les rubriques sont repliables, et chaque plat est une
   TUILE — photo, nom, prix. La meme lecture que sur le site, pour que
   le restaurateur retrouve son plat la ou son client le voit. On ouvre
   la tuile pour modifier, et elle prend alors toute la largeur.
   =================================================================== */

/* La rubrique repliable. `list-style` et le marqueur WebKit doivent
   etre neutralises tous les deux : Safari ignore le premier. */
.groupe-carte > summary{ list-style:none; cursor:pointer; }
.groupe-carte > summary::-webkit-details-marker{ display:none; }
.groupe-carte > summary::after{
  content:'⌄'; margin-left:10px; font-size:1rem; line-height:1;
  color: var(--sourdine); transition: transform .18s ease;
}
.groupe-carte[open] > summary::after{ transform: rotate(180deg); }
.groupe-carte > summary:hover{ color: var(--accent, var(--encre)); }
.groupe-carte > summary:focus-visible{ outline:2px solid var(--encre); outline-offset:3px; border-radius:6px; }

/* La grille de tuiles. `min(100%, 132px)` evite le debordement
   classique d'`auto-fill` quand le conteneur est plus etroit que la
   piste demandee. */
.produits-grille{
  display:grid; gap:10px; margin: 4px 0 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr));
}

.produit-tuile{
  border:1px solid var(--trait); border-radius:12px; overflow:hidden;
  background: var(--fond, #fff);
}
/* Ouverte, la tuile prend la LIGNE ENTIERE : le formulaire a besoin de
   largeur, et l'ouvrir dans une colonne de 132 px n'aurait aucun sens. */
.produit-tuile[open]{ grid-column: 1 / -1; }

.produit-tuile > summary{
  list-style:none; cursor:pointer; display:flex; flex-direction:column; gap:0;
}
.produit-tuile > summary::-webkit-details-marker{ display:none; }
.produit-tuile > summary:focus-visible{ outline:2px solid var(--encre); outline-offset:-2px; }
.produit-tuile:hover{ border-color: var(--sourdine); }

.tuile-photo{
  display:block; aspect-ratio:1/1; background: var(--trait);
  overflow:hidden; position:relative;
}
.tuile-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.tuile-vide{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:1.5rem; font-weight:700; color: var(--sourdine);
}
.tuile-txt{ display:block; padding:9px 11px 11px; }
.tuile-nom{
  display:block; font-size:.84rem; font-weight:600; line-height:1.3;
  /* Deux lignes au plus : sans cette limite, un nom long fait grandir
     sa tuile et desaligne toute la rangee. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.2em;
}
.tuile-prix{
  display:block; margin-top:3px; font-size:.8rem; font-weight:700;
  color: var(--sourdine); font-variant-numeric: tabular-nums;
}

/* Ouverte, la tuile montre son formulaire : la vignette carree ne sert
   plus a rien, la photo est deja dans le formulaire. */
.produit-tuile[open] > summary .tuile-photo{ display:none; }
.produit-tuile[open] > summary{
  flex-direction:row; align-items:baseline; gap:10px;
  padding:12px 14px; border-bottom:1px solid var(--trait);
}
.produit-tuile[open] > summary .tuile-txt{ padding:0; display:flex; gap:10px; align-items:baseline; }
.produit-tuile[open] > summary .tuile-nom{ min-height:0; -webkit-line-clamp:1; }
.produit-tuile[open] .produit{ border:0; border-radius:0; }

/* En-tete de rubrique dans la carte : sans elle, quarante plats font une
   liste indifferenciee ou personne ne retrouve son entree. */
.groupe-produits{
  display:flex; align-items:baseline; gap:10px;
  margin: 22px 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--trait);
  font-size:.78rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color: var(--encre);
}
.groupe-produits:first-child{ margin-top: 0; }
.groupe-compte{
  margin-left:auto; font-size:.72rem; font-weight:600;
  letter-spacing:0; text-transform:none; color: var(--sourdine);
}

.formule-nom{ font-size:1.35rem; font-weight:700; letter-spacing:-.025em; }

/* Reglage du budget dans le recapitulatif : c'est en voyant le total,
   gestion comprise, qu'on ajuste — pas trois ecrans plus haut. */
.budget-reglage{ display:flex; align-items:center; gap:10px; }
.budget-val{ font-variant-numeric: tabular-nums; min-width:9ch; text-align:right; }
.bt-pas{
  width:30px; height:30px; flex:none; border-radius:8px;
  display:grid; place-items:center;
  background: var(--surface); border:1px solid var(--trait-fort);
  color: var(--encre); font-size:1.05rem; line-height:1; cursor:pointer;
  transition: background-color .12s, border-color .12s, opacity .12s;
}
.bt-pas:hover:not(:disabled){ background: var(--surface-creux); border-color: var(--accent); }
.bt-pas:disabled{ opacity:.35; cursor:default; }

/* ---------- vue operateur : une demande de campagne ---------- */

.demande-ads{
  padding: 18px 0;
  border-bottom: 1px solid var(--trait);
}
.demande-ads:last-child{ border-bottom: 0; }
.demande-ads-tete{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.demande-ads-client{ font-size: 1rem; font-weight: 700; letter-spacing: -.02em; }
.demande-ads-nom{ font-size: .88rem; color: var(--sourdine); margin-top: 2px; }

.demande-ads-faits{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px; margin-top: 14px;
}
.demande-ads-etiq{
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sourdine);
}
.demande-ads-val{ font-size: .92rem; font-weight: 600; margin-top: 3px; }

.demande-ads-pied{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px dashed var(--trait);
}
.demande-ads-pied select{ width: auto; min-width: 210px; }

/* ---------- cote client : le suivi de sa demande ---------- */

.suivi-ads{
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 14px 0;
  border-bottom: 1px solid var(--trait);
}
.suivi-ads:last-child{ border-bottom: 0; }
.suivi-ads-nom{ font-size: .95rem; font-weight: 650; }
.suivi-ads-sous{ font-size: .82rem; color: var(--sourdine); margin-top: 2px; }

/* Avertissement, pas erreur : le client peut continuer. D'ou l'ambre
   et le liseré plutot qu'un encadré rouge, qui ferait croire a un refus. */
.avertissement{
  display:flex; gap:10px; margin-top:12px; padding:11px 14px;
  border-left:3px solid var(--ambre); border-radius:0 8px 8px 0;
  background: var(--surface-creux);
  font-size:.87rem; color: var(--encre-douce); line-height:1.55;
}
.avertissement[hidden]{ display:none; }

/* Libelle sur deux niveaux : le poste, puis qui l'encaisse. La seconde
   ligne est ce qui evite au client de croire que tout lui est facture. */
.recap-double{ display:block; }
.recap-double small{
  display:block; font-size:.76rem; font-weight:500;
  color: var(--sourdine); margin-top:2px;
}

/* ===================================================================
   Allegement de Statistiques.

   Le contenu ne bouge pas, seul le decor recule. Huit blocs encadres,
   ombres et bordures marquees les uns sur les autres, ca donne une page
   lourde ou chaque bloc se dispute l'attention. Ici les cadres
   s'effacent et c'est l'espace qui separe.
   =================================================================== */

.zone .kpi,
.zone .section{
  box-shadow: none;
}
.zone .kpi:hover,
.zone .section:hover{
  box-shadow: none;
  border-color: var(--trait);
}

/* L'icone n'a plus besoin de son cadre : elle sert de reperage, pas de
   decoration. Sans bordure elle pese moitie moins et se lit pareil. */
.kpi-icone{
  border-color: transparent;
  background: var(--surface-creux);
  color: var(--sourdine);
  width: 34px; height: 34px; border-radius: 10px; margin-bottom: 14px;
}
.kpi-icone svg{ width: 16px; height: 16px; }

.kpi{ min-height: 0; padding: 22px; }
.grille-kpi{ gap: 14px; }

/* Les repartitions respirent au lieu de s'empiler. */
.grille-duo{ gap: 14px; margin-bottom: 14px; }

/* Le titre d'une repartition n'a pas besoin d'un filet sous lui quand
   le bloc lui-meme est deja delimite. */
.zone .grille-duo .section-tete{ border-bottom: 0; padding-bottom: 4px; }

/* La courbe : un gris profond plutot qu'un noir franc. Sur fond creme,
   le noir pur vibre et attire l'oeil plus que la donnee ne le merite. */
.zone svg polyline[stroke]{ stroke: var(--encre-douce); }

/* Le graphe secondaire des cartes KPI reste une indication, pas une
   figure : on le pose plus bas et plus discret. */
.kpi-graphe{ opacity: .45; }

/* Barres de repartition : moins contrastees, la longueur suffit a
   comparer. */
.repartition-barre{ background: var(--encre-douce); }
.camembert-puce{ opacity: .9; }

/* Ni noir plein dans les graphiques ni dans les puces de legende : sur
   fond creme, le noir fait une tache qui se lit avant la donnee. */
.camembert-puce{ background: var(--encre-douce); }
.repartition-barre{ background: var(--encre-douce); opacity: .55; }
.zone svg polyline[stroke]{ stroke: var(--encre-douce); }

/* ---------- mode operateur ---------- */

/* Detache du menu client par un filet : ce sont deux roles differents,
   et Nico doit voir d'un coup d'oeil quand il quitte son espace de
   client pour son outil d'agence. */
.rail-operateur{
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--trait);
}
.rail-operateur .rail-titre{ padding-top: 0; }

/* Une fiche client dans la vue operateur : lisible en survolant la
   liste, sans avoir a ouvrir quoi que ce soit. */
.op-client{ padding: 16px 0; border-bottom: 1px solid var(--trait); }
.op-client:last-child{ border-bottom: 0; }
.op-client-tete{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.op-client-nom{ font-size: 1rem; font-weight: 700; letter-spacing: -.02em; }
.op-client-lien{
  font-size: .84rem; color: var(--sourdine);
  text-decoration: none; margin-top: 2px; display: inline-block;
}
a.op-client-lien:hover{ color: var(--encre); text-decoration: underline; }
.op-client-pied{ font-size: .82rem; color: var(--sourdine); margin-top: 10px; }

/* Les branchements, en un coup d'oeil. Le mot reste lisible meme sans
   la couleur : c'est le texte qui informe, la teinte ne fait que
   confirmer. */
.op-jetons{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
/* Le jeton dit l'etat ET ouvre le detail : il doit donc avoir l'air
   cliquable, sans pour autant crier comme un bouton d'action. */
.op-jeton{
  font-size: .74rem; font-weight: 600; padding: 5px 11px; border-radius: 20px;
  border: 1px solid var(--trait); background: var(--surface-creux);
  color: var(--sourdine); cursor: pointer;
  transition: border-color .14s, background-color .14s, color .14s;
}
.op-jeton:hover{ border-color: var(--accent); color: var(--encre); background: var(--surface); }
.op-jeton[data-ok="oui"]{
  color: var(--vert); border-color: var(--vert-voile); background: var(--vert-voile);
}
.op-jeton[data-ok="oui"]::before{ content: '✓ '; }

/* La fiche client s'ouvre au clic sur son nom. */
details.op-client > .op-client-tete{ cursor: pointer; list-style: none; }
details.op-client > .op-client-tete::-webkit-details-marker{ display: none; }
details.op-client .section-chevron{ margin-left: auto; align-self: center; }
details.op-client[open] .section-chevron{ transform: rotate(90deg); }
details.op-client[open] .op-client-nom{ color: var(--encre); }

.op-resume{ margin-top: 4px; }
.op-resume-titre{
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sourdine);
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--trait);
}
.op-resume-chiffres{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px; margin-top: 12px;
}
.op-resume-val{
  font-size: 1.4rem; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.op-resume-etiq{ font-size: .8rem; color: var(--sourdine); margin-top: 2px; }
.op-resume-graphe{ margin-top: 14px; opacity: .5; }
.op-resume-actions{ display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* On rappelle en permanence de qui on regarde la page : sans ce
   bandeau, l'operateur peut croire modifier son propre site. */
.op-banniere{
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 14px 0 20px; padding: 12px 16px; border-radius: 10px;
  background: var(--surface-creux); border: 1px dashed var(--trait-fort);
}
.op-banniere-etiq{
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sourdine);
}
.op-banniere b{ font-size: .98rem; }

.op-ligne{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--trait);
}
.op-ligne:last-child{ border-bottom: 0; }
.op-ligne-etiq{ font-size: .84rem; color: var(--sourdine); flex: none; }
.op-ligne-val{ font-size: .9rem; font-weight: 600; text-align: right; overflow-wrap: anywhere; }

/* ================= application de bureau =================

   Rien ici ne s'applique dans un navigateur : la classe
   `dans-application` n'est posee que par bureau.js, quand la page
   tourne dans la fenetre installee, et le bouton n'y est pas cree.

   La fenetre est ouverte sans barre de titre — elle affichait un
   bandeau gris au-dessus d'une interface qui a deja son entete. Ce
   que le systeme assurait, la page le reprend : cette croix ferme
   l'application, et `.entete` / `.connexion` servent de prise pour
   deplacer la fenetre. */

.fermer-application{
  position: fixed; top: 8px; right: 10px; z-index: 200;
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: var(--r-s); color: var(--sourdine);
  transition: background-color .14s, color .14s;
}
.fermer-application svg{ width: 15px; height: 15px; }
.fermer-application:hover{ background: var(--alerte); color: #fff; }

/* La croix se superpose au coin droit de l'entete : sans ce retrait,
   elle recouvrirait l'icone des reglages. */
html.dans-application .entete-droite{ padding-right: 38px; }

/* ================= rapport mensuel ================= */

.rap-tete{ margin-bottom: 22px; }
.rap-label{ display: inline-flex; align-items: center; gap: 10px; font-size: .84rem; color: var(--sourdine); }
.rap-choix{
  padding: 8px 12px; border: 1px solid var(--trait-fort); border-radius: var(--r-s);
  background: var(--surface); color: var(--encre); font-weight: 600; font-size: .92rem;
}
.rap-mois{
  font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--sourdine); margin-bottom: 14px;
}

/* Les appels d'abord, les visiteurs en dernier : sur le site d'un
   artisan, l'appui sur le numero est l'action qui compte. */
.rap-cartes{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin-bottom: 22px;
}
.rap-carte{
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r); padding: 18px 20px;
}
.rap-etiq{ font-size: .82rem; color: var(--sourdine); margin-bottom: 6px; }
.rap-valeur{
  font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.rap-var{ margin-top: 4px; font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.rap-var[data-sens="haut"]{ color: var(--vert); }
/* Une baisse se lit, elle ne s'accuse pas : gris, pas rouge. Le rouge
   dirait « probleme » la ou il n'y a souvent qu'une saison creuse. */
.rap-var[data-sens="bas"], .rap-var[data-sens="plat"]{ color: var(--sourdine); }

.rap-bloc{
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r); padding: 20px 22px; margin-bottom: 12px;
}
.rap-titre{ font-size: 1rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: 10px; }
.rap-phrase{ color: var(--encre-douce); margin-bottom: 6px; max-width: 62ch; }
.rap-phrase:last-child{ margin-bottom: 0; }

/* Le conseil se distingue sans crier : un trait a gauche suffit. */
.rap-conseil{ border-left: 3px solid var(--accent); }

.rap-detail{ display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; }
.rap-detail dt{ font-size: .88rem; color: var(--encre-douce); }
.rap-detail dd{ font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* ================= demander un avis ================= */

.avis-carte{
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r); padding: 20px 22px; margin-top: 18px;
}
.avis-corps{ display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
/* Fond blanc et marge autour du code : un QR pose a meme une surface
   coloree, ou colle a un bord, ne se scanne pas. */
.qr-avis{
  flex: none; border-radius: var(--r-s); background: #fff;
  padding: 10px; border: 1px solid var(--trait);
}
.avis-texte-zone{ flex: 1 1 260px; min-width: 0; }
.avis-titre{ font-size: 1rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: 8px; }
.avis-texte{ color: var(--encre-douce); font-size: .92rem; margin-bottom: 14px; max-width: 52ch; }
.avis-actions{ display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.avis-lien{
  flex: 1 1 220px; min-width: 0; padding: 8px 12px;
  border: 1px solid var(--trait-fort); border-radius: var(--r-s);
  background: var(--surface-creux); color: var(--encre-douce);
  font-size: .85rem; text-overflow: ellipsis;
}

/* Carte simple : un bloc autonome dans une page d'onglets, quand le
   contenu ne merite ni titre pliable ni grille de champs. */
.carte-simple{
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r); padding: 20px 22px; margin-bottom: 14px;
}

/* ================= chantiers (avant / apres) ================= */

.chantier-liste{ display: grid; gap: 14px; }
.chantier-invite{ color: var(--sourdine); font-size: .92rem; max-width: 56ch; }

.chantier-carte{
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 18px; padding: 16px; border: 1px solid var(--trait);
  border-radius: var(--r); background: var(--surface-creux);
}
@media (max-width: 720px){
  .chantier-carte{ grid-template-columns: 1fr; }
}

.chantier-photos{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chantier-champ{ display: grid; gap: 6px; min-width: 0; }
.chantier-libelle{ font-size: .76rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--sourdine); }

/* Rapport 4/3 fixe : sans lui, la carte saute a chaque photo chargee,
   et deux cliches de formats differents se decalent l'un l'autre. */
.chantier-vignette{
  aspect-ratio: 4 / 3; border-radius: var(--r-s); overflow: hidden;
  background: var(--fond); border: 1px dashed var(--trait-fort);
  display: grid; place-items: center;
}
.chantier-vignette img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.chantier-vide{ font-size: .76rem; color: var(--sourdine); }
.chantier-bt-photo{ width: 100%; justify-content: center; font-size: .82rem; padding: 7px 10px; }

.chantier-infos{ display: grid; gap: 8px; align-content: start; min-width: 0; }
.chantier-titre, .chantier-desc{
  width: 100%; padding: 9px 12px; border: 1px solid var(--trait-fort);
  border-radius: var(--r-s); background: var(--surface); color: var(--encre);
}
.chantier-desc{ resize: vertical; font: inherit; }
.chantier-pied{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chantier-visible{ display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--encre-douce); }
.chantier-suppr{ color: var(--alerte); font-size: .84rem; }
.chantier-actions{ margin-top: 14px; }

/* Sur telephone, la cible tactile passe a 44 px : c'est le seuil sous
   lequel un appui rate regulierement. Or c'est precisement dehors, sur
   un chantier et parfois avec les mains sales, que ce bouton sert. */
@media (max-width: 720px){
  .chantier-bt-photo{ min-height: 44px; }
  .chantier-visible{ min-height: 44px; }
}

/* ================= Search Console ================= */

.sc-chiffres{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.sc-chiffre{
  background: var(--surface-creux); border: 1px solid var(--trait);
  border-radius: var(--r-s); padding: 14px 16px;
}
.sc-etiq{ font-size: .8rem; color: var(--sourdine); margin-bottom: 4px; }
.sc-valeur{ font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sc-aide{ font-size: .78rem; color: var(--sourdine); margin-top: 4px; }

/* Le tableau peut etre large : il defile dans son propre cadre, jamais
   en poussant la page de cote. */
.sc-defile{ overflow-x: auto; }
.sc-table{ width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 420px; }
.sc-table th{
  text-align: left; font-size: .74rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--sourdine);
  padding: 0 10px 8px; border-bottom: 1px solid var(--trait);
}
.sc-table td{ padding: 9px 10px; border-bottom: 1px solid var(--trait); }
.sc-table tr:last-child td{ border-bottom: 0; }
.sc-mot{ color: var(--encre); overflow-wrap: anywhere; }
/* `.sc-table th` porte deja `text-align: left` et pese plus lourd
   qu'une classe seule : sans le prefixe, les en-tetes de colonnes
   chiffrees restaient alignes a gauche au-dessus de nombres alignes a
   droite. */
.sc-table .sc-num{ text-align: right; font-variant-numeric: tabular-nums; color: var(--encre-douce); white-space: nowrap; }
.sc-note{ margin-top: 12px; font-size: .8rem; color: var(--sourdine); max-width: 68ch; }