/* Flair Job : Space Grotesk + Inter, dégradé « nuit menthe » (indigo → sarcelle → citron vert),
   fond quadrillé à halos, en-tête gélule au scroll.
   Espacements : 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 96, 112. Aucun texte sous 12 px. */

@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url(/assets/polices/inter-latin-400-normal.woff2?v=9e3c30790a) format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url(/assets/polices/inter-latin-500-normal.woff2?v=9e3c30790a) format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url(/assets/polices/inter-latin-600-normal.woff2?v=9e3c30790a) format('woff2')}
@font-face{font-family:'Inter';font-weight:700;font-display:swap;src:url(/assets/polices/inter-latin-700-normal.woff2?v=9e3c30790a) format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:500;font-display:swap;src:url(/assets/polices/space-grotesk-latin-500-normal.woff2?v=9e3c30790a) format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:600;font-display:swap;src:url(/assets/polices/space-grotesk-latin-600-normal.woff2?v=9e3c30790a) format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:700;font-display:swap;src:url(/assets/polices/space-grotesk-latin-700-normal.woff2?v=9e3c30790a) format('woff2')}

:root{
  /* Palette « nuit menthe » choisie par Alex : indigo de nuit → bleu → sarcelle → menthe → citron vert (OKLCH).
     Chaque thème prend la moitié du dégradé qui reste lisible sur son fond. */
  --g0:#292f56; --g1:#28436f; --g2:#1a5a86; --g3:#007398; --g4:#008ca4; --g5:#00a5a8; --g6:#00bfa6; --g7:#10d69c; --g8:#6bea8a; --g9:#acfa70;
  --grad-plein:linear-gradient(100deg,var(--g0),var(--g1) 11%,var(--g2) 22%,var(--g3) 33%,var(--g4) 44%,var(--g5) 55%,var(--g6) 66%,var(--g7) 77%,var(--g8) 88%,var(--g9));
  /* Dégradé continu (plus de paliers francs : ils faisaient des bandes) */
  --paliers:linear-gradient(90deg in oklab,var(--g0),var(--g1),var(--g2),var(--g3),var(--g4),var(--g5),var(--g6),var(--g7),var(--g8),var(--g9));
  --c1:var(--g2); --c2:var(--g5); --c3:var(--g8); --c1-rgb:0,140,164;
  --grad:linear-gradient(100deg,var(--g0),var(--g2) 30%,var(--g3) 55%,var(--g5) 78%,var(--g7));
  --grad-btn:linear-gradient(100deg,var(--g0),var(--g2)); --on-grad:#fff;
  --grad-text:linear-gradient(100deg,var(--g0),var(--g2) 55%,var(--g3));
  --focus:var(--g2); --plein:var(--g2); --on-plein:#fff;
  --bg:#f8fafb; --bg-alt:#edf2f2; --text:#141833; --text-rgb:20,24,51;
  --text-2:#454a63; --text-3:#585d76; --border:#d9e0e3; --border-soft:#e6ecee;
  --card-bg:#ffffff; --card-border:#d5dde0;
  --card-shadow:0 2px 4px rgba(20,24,51,.05),0 20px 40px -18px rgba(20,24,51,.2);
  --chip-bg:#e8efef; --accent:#00657a; --nav-glass:rgba(248,250,251,.62); --grid-line:rgba(20,24,51,.04);
  --glow:.16; --ok:#1d7a46; --ok-bg:#e3f4ea; --warn:#8a4b00; --warn-bg:#fdf0dc; --bad:#b4233c; --bad-bg:#fbe6ea; --sev-haute:#a3400c; --sev-faible:#2f56a8;
  --ctl:#767b91;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23454a63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --r-lg:24px; --r-md:16px;
  --sec:112px;
  --bord:40px; /* marge latérale de l'en-tête et du pied, pleine largeur */
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-pt="light"]){
    --paliers:linear-gradient(90deg in oklab,var(--g2),var(--g3),var(--g4),var(--g5),var(--g6),var(--g7),var(--g8),var(--g9)); --c1:var(--g2); --c2:var(--g5); --c3:var(--g7);
    --grad:linear-gradient(100deg,var(--g3),var(--g5) 25%,var(--g7) 55%,var(--g8) 78%,var(--g9));
    --grad-btn:linear-gradient(100deg,var(--g7),var(--g9)); --on-grad:#1d2147;
    --grad-text:linear-gradient(100deg,var(--g6),var(--g7) 50%,var(--g9));
    --focus:var(--g9); --plein:var(--g7); --on-plein:#1d2147;
    --bg:#0b0d1b; --bg-alt:#14172c; --text:#f2f5f7; --text-rgb:242,245,247;
    --text-2:#a9aec4; --text-3:#9196ad; --border:rgba(255,255,255,.12); --border-soft:rgba(255,255,255,.08);
    --card-bg:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); --card-border:rgba(255,255,255,.1);
    --card-shadow:none; --chip-bg:rgba(255,255,255,.08); --accent:#6bea8a; --nav-glass:rgba(11,13,27,.55); --grid-line:rgba(255,255,255,.045);
    --glow:.34; --ok:#6fdc9c; --ok-bg:rgba(111,220,156,.12); --warn:#ffc46b; --warn-bg:rgba(255,196,107,.12); --bad:#ff8a9c; --bad-bg:rgba(255,138,156,.12); --sev-haute:#ffad7a; --sev-faible:#9dbcff;
    --ctl:#7d8299;
    --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a9aec4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    color-scheme:dark;
  }
}
:root[data-pt="dark"]{
  --paliers:linear-gradient(90deg in oklab,var(--g2),var(--g3),var(--g4),var(--g5),var(--g6),var(--g7),var(--g8),var(--g9)); --c1:var(--g2); --c2:var(--g5); --c3:var(--g7);
  --grad:linear-gradient(100deg,var(--g3),var(--g5) 25%,var(--g7) 55%,var(--g8) 78%,var(--g9));
  --grad-btn:linear-gradient(100deg,var(--g7),var(--g9)); --on-grad:#1d2147;
  --grad-text:linear-gradient(100deg,var(--g6),var(--g7) 50%,var(--g9));
  --focus:var(--g9); --plein:var(--g7); --on-plein:#1d2147;
  --bg:#0b0d1b; --bg-alt:#14172c; --text:#f2f5f7; --text-rgb:242,245,247;
  --text-2:#a9aec4; --text-3:#9196ad; --border:rgba(255,255,255,.12); --border-soft:rgba(255,255,255,.08);
  --card-bg:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); --card-border:rgba(255,255,255,.1);
  --card-shadow:none; --chip-bg:rgba(255,255,255,.08); --accent:#6bea8a; --nav-glass:rgba(11,13,27,.55); --grid-line:rgba(255,255,255,.045);
  --glow:.34; --ok:#6fdc9c; --ok-bg:rgba(111,220,156,.12); --warn:#ffc46b; --warn-bg:rgba(255,196,107,.12); --bad:#ff8a9c; --bad-bg:rgba(255,138,156,.12); --sev-haute:#ffad7a; --sev-faible:#9dbcff;
  --ctl:#7d8299;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a9aec4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme:dark;
}
:root[data-pt="light"]{color-scheme:light}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--haut,0px) + 96px)}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
a{color:var(--accent);text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:8px}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-64px;z-index:60;background:var(--text);color:var(--bg);padding:12px 16px;border-radius:12px;font-weight:600}
.skip:focus{top:16px}
/* Animations en pause (bouton du pied de page, ou en tête de page au clavier) : tout ce qui bouge en boucle s'arrête */
html.anim-pause *,html.anim-pause *::before,html.anim-pause *::after{animation-play-state:paused!important}
.pied-anim{padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:.2em;cursor:pointer;min-height:24px}
@media (hover:hover){.pied-anim:hover{color:var(--text)}}
.wrap{max-width:1080px;margin:0 auto;padding-inline:24px}
.wrap.etroit{max-width:760px}
h1,h2,h3,h4{font-family:var(--font-display);text-wrap:balance;margin:0}
p{margin:0}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
[hidden]{display:none!important}

/* Fond : quadrillage et halos, estompés vers le bas */
.bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bgfx::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:linear-gradient(#000,transparent 70%);mask-image:linear-gradient(#000,transparent 70%)}
.bgfx::after{content:"";position:absolute;left:-10%;right:-10%;top:-240px;height:640px;opacity:var(--glow);background:radial-gradient(40% 50% at 30% 40%,var(--c1),transparent 70%),radial-gradient(35% 45% at 70% 35%,var(--c2),transparent 70%),radial-gradient(30% 40% at 85% 70%,var(--c3),transparent 70%);filter:blur(40px)}
/* Le pied de page commence sous le premier écran : il ne saute pas quand le contenu de la page arrive (espace, admin) */
.page{position:relative;z-index:1;flex:1 0 auto;min-height:100vh;min-height:100svh}

/* En-tête gélule au scroll : la classe d'état nav-pill est posée sur <html> */
/* En haut de page, la barre n'a pas de fond : seule la pilule (au défilement) est floutée */
.nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--haut,0px));z-index:40;background:transparent;border-bottom:1px solid transparent;padding:8px 0;transition:padding .3s ease,background-color .3s ease,border-color .3s ease}
.nav-in{position:relative;display:flex;align-items:center;gap:16px;max-width:none;margin:0 auto;padding:0 var(--bord);min-height:48px;border:1px solid transparent;transition:max-width .3s ease,padding .3s ease,border-radius .3s ease}
.nav-in::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:transparent;transition:background-color .3s ease}
.brand{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700;font-size:23px;letter-spacing:-.01em;color:var(--text);text-decoration:none;white-space:nowrap;padding:8px 0}
.brand .ic{width:32px;height:32px;border-radius:50%;background:var(--grad-plein);color:var(--on-marque,#fff);display:grid;place-items:center;flex:none}
.brand .ic svg{display:block}
.brand-sous{color:var(--text-2);font-weight:600}
.nav-links{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav-links a{position:relative;display:block;padding:12px;border-radius:999px;font-size:14px;font-weight:500;color:var(--text-2);text-decoration:none;white-space:nowrap;transition:color .2s ease}
@media (hover:hover){.nav-links a:where(:not(:disabled,[aria-disabled="true"])):hover{color:var(--text)}}
.nav-links a[aria-current="true"],.nav-links a[aria-current="page"]{color:var(--text)}
.nav-links a[aria-current="true"]::after,.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:2px;width:6px;height:6px;border-radius:50%;transform:translateX(-50%);background:var(--grad)}
.nav-cta{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;color:var(--on-grad);background:var(--grad-btn);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.nav-btn{flex:none;width:44px;height:44px;padding:0;border-radius:50%;background:rgba(var(--text-rgb),.08);border:1px solid rgba(var(--text-rgb),.16);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:background-color .2s ease,transform .15s ease}
@media (hover:hover){.nav-btn:where(:not(:disabled,[aria-disabled="true"])):hover{background:rgba(var(--text-rgb),.14)}}
.nav-btn:active{transform:scale(.94)}
.nav-btn svg{display:block}
#theme-btn .i-sun{display:none}
#theme-btn[data-t="dark"] .i-sun{display:block}
#theme-btn[data-t="dark"] .i-moon{display:none}
#menu-btn{display:none}
.prog{position:absolute;left:0;bottom:-1px;width:100%;height:3px;background:var(--grad-plein);transform-origin:left center;transform:scaleX(var(--p,0));pointer-events:none}
html.nav-pill .prog{position:fixed;top:calc(env(safe-area-inset-top,0px) + var(--haut,0px));bottom:auto;z-index:41}
html.nav-pill .nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:transparent;border-bottom-color:transparent;padding:8px 0;margin-bottom:-16px}
/* Au défilement, la pilule prend la largeur du contenu de la page (1440 sur l'accueil, 1080 ailleurs), bords alignés */
:root{--pilule:1032px;--pilule-marge:24px}
html:has(main.ac){--pilule:calc(1440px - 2 * var(--bord));--pilule-marge:var(--bord)}
html.nav-pill .nav-in{width:min(calc(100% - 2 * var(--pilule-marge)),var(--pilule));max-width:none;border-radius:999px;padding:4px 4px 4px 20px;border-color:var(--border-soft);box-shadow:0 12px 32px -16px rgba(0,0,0,.35)}
html.nav-pill .nav-in::before{background:var(--nav-glass);-webkit-backdrop-filter:saturate(180%) blur(28px);backdrop-filter:saturate(180%) blur(28px)}
html.nav-burger .nav-links,html.nav-burger .nav-cta.burger-cache{display:none}
html.nav-burger #menu-btn{display:grid}
.mnav{position:fixed;inset:0;z-index:50;background:var(--bg);padding:calc(env(safe-area-inset-top,0px) + 9px) 16px calc(env(safe-area-inset-bottom,0px) + 16px);display:none;flex-direction:column;overflow-y:auto}
html.mnav-open .mnav{display:flex}
/* Fenêtre ouverte (toutes les <dialog> du site, présentes et à venir) ou menu mobile : la page derrière ne défile plus.
   La place de la barre de défilement est gardée, rien ne bouge ; dans la fenêtre, le défilement ne passe pas à la page. */
html:has(dialog[open]),html:has(dialog[open]) body,html.mnav-open,html.mnav-open body{overflow:hidden}
html:has(dialog[open]){scrollbar-gutter:stable}
dialog,dialog *,.mnav{overscroll-behavior:contain}
html.nav-lock,html.nav-lock body{overflow:hidden}
.mnav-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;margin-bottom:24px}
.mnav-head .brand{margin-right:0}
.mnav ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.mnav ul a,.mnav ul button{display:flex;align-items:center;gap:16px;width:100%;text-align:left;padding:12px 16px;border:0;background:transparent;border-radius:16px;font-family:var(--font-display);font-weight:600;font-size:clamp(19px,5.2vw,22px);color:var(--text);text-decoration:none;cursor:pointer}
.mnav ul a[aria-current="true"],.mnav ul a[aria-current="page"]{background:var(--chip-bg)}
/* Menu : sous-entrées (Offres > Suivi, Écartées) */
.mnav ul.mnav-sous{margin:2px 0 6px 56px;gap:2px}
.mnav ul.mnav-sous a{gap:12px;padding:8px 12px;font-size:clamp(16px,4.4vw,18px)}
.mnav ul.mnav-sous a .ic{width:32px;height:32px;border-radius:10px}
.mnav ul.mnav-sous a .ic svg{width:18px;height:18px}
/* Rubriques repliables : le bouton de la rubrique déplie ses sous-rubriques */
.mnav-groupe .ic{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:var(--chip-bg);color:var(--accent)}
.mnav-groupe.ici .ic{background:var(--grad-btn);color:var(--on-grad)}
.mnav-groupe .mnav-chev{flex:none;margin-left:auto;color:var(--text-2);transition:transform .2s ease}
.mnav-groupe[aria-expanded="true"] .mnav-chev{transform:rotate(180deg)}
.mnav-groupe:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (hover:hover){.mnav-groupe:hover{background:var(--chip-bg)}}
.mnav ul.mnav-sous:not([hidden]){animation:mnav-deplie .2s ease-out}
/* Une seule entrée marquée : quand une sous-rubrique est la position courante, la tête de rubrique (page) s'efface */
.mnav-sous:has(a[aria-current="true"]) a[aria-current="page"]{background:transparent}
.mnav-sous:has(a[aria-current="true"]) a[aria-current="page"] .ic{background:var(--chip-bg);color:var(--accent)}
@keyframes mnav-deplie{from{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.mnav-groupe .mnav-chev{transition:none}.mnav ul.mnav-sous:not([hidden]){animation:none}}
.nav-sous{position:relative;display:flex;align-items:center}
.nav-sous>a{padding-right:4px}
/* Menu principal : un vrai repère de navigation (pas de display:contents, qui le retire du lecteur d'écran sur d'anciens Safari) */
.nav-menu{display:flex}
.nav-menu:has(> .nav-links[hidden]),html.nav-burger .nav-menu{display:none}
.nav-sous-btn{display:grid;place-items:center;width:40px;height:44px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--text-2);cursor:pointer}
@media (hover:hover){.nav-sous-btn:where(:not(:disabled,[aria-disabled="true"])):hover{color:var(--text);background:rgba(var(--text-rgb),.08)}}
.nav-sous-btn svg{transition:transform .2s ease}
.nav-sous-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-sous-liste{position:absolute;top:calc(100% + 6px);left:0;z-index:45;min-width:200px;list-style:none;margin:0;padding:6px;border-radius:var(--r-md);background:var(--bg-alt);border:1px solid var(--card-border);box-shadow:0 24px 48px -16px rgba(0,0,0,.45)}
.nav-sous-liste.nav-sous-droite{left:auto;right:0}
.nav-sous-liste::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-sous-liste a{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border-radius:12px;font-size:15px;font-weight:600;color:var(--text);text-decoration:none}
@media (hover:hover){.nav-sous-liste a:where(:not(:disabled,[aria-disabled="true"])):hover{background:rgba(var(--text-rgb),.06)}}
.nav-sous-liste a .ic{display:inline-flex;color:var(--accent)}
.nav-sous-liste a .ic svg{width:18px;height:18px}
.nav-sous-liste a::after{display:none}
.souci-btn .ic{display:grid;place-items:center}
@media (max-width:400px){.nav-in{gap:8px}}

/* Ouverture */
.hero{padding-block:48px 0}
.eyebrow{margin:0 0 16px;font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--text-3)}
h1{font-size:clamp(34px,4.4vw,56px);font-weight:700;letter-spacing:-.035em;line-height:1.04}
.lede{margin:20px 0 0;color:var(--text-2);font-size:18px;line-height:1.55}
.crit{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:20px 0 0;padding:0}
.crit li{padding:4px 12px;border-radius:999px;background:var(--chip-bg);color:var(--text-2);font-size:14px;font-weight:600}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;margin:32px 0 0;padding:0}
.stats li{text-align:center;padding:20px;border-radius:var(--r-md);background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow)}
.stats b{display:block;font-family:var(--font-display);font-size:32px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:8px;font-size:14px;line-height:1.35;color:var(--text-2)}
.stats li.hot b{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Sections */
/* Ancre vers une section : le titre arrive juste sous l'en-tête (le défilement du document garde déjà 96 px
   de marge haute ; on retire ici le grand espace du haut de la section) */
section{scroll-margin-top:0}
section.sec{scroll-margin-top:calc(16px - var(--sec))}
#compte .bloc{scroll-margin-top:16px}
#reglages-admin .bloc{scroll-margin-top:16px}
#compte .bloc h2:focus{outline:none}
.sec{padding-top:var(--sec)}
.sec.sec-haut{padding-top:40px}
.etats-alertes{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.etats-alertes li{position:relative;padding-left:28px;line-height:1.5}
.etats-alertes li::before{content:"";position:absolute;left:4px;top:.45em;width:12px;height:12px;border-radius:50%;background:var(--text-3)}
.etats-alertes li.ok::before{background:var(--ok)}
.etats-alertes li.ko::before{background:transparent;border:2px solid var(--bad)}
.adresse-alertes{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:6px}
.adresse-alertes code{padding:10px 14px;border-radius:12px;background:rgba(var(--text-rgb),.06);border:1px solid var(--card-border);font-size:clamp(12.5px,3.5vw,15px)}
.voies-alertes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}
.voies-alertes>.etiquette{grid-column:1/-1;margin:0}
@media (max-width:680px){.voies-alertes{grid-template-columns:minmax(0,1fr)}}
.voie{display:grid;gap:8px;align-content:start;padding:16px 18px;border-radius:var(--r-md);border:1px solid var(--card-border);background:var(--bg-alt)}
.voie p{margin:0;font-size:15px;line-height:1.5;color:var(--text-2)}
.voie .voie-t{display:grid;gap:8px;justify-items:start;color:var(--text);font-size:16px}
.voie-reco{border-color:var(--accent)}
.voie-badge{padding:4px 10px;border-radius:999px;background:var(--grad-btn);color:var(--on-grad);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.gm-boutons{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.gm-main{margin-top:8px}
.gm-main summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;font-weight:600;color:var(--accent)}
.gm-main[open] summary{margin-bottom:8px}
.gm-auto{margin:12px 0 0;font-size:15px;line-height:1.5;color:var(--text-2)}
#bloc-alertes .guide-alertes{margin-top:20px}
.guide-alertes>div{padding:4px 24px 24px}
.sites-alertes{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:16px}
.sites-alertes li{display:grid;gap:6px;justify-items:start}
.sites-alertes li p{margin:0;line-height:1.5}
.etapes-num{list-style:none;margin:0;padding:0;display:grid;gap:20px;counter-reset:etape}
.etapes-num>li{position:relative;padding-left:48px;counter-increment:etape;display:grid;gap:4px;line-height:1.55;min-width:0}
.etapes-num>li::before{content:counter(etape);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;color:var(--text);background:rgba(var(--text-rgb),.06);border:1px solid var(--card-border)}
.etapes-num>li:not(:last-child)::after{content:"";position:absolute;left:15.5px;top:36px;bottom:-18px;width:1px;background:var(--card-border)}
.etapes-num b{color:var(--text)}
.etapes-num span{color:var(--text-2)}
.filtre-alertes{margin-top:8px;align-items:stretch}
.filtre-alertes code{flex:1 1 260px;min-width:0;overflow-wrap:anywhere;line-height:1.6;font-size:14px}
.filtre-alertes .btn-s{align-self:center}
.guide-autres{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--border-soft)}
.etapes-texte{margin:12px 0 0;padding-left:22px;display:grid;gap:8px;line-height:1.55}
.alertes-l{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.alertes-l li{display:grid;gap:2px;padding:10px 0;border-top:1px solid var(--card-border)}
.alertes-l li>span:first-child{overflow-wrap:anywhere}
.erreur-bloc{margin-top:16px;padding:16px 20px;border-radius:var(--r-md);border:1px solid var(--bad);background:var(--bad-bg);color:var(--text)}
.erreur-bloc-t{margin:0;line-height:1.5}
.erreur-bloc-t strong{color:var(--bad)}
.erreur-bloc details{margin-top:8px}
.erreur-bloc summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.erreur-bloc pre{margin:8px 0 0;padding:12px 16px;border-radius:12px;background:var(--bg);border:1px solid var(--border);font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere;user-select:all}
.connexion-alerte{margin:0 0 24px}
.erreur-bloc-a{display:flex;flex-wrap:wrap;gap:8px 12px;margin:12px 0 0}
.conseil{margin-top:8px}
.conseil p{margin:6px 0 0}
.conseil-reco{display:grid;justify-items:start;gap:8px;line-height:1.5}
#pages-offres,#ec-pages{margin-top:24px}
#pages-offres[hidden],#ec-pages[hidden]{display:none}
#ec-pages{margin-top:0}
#offres .fline{scroll-margin-top:calc(var(--haut,0px) + 96px)}
/* Pagination (offres, fil de l'admin) : le compte à gauche, les pages au centre, le nombre par page à droite */
.fil-nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px 24px;margin-top:16px}
.fil-nav .fil-compte{grid-column:1;justify-self:start}
.fil-nav .fil-pages{grid-column:2;justify-self:center;flex-wrap:nowrap}
.fil-nav .fil-taille{grid-column:3;justify-self:end}
@media (max-width:640px){
  .fil-nav{grid-template-columns:minmax(0,1fr);justify-items:center}
  .fil-nav .fil-compte,.fil-nav .fil-pages,.fil-nav .fil-taille{grid-column:1;justify-self:center}
  .fil-nav .fil-pages{order:-1;flex-wrap:wrap;justify-content:center}
}
.fil-compte{margin:0;font-size:15px;color:var(--text-3);font-variant-numeric:tabular-nums}
.fil-pages{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.fil-pages .pg{min-width:44px;height:44px;padding:0 10px;font-size:15px;border-radius:12px;border:1px solid var(--border);background:transparent;color:var(--text-2);font:600 15px/1 var(--font-body);font-variant-numeric:tabular-nums;cursor:pointer}
@media (hover:hover){.fil-pages .pg:where(:not(:disabled,[aria-disabled="true"])):hover:not([disabled]){background:var(--chip-bg);color:var(--text)}}
.fil-pages .pg.on{background:var(--grad-btn);color:var(--on-grad);border-color:transparent}
.fil-pages .pg[disabled]{opacity:.4;cursor:default}
.pg-trou{padding:0 4px;color:var(--text-3)}
.fil-taille{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-3)}
.fil-taille .sel{width:auto;min-height:44px;padding-right:40px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;overflow-wrap:anywhere}
.sec-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px}
h2{font-size:clamp(28px,4vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.sub{margin:12px 0 0;color:var(--text-2)}

/* Boutons */
/* Tout bouton désactivé se voit comme tel (les variantes précisent ensuite) */
button:disabled{opacity:.55;cursor:not-allowed}
/* Icônes : une boîte centrée, sans interligne autour du dessin (sinon il remonte au-dessus du texte voisin) */
:where(.ic){display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:0}
:where(.ic)>svg{display:block}
.btn-p{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;border:0;color:var(--on-grad);background:var(--grad-btn);font:inherit;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none}
@media (hover:hover){.btn-p:where(:not(:disabled,[aria-disabled="true"])):hover{filter:brightness(1.1)}}
.btn-p[disabled]{opacity:.6;cursor:wait}
.btn-s{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;border:1px solid rgba(var(--text-rgb),.2);background:rgba(var(--text-rgb),.06);color:var(--text);font:inherit;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none}
@media (hover:hover){.btn-s:where(:not(:disabled,[aria-disabled="true"])):hover{background:rgba(var(--text-rgb),.12)}}
.btn-s[disabled]{opacity:.6;cursor:wait}
.btn-d{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:999px;border:1px solid var(--bad);background:transparent;color:var(--bad);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
@media (hover:hover){.btn-d:where(:not(:disabled,[aria-disabled="true"])):hover{background:var(--bad-bg)}}
.btn-d.plein{background:var(--bad);color:var(--bg)}
.lien-btn{min-height:44px;padding:0 4px;border:0;background:transparent;color:var(--accent);font:inherit;font-size:15px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}

/* Cartes et formulaires */
.carte{border-radius:var(--r-lg);background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);padding:32px}
.champ{display:grid;gap:12px}
.champ>label+.aide,.champ>legend+.aide{margin-top:-8px}
.champ+.champ{margin-top:20px}
.champ label,.champ legend,.etiquette{font-size:15px;font-weight:600;color:var(--text)}
.champ .aide{font-size:14px;color:var(--text-3);line-height:1.5}
input[type=email],input[type=text],input[type=tel],input[type=number],input[type=search],input[type=url],input[type=date],input[type=time],select.sel,textarea.zone{width:100%;min-height:48px;padding:8px 16px;border-radius:12px;border:1px solid var(--ctl);background:var(--bg);color:var(--text);font:inherit;font-size:16px}
textarea.zone{min-height:96px;padding:12px 16px;line-height:1.5;resize:vertical}
@media (hover:hover){input:where(:not(:disabled,[aria-disabled="true"])):hover,select.sel:where(:not(:disabled,[aria-disabled="true"])):hover,textarea.zone:where(:not(:disabled,[aria-disabled="true"])):hover{border-color:var(--accent)}}
/* Menus déroulants : chevron dessiné, à distance du bord (le natif colle au cadre) */
select.sel{-webkit-appearance:none;appearance:none;padding-right:48px;background-image:var(--chevron);background-repeat:no-repeat;background-position:right 18px center;background-size:12px 8px;cursor:pointer;text-overflow:ellipsis}
select.sel option{background:var(--bg-alt);color:var(--text)}
select.sel-rayon,select.sel-presence{padding-right:40px;background-position:right 14px center}
input[aria-invalid="true"]{border-color:var(--bad)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0}
.erreur{color:var(--bad);font-size:15px;font-weight:600}
.message{padding:16px 20px;border-radius:var(--r-md);font-size:15px;line-height:1.55}
.message.ok{background:var(--ok-bg);color:var(--text)}
.message.ok strong{color:var(--ok)}
.message.info{background:rgba(var(--c1-rgb),.1);color:var(--text)}
.message.alerte{background:var(--warn-bg);color:var(--text)}
.message.alerte strong{color:var(--warn)}
.message.ko{background:var(--bad-bg);color:var(--text)}
.message.ko strong{color:var(--bad)}

/* Pastilles cochables (contrats, fréquence, télétravail) */
.pastilles{display:flex;flex-wrap:wrap;gap:8px}
.pastilles label{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--ctl);background:var(--bg);font-size:15px;font-weight:500;cursor:pointer}
.pastilles input{position:absolute;opacity:0;width:1px;height:1px}
.pastilles label:has(input:checked){border-color:var(--accent);background:rgba(var(--c1-rgb),.14);color:var(--text);font-weight:700}
.pastilles label:has(input:checked)::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--grad)}
.pastilles label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
/* Mode de travail : quatre cartes à cocher, « Tout me va » sur toute la ligne */
.modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.mode{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px 16px 16px 52px;border-radius:var(--r-md);border:1px solid var(--ctl);background:var(--bg);cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.mode:first-child{grid-column:1/-1}
.mode input{position:absolute;opacity:0;width:1px;height:1px}
.mode::before{content:"";position:absolute;left:16px;top:16px;width:22px;height:22px;box-sizing:border-box;border-radius:7px;border:1.5px solid var(--ctl);background:var(--bg)}
@media (hover:hover){.mode:where(:not(:disabled,[aria-disabled="true"])):hover{border-color:var(--text-2)}}
.mode:has(input:checked){border-color:var(--accent);background:rgba(var(--c1-rgb),.1)}
.mode:has(input:checked)::before{border:0;background:var(--grad-btn)}
.mode:has(input:checked)::after{content:"";position:absolute;left:24px;top:19px;width:6px;height:11px;border:solid var(--on-grad);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.mode:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.mode-t{font-size:16px;font-weight:700;line-height:22px;color:var(--text)}
.mode-d{font-size:14px;line-height:1.45;color:var(--text-2)}
.mode-effet{margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--text-2)}
.mode-effet.alerte{color:var(--warn)}
@media (max-width:760px){.modes{grid-template-columns:minmax(0,1fr)}}
.pastilles.colonne{flex-direction:column;align-items:stretch}
.pastilles.colonne label{border-radius:var(--r-md);padding:12px 16px;min-height:56px}
.pastilles.colonne label small{display:block;font-weight:400;color:var(--text-3);font-size:14px}

/* Listes de mots modifiables */
.puces-ed{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.puces-ed:empty{display:none}
/* Postes suggérés à partir du CV : un appui pour les ajouter */
.suggeres{margin:12px 0 24px}
.sug .sug-r{color:var(--text-3);font-weight:500}
.villes-idees{margin-top:16px}
.cdd-duree{margin-top:20px}
.malus-c{margin-top:24px}
.malus-c .malus-nb{max-width:200px}
.suggeres>.aide{font-size:14px;color:var(--text-3);line-height:1.5;margin:0}
.suggeres>.aide+ul{margin-top:10px}
.suggeres ul:empty{display:none}
.suggeres [data-suggerer-etat]:empty{margin:0}
.suggeres ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:8px 0 0;padding:0;transition:opacity .2s}
.suggeres ul.attente{opacity:.45}
.lien-btn.en-cours{display:inline-flex;text-align:left;align-items:center;gap:10px;text-decoration:none;cursor:progress;opacity:1}
.lien-btn.en-cours::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(var(--c1-rgb),.25);border-top-color:var(--accent);animation:tourne .8s linear infinite}
@media (prefers-reduced-motion:reduce){.lien-btn.en-cours::before{animation-duration:2.4s}}
.sug{display:inline-flex;align-items:flex-start;gap:8px;min-height:44px;padding:11px 16px;line-height:22px;text-align:left;border-radius:22px;border:1px dashed var(--ctl);background:transparent;color:var(--text);font:inherit;font-size:15px;font-weight:500;cursor:pointer}
@media (hover:hover){.sug:where(:not(:disabled,[aria-disabled="true"])):hover{border-style:solid;background:var(--chip-bg)}}
.sug>span[aria-hidden]{font-weight:700;color:var(--accent)}
.sug-t{min-width:0}
.puces-ed li{display:inline-flex;align-items:center;gap:0;min-height:44px;padding:0 0 0 16px;line-height:1.35;border-radius:999px;background:var(--chip-bg);font-size:15px;font-weight:500}
.puces-ed button{flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text-2);display:grid;place-items:center;cursor:pointer}
@media (hover:hover){.puces-ed button:where(:not(:disabled,[aria-disabled="true"])):hover{background:rgba(var(--text-rgb),.12);color:var(--bad)}}
.ajout{display:flex;gap:8px}
.ajout input{flex:1 1 auto;min-width:0}

