/* ==========================================================================
   Noble Éclat — application (phase 2, conception G1 · maquettes LOT-05)
   Même design system que le site public (canonique § 8) : bleu nuit, champagne
   (texte uniquement sur bleu nuit), champagne profond (≥ 24 px ou décor), ivoire.
   Couleurs d'état v1.1 (D-27). WCAG AA. Polices auto-hébergées (OFL).
   ========================================================================== */
@font-face{font-family:"Bodoni Moda";src:url("fonts/bodoni-moda-latin-opsz-normal.0492c8615361.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("fonts/bodoni-moda-latin-opsz-italic.3d6740166d53.woff2") format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Jost";src:url("fonts/jost-latin-wght-normal.928f4210aa48.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}

:root{
  --nuit:#0B2545; --nuit-900:#071A33; --nuit-700:#153459; --nuit-500:#2E4B70;
  --champ:#C5A467; --champ-d:#A6864A;
  --ivoire:#FAF8F3; --sable:#F3EFE6; --fond-app:#F6F4EF; --blanc:#FFFFFF;
  --texte:#1E2B3C; --texte-2:#5A6576; --texte-3:#677080;
  --ligne:#E6E0D4; --ligne-2:#EFEBE3; --contour:#857D6E; --focus:#1D5FD1;
  --ok:#2F6F52; --ok-bg:#E7F1EC; --info:#24507F; --info-bg:#E6EEF7;
  --warn:#8A5A12; --warn-bg:#FBF1DE; --err:#A12A1F; --err-bg:#F9E6E3;
  --ivoire-86:rgba(250,248,243,.86); --ivoire-72:rgba(250,248,243,.72);
  --serif:"Bodoni Moda", Didot, Georgia, serif;
  --sans:"Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r:6px;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
body{background:var(--fond-app);color:var(--texte);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
h1,h2,h3{font-family:var(--serif);font-weight:450;color:var(--nuit);line-height:1.15;font-kerning:normal;text-rendering:optimizeLegibility}
h1{font-size:40px;font-variation-settings:"opsz" 18} h2{font-size:28px;font-variation-settings:"opsz" 14} h3{font-size:21px;font-variation-settings:"opsz" 12}
h1 em,h2 em{font-style:italic;color:var(--champ-d)}
p{max-width:64ch}
.muted{color:var(--texte-2)}
.small{font-size:15px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Lien d'évitement (WCAG 2.4.1) : caché jusqu'au focus clavier, mène au contenu (NE-20261103-02) */
.skip{position:absolute;left:12px;top:-80px;z-index:1000;background:var(--blanc);color:var(--nuit);font-weight:600;padding:12px 18px;border-radius:var(--r);box-shadow:0 4px 16px rgba(11,37,69,.18)}
.skip:focus{top:12px}
main[tabindex="-1"]:focus{outline:none}
/* Champs date et heure : même contour de focus que les autres champs (le navigateur y place le focus dans le champ) */
input[type=date]:focus-within,input[type=time]:focus-within{outline:3px solid var(--focus);outline-offset:2px}
/* Barre du bas de l'agent : le focus n'est jamais caché dessous (WCAG 2.4.11) */
html:has(body.has-tabs){scroll-padding-bottom:84px}
a:focus-visible,button:focus-visible,input:focus-visible,.is-focus{outline:3px solid var(--focus);outline-offset:2px}
.on-dark a:focus-visible,.side a:focus-visible{outline-color:var(--champ)}
.nw{white-space:nowrap}
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* étiquette de maquette */
.tag-maquette{position:fixed;left:0;bottom:0;z-index:99;background:#FFF3C4;color:#4A3900;font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border-top-right-radius:8px}
.has-tabs .tag-maquette{bottom:auto;top:0;border-radius:0 0 8px 0}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:4px;font:500 16px/1.2 var(--sans);letter-spacing:.02em;border:1.5px solid transparent;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--nuit);color:var(--ivoire)}
.btn-secondary{background:var(--blanc);border-color:var(--contour);color:var(--nuit)}
.btn-gold{background:var(--champ);color:var(--nuit)}
.btn-ghost{background:transparent;color:var(--nuit);border-color:var(--contour)}
.btn-danger{background:var(--blanc);border-color:var(--err);color:var(--err)}
.btn-sm{min-height:42px;padding:0 18px;font-size:15px}
.btn-block{width:100%}
.link{color:var(--nuit);font-weight:500;border-bottom:1px solid var(--champ-d)}

/* formulaires */
.field{margin-top:22px}
.field label,.label{display:flex;justify-content:space-between;gap:12px;font-weight:500;color:var(--nuit);font-size:16px;margin-bottom:8px}
.field label a{font-weight:500;font-size:15px}
/* A-4 (10-1) : « Mot de passe oublié ? » après le champ dans le code (ordre du clavier), même place à l'écran */
.field-mdp{display:grid;grid-template-columns:1fr auto;column-gap:12px}
.field-mdp>label{grid-column:1;grid-row:1}
.field-mdp>.lien-mdp{grid-column:2;grid-row:1;align-self:start;font-weight:500;font-size:15px;margin-bottom:8px}
.field-mdp>input{grid-column:1/-1;grid-row:2}
.input{display:block;width:100%;min-height:52px;border:1.5px solid var(--contour);border-radius:var(--r);padding:12px 16px;font:400 17px/1.4 var(--sans);color:var(--texte);background:var(--blanc)}
.input::placeholder{color:var(--texte-3)}
.input.is-err{border-color:var(--err);box-shadow:inset 0 0 0 1px var(--err)}
.input.is-ok{border-color:var(--ok)}
.input[readonly]{background:var(--ivoire);color:var(--texte-2)}
.help{font-size:15px;color:var(--texte-2);margin-top:8px}
.msg-err{display:flex;gap:8px;align-items:flex-start;font-size:15px;color:var(--err);margin-top:8px;font-weight:500}
.check{display:flex;align-items:flex-start;gap:12px;margin-top:20px;font-size:16px;color:var(--texte)}
.box{flex:none;width:22px;height:22px;border:1.5px solid var(--contour);border-radius:4px;background:var(--blanc);margin-top:2px;display:grid;place-items:center}
.box.on{background:var(--nuit);border-color:var(--nuit);color:var(--ivoire);font-size:14px}
.rules{margin-top:12px;display:grid;gap:6px;font-size:15px}
.rules li{display:flex;gap:10px;align-items:center;color:var(--texte-2)}
.rules li::before{content:"";width:16px;height:16px;border-radius:50%;border:1.5px solid var(--contour);flex:none}
.rules li.ok{color:var(--ok)}
.rules li.ok::before{background:var(--ok);border-color:var(--ok);box-shadow:inset 0 0 0 3px var(--blanc)}
.strength{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.strength i{height:5px;border-radius:3px;background:var(--ligne)}
.strength i.on{background:var(--ok)}
.otp{font:500 30px/1 var(--sans);letter-spacing:.5em;text-align:center;padding-left:.5em}

/* alertes (jamais la couleur seule : icône + texte) */
.alert{display:flex;gap:14px;align-items:flex-start;border-radius:var(--r);padding:16px 18px;font-size:16px;border:1px solid transparent;border-left-width:4px}
.alert .ico{margin-top:2px}
.alert b{display:block;font-weight:600;margin-bottom:2px}
.alert-info{background:var(--info-bg);color:var(--info);border-color:var(--info)}
.alert-ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
.alert-warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn)}
.alert-err{background:var(--err-bg);color:var(--err);border-color:var(--err)}
.alert p{color:var(--texte)}

/* badges */
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:40px;padding:3px 12px;font-size:14px;font-weight:500}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.b-ok{background:var(--ok-bg);color:var(--ok)} .b-info{background:var(--info-bg);color:var(--info)}
.b-warn{background:var(--warn-bg);color:var(--warn)} .b-mute{background:var(--ligne-2);color:var(--texte-2)}
.soon{display:inline-block;margin-left:auto;font:600 11px/1.6 var(--sans);letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(250,248,243,.5);color:var(--ivoire-86);border-radius:40px;padding:0 8px;white-space:nowrap}

/* ---------------- authentification ---------------- */
.auth{display:grid;grid-template-columns:minmax(420px,.95fr) 1.05fr;min-height:100vh}
.auth-brand{background:var(--nuit);color:var(--ivoire-86);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:48px 56px}
.auth-brand .logo{width:300px;margin-left:-26px}
.auth-brand .emb{position:absolute;right:-120px;bottom:-80px;width:520px;opacity:.07}
.auth-brand .brand-title{margin-top:0;font-family:var(--serif);font-weight:450;line-height:1.15;color:var(--ivoire);font-size:48px;max-width:460px;position:relative;font-variation-settings:"opsz" 18}
.auth-brand .brand-title em{font-style:italic;color:var(--champ)}
.auth-brand p{position:relative;margin-top:18px;font-size:18px;max-width:420px}
.auth-brand .foot{position:relative;font-size:15px;color:var(--ivoire-72);display:flex;gap:10px;align-items:center}
.auth-main{background:var(--ivoire);display:flex;align-items:center;justify-content:center;padding:56px 40px}
.auth-card{width:100%;max-width:460px}
.auth-card h1{font-size:36px}
.auth-card .intro{color:var(--texte-2);margin-top:10px}
.auth-card form,.auth-card .body{margin-top:26px}
.auth-card .btn-block{margin-top:28px}
.auth-card .alert{margin-top:24px}
.auth-card .note{margin-top:26px;font-size:15px;color:var(--texte-2);padding-top:20px;border-top:1px solid var(--ligne)}
.auth-card .back{display:inline-flex;gap:8px;align-items:center;margin-top:24px;font-weight:500;color:var(--nuit)}
.steps-mfa{display:flex;gap:8px;margin-bottom:22px}
.steps-mfa span{flex:1;height:4px;border-radius:2px;background:var(--ligne)}
.steps-mfa span.on{background:var(--nuit)}
.qr{display:flex;gap:22px;align-items:center;margin-top:22px;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:18px}
.qr svg{width:156px;height:156px;flex:none}
.secret{font:500 16px/1.4 ui-monospace,"Cascadia Mono",Consolas,monospace;letter-spacing:.08em;color:var(--nuit);background:var(--ivoire);border:1px dashed var(--contour);border-radius:4px;padding:8px 10px;margin-top:8px;display:inline-block;word-break:break-all}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-top:20px;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:18px 22px;font:500 17px/1.3 ui-monospace,"Cascadia Mono",Consolas,monospace;color:var(--nuit)}
.row-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.lock{width:64px;height:64px;border-radius:50%;background:var(--warn-bg);color:var(--warn);display:grid;place-items:center;margin-bottom:22px}
.lock .ico{width:30px;height:30px}
.big-ico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin-bottom:22px}
.big-ico .ico{width:30px;height:30px}

/* ---------------- shell back-office ---------------- */
.app{display:grid;grid-template-columns:272px 1fr;min-height:100vh}
.side{background:var(--nuit);color:var(--ivoire-86);display:flex;flex-direction:column;padding:26px 18px 18px}
.side .logo{width:220px;margin:0 0 4px -18px}
.side .space{font:600 12.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--champ);margin:6px 0 26px 10px}
.side h2{font:600 12.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ivoire-72);margin:22px 0 10px 10px}
.side nav > a,.side nav > span{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 12px;border-radius:4px;font-size:16px;color:var(--ivoire)}
.side nav a.on{background:var(--nuit-700);box-shadow:inset 3px 0 0 var(--champ)}
.side nav > span.off{color:var(--ivoire-72)}
.side nav > span.off .ico{opacity:.7}
.side .user{margin-top:auto;border-top:1px solid rgba(250,248,243,.16);padding:16px 8px 0;display:flex;gap:12px;align-items:center}
.side .user b{display:block;color:var(--ivoire);font-weight:500}
.side .user small{font-size:14px;color:var(--ivoire-72)}
.av{flex:none;width:40px;height:40px;border-radius:50%;background:var(--champ);color:var(--nuit);display:grid;place-items:center;font-weight:600;font-size:15px}
.av.lg{width:72px;height:72px;font-size:24px}
.main{display:flex;flex-direction:column;min-width:0}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding:22px 40px;background:var(--fond-app)}  /* passe à la ligne si l'en-tête ne tient pas (1024, NE-20261103-02) */
.top h1{font-family:var(--sans);font-weight:500;font-size:28px;letter-spacing:0}
.top .sub{color:var(--texte-2);font-size:16px}
.top .right{margin-left:auto;display:flex;gap:12px;align-items:center}
.menu-user{display:flex;align-items:center;gap:10px;background:var(--blanc);border:1.5px solid var(--contour);border-radius:40px;padding:4px 14px 4px 4px;font-weight:500;color:var(--nuit)}
.menu-user .av{width:34px;height:34px;font-size:14px}
.content{padding:8px 40px 48px}
.card{background:var(--blanc);border:1px solid var(--ligne);border-radius:10px;padding:28px 30px}
.card + .card{margin-top:22px}
.grid-2 > .card{margin-top:0}
.card h2{font-size:24px}
.card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px}  /* colonne étroite (1024) : le bouton passe sous le titre, NE-20261103-02 */
.grid-2{display:grid;grid-template-columns:1.35fr 1fr;gap:22px;align-items:start}
.grid-2 > *,.stack > *{min-width:0}
.table .small{overflow-wrap:anywhere}
.empty{text-align:center;padding:56px 30px}
.empty .emb{width:84px;margin:0 auto 18px;opacity:.9}
.empty h2{font-size:32px}
.empty p{margin:12px auto 0;color:var(--texte-2)}
.empty .row-actions{justify-content:center;margin-top:26px}
.roadmap{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:30px;text-align:left}
.roadmap li{border:1px dashed var(--contour);border-radius:8px;padding:14px 16px;font-size:15px;color:var(--texte-2)}
.roadmap b{display:block;color:var(--nuit);font-weight:500;font-size:16px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin-top:14px;font-size:16px}
.kv dt{color:var(--texte-2)} .kv dd{color:var(--texte)}
.list li{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--ligne-2)}
.list li:first-child{border-top:none}
.list .grow{flex:1;min-width:0}
.list .grow b{display:block;font-weight:500;color:var(--nuit)}
.list .grow span{font-size:15px;color:var(--texte-2)}
.section-title{font:600 13px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--nuit-500);margin:34px 0 12px}
.section-title:first-child{margin-top:0}
.ro{border:1.5px dashed var(--contour);background:var(--ivoire)}
.ro-tag{font-size:14px;color:var(--texte-2)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.mbar{display:none}

/* ---------------- espace client ---------------- */
.cl-head{background:var(--nuit);border-bottom:1px solid rgba(197,164,103,.35)}
.cl-head .in{max-width:1180px;margin:0 auto;padding:0 40px;display:flex;align-items:center;gap:34px;min-height:84px}
.cl-head .logo{width:240px;margin-left:-22px}
.cl-head nav{display:flex;gap:28px;margin-left:12px}
.cl-head nav > a,.cl-head nav > span{color:var(--ivoire);font-size:16px;padding:8px 0;display:flex;align-items:center;gap:8px}
.cl-head nav a.on{box-shadow:inset 0 -2px 0 var(--champ)}
.cl-head nav > span.off{color:var(--ivoire-72)}
.cl-head .right{margin-left:auto}
.cl-head .menu-user{background:transparent;border-color:rgba(250,248,243,.55);color:var(--ivoire)}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px}
.hello{padding:44px 0 26px}
.hello h1{font-size:44px}
.hello p{color:var(--texte-2);margin-top:8px;font-size:18px}
.contact-card .who{display:flex;gap:16px;align-items:center;margin-top:12px}

