/*
 * public/css/winlabo.css
 *
 * La charte du nouveau winlabo.fr, reprise de celle des pages de secteur de winqual.com
 * (landing/secteur.css, 11 Ko), pour que les deux sites aient le même visage.
 *
 * ⚠️ Reproduite à la main, pas copiée : winqual.com repose sur le thème acheté « Amava »
 *    (257 Ko), dont la licence ne couvre pas forcément un second site. Ce fichier n'en
 *    contient rien. La charte se résume à une police, cinq couleurs, un dégradé, des
 *    coins arrondis et des cartes : c'est tout ce qu'il faut.
 *
 * ⚠️ Poppins est servie EN LOCAL (/lib/css/poppins.css). winqual.com la charge depuis
 *    Google Fonts, ce qui est une dépendance en direct — à signaler à André.
 *
 * Palette : bleu #292dc2 · bleu clair #0084e9 · nuit #1f194c · gris #596982 · fond #f8f9fc
 */

:root {
    --bleu:       #292dc2;
    --bleu-clair: #0084e9;
    --nuit:       #1f194c;
    --gris:       #596982;
    --gris-clair: #8b90a8;
    --texte:      #575a7b;
    --fond:       #f8f9fc;
    --bord:       #e8eaf0;
    --degrade:    linear-gradient(-45deg, #292dc2, #0084e9);
    --orange:     #e8731a;   /* la seule couleur ajoutée : elle distingue la porte « export » */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Poppins', Helvetica, Arial, sans-serif;
    background: #fff;
    color: var(--texte);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }

.conteneur { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ── En-tête collant ─────────────────────────────────────────────────────────────── */
.w-entete {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--bord);
    padding: 14px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.w-entete-gauche { display: flex; align-items: center; gap: 22px; }
.w-entete-logo   { height: 60px; width: auto; margin: -10px 0; } /* le SVG a de larges marges : 60 px en rendent ~40 utiles */
.w-entete-nav    { display: flex; gap: 22px; font-size: .88rem; color: var(--gris); }
.w-entete-nav a:hover, .w-entete-nav a[aria-current] { color: var(--bleu); }
.w-entete-ombrelle {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .78rem; color: var(--gris-clair);
}
.w-entete-ombrelle img { height: 44px; margin: -8px 0; } /* le PNG a de larges marges lui aussi */
.w-cta {
    display: inline-block; padding: 10px 24px;
    background: var(--degrade); color: #fff;
    font-size: .85rem; font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
    border-radius: 30px; border: 0; cursor: pointer; transition: all .25s ease;
}
.w-cta:hover { box-shadow: 0 8px 20px rgba(41,45,194,.3); transform: translateY(-1px); }

/* ── Héros ───────────────────────────────────────────────────────────────────────── */
.w-heros {
    background: var(--degrade); color: #fff;
    padding: 64px 24px 88px; position: relative; overflow: hidden;
}
.w-heros::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60px;
    background: linear-gradient(to bottom right, transparent 49.5%, #fff 50%);
}
.w-heros .conteneur { position: relative; z-index: 1; text-align: center; }
.w-heros h1 { font-size: 2.4rem; font-weight: 700; line-height: 1.2; margin: 0 auto 18px; max-width: 760px; }
.w-heros h1 em { font-style: normal; color: #cfe3ff; }
.w-heros-sous { font-size: 1.1rem; line-height: 1.7; max-width: 680px; margin: 0 auto 40px; opacity: .92; }

/* ── Les deux portes ─────────────────────────────────────────────────────────────── */
.w-portes {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
    max-width: 900px; margin: 0 auto; text-align: left;
}
.w-porte {
    background: #fff; color: var(--texte);
    border-radius: 16px; padding: 30px 28px;
    box-shadow: 0 10px 30px rgba(0,0,0,.14);
    display: flex; flex-direction: column; gap: 10px;
    transition: transform .25s ease, box-shadow .25s ease;
}
.w-porte:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.18); }
.w-porte-etiquette {
    font-size: .74rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    color: var(--bleu);
}
.w-porte--export .w-porte-etiquette { color: var(--orange); }
.w-porte h2 { font-size: 1.25rem; font-weight: 700; color: var(--nuit); line-height: 1.3; }
.w-porte p  { font-size: .9rem; color: var(--gris); flex: 1; }
.w-porte-lien {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .85rem; font-weight: 600; color: var(--bleu); margin-top: 6px;
}
.w-porte--export .w-porte-lien { color: var(--orange); }
.w-porte-lien::after { content: '→'; transition: transform .2s; }
.w-porte:hover .w-porte-lien::after { transform: translateX(4px); }

/* ── Sections ────────────────────────────────────────────────────────────────────── */
.w-section { padding: 72px 24px; }
.w-section--fond { background: var(--fond); }
.w-titre {
    font-size: 1.6rem; font-weight: 700; color: var(--nuit);
    text-align: center; margin-bottom: 12px;
}
.w-chapeau { text-align: center; max-width: 680px; margin: 0 auto 40px; color: var(--gris); font-size: 1rem; }

.w-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.w-carte {
    background: #fff; border-radius: 16px; padding: 32px 28px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04); transition: all .25s ease;
}
.w-carte:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.w-carte-icone { font-size: 2rem; display: block; margin-bottom: 16px; }
.w-carte h3 { font-size: 1.05rem; font-weight: 600; color: var(--nuit); margin-bottom: 8px; }
.w-carte p  { font-size: .88rem; color: var(--gris); }

.w-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 40px; }
.w-badge {
    display: inline-block; padding: 9px 20px;
    background: #fff; color: var(--bleu); border: 2px solid var(--bleu);
    border-radius: 30px; font-size: .82rem; font-weight: 600;
}
.w-centre { text-align: center; }
.w-bouton-plein {
    display: inline-block; padding: 14px 32px;
    background: var(--degrade); color: #fff;
    font-size: .9rem; font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
    border-radius: 30px; transition: all .25s ease;
}
.w-bouton-plein:hover { box-shadow: 0 8px 24px rgba(41,45,194,.3); transform: translateY(-2px); }
.w-bouton-contour {
    display: inline-block; padding: 14px 32px;
    background: #fff; color: var(--bleu); border: 2px solid var(--bleu);
    font-size: .9rem; font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
    border-radius: 30px; transition: all .25s ease;
}
.w-bouton-contour:hover { background: var(--bleu); color: #fff; }

/* ── Section export : la même grammaire, une accroche différente ─────────────────── */
.w-export .w-titre { color: var(--nuit); }
/* ⚠️ MÊME DÉFAUT SUR LA PASTILLE JUMELLE DE L'ACCUEIL, trouvé en mesurant l'autre : l'orange de
   charte sur un fond orange à 10 % donnait **2,74:1**. Le fond reste, seule l'encre fonce — même
   couleur que la pastille du bandeau, pour que les deux se ressemblent. 5,6:1. */
.w-export-bandeau {
    display: inline-block; padding: 6px 14px; margin-bottom: 14px;
    background: rgba(232,115,26,.1); color: #9a4a05;
    border-radius: 30px; font-size: .78rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
.w-modules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 36px 0; }
.w-module {
    background: #fff; border: 1px solid var(--bord); border-radius: 12px; padding: 20px 18px;
}
.w-module h3 { font-size: .95rem; font-weight: 600; color: var(--nuit); margin-bottom: 6px; }
.w-module p  { font-size: .82rem; color: var(--gris); }
.w-export .w-bouton-plein { background: linear-gradient(-45deg, #e8731a, #f0a24a); }
.w-export .w-bouton-plein:hover { box-shadow: 0 8px 24px rgba(232,115,26,.3); }

/* ── Chiffres ────────────────────────────────────────────────────────────────────── */
.w-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; margin-top: 36px; }
.w-chiffre-nombre {
    font-size: 2.2rem; font-weight: 700; line-height: 1.2;
    background: var(--degrade); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.w-chiffre-libelle { font-size: .85rem; color: var(--gris-clair); margin-top: 4px; }

/* ── Pied de page ────────────────────────────────────────────────────────────────── */
.w-pied {
    background: var(--nuit); color: rgba(255,255,255,.65);
    padding: 44px 24px 32px; text-align: center; font-size: .85rem;
}
.w-pied-logo { height: 40px; margin-bottom: 14px; filter: brightness(0) invert(1); opacity: .85; }
.w-pied-marque { font-size: .8rem; opacity: .6; margin-bottom: 14px; }
.w-pied-contact span { margin: 0 12px; }
.w-pied-liens { margin: 16px 0; }
.w-pied-liens a { color: rgba(255,255,255,.5); margin: 0 10px; font-size: .8rem; }
.w-pied-liens a:hover { color: #fff; }
.w-pied-copie { font-size: .75rem; opacity: .4; }

/* ── Bandeau « maquette », à retirer quand ce sera la vraie page ─────────────────── */
.w-maquette {
    /* en bas à gauche : en haut à droite il recouvrait le bouton « Demander une présentation » */
    position: fixed; left: -44px; bottom: 28px; z-index: 200;
    transform: rotate(45deg);
    background: var(--orange); color: #fff;
    font-size: .72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    padding: 6px 60px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* ── Pages intérieures (ajouté le 29/09/2026 pour la refonte complète) ─────────── */

/* Héros réduit : un titre et un chapeau, pas de portes */
.w-heros--page { padding: 48px 24px 72px; }
.w-heros--page h1 { font-size: 2rem; }
.w-heros--page .w-heros-sous { margin-bottom: 0; }
/* Bandeau réduit des écrans de travail (espace client) : il annonce la page sans manger
   la hauteur utile. Le biseau du bas est supprimé, il coûtait 60 px de plus. */
.w-heros--compact { padding: 26px 24px 30px; }
.w-heros--compact::after { display: none; }
.w-heros--compact h1 { font-size: 1.5rem; margin-bottom: 6px; }
.w-heros--compact .w-heros-sous { font-size: .95rem; }
.w-heros--export { background: linear-gradient(-45deg, #e8731a, #f0a24a); }
.w-heros--export h1 em { color: #fff3e6; }
/* ⚠️⚠️ PASTILLE ILLISIBLE SUR LE DÉGRADÉ ORANGE — corrigé le 30/09/2026 (signalée par André).
   Du blanc à 18 % d'opacité sur le dégradé ne fait pas un fond : il éclaircit à peine l'orange,
   et le texte blanc par-dessus tombait à **2,15:1** — mesuré sur les PIXELS RENDUS, le seuil étant
   de 4,5:1 pour ce corps (12,5 px gras). Fond blanc opaque et texte orange foncé : 6,3:1.
   ⓘ Mesurer par le CSS seul ne voyait rien : le fond de la bannière est un `background-image`
     (dégradé), que la remontée des `background-color` ignore — elle annonçait « blanc sur blanc ». */
.w-heros-bandeau {
    display: inline-block; padding: 6px 14px; margin-bottom: 18px;
    background: #fff; color: #9a4a05;
    border-radius: 30px; font-size: .78rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}

/* Grille de secteurs : des liens-cartes vers winqual.com */
.w-secteurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.w-secteur {
    display: block; padding: 20px 22px;
    background: #fff; border: 1px solid var(--bord); border-radius: 12px;
    color: var(--nuit); transition: all .25s ease;
}
.w-secteur:hover { border-color: var(--bleu); box-shadow: 0 8px 20px rgba(41,45,194,.12); transform: translateY(-2px); }
.w-secteur strong { display: block; font-size: .98rem; font-weight: 600; }
.w-secteur span { display: block; font-size: .8rem; color: var(--gris-clair); margin-top: 4px; }
.w-secteur em { display: block; font-style: normal; font-size: .78rem; color: var(--bleu); margin-top: 8px; }

/* Deux colonnes texte + liste (section stock, section « comment ça se passe ») */
.w-deux-colonnes { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; margin-top: 36px; }
.w-deux-colonnes h3 { font-size: 1.15rem; font-weight: 600; color: var(--nuit); margin-bottom: 12px; }
.w-deux-colonnes p { margin-bottom: 14px; font-size: .95rem; }
.w-liste-coche { list-style: none; }
.w-liste-coche li { position: relative; padding: 8px 0 8px 30px; font-size: .92rem; border-bottom: 1px solid var(--bord); }
.w-liste-coche li::before {
    content: '✓'; position: absolute; left: 0; top: 7px;
    width: 20px; height: 20px; border-radius: 50%; text-align: center; line-height: 20px;
    background: var(--degrade); color: #fff; font-size: .7rem; font-weight: 700;
}
.w-export .w-liste-coche li::before { background: linear-gradient(-45deg, #e8731a, #f0a24a); }

/* Étapes numérotées */
.w-etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; counter-reset: etape; }
.w-etape { counter-increment: etape; padding: 24px 22px; background: #fff; border-radius: 12px; border: 1px solid var(--bord); }
.w-etape::before {
    content: counter(etape); display: inline-block; width: 32px; height: 32px; line-height: 32px; text-align: center;
    border-radius: 50%; background: var(--degrade); color: #fff; font-weight: 700; margin-bottom: 12px;
}
.w-export .w-etape::before { background: linear-gradient(-45deg, #e8731a, #f0a24a); }
.w-etape h3 { font-size: .98rem; font-weight: 600; color: var(--nuit); margin-bottom: 6px; }
.w-etape p { font-size: .85rem; color: var(--gris); }

/* Prose : mentions légales, RGPD, confidentialité, offres d'emploi */
.w-prose { max-width: 780px; margin: 0 auto; font-size: .95rem; }
.w-prose h2 { font-size: 1.3rem; font-weight: 600; color: var(--nuit); margin: 36px 0 12px; }
.w-prose h3 { font-size: 1.05rem; font-weight: 600; color: var(--nuit); margin: 24px 0 8px; }
.w-prose p { margin-bottom: 14px; }
.w-prose ul { margin: 0 0 14px 22px; }
.w-prose li { margin-bottom: 6px; }
.w-prose a { color: var(--bleu); text-decoration: underline; }
.w-prose dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin-bottom: 14px; }
.w-prose dt { font-weight: 600; color: var(--nuit); }
.w-prose .w-encadre { background: var(--fond); border-left: 4px solid var(--bleu); padding: 14px 18px; border-radius: 0 8px 8px 0; margin: 18px 0; }

/* Formulaires */
.w-formulaire-cadre { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
.w-formulaire { display: grid; gap: 14px; }
.w-formulaire label { display: block; font-size: .82rem; font-weight: 600; color: var(--nuit); margin-bottom: 4px; }
/* ⚠️ Tous les champs SAUF ceux qui ont leur propre apparence. Cette règle énumérait les
   types un à un (text, email, tel) et avait oublié `password` : le champ du mot de passe
   de l'espace client s'affichait en 181×19 px, en Arial, sans coins arrondis, à côté d'un
   champ de 574×50 en Poppins. Une liste de types est une promesse qu'on oublie de tenir ;
   une exclusion, non. */
.w-formulaire input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
.w-formulaire select, .w-formulaire textarea {
    width: 100%; padding: 12px 14px; font: inherit; font-size: .95rem; color: var(--texte);
    background: #fff; border: 1px solid var(--bord); border-radius: 10px; transition: border-color .2s, box-shadow .2s;
}
.w-formulaire input:focus, .w-formulaire select:focus, .w-formulaire textarea:focus {
    outline: 0; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(41,45,194,.12);
}
.w-formulaire textarea { min-height: 150px; resize: vertical; }
.w-formulaire input[type=file] { font-size: .88rem; }

/* Champ de mot de passe avec l'œil qui le montre. Le bouton est POSÉ SUR le champ, à droite,
   et le champ réserve la place à droite pour qu'un mot de passe long ne passe pas dessous. */
.w-champ-mdp { position: relative; }
.w-champ-mdp input { padding-right: 48px; }
.w-oeil {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0;
    color: var(--gris-clair); background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.w-oeil:hover { color: var(--bleu); background: var(--fond); }
.w-oeil:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.w-formulaire small { display: block; font-size: .78rem; color: var(--gris-clair); margin-top: 4px; }
.w-formulaire .w-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.w-formulaire .w-consentement { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: var(--gris); font-weight: 400; }
.w-formulaire .w-consentement input { margin-top: 3px; }
.w-formulaire .w-consentement a { color: var(--bleu); text-decoration: underline; }
.w-formulaire .w-invisible { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Le défi anti-robots : une question écrite, pas une image. Encadré discret, pour qu'on voie
   qu'il ne s'agit pas d'un renseignement demandé au visiteur mais d'une vérification. */
.w-defi { background: var(--fond); border: 1px solid var(--bord); border-radius: 12px; padding: 14px 18px; }
.w-defi label { font-weight: 500; color: var(--nuit); }
.w-defi strong { color: var(--bleu); }
.w-defi input[type=text] { width: 120px; margin-top: 4px; }
.w-avis { padding: 14px 18px; border-radius: 10px; margin-bottom: 24px; font-size: .92rem; font-weight: 500; }
.w-avis--succes { background: #e8f7ee; color: #1b6b3a; border: 1px solid #b9e6c9; }
.w-avis--echec  { background: #fdecec; color: #9b1c1c; border: 1px solid #f5c2c2; }
.w-coordonnees { background: var(--fond); border-radius: 16px; padding: 28px; font-size: .92rem; }
.w-coordonnees h3 { font-size: 1.05rem; font-weight: 600; color: var(--nuit); margin-bottom: 14px; }
.w-coordonnees p { margin-bottom: 10px; }
.w-coordonnees a { color: var(--bleu); }

/* Espace client (factures) et son administration */
.w-ec-barre { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.w-ec-onglet { cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600; }
.w-ec-onglet span { font-weight: 400; color: var(--gris-clair); }
.w-ec-onglet--actif { background: var(--bleu); color: #fff; }
.w-ec-onglet--actif span { color: rgba(255,255,255,.7); }
.w-ec-recherche input {
    width: min(320px, 100%); padding: 10px 14px; font: inherit; font-size: .9rem;
    border: 1px solid var(--bord); border-radius: 30px; background: #fff;
}
.w-ec-recherche input:focus { outline: 0; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(41,45,194,.12); }
.w-ec-annee + .w-ec-annee { margin-top: 36px; }
.w-ec-titre-annee { font-size: 1.2rem; font-weight: 600; color: var(--nuit); margin-bottom: 10px; }
.w-ec-table { width: 100%; border-collapse: collapse; font-size: .9rem; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.04); }
.w-ec-table th { text-align: left; font-size: .76rem; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--gris-clair); padding: 12px 14px; background: var(--fond); }
.w-ec-table td { padding: 11px 14px; border-top: 1px solid var(--bord); vertical-align: middle; }
.w-ec-table td a { color: var(--bleu); }
.w-ec-bouton {
    display: inline-block; padding: 6px 14px; font: inherit; font-size: .78rem; font-weight: 600;
    color: var(--bleu); background: #fff; border: 1.5px solid var(--bleu); border-radius: 20px; cursor: pointer; white-space: nowrap;
}
.w-ec-bouton:hover { background: var(--bleu); color: #fff; }
.w-ec-bouton--discret { color: var(--gris); border-color: var(--bord); }
.w-ec-bouton--discret:hover { background: var(--gris); border-color: var(--gris); color: #fff; }
.w-ec-actions { white-space: nowrap; }
.w-ec-actions form { display: inline; margin-left: 6px; }
.w-ec-etiquette { display: inline-block; padding: 2px 8px; font-size: .7rem; font-weight: 600; border-radius: 10px; background: #fff3e6; color: var(--orange); vertical-align: middle; }
.w-ec-etiquette--rouge { background: #fdecec; color: #9b1c1c; }
.w-invisible { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 860px) {
    .w-ec-table thead { display: none; }
    .w-ec-table tr { display: block; border-top: 1px solid var(--bord); padding: 8px 0; }
    .w-ec-table td { display: block; border: 0; padding: 4px 14px; }
}

/* Espace client : liste à gauche, aperçu à droite, clavier
 *
 * C'est un écran de travail, pas une page éditoriale : il prend TOUTE la largeur du
 * navigateur (André, 30/09/2026), là où les pages de contenu restent à 1080 px pour
 * la lisibilité du texte. Seules les marges latérales de .conteneur sont conservées. */
.conteneur--large { max-width: none; padding-left: 32px; padding-right: 32px; }
[x-cloak] { display: none !important; }
.w-ec-barre-droite { display: flex; align-items: center; gap: 10px; }
.w-ec-raccourcis {
    width: 38px; height: 38px; flex: none; font-size: 1rem; line-height: 1; cursor: pointer;
    color: var(--gris); background: #fff; border: 1px solid var(--bord); border-radius: 50%;
}
.w-ec-raccourcis:hover, .w-ec-raccourcis[aria-expanded="true"] { color: var(--bleu); border-color: var(--bleu); }
.w-ec-aide { margin: -10px 0 18px; color: var(--gris); font-size: .82rem; }
.w-ec-aide strong { color: var(--nuit); }

/* La barre d'action de la sélection : posée en bas de l'écran, seulement quand on a coché */
.w-ec-selection {
    position: sticky; bottom: 18px; z-index: 50;
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
    margin-top: 20px; padding: 14px 22px;
    background: var(--nuit); color: #fff; border-radius: 40px;
    box-shadow: 0 12px 30px rgba(31,25,76,.35);
}
.w-ec-selection-compte { font-size: .9rem; font-weight: 600; margin-right: auto; }
.w-ec-selection .w-ec-zip { padding: 10px 24px; font-size: .8rem; }
.w-ec-selection-annuler {
    font: inherit; font-size: .82rem; color: rgba(255,255,255,.7);
    background: none; border: 0; text-decoration: underline; cursor: pointer;
}
.w-ec-selection-annuler:hover { color: #fff; }
.w-ec-cadre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
/* Liste et aperçu occupent la même hauteur, celle qui reste sous l'en-tête : en gagnant de
   la largeur, la page de la facture s'affiche plus grande et doit avoir la place en hauteur.
   76 px de vide en fin de liste : la barre de sélection, posée par-dessus, ne masque jamais
   la dernière ligne quand on est allé au bout du défilement. */
.w-ec-liste { max-height: calc(100vh - 354px); min-height: 360px; overflow: auto; border-radius: 12px; padding-bottom: 76px; }
/* La largeur gagnée va à la colonne « Document » : les trois autres restent à la taille de
   leur contenu, sinon les dates et les tailles se retrouvent perdues au milieu du vide. */
.w-ec-table th:nth-child(3), .w-ec-table td:nth-child(3),
.w-ec-table th:nth-child(4), .w-ec-table td:nth-child(4),
.w-ec-table th:nth-child(5), .w-ec-table td:nth-child(5) { width: 1px; white-space: nowrap; }
.w-ec-case { width: 36px; text-align: center; }
.w-ec-case input { width: 16px; height: 16px; cursor: pointer; }
.w-ec-table tbody tr { cursor: pointer; }
.w-ec-table tbody tr:hover { background: var(--fond); }
.w-ec-ligne--cochee td { background: #eef3ff; }
.w-ec-ligne--courante td { background: #dfe6ff; }
.w-ec-ligne--courante td:first-child { box-shadow: inset 3px 0 0 var(--bleu); }  /* la barre bleue, une seule fois */
.w-ec-annee-mini { display: inline-block; margin-left: 8px; padding: 1px 7px; font-size: .7rem; color: var(--gris-clair); background: var(--fond); border-radius: 8px; }
/* Le bouton de la ligne : seulement là où va le regard (survol, ligne courante) */
.w-ec-action-ligne { text-align: right; }
.w-ec-action-ligne .w-ec-bouton { opacity: 0; transition: opacity .15s; }
.w-ec-table tbody tr:hover .w-ec-bouton,
.w-ec-ligne--courante .w-ec-bouton,
.w-ec-action-ligne .w-ec-bouton:focus-visible { opacity: 1; }
@media (hover: none) { .w-ec-action-ligne .w-ec-bouton { opacity: 1; } }
.w-ec-apercu { position: sticky; top: 90px; }
.w-ec-apercu-cadre { background: #fff; border: 1px solid var(--bord); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.04); }
.w-ec-apercu-titre { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--fond); font-size: .9rem; color: var(--nuit); }
.w-ec-apercu iframe { display: block; width: 100%; height: calc(100vh - 409px); min-height: 305px; border: 0; background: #525659; }
.w-ec-apercu-vide { padding: 40px; text-align: center; color: var(--gris-clair); border: 1px dashed var(--bord); border-radius: 12px; }
@media (max-width: 1100px) {
    .w-ec-cadre { grid-template-columns: 1fr; }
    .w-ec-apercu { position: static; }
    .w-ec-apercu iframe { height: 60vh; }
    .w-ec-aide { display: none; }
}

/* Menu mobile */
.w-burger { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.w-burger span { display: block; width: 24px; height: 2px; background: var(--nuit); margin: 5px 0; border-radius: 2px; }

/* ── Écrans étroits ──────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .w-portes, .w-cartes, .w-chiffres, .w-secteurs, .w-deux-colonnes, .w-formulaire-cadre { grid-template-columns: 1fr; }
    .w-modules, .w-etapes { grid-template-columns: 1fr 1fr; }
    .w-heros h1 { font-size: 1.8rem; }
    .w-entete { flex-wrap: wrap; }
    .w-entete-gauche { flex: 1; }
    .w-entete-nav { display: none; }
    .w-entete-nav--ouvert {
        display: flex; flex-direction: column; gap: 4px;
        position: absolute; left: 0; right: 0; top: 100%;
        background: #fff; border-bottom: 1px solid var(--bord); padding: 12px 24px 18px;
        box-shadow: 0 12px 24px rgba(0,0,0,.08); font-size: 1rem;
    }
    .w-entete-nav--ouvert a { padding: 10px 0; border-bottom: 1px solid var(--bord); }
    .w-cta { display: none; }
    .w-burger { display: block; }
    .w-prose dl { grid-template-columns: 1fr; gap: 2px 0; }
    .w-prose dt { margin-top: 8px; }
}
@media (max-width: 480px) {
    .w-modules, .w-etapes, .w-formulaire .w-ligne { grid-template-columns: 1fr; }
    .w-heros { padding: 40px 16px 72px; }
    .w-heros h1 { font-size: 1.45rem; }
    .w-entete-ombrelle span { display: none; }
    .w-pied-contact span { display: block; margin: 4px 0; }
}