/* Mandava : la tenue des pages de Bureava (papier crème, grands titres fins, cartes blanches à filet, une seule couleur
   forte), dans le prune de Mandava. Tenue « Papier » (14/10/2026, choix de Célestin) : on lit, donc le violet ne fait
   jamais de grand fond. Le menu et la barre du haut sont en papier, le logo garde son prune, et le prune devient un fil :
   les boutons d'action, l'onglet choisi, le liseré de la carte « vedette » (une seule par écran). La vitrine garde
   sa nuit prune. */
:root{
  --fond:#F7F5F2; --surface:#FFFFFF; --surface-2:#F2EEEB; --info-fond:#F4F0F4;
  --encre:#211A24; --encre-2:#3B3340; --encre-3:#585060; --discret:#6E6773;
  --trait:#E6E0DC; --trait-doux:#EFEAE6; --bord-champ:#D7D0CB;
  --menu:#F2EEEB; --menu-actif:#FFFFFF;
  --principal:#4B2259; --principal-texte:#F8F5F7;
  --accent:#C9923C; --accent-fond:#F7EEDD;
  --vert:#2E6B4F; --vert-fond:#E6F0EA; --orange:#9A5A12; --orange-fond:#F6ECDD; --rouge:#9E2F2A; --rouge-fond:#F5E3E1;
  --ombre:0 1px 0 rgba(33,26,36,.04);
  --rayon:14px;
  --titre:"Newsreader", Georgia, "Times New Roman", serif;
  --texte:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --chiffre:"Geist Mono", ui-monospace, Menlo, monospace;
  /* les anciens noms, encore lus par quelques écrans */
  --prune:var(--principal); --prune-clair:var(--info-fond); --sur-prune:var(--principal-texte); --doux:var(--discret); --or:var(--accent); --or-fond:var(--accent-fond); --carte:var(--surface);
  color-scheme:light;
}
/* (14/10/2026) Plus de version sombre : Célestin a choisi le violet sur le blanc, et un téléphone réglé en mode sombre
   le recevait en violet sur noir. Mandava reste en « Papier » quel que soit le réglage du téléphone. */
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{background:var(--fond);color:var(--encre);font:16px/1.55 var(--texte);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--encre);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* charpente : le menu en papier à gauche sur grand écran ; sur téléphone, une barre en haut et les onglets en bas */
.cadre{min-height:100vh;display:grid;grid-template-columns:248px minmax(0,1fr)}
.menu{background:var(--menu);color:var(--encre);border-right:1px solid var(--trait);padding:30px 18px 24px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto}
.marque{display:flex;align-items:center;gap:10px;padding:0 12px 26px;font:400 23px/1 var(--titre);color:inherit}
.marque svg{width:30px;height:30px;flex:none;border-radius:8px}
.menu a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:9px;text-decoration:none;color:var(--encre-2);font-size:15px}
.menu a:hover{background:var(--trait-doux)}
.menu a svg,.onglets a svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;flex:none;opacity:.9}
.menu a[aria-current="page"]{background:var(--menu-actif);color:var(--encre);font-weight:500;box-shadow:inset 3px 0 0 var(--principal),inset 0 0 0 1px var(--trait)}
.menu .bas{margin-top:auto;padding:18px 12px 0;border-top:1px solid var(--trait);font-size:13px;color:var(--discret);display:grid;gap:4px}
.menu .bas a{min-height:30px;padding:0;color:var(--encre-2);font-size:14px;border-radius:0}
.menu .bas a:hover{background:none;text-decoration:underline}
.menu .bas button{all:unset;cursor:pointer;color:var(--discret);font-size:13px;min-height:30px;text-decoration:underline;text-underline-offset:3px}
.page{min-width:0;width:100%;max-width:980px;margin:0 auto;padding:52px 56px 96px}
.haut-tel{display:none}
.onglets{display:none}
@media (max-width:820px){
  .cadre{display:block}
  .menu{display:none}
  .haut-tel{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--fond);background:color-mix(in srgb,var(--fond) 92%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--trait);color:var(--encre);padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px 16px;position:sticky;top:0;z-index:5}
  .haut-marque{display:flex;align-items:center;gap:10px;min-width:0}
  .haut-marque svg{width:28px;height:28px;flex:none;border-radius:8px}
  .haut-tel b{display:block;font:400 21px/1.1 var(--titre);color:var(--encre)}
  .haut-tel small{display:block;font-size:12px;color:var(--discret);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .haut-tel button{all:unset;cursor:pointer;font-size:13px;padding:7px 12px;border-radius:99px;border:1px solid var(--bord-champ);color:var(--encre-2);flex:none}
  .page{padding:26px 16px calc(100px + env(safe-area-inset-bottom,0px))}
  .onglets{display:grid;grid-template-columns:repeat(6,1fr);position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--trait);padding:4px 4px calc(6px + env(safe-area-inset-bottom,0px));z-index:5}
  .onglets a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;text-decoration:none;color:var(--discret);font-size:11px}
  .onglets a[aria-current="page"]{color:var(--principal);font-weight:600}
}

