/* Espace client — design E′ de syntaxeo.com (charte : docs/charte-visuelle-e2.md).
   Chargée après app.css par views/layouts/portal.php (et la page d'erreur de l'espace client), et par eux seuls : le CRM
   a ses propres feuilles (admin.css), rien ici ne l'atteint. Un seul thème, clair : pas de bascule, pas de sombre.
   Valeurs reprises du site (assets/css/e2.css et e2/*.css), pas réinventées.
   Sommaire : 1 polices · 2 jetons · 3 base · 4 contrôles · 5 composants · 6 en-tête · 7 pied de page
   · 8 haut de page · 9 mouvement */

/* 1 ─ Polices (SIL OFL, voir ../fonts/LICENSE-*.txt) ------------------------------------------------
   Même adresse que le préchargement du gabarit (asset() laisse les polices sans empreinte) : sinon le
   navigateur les téléchargerait deux fois. */
@font-face{font-family:"Funnel Display";src:url("../fonts/funnel-display.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Funnel Sans";src:url("../fonts/funnel-sans.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Martian Mono";src:url("../fonts/martian-mono.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* 2 ─ Jetons ---------------------------------------------------------------------------------------
   Jetons E′, puis réaffectation de ceux d'app.css : les composants partagés prennent les couleurs E′ sans
   être réécrits. Chargée après app.css, cette déclaration l'emporte sur ses jetons d'origine (même spécificité) ;
   le gabarit ne pose aucun data-theme. */
:root{
  color-scheme:light;
  /* Murs, niches et papier */
  --wall:#ECEAE4;--rule:#ECEAE4;--band:#E3E0D8;--niche:#DCD8CE;--card:#F4F2EE;--paper:#FFFFFF;
  /* Encre ; --muted est le plus clair autorisé pour du petit texte */
  --soft:#3C3B38;
  /* Accents : l'encre, le surligneur, le vert de validation. Aucun bleu hors du logo. */
  --accent:#121212;--marker:#FFE17A;--ok:#1E6B45;
  /* États de l'application, tous ≥ 4,5:1 en texte sur blanc et sur leur fond doux */
  --danger:#B3261E;--danger-soft:#F6E1DF;--warn:#87570A;--warn-soft:#FFF4D6;--ok-soft:#E2EEE6;
  /* Cadres, nuit (pied de page), laiton (plaque « Haut de page ») */
  --frame:#1A1A1A;--mat:#FAF9F6;
  --night:#121212;--night-card:#1C1B19;--night-text:#ECEAE4;--night-soft:#C9C6BF;--night-muted:#A3A09A;--night-line:#2E2D2A;
  --plaque:#1F1D19;--brass:#B89B62;--brass-hi:#F7E9C3;
  /* Mise en page et mouvement */
  --gutter:clamp(16px,2vw,32px);
  --head-h:76px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --f-disp:"Funnel Display","Helvetica Neue",Arial,sans-serif;
  --f-body:"Funnel Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"Martian Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  /* Ombres : longues et douces, jamais de halo coloré */
  --lift:0 30px 40px -30px rgba(0,0,0,.35);
  --lay:0 20px 30px -18px rgba(0,0,0,.35);
  /* Anciens jetons d'app.css */
  --ink:#121212;--text:#3C3B38;--muted:#5F5D57;--field-line-hover:#5F5D57;
  --bg:#ECEAE4;--surface:#FFFFFF;--surface-2:#F4F2EE;--line:#D6D2C8;--line-strong:#BDB7AB;
  --blue:#121212;--blue-hover:#000;--blue-ink:#121212;--blue-soft:#FFF4D6;--blue-solid:#121212;--blue-solid-hover:#000;
  --green:#1E6B45;--green-soft:#E2EEE6;
  --amber:#87570A;--amber-soft:#FFF4D6;
  --red:#B3261E;--red-soft:#F6E1DF;--alert:#B3261E;
  --violet:#121212;--violet-soft:#F4F2EE;
  --fs-xs:12px;--fs-sm:14px;--fs-base:15px;--fs-md:16px;--fs-lg:20px;--fs-xl:24px;--fs-2xl:34px;
  --control:44px;--control-sm:44px;
  --r-sm:10px;--r:14px;--r-lg:20px;
  --shadow:none;--shadow-pop:0 30px 60px -24px rgba(0,0,0,.4);
  /* Anneau des conteneurs dont le vrai champ est masqué (cartes à choisir, zone de dépôt) :
     un liseré papier puis l'encre, comme le contour de focus */
  --focus:0 0 0 2px var(--paper),0 0 0 5px var(--ink);
  --font:var(--f-body);--mono:var(--f-mono);
}
@media (max-width:959px){:root{--head-h:64px}}

/* 3 ─ Base ------------------------------------------------------------------------------------------ */
/* La place de la barre de défilement est toujours réservée : une page courte (la connexion sur grand écran) ne
   décale plus l'en-tête et le contenu centrés par rapport à une page qui défile */
html{scroll-padding-top:calc(var(--head-h) + 16px);scrollbar-color:#BDB7AB var(--wall);scrollbar-gutter:stable}
/* Barres de défilement : curseur sable, rail du fond ; fines dans les zones internes */
*{scrollbar-color:#BDB7AB transparent}
:is(.table-wrap,.chart-scroll,.suggestions,.picker__menu,.app-menu__panel){scrollbar-width:thin}
@supports not (scrollbar-color:auto){
  ::-webkit-scrollbar{width:12px;height:12px}
  ::-webkit-scrollbar-track{background:transparent}
  html::-webkit-scrollbar-track{background:var(--wall)}
  ::-webkit-scrollbar-thumb{background:#BDB7AB;border:3px solid transparent;border-radius:999px;background-clip:padding-box}
  ::-webkit-scrollbar-thumb:hover{background-color:var(--muted)}
  ::-webkit-scrollbar-corner{background:transparent}
}
body{background:var(--wall);color:var(--text);font-family:var(--f-body);font-size:16px;line-height:1.55;font-feature-settings:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
.portal-body{font-size:16px}
h1,h2,h3,h4{font-family:var(--f-disp);color:var(--ink);letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(30px,1.2vw + 22px,40px);font-weight:800;line-height:1.02;letter-spacing:-.035em}
h2{font-size:clamp(20px,.4vw + 17px,24px);font-weight:700;line-height:1.15;letter-spacing:-.025em}
h3{font-size:18px;font-weight:700;line-height:1.2}
h4{font-size:16px;font-weight:700;line-height:1.25}
::selection{background:var(--marker);color:var(--ink)}
input,textarea{caret-color:var(--ink)}
mark{color:inherit;background:linear-gradient(transparent 50%,var(--marker) 50%);padding:0 2px}
code,.mono{font-family:var(--f-mono);font-size:.84em;letter-spacing:0}
.muted{color:var(--muted)}
.small{font-size:14px}
/* Liens : encre soulignée ; au survol le trait se renforce. Dans le texte courant, le surligneur monte dessous. */
a{color:var(--ink);text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:rgba(18,18,18,.4);transition:text-decoration-color .2s,background-size .35s var(--ease)}
a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.portal-main :is(p,dd,.hint,.prose) a:not([class]){font-weight:600;background:linear-gradient(var(--marker),var(--marker)) no-repeat 0 92%/0 42%}
.portal-main :is(p,dd,.hint,.prose) a:not([class]):hover{background-size:100% 42%}
/* Focus : contour encre, décalé ; jaune sur fond sombre. Jamais retiré sans remplacement. */
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:none}
.site-footer :focus-visible,.to-top:focus-visible{outline-color:var(--marker)}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:1300;padding:10px 18px;border-radius:999px;background:var(--ink);color:var(--wall);font-weight:600;text-decoration:none}
.skip-link:focus{left:16px;color:var(--wall)}
.wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}
.icon{stroke-width:1.75}
.arr{display:inline-block;transition:transform .35s var(--ease)}
:is(a:hover,a:focus-visible,button:hover) .arr{transform:translateX(4px)}
:is(a:hover,a:focus-visible,button:hover) .arr--back{transform:translateX(-4px)}
.link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--ink)}
/* Soulignement au surligneur (liens isolés, titres de carte et de document, sujets des demandes, « voir la suite ») :
   un trait jaune de 4 px, déjà posé mais transparent, qui se colore au survol. Partir de « text-decoration:none »
   le faisait apparaître à la couleur du texte : le trait passait par le noir avant de virer au jaune. */
.link,.project__title h3 a,.doc-list .grow a,.mini-tickets__subject,.dash-more>summary,.vault-more>summary{text-decoration:underline transparent;text-decoration-thickness:4px;text-underline-offset:.35em;text-decoration-skip-ink:none;transition:text-decoration-color .2s}
:is(.link,.project__title h3 a,.doc-list .grow a,.dash-more>summary,.vault-more>summary):hover,.mini-tickets a:hover .mini-tickets__subject{text-decoration-color:var(--marker)}

/* 4 ─ Contrôles ------------------------------------------------------------------------------------- */
/* Boutons en pilule. Principal : encre pleine. Secondaire : contour encre qui se remplit au survol. */
.btn{height:auto;min-height:var(--control);gap:10px;padding:0 22px;border:0;border-radius:999px;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);font-family:var(--f-body);font-size:15px;font-weight:600;line-height:1.2;transition:transform .35s var(--ease),background-color .25s,box-shadow .35s var(--ease),color .25s}
.btn:hover{background:var(--ink);color:var(--wall);transform:translateY(-2px)}
.btn--primary{background:var(--ink);color:var(--wall);box-shadow:none}
.btn--primary:hover{background:#000;color:var(--wall);box-shadow:0 14px 24px -14px rgba(0,0,0,.55)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:none}
.btn--ghost:hover{background:var(--card);color:var(--ink);transform:none}
.btn--danger{color:var(--danger);box-shadow:inset 0 0 0 1.5px var(--danger)}
.btn--danger:hover{background:var(--danger);color:#fff}
.btn--ghost.btn--danger{box-shadow:none}
.btn--ghost.btn--danger:hover{background:var(--danger-soft);color:var(--danger)}
.btn--sm{min-height:var(--control-sm);padding:0 16px;font-size:14px}
.btn--lg{height:auto;min-height:54px;padding:0 26px;font-size:16px}
.btn--icon{width:var(--control-sm);padding:0}
/* Désactivé : couleur atténuée et curseur, jamais d'opacité sur le texte */
.btn[disabled],.btn[disabled]:hover{opacity:1;background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line);transform:none;cursor:not-allowed}
.btn--primary[disabled],.btn--primary[disabled]:hover{background:var(--card);box-shadow:none}
.link-btn{color:var(--ink);font-weight:600;text-decoration-thickness:1.5px;text-decoration-color:rgba(18,18,18,.4)}
.link-btn:hover{text-decoration-color:var(--ink)}
.link-btn--danger{color:var(--danger);text-decoration-color:currentColor}

/* Champs : 50 px, texte 16 px (pas de zoom sur iPhone), focus = bordure encre et anneau jaune */
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{height:auto;min-height:50px;padding:12px 16px;border:1.5px solid var(--field-line,var(--line));border-radius:14px;background-color:var(--paper);color:var(--ink);font-size:16px;line-height:1.35;transition:border-color .2s,box-shadow .2s}
textarea{min-height:120px;line-height:1.5}
select{padding-right:42px;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 17px) 50%}
input:focus:not([readonly]),select:focus,textarea:focus:not([readonly]){--field-line:var(--ink);box-shadow:0 0 0 3px var(--marker)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
input[disabled],select[disabled],textarea[disabled]{opacity:1;background-color:var(--card);color:var(--muted);cursor:not-allowed}
input[type=file]{font-size:14px}
input[type=file]::file-selector-button{height:auto;min-height:var(--control-sm);padding:0 16px;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink);font-weight:600}
.field{gap:7px}
.field>label,.label{font-size:14px;font-weight:600;color:var(--ink)}
.hint{font-size:14px;line-height:1.5;color:var(--muted)}
.check{font-size:15px;color:var(--soft)}
.check input{width:20px;height:20px;accent-color:var(--ink)}
.input-shell>.icon{left:16px;color:var(--muted)}
.input-shell input:not([type=checkbox]):not([type=radio]):not([type=file]){padding-left:46px}
.input-code{min-height:60px!important;font-family:var(--f-mono);font-size:24px!important;font-weight:500;letter-spacing:.35em}
.form-actions{border-top-color:var(--line)}

/* 5 ─ Composants ------------------------------------------------------------------------------------ */
/* Cartes : papier sur le mur, rayon 20 px, un filet presque invisible */
.panel{border:0;border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04)}
.panel__head{min-height:56px;padding:16px 22px;border-bottom-color:var(--line)}
.panel__head h2{font-size:18px}
.panel__body{padding:22px}
.panel__body+.panel__body{border-top-color:var(--line)}
.empty{color:var(--muted)}

/* Pastilles d'état : mono en capitales, fond doux de l'état ; une nouveauté se signale au surligneur */
.badge{gap:6px;height:auto;min-height:22px;padding:3px 9px;border:0;border-radius:999px;background:var(--card);color:var(--soft);font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.06em;line-height:1.3;text-transform:uppercase}
.badge::before{display:none}
.badge--info{background:var(--marker);color:var(--ink)}
.badge--progress{background:var(--ink);color:var(--wall)}
.badge--success{background:var(--ok-soft);color:var(--ok)}
.badge--warning{background:var(--warn-soft);color:var(--warn)}
.badge--danger{background:var(--danger-soft);color:var(--danger)}
.badge--neutral{background:var(--paper);color:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.tag{height:auto;min-height:26px;padding:3px 10px;border:0;border-radius:999px;background:var(--card);color:var(--soft);font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.tag--danger{background:var(--danger-soft);color:var(--danger)}
.tag--warning{background:var(--warn-soft);color:var(--warn)}
/* Compteur de nouveautés (support) : pastille encre */
.nav-badge{min-width:20px;height:20px;margin-left:6px;padding:0 6px;background:var(--ink);color:var(--wall);font-family:var(--f-mono);font-size:11px;font-weight:500;vertical-align:1px}

/* Messages : carte papier, filet gauche de l'état, texte encre ; pas de fond saturé */
.flash{gap:12px;margin:0 0 24px;padding:14px 18px;border:0;border-left:4px solid var(--ink);border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:var(--lay)}
.flash--success{border-left-color:var(--ok)}
.flash--error{border-left-color:var(--danger)}
.flash--warning{border-left-color:var(--warn)}

/* Tableaux : en-têtes mono, montants en chiffres tabulaires, survol de ligne sur la carte */
.table th{padding:12px 16px;border-bottom-color:var(--line);background:transparent;font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.table td{padding:14px 16px;border-bottom-color:var(--line)}
.table tbody tr:hover td{background:var(--card)}
.table td.right,.num{font-variant-numeric:tabular-nums}
.dl dt{color:var(--muted)}
.list>li{border-bottom-color:var(--line)}

/* Onglets (le site dont on lit la visibilité) : les liens de la navigation, l'onglet ouvert au surligneur. Beaucoup de
   sites passent à la ligne au lieu de défiler : rien n'est coupé, ni un nom, ni le contour de focus */
.tabs{flex-wrap:wrap;gap:0 24px;margin-bottom:24px;overflow:visible;box-shadow:inset 0 -1px 0 var(--line)}
.tabs a{position:relative;isolation:isolate;justify-content:center;height:auto;min-width:44px;min-height:48px;padding:0;color:var(--soft);font-size:15px;font-weight:500}
.tabs a::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right}
.tabs a:hover{color:var(--ink)}
.tabs a:hover::after{transform:scaleX(1);transform-origin:left}
.tabs a[aria-current=page]{color:var(--ink);font-weight:600;box-shadow:none}
.tabs a[aria-current=page]::after{z-index:-1;left:-3px;right:-3px;bottom:16px;height:9px;border-radius:2px;background:var(--marker);transform:none}
.tabs small{background:var(--card);color:var(--soft);font-family:var(--f-mono);font-size:10px;font-weight:500}
.chip{height:auto;min-height:var(--control-sm);padding:0 16px;border:0;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);color:var(--soft);font-size:14px}
.chip:hover{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.chip[aria-current=true]{background:var(--ink);color:var(--wall);box-shadow:none}
.chip[aria-current=true] small{color:var(--night-soft);opacity:1}

/* Fil d'Ariane : mono en capitales, liens soulignés */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.crumbs a{display:inline-flex;align-items:center;min-height:32px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.crumbs a:hover{color:var(--ink);text-decoration-color:var(--ink)}
@media (pointer:coarse){.crumbs a{min-height:44px}}

/* Titres de page et de section */
.hello{margin-bottom:32px}
.hello h1{font-size:clamp(30px,1.2vw + 22px,40px)}
.hello p{margin-top:12px;max-width:62ch;color:var(--soft)}
.section-title{margin:48px 0 16px}
.section-title h2{font-size:clamp(20px,.6vw + 16px,26px)}
.meta{color:var(--muted)}

/* Blocs du dossier */
.project,.help-card,.pay-box,.decision{border:0;border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04)}
.help-card--soft{background:var(--card);box-shadow:none}

/* Fenêtres : fond mur, commandes sur papier, entrée par glissement (voir « mouvement ») */
dialog.modal{border:0;border-radius:24px;background:var(--wall);color:var(--soft);box-shadow:0 40px 90px -30px rgba(0,0,0,.5)}
dialog.modal::backdrop{background:rgba(18,18,18,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal__body{padding:24px}
.modal__head h2{font-size:22px}
.modal__close{width:44px;height:44px;border-radius:50%;background:var(--paper);color:var(--ink)}
.modal__close:hover{background:var(--ink);color:var(--wall)}

/* Listes de suggestions (adresse, champ libre) */
.suggestions{padding:6px;border:0;border-radius:16px;background:var(--paper);box-shadow:0 30px 60px -28px rgba(0,0,0,.4),0 0 0 1px rgba(18,18,18,.06)}
.suggestions [role=option]{padding:10px 12px;border-radius:10px}
.suggestions [role=option]:hover,.suggestions [aria-selected=true]{background:var(--card)}

.onpage{position:sticky;top:var(--head-h);z-index:900;display:flex;align-items:center;gap:14px;margin:0 calc(var(--gutter) * -1) 28px;padding:10px var(--gutter);background:var(--wall);border-bottom:1px solid var(--line);transition:top .45s var(--ease)}
body:has(.site-header.head-hidden) .onpage{top:0}
html:has(.onpage){scroll-padding-top:calc(var(--head-h) + 84px)}
.onpage__label{flex:none;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.onpage__list{display:flex;gap:8px;min-width:0;margin:0;padding:2px;overflow-x:auto;list-style:none;scrollbar-width:none;overscroll-behavior-x:contain}
.onpage__list::-webkit-scrollbar{display:none}
.onpage__list li{flex:none}
.onpage a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.06);color:var(--ink);font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s}
.onpage a:hover{background:var(--card);color:var(--ink)}
.onpage a[aria-current=true]{background:var(--ink);color:var(--wall)}
.onpage a.is-empty{color:var(--muted)}
.onpage__count{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--card);font-family:var(--f-mono);font-size:11px;font-weight:500;color:var(--ink)}
.onpage a[aria-current=true] .onpage__count{background:var(--marker);color:var(--ink)}
@media (max-width:760px){.onpage__label{display:none}.onpage{margin-bottom:20px;padding-block:8px}}

/* 6 ─ En-tête de l'espace client ---------------------------------------------------------------------
   Le dessin de l'en-tête du site (logo, libellé mono, liens encre soulignés, page en cours au surligneur) avec le
   contenu d'une application : avant connexion, le logo et le retour au site ; une fois connecté, la navigation de
   l'espace et le menu du compte, repliés dans le burger sous 1 200 px. Collant et opaque, filet bas une fois la page
   défilée, masqué en descendant et de retour dès qu'on remonte (app.js). */
.head-progress{display:none}
.site-header{position:sticky;top:0;z-index:1000;background:var(--wall);border-bottom:1px solid transparent;transition:transform .45s var(--ease),border-color .3s}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.site-header.head-hidden{transform:translateY(-100%)}
.head-row{display:flex;align-items:center;gap:24px;height:var(--head-h)}
.brand-logo{display:inline-flex;align-items:center;flex-shrink:0;min-height:44px}
.brand-logo img{width:134px;height:28px}
.head-label{display:inline-flex;align-items:center;flex-shrink:0;min-height:28px;padding-left:18px;border-left:1px solid var(--line);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);white-space:nowrap}
/* Navigation : liens encre, soulignés au survol ; la page en cours est surlignée au jaune */
.app-nav{display:flex;flex:1;justify-content:center;min-width:0}
.app-nav ul{display:flex;align-items:center;gap:24px;margin:0;padding:0;list-style:none}
.app-nav a{position:relative;isolation:isolate;display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap}
.app-nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right}
.app-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.app-nav a[aria-current=page]{font-weight:600}
.app-nav a[aria-current=page]::after{z-index:-1;left:-3px;right:-3px;bottom:12px;height:9px;border-radius:2px;background:var(--marker);transform:none}
.app-nav li{position:relative}
.app-nav__chev{width:6px;height:6px;margin:0 0 0 8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;opacity:.5;transform:translateY(-2px) rotate(45deg)}
.app-nav .app-nav__sub{position:absolute;top:calc(100% + 6px);left:-18px;z-index:1100;display:grid;gap:0;min-width:300px;margin:0;padding:8px;border-radius:18px;background:var(--paper);box-shadow:0 34px 70px -30px rgba(0,0,0,.4),0 0 0 1px rgba(18,18,18,.05);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s var(--ease) .15s,transform .18s var(--ease) .15s,visibility 0s linear .33s}
.app-nav__sub::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.app-nav li:hover>.app-nav__sub,.app-nav li:focus-within>.app-nav__sub{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.app-nav li.is-closed>.app-nav__sub{opacity:0;visibility:hidden;transition:none}
.app-nav .app-nav__sub a{display:grid;gap:2px;align-content:center;width:100%;min-height:58px;padding:8px 16px;border-radius:12px;font-size:15px;font-weight:600;white-space:normal;transition:background-color .2s}
.app-nav__sub small{font-size:13px;font-weight:400;line-height:1.35;color:var(--muted)}
.app-nav .app-nav__sub a::after{display:none}
.app-nav .app-nav__sub a:hover{background:var(--card)}
/* Lien de l'en-tête : « Revenir sur le site » avant connexion, souligné au survol comme la navigation */
.head-link{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font:inherit;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer}
.head-link::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right}
.head-link:hover{color:var(--ink)}
.head-link:hover::after{transform:scaleX(1);transform-origin:left}
.head-back{margin-left:auto}
.head-back__short{display:none}
.head-logout{display:block;margin:0}
/* Compte : pastille d'initiales et prénom ; le menu donne les informations, le dossier, le site et la déconnexion */
.acct{position:relative;flex-shrink:0}
.acct__btn{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 12px 4px 4px;border-radius:999px;color:var(--ink);font-size:15px;font-weight:600;list-style:none;cursor:pointer;transition:background-color .2s}
.acct__btn::-webkit-details-marker{display:none}
.acct__btn:hover,.acct[open]>.acct__btn{background:var(--paper)}
.acct__avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--wall);font-family:var(--f-disp);font-size:13px;font-weight:800;letter-spacing:.02em}
.acct__name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct__chev{width:7px;height:7px;margin:0 2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.acct[open] .acct__chev{transform:translateY(2px) rotate(-135deg)}
.acct__panel{position:absolute;top:calc(100% + 10px);right:0;z-index:1100;width:max-content;min-width:260px;max-width:min(360px,calc(100vw - 32px));max-height:calc(100dvh - var(--head-h) - 8px);overflow-y:auto;overscroll-behavior:contain;padding:8px;border-radius:20px;background:var(--paper);box-shadow:0 34px 70px -30px rgba(0,0,0,.4),0 0 0 1px rgba(18,18,18,.05)}
.acct__who{display:grid;gap:3px;margin:0;padding:12px 14px 14px;border-bottom:1px solid var(--line)}
.acct__who strong{font-family:var(--f-disp);font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.acct__who span{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.acct__panel ul{margin:6px 0;padding:0;list-style:none}
.acct__panel a,.acct__out{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 14px;border:0;border-radius:12px;background:none;color:var(--ink);font:inherit;font-size:15px;font-weight:500;text-align:left;text-decoration:none;cursor:pointer;transition:background-color .2s}
.acct__panel a:hover,.acct__out:hover{background:var(--card)}
.acct__panel a[aria-current=page]{font-weight:700}
.acct__panel .head-logout{padding-top:6px;border-top:1px solid var(--line)}
/* Plusieurs dossiers : le dossier ouvert sous le prénom (interligne 1,45 : overflow:hidden ne rogne pas les accents des
   capitales, É ou Ç), et la liste pour passer de l'un à l'autre */
.acct__text{display:grid;min-width:0;text-align:left;line-height:1.2}
.acct__dossier{max-width:180px;overflow:hidden;font-family:var(--f-mono);font-size:11px;font-weight:400;line-height:1.45;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-overflow:ellipsis;white-space:nowrap}
/* Une adresse email se lit telle qu'elle s'écrit : pas de capitales */
.acct__who .acct__email{letter-spacing:.02em;text-transform:none;overflow-wrap:anywhere}
.folder-switch__title{margin:10px 14px 4px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.folder-switch{list-style:none}
/* Écrit en (0,2,0) pour l'emporter sur .acct__panel ul, qui remettait les marges à zéro et collait le filet au dernier dossier */
.acct__panel .folder-switch{margin:0 0 6px;padding:0 0 6px;border-bottom:1px solid var(--line)}
.folder-switch form{margin:0}
.folder-switch__item{position:relative;display:grid;gap:1px;width:100%;min-height:52px;padding:8px 40px 8px 14px;border:0;border-radius:12px;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background-color .2s}
button.folder-switch__item:hover{background:var(--card)}
/* Chaque ligne est positionnée : le contour de focus passe devant la suivante au lieu d'être masqué par son fond */
.folder-switch__item:focus-visible{z-index:1}
/* Le dossier ouvert : son nom au surligneur, comme la rubrique en cours, et la coche. Le fond reste réservé au survol */
.folder-switch__item.is-current{cursor:default}
.folder-switch__item.is-current .folder-switch__name{justify-self:start;margin:0 -2px;padding:0 2px;background:linear-gradient(transparent 58%,var(--marker) 58%)}
.folder-switch__name{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.folder-switch__ref{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.folder-switch__check{position:absolute;right:16px;top:50%;width:12px;height:7px;margin-top:-5px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
/* Dans le panneau du burger : la même liste, les noms alignés sur le titre et les rubriques (le fond déborde dans la marge) */
.app-menu__panel .folder-switch__title{margin:22px 0 6px}
.app-menu__panel .folder-switch{margin:0 -16px}
.app-menu__panel .folder-switch li{border-bottom:0}
.app-menu__panel .folder-switch__item{min-height:56px;padding-left:16px}
/* Burger (celui du site), une fois connecté et sous 1 200 px : deux traits qui se croisent à l'ouverture ; la
   pastille dit qu'une réponse attend */
.app-menu{display:none}
.burger{position:relative;display:block;width:48px;height:48px;border-radius:12px;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.burger::-webkit-details-marker{display:none}
.burger::before,.burger>span:first-child{content:"";position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--ink)}
.burger::before{top:19px}
.burger>span:first-child{top:27px}
.app-menu[open] .burger::before{top:23px;transform:rotate(45deg)}
.app-menu[open] .burger>span:first-child{top:23px;transform:rotate(-45deg)}
.app-menu__dot{position:absolute;top:5px;right:3px;width:9px;height:9px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px var(--wall)}
.app-menu[open] .app-menu__dot{display:none}
/* Panneau plein écran sous l'en-tête, comme le menu mobile du site */
.app-menu__panel{position:fixed;left:0;right:0;top:var(--head-h);z-index:1100;height:calc(100dvh - var(--head-h));padding:8px var(--gutter) calc(28px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;background:var(--wall);border-top:1px solid var(--line)}
.app-menu__who{margin:10px 0 6px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.app-menu__who strong{font-weight:500;color:var(--ink)}
.app-menu__panel ul{margin:0;padding:0;list-style:none}
.app-menu__panel li{border-bottom:1px solid var(--line)}
.menu-row{display:flex;align-items:center;gap:14px;min-height:76px;padding:12px 0;color:var(--ink);text-decoration:none}
.menu-row__ico{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px rgba(18,18,18,.05)}
.menu-row__ico .icon{width:22px;height:22px}
.menu-row__text{display:grid;flex:1;gap:3px;min-width:0}
.menu-row__label{justify-self:start;font-family:var(--f-disp);font-size:20px;font-weight:700;line-height:1.2;letter-spacing:-.02em}
.menu-row__text small{font-size:15px;line-height:1.35;color:var(--soft)}
.menu-row__go{flex:none;width:9px;height:9px;margin:0 6px 0 4px;border-top:2px solid currentColor;border-right:2px solid currentColor;opacity:.55;transform:rotate(45deg)}
.menu-row:hover .menu-row__ico{background:var(--card)}
.menu-row[aria-current=page] .menu-row__ico{background:var(--marker);box-shadow:none}
.menu-row[aria-current=page] .menu-row__label{margin:0 -2px;padding:0 2px;background:linear-gradient(transparent 58%,var(--marker) 58%)}
.app-menu__panel .nav-badge{height:22px;font-size:11px}
.tabbar{display:none}
@media (max-width:959px){
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:1050;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:6px max(6px,env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-right));background:var(--night);box-shadow:0 -12px 30px -18px rgba(0,0,0,.5)}
  .tabbar a,.tabbar button{position:relative;display:grid;justify-items:center;align-content:center;gap:3px;min-height:58px;padding:4px 2px;border:0;border-radius:14px;background:none;color:var(--night-text);font:inherit;font-size:12.5px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .tabbar .icon{width:23px;height:23px}
  .tabbar a:hover,.tabbar button:hover{color:var(--night-text);background:var(--night-card)}
  .tabbar a[aria-current=page]{background:var(--marker);color:var(--ink)}
  .tabbar :focus-visible{outline-color:var(--marker)}
  .tabbar__badge{position:absolute;top:4px;left:calc(50% + 6px);display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--marker);color:var(--ink);font-family:var(--f-mono);font-size:11px;box-shadow:0 0 0 2px var(--night)}
  .tabbar a[aria-current=page] .tabbar__badge{background:var(--ink);color:var(--marker);box-shadow:0 0 0 2px var(--marker)}
  .portal-body:not(.portal-body--guest){padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .portal-body:not(.portal-body--guest) .to-top{bottom:calc(84px + env(safe-area-inset-bottom))}
  .portal-body:not(.portal-body--guest) .app-menu__panel{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  body:has(.app-menu[open]) .tabbar [data-open-menu]{background:var(--marker);color:var(--ink)}
}
.app-menu__end{display:flex;flex-direction:column;gap:12px;padding-top:24px}
.app-menu__end>*,.app-menu__end .btn{width:100%}
.btn--paper{background:var(--paper);color:var(--ink);box-shadow:none}
.btn--paper:hover{background:var(--paper);color:var(--ink);box-shadow:0 14px 24px -16px rgba(0,0,0,.35)}

/* 7 ─ Pied de page de l'espace client -----------------------------------------------------------------
   Un bloc nuit court : le logo blanc, l'aide (une demande une fois connecté, l'adresse avant), les liens utiles de
   l'espace, puis la ligne légale et le bouton de pause des animations. Rien du pied commercial du site. */
.site-footer{margin-top:auto;padding-block:clamp(48px,6vw,72px) 24px;background:var(--night);color:var(--night-text)}
.site-footer a{color:inherit;text-decoration:none}
.site-footer a:hover{color:inherit}
.app-foot{display:grid;gap:36px 48px}
@media (min-width:900px){.app-foot{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)}}
.app-foot__brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.app-foot__brand>a{display:inline-flex;align-items:center;min-height:44px}
.app-foot__brand img{width:134px;height:28px}
.app-foot__brand p{max-width:320px;margin:0;font-size:15px;color:var(--night-muted)}
.app-foot__social{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 0;padding:0;list-style:none}
.app-foot__social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--night-line);color:var(--night-soft);transition:background-color .25s,color .25s,box-shadow .25s}
.app-foot__social a:hover{background:var(--night-text);color:var(--ink);box-shadow:none}
.app-foot__k{margin:0 0 10px;font-family:var(--f-mono);font-size:11px;font-weight:400;letter-spacing:.06em;line-height:1.3;text-transform:uppercase;color:var(--night-muted)}
.app-foot__help{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.app-foot__help .app-foot__k{margin-bottom:4px}
.site-footer .app-foot__cta{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--f-disp);font-size:clamp(22px,.8vw + 15px,28px);font-weight:700;letter-spacing:-.02em;color:var(--night-text);overflow-wrap:anywhere}
.site-footer .app-foot__cta:hover{color:#fff}
.site-footer .app-foot__mail{font-size:clamp(19px,.6vw + 14px,24px);text-decoration:underline;text-decoration-color:var(--night-line);text-decoration-thickness:2px;text-underline-offset:5px}
.site-footer .app-foot__mail:hover{text-decoration-color:var(--night-text)}
.app-foot__cta:hover .arr{transform:translateX(4px)}
.app-foot__help p{max-width:380px;margin:0;font-size:14px;line-height:1.5;color:var(--night-muted);text-wrap:pretty}
.btn-copy{min-height:44px;margin-top:10px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--night-text);box-shadow:inset 0 0 0 1px var(--night-line);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .25s,color .25s}
.btn-copy:hover{background:var(--night-text);color:var(--ink);box-shadow:none}
.app-foot__links ul{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.site-footer .app-foot__links a{display:inline-flex;align-items:center;gap:6px;min-height:40px;color:var(--night-soft);transition:color .2s}
.site-footer .app-foot__links a:hover{color:#fff}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;margin-top:48px;padding-top:20px;border-top:1px solid var(--night-line);font-family:var(--f-mono);font-size:11px;color:var(--night-muted)}
.foot-legal nav{display:flex;flex-wrap:wrap;gap:4px 20px}
.site-footer .foot-legal a{display:inline-flex;align-items:center;min-height:32px;transition:color .2s}
.site-footer .foot-legal a:hover{color:var(--night-text)}
.foot-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
/* Au doigt : les liens du pied grandissent jusqu'à 44 px */
@media (pointer:coarse){.site-footer :is(.app-foot__links a,.foot-legal a){min-height:44px}}
/* Bouton de pause des animations (boucles) : n'existe que si le système en autorise */
.motion-btn{display:none;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--night-line);border-radius:999px;background:transparent;color:var(--night-soft);font-family:var(--f-body);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.motion-btn:hover{border-color:#45433E;color:var(--night-text)}
.motion-btn svg{width:12px;height:12px;fill:currentColor}
.motion-btn .i-play{display:none}
.motion-btn[aria-pressed="true"] .i-play{display:block}
.motion-btn[aria-pressed="true"] .i-pause{display:none}

/* 8 ─ Haut de page : plaque de laiton en bas à droite (app.js) -----------------------------------------
   Médaillon sombre cerclé de laiton ; sa bague se remplit avec la lecture (--p, de 0 à 1). Au survol ou au
   clavier, le cartel se déplie : « Haut de page » et la section en cours. */
.to-top{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:1085;display:flex;align-items:center;border-radius:999px;background:linear-gradient(160deg,#2B2822,#131210);box-shadow:0 22px 36px -16px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(184,155,98,.42);color:var(--brass-hi);text-decoration:none;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .3s,visibility 0s .3s,transform .5s var(--ease)}
.to-top.is-shown{opacity:1;visibility:visible;transform:none;transition:opacity .3s,visibility 0s,transform .5s var(--ease)}
.to-top:hover,.to-top:focus-visible{color:var(--brass-hi)}
body:has(.app-menu[open],dialog[open]) .to-top{opacity:0;visibility:hidden}
.to-top-plate{display:flex;flex-direction:column;justify-content:center;gap:4px;max-width:0;overflow:hidden;opacity:0;white-space:nowrap;transition:max-width .5s var(--ease),padding .5s var(--ease),opacity .2s}
.to-top-label{font-family:var(--f-body);font-weight:600;font-size:14px;line-height:1.1;color:var(--brass-hi)}
.to-top-where{max-width:210px;overflow:hidden;text-overflow:ellipsis;font-family:var(--f-mono);font-size:9.5px;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--brass)}
.to-top-dial{position:relative;display:grid;place-items:center;flex:none;width:58px;height:58px;border-radius:50%;overflow:hidden}
/* Bague : piste de laiton terni, remplie de laiton clair au fil de la lecture */
.to-top-dial::before{content:"";position:absolute;inset:5px;border-radius:50%;background:conic-gradient(var(--brass-hi) calc(var(--p,0) * 1turn),rgba(184,155,98,.3) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px))}
/* Deux flèches gravées : la seconde attend sous la première (tour d'ascenseur au survol) */
.to-top-dial svg{grid-area:1 / 1;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.to-top-dial svg+svg{transform:translateY(170%)}
@media (hover:hover) and (pointer:fine){.to-top:hover .to-top-plate{max-width:250px;padding-left:24px;opacity:1}}
.to-top:focus-visible .to-top-plate{max-width:250px;padding-left:24px;opacity:1}
@media (max-width:760px){
  .to-top{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}
  .to-top-dial{width:54px;height:54px}
}

/* Mise en page générale : mêmes marges avant et après connexion (le choix du dossier s'affiche dans les deux cas) */
.portal-main{display:block;max-width:1440px;margin-inline:auto;padding:clamp(28px,3.5vw,48px) var(--gutter) clamp(64px,8vw,104px)}

/* 10 ─ Écrans invités : connexion, code, inscription, choix du dossier ------------------------------
   Le héros de la page « Espace client » du site, le formulaire à la place des boutons d'appel. */
.gate{padding-block:clamp(4px,2vw,24px) 0}
.gate__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
@media (min-width:1000px){.gate__grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px}}
.gate__main{display:flex;flex-direction:column;align-items:flex-start;gap:22px;min-width:0}
.gate__head{display:flex;flex-direction:column;align-items:flex-start;gap:22px;margin-bottom:clamp(28px,4vw,48px)}
.gate h1{max-width:12em;font-size:clamp(42px,4.4vw + 12px,84px);line-height:.94;letter-spacing:-.04em}
.gate h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--marker) 62%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.gate__lead{max-width:36em;margin:0;font-size:clamp(17px,.6vw + 13px,20px);line-height:1.55;color:var(--soft)}
.gate__form{display:flex;flex-direction:column;align-items:flex-start;gap:18px;width:100%;max-width:460px;margin-top:6px}
.gate__form .field{width:100%}
.gate__trust{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;color:var(--muted);text-wrap:pretty}
.gate__trust .icon{flex:none;color:var(--ok)}
.gate__alt{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;margin:0;padding-top:18px;border-top:1px solid var(--line);width:100%;max-width:460px;color:var(--soft)}
.gate__help{max-width:34em;margin:0;font-size:14px;color:var(--muted)}
.gate__tip{display:flex;align-items:flex-start;gap:10px;max-width:460px;margin:0;padding:12px 16px;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font-size:15px;line-height:1.5;color:var(--text)}
.gate__tip .icon{flex:none;margin-top:2px}
.gate__side{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
/* Lien sur deux lignes (petit écran) : la flèche suit le texte au lieu de rester collée au bord */
.gate__side>.link{display:inline-block;padding-block:10px;text-align:center}

/* Maquette « Exemple d'écran » (e2/espace.css du site) : une niche, un navigateur, un écran de l'espace */
.client-demo{position:relative;display:flex;flex-direction:column;width:100%;padding:clamp(18px,3vw,40px);border-radius:28px;background:var(--niche)}
.demo-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;border-radius:14px 14px 0 0;background:var(--band);box-shadow:0 1px 0 var(--line)}
.demo-bar>span{width:9px;height:9px;border-radius:50%;background:#CFCBC2}
.demo-bar>div{display:flex;align-items:center;gap:6px;flex:1;min-width:0;margin-left:8px;padding:5px 10px;border-radius:999px;background:var(--paper);font-family:var(--f-mono);font-size:11px;color:var(--soft);white-space:nowrap;overflow:hidden}
.demo-lock{position:relative;flex-shrink:0;width:8px;height:7px;margin-top:3px;border-radius:1.5px;background:var(--ok)}
.demo-lock::before{content:"";position:absolute;left:1.5px;top:-4px;width:5px;height:5px;border:1.5px solid var(--ok);border-bottom:0;border-radius:3px 3px 0 0;box-sizing:border-box}
.client-demo-screen{display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:0 0 14px 14px;background:var(--paper);box-shadow:0 34px 50px -34px rgba(0,0,0,.45)}
.client-demo-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.client-demo-head strong{font-family:var(--f-disp);font-weight:700;font-size:17px;letter-spacing:-.02em;color:var(--ink)}
.client-demo-head small{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;color:var(--muted)}
.client-demo-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.client-demo-kpis>div{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px;border-radius:10px;background:var(--card)}
.client-demo-kpis small{font-family:var(--f-mono);font-size:9px;line-height:1.3;text-transform:uppercase;color:var(--muted)}
.client-demo-kpis strong{font-family:var(--f-disp);font-weight:800;font-size:clamp(18px,1vw + 12px,24px);letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.client-demo-kpis .is-up{font-family:var(--f-mono);font-size:11px;color:var(--ok)}
.client-demo-bars{display:flex;align-items:flex-end;gap:5px;height:88px;padding-bottom:1px;border-bottom:1px solid var(--line)}
.client-demo-bars span{flex:1;height:34%;border-radius:3px 3px 0 0;background:var(--ink);transform-origin:50% 100%}
.client-demo-bars span:nth-child(2){height:42%}.client-demo-bars span:nth-child(3){height:38%}.client-demo-bars span:nth-child(4){height:51%}.client-demo-bars span:nth-child(5){height:57%}
.client-demo-bars span:nth-child(6){height:63%}.client-demo-bars span:nth-child(7){height:60%}.client-demo-bars span:nth-child(8){height:72%}.client-demo-bars span:nth-child(9){height:78%}
.client-demo-bars span:last-child{height:86%;background:var(--marker);box-shadow:inset 0 0 0 1.5px var(--ink)}
.client-demo-rows{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.client-demo-rows li{overflow-x:visible;overflow-y:clip;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--rule);font-size:13px;color:var(--ink)}
.client-demo-rows small{font-family:var(--f-mono);font-size:10px;color:var(--muted);white-space:nowrap}
.demo-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--line)}
.demo-dot.is-ok{background:var(--ok)}
.demo-dot.is-new{background:var(--ink)}
.client-demo-note{margin:12px 0 0;font-family:var(--f-mono);font-size:10px;text-transform:uppercase;text-align:center;color:var(--muted)}
@media (max-width:480px){.client-demo-kpis{grid-template-columns:1fr 1fr}.client-demo-kpis>div:last-child{grid-column:1 / -1}}

/* Inscription : la page Contact du site, formulaire sur papier et colonne « comment ça se passe » */
.signup-layout{display:grid;gap:32px;align-items:start}
@media (min-width:1000px){.signup-layout{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:48px}}
.signup-card{min-width:0;padding:clamp(22px,3vw,40px);border-radius:28px;background:var(--paper);box-shadow:0 40px 80px -48px rgba(0,0,0,.35),0 0 0 1px rgba(18,18,18,.04);scroll-margin-top:calc(var(--head-h) + 16px)}
.signup-card>h2{font-size:clamp(24px,1vw + 18px,30px);font-weight:800;letter-spacing:-.03em}
.signup-card>p{margin:8px 0 24px;color:var(--soft)}
.signup-card>.btn--lg{margin-top:4px}
.signup-progress{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 28px;padding:0;list-style:none}
.signup-progress li{display:grid;gap:8px;font-family:var(--f-mono);font-size:10px;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.signup-progress li::before{content:"";height:3px;border-radius:2px;background:var(--line)}
.signup-progress li.is-done::before,.signup-progress li.is-current::before{background:var(--ink)}
.signup-progress li.is-current{color:var(--ink)}
.signup{display:grid;gap:24px}
.signup-step{display:grid;gap:16px;min-width:0;margin:0;padding:0;border:0}
/* Titre d'étape à gauche, compteur à droite : pas d'étiquette posée au-dessus du titre */
.signup-step legend{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;width:100%;margin:0 0 6px;padding:0;font-family:var(--f-disp);font-size:clamp(22px,.8vw + 17px,26px);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.signup-step__count{order:2;font-family:var(--f-mono);font-size:10px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.signup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.signup-grid--postal{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
.signup-kind{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.signup-company{display:grid;gap:16px}
.signup-consent{font-size:14px}
.address-field .suggestions{top:84px}
.signup-nav{display:flex;justify-content:flex-end;gap:10px;padding-top:22px;border-top:1px solid var(--line)}
.signup-nav [data-signup-back]{margin-right:auto}
.signup-code{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:460px}
.signup-code .field{width:100%}
.signup-code-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.signup-help{margin:18px 0 0;font-size:14px;color:var(--muted)}
.signup-aside{display:flex;flex-direction:column;gap:18px;min-width:0}
@media (min-width:1000px){.signup-aside{position:sticky;top:calc(var(--head-h) + 20px)}}
.signup-aside h2{font-size:clamp(26px,1.2vw + 18px,34px);font-weight:800;line-height:1;letter-spacing:-.04em}
.steps-next{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border-top:1px solid var(--ink);counter-reset:next-step}
.steps-next li{position:relative;display:flex;flex-direction:column;gap:2px;padding:14px 0 14px 42px;border-bottom:1px solid var(--line);counter-increment:next-step}
.steps-next li::before{content:counter(next-step);position:absolute;left:0;top:14px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--wall);font-family:var(--f-mono);font-size:11px}
.steps-next strong{font-size:16px;color:var(--ink)}
.steps-next p{margin:0;font-size:14px;line-height:1.5;color:var(--soft)}
/* Étroit : quatre libellés ne tiennent plus côte à côte ; les barres restent, le titre de l'étape dit où l'on est */
@media (max-width:700px){.signup-progress__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (max-width:560px){
  .signup-grid,.signup-grid--postal,.signup-kind{grid-template-columns:minmax(0,1fr)}
  .signup-nav .btn{flex:1}
  .signup-nav [data-signup-back]{flex:0 0 auto;margin-right:0}
}

/* Choix d'une carte (type de structure, type de demande) : papier cerclé, encre et fond clair une fois choisie */
.type-card{gap:12px;padding:14px 16px;border:0;border-radius:16px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .2s,background-color .2s}
.type-card:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.type-card:has(input:checked){background:var(--warn-soft);box-shadow:inset 0 0 0 2px var(--ink)}
.type-card:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:3px}
.type-card__icon{border-radius:12px;background:var(--card);color:var(--ink)}
.type-card:has(input:checked) .type-card__icon{background:var(--ink);color:var(--wall)}
.type-card__text small{font-size:13px;color:var(--muted)}

/* Choix du dossier : une ligne par client, la référence en mono pour distinguer deux homonymes */
.gate--narrow{max-width:760px}
.folder-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.folder-list form{margin:0}
.folder{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 16px;width:100%;min-height:76px;padding:16px 24px;border:0;border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:translate .4s var(--ease),box-shadow .4s var(--ease)}
.folder:hover{translate:0 -3px;box-shadow:var(--lift),0 0 0 1px rgba(18,18,18,.04)}
.folder__name{font-family:var(--f-disp);font-size:20px;font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere}
.folder__ref{grid-column:1;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.folder .arr{grid-column:2;grid-row:1 / span 2;font-size:20px}

/* Support ou rendez-vous sans contrat : les issues possibles, en lignes */
.choice-rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.choice-rows li{display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px;padding:22px 0;border-bottom:1px solid var(--line)}
.choice-rows li>div{flex:1 1 320px;min-width:0}
.choice-rows h2{font-size:20px}
.choice-rows p{margin:6px 0 0;max-width:60ch;color:var(--soft)}
.choice-more{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;margin:24px 0 0;color:var(--soft)}
.choice-more .link{display:inline-block;padding-block:10px}
@media (max-width:560px){.choice-rows .btn{width:100%}}

/* 11 ─ Accueil : tableau de bord ----------------------------------------------------------------------
   La maquette « Exemple d'écran » du site à l'échelle réelle : tuiles de chiffres, lignes à pastilles,
   barres encre dont l'étape en cours passe au surligneur. */
/* Le bonjour, puis ce qui demande de l'attention (incident, appel, points à faire), puis les tuiles : une seule
   colonne principale, dans l'ordre de lecture, partout. L'écran se place à côté sur grand écran (collant pendant
   qu'on parcourt la liste), à la suite sur petit écran ; sans écran, la colonne prend toute la largeur. */
.dash-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:28px 56px;align-items:start}
.dash-main{display:flex;flex-direction:column;gap:28px;min-width:0;container-type:inline-size}
.dash-main>*{margin:0}
.dash-main .portal-section-title{margin:0 0 16px}
.dash-head{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.dash-head__text{min-width:0;width:100%}
.dash-head h1{font-size:40px}
.dash-head__text>p{margin:12px 0 0;max-width:72ch;color:var(--soft)}
.dash-head__text>p.dash-status{display:flex;align-items:baseline;gap:10px;margin-top:14px;color:var(--ink)}
.dash-head__actions{display:flex;flex-wrap:wrap;gap:10px}
.portal-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}
@container (max-width:720px){.portal-overview{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dash-hero:not(:has(>.screen-stage)) .dash-head{flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px}
.dash-hero:not(:has(>.screen-stage)) .dash-head__text{flex:1 1 560px;width:auto}
@media (min-width:1100px){
  .dash-hero:has(>.screen-stage){grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
}
@media (min-width:1100px) and (min-height:760px){.dash-hero>.screen-stage{position:sticky;top:calc(var(--head-h) + 24px)}}
.dash-head h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--marker) 62%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.screen-stage{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:clamp(16px,2.2vw,32px) clamp(16px,2.2vw,32px) clamp(10px,1.4vw,18px);border-radius:28px;background:var(--niche)}
.screen{display:flex;flex-direction:column;gap:14px;width:100%;padding:20px;border-radius:14px;background:var(--paper);box-shadow:0 34px 50px -34px rgba(0,0,0,.45);container:screen / inline-size}
.screen__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.screen__head h2{min-width:0;font-size:19px;font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere}
.screen__meta{font-family:var(--f-mono);font-size:10px;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.screen__kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.screen__kpis>div{display:flex;flex-direction:column;gap:3px;min-width:0;padding:12px;border-radius:10px;background:var(--card);container-type:inline-size}
.screen__label{font-family:var(--f-mono);font-size:9px;line-height:1.3;text-transform:uppercase;color:var(--muted)}
.screen__kpis strong{--fit:clamp(20px,1vw + 13px,27px);overflow:hidden;padding-bottom:.05em;font-family:var(--f-disp);font-size:var(--fit);font-weight:800;line-height:1.1;letter-spacing:-.03em;color:var(--ink);text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Valeur longue (ici et dans les tuiles de la Visibilité et d'un site, section 15) : à la mesure de la tuile (la tuile est
   un conteneur) et de sa longueur (data-len, 7 à 17 caractères, fit_len() ; 0,66 em par caractère en Funnel Display 800),
   jamais coupée ; les points de suspension ne restent qu'en dernier recours. --fit : la taille ordinaire de la valeur */
:is(.screen__kpis strong,.kpi__value)[data-len="7"]{font-size:min(var(--fit),21.6cqi)}
:is(.screen__kpis strong,.kpi__value)[data-len="8"]{font-size:min(var(--fit),18.9cqi)}
:is(.screen__kpis strong,.kpi__value)[data-len="9"]{font-size:min(var(--fit),16.8cqi)}
:is(.screen__kpis strong,.kpi__value)[data-len="10"]{font-size:min(var(--fit),15.2cqi)}
:is(.screen__kpis strong,.kpi__value)[data-len="11"]{font-size:min(var(--fit),13.8cqi)}
:is(.screen__kpis strong,.kpi__value)[data-len="12"]{font-size:min(var(--fit),12.6cqi)}
:is(.screen__kpis strong,.kpi__value)[data-len="13"]{font-size:min(var(--fit),11.7cqi)}
:is(.screen__kpis strong,.kpi__value)[data-len="14"]{font-size:min(var(--fit),10.8cqi)}
:is(.screen__kpis strong,.kpi__value)[data-len="15"]{font-size:min(var(--fit),10.1cqi)}
:is(.screen__kpis strong,.kpi__value)[data-len="16"]{font-size:min(var(--fit),9.5cqi)}
:is(.screen__kpis strong,.kpi__value)[data-len="17"]{font-size:min(var(--fit),9cqi)}
.screen__delta{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.screen__delta.is-up{color:var(--ok)}
.screen__delta.is-down{color:var(--danger)}
.screen__bars{display:flex;align-items:flex-end;gap:5px;height:104px;margin:0;padding:0 0 1px;list-style:none;border-bottom:1px solid var(--line)}
.screen__bars>span{flex:1;height:2px;border-radius:3px 3px 0 0;background:var(--ink);transform-origin:50% 100%}
.screen__bars>span:last-child{background:var(--marker);box-shadow:inset 0 0 0 1.5px var(--ink)}
.screen__bars>span[data-p="5"]{height:5%}.screen__bars>span[data-p="10"]{height:10%}.screen__bars>span[data-p="15"]{height:15%}.screen__bars>span[data-p="20"]{height:20%}.screen__bars>span[data-p="25"]{height:25%}.screen__bars>span[data-p="30"]{height:30%}.screen__bars>span[data-p="35"]{height:35%}.screen__bars>span[data-p="40"]{height:40%}.screen__bars>span[data-p="45"]{height:45%}.screen__bars>span[data-p="50"]{height:50%}.screen__bars>span[data-p="55"]{height:55%}.screen__bars>span[data-p="60"]{height:60%}.screen__bars>span[data-p="65"]{height:65%}.screen__bars>span[data-p="70"]{height:70%}.screen__bars>span[data-p="75"]{height:75%}.screen__bars>span[data-p="80"]{height:80%}.screen__bars>span[data-p="85"]{height:85%}.screen__bars>span[data-p="90"]{height:90%}.screen__bars>span[data-p="95"]{height:95%}.screen__bars>span[data-p="100"]{height:100%}
/* Projet en création : cinq marches, le fait à l'encre, l'étape en cours au surligneur, la suite en sable */
.screen__bars--steps{align-items:flex-end;gap:6px;height:auto;border-bottom:0}
.screen__bars--steps li{display:flex;flex:1;flex-direction:column;justify-content:flex-end;gap:8px;min-width:0}
.screen__bars--steps li>span{display:block;border-radius:3px 3px 0 0;background:var(--line)}
.screen__bars--steps li:nth-child(1)>span{height:34px}.screen__bars--steps li:nth-child(2)>span{height:48px}.screen__bars--steps li:nth-child(3)>span{height:62px}
.screen__bars--steps li:nth-child(4)>span{height:76px}.screen__bars--steps li:nth-child(5)>span{height:90px}
.screen__bars--steps li.is-done>span{background:var(--ink)}
.screen__bars--steps li.is-current>span{background:var(--marker);box-shadow:inset 0 0 0 1.5px var(--ink)}
.screen__bars--steps small{overflow:hidden;padding-top:6px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:9px;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);text-overflow:ellipsis;white-space:nowrap}
.screen__bars--steps li.is-current small{color:var(--ink)}
.screen__step-n{display:none}
.screen__rows{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.screen__rows li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:40px;padding:8px 0;border-top:1px solid var(--rule);font-size:14px;color:var(--ink)}
.screen__rows a{font-weight:600;color:var(--ink)}
.screen__rows small{font-family:var(--f-mono);font-size:10.5px;color:var(--muted);white-space:nowrap}
.screen__more.link{display:inline-block;padding-block:10px;text-align:center}
@media (max-width:480px){.screen__kpis{grid-template-columns:1fr 1fr}.screen__kpis>div:last-child{grid-column:1 / -1}.screen{padding:16px}}
/* Projet sur un écran étroit (colonne de droite, téléphone) : l'étape en cours sur toute la largeur, l'avancement et la
   mise en ligne côte à côte dessous ; chaque valeur garde une taille de chiffre */
@container screen (max-width:560px){
  .screen__kpis--project{grid-template-columns:1fr 1fr}
  .screen__kpis--project>div:first-child{grid-column:1 / -1}
  .screen__kpis--project>div:last-child{grid-column:auto}
}
/* Noms d'étape sous les barres : en 9 px quand « Développement » tient entier (≈ 445 px de contenu), en 8 px sans espacement
   jusqu'à 400 px ; plus étroit, le numéro de chaque étape plutôt qu'un nom coupé (« Dévelo… »). Le nom de l'étape en cours
   est dans sa tuile, et tous les noms restent lus par les lecteurs d'écran */
@container screen (max-width:460px){.screen__bars--steps small{font-size:8px;letter-spacing:0}}
@container screen (max-width:400px){
  .screen__step-n{display:inline}
  .screen__step-l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .screen__bars--steps small{text-align:center}
}
/* Très étroit (petit téléphone) : les trois tuiles l'une sous l'autre, la date aussi à sa taille */
@container screen (max-width:300px){.screen__kpis--project{grid-template-columns:minmax(0,1fr)}}
/* Pastilles d'état : fait, nouveau (anneau qui pulse), à surveiller, en retard, devis à accepter */
.dot{position:relative;display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--line)}
.dot--ok{background:var(--ok)}
.dot--new{background:var(--ink)}
.dot--warn{background:var(--warn)}
.dot--danger{background:var(--danger)}
.dot--quote{background:var(--marker);box-shadow:inset 0 0 0 1.5px var(--ink)}
.dash-status .dot{transform:translateY(-1px)}
/* Tuiles de chiffres : l'aperçu du dossier */
.portal-overview>a{display:flex;flex-direction:column;gap:6px;min-width:0;padding:16px 18px 18px;border-radius:14px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04);color:var(--ink);text-decoration:none;transition:translate .4s var(--ease),box-shadow .4s var(--ease)}
.portal-overview>a:hover{translate:0 -3px;box-shadow:var(--lift),0 0 0 1px rgba(18,18,18,.04)}
.overview__label{font-family:var(--f-mono);font-size:11px;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.overview__value{font-family:var(--f-disp);font-size:34px;font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.overview__sub{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px;color:var(--soft)}
/* Titres de groupe : le séparateur fort du site (filet encre au-dessus) */
.portal-section-title{align-items:baseline;margin:48px 0 16px;padding-top:16px;border-top:1px solid var(--ink)}
.portal-section-title h2{display:flex;align-items:baseline;gap:10px}
.section-count{display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 7px;border-radius:999px;background:var(--paper);font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:0;color:var(--soft);transform:translateY(-3px)}
/* Ce qui vous attend : lignes « pastille / libellé / action », comme la maquette */
.dash-rows{margin:0;padding:0;list-style:none;overflow:hidden;border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04)}
.dash-rows li+li{border-top:1px solid var(--rule)}
.dash-rows a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:64px;padding:12px 22px;color:var(--ink);text-decoration:none;transition:background-color .2s}
.dash-rows a:hover{background:var(--card)}
.dash-rows a:focus-visible{outline-offset:-3px;border-radius:20px}
.dash-rows__main{display:grid;gap:2px;min-width:0}
.dash-rows__main strong{font-weight:600}
.dash-rows__main small{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0;font-size:13px;color:var(--muted)}
.dash-rows__main small>span:not(.badge){min-width:0;overflow-wrap:anywhere}
/* Au-delà de six points : la suite se déplie sous la liste */
.dash-more{margin:10px 0 0;padding:0;border-top:0;font-size:inherit;color:inherit}
.dash-more>summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;font-weight:600;color:var(--ink);list-style:none;cursor:pointer}
.dash-more>summary::-webkit-details-marker{display:none}
.dash-more>summary::after{content:"";width:12px;height:12px;background:linear-gradient(currentColor,currentColor) center/12px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 12px no-repeat}
.dash-more[open]>summary::after{transform:rotate(45deg)}
.dash-more[open]>summary{margin-bottom:10px}
.dash-rows__cta{display:inline-flex;align-items:center;gap:8px;font-weight:600;white-space:nowrap}
@container (max-width:600px){
  .dash-rows a{padding:12px 16px;gap:12px}
  .dash-rows__verb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
.dash-rows a:hover .arr{transform:translateX(4px)}
.dash-empty{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;padding:18px 24px;border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04)}
.dash-empty p{margin:0;color:var(--soft)}
/* Projets : titre et adresse, étape en pastille, frise en barres, message, actions */
.portal-projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,560px),1fr));gap:16px}
.portal-projects .project{display:flex;flex-direction:column;gap:18px;min-width:0;margin:0;padding:22px 24px}
.project__head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 16px;margin:0 0 16px}
.portal-projects .project__head{margin:0}
.project__title{min-width:0}
.project__title h3{font-size:22px;letter-spacing:-.025em;overflow-wrap:anywhere}
.project__title h3 a{color:var(--ink)}
.project__url{display:inline-block;margin-top:6px;font-family:var(--f-mono);font-size:11px;color:var(--muted);text-decoration:none;overflow-wrap:anywhere}
.project__url:hover{color:var(--ink);text-decoration:underline}
@media (pointer:coarse){.project__url,.screen__rows a{display:inline-flex;align-items:center;min-height:44px}}
.project__state{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.project__pct{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.project__msg{padding:14px 16px;border:0;border-radius:14px;background:var(--card);color:var(--soft)}
.portal-projects .project__msg{margin:0}
.project__foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:auto;padding-top:16px;border-top:1px solid var(--rule)}
.project__launch{margin-left:auto;font-size:13px;color:var(--muted)}
/* Frise d'avancement : barres encre pour le fait, surligneur cerclé d'encre pour l'étape en cours
   (remplie d'encre à hauteur de son avancement), sable pour la suite ; vert une fois en ligne */
.track{gap:6px}
.track li{padding-top:16px;font-size:13px;font-weight:500;line-height:1.3;color:var(--muted)}
.track li::before{height:8px;border-radius:4px;background:var(--line)}
.track li.is-done{color:var(--soft)}
.track li.is-done::before{background:var(--ink)}
.track li.is-current{color:var(--ink);font-weight:700}
.track li.is-current::before{background:linear-gradient(90deg,var(--ink) 0 var(--fill,50%),var(--marker) var(--fill,50%));box-shadow:inset 0 0 0 1.5px var(--ink)}
.track--online li::before{background:var(--ok)!important;box-shadow:none!important}
.track--paused li::before{background:var(--line-strong)!important;box-shadow:none!important}
/* Aide et surveillance, côte à côte */
.home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:48px;align-items:start}
.home-grid>:only-child{grid-column:1 / -1}
.home-card{min-width:0;padding:22px 24px;border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04)}
.home-card__head{margin-bottom:16px}
.home-card__head h2{font-size:22px}
.home-card__head p{margin:4px 0 0;font-size:14px;color:var(--muted);text-wrap:pretty}
.home-card__empty{margin:0;color:var(--soft)}
.home-card__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.home-hello{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:24px 56px;align-items:end;margin:0 0 8px}
.home-hello>.call-next{margin:0;flex-direction:column;align-items:stretch;gap:14px}
.home-hello .call-next__text{flex:none}
.home-hello .dash-head h1{font-size:clamp(36px,4vw,56px)}
.dash-head__text>p.home-lead{margin-top:14px;font-size:21px;line-height:1.45;color:var(--ink)}
.dash-head__text>p.home-file{margin-top:8px;font-size:15px}
.home-steps{display:grid;gap:14px;margin:0;padding:0;list-style:none;counter-reset:step}
.home-steps>li{counter-increment:step}
.home-steps a{display:grid;grid-template-columns:60px minmax(0,1fr) auto;align-items:center;gap:20px;padding:22px 24px;border-radius:24px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.05);color:var(--ink);text-decoration:none;transition:box-shadow .2s}
.home-steps a::before{content:counter(step);display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--marker);font-family:var(--f-disp);font-size:28px;font-weight:800;color:var(--ink)}
.home-steps a:hover{color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.home-steps__text{min-width:0}
.home-steps strong{display:block;font-family:var(--f-disp);font-size:22px;font-weight:700;line-height:1.25;letter-spacing:-.02em}
.home-steps__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:6px;font-size:15px;color:var(--soft)}
.home-steps .home-steps__go{min-height:56px;padding:0 26px;font-size:17px;white-space:nowrap}
.home-steps+.dash-more{margin-top:16px}
.home-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.home-tile{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;min-height:200px;padding:22px;border-radius:24px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.05);color:var(--ink);text-decoration:none;transition:box-shadow .2s}
.home-tile:hover{color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.home-tile__ico{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:var(--card)}
.home-tile__ico .icon{width:26px;height:26px}
.home-tile__name{font-family:var(--f-disp);font-size:22px;font-weight:800;line-height:1.2;letter-spacing:-.02em}
.home-tile__text{font-size:15px;line-height:1.45;color:var(--soft)}
.home-tile__state{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px;font-size:15px;font-weight:600;overflow-wrap:anywhere}
.home-tile__count{position:absolute;top:18px;right:18px;display:grid;place-items:center;min-width:32px;height:32px;padding:0 10px;border-radius:999px;background:var(--ink);color:var(--wall);font-family:var(--f-mono);font-size:13px}
.home-help{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;margin-top:48px;padding:26px 28px;border-radius:24px;background:var(--card)}
.home-help h2{margin:0;font-size:24px}
.home-help p{margin:6px 0 0;color:var(--soft)}
.home-help__actions{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:1100px){.home-hello{grid-template-columns:minmax(0,1fr)}.home-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .dash-head__text>p.home-lead{font-size:18px}
  .home-steps a{grid-template-columns:48px minmax(0,1fr);gap:14px;padding:18px}
  .home-steps a::before{width:48px;height:48px;font-size:22px}
  .home-steps strong{font-size:19px}
  .home-steps .home-steps__go{grid-column:1/-1;width:100%}
  .home-tiles{gap:10px}
  .home-tile{min-height:0;padding:16px}
  .home-tile__text{display:none}
  .home-tile__name{font-size:19px}
  .home-tile__ico{width:46px;height:46px}
  .home-help .btn{flex:1 1 auto}
}
.mini-tickets{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.mini-tickets li{border-bottom:1px solid var(--rule)}
.mini-tickets a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:8px 0;color:var(--ink);text-decoration:none}
.mini-tickets__main{display:grid;gap:2px;min-width:0}
.mini-tickets__subject{font-weight:600;overflow-wrap:anywhere}
.mini-tickets small{font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:var(--muted)}
.mini-tickets .badge{flex:none}
/* Sites surveillés : pastille et nom, l'état en mono dessous. À côté du nom, un état long (« Incident en cours · 99,72 %
   sur 30 j ») le réduisait à rien dans la colonne étroite de l'aide ; le nom passe à la ligne, jamais coupé */
.health-list{gap:0;border-top:1px solid var(--line)}
.health-list__item{grid-template-columns:auto minmax(0,1fr);gap:3px 12px;padding:12px 0;border-bottom:1px solid var(--rule)}
.health-list__item+.health-list__item{border-top:0}
/* La pastille au milieu de la première ligne du nom, même quand il passe à la ligne (lh : sa hauteur de ligne) */
.health-list__dot{position:relative;grid-row:auto;align-self:start;width:8px;height:8px;margin-top:8px;margin-top:calc(.5lh - 4px)}
.health-list__item .health-list__dot{box-shadow:none;animation:none}
.health-list__item--up .health-list__dot{background:var(--ok)}
.health-list__item--down .health-list__dot{background:var(--danger)}
.health-list__name{overflow:visible;font-weight:600;white-space:normal;overflow-wrap:anywhere}
.health-list__name a{color:var(--ink)}
.health-list__state{grid-column:2;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.02em;color:var(--muted)}
.health-list__item--up .health-list__state{color:var(--ok)}
.health-note{margin-top:14px;font-size:13px}
.health-note .icon{color:var(--ok)}
/* Incident en cours : fond doux du danger, texte encre */
.health{gap:16px;margin:0 0 24px;padding:18px 22px;border-radius:20px}
.health--down{background:var(--danger-soft);color:var(--ink)}
.health__icon{border-radius:50%;background:var(--paper);color:var(--danger)}
.health strong{color:var(--danger)}
/* Échéancier : date en mono, montant en chiffres tabulaires */
.schedule li{grid-template-columns:120px minmax(0,1fr) auto;padding:12px 0;border-bottom-color:var(--rule)}
.schedule time,.schedule__undated{font-family:var(--f-mono);font-size:11px;letter-spacing:.02em;color:var(--muted)}
.schedule .late time{color:var(--danger)}
.schedule .num{font-weight:600;color:var(--ink)}
/* Prochain appel : une fiche papier, la date en grand ; le jour même, le fond de l'étape en cours */
.call-next{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin:0 0 24px;padding:18px 24px;border:0;border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04)}
.call-next.is-today{background:var(--warn-soft)}
.call-next__text{display:grid;gap:4px;flex:1 1 320px;min-width:0}
.call-next__text p{margin:0}
.call-next__label{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.call-next__when{font-family:var(--f-disp);font-size:24px;font-weight:800;line-height:1.15;letter-spacing:-.025em;color:var(--ink)}
.call-next__meta{font-size:14px;color:var(--soft)}
.call-next__actions{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:760px){
  .home-grid{grid-template-columns:minmax(0,1fr)}
  .dash-head h1{font-size:34px}
  .dash-head__actions{width:100%}
  .dash-head__actions .btn{flex:1 1 180px}
  .dash-rows a{padding:12px 16px;gap:12px}
  .dash-rows__verb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .project__launch{flex-basis:100%;margin-left:0}
  .schedule li{grid-template-columns:minmax(0,1fr) auto}
  .schedule time,.schedule__undated{grid-column:1 / -1}
}
@media (max-width:640px){.track li{font-size:0;padding-top:8px}}

/* 12 ─ Documents, devis, paiement, contrats ------------------------------------------------------------
   Les pièces du dossier en lignes sur papier ; chaque document a sa petite feuille à coin plié (la catégorie en
   mono) ; le détail se lit « libellé en sourdine, valeur en gras », comme la demande de support du site. */
.doc-list{margin:0;padding:0;list-style:none;overflow:hidden;border:0;border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04)}
.doc-list li{gap:16px;padding:14px 22px;border-bottom:1px solid var(--rule);transition:background-color .2s}
.doc-list li:last-child{border-bottom:0}
.doc-list li:hover{background:var(--card)}
.doc-list .grow a{font-weight:600;color:var(--ink)}
.doc-list .grow small{margin-top:2px;font-size:13px;color:var(--muted)}
.doc-list .end{gap:12px}
.doc-list .num{font-weight:600;color:var(--ink)}
/* Feuille à coin plié : la catégorie du document en mono, en bas à gauche */
.doc-ico{position:relative;display:flex;align-items:flex-end;justify-content:flex-start;width:38px;height:46px;flex:none;padding:0 0 6px 5px;border:0;border-radius:3px;font-family:var(--f-mono);font-size:8px;font-weight:500;letter-spacing:.04em;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.doc-ico::before{content:"";position:absolute;top:0;right:0;width:10px;height:10px;background:var(--line-strong);clip-path:polygon(0 0,0 100%,100% 100%)}
/* Ligne survolée (fond carte) : la feuille neutre passe au papier pour rester visible ; factures et reçus gardent leur teinte */
.doc-list li:hover .doc-ico:not(.doc-ico--invoice):not(.doc-ico--deposit_invoice):not(.doc-ico--receipt){background:var(--paper)}
@media (max-width:640px){.doc-list li{padding:14px 16px}.doc-list .end{padding-left:54px}}

/* Détail d'un document : les faits en lignes, puis les actions */
.doc-facts{grid-template-columns:minmax(120px,max-content) minmax(0,1fr);gap:0 24px}
.doc-facts dt,.doc-facts dd{margin:0;padding:11px 0;border-bottom:1px solid var(--rule)}
.doc-facts dt{color:var(--muted)}
.doc-facts dd{font-weight:600;color:var(--ink)}
.doc-facts dd .badge{vertical-align:1px}
.doc-facts dt:last-of-type,.doc-facts dd:last-of-type{border-bottom:0}
@media (max-width:640px){.doc-facts{grid-template-columns:minmax(0,1fr)}.doc-facts dt{padding-bottom:0;border-bottom:0}.doc-facts dd{padding-top:2px}}
.project .actions{gap:10px}

/* Régler une facture : le montant en grand, un moyen de paiement par bloc */
.pay-box{gap:10px;padding:22px 24px}
.pay-box>strong{font-family:var(--f-disp);font-size:26px;font-weight:800;line-height:1.1;letter-spacing:-.025em;color:var(--ink)}
.pay-box>p{margin:0}
.pay-methods{gap:10px;margin:8px 0}
.pay-method{gap:4px;padding:16px 18px;border:0;border-radius:14px;background:var(--card)}
.pay-method h3{margin-bottom:6px;font-size:17px}
.pay-method .mono{font-size:14px;letter-spacing:.02em;color:var(--ink)}
.pay-method span.muted.small{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.pay-method .actions{margin-top:10px}

/* Donner son accord : la carte papier du formulaire, le choix de la façon de signer en pilule */
.quote-accept{padding:clamp(22px,3vw,34px);border:0;border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04)}
.quote-accept__head{margin-bottom:22px}
.quote-accept__head h2{font-size:26px;font-weight:800;letter-spacing:-.03em}
.quote-accept__head p{margin-top:8px;color:var(--soft)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:0;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line)}
.seg__item span{justify-content:center;width:100%;height:auto;min-height:44px;padding:0 16px;font-size:15px;color:var(--soft);transition:background-color .25s,color .25s}
.seg__item:hover span{background:var(--card);color:var(--ink)}
.seg__item input:checked+span{background:var(--ink);color:var(--wall);box-shadow:none}
.seg__item input:focus-visible+span{outline:3px solid var(--ink);outline-offset:3px}
.quote-options{border:0;border-radius:16px;background:var(--card);padding:16px 18px}
.quote-options__item{border:0;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line)}
.quote-options__item:has(input:checked){background:var(--warn-soft);box-shadow:inset 0 0 0 2px var(--ink)}
.quote-options__item input{accent-color:var(--ink)}
.quote-accept__terms{padding:16px 18px;border:0;border-radius:14px;background:var(--card)}
.quote-accept__terms:has(input:checked){background:var(--ok-soft)}
.quote-accept__withdrawal{border-radius:14px;background:var(--warn-soft)}
.quote-accept__withdrawal p .icon{color:var(--ink)}
.sigpad__draw{display:flex;flex-direction:column;gap:7px}
.sigpad__canvas{border:1.5px dashed var(--line-strong);border-radius:14px;background:var(--paper)}
/* Cibles d'au moins 44 px : « Effacer » et la case « Je ne peux pas tracer ma signature » */
.sigpad__foot .link-btn{min-height:44px}
.sigpad__skip{min-height:44px;padding-block:10px}
.decision{padding:22px 24px}
.decision--ok{background:var(--ok-soft)}
.decision--ok h2{color:var(--ok)}
.proof code{font-size:11px}
.help-notice{border-radius:16px;background:var(--warn-soft)}
.help-notice>.icon{color:var(--warn)}
.help-notice--info{background:var(--card);color:var(--soft)}
.help-notice--info>.icon{color:var(--soft)}
.help-empty{border:1.5px dashed var(--line-strong);border-radius:20px;background:transparent;color:var(--soft)}

/* Volet dépliable (refus d'un devis, rétractation, résiliation) : un lien, pas un bouton */
.urgency__item{border:0;border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line)}
.urgency__item input{accent-color:var(--ink)}
.urgency__item:has(input:checked){background:var(--card);box-shadow:inset 0 0 0 2px var(--ink)}
.urgency__item--high:has(input:checked){background:var(--warn-soft);box-shadow:inset 0 0 0 2px var(--warn)}
.urgency__item--urgent:has(input:checked){background:var(--danger-soft);box-shadow:inset 0 0 0 2px var(--danger)}
.disclosure>summary{min-height:44px;color:var(--soft)}
.disclosure>summary:hover{color:var(--ink)}
.contract-end{margin-top:22px;padding-top:12px;border-top-color:var(--rule)}
.contract-end__form{border:0;border-radius:16px;background:var(--card)}
.end-choice__item{border:0;border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line)}
.end-choice__item:has(input:checked){box-shadow:inset 0 0 0 2px var(--ink)}
.end-choice__item input{accent-color:var(--ink)}
.end-choice__item--early:has(input:checked){background:var(--danger-soft);box-shadow:inset 0 0 0 2px var(--danger)}
.end-choice__item--early input{accent-color:var(--danger)}

/* Mes contrats sans contrat : l'accompagnement présenté plutôt qu'une page vide */
.contracts-empty{gap:24px;padding:clamp(22px,3vw,36px);border:0;border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04)}
.contracts-empty__intro h2{font-size:26px;font-weight:800;letter-spacing:-.03em}
.contracts-empty__intro p{color:var(--soft)}
.contracts-empty__quote{display:flex;align-items:center;gap:14px;padding:16px 20px;border:0;border-radius:14px;background:var(--warn-soft);color:var(--ink);text-decoration:none;transition:translate .4s var(--ease),box-shadow .4s var(--ease)}
.contracts-empty__quote:hover{translate:0 -3px;box-shadow:var(--lift)}
.contracts-empty__quote>span.dot{display:inline-block;flex:none;width:10px;height:10px;min-width:0}
.contracts-empty__quote>span:nth-of-type(2){display:grid;gap:2px;flex:1;min-width:0}
.contracts-empty__go{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:600;white-space:nowrap}
.contracts-empty__quote:hover .arr{transform:translateX(4px)}
.contracts-empty__offers{gap:0;border-top:1px solid var(--ink)}
.contracts-empty__offers li{gap:6px;padding:18px 24px 18px 0;border:0;border-radius:0;background:transparent}
.contracts-empty__offers li+li{padding-left:24px;border-left:1px solid var(--line)}
.contracts-empty__offers h3{font-size:19px}
.contracts-empty__offers p{color:var(--soft)}
@media (max-width:760px){.contracts-empty__offers li,.contracts-empty__offers li+li{padding:16px 0;border-left:0;border-bottom:1px solid var(--line)}}
.project__head .project__title h2{font-size:22px;letter-spacing:-.025em}
.project__head .project__title p{margin:4px 0 0}

