/* Outil de prospection Aionos.
   ---------------------------------------------------------------------
   Deux contraintes qui ne vont pas naturellement ensemble :
   - Abra doit savoir quoi faire en ouvrant l'outil, sans formation ;
   - Nicolas doit pouvoir tout piloter depuis le meme endroit.

   La reponse tient dans une hierarchie : la colonne de gauche montre la
   journee en gros et le pilotage en petit. Rien n'est cache, mais tout
   n'a pas le meme poids.

   ---------------------------------------------------------------------
   LA CHARTE

   Le logo Aionos ne contient que trois couleurs, et l'outil s'en tient
   la. Elles ont ete relevees au pixel dans le fichier du logo :

     #08336d  le bleu marine du cercle, du A et du mot « aionos »
     #4baccd  le cyan de la fleche
     #ffffff  le blanc

   Leur emploi est dicte par le contraste, pas par le gout :

   - blanc sur marine        12.3:1  -> la colonne, les boutons
   - marine sur blanc        12.3:1  -> les titres, le texte fort
   - cyan sur marine          4.7:1  -> l'accent, mais **sur fond sombre**
   - cyan sur blanc           2.6:1  -> illisible, donc jamais du texte

   D'ou `--accent`, qui est le meme cyan pousse en profondeur jusqu'a
   passer sur du blanc (5.9:1) : c'est la meme famille, pas une
   quatrieme couleur.

   En mode sombre le fond devient un noir bleute et le cyan reprend
   exactement sa valeur du logo, ou il respire (6.9:1).

   Un aplat d'accent ne porte donc pas la meme encre selon le theme :
   du blanc sur le cyan profond en clair (5.9:1), le noir bleute sur le
   cyan du logo en sombre (7.1:1). C'est `--sur-accent` qui tranche, et
   c'est pour ca que les boutons ne codent plus `#fff` en dur. Meme
   raison pour `--sur-rouge` : la pastille rouge du menu passe de
   2.8:1 a 6.7:1 en sombre rien qu'en changeant son encre.

   Les valeurs ne sont ecrites qu'une fois, dans les deux jeux ci-dessous.
   Les blocs qui suivent ne font que brancher un jeu ou l'autre. */

:root {
  /* --- Le jeu clair --------------------------------------------- */
  --clair-marine: #08336d;
  --clair-marine-clair: #0d4691;
  --clair-accent: #1a6b8f;
  --clair-accent-survol: #12506d;
  --clair-sur-accent: #ffffff;
  --clair-accent-doux: #e7f2f7;
  --clair-texte: #1d2939;
  --clair-discret: #667085;
  --clair-bord: #dfe7f2;
  --clair-fond: #f4f7fb;
  --clair-carte: #ffffff;
  --clair-gris-doux: #eef2f8;
  --clair-rouge: #b42318;
  --clair-sur-rouge: #ffffff;
  --clair-rouge-doux: #fdecea;
  --clair-orange: #a1610b;
  --clair-orange-doux: #fdf4e3;
  --clair-vert: #17683f;
  --clair-vert-doux: #e8f5ee;
  --clair-ombre: 0 1px 2px rgba(8, 51, 109, .06), 0 1px 3px rgba(8, 51, 109, .09);
  --clair-ombre-haute: 0 12px 32px rgba(8, 51, 109, .18);

  /* --- Le jeu sombre -------------------------------------------- */
  --sombre-marine: #0a1420;
  --sombre-marine-clair: #16273a;
  --sombre-accent: #4baccd;
  --sombre-accent-survol: #6cc3e0;
  --sombre-sur-accent: #0a1420;
  --sombre-accent-doux: #12303d;
  --sombre-texte: #e7ecf2;
  --sombre-discret: #94a3b8;
  --sombre-bord: #253243;
  --sombre-fond: #0f1720;
  --sombre-carte: #16202b;
  --sombre-gris-doux: #1e2937;
  --sombre-rouge: #f87171;
  --sombre-sur-rouge: #0a1420;
  --sombre-rouge-doux: #331614;
  --sombre-orange: #eab308;
  --sombre-orange-doux: #2d2610;
  --sombre-vert: #4ade80;
  --sombre-vert-doux: #10281c;
  --sombre-ombre: 0 1px 3px rgba(0, 0, 0, .45);
  --sombre-ombre-haute: 0 12px 32px rgba(0, 0, 0, .55);

  /* Le cyan du logo, invariant : il ne sert que sur fond sombre, ou il
     tient le contraste dans les deux themes. */
  --cyan: #4baccd;

  --rayon: 10px;
}

/* --- Le branchement, dans l'ordre de priorite ------------------- */