/* ---------------- espace salarié (mobile d'abord) ---------------- */
.ag{max-width:560px;margin:0 auto;min-height:100vh;background:var(--fond-app);display:flex;flex-direction:column;box-shadow:0 0 0 1px var(--ligne)}
.ag-top{background:var(--nuit);display:flex;align-items:center;gap:12px;padding:12px 16px}
.ag-top .logo{width:176px;margin-left:-12px}
.ag-top .av{margin-left:auto;width:40px;height:40px}
.ag-body{flex:1;padding:22px 18px 110px}
.ag-body h1{font-size:34px}
.date{color:var(--texte-2);margin-top:4px}
.tabs{position:sticky;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);background:var(--blanc);border-top:1px solid var(--ligne);padding:8px 6px 10px}
.tabs a,.tabs span{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13.5px;color:var(--texte-2);min-height:52px;justify-content:center}
.tabs a.on{color:var(--nuit);font-weight:600}
.tabs a.on .ico{stroke-width:2.2}
.tabs span.off{color:var(--texte-3)}
.tabs small{font-size:11px;letter-spacing:.04em}

/* ---------------- e-mail ---------------- */
.mail{max-width:640px;margin:40px auto;background:var(--blanc);border:1px solid var(--ligne);border-radius:10px;overflow:hidden}
.mail-meta{padding:18px 26px;border-bottom:1px solid var(--ligne);font-size:15px;color:var(--texte-2);background:var(--ivoire)}
.mail-meta b{color:var(--texte);font-weight:500}
.mail-head{background:var(--nuit);padding:22px 26px}
.mail-head img{width:240px;margin-left:-20px}
.mail-body{padding:30px 30px 34px}
.mail-body h1{font-size:30px}
.mail-body p{margin-top:14px}
.mail-foot{padding:18px 30px;border-top:1px solid var(--ligne);font-size:14px;color:var(--texte-2)}