/* 13 ─ Ce que comprend l'espace (/fonctionnalites) ----------------------------------------------------
   La page « Espace client » du site (e2/espace.css) : le héros de la connexion, puis une ligne par étape (la liste
   des fonctionnalités avec leur condition d'accès, un exemple d'écran dans la niche), la sécurité sur la bande, les
   questions fréquentes et un bandeau nuit pour finir. Une fois connecté, les accès déjà ouverts passent au vert. */
.fx-hero{padding-bottom:clamp(8px,2vw,24px)}
.fx-mine{display:flex;align-items:baseline;gap:10px;margin:0;color:var(--soft)}
.fx-mine strong{color:var(--ink)}
.fx-cta{display:flex;flex-wrap:wrap;gap:10px}
/* Conditions d'accès : l'encre pour ce qui est inclus, le surligneur pour un projet ou un suivi en cours, un
   liseré encre pour la maintenance ; le vert quand c'est déjà ouvert pour le dossier */
.access-legend{display:flex;flex-direction:column;gap:8px;margin:4px 0 0;padding:0;list-style:none}
.access-legend li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px;color:var(--soft)}
.access-tag{display:inline-flex;align-items:center;flex:none;padding:4px 9px;border-radius:999px;font-family:var(--f-mono);font-size:11px;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.access-tag.is-all{background:var(--ink);color:var(--wall)}
.access-tag.is-active{background:var(--marker);color:var(--ink)}
.access-tag.is-maint{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.access-tag.is-open{background:var(--ok-soft);color:var(--ok)}
/* Accès rapide aux étapes : les pastilles du site */
.fx-jump{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(40px,5vw,64px) 0 0;padding-top:20px;border-top:1px solid var(--line)}
.fx-jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:var(--card);font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;transition:background-color .2s,color .2s}
.fx-jump a:hover{background:var(--ink);color:var(--wall)}
/* Une ligne par étape : le texte et la liste, l'exemple d'écran à côté (en alternance sur grand écran) */
.fx-row{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,40px);align-items:center;padding-block:clamp(56px,7vw,96px) 0}
@media (min-width:1000px){
  .fx-row{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px}
  .fx-row--flip{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .fx-row--flip .fx-row__copy{order:2}
}
.fx-row__copy{display:flex;flex-direction:column;gap:16px;min-width:0}
.fx-row__label{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fx-row__label span,.fx-num{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border-radius:999px;background:var(--paper);font-family:var(--f-mono);font-size:11px;color:var(--ink)}
.fx-row h2{max-width:16em;font-size:clamp(28px,1.6vw + 18px,44px);font-weight:800;line-height:1;letter-spacing:-.04em}
.fx-row__lead{max-width:36em;margin:0;font-size:clamp(16px,.4vw + 14px,19px);line-height:1.55;color:var(--soft)}
.fx-list{margin:8px 0 0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.fx-list li{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 20px;padding:16px 0;border-bottom:1px solid var(--line)}
.fx-list li>div{flex:1 1 280px;min-width:0}
.fx-list strong{font-family:var(--f-disp);font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.fx-list p{margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--soft)}
.fx-list .access-tag{margin-top:2px}
/* Exemples d'écran des étapes : la niche et le papier de la maquette de connexion */
.fx-demo{max-width:620px;justify-self:center;width:100%}
.fx-muted{font-family:var(--f-mono);font-size:10px;color:var(--muted)}
.fx-pill{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;background:var(--card);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--soft)}
.fx-pill.is-ok{background:var(--ok-soft);color:var(--ok)}
.demo-dot.is-ink{background:var(--ink)}
/* Projet : cinq marches, le fait à l'encre, l'étape en cours au surligneur (comme l'écran de l'accueil) */
.fx-steps{display:flex;align-items:flex-end;gap:6px;margin:0;padding:0;list-style:none}
.fx-steps li{display:flex;flex:1;flex-direction:column;justify-content:flex-end;gap:8px;min-width:0}
.fx-steps li>span{display:block;border-radius:3px 3px 0 0;background:var(--line)}
.fx-steps li:nth-child(1)>span{height:30px}.fx-steps li:nth-child(2)>span{height:42px}.fx-steps li:nth-child(3)>span{height:54px}.fx-steps li:nth-child(4)>span{height:66px}.fx-steps li:nth-child(5)>span{height:78px}
.fx-steps li.is-done>span{background:var(--ink)}
.fx-steps li.is-current>span{background:var(--marker);box-shadow:inset 0 0 0 1.5px var(--ink)}
.fx-steps small{padding-top:6px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:10px;color:var(--muted)}
.fx-steps li.is-current small{color:var(--ink)}
.fx-fakebtn{align-self:flex-start;margin:0;padding:9px 16px;border-radius:999px;background:var(--ink);font-size:13px;font-weight:600;color:var(--wall)}
/* Recherches : barres à l'encre, la première au surligneur */
.fx-queries{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.fx-queries li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;font-size:13px;color:var(--ink)}
.fx-queries span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-queries b{grid-column:2;grid-row:1;font-family:var(--f-mono);font-size:11px;font-weight:500;color:var(--soft)}
.fx-queries i{grid-column:1 / -1;grid-row:2;height:8px;border-radius:4px;background:var(--ink);transform-origin:0 50%}
.fx-queries i.w1{width:100%;background:var(--marker);box-shadow:inset 0 0 0 1.5px var(--ink)}.fx-queries i.w2{width:78%}.fx-queries i.w3{width:57%}.fx-queries i.w4{width:36%}
/* Demande de support : mes messages sur papier, ceux du client au jaune doux (comme le fil du support) */
.fx-chat{display:flex;flex-direction:column;gap:8px}
.fx-chat p{max-width:84%;margin:0;padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.45;color:var(--ink)}
.fx-chat .is-me{align-self:flex-end;border-bottom-right-radius:4px;background:var(--warn-soft)}
.fx-chat .is-them{align-self:flex-start;border-bottom-left-radius:4px;background:var(--card)}
/* Documents : la feuille à coin plié de la liste des pièces */
.fx-docs{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.fx-docs li{overflow-x:visible;overflow-y:clip;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--rule);font-size:13px;color:var(--ink)}
.fx-sheet{position:relative;display:flex;align-items:flex-end;width:34px;height:40px;padding:0 0 5px 4px;border-radius:3px;background:var(--card);font-family:var(--f-mono);font-size:8px;letter-spacing:.02em;color:var(--soft);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
.fx-sheet::before{content:"";position:absolute;top:0;right:0;width:8px;height:8px;background:var(--line-strong);clip-path:polygon(0 0,0 100%,100% 100%)}
.fx-sheet.is-invoice{background:var(--warn-soft);color:var(--ink)}
.fx-sheet.is-quote{background:var(--marker);color:var(--ink)}
/* Sécurité : la bande, un code à six chiffres, six garanties sur papier */
.fx-secure{margin-top:clamp(64px,8vw,112px);padding:clamp(28px,4vw,56px);border-radius:32px;background:var(--band)}
.fx-secure__head{display:grid;gap:16px;margin-bottom:clamp(24px,3vw,40px)}
@media (min-width:1000px){.fx-secure__head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:16px 64px}.fx-secure__head .fx-code{grid-column:2;grid-row:1 / span 2;justify-self:end}}
.fx-secure h2{max-width:14em;font-size:clamp(28px,1.6vw + 18px,44px);font-weight:800;line-height:1;letter-spacing:-.04em}
.fx-secure__head p{max-width:36em;margin:0;font-size:clamp(16px,.4vw + 14px,19px);line-height:1.55;color:var(--soft)}
.fx-code{display:flex;gap:6px}
.fx-code b{display:inline-block;font-weight:500}
.fx-code span::after{content:"";position:absolute;left:50%;top:27%;bottom:27%;width:2px;margin-left:-1px;border-radius:1px;background:var(--ink);opacity:0}
.fx-code span{position:relative;display:grid;place-items:center;width:clamp(34px,3vw,44px);height:clamp(44px,4vw,56px);border-radius:10px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);font-family:var(--f-mono);font-size:clamp(18px,1.2vw + 10px,24px);font-weight:500;color:var(--ink)}
.fx-code span:last-child::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--ink),0 0 0 3px var(--marker)}
.fx-secure__grid{display:grid;gap:14px;margin:0;padding:0;list-style:none}
@media (min-width:700px){.fx-secure__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.fx-secure__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fx-secure__grid li{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px 22px;border-radius:20px;background:var(--paper)}
.fx-secure__grid strong{font-family:var(--f-disp);font-size:clamp(19px,.4vw + 16px,22px);font-weight:700;line-height:1.15;letter-spacing:-.025em;color:var(--ink)}
.fx-secure__grid p{margin:0;font-size:15px;line-height:1.55;color:var(--soft)}
.fx-num{background:var(--wall)}
/* Questions fréquentes : quatre cartes papier sur deux colonnes, la réponse sur toute la largeur de sa carte */
.fx-faq{margin-top:clamp(40px,5vw,64px)}
.fx-faq__grid{display:grid;gap:14px}
@media (min-width:800px){.fx-faq__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fx-faq__card{display:flex;flex-direction:column;gap:10px;padding:24px 24px 26px;border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04)}
.fx-faq__card h3{font-size:clamp(19px,.4vw + 16px,22px);font-weight:700;line-height:1.15;letter-spacing:-.025em}
.fx-faq__card p{margin:0;font-size:15px;line-height:1.55;color:var(--soft)}
/* Pour finir : le bandeau nuit du site */
.fx-end{display:flex;flex-direction:column;align-items:flex-start;gap:26px;margin-top:clamp(56px,7vw,96px);padding:clamp(32px,5vw,72px);border-radius:32px;background:var(--night);color:var(--night-text)}
@media (min-width:900px){.fx-end{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:48px}}
.fx-end h2{max-width:14em;font-size:clamp(34px,3.4vw + 12px,68px);font-weight:800;line-height:.95;letter-spacing:-.045em;color:var(--night-text)}
.fx-end p{max-width:36em;margin:16px 0 0;font-size:clamp(16px,.4vw + 14px,19px);line-height:1.55;color:var(--night-soft)}
.fx-end :focus-visible{outline-color:var(--marker)}
.btn--light{flex:none;background:var(--night-text);color:var(--ink);box-shadow:none}
.btn--light:hover{background:#fff;color:var(--ink)}
@media (max-width:560px){.fx-cta .btn{width:100%}.fx-end .btn{width:100%}}

/* En-tête : sous 1 360 px le libellé « Espace client » cède sa place ; sous 1 200 px la navigation et le compte
   passent dans le burger (connecté). Avant connexion, rien à replier : le logo, le libellé et le retour au site. */
@media (max-width:1359px){.portal-body:not(.portal-body--guest) .head-label{display:none}}
/* Sous 1 440 px, le bouton du compte (prénom, et le dossier ouvert dessous) se limite à 130 px de texte et les rubriques se
   resserrent : la navigation complète, pastille du support comprise, tient encore à 1 200 px comme à 1 360 px, où le
   libellé revient */
@media (max-width:1439px){.acct__name,.acct__dossier{max-width:130px}.app-nav ul{gap:20px}}
@media (max-width:1199px){
  .portal-body:not(.portal-body--guest) :is(.app-nav,.acct){display:none}
  .portal-body:not(.portal-body--guest) .app-menu{display:block;margin-left:auto}
  /* Menu ouvert : la page dessous ne défile plus (app.js le referme si la fenêtre repasse au-dessus de 1 200 px) */
  body:has(.app-menu[open]){overflow:hidden}
}
@media (max-width:959px){
  .brand-logo img,.app-foot__brand img{width:115px;height:24px}
  .head-row{gap:14px}
}
@media (max-width:560px){.head-back__long{display:none}.head-back__short{display:inline}}
@media (max-width:420px){.head-label{padding-left:12px;font-size:10px}}
/* Très petit écran (320 px) : le libellé cède la place au retour vers le site */
@media (max-width:359px){.head-label{display:none}}
/* 14 ─ Support : l'aide, les demandes, une conversation ----------------------------------------------
   L'aide d'abord (recherche, actions, questions fréquentes), les demandes en lignes à pastilles comme « Ce qui vous
   attend » ; une demande se lit comme la « demande de support » du site (état et pastille, trait d'avancement, étapes à
   pastilles, lignes « libellé en sourdine, valeur en gras ») et la conversation reste une messagerie. La mise en page
   d'app.css est gardée ; ici, la matière E′. */

/* En-tête de l'aide : le titre au surligneur, la recherche, et la fiche des engagements à côté */
.help-hero{grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:28px 56px;align-items:end;overflow:visible;margin-bottom:36px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.help-hero::after{display:none}
.help-hero h1{font-size:clamp(30px,1.2vw + 22px,40px);letter-spacing:-.03em}
.help-hero h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--marker) 62%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.help-hero__text>p{max-width:62ch;margin-top:12px;color:var(--soft)}
.help-search{gap:10px;max-width:680px;margin-top:24px}
.help-search input:not([type=checkbox]):not([type=radio]):not([type=file]){height:auto;min-height:54px;border-radius:14px;font-size:16px}
.help-search .btn{height:auto;min-height:54px;padding:0 26px;border-radius:999px}
.help-live{max-width:680px;margin-top:8px;padding:6px;border:0;border-radius:16px;background:var(--paper);box-shadow:0 30px 60px -28px rgba(0,0,0,.4),0 0 0 1px rgba(18,18,18,.06)}
.help-live a{display:flex;align-items:center;min-height:44px;padding:10px 12px;border-radius:10px;color:var(--ink);font-weight:600}
.help-live a:hover,.help-live a:focus-visible{background:var(--card);color:var(--ink)}
.help-live__more{margin-top:4px;padding-top:4px;border-top:1px solid var(--rule)}
.help-live__more a{font-size:14px;text-decoration:underline;text-decoration-color:rgba(18,18,18,.4);text-underline-offset:3px}
.help-live__more a:hover{text-decoration-color:var(--ink)}
/* (La même fiche dit ce qu'est un appel sur la page des rendez-vous, section 16, et comment se gardent les accès et se
   modifient les informations du dossier, section 17 : .fiche) */
:is(.help-promise,.rdv-fiche,.fiche){min-width:0;padding:4px 22px 8px;border-radius:14px;background:var(--paper);box-shadow:var(--lay)}
:is(.help-promise__title,.rdv-fiche__title,.fiche__title){margin:0;padding:14px 0 12px;border-bottom:1px solid var(--rule);font-family:var(--f-body);font-size:14px;font-weight:700;letter-spacing:0;color:var(--ink)}
:is(.help-promise,.rdv-fiche,.fiche) dl{margin:0}
:is(.help-promise,.rdv-fiche,.fiche) dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:14px}
:is(.help-promise,.rdv-fiche,.fiche) dl>div:last-child{border-bottom:0}
:is(.help-promise,.rdv-fiche,.fiche) dt{flex:none;color:var(--muted)}
:is(.help-promise,.rdv-fiche,.fiche) dd{margin:0;font-weight:700;color:var(--ink);text-align:right}

/* Colonnes de l'aide, et fiches de la colonne (état des sites, interlocuteur, conseils) */
.help-layout{gap:28px}
.help-layout__main>section+section{margin-top:48px}
.help-layout__side{top:calc(var(--head-h) + 24px)}
.help-card{padding:22px 24px}
.help-card>h2{margin-bottom:12px;font-size:20px;letter-spacing:-.02em}
.help-card>p{color:var(--soft)}
.help-card__icon{border-radius:50%;background:var(--card);color:var(--ink)}
.help-facts li{font-size:14px;color:var(--muted);text-wrap:pretty}
.help-facts li>.icon{color:var(--ink)}
.help-facts a{color:var(--ink);font-weight:600}
.help-tips{gap:10px;font-size:14px;color:var(--soft)}
.help-tips li::before{background:var(--ink)}
.help-tips .icon{margin-left:-4px;color:var(--ink)}
.help-empty>.icon{color:var(--ink)}
.help-empty a{color:var(--ink);font-weight:600}
.help-results{margin-bottom:36px}

/* Que souhaitez-vous faire : une liste sur papier, en deux colonnes ; l'urgence d'abord, sur toute la largeur, au fond
   doux du danger. Le survol passe la ligne sur la carte et pousse la flèche, comme les lignes de l'accueil */
.help-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;overflow:hidden;border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04)}
.help-action{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:76px;padding:14px 22px;border:0;border-top:1px solid var(--rule);border-radius:0;background:none;box-shadow:none;transition:background-color .2s}
.help-action:first-child{border-top:0}
.help-action:nth-child(odd):not(:first-child){border-left:1px solid var(--rule)}
.help-action:hover{transform:none;background:var(--card);border-color:var(--rule);box-shadow:none}
.help-action:focus-visible{outline-offset:-4px;border-radius:14px}
.help-action__icon{width:40px;height:40px;border-radius:50%;background:var(--card);color:var(--ink);transition:background-color .2s}
.help-action:hover .help-action__icon{background:var(--paper)}
/* Le texte (titre, puis explication dessous) : app.css visait le dernier élément, désormais la flèche */
.help-action>span:nth-child(2){display:grid;gap:3px;min-width:0}
.help-action strong{font-weight:600}
.help-action small{font-size:13px;color:var(--muted)}
.help-action .arr{transition:transform .25s var(--ease)}
.help-action:hover .arr{transform:translateX(4px)}
.help-action--urgent{grid-column:1 / -1;border:0;background:var(--danger-soft)}
.help-action--urgent:hover{border:0;background:color-mix(in srgb,var(--danger-soft) 94%,var(--danger))}
.help-action--urgent .help-action__icon,.help-action--urgent:hover .help-action__icon{background:var(--paper);color:var(--danger)}
.help-action--urgent strong{color:var(--danger)}
.help-action--urgent small{color:var(--soft)}