/* 1. Par defaut, le jeu clair. */
:root {
  --marine: var(--clair-marine);
  --marine-clair: var(--clair-marine-clair);
  --accent-survol: var(--clair-accent-survol);
  --sur-accent: var(--clair-sur-accent);
  --accent: var(--clair-accent);
  --accent-doux: var(--clair-accent-doux);
  --texte: var(--clair-texte);
  --discret: var(--clair-discret);
  --bord: var(--clair-bord);
  --fond: var(--clair-fond);
  --carte: var(--clair-carte);
  --gris-doux: var(--clair-gris-doux);
  --rouge: var(--clair-rouge);
  --sur-rouge: var(--clair-sur-rouge);
  --rouge-doux: var(--clair-rouge-doux);
  --orange: var(--clair-orange);
  --orange-doux: var(--clair-orange-doux);
  --vert: var(--clair-vert);
  --vert-doux: var(--clair-vert-doux);
  --ombre: var(--clair-ombre);
  --ombre-haute: var(--clair-ombre-haute);
}

/* 2. Le reglage du systeme, sauf si l'utilisateur a demande le clair. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --marine: var(--sombre-marine);
    --marine-clair: var(--sombre-marine-clair);
    --accent-survol: var(--sombre-accent-survol);
    --sur-accent: var(--sombre-sur-accent);
    --accent: var(--sombre-accent);
    --accent-doux: var(--sombre-accent-doux);
    --texte: var(--sombre-texte);
    --discret: var(--sombre-discret);
    --bord: var(--sombre-bord);
    --fond: var(--sombre-fond);
    --carte: var(--sombre-carte);
    --gris-doux: var(--sombre-gris-doux);
    --rouge: var(--sombre-rouge);
    --sur-rouge: var(--sombre-sur-rouge);
    --rouge-doux: var(--sombre-rouge-doux);
    --orange: var(--sombre-orange);
    --orange-doux: var(--sombre-orange-doux);
    --vert: var(--sombre-vert);
    --vert-doux: var(--sombre-vert-doux);
    --ombre: var(--sombre-ombre);
    --ombre-haute: var(--sombre-ombre-haute);
  }
}

/* 3. Le choix explicite du bouton, qui l'emporte sur le systeme. */
:root[data-theme="sombre"] {
  --marine: var(--sombre-marine);
  --marine-clair: var(--sombre-marine-clair);
  --accent-survol: var(--sombre-accent-survol);
  --sur-accent: var(--sombre-sur-accent);
  --accent: var(--sombre-accent);
  --accent-doux: var(--sombre-accent-doux);
  --texte: var(--sombre-texte);
  --discret: var(--sombre-discret);
  --bord: var(--sombre-bord);
  --fond: var(--sombre-fond);
  --carte: var(--sombre-carte);
  --gris-doux: var(--sombre-gris-doux);
  --rouge: var(--sombre-rouge);
  --sur-rouge: var(--sombre-sur-rouge);
  --rouge-doux: var(--sombre-rouge-doux);
  --orange: var(--sombre-orange);
  --orange-doux: var(--sombre-orange-doux);
  --vert: var(--sombre-vert);
  --vert-doux: var(--sombre-vert-doux);
  --ombre: var(--sombre-ombre);
  --ombre-haute: var(--sombre-ombre-haute);
}

/* Sur la colonne marine, dans les deux themes. */
:root {
  --nav-texte: #b8c7da;
  --nav-survol: rgba(255, 255, 255, .07);
  --nav-choisi: rgba(255, 255, 255, .12);
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 1.45rem; letter-spacing: -.015em; margin: 0 0 .2rem; }
h2 { font-size: 1.02rem; margin: 0 0 .5rem; display: flex; align-items: center; gap: .5rem; }
h3 { font-size: .95rem; margin: 0 0 .5rem; }
p { margin: 0 0 .5rem; }
a { color: var(--accent); }
.discret { color: var(--discret); }
.petit { font-size: .82rem; }
.droite { text-align: right; }
.note { margin-top: 1.5rem; font-size: .85rem; }

/* Les icones viennent d'un sprite SVG defini une fois dans base.html :
   aucun fichier distant, donc rien de plus a autoriser dans la CSP. */
.ico {
  width: 1.05rem; height: 1.05rem; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ===================================================================== */
/* Ossature : colonne de navigation, barre haute, contenu                */
/* ===================================================================== */

body.avec-colonne {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "nav barre" "nav contenu";
  min-height: 100vh;
}
body.sans-colonne main { max-width: 26rem; margin: 4rem auto; }

.marque {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 700; letter-spacing: -.02em; font-size: 1.1rem;
  color: var(--texte); text-decoration: none;
}
/* Le point reprend le cyan de la fleche du logo. Il est toujours pose
   sur la colonne marine, ou ce cyan tient le contraste. */
.marque .point {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--cyan); flex: 0 0 auto;
}