/* typographie : un grand titre fin, un chapeau, des têtes de section discrètes */
h1{font:400 44px/1.1 var(--titre);letter-spacing:-.4px;margin:0 0 10px;text-wrap:balance}
h2{font:600 13px/1.3 var(--texte);letter-spacing:1.2px;text-transform:uppercase;color:var(--discret);margin:40px 0 14px}
h3{font:500 20px/1.3 var(--titre);margin:0 0 6px;letter-spacing:-.1px}
.chapeau{color:var(--encre-2);font-size:18px;line-height:1.6;margin:0 0 30px;max-width:720px}
@media (max-width:820px){h1{font-size:34px}.chapeau{font-size:16px;margin-bottom:24px}h2{margin-top:32px}}
.petit{font-size:14px;color:var(--discret);line-height:1.55}
.page > a.petit:first-child{display:inline-block;margin-bottom:14px;color:var(--discret);text-decoration:none}
.page > a.petit:first-child:hover{color:var(--encre)}

/* cartes et listes */
.pile{display:flex;flex-direction:column;gap:14px}
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.carte{background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon);padding:20px 22px;box-shadow:var(--ombre)}
@media (max-width:820px){.carte{padding:18px}}
.carte.alerte{border-left:3px solid var(--accent)}
.carte.lien{cursor:pointer;text-decoration:none;color:inherit;display:block}
.carte.lien:hover{border-color:var(--bord-champ)}
.carte.alerte.lien:hover{border-left-color:var(--accent)}
/* la carte vedette : une seule par écran, blanche, avec un liseré prune et son titre en prune */
.carte.vedette{border-left:4px solid var(--principal)}
.carte.vedette h3{color:var(--principal);font-size:24px}
.carte.vedette.lien:hover{border-left-color:var(--principal)}
.fleche{font:300 26px/1 var(--titre);flex:none}
.rangee{display:flex;justify-content:space-between;align-items:center;gap:14px}
.rangee > *{min-width:0}
.rangee > .art,.rangee > .pastille,.rangee > .btn,.rangee > .montant,.rangee > .fleche{flex:none}
.liste > *{padding:13px 0;border-bottom:1px solid var(--trait-doux)}
.liste > *:last-child{border-bottom:0;padding-bottom:2px}
.carte > h3 + .liste{margin-top:4px}
.montant{font:500 15px/1.2 var(--texte);font-variant-numeric:tabular-nums;white-space:nowrap}
.gros{font:400 34px/1.1 var(--titre);font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.pastille{display:inline-flex;align-items:center;min-height:26px;padding:0 11px;border-radius:13px;font-size:12px;font-weight:500;white-space:nowrap;background:var(--surface-2);color:var(--encre-3)}
.p-ok{background:var(--vert-fond);color:var(--vert)}.p-att{background:var(--orange-fond);color:var(--orange)}.p-non{background:var(--rouge-fond);color:var(--rouge)}.p-info{background:var(--surface-2);color:var(--encre-2)}
.art{display:inline-block;font:500 11.5px/1 var(--chiffre);color:var(--encre-3);background:var(--surface-2);border:1px solid var(--trait-doux);padding:4px 6px;border-radius:6px;white-space:nowrap;vertical-align:1px}
.barre{height:6px;border-radius:3px;background:var(--trait-doux);overflow:hidden;margin-top:10px}
.barre i{display:block;height:100%;background:var(--principal);border-radius:3px}
.verite{background:var(--info-fond);border-radius:12px;padding:14px 18px;color:var(--encre-2);font-size:15px;line-height:1.6}
.verite b{color:var(--encre);font-weight:600}
.prudence{border:1px solid var(--trait);border-radius:12px;padding:12px 16px;font-size:14px;color:var(--discret);background:transparent;margin:0}
.vide{text-align:center;padding:32px 18px;color:var(--encre-3)}
.vide h3{margin-bottom:8px}

/* points à vérifier */
.point{display:grid;grid-template-columns:26px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--trait-doux)}
.point:last-child{border-bottom:0}
.point i{font-style:normal;font-weight:600;text-align:center;border-radius:50%;width:26px;height:26px;line-height:26px;font-size:13px}
.n-alerte i{background:var(--rouge-fond);color:var(--rouge)}.n-attention i{background:var(--orange-fond);color:var(--orange)}.n-ok i{background:var(--vert-fond);color:var(--vert)}.n-info i{background:var(--surface-2);color:var(--encre-2)}