/* Vos demandes : lignes à pastilles sur papier, l'état et l'avancement à droite */
.ticket-list{gap:0;overflow:hidden;border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04)}
.ticket-item+.ticket-item{border-top:1px solid var(--rule)}
.ticket-item a,.ticket-item.is-unread a,.ticket-item.is-waiting a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"dot title state" "dot meta when" "dot excerpt bar";align-items:center;gap:3px 16px;padding:16px 22px;border:0;border-radius:0;background:none;box-shadow:none;transition:background-color .2s}
.ticket-item a:hover,.ticket-item.is-waiting a:hover{border:0;background:var(--card);box-shadow:none}
.ticket-item a:focus-visible{outline-offset:-4px;border-radius:14px}
.ticket-item .dot{grid-area:dot;align-self:start;margin-top:8px}
.ticket-item__title{grid-area:title;min-width:0;font-size:16px;font-weight:600;color:var(--ink)}
.ticket-item__state{grid-area:state;justify-self:end}
.ticket-item.is-unread .ticket-item__title{font-weight:700}
.ticket-item__meta{grid-area:meta;min-width:0;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;line-height:1.5;text-transform:uppercase;color:var(--muted)}
.ticket-item__urgent{font-weight:500;color:var(--danger)}
.ticket-item__excerpt{grid-area:excerpt;min-width:0;margin-top:2px;font-size:14px;color:var(--soft)}
.ticket-item__excerpt strong{font-weight:600;color:var(--ink)}
.ticket-item__when{grid-area:when;justify-self:end;font-family:var(--f-mono);font-size:10.5px;color:var(--muted);white-space:nowrap}
.ticket-item .tbar{grid-area:bar;justify-self:end}
/* Avancement en trois traits : le fait à l'encre, l'étape en cours au surligneur cerclé d'encre (vide tant qu'elle n'a
   pas commencé, ambre quand c'est à vous), tout en vert une fois terminée */