.colonne-nav {
  grid-area: nav;
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column;
  padding: 1.1rem .7rem .8rem;
  background: var(--marine); color: var(--nav-texte);
  overflow-y: auto;
}
.colonne-nav .marque { color: #fff; padding: .1rem .55rem 1.2rem; }
.colonne-nav nav { display: flex; flex-direction: column; }

.groupe-titre {
  margin: 1.1rem 0 .3rem; padding: 0 .55rem;
  font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: rgba(184, 199, 218, .55);
}
.groupe-titre:first-child { margin-top: 0; }

.colonne-nav nav a, .menu-mobile nav a {
  display: flex; align-items: center; gap: .6rem;
  padding: .44rem .55rem; margin-bottom: 1px; border-radius: 7px;
  color: var(--nav-texte); text-decoration: none;
  font-size: .89rem; line-height: 1.35;
}
.colonne-nav nav a > span:first-of-type,
.menu-mobile nav a > span:first-of-type { flex: 1; }
.colonne-nav nav a:hover, .menu-mobile nav a:hover {
  background: var(--nav-survol); color: #fff;
}
.colonne-nav nav a.actif, .menu-mobile nav a.actif {
  background: var(--nav-choisi); color: #fff; font-weight: 600;
}
.colonne-nav nav a.actif .ico, .menu-mobile nav a.actif .ico { color: var(--cyan); }

/* Le groupe du haut porte la journee : cible de clic plus grande,
   libelle plus lourd. C'est la que va l'oeil en ouvrant l'outil. */
.colonne-nav nav.principale a { padding: .55rem; font-size: .95rem; font-weight: 500; }
.colonne-nav nav.principale a .ico { width: 1.15rem; height: 1.15rem; }

/* Deux tons, et pas un seul : des taches dues sont le travail normal de
   la journee, une alerte urgente ne l'est pas. Tout en rouge, et le
   rouge cesse de vouloir dire quelque chose. */
.pastille-nav {
  min-width: 1.3rem; padding: 0 .35rem; border-radius: 999px;
  font-size: .71rem; font-weight: 700; text-align: center; line-height: 1.3rem;
}
.pastille-nav.urgent { background: var(--rouge); color: var(--sur-rouge); }
.pastille-nav.a-faire { background: #14507f; color: #fff; }

.pied-nav {
  margin-top: auto; padding: .9rem .55rem 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .8rem; color: rgba(184, 199, 218, .75);
}

/* La barre haute porte ce qui n'appartient a aucun ecran : chercher, et
   savoir qui est connecte. */
.barre-haute {
  grid-area: barre;
  display: flex; align-items: center; gap: 1rem;
  position: sticky; top: 0; z-index: 30;
  padding: .65rem 1.4rem;
  background: var(--carte); border-bottom: 1px solid var(--bord);
}
.recherche-globale { flex: 1 1 auto; max-width: 30rem; position: relative; margin: 0; }
.recherche-globale .ico {
  position: absolute; left: .65rem; top: 50%; transform: translateY(-50%);
  color: var(--discret); pointer-events: none;
}
.recherche-globale input {
  width: 100%; padding: .42rem 2.2rem .42rem 2.1rem;
  background: var(--fond); border: 1px solid var(--bord); border-radius: 8px;
}
/* Le raccourci s'annonce plutot que de s'apprendre. Il s'efface des que
   le champ sert, sinon il chevaucherait ce qu'on est en train de taper. */
.raccourci {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  padding: 0 .35rem; border: 1px solid var(--bord); border-radius: 5px;
  background: var(--carte); color: var(--discret);
  font: 600 .72rem/1.5 inherit; pointer-events: none;
}
.recherche-globale:focus-within .raccourci { display: none; }
.identite { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
.identite form { margin: 0; }

/* Le bouton de theme. Il montre la destination, pas l'etat courant :
   une lune veut dire « passer en sombre », comme un interrupteur montre
   la position ou on va. Le choix de l'icone se fait en CSS, donc il
   reste juste meme si le script ne s'est pas execute. */
.bascule-theme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; padding: 0;
  background: none; border: 1px solid var(--bord); border-radius: 8px;
  color: var(--discret); cursor: pointer;
}
.bascule-theme:hover { background: var(--gris-doux); color: var(--texte); }
.ico-vers-clair { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .ico-vers-sombre { display: none; }
  :root:not([data-theme="clair"]) .ico-vers-clair { display: inline; }
}
:root[data-theme="sombre"] .ico-vers-sombre { display: none; }
:root[data-theme="sombre"] .ico-vers-clair { display: inline; }
:root[data-theme="clair"] .ico-vers-sombre { display: inline; }
:root[data-theme="clair"] .ico-vers-clair { display: none; }
.jeton {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.85rem; height: 1.85rem; border-radius: 50%;
  background: var(--marine); color: #fff;
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
}

main { grid-area: contenu; max-width: 1180px; padding: 1.5rem 1.4rem 3rem; width: 100%; }

/* Telephone : la colonne ne tient pas, elle devient un panneau qu'on ouvre. */
.bouton-menu { display: none; }
.menu-mobile > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem; border: 1px solid var(--bord); border-radius: 8px;
  font-size: .88rem;
}
.menu-mobile > summary::-webkit-details-marker { display: none; }
.menu-mobile > nav {
  position: absolute; right: .8rem; left: .8rem; top: 3.4rem; z-index: 40;
  display: flex; flex-direction: column;
  background: var(--marine); border-radius: var(--rayon);
  box-shadow: var(--ombre-haute);
  padding: .7rem; max-height: 78vh; overflow-y: auto;
}

@media (max-width: 900px) {
  body.avec-colonne { display: block; }
  .colonne-nav { display: none; }
  .barre-haute { padding: .55rem .8rem; flex-wrap: wrap; }
  .bouton-menu { display: block; }
  .recherche-globale { order: 3; flex-basis: 100%; max-width: none; }
  main { padding: 1rem .8rem 2.5rem; }
}

/* ===================================================================== */
/* Blocs communs                                                         */
/* ===================================================================== */

.entete-page {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.compteur { text-align: right; }
.compteur strong { display: block; font-size: 1.4rem; font-variant-numeric: tabular-nums; }

.carte {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); box-shadow: var(--ombre); padding: 1rem;
}
.centre { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.etroite { width: min(100%, 360px); display: flex; flex-direction: column; gap: .6rem; }

/* Appeler est l'action de la journee : un seul bouton la porte, et il ne
   ressemble a aucun autre bouton de l'outil. */
.action-maitresse {
  display: flex; align-items: center; gap: .9rem;
  padding: .95rem 1.2rem; margin-bottom: 1.2rem;
  background: var(--marine); color: #fff;
  border-radius: var(--rayon); text-decoration: none;
  box-shadow: var(--ombre);
}
.action-maitresse:hover { background: var(--marine-clair); }
.action-maitresse .ico { width: 1.5rem; height: 1.5rem; }
.action-maitresse strong { display: block; font-size: 1.02rem; }
.action-maitresse .sous { color: rgba(255, 255, 255, .72); font-size: .85rem; }
.action-maitresse .fleche { margin-left: auto; }

.bandeau-argent {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  flex-wrap: wrap; text-decoration: none; color: inherit;
  border-left: 4px solid var(--rouge); margin-bottom: 1.2rem;
}
.bandeau-argent:hover { border-color: var(--accent); }
.montant { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; display: block; }

.cartes-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.chiffre { display: flex; flex-direction: column; gap: .1rem; border-left: 4px solid var(--bord); }
.chiffre.rouge { border-left-color: var(--rouge); }
.chiffre.vert { border-left-color: var(--vert); }
.chiffre.gris { border-left-color: var(--discret); }
.chiffre .libelle { font-weight: 600; font-size: .88rem; }

.bloc { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1rem; margin-bottom: 1rem; box-shadow: var(--ombre); }
.bloc.urgent { border-left: 4px solid var(--rouge); }
.bloc.vide { text-align: center; padding: 2.5rem 1rem; }
.bloc.vide p { margin: 0 0 .4rem; }
.pastille { background: var(--gris-doux); color: var(--discret); border-radius: 99px; padding: .05rem .5rem; font-size: .78rem; font-weight: 700; }

.liste { list-style: none; margin: 0; padding: 0; }
.liste li { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; border-top: 1px solid var(--bord); }
.liste li:first-child { border-top: 0; }
.liste .titre { font-weight: 600; }
.liste .corps { flex: 1; }
.liste form { margin: 0 0 0 auto; }
.liste-taches li.echue .titre { color: var(--rouge); }
.faible { opacity: .55; }

.etiquette { font-size: .76rem; font-weight: 700; padding: .1rem .5rem; border-radius: 99px; white-space: nowrap; background: var(--gris-doux); color: var(--discret); }
.etiquette.rouge { background: var(--rouge-doux); color: var(--rouge); }
.etiquette.orange { background: var(--orange-doux); color: var(--orange); }
.etiquette.verte { background: var(--vert-doux); color: var(--vert); }
.etiquette.grise, .etiquette.neutre { background: var(--gris-doux); color: var(--discret); }
.etiquette.mince { background: transparent; border: 1px solid var(--bord); color: var(--discret); font-weight: 600; }
.tel { font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: none; }

.tableau { width: 100%; border-collapse: collapse; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; }
.tableau th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--discret); padding: .6rem .8rem; border-bottom: 1px solid var(--bord); background: var(--fond); }
.tableau td { padding: .6rem .8rem; border-top: 1px solid var(--bord); vertical-align: top; }
.tableau tbody tr:hover { background: var(--fond); }
.ligne-rouge { background: color-mix(in srgb, var(--rouge-doux) 55%, transparent); }
.ligne-grise { background: color-mix(in srgb, var(--gris-doux) 55%, transparent); }
.colonne-actions { min-width: 180px; }
.volet { display: flex; flex-direction: column; gap: .4rem; padding: .6rem; margin-top: .4rem; background: var(--fond); border-radius: 8px; }
.ligne-action { display: flex; flex-direction: column; margin: 0; }
.formulaire-licence { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--bord); }

