/* Plateforme adhérents — kit Les Centristes v2.9 (DESIGN.md, SYSTEM-DESIGN.md).
   Rond = on agit (boutons en pilule), vif = on lit (cartes et champs à angle vif, 2 px). Pas d'ombre, pas de dégradé. */

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/PretendardVariable.woff2') format('woff2-variations');
    font-weight: 45 920;
    font-display: swap;
}

:root {
    --navy: #32508C;
    --bleu-profond: #243A6B;
    --encre: #243A6B;
    --ardoise: #4A5A78;
    --bleu-vif: #4A6EB4;
    --bleu-vif-appuye: #3D5FA3;
    --periwinkle: #8DA5D3;
    --bleu-doux: #E4EAF6;
    --rouge: #E01E3C;
    --rouge-profond: #C0112E;
    --creme: #F3EFE4;
    --creme-profond: #EFE9D8;
    --gris-page: #F6F7F9;
    --blanc: #FFFFFF;
    --vert: #1FA87A;
    --angle: 2px;
    --pilule: 999px;
    --police: 'Pretendard', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

html { font-size: 16px; }

body {
    margin: 0;
    font-family: var(--police);
    color: var(--encre);
    background: var(--gris-page);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--bleu-vif); }
a:hover { color: var(--bleu-vif-appuye); }

:focus-visible { outline: 3px solid var(--bleu-vif); outline-offset: 2px; }

.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 16px; top: 16px; z-index: 10; background: var(--blanc); padding: 8px 16px; }

/* En-tête navy, logo blanc */
.entete { background: var(--navy); color: var(--blanc); }
.entete__interieur {
    max-width: 1200px; margin: 0 auto; padding: 12px 16px;
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.entete__logo img { height: 36px; display: block; }
.entete__titre { font-weight: 700; font-size: 15px; letter-spacing: .01em; opacity: .9; }
.entete__nav { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; align-items: center; }
.entete__nav a {
    color: var(--blanc); text-decoration: none; padding: 8px 16px; border-radius: var(--pilule);
    font-weight: 600; font-size: 15px; min-height: 40px; display: inline-flex; align-items: center;
}
.entete__nav a:hover, .entete__nav a[aria-current="page"] { background: var(--bleu-profond); color: var(--blanc); }
.entete__compte { font-size: 14px; opacity: .85; }

.pastille {
    display: inline-block; min-width: 22px; padding: 0 7px; margin-left: 6px; border-radius: var(--pilule);
    background: var(--rouge); color: var(--blanc); font-size: 13px; font-weight: 700; text-align: center; line-height: 22px;
}

main { max-width: 1200px; margin: 0 auto; padding: 32px 16px 64px; }

h1 { font-size: 32px; line-height: 1.15; font-weight: 800; margin: 0 0 8px; color: var(--encre); }
h2 { font-size: 22px; font-weight: 750; margin: 32px 0 12px; color: var(--encre); }
.chapo { color: var(--ardoise); font-size: 17px; margin: 0 0 24px; max-width: 70ch; }

/* Cartes : angle vif, fond blanc, pas d'ombre */
.carte { background: var(--blanc); border-radius: var(--angle); padding: 24px; border: 1px solid var(--bleu-doux); }
.grille { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.chiffre { font-size: 36px; font-weight: 800; line-height: 1; color: var(--navy); }
.chiffre__libelle { color: var(--ardoise); font-size: 14px; margin-top: 8px; }

/* Boutons : pilules. Un seul bouton fort par bloc. */
.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 24px; border-radius: var(--pilule); border: 2px solid var(--bleu-vif);
    background: var(--bleu-vif); color: var(--blanc); font: inherit; font-weight: 700; font-size: 16px;
    text-decoration: none; cursor: pointer;
}
.bouton:hover { background: var(--bleu-vif-appuye); border-color: var(--bleu-vif-appuye); color: var(--blanc); }
.bouton--contour { background: transparent; color: var(--navy); border-color: var(--navy); }
.bouton--contour:hover { background: var(--bleu-doux); color: var(--navy); border-color: var(--navy); }
.bouton--large { width: 100%; }

/* Champs : angle vif, fond bleu doux, 16 px (pas de zoom sur iPhone) */
.champ { margin-bottom: 16px; }
.champ label { display: block; font-weight: 650; margin-bottom: 6px; }
.champ input, .champ select, .champ textarea {
    width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--encre);
    background: var(--bleu-doux); border: 2px solid transparent; border-radius: var(--angle);
}
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--bleu-vif); outline: none; background: var(--blanc); }
.champ__aide { color: var(--ardoise); font-size: 14px; margin-top: 4px; }
.code-2fa { font-size: 28px !important; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }

