/* Espace client et console d'Archipel Horizon.
   Style repris des maquettes (produit/espace-client-et-console/maquettes/client/style.css, style-chat-client.css,
   style-automatisations-client.css et maquettes/console/style.css, 24/09/2026), décision D61 du 26/09/2026.
   Adaptations : police Inter embarquée (statique/polices/, licence OFL), jamais chargée depuis un CDN ; aucun style en ligne (CSP « style-src 'self' ») : les styles en ligne des maquettes sont devenus des
   classes ci-dessous ; formulaires, tableaux, messages et page de connexion ajoutés dans le même esprit. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(polices/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(polices/inter-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(polices/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(polices/inter-latin-700-normal.woff2) format('woff2'); }
:root {
  --cream: #faf9f6; --blanc: #fff; --noir: #111111; --orange: #ff5600;
  /* P24 : orange foncé pour le texte et les boutons pleins (contraste AA 4,5:1, blanc dessus 5,2:1) */
  --orange-texte: #c43f00;
  --oat: #dedbd6; --sand: #d3cec6; --doux: #5f5f5d; --pale: #656561;
  --vert: #0b7a3b; --bleu: #1257c9; --rose: #c2185b;
  --ligne: #f1efeb; --moi: #e9e6e0; --lui-bord: #f2cdb8; --aide-fond: #fff3ec; --aide-bord: #ffd9c6;
  --mono: ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--cream); color: var(--noir);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
p a, li a, td a, .lien-texte { color: var(--noir); text-decoration: underline; text-decoration-color: var(--sand);
  text-underline-offset: 2px; }
/* Au survol, le texte prend l'orange foncé (4,5:1 au moins) ; l'orange vif reste pour les filets et les bordures (recette du
   03/10 : 3,2:1 en texte). */