/* ==================== mobile ==================== */
@media (max-width:760px){
  body{font-size:17px}
  h1{font-size:32px} h2{font-size:25px}
  .auth{grid-template-columns:1fr}
  .auth-brand{padding:14px 18px;flex-direction:row;align-items:center}
  .auth-brand .logo{width:196px;margin-left:-14px}
  .auth-brand p,.auth-brand .foot,.auth-brand .emb{display:none}
  .auth-main{align-items:flex-start;padding:32px 20px 60px}
  .auth-card h1{font-size:30px}
  .qr{flex-direction:column;align-items:flex-start}
  .codes{grid-template-columns:1fr 1fr;font-size:16px;padding:16px}
  .app{grid-template-columns:1fr}
  .side{display:none}
  .mbar{display:flex;align-items:center;gap:12px;background:var(--nuit);padding:12px 16px}
  .mbar .logo{width:176px;margin-left:-12px}
  .mbar .burger{margin-left:auto;width:46px;height:46px;border:1.5px solid rgba(250,248,243,.55);border-radius:4px;display:grid;place-items:center;color:var(--ivoire)}
  .top{padding:20px 18px 10px;flex-wrap:wrap}
  .top h1{font-size:25px}
  .top .right{display:none}
  .content{padding:6px 18px 40px}
  .card{padding:22px 20px}
  .grid-2,.form-grid{grid-template-columns:1fr}
  .roadmap{grid-template-columns:1fr}
  .empty{padding:36px 18px}
  .empty h2{font-size:27px}
  .cl-head .in{padding:0 16px;min-height:68px;gap:12px}
  .cl-head .logo{width:180px;margin-left:-12px}
  .cl-head nav{display:none}
  .cl-head .menu-user span:not(.av){display:none}
  .cl-head .menu-user{padding:4px}
  .wrap{padding:0 18px}
  .hello{padding:28px 0 18px}
  .hello h1{font-size:32px}
  .ag{box-shadow:none}
  .mail{margin:0;border-radius:0;border-left:0;border-right:0}
  .row-actions .btn{flex:1}
}