.tbar{display:inline-grid;grid-template-columns:repeat(3,18px);gap:3px}
.tbar i{height:4px;border-radius:2px;background:var(--line-strong)}
.tbar i:first-child{background:var(--ink)}
.tbar--new i:nth-child(2){background:transparent;box-shadow:inset 0 0 0 1px var(--ink)}
.tbar--progress i:nth-child(2){background:var(--marker);box-shadow:inset 0 0 0 1px var(--ink)}
.tbar--waiting i:nth-child(2){background:var(--warn)}
.tbar--done i,.tbar--done i:first-child{background:var(--ok)}

/* Questions fréquentes : les lignes du site (filet encre, question en titre, « + » qui pivote en « × ») */
.faq{gap:32px}
.faq__group h3{margin:0;padding-bottom:10px;border-bottom:1px solid var(--ink);font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;color:var(--muted)}
.faq__item{overflow:visible;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
.faq__item+.faq__item{margin-top:0}
.faq__item summary{position:relative;min-height:60px;padding:14px 48px 14px 0;font-family:var(--f-disp);font-size:clamp(17px,.4vw + 14px,19px);font-weight:700;line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.faq__item summary::after{content:"";position:absolute;top:50%;right:8px;display:block;width:14px;height:14px;margin-top:-7px;border-radius:0;background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 14px no-repeat;color:var(--ink)}
.faq__item summary:hover{color:var(--ink)}
.faq__answer{padding:0 48px 22px 0;color:var(--soft)}
.faq__answer .prose{font-size:16px;line-height:1.6}
.faq__foot{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--rule);font-size:14px;color:var(--muted)}
.faq__foot a{color:var(--ink);font-weight:600}

/* Résultats de recherche et articles liés : des lignes, sur papier ou à même la fiche */
.help-links{grid-template-columns:minmax(0,1fr);gap:0;overflow:hidden;border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04)}
.help-links li+li{border-top:1px solid var(--rule)}
.help-links a{align-items:center;height:auto;min-height:60px;padding:12px 22px;border:0;border-radius:0;background:none;transition:background-color .2s}
.help-links a:hover{border:0;background:var(--card)}
.help-links a:focus-visible{outline-offset:-4px;border-radius:14px}
.help-links .icon{margin-top:0;color:var(--ink)}
.help-links small{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.help-links--plain{overflow:visible;border-radius:0;background:none;box-shadow:none}
.help-links--plain a{min-height:48px;padding:10px 0;font-size:15px}
.help-links--plain a:focus-visible{outline-offset:3px;border-radius:6px}
.help-links--plain a:hover{background:none;text-decoration:underline;text-decoration-color:var(--marker);text-decoration-thickness:4px;text-underline-offset:4px}
.help-card.row{display:flex;align-items:center;justify-content:space-between;gap:12px 20px}

/* Nouvelle demande : trois étapes numérotées, des choix en tuiles, la zone de dépôt en pointillés */
.ticket-form{gap:16px}
.form-step{padding:clamp(20px,2.4vw,28px);border:0;border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04)}
.form-step legend{gap:12px;margin-bottom:18px;font-family:var(--f-disp);font-size:22px;font-weight:700;letter-spacing:-.02em}
.form-step__num{width:32px;height:32px;background:var(--card);color:var(--ink);font-family:var(--f-mono);font-size:12px;font-weight:500}
.type-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
/* Tuiles de choix : celles de l'inscription (section 10) ; ici, seulement une hauteur commune */
.ticket-form .type-card{align-items:center;min-height:76px}
.urgency__item{min-height:64px;padding:14px 16px;transition:box-shadow .2s,background-color .2s}
.urgency__item:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.urgency__item:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:3px}
.urgency__item input:focus-visible{outline:0}
.urgency__item strong{font-weight:600}
.urgency__item small{font-size:13px;color:var(--muted)}
.urgency__note{gap:10px;padding:12px 16px;border-radius:14px;background:var(--danger-soft);color:var(--ink);font-size:14px}
.urgency__note .icon{color:var(--danger)}
.tip{align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:var(--card);color:var(--soft);font-size:14px}
.tip .icon{margin-top:0;color:var(--ink)}
.suggest{padding:16px 18px;border:0;border-radius:16px;background:var(--card)}
.suggest__title{color:var(--ink);font-size:14px;font-weight:600}
.suggest__title .icon{color:var(--ink)}
.suggest__list a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:rgba(18,18,18,.4);text-underline-offset:3px}
.suggest__list a:hover{text-decoration-color:var(--ink)}
.dropzone.is-enhanced .dropzone__area{min-height:96px;border:1.5px dashed var(--line-strong);border-radius:14px;background:var(--paper);transition:border-color .2s,background-color .2s}
.dropzone.is-enhanced .dropzone__area:hover,.dropzone.is-dragover .dropzone__area{border-color:var(--ink);background:var(--card)}
.dropzone.is-enhanced .dropzone__area:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:3px;box-shadow:none}
.dropzone.is-enhanced .dropzone__prompt{font-size:14px;color:var(--muted)}
.dropzone.is-enhanced .dropzone__prompt .icon{color:var(--ink)}
.dropzone__files li{border:0;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.dropzone__thumb{background:var(--card);color:var(--ink);font-family:var(--f-mono);font-weight:500}
.dropzone__files small{font-family:var(--f-mono);font-size:11px}
.dropzone__files button{width:36px;height:36px}
.dropzone__files button:hover{background:var(--danger-soft);color:var(--danger)}
.dropzone__error,.chat-error{color:var(--danger)}
.is-drop-target::after{border:2px dashed var(--ink);border-radius:20px;background:color-mix(in srgb,var(--warn-soft) 92%,transparent);color:var(--ink);font-weight:600}
.ticket-form__submit{padding:4px 0}
.ticket-form__submit p{font-size:13px;color:var(--muted)}
/* Le cadenas de la phrase seulement : l'icône du bouton garde la couleur du bouton (encre sur encre, elle disparaissait) */
.ticket-form__submit p .icon{color:var(--ink)}
.next-steps li{padding:0 0 18px 42px;font-size:14px;color:var(--muted)}
.next-steps li::before{width:30px;height:30px;background:var(--card);color:var(--ink);font-family:var(--f-mono);font-size:11px;font-weight:500}
.next-steps li:not(:last-child)::after{left:14.5px;top:34px;background:var(--line)}
.next-steps strong{font-size:15px;font-weight:600;color:var(--ink)}

/* Une demande : le titre et ses étiquettes, puis la fiche d'état ; la carte d'une demande qui attend le client passe au
   fond de l'étape en cours, pour qu'on la voie */
.ticket-head{margin-bottom:24px}
.ticket-head h1{font-size:clamp(28px,1vw + 20px,36px);letter-spacing:-.03em}
.ticket-head .meta{gap:8px 10px;margin-top:12px;font-size:14px}
.thread-sound{min-height:44px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink)}
.thread-sound:hover{background:var(--ink);color:var(--wall);box-shadow:none;transform:none}
.thread-sound[aria-pressed=false]:not(:hover){color:var(--muted)}
.ticket-status{grid-template-columns:minmax(0,1.25fr) minmax(260px,1fr);gap:22px 40px;margin-bottom:28px;padding:22px 24px;border:0;border-radius:20px;box-shadow:0 0 0 1px rgba(18,18,18,.04)}
.ticket-status,.ticket-status--success,.ticket-status--progress,.ticket-status--neutral,.ticket-status--info{background:var(--paper)}
.ticket-status--warning{background:var(--warn-soft);box-shadow:none}
.ticket-status__icon{border-radius:50%;background:var(--card);color:var(--ink)}
.ticket-status--info .ticket-status__icon{background:var(--marker);color:var(--ink)}
.ticket-status--warning .ticket-status__icon{background:var(--paper);color:var(--warn)}
.ticket-status--success .ticket-status__icon{background:var(--ok-soft);color:var(--ok)}
.ticket-status--progress .ticket-status__icon{background:var(--ink);color:var(--wall)}
.ticket-status--neutral .ticket-status__icon{background:var(--card);color:var(--muted)}
.ticket-status h2{font-size:22px;letter-spacing:-.02em}
.ticket-status p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--soft)}
/* Étapes : un trait d'avancement (encre ; ambre quand c'est à vous ; vert une fois résolue), puis les pastilles du
   site : faite en vert, en cours sur le fond de l'étape en cours, à venir en cercle vide */