/* ===================================================================== */
/* Champs et boutons                                                     */
/* ===================================================================== */

input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea {
  width: 100%; padding: .45rem .6rem; border: 1px solid var(--bord);
  border-radius: 8px; background: var(--carte);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.champ { display: flex; flex-direction: column; gap: .2rem; }
.champ > span { font-size: .8rem; font-weight: 600; }
.champ > span em { font-style: normal; font-weight: 400; color: var(--discret); }
.champ em { font-weight: 400; font-style: normal; color: var(--discret); }
.champ textarea { resize: vertical; }

button {
  padding: .45rem .95rem; border: 1px solid transparent; border-radius: 8px;
  background: var(--accent); color: var(--sur-accent); font-weight: 600; cursor: pointer;
}
button:hover { background: var(--accent-survol); }
button.secondaire { background: var(--carte); color: var(--texte); border-color: var(--bord); }
button.secondaire:hover { background: var(--fond); }
button.lien, .lien {
  background: none; border: 0; padding: 0; color: var(--accent);
  font-weight: 600; text-align: left; cursor: pointer; font-size: .88rem;
}
button.lien:hover, .lien:hover { background: none; text-decoration: underline; }
.lien.danger { color: var(--rouge); }
.bouton { display: inline-block; margin-top: .8rem; padding: .5rem 1rem; background: var(--accent); color: var(--sur-accent); border-radius: 8px; text-decoration: none; font-weight: 600; }
.bouton:hover { background: var(--accent-survol); }
.bouton.avec-icone { display: inline-flex; align-items: center; gap: .45rem; }

.formulaire-inline { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.formulaire-inline .grand { flex: 1 1 260px; }
.formulaire-inline select, .formulaire-inline input[type="date"] { width: auto; }
.formulaire-inline .lien { margin-left: .3rem; }

.onglets { display: flex; gap: .4rem; flex-wrap: wrap; }
.onglets a { padding: .3rem .75rem; border-radius: 99px; text-decoration: none; color: var(--discret); font-size: .88rem; }
.onglets a:hover { background: var(--gris-doux); }
.onglets a.actif { background: var(--accent-doux); color: var(--accent); font-weight: 600; }

.alerte { background: var(--rouge-doux); color: var(--rouge); padding: .5rem .7rem; border-radius: 8px; font-size: .88rem; }
.message { background: var(--vert-doux); color: var(--vert); border: 1px solid var(--vert); border-radius: 8px; padding: .6rem .8rem; margin-bottom: 1rem; font-weight: 600; }

details summary { cursor: pointer; }
summary { font-size: .88rem; }

/* ===================================================================== */
/* Ecran Appeler                                                         */
/* ===================================================================== */

.grille-appel { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: .8rem; }
@media (max-width: 1000px) { .grille-appel { grid-template-columns: 1fr; } }
.colonne { display: flex; flex-direction: column; gap: .8rem; }

.entete-fiche { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .25rem .9rem; margin: 0; font-size: .9rem; }
.details dt { color: var(--discret); }
.details dd { margin: 0; }
.details dd.surligne { font-weight: 700; color: var(--accent); }
.alerte-inline { color: var(--rouge); font-weight: 600; }

.bouton-tel { display: flex; flex-direction: column; align-items: center; padding: .55rem 1.1rem; background: var(--marine); color: #fff; border-radius: var(--rayon); text-decoration: none; }
.bouton-tel:hover { background: var(--marine-clair); }
.tel-numero { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tel-mention { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }

blockquote { margin: 0 0 .5rem; padding: .6rem .8rem; background: var(--accent-doux); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; font-size: .92rem; }
blockquote p { margin: 0 0 .4rem; } blockquote p:last-child { margin: 0; }
.carte.accent { border-color: var(--accent); }
.consigne { font-weight: 600; }
.declencheur { font-weight: 700; font-size: .88rem; margin-bottom: .3rem; }
.declencheur em { font-weight: 400; font-style: normal; color: var(--discret); font-size: .8rem; }
.reponse { margin-bottom: .9rem; }
.objection summary { padding: .35rem 0; font-weight: 600; font-size: .88rem; }
.objection[open] summary { color: var(--accent); }
.objection p { padding-bottom: .5rem; margin: 0; }
.carte.interdit { border-color: var(--rouge); }
.carte.interdit ul { margin: 0 0 .8rem; padding-left: 1.1rem; }
.carte.interdit li { margin-bottom: .35rem; }
.concurrents { width: 100%; border-collapse: collapse; }
.concurrents th { text-align: left; padding: .2rem .5rem .2rem 0; white-space: nowrap; vertical-align: top; }
.concurrents td { padding: .2rem .5rem .2rem 0; vertical-align: top; }

.verbatim { font-style: italic; margin-top: .15rem; font-size: .9rem; }
.ligne-historique { align-items: flex-start; }
.notes-importees { margin-top: .8rem; padding: .6rem; background: var(--fond); border-radius: 8px; }
.notes-importees p { margin: .4rem 0 0; font-size: .87rem; white-space: pre-wrap; }

.statuts { border: 0; padding: 0; margin: 0; }
.statuts legend { font-weight: 600; padding: 0; margin-bottom: .4rem; }
.choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .4rem; }
.option-statut { display: flex; align-items: center; gap: .4rem; padding: .45rem .6rem; border: 1px solid var(--bord); border-radius: 8px; cursor: pointer; }
.option-statut:has(input:checked) { border-color: var(--accent); background: var(--accent-doux); }
.option-statut input { width: auto; margin: 0; }
.option-libelle { font-weight: 600; font-size: .87rem; }

.formulaire { display: flex; flex-direction: column; gap: .8rem; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 560px) { .deux-colonnes { grid-template-columns: 1fr; } }
.erreurs { margin: 0; padding: .6rem .7rem .6rem 1.6rem; background: var(--rouge-doux); border: 1px solid var(--rouge); border-radius: 8px; color: var(--rouge); font-size: .88rem; }
.erreurs li { margin-bottom: .3rem; }
.actions { display: flex; gap: .5rem; }
.actions button { flex: 1; }
.passer { display: flex; align-items: baseline; gap: .6rem; }

/* ===================================================================== */
/* Activite, pipeline, qualite                                           */
/* ===================================================================== */

.courbe { display: flex; align-items: flex-end; gap: 2px; height: 70px; margin-top: .6rem; }
.barre-jour { flex: 1; height: 100%; display: flex; align-items: flex-end; background: var(--gris-doux); border-radius: 2px; }
.barre-remplie { width: 100%; background: var(--accent); border-radius: 2px; }
.liste-alertes li { align-items: flex-start; }

/* Les alertes sont groupees par regle. Une liste plate de 131 lignes dont
   86 repetent le meme constat ne se lit pas : on voit d'abord combien de
   sortes de problemes il y a, et seulement ensuite lesquels.

   Les groupes qui se reparent ailleurs (les defauts de donnees, qui ont
   leur page « Qualite ») arrivent replies et en gris : ils comptent, mais
   ils ne se traitent pas ici. Rien n'est cache pour autant, un clic les
   ouvre. */
.groupe-alertes { padding: 0; margin-bottom: .7rem; }
.groupe-alertes > summary {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .9rem; font-size: .95rem; list-style: none;
}
/* `display: flex` efface le triangle natif : on le redessine, sinon rien
   n'indique que le bloc s'ouvre. */
.groupe-alertes > summary::-webkit-details-marker { display: none; }
.groupe-alertes > summary::before {
  content: ""; flex: 0 0 auto; width: .38rem; height: .38rem;
  border-right: 2px solid var(--discret); border-bottom: 2px solid var(--discret);
  transform: rotate(-45deg); transition: transform .15s;
}
.groupe-alertes[open] > summary::before { transform: rotate(45deg); }
.groupe-alertes > summary .titre { font-weight: 600; }
.groupe-alertes > summary .renvoi {
  margin-left: auto; font-size: .82rem; white-space: nowrap;
}
.groupe-alertes .explication { padding: 0 .9rem; margin: 0 0 .5rem; }
.groupe-alertes .liste { padding: 0 .9rem .5rem; }
.groupe-alertes .liste li:first-child { border-top: 1px solid var(--bord); }
.groupe-alertes.a-reparer-ailleurs > summary .titre {
  font-weight: 500; color: var(--discret);
}

.pagination { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1rem; }
.groupe-doublon { padding: .8rem 0; border-top: 1px solid var(--bord); }
.cartes-doublons { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .6rem; margin-top: .4rem; }
.carte-doublon { padding: .7rem; }
.carte-doublon.suggere { border-color: var(--vert); background: color-mix(in srgb, var(--vert-doux) 40%, transparent); }
.carte-doublon .details { margin-top: .4rem; }

.ligne-total td { border-top: 2px solid var(--texte); font-size: 1.05rem; }
.candidat { margin-bottom: .8rem; }
.candidat.inactif { opacity: .72; border-left: 3px solid var(--orange); }
.candidat form { align-items: end; margin-top: .6rem; }
.candidat form button { grid-column: 1 / -1; }

/* ===================================================================== */
/* Edition des fiches                                                    */
/* ===================================================================== */

/* Les formulaires longs se replient : la fiche reste lisible en lecture,
   qui est ce qu'on en fait dix fois plus souvent que l'ecrire. */
.volet-edition { margin-top: .8rem; border-top: 1px solid var(--bord); padding-top: .6rem; }
.volet-edition > summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--accent); }
.volet-edition > summary.petit { font-weight: 500; font-size: .82rem; }
.volet-edition[open] > summary { margin-bottom: .7rem; }
.ligne-edition { padding: 0 !important; border-top: 0 !important; }
.ligne-edition .volet-edition { margin-top: 0; border-top: 0; padding-top: 0; }

.formulaire-fiche { margin: 0; }
.groupe-champs { border: 0; padding: 0; margin: 0 0 1rem; }
.groupe-champs legend { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--discret); font-weight: 700; padding: 0 0 .4rem; }
.grille-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.grille-champs .large { grid-column: span 2; }
.grille-champs .pleine { grid-column: 1 / -1; }
.verrou { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--orange); font-weight: 700; }