/* Alertes : le rouge est réservé aux alertes */
.alerte { border-radius: var(--angle); padding: 12px 16px; margin-bottom: 16px; font-weight: 600; }
.alerte--erreur { background: #FCE8EB; color: var(--rouge-profond); border-left: 4px solid var(--rouge); }
.alerte--succes { background: #E3F4EE; color: #12684B; border-left: 4px solid var(--vert); }
.alerte--info { background: var(--bleu-doux); color: var(--encre); border-left: 4px solid var(--bleu-vif); }

/* Page de connexion : bloc centré sur fond navy */
.page-connexion { background: var(--navy); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.page-connexion .carte { width: 100%; max-width: 420px; padding: 32px; border: 0; }
.page-connexion__logo { display: block; height: 56px; margin: 0 auto 24px; }
.page-connexion h1 { font-size: 24px; text-align: center; }
.page-connexion .chapo { text-align: center; font-size: 15px; }

.qr { display: flex; justify-content: center; padding: 16px; background: var(--blanc); border: 1px solid var(--bleu-doux); border-radius: var(--angle); margin: 16px 0; }
.secret { font-family: ui-monospace, Consolas, monospace; font-size: 15px; background: var(--creme); padding: 8px 12px; border-radius: var(--angle); word-break: break-all; }

/* Tableaux */
.tableau { width: 100%; border-collapse: collapse; background: var(--blanc); font-size: 15px; }
.tableau th { text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ardoise); padding: 10px 12px; border-bottom: 2px solid var(--bleu-doux); }
.tableau td { padding: 10px 12px; border-bottom: 1px solid var(--bleu-doux); vertical-align: top; }
.tableau .nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau .sans-coupure, .repartition-cellule { white-space: nowrap; }
.repartition-cellule { font-size: 14px; font-variant-numeric: tabular-nums; }
.defilement { overflow-x: auto; }

.etiquette { display: inline-block; padding: 2px 10px; border-radius: var(--angle); font-size: 13px; font-weight: 700; background: var(--bleu-doux); color: var(--encre); }
.etiquette--ok { background: #E3F4EE; color: #12684B; }
.etiquette--alerte { background: #FCE8EB; color: var(--rouge-profond); }

/* Utilitaires */
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muet { color: var(--ardoise); }
.mini { font-size: 13px; }
.preformate { white-space: pre-line; }
.lien-fort { font-weight: 700; color: var(--encre); text-decoration: none; }
.lien-fort:hover { color: var(--bleu-vif); text-decoration: underline; }
.compte { display: inline-block; min-width: 28px; padding: 0 8px; border-radius: var(--pilule); background: var(--bleu-doux); font-size: 14px; text-align: center; vertical-align: middle; }
code { font-family: ui-monospace, Consolas, monospace; font-size: 14px; }
.fil { margin: 0 0 12px; font-size: 15px; }
.fil a { text-decoration: none; font-weight: 600; }
h3.sous-titre { font-size: 17px; font-weight: 750; margin: 24px 0 10px; }

.titre-page { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.titre-page h1 { margin: 0; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; }

.bouton--petit { min-height: 36px; padding: 0 16px; font-size: 14px; }
.bouton--alerte { background: var(--rouge); border-color: var(--rouge); }
.bouton--alerte:hover { background: var(--rouge-profond); border-color: var(--rouge-profond); }
.lien-bouton { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 14px; color: var(--bleu-vif); text-decoration: underline; cursor: pointer; }
.lien-bouton:hover { color: var(--rouge-profond); }

/* Recherche */
.recherche { display: flex; gap: 12px; margin-bottom: 24px; max-width: 760px; }
.recherche input {
    flex: 1; min-height: 48px; padding: 10px 14px; font: inherit; font-size: 16px; color: var(--encre);
    background: var(--blanc); border: 2px solid var(--bleu-doux); border-radius: var(--angle);
}
.recherche input:focus { border-color: var(--bleu-vif); outline: none; }

/* Fiche */
.fiche-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.fiche-entete h1 { margin-bottom: 4px; }
.fiche-entete__numeros { margin: 0 0 8px; color: var(--ardoise); font-variant-numeric: tabular-nums; }
.fiche-entete__statut { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.blocs { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-bottom: 16px; }
.blocs .carte h2, #mandats h2 { margin-top: 0; }
#mandats { margin-bottom: 16px; }
.def { display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: 8px 16px; margin: 0; }
.def dt { color: var(--ardoise); font-size: 14px; padding-top: 1px; }
.def dd { margin: 0; overflow-wrap: anywhere; }
.liste-simple { list-style: none; margin: 0 0 16px; padding: 0; }
.liste-simple li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--bleu-doux); }
.liste-puces { margin: 0 0 12px; padding-left: 20px; }
.ligne-formulaire { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.ligne-formulaire .champ { margin-bottom: 0; flex: 1 1 220px; }
.tableau tr.annule td { color: var(--ardoise); }
.tableau tr.annule code, .tableau tr.annule .nombre strong, .tableau tr.annule .repartition-cellule { text-decoration: line-through; }
.annulation summary { cursor: pointer; color: var(--bleu-vif); font-size: 14px; }
.annulation form { display: grid; gap: 6px; margin-top: 8px; min-width: 200px; }
.annulation input { min-height: 36px; padding: 6px 8px; font: inherit; font-size: 15px; background: var(--bleu-doux); border: 2px solid transparent; border-radius: var(--angle); }
.journal { list-style: none; margin: 0; padding: 0; }
.journal > li { padding: 10px 0; border-bottom: 1px solid var(--bleu-doux); }
.journal__entete { font-size: 15px; }
.journal__changements { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
.journal__changements .avant { color: var(--ardoise); text-decoration: line-through; }
.journal details summary { cursor: pointer; font-size: 14px; color: var(--bleu-vif); margin-top: 4px; }

/* Formulaires */
.etape { margin-bottom: 16px; }
.etape h2 { margin-top: 0; }
.champs { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.champs--3 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.champ--large { grid-column: span 2; }
.obligatoire { color: var(--rouge); }
.champ--erreur input, .champ--erreur select { border-color: var(--rouge); background: #FCE8EB; }
.champ__erreur { color: var(--rouge-profond); font-size: 14px; font-weight: 600; margin-top: 4px; }
.champ__erreur--bloc { margin: 0 0 8px; }
.repartition { border: 2px solid var(--bleu-doux); border-radius: var(--angle); padding: 12px 16px 4px; margin: 8px 0 0; }
.repartition legend { font-weight: 700; padding: 0 6px; }
.repartition--erreur { border-color: var(--rouge); }
.repartition__etat { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; min-height: 36px; margin-bottom: 8px; }
.repartition__reste { margin: 0; font-weight: 650; }
.repartition__reste--ok { color: #12684B; }
.repartition__reste--ecart { color: var(--rouge-profond); }

/* Fiches ressemblantes */
.candidats__liste { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.candidats__vide { margin: 0; }
.candidat {
    display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; cursor: pointer;
    background: var(--blanc); border: 2px solid var(--bleu-doux); border-radius: var(--angle);
}
.candidat:hover { border-color: var(--periwinkle); }
.candidat:has(input:checked) { border-color: var(--bleu-vif); background: var(--bleu-doux); }
.candidat input[type="radio"] { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--bleu-vif); flex: none; }
.candidat__corps { display: grid; gap: 2px; flex: 1; min-width: 0; }
.candidat__nom { font-weight: 750; }
.candidat__infos { color: var(--ardoise); font-size: 14px; overflow-wrap: anywhere; }
.candidat--nouvelle { border-style: dashed; }
.score { flex: none; display: grid; justify-items: center; min-width: 84px; padding: 4px 8px; border-radius: var(--angle); background: var(--bleu-doux); color: var(--encre); }
.score__valeur { font-size: 22px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.score__libelle { font-size: 12px; font-weight: 650; }
.score--tres-probable { background: var(--navy); color: var(--blanc); }
.score--possible { background: var(--bleu-vif); color: var(--blanc); }
.nouvelle-fiche { margin-top: 8px; }
[hidden] { display: none !important; }

.candidat__action { margin-top: 8px; }
.avertissement { color: var(--rouge-profond); font-weight: 650; }
.autres-choix { margin-top: 16px; }
.autres-choix form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ignorer { margin-top: 16px; }
.ignorer summary { cursor: pointer; color: var(--ardoise); font-size: 14px; }
.ignorer form { display: grid; gap: 8px; justify-items: start; margin-top: 8px; }
.ignorer p { margin: 0; }

/* Onglets */
.onglets { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.onglets a {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: var(--pilule);
    color: var(--navy); font-weight: 650; text-decoration: none; border: 2px solid var(--bleu-doux);
}
.onglets a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: var(--blanc); }
.onglets a[aria-current="page"] .compte { background: var(--bleu-profond); }

.carte--lien { display: block; text-decoration: none; color: inherit; }
.carte--lien:hover { border-color: var(--bleu-vif); color: inherit; }

/* Comparaison avant fusion */
.comparaison th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ardoise); white-space: nowrap; width: 1%; }
.comparaison td { width: 45%; }
.comparaison__identique td { color: var(--ardoise); }
.comparaison__conserver td, .comparaison__conserver th { background: var(--bleu-doux); }
.comparaison__info td { font-size: 14px; }
.choix { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; overflow-wrap: break-word; min-width: 0; }
.choix input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--bleu-vif); flex: none; }

/* Grille des tarifs */
.tableau--grille th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--encre); white-space: nowrap; }
.tableau--grille td { padding: 6px; }
.colonne-courante { background: var(--bleu-doux); }
.montant {
    width: 90px; min-height: 40px; padding: 6px 8px; font: inherit; font-size: 16px; text-align: right; font-variant-numeric: tabular-nums;
    background: var(--blanc); border: 2px solid var(--bleu-doux); border-radius: var(--angle);
}
.montant:focus { border-color: var(--bleu-vif); outline: none; }
.montant--erreur { border-color: var(--rouge); }

@media (max-width: 640px) {
    h1 { font-size: 26px; }
    /* menu sur une ligne qui défile, plutôt que quatre lignes */
    .entete__nav { margin-left: 0; width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .entete__nav a { white-space: nowrap; }
    .entete__compte { white-space: nowrap; }
    .carte { padding: 16px; }
    .recherche { flex-direction: column; }
    .champ--large { grid-column: auto; }
    .def { grid-template-columns: 1fr; gap: 2px; }
    .def dd { margin-bottom: 8px; }
    .candidat { flex-wrap: wrap; }
    /* comparaison : le libellé au-dessus, les deux valeurs côte à côte */
    .comparaison, .comparaison thead, .comparaison tbody { display: block; }
    .comparaison tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--bleu-doux); }
    .comparaison th, .comparaison td { border-bottom: 0; width: auto; min-width: 0; }
    .comparaison thead th:first-child { display: none; }
    .comparaison th[scope="row"] { grid-column: 1 / -1; padding-bottom: 0; }
    .comparaison td[colspan] { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}