.tprogress{position:relative;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:18px}
.tprogress::before,.tprogress::after{content:"";position:absolute;top:0;left:0;height:3px;border-radius:2px}
.tprogress::before{right:0;background:var(--rule)}
.tprogress::after{width:55%;background:var(--ink)}
.tprogress--new::after{width:22%}
.tprogress--waiting::after{background:var(--warn)}
.tprogress--done::after{width:100%;background:var(--ok)}
.ticket-status--warning .tprogress::before{background:rgba(135,87,10,.2)}
.tprogress li{justify-self:start;gap:8px;max-width:100%;padding:4px 12px 4px 4px;border-radius:999px;font-size:13px;font-weight:500;color:var(--muted)}
.tprogress li::before{display:none}
.tprogress__dot{width:22px;height:22px;border:1.5px solid #CFCBC2;background:transparent;color:var(--muted);font-family:var(--f-mono);font-size:10px;font-weight:500}
.tprogress li.is-done{color:var(--soft)}
.tprogress li.is-done .tprogress__dot{border-color:var(--ok);background:var(--ok);color:#fff}
.tprogress li.is-current{background:var(--warn-soft);color:var(--ink);font-weight:700}
.ticket-status--warning .tprogress li.is-current{background:var(--paper)}
.tprogress li.is-current .tprogress__dot{border-color:var(--ink);background:var(--ink);color:var(--wall)}
.tprogress--waiting li.is-current .tprogress__dot{border-color:var(--warn);background:var(--warn);color:#fff}
.tprogress__label{overflow:visible;line-height:1.25;white-space:normal;text-overflow:clip}

/* La conversation : une messagerie. Les bulles de l'équipe sur papier, les vôtres au fond de l'étape en cours ; heures,
   accusés et jours en mono ; les outils (réagir, répondre, modifier) au survol ou au focus */
.conv{gap:14px}
.conv__day{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;color:var(--muted)}
.conv__event{font-family:var(--f-mono);font-size:11px;letter-spacing:.02em;color:var(--muted)}
.conv__event .icon{color:var(--ok)}
.conv__msg{max-width:min(82%,680px)}
.conv__avatar{width:34px;height:34px;border:0;background:var(--ink);color:var(--wall);font-family:var(--f-disp);font-size:12px;font-weight:800}
.conv__avatar--brand{background:var(--paper) url("../brand/favicon.png") center/22px no-repeat;box-shadow:0 0 0 1px rgba(18,18,18,.06)}
.conv__bubble{padding:10px 16px 8px;border:0;border-radius:18px 18px 18px 6px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.05)}
.conv__msg--mine .conv__bubble{border-radius:18px 18px 6px 18px;background:var(--warn-soft);box-shadow:none}
.conv__meta{font-size:12px;color:var(--muted)}
.conv__meta strong{font-size:13px;font-weight:600;color:var(--ink)}
.conv__body{font-size:15px;line-height:1.55;color:var(--ink)}
.conv__foot{gap:8px;font-family:var(--f-mono);font-size:10px;letter-spacing:.02em;color:var(--muted)}
.receipt{font-family:var(--f-mono);font-size:10px;font-weight:500;color:var(--muted)}
.receipt--read{color:var(--ink)}
.receipt .icon{width:13px;height:13px}
.conv__edited{font-family:var(--f-mono);font-size:10px;font-style:normal;color:var(--muted)}
.conv__versions li{border-left:1px solid var(--line-strong)}
.conv__versions-when{font-family:var(--f-mono);font-size:10px;font-weight:500;color:var(--muted)}
.conv__quote{margin:0 0 8px;padding:8px 12px;border:0;border-radius:12px;background:rgba(18,18,18,.05);color:var(--soft)}
.conv__quote:hover{background:rgba(18,18,18,.09)}
.conv__quote strong{font-size:12px;font-weight:600;color:var(--ink)}
.conv__deleted{color:var(--muted)}
.conv__msg--deleted .conv__bubble{border:1.5px dashed var(--line-strong);background:transparent;box-shadow:none}
/* En cours d'envoi : la bulle sur la carte, le texte reste plein (jamais de texte transparent) */
.conv__msg.is-pending .conv__bubble{opacity:1;background:var(--card)}
.conv__editor textarea{min-height:88px}
.conv__tool{width:36px;height:36px;color:var(--muted)}
.conv__tool:hover,.conv__tool[aria-expanded=true]{background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px rgba(18,18,18,.08)}
.reaction{height:26px;padding:0 8px;border:0;background:var(--paper);box-shadow:0 0 0 1px var(--line);font-size:14px}
.reaction span{font-family:var(--f-mono);font-size:10.5px;font-weight:500;color:var(--soft)}
.reaction.is-mine{background:var(--marker);box-shadow:0 0 0 1px var(--ink)}
.reaction.is-mine span{color:var(--ink)}
button.reaction:hover{box-shadow:0 0 0 1.5px var(--ink)}
/* Les réactions chevauchent le bas de la bulle, comme dans une messagerie : la bulle se rallonge pour que l'heure et
   l'accusé restent lisibles au-dessus */
.conv__bubble:has(>.conv__reactions:not(:empty)){padding-bottom:22px}
.emoji-picker{border:0;background:var(--paper);box-shadow:0 30px 60px -28px rgba(0,0,0,.4),0 0 0 1px rgba(18,18,18,.08)}
.emoji-picker button:hover,.emoji-picker button:focus-visible{background:var(--card)}
.emoji-picker button.is-current{background:var(--marker)}
.attach__item{border:0;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font-size:14px}
.attach__item:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.attach__pdf{border-radius:8px;background:var(--danger-soft);color:var(--danger);font-family:var(--f-mono);font-size:10px;font-weight:500}
.attach__ext--mp4,.attach__ext--mov,.attach__ext--webm,.attach__ext--docx,.attach__ext--odt,.attach__ext--txt{background:var(--card);color:var(--ink)}
.attach__ext--xlsx,.attach__ext--ods,.attach__ext--csv{background:var(--ok-soft);color:var(--ok)}
.attach__ext--pptx,.attach__ext--zip{background:var(--warn-soft);color:var(--warn)}
.attach__name small{font-family:var(--f-mono);font-size:11px}
.attach__item--archived{opacity:1;color:var(--muted)}
.attach-media__item{border-radius:12px;background:var(--card)}
.thread-notice{padding:10px 14px;border-radius:14px;background:var(--warn-soft);color:var(--ink);font-size:14px}

/* Avis, réponse, demande fermée */
.rating-form h2,.closed-actions h2{font-size:22px;letter-spacing:-.02em}
.stars label{color:var(--line-strong)}
.stars label .icon{stroke-width:1.5}
.stars label:hover,.stars label:hover~label,.stars input:checked~label{color:var(--ink)}
.stars label:hover .icon,.stars label:hover~label .icon,.stars input:checked~label .icon{fill:var(--marker)}
.stars input:focus-visible+label{outline:3px solid var(--ink);outline-offset:2px;border-radius:8px;box-shadow:none}
.rating-done__stars .is-on{color:var(--ink)}
.rating-done__stars .is-on .icon{fill:var(--marker)}
.reply-form{scroll-margin-top:calc(var(--head-h) + 24px)}
.reply-form__actions{gap:10px 12px}
.reply-form__tools .hint{font-family:var(--f-mono);font-size:10.5px}
.reply-chip{padding:8px 8px 8px 12px;border:0;border-radius:12px;background:var(--card);color:var(--soft)}
.reply-chip>.icon{color:var(--ink)}
.reply-chip strong{font-size:12px}
.reply-chip button{width:36px;height:36px;border-radius:50%}
.reply-chip button:hover{background:var(--paper)}

/* Détails de la demande : « libellé en sourdine, valeur en gras », une ligne par fait, aussi sur téléphone */
.ticket-aside{top:calc(var(--head-h) + 24px)}
.ticket-aside .dl--compact{grid-template-columns:auto minmax(0,1fr);gap:0;font-size:14px}
.ticket-aside .dl--compact dt,.ticket-aside .dl--compact dd{margin:0;padding:10px 0;border-bottom:1px solid var(--rule)}
/* Pas d'écart entre les colonnes : le filet de chaque ligne court d'un bord à l'autre */
.ticket-aside .dl--compact dd{padding-left:16px;font-weight:600;text-align:right}
.ticket-aside .dl--compact dt:last-of-type,.ticket-aside .dl--compact dd:last-of-type{border-bottom:0}

/* Fiche d'aide : l'article sur papier, le vote sur la carte */
.help-article{padding:clamp(24px,3.2vw,44px)}
.help-article h1{margin-bottom:20px;font-size:clamp(28px,1vw + 20px,36px);letter-spacing:-.03em}
.help-article .prose{font-size:16px;line-height:1.65;color:var(--soft)}
.help-article__vote{margin-top:32px;padding:16px 20px;border-top:0;border-radius:14px;background:var(--card)}
.help-article__vote p .icon{color:var(--ink)}
/* app.css teinte en rouge toutes les icônes du vote : celle d'un bouton suit le bouton (encre, puis clair au survol) */
.help-article__vote .btn .icon{color:inherit}

/* Sous 1 100 px, une colonne (comme app.css, que la règle à deux colonnes ci-dessus écrasait) */
@media (max-width:1100px){
  .help-hero,.ticket-status{grid-template-columns:minmax(0,1fr)}
  .help-promise{max-width:520px}
}
@media (max-width:760px){
  .help-search .btn{width:100%}
  .help-actions{grid-template-columns:minmax(0,1fr)}
  .help-action:nth-child(odd):not(:first-child){border-left:0}
  .help-action{padding:14px 16px}
  .ticket-status{padding:18px}
  .help-card{padding:20px}
  .form-step legend{font-size:20px}
  .form-step{padding:18px}
  .conv__msg{max-width:100%}
  .faq__answer{padding-right:0}
}
@media (max-width:640px){
  .ticket-item a,.ticket-item.is-unread a,.ticket-item.is-waiting a{grid-template-areas:"dot title title" "dot meta meta" "dot excerpt excerpt" "dot state state" "dot when bar";padding:14px 16px}
  .ticket-item__state{justify-self:start;margin-top:6px}
  .ticket-item .tbar{margin-top:6px}
  .ticket-item__when{justify-self:start}
}
/* Étapes sur un écran étroit : l'une sous l'autre, le libellé en entier */
@media (max-width:560px){.tprogress{grid-template-columns:minmax(0,1fr);gap:4px}}
/* Au doigt : 44 px pour chaque commande (charte § 8). Les pastilles de réaction gardent une taille de pastille, leur zone
   de toucher s'étend autour ; « modifié » aussi */
@media (pointer:coarse){
  .conv__tool,.reply-chip button,.dropzone__files button,.emoji-picker button{width:44px;height:44px}
  .emoji-picker--grid{grid-template-columns:repeat(6,44px)}
  .reaction{position:relative;height:32px;padding:0 11px}
  .reaction::before,.conv__edited::before{content:"";position:absolute;inset:-6px -2px}
  .conv__edited{position:relative}
  .conv__edited::before{inset:-14px -6px}
}
/* Contraste élevé (Windows) : les ombres et les dégradés s'effacent ; le « + » des questions, les traits d'avancement et le
   bord des bulles, pastilles et pièces jointes sont redessinés aux couleurs du système */
@media (forced-colors:active){
  .faq__item summary::after{forced-color-adjust:none;background:linear-gradient(CanvasText,CanvasText) center/14px 2px no-repeat,linear-gradient(CanvasText,CanvasText) center/2px 14px no-repeat}
  .tbar i{forced-color-adjust:none;background:GrayText}
  .tbar i:first-child,.tbar--progress i:nth-child(2),.tbar--waiting i:nth-child(2),.tbar--done i{background:CanvasText}
  .tbar--new i:nth-child(2){background:Canvas;border:1px solid CanvasText}
  .conv__bubble,.reaction,.emoji-picker,.attach__item,.dropzone__files li,.conv__quote,.reply-chip{border:1px solid CanvasText}
  /* La fiche des engagements garde un cadre : son ombre disparaît (ajouté avec la fiche de Mes accès, section 17) */
  .help-promise{border:1px solid CanvasText}
}

/* 15 ─ Visibilité web et page d'un site ------------------------------------------------------------------
   Les vrais écrans tiennent la promesse des exemples d'écran : la Visibilité reprend l'écran « Visibilité web » de
   l'accueil en grand (tuiles, barres encre dont la plus récente au surligneur, recherches en lignes à barre) ; la page
   d'un site reprend l'écran « Projet » (tuiles sur la carte, frise), puis le dossier du site en lignes sur papier. Pas
   d'animation sur ces écrans de travail : les valeurs se lisent tout de suite. */
.hello h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--marker) 62%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Longueur d'une barre au pour cent près, sans style en ligne : ses dizaines (data-d) et ses unités (data-u) */
i[data-d="1"]{--d:1}i[data-d="2"]{--d:2}i[data-d="3"]{--d:3}i[data-d="4"]{--d:4}i[data-d="5"]{--d:5}i[data-d="6"]{--d:6}i[data-d="7"]{--d:7}i[data-d="8"]{--d:8}i[data-d="9"]{--d:9}i[data-d="10"]{--d:10}
i[data-u="1"]{--u:1}i[data-u="2"]{--u:2}i[data-u="3"]{--u:3}i[data-u="4"]{--u:4}i[data-u="5"]{--u:5}i[data-u="6"]{--u:6}i[data-u="7"]{--u:7}i[data-u="8"]{--u:8}i[data-u="9"]{--u:9}

/* Période : une pilule, la période affichée à l'encre. Jusqu'à 900 px, la liste « Période » la remplace (app.css) : elle
   n'existe qu'au-delà, sans quoi cette règle, chargée après, l'emporterait sur le masquage d'app.css. « width > 900px »
   et non « min-width:901px » : à 900,5 px (zoom), aucun des deux sélecteurs ne s'affichait */
/* Dates d'une section, légende d'un graphique : en mono, comme les métadonnées */
.stats-span,.stats-legend{margin:0;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;line-height:1.4;text-transform:uppercase;color:var(--muted)}
.stats-legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px}
.stats-legend__last{display:inline-flex;align-items:center;gap:8px}
.stats-legend__last::before{content:"";flex:none;width:10px;height:10px;border-radius:2px;background:var(--marker);box-shadow:inset 0 0 0 1.5px var(--ink)}