.cases { flex-direction: row; flex-wrap: wrap; gap: .8rem; }
.case { display: flex; align-items: baseline; gap: .35rem; font-size: .82rem; font-weight: 500; }
.case input { width: auto; }

.actions-formulaire { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .8rem; }
.actions-fiche { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.formulaire-note { display: flex; gap: .5rem; align-items: flex-end; margin-bottom: .8rem; }
.formulaire-note textarea { flex: 1; resize: vertical; }
.sans-puces { list-style: none; margin: 0; padding: 0; }

.barre-resultats { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; flex-wrap: wrap; }
.barre-resultats p { margin: 0; }
.barre-resultats strong { font-variant-numeric: tabular-nums; }
.indicateur { font-size: .8rem; color: var(--discret); }
#resultats { transition: opacity .12s ease; }

/* Trois etats visuellement distincts : un chiffre confirme, une
   approximation, ou rien. Le tiret unique laissait croire a une donnee. */
.cellule-taille { min-width: 130px; }
.cellule-taille strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.approx { font-size: .88rem; color: var(--discret); font-style: italic; }
.sous-seuil { color: var(--orange); }
.note-tri { margin-top: .5rem; }

.colonne-case { width: 2.2rem; text-align: center; }
.barre-lot {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;
  padding: 1rem; margin-top: 1rem;
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.lot-action { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; border: 0; margin: 0; padding: 0; }
.lot-action legend { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--discret); padding: 0; }
.lot-action input[name="motif"], .lot-action input[name="intitule"] { min-width: 15rem; }
.message-lot { padding: .7rem 1rem; margin-bottom: 1rem; border-radius: 8px; background: var(--accent-doux); border: 1px solid var(--accent); }

/* ===================================================================== */
/* Devis : page autonome, pensee pour finir en PDF                       */
/* ===================================================================== */

.page-devis { background: var(--fond); margin: 0; padding: 0 0 3rem; }
.barre-devis {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .9rem 1.4rem; background: var(--carte);
  border-bottom: 1px solid var(--bord); margin-bottom: 2rem;
}

/* A4 : 210mm moins deux fois 18mm de marge. Le devis a la meme largeur a
   l'ecran qu'au tirage, donc ce qu'on voit est ce qu'on envoie. Ses
   couleurs sont figees : il finit sur du papier blanc, pas dans un
   navigateur en mode sombre. */
.devis {
  width: 174mm; max-width: calc(100% - 2rem); margin: 0 auto;
  background: #fff; color: #1d2939; padding: 18mm; border: 1px solid #dfe7f2;
}
.devis-entete { display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 2px solid #08336d; padding-bottom: 1rem; margin-bottom: 2rem; }
.devis-entete h1 { margin: 0; font-size: 1.7rem; letter-spacing: -.02em; }
.devis-entete h2 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.devis-entete p { margin: .3rem 0 0; }
.devis-client { margin-bottom: 2rem; }
.devis-client h3, .devis-conditions h3 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .09em;
  color: #667085; margin: 0 0 .5rem;
}
.devis-client p { margin: 0; line-height: 1.5; }
.devis-lignes { width: 100%; margin-bottom: 2rem; }
.devis-lignes tfoot td { padding-top: .55rem; border: 0; }
.devis-lignes tfoot tr:first-child td { border-top: 1px solid #dfe7f2; padding-top: .9rem; }
.devis-lignes tfoot .remise td { color: #b45309; }
.devis-lignes tfoot .total-ttc td { border-top: 2px solid #08336d; font-size: 1.05rem; padding-top: .7rem; }
.devis-conditions ul { margin: 0; padding-left: 1.1rem; color: #4b5563; }
.devis-conditions li { margin-bottom: .3rem; }

/* Sortie du flux sans `display:none` : un champ masque de cette facon ne
   peut plus etre selectionne, donc le repli de copie ne marcherait pas. */
.hors-ecran {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

.espace-haut { margin-top: 1rem; }
.texte-brut { white-space: pre-wrap; }

/* ===================================================================== */
/* Aide                                                                  */
/* ===================================================================== */

/* Un « ? » discret, replie par defaut. */
.aide { display: inline-block; position: relative; vertical-align: middle; }
.aide > summary {
  list-style: none; cursor: help;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--gris-doux); color: var(--discret); font-size: .74rem; font-weight: 700;
}
.aide > summary::-webkit-details-marker { display: none; }
.aide[open] > summary { background: var(--accent); color: var(--sur-accent); }
.aide-contenu {
  position: absolute; left: 0; top: 1.6rem; z-index: 25; width: min(28rem, 80vw);
  background: var(--carte); border: 1px solid var(--bord); border-radius: 8px;
  box-shadow: var(--ombre-haute); padding: .8rem 1rem;
  font-weight: 400; font-size: .87rem; line-height: 1.5;
}
.aide-contenu strong { display: block; margin-bottom: .3rem; }
.aide-contenu p { margin: 0; color: var(--discret); }

/* Page « Comment ca marche » : des etapes numerotees, pas un manuel. */
.etapes { list-style: none; counter-reset: etape; margin: 0; padding: 0; }
.etapes > li { counter-increment: etape; position: relative; padding: 0 0 1.3rem 3rem; border: 0; }
.etapes > li::before {
  content: counter(etape);
  position: absolute; left: 0; top: 0;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--marine); color: #fff; font-weight: 700; font-size: .9rem;
}
.etapes h3 { margin: .25rem 0 .3rem; }
.etapes p { color: var(--discret); margin: 0 0 .3rem; }
.repere { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .8rem; }
.repere .carte { display: flex; gap: .7rem; align-items: flex-start; }
.repere .ico { color: var(--accent); margin-top: .15rem; }
.repere strong { display: block; }
.repere p { margin: 0; font-size: .87rem; color: var(--discret); }

/* ===================================================================== */
/* Objectifs                                                             */
/* ===================================================================== */

.cellule-jauge { min-width: 11rem; }
.jauge { height: .5rem; background: var(--gris-doux); border-radius: 3px; overflow: hidden; margin-bottom: .2rem; }
.jauge-remplie { height: 100%; background: var(--accent); transition: width .2s; }
.jauge-remplie.atteinte { background: var(--vert); }
.tendance-haut { color: var(--vert); font-weight: 600; }
.tendance-bas { color: var(--orange); font-weight: 600; }

/* Le rapport s'imprime : titre visible seulement sur papier, chrome masque. */
.titre-impression { display: none; }
@media print {
  @page { size: A4; margin: 0; }
  .page-devis { background: #fff; padding: 0; }
  .devis { width: auto; max-width: none; border: 0; margin: 0; padding: 18mm; }
  a[href]::after { content: ""; }
  .colonne-nav, .barre-haute, .barre, .sans-impression { display: none !important; }
  body.avec-colonne { display: block; }
  main { max-width: none; padding: 0; }
  .titre-impression { display: block; margin: 0 0 1.2rem; }
  .carte { border: 0; box-shadow: none; padding: 0 0 1.2rem; break-inside: avoid; }
}