/* étapes du remboursement */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:12px}
.etapes div{font-size:12px;text-align:center;color:var(--discret)}
.etapes div::before{content:"";display:block;height:4px;border-radius:2px;background:var(--trait);margin-bottom:6px}
.etapes .fait{color:var(--encre);font-weight:500}
.etapes .fait::before{background:var(--principal)}

/* formulaires */
form{display:flex;flex-direction:column;gap:14px}
label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500;color:var(--encre-3)}
input,select,textarea{border:1px solid var(--bord-champ);background:var(--surface);border-radius:10px;padding:11px 13px;min-height:46px;font-weight:400;color:var(--encre);min-width:0;width:100%}
textarea{min-height:120px;resize:vertical;line-height:1.55}
input:focus,select:focus,textarea:focus{outline:2px solid var(--principal);outline-offset:0;border-color:transparent}
input[type=checkbox],input[type=radio]{width:20px;height:20px;min-height:0;flex:none;accent-color:var(--principal);padding:0;margin:1px 0 0}
/* une case à cocher ou un choix rond, avec son texte à droite */
label.case{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;color:var(--encre);font-size:15px;line-height:1.45}
label.case.pastille{align-items:center;min-height:40px;padding:0 14px;font-size:14px;cursor:pointer}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.deux{grid-template-columns:1fr}}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:46px;border:1px solid var(--principal);border-radius:10px;background:var(--principal);color:var(--principal-texte);font-size:15px;font-weight:500;padding:0 20px;cursor:pointer;text-decoration:none;text-align:center}
.btn.second{background:var(--surface);color:var(--encre);border-color:var(--bord-champ);font-weight:400}
.btn.second:hover{border-color:var(--encre-3)}
.btn.danger{background:var(--surface);color:var(--rouge);border-color:var(--bord-champ);font-weight:400}
.btn.petit-btn{min-height:38px;padding:0 14px;font-size:14px}
.btn:disabled{opacity:.45;cursor:default}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.choix{display:flex;gap:8px;flex-wrap:wrap}
.choix button{min-height:40px;border:1px solid var(--bord-champ);background:var(--surface);border-radius:20px;padding:0 16px;font-size:14px;cursor:pointer;color:var(--encre)}
.choix button[aria-pressed="true"]{background:var(--principal);border-color:var(--principal);color:var(--principal-texte)}
.segment{display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface-2);border-radius:12px;padding:4px;gap:4px;margin-bottom:22px}
.segment a{text-align:center;text-decoration:none;color:var(--encre-3);font-size:14px;padding:9px 4px;border-radius:9px}
.segment a[aria-current="page"]{background:var(--surface);color:var(--encre);font-weight:500;box-shadow:0 1px 2px rgba(33,26,36,.08)}
.erreur{background:var(--rouge-fond);color:var(--rouge);border-radius:12px;padding:12px 16px;font-weight:500;font-size:15px}
.message{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(88px + env(safe-area-inset-bottom,0px));background:var(--encre);color:var(--fond);border-radius:12px;padding:12px 18px;font-size:15px;z-index:20;max-width:min(520px,calc(100% - 32px));box-shadow:0 8px 24px rgba(0,0,0,.18)}
.photo-recu{max-width:100%;max-height:380px;border-radius:12px;display:block;margin:0 auto;border:1px solid var(--trait)}
pre.pv{white-space:pre-wrap;font:16px/1.65 var(--texte);margin:0;color:var(--encre-2)}
.tableau{overflow-x:auto}