p a:hover, li a:hover, td a:hover, .lien-texte:hover { color: var(--orange-texte); text-decoration-color: var(--orange); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
h1, h2, h3 { letter-spacing: -.3px; }
.app { display: grid; grid-template-columns: 246px minmax(0, 1fr); min-height: 100vh; }
.app > * { min-width: 0; }

/* ---------------------------------------------------------------- barre latérale */
.cote { border-right: 1px solid var(--oat); background: #fff; padding: 16px 12px; display: flex; flex-direction: column; }
.marque { display: flex; align-items: center; gap: 8px; padding: 4px 8px 16px; font-weight: 600; letter-spacing: -.2px; }
.marque .pt { width: 10px; height: 10px; border-radius: 3px; background: var(--orange); display: inline-block; flex: none; }
.marque span.petit { font-weight: 400; color: var(--pale); font-size: 12px; }
.marque b { font-weight: inherit; }
.marque .horizon { display: none; }   /* « Archipel Horizon » en entier dans le style du site (P74) */
.sous-marque { font-size: 11px; color: var(--pale); padding: 0 8px 10px; margin-top: -10px; }
.blocorg { border: 1px solid var(--oat); border-radius: 8px; padding: 8px; margin-bottom: 14px; }
.org { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 6px; font-weight: 500;
  font-size: 13.5px; }
.org:hover { background: var(--cream); }
.org .ic { width: 18px; text-align: center; color: var(--pale); flex: none; }
.org .nom-org { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.org .nb { margin-left: auto; font-size: 10.5px; color: var(--pale); white-space: nowrap; padding-left: 6px; }
.org.sel { background: var(--cream); outline: 1px solid var(--oat); }
.invite { display: block; text-align: center; margin: 8px 4px 0; padding: 8px; border: 1px dashed var(--sand);
  border-radius: 6px; font-size: 13px; color: var(--doux); }
.invite:hover { border-color: var(--orange); color: var(--orange-texte); }
.menu { margin-top: 16px; }
.menu .titre { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--pale); padding: 10px 8px 6px; }
.onglet { display: flex; align-items: center; gap: 9px; padding: 8px 8px; border-radius: 6px; color: #313130;
  cursor: pointer; font-size: 14px; }
.onglet:hover { background: var(--cream); }
.onglet.actif { background: var(--noir); color: #fff; }
.onglet .ic { width: 18px; text-align: center; opacity: .85; flex: none; }
.onglet .pt { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); margin-left: auto; }
.cote .bas { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid var(--oat); font-size: 13px; }
.cote .bas .moi-cote { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cote .bas .moi-cote b { display: block; font-weight: 500; }
.cote .bas form { display: inline; }

/* ---------------------------------------------------------------- contenu */
.contenu { padding: 22px 26px 40px; max-width: 1180px; width: 100%; }
.haut { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.haut h1 { font-size: 22px; margin: 0; letter-spacing: -.5px; font-weight: 600; }
.haut > .badge { white-space: normal; max-width: 100%; }   /* un long badge passe à la ligne, jamais hors de l'écran */
.haut .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.intro { color: var(--pale); font-size: 12.5px; margin: -6px 0 16px; }
.retour { display: inline-block; font-size: 13px; color: var(--pale); margin-bottom: 8px; }
.retour:hover { color: var(--orange-texte); }

.btn { display: inline-block; padding: 8px 13px; border-radius: 4px; font-size: 13.5px; border: 1px solid var(--noir);
  background: #fff; color: var(--noir); cursor: pointer; font-family: inherit; line-height: 1.4; text-align: center; }
.btn:hover { background: var(--noir); color: #fff; }
.btn.or { background: var(--orange-texte); border-color: var(--orange-texte); color: #fff; }
.btn.or:hover { background: #a33500; border-color: #a33500; color: #fff; }
.btn.discret { border-color: var(--oat); color: var(--doux); }
.btn.discret:hover { background: var(--cream); color: var(--noir); }
.btn.danger { border-color: var(--rose); color: var(--rose); }
.btn.danger:hover { background: var(--rose); color: #fff; }
.btn.petit { padding: 5px 10px; font-size: 12.5px; }
.btn.actif { background: var(--noir); color: #fff; border-color: var(--noir); }
.btn[disabled], .btn[aria-disabled=true] { opacity: .55; cursor: not-allowed; }
.btn[disabled]:hover { background: #fff; color: var(--doux); }
.btn.or[disabled]:hover { background: var(--orange-texte); color: #fff; filter: none; }

.grille { display: grid; gap: 14px; }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g2 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.g2e { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-lateral { grid-template-columns: 264px minmax(0, 1fr); align-items: start; }
.g-scene { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 16px; margin-top: 12px; }
.bloc { margin-bottom: 14px; }
.espace-haut { margin-top: 14px; }
@media (max-width: 1080px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3, .g2, .g2e, .g-scene { grid-template-columns: minmax(0, 1fr); }
}
/* Conversations : sur une colonne, la conversation choisie s'affiche seule (flèche de retour à la liste). */
.retour-liste { display: none; }
@media (max-width: 1080px) {
  .conv-choisie > .liste-conv { display: none; }
  .conv-choisie .retour-liste { display: inline-flex; margin: 10px 16px 0; font-size: 18px; line-height: 1; padding: 6px 4px; }
}
.carte { background: #fff; border: 1px solid var(--oat); border-radius: 10px; padding: 16px; }
.carte h2 { font-size: 14px; margin: 0 0 4px; font-weight: 600; }
.carte h2.seul { margin: 0; }
.carte h3 { font-size: 13.5px; margin: 14px 0 6px; font-weight: 600; }
.carte.pointille { border-style: dashed; }
.carte.pause, .carte.estompe { opacity: .72; }
/* Recette du 03/10 (contrastes, seuil 4,5:1) : estompés à 72 %, les gris de texte tombaient à 3,2:1. Dans un élément estompé,
   le texte gris prend une teinte plus foncée de la même famille : une fois estompé, il se lit (4,6:1) et garde l'allure pâle. */
html:not([data-style="site"]) .carte.pause, html:not([data-style="site"]) .carte.estompe,
html:not([data-style="site"]) .sat:not(.actif) { --doux: #383837; --pale: #383835; }
.carte.plus { border-style: dashed; background: #fffaf7; }
.carte.alerte { border-color: var(--orange); }
.carte.sans-marge { padding: 0; overflow: hidden; }
.carte .tete-carte { display: flex; align-items: center; gap: 10px; }
.carte .tete-carte > div { min-width: 0; }
.carte .pied-carte { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.entre { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bandeau { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bandeau .texte { flex: 1; min-width: 240px; }
.sous { color: var(--pale); font-size: 12.5px; }
.sous.doux { color: var(--doux); }
p.sous { margin: 8px 0 0; }
p.sous.haut-carte { margin: 0 0 10px; }
.mono { font-family: var(--mono); }
.kpi { font-size: 28px; font-weight: 600; letter-spacing: -1px; margin: 6px 0 2px; line-height: 1; }
.kpi small { font-size: 13px; font-weight: 500; color: var(--pale); letter-spacing: 0; }
.kpi.orange { color: var(--orange-texte); }
.kpi.vide { color: var(--pale); }
.badge { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 99px; border: 1px solid var(--oat);
  color: var(--doux); background: var(--cream); white-space: nowrap; }
.badge.vert { color: var(--vert); border-color: #bfe0cd; background: #eef8f2; }
.badge.orange { color: var(--orange-texte); border-color: #ffd2bd; background: #fff2ec; }
.badge.rouge { color: var(--rose); border-color: #f1c0d3; background: #fdf0f5; }
.badge.noir { background: var(--noir); color: #fff; border-color: var(--noir); }
.badge.bleu { color: var(--bleu); border-color: #c4d6f4; background: #eff4fd; }
.barre { height: 7px; border-radius: 99px; background: var(--cream); overflow: hidden; margin-top: 10px;
  border: 1px solid var(--ligne); }
.barre i { display: block; height: 100%; border-radius: 99px; background: var(--noir); width: 0; }
.barre i.vert { background: var(--vert); }
.barre i.orange { background: var(--orange); }
.barre i.rouge { background: var(--rose); }
.barre.courte { width: 180px; margin-top: 6px; }
span.barre { display: block; }
/* Largeur d'une jauge : classe « l0 » à « l100 » par pas de 5 (aucun style en ligne, CSP). */
.l0{width:0}.l5{width:5%}.l10{width:10%}.l15{width:15%}.l20{width:20%}.l25{width:25%}.l30{width:30%}.l35{width:35%}
.l40{width:40%}.l45{width:45%}.l50{width:50%}.l55{width:55%}.l60{width:60%}.l65{width:65%}.l70{width:70%}
.l75{width:75%}.l80{width:80%}.l85{width:85%}.l90{width:90%}.l95{width:95%}.l100{width:100%}
.barre i.l0 { width: 0; }

.liste { list-style: none; margin: 0; padding: 0; }
.liste li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--ligne);
  font-size: 14px; }
.liste li:last-child { border-bottom: 0; }
.liste li > .corps { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.liste .h { color: var(--pale); font-size: 12px; margin-left: auto; white-space: nowrap; font-family: var(--mono); }
.liste .h.texte { font-family: inherit; }
.liste .h + .h { margin-left: 12px; }
.liste li.lien { cursor: pointer; }
.liste li.lien:hover { background: var(--cream); }
.liste.serree li { padding: 6px 0; }
.rond { width: 26px; height: 26px; border-radius: 50%; background: var(--noir); color: #fff; font-size: 12px;
  display: flex; align-items: center; justify-content: center; flex: none; font-weight: 500; }
.rond.or { background: var(--orange-texte); }
.rond.gris { background: var(--sand); color: var(--noir); }
.rond.clair { background: var(--cream); color: var(--doux); border: 1px solid var(--oat); }
.rond.moyen { width: 30px; height: 30px; font-size: 14px; }
.rond.grand { width: 36px; height: 36px; font-size: 14px; }
.rond.enorme { width: 38px; height: 38px; font-size: 15px; font-weight: 600; }
.ronds { display: flex; gap: 2px; }
.ronds .rond + .rond { margin-left: -8px; }
.vide-etat { text-align: center; padding: 26px 16px; color: var(--doux); }
.vide-etat .rond { margin: 0 auto 10px; }
.vide-etat b { display: block; color: var(--noir); margin-bottom: 4px; }
.vide-etat p { margin: 4px auto 0; max-width: 520px; font-size: 13.5px; }

/* « L'équipe en action » (écran Aujourd'hui) */
.scene { position: relative; background: var(--blanc); border: 1px solid var(--oat); border-radius: 10px; padding: 16px;
  min-height: 330px; overflow: hidden; }
.centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 2; }
.centre .rond { width: 92px; height: 92px; border-radius: 50%; background: var(--noir); color: #fff; display: flex;
  align-items: center; justify-content: center; font-size: 32px; margin: 0 auto; box-shadow: 0 0 0 8px rgba(17,17,17,.05); }
.centre b { display: block; margin-top: 10px; font-size: 15px; font-weight: 600; }
.centre i { font-style: normal; font-size: 12px; color: var(--pale); font-family: var(--mono); }
.sat { position: absolute; width: 150px; background: var(--cream); border: 1px solid var(--oat); border-radius: 8px;
  padding: 10px 12px; transition: .3s; opacity: .72; z-index: 2; }
.sat b { display: block; font-size: 14px; font-weight: 600; }
.sat span { font-size: 12px; color: var(--doux); }
.sat.actif { opacity: 1; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,86,0,.12); transform: translateY(-2px); }
.sat .pt { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--oat); }
.sat.actif .pt { background: var(--orange); animation: pouls 1.1s infinite; }
@keyframes pouls { 0% { box-shadow: 0 0 0 0 rgba(255,86,0,.5); } 70% { box-shadow: 0 0 0 7px rgba(255,86,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,86,0,0); } }
#s1 { left: 6%; top: 11%; } #s2 { right: 6%; top: 11%; } #s3 { left: 4%; bottom: 11%; } #s4 { right: 4%; bottom: 11%; }
.scene svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.lien-sat { stroke: #e7e3dd; stroke-width: .55; fill: none; }
.lien-sat.on { stroke: var(--orange); stroke-width: .8; stroke-dasharray: 2.5 2; animation: file 1s linear infinite; }
@keyframes file { to { stroke-dashoffset: -18; } }
@media (max-width: 640px) { .sat { width: 118px; padding: 8px; } .centre .rond { width: 70px; height: 70px; font-size: 24px; } }
.fil-jour { background: var(--blanc); border: 1px solid var(--oat); border-radius: 10px; padding: 18px 20px; }
.fil-jour h3 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--pale);
  font-family: var(--mono); font-weight: 500; }
.ev { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--oat); font-size: 14.5px; }
.ev:last-child { border-bottom: 0; }
.ev time { flex: none; color: var(--pale); font-family: var(--mono); font-size: 12.5px; padding-top: 2px; }
.ev > div { min-width: 0; overflow-wrap: anywhere; }

.etat { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--orange-texte); font-family: var(--mono);
  padding: 2px 2px; }
.etat .pu { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); animation: pouls 1.1s infinite; }
details.det { margin-top: 7px; font-size: 12.5px; }
details.det summary { color: var(--pale); cursor: pointer; list-style: none; font-family: var(--mono); }
details.det summary::-webkit-details-marker { display: none; }
details.det summary:hover { color: var(--orange-texte); }
details.det > div { margin-top: 6px; border-left: 2px solid var(--oat); padding: 2px 0 2px 10px; color: var(--doux); line-height: 1.7; }
.mfichier { position: relative; display: inline-block; }
.mfichier summary { list-style: none; cursor: pointer; color: var(--pale); padding: 0 6px; font-size: 16px; }
.mfichier summary::-webkit-details-marker { display: none; }
.mfichier[open] summary { color: var(--orange-texte); }
.mfichier > div { position: absolute; right: 0; top: 22px; z-index: 5; background: #fff; border: 1px solid var(--oat);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(17,17,17,.10); padding: 10px; min-width: 260px; text-align: left; }

/* Onglets en pastilles (Sécurité, Documents) */
.pastilles { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.pastilles a.badge:hover { border-color: var(--orange); color: var(--orange-texte); }
.pastilles a.badge.noir:hover { color: #fff; }

/* ---------------------------------------------------------------- tableaux */
.defile { overflow-x: auto; }
table.tableau { width: 100%; border-collapse: collapse; font-size: 14px; }
.tableau th, .tableau td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.tableau th { color: var(--pale); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau tr.lien { cursor: pointer; }
.tableau tr.lien:hover td { background: var(--cream); }
.tableau td.nb, .tableau th.nb { text-align: right; font-family: var(--mono); white-space: nowrap; }
.tableau td.date { white-space: nowrap; color: var(--doux); font-size: 13px; }

/* ---------------------------------------------------------------- formulaires */
label { display: block; font-weight: 500; font-size: 13.5px; margin: 12px 0 5px; }
label.case { display: flex; align-items: center; gap: 7px; font-weight: 400; margin: 8px 0; }
label.case.petite { font-size: 12.5px; color: var(--doux); margin: 0; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=time],
input[type=search], input:not([type]), select, textarea {
  width: 100%; max-width: 480px; padding: 8px 11px; border-radius: 6px; border: 1px solid var(--oat); background: #fff;
  color: var(--noir); font: inherit; font-size: 14px; }
input:focus, select:focus, textarea:focus { border-color: var(--noir); outline: none; }
textarea { max-width: 100%; min-height: 90px; resize: vertical; }
input[disabled], textarea[disabled] { background: var(--cream); color: var(--pale); }
/* l'exemple d'un champ : le gris du navigateur (#757575) ne fait que 4,4:1 sur le fond crème (recette du 03/10) */
input::placeholder, textarea::placeholder { color: var(--pale); opacity: 1; }
.aide { color: var(--pale); font-size: 12.5px; margin-top: 4px; }
.rangee { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.rangee.serree { margin-top: 0; }
.rangee select, .rangee input[type=search], .rangee input[type=text], .rangee input:not([type]) { width: auto; min-width: 170px; }
.recherche { min-width: 220px; }
form.en-ligne { display: inline; }
.tableau input, .tableau select { max-width: 100%; }
.champ-code { letter-spacing: .4em; font-size: 1.4rem; text-align: center; font-family: var(--mono); }

/* ---------------------------------------------------------------- messages */
.message { border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; border: 1px solid var(--oat); background: #fff;
  font-size: 14px; }
.message.ok { border-color: #bfe0cd; background: #eef8f2; color: var(--vert); }
.message.erreur { border-color: #f1c0d3; background: #fdf0f5; color: var(--rose); }
.message.info { border-color: #ffd2bd; background: #fff2ec; color: #8a3a12; }

/* ---------------------------------------------------------------- aide (panneau « Besoin d'aide ? », dans le fil) */
details.aide { margin-top: 22px; }
details.aide > summary { list-style: none; display: inline-flex; gap: 6px; align-items: center; }
details.aide > summary::-webkit-details-marker { display: none; }
details.aide[open] > summary { border-color: var(--orange); color: var(--orange-texte); background: #fff; }
.aide-panneau { margin-top: 10px; background: #fff; border: 1px solid var(--oat); border-radius: 10px; padding: 14px 16px;
  max-width: 760px; }
.aide-panneau .sur-titre { font-size: 11px; color: var(--pale); letter-spacing: .4px; text-transform: uppercase; }
.aide-panneau input { margin: 6px 0; max-width: none; }
.aide-panneau .etat-aide { font-size: 12.5px; color: var(--doux); margin: 4px 0 10px; }

/* ---------------------------------------------------------------- conversation (lecture et écran 02) */
.fil-conv { display: grid; gap: 10px; padding: 16px; align-content: start; }
.jour { text-align: center; font-size: 11.5px; color: var(--pale); margin: 4px 0 8px; font-family: var(--mono); letter-spacing: .6px; }
.moi, .lui { border-radius: 14px; padding: 11px 13px; max-width: 86%; font-size: 14.5px; white-space: pre-wrap;
  overflow-wrap: anywhere; }
.moi { background: var(--moi); justify-self: end; }
.lui { background: var(--blanc); border: 1px solid var(--lui-bord); justify-self: start; }
.qui { display: block; font-size: 11px; color: var(--orange-texte); text-transform: uppercase; letter-spacing: .8px;
  font-family: var(--mono); margin-bottom: 3px; white-space: normal; }
.moi .qui { color: var(--doux); }
.quand { display: block; font-size: 11px; color: var(--pale); margin-top: 4px; font-family: var(--mono); white-space: normal; }
.tete-fil { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--oat); padding: 12px 16px; flex-wrap: wrap; }
.tete-fil .badge { margin-left: auto; }
.pied-fil { border-top: 1px solid var(--oat); padding: 10px 12px; }

/* ---------------------------------------------------------------- saisie de « Discuter » (reprise de chat-client.html) */
.bton { background: var(--blanc); border: 1px solid var(--oat); border-radius: 999px; padding: 6px 12px; font-size: 13px;
  color: var(--doux); cursor: pointer; font-family: inherit; }
.bton:hover { border-color: var(--orange); color: var(--orange-texte); }
.rech { padding-top: 10px; }
.rech input { width: 100%; max-width: none; border: 1px solid var(--oat); background: var(--blanc); border-radius: 999px;
  padding: 9px 14px; font-size: 14px; }
.note { font-size: 12px; color: var(--pale); text-align: center; margin: 10px 0 0; }

/* ---------------------------------------------------------------- vue « Mes automatisations » (dans la mise en page commune) */
.plein-auto { max-width: 860px; }
.encadre { background: var(--aide-fond); border: 1px solid var(--aide-bord); border-radius: 10px; padding: 14px 16px; }

/* ---------------------------------------------------------------- pages seules (connexion, code, oubli) */
.seule { min-height: 100vh; display: grid; place-items: center; align-content: center; padding: 20px; }
.seule .carte { width: 100%; max-width: 420px; padding: 26px 28px; }
.seule .marque { padding: 0 0 4px; }
.seule .sous-marque { padding: 0 0 18px; margin-top: 0; }
.seule h1 { font-size: 22px; letter-spacing: -.5px; margin: 0 0 12px; font-weight: 600; }
.seule input { max-width: 100%; }
.seule .rangee { justify-content: space-between; }
.seule .btn.or { min-width: 140px; }
.seule p.sous { line-height: 1.55; }

/* ---------------------------------------------------------------- téléphone */
@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .cote { border-right: 0; border-bottom: 1px solid var(--oat); padding: 10px 10px 6px; }
  .cote .sous-marque, .cote .blocorg, .cote .bas .moi-cote { display: none; }
  .marque { padding-bottom: 6px; }
  .menu { display: flex; overflow-x: auto; gap: 4px; margin-top: 4px; padding-bottom: 4px; scrollbar-width: thin; }
  .menu .titre { display: none; }
  /* flex: none : chaque onglet garde la largeur de son libellé et la barre défile (03/10 : la règle « au doigt » plus bas
     fixe min-width: 40px, qui retirait le minimum automatique des éléments flex : les onglets se serraient à 40 px et
     les libellés débordaient les uns sur les autres) */
  .onglet { white-space: nowrap; flex: none; }
  .onglet .pt { display: none; }
  .cote .bas { border-top: 0; padding: 4px 8px 0; margin-top: 0; }
  .contenu { padding: 16px 14px 40px; }
  .g4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .g-lateral { grid-template-columns: minmax(0, 1fr); }
  .liste li { flex-wrap: wrap; }
  .liste .h { margin-left: 36px; }
  .liste li > .corps + .h { margin-left: auto; }
  .moi, .lui { max-width: 94%; }
  .scene { min-height: 300px; }
}
@media (max-width: 480px) { .g4 { grid-template-columns: minmax(0, 1fr); } .haut .actions { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .sat.actif .pt, .etat .pu, .lien-sat.on { animation: none; } }

/* Ajustements « Discuter » */
.pied-fil .saisie { position: static; border: 0; padding: 0; background: none; }
.haut .recherche { min-width: 180px; width: 200px; }
.liste li.sel { background: var(--cream); box-shadow: inset 3px 0 0 var(--orange); padding-left: 8px; }
.fil-conv.lecture { max-height: 62vh; overflow-y: auto; }
.tete-fil > div { flex: 1; min-width: 0; }
.liste li b a { text-decoration: none; }
.liste li b a:hover { color: var(--orange-texte); }
.question { border: 1px solid var(--ligne); border-radius: 8px; padding: 4px 12px 12px; background: var(--cream); }
.question label:first-of-type { margin-top: 8px; }
.tableau.horaires input { width: 120px; display: inline-block; padding: 6px 6px; }
.tableau.horaires td { white-space: nowrap; }
#absences input[type=date] { min-width: 150px; }
.actions-personne { display: grid; gap: 10px; }
.actions-personne form + form { border-top: 1px solid var(--ligne); padding-top: 10px; }
.actions-personne label { margin-top: 6px; }
.liste li > .mfichier { align-self: center; }
.g-une { grid-template-columns: minmax(0, 1fr); gap: 9px; }
.plein-auto > h2 { font-size: 18px; margin: 22px 0 8px; }
.imprime-seulement { display: none; }
@media print {
  .imprime-seulement { display: block; font-size: 12px; color: var(--doux); margin: 0 0 12px; }
  .barre, .barre i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cote, details.aide, .haut .actions, .pastilles, .visite, .point-aide, .evitement { display: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .app { display: block; } .contenu { padding: 0; max-width: none; } body { background: #fff; }
  .carte { break-inside: avoid; }
}
h2.titre-section { font-size: 15px; margin: 18px 0 10px; }

/* P19 · Intégrations : signaler un problème sur une carte, étapes du branchement en libre-service */
form.en-ligne { display: inline; }
details.signal { margin-top: 8px; }
details.signal summary { cursor: pointer; color: var(--doux); font-size: 13px; }
details.signal summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
details.signal form { margin-top: 8px; }
details.signal textarea { min-height: 64px; }
ol.etapes { margin: 0 0 10px; padding-left: 20px; }
ol.etapes li { margin: 6px 0; font-size: 14px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* D126 : comptes en libre-service, guide, faux fournisseur */
.vos-comptes{margin:6px 0 22px}.compte-lib h3{margin:0;font-size:15px}.droits li{margin-bottom:10px}
.etat-compte{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.droits .sous,.compte-choix .sous{display:block}.piege summary,.confirmation{font-weight:600}

/* P20 · Délégations entre agents (D70) : une ligne courte, puis la réponse signée par l'agent */
.delegation { justify-self: start; max-width: 86%; font-size: 13px; color: var(--doux); font-style: italic;
  padding: 4px 10px; border-left: 2px solid var(--orange); }
.delegation .qui { font-style: normal; font-weight: 500; margin-right: 6px; }
.delegation .quand { margin-left: 8px; font-style: normal; }
.delegation.attente, .delegation.echec { border-left-color: var(--oat); }
.lui.delegue { border-style: dashed; }
.fil-conv.lecture .delegation { justify-self: end; }
.fil-conv.lecture .lui.delegue { justify-self: end; }

/* P21 · Aide : le « ? » de chaque écran, la visite guidée, la page Aide */
.point-aide { position: relative; display: inline-block; }
.point-aide > summary { list-style: none; cursor: pointer; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--oat); background: var(--blanc); color: var(--doux); font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; }
.point-aide > summary::-webkit-details-marker { display: none; }
.point-aide > summary:hover, .point-aide[open] > summary { border-color: var(--orange); color: var(--orange-texte); }
.point-aide > summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.bulle-aide { position: absolute; z-index: 20; top: 30px; left: 0; width: min(340px, calc(100vw - 48px));
  background: var(--blanc); border: 1px solid var(--oat); border-radius: 10px; padding: 12px 14px;
  box-shadow: 0 6px 24px rgba(17, 17, 17, .08); font-size: 13px; font-weight: 400; }
.bulle-aide b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--pale); }
.bulle-aide p { margin: 2px 0 10px; color: var(--noir); line-height: 1.45; }
.bulle-aide a { color: var(--orange-texte); }
.visite { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: #fff6f1; border: 1px solid #ffd2bd; border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.visite .texte { flex: 1 1 280px; }
.visite .texte b { display: block; }
.visite .texte p { margin: 2px 0 0; color: var(--doux); font-size: 13.5px; }
.visite .sur-titre { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--orange-texte); }
.visite.accueil { background: var(--blanc); border-color: var(--oat); }
dl.mots { margin: 0; }
dl.mots dt { font-weight: 500; margin-top: 10px; }
dl.mots dd { margin: 2px 0 0; color: var(--doux); font-size: 13.5px; }
details.faq { border-bottom: 1px dashed var(--oat); padding: 8px 0; }
details.faq summary { cursor: pointer; font-weight: 500; }
details.faq summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* La bulle du « ? » s'ouvre sous le titre, calée à gauche du bandeau : calée sur le « ? », elle sortait de l'écran
   quand un long titre le poussait à droite (recette du paquet L, mesuré à 1366 px). */
.haut { position: relative; }
.point-aide { position: static; }
.bulle-aide { top: 100%; }
.msg-ident .point-aide { position: relative; }          /* dans « Discuter », l'en-tête n'est pas un bandeau : comme avant */
.msg-ident .bulle-aide { top: 30px; }
@media (max-width: 820px) {
  .msg-ident .point-aide { position: static; }
  .msg-tete { position: relative; }                      /* la bulle s'ouvre sous l'en-tête du fil, pas sous l'écran */
  .bulle-aide, .msg-ident .bulle-aide { left: 0; right: 0; width: auto; top: 100%; }
}

/* P23 · Journal des modifications (titulaire) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
ul.journal li.jour-journal { display: block; padding: 14px 0 4px; border: 0; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--pale); }

/* P24 · Clavier : lien d'évitement, anneau de focus visible aussi sur les champs */
.evitement { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--noir); color: #fff;
  padding: 8px 12px; border-radius: 6px; text-decoration: none; }
.evitement:focus { top: 8px; }
main.contenu:focus { outline: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--orange-texte);
  outline-offset: 1px; }

/* P27 · Métier du port : planning des deux ports, aire de carénage */
.tableau.planning th.auj, .tableau.planning td.auj { background: #fff6f1; }
.creneau { display: inline-block; font-size: 12px; line-height: 1.3; padding: 3px 6px; border-radius: 6px;
  background: var(--cream); border: 1px solid var(--oat); margin: 0 4px 4px 0; white-space: nowrap; }
.creneau.p-0 { border-left: 3px solid var(--orange); }
.creneau.p-1 { border-left: 3px solid var(--bleu); }
.creneau.p-2 { border-left: 3px solid var(--vert); }
.pastilles .sep { display: inline-block; width: 1px; height: 18px; background: var(--oat); margin: 0 6px;
  vertical-align: middle; }
.aire { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.jour-aire { border: 1px solid var(--oat); border-radius: 8px; padding: 8px; font-size: 13px; display: grid; gap: 2px; }
.jour-aire.auj { border-color: var(--orange); background: #fff6f1; }
.jour-aire.plein { background: var(--cream); }
@media (max-width: 820px) { .aire { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Sur un téléphone, chaque ligne d'un tableau « replie » devient une petite fiche, champ par champ. */
@media (max-width: 600px) {
  table.replie, table.replie tbody, table.replie tr, table.replie td { display: block; width: 100%; }
  table.replie th { display: none; }
  table.replie tr { padding: 10px 0; border-bottom: 1px solid var(--ligne); }
  table.replie td { border: 0; padding: 2px 0; }
  table.replie td[data-label]::before { content: attr(data-label) " : "; color: var(--pale); font-size: 12px; }
}

/* P22 · Animations discrètes, comme le site : entrées douces, jauges qui se remplissent, compteurs (espace.js),
   transitions courtes. Aucune bibliothèque ; rien ne retarde l'affichage (le contenu est là dès le départ, seule
   l'apparence bouge, 0,35 s au plus) ; tout s'arrête si la personne a demandé moins de mouvement. */
@keyframes entree { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes remplir { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.contenu > .haut, .contenu > .visite, .contenu > .grille > .carte, .contenu > .carte, .contenu > .intro {
  animation: entree .35s ease-out both; }
.contenu > .grille > .carte:nth-child(2) { animation-delay: .04s; }
.contenu > .grille > .carte:nth-child(3) { animation-delay: .08s; }
.contenu > .grille > .carte:nth-child(4) { animation-delay: .12s; }
.contenu > .grille > .carte:nth-child(n+5) { animation-delay: .16s; }
.barre > i { transform-origin: left center; animation: remplir .6s cubic-bezier(.2, .7, .2, 1) both .1s; }
.btn, .onglet, .lien, li.lien, .badge, .carte, .org, .point-aide > summary {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; }
li.lien:hover { background: #fcfbf9; }
.bulle-aide, .aide-panneau { animation: entree .2s ease-out both; }
.fil-conv > .moi, .fil-conv > .lui, .fil-conv > .delegation { animation: entree .25s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Relecture d'un document mis au propre (P36, D85) */
ul.puces { margin: 6px 0 10px; padding-left: 18px; }
ul.puces li { margin: 3px 0; }
.version-propre h3 { font-size: 15px; margin: 16px 0 6px; }
.version-propre h3:first-of-type { margin-top: 4px; }
.version-propre h4 { font-size: 13.5px; margin: 12px 0 4px; }
.version-propre p { margin: 6px 0; }
mark.introuvable { background: #fde2e2; color: #8a1010; border-bottom: 2px solid #c62828; padding: 0 2px; border-radius: 2px; }
.carte h3 { font-size: 13.5px; margin: 14px 0 4px; }
.phrase-validation { font-weight: 600; font-size: 13px; margin: 8px 0 0; }
textarea.texte-propre { width: 100%; min-height: 320px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
/* « Mon entreprise » en lecture (décision d'Olivier du 03/10 : le titulaire seul modifie) */
.texte-lu { white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0 12px; }
pre.texte-brut { white-space: pre-wrap; word-break: break-word; font-size: 12px; background: var(--cream); border: 1px solid var(--oat);
  border-radius: 8px; padding: 10px; max-height: 420px; overflow: auto; }

/* Rubriques « Ce que l'agent doit savoir » (P41, D91) */
.rubrique { padding: 12px 0; border-top: 1px solid var(--oat); }
.rubrique:first-of-type { border-top: 0; }
.rubrique label { font-weight: 600; margin: 0; }
.rubrique textarea { width: 100%; min-height: 80px; }

/* Intégrations par agent (P45) */
details.branchement { border-top: 1px solid var(--oat); padding: 8px 0; }
details.branchement summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
details.branchement summary::-webkit-details-marker { display: none; }
details.branchement summary::before { content: "›"; color: var(--pale); width: 10px; transition: transform .15s; }
details.branchement[open] summary::before { transform: rotate(90deg); }
details.branchement .nom-b { font-weight: 600; flex: 1; }
details.branchement .corps-b { padding: 6px 0 4px 20px; }
details.branchement .corps-b p { margin: 6px 0; }

/* Réglages du port (P47, P56) : le tableau des saisons défile sur téléphone plutôt que d'écraser les champs */
#effectif_minimal .tableau { min-width: 480px; }
#effectif_minimal .tableau input { width: 100%; min-width: 0; }
#effectif_minimal .tableau td:nth-child(2), #effectif_minimal .tableau td:nth-child(3) { width: 96px; }
#effectif_minimal .tableau td:nth-child(4) { width: 84px; }
/* Console, relevé du temps (P50) : la saisie tient sur une ligne en grand écran, en colonne sur téléphone */
.saisie-temps { display: grid; gap: 10px 14px; grid-template-columns: 130px minmax(0, 1.4fr) minmax(0, 1.2fr) 170px; }
.saisie-temps .large { grid-column: 1 / -1; }
@media (max-width: 760px) { .saisie-temps { grid-template-columns: minmax(0, 1fr); } }
/* « Discuter » (P63, D105) : réponses mises en forme, portrait de l'agent qui répond à une délégation, aide à la saisie */
.lui .texte { white-space: normal; }
.texte p { margin: 0 0 8px; }
.texte p:last-child, .texte ul:last-child, .texte ol:last-child { margin-bottom: 0; }
.texte ul, .texte ol { margin: 0 0 8px; padding-left: 20px; }
.texte li + li { margin-top: 3px; }
.texte a { color: var(--orange-texte); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.rond.mini { width: 18px; height: 18px; font-size: 10px; margin-right: 6px; vertical-align: -4px; display: inline-grid;
  place-items: center; }
.bas-seule { margin: 14px 0 0; text-align: center; }
.tete-fil { flex-wrap: nowrap; }
@media (max-width: 820px) {
  .visite.accueil.masque-tel, .intro.masque-tel { display: none; }
}

/* Portraits des agents (P75) : ceux du site, dans les deux styles, recadrés sur le visage comme les vignettes du site
   (site.css, .vignette), sur le fond marine commun à tous les agents (--degrade-avatar du site). Recadrage (2026-10-03) :
   l'image prend la largeur du rond, calée en haut, puis elle est déplacée et agrandie autour du point des yeux, donné par la
   classe cadrage-<cle> (portraits.css, copie de la table PORTRAITS du site) : yeux centrés, à la même hauteur dans tous les
   ronds, quelle que soit leur taille. --portrait-echelle : moins de zoom pour le grand rond de « Aujourd'hui ». */
.rond.portrait, .centre .rond.portrait { padding: 0; overflow: hidden; color: transparent; border: 1px solid rgba(255, 255, 255, .22);
  background: linear-gradient(180deg, #0c2230 0%, #0f2733 55%, rgba(255, 138, 107, .35) 100%); }
.rond.portrait { position: relative; }   /* l'image posée sur tout le rond, carrée, même quand le rond est une grille (.rond.mini) */
.rond.portrait img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
  transform-origin: var(--portrait-x, 50%) var(--portrait-y, 31%);
  transform: translate(var(--portrait-dx, 0%), var(--portrait-dy, 12%)) scale(calc(var(--portrait-zoom, 1.7) * var(--portrait-echelle, 1))); }
.centre .rond.portrait { box-shadow: 0 0 0 8px rgba(17, 17, 17, .05), 0 0 40px rgba(255, 138, 107, .25); }
.centre .rond.portrait img { --portrait-echelle: .85; }   /* 1,45 au lieu de 1,7 avant le 03/10 : un peu plus d'épaules */
/* tailles des portraits : 34 px dans les listes, 40 px dans une tête (vignette du site), 56 px en grand */
.rond.portrait { width: 34px; height: 34px; }
.rond.portrait.moyen, .rond.portrait.grand { width: 40px; height: 40px; }
.rond.portrait.enorme { width: 56px; height: 56px; }
.rond.portrait.mini { width: 22px; height: 22px; vertical-align: -6px; }
.centre .rond.portrait { width: 92px; height: 92px; }
@media (max-width: 640px) { .centre .rond.portrait { width: 70px; height: 70px; } }
/* Planning (D108) : la semaine en grille personnes × jours, une couleur par poste, les absences hachurées ; au
   téléphone, la même semaine en liste, jour par jour. */
.nav-semaine { display: flex; gap: 6px; flex-wrap: wrap; }
.legende-planning { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: 12.5px; color: var(--doux); max-width: 640px; }
.legende-planning li { display: inline-flex; align-items: center; gap: 6px; }
.pt-legende { width: 12px; height: 12px; border-radius: 4px; display: inline-block; flex: none; }
.planning-carte { overflow: hidden; }
.grille-planning-cadre { overflow-x: auto; }
.grille-planning { width: 100%; min-width: 920px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.grille-planning th, .grille-planning td { border-bottom: 1px solid var(--ligne); border-right: 1px solid var(--ligne);
  padding: 6px; vertical-align: top; text-align: left; }
.grille-planning tr > :last-child { border-right: 0; }
.grille-planning tbody tr:last-child > * { border-bottom: 0; }
.grille-planning thead th { background: var(--cream); font-size: 12.5px; font-weight: 600; color: var(--doux); padding: 10px 8px; }
.grille-planning thead th .j-num { font-size: 16px; color: var(--noir); }
.grille-planning thead th.auj, .grille-planning thead th.auj .j-num { color: var(--orange-texte); }
.grille-planning .col-qui { width: 176px; }
.grille-planning tbody th { font-weight: 400; background: var(--blanc); }
.grille-planning td.auj { background: rgba(255, 86, 0, .035); }
.grille-planning tr.moi-planning > * { background: rgba(255, 86, 0, .05); }
.qui-planning { display: flex; gap: 8px; align-items: flex-start; }
.qui-planning b { display: inline; font-size: 13.5px; }
.qui-planning small { display: block; margin-top: 2px; font-size: 11px; color: var(--pale); line-height: 1.35; }
.cr { display: block; margin-bottom: 4px; padding: 5px 7px 5px 8px; border-radius: 8px; border-left: 3px solid;
  font-size: 12px; line-height: 1.3; color: var(--noir); text-decoration: none; }
.cr:last-child { margin-bottom: 0; }
.cr b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.cr .h-cr { font-variant-numeric: tabular-nums; color: var(--doux); }
.cr .n-cr { display: block; color: var(--doux); }
a.cr:hover { box-shadow: 0 0 0 1px currentColor inset; }
a.cr:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.libre { color: var(--pale); }
.poste-0 { background: #eef3fd; border-color: #1257c9; } .pt-legende.poste-0 { background: #1257c9; }
.poste-1 { background: #e7f5f3; border-color: #0f766e; } .pt-legende.poste-1 { background: #0f766e; }
.poste-2 { background: #fff1ea; border-color: #c43f00; } .pt-legende.poste-2 { background: #c43f00; }
.poste-3 { background: #f3eefe; border-color: #6d28d9; } .pt-legende.poste-3 { background: #6d28d9; }
.poste-4 { background: #fbf3e6; border-color: #92400e; } .pt-legende.poste-4 { background: #92400e; }
.poste-5 { background: #eaf7ef; border-color: #0b7a3b; } .pt-legende.poste-5 { background: #0b7a3b; }
.poste-6 { background: #fdeef5; border-color: #be185d; } .pt-legende.poste-6 { background: #be185d; }
.poste-7 { background: #f1f3f6; border-color: #475569; } .pt-legende.poste-7 { background: #475569; }
td.abs-absence, td.abs-conge, td.abs-demande, .pt-legende.abs-absence, .pt-legende.abs-conge, .pt-legende.abs-demande,
.abs-ligne { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(17, 17, 17, .06) 6px 12px); }
.abs { display: inline-block; margin-bottom: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600;
  background: #eeece8; color: #3d3d3b; }
.abs-conge .abs, .abs-ligne.abs-conge { background-color: #e8eefb; color: #1d3f86; }
.abs-demande .abs, .abs-ligne.abs-demande { background-color: #fff5e0; color: #7a4a00; }
.pt-legende.abs-absence { background-color: #d9d6d0; } .pt-legende.abs-conge { background-color: #b9cbf2; }
.pt-legende.abs-demande { background-color: #f5d79c; }
.planning-jours { display: none; padding: 4px 12px 12px; }
.jours-planning { position: sticky; top: 0; z-index: 2; background: var(--blanc); margin: 0; padding: 10px 0;
  flex-wrap: nowrap; overflow-x: auto; }
.jour-planning { scroll-margin-top: 56px; }
.jour-planning h2 { font-size: 15px; margin: 14px 0 8px; font-weight: 600; }
.jour-planning.auj h2 { color: var(--orange-texte); }
.liste-cr { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.liste-cr .cr { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: 10px; align-items: center;
  min-height: 44px; margin: 0; padding: 8px 12px; font-size: 14px; }
.liste-cr .cr b { grid-column: 2; grid-row: 1; }
.liste-cr .cr .h-cr { grid-column: 1; grid-row: 1 / span 2; font-weight: 600; color: var(--noir); white-space: nowrap; }
.liste-cr .cr .n-cr { grid-column: 2; }
.abs-ligne { display: block; padding: 10px 12px; border-radius: 8px; font-size: 14px; background-color: #eeece8; }
.form-planning fieldset { border: 1px solid var(--oat); border-radius: 10px; padding: 10px 12px 12px; margin: 0 0 14px; min-width: 0; }
.form-planning fieldset.choix-demande { border: 0; padding: 0; }
.form-planning legend { font-weight: 600; padding: 0 4px; }
.form-planning input[type=date], .form-planning input[type=time], .form-planning select { width: 100%; }
.form-planning textarea { width: 100%; }
.creneau-choisi { display: flex; align-items: center; gap: 14px; }
.creneau-choisi .cr { margin: 0; min-width: 150px; font-size: 13px; }
.etat-demande { margin-top: 12px; }
.etat-demande > p { margin: 6px 0; }
.motif-outil { padding: 10px 12px; border-left: 3px solid var(--rose); background: var(--cream); border-radius: 0 8px 8px 0; }
.etat-a_valider .motif-outil, .etat-transmise .motif-outil { border-left-color: var(--bleu); }
.code-validation input#code { width: 9ch; font-size: 1.4rem; letter-spacing: .25em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .grille-planning-cadre { display: none; }
  .planning-jours { display: block; }
  .legende-planning { font-size: 12px; }
  .creneau-choisi { flex-wrap: wrap; }
}
/* P90 : dans le bloc de l'entreprise, le nom sur deux lignes au plus, le nombre de personnes dessous */
.blocorg .org { flex-wrap: wrap; align-items: flex-start; row-gap: 1px; }
.blocorg .org .nom-org { flex: 1 1 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: normal; }
.blocorg .org .nb { flex-basis: 100%; margin-left: 26px; padding-left: 0; white-space: normal; }
/* P86 : au téléphone, « Mon compte », « Se déconnecter » et « Style » dans un seul bouton, en haut à droite */
.compte-tel { display: none; }
.compte-tel > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.compte-tel > summary::-webkit-details-marker { display: none; }
.compte-tel > summary .rond.mini { margin: 0; }
@media (max-width: 820px) {
  .cote { position: relative; }
  .cote .bas { padding: 0; }
  .compte-large { display: none; }
  .compte-tel { display: block; position: absolute; top: 8px; right: 10px; z-index: 30; }
  .compte-tel-panneau { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; display: grid; gap: 8px;
    padding: 12px; background: var(--blanc); border: 1px solid var(--oat); border-radius: 10px;
    box-shadow: 0 12px 30px rgba(17, 17, 17, .14); }
  .compte-tel-panneau form { display: block; }
  .compte-tel-panneau .btn { width: 100%; margin: 0; }
}
/* P85 (D119) : l'agent travaille. « Maiwenn réfléchit » dans sa bulle dès l'envoi, « Anna cherche » dans la ligne de
   délégation, avec trois points qui bougent ; « réduire les animations » : les points restent fixes. */
.travail { display: inline-flex; align-items: center; gap: 8px; color: var(--doux); font-style: italic; }
.points { display: inline-flex; align-items: center; gap: 4px; }
.points i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange-texte); opacity: .35;
  animation: points-travail 1.2s ease-in-out infinite; }
.points i:nth-child(2) { animation-delay: .15s; }
.points i:nth-child(3) { animation-delay: .3s; }
@keyframes points-travail { 40% { opacity: 1; transform: translateY(-2px); } }
.delegation.travail { display: flex; align-items: center; gap: 6px; }
.delegation.attente .rond.mini { margin-right: 2px; }
@media (prefers-reduced-motion: reduce) { .points i { animation: none !important; transition: none !important; opacity: .7; } }
/* Planning, gestes directs (P91) et retour visuel (P95) : « + » d'une case, créneau en vérification (hachures et
   contour pointillé), en attente du code (contour orange), case visée pendant un glisser, menus sur le créneau. */
.grille-planning td { position: relative; }
.grille-planning td[data-cible] { padding-bottom: 26px; }
.ajout-cr { position: absolute; right: 5px; bottom: 4px; width: 22px; height: 22px; border-radius: 50%;
  display: inline-grid; place-items: center; font-size: 15px; line-height: 1; color: var(--doux);
  border: 1px dashed var(--sand); background: var(--blanc); opacity: 0; transition: opacity .15s; text-decoration: none; }
.grille-planning td:hover .ajout-cr, .ajout-cr:focus-visible { opacity: 1; }
@media (hover: none) { .ajout-cr { opacity: .8; } }
.ajout-cr:hover { color: var(--orange-texte); border-color: var(--orange-texte); }
a.cr[draggable="true"] { cursor: grab; }
.cr-glisse { opacity: .5; }
.cr-origine { opacity: .35; }
.cible-survol { box-shadow: inset 0 0 0 2px var(--orange); background-color: rgba(255, 86, 0, .06); }
.cr-verif { outline: 1.5px dashed currentColor; outline-offset: -1.5px;
  background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(17, 17, 17, .07) 5px 10px); }
.cr-attente { outline: 1.5px dotted var(--orange-texte); outline-offset: -1.5px; }
.etat-cr { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 600; color: var(--orange-texte);
  font-style: italic; }
.pt-legende.cr-verif { background-color: transparent; outline-color: var(--doux); }
.ajout-jour { display: inline-block; margin-top: 4px; font-size: 14px; color: var(--orange-texte); }
.annonce-planning { position: sticky; top: 8px; z-index: 6; margin-bottom: 12px; padding: 10px 14px; border-radius: 10px;
  background: var(--noir); color: #fff; font-size: 14px; display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap; box-shadow: 0 8px 24px rgba(17, 17, 17, .18); }
.annonce-planning .btn { background: #fff; }
.pop-planning { position: absolute; z-index: 50; min-width: 220px; max-width: calc(100vw - 16px); display: grid; gap: 4px;
  padding: 8px; background: var(--blanc); border: 1px solid var(--oat); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(17, 17, 17, .16); font-size: 14px; }
.pop-planning [role=menuitem] { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: 6px;
  background: none; color: var(--noir); font: inherit; cursor: pointer; text-decoration: none; }
.pop-planning [role=menuitem]:hover, .pop-planning [role=menuitem]:focus-visible { background: var(--cream); }
.pop-planning .danger-menu { color: var(--rose); }
.pop-planning .danger-menu.confirmer { background: var(--rose); color: #fff; }
.pop-ajout { gap: 8px; padding: 12px; width: 260px; }
.pop-ajout label { display: grid; gap: 3px; font-size: 13px; }
.pop-ajout select, .pop-ajout input { width: 100%; }
.champ-heure { max-width: 9em; }
.format-champ { display: block; margin-top: 2px; font-size: 12px; }
.liste-cr .cr .etat-cr { grid-column: 2; }
/* Planning imprimé (P99) : la semaine en grille sur une page A4 en paysage, sans menu, boutons ni demandes ; les couleurs
   des postes gardées, le texte en noir quel que soit le style choisi. */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  .planning-jours, .nav-semaine, .annonce-planning, #demandes, .ajout-cr, .intro.masque-tel, .message.info,
  [data-imprimer] { display: none !important; }
  .grille-planning-cadre { display: block !important; overflow: visible; }
  .grille-planning { min-width: 0; font-size: 10px; }
  .grille-planning td[data-cible] { padding-bottom: 4px; }
  .grille-planning th, .grille-planning td, .grille-planning tbody th, .grille-planning thead th {
    background: #fff !important; color: #111 !important; border-color: #ccc !important; }
  .cr, .cr b, .cr .h-cr, .cr .n-cr, .abs, .qui-planning small, .j-num { color: #111 !important; }
  .cr, .abs, .pt-legende, td.abs-absence, td.abs-conge, td.abs-demande { -webkit-print-color-adjust: exact;
    print-color-adjust: exact; }
  .planning-carte { border: 0 !important; box-shadow: none !important; }
  .legende-planning, .haut h1, .imprime-seulement, .qui-planning .rond { color: #111 !important; }
  .haut .badge { color: #111 !important; background: none !important; border-color: #ccc !important; }
}
/* P108 (D106) : le choix du style toujours en vue : sous la marque dans la barre de gauche (espace et console), sous la
   carte des pages seules, dans l'en-tête de « Discuter » ; au téléphone, sur la ligne de la marque. */
.bascule-style { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--oat); border-radius: 999px;
  background: var(--blanc); flex: none; }
.bascule-style button { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--doux);
  padding: 3px 11px; min-height: 28px; border-radius: 999px; cursor: pointer; }
.bascule-style button:hover { color: var(--noir); }
.bascule-style button[aria-pressed="true"] { background: var(--noir); color: #fff; }
.cote-haut { display: flex; flex-wrap: wrap; align-items: center; }
.cote-haut .marque, .cote-haut .sous-marque { flex-basis: 100%; }
.cote-haut .bascule-style { margin: 0 8px 14px; }
@media (max-width: 820px) {
  .cote-haut { flex-wrap: nowrap; gap: 8px; margin-bottom: 4px; }
  .cote-haut .marque { flex: 1 1 auto; min-width: 0; padding-bottom: 0; }
  .cote-haut .bascule-style { margin: 0; }
  .cote-haut .compte-tel { position: relative; top: auto; right: auto; }
}
@media (max-width: 480px) { .cote-haut .marque span.petit { display: none; } }
/* P115 : « Accès et personnes », une personne par carte sur toute la largeur, la date et les actions dessous (aussi au
   téléphone) ; D141 (P117) : les agents ouverts à chacun, cochés par le titulaire. */
.liste li.personne { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 14px 0; }
.personne .corps p { margin: 0; }
.personne .corps .sous { overflow-wrap: anywhere; }
.personne-nom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.personne-agents { margin-top: 4px !important; font-size: 13px; color: var(--doux); }
.personne-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px !important;
  font-size: 12.5px; color: var(--pale); }
.gerer-personne { margin-top: 10px; }
.gerer-personne > summary { display: inline-flex; list-style: none; cursor: pointer; }
.gerer-personne > summary::-webkit-details-marker { display: none; }
.gerer-personne .actions-personne { margin-top: 10px; padding: 12px; border: 1px solid var(--oat); border-radius: 10px;
  background: var(--cream); }
.agents-personne fieldset, fieldset.agents-personne { min-width: 0; margin: 12px 0 0; padding: 6px 12px 10px;
  border: 1px solid var(--oat); border-radius: 10px; }
.agents-personne legend { padding: 0 4px; font-size: 13.5px; font-weight: 600; }
.agents-personne label.case { margin: 6px 0; }
/* P115 : au téléphone, la barre du haut garde sa hauteur quand l'écran est court (plus de bande vide sous le menu) */
@media (max-width: 820px) { .app { grid-template-rows: auto minmax(0, 1fr); align-content: start; } }
/* P115 : au téléphone, dans les listes, la date, le prix ou l'étiquette passent sous le titre (Mes clients,
   Facturation, Tarifs, demandes du planning) au lieu de l'écraser lettre par lettre */
@media (max-width: 600px) {
  .liste li > .corps { flex: 1 1 calc(100% - 44px); }
  .liste li > .corps ~ .h, .liste li > .corps ~ .badge { margin-left: 36px; white-space: normal; }
  .liste li > .corps:first-child ~ .h, .liste li > .corps:first-child ~ .badge { margin-left: 0; }
  .liste li > .corps ~ .h + .h { margin-left: 12px; }
}

/* Au doigt, toute zone cliquable fait 40 px au moins de haut (recette du paquet L : mesuré écran par écran à 390 px,
   dans les deux styles). Écrit avec « !important » parce que le style « Archipel » et la messagerie fixent leurs propres
   hauteurs ; ne joue qu'au téléphone. Une case à cocher se touche par son libellé, qui prend la hauteur. */
@media (max-width: 820px) {
  .btn, .bton, .env, a.badge, .onglet, .ajout-jour, .lien-menu, .msg-bouton, .bascule-style button, .msg-plus-panneau a,
  .msg-plus-compte a, .pied-carte .lien-texte, .rangee > .lien-texte, form > .lien-texte, .cote .bas > .lien-texte,
  .retour {
    min-height: 40px !important; min-width: 40px; display: inline-flex; align-items: center; }
  .btn, .bton, .env, .bascule-style button, a.badge { justify-content: center; }
  .onglet { display: flex; }
  .msg-bouton { min-width: 40px !important; justify-content: center; }
  .point-aide > summary { width: 40px !important; height: 40px !important; font-size: 14px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]), select, textarea {
    min-height: 40px !important; min-width: 40px; }
  label.case { min-height: 40px; }
  details:not(.point-aide) > summary:not(.btn):not(.msg-bouton) { min-height: 40px; padding-top: 9px; padding-bottom: 9px; }
}