/* Flair : 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) format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url(/assets/polices/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url(/assets/polices/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:700;font-display:swap;src:url(/assets/polices/inter-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:500;font-display:swap;src:url(/assets/polices/space-grotesk-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:600;font-display:swap;src:url(/assets/polices/space-grotesk-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:700;font-display:swap;src:url(/assets/polices/space-grotesk-latin-700-normal.woff2) 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));
  --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;
  --ctl:#858aa0;
  --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;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-pt="light"]){
    --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);
    --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"]{
  --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);
  --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) + 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}
.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)}
.page{position:relative;z-index:1;flex:1 0 auto}

/* En-tête gélule au scroll : la classe d'état nav-pill est posée sur <html> */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--nav-glass);-webkit-backdrop-filter:saturate(180%) blur(28px);backdrop-filter:saturate(180%) blur(28px);border-bottom:1px solid var(--border-soft);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:1080px;margin:0 auto;padding:0 24px;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:20px;letter-spacing:-.01em;color:var(--text);text-decoration:none;white-space:nowrap;padding:8px 0}
.brand i{width:28px;height:28px;border-radius:50%;background:var(--grad-plein);display:grid;place-items:center;flex:none}
.brand i svg{display:block}
.nav-links{display:flex;gap:4px;list-style:none;margin:0 0 0 auto;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}
.nav-links a:hover{color:var(--text)}
.nav-links a[aria-current="true"]{color:var(--text)}
.nav-links a[aria-current="true"]::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}
.nav-btn: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:env(safe-area-inset-top,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}
html.nav-pill .nav-in{width:calc(100% - 48px);max-width:1032px;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;margin-left:auto}
.mnav{position:fixed;inset:0;z-index:50;background:var(--bg);padding:calc(env(safe-area-inset-top,0px) + 16px) 24px calc(env(safe-area-inset-bottom,0px) + 24px);display:none;flex-direction:column;overflow-y:auto}
html.mnav-open .mnav{display:flex}
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 ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.mnav ul a,.mnav ul button{display:block;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(22px,6vw,32px);color:var(--text);text-decoration:none;cursor:pointer}
.mnav ul a[aria-current="true"]{background:var(--chip-bg)}

/* 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;max-width:640px}
.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 */
section{scroll-margin-top:96px}
.sec{padding-top:var(--sec)}
.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);max-width:720px}

/* Boutons */
.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}
.btn-p: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:44px;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}
.btn-s: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:44px;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}
.btn-d: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=number],input[type=search],input[type=url],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}
input:hover,select.sel:hover,textarea.zone: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{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}
.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}
.puces-ed li{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 4px 0 16px;border-radius:999px;background:var(--chip-bg);font-size:15px;font-weight:500}
.puces-ed button{width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text-2);display:grid;place-items:center;cursor:pointer}
.puces-ed button: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) 184px 44px;gap:8px;align-items:center;padding:8px 8px 8px 16px;border-radius:var(--r-md);background:var(--chip-bg)}
.villes li b{font-weight:600}
.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}
.suggestions li[aria-selected="true"],.suggestions li:hover{background:rgba(var(--c1-rgb),.14)}
.combo{position:relative}

/* Interrupteur */
.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 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]::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)}

/* É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;padding:48px 24px;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:96px}
.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)}
.offer h3 a: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}
.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{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}
.dl a:hover,.dl button:hover{background:rgba(var(--text-rgb),.14)}
.dl .main{color:var(--on-grad);border-color:transparent;background:var(--grad-btn)}
.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}
.copy: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}
.offer:hover{border-color:rgba(var(--text-rgb),.22)}
.offer.open{cursor:auto}
.offer.open: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)}
.fold-btn: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}
.ecart-btn: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) + 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}
.fline .sortw{margin-left:auto}
.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:40px;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}
.tab: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 .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 span{display:block;color:var(--text-3)}
.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;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>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>.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-bg);color:var(--bad)}
.etat.pause{background:var(--warn-bg);color:var(--warn)}

footer.pied{margin-top:var(--sec);padding-block:24px 40px;border-top:1px solid var(--border-soft);color:var(--text-3);font-size:14px}
footer.pied .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
footer.pied a{color:var(--text-2)}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);transform:translate(-50%,12px);max-width:calc(100% - 32px);margin:0;padding:12px 20px;border-radius:999px;background:var(--text);color:var(--bg);font-size:15px;font-weight:600;z-index:45;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.toast.on{opacity:1;transform:translate(-50%,0)}
.undo{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);transform:translateX(-50%);z-index:46;display:flex;align-items:center;gap:16px;max-width:calc(100% - 32px);padding:8px 8px 8px 20px;border-radius:999px;background:var(--text);color:var(--bg);font-size:15px;font-weight:600;box-shadow:0 16px 32px -12px rgba(0,0,0,.5)}
.undo button{min-height:40px;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}
  html.nav-pill .nav-in{width:calc(100% - 32px)}
  .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:space-between;min-width:0}
  .offer h3{font-size:20px}
  .offer.open .ofoot{top:calc(env(safe-area-inset-top,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}
  .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}
  .etapes li{font-size:12px}
  .etapes li span{display:none}
  .etapes li[aria-current="step"] span{display:inline}
}
@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):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):hover .disc{transform:scale(1.06) rotate(-4deg)}
  .stats li:hover,.trois li:hover{transform:translateY(-2px);border-color:rgba(var(--c1-rgb),.4)}
  .btn-p:hover,.btn-s:hover,.fold-btn:hover,.ecart-btn:hover,.dl a:hover,.dl button:hover,.copy:hover,.nav-cta: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:hover{transform:rotate(-8deg) scale(1.05)}
  .tab:not([aria-selected="true"]):hover{background:rgba(var(--text-rgb),.08)}
  .trow: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
   --------------------------------------------------------------------------- */
.wrap.large{max-width:1320px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,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}
.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(auto-fit,minmax(260px,1fr));gap:16px;margin-top:24px}
.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:2px;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:4px 4px 0 0;background:var(--accent)}
.barres span.zero{height:2px;background:var(--border-soft);border-radius:0}
.barres span:hover{filter:brightness(1.15)}
.barres span: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}
.barres span:first-child:hover::after{left:0;transform:none}
.barres span:last-child: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(auto-fit,minmax(220px,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:var(--warn-bg)}
.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}
.lien-btn.nom{min-height:32px;padding:0;font-size:15px;color:var(--text);text-decoration-color:var(--accent)}
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:repeat(auto-fit,minmax(300px,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)}
.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}
.souci-btn:hover,.haut-btn: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 */
body.avec-flottants .pied,body.avec-souci .pied{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 88px)}
@media (max-width:600px){
  .souci-btn{width:48px;padding:0}
  .souci-btn span{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 button{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: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 a{display:block;width:160px;height:110px;border-radius:12px;overflow:hidden;border:1px solid var(--card-border)}
.sugg-caps a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.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}
.stats li: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:24px;padding:4px 8px;color:var(--accent);font-weight:600;text-underline-offset:3px}
.tabs{min-width:0}
@media (max-width:600px){
  .tabs{min-width:100%}
  .fline .sortw{margin-left:0;width:100%}
  .fline .sortw select{width:100%}
}
.offer h3 .ext-ico{display:inline-block;margin-left:6px;vertical-align:baseline;color:var(--text-3)}