/* Villes */
.villes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.villes li{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,300px) 44px;gap:8px;align-items:center;padding:8px 8px 8px 16px;border-radius:var(--r-md);background:var(--chip-bg)}
.villes li .sel-presence{grid-column:2/4;grid-row:2}
.villes li b{font-weight:600}
.villes li{min-height:64px}
/* Grille de note : une carte par critère, paliers de points, règles d'écart */
.g-liste{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:12px}
.g-crit{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:var(--r-md);background:var(--bg);border:1px solid var(--card-border)}
.g-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.g-tete h4{margin:0;font-size:17px;line-height:1.3}
.g-pts{flex:none;font-size:14px;font-weight:600;color:var(--accent)}
.g-paliers{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.g-paliers li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start;font-size:15px;line-height:1.45}
.g-n{display:grid;place-items:center;height:24px;margin-top:-1px;border-radius:999px;background:rgba(var(--c1-rgb),.16);color:var(--text);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.g-n.bas{background:var(--chip-bg);color:var(--text-2)}
.g-note{margin:0;font-size:14px;line-height:1.45;color:var(--text-2)}
.g-ecart{margin:auto 0 0;padding:10px 12px;border-radius:12px;background:var(--bad-bg);color:var(--bad);font-size:14px;line-height:1.45}
.g-ecart b{font-weight:700}
/* Cibles de 44 px partout, souris comprise (Apple HIG 44 pt, Material 44 dp au pointeur) */

.ecl a{display:inline-flex;align-items:center;min-height:44px}
/* Liens « Source » des fiches : dans le texte sur ordinateur, vrais boutons au doigt */
@media (max-width:640px){
  .src-lien{display:flex;width:fit-content;align-items:center;gap:6px;min-height:44px;margin-top:8px;padding:0 16px;border-radius:999px;border:1px solid var(--ctl);background:var(--bg);color:var(--text);font-size:15px;font-weight:600;text-decoration:none}
}
.net-est{margin:8px 0 0;font-size:14px;line-height:1.45;color:var(--text-2)}
.net-est:empty{display:none}
.tags .t-net{font-weight:500}
.villes .ville-pays{font-size:14px;color:var(--text-2);text-align:right}
.villes li.ville-auto{padding-right:16px;background:transparent;border:1px dashed var(--ctl);grid-template-columns:max-content minmax(0,1fr)}
.villes li.ville-p .ville-pays,.villes li.ville-auto .ville-pays{grid-column:2}
.pages-perso{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.pages-perso:empty{display:none}
.pages-perso li{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;align-items:center;padding:12px 8px 12px 16px;border-radius:var(--r-md);background:var(--chip-bg)}
.pages-perso b{display:block;font-weight:600}
.pg-url{display:block;font-size:14px;color:var(--text-3);overflow-wrap:anywhere}
.pg-etat{display:inline-block;margin-top:8px;padding:2px 10px;border-radius:999px;font-size:13px;font-weight:600;background:var(--card-bg);color:var(--text-2)}
.pg-etat.ok{background:var(--ok-bg);color:var(--ok)}
.pg-etat.ko{background:var(--warn-bg);color:var(--warn)}
.suggestions{list-style:none;margin:4px 0 0;padding:4px;border-radius:12px;border:1px solid var(--card-border);background:var(--bg-alt);box-shadow:0 16px 32px -16px rgba(0,0,0,.35)}
.suggestions li{padding:12px;border-radius:8px;cursor:pointer}
@media (hover:hover){.suggestions li[aria-selected="true"],.suggestions li:where(:not(:disabled,[aria-disabled="true"])):hover{background:rgba(var(--c1-rgb),.14)}}
.combo{position:relative}

/* Interrupteur */
.heure-veille{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:20px 32px;margin-top:28px;align-items:center}
.heure-choix{display:grid;gap:8px;align-content:start}
.heure-choix .sel{width:100%}
.heure-choix .aide{margin:0}
.heure-reco{display:grid;gap:10px;padding:18px 20px;border-radius:var(--r-md);border:1px solid var(--accent);background:rgba(var(--text-rgb),.03)}
.heure-reco p{margin:0;font-size:15px;color:var(--text-2)}
.heure-reco .heure-reco-t{display:flex;align-items:center;gap:10px;color:var(--text);font-size:16px}
.heure-reco-t .ic{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--grad-btn);color:var(--on-grad)}
.heure-reco-t .ic svg{width:18px;height:18px}
.heure-reco .btn-s{justify-self:start}
@media (max-width:720px){.heure-veille{grid-template-columns:minmax(0,1fr)}}
.inter{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-radius:var(--r-md);background:var(--chip-bg)}
.inter:has(button[role=switch]:not(:disabled)){cursor:pointer}
@media (hover:hover){.inter:has(button[role=switch]:not(:disabled)):hover{background:color-mix(in srgb,var(--chip-bg),var(--text) 4%)}}
.inter button[role=switch]{flex:none;position:relative;width:56px;height:32px;border-radius:999px;border:1px solid var(--ctl);background:var(--bg);cursor:pointer}
.inter button[role=switch]::before{content:"";position:absolute;inset:-7px -4px} /* zone d'appui de 44 px (Apple HIG), l'interrupteur reste à 32 */
.inter button[role=switch]::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--ctl);transition:transform .2s ease,background-color .2s ease}
.inter button[aria-checked="true"]{background:var(--plein);border-color:var(--plein)}
.inter button[aria-checked="true"]::after{transform:translateX(24px);background:var(--on-plein)}
/* Pause : l'interrupteur et son bloc passent au rouge */
.inter.en-pause{background:var(--bad-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 45%,transparent)}
.inter.en-pause b{color:var(--bad)}
#pause[aria-checked="true"]{background:var(--bad);border-color:var(--bad)}
#pause[aria-checked="true"]::after{background:var(--bg)}
/* Bandeau fixe en haut de page tant que la veille est en pause ; la barre du haut se décale dessous */
/* Bandeaux du haut (pause, information du site) : empilés dans un conteneur fixe, la page se décale de leur hauteur (haut.js) */
.bandeaux{position:fixed;left:0;right:0;top:0;z-index:45;display:grid}
.bandeaux>:first-child{padding-top:calc(env(safe-area-inset-top,0px) + 6px)}
html.avec-bandeau body{padding-top:var(--haut)}
.bandeau-pause,.bandeau-site{min-height:44px;padding:6px var(--bord);display:flex;align-items:center;justify-content:center;gap:8px 16px;flex-wrap:wrap;background:color-mix(in srgb,var(--bad) 22%,var(--bg));border-bottom:1px solid color-mix(in srgb,var(--bad) 55%,transparent);color:var(--text);font-size:14px;font-weight:600;text-align:center}
.bandeau-pause svg{flex:none;color:var(--bad)}
.bandeau-pause button{min-height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--bad);background:transparent;color:var(--text);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
@media (hover:hover){.bandeau-pause button:where(:not(:disabled,[aria-disabled="true"])):hover{background:var(--bad);color:var(--bg)}}
.bandeau-site{display:flex;align-items:center;justify-content:center;gap:8px 14px;color:var(--text);font-size:14px;font-weight:600;text-align:center;--ton:var(--accent);background:color-mix(in srgb,var(--ton) 18%,var(--bg));border-bottom:1px solid color-mix(in srgb,var(--ton) 50%,transparent)}
.bandeau-site.maintenance{--ton:var(--warn)}
.bandeau-site.incident{--ton:var(--bad)}
.bandeau-site svg{flex:none;color:var(--ton)}
.bandeau-site .bs-fin{font-weight:500;color:var(--text-2)}
.bandeau-site button{flex:none;display:grid;place-items:center;width:32px;height:32px;margin-left:4px;border:0;border-radius:50%;background:transparent;color:var(--text-2);cursor:pointer}
@media (hover:hover){.bandeau-site button:where(:not(:disabled,[aria-disabled="true"])):hover{background:rgba(var(--text-rgb),.1);color:var(--text)}}
.bp-court{display:none}
@media (max-width:620px){.bp-long{display:none}.bp-court{display:inline}.bandeau-pause{flex-wrap:nowrap}}

/* Étapes d'inscription */
.etapes{display:flex;gap:8px;list-style:none;margin:32px 0 0;padding:0;counter-reset:e}
.etapes li{flex:1 1 0;min-width:0;display:grid;gap:8px;font-size:13px;font-weight:600;color:var(--text-3)}
.etapes li::before{content:"";height:4px;border-radius:999px;background:var(--chip-bg)}
/* Un seul dégradé réparti sur les quatre segments : chaque segment en montre sa tranche (4 largeurs + 3 écarts de 8px) */
.etapes li.faite::before,.etapes li[aria-current="step"]::before{background:var(--grad);background-size:calc(400% + 24px) 100%;background-repeat:no-repeat}
.etapes li:nth-child(2)::before{background-position-x:33.3333%}
.etapes li:nth-child(3)::before{background-position-x:66.6667%}
.etapes li:nth-child(4)::before{background-position-x:100%}
.etapes li[aria-current="step"]{color:var(--text)}
.depot{display:grid;place-items:center;gap:12px;width:100%;padding:48px 24px;color:var(--text);font:inherit;border-radius:var(--r-lg);border:2px dashed var(--ctl);background:rgba(var(--text-rgb),.03);text-align:center;cursor:pointer}
.depot.survol{border-color:var(--accent);background:rgba(var(--c1-rgb),.08)}
.depot strong{font-size:18px}
.depot-ecran{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:rgba(var(--c1-rgb),.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s}
.depot-ecran>div{display:grid;gap:8px;text-align:center;padding:48px 40px;max-width:520px;width:100%;border-radius:var(--r-lg);border:3px dashed var(--accent);background:var(--bg)}
.depot-ecran strong{font-family:var(--font-display);font-size:26px;color:var(--text)}
.depot-ecran span{color:var(--text-3);font-size:15px}
html.depot-actif .depot-ecran{opacity:1;visibility:visible}
.depot span{color:var(--text-3);font-size:15px}
.chargement{display:inline-flex;align-items:center;gap:12px;font-weight:600}
.chargement::before{content:"";width:20px;height:20px;border-radius:50%;border:3px solid rgba(var(--c1-rgb),.25);border-top-color:var(--plein);animation:tourne 1s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:32px}

/* Offres */
.count{margin:0;font-size:15px;color:var(--text-3)}
.offers{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:20px}
.offer{border-radius:var(--r-lg);background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);padding:32px;scroll-margin-top:0}
.ohead{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:20px;align-items:start}
.disc{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;border:2px solid transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(var(--border),var(--border)) border-box}
.disc.top{background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--grad) border-box}
.disc b{display:block;text-align:center;font-family:var(--font-display);font-size:24px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.otitle{min-width:0}
.offer h3{font-size:22px;font-weight:700;line-height:1.25;letter-spacing:-.01em;text-wrap:pretty}
.offer h3 a{color:var(--text);text-decoration-color:rgba(var(--text-rgb),.3)}
@media (hover:hover){.offer h3 a:where(:not(:disabled,[aria-disabled="true"])):hover{text-decoration-color:var(--text)}}
.co{margin:4px 0 0;color:var(--text-2);font-size:16px;line-height:1.45}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:20px 0 0;padding:0}
.tags li{padding:4px 12px;border-radius:999px;background:var(--chip-bg);color:var(--text-2);font-size:14px;font-weight:500}
.tags .t-new{color:var(--on-grad);background:var(--grad-btn);font-weight:600}
.tags .t-warn{background:var(--warn-bg);color:var(--warn);font-weight:600}
.tags .t-ok{background:var(--ok-bg);color:var(--ok);font-weight:600}
.tags .t-bad{background:var(--bad-bg);color:var(--bad);font-weight:600}
/* La couleur n'est jamais seule (RGAA 3.1, WCAG 1.4.1) : un signe devant, ignoré par les lecteurs d'écran */
.tags :is(.t-ok,.t-warn,.t-bad)::before{display:inline-block;width:1.1em;margin-right:4px;text-align:center;font-weight:800}
.tags .t-ok::before{content:"✓" / ""}
.tags .t-warn::before{content:"!" / ""}
.tags .t-bad::before{content:"✕" / ""}
.stw{position:relative;display:inline-block}
.stw select{-webkit-appearance:none;appearance:none;min-height:44px;padding:8px 40px 8px 16px;border-radius:999px;border:1px solid var(--ctl);background:var(--bg);color:var(--text);font:inherit;font-size:14px;font-weight:600;cursor:pointer;max-width:200px}
.stw::after{content:"";position:absolute;right:20px;top:50%;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);pointer-events:none;color:var(--text)}
.stw select[data-s="envoyee"],.stw select[data-s="relancee"]{background:var(--warn-bg);color:var(--warn);border-color:var(--warn)}
.stw select[data-s="entretien"]{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
.stw select[data-s="refus"]{color:var(--text-3)}
.stw select option{color:var(--text);background:var(--bg-alt)}
.score{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 12px;margin:24px 0 0;padding:0;list-style:none}
.score li{min-width:0}
.score .lab{display:flex;justify-content:space-between;gap:4px;font-size:13px;color:var(--text-3);font-weight:600}
.score .lab b{color:var(--text);font-variant-numeric:tabular-nums}
.meter{display:block;height:6px;border-radius:999px;background:var(--chip-bg);margin-top:8px;overflow:hidden}
.meter span{display:block;height:100%;border-radius:999px;background:var(--grad)}
.pc{display:grid;gap:16px;margin:24px 0 0}
.pc p,.pc .br{margin:0;display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:baseline}
.pc .k{font-size:14px;font-weight:600;color:var(--text-3)}
.pc .pro .k{color:var(--ok)}
.pc .con .k{color:var(--bad)}
.pc.brief{gap:8px}
.pc.brief .br{margin:0 -12px;padding:12px;border-radius:12px;background:rgba(var(--c1-rgb),.08)}
.pc.brief .k{color:var(--accent)}
.pc.brief ul{margin:0;padding-left:20px}
.pc.brief li+li{margin-top:4px}
.dos{margin:24px 0 0;padding:24px;border-radius:var(--r-md);background:rgba(var(--text-rgb),.04);border:1px solid var(--border-soft)}
.dos-t{font-family:var(--font-body);line-height:1.4;margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.dos p.aide{color:var(--text-2);font-size:15px}
.dl{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.dl a,.dl button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:rgba(var(--text-rgb),.08);border:1px solid rgba(var(--text-rgb),.16);color:var(--text);text-decoration:none;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
@media (hover:hover){.dl a:where(:not(:disabled,[aria-disabled="true"])):hover,.dl button:where(:not(:disabled,[aria-disabled="true"])):hover{background:rgba(var(--text-rgb),.14)}}
.dl .main{color:var(--on-grad);border-color:transparent;background:var(--grad-btn)}
/* États : le survol générique (.dl button:where(:not(:disabled,[aria-disabled="true"])):hover) ne doit jamais effacer le dégradé du bouton principal */
@media (hover:hover){.dl .main:where(:not(:disabled,[aria-disabled="true"])):hover{background:var(--grad-btn);filter:brightness(1.08);box-shadow:0 10px 24px -12px rgba(var(--c1-rgb),.7)}}
.dl button:disabled,.dl button[aria-busy="true"]{opacity:.6;cursor:wait;transform:none;filter:none;box-shadow:none}
.dl .main:disabled{background:var(--grad-btn)}
@media (hover:hover){.btn-d.plein:where(:not(:disabled,[aria-disabled="true"])):hover{background:var(--bad);filter:brightness(1.1)}}
.dl .ext{font-size:12px;font-weight:700;letter-spacing:.04em;padding:2px 8px;border-radius:8px;background:var(--chip-bg)}
.dl .main .ext{background:color-mix(in srgb,currentColor 18%,transparent)}
details.more{margin:20px 0 0}
details.more>summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-weight:600;color:var(--accent);list-style:none}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s ease}
details.more[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.mbody{display:grid;gap:24px;padding-top:12px}
.mbody h4{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--text-3);font-family:var(--font-body)}
.mbody ul{margin:0;padding-left:20px}
.mbody li{margin:4px 0}
.desc{white-space:pre-line;font-size:15px;line-height:1.6;color:var(--text-2);max-height:360px;overflow:auto;padding:16px 20px;border-radius:12px;background:rgba(var(--text-rgb),.04)}
.source{font-size:13px;color:var(--text-3)}
.acc{padding:20px 24px;border-radius:var(--r-md);border:1px solid var(--border)}
.copy{margin-top:12px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid rgba(var(--text-rgb),.24);background:transparent;color:var(--text);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
@media (hover:hover){.copy:where(:not(:disabled,[aria-disabled="true"])):hover{background:rgba(var(--text-rgb),.08)}}
.snote label{display:block;margin:0 0 8px;font-size:14px;font-weight:600;color:var(--text-3)}
.snote textarea{display:block;width:100%;min-height:88px;padding:12px;border-radius:12px;border:1px solid var(--ctl);background:var(--bg);color:var(--text);font:inherit;font-size:15px;line-height:1.5;resize:vertical}
.snote-h{margin:8px 0 0;font-size:13px;color:var(--text-3)}
.empty{padding:40px 32px;border-radius:var(--r-lg);border:1px dashed var(--border)}
.empty h3{font-size:20px}
.empty p{margin:8px 0 0;color:var(--text-2)}
.offer{cursor:pointer;transition:border-color .2s ease}
@media (hover:hover){.offer:where(:not(:disabled,[aria-disabled="true"])):hover{border-color:rgba(var(--text-rgb),.22)}}
.offer.open{cursor:auto}
@media (hover:hover){.offer.open:where(:not(:disabled,[aria-disabled="true"])):hover{border-color:var(--card-border)}}
.ofoot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:20px 0 0}
.fold-btn{margin-left:auto;display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid rgba(var(--text-rgb),.16);background:rgba(var(--text-rgb),.06);color:var(--text);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.fold-btn::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.fold-btn[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
@media (hover:hover){.fold-btn:where(:not(:disabled,[aria-disabled="true"])):hover{background:rgba(var(--text-rgb),.12)}}
.ecart-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid rgba(var(--text-rgb),.16);background:transparent;color:var(--text-2);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
@media (hover:hover){.ecart-btn:where(:not(:disabled,[aria-disabled="true"])):hover{color:var(--bad);border-color:var(--bad);background:var(--bad-bg)}}
.offer.open .ofoot{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--haut,0px) + 76px);z-index:6;pointer-events:none}
.offer.open .ofoot>*{pointer-events:auto}
.offer.open .fold-btn{background:var(--bg-alt);box-shadow:0 10px 24px -10px rgba(0,0,0,.55)}
.offer.open .ecart-btn{background:var(--bg-alt)}
.ecp{margin:16px 0 0;padding:20px;border-radius:var(--r-md);border:1px solid var(--bad);background:var(--bad-bg)}
.ecp legend{margin:0 0 12px;font-weight:700;font-size:16px}
.ecp .mot{display:flex;flex-wrap:wrap;gap:8px}
.ecp .mot label{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--ctl);background:var(--bg);font-size:15px;font-weight:500;cursor:pointer}
.ecp .mot input{position:absolute;opacity:0;width:1px;height:1px}
.ecp .mot label:has(input:checked){border-color:var(--bad);color:var(--bad);font-weight:700}
.ecp .mot label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.ecp .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.metaline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;margin:24px 0 0}
.newline{margin:0;font-size:15px;font-weight:600}
.newline:empty{display:none}
.newline b{display:inline-block;min-width:28px;margin-right:8px;padding:0 8px;border-radius:999px;color:var(--on-grad);text-align:center;background:var(--grad-btn)}
.fline{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:16px 0 0}
.sortw{position:relative;display:inline-block}
.sortw::after{content:"";position:absolute;right:20px;top:50%;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);pointer-events:none;color:var(--text)}
.sortw select{-webkit-appearance:none;appearance:none;min-height:44px;padding:8px 40px 8px 16px;border-radius:999px;border:1px solid rgba(var(--text-rgb),.16);background:rgba(var(--text-rgb),.06);color:var(--text);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.sortw select option{color:var(--text);background:var(--bg-alt)}
.tabs-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabs{display:flex;gap:4px;width:max-content;min-width:100%;padding:4px;border-radius:999px;background:rgba(var(--text-rgb),.06);border:1px solid var(--border-soft)}
.tab{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border:0;border-radius:999px;background:transparent;color:var(--text-2);font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
@media (hover:hover){.tab:where(:not(:disabled,[aria-disabled="true"])):hover{color:var(--text)}}
.tab[aria-selected="true"]{color:var(--on-grad);background:var(--grad-btn)}
.tab .n{min-width:24px;padding:0 8px;border-radius:999px;background:rgba(var(--text-rgb),.1);font-size:13px;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}
.tab[aria-selected="true"] .n{background:color-mix(in srgb,currentColor 20%,transparent)}
.banniere{margin:24px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:20px 24px;border-radius:var(--r-md);background:rgba(var(--c1-rgb),.1);border:1px solid rgba(var(--c1-rgb),.3)}
.banniere p{flex:1 1 280px}

/* Suivi */
.track{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.trow{display:grid;grid-template-columns:minmax(0,1fr) 184px;gap:12px 20px;align-items:center;padding:20px 24px;border-radius:var(--r-md);background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow)}
.trow h3{font-size:17px;font-weight:600;line-height:1.3;font-family:var(--font-body)}
.trow h3 a{color:var(--text)}
.trow .meta{margin:4px 0 0;font-size:14px;color:var(--text-3)}
.trow .meta .late{color:var(--bad);font-weight:600}
.trow .meta .retiree{color:var(--text-2);font-style:italic}
.trow .stw,.trow .stw select{display:block;width:100%;max-width:none}
.todo{margin:24px 0 0;padding:20px 24px;border-radius:var(--r-md);background:var(--warn-bg)}
.todo h3{font-size:15px;font-weight:700;color:var(--warn);font-family:var(--font-body)}
.todo ul{margin:8px 0 0;padding-left:20px}
.fold{margin:24px 0 0;border-radius:var(--r-md);background:var(--card-bg);border:1px solid var(--card-border)}
.fold>summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 24px;cursor:pointer;font-weight:600;list-style:none}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::before{content:"";flex:none;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .25s ease}
.fold[open]>summary::before{transform:rotate(45deg)}
.fold>div{padding:0 24px 24px}
.ecl{list-style:none;margin:0;padding:0}
.ecl>li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:12px 0;border-top:1px solid var(--border-soft);font-size:15px;line-height:1.45}
.ecl>li>div>span{display:block;color:var(--text-3);overflow-wrap:anywhere}
.ecl>li>div{min-width:0}
.ec-titre{display:inline;padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--text);text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.2em;min-height:24px}
@media (hover:hover){.ec-titre:where(:not(:disabled,[aria-disabled="true"])):hover{color:var(--accent)}}
.ec-titre::after{content:"";display:inline-block;width:.45em;height:.45em;margin-left:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.2em) rotate(45deg);transition:transform .2s}
.ec-titre[aria-expanded="true"]::after{transform:translateY(0) rotate(-135deg)}
.ec-fiche{grid-column:1/-1;display:grid;gap:12px;margin-top:8px;padding:16px 20px;border-radius:14px;background:var(--surface-2,rgba(var(--c1-rgb),.05));color:var(--text-2)}
.ec-fiche[hidden]{display:none}
.ec-fiche p{margin:0}
.ec-fiche .k{font-weight:700;color:var(--text);margin-right:4px}
/* Écartées en cartes « article » : couverture au dégradé du thème avec le monogramme de l'entreprise,
   la raison en étiquette, la note en pastille ; la carte ouverte prend toute la largeur */