/* connexion et inscription : le papier, la marque, la carte */
.entree{min-height:100vh;display:grid;place-items:center;padding:32px 16px;background:var(--fond)}
.entree .carte{width:100%;max-width:440px;padding:34px 30px;box-shadow:0 1px 0 rgba(33,26,36,.04),0 18px 40px -24px rgba(58,27,71,.25)}
.entree .marque{justify-content:center;font-size:34px;padding:0 0 6px;color:var(--encre)}
.entree .marque svg{width:42px;height:42px;box-shadow:none}
.code{font:500 28px/1 var(--chiffre);letter-spacing:10px;text-align:center}
@media (prefers-reduced-motion:no-preference){.ecran{animation:entree .3s ease-out}@keyframes entree{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  .carte.lien,.btn,.choix button{transition:border-color .15s,background-color .15s,filter .15s}}

/* la réunion enregistrée : plein écran, gros boutons, lisible posé sur la table */
.ecoute{min-height:100vh;background:var(--fond);display:flex;flex-direction:column}
.ecoute-haut{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--surface);border-bottom:1px solid var(--trait);color:var(--encre);padding:calc(16px + env(safe-area-inset-top,0px)) 18px 16px;position:sticky;top:0;z-index:5}
.ecoute-haut b{font:400 20px/1.2 var(--titre);color:var(--encre)}
.ecoute-haut small{display:block;font-size:13px;color:var(--discret);margin-top:3px}
.ecoute-temps{font:400 34px/1 var(--titre);font-variant-numeric:tabular-nums;color:var(--encre)}
.voyant{display:inline-block;width:11px;height:11px;border-radius:50%;background:#FF6B5E;margin-right:9px;vertical-align:2px;box-shadow:0 0 0 3px rgba(255,107,94,.22)}
.en-pause .voyant{background:#B9AFBE;box-shadow:none}
.en-pause .ecoute-haut{background:var(--surface-2)}
.silencieux:not(.en-pause) .voyant{background:#E3A93B;box-shadow:0 0 0 3px rgba(227,169,59,.25)}
.ecoute-quitter{color:var(--encre);font-size:14px;font-weight:500;text-decoration:none;border:1px solid var(--bord-champ);border-radius:999px;padding:8px 14px;flex:none}
.ecoute-quitter:hover{background:var(--surface-2)}
@media (prefers-reduced-motion:no-preference){.ecoute:not(.en-pause):not(.silencieux) .voyant{animation:voyant 1.6s ease-in-out infinite}@keyframes voyant{50%{opacity:.35}}}
.ecoute-niveau{height:4px;background:var(--trait-doux)}
.ecoute-niveau i{display:block;height:100%;width:0;background:var(--accent);transition:width .12s linear}
.ecoute-corps{padding:22px 16px calc(32px + env(safe-area-inset-bottom,0px));max-width:760px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.ecoute-corps h2{margin:0 0 12px}
.ecoute-points button{min-height:46px;padding:8px 16px;font-size:15px;text-align:left;border-radius:23px}
.ecoute-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ecoute-actions .btn{min-height:54px;flex-direction:column;gap:0;line-height:1.25}
.ecoute-actions .pleine{grid-column:1/-1}
.ecoute-actions .btn small{display:block;font-weight:500;font-size:12.5px;opacity:.75;margin-top:2px}
.ecoute-actions .btn:disabled{opacity:.45}
@media (max-width:420px){.ecoute-actions{grid-template-columns:1fr}}
.ecoute-texte{background:var(--surface);border:1px solid var(--trait);border-radius:12px;padding:12px 16px;margin-bottom:8px;line-height:1.6}

/* le calendrier : la date en pavé, le titre, l'article ; les promesses : la phrase du procès-verbal ; les courriers écrits */
.liste-cal{padding-block:4px}
.echeance{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--trait-doux);text-decoration:none;color:inherit}
.echeance:last-child{border-bottom:0}
.echeance .cal{flex:none;width:54px;text-align:center;border:1px solid var(--trait);border-radius:10px;padding:6px 0 7px;font-size:12px;line-height:1.15;color:var(--discret)}
.echeance .cal b{display:block;font:400 23px/1.1 var(--titre);color:var(--encre)}
.echeance.retard .cal{border-color:var(--orange);background:var(--orange-fond);color:var(--orange)}
.echeance.retard .cal b{color:var(--orange)}
.echeance .txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.echeance .txt > b{font-weight:500;line-height:1.4}
.echeance:hover .txt > b{text-decoration:underline;text-underline-offset:3px}
blockquote.extrait{margin:10px 0 0;padding:8px 12px;border-left:3px solid var(--trait);background:var(--surface-2);border-radius:0 8px 8px 0;color:var(--encre-3);font-size:14px;line-height:1.55}
details.courrier > summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px}
details.courrier > summary::-webkit-details-marker{display:none}
details.courrier > summary > span:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}

/* la boîte à questions, côté salarié (page publique, sans compte) */
.boite{max-width:560px;margin:0 auto;padding:28px 16px calc(40px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:16px}
.boite h1{margin:4px 0 0}
.boite-marque{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--encre-2)}
.boite-marque svg{width:30px;height:30px;flex:none}
.promesses{display:flex;flex-direction:column;gap:6px}
.promesses p{margin:0;padding-left:18px;position:relative;color:var(--encre-2)}
.promesses p::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.sans-cadre{border:0;padding:0;margin:0}
.sans-cadre legend{font-size:14px;font-weight:500;color:var(--encre-3);margin-bottom:8px}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lien-suivi{font:500 13.5px/1.5 var(--chiffre);background:var(--surface-2);border-radius:10px;padding:10px 12px;word-break:break-all;margin:0 0 12px}
.carte.reponse{border-left:3px solid var(--principal)}
.pied{text-align:center;margin-top:8px}
/* l'affiche de la boîte, à imprimer */
.affiche{background:#fff;color:#211A24;border-radius:var(--rayon);padding:48px 32px;text-align:center;border:1px solid var(--trait)}
.affiche h1{font:400 40px/1.15 var(--titre);margin:0 0 18px}
.affiche .adresse{font:600 clamp(17px,5.2vw,28px)/1.3 var(--texte);overflow-wrap:anywhere;margin:28px 0;color:#3A1B47}
.affiche p{font-size:19px;line-height:1.6;margin:8px 0}
@media print{
  body{background:#fff}
  .menu,.onglets,.haut-tel,.pas-imprime{display:none!important}
  .cadre{display:block}
  .page{padding:0!important;max-width:none!important}
  .affiche{border:0;padding:24mm 16mm;min-height:250mm}
}