/* ---------------- application (compléments aux maquettes LOT-05) ---------------- */
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-14{margin-top:14px}.mt-18{margin-top:18px}.mt-24{margin-top:24px}.mt-28{margin-top:28px}
.maxw-640{max-width:640px}
/* B-1 (10-1, D-335) : remplacent les attributs style des gabarits (CSP sans style en ligne) */
.d-block{display:block}.fs-19{font-size:19px}
.marge-filtre{margin:0 0 14px}
.btn-nu{background:none;border:none;padding:0}
.radio-22{width:22px;height:22px;accent-color:var(--nuit);margin-top:2px}
.hstack{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.who-name{font-weight:500;color:var(--nuit)}
.errorlist{list-style:none;margin-top:8px}
.errorlist li{display:flex;gap:8px;font-size:15px;color:var(--err);font-weight:500}
.errorlist li::before{content:"⚠";font-weight:400}
.errorlist.nonfield{margin:22px 0 0;background:var(--err-bg);border:1px solid var(--err);border-left-width:4px;border-radius:var(--r);padding:14px 16px}
.messages{list-style:none;display:grid;gap:12px;margin-bottom:22px}
.auth-card .messages{margin:0 0 22px}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0}
.choice-list{display:grid;gap:10px;margin-top:4px}
.choice-list .check{margin:0;justify-content:flex-start;font-weight:400;color:var(--texte)}
.choice-list label{display:flex;gap:12px;align-items:center;font-weight:400;color:var(--texte);font-size:16px;margin:0}
.choice-list input{width:20px;height:20px;accent-color:var(--nuit)}
.check input{width:22px;height:22px;accent-color:var(--nuit);margin-top:2px;flex:none}
.big-ico.ok{background:var(--ok-bg);color:var(--ok)} .big-ico.info{background:var(--info-bg);color:var(--info)}
.inline-form{display:inline}
.linkbtn{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.mnav-app{display:none}
.mnav-app.open{display:block;background:var(--nuit);padding:8px 18px 20px}
.mnav-app a,.mnav-app span{display:flex;align-items:center;gap:12px;min-height:50px;color:var(--ivoire);border-bottom:1px solid rgba(250,248,243,.14);font-size:17px}
.mnav-app span.off{color:var(--ivoire-72)}
.table{width:100%;border-collapse:collapse;margin-top:14px;font-size:16px}
.table th{text-align:left;font-weight:500;color:var(--texte-2);font-size:14px;letter-spacing:.04em;padding:8px 0;border-bottom:1px solid var(--ligne)}
.table td{padding:12px 0;border-bottom:1px solid var(--ligne-2)}
@media (max-width:760px){.table{font-size:15px}}
@media print{.side,.mbar,.row-actions,.btn,.tag-maquette{display:none!important}}

/* phase 2, partie 2 : cloche, notifications, préférences, appareils */
.bell{position:relative;display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--contour);background:var(--blanc);color:var(--nuit)}
.bell .ico{width:22px;height:22px}
.bell .count{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--err);color:var(--blanc);font:600 12px/20px var(--sans);text-align:center}
.on-dark .bell,.cl-head .bell{background:transparent;border-color:rgba(250,248,243,.55);color:var(--ivoire)}
.cl-head .right{display:flex;gap:12px;align-items:center}
.ag-top .bell{margin-left:auto}
.ag-top .bell + .av{margin-left:0}
.mbar .bell{margin-left:auto;background:transparent;border-color:rgba(250,248,243,.55);color:var(--ivoire)}
.mbar .bell + .burger{margin-left:0}
.notif-list li.unread b{color:var(--nuit)}
.notif-list li.unread{box-shadow:inset 3px 0 0 var(--champ-d);padding-left:12px}
.table.prefs th[scope=row]{font-weight:400;color:var(--texte);padding:10px 12px 10px 0}
.table.prefs td{padding:10px 0;text-align:center;width:96px}
.table.prefs th[scope=col]:not(:first-child){text-align:center}
.table.prefs input[type=checkbox]{width:22px;height:22px;accent-color:var(--nuit)}
.table.prefs tr{border-bottom:1px solid var(--ligne-2)}
.back{display:inline-flex;gap:8px;align-items:center;font-weight:500;color:var(--nuit)}
.hstack .input{flex:1;min-width:0}
@media (max-width: 760px){
  .card-head{flex-wrap:wrap}
  .table.prefs th[scope=row]{font-size:15px}
  .table.prefs td{width:auto;padding:10px 4px}
  .table.prefs .badge{padding:3px 8px;font-size:13px}
  .table.prefs .badge::before{display:none}
  .notif-list li,.list li{flex-wrap:wrap}
  .list li .inline-form,.list li > .btn{margin-left:38px}
  .list .grow b{overflow-wrap:anywhere}
}
/* phase 3 : back-office des devis (LOT-07) */
.b-err{background:var(--err-bg);color:var(--err)}
.b-late{background:var(--warn-bg);color:var(--warn)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.kpi{background:var(--blanc);border:1px solid var(--ligne);border-radius:8px;padding:20px 22px}
.kpi b{display:block;font:500 34px/1.1 var(--sans);color:var(--nuit);margin-top:6px}
.kpi span{font-size:15px;color:var(--texte-2)}
.kpi.warn{border-color:var(--warn);box-shadow:inset 4px 0 0 var(--warn)}
.kpi small{display:block;font-size:14px;color:var(--texte-2);margin-top:6px}
.filters{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin:0 0 18px}
.filters .field{margin:0;min-width:170px}
.filters .field.grow{flex:1;min-width:220px}
.filters label{font-size:15px}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--nuit) 50%),linear-gradient(135deg,var(--nuit) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.table td,.table th{padding:12px 10px 12px 0;vertical-align:top}
.table td{border-bottom:1px solid var(--ligne-2)}
.table .ref{font-weight:500;color:var(--nuit);white-space:nowrap}
.table .ref a{border-bottom:1px solid var(--champ-d)}
.table .muted{font-size:15px}
.table tr.late td:first-child{box-shadow:inset 3px 0 0 var(--warn);padding-left:10px}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-size:15px;color:var(--texte-2)}
.pager .hstack{gap:8px}
.bars{display:grid;gap:10px;margin-top:14px}
.bars li{display:grid;grid-template-columns:190px 1fr 36px;gap:12px;align-items:center;font-size:15px}
.bars .bar{height:10px;background:var(--ligne-2);border-radius:6px;overflow:hidden}
.bars .bar i{display:block;height:100%;background:var(--nuit-500)}
.bars b{text-align:right;font-weight:500;color:var(--nuit)}
.timeline{position:relative;margin-top:14px}
.timeline li{position:relative;padding:0 0 18px 26px;font-size:15px;color:var(--texte-2)}
.timeline li::before{content:"";position:absolute;left:5px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--nuit-500)}
.timeline li::after{content:"";position:absolute;left:9px;top:18px;bottom:0;width:1px;background:var(--ligne)}
.timeline li:last-child::after{display:none}
.timeline b{display:block;color:var(--texte);font-weight:500}
.note-int{background:var(--ivoire);border:1px dashed var(--contour);border-radius:8px;padding:14px 16px;margin-top:12px;font-size:15px}
.note-int b{color:var(--nuit)}
.note-int small{display:block;color:var(--texte-2);margin-top:4px}
.status-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.chips-sel{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chips-sel span{border:1px solid var(--ligne);border-radius:40px;padding:4px 12px;font-size:14px;color:var(--texte)}
.textarea{min-height:110px;resize:vertical}
.split-2{display:grid;grid-template-columns:1.25fr .75fr;gap:22px;align-items:start}
.stack{display:grid;gap:22px}
.dl-grid{display:grid;grid-template-columns:fit-content(40%) minmax(0,1fr);gap:10px 22px;margin-top:12px;font-size:16px}
.dl-grid dt{color:var(--texte-2)}
.dl-grid dd{color:var(--texte);margin:0;min-width:0;overflow-wrap:anywhere}
.head-actions{display:flex;gap:10px;flex-wrap:wrap}
.more-f{display:none}
@media (max-width: 760px){
  .kpis{grid-template-columns:1fr 1fr;gap:12px}
  .kpi{padding:16px}
  .kpi b{font-size:28px}
  .split-2{grid-template-columns:1fr}
  .filters .field{min-width:0;flex:1 1 100%}
  .filters .opt-f{display:none}
  .more-f{display:inline-flex}
  .filters:target .opt-f{display:block}
  .filters:target label.opt-f{display:flex}
  .filters:target .more-f{display:none}
  .bars li{grid-template-columns:120px 1fr 30px}
  .table.cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table.cards,.table.cards tbody,.table.cards tr,.table.cards td{display:block;width:100%}
  .table.cards tr{border:1px solid var(--ligne);border-radius:8px;padding:12px 14px;margin-bottom:12px;background:var(--blanc)}
  .table.cards td{border:0;padding:3px 0}
  .table.cards tr.late{box-shadow:inset 4px 0 0 var(--warn)}
  .table.cards tr.late td:first-child{box-shadow:none;padding-left:0}
  .table.cards td[data-l]::before{content:attr(data-l) " : ";color:var(--texte-2);font-size:14px}
  .dl-grid{grid-template-columns:1fr;gap:2px}
  .dl-grid dd{margin-bottom:10px}
  .pager{flex-direction:column;gap:12px;align-items:flex-start}
}

/* largeur des barres par pas de 5 % (aucun style en ligne : CSP stricte) */
.bars .bar i.w-0{width:0%}.bars .bar i.w-5{width:5%}.bars .bar i.w-10{width:10%}.bars .bar i.w-15{width:15%}.bars .bar i.w-20{width:20%}.bars .bar i.w-25{width:25%}.bars .bar i.w-30{width:30%}.bars .bar i.w-35{width:35%}.bars .bar i.w-40{width:40%}.bars .bar i.w-45{width:45%}.bars .bar i.w-50{width:50%}.bars .bar i.w-55{width:55%}.bars .bar i.w-60{width:60%}.bars .bar i.w-65{width:65%}.bars .bar i.w-70{width:70%}.bars .bar i.w-75{width:75%}.bars .bar i.w-80{width:80%}.bars .bar i.w-85{width:85%}.bars .bar i.w-90{width:90%}.bars .bar i.w-95{width:95%}.bars .bar i.w-100{width:100%}
/* photos de profil (phase 5, LOT-09 maquettes 18 et 19) */
.av-img{object-fit:cover;border-radius:50%;display:inline-block}
.av-row{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
.av-now{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-width:150px}
.av-xl{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;background:var(--champ);color:var(--nuit);font:600 38px/1 var(--sans)}
.av-photo{width:112px;height:112px}
.av-edit .crop{position:relative;width:220px;height:220px;border-radius:8px;overflow:hidden;background:var(--nuit-700);touch-action:none;cursor:grab;margin-top:14px}
.av-edit .crop:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.av-edit .crop img{position:absolute;max-width:none;user-select:none;pointer-events:none}
.av-edit .crop .ring{position:absolute;left:50%;top:50%;width:176px;height:176px;margin:-88px 0 0 -88px;border-radius:50%;border:2px solid var(--ivoire);box-shadow:0 0 0 999px rgba(11,37,69,.55);pointer-events:none}
.av-edit .zoom{display:flex;gap:10px;align-items:center;margin-top:14px;font-size:15px}
.av-edit .zoom input{width:160px;accent-color:var(--nuit)}
@media (max-width:760px){.av-row{grid-template-columns:1fr}.av-now{align-items:flex-start;text-align:left}}
/* espace client : menu mobile (même comportement que le back-office), masqué en ordinateur */
.cl-burger{display:none}
@media (max-width:760px){
  .cl-head .right{display:flex;align-items:center;gap:10px}
  .cl-burger{display:grid;place-items:center;width:46px;height:46px;border:1.5px solid rgba(250,248,243,.55);border-radius:4px;color:var(--ivoire)}
  .mnav-app.open{padding:8px 16px 20px}
}
@media (min-width:761px){.mnav-app,.mnav-app.open{display:none}}

/* « À traiter » (6-6) : badge du menu, sections et état vide */
.side nav a .count,.mnav-app a .count{margin-left:auto;min-width:24px;height:22px;padding:0 7px;border-radius:11px;background:var(--champ);color:var(--nuit);font:600 13px/22px var(--sans);text-align:center}
.todo h3{font:600 13px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--texte-2);margin:22px 0 4px}
.todo h3:first-of-type{margin-top:0}
.todo .list li form{margin:0}
.todo-vide{display:flex;gap:14px;align-items:flex-start;padding:8px 0}
.todo-vide .ico{color:var(--ok);flex:none;margin-top:2px}
@media (max-width:760px){
  .todo .list li{flex-wrap:wrap;align-items:flex-start}
  .todo .list li .grow{flex:1 1 calc(100% - 40px)}
  .todo .list li .badge{margin-left:38px}
  .todo .list li > .btn,.todo .list li > form{margin-left:auto}
}
/* tableau de bord : rangée de trois tuiles (D-180) */
.kpis.k3{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.kpis.k3{grid-template-columns:1fr 1fr}.kpis.k3 .kpi:last-child{grid-column:1 / -1}}

/* Largeurs de tablette (761 à 1 000 px, 6-6) : mises en page des petits écrans pour les grilles
   et les tableaux ; le menu latéral reste visible ; zones cliquables d'au moins 44 px. */
@media (min-width:761px) and (max-width:1000px){
  .top{padding:24px 24px 10px;flex-wrap:wrap;gap:12px}
  .content{padding:8px 24px 40px}
  .card{padding:22px 20px}
  .grid-2,.form-grid,.split-2,.roadmap{grid-template-columns:minmax(0,1fr)}
  .kpis,.kpis.k3{grid-template-columns:1fr 1fr;gap:12px}
  .kpis.k3 .kpi:last-child{grid-column:1 / -1}
  .kpi{padding:16px}
  .card-head{flex-wrap:wrap}
  .list li{flex-wrap:wrap}
  .list .grow b{overflow-wrap:anywhere}
  .filters .field{min-width:0;flex:1 1 40%}
  .bars li{grid-template-columns:150px 1fr 30px}
  .table.cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table.cards,.table.cards tbody,.table.cards tr,.table.cards td{display:block;width:100%}
  .table.cards tr{border:1px solid var(--ligne);border-radius:8px;padding:12px 14px;margin-bottom:12px;background:var(--blanc)}
  .table.cards td{border:0;padding:3px 0}
  .table.cards tr.late{box-shadow:inset 4px 0 0 var(--warn)}
  .table.cards tr.late td:first-child{box-shadow:none;padding-left:0}
  .table.cards td[data-l]::before{content:attr(data-l) " : ";color:var(--texte-2);font-size:14px}
  .table.cards td.ref{white-space:normal}
  .table.prefs td{width:auto;padding:10px 4px}
  .table.prefs .badge{padding:3px 8px;font-size:13px}
  .pager{flex-direction:column;gap:12px;align-items:flex-start}
  .av-row{grid-template-columns:minmax(0,1fr)}.av-now{align-items:flex-start;text-align:left}
  .todo .list li{align-items:flex-start}
  .todo .list li .grow{flex:1 1 calc(100% - 40px)}
  .todo .list li .badge{margin-left:38px}
  .todo .list li > .btn,.todo .list li > form{margin-left:auto}
  .btn-sm,.menu-user{min-height:44px}
  details > summary{padding-block:9px}
  .cl-head .in{padding:0 24px;gap:18px}
  .cl-head .logo{width:180px;margin-left:-12px}
  .cl-head nav{gap:16px;margin-left:0}
  .cl-head .menu-user span:not(.av){display:none}
  .wrap{padding:0 24px}
}
/* Invitations › Encadrement (D-233, R1) : adresse longue coupée, jamais de débordement */
.enc-list .grow > span{display:block}
.enc-list .enc-mail{overflow-wrap:anywhere}

/* phase 7, mission 7-4 : zones à toucher d'au moins 44 px sur téléphone, partout */
@media (max-width:760px){.btn-sm{min-height:44px}}
/* liens de retour : zone à toucher d'au moins 44 px sur téléphone et tablette (NE-20261011-03) */
@media (max-width:1000px){.back{min-height:44px}}
/* phase 8, mission 8-1 (D-313) : zones à toucher d'au moins 44 px sur téléphone et tablette —
   avatar de l'agent, cases à cocher et boutons radio avec leur libellé, lien de la tuile
   « Réclamations ouvertes » du tableau de bord */
@media (max-width:1000px){
  .ag-top .av{width:44px;height:44px}
  .check{min-height:44px;align-items:center}
  .check input{margin-top:0}
  .kpi small a.link{display:inline-flex;align-items:center;min-height:44px}
}
/* phase 8, mission 8-1 (LOT-32) : listes de passages, de personnes et de réclamations ; choix d'un
   passage, toute la ligne cliquable. Sur un écran étroit, le bouton d'une ligne passe dessous. */
.pl8 li{align-items:flex-start;flex-wrap:wrap}
.pl8 .grow{flex:1 1 220px}
.pl8 .grow > span{display:block}
.pl8 .badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pl8 .badges .badge{white-space:normal}
.pl8 .ico{flex:none;margin-top:3px}
.pick{display:flex;align-items:flex-start;gap:14px;width:100%;min-height:44px;cursor:pointer}
.pick input{width:22px;height:22px;accent-color:var(--nuit);margin-top:4px;flex:none}
.pick .grow b{display:block;font-weight:500;color:var(--nuit)}
.pick .grow > span:not(.badges){display:block;font-size:15px;color:var(--texte-2)}
.pick .badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pl8 .grow b .nw{font-size:inherit;color:inherit}
/* phase 8, mission 8-2 (D-320) : cibles restantes de 44 px au moins, téléphone et tablette ; 1440 inchangé */
@media (max-width:1000px){
  .cl-head nav > a{min-height:44px}
  details.rec-acts > summary{min-height:44px;padding:10px 0}
  .onsite a.link,li.contact small a.link{display:inline-flex;align-items:flex-end;min-height:44px}
}
/* phase 8, mission 8-4 (LOT-33 `07c`, `07d`) : e-mail non parti et synthèse des motifs de refus,
   en tableau (aucun graphique) */
.etapes{padding-left:22px;list-style:decimal}
.etapes li{margin-top:6px}
.em-np dd{overflow-wrap:anywhere;min-width:0}
.row-actions form{margin:0}
.table.refus th[scope=row]{font-weight:400;color:var(--texte)}
.table.refus .num{text-align:right;width:140px}
.table.refus tr.tot th,.table.refus tr.tot td{font-weight:600;color:var(--nuit)}
@media (max-width:760px){.table.refus th,.table.refus td{font-size:15px}.table.refus .num{width:76px;white-space:normal}.table.refus th[scope=row]{padding-right:14px}}
/* tableau de bord (8-4) : liens des listes et périodes de la fréquentation, au moins 44 px sur
   téléphone et tablette ; 1440 inchangé */
@media (max-width:1000px){
  .tb-liste .grow b a{display:inline-flex;align-items:center;min-height:44px}
  #frequentation .seg a{min-height:44px}
}
/* phase 8, mission 8-5 (LOT-33 `08a` à `10a`) : recherche unique dans l'en-tête, résultats groupés,
   journal des actions, colonnes des exports */
.top .gsearch{display:flex;gap:8px;align-items:center;flex:0 1 380px;margin-left:auto}
.top .gsearch .input{min-height:44px;flex:1;min-width:0}
.top .gsearch + .right{margin-left:0}
@media (max-width:1000px){.top{flex-wrap:wrap}.top .gsearch{order:3;flex:1 1 100%;margin-left:0}}
.res-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.res-grid .card{margin:0}
.res-grid .badge{white-space:normal}
.res .list li{flex-wrap:wrap}
.res .list .grow{flex:1 1 200px}
.res .list b a{display:inline-flex;align-items:center;min-height:44px}
.res p a.link{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:1000px){.res-grid{grid-template-columns:1fr}}
.journal-a td{overflow-wrap:anywhere}
.pager{flex-wrap:wrap;gap:12px}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 24px;padding-left:22px;font-size:15px}
@media (max-width:1000px){.cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cols{grid-template-columns:1fr}}
/* En-tête du back-office en grand écran (UAT 2026-11-03, D-342) : le titre, la recherche, la cloche et le compte restent
   sur la première ligne ; les boutons du titre (.head-actions) passent sur une seconde ligne, sous le titre, au lieu de
   repousser la cloche et le compte sous le titre. En dessous de 1180 px, l'en-tête passe à la ligne comme avant (1024,
   NE-20261103-02). */
@media (min-width:1180px){
  .top{row-gap:14px}
  .top > div:first-child{flex:1 1 0;min-width:0}
  .top .gsearch{flex:0 1 380px;min-width:240px}
  .top .right{flex:none}
  .top > .head-actions{order:4;flex:1 1 100%}
}