.ec-zone{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;min-width:0}
.ec-barre{min-width:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.ec-barre[hidden]{display:none}
.ec-barre .ec-filtres{flex:1 1 auto;min-width:0}
.ec-trier{display:inline-flex;align-items:center;gap:10px;margin-left:auto;color:var(--text-2);font-size:14px;font-weight:600;white-space:nowrap}
.ec-trier .sel{min-width:210px}
.ec-filtres{display:flex;flex-wrap:wrap;gap:8px}
.ec-filtres[hidden]{display:none}
.ec-filtre{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(var(--text-rgb),.16);background:transparent;color:var(--text-2);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.ec-filtre[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--bg)}
@media (hover:hover){.ec-filtre:where([aria-pressed="false"]):hover{border-color:rgba(var(--text-rgb),.4);color:var(--text)}}
.ec-n{min-width:22px;padding:0 6px;border-radius:999px;background:rgba(var(--text-rgb),.1);font-size:12px;line-height:20px;text-align:center;font-variant-numeric:tabular-nums}

.ec-filtre[aria-pressed="true"] .ec-n{background:color-mix(in oklab,var(--bg) 22%,transparent)}
.ecg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,288px),1fr));gap:20px}
.ecc{min-width:0}
.ecc.ouverte{grid-column:1/-1}
.ecc>article{display:flex;flex-direction:column;height:100%;border-radius:var(--r-md);background:var(--bg);border:1px solid var(--card-border);overflow:hidden;transition:border-color .2s,transform .2s}
@media (hover:hover){.ecc>article:hover{border-color:rgba(var(--text-rgb),.28)}}
.ecc-couv{position:relative;height:112px;background:linear-gradient(var(--angle,120deg),var(--ca),var(--cb));isolation:isolate}
/* Offre écartée : couverture un peu éteinte, pour la distinguer des offres en cours */
.ecc-couv::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 85% 0,rgba(255,255,255,.28),transparent 60%),repeating-linear-gradient(135deg,rgba(0,0,0,.05) 0 2px,transparent 2px 9px)}
.ecc-couv::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg);opacity:.18}
.ecc.k-fermee .ecc-couv{filter:saturate(.35)}
.ecc-mono{position:absolute;left:20px;bottom:-14px;clip-path:inset(0 0 14px 0);font-family:var(--font-display);font-size:76px;font-weight:700;line-height:1;letter-spacing:-.04em;color:rgba(255,255,255,.9);mix-blend-mode:soft-light;user-select:none}
.ecc-motif{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;margin:0;padding:4px 12px 4px 10px;border-radius:999px;background:var(--bg);color:var(--text);font-size:13px;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.ecc-motif svg{flex:none;color:var(--accent)}
.ecc-couv .disc{position:absolute;right:16px;bottom:-24px;width:52px;height:52px;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.ecc-couv .disc b{font-size:18px}
.ecc-corps{display:grid;gap:8px;padding:20px 20px 0;flex:1}
.ecc-ent{margin:0;padding-right:56px;color:var(--text-3);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;overflow-wrap:anywhere}
.ecc h3{margin:0;font-family:var(--font-display);font-size:19px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--text);text-wrap:balance;overflow-wrap:anywhere}
.ecc-pourquoi{margin:0;padding-left:12px;border-left:2px solid var(--accent);color:var(--text-2);font-size:14px;line-height:1.45}
.ecc-tags{margin:4px 0 0}
.ecc-tags li{font-size:13px;padding:2px 10px}
.ecc-bref{margin:4px 0 0;color:var(--text-2);font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ecc.ouverte .ecc-bref{display:block}
.ecc-pied{display:grid;gap:12px;margin:16px 20px 0;padding:12px 0 16px;border-top:1px solid var(--border-soft)}
.ecc-date{margin:0;color:var(--text-3);font-size:13px}
.ecc-fin{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:6px;margin:0;padding:4px 12px 4px 10px;border-radius:999px;background:var(--bg);color:var(--text);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.ecc-fin svg{flex:none;color:var(--text-3)}
.ecc-fin.proche{color:var(--warn)}
.ecc-fin.proche svg{color:var(--warn)}
.ecc-act{display:flex;gap:8px;width:100%}
.ecc-act .btn-s{flex:1}
.ecc-act .btn-s{min-height:44px;padding:0 16px;font-size:14px}
.ecc-voir::after{content:"";width:6px;height:6px;margin-left:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.ecc-voir[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
.ecc .ec-fiche{margin:0 20px 20px}
@media (min-width:900px){.ecc.ouverte .ec-fiche{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}.ecc.ouverte .ec-fiche>:is(.score,details,p:last-child){grid-column:1/-1}}
@media (min-width:640px){.ecc.ouverte .ecc-pied{grid-template-columns:minmax(0,1fr) auto;align-items:center}.ecc.ouverte .ecc-act{width:auto}.ecc.ouverte .ecc-act .btn-s{flex:none}}
@media (max-width:600px){.ec-trier{width:100%;margin-left:0}.ec-trier .sel{flex:1 1 0;width:auto;min-width:0}.fold>.ec-zone{padding:0 16px 16px}.ec-filtres{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:thin}.ec-filtre{flex:none}.ecc-mono{font-size:64px}}
@media (prefers-reduced-motion:reduce){.ecc>article,.ecc-voir::after{transition:none}}
.ec-fiche .score{margin:0}
.ec-fiche .more summary{cursor:pointer;font-weight:600;color:var(--text)}
.ec-fiche .desc{margin-top:8px;max-height:280px;overflow:auto;white-space:pre-line}
.grid-t{width:max-content;min-width:100%;border-collapse:collapse;font-size:15px}
.grid-t th,.grid-t td{text-align:left;padding:12px;border-top:1px solid var(--border-soft);vertical-align:top}
.grid-t th{font-weight:600;white-space:nowrap}
.grid-t td{max-width:640px}
.scroll{overflow-x:auto}

/* Ma recherche */
.reglages{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:32px}
.bloc{border-radius:var(--r-lg);background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);padding:32px}
.bloc>h3{font-size:20px;margin-bottom:8px}
.bloc>h2.h3{font-size:20px;margin:0 0 8px}
/* « Mon compte » : une page à part dans l'espace (adresse /app/#compte) */
body:not(.vue-compte) #compte{display:none}
body.vue-compte #appli>:not(#compte){display:none}
body:not(.vue-recherche) #recherche{display:none}
body.vue-recherche #appli>:not(#recherche){display:none}
#compte,body.vue-recherche #recherche{padding-top:24px}
:is(#compte,#recherche)>h1{font-size:clamp(32px,6vw,44px);margin:8px 0 8px;outline:none}
:is(#compte,#recherche) .retour{margin:0}
:is(#compte,#recherche) .retour a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--accent);font-weight:600;text-decoration:none}
@media (hover:hover){:is(#compte,#recherche) .retour a:where(:not(:disabled,[aria-disabled="true"])):hover{text-decoration:underline}}
.choix-theme{max-width:420px;margin:8px 0 0}
#compte .reglages{grid-template-columns:minmax(0,1fr)}
@media (max-width:359px){.choix-theme button{gap:4px;padding:0 2px;font-size:14px}}
#bloc-sortie{border-style:dashed}
.bloc>p.aide{color:var(--text-2);margin-bottom:24px}
/* Chaque groupe de champs d'un bloc est séparé par un filet et de l'air, pour qu'on voie où il commence */
/* (filet dessiné en fond : une bordure de fieldset passerait à travers sa légende) */
.bloc>:is(.champ,fieldset,.deux){margin-top:28px;padding-top:28px;background:linear-gradient(var(--border-soft),var(--border-soft)) top/100% 1px no-repeat}
.bloc>:is(h3,p.aide)+:is(.champ,fieldset,.deux){margin-top:0;padding-top:0;background:none}
.bloc .deux .champ+.champ{margin-top:0}
/* Légende sortie du cadre du fieldset : elle se place sous le filet, comme les autres libellés */
.bloc fieldset>legend{float:left;width:100%;padding:0;margin-bottom:12px}
.bloc fieldset>legend+*{clear:both}
.deux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:end}
.deux.deux-haut{align-items:start}
.reglages-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.reglages-duo>.bloc{display:flex;flex-direction:column}
.reglages-duo>.bloc>form{margin-top:auto}
@media (max-width:860px){.reglages-duo{grid-template-columns:minmax(0,1fr)}}
.deux>.champ+.champ{margin-top:0}
.bloc .deux+.champ,.bloc .deux+.erreur+.champ{margin-top:24px}
.bloc .deux+.erreur:not([hidden]){margin-top:8px}
.barre-enr{position:sticky;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:24px;padding:12px 12px 12px 24px;border-radius:999px;background:var(--bg-alt);border:1px solid var(--card-border);box-shadow:0 16px 32px -16px rgba(0,0,0,.4)}
.barre-enr p{flex:1 1 200px;font-size:15px;font-weight:600}

/* Accueil */
.accueil{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:start}
.form-avis{margin-top:32px}
.form-avis .message{margin-top:16px}
.form-lien h2{font-size:24px}
.form-lien p.aide{margin:8px 0 24px;color:var(--text-2)}
.form-lien .btn-p{width:100%;margin-top:24px}
.form-lien .note{margin-top:16px;font-size:14px;color:var(--text-3)}
.piege{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.trois{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:32px;list-style:none;padding:0}
.trois li{padding:24px;border-radius:var(--r-lg);background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow)}
.trois .num{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--grad-btn);color:var(--on-grad);font-family:var(--font-display);font-weight:700;font-size:18px}
.trois h3{margin-top:16px;font-size:20px}
.trois p{margin-top:8px;color:var(--text-2)}
.exemple{margin-top:32px;pointer-events:none}
.legal{max-width:760px}
.legal h2{font-size:24px;margin-top:48px}
.legal h2:first-child{margin-top:0}
.legal p,.legal ul{margin-top:12px;color:var(--text-2)}
.legal li{margin-top:4px}

/* Admin */
.admin-t{width:max-content;min-width:100%;border-collapse:collapse;font-size:14px}
.admin-t th,.admin-t td{text-align:left;padding:12px;border-top:1px solid var(--border-soft);vertical-align:middle;white-space:nowrap}
.admin-t th{font-size:13px;color:var(--text-3);font-weight:600}
.admin-t th.num{text-align:right}
.admin-t td.num{text-align:right;font-variant-numeric:tabular-nums}
.admin-t .btn-s{min-height:40px;padding:0 12px;font-size:14px}
.etat{display:inline-block;padding:2px 8px;border-radius:999px;font-size:13px;font-weight:600;background:var(--chip-bg)}
.etat.actif{background:var(--ok-bg);color:var(--ok)}
.etat.desactive{background:var(--bad);color:var(--bg)}
/* En pause : rouge, comme l'interrupteur et le bandeau de l'espace ; un compte coupé est en rouge plein */
.etat.pause{background:var(--bad-bg);color:var(--bad)}

/* Pied de page « le mot en paliers » : liens en colonnes, puis « flair job » géant coupé par le bas,
   rempli des paliers du dégradé à mesure qu'on arrive en bas de page (pied.js). Mot décoratif : le nom reste écrit dans le texte. */
footer.pied{position:relative;overflow:hidden;margin-top:var(--sec);padding-top:72px;border-top:1px solid var(--border-soft);background-color:var(--bg);background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:48px 48px}
.pied-haut,.pied-legal .wrap{max-width:none;padding-inline:var(--bord)}
.pied-haut{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px 40px}
.pied-dit > p{margin:0 0 20px;font:600 22px/1.3 var(--font-display);letter-spacing:-.01em;max-width:24ch;text-wrap:balance;color:var(--text)}
.pied-dit > p:last-child{margin-bottom:0}
/* Inviter un ami (pied de page de l'espace, Mon compte) */
.pied-dit .invite{max-width:420px}
.invite-f{display:grid;gap:8px}
.invite-f p{margin:0}
.invite-t{font-size:15px;font-weight:600;color:var(--text)}
.invite-fini{margin:0;font-size:15px;color:var(--text-2)}
.invites-liste{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px}
.invites-liste li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;padding:12px 16px;border-radius:var(--r-md);background:var(--chip-bg)}
.invite-mail{min-width:0;overflow-wrap:anywhere;font-weight:600}
.invite-note{margin:0 0 16px;padding:12px 16px;border-radius:var(--r-md);background:var(--ok-bg);color:var(--text);font-size:15px;line-height:1.5}
.invite-note b{color:var(--ok)}
.pied-t{font-family:inherit;margin:0 0 8px;font-size:13px;font-weight:600;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.pied-col ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.pied-col a,.pied-lien{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:inherit;font-size:15px;color:var(--text-2);text-decoration:none;cursor:pointer;text-align:left}
@media (hover:hover){.pied-col a:where(:not(:disabled,[aria-disabled="true"])):hover,.pied-lien:where(:not(:disabled,[aria-disabled="true"])):hover{color:var(--text);text-decoration:underline;text-underline-offset:4px}}
.pied-mail{overflow-wrap:anywhere}
.pied-mot{container-type:inline-size;margin-top:40px;padding-inline:var(--bord);pointer-events:none;user-select:none}
/* Le mot occupe toute la largeur utile : sa taille suit la largeur du conteneur (« flair job » fait 3,16 fois sa taille) */
.pied-mot-in{--fs:calc(100cqw / 3.78);position:relative;display:block;height:calc(var(--fs) * .8);overflow:hidden}
/* Rembourrage en haut aussi (décalé d'autant) : le dégradé découpé au texte ne peint que dans la boîte, et les jambages
   montants (points des i, hampes du d, police à chasse fixe de l'admin) dépassent la hauteur de ligne serrée */
.pied-mot-in span{position:absolute;left:50%;translate:-50% 0;top:calc(var(--fs) * -.13);white-space:nowrap;font:700 var(--fs)/.82 var(--font-display);letter-spacing:-.06em;padding:.25em .1em .3em .02em}
/* « flair admin » fait 4,47 fois sa taille */
.pied-mot-admin .pied-mot-in{--fs:calc(100cqw / 4.9)}
/* Préprod : « Flair PréProd », plus long, tient dans la même largeur */
.preprod .pied-mot:not(.pied-mot-admin) .pied-mot-in{--fs:calc(100cqw / 5.75)}
/* (le rembourrage agrandit la boîte du texte : sans lui, le dégradé découpé au texte s'arrête avant le bord du b et le bas du j) */
.pied-mot-in .contour{color:transparent;-webkit-text-stroke:1.5px rgba(var(--text-rgb),.18)}
.pied-mot-in .plein{background:var(--paliers);-webkit-background-clip:text;background-clip:text;color:transparent;clip-path:inset(calc(100% - var(--rempli,100%)) 0 0 0);transition:clip-path .2s linear}
.pied-legal{margin-top:56px;padding-block:16px 0;border-top:1px solid var(--border-soft);color:var(--text-3);font-size:14px}
.pied-legal .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
@media (max-width:860px){.pied-haut{grid-template-columns:repeat(2,minmax(0,1fr))}.pied-dit{grid-column:1/-1}}
@media (max-width:860px){:root{--bord:24px}}
@media (max-width:680px){.graphes{grid-template-columns:minmax(0,1fr)}}
@media (max-width:680px){:root{--bord:16px}footer.pied{padding-top:56px}.pied-legal{margin-top:40px}.pied-mot{margin-top:32px}}
@media (max-width:400px){.pied-haut{grid-template-columns:minmax(0,1fr)}}
/* Pied du tableau de bord : trois colonnes de liens, sans le mot d'accueil */
@media (min-width:861px){#pied-admin .pied-haut{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion: reduce){.pied-mot-in .plein{clip-path:none;transition:none}}
/* Message de confirmation : centré dans la largeur disponible (et pas dans la moitié droite de l'écran), il passe à la ligne proprement sur téléphone */
.toast{position:fixed;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);width:fit-content;max-width:560px;margin:0 auto;padding:12px 20px;border-radius:18px;background:var(--text);color:var(--bg);font-size:15px;font-weight:600;line-height:1.35;text-align:center;text-wrap:balance;box-shadow:0 16px 32px -12px rgba(0,0,0,.5);z-index:45;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .25s ease,transform .25s ease}
.toast.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.toast{transform:none;transition:opacity .25s ease}}
.undo{position:fixed;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);width:fit-content;max-width:560px;margin:0 auto;z-index:46;display:flex;align-items:center;gap:16px;padding:8px 8px 8px 20px;border-radius:24px;background:var(--text);color:var(--bg);font-size:15px;font-weight:600;line-height:1.35;box-shadow:0 16px 32px -12px rgba(0,0,0,.5)}
.undo>span{min-width:0}
.undo button{flex:none}
.undo button{min-height:44px;padding:0 16px;border-radius:999px;border:0;background:var(--bg);color:var(--text);font:inherit;font-size:15px;font-weight:700;cursor:pointer}
dialog.boite{max-width:480px;width:calc(100% - 32px);padding:32px;border-radius:var(--r-lg);border:1px solid var(--card-border);background:var(--bg-alt);color:var(--text)}
dialog.boite::backdrop{background:rgba(0,0,0,.55)}
dialog.boite h2{font-size:24px}
dialog.boite p{margin-top:12px;color:var(--text-2)}

@media (max-width:860px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .accueil{grid-template-columns:1fr;gap:40px}
  .trois{grid-template-columns:1fr}
}
@media (max-width:680px){
  :root{--sec:80px}
  .wrap{padding-inline:16px}
  .nav-in{padding:0 16px}
  :root:not(:has(main.ac)){--pilule-marge:16px}
  .hero{padding-block:32px 0}
  h1{font-size:32px}
  .lede{font-size:17px;margin-top:16px}
  .carte,.bloc{padding:24px 20px}
  .offer{padding:20px}
  .ohead{grid-template-columns:56px minmax(0,1fr)}
  .disc{width:56px;height:56px}
  .disc b{font-size:20px}
  .ohead .stw{grid-column:1/-1;display:block}
  .ohead .stw select{max-width:none;width:100%}
  .score{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
  .pc p,.pc .br{grid-template-columns:1fr;gap:4px}
  .pc.brief .br{margin:0 -8px;padding:12px 8px}
  .dos{padding:20px}
  .dl a,.dl button{flex:1 1 calc(50% - 4px);justify-content:center;min-width:0}
  .offer h3{font-size:20px}
  .offer.open .ofoot{top:calc(env(safe-area-inset-top,0px) + var(--haut,0px) + 68px)}
  .trow{grid-template-columns:1fr;padding:16px}
  .deux{grid-template-columns:1fr}
  .villes li{grid-template-columns:minmax(0,1fr) 44px}
  .villes li .sel-rayon{grid-column:1/-1;grid-row:2}
  .villes li .sel-presence{grid-column:1/-1;grid-row:3}
  .villes li.ville-p{grid-template-columns:minmax(0,1fr) auto 44px}
  .villes li.ville-auto{grid-template-columns:max-content minmax(0,1fr)}
  .stats{gap:8px}
  .stats li{padding:12px 4px}
  .stats b{font-size:24px}
  .stats span{font-size:13px}
  .barre-enr{border-radius:var(--r-md);padding:12px 16px}
  .barre-enr .btn-p{flex:1 1 auto}
  .barre-enr .btn-s{flex:none}
  #barre-enr :is(.btn-p,.btn-s){width:auto}
  .barre-enr p{flex-basis:100%}
  /* Mobile : les quatre segments, puis une seule ligne lisible sous la barre */
  .etapes{position:relative;padding-bottom:28px}
  .etapes li span{display:none}
  .etapes li[aria-current="step"]::after{content:attr(data-l);position:absolute;left:0;bottom:0;font-size:14px;white-space:nowrap}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .offer,.stats li,.btn-p,.btn-s,.fold-btn,.ecart-btn,.dl a,.dl button,.copy,.nav-btn,.tab,.trow,.disc,.trois li,.nav-cta{transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,border-color .2s ease,background-color .2s ease,color .2s ease}
  .offer:not(.open):where(:not(:disabled,[aria-disabled="true"])):hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(var(--c1-rgb),.55);border-color:rgba(var(--c1-rgb),.45)}
  .offer:not(.open):where(:not(:disabled,[aria-disabled="true"])):hover .disc{transform:scale(1.06) rotate(-4deg)}
  .stats li:where(:not(:disabled,[aria-disabled="true"])):hover,.trois li:where(:not(:disabled,[aria-disabled="true"])):hover{transform:translateY(-2px);border-color:rgba(var(--c1-rgb),.4)}
  .btn-p:where(:not(:disabled,[aria-disabled="true"])):hover,.btn-s:where(:not(:disabled,[aria-disabled="true"])):hover,.fold-btn:where(:not(:disabled,[aria-disabled="true"])):hover,.ecart-btn:where(:not(:disabled,[aria-disabled="true"])):hover,.dl a:where(:not(:disabled,[aria-disabled="true"])):hover,.dl button:where(:not(:disabled,[aria-disabled="true"])):hover,.copy:where(:not(:disabled,[aria-disabled="true"])):hover,.nav-cta:where(:not(:disabled,[aria-disabled="true"])):hover{transform:translateY(-2px)}
  .btn-p:active,.btn-s:active,.fold-btn:active,.ecart-btn:active,.dl a:active,.copy:active,.tab:active{transform:translateY(0) scale(.97)}
  .nav-btn:where(:not(:disabled,[aria-disabled="true"])):hover{transform:rotate(-8deg) scale(1.05)}
  .tab:not([aria-selected="true"],[aria-current="true"]):where(:not(:disabled,[aria-disabled="true"])):hover{background:rgba(var(--text-rgb),.08)}
  .trow:where(:not(:disabled,[aria-disabled="true"])):hover{transform:translateX(3px);border-color:rgba(var(--c1-rgb),.35)}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}

/* ---------------------------------------------------------------------------
   Tableau de bord admin
   --------------------------------------------------------------------------- */
/* Même largeur que le reste du site (1080 px) : le tableau des comptes y tient, et défile dans sa carte s'il grandit */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;margin:32px 0 0;padding:0}
.kpis li{padding:20px;border-radius:var(--r-md);background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow)}
.kpis b{display:block;font-family:var(--font-display);font-size:32px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.kpis b small{font-size:18px;color:var(--text-3);font-weight:600}
.kpis span{display:block;margin-top:8px;font-size:14px;line-height:1.35;color:var(--text-2)}
.kpis li.hot b{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
/* (après la règle de base, sinon elle l'écrase) */
@media (max-width:860px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.jauge{display:block;height:8px;margin-top:12px;border-radius:999px;background:rgba(var(--text-rgb),.1);overflow:hidden}
.jauge span{display:block;height:100%;margin:0;border-radius:999px;background:var(--grad-plein)}
.jauge.haute span{background:var(--bad)}
.titre-bloc{margin-top:40px;font-size:20px}
.panneau{padding:24px;margin-top:24px}
.panneau h3{font-size:18px}
.panneau .aide{margin:8px 0 16px}
.vide{color:var(--text-3);list-style:none}
.graphes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
@media (max-width:680px){.graphes{grid-template-columns:minmax(0,1fr)}}
.graphe{margin:0;padding:20px;border-radius:var(--r-md);background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow)}
.graphe figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;font-weight:600;color:var(--text-2)}
.graphe figcaption b{font-family:var(--font-display);font-size:24px;color:var(--text);font-variant-numeric:tabular-nums}
.barres{position:relative;display:flex;align-items:flex-end;gap:clamp(2px,1.1%,8px);height:96px;margin-top:16px;border-bottom:1px solid var(--border)}
.barres span{position:relative;flex:1 1 0;height:var(--h);min-height:0;border-radius:6px 6px 2px 2px;background:linear-gradient(to top,var(--c1),var(--c3))}
.barres span.zero{height:2px;background:var(--border-soft);border-radius:0}
@media (hover:hover){.barres span:where(:not(:disabled,[aria-disabled="true"])):hover{filter:brightness(1.15)}}
@media (hover:hover){.barres span:where(:not(:disabled,[aria-disabled="true"])):hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:2;padding:4px 8px;border-radius:8px;background:var(--text);color:var(--bg);font-size:13px;font-weight:600;white-space:nowrap;pointer-events:none}}
@media (hover:hover){.barres span:first-child:where(:not(:disabled,[aria-disabled="true"])):hover::after{left:0;transform:none}}
@media (hover:hover){.barres span:last-child:where(:not(:disabled,[aria-disabled="true"])):hover::after{left:auto;right:0;transform:none}}
.axe{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:var(--text-3)}
.fil{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:2px}
.fil li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:baseline;padding:12px 16px 12px 20px;border-radius:12px;background:var(--card-bg);border:1px solid var(--border-soft);position:relative}
.fil li::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:var(--border)}
.fil li.f-nouveau::before,.fil li.f-entretien::before{background:var(--ok)}
.fil li.f-erreur::before{background:var(--bad)}
.fil li.f-candidature::before,.fil li.f-suggestion::before{background:var(--accent)}
.fil li.f-ecart::before{background:var(--warn)}
.fil time{font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums}
.fil p{margin:0;font-size:15px;line-height:1.45}
.fil .offre{color:var(--text-2)}
.fil li.cache{display:none}
.fil-plus{margin-top:12px}
.entonnoir,.barres-h{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.entonnoir li,.barres-h li{display:grid;grid-template-columns:minmax(110px,180px) minmax(0,1fr) 150px;gap:16px;align-items:center}
.entonnoir .lab,.barres-h .lab{font-size:15px;font-weight:600}
.piste{display:block;height:20px;border-radius:6px;background:rgba(var(--text-rgb),.06);overflow:hidden}
.piste span{display:block;height:100%;border-radius:6px;background:var(--accent);min-width:2px}
.entonnoir .val,.barres-h .val{font-variant-numeric:tabular-nums;text-align:right}
.entonnoir .val b,.barres-h .val b{font-size:18px}
.entonnoir small,.barres-h small{display:block;font-size:12px;color:var(--text-3)}
#bloques .ecl{margin-top:12px}
.tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;margin:24px 0 0;padding:0}
.tuiles li{padding:20px;border-radius:var(--r-md);background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow)}
.tuiles li.alerte{border-color:var(--warn);background:linear-gradient(var(--warn-bg),var(--warn-bg)),var(--card-bg)} /* teinte sur le fond de carte : opaque aussi en Matrix */
.tuiles b{display:block;font-family:var(--font-display);font-size:28px;line-height:1.1;font-variant-numeric:tabular-nums}
.tuiles b small{font-size:18px;color:var(--text-3)}
.tuiles .lab{display:block;margin-top:8px;font-weight:600}
.tuiles .aide{display:block;margin-top:4px;font-size:14px;line-height:1.4}
.deux-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}
.sugg{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.sugg li{padding:20px 24px;border-radius:var(--r-md);background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow)}
.sugg li.vide{background:transparent;border-style:dashed;box-shadow:none}
.sugg-t{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.sugg-t time{font-size:13px;color:var(--text-3)}
.sugg p{margin:12px 0 16px;white-space:pre-wrap;line-height:1.55}
.sugg-actions{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:16px}
.sugg-rep{margin-top:16px;display:grid;gap:8px}
.sugg-rep label{font-weight:600}
.sugg-rep .aide{margin:0}
.sugg-rep .sugg-actions{margin-top:4px}
.sugg-reponse{margin-top:16px;padding:12px 16px;border-left:3px solid var(--accent);border-radius:0 12px 12px 0;background:rgba(var(--text-rgb),.04)}
.sugg-reponse span{font-size:13px;font-weight:600;color:var(--text-2)}
.sugg-reponse p{margin:6px 0 0}
.lien-btn.nom{min-height:32px;padding:0;font-size:15px;color:var(--text);text-decoration-color:var(--accent)}
.qui-l{display:flex;align-items:center;gap:12px}
.cpt-relance{width:40px;height:40px}
/* Comptes (admin) : un répertoire, sans défilement de côté */
.cpt-outils{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;margin-top:24px}
.cpt-outils label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.cpt-cherche{flex:1 1 280px;min-width:0}
.cpt-tri{flex:0 1 260px;min-width:0}
.cpt-export{min-height:48px}
.cpt-abc{display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;padding:2px}
.cpt-abc::-webkit-scrollbar{display:none}
.cpt-abc .abc{flex:none;scroll-snap-align:start}
.abc-wrap{display:flex;align-items:center;gap:8px;margin-top:16px;min-width:0}
.abc-wrap .cpt-abc{flex:1 1 auto;min-width:0}
.abc-wrap.deborde .cpt-abc{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
.abc-fl{flex:none;display:flex;gap:4px}
.abc-fl .abc{display:grid;place-items:center;padding:0;width:36px}
.abc-fl .abc:disabled{opacity:.35}
.abc{min-width:36px;min-height:36px;padding:0 8px;border-radius:10px;border:1px solid var(--border-soft);background:transparent;color:var(--text);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.abc[aria-pressed="true"]{background:var(--grad-btn);color:var(--on-grad);border-color:transparent}
.abc:disabled{opacity:.35;cursor:default}
@media (hover:hover){.abc:not(:disabled,[aria-pressed="true"]):hover{background:rgba(var(--text-rgb),.08)}}
.cpt-compte{margin:16px 0 8px;font-size:14px;color:var(--text-2)}
.rep-barre{margin:12px 0 4px}
/* Listes de personnes (pas encore lancés, liste d'attente) : un seul fond continu, comme les comptes */
.rep-liste{padding:4px 20px;border-radius:var(--r-lg);background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow)}
.rep-liste > li{border-bottom:1px solid var(--border-soft)}
.rep-liste > li:last-child{border-bottom:0}
.rep-liste:empty{display:none}
.rep-barre .cpt-cherche label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.act-rep{margin-bottom:16px}
.cpt-liste{list-style:none;margin:0;padding:8px 20px;display:grid;gap:0;border-radius:var(--r-lg);background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow)}
.cpt-l{padding:16px 0 4px;border-bottom:1px solid var(--border-soft)}
.cpt-lh{margin:0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.cpt{display:grid;grid-template-columns:40px minmax(0,240px) minmax(0,1fr);gap:12px 16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--border-soft)}
.cpt:last-child{border-bottom:0}
.cpt-liste:empty{display:none}
.cpt-id{min-width:0}
.cpt-id p{margin:0}
.cpt-nom{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.cpt-mail{overflow-wrap:anywhere}
.cpt-chiffres{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px 12px;margin:0}
.cpt-chiffres div{min-width:0}
.cpt-chiffres dt{font-size:12px;line-height:1.3;color:var(--text-3)}
.cpt-chiffres dd{margin:2px 0 0;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.cpt-chiffres .mal dd{color:var(--bad)}
@media (max-width:1000px){.cpt-chiffres{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:720px){
  .cpt{grid-template-columns:40px minmax(0,1fr)}
  .cpt-chiffres{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr))}
  .cpt-tri,.cpt-export{flex:1 1 100%}
}
/* Bandeau en ligne : le message est verrouillé */
.bd-champs:disabled :is(textarea,input),.bd-champs:disabled .pastilles label{opacity:.6;cursor:not-allowed}
.cpt-relance svg{width:18px;height:18px}
.cpt-relance:disabled{opacity:.4;cursor:not-allowed}
.cpt-relance.en-cours{opacity:1;cursor:progress;color:var(--accent)}
.cpt-relance.en-cours svg{animation:tourne 1.2s linear infinite}
@media (prefers-reduced-motion:reduce){.cpt-relance.en-cours svg{animation-duration:3.6s}}
dialog.boite.fiche{max-width:1040px;max-height:calc(100dvh - 32px);overflow:auto}
.fiche-tete{display:flex;align-items:center;justify-content:space-between;gap:16px}
.fiche .aide{margin-top:8px}
.fiche-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:24px}
.fiche-bloc{padding:20px;border-radius:var(--r-md);background:var(--card-bg);border:1px solid var(--card-border)}
.fiche-bloc h3{font-size:17px}
.fiche-bloc h4{margin-top:16px;font-size:14px;color:var(--text-2)}
.fiche-bloc .graphe{margin-top:16px;padding:0;border:0;box-shadow:none;background:transparent}
.dl-fiche{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 16px;margin:16px 0 0;font-size:15px}
.dl-fiche dt{color:var(--text-3);font-weight:600}
.dl-fiche dd{margin:0}
.mini-k{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;list-style:none;margin:16px 0 0;padding:0}
.mini-k li{padding:12px;border-radius:12px;background:rgba(var(--text-rgb),.05)}
.mini-k b{display:block;font-size:20px;font-variant-numeric:tabular-nums}
.mini-k span{display:block;margin-top:4px;font-size:13px;color:var(--text-2)}
.ecarts{margin:4px 0 0;padding-left:18px}
.ecarts b{font-weight:600}
.liste-simple{margin:8px 0 0;padding-left:20px;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.fiche-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
@media (max-width:680px){
  .fil li{grid-template-columns:1fr;gap:4px}
  .entonnoir li,.barres-h li{grid-template-columns:1fr auto;gap:4px 12px}
  .entonnoir .piste,.barres-h .piste{grid-column:1 / -1;grid-row:2}
  .deux-col{grid-template-columns:1fr}
  .tuiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .tuiles li{padding:16px}
  .tuiles b{font-size:24px}
  dialog.boite.fiche{padding:20px}
}
@media (forced-colors:active){
  .barres span,.piste span,.jauge span{background:CanvasText}
}
.fiche-grille .fiche-bloc:last-child{grid-column:1 / -1}
/* Bandeau de mesure d'audience : non bloquant, deux choix de même poids */
.consent{position:fixed;left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:60;max-width:640px;margin:0 auto;padding:20px 24px;border-radius:var(--r-lg);background:var(--bg-alt);color:var(--text);border:1px solid var(--card-border);box-shadow:0 12px 40px rgba(0,0,0,.25)}
.consent h2{font-size:18px;letter-spacing:0}
.consent p{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--text-2)}
.consent a{color:var(--accent)}
.consent-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.consent-actions .btn-s{flex:1 1 140px}
.sous-titre{margin:16px 0 8px;font-size:14px;color:var(--text-2)}
/* Dans les panneaux étroits du tableau de bord, la barre passe sous l'intitulé */
.panneau .barres-h li{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
.panneau .barres-h .piste{grid-column:1 / -1;grid-row:2;height:12px}
.panneau .barres-h .val small{display:inline;margin-left:6px}

/* Boutons flottants : « Un souci ? » en bas à gauche (pages connectées), « Remonter » en bas à droite (partout) */
.souci-btn,.haut-btn{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);z-index:45;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:999px;border:1px solid var(--card-border);background:var(--bg-alt);color:var(--text);font:inherit;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.souci-btn{left:16px;padding:0 20px 0 16px}
.haut-btn{right:16px;width:48px;padding:0}
@media (hover:hover){.souci-btn:where(:not(:disabled,[aria-disabled="true"])):hover,.haut-btn:where(:not(:disabled,[aria-disabled="true"])):hover{border-color:var(--accent)}}
.souci-btn:focus-visible,.haut-btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.haut-btn[hidden]{display:none}
/* Le bandeau de mesure d'audience passe devant : les boutons s'effacent le temps du choix */
body:has(.consent:not([hidden])) :is(.souci-btn,.haut-btn){display:none}
/* La barre « Enregistrer » collée en bas : les boutons montent au-dessus */
body:has(.barre-enr:not([hidden])) :is(.souci-btn,.haut-btn){bottom:calc(env(safe-area-inset-bottom,0px) + 96px)}
/* Le pied de page garde de la place pour ne jamais être caché par les boutons */

@media (max-width:600px){
  .souci-btn{width:48px;padding:0}
  .souci-btn span:not(.ic){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* Boîte « Un souci, une idée ? » */
dialog.boite.souci{max-width:560px;max-height:calc(100dvh - 32px);overflow:auto}
dialog.souci form>*+*{margin-top:20px}
dialog.souci .souci-types{margin-top:20px}
dialog.souci .champ>.etiquette{font-size:15px;font-weight:600}
.souci-caps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.souci-caps:empty{display:none}
.souci-caps li{position:relative;width:112px;height:84px;border-radius:12px;overflow:hidden;border:1px solid var(--card-border);background:var(--bg)}
.souci-caps img{width:100%;height:100%;object-fit:cover;display:block}
.souci-caps .souci-vign{position:static;width:100%;height:100%;padding:0;border:0;border-radius:0;background:none;display:block;cursor:zoom-in}
.souci-caps .souci-vign:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.souci-caps button:not(.souci-vign){position:absolute;top:4px;right:4px;width:32px;height:32px;min-height:0;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;border:0;display:grid;place-items:center;cursor:pointer}
.souci-caps button:not(.souci-vign):focus-visible{outline:3px solid var(--focus);outline-offset:2px}
#souci-ajout label.btn-s{cursor:pointer}
#souci-ajout:has(input:focus-visible) label{outline:3px solid var(--focus);outline-offset:3px}
.souci-ctx{border-radius:var(--r-md);border:1px solid var(--card-border);padding:12px 16px}
.souci-ctx summary{cursor:pointer;font-weight:600;font-size:15px;min-height:24px}
.souci-ctx ul{margin:8px 0 0;padding-left:20px;color:var(--text-2);font-size:14px;line-height:1.5;word-break:break-word}
#souci-compte:empty{display:none}
#souci-merci h2{font-size:24px}
/* Tableau de bord : captures et contexte d'un signalement */
.sugg-caps{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.sugg-caps :is(a,.cap-btn){display:block;width:160px;height:110px;padding:0;border-radius:12px;overflow:hidden;border:1px solid var(--card-border);background:none;cursor:zoom-in}
.sugg-caps :is(a,.cap-btn):focus-visible{outline:3px solid var(--focus);outline-offset:3px}
dialog.boite.visionneuse{max-width:min(1100px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px}
.cap-fig{margin:16px 0 0;display:grid;gap:8px}
.cap-fig img{display:block;max-width:100%;max-height:calc(100dvh - 240px);margin:0 auto;border-radius:12px;border:1px solid var(--card-border);object-fit:contain;background:#fff}
.cap-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
/* Cloche des notifications (admin) */
.cloche{position:relative}
.cloche-n{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--bad);color:#1f0006;font-size:11px;font-weight:800;line-height:18px;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--bg)}
/* Aussi large que le contenu de la page derrière (1080 px moins les marges) */
dialog.boite.notifs-boite,dialog.boite.erreur-boite{max-width:1032px}
.notif-g{margin-top:24px}
.notif-g h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:16px}
.notif-g h3 .n{min-width:24px;padding:0 8px;border-radius:999px;background:var(--chip-bg);font-size:13px;text-align:center}
.notif-l{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.notif-l li{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:rgba(var(--text-rgb),.04);border:1px solid var(--border-soft)}
.notif-l p{margin:0;display:grid;gap:2px;color:var(--text);overflow-wrap:anywhere}
.notif-l time{font-size:13px;color:var(--text-3)}
.notif-pt{width:10px;height:10px;border-radius:50%;background:var(--text-3)}
.notif-pt.pause{background:var(--bad)}
.notif-pt.desactive{background:var(--bad)}
.notif-pt.actif{background:var(--ok)}
.notif-l .btn-s{min-height:40px;padding:0 12px;font-size:14px}
.notif-act{margin:8px 0 0}
.notif-vide{margin-top:24px;color:var(--text-2)}
@media (max-width:560px){.notif-l li{grid-template-columns:10px minmax(0,1fr)}.notif-l .btn-s{grid-column:2;justify-self:start}}
.sugg-caps img{width:100%;height:100%;object-fit:cover;display:block}
.sugg-ctx{margin:12px 0}
.sugg-ctx summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--text-2)}
.sugg-ctx dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:8px 0 0;font-size:13px;color:var(--text-2)}
.sugg-ctx dt{font-weight:600}
.sugg-ctx dd{margin:0;word-break:break-word}
dialog.souci .champ p{margin-top:0}
.champ>.etiquette+.aide{margin-top:-8px}
.sugg li .sugg-caps>li{padding:0;border:0;background:none;box-shadow:none;border-radius:0}
@media (max-width:600px){dialog.boite.souci{padding:24px 20px}}
dialog.souci .champ>:is(label,.etiquette)+.aide{margin-top:-8px}
/* « Ma recherche » en onglets */
.rech-tabs{margin-top:24px}
.rech-tabs+.reglages{margin-top:20px}
#recherche .bloc>details.fold{margin-top:28px}
/* Fiche d'une offre : tous les encadrés ont la même largeur (bord à bord du contenu),
   le même rayon et la même marge intérieure (24 px), pour que libellés et textes s'alignent */
.pc.brief{gap:0;padding:4px 24px;border-radius:var(--r-md);background:rgba(var(--c1-rgb),.08);border:1px solid rgba(var(--c1-rgb),.16)}
.pc.brief .br{margin:0;padding:14px 0;border-radius:0;background:none}
.pc.brief .br+.br{border-top:1px solid var(--border-soft)}
.pc:not(.brief){padding:16px 24px;border-radius:var(--r-md);background:rgba(var(--text-rgb),.04);border:1px solid var(--border-soft)}
.pc:not(.brief) p{padding:6px 0}
.dos{padding:20px 24px}
.acc{padding:20px 24px}
.desc{padding:20px 24px;border-radius:var(--r-md)}
.snote textarea{padding:12px 16px;border-radius:var(--r-md)}
@media (max-width:600px){
  .pc.brief,.pc:not(.brief),.dos,.acc,.desc{padding-left:16px;padding-right:16px}
  .pc p,.pc .br{grid-template-columns:minmax(0,1fr);gap:4px}
}
.dos .lien-btn{margin-left:-4px}
#bloc-cv #cv-nom{margin-bottom:8px}
/* Revue UI : chiffres cliquables, lien « Modifier » des critères, onglets homogènes, tri pleine largeur sur mobile */
.stats li{padding:0;transition:border-color .2s ease}
@media (hover:hover){.stats li:where(:not(:disabled,[aria-disabled="true"])):hover{border-color:var(--accent)}}
.stats a{display:block;padding:20px;border-radius:inherit;color:inherit;text-decoration:none}
.stats a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.crit li.crit-mod{padding:0;background:none}
.crit-mod a{display:inline-flex;align-items:center;min-height:44px;margin-block:-6px;padding:4px 8px;color:var(--accent);font-weight:600;text-underline-offset:3px}
/* Tous les onglets et filtres du site occupent la largeur de leur conteneur ; trop nombreux, ils défilent */
.tabs{min-width:100%}
.tabs .tab{flex:1 1 auto;justify-content:center}
.offer h3 .ext-ico{display:inline-block;margin-left:6px;vertical-align:baseline;color:var(--text-3)}
/* Aperçu du CV */
dialog.boite.apercu{max-width:960px;width:calc(100% - 32px);height:calc(100dvh - 48px);max-height:none;padding:24px;display:none;flex-direction:column;gap:16px}
dialog.boite.apercu[open]{display:flex}
dialog.boite.apercu.word{height:auto}
.ap-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.ap-tete h2{font-size:22px}
.ap-tete .aide{margin-top:4px;word-break:break-word}
.ap-tete .ap-date{margin-top:2px;font-size:14px;font-variant-numeric:tabular-nums}
.ap-hist{display:grid;grid-template-columns:auto minmax(0,560px);justify-content:start;align-items:center;gap:6px 16px}
.ap-hist .etiquette{margin:0}
.ap-hist .aide{grid-column:2;margin:0;font-size:13px}
.ap-hist select.sel{width:100%;min-width:0;font-variant-numeric:tabular-nums}
.ap-ancienne.message{padding:12px 16px;font-size:14px}
.ap-corps{flex:1 1 auto;min-height:0;border-radius:var(--r-md);overflow:hidden;background:var(--bg);border:1px solid var(--card-border);display:grid;place-items:center}
.ap-corps iframe{width:100%;height:100%;border:0;background:#fff}
.ap-corps .chargement,.ap-corps .message{margin:24px}
.ap-word{padding:32px 24px;text-align:center}
.ap-actions,.ap-confirme .actions{display:flex;flex-wrap:wrap;gap:12px}
dialog.apercu p{margin-top:0}
.ap-confirme p+p{margin-top:16px}
.ap-mobile{display:none;font-size:13px}
@media (max-width:600px){
  dialog.boite.apercu{width:100%;max-width:100%;height:100dvh;border-radius:0;padding:16px}
  .ap-mobile{display:block}
  .ap-hist{grid-template-columns:minmax(0,1fr)}
  .ap-hist .aide{grid-column:1}
  .ap-actions>*{flex:1 1 auto}
}

/* Filtres des offres, repris de la veille d'Alex : onglets de note en pleine largeur,
   menus à cases Zone et Contrat (avec compteurs), tri, « Tout effacer ». Feuille du bas sur mobile. */
.fbar{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;flex:1 1 auto;min-width:0}
#offres .tabs-wrap{flex:1 1 auto;max-width:100%}
#offres .tabs{width:100%;min-width:0}
#offres .tab{flex:1 1 auto;justify-content:center}
.dd{position:relative;display:inline-flex;align-items:center;flex:1 1 auto;min-width:0}
.fline .sortw{flex:1 1 auto;min-width:0}
.fline .sortw select{width:100%;max-width:none}
.ddbtn{display:inline-flex;align-items:center;width:100%;min-height:44px;padding:8px 40px 8px 16px;border-radius:999px;border:1px solid rgba(var(--text-rgb),.16);background:rgba(var(--text-rgb),.06);color:var(--text);font:inherit;font-size:15px;font-weight:600;cursor:pointer;position:relative;transition:background-color .2s ease,border-color .2s ease}
.ddbtn::after{content:"";position:absolute;right:18px;top:50%;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.ddbtn[aria-expanded="true"]::after{transform:translateY(-30%) rotate(-135deg)}
@media (hover:hover){.ddbtn:where(:not(:disabled,[aria-disabled="true"])):hover{background:rgba(var(--text-rgb),.12)}}
.ddbtn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.ddl{flex:none}
.ddv{font-weight:500;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ddv:empty{display:none}
.dd.on .ddbtn{border-color:var(--accent);background:rgba(var(--c1-rgb),.14);padding-right:68px}
.dd.on .ddbtn::after{right:44px}
.dd.on .ddv{color:var(--text)}
.ddx{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer}
@media (hover:hover){.ddx:where(:not(:disabled,[aria-disabled="true"])):hover{background:rgba(var(--text-rgb),.12)}}
.ddx:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.ddpanel{position:absolute;top:calc(100% + 8px);left:0;z-index:30;min-width:280px;max-height:60vh;overflow-y:auto;padding:8px;border-radius:var(--r-md);background:var(--bg-alt);border:1px solid var(--card-border);box-shadow:0 24px 48px -16px rgba(0,0,0,.45)}
.ddpanel h3{display:none;margin:4px 8px 8px;font-size:18px}
.opt{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px;border-radius:12px;cursor:pointer;font-size:15px}
@media (hover:hover){.opt:where(:not(:disabled,[aria-disabled="true"])):hover{background:rgba(var(--text-rgb),.06)}}
.opt input{width:18px;height:18px;margin:0;accent-color:var(--plein);flex:none}
.opt .c{margin-left:auto;padding-left:16px;color:var(--text-3);font-variant-numeric:tabular-nums;font-size:14px}
.opt.zero{color:var(--text-3)}
.ddfoot{display:flex;justify-content:space-between;gap:8px;margin-top:4px;padding:8px 4px 0;border-top:1px solid var(--border-soft)}
.ddfoot button{min-height:44px;padding:0 16px;border-radius:999px;border:0;background:transparent;color:var(--accent);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.ddfoot .ok{color:var(--on-grad);background:var(--grad-btn)}
.ddback{position:fixed;inset:0;z-index:44;background:rgba(0,0,0,.5)}
.clearall{flex:none;min-height:44px;padding:0 12px;border:0;background:transparent;color:var(--accent);font:inherit;font-size:15px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
@media (max-width:680px){
  .fline .fbar{flex:1 1 100%;flex-wrap:wrap}
  .fline .dd,.fline .sortw{flex:1 1 0}
  .fline .ddbtn,.fline .sortw select{padding-left:12px;padding-right:30px;font-size:14px}
  .ddbtn::after{right:13px}
  .fline .sortw::after{right:13px}
  .dd.on .ddbtn{padding-right:56px}
  .dd.on .ddbtn::after{right:40px}
  #offres .tabs-wrap{width:100%}
  #offres .tab{padding:8px 10px;gap:6px}
  .ddpanel{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:46;min-width:0;max-height:80vh;border-radius:24px 24px 0 0;padding:16px 16px calc(env(safe-area-inset-bottom,0px) + 16px)}
  .ddpanel h3{display:block}
  .fline .clearall{flex-basis:100%;text-align:left}
  .dd.on .ddv{display:none}
  .dd.on .ddbtn{padding-right:40px}
  .dd.on .ddbtn::after{display:none}
  .dd.on .ddl::after{content:" (" attr(data-n) ")"}
}
body:has(#ddback:not([hidden])) :is(.souci-btn,.haut-btn),body:has(dialog[open]) :is(.souci-btn,.haut-btn){display:none}
/* Suivi, repris de la veille d'Alex : bilan, lignes avec statut + date + note, ajout manuel */
.funnel{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;list-style:none;margin:24px 0 0;padding:0}
.funnel li{padding:16px;border-radius:var(--r-md);background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);text-align:center}
.funnel b{display:block;font-family:var(--font-display);font-size:26px;line-height:1;font-variant-numeric:tabular-nums}
.funnel span{display:block;margin-top:6px;font-size:14px;color:var(--text-2)}
.funnel li.rate b{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.trow{grid-template-columns:minmax(0,1fr) 168px 160px}
.trow.off{opacity:.72}
.trow input[type=date]{width:100%;min-height:44px;padding:8px 12px;border-radius:12px;border:1px solid var(--ctl);background:var(--bg);color:var(--text);font:inherit;font-size:14px;color-scheme:inherit}
.trow input[type=date]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.trow .note{grid-column:1/-1}
.trow .note summary{display:inline-flex;align-items:center;min-height:44px;min-width:44px;cursor:pointer;font-size:14px;font-weight:600;color:var(--accent)}
.trow textarea{display:block;width:100%;min-height:72px;margin-top:8px;padding:10px 12px;border-radius:12px;border:1px solid var(--ctl);background:var(--bg);color:var(--text);font:inherit;font-size:14px;resize:vertical}
#suivi .empty{margin-top:16px}
.addc-btn{margin:24px 0 0;color:var(--text);background:transparent;font:inherit;font-size:16px}
.addc-btn,.addc>summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid rgba(var(--text-rgb),.24);font-weight:600;cursor:pointer;list-style:none}
.addc>summary::-webkit-details-marker{display:none}
.addc-btn:focus-visible,.addc>summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.addc form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin-top:16px;padding:24px;border-radius:var(--r-md);background:var(--card-bg);border:1px solid var(--card-border)}
.addc label{display:block;font-size:14px;font-weight:600;color:var(--text-2);margin-bottom:6px}
.addc input[type=date]{width:100%;min-height:48px;padding:8px 16px;border-radius:12px;border:1px solid var(--ctl);background:var(--bg);color:var(--text);font:inherit;font-size:16px}
.addc .full{grid-column:1/-1}
.addc .erreur{margin:0}
@media (max-width:860px){.trow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.trow .tmain{grid-column:1/-1}}
@media (max-width:680px){
  .funnel{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .funnel li{padding:12px 4px}
  .funnel b{font-size:22px}
  .funnel span{font-size:13px}
  .addc form{grid-template-columns:1fr;padding:20px}
  .trow{padding:16px}
}
/* « Une citation pour toi », reprise de la page de Julie : centrée, grand guillemet au-dessus */
/* Le guillemet a 38 px de vide au-dessus de son dessin : 10 px de marge donnent 48 px à l'œil, comme sous la légende */
.quote{margin:10px 0 0;padding:0;text-align:center}
.quote-mark{display:block;height:72px;margin-top:-6px;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:112px;line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.quote-k{margin:0;font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.quote blockquote{margin:8px auto 0;max-width:32ch;font-family:var(--font-display);font-weight:600;font-size:clamp(24px,3vw,30px);line-height:1.25;letter-spacing:-.01em;color:var(--text);text-wrap:balance}
.quote blockquote p{margin:0}
.quote-rule{display:block;width:40px;height:2px;margin:18px auto 10px;border-radius:2px;background:var(--grad)}
.quote figcaption{margin:0;font-size:14px;line-height:1.45;color:var(--text-2)}
.quote figcaption b{font-weight:600;color:var(--text);font-size:15px}
.quote cite{font-style:normal}
@media (max-width:680px){.quote{margin-top:40px}.quote-mark{font-size:84px;height:54px;margin-top:-4px}.quote blockquote{font-size:22px}.quote-rule{margin:14px auto 8px}}
@media (prefers-reduced-motion:no-preference){.quote:not([hidden]){animation:apparait .5s ease}}
@keyframes apparait{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Tableau de bord verrouillé : rien n'apparaît tant que l'accès n'est pas vérifié */
body.verrou main>:not(#garde,#entree,#refus),body.verrou .nav-links,body.verrou #menu-btn{display:none!important}
/* Entrée de l'admin (matrix) : clé d'accès d'abord, lien par mail en secours */
#entree .cle-entree{margin:0}
#entree .ou{margin:24px 0 8px}
#entree .btn-s[type=submit]{width:100%;margin-top:24px;min-height:48px}
.garde{max-width:560px;margin:48px auto 0}
.garde h1{font-size:clamp(32px,4vw,44px)}
.garde-etapes{margin:20px 0 0;padding-left:20px;color:var(--text-2)}
.garde-etapes li{margin:6px 0}
.garde-qr{margin:20px 0 0;display:grid;justify-items:start;gap:8px}
.garde-qr img{width:200px;height:200px;padding:12px;border-radius:var(--r-md);background:#fff}
.garde-qr code{font-size:14px;word-break:break-all;user-select:all}
.garde-f{display:grid;gap:12px;margin-top:24px;max-width:320px}
.garde-f label{font-weight:600}
.garde-f input{font-size:22px;letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums}

/* Clés d'accès : entrée sur les cartes de connexion, invitation, liste dans « Compte » */
.form-lien .btn-cle{width:100%;margin-top:0}
.form-lien .btn-s.btn-cle{min-height:48px}
.cle-entree{margin-top:24px}
.cle-entree .btn-cle{width:100%;min-height:48px}
.cle-entree.cle-d-abord{margin:0 0 24px}
.cle-entree .erreur{margin-top:12px}
.btn-cle .ic{display:inline-flex}
.ou{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:14px;color:var(--text-3)}
.ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--border)}
.cle-d-abord .ou{margin:24px 0 0}
/* Invitation à créer une clé : icône et titre sur une ligne, texte dessous, boutons à droite (ordinateur) ou en bas (téléphone) */
.banniere.invit-cle{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"ico t act" "ico x act" "err err err";gap:4px 16px;align-items:center;padding:20px 24px}
.invit-cle .invit-ico{grid-area:ico;align-self:start;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--grad-btn);color:var(--on-grad)}
.invit-cle .invit-t{grid-area:t;align-self:end;font-weight:700;font-size:17px;line-height:1.3;color:var(--text)}
.invit-cle .invit-x{grid-area:x;align-self:start;color:var(--text-2);font-size:15px;line-height:1.5}
.invit-cle .actions{grid-area:act;margin:0 0 0 8px;flex-wrap:nowrap}
.invit-cle .erreur{grid-area:err;margin-top:8px}
.invit-cle .erreur[hidden]{display:none}
@media (max-width:760px){
  .banniere.invit-cle{grid-template-columns:44px minmax(0,1fr);grid-template-areas:"ico t" "x x" "act act" "err err";gap:12px 14px;padding:20px}
  .invit-cle .invit-t{align-self:center}
  .invit-cle .actions{margin:4px 0 0}
  .invit-cle .actions>*{flex:1 1 0;min-width:0;min-height:48px;padding:0 12px;white-space:nowrap}
}
.cles{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:12px}
.cle{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding:16px 20px;border-radius:var(--r-md);border:1px solid var(--border)}
.cle-t{display:grid;gap:2px;min-width:0;flex:1 1 220px}
/* Appareil de la clé : petite illustration (châssis aux tons du thème, écran au dégradé Flair Job) */
.cle-ic{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:16px;background:rgba(var(--text-rgb),.05);border:1px solid rgba(var(--text-rgb),.08)}
.cle-ic svg{width:48px;height:48px;overflow:visible;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.cle-ic .ic-corps{fill:color-mix(in oklab,var(--text) 78%,var(--bg))}
.cle-ic .ic-base{fill:color-mix(in oklab,var(--text) 55%,var(--bg))}
.cle-ic .ic-encoche{fill:color-mix(in oklab,var(--text) 80%,var(--bg))}
.cle-ic .ic-ile{fill:#0b0e14}
.cle-t b{overflow-wrap:anywhere}
.cle-t .aide{font-size:14px;color:var(--text-2)}
.cle-act{display:flex;flex-wrap:wrap;gap:8px}
#cles-etat:empty{display:none}
#cles-etat{margin-top:16px}
.form-lien form .btn-s[type=submit]{width:100%;margin-top:24px;min-height:48px}
.nw{white-space:nowrap}

/* ---------------------------------------------------------------------------
   Passe mobile (12/10/2026)
   --------------------------------------------------------------------------- */
/* iOS zoome la page dès qu'on touche un champ écrit en dessous de 16 px : on l'évite sur les écrans tactiles */
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}
}
/* Choix en colonne (accord, rythme) : la case ou le rond est toujours visible, pas seulement une fois coché */
.pastilles.colonne label{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:center}
.pastilles.colonne label::before,.pastilles.colonne label:has(input:checked)::before{content:"";width:22px;height:22px;box-sizing:border-box;border:2px solid var(--ctl);background:var(--bg);border-radius:50%}
.pastilles.colonne label:has(input[type=checkbox])::before{border-radius:6px}
.pastilles.colonne label:has(input[type=radio]:checked)::before{border-color:var(--accent);background:radial-gradient(circle,var(--accent) 0 5px,var(--bg) 6px)}
.pastilles.colonne label:has(input[type=checkbox]:checked)::before{border-color:var(--plein);background:var(--plein) var(--coche) center/16px no-repeat}
.pastilles.colonne label>span{grid-column:2}
.pastilles.colonne label:has(input[aria-invalid="true"])::before{border-color:var(--bad)}
@media (max-width:640px){
  /* Suivi : 5 chiffres sur deux lignes pleines (3 puis 2), sans trou */
  .funnel{grid-template-columns:repeat(6,minmax(0,1fr))}
  .funnel li{grid-column:span 2}
  .funnel li:nth-child(n+4){grid-column:span 3}
}
@media (max-width:400px){
  /* Lignes du suivi : statut et date l'un sous l'autre, sinon la date est coupée */
  .trow{grid-template-columns:1fr}
  /* Filtres : Zone et Contrat côte à côte, le tri en dessous sur toute la largeur */
  .fline .fbar{display:grid;grid-template-columns:1fr 1fr}
  .fline .fbar .dd-tri,.fline .fbar>:not(.dd){grid-column:1/-1}
}
@media (max-width:360px){
  /* Pied de fiche : les deux boutons pleine largeur, la fiche en premier */
  .ofoot{flex-direction:column-reverse;align-items:stretch}
  .ofoot>*{margin-left:0;justify-content:center}
}
/* Boutons flottants : ils s'effacent quand on descend dans la page et reviennent quand on remonte */
.souci-btn,.haut-btn{transition:transform .25s ease,opacity .2s ease}
.flottants-caches :is(.souci-btn,.haut-btn){transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.flottants-caches :is(.souci-btn,.haut-btn){transform:none}}

/* Coche des cases : même couleur que le texte posé sur --plein (blanc en clair, encre en sombre) */
:root{--coche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
@media (prefers-color-scheme: dark){:root:not([data-pt="light"]){--coche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2147' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}}
:root[data-pt="dark"]{--coche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2147' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.trow h3 a{display:inline-block;padding:12px 0;margin:-12px 0}

/* En-tête : la marque pousse tout le reste à droite, quels que soient les éléments affichés (menu caché, page de connexion, tableau de bord verrouillé) */
.nav-in>.brand{margin-right:auto}
@media (max-width:359px){.brand{font-size:20px;gap:8px}.nav-in>.nav-cta{padding-left:12px;padding-right:12px}}
#f-code-cle{margin-top:20px}#f-code-cle .actions{margin-top:20px}
.garde-aide{margin-top:24px}#garde-cle .actions{margin-top:24px}

/* Menu ouvert : la sortie est à part, petite, tout en bas (loin des liens, pas de mauvais appui) */
.mnav-pied{margin-top:auto;padding:12px 16px 0;border-top:1px solid var(--border-soft);display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.mnav-qui{margin:0;font-size:14px;color:var(--text-3);min-width:0;overflow-wrap:anywhere}
.mnav-sortie{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;margin-left:0;border:0;background:transparent;color:var(--text-2);font:inherit;font-size:15px;font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(var(--text-rgb),.3)}
@media (hover:hover){.mnav-sortie:where(:not(:disabled,[aria-disabled="true"])):hover{color:var(--bad)}}
.mnav-sortie:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:8px}

.mnav ul a .ic{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:var(--chip-bg);color:var(--accent)}
.mnav ul a[aria-current="true"] .ic,.mnav ul a[aria-current="page"] .ic{background:var(--grad-btn);color:var(--on-grad)}
/* Sélecteur de thème du menu : deux options côte à côte, l'active est pleine */
.mnav-theme{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:100%;padding:4px;margin-bottom:8px;border-radius:999px;background:var(--chip-bg)}
.mnav-theme button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:0;border-radius:999px;background:transparent;color:var(--text-2);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.mnav-theme button .ic{display:inline-flex}
.mnav-theme button[aria-pressed="true"]{background:var(--grad-btn);color:var(--on-grad);box-shadow:0 2px 8px -2px rgba(0,0,0,.25)}
.mnav-theme button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.mnav ul a{line-height:1.2}

/* Le tri est le dernier de la ligne : son menu s'ouvre vers la gauche pour ne pas sortir de l'écran */
@media (min-width:681px){.dd-tri .ddpanel{left:auto;right:0}}
.fiche-retour{margin-top:24px}

/* Onglets longs → menu déroulant sur téléphone (Suivi, Critères de recherche) */
.dd-onglets{display:none}
@media (max-width:680px){
  .tabs-wrap.avec-menu{display:none}
  .dd-onglets{display:flex;width:100%;margin-top:24px}
  .dd-onglets .ddbtn{width:100%;max-width:none;justify-content:flex-start}
}

/* Menus déroulants : cases et ronds dessinés (contraste 3:1 dans les deux thèmes), en-tête avec Fermer */
.ddtete{display:none}
.opt input{-webkit-appearance:none;appearance:none;display:grid;place-items:center;width:22px;height:22px;margin:0;flex:none;border:2px solid var(--ctl);background:var(--bg);cursor:pointer}
.opt input[type=checkbox]{border-radius:6px}
.opt input[type=radio]{border-radius:50%}
.opt input[type=radio]:checked{border-color:var(--accent);background:radial-gradient(circle,var(--accent) 0 5px,var(--bg) 6px)}
.opt input[type=checkbox]:checked{border-color:var(--plein);background:var(--plein) var(--coche) center/15px no-repeat}
.opt input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.opt:has(input:checked){font-weight:600}
@media (max-width:680px){
  /* Feuille du bas : poignée, titre et Fermer, lignes de 56 px faciles à toucher */
  .ddpanel{padding:8px 12px calc(env(safe-area-inset-bottom,0px) + 16px)}
  .ddpanel::before{content:"";display:block;width:40px;height:5px;margin:2px auto 6px;border-radius:999px;background:var(--border)}
  .ddtete{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px 8px 8px}
  .ddtete :is(h3,h4,h5){display:block;margin:0;font-size:20px}
  .ddclose{display:grid;place-items:center;width:44px;height:44px;flex:none;padding:0;border-radius:50%;border:1px solid rgba(var(--text-rgb),.16);background:rgba(var(--text-rgb),.06);color:var(--text);cursor:pointer}
  .ddclose:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
  .opt{min-height:56px;padding:12px;gap:16px;font-size:17px;border-radius:14px}
  .opt+.opt{margin-top:2px}
  .opt input{width:26px;height:26px}
  .opt input[type=radio]:checked{background:radial-gradient(circle,var(--accent) 0 6px,var(--bg) 7px)}
  .opt input[type=checkbox]:checked{background-size:18px}
  .opt:has(input:checked){background:rgba(var(--c1-rgb),.12)}
  .opt .c{font-size:16px}
  .ddfoot{margin-top:8px;padding:12px 4px 0}
  .ddfoot button{min-height:48px;padding:0 20px;font-size:16px}
}

/* Sites déjà surveillés par Flair Job (avant d'en ajouter) */
.deja{margin-top:16px;padding:16px 20px;border-radius:var(--r-md);background:var(--chip-bg)}
.deja .etiquette{margin:0 0 12px}
.sources{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.sources li{padding:6px 12px;border-radius:999px;background:var(--bg);border:1px solid var(--border-soft);font-size:14px;font-weight:600;color:var(--text-2)}
.deja .aide{margin:16px 0 8px}

/* Tableau de bord : sites proposés */
.sites-prop{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.site-prop{padding:20px 24px;border-radius:var(--r-md);background:var(--card-bg);border:1px solid var(--card-border)}
.site-prop p{margin:8px 0 0;overflow-wrap:anywhere}
.site-champs{margin-top:16px}

/* Champs avec icône : calendrier (décor) ou bouton « Coller » à droite */
.champ-ico{position:relative;display:block;min-width:0}
.champ-ico>input{width:100%;padding-right:52px}
.champ-btn{position:absolute;top:50%;right:2px;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--accent);cursor:pointer}
@media (hover:hover){.champ-btn:where(:not(:disabled,[aria-disabled="true"])):hover{background:rgba(var(--text-rgb),.08)}}
.champ-btn:focus-visible{outline:3px solid var(--focus);outline-offset:-2px}
.champ-btn .ic{display:inline-flex}
.sans-coller .champ-btn{display:none}
.sans-coller .champ-ico>input{padding-right:16px}
.champ-deco{position:absolute;top:50%;right:14px;transform:translateY(-50%);display:inline-flex;color:var(--text-2);pointer-events:none}
/* Dates : même gabarit que les autres champs (iOS les élargit et les vide sinon) ; le sélecteur natif reste cliquable sous l'icône */
input[type=date]{-webkit-appearance:none;appearance:none;display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;min-height:48px;text-align:left;line-height:1.2}
input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
input[type=date]::-webkit-calendar-picker-indicator{position:absolute;right:0;top:0;width:48px;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}
.champ-ico>input[type=date]{position:relative;padding-right:48px}
.addc input[type=date],.trow input[type=date]{padding-left:16px}
.trow .champ-ico>input[type=date]{min-height:44px}
/* Boîtes : titre et bouton Fermer sur la même ligne */
.boite-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.boite-tete .nav-btn{margin:-6px -8px 0 0}
.ajout .champ-ico{flex:1 1 auto;min-width:0}

/* Téléphone : les boutons d'action prennent toute la largeur (plus faciles à toucher, alignés).
   Restent à leur taille : « Ajouter » à côté d'un champ, boutons dans les champs, pied des menus déroulants. */
@media (max-width:640px){
  .actions,.fiche-actions,.ap-actions{flex-direction:column;align-items:stretch}
  .actions>*,.fiche-actions>*,.ap-actions>*{width:100%;margin-left:0;flex:none}
  :is(.btn-p,.btn-s,.btn-d):not(.ajout *):not(.ddfoot *):not(.champ-ico *){width:100%;justify-content:center}
  .invit-cle .actions{flex-direction:column}
  .invit-cle .actions>*{flex:none;width:100%}
  .addc-btn{display:flex;width:100%;justify-content:center}
  .ofoot{flex-direction:row;align-items:stretch}
  .ofoot>*{flex:1 1 0;min-width:0;justify-content:center;margin-left:0}
  .cle-act{width:100%;flex-direction:column}
  .cle-act>*{width:100%}
}
@media (max-width:360px){.ofoot{flex-direction:column-reverse}.ofoot>*{flex:none;width:100%}}
/* Fiche ouverte sur téléphone : AUCUN fond derrière les boutons collants (ni aplat, ni verre, ni bordure) :
   ce sont les boutons eux-mêmes qui sont pleins (teinte de la carte) et portent une petite ombre, comme sur ordinateur */
@media (max-width:640px){
  .offer.open .ofoot>*{box-shadow:0 8px 20px -10px rgba(0,0,0,.55)}
}
@media (max-width:640px) and (min-width:361px){
  /* Pied de fiche : « Écarter » à sa taille, « Voir / Replier la fiche » prend le reste, sur une seule ligne */
  .ofoot>.ecart-btn{flex:0 0 auto;padding:0 16px}
  .ofoot>.fold-btn{flex:1 1 auto;white-space:nowrap;padding:0 16px}
}

/* Boîte « Ajouter une candidature » */
dialog.boite.addc{max-width:560px;max-height:calc(100dvh - 32px);overflow:auto}
dialog.boite.addc form{margin-top:20px;padding:0;border:0;background:none;border-radius:0}
@media (max-width:640px){dialog.boite.addc{padding:24px 20px}}
.grille-bloc{padding:24px 24px 8px}
.grille-bloc>h3{margin:0;font-size:17px}
.grille-bloc>.aide{margin:4px 0 8px}
.grille-bloc>div{padding:0}
#form-recherche>.bloc,.grille-bloc{min-width:0}
@media (max-width:560px){.guide-alertes>div{padding:4px 16px 20px}.guide-alertes>summary{padding-inline:16px}.etapes-num>li{padding-left:42px}.grille-bloc{padding:20px 16px 4px}}
/* Préparer mon entretien */
.dos-suite{margin:12px 0 0}
.dl-entretien{align-items:center;margin-top:20px;padding-top:16px;border-top:1px solid var(--border-soft)}
.dl-entretien .aide{margin:0 8px 0 0;flex-basis:auto}
.dos-entretien{margin-top:16px}
.ent{display:grid;gap:20px;margin-top:24px}
.ent-cle{margin:0;font-family:var(--font-display);font-size:19px;font-weight:600;line-height:1.4;color:var(--text);text-wrap:balance}
.ent-s{display:grid;gap:10px;min-width:0;align-content:start}
.ent-s h5{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.ent-s h5 span{font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-3)}
.ent-s ul{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--text-2);line-height:1.55}
.ent-s p{margin:0;color:var(--text-2);line-height:1.6}
.ent-s .pitch{margin:0;padding:16px 20px;border-left:3px solid transparent;border-image:var(--grad) 1;background:rgba(var(--text-rgb),.04);border-radius:0 12px 12px 0;color:var(--text);font-size:16px;line-height:1.65}
.ent-s .copy{justify-self:start}
.ent-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ent-q{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:q}
.ent-q>li{counter-increment:q}
.ent-q details{border:1px solid var(--border-soft);border-radius:14px;background:var(--bg)}
.ent-q summary{display:grid;grid-template-columns:28px minmax(0,1fr) 16px;gap:2px 12px;align-items:start;padding:14px 16px;cursor:pointer;list-style:none}
.ent-q summary::-webkit-details-marker{display:none}
.ent-q summary::before{content:counter(q);grid-row:1/span 2;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:rgba(var(--text-rgb),.08);color:var(--text)}
.ent-q summary::after{content:"";grid-column:3;grid-row:1;width:7px;height:7px;margin-top:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s;color:var(--text-3)}
.ent-q details[open] summary::after{transform:rotate(-135deg)}
.ent-q summary b{grid-column:2;color:var(--text);line-height:1.45;padding-top:3px}
.ent-q summary span{grid-column:2;font-size:14px;color:var(--text-3);line-height:1.45}
.ent-q details>div{display:grid;gap:8px;padding:0 16px 16px 56px}
.ent-q details>div p{color:var(--text);line-height:1.6}
.ent-appui{font-size:14px;color:var(--accent)!important;font-weight:600}
.ent-vig{margin:0;display:grid;gap:4px}
.ent-vig dt{font-weight:600;color:var(--text)}
.ent-vig dd{margin:0 0 10px;color:var(--text-2);line-height:1.55}
.ent-veille{list-style:none!important;padding:0!important}
.ent-veille label{display:flex;gap:10px;align-items:flex-start;min-height:32px;cursor:pointer;color:var(--text-2)}
.ent-veille input{margin-top:4px;width:18px;height:18px;accent-color:var(--plein)}
.ent-veille input:checked+span{text-decoration:line-through;color:var(--text-3)}
@media (max-width:680px){.ent-duo{grid-template-columns:minmax(0,1fr)}.ent-q details>div{padding-left:16px}.dl-entretien .aide{flex-basis:100%}}
/* Bouton entretien verrouillé : lisible, mais visiblement pas encore actif */
.dl button.verrou{background:transparent;border-style:dashed;color:var(--text-3);cursor:help}
@media (hover:hover){.dl button.verrou:where(:not(:disabled,[aria-disabled="true"])):hover{background:rgba(var(--text-rgb),.05);color:var(--text-2);transform:none}}
.dl button.verrou svg{opacity:.8}
.verrou-ico{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px;color:var(--on-grad);background:var(--grad-btn)}
.verrou-boite .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.suivi-ent{margin:8px 0 0}
.suivi-ent a{display:inline-flex;align-items:center;gap:8px;min-height:32px;font-weight:600;color:var(--accent)}
/* Menus déroulants (flair.js) : panneau plein, arrondi, option choisie cochée au dégradé */
.menu-liste{position:fixed;z-index:120;max-height:min(360px,calc(100vh - 32px));overflow-y:auto;padding:6px;border-radius:16px;background:var(--bg-alt);border:1px solid var(--card-border);box-shadow:0 2px 6px rgba(0,0,0,.12),0 28px 56px -18px rgba(0,0,0,.55);color:var(--text);font-size:15px;outline:none;transform-origin:top center;animation:menu-entre .16s cubic-bezier(.2,.8,.2,1)}
@keyframes menu-entre{from{opacity:0;transform:translateY(-4px) scale(.98)}}
.menu-liste [role="option"]{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:8px 14px;border-radius:10px;cursor:pointer;color:var(--text-2);font-weight:500;white-space:nowrap}
.menu-liste [role="option"] svg{flex:none;opacity:0;color:var(--accent)}
.menu-liste [role="option"].actif{background:rgba(var(--text-rgb),.08);color:var(--text)}
.menu-liste [role="option"].choisi{color:var(--text);font-weight:600}
.menu-liste [role="option"].choisi svg{opacity:1}
.menu-liste [role="option"].choisi::before{content:"";position:absolute;margin-left:-14px;width:3px;height:20px;border-radius:2px;background:var(--grad)}
.menu-liste:focus,.menu-liste:focus-visible{outline:none}
.menu-liste:focus-visible [role="option"].actif{box-shadow:inset 0 0 0 2px var(--focus)}
select.sel-ouvert{border-color:var(--accent)!important}
@media (prefers-reduced-motion:reduce){.menu-liste{animation:none}}
.cle-ici{display:inline-flex;align-items:center;margin-left:10px;padding:2px 10px;border-radius:999px;background:var(--ok-bg);color:var(--ok);font-size:12px;font-weight:700;vertical-align:2px}
.cle-renomme{display:block}
.cle-form{display:grid;gap:6px}
.cle-form label{font-weight:600}
.cle-form .aide{margin:0;font-size:14px;color:var(--text-3)}
.cle-form-l{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.cle-form-l input{flex:1 1 220px;min-width:0}
/* Guide Gmail : chemins de clics en pastilles, liens directs, mises en garde */
/* Guide : le titre sur toute la largeur, la durée dessous, le chevron à gauche des deux */
.guide-alertes>summary{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:center}
.guide-alertes>summary::before{grid-row:1 / span 2}
.guide-titre{grid-column:2}
.guide-duree{grid-column:2;margin:0;font-size:14px;font-weight:500;color:var(--text-3)}
.etapes-gm>li{gap:10px}
.etapes-gm>li>b{font-size:16px}
.gm-chemin{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.gm-chemin li{display:inline-flex;align-items:center;gap:6px}
.gm-chemin li+li::before{content:"›" / "";color:var(--text-3);font-weight:700}
.gm{display:inline-flex;align-items:center;min-height:30px;padding:2px 12px;border-radius:8px;background:rgba(var(--text-rgb),.07);border:1px solid var(--border-soft);color:var(--text);font-size:14px;font-weight:600}
.gm-sep{color:var(--text-3);font-weight:700}
.gm-ouvrir{justify-self:start;gap:8px}
.gm-copie{margin-top:2px}
.gm-copie code{flex:1 1 260px;min-width:0;overflow-wrap:anywhere;line-height:1.6;font-size:14px}
.gm-attention{margin:0;padding:10px 14px;border-radius:12px;background:var(--warn-bg);color:var(--text);font-size:14px;line-height:1.5}
.gm-attention b{color:var(--warn)}
.gm-fini{display:flex;align-items:center;gap:10px;margin:20px 0 0;padding:12px 16px;border-radius:12px;background:var(--ok-bg);color:var(--text);font-weight:600}
.gm-fini svg{flex:none;color:var(--ok)}

/* Titres de l'admin : dernier mot au dégradé, qui ondule lentement comme sur l'accueil */
#page-t .grad-text,#tableau h2 .grad-text{background-size:220% 100%;animation:titre-degrade 7s ease-in-out infinite alternate}
/* Sur téléphone, le dégradé des titres reste immobile : le faire glisser repeint le titre à chaque image */
@media (hover: none), (pointer: coarse){#page-t .grad-text,#tableau h2 .grad-text{animation:none}}
html.defile #page-t .grad-text,html.defile #tableau h2 .grad-text{animation-play-state:paused}
@keyframes titre-degrade{from{background-position:0% 50%}to{background-position:100% 50%}}
@media (prefers-reduced-motion:reduce){#page-t .grad-text,#tableau h2 .grad-text{animation:none}}
/* Admin : graphiques cliquables et détail « qui a fait quoi » */
.graphe{cursor:pointer;transition:border-color .2s ease}
@media (hover:hover){.graphe:where(:not(:disabled,[aria-disabled="true"])):hover{border-color:rgba(var(--c1-rgb),.5)}}
@media (hover:hover){.graphe .barres span[data-jour]:where(:not(:disabled,[aria-disabled="true"])):hover{filter:brightness(1.25)}}
.graphe-detail{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin-top:12px;padding:0 14px;border-radius:999px;border:1px solid rgba(var(--text-rgb),.16);background:rgba(var(--text-rgb),.06);color:var(--text);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
@media (hover:hover){.graphe-detail:where(:not(:disabled,[aria-disabled="true"])):hover{background:rgba(var(--text-rgb),.12)}}
.activite-boite{max-width:1100px}
.act-plage{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-top:20px}
.act-presets{display:flex;flex-wrap:wrap;gap:6px}
.act-presets button{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(var(--text-rgb),.16);background:transparent;color:var(--text-2);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
@media (hover:hover){.act-presets button:where(:not(:disabled,[aria-disabled="true"])):hover{color:var(--text);background:rgba(var(--text-rgb),.08)}}
.act-dates{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px}
.act-dates label{display:grid;gap:4px;font-size:13px;font-weight:600;color:var(--text-3)}
.act-dates input{min-height:44px;padding:6px 48px 6px 12px;border-radius:12px;border:1px solid var(--ctl);background:var(--bg);color:var(--text);font:inherit;font-size:14px}
.act-plage .erreur{flex-basis:100%;margin:0}
.activite-boite .tabs-wrap{margin-top:20px}
.act-resume{margin:16px 0 0;font-weight:600;color:var(--text)}
.act-t{width:100%;min-width:640px;border-collapse:collapse;margin-top:12px;font-size:15px;font-variant-numeric:tabular-nums}
.act-t th,.act-t td{padding:10px 12px;text-align:left;border-top:1px solid var(--border-soft);vertical-align:top}
.act-t thead th{font-size:13px;font-weight:600;color:var(--text-3);border-top:0}
.act-t .tri{color:var(--text);font-weight:700}
.act-t thead th.tri{color:var(--accent)}
.act-t small{color:var(--text-3);font-weight:500}
.act-qui{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0;border:0;background:none;color:var(--text);font:inherit;font-weight:600;cursor:pointer;text-align:left}
.act-qui::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s;color:var(--text-3)}
.act-qui[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
@media (hover:hover){.act-qui:where(:not(:disabled,[aria-disabled="true"])):hover{color:var(--accent)}}
.act-d td{border-top:0;padding-top:0}
.act-d-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px 32px;padding:16px;border-radius:12px;background:rgba(var(--text-rgb),.04)}
.act-d-in h3{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.act-actions,.act-sessions{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:14px;color:var(--text-2)}
.act-actions b{display:inline-block;min-width:28px;color:var(--text)}
.act-sessions{max-height:260px;overflow:auto}
.act-sessions li{display:grid;grid-template-columns:minmax(0,1.2fr) 80px minmax(0,1fr);gap:12px}
.act-sessions b{color:var(--text);text-align:right}
.vide-act{margin:24px 0 0;color:var(--text-2)}
@media (max-width:680px){.act-d-in{grid-template-columns:minmax(0,1fr)}.act-sessions li{grid-template-columns:minmax(0,1fr) auto}.act-sessions li span:last-child{grid-column:1/-1;font-size:13px}}
.bandeau-etat{margin:12px 0 16px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
#bd-texte{width:100%;min-height:72px;padding:10px 12px;border-radius:12px;border:1px solid var(--ctl);background:var(--bg);color:var(--text);font:inherit;font-size:15px;resize:vertical}
@media (max-width:620px){.bandeau-site{justify-content:flex-start;text-align:left;font-size:13px;line-height:1.35}}
/* Critères de recherche : trois onglets visibles d'un coup, à parts égales (plus de menu déroulant sur téléphone) */
.rech-tabs .tabs{width:100%}
.rech-tabs .tab{flex:1 1 0;justify-content:center;min-height:44px}
.ong-court{display:none}
@media (max-width:620px){.ong-long{display:none}.ong-court{display:inline}.rech-tabs .tab,.sous-nav.ancres .tab{padding:8px 10px}}
/* Salaire : deux cartes (brut saisi, net en grand) et la règle à deux poignées, graduée en brut et en net */
.sal-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.bascule{display:inline-flex;padding:4px;border-radius:999px;background:var(--bg-alt);border:1px solid var(--border)}
.bascule button{min-height:40px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--text-2);font:600 14px/1 var(--font-body);cursor:pointer}
.bascule button[aria-pressed="true"]{background:var(--grad-btn);color:var(--on-grad);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.sal-cartes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
@media (max-width:680px){.sal-cartes{grid-template-columns:minmax(0,1fr)}}
.sal-carte{display:grid;gap:12px;align-content:start;padding:20px;border-radius:18px;border:1px solid var(--card-border);background:var(--bg-alt)}
.sal-lab{font:600 16px/1.3 var(--font-body);color:var(--text)}
.sal-lab span{font-weight:500;font-size:14px;color:var(--text-3)}
.sal-nb{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.sal-net{display:grid;gap:2px;padding:16px;border-radius:14px;background:var(--card-bg);border:1px solid var(--card-border)}
.sal-net small{font:600 12px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.sal-net b{margin-top:4px;font:700 clamp(30px,4vw,40px)/1.05 var(--font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.sal-net span{font-size:14px;color:var(--text-2)}
.sal-eff{margin:0;font-size:14px;font-weight:600}
.sal-eff.warn{color:var(--warn)}.sal-eff.ok{color:var(--ok)}
.regle{position:relative;margin-top:32px;padding-inline:14px}
.regle .graduation{position:relative;height:20px;font:600 12px/1 var(--font-body);color:var(--text-3);font-variant-numeric:tabular-nums}
.regle .graduation span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.regle .graduation.net{margin-top:14px}
.regle .graduation.net span{color:var(--accent)}
@media (max-width:680px){.regle .graduation span.imp{display:none}}
.regle-piste{position:relative;height:16px;margin:8px 0}
.regle-piste .z{position:absolute;top:0;bottom:0}
.regle-piste .z1{left:0;border-radius:999px 0 0 999px;background:var(--bad-bg);border:1px solid var(--bad)}
.regle-piste .z2{background:var(--warn-bg);border:1px solid var(--warn);border-left:0;border-right:0}
.regle-piste .z3{border-radius:0 999px 999px 0;background:var(--ok-bg);border:1px solid var(--ok)}
.regle input[type=range]{position:absolute;left:-1px;width:calc(100% + 2px);top:24px;height:24px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.regle input[type=range]::-webkit-slider-runnable-track{background:none;height:24px}
.regle input[type=range]::-moz-range-track{background:none}
.regle input[type=range]::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;width:30px;height:30px;margin-top:-3px;border-radius:50%;background:var(--card-solide,var(--bg));border:3px solid var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.25);cursor:grab}
.regle input[type=range]::-moz-range-thumb{pointer-events:auto;width:24px;height:24px;border-radius:50%;background:var(--bg);border:3px solid var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.25);cursor:grab}
.regle input[type=range].vide::-webkit-slider-thumb{border-style:dashed;border-color:var(--ctl)}
.regle input[type=range].vide::-moz-range-thumb{border-style:dashed;border-color:var(--ctl)}
.regle input[type=range]:focus-visible{outline:none}
.regle input[type=range]:focus-visible::-webkit-slider-thumb{outline:3px solid var(--focus);outline-offset:2px}
.regle input[type=range]:focus-visible::-moz-range-thumb{outline:3px solid var(--focus);outline-offset:2px}
.regle-leg{display:flex;flex-wrap:wrap;gap:8px 20px;margin:20px 0 0;padding:0;list-style:none;font-size:14px;color:var(--text-2)}
.regle-leg li{display:inline-flex;align-items:center;gap:8px}
.regle-leg .ic{width:14px;height:14px;border-radius:4px;border:1px solid}
.regle-leg .a{background:var(--bad-bg);border-color:var(--bad)}.regle-leg .b{background:var(--warn-bg);border-color:var(--warn)}.regle-leg .c{background:var(--ok-bg);border-color:var(--ok)}
.note-bas{margin:16px 0 0;font-size:13px;color:var(--text-3)}
@media (max-width:380px){.rech-tabs .tab{padding:8px 6px;font-size:13px}}
/* Téléphone : les boutons d'action d'une offre (candidature, entretien) prennent toute la largeur, l'un sous l'autre */
/* Deux boutons côte à côte : même largeur (celle du plus long) et même hauteur */
.dl.dl-actions:not(.dl-entretien){display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr}
.dl.dl-actions:not(.dl-entretien)>:is(button,a){justify-content:center}
@media (max-width:680px){.dl.dl-actions:not(.dl-entretien){display:grid;grid-auto-flow:row}}
@media (max-width:680px){.dl.dl-actions>button,.dl.dl-actions>a{flex:1 1 100%}.dl-entretien .aide{flex-basis:100%}}
/* Note de suivi : bouton d'enregistrement et confirmation à côté */
.snote-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:10px}
.snote-act .btn-s:disabled{opacity:.45;cursor:default}
.snote-etat{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ok)}
.snote-etat:empty{display:none}
.snote-etat svg{width:16px;height:16px}
@media (max-width:680px){.snote-act .btn-s{flex:1 1 100%}}
/* Téléphone : la liste s'ouvre accrochée sous son bouton (plus de feuille en bas d'écran), à sa largeur,
   le bouton reste surligné tant qu'elle est ouverte ; le fond s'assombrit à peine */
@media (max-width:680px){
  .dd{position:relative}
  /* Filtres des offres : la liste prend toute la rangée, la flèche pointe le bouton qui l'a ouverte */
  .fline .fbar{position:relative}
  .fline .fbar .dd{position:static}
  .ddpanel{position:absolute;top:calc(100% + 10px);left:0;right:0;bottom:auto;z-index:46;min-width:0;width:100%;max-height:min(62vh,440px);border-radius:var(--r-md);padding:6px;box-shadow:0 2px 6px rgba(0,0,0,.15),0 28px 56px -18px rgba(0,0,0,.6)}
  .ddpanel::before{content:none}
  .ddtete{display:none}
  .opt{min-height:52px;padding:10px 12px;font-size:16px}
  .opt input{width:22px;height:22px}
  .ddback{background:rgba(0,0,0,.18)}
  .dd:has(.ddpanel:not([hidden])){z-index:47}
  .dd:has(.ddpanel:not([hidden])) .ddbtn{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
}
/* Relancer la veille, à côté de « Prochain passage » */
.relance-l{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 16px}
.relance-l .eyebrow{margin:0}
.btn-p.btn-occupe{gap:10px;background:transparent;color:var(--text-2);border:1px dashed var(--ctl);opacity:1;cursor:progress;box-shadow:none;transform:none}
.btn-p.btn-occupe::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(var(--c1-rgb),.25);border-top-color:var(--accent);animation:tourne .8s linear infinite}
@media (prefers-reduced-motion:reduce){.btn-p.btn-occupe::before{animation-duration:2.4s}}
.relance-btn{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(var(--text-rgb),.18);background:rgba(var(--text-rgb),.06);color:var(--text);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
@media (hover:hover){.relance-btn:where(:not(:disabled,[aria-disabled="true"])):hover:not(:disabled){background:rgba(var(--text-rgb),.12)}}
.relance-btn:disabled{opacity:1;cursor:default;color:var(--text-3);background:transparent;border-style:dashed}
.relance-btn.en-cours .ic svg{animation:tourne 1.2s linear infinite}
.relance-btn .ic{display:inline-flex}
.relance-etat{font-size:14px;font-weight:600;color:var(--ok)}
.relance-etat:empty{display:none}
@media (max-width:680px){.relance-btn{min-height:44px}}
@media (prefers-reduced-motion:reduce){.relance-btn.en-cours .ic svg{animation:none}}
/* Espace : surtitre (prénom) au-dessus du titre ; prochain passage et relance sous le résumé */
.surtitre{margin:0 0 12px;color:var(--accent);letter-spacing:.04em}
.sec-h:has(.relance-l){align-items:center}
/* À droite du titre : le bouton de relance, et la prochaine veille juste en dessous */
.sec-h .relance-l{margin:0;flex-direction:column;align-items:center;gap:8px}
@media (max-width:760px){.sec-h .relance-l{align-items:flex-start}}
/* Paramètres, onglet Thème : une carte par thème de couleur (trois aplats et le nom) */
.couleurs-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;margin-top:16px}
.couleur{position:relative;display:grid;gap:10px;padding:10px 10px 12px;border-radius:var(--r-md);border:1px solid var(--card-border);background:var(--card-bg);cursor:pointer;transition:border-color .2s ease}
.couleur input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.couleur-p{display:flex;height:56px;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(var(--text-rgb),.14)}
.couleur-p .ic{flex:1}
.couleur-n{display:flex;flex-direction:column;padding:0 4px;font-size:15px;font-weight:600;line-height:1.3}
.couleur-n small{font-size:13px;font-weight:500;color:var(--text-3)}
.couleur:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.couleur:has(input:checked)::after{content:"";position:absolute;top:-9px;right:-9px;width:26px;height:26px;border-radius:50%;background:var(--plein) var(--coche) center/15px no-repeat;box-shadow:0 0 0 3px var(--card-bg)}
.couleur:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
@media (hover:hover){.couleur:hover{border-color:var(--ctl)}.couleur:has(input:checked):hover{border-color:var(--accent)}}
@media (max-width:420px){.couleurs-l{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Menu plein écran : le bouton d'aide, rond, à gauche de la pilule Auto / Clair / Sombre */
.mnav-reglages{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.mnav-reglages .mnav-theme{flex:1 1 auto;min-width:0;margin-bottom:0}
.mnav-reglages .nav-btn{flex:none;width:52px;height:52px}
.mnav-reglages .nav-btn .ic{display:grid;place-items:center}
@media (max-width:680px){body:has(.barre-enr:not([hidden])) :is(.souci-btn,.haut-btn){bottom:calc(env(safe-area-inset-bottom,0px) + 168px)}}
/* Adresse à copier : sur téléphone, le champ prend toute la largeur, comme le bouton dessous (pas d'effet d'escalier) */
@media (max-width:640px){.adresse-alertes code{flex:1 1 100%;min-width:0;overflow-wrap:anywhere}#alertes-adr,[data-adresse-alertes]{text-align:center}}
/* Pastilles de choix sur téléphone : deux par ligne, sur toute la largeur ; une dernière seule prend la ligne entière */
@media (max-width:640px){.pastilles:not(.colonne){display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.pastilles:not(.colonne)>label{justify-content:center;text-align:center;padding-inline:12px}.pastilles:not(.colonne)>label:last-child:nth-child(odd){grid-column:1 / -1}}
/* Téléphone : « Filtres et tri » et « Lancer une veille » deviennent deux boutons ronds à droite du compteur.
   Les filtres s'ouvrent en carte juste sous les boutons ; la relance ouvre une boîte qui explique tout. */
.outils-offres,.fbar-tete,.fbar-fond{display:none}
.rond{position:relative;display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid rgba(var(--text-rgb),.18);background:rgba(var(--text-rgb),.06);color:var(--text);cursor:pointer}
.rond .ic{display:grid;place-items:center}
.rond[aria-expanded="true"]{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.rond.en-cours .ic svg{animation:tourne 1.2s linear infinite}
@media (prefers-reduced-motion:reduce){.rond.en-cours .ic svg{animation:none}}
.rond-n{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--plein);color:var(--on-plein);font:700 12px/20px var(--font-body);text-align:center;font-variant-numeric:tabular-nums}
@media (hover:hover){.rond:hover{background:rgba(var(--text-rgb),.12)}}
.rond:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
/* (sur toutes les tailles d'écran) */
#offres .metaline{flex-wrap:nowrap;align-items:center}
#offres .metaline .count{flex:1 1 auto;min-width:0}
.outils-offres{display:flex;gap:8px;margin-left:auto;flex:none}
.outils-offres [hidden]{display:none}
.sec-h .relance-l:has(#relancer:not([hidden])){display:none}
.fline .fbar{order:-1}
.fline .fbar:not(.ouvert){display:none}
.fline .fbar.ouvert{flex:1 1 100%;flex-wrap:wrap;padding:12px;border-radius:var(--r-md);background:var(--bg-alt);border:1px solid var(--card-border)}
.fbar.ouvert .fbar-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;grid-column:1/-1;flex:1 1 100%;margin:-4px 0 4px}
.fbar-tete h3{margin:0;font-size:16px}
.fbar-tete .nav-btn{width:40px;height:40px}
@media (min-width:681px){.fline .fbar.ouvert .dd{flex:0 1 220px}}
@media (max-width:680px){
  /* (dans la carte, « Tout décocher » et « Tout effacer » suffisent : la petite croix se plaçait mal) */
  .fline .fbar .ddx{display:none}
}
#dlg-relance ul{margin:16px 0 0;padding-left:20px;display:grid;gap:8px;color:var(--text-2)}
#dlg-relance .dlg-etat{margin:16px 0 0;padding:12px 16px;border-radius:12px;background:var(--warn-bg);color:var(--warn);font-weight:600}
#dlg-relance{max-height:calc(100dvh - 32px);overflow:auto}
#dlg-relance .actions{margin-top:24px}
#dlg-relance-t:focus{outline:none}
/* Le message visible : quand part la prochaine veille */
#dlg-relance .dlg-prochain{display:flex;align-items:center;gap:14px;margin:16px 0 0;padding:14px 16px;border-radius:16px;background:rgba(var(--text-rgb),.05);border:1px solid var(--accent)}
#dlg-relance .dlg-prochain[hidden]{display:none}
#dlg-relance .dlg-prochain .ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:var(--grad-btn);color:var(--on-grad)}
#dlg-relance .dlg-prochain-t{display:grid;gap:2px;min-width:0}
#dlg-relance .dlg-prochain b{font:700 18px/1.3 var(--font-display);color:var(--text);font-variant-numeric:tabular-nums}
#dlg-relance .dlg-prochain-t span{font-size:14px;color:var(--text-2)}
.aime-btn{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(var(--text-rgb),.16);background:transparent;color:var(--text-2);cursor:pointer}
.aime-btn[aria-pressed="true"]{color:var(--bad);border-color:var(--bad);background:var(--bad-bg)}
.aime-btn[aria-pressed="true"] svg{fill:currentColor}
@media (hover:hover){.aime-btn:hover{color:var(--bad);border-color:var(--bad)}}
.aime-btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.offer.open .aime-btn{background:var(--bg-alt)}
.offer.open .aime-btn[aria-pressed="true"]{background:var(--bad-bg)}
/* Mes paramètres : ce qui compte le plus (réglages de la note) */
.poids-f{margin:20px 0 8px}
.poids-f .pastilles.colonne{margin-top:12px}
.poids-effet{margin:12px 0 0;font-size:15px;font-weight:600;color:var(--accent)}
.poids-effet:empty{display:none}

/* Calendrier des champs date (ordinateur) : aux couleurs de Flair Job */
html.cal-perso input[type=date]::-webkit-calendar-picker-indicator,html.cal-perso input[type=time]::-webkit-calendar-picker-indicator{display:none}
.cal{position:fixed;z-index:200;width:320px;max-width:calc(100vw - 16px);padding:16px;border-radius:var(--r-md);background:var(--bg-alt);border:1px solid var(--card-border);color:var(--text);box-shadow:0 24px 48px -20px rgba(0,0,0,.5);font-variant-numeric:tabular-nums}
.cal-tete{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.cal-titre{flex:1;margin:0;padding-left:6px;font:700 17px/1.2 var(--font-display);letter-spacing:-.01em}
.cal-titre::first-letter{text-transform:uppercase}
.cal-nav{width:40px;height:40px;padding:0;border-radius:50%;display:grid;place-items:center;background:rgba(var(--text-rgb),.06);border:1px solid rgba(var(--text-rgb),.12);color:var(--text);cursor:pointer;transition:background-color .2s ease}
.cal-nav:hover:not(:disabled){background:rgba(var(--text-rgb),.12)}
.cal-nav:disabled{opacity:.35;cursor:default}
.cal-grille{width:100%;border-collapse:collapse;table-layout:fixed}
.cal-grille th{padding:6px 0;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--text-3);text-align:center}
.cal-grille td{padding:2px;text-align:center}
.cal-j{width:38px;height:38px;max-width:100%;padding:0;border-radius:50%;border:1px solid transparent;background:none;color:var(--text);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .15s ease}
.cal-j:hover:not(:disabled){background:rgba(var(--text-rgb),.1)}
.cal-j.dehors{color:var(--text-3);font-weight:500}
.cal-j[aria-current="date"]{border-color:var(--accent);color:var(--accent)}
.cal-j[aria-pressed="true"]{background:var(--grad-btn);color:var(--on-grad);border-color:transparent}
.cal-j:disabled{opacity:.3;cursor:default;text-decoration:line-through}
.cal :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cal-pied{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid var(--border-soft,rgba(var(--text-rgb),.1))}
.cal-lien{min-height:40px;padding:0 10px;border:0;border-radius:999px;background:none;color:var(--accent);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.cal-lien:hover:not(:disabled){background:rgba(var(--text-rgb),.08)}
/* Choix de l'heure : deux colonnes qui défilent, aux couleurs du site */
.hor{width:220px}
.hor-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hor-t{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);text-align:center}
.hor-liste{display:grid;gap:2px;max-height:228px;overflow-y:auto;overscroll-behavior:contain;padding:2px;scrollbar-width:thin}
.hor-v{width:100%;height:36px;border-radius:10px}
.hor-val{font-weight:700;font-variant-numeric:tabular-nums}
.cal-lien:disabled{opacity:.4;cursor:default}

/* Erreurs vues (admin) : gravité en couleur (rouge, orange, ambre, bleu), type en étiquette neutre */
.err-filtres{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-top:16px}
.err-filtres .tabs-wrap{flex:1 1 auto;min-width:0;overflow-x:auto}
.err-typef{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-3);flex:0 0 auto;max-width:100%}
/* Le menu « Type » garde sa largeur : s'il manque de place, il passe sous les onglets au lieu de se faire écraser */
.err-filtres .tabs-wrap{flex-basis:360px}
.err-typef select.sel{min-width:200px;max-width:100%}
.err-typef select.sel{width:auto;min-height:44px;font-size:14px}
.tab-grav .pt,.tag-grav .pt{width:8px;height:8px;border-radius:50%;background:var(--sev);flex:none}
.tab-grav[aria-selected="true"] .pt{background:currentColor}
.g-critique{--sev:var(--bad)}
.g-haute{--sev:var(--sev-haute)}
.g-moyenne{--sev:var(--warn)}
.g-faible{--sev:var(--sev-faible)}
.err-liste>li>div{display:grid;gap:6px}
.err-liste>li>div>span:last-child{font-size:14px}
.err-liste .err-tags{display:flex;flex-wrap:wrap;gap:6px}
.err-liste .err-msg{font-size:15px;overflow-wrap:anywhere;color:var(--text)}
.tag-grav,.tag-cat{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.02em;line-height:1.4}
.tag-grav{color:var(--sev);background:color-mix(in oklab,var(--sev) 14%,transparent);border:1px solid color-mix(in oklab,var(--sev) 40%,transparent)}
.tag-cat{color:var(--text-2);background:rgba(var(--text-rgb),.06);border:1px solid rgba(var(--text-rgb),.14)}
@media (max-width:680px){.err-typef{width:100%}.err-typef select.sel{flex:1}}

/* Suivi : brouillon de relance et rendez-vous d'entretien, dépliables sous la ligne */
.trow .rl,.trow .rdv{grid-column:1/-1}
.trow .rl>summary,.trow .rdv>summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-size:14px;font-weight:600;color:var(--accent)}
.rl-due{padding:2px 10px;border-radius:999px;background:var(--warn-bg);color:var(--warn);font-size:12px;font-weight:700}
.rl-c{display:grid;gap:12px;margin-top:8px;padding:16px;border-radius:var(--r-md);background:rgba(var(--text-rgb),.04);border:1px solid var(--border-soft)}
.rl-objet{margin:0;font-size:14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.rl-objet span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.rl-texte{white-space:pre-line;font-size:15px;line-height:1.6;padding:14px 16px;border-radius:12px;background:var(--bg);border:1px solid var(--ctl);user-select:text}
.rl-act,.rdv-act{display:flex;flex-wrap:wrap;gap:10px}
.rl-act a.btn-s{text-decoration:none}
.rl-c .aide,.rdv-a{margin:0;font-size:14px}
.rdv-meta{color:var(--text)}
.rdv-f{display:grid;grid-template-columns:minmax(0,180px) minmax(0,140px) minmax(0,1fr);gap:12px 16px;align-items:end;margin-top:8px;padding:16px;border-radius:var(--r-md);background:rgba(var(--text-rgb),.04);border:1px solid var(--border-soft)}
.rdv-f label{display:block;margin-bottom:6px;font-size:14px;font-weight:600;color:var(--text-2)}
.rdv-f input[type=time],.rdv-f input[type=text]{width:100%;min-height:44px;padding:8px 12px;border-radius:12px;border:1px solid var(--ctl);background:var(--bg);color:var(--text);font:inherit;font-size:14px}
.rdv-f input[type=date]{width:100%;min-height:44px;padding:8px 44px 8px 12px;border-radius:12px;border:1px solid var(--ctl);background:var(--bg);color:var(--text);font:inherit;font-size:14px}
.rdv-act,.rdv-a,.rdv-f .erreur{grid-column:1/-1;margin:0}
@media (max-width:680px){.rdv-f{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.rdv-lieu{grid-column:1/-1}}

/* Mon marché : quatre tuiles de chiffres, puis les compétences demandées */
.mk-tuiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:24px}
.mk-t{padding:20px;border-radius:var(--r-md);background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);min-width:0}
.mk-t h3{margin:0 0 10px;font:600 13px/1.2 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.mk-gros{margin:0;font:700 40px/1 var(--font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mk-gros small{font-size:20px;letter-spacing:0}
.mk-l{margin:6px 0 0;font-size:14px;line-height:1.45;color:var(--text-2)}
.mk-barre{display:flex;height:10px;margin:14px 0 10px;border-radius:999px;overflow:hidden;background:rgba(var(--text-rgb),.1)}
.mk-barre .p{background:var(--c2)}
.mk-barre .c{background:var(--c3)}
.mk-leg{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px;font-size:14px;color:var(--text-2)}
.mk-leg li{display:flex;align-items:center;gap:8px}
.mk-leg li span:not(.ic){color:var(--text-3)}
.mk-leg .ic{width:10px;height:10px;border-radius:3px;flex:none;background:rgba(var(--text-rgb),.18)}
.mk-leg .ic.p{background:var(--c2)}
.mk-leg .ic.c{background:var(--c3)}
.mk-alerte{color:var(--bad);font-weight:600}
.mk-comp{margin-top:16px;padding:24px}
.mk-comp h3{margin:0 0 16px;font-size:18px}
.mk-comp h3:not(:first-child){margin-top:28px}
.mk-barres .piste span{background:linear-gradient(90deg,var(--c1),var(--c3))}
.mk-conseil{margin:14px 0 0;font-size:14px}
.mk-maj{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:20px 0 0;font-size:14px;color:var(--text-3)}
@media (max-width:1000px){.mk-tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.mk-tuiles{grid-template-columns:minmax(0,1fr)}.mk-comp{padding:16px}}
.mk-leg li.mk-n{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline}
.mk-leg li.mk-n b{font-weight:500;color:var(--text);overflow-wrap:anywhere}
.mk-leg li.mk-n span{font-variant-numeric:tabular-nums;color:var(--text-3)}

/* Usage détaillé : les panneaux gardent leur hauteur (pas de grand vide), celui des filtres prend toute la largeur
   et range ses groupes en colonnes ; les erreurs ont leur propre carte, comme les autres panneaux */
#usage .deux-col{align-items:start}
#usage .panneau.pleine{grid-column:1/-1}
.filtres-g{columns:2 300px;column-gap:40px}
.filtres-g .filtre-g{break-inside:avoid;padding-bottom:8px}
.filtres-g .filtre-g>.sous-titre{margin-top:16px}
.err-carte{margin-top:32px}
.err-carte>h3{margin:0 0 4px}
.err-carte .err-liste>li:first-child{border-top:0}
/* Bandeau d'information : le type à gauche, la fin à droite, sur la même ligne */
#usage #u-clics{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));column-gap:40px}

/* Trois façons d'ajouter un CV (inscription et Mon compte) : trois tuiles, une seule ouverte */
.facons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}
.facon{display:grid;justify-items:start;align-content:start;gap:6px;min-width:0;padding:18px 18px 16px;border-radius:var(--r-md);border:1px solid var(--ctl);background:var(--bg);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,background-color .15s}
.facon .ic{display:grid;place-items:center;width:44px;height:44px;margin-bottom:4px;border-radius:12px;background:rgba(var(--c1-rgb),.12);color:var(--accent)}
.facon b{font-size:16px;line-height:1.25}
.facon span{font-size:14px;line-height:1.4;color:var(--text-3)}
.facon[aria-pressed="true"]{border-color:var(--accent);background:rgba(var(--c1-rgb),.1);box-shadow:inset 0 0 0 1px var(--accent)}
.facon[aria-pressed="true"] .ic{background:var(--grad);color:var(--on-grad,#fff)}
@media (hover:hover){.facon:hover{border-color:var(--accent)}}
.facon-p{margin-top:24px}
.depot:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media (max-width:640px){
  .facons{grid-template-columns:minmax(0,1fr)}
  .facon{grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:center;padding:12px 14px}
  .facon .ic{grid-row:span 2;margin:0}
}
/* Guide de l'export LinkedIn en PDF */
.guide-li{display:grid;gap:14px;margin:0 0 12px;padding:0;list-style:none}
.guide-li li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;align-items:start;line-height:1.55}
.guide-n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(var(--c1-rgb),.14);color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.li-ou{display:flex;align-items:center;gap:12px;margin:24px 0 12px;color:var(--text-3);font-size:14px}
.li-ou::before,.li-ou::after{content:"";flex:1;height:1px;background:var(--border)}
/* Formulaire de CV */
.cvf{display:grid;gap:32px}
.cvf>.aide{margin:0;font-size:14px;color:var(--text-3)}
.cvf-bloc{display:grid;gap:20px;min-width:0}
.cvf-bloc>.aide{margin:-12px 0 0;font-size:14px;color:var(--text-3)}
.cvf-bloc .champ+.champ{margin-top:0}
.cvf-t{font-size:18px;font-family:var(--font-display);margin:0;padding-bottom:10px;border-bottom:1px solid var(--border)}
.cvf-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.cvf-item{display:grid;gap:16px;min-width:0;margin:0 0 16px;padding:20px;border:1px solid var(--border);border-radius:var(--r-md);background:rgba(var(--text-rgb),.02)}
.cvf-item legend{padding:0 8px;margin-left:-8px;font-weight:700}
.cvf-item .pastilles label{min-height:40px}
.cvf-retirer{margin:-4px 0 0;text-align:right}
.cvf input:disabled{opacity:.5}
.requis{color:var(--bad)}
.cvf-brouillon{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:0}
@media (max-width:640px){.cvf-duo{grid-template-columns:minmax(0,1fr)}.cvf-item{padding:16px}}
/* Pas de CV sous la main */
.sans-cv{margin-top:20px;display:grid;justify-items:start;gap:12px}
.sans-cv .message{width:100%}
.sans-cv .message p{margin:0}
/* Bandeau des comptes sans CV : le texte, puis les trois façons */
.banniere.sans-cv-b{display:grid;gap:16px;border-color:var(--warn);background:var(--warn-bg)}
.banniere.sans-cv-b p{margin:0}
.banniere.sans-cv-b strong{color:var(--text)}
/* Boîte « Ton CV depuis LinkedIn » / « Remplir ton CV » dans Mon compte */
dialog.boite.ajout-cv{max-width:760px}
dialog.boite.ajout-cv .ap-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
dialog.boite.ajout-cv #ac-intro{margin:8px 0 24px}
dialog.boite.ajout-cv .cvf p,dialog.boite.ajout-cv .guide-li+.aide{margin-top:0}
dialog.boite.ajout-cv .actions{position:sticky;bottom:-32px;margin:24px -32px -32px;padding:16px 32px;background:var(--bg-alt);border-top:1px solid var(--border)}
@media (max-width:600px){dialog.boite.ajout-cv .actions{bottom:-24px;margin:24px -20px -24px;padding:12px 20px}}
/* Accès en un geste (clé, Google, LinkedIn) en haut de la carte de connexion, le lien par mail dessous */
.entrees-rapides{display:grid;gap:12px;margin:0 0 24px}
.entrees-rapides .cle-entree{margin:0}
.entrees-rapides .cle-entree .erreur{margin-top:8px}
/* Google et LinkedIn côte à côte quand la place le permet, l'un sous l'autre sur téléphone */
.ext-entree{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.ext-entree .btn-ext{width:100%;min-height:48px;padding:0 12px}
.ext-entree .erreur{grid-column:1/-1;margin:0}
.ou.ou-mail{margin:0 0 20px}
.relies{margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
.relies h3{margin:0}
.relies>.aide{margin:6px 0 0}
.relies-liste{display:grid;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.relies-liste li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 16px;border:1px solid var(--border);border-radius:var(--r-md)}
.relies-liste li div{display:grid;min-width:0}
.relies-liste span{font-size:14px;color:var(--text-3);overflow-wrap:anywhere}
.btn-ext img,[data-linkedin] img{flex:none;width:18px;height:18px}
.relies-liste li{justify-content:flex-start}
.relies-liste li img{flex:none}
.relies-liste li div{flex:1}

/* ---------------------------------------------------------------------------
   Passe mobile (13/10/2026)
   --------------------------------------------------------------------------- */
/* Menus déroulants : mêmes mesures que les boutons d'action (48 px, texte semi-gras, pilule, bordure 1 px) */
select.sel,.stw select,.sortw select,.ddbtn{min-height:48px;padding-top:0;padding-bottom:0;padding-left:20px;border-radius:999px;font-size:15px;font-weight:600;line-height:1.2}
select.sel{padding-right:48px}
.stw select,.sortw select,.ddbtn{padding-right:44px}
.err-typef select.sel{min-height:48px;font-size:15px}
/* Boutons de la fiche d'offre (Écarter, Voir la fiche, cœur) : même hauteur que le statut et les boutons d'action */
.fold-btn,.ecart-btn{min-height:48px}
.aime-btn{width:48px;height:48px}
/* Sur écran tactile, les champs passent à 16 px (sinon iOS zoome) : les boutons suivent, pour rester identiques */
@media (pointer:coarse){.btn-p,.btn-s,.btn-d,.ddbtn,.fline .ddbtn,.fold-btn,.ecart-btn{font-size:16px}}

/* Heures : même gabarit que les dates (iOS les élargit et les vide sinon) ; le sélecteur natif reste sous l'icône */
input[type=time]{-webkit-appearance:none;appearance:none;display:block;max-width:100%;min-width:0;box-sizing:border-box;text-align:left;line-height:1.2}
input[type=time]::-webkit-date-and-time-value{text-align:left;margin:0}
input[type=time]::-webkit-calendar-picker-indicator{position:absolute;right:0;top:0;width:48px;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}
.champ-ico>input[type=time]{position:relative;padding-right:48px}
/* Date ou heure vide : un texte d'aide tient lieu de placeholder (posé par majDates, aligné sur le texte du champ) */
.champ-ico[data-ph]:has(>input[data-vide]:not(:focus))::before{content:attr(data-ph);position:absolute;z-index:1;left:var(--ph-g,17px);right:52px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:var(--ph-fs,16px);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.champ-ico>input[data-vide]:not(:focus),.champ-ico>input[data-vide]:not(:focus)::-webkit-datetime-edit{color:transparent}

/* Bandeau d'information (admin) : type et fin côte à côte sur ordinateur, l'un sous l'autre sur téléphone */
.bd-ligne{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.bd-ligne fieldset{margin:0;padding:0;border:0;min-width:0}
.bd-quand{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:8px}
.bd-quand label{display:block;margin-bottom:6px;font-size:14px;font-weight:600;color:var(--text-2)}
.bd-fin .aide{margin-top:8px;font-size:14px}
@media (min-width:681px){.bd-ligne{grid-template-columns:auto minmax(300px,440px);justify-content:space-between;align-items:start;gap:16px 32px}}
@media (max-width:680px){
  .bd-type .pastilles{display:grid;grid-template-columns:minmax(0,1fr)}
  .bd-type .pastilles label{width:100%;min-height:48px;padding:0 20px}
  .bd-quand{grid-template-columns:minmax(0,1fr)}
}

/* Onglets de l'admin → menu déroulant sur téléphone (comme ceux de l'espace) */
.onglets-menu{display:none}
@media (max-width:680px){
  .onglets-menu{display:grid;gap:6px;width:100%}
  .onglets-menu label,.err-typef>span{font-size:14px;font-weight:600;color:var(--text-2)}
  .onglets-menu select.sel{width:100%}
  .err-filtres{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
  .err-typef{display:grid;gap:6px;width:100%}
  .err-typef select.sel{width:100%}
}

/* Fiche d'une personne (admin) : chiffres alignés à droite, une ligne par étape */
.dl-chiffres{display:grid;margin:12px 0 0;font-size:15px}
.dl-chiffres>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--border-soft)}
.dl-chiffres>div:last-child{border-bottom:0}
.dl-chiffres dt{min-width:0;color:var(--text-2);overflow-wrap:anywhere}
.dl-chiffres dt small{display:block;margin-top:2px;font-size:13px;color:var(--text-3)}
.dl-chiffres dd{flex:none;margin:0;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
.dl-chiffres .sous dt{padding-left:16px}
.dl-chiffres .fort dt{color:var(--text);font-weight:700}
.dl-chiffres .fort dd{color:var(--accent)}
.fiche-bloc h4+.dl-chiffres{margin-top:4px}
@media (max-width:680px){
  /* Plein écran sur téléphone : toute la largeur pour lire, titre et Fermer toujours en haut */
  dialog.boite.fiche{width:100%;max-width:none;height:100%;max-height:none;margin:0;border:0;border-radius:0;padding:0 16px calc(env(safe-area-inset-bottom,0px) + 24px)}
  .fiche .fiche-tete{position:sticky;top:0;z-index:3;margin:0 -16px;padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 10px;background:var(--bg-alt);border-bottom:1px solid var(--border-soft)}
  .fiche .fiche-tete h2{font-size:20px;min-width:0;overflow-wrap:anywhere}
  .fiche-grille{gap:12px;margin-top:16px}
  .fiche-bloc{padding:16px}
  .fiche-bloc h3{font-size:16px}
  /* Libellé au-dessus de sa valeur : les longues listes (postes, lieux) gardent toute la largeur */
  .dl-fiche{grid-template-columns:minmax(0,1fr);gap:2px;font-size:15px}
  .dl-fiche dt{color:var(--text-2);font-size:14px}
  .dl-fiche dd{margin-bottom:10px;overflow-wrap:anywhere}
}

/* Thème Matrix (toujours sombre) : le choix clair ou sombre s'efface, une phrase le dit */
.matrix-seul{display:none;margin-top:24px}
.matrix .matrix-seul{display:block}
.matrix .hors-matrix{display:none}

/* Parcours mesuré (admin) : étapes en colonne, groupées par phase, reliées par un fil */
.pc-resume{margin:16px 0 12px;color:var(--text-2)}
/* Parcours en ruban : une colonne par étape, l'étape au milieu de sa colonne ; sur téléphone, le ruban garde sa largeur et défile dans son cadre */
.pc-carte{padding:20px 12px 20px;--fuite:#ff8a65}
.pc-defile{position:relative;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.pc-ruban{min-width:720px;display:grid;gap:0}
.pc-phases,.pc-tetes{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.pc-phases{margin-bottom:10px;gap:0 6px}
.pc-phases span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);text-align:center;padding-bottom:6px;border-bottom:1px solid var(--border)}
.pc-tetes{list-style:none;margin:0 0 10px;padding:0;align-items:end}
.pc-tete{display:grid;justify-items:center;text-align:center;gap:2px;padding:0 4px;min-width:0}
.pc-tn{font-size:12px;line-height:1.25;color:var(--text-2);text-wrap:balance}
.pc-tc{font:700 22px/1.1 var(--font-display);color:var(--text);font-variant-numeric:tabular-nums}
.pc-tt{font-size:12px;color:var(--g8,var(--text-2));font-variant-numeric:tabular-nums}
.pc-tete.choisie .pc-tn{color:var(--text)}
.pc-svg{display:block;width:100%;height:auto;overflow:visible}
.pc-noeuds rect{fill:var(--g8,var(--c3))}
.pc-chute{fill:none;stroke:url(#pc-dg);opacity:.75;transition:opacity .2s}
.pc-chute.choisie{opacity:1}
.pc-flux path{fill:none;stroke:rgba(var(--text-rgb),.55);stroke-width:2;stroke-dasharray:2 14;stroke-linecap:round}
.pc-durees text{font:700 13px var(--font-body,system-ui);fill:var(--g0,#00140a);text-anchor:middle}
.pc-sorties-b{display:grid;grid-template-columns:repeat(var(--n2),minmax(0,1fr));margin-top:6px;min-height:40px}
.pc-sortie{justify-self:center;min-width:56px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--fuite) 55%,transparent);background:color-mix(in srgb,var(--fuite) 12%,transparent);color:#ffc2ad;font:700 14px var(--font-display);font-variant-numeric:tabular-nums;cursor:pointer}
.pc-sortie:hover{background:color-mix(in srgb,var(--fuite) 22%,transparent)}
.pc-sortie[aria-pressed="true"]{border-color:var(--accent);color:var(--text);box-shadow:0 0 0 1px var(--accent)}
.pc-legende{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:13px;color:var(--text-2)}
.pc-pastille{width:12px;height:12px;border-radius:3px;background:linear-gradient(var(--fuite),color-mix(in srgb,var(--fuite) 25%,transparent));flex:none}
.pc-detours{margin:12px 0 0;font-size:14px;color:var(--text-2)}
.pc-vide{text-align:center;padding:24px 0}
/* Animation : le ruban se déroule, les sorties coulent, les chiffres arrivent, puis des points avancent en continu */
.pc-flux path{animation:pc-flux 1.2s linear infinite}
@keyframes pc-flux{to{stroke-dashoffset:-16}}
html.defile .pc-flux path{animation-play-state:paused}
.pc-ruban.anime .pc-dessin{animation:pc-deroule 1.4s cubic-bezier(.3,.7,.2,1) both}
@keyframes pc-deroule{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.pc-ruban.anime .pc-chute{stroke-dasharray:1;stroke-dashoffset:1;animation:pc-coule .9s 1.1s ease-out forwards}
@keyframes pc-coule{to{stroke-dashoffset:0}}
.pc-ruban.anime .pc-sortie{opacity:0;animation:pc-apparait .35s 1.8s forwards}
@keyframes pc-apparait{to{opacity:1}}
@media (prefers-reduced-motion: reduce){.pc-flux path,.pc-ruban.anime .pc-dessin,.pc-ruban.anime .pc-chute,.pc-ruban.anime .pc-sortie{animation:none;opacity:1;stroke-dashoffset:0}}

/* Fenêtre « Comprendre l'erreur » (admin) : une section par question, frise des étapes, bloc à copier pour Claude */

.notif-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.notif-l .btn-p{min-height:40px;padding:0 14px;font-size:14px}
@media (max-width:560px){.notif-btns{grid-column:2;justify-content:flex-start}}
.err-bloc{margin-top:24px}
.err-bloc h3{margin:0 0 8px;font-size:16px}
.err-bloc p{margin:8px 0 0}
.err-bloc ul{margin:8px 0 0;padding-left:20px;display:grid;gap:6px;color:var(--text-2)}
.err-frise{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.err-frise li{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;border:1px solid var(--border);color:var(--text-3);font-size:13px;font-weight:600}
.err-frise li.fait{border-color:transparent;background:var(--ok-bg);color:var(--ok)}
.err-frise li.fait::before{content:"✓" / "";font-weight:800}
.err-frise li.casse{border-color:var(--bad);background:var(--bad-bg);color:var(--bad)}
.err-frise li.casse::before{content:"✕" / "";font-weight:800}
.err-brut{font-size:14px}
.err-brut .k{display:block;font-weight:700;color:var(--text);margin-bottom:4px}
.err-brut code{display:block;padding:10px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--border);font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere;color:var(--text)}
.err-type{display:inline-block;margin-right:6px;padding:2px 10px;border-radius:999px;font-size:13px;font-weight:700}
.err-type.ok{background:var(--ok-bg);color:var(--ok)}
.err-type.ko{background:var(--bad-bg);color:var(--bad)}
.err-code{margin:8px 0 0;max-height:260px;overflow:auto;padding:12px 16px;border-radius:12px;background:var(--bg);border:1px solid var(--border);font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text)}
.err-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}

/* Page Erreurs (admin) : filtres en ligne, une carte par panne */
.arch-filtres{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.3fr) minmax(0,1.3fr);gap:16px;margin-top:32px}
.arch-filtres .champ{margin:0}
@media (max-width:760px){.arch-filtres{grid-template-columns:minmax(0,1fr)}}
.arch-l{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.arch-l>li{padding:16px 20px;border-radius:var(--r-md);background:var(--card-bg);border:1px solid var(--card-border);min-width:0}
.arch-l>li.vide{text-align:center;color:var(--text-3)}
.arch-tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.arch-cause{font-weight:700;color:var(--text)}
.arch-etat{padding:2px 10px;border-radius:999px;font-size:13px;font-weight:700}
.arch-etat.ko{background:var(--bad-bg);color:var(--bad)}
.arch-etat.moy{background:var(--warn-bg);color:var(--warn)}
.arch-etat.ok{background:var(--ok-bg);color:var(--ok)}
.arch-meta{margin:6px 0 0;color:var(--text-2);font-size:14px}
.arch-msg{margin:8px 0 0}
.arch-msg code{font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-3);overflow-wrap:anywhere}
.arch-act{margin:12px 0 0}
#err-veilles .carte.panneau{margin-top:24px}

/* Électrocardiogramme des pannes : papier millimétré discret, trait de 2 px qui luit légèrement, curseur au survol */
.ecg-tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.ecg-tete h3{margin:0}
.ecg-per{display:flex;flex-wrap:wrap;gap:6px}
.ecg-per .tab{min-height:40px}
.ecg-per .tab[aria-pressed="true"]{background:var(--plein);color:var(--on-plein);border-color:transparent}
.cardio{position:relative;margin-top:16px;border-radius:12px;overflow:hidden;
  background-color:var(--bg);
  background-image:linear-gradient(rgba(var(--text-rgb),.07) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--text-rgb),.07) 1px,transparent 1px),linear-gradient(rgba(var(--text-rgb),.035) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--text-rgb),.035) 1px,transparent 1px);
  background-size:50px 50px,50px 50px,10px 10px,10px 10px}
.cardio svg{display:block;width:100%;height:200px;touch-action:pan-y}
.ecg-base{stroke:rgba(var(--text-rgb),.22);stroke-width:1}
.ecg-max{stroke:rgba(var(--text-rgb),.18);stroke-width:1;stroke-dasharray:4 4}
.ecg-trace{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 3px var(--accent))}
.ecg-trace.anime{stroke-dasharray:1;stroke-dashoffset:1;animation:ecg-trace 1.6s ease-out forwards}
@keyframes ecg-trace{to{stroke-dashoffset:0}}
.ecg-pic{fill:var(--text);font:700 13px var(--font-body);font-variant-numeric:tabular-nums}
.ecg-axe{fill:var(--text-3);font:12px var(--font-body)}
.ecg-curseur{stroke:var(--text-2);stroke-width:1;stroke-dasharray:3 3}
.ecg-bulle{position:absolute;top:8px;display:grid;gap:2px;max-width:260px;padding:8px 12px;border-radius:10px;background:var(--card-bg);background-color:var(--bg-alt);border:1px solid var(--card-border);box-shadow:0 8px 24px -8px rgba(0,0,0,.4);font-size:13px;color:var(--text-2);pointer-events:none}
.ecg-bulle[hidden]{display:none}
.ecg-bulle b{color:var(--text)}
.ecg-chiffres{margin-top:16px}
@media (prefers-reduced-motion:reduce){.ecg-trace.anime{animation:none;stroke-dashoffset:0}}

/* Sous-menu en onglets (rubriques d'une page) : il colle en haut de l'écran. En descendant, il prend la place de
   l'en-tête, qui s'efface ; dès qu'on remonte, l'en-tête revient et le sous-menu se range juste dessous.
   L'état est posé par haut.js (classe nav-cachee sur <html>, --nav-bas = bas de l'en-tête). */
.nav{transition:padding .3s ease,background-color .3s ease,border-color .3s ease,transform .3s ease}
html.nav-cachee .nav{transform:translateY(calc(-100% - 24px))}
.sous-nav{position:sticky;top:calc(var(--nav-bas,calc(env(safe-area-inset-top,0px) + var(--haut,0px) + 72px)) + 6px);z-index:35;transition:top .3s ease}
html.nav-cachee .sous-nav{top:calc(env(safe-area-inset-top,0px) + var(--haut,0px) + 8px)}
.sous-nav.collee .tabs{background:var(--nav-glass);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 10px 30px -14px rgba(0,0,0,.45)}
@media (hover:none){.matrix .sous-nav.collee .tabs{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg-alt)}}
@media (prefers-reduced-motion:reduce){.nav,.sous-nav{transition:none}}

/* Grandes entreprises de ta région (Paramètres › Sites à surveiller) : cases sur deux ou trois colonnes */
.gc{margin:24px 0 0;padding:0;border:0;min-width:0}
.gc-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:8px;margin-top:12px}
.gc-item{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 14px;border-radius:14px;border:1px solid var(--border);cursor:pointer}
.gc-item:has(input:checked){border-color:var(--accent);background:rgba(var(--c1-rgb),.08)}
.gc-item input{flex:none;width:20px;height:20px;accent-color:var(--plein)}
.gc-item span{display:grid;min-width:0}
.gc-item b{font-weight:600;color:var(--text);overflow-wrap:anywhere}
.gc-item small{font-size:13px;color:var(--text-3)}
.gc-tout{display:flex;gap:16px;margin:8px 0 0}
.gc-tout[hidden]{display:none}

/* Fiche admin : état des alertes mail (signe + texte, jamais la couleur seule) */
.al-etat{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:4px 12px;border-radius:999px;font-size:14px;font-weight:600}
.al-etat::before{font-weight:800}
.al-etat.ok{background:var(--ok-bg);color:var(--ok)}.al-etat.ok::before{content:"✓" / ""}
.al-etat.moy{background:var(--warn-bg);color:var(--warn)}.al-etat.moy::before{content:"!" / ""}
.al-etat.ko{background:var(--bad-bg);color:var(--bad)}.al-etat.ko::before{content:"✕" / ""}

/* Tuto « Brancher mes alertes » : une page de l'espace (#alertes), un écran par étape */
body:not(.vue-tuto) #alertes{display:none}
body.vue-tuto #appli>:not(#alertes){display:none}
body.vue-tuto #alertes{padding-top:24px}
#alertes .retour{margin:0}
.tuto{max-width:880px}
.tuto-sur{margin:24px 0 8px}
.tuto h1{text-wrap:balance}
.tuto-prog{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;counter-reset:none}
.tuto-prog li{position:relative;display:grid;justify-items:center;gap:6px;min-width:0;text-align:center;font-size:13px;font-weight:600;color:var(--text-3)}
.tuto-prog li:not(:last-child)::after{content:"";position:absolute;top:15px;left:calc(50% + 22px);right:calc(-50% + 22px - 8px);height:2px;border-radius:2px;background:var(--border)}
.tuto-prog li.fait:not(:last-child)::after{background:var(--accent)}
.tp-n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:2px solid var(--ctl);background:var(--bg);color:var(--text-2);font-size:14px;font-weight:700}
.tuto-prog li.fait .tp-n{border-color:var(--accent);background:var(--accent);color:var(--bg)}
.tuto-prog li.ici .tp-n{border-color:transparent;background:var(--grad-btn);color:var(--on-grad);box-shadow:0 0 0 4px rgba(var(--c1-rgb),.22)}
.tuto-prog li.ici{color:var(--text)}
.tp-l{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tuto-corps{margin-top:32px;border-radius:var(--r-lg);background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);padding:32px;display:grid;gap:20px;min-width:0}
.tuto-corps>*{margin:0;min-width:0}
.tuto-lede{font-size:17px;line-height:1.6;color:var(--text);max-width:66ch}
.tuto-pied{margin-top:24px}
.tuto-pied .actions{margin:0;flex-wrap:wrap}
.tuto-pause{margin:16px 0 0;font-size:15px}
.tuto-pause a{font-weight:600}
.tuto-promesses{list-style:none;padding:0;display:grid;gap:10px}
.tuto-promesses li{display:flex;gap:10px;align-items:flex-start;line-height:1.5;color:var(--text-2)}
.tuto-promesses svg{flex:none;margin-top:4px;color:var(--ok)}
.tuto-promesses b{color:var(--text)}
.tuto-messagerie{border:0;padding:0;margin:0;min-width:0}
.tuto-choix{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:10px}
.tuto-choix .facon{position:relative;grid-template-columns:minmax(0,1fr)}
dialog.boite.tuto-boite{max-width:600px;max-height:calc(100dvh - 32px);overflow:auto}
.tuto-choix .facon input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.tuto-choix .facon:has(input:checked){border-color:var(--accent);background:rgba(var(--c1-rgb),.1);box-shadow:inset 0 0 0 1px var(--accent)}
.tuto-choix .facon:has(input:checked) b::after{content:" ✓" / "";color:var(--accent)}
.tuto-choix .facon:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.tuto-mobile p{margin:0}
/* Sous-étapes numérotées, reliées par un fil */
.te-liste{list-style:none;padding:0;display:grid;gap:28px}
.te-sous{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:16px}
.te-sous>div{display:grid;gap:12px;min-width:0}
.te-sous>div>*{margin:0}
.te-sous:not(:last-child)::after{content:"";position:absolute;left:15.5px;top:38px;bottom:-24px;width:1px;background:var(--card-border)}
.te-n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(var(--text-rgb),.06);border:1px solid var(--card-border);font-weight:700;font-size:15px;color:var(--text)}
.te-t{margin:4px 0 0;font-size:17px;line-height:1.35;font-family:var(--font-body);font-weight:700;letter-spacing:0}
/* Schéma simplifié de l'écran de Gmail : la zone à toucher est entourée */
.gs{margin:0;max-width:560px;border-radius:12px;border:1px solid var(--card-border);background:var(--bg);overflow:hidden;font-size:13px;color:var(--text-2)}
.gs-barre{display:flex;align-items:center;gap:6px;padding:8px 12px;background:rgba(var(--text-rgb),.05);border-bottom:1px solid var(--border-soft)}
.gs-barre span{width:8px;height:8px;border-radius:50%;background:rgba(var(--text-rgb),.18)}
.gs-barre b{margin-left:8px;color:var(--text);font-size:13px}
.gs-onglets{display:flex;gap:14px;padding:8px 12px 0;border-bottom:1px solid var(--border-soft);overflow:hidden;white-space:nowrap}
.gs-onglets span{padding-bottom:7px;flex:none}
.gs-onglets .on{color:var(--text);font-weight:700;border-bottom:3px solid var(--accent)}
.gs-corps{padding:12px 14px 16px;display:grid;gap:10px}
.gs-l{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.gs-gris{color:var(--text-3)}
.gs-btn,.gs-champ{display:inline-flex;align-items:center;min-height:30px;padding:2px 12px;border-radius:6px;border:1px solid var(--ctl);color:var(--text);font-weight:600}
.gs-champ{min-width:150px;font-weight:400;color:var(--text-3)}
.gs-lien{color:var(--accent);font-weight:600;text-decoration:underline}
.gs-cible{position:relative;border-radius:8px;box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--accent);animation:gs-pulse 2.4s ease-in-out infinite}
.gs-lien.gs-cible{padding:2px 6px}
@keyframes gs-pulse{50%{box-shadow:0 0 0 3px var(--bg),0 0 0 9px rgba(var(--c1-rgb),.35)}}
@media (prefers-reduced-motion:reduce){.gs-cible{animation:none}}
/* Le chemin d'une alerte : site → messagerie → Flair Job */
.tf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tf li{position:relative;display:grid;justify-items:center;gap:2px;padding:16px 10px;border-radius:var(--r-md);background:rgba(var(--text-rgb),.04);border:1px solid var(--border-soft);text-align:center;min-width:0}
.tf li:not(:last-child)::after{content:"→";position:absolute;right:-12px;top:50%;transform:translate(50%,-50%);color:var(--text-3);font-weight:700}
.tf-i{display:grid;place-items:center;width:44px;height:44px;margin-bottom:6px;border-radius:12px;background:rgba(var(--c1-rgb),.12);color:var(--accent)}
.tf-i.tf-flair{background:var(--grad-btn);color:var(--on-grad)}
.tf b{color:var(--text);font-size:15px}
.tf span:not(.tf-i){font-size:13px;color:var(--text-3);line-height:1.35}
.tuto-boite .tuto-flux{margin-top:20px}
/* Étape du code */
.tuto-code{display:grid;gap:16px}
.tuto-code>*{margin:0}
.tuto-recu{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--text)}
.tuto-recu svg{color:var(--ok);flex:none}
.tuto-code-v{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.tuto-code-v .mono{font-size:32px;font-weight:700;letter-spacing:.08em;color:var(--text);padding:6px 16px;border-radius:12px;background:rgba(var(--text-rgb),.05);border:1px dashed var(--ctl)}
/* Sites */
.tuto-sites{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.tuto-sites li{display:grid;gap:8px;align-content:start;padding:16px;border-radius:var(--r-md);border:1px solid var(--card-border);background:var(--bg);min-width:0}
.tuto-sites li.fait{border-color:var(--ok);background:var(--ok-bg)}
.tuto-sites p{margin:0;font-size:14px}
.tuto-sites li{display:flex;flex-direction:column}
.ts-nom{margin:0;font-family:var(--font-body);font-size:16px;font-weight:700;letter-spacing:0;line-height:1.3;color:var(--text)}
.ts-actions{margin-top:auto;padding-top:4px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.ts-actions .btn-s{min-height:40px;padding:0 14px}
.ts-fait{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;font-weight:600;color:var(--text);cursor:pointer}
.ts-fait input{width:20px;height:20px;accent-color:var(--accent);flex:none}
.tuto-ou{margin:0;padding-left:20px;display:grid;gap:4px;color:var(--text-2)}
.al-statut{margin-top:8px}
.al-statut:empty{display:none}
.al-statut .al-etat{margin:0}
@media (max-width:640px){
  .tuto-corps{padding:20px 16px;gap:16px}
  .tuto-prog{gap:4px}
  .tp-l{display:none}
  .tuto-choix{grid-template-columns:minmax(0,1fr)}
  .tf{grid-template-columns:minmax(0,1fr);gap:16px}
  .tf li{grid-template-columns:36px minmax(0,1fr);justify-items:start;text-align:left;column-gap:12px;padding:8px 12px}
  .tf .tf-i{grid-row:span 2;margin:0;width:36px;height:36px;border-radius:10px}
  .tf-i svg{width:18px;height:18px}
  .tf li:not(:last-child)::after{content:"↓";right:50%;top:auto;bottom:-10px;transform:translate(50%,50%)}
  .tuto-pied .actions>*{flex:1 1 100%}
  .gs-onglets span:not(.on):not(:first-child){display:none}
  .tuto-code-v .mono{font-size:26px}
}

/* Veille en échec, dite à la personne (et « c'est reparti ») */
.banniere.souci-veille{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px 16px;background:linear-gradient(var(--warn-bg),var(--warn-bg)),var(--bg);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.souci-veille p{margin:0;color:var(--text);line-height:1.55}
.souci-veille .sv-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.banniere.souci-veille.ok{background:linear-gradient(var(--ok-bg),var(--ok-bg)),var(--bg);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.souci-veille.ok .sv-ico{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.souci-veille:not(:has(button)){grid-template-columns:44px minmax(0,1fr)}
@media (max-width:640px){.banniere.souci-veille,.souci-veille:not(:has(button)){grid-template-columns:minmax(0,1fr);padding:16px}.souci-veille .sv-ico{width:36px;height:36px}.souci-veille .sv-ico svg{width:18px;height:18px}}
.bd-panne{margin:12px 0 24px}.bd-panne p{margin:0}

/* Admin : « À traiter aujourd'hui » */
.at-l{list-style:none;margin:24px 0 0;padding:0;display:grid;align-items:start;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:12px}
.at-g{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:var(--r-md);background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow);min-width:0}
.at-g.haute{border-color:color-mix(in srgb,var(--bad) 55%,transparent)}
.at-g.moyenne{border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.at-tete{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.at-tete h3{margin:0;flex:1 1 auto;font-size:17px;line-height:1.3;font-family:var(--font-body);letter-spacing:0}
.at-tete h3 .n{display:inline-grid;place-items:center;min-width:24px;height:24px;margin-left:6px;padding:0 7px;border-radius:999px;background:var(--chip-bg);font-size:13px;font-weight:700;vertical-align:2px}
.at-pt{display:inline-block;width:10px;height:10px;margin-right:10px;border-radius:50%;background:var(--ok);vertical-align:1px}
.at-pt.desactive{background:var(--bad)}
.at-pt.pause{background:var(--warn)}
.at-btns{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.at-btns .btn-s{min-height:40px;padding:0 14px}
.at-btns .lien-btn{min-height:40px;font-size:14px}
.at-items{list-style:none;margin:0;padding:0;display:grid;gap:0}
.at-items li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--border-soft)}
.at-items p{margin:0;display:grid;gap:2px;min-width:0}
.at-items b{color:var(--text);font-size:15px;overflow-wrap:anywhere}
.at-items span{color:var(--text-2);font-size:14px;line-height:1.4}
.at-items .btn-s{flex:none;min-height:40px;padding:0 14px}
.at-plus{margin:8px 0 0}
.at-plus-d>summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;font-weight:600;color:var(--accent)}
.at-plus-d[open]>summary{margin-bottom:4px}
.at-vide{display:flex;align-items:center;gap:10px;margin:24px 0 0;padding:16px 20px;border-radius:var(--r-md);background:linear-gradient(var(--ok-bg),var(--ok-bg)),var(--card-bg);border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);color:var(--text);font-weight:600}
.at-vide svg{color:var(--ok);flex:none}
.at-cachees{margin:12px 0 0}
.at-cachees .lien-btn{font-size:inherit}
/* Crédits Netlify */
.credits-t{margin-top:16px}
.credits-f{display:grid;gap:6px;margin-top:20px}
.credits-f label{font-weight:600}
.credits-f .ajout{max-width:460px}
@media (max-width:640px){.at-g{padding:16px}.at-items li{flex-wrap:wrap}.credits-t{grid-template-columns:minmax(0,1fr)}}

/* « Ça travaille » (occupe.js) : roue sur le bouton qui a lancé l'action, pastille pour une case ou une liste */
.occupe{cursor:progress}
.occupe-roue{display:inline-block;flex:none;width:1em;height:1em;margin-right:.5em;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;vertical-align:-.15em;animation:tourne .8s linear infinite}
/* Boutons ronds à icône : la roue remplace l'icône, au même endroit */
:is(.nav-btn,.rond,.cap-btn,.ddclose).occupe{position:relative}
:is(.nav-btn,.rond,.cap-btn,.ddclose).occupe>:not(.occupe-roue,.occupe-sr){visibility:hidden}
:is(.nav-btn,.rond,.cap-btn,.ddclose).occupe>.occupe-roue{position:absolute;inset:0;margin:auto;width:18px;height:18px}
.occupe-pastille{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:1000;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--text);color:var(--bg);font-size:14px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.occupe-pastille .occupe-roue{margin:0}
.occupe-pastille.ok svg{flex:none}
@media (prefers-reduced-motion:reduce){.occupe-roue{animation:occupe-pulse 1.2s ease-in-out infinite;border-right-color:currentColor}}
@keyframes occupe-pulse{50%{opacity:.35}}

/* Rappel flottant « Branche tes alertes » (page des offres seulement) */
.cta-alertes{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);transform:translateX(-50%);z-index:46;width:min(720px,calc(100% - 32px));display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px 16px;padding:14px 16px 14px 18px;border-radius:var(--r-md);background:linear-gradient(rgba(var(--c1-rgb),.12),rgba(var(--c1-rgb),.12)),var(--bg-alt);border:1px solid rgba(var(--c1-rgb),.45);box-shadow:0 12px 32px rgba(0,0,0,.22);animation:cta-monte .35s ease-out}
.cta-alertes[hidden]{display:none}
body:is(.vue-compte,.vue-recherche,.vue-tuto) .cta-alertes,body:has(.consent:not([hidden])) .cta-alertes,body:has(dialog[open]) .cta-alertes{display:none}
.cta-al-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--grad-btn);color:var(--on-grad)}
.cta-al-txt{margin:0;display:grid;gap:2px;min-width:0}
.cta-al-txt b{color:var(--text);font-size:16px;line-height:1.3}
.cta-al-txt span{color:var(--text-2);font-size:14px;line-height:1.4}
.cta-al-act{display:flex;align-items:center;gap:8px}
.cta-al-act .btn-p,.cta-al-act .btn-s{min-height:44px;padding:0 16px;white-space:nowrap}
.cta-al-non{width:40px;height:40px;flex:none}
@keyframes cta-monte{from{opacity:0;transform:translate(-50%,16px)}}
@media (prefers-reduced-motion:reduce){.cta-alertes{animation:none}}
/* Sa place est réservée : rien n'est caché dessous, les boutons flottants passent au-dessus */
body.avec-cta-alertes:not(.vue-compte):not(.vue-recherche):not(.vue-tuto){padding-bottom:calc(var(--cta-h,0px) + 24px)}
body.avec-cta-alertes:not(.vue-compte):not(.vue-recherche):not(.vue-tuto):not(:has(.consent:not([hidden]))) :is(.souci-btn,.haut-btn){bottom:calc(env(safe-area-inset-bottom,0px) + var(--cta-h,0px) + 28px)}
@media (max-width:820px){
  .cta-alertes{left:0;right:0;bottom:0;transform:none;width:auto;border-radius:var(--r-md) var(--r-md) 0 0;border-bottom:0;grid-template-columns:36px minmax(0,1fr) auto;padding:12px 12px calc(env(safe-area-inset-bottom,0px) + 12px) 16px;animation-name:cta-monte-m}
  .cta-al-ico{width:36px;height:36px}
  .cta-al-ico svg{width:18px;height:18px}
  .cta-al-txt span{display:none}
  .cta-al-act{grid-column:1 / -1}
  .cta-al-act .btn-p,.cta-al-act .btn-s{flex:1 1 0;min-width:0}
}
@keyframes cta-monte-m{from{opacity:0;transform:translateY(16px)}}

/* Anneau de focus réservé au clavier (classe « clavier » posée par theme.js) : pas d'anneau après un clic,
   un toucher ou un focus donné par le script */
html:not(.clavier) :focus-visible{outline:none!important}
html:not(.clavier) :has(input:focus-visible),html:not(.clavier) :has(input:focus-visible) label{outline-color:transparent!important}
html:not(.clavier) .menu-liste:focus-visible [role="option"].actif{box-shadow:none}

/* Mon compte, alertes : l'état, le bouton du tuto, l'aide-mémoire (accès directs, sites en pastilles) */
.al-statut{display:grid;gap:12px;margin-top:16px}
.al-statut .al-etat{justify-self:start}
.al-cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.al-cta .btn-p,.al-cta .btn-s{min-height:48px}
.al-cta .aide{margin:0;flex:1 1 260px}
#aide-memoire{margin-top:20px}
.am-actions{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:8px}
.am-sites{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.am-site{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--card-border);background:var(--bg);color:var(--text);font-weight:600;font-size:14px;text-decoration:none}
@media (hover:hover){.am-site:hover{border-color:var(--accent);color:var(--accent)}}
.am-site:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.mails-barre{margin:16px 0 4px}
#bloc-mails .alertes-l{margin-top:12px}

/* Admin, bandeau : en ligne, interrupteur, état et message réunis dans un seul bloc */
.bd-carte{margin-top:16px;border-radius:var(--r-md);background:var(--chip-bg)}
.bd-carte .bd-inter{background:transparent}
.bd-carte .bandeau-etat{margin:0;padding:0 20px 16px}
.bd-carte .bandeau-etat:empty{display:none}
.bd-apercu{padding:0 20px 20px;display:grid;gap:8px}
.bd-apercu>*{margin:0}
.bd-modele{border-radius:12px;border:1px solid color-mix(in srgb,var(--ton) 45%,transparent);padding:10px 16px;justify-content:flex-start;text-align:left}
.bd-carte.en-ligne{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}

/* Menu d'ancres (ancres.js) : mêmes onglets que Mes paramètres ; l'onglet de la section à l'écran est plein */
.tab[aria-current="true"]{color:var(--on-grad);background:var(--grad-btn)}
a.tab{text-decoration:none}
@media (hover:hover){a.tab[aria-current="false"]:hover{color:var(--text);background:rgba(var(--text-rgb),.06)}}
.sous-nav.ancres{margin-block:24px 8px}
#appli>.sous-nav.ancres{margin-block:48px 0}
/* La section juste sous le menu d'ancres : le même écart au-dessus et au-dessous du menu */
#appli>.sous-nav.ancres+.sec{padding-top:48px}
@media (max-width:620px){#appli>.sous-nav.ancres{margin-block:40px 0}#appli>.sous-nav.ancres+.sec{padding-top:40px}}
.sous-nav.ancres[hidden]{display:none}
.sous-nav.ancres .tabs{justify-content:stretch;width:max-content;min-width:100%}
.sous-nav.ancres .tab{flex:1 1 auto;justify-content:center}

/* RGAA 3.1 / 3.3 : l'option active d'une liste de suggestions se voit aussi par un contour et la graisse */
.suggestions li[aria-selected="true"]{box-shadow:inset 0 0 0 2px var(--focus);font-weight:600}
/* RGAA 3.2 : textes indicatifs des champs au contraste AA dans tous les thèmes */
::placeholder{color:var(--text-3);opacity:1}
/* RGAA 10.7 : un élément qui prend le focus ne passe pas sous le bandeau flottant des alertes ni sous les boutons flottants */
html{scroll-padding-bottom:88px}
html:has(body.avec-cta-alertes:not(.vue-compte):not(.vue-recherche):not(.vue-tuto)){scroll-padding-bottom:calc(var(--cta-h,0px) + 88px)}
.stw-l{display:block;margin:0 0 4px;font-size:12px;font-weight:600;color:var(--text-2)}
.stw:has(.stw-l)::after{top:auto;bottom:22px;transform:translateY(30%) rotate(45deg)}

/* Appli sur l'écran d'accueil */
.appli-act{margin:12px 0 0}
.appli-act:has(> [hidden]:only-child){display:none}
.appli-gestes{list-style:none;margin:16px 0;padding:0;display:grid;gap:12px;counter-reset:g}
.appli-gestes li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;line-height:1.45}
.appli-g{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--chip-bg);color:var(--accent)}

/* Ruban de la préprod (brouillons Netlify) : en travers du coin haut gauche, au-dessus de tout, sans gêner les clics */
.ruban-preprod{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);left:-44px;z-index:2147483000;width:140px;padding:3px 0;transform:rotate(-45deg);background:#ffcc00;color:#111;font:800 10px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.1em;text-transform:uppercase;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.35);pointer-events:none;border-block:2px dashed rgba(0,0,0,.45)}
@media print{.ruban-preprod{display:none}}

/* Code d'appli (Mon compte, Mes clés d'accès) */
.code-appli{margin-top:24px;padding-top:20px;border-top:1px solid var(--border-soft)}
.code-appli-etapes{display:grid;gap:16px;margin:12px 0 0;padding-left:1.4em}
.code-appli-etapes img{display:block;margin-top:12px;width:180px;height:180px;padding:10px;border-radius:12px;background:#fff}
.code-appli-etapes code{font-size:14px;letter-spacing:.06em;word-break:break-all}
.garde-code{margin-top:20px;max-width:360px}
.garde-code .actions{margin-top:12px}
.code-appli-f .champ input{max-width:320px}

/* Listes de personnes (admin) : l'index A à Z et le compte dans la même boîte que les résultats */
.rep-boite{margin-top:16px;padding:12px 20px;border-radius:var(--r-lg);background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--card-shadow)}
.rep-boite>.abc-wrap{margin-top:0}
.rep-boite .cpt-compte{margin:12px 0 0;padding-bottom:12px;border-bottom:1px solid var(--border-soft)}
.rep-boite .cpt-liste,.rep-boite .rep-liste{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.rep-boite .rep-liste:empty+*,.rep-boite:has(.cpt-liste:empty) .cpt-compte,.rep-boite:has(.rep-liste:empty) .cpt-compte{border-bottom:0}

/* Frise du parcours : zones de survol par étape et infobulle */
.pc-corps{position:relative}
.pc-zones{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.pc-zone{grid-row:1;cursor:help}
@media (hover:hover){.pc-zone:hover{background:linear-gradient(rgba(var(--text-rgb),.05),rgba(var(--text-rgb),.02));border-radius:8px}}
.pc-info{position:fixed;z-index:80;max-width:280px;padding:12px 14px;border-radius:12px;background:var(--bg-alt,var(--bg));color:var(--text);border:1px solid var(--border);box-shadow:0 12px 32px -12px rgba(0,0,0,.5);font-size:13px;line-height:1.45}
.pc-info b{display:block;font-size:14px}
.pc-info-phase{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-top:2px}
.pc-info ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.pc-info li span{color:var(--text-2)}
.pc-info p{margin:6px 0 0;color:var(--text-2)}
.pc-info .pc-info-clic{color:var(--accent)}
.pc-defile{padding-block:8px}

/* ===========================================================================
   Passe d'harmonisation des CTA (14/10/2026) : un style par famille, partout
   =========================================================================== */
/* Filtres en pastilles (Écartées, Mails reçus) : même rangée que les onglets du site (piste, actif en dégradé) */
.ec-filtres{flex-wrap:nowrap;gap:4px;padding:4px;margin:0;border-radius:999px;background:rgba(var(--text-rgb),.06);border:1px solid var(--border-soft);overflow-x:auto;scrollbar-width:none;width:100%}
.ec-filtres::-webkit-scrollbar{display:none}
.ec-filtre{flex:1 1 auto;justify-content:center;white-space:nowrap;min-height:44px;padding:8px 16px;border:0;border-radius:999px;background:transparent;color:var(--text-2);font-size:14px}
.ec-filtre[aria-pressed="true"]{background:var(--grad-btn);color:var(--on-grad);border:0}
.ec-filtre[aria-pressed="true"] .ec-n{background:color-mix(in srgb,currentColor 20%,transparent)}
@media (hover:hover){.ec-filtre:where([aria-pressed="false"]):hover{color:var(--text);background:rgba(var(--text-rgb),.08)}}
@media (max-width:600px){.ec-filtres{margin:0;padding:4px}.ec-filtre{flex:1 0 auto;padding:8px 12px}}
.mails-barre .ec-filtres{margin-top:0}

/* Listes déroulantes : un seul style, celui de « Voir la fiche » (pilule grise, texte plein, survol plus soutenu) */
select.sel,.stw select,.sortw select{border:1px solid rgba(var(--text-rgb),.16);background-color:rgba(var(--text-rgb),.06);color:var(--text);font-weight:600}
.stw select,.sortw select{min-height:48px;font-size:15px;padding-left:20px}
@media (hover:hover){select.sel:where(:not(:disabled,[aria-disabled="true"])):hover,.stw select:hover,.sortw select:hover{background-color:rgba(var(--text-rgb),.12);border-color:rgba(var(--text-rgb),.16)}}
select.sel:focus-visible,.stw select:focus-visible,.sortw select:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* Coup de cœur et Écarter font l'inverse : Écarter vire au rouge, le cœur passe au dégradé */
@media (hover:hover){.aime-btn:where(:not(:disabled)):hover{color:var(--on-grad);border-color:transparent;background:var(--grad-btn)}}
.aime-btn[aria-pressed="true"]{color:var(--on-grad);border-color:transparent;background:var(--grad-btn)}
.aime-btn:active{transform:scale(.94)}

/* Fenêtre « Lancer une veille maintenant » : aussi large que le contenu de la page derrière */
dialog.boite#dlg-relance{max-width:1032px}

/* Une ville : zone et jours sur site sur la même ligne quand la place le permet */
.villes{container-type:inline-size}
.villes li:not(.ville-p):not(.ville-auto){grid-template-columns:minmax(0,1fr) minmax(180px,240px) minmax(220px,290px) 44px}
.villes li:not(.ville-p):not(.ville-auto) .sel-rayon{grid-column:2;grid-row:1}
.villes li:not(.ville-p):not(.ville-auto) .sel-presence{grid-column:3;grid-row:1}
.villes li:not(.ville-p):not(.ville-auto) [data-retire]{grid-column:4;grid-row:1}
@container (max-width:760px){
  .villes li:not(.ville-p):not(.ville-auto){grid-template-columns:minmax(0,1fr) minmax(220px,300px) 44px}
  .villes li:not(.ville-p):not(.ville-auto) [data-retire]{grid-column:3;grid-row:1}
  .villes li:not(.ville-p):not(.ville-auto) .sel-presence{grid-column:2/4;grid-row:2}
}
@container (max-width:520px){
  .villes li:not(.ville-p):not(.ville-auto){grid-template-columns:minmax(0,1fr) 44px}
  .villes li:not(.ville-p):not(.ville-auto) [data-retire]{grid-column:2;grid-row:1}
  .villes li:not(.ville-p):not(.ville-auto) .sel-rayon{grid-column:1/-1;grid-row:2}
  .villes li:not(.ville-p):not(.ville-auto) .sel-presence{grid-column:1/-1;grid-row:3}
}

/* --- Corrections de l'audit d'ergonomie (14/10) --- */
/* A1 : une carte a la même marge en bas qu'en haut (le dernier élément ne rajoute pas la sienne) */
.bloc>:last-child{margin-bottom:0}
/* A2 : le formulaire du bandeau respire sous la carte d'état */
#f-bandeau{margin-top:28px}
/* A3 : « Ton salaire » a la taille et l'écart des autres titres de carte */
.sal-tete{margin-bottom:8px}
.sal-tete>:is(h2,h3){font-size:20px;margin:0}
/* A4 : Ma veille et Thème démarrent au même endroit que les autres onglets */
.reglages>#form-recherche:not(:has(.bloc:not([hidden]))){display:none}
/* A5 et pieds de carte : 12 px entre des boutons, partout */
.cle-act,.ecc-act{gap:12px}
.ofoot,.sugg-actions{gap:12px}
.adresse-alertes{gap:12px}
/* A6, C3 : titres de carte de l'admin au même rythme que l'espace */
.bloc>h3{font-size:20px;margin:0 0 8px}
.panneau>h3,.carte>h3:not(.sr){font-size:20px}
/* A8 : libellé au-dessus d'une liste déroulante, 8 px */
.stw-l{margin-bottom:8px}
/* B2 : boutons secondaires à 48 px partout */
.ecc-act .btn-s,.at-btns .btn-s,.at-items .btn-s,.graphe-detail,.addc-btn,.cta-alertes .btn-s,.cta-alertes .btn-p{min-height:48px;padding:0 20px;font-size:15px}
.addc-btn{border-color:rgba(var(--text-rgb),.16);background:rgba(var(--text-rgb),.06)}
@media (hover:hover){.addc-btn:hover{background:rgba(var(--text-rgb),.12)}}
@media (prefers-reduced-motion:no-preference) and (hover:hover){.graphe-detail:hover,.addc-btn:hover,.btn-d:where(:not(:disabled)):hover{transform:translateY(-2px)}}
@media (pointer:coarse){.ecc-act .btn-s,.graphe-detail,.addc-btn{font-size:16px}}
/* B3 : un seul composant pour un choix unique, celui des onglets */
.bascule{gap:4px;padding:4px;background:rgba(var(--text-rgb),.06);border:1px solid var(--border-soft)}
.bascule button{min-height:44px;font-size:14px}
@media (hover:hover){.bascule button[aria-pressed="false"]:hover,.mnav-theme button[aria-pressed="false"]:hover{color:var(--text);background:rgba(var(--text-rgb),.08)}}
.mnav-theme{background:rgba(var(--text-rgb),.06);border:1px solid var(--border-soft)}
.mnav-theme button{font-size:14px}
.pastilles:not(.colonne):has(>label>input[type=radio]){flex-wrap:nowrap;gap:4px;padding:4px;border-radius:999px;background:rgba(var(--text-rgb),.06);border:1px solid var(--border-soft);width:100%;overflow-x:auto;scrollbar-width:none}
.pastilles:not(.colonne):has(>label>input[type=radio]) label{flex:1 1 auto;justify-content:center;white-space:nowrap;border:0;background:transparent;color:var(--text-2);font-size:14px;font-weight:600}
.pastilles:not(.colonne):has(>label>input[type=radio]) label:has(input:checked){background:var(--grad-btn);color:var(--on-grad);font-weight:600}
.pastilles:not(.colonne):has(>label>input[type=radio]) label:has(input:checked)::before{content:none}
@media (hover:hover){.pastilles:not(.colonne):has(>label>input[type=radio]) label:not(:has(input:checked)):hover{color:var(--text);background:rgba(var(--text-rgb),.08)}}
.ecg-per{gap:4px}
.ecg-per .tab{min-height:44px}
.ecg-per .tab[aria-pressed="true"]{background:var(--grad-btn);color:var(--on-grad)}
/* B4 : un seul survol d'onglet */
@media (hover:hover){a.tab[aria-current="false"]:hover{background:rgba(var(--text-rgb),.08)}}
/* B5 : boutons ronds dans le contenu à 48 px, comme les boutons voisins */
.cpt-relance,.cta-alertes .nav-btn,#cta-al-non{width:48px;height:48px}
/* B6 : liens-boutons d'un seul style */
.at-btns .lien-btn{min-height:44px;font-size:15px}
.at-plus-d>summary{text-decoration:underline;text-underline-offset:.2em;font-size:15px}
@media (hover:hover){.lien-btn:hover,.at-plus-d>summary:hover{color:var(--text)}}
/* B8 : listes déroulantes à la même hauteur et la même marge pour la flèche */
.stw select{padding-right:48px}
#fil-taille.sel{min-height:48px;padding-right:48px}
/* C1 : cibles d'au moins 44 px sur écran tactile */
@media (pointer:coarse){
  .cpt-abc .abc,.abc-fl .abc{min-height:44px;min-width:44px}
  .pied-anim{min-height:44px}
  .lien-btn.nom{min-height:44px}
  .sugg-ctx>summary{min-height:44px;display:inline-flex;align-items:center}
}
/* C2 : champs du suivi comme tous les autres (48 px, 16 px : pas de zoom sur iPhone) */
input[id^="sd-"],input[id^="rdd-"],input[id^="rdh-"],input[id^="rdl-"]{min-height:48px;font-size:16px}
/* C4 : onglets de Mes paramètres sur téléphone, un fondu signale qu'il y en a d'autres */
@media (max-width:620px){.rech-tabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}.rech-tabs:has(.tab:last-child[aria-selected="true"]){-webkit-mask-image:none;mask-image:none}}
/* C5 : cartes du suivi à la même marge intérieure que les offres */
@media (max-width:600px){#track>li{padding:20px;border-radius:var(--r-lg)}}

/* Retouches après vérification (14/10, soir) */
/* R3 : segmentés sur téléphone, pilules bien rondes comme les onglets ; s'il manque de place, la rangée défile */
@media (max-width:640px){
  /* Une rangée tant que ça tient (piste toute ronde), sinon deux colonnes : chaque option reste une pilule ronde */
  .pastilles:not(.colonne):has(>label>input[type=radio]),.bd-type .pastilles:has(>label>input[type=radio]){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(132px,100%),1fr));border-radius:27px}
  .pastilles:not(.colonne):has(>label>input[type=radio]) label{width:auto;min-width:0;padding:0 12px;min-height:44px;border-radius:999px;overflow:hidden;text-overflow:ellipsis}
}
/* R4 : filtres d'Écartées sur téléphone, un fondu signale qu'il y en a d'autres */
@media (max-width:600px){.ec-barre .ec-filtres{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}.ec-barre .ec-filtres:has(.ec-filtre:last-child[aria-pressed="true"]){-webkit-mask-image:none;mask-image:none}}
/* C2 : champs du suivi (la règle du suivi était plus précise) */
.trow input[type=date],.trow input[type=time],.trow input[type=text],.addc input{min-height:48px;font-size:16px}
/* A1 : le dernier élément visible d'une carte n'ajoute pas de marge sous lui */
.bloc>:nth-last-child(1 of :not([hidden],:empty,script,template)){margin-bottom:0!important}
/* B8 : listes « par page » de l'admin */
select.sel[id$="-taille"]{min-height:48px;padding-right:48px}
/* C3, A6 : titres de carte de l'admin */
.ecg-tete h3{font-size:20px}

/* La barre de lecture suit l'en-tête : en-tête effacé, barre effacée (sinon elle barre le menu d'onglets collé) */
html.nav-cachee .prog{opacity:0}
@media (max-width:359px){.brand{font-size:18px}.brand .ic{width:28px;height:28px}}

/* « Voir à la place de » (admin) : barre de lecture seule, et ce qui ne sert à rien dans cette vue est rangé */

/* CV depuis LinkedIn : bloc d'import du profil, au-dessus du guide de l'export PDF */
.li-import > p:first-child { margin-top: 0; }
.li-import .aide { margin-top: 12px; }
/* Deux façons d'ajouter son CV tant que l'import LinkedIn n'est pas ouvert : deux colonnes, pas une case vide */
.facons:has(> .facon[hidden]){grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.facons:has(> .facon[hidden]){grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------------------------------------
   Hero de l'espace « L'aube » (choisi par Alex le 15/10) : une ligne d'horizon pleine largeur se lève derrière
   les chiffres ; la veille est écrite sous l'horizon. Le texte reste lisible sans l'animation (coupée si l'on réduit
   les mouvements), et les chiffres sont des liens.
   --------------------------------------------------------------------------- */
:root{--au-rim:var(--g4);--au-h1:color-mix(in srgb,var(--g6) 30%,transparent);--au-h2:color-mix(in srgb,var(--g8) 22%,transparent);--au-sol:color-mix(in srgb,var(--g5) 6%,var(--bg))}
@media (prefers-color-scheme:dark){:root:not([data-pt="light"]){--au-rim:var(--g9);--au-h1:color-mix(in srgb,var(--g7) 42%,transparent);--au-h2:color-mix(in srgb,var(--g4) 34%,transparent);--au-sol:color-mix(in srgb,var(--g3) 9%,var(--bg))}}
:root[data-pt="dark"]{--au-rim:var(--g9);--au-h1:color-mix(in srgb,var(--g7) 42%,transparent);--au-h2:color-mix(in srgb,var(--g4) 34%,transparent);--au-sol:color-mix(in srgb,var(--g3) 9%,var(--bg))}
.hero.au{position:relative;overflow:hidden;isolation:isolate;padding-block:64px 0;text-align:center}
.au-date{margin:0 0 20px;font-size:15px;font-weight:600;color:var(--text-3)}
.au h1{font-size:clamp(38px,6vw,76px);letter-spacing:-.045em;line-height:1;text-wrap:balance;max-width:16ch;margin-inline:auto}
/* Critères en une ligne de texte, séparés par des points médians */
.au .au-crit{display:block;max-width:640px;margin:24px auto 0;padding:0;list-style:none;color:var(--text-2);font-size:16px;line-height:1.6}
.au .au-crit li{display:inline;padding:0;border:0;background:none;font:inherit;color:inherit}
.au .au-crit li:first-child{color:var(--text);font-weight:600}
.au .au-crit li+li::before{content:" · ";color:var(--text-3)}
.au .au-crit .crit-mod a{font-weight:600}
.au-cta{margin:32px 0 0}
.au-ch{display:flex;justify-content:center;align-items:flex-end;list-style:none;margin:72px 0 0;padding:0 0 36px}
.au-ch li{padding:0 40px}
.au-ch li+li{border-left:1px solid var(--border)}
.au-ch a{display:block;color:var(--text);text-decoration:none;border-radius:12px}
.au-ch a:focus-visible{outline:3px solid var(--focus);outline-offset:6px}
.au-ch b{display:block;font-family:var(--font-display);font-size:56px;font-weight:700;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.au-ch span{display:block;margin-top:10px;color:var(--text);font-size:15px;font-weight:500}
.au-ch .fort b{font-size:96px;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
.au-ch .fort span{font-weight:600}
@media (hover:hover){.au-ch a:hover span{text-decoration:underline;text-underline-offset:.2em}}
/* Le sol : un très grand disque dont on ne voit que le bord ; la lueur monte derrière les chiffres */
.au-sol{position:relative;padding:48px 24px}
.au-sol::before{content:"";position:absolute;z-index:-1;top:0;left:50%;width:max(2600px,220vw);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:linear-gradient(var(--au-sol),var(--bg) 260px);box-shadow:0 0 0 1.5px var(--au-rim),0 -3px 22px -2px var(--au-rim)}
.au-sol::after{content:"";position:absolute;z-index:-2;top:-440px;left:50%;width:min(2400px,190vw);height:760px;transform:translateX(-50%);background:radial-gradient(40% 46% at 50% 58%,var(--au-h1),transparent 72%),radial-gradient(62% 62% at 50% 58%,var(--au-h2),transparent 78%);pointer-events:none}
.au-sol .lede{max-width:680px;margin:0 auto;color:var(--text);font-size:15px;line-height:1.6}
.au-suite{text-align:left}
@media (prefers-reduced-motion:no-preference){
  .au-sol::before{animation:au-sol 1.8s cubic-bezier(.2,.7,.2,1) both}
  .au-sol::after{animation:au-lueur 2.4s cubic-bezier(.2,.7,.2,1) both}
  @keyframes au-sol{from{transform:translateX(-50%) translateY(40px)}}
  @keyframes au-lueur{from{opacity:0;transform:translateX(-50%) translateY(80px)}}
}
@media (max-width:720px){
  .hero.au{padding-block:36px 0}
  .au h1{font-size:clamp(34px,10vw,44px)}
  .au .au-crit{font-size:15px}
  .au-ch{flex-wrap:wrap;gap:24px 0;margin-top:48px;padding-bottom:28px}
  .au-ch li{flex:0 0 33.33%;padding:0 8px}
  .au-ch li.fort{flex-basis:100%}
  .au-ch li+li{border-left:0}
  .au-ch li:nth-child(n+3){border-left:1px solid var(--border)}
  .au-ch b{font-size:40px}
  .au-ch .fort b{font-size:88px}
  .au-ch span{font-size:14px}
  .au-sol{padding:32px 16px 48px}
  .au-sol::before{width:2000px}
}
.au .au-crit .crit-mod a{display:inline;min-height:0;margin:0;padding:0}