/* Tuiles de chiffres : papier sur le mur (sur la carte dans la fiche d'un site), étiquette mono, chiffre en Funnel Display ;
   l'écart en mono, vert ou rouge. Chaque tuile est un conteneur : une valeur longue se met à sa mesure (section 11) */
.kpis{gap:12px;margin:0 0 16px}
.kpi{display:flex;flex-direction:column;gap:6px;min-width:0;padding:18px 20px 20px;border:0;border-radius:14px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04);container-type:inline-size}
.kpi__label{font-family:var(--f-mono);font-size:11px;font-weight:400;letter-spacing:.06em;line-height:1.3;text-transform:uppercase;color:var(--muted)}
/* Hauteur de ligne 1,2 : les jambages de Funnel Display (p, g, q, j) descendent à 0,21 em ; plus serré, overflow:hidden (gardé
   pour les points de suspension de dernier recours) les rognait (« Développement ») */
.kpi__value{--fit:clamp(30px,1vw + 22px,40px);overflow:hidden;font-family:var(--f-disp);font-size:var(--fit);font-weight:800;line-height:1.2;letter-spacing:-.03em;color:var(--ink);text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.kpi__note,.kpis--3 .kpi__note{font-size:13px;line-height:1.45;color:var(--soft);text-wrap:pretty}
.kpi__delta{margin-right:2px;font-family:var(--f-mono);font-size:11px;font-weight:500;color:var(--muted);white-space:nowrap}
.kpi__delta--up{color:var(--ok)}
.kpi__delta--down{color:var(--danger)}
.kpi__note .dot{margin-right:10px;transform:translateY(-1px)}
@media (max-width:640px){.kpis--3>.kpi:last-child:nth-child(odd){grid-column:1 / -1}}

/* La fiche d'une source (« Sur Google », « Vos visiteurs ») : l'écran « Visibilité web » de l'accueil en grand, les tuiles
   sur la carte et leurs barres dessous, titre à gauche et légende en mono à droite. Les panneaux de détail qui suivent
   gardent leur hauteur (étirés à celle du voisin, ils laissaient du papier vide) */
.stats-hello p{max-width:none}
.stats-settings__pickers{display:grid;gap:10px;padding:14px 0}
.stats-settings .fiche__note{padding-top:12px}
.stats-sheet{display:flex;flex-direction:column;gap:28px;margin:0 0 16px;padding:clamp(18px,2.4vw,28px);border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04)}
.stats-sheet .kpis{margin:0}
.stats-sheet__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px;margin:0 0 18px}
.stats-sheet__head h3{font-size:18px}
.stats-grid{display:block;columns:2;column-gap:16px}
.stats-grid>.panel{display:block;margin:0 0 16px;break-inside:avoid}
@media (min-width:1900px){.stats-grid{columns:3}}
@media (max-width:900px){.stats-grid{columns:1}}
.stats-note{margin:12px 0 0;font-size:14px;color:var(--muted)}
.stats-foot{margin:48px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.stats-empty{padding:clamp(18px,3vw,34px)}
.stats-empty h2{margin:0 0 8px;font-size:24px;font-weight:800;letter-spacing:-.03em}
.stats-empty p{margin:0;max-width:none;color:var(--soft)}
.stats-empty .actions{margin-top:18px}

/* Barres : une colonne par jour, semaine ou heure, l'échelle à gauche (le haut, la moitié, zéro), les dates dessous.
   Les colonnes se partagent la largeur : rien ne défile, même sur téléphone. Quatre rangées de dates, une seule montrée
   selon la place (data-level : 1 sous 300 px, 2 jusqu'à 520 px, 3 jusqu'à 1 060 px, 4 au-delà : chaque date garde au
   moins 5 px d'air), la plus récente toujours datée */
.vbars{container:vbars / inline-size}
.vbars__chart{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:10px}
.vbars__y{display:flex;flex-direction:column;justify-content:space-between;margin:-5px 0;font-family:var(--f-mono);font-size:10px;line-height:10px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.vbars__cols{display:flex;height:clamp(160px,24cqi,260px);margin:0;padding:0;list-style:none;background:linear-gradient(var(--rule),var(--rule)) 0 0/100% 1px no-repeat,linear-gradient(var(--rule),var(--rule)) 0 50%/100% 1px no-repeat;box-shadow:inset 0 -1px 0 var(--line-strong)}
.vbars__col{display:flex;flex:1 1 0;align-items:flex-end;justify-content:center;min-width:0;border-radius:6px 6px 0 0;transition:background-color .2s}
.vbars__col.is-hover{background:var(--card)}
.vbars__col i{display:block;width:min(70%,64px);height:calc(var(--d,0) * 10% + var(--u,0) * 1%);border-radius:3px 3px 0 0;background:var(--ink)}
/* La plus récente au surligneur ; à zéro, un liseré de 3 px la montre encore (la légende l'annonce) */
.vbars--last .vbars__col:last-child i{min-height:3px;background:var(--marker);box-shadow:inset 0 0 0 1.5px var(--ink)}
.vbars__x{grid-column:2;display:none;font-family:var(--f-mono);font-size:10px;line-height:1.3;color:var(--muted);font-variant-numeric:tabular-nums}
.vbars__x[data-level="1"]{display:flex}
.vbars__x span{display:flex;flex:1 1 0;justify-content:center;min-width:0;white-space:nowrap}
/* Aux deux bouts, la date s'aligne sur le bord de sa barre au lieu de déborder du graphique */
.vbars__x span:first-child{justify-content:flex-start}
.vbars__x span:last-child{justify-content:flex-end}
@container vbars (min-width:300px){.vbars__x[data-level="1"]{display:none}.vbars__x[data-level="2"]{display:flex}}
@container vbars (min-width:600px){.vbars__x[data-level="2"]{display:none}.vbars__x[data-level="3"]{display:flex}}
@container vbars (min-width:1060px){.vbars__x[data-level="3"]{display:none}.vbars__x[data-level="4"]{display:flex}}
/* Les chiffres de chaque barre, repliés sous le graphique : lisibles au clavier et au doigt */
.vbars__data{margin-top:12px}
.vbars__data>summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);list-style:none;cursor:pointer}
.vbars__data>summary::-webkit-details-marker{display:none}
.vbars__data>summary::after{content:"";width:10px;height:10px;background:linear-gradient(currentColor,currentColor) center/10px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 10px no-repeat}
.vbars__data>summary:hover{color:var(--ink)}
.vbars__data[open]>summary::after{transform:rotate(45deg)}
.vbars__table{width:100%;max-width:520px;margin:4px 0 0;border-collapse:collapse;font-size:14px}
.vbars__table :is(th,td){padding:7px 0;border-bottom:1px solid var(--rule);font-weight:400;text-align:left}
.vbars__table thead th{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.vbars__table tbody th{color:var(--soft)}
.vbars__table :is(thead th:last-child,td){text-align:right}
.vbars__table td{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
/* Bulle d'une barre (app.js) : l'encre, comme la pastille des nouveautés */
.chart-tip{padding:9px 12px;border-radius:12px;background:var(--ink);color:var(--wall);box-shadow:var(--lay);font-size:13px;line-height:1.45}

/* Classements (recherches, pages, provenances, villes, contacts) : l'exemple d'écran « Recherches », une barre sous chaque
   libellé, la plus longue au surligneur, et la barre seule pour séparer les lignes (pas de filet) ; le chiffre principal en
   gras. Le libellé est l'en-tête de sa ligne (tbody th). Dans un panneau de moins de 540 px (téléphone, et deux panneaux
   côte à côte jusqu'à 1 250 px de fenêtre, où la recherche n'avait plus que 70 px et se coupait en plein mot), chaque
   ligne devient une fiche : le libellé, la barre, puis les chiffres, chacun sous son nom. Le panneau est le conteneur
   (app.css) */
.rank{width:100%;border-collapse:collapse}
.rank thead th{padding:14px 22px 10px;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-align:left;text-transform:uppercase;color:var(--muted)}
.rank tbody :is(th,td){padding:11px 22px 9px;vertical-align:top;transition:background-color .2s}
.rank tbody th{font-weight:400;text-align:left}
.rank tbody tr:first-child :is(th,td){padding-top:16px}
.rank tbody tr:last-child :is(th,td){padding-bottom:18px}
.rank tbody tr:hover :is(th,td){background:var(--card)}
/* Le survol de la dernière ligne suit l'arrondi du panneau */
.rank tbody tr:last-child>:first-child{border-bottom-left-radius:20px}
.rank tbody tr:last-child>:last-child{border-bottom-right-radius:20px}
.rank .num{width:1%;text-align:right;white-space:nowrap}
.rank td.num{font-size:15px;color:var(--soft);font-variant-numeric:tabular-nums}
.rank td:first-of-type{font-weight:600;color:var(--ink)}
.rank__label{display:block;color:var(--ink);overflow-wrap:anywhere}
.rank__label .stats-page{display:block;font-weight:500;color:var(--ink)}
.rank__label .stats-path{display:block;margin-top:2px;font-family:var(--f-mono);font-size:10.5px;color:var(--muted);overflow-wrap:anywhere}
.rank__bar{display:block;height:8px;margin-top:8px}
.rank__bar i,.shares__bar i{display:block;width:calc(var(--d,0) * 10% + var(--u,0) * 1%);height:100%;border-radius:4px;background:var(--ink)}
.rank tr.is-top .rank__bar i,.shares li.is-top .shares__bar i{background:var(--marker);box-shadow:inset 0 0 0 1.5px var(--ink)}
@container (max-width:540px){
  .rank,.rank tbody{display:block}
  .rank thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .rank tr{display:flex;flex-wrap:wrap;gap:10px 24px;padding:14px 18px;border-bottom:1px solid var(--rule)}
  .rank tbody tr:last-child{border-bottom:0}
  /* Les cellules de la première et de la dernière ligne aussi (0,2,3) : sans quoi leur espacement de grand écran reste */
  .rank tbody :is(th,td),.rank tbody tr:is(:first-child,:last-child) :is(th,td){padding:0}
  .rank tbody :is(th,td){display:block}
  .rank tbody th{flex:1 1 100%}
  .rank .num{display:grid;gap:3px;width:auto;text-align:left}
  /* Le nom de la colonne, lu déjà par les lecteurs d'écran avec la cellule : texte de remplacement vide */
  .rank td.num::before{content:attr(data-label);content:attr(data-label) / "";font-family:var(--f-mono);font-size:11px;font-weight:400;letter-spacing:.06em;line-height:1.3;text-transform:uppercase;color:var(--muted)}
  .rank tbody tr:hover :is(th,td){background:none}
}

/* Parts (provenances, appareils) : le rail clair, la part à l'encre, la plus grande au surligneur */
.shares{gap:16px}
.shares li{gap:6px 12px}
.shares__label{font-size:15px;color:var(--ink)}
.shares__pct{font-family:var(--f-mono);font-size:11px;font-weight:500;color:var(--soft);white-space:nowrap}
.shares__bar{display:block;grid-column:1 / -1;width:100%;height:8px;border-radius:4px;background:var(--rule);overflow:hidden}
.shares__title{margin:0 0 12px;font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.stats-grid .panel__body.stack>div+div{margin-top:18px;padding-top:18px;border-top-color:var(--rule)}

/* Téléphone : le site et la période en deux listes, du dessin des champs ; un nom long passe à la ligne au lieu d'être coupé */
.picker__toggle{min-height:56px;padding:8px 14px 8px 16px;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);transition:border-color .2s,box-shadow .2s}
.picker__toggle:hover{border-color:var(--muted)}
.picker__toggle:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.picker[open] .picker__toggle{border-color:var(--ink);box-shadow:0 0 0 3px var(--marker)}
.picker__label{font-family:var(--f-mono);font-size:11px;font-weight:400;letter-spacing:.06em;line-height:1.4;text-transform:uppercase;color:var(--muted)}
.picker__value{font-weight:600;line-height:1.3;color:var(--ink);white-space:normal;overflow:visible;overflow-wrap:anywhere}
.picker__chev{color:var(--ink)}
.picker__menu{z-index:950;padding:6px;border:0;border-radius:16px;background:var(--paper);box-shadow:0 30px 60px -28px rgba(0,0,0,.4),0 0 0 1px rgba(18,18,18,.06)}
.picker__item{border-radius:10px;color:var(--ink);white-space:normal}
.picker__item:hover,.picker__item:focus-visible{background:var(--card);color:var(--ink)}
.picker__item[aria-current]{font-weight:700}
.picker__item .icon{color:var(--ok)}

/* Page d'un site : le nom, l'étape et l'adresse, les actions à droite */
.site-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 32px;margin:0 0 28px}
.site-head__text{flex:1 1 420px;min-width:0}
.site-head h1{overflow-wrap:anywhere}
.site-head__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:12px 0 0}
.site-head__url{display:inline-flex;align-items:center;gap:6px;min-height:32px;font-family:var(--f-mono);font-size:12px;color:var(--soft);text-decoration:none;overflow-wrap:anywhere}
.site-head__url:hover{color:var(--ink);text-decoration:underline}
.site-head__actions{display:flex;flex-wrap:wrap;gap:10px}
@media (pointer:coarse){.site-head__url{min-height:44px}}
@media (max-width:560px){
  .site-head__actions{width:100%}
  .site-head__actions .btn{flex:1 1 100%;height:auto;padding-block:10px;white-space:normal;text-align:center;line-height:1.3}
}
/* La fiche : l'écran « Projet » en grand. Les tuiles sur la carte, la frise en barres de 12 px, le message, les faits.
   Fiche étroite : sous chaque barre, le numéro de l'étape plutôt qu'un nom qui déborderait (« Développement » ne tient
   plus sous 600 px) ; le nom de l'étape en cours est dans sa tuile, et tous restent lus par les lecteurs d'écran */
.site-sheet{display:flex;flex-direction:column;gap:24px;padding:clamp(18px,2.4vw,28px);border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04);container:sheet / inline-size}
.site-sheet .kpis{margin:0}
:is(.stats-sheet,.site-sheet) .kpi{background:var(--card);box-shadow:none}
.site-sheet .track{counter-reset:step}
.site-sheet .track li{padding-top:24px;font-size:14px;counter-increment:step}
.site-sheet .track li::before{height:12px;border-radius:6px}
.site-sheet .project__msg{margin:0}
/* Deux tuiles par ligne (moins de 684 px, trois n'y tiennent plus) : la troisième prend toute la ligne, pas une demi-case */
@container sheet (max-width:683px){.site-kpis>.kpi:last-child:nth-child(odd){grid-column:1 / -1}}
@container sheet (max-width:600px){
  .site-sheet .track li{padding-top:20px;font-size:0}
  .site-sheet .track li::after{content:counter(step);content:counter(step) / "";font-family:var(--f-mono);font-size:11px;line-height:1.3}
}
.site-facts{display:flex;flex-wrap:wrap;gap:14px 44px;margin:0;padding-top:20px;border-top:1px solid var(--rule)}
.site-facts:first-child{padding-top:0;border-top:0}
.site-facts div{display:grid;gap:4px;min-width:0}
.site-facts dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;line-height:1.3;text-transform:uppercase;color:var(--muted)}
.site-facts dd{margin:0;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.site-block__lead{margin:0 0 16px;color:var(--soft)}
/* Hébergement et domaines : une ligne par service, l'échéance à la couleur de son délai (vert, ambre, rouge) */
.site-services,.site-log{margin:0;padding:0;list-style:none;overflow:hidden;border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04)}
.site-services__row{display:grid;grid-template-columns:auto 112px minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr);align-items:baseline;gap:6px 18px;padding:18px 22px}
.site-services__row+.site-services__row,.site-log li+li{border-top:1px solid var(--rule)}
/* La pastille au milieu de la première ligne (un nom de domaine peut en prendre plusieurs) ; une adresse ou un compte sans
   point de coupure passe à la ligne au lieu d'être rogné par l'arrondi de la liste */
.site-services__row .dot{align-self:start;margin-top:8px;margin-top:calc(.5lh - 4px)}
.site-services__kind{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.site-services__main{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.site-services__when{font-size:14px;color:var(--soft);overflow-wrap:anywhere}
.site-services__row.is-warn .site-services__when{color:var(--warn)}
.site-services__row.is-late .site-services__when{font-weight:600;color:var(--danger)}
.site-services__meta{font-size:14px;color:var(--muted);text-align:right;overflow-wrap:anywhere}
@media (max-width:900px){
  .site-services__row{grid-template-columns:auto minmax(0,1fr);gap:4px 12px;padding:16px 18px}
  .site-services__row>:not(.dot){grid-column:2}
  .site-services__row .dot{align-self:center;margin-top:0}
  .site-services__meta{text-align:left}
}
/* Maintenance : un passage par ligne, sa date en mono, ce qui a été fait en pastilles vertes, la note dessous */
.site-log li{display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr);align-items:baseline;gap:8px 24px;padding:18px 22px}
.site-log__when{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.site-log__done{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.site-log__note{margin:8px 0 0;font-size:15px;color:var(--soft);white-space:pre-line;overflow-wrap:anywhere}
@media (max-width:640px){.site-log li{grid-template-columns:minmax(0,1fr);padding:16px 18px}}
/* Historique : un fil vertical, une pastille par étape, la plus récente au surligneur ; la date en mono */
.site-history{padding:26px 24px 8px;border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04)}
.site-history li{margin-left:5px;padding:0 0 22px 26px;border-left:1.5px solid var(--line)}
.site-history li:last-child{border-left-color:transparent}
.site-history li::before{left:-5px;top:3px;width:8.5px;height:8.5px;border:0;background:var(--ink)}
.site-history li:first-child::before{background:var(--marker);box-shadow:0 0 0 1.5px var(--ink)}
.site-history .when{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;line-height:1.4;text-transform:uppercase;color:var(--muted)}
.site-history .what{margin:4px 0 0;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.site-history .body{margin:4px 0 0;font-size:15px;color:var(--soft);overflow-wrap:anywhere}
/* Déposer une facture : le « + » des listes repliées, puis le formulaire sur papier */
.site-block .dash-empty+.site-upload,.site-block .doc-list+.site-upload{margin-top:14px}
.site-upload__card{padding:clamp(18px,2.4vw,28px);border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04);container-type:inline-size}
.site-upload__card .form-actions{margin-top:4px;padding-top:18px;border-top-color:var(--rule)}
.storage-meter{display:grid;gap:8px;max-width:460px;margin:0 0 14px}
.storage-meter__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-size:14px;color:var(--muted)}
.storage-meter__head strong{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.storage-meter progress{-webkit-appearance:none;appearance:none;display:block;width:100%;height:6px;border:0;border-radius:3px;background:var(--line);color:var(--ink);overflow:hidden}
.storage-meter progress::-webkit-progress-bar{background:var(--line);border-radius:3px}
.storage-meter progress::-webkit-progress-value{background:var(--ink);border-radius:3px}
.storage-meter progress::-moz-progress-bar{background:var(--ink);border-radius:3px}
.storage-meter--full progress{color:var(--danger)}
.storage-meter--full progress::-webkit-progress-value{background:var(--danger)}
.storage-meter--full progress::-moz-progress-bar{background:var(--danger)}
.storage-meter .hint{margin:0}
.dash-block+.portal-overview{margin-top:28px}
@media (max-width:760px){.portal-overview{grid-template-columns:repeat(2,minmax(0,1fr))}}
.docs-head__main{display:grid;gap:28px;min-width:0}
.docs-space .flash{margin:14px 0 0}
.docs-space .storage-meter{max-width:none;margin:16px 0 0}
.docs-deposit{margin:18px 0 16px}
.docs-deposit>summary{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 20px;border-radius:999px;background:var(--ink);color:var(--wall);font-size:16px;font-weight:600;list-style:none;cursor:pointer;transition:background-color .2s,box-shadow .2s,color .2s}
.docs-deposit>summary::-webkit-details-marker{display:none}
.docs-deposit>summary:hover{background:#000;box-shadow:0 14px 24px -14px rgba(0,0,0,.55)}
.docs-deposit[open]>summary{background:var(--card);color:var(--ink);box-shadow:none}
.docs-deposit__form{display:grid;gap:16px;margin-top:18px}
.docs-deposit__form .hint{margin:0}
.docs-deposit__form .btn{width:100%}
.docs-empty{display:flex;align-items:center;gap:10px;margin:0;padding:18px 20px;border-radius:16px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04);color:var(--soft);font-size:15px}
.docs-none{margin-top:32px}

/* 16 ─ Rendez-vous -------------------------------------------------------------------------------------
   La fenêtre « rappel téléphonique » du formulaire de contact du site (e2/forms.css) en pleine page : les jours en
   pastilles, les heures en tuiles, choisis à l'encre. L'appel prévu en fiche, comme sur l'accueil, avec son feuillet de
   date au surligneur. Le calendrier du mois (_slots.php) reste celui de l'administration, que cette feuille n'atteint pas.
   Au survol, un anneau d'encre, sans transition : seul le passage à l'état choisi s'anime (rien d'animé au survol). */
/* En-tête : le titre au surligneur, la fiche de l'appel à côté (la fiche des engagements du support, section 14) ; le même
   pour Mes accès et Mes informations (section 17) */
:is(.rdv-head,.fiche-head){display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:24px 56px;align-items:start}
:is(.rdv-head,.fiche-head) .hello{margin:0}
@media (max-width:1100px){:is(.rdv-head,.fiche-head){grid-template-columns:minmax(0,1fr)}:is(.rdv-fiche,.fiche){max-width:560px}}
/* Chaque bloc mesure sa propre largeur : la fiche d'un appel passe sur deux rangées dès que la place manque (de 761 à
   1 000 px de fenêtre, le texte n'avait plus que 117 px à côté des boutons), pas seulement sur téléphone */
.rdv-block{container-type:inline-size}
/* L'appel prévu, ou le premier créneau libre : une fiche papier, la date en grand ; le jour même, le fond de l'étape en
   cours (comme sur l'accueil). Sans feuillet (aucun créneau libre), le texte et le bouton seulement */
.rdv-calls{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.rdv-call{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px 24px;padding:20px 24px;border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04)}
.rdv-call--text{grid-template-columns:minmax(0,1fr) auto}
.rdv-call.is-today{background:var(--warn-soft)}
.rdv-call__text{display:grid;gap:4px;min-width:0}
.rdv-call__text p{margin:0}
.rdv-call__when{font-family:var(--f-disp);font-size:clamp(22px,.5vw + 18px,26px);font-weight:800;line-height:1.15;letter-spacing:-.025em;color:var(--ink)}
.rdv-call__topic{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.rdv-call__meta{font-size:14px;color:var(--soft);overflow-wrap:anywhere}
.rdv-call__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.rdv-call__late{max-width:36ch;margin:0;font-size:14px;color:var(--soft)}
/* Feuillet de date : le jour et le mois en mono, le quantième en Funnel Display. Celui du prochain appel (et du créneau
   choisi, dans la fiche de la réservation) au surligneur cerclé d'encre, comme la barre la plus récente ; celui d'un
   créneau encore libre sur la carte */
.rdv-leaf{display:grid;justify-items:center;align-content:center;gap:2px;width:68px;min-height:80px;padding:8px 4px;border-radius:14px;background:var(--card);color:var(--ink);text-align:center}
.rdv-leaf>span{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;line-height:1.3;text-transform:uppercase}
.rdv-leaf>strong{font-family:var(--f-disp);font-size:30px;font-weight:800;line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rdv-call.is-next .rdv-leaf,.rdv-fiche__slot .rdv-leaf{background:var(--marker);box-shadow:inset 0 0 0 1.5px var(--ink)}
/* Ajouter à mon agenda : le menu des listes du site (papier, ombre longue) ; le bouton reste plein tant qu'il est ouvert */
.rdv-add__menu{min-width:250px;padding:6px;border:0;border-radius:16px;background:var(--paper);box-shadow:0 30px 60px -28px rgba(0,0,0,.4),0 0 0 1px rgba(18,18,18,.06)}
.rdv-add__menu a{display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 12px;border-radius:10px;color:var(--ink);font-size:15px;font-weight:600;text-decoration:none}
.rdv-add__menu a:hover,.rdv-add__menu a:focus-visible{background:var(--card);color:var(--ink)}
.rdv-add[open]>summary{background:var(--ink);color:var(--wall)}
@container (max-width:760px){
  .rdv-call{grid-template-columns:auto minmax(0,1fr);gap:14px 16px;padding:18px}
  .rdv-call--text{grid-template-columns:minmax(0,1fr)}
  .rdv-call__actions{grid-column:1 / -1;justify-content:flex-start}
  .rdv-leaf{width:58px;min-height:70px}
  .rdv-leaf>strong{font-size:26px}
  /* Les boutons calés à gauche : le menu part du bord gauche de son bouton (app.css ne le faisait que sous 640 px de
     fenêtre, et il sortait de la carte entre 641 et 760) */
  .rdv-add__menu{left:0;right:auto}
}
/* Passés et annulés : des lignes sur papier, la date en mono, l'issue en pastille */
.rdv-past{margin:0;padding:0;list-style:none;overflow:hidden;border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04)}
.rdv-past li{display:grid;grid-template-columns:minmax(180px,250px) minmax(0,1fr) auto;align-items:center;gap:6px 24px;padding:16px 22px}
.rdv-past li+li{border-top:1px solid var(--rule)}
.rdv-past__when{font-family:var(--f-mono);font-size:12px;line-height:1.5;color:var(--muted)}
.rdv-past__topic{color:var(--ink);overflow-wrap:anywhere}
@container (max-width:640px){.rdv-past li{grid-template-columns:minmax(0,1fr) auto;padding:14px 18px}.rdv-past__when{grid-column:1 / -1}}
/* Réserver : deux feuilles numérotées (celles de la nouvelle demande), la fiche « Votre appel » à côté ; le créneau choisi
   en tête de la seconde, au fond de l'étape en cours. Les champs prennent la largeur de la feuille, comme la bande du
   créneau et les boutons */
.rdv-form .form-step+.form-step{margin-top:16px}
.rdv-form__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;margin-top:28px}
.rdv-form .hint{margin:16px 0 0}
.rdv-fields{display:grid;gap:18px}
.rdv-chosen{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;margin:0 0 22px;padding:6px 16px;border-radius:14px;background:var(--warn-soft);color:var(--ink)}
.rdv-chosen>span{padding:6px 0}
.rdv-chosen .link-btn{min-height:44px;padding:0;border:0;background:none;font:inherit;font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;cursor:pointer}
.rdv-empty{margin:0;color:var(--soft)}
@media (max-width:560px){.rdv-form__actions .btn{flex:1 1 auto}}
/* La fiche « Votre appel » : dès qu'une heure est choisie, son feuillet et l'heure en grand, au-dessus des faits */
.rdv-fiche__slot{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule)}
.rdv-fiche__slot .rdv-leaf{width:58px;min-height:70px}
.rdv-fiche__slot .rdv-leaf>strong{font-size:26px}
.rdv-fiche__slot p{display:grid;gap:2px;min-width:0;margin:0}
.rdv-fiche__slot p>span:first-child{font-size:14px;color:var(--muted)}
.rdv-fiche__slot [data-recap-time]{font-family:var(--f-disp);font-size:26px;font-weight:800;line-height:1.1;letter-spacing:-.025em;color:var(--ink)}
/* Les jours : la rangée de pastilles du site, ses flèches, et un fondu au seul bord derrière lequel il reste des jours
   (app.js). Sans script, elle ne s'affiche pas : les jours se suivent, chacun avec son titre */
.rdv-days{display:none}
.rdv-picker.is-ready .rdv-days{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:4px;margin:0 0 16px}
/* Positionnée : le texte des lecteurs d'écran de chaque pastille (sr-only, en position absolue) reste dans la rangée qui
   défile ; sinon il en sortait, et la page entière défilait de côté. Le défilement s'arrête toujours au début d'un jour,
   juste après le fondu (32 px) : la rangée commence par une date entière, jamais par une date entamée */
.rdv-days__list{--fade-l:0px;--fade-r:0px;position:relative;display:flex;gap:8px;overflow-x:auto;padding:6px;scroll-snap-type:x mandatory;scroll-padding-inline:32px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent)}
.rdv-days__list::-webkit-scrollbar{display:none}
.rdv-days__list.has-before{--fade-l:32px}
.rdv-days__list.has-after{--fade-r:32px}
.rdv-days__arrow{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--card);color:var(--ink);cursor:pointer}
.rdv-days__arrow:hover:not(:disabled){box-shadow:inset 0 0 0 1.5px var(--ink)}
.rdv-days__arrow:disabled{background:transparent;color:var(--line-strong);box-shadow:inset 0 0 0 1px var(--line);cursor:default}
.rdv-days__arrow .icon{width:18px;height:18px;transform:rotate(90deg)}
.rdv-days__arrow--next .icon{transform:rotate(-90deg)}
/* Téléphone : la rangée glisse sous le doigt ; sans les flèches, elle montre deux jours et demi au lieu d'un et demi */
@media (max-width:560px){.rdv-picker.is-ready .rdv-days{grid-template-columns:minmax(0,1fr);margin-inline:-6px}.rdv-days__arrow{display:none}}
.rdv-days__day{flex:none;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--card);color:var(--soft);font:inherit;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer;scroll-snap-align:start}
.rdv-days__day:hover{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.rdv-days__day[aria-pressed=true]{background:var(--ink);color:var(--wall);box-shadow:none;transition:background-color .3s var(--ease),color .3s var(--ease)}
.rdv-days__day:focus-visible{outline-offset:2px}
/* Les heures : le titre du jour choisi, puis le matin et l'après-midi en tuiles sur la carte ; l'heure choisie à l'encre.
   Le vrai bouton radio (invisible) reste dans sa grille : le focus au clavier ne fait pas sauter la page */
.rdv-times__title{margin:0 0 16px;font-family:var(--f-disp);font-size:20px;font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.rdv-times__part+.rdv-times__part{margin-top:18px}
.rdv-times__label{margin:0 0 8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rdv-times__grid{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.rdv-times .slot{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:52px;padding:10px 12px;border:0;border-radius:14px;background:var(--card);color:var(--ink);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer}
.rdv-times .slot:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.rdv-times .slot-radio:checked+.slot{background:var(--ink);color:var(--wall);box-shadow:none;transition:background-color .3s var(--ease),color .3s var(--ease)}
.rdv-times .slot-radio:focus-visible+.slot{outline:3px solid var(--ink);outline-offset:3px}
/* L'heure actuelle d'un appel qu'on déplace : un repère au surligneur doux cerclé d'encre, « actuel » dessous, pas un choix */
.rdv-times .slot.is-current{flex-direction:column;gap:0;padding-block:6px;background:var(--warn-soft);box-shadow:inset 0 0 0 1.5px var(--ink);cursor:default}
.rdv-times .slot.is-current small{font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.06em;line-height:1.3;text-transform:uppercase;color:var(--soft)}
.rdv-picker:not(.is-ready) .rdv-times__day+.rdv-times__day{margin-top:26px;padding-top:24px;border-top:1px solid var(--rule)}
.rdv-picker.is-ready .rdv-times__day:not(.is-active){display:none}

/* Contraste élevé (Windows) : barres, rails, frise, pastilles du fil et repères de l'onglet et de la période aux couleurs du
   système (ce sont des fonds, que le système efface) ; les tuiles et la fiche gardent un cadre (leur ombre disparaît) */
@media (forced-colors:active){
  .kpi,.stats-sheet,.site-sheet,.site-services,.site-log,.site-history,.site-upload__card{border:1px solid CanvasText}
  .storage-meter progress{-webkit-appearance:auto;appearance:auto}
  .track li::before{forced-color-adjust:none;background:GrayText!important}
  .track li.is-done::before,.track--online li::before{background:CanvasText!important}
  .track li.is-current::before{background:linear-gradient(90deg,CanvasText 0 var(--fill,50%),Highlight var(--fill,50%))!important;box-shadow:none}
  .vbars__col i,.rank__bar i,.shares__bar i,.site-history li::before{forced-color-adjust:none;background:CanvasText}
  .vbars--last .vbars__col:last-child i,.rank tr.is-top .rank__bar i,.shares li.is-top .shares__bar i,.site-history li:first-child::before,.stats-legend__last::before{forced-color-adjust:none;background:Highlight;box-shadow:none}
  .shares__bar{forced-color-adjust:none;background:Canvas;box-shadow:inset 0 0 0 1px GrayText}
  .vbars__cols{forced-color-adjust:none;background:none;box-shadow:inset 0 -1px 0 CanvasText}
  .vbars__col.is-hover{background:Highlight}
  .chart-tip{border:1px solid CanvasText}
  /* L'onglet ouvert : un trait sous le nom (le surligneur passait sous le fond que le système peint derrière le texte) */
  .tabs{border-bottom:1px solid CanvasText}
  .tabs a[aria-current=page]::after{forced-color-adjust:none;z-index:0;left:0;right:0;bottom:6px;height:3px;border-radius:0;background:CanvasText}
  .vbars__data>summary::after{forced-color-adjust:none;background:linear-gradient(CanvasText,CanvasText) center/10px 1.5px no-repeat,linear-gradient(CanvasText,CanvasText) center/1.5px 10px no-repeat}
}
/* Contraste élevé (Windows), rendez-vous : les fiches, les feuillets, les pastilles de jour et les tuiles d'heure gardent
   un cadre. Le jour et l'heure choisis prennent la couleur de sélection du système ; le feuillet du prochain appel (ou du
   créneau choisi) un cadre épais, pas cette couleur, qui dirait « choisi » ; l'heure actuelle d'un appel déplacé, un
   cadre en tirets */
@media (forced-colors:active){
  .rdv-call,.rdv-past,.rdv-fiche,.rdv-add__menu,.rdv-leaf,.rdv-chosen,.rdv-times .slot{border:1px solid CanvasText}
  .rdv-call.is-next .rdv-leaf,.rdv-fiche__slot .rdv-leaf{border-width:2px}
  .rdv-times .slot.is-current{border:2px dashed CanvasText}
  .rdv-days__day,.rdv-days__arrow{border:1px solid ButtonText}
  .rdv-days__arrow:disabled{border-color:GrayText}
  .rdv-days__day[aria-pressed=true],.rdv-times .slot-radio:checked+.slot{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
  /* Leur contour de focus prend la couleur du texte : l'encre #121212 disparaissait sur un thème sombre */
  .rdv-days__day[aria-pressed=true]:focus-visible,.rdv-times .slot-radio:checked:focus-visible+.slot{outline-color:CanvasText}
  /* Le fondu rendait semi-transparent le texte des jours du bord */
  .rdv-days__list{-webkit-mask-image:none;mask-image:none}
}

/* 17 ─ Mes accès et Mes informations ---------------------------------------------------------------------
   Mes accès en pas à pas : « Quel compte ? » à gauche (des tuiles rangées par usage), le guide du compte choisi à droite
   (trois étapes numérotées au surligneur, comme « Ce qui vous attend » de l'accueil) ; au téléphone, la liste puis le
   guide seul. Mes informations se lit comme le détail d'un document : libellé en sourdine, valeur en gras, l'action au
   bout de la ligne. La fiche de chaque page est celle des engagements du support (.fiche, section 14) ; un formulaire
   est une feuille, la fiche à côté (la mise en page de la réservation d'un appel). */
.info-block{container-type:inline-size}
.info-lead{margin:-4px 0 16px;color:var(--soft)}
.info-rows{margin:0;padding:0;list-style:none;border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04)}

.vault-desk{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:28px;align-items:start;margin-top:8px}
.vault-pick__title{margin:0 0 16px;font-size:26px;letter-spacing:-.03em}
.vault-group{margin:0 0 20px}
.vault-group__title{margin:0 0 8px;font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.06em;line-height:1.4;text-transform:uppercase;color:var(--muted)}
.vault-group__empty{margin:0;padding:12px 16px;border:1px dashed var(--line-strong);border-radius:14px;font-size:15px;color:var(--muted)}
.vault-tiles{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.vault-tile{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:80px;padding:14px 18px 14px 14px;border-radius:18px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04);color:var(--ink);text-decoration:none;transition:box-shadow .2s}
.vault-tile:hover{box-shadow:0 0 0 1.5px var(--ink)}
.vault-tile[aria-current="true"]{box-shadow:0 0 0 2.5px var(--ink)}
.vault-tile__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--card);transition:background-color .2s}
.vault-tile__icon .icon{width:26px;height:26px}
.vault-tile[aria-current="true"] .vault-tile__icon{background:var(--marker)}
.vault-tile__text{min-width:0}
.vault-tile__name{display:block;font-family:var(--f-disp);font-size:20px;font-weight:700;line-height:1.2;letter-spacing:-.02em;overflow-wrap:anywhere}
.vault-tile__what{display:block;margin-top:2px;font-size:15px;line-height:1.35;color:var(--soft);overflow-wrap:anywhere}
.vault-tile .arr{font-size:20px}
.vault-add{display:flex;align-items:center;gap:14px;min-height:80px;margin-top:4px;padding:14px 18px 14px 14px;border:1.5px dashed var(--line-strong);border-radius:18px;color:var(--ink);font-weight:700;text-decoration:none;transition:border-color .2s}
.vault-add:hover{border-color:var(--ink)}
.vault-add__icon{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:14px;box-shadow:inset 0 0 0 1.5px var(--ink)}

.vault-guide{min-width:0;padding:clamp(20px,2.4vw,30px);border-radius:24px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04);container-type:inline-size}
.vault-back{display:none}
.vault-guide__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.vault-guide__head h2{margin:0;font-size:clamp(24px,.6vw + 20px,30px);letter-spacing:-.03em;overflow-wrap:anywhere}
.vault-guide__head h2:focus:not(:focus-visible){outline:none}
.vault-who{padding:4px 10px;border-radius:999px;background:var(--card);font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;line-height:1.4;text-transform:uppercase;color:var(--soft);white-space:nowrap}
.vault-who--you{background:var(--marker);color:var(--ink)}
.vault-guide__intro{margin:10px 0 0;max-width:62ch;color:var(--soft)}
.vault-guide__none{margin:20px 0 0;padding:16px 20px;border-radius:16px;background:var(--card);color:var(--soft)}
.vault-steps{display:grid;gap:12px;margin:22px 0 0;padding:0;list-style:none;counter-reset:vault-step}
.vault-steps>li{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:18px;align-items:center;padding:18px 20px;border-radius:18px;background:var(--card);counter-increment:vault-step}
.vault-steps>li::before{content:counter(vault-step);grid-column:1;grid-row:1 / span 2;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--marker);font-family:var(--f-disp);font-size:24px;font-weight:800;color:var(--ink)}
.vault-steps>li>*{grid-column:2}
.vault-steps h3{margin:0 0 10px;font-size:21px;letter-spacing:-.02em}
.vault-step__do{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-width:0}
.vault-step__do>.vault-value,.vault-steps .pw__value{padding:6px 12px;border-radius:10px;background:var(--paper);font-size:16px}
.vault-steps .pw__value[data-shown]{background:var(--warn-soft)}
.vault-steps .pw{gap:8px 10px}
.vault-steps .pw__actions{gap:8px}
.vault-steps .pw .btn--ghost{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.vault-steps .pw .btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.vault-steps .pw__notes{flex-basis:100%;margin-top:4px;background:var(--paper)}
.vault-step__hint{flex-basis:100%;margin:2px 0 0;font-size:15px;color:var(--soft)}
.vault-guide__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:20px;padding-top:18px;border-top:1px solid var(--rule)}
.vault-guide__foot p{flex:1 1 280px;margin:0;font-size:15px;color:var(--soft)}
.vault-guide--empty h2{margin:0}
.vault-guide--empty p{margin:10px 0 20px;max-width:62ch;color:var(--soft)}

/* Identifiants, serveurs, dossiers : en mono, à la ligne n'importe où plutôt que coupés */
.vault-value{min-width:0;font-family:var(--f-mono);font-size:14px;letter-spacing:0;color:var(--ink);overflow-wrap:anywhere}
.vault-value--shown{padding:4px 10px;border-radius:8px;background:var(--warn-soft);word-break:break-all}
.pw__value{font-size:14px}
.pw__value[data-shown]{padding:4px 10px;border-radius:8px;background:var(--warn-soft)}
.pw__notes{min-width:0;margin-top:8px;padding:10px 12px;border-radius:12px;background:var(--card);font-size:14px;color:var(--soft);overflow-wrap:anywhere}
/* Réglages de messagerie, FTP ou base : repliés sous les étapes, le « + » des listes repliées qui pivote en « × » */
.vault-more{margin:20px 0 0;border-top:1px solid var(--rule)}
.vault-more>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;font-size:16px;font-weight:700;color:var(--ink);list-style:none;cursor:pointer}
.vault-more>summary::-webkit-details-marker{display:none}
.vault-more>summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(currentColor,currentColor) center/12px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 12px no-repeat}
.vault-more[open]>summary::after{transform:rotate(45deg)}
.vault-servers{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.vault-servers li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:18px;padding:10px 0;border-bottom:1px solid var(--rule)}
.vault-servers__name{font-size:15px;font-weight:600;color:var(--ink)}
.vault-servers__host{grid-column:1 / -1;grid-row:2;display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;min-width:0}
.vault-servers__port{font-family:var(--f-mono);font-size:11px;letter-spacing:.02em;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.vault-more__note{margin:12px 0 4px;font-size:14px;line-height:1.5;color:var(--soft)}
.vault-conn{margin:0;border-top:1px solid var(--rule)}
.vault-conn>div{display:grid;grid-template-columns:8.5rem minmax(0,1fr);align-items:center;column-gap:24px;min-height:52px;padding:4px 0;border-bottom:1px solid var(--rule)}
.vault-conn dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;line-height:1.3;text-transform:uppercase;color:var(--muted)}
.vault-conn dd{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;min-width:0;margin:0;color:var(--ink)}
@container (min-width:640px){
  .vault-servers li{grid-template-columns:8.5rem minmax(0,1fr) auto;min-height:52px;padding:4px 0}
  .vault-servers__host{grid-column:auto;grid-row:auto}
}
@container (max-width:479px){
  .vault-conn>div{grid-template-columns:minmax(0,1fr);padding:10px 0}
}
@media (max-width:959px){
  .vault-desk{grid-template-columns:minmax(0,1fr);margin-top:32px}
  .vault--open .vault-desk{margin-top:0}
  .vault:not(.vault--open) .vault-guide:not(.vault-guide--empty),.vault--open :is(.vault-head,.vault-pick){display:none}
  .vault-back{display:inline-flex;margin:0 0 12px -16px}
}
@media (max-width:640px){
  .vault-guide{border-radius:20px}
  .vault-steps>li{grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:16px}
  .vault-steps>li::before{grid-row:1;width:40px;height:40px;font-size:19px}
  .vault-steps h3{margin:0;font-size:19px}
  .vault-steps .vault-step__do{grid-column:1 / -1;margin-top:12px}
  .vault-step__do>.btn--primary{flex:1 1 100%}
}

/* Mes informations : une information par ligne, étagée d'abord (libellé, valeur, actions l'un sous l'autre) ; l'action
   est « Modifier », ou la date où l'information se modifie de nouveau et le retour à l'ancienne valeur (rappelée sous
   la nouvelle) */
.info-row{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:14px 18px}
.info-row+.info-row{border-top:1px solid var(--rule)}
.info-row>dt{font-size:14px;color:var(--muted)}
.info-row__value{margin:0;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.info-row__before{display:block;margin-top:2px;font-size:14px;font-weight:400;color:var(--muted)}
.info-row__ref{font-family:var(--f-mono);font-size:14px;font-weight:500}
/* Les actions l'une sous l'autre : le verrou, puis le retour */
.info-row__actions{display:flex;flex-direction:column;align-items:flex-start;margin:0}
/* « Modifier » (sans fond) sous la valeur : son texte aligné sur elle */
.info-row__actions .btn--ghost{margin-left:-16px}
/* Une phrase (« Une erreur ? Écrivez-moi ») : du texte suivi, pas des éléments espacés */
.info-row__note{display:block;font-size:14px;color:var(--muted)}
.info-row__lock{display:inline-flex;align-items:center;gap:6px;padding-top:4px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;line-height:1.3;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.info-row__lock .icon{width:14px;height:14px}
.info-row__revert{display:inline-flex;margin:0}
.info-row__revert .link-btn{min-height:44px}
/* À partir de 640 px de bloc (sous-grille connue) : libellé | valeur | actions sur une ligne, colonnes partagées par toutes
   les lignes d'une liste, les valeurs alignées. La colonne des libellés ne dépend que de la largeur du bloc (28 cqi, de
   120 à 240 px de texte) : « Vous » et « Votre dossier » ont leurs valeurs au même endroit, quelles que soient leurs
   actions. La colonne des actions (la plus large : le verrou au-dessus du retour, environ 212 px) laisse au moins 12 rem
   à la valeur ; côte à côte, verrou et retour prenaient jusqu'à 424 px et « 06 12 34 56 78 » s'empilait lettre par
   lettre vers 800 px de fenêtre */
@supports (grid-template-columns:subgrid){
  @container (min-width:640px){
    .info-rows{display:grid;grid-template-columns:clamp(144px,28cqi,264px) minmax(12rem,1fr) auto;column-gap:24px}
    .info-row{grid-column:1 / -1;grid-template-columns:subgrid;align-items:baseline;align-content:center;row-gap:4px;min-height:68px;padding:12px 24px}
    .info-row>dt{font-size:inherit}
    .info-row__actions{align-items:flex-end;text-align:right}
    /* Au bout de la ligne, « Modifier » aligne son texte sur le bord droit des autres actions */
    .info-row__actions .btn--ghost{margin-left:0;margin-right:-16px}
  }
}
/* Vos données personnelles : le texte sur la carte, sur toute la largeur */
.info-note{padding:20px 24px;border-radius:20px;background:var(--card);color:var(--soft)}
.info-note p{margin:0}
.info-note p+p{margin-top:10px}

/* Formulaires (un accès, une information) : une feuille, la fiche à côté ; les champs prennent la largeur de la feuille
   (la grille d'app.css passe d'elle-même sur une colonne dans une feuille étroite) */
.form-sheet{padding:clamp(20px,2.4vw,28px);border-radius:20px;background:var(--paper);box-shadow:0 0 0 1px rgba(18,18,18,.04);container-type:inline-size}
.form-sheet__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;margin-top:28px}
.vault-form{gap:18px 20px}
.info-form__fields{display:grid;gap:18px}
.info-form__postal{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:18px 20px}
@container (max-width:480px){.info-form__postal{grid-template-columns:minmax(0,1fr)}}
/* « Effacer le mot de passe enregistré » sous l'aide de son champ, pas au pied de la grille ; une case, pas un titre de
   champ (.field>label la mettait en 14 px gras encre, au poids de « Nouvelles notes ») */
.field>.check{margin-top:4px;font-size:15px;font-weight:400;color:var(--soft)}
.form-sheet__danger{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin-top:20px;padding:0 4px}
.form-sheet__danger p{flex:1 1 300px;margin:0;font-size:14px;color:var(--muted)}
.fiche__note{margin:0;padding:12px 0 10px;border-top:1px solid var(--rule);font-size:14px;line-height:1.5;color:var(--soft)}
.fiche__value{overflow-wrap:anywhere}
/* Fiche à côté d'un formulaire (290 px au plus serré) : une valeur qui ne tient pas à côté de son libellé passe à la
   ligne, à droite, au lieu de sortir de la fiche (« Prochaine modification », « le 27 septembre 2026 ») */
.fiche dl>div{flex-wrap:wrap}
.fiche dd{margin-left:auto}
/* Sans JavaScript : identifiant, mot de passe et notes sur une feuille ; les notes en paragraphes l'un sous l'autre, à la
   ligne n'importe où, leur libellé sur leur première ligne */
.vault-reveal .vault-conn{margin:0}
.vault-reveal .vault-conn>div{align-items:baseline}
.vault-reveal__notes{display:block;overflow-wrap:anywhere}
.vault-reveal__notes p{margin:0}
.vault-reveal__notes p+p{margin-top:8px}
@media (max-width:560px){.form-sheet__actions .btn{flex:1 1 auto}}
/* Contraste élevé (Windows) : les fiches, tuiles, guides et feuilles gardent un cadre (leur ombre disparaît), la tuile
   choisie un cadre épais ; le « + » des réglages repliés est redessiné à la couleur du texte */
@media (forced-colors:active){
  .fiche,.vault-tile,.vault-guide,.vault-steps>li,.info-rows,.info-note,.form-sheet,.pw__value[data-shown],.pw__notes,.vault-value--shown{border:1px solid CanvasText}
  .vault-tile[aria-current="true"]{border-width:3px}
  /* Le « Modifier » sans fond y a un cadre : sans ses marges négatives (qui alignaient son texte), il ne dépasse plus les
     autres boutons */
  .vault-back,.info-row__actions .btn--ghost{margin:0}
  .vault-more>summary::after{forced-color-adjust:none;background:linear-gradient(CanvasText,CanvasText) center/12px 2px no-repeat,linear-gradient(CanvasText,CanvasText) center/2px 12px no-repeat}
}

.error-page{background:var(--wall)}
.error-page .code{font-family:var(--f-disp);font-size:clamp(72px,10vw,120px);color:var(--niche)}
.error-page h1{font-size:clamp(28px,1.2vw + 20px,40px)}
.error-page p{color:var(--soft)}
@media print{
  .site-header,.site-footer,.to-top,.skip-link,.tabbar{display:none!important}
  body{background:#fff}
  /* Texte clair sur fond encre : le fond s'imprime aussi, sinon le texte disparaît sur le papier */
  :is(.badge--progress,.chip[aria-current=true],.seg__item input:checked+span,.steps-next li,.acct__avatar){-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* Barres, rails, frise et pastilles du fil : des fonds, que l'impression effacerait (le graphique serait vide). La
     propriété s'hérite : l'élément suffit pour ses ::before (un pseudo-élément dans :is() rendrait l'entrée ignorée) */
  :is(.vbars__col i,.rank__bar,.rank__bar i,.shares__bar,.shares__bar i,.site-history li,.track li,.stats-legend__last,.dot){-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* Rendez-vous : le feuillet du prochain appel, le jour et l'heure choisis (texte clair sur l'encre), l'heure actuelle */
  :is(.rdv-leaf,.rdv-days__day[aria-pressed=true],.rdv-times .slot-radio:checked+.slot,.rdv-times .slot.is-current){-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* Exemples d'écran pas encore vus : imprimés complets */
  .demo-armed :is(.client-demo-bars span,.fx-steps li>span,.fx-queries i,.fx-fakebtn,.fx-chat p,.client-demo-rows li>*,.fx-docs li>*,b),.demo-armed span:last-child::before{visibility:visible!important;transform:none!important;opacity:1!important;animation:none!important}
}
/* Contraste élevé (Windows) : les fonds sont remplacés par le système ; les traits du burger et les pastilles
   gardent la couleur du texte, et les champs un vrai contour de focus (leur anneau est une ombre, effacée) */
@media (forced-colors:active){
  .burger::before,.burger>span:first-child,.app-menu__dot,.dot,.health-list__dot{forced-color-adjust:none;background:CanvasText}
  /* Boutons : leur contour est une ombre, que le système efface (« Déplacer », « Annuler » se lisaient comme du texte) ;
     désactivé, le cadre se grise avec le texte */
  .btn{border:1px solid ButtonText}
  .btn[disabled]{border-color:GrayText}
}
input:not([type=checkbox]):not([type=radio]):focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid transparent;outline-offset:2px}

/* 9 ─ Mouvement -------------------------------------------------------------------------------------
   Tout ce qui bouge est déclaré ici, sous « no-preference » : si le système demande moins d'animations,
   la page reste immobile et complète. Jamais d'opacité partielle sur du texte au départ d'une animation. */
/* Moins d'animations : app.css coupe les transitions des éléments (*), pas celles des pseudo-éléments */
@media (prefers-reduced-motion:reduce){*::before,*::after{transition:none!important;animation:none!important}}
@media (prefers-reduced-motion:no-preference){
  /* Fondu court entre deux pages ; déclaré ici, sinon le navigateur ferait son propre fondu même sans animations */
  @view-transition{navigation:auto}
  /* L'en-tête ne fait pas partie du fondu : il reste en place d'une page à l'autre, seul le contenu change */
  .site-header{view-transition-name:site-header}
  html{scroll-behavior:smooth}
  .motion-btn{display:inline-flex}
  ::view-transition-old(root){animation:e2-vt-out .18s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:e2-vt-in .34s var(--ease) both}
  @keyframes e2-vt-out{to{opacity:0}}
  @keyframes e2-vt-in{from{opacity:0;transform:translateY(8px)}}
  /* Boucles (classe .lp) : en pause hors écran (.idle, posée par app.js) ou à la demande (.paused) */
  .idle .lp,.idle.lp,.paused .lp,.idle .lp::after,.paused .lp::after{animation-play-state:paused!important}
  @supports (animation-timeline:scroll()){
    /* Fil de lecture : sa longueur suit le défilement de la page */
    .head-progress{display:block;position:fixed;top:0;left:0;right:0;z-index:1010;height:2px;background:var(--accent);transform-origin:0 50%;pointer-events:none;animation:e2-grow linear both;animation-timeline:scroll(root)}
    @keyframes e2-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
  /* Soulignements de l'en-tête et des onglets, burger, menu du compte et « + » des listes repliées */
  .app-nav a::after,.head-link::after,.tabs a::after,.dash-more>summary::after,.vbars__data>summary::after,.vault-more>summary::after{transition:transform .35s var(--ease)}
  .burger::before,.burger>span:first-child{transition:transform .35s var(--ease),top .35s var(--ease)}
  .acct__chev{transition:transform .25s var(--ease)}
  /* Écrans invités : le surligneur passe une fois sous le mot clé du titre ; dans la maquette, les barres
     montent l'une après l'autre et la pastille « nouveau » pulse */
  .gate h1 em{background-size:0 100%;background-repeat:no-repeat;animation:e2-mark 1s var(--ease) .3s forwards}
  @keyframes e2-mark{to{background-size:100% 100%}}
  /* Pastilles « nouveau » et « incident » : un anneau qui s'élargit et s'efface, en boucle tant que leur zone est à
     l'écran (.loop-zone) et que les animations ne sont pas en pause */
  .demo-dot.is-new::after,.dot--new.lp::after,.dot--danger.lp::after,.health-list__dot.lp::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--ink);animation:e2-ring 2.2s ease-out infinite}
  .health-list__dot.lp::after,.dot--danger.lp::after{border-color:var(--danger)}
  @keyframes e2-ring{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2)}}
  /* Exemples d'écran (maquette de la connexion, écrans de « Ce que comprend votre espace ») : une courte
     démonstration quand on les regarde. app.js arme [data-demo] (.demo-armed) et pose .demo-seen quand l'écran croise
     le milieu de la fenêtre (ou y tient en entier) ; il la retire quand l'écran est sorti de la fenêtre, pour la
     rejouer au retour. Armé et pas encore vu, l'écran attend vide ; en pause (.paused) ou à l'impression, il est
     complet. Des transformations seulement, jamais de texte en transparence : les barres montent, les bulles et les
     chiffres grandissent depuis leur coin, les lignes montent derrière leur filet (comme les titres du site). */
  .demo-armed{--demo-ease:cubic-bezier(.45,.05,.15,1)}
  html:not(.paused) .demo-armed:not(.demo-seen) :is(.client-demo-bars span,.fx-steps li>span){transform:scaleY(0)}
  html:not(.paused) .demo-armed:not(.demo-seen) .fx-queries i{transform:scaleX(0)}
  html:not(.paused) .demo-armed:not(.demo-seen) :is(.fx-fakebtn,.fx-chat p),html:not(.paused) .fx-code.demo-armed:not(.demo-seen) b{transform:scale(0)}
  /* Lignes : en attente, elles sont masquées (visibility, tout ou rien) et placées sous leur rangée ; un décalage de
     140 % de leur propre hauteur laissait dépasser une pastille ou une date plus petite que la rangée */
  html:not(.paused) .demo-armed:not(.demo-seen) :is(.client-demo-rows li,.fx-docs li)>*{visibility:hidden;transform:translateY(calc(100% + 5em))}
  html:not(.paused) .fx-code.demo-armed:not(.demo-seen) span:last-child::before{transform:scale(.7);opacity:0}
  /* Visibilité web : les barres montent l'une après l'autre, puis les lignes à pastilles */
  html:not(.paused) .demo-armed.demo-seen .client-demo-bars span{animation:e2-bar 1.2s var(--demo-ease) both;animation-delay:calc(.25s + var(--i,0) * 110ms)}
  .client-demo-bars span:nth-child(2){--i:1}.client-demo-bars span:nth-child(3){--i:2}.client-demo-bars span:nth-child(4){--i:3}.client-demo-bars span:nth-child(5){--i:4}
  .client-demo-bars span:nth-child(6){--i:5}.client-demo-bars span:nth-child(7){--i:6}.client-demo-bars span:nth-child(8){--i:7}.client-demo-bars span:nth-child(9){--i:8}.client-demo-bars span:nth-child(10){--i:9}
  @keyframes e2-bar{from{transform:scaleY(0)}}
  html:not(.paused) .demo-armed.demo-seen .client-demo-rows li>*{animation:fx-up .9s var(--demo-ease) both;animation-delay:calc(1.7s + var(--r,0) * 280ms)}
  .client-demo-rows li:nth-child(2){--r:1}.client-demo-rows li:nth-child(3){--r:2}
  /* Masquée pendant son délai (la première image, tenue par « both »), la ligne apparaît à son départ et monte de sous sa
     rangée, qui la masque ; 5 em de plus que sa hauteur la placent sous une rangée de trois lignes. Animations coupées
     (extension, feuille de l'utilisateur) : la ligne s'affiche simplement, en place */
  @keyframes fx-up{from{visibility:hidden;transform:translateY(calc(100% + 5em))}}
  /* Projet : les marches montent l'une après l'autre, puis le bouton de la prévisualisation */
  html:not(.paused) .demo-armed.demo-seen .fx-steps li>span{transform-origin:50% 100%;animation:fx-rise 1.1s var(--demo-ease) both;animation-delay:calc(.25s + var(--i,0) * 200ms)}
  .fx-steps li:nth-child(2)>span{--i:1}.fx-steps li:nth-child(3)>span{--i:2}.fx-steps li:nth-child(4)>span{--i:3}.fx-steps li:nth-child(5)>span{--i:4}
  html:not(.paused) .demo-armed.demo-seen .fx-fakebtn{transform-origin:0 50%;animation:fx-pop .7s var(--demo-ease) 1.9s both}
  @keyframes fx-rise{from{transform:scaleY(0)}}
  /* Recherches : chaque barre se remplit (les lignes de surveillance suivent, règle commune ci-dessus) */
  html:not(.paused) .demo-armed.demo-seen .fx-queries i{animation:fx-grow 1.4s var(--demo-ease) both;animation-delay:calc(.25s + var(--i,0) * 240ms)}
  .fx-queries li:nth-child(2) i{--i:1}.fx-queries li:nth-child(3) i{--i:2}.fx-queries li:nth-child(4) i{--i:3}
  @keyframes fx-grow{from{transform:scaleX(0)}}
  /* Demande de support : les bulles arrivent tour à tour, au rythme d'un échange, puis l'appel réservé */
  html:not(.paused) .demo-armed.demo-seen .fx-chat p{animation:fx-pop .7s var(--demo-ease) var(--d,0s) both}
  .fx-chat .is-me{transform-origin:100% 100%}
  .fx-chat .is-them{transform-origin:0 100%}
  .fx-chat p:nth-child(1){--d:.3s}.fx-chat p:nth-child(2){--d:1.5s}.fx-chat p:nth-child(3){--d:2.7s}
  html:not(.paused) .demo-armed.demo-seen .fx-chat+.client-demo-rows li>*{animation-delay:3.7s}
  @keyframes fx-pop{from{transform:scale(0)}}
  /* Documents : les pièces montent l'une sous l'autre */
  html:not(.paused) .demo-armed.demo-seen .fx-docs li>*{animation:fx-up .9s var(--demo-ease) both;animation-delay:calc(.25s + var(--i,0) * 260ms)}
  .fx-docs li:nth-child(2){--i:1}.fx-docs li:nth-child(3){--i:2}.fx-docs li:nth-child(4){--i:3}
  /* Code de connexion : les cases vides et le curseur qui clignote dans la première, puis la frappe d'un code reçu,
     un chiffre toutes les 0,28 s, le curseur avançant de case en case ; enfin la dernière case prend le focus */
  .fx-code span:nth-child(2){--k:1}.fx-code span:nth-child(3){--k:2}.fx-code span:nth-child(4){--k:3}.fx-code span:nth-child(5){--k:4}.fx-code span:nth-child(6){--k:5}
  html:not(.paused) .fx-code.demo-armed.demo-seen b{animation:fx-pop .4s var(--demo-ease) both;animation-delay:calc(.8s + var(--k,0) * 280ms)}
  html:not(.paused) .fx-code.demo-armed.demo-seen span:first-child::after{animation:fx-blink .8s linear}
  html:not(.paused) .fx-code.demo-armed.demo-seen span:not(:first-child)::after{animation:fx-caret .28s linear;animation-delay:calc(.8s + (var(--k) - 1) * 280ms)}
  html:not(.paused) .fx-code.demo-armed.demo-seen span:last-child::before{animation:fx-focus .6s var(--demo-ease) 2.55s both}
  @keyframes fx-blink{0%,40%{opacity:1}41%,65%{opacity:0}66%,100%{opacity:1}}
  @keyframes fx-caret{from,to{opacity:1}}
  @keyframes fx-focus{from{transform:scale(.7);opacity:0}}
  /* Message après une action : il se pose, sans transparence */
  .flash{animation:e2-flash .45s var(--ease) both}
  @keyframes e2-flash{from{transform:translateY(-8px)}}
  /* Rendez-vous : l'étape qui arrive (le sujet, ou le retour au créneau) glisse en place, sans transparence */
  .rdv-form .is-switched{animation:e2-step .5s var(--ease) both}
  @keyframes e2-step{from{transform:translateY(12px)}}
  /* Fenêtre : entrée par glissement */
  dialog.modal[open]{animation:e2-panel .4s var(--ease)}
  @keyframes e2-panel{from{transform:translateY(16px) scale(.98)}}
  /* Menu replié : les entrées glissent en place à l'ouverture */
  .app-menu[open] .app-menu__panel li,.app-menu[open] .app-menu__panel .folder-switch__title,.app-menu[open] .app-menu__end{animation:e2-navin .5s var(--ease) both}
  .app-menu[open] .app-menu__panel>ul:not(.folder-switch)>li:nth-child(2){animation-delay:.03s}
  .app-menu[open] .app-menu__panel>ul:not(.folder-switch)>li:nth-child(3){animation-delay:.06s}
  .app-menu[open] .app-menu__panel>ul:not(.folder-switch)>li:nth-child(4){animation-delay:.09s}
  .app-menu[open] .app-menu__panel>ul:not(.folder-switch)>li:nth-child(5){animation-delay:.12s}
  .app-menu[open] .app-menu__panel>ul:not(.folder-switch)>li:nth-child(6){animation-delay:.15s}
  .app-menu[open] .app-menu__panel>ul:not(.folder-switch)>li:nth-child(7){animation-delay:.18s}
  .app-menu[open] .app-menu__panel>ul:not(.folder-switch)>li:nth-child(8){animation-delay:.21s}
  /* Les dossiers (une adresse qui en suit plusieurs) après les rubriques, puis les boutons du bas */
  .app-menu[open] .app-menu__panel .folder-switch__title,.app-menu[open] .app-menu__panel .folder-switch li{animation-delay:.24s}
  .app-menu[open] .app-menu__end{animation-delay:.27s}
  @keyframes e2-navin{from{transform:translateY(14px)}}
  /* Plaque « Haut de page » : elle se balance puis se pose, comme accrochée à un clou */
  .to-top{transform:translateY(16px) rotate(-9deg);transform-origin:50% -70%}
  .to-top.is-shown{transform:none;transition:opacity .3s,visibility 0s,transform .9s cubic-bezier(.3,1.7,.5,1)}
  .to-top-dial svg{transition:transform .5s var(--ease)}
  .to-top:is(:hover,:focus-visible) .to-top-dial svg:first-child{transform:translateY(-170%)}
  .to-top:is(:hover,:focus-visible) .to-top-dial svg+svg{transform:none}
  /* Reflet du laiton qui balaie la plaque au survol */
  .to-top::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 38%,rgba(247,233,195,.2) 50%,transparent 62%);background-size:260% 100%;background-position:130% 0;pointer-events:none}
  .to-top:is(:hover,:focus-visible)::after{background-position:-30% 0;transition:background-position 1s var(--ease)}
}