/*
 * Portail Kalisme Pro : la feuille de style du portail client (D-342, 28-09-2026).
 *
 * Elle aligne le portail sur la charte de kalisme.com/pro : Spectral pour les titres,
 * fond sauge, surfaces ivoire, vert forêt, or. Chargée par portal/layout.blade.php avec
 * l'empreinte du fichier dans l'URL (?v=filemtime) : sans elle, un navigateur garde
 * l'ancienne copie et ne voit jamais un correctif (incident du 2026-09-05).
 *
 * ⚠️ Spectral est SERVIE PAR NOUS, jamais par Google Fonts : la CSP n'autorise aucune
 * police tierce (default-src 'self'), et une police distante apprend à un tiers l'adresse
 * de chaque personne qui ouvre le portail. Licence : /fonts/OFL-Spectral.txt.
 *
 * ⚠️ L'OR N'EST JAMAIS DU TEXTE SUR FOND CLAIR : --gold rend 6,71:1 sur le vert et
 * 2,29:1 sur l'ivoire. Sur fond clair, un texte « or » prend --or-encre (5,3:1).
 */

@font-face {
    font-family: "Spectral";
    src: url("../fonts/spectral-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Spectral";
    src: url("../fonts/spectral-medium.woff2") format("woff2");
    font-weight: 500 600;
    font-style: normal;
    font-display: swap;
}

:root {
    --foret-profond: #0E2A1E;
    --foret: #1B4533;
    --or: #C9A84C;
    --or-profond: #A8852F;
    --or-encre: #7A5F17;
    --encre: #1A3327;
    --encre-douce: #3D5647;
    --ivoire: #F5F0E6;
    --sauge: #E4EBE2;
    --sauge-profonde: #D9E3D8;
    --trait: rgba(26, 51, 39, .13);
    --trait-fort: rgba(26, 51, 39, .24);
    --danger: #8A2B2B;
    --ombre: 0 1px 2px rgba(14, 42, 30, .05), 0 10px 30px rgba(14, 42, 30, .06);
    --serif: "Spectral", Georgia, "Times New Roman", serif;

    /* Les noms d'avant, encore lus par des styles en ligne des vues et par les
       fragments partagés avec la console (acces/_*.blade.php). */
    --green: var(--foret-profond);
    --green-soft: var(--foret);
    --gold: var(--or);
    --ink: var(--encre);
    --muted: var(--encre-douce);
    --surface: var(--ivoire);
    --bg: var(--sauge);
    --line: var(--trait);
}

* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--sauge);
    color: var(--encre);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 500; color: var(--foret-profond); line-height: 1.2; }
h1 { font-size: 36px; margin: 0; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
a { color: var(--foret); text-underline-offset: 3px; }
a:hover { color: var(--foret-profond); }
.muted { color: var(--encre-douce); }
.small { font-size: 13.5px; }
.visuellement-masque {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.surtitre {
    font-size: 12px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase;
    color: var(--or-encre); margin: 0;
}

/* ------ La barre du haut -------------------------------------------------- */
header.topbar {
    background: var(--foret-profond);
    color: var(--ivoire);
    height: 64px;
    padding: 0 32px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    position: relative; z-index: 30;
}
.marque {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--serif); font-size: 22px; color: var(--ivoire); text-decoration: none;
    white-space: nowrap;
}
.marque:hover { color: var(--ivoire); }
.marque img { width: 26px; height: 28px; flex: none; }
.marque sup {
    font-family: var(--serif); font-size: 11px; font-weight: 600; color: var(--or);
    letter-spacing: .5px; margin-left: 2px;
}
nav.onglets { display: flex; align-self: stretch; }
nav.onglets a {
    display: inline-flex; align-items: center; padding: 0 16px;
    color: #C8D6CE; text-decoration: none; font-size: 15px;
    border-bottom: 2px solid transparent; border-top: 2px solid transparent;
}
nav.onglets a:hover { color: #FFFFFF; }
nav.onglets a.active { color: #FFFFFF; font-weight: 600; border-bottom-color: var(--or); }
.barre-droite { display: flex; align-items: center; gap: 10px; }

/* Les menus déroulants (langue, compte, actions d'un siège) sont des <details> :
   natifs, sans script, donc compatibles avec la CSP script-src 'self'. */
details.menu { position: relative; }
details.menu > summary { list-style: none; cursor: pointer; }
details.menu > summary::-webkit-details-marker { display: none; }
.menu-bouton {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 12px; border-radius: 999px;
    border: 1px solid rgba(245, 240, 230, .22); color: #E4EBE2;
    font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.menu-bouton:hover { border-color: rgba(245, 240, 230, .45); }
.menu-bouton .nom { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.menu-bouton .pastille {
    width: 28px; height: 28px; border-radius: 999px; background: var(--or); color: var(--foret-profond);
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
    margin-left: -8px;
}
.menu-panneau {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
    min-width: 230px; background: #FFFFFF; color: var(--encre);
    border: 1px solid var(--trait); border-radius: 14px; box-shadow: 0 16px 40px rgba(14, 42, 30, .16);
    padding: 6px; display: flex; flex-direction: column;
}
.menu-panneau .entete { padding: 10px 12px 8px; border-bottom: 1px solid var(--trait); margin-bottom: 4px; }
.menu-panneau .entete b { display: block; font-family: var(--serif); font-weight: 500; font-size: 16px; color: var(--foret-profond); }
.menu-panneau .entete span { font-size: 13px; color: var(--encre-douce); word-break: break-all; }
.menu-panneau a, .menu-panneau button {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px;
    border: 0; border-radius: 10px; background: none; color: var(--encre);
    font: inherit; font-size: 14.5px; text-decoration: none; text-align: left; cursor: pointer; width: 100%;
}
.menu-panneau a:hover, .menu-panneau button:hover { background: var(--sauge); }
.menu-panneau a.active { font-weight: 600; }
.menu-panneau a.active::after { content: "✓"; margin-left: auto; color: var(--foret); }
.menu-panneau .danger { color: var(--danger); font-weight: 600; }
.menu-panneau form { margin: 0; }

/* ------ La barre du bas (téléphone) ---------------------------------------- */
nav.bas { display: none; }

/* ------ La page ------------------------------------------------------------ */
.wrap { max-width: 1120px; margin: 0 auto; padding: 36px 32px 72px; }
.page-tete {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    margin-bottom: 24px;
}
.page-tete p { margin: 6px 0 0; color: var(--encre-douce); font-size: 16px; }
.page-tete .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.fil { font-size: 14px; margin: 0 0 14px; color: var(--encre-douce); }
.fil a { font-weight: 600; }

.card {
    background: var(--ivoire);
    border: 1px solid var(--trait);
    border-radius: 18px;
    padding: 26px 30px;
    margin-bottom: 22px;
    box-shadow: var(--ombre);
}
.card h2 { margin: 0 0 12px; }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.grille-2 > .card { margin-bottom: 0; }
.pile { display: flex; flex-direction: column; gap: 22px; margin-bottom: 22px; }

.flash {
    border-radius: 14px; padding: 13px 18px; margin-bottom: 20px; font-size: 14.5px;
    background: #E2EDE4; border: 1px solid #C6DACB; color: var(--foret-profond);
}
.flash.warn { background: #F5ECD6; border-color: #E6D3A8; color: #6B5417; }

/* Le sceau : ce que le portail ne montre jamais. Un encadré de confiance, pas un
   avertissement : l'icône du bouclier, sans liseré latéral. */
.isolation, .sceau {
    position: relative;
    background: #EDF2EC; border: 1px solid #D3E0D6; border-radius: 14px;
    padding: 14px 18px 14px 50px; margin-bottom: 22px; font-size: 14.5px; color: #33443B;
}
.isolation::before, .sceau::before {
    content: ""; position: absolute; left: 18px; top: 15px; width: 20px; height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B4533' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
}
.isolation b, .sceau b { color: var(--foret-profond); }

/* ------ Boutons et champs -------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; border: 0; border-radius: 999px; padding: 0 20px;
    font: inherit; font-size: 14.5px; font-weight: 600; text-decoration: none; cursor: pointer;
    background: #E9E4D6; color: var(--encre);
}
.btn svg { flex: none; }
.btn.primary { background: var(--foret); color: #FFFFFF; }
.btn.primary:hover { background: var(--foret-profond); color: #FFFFFF; }
.btn.gold { background: var(--or); color: #1F1A08; }
.btn.gold:hover { background: #D4B55E; }
.btn.ghost { background: transparent; border: 1px solid var(--trait-fort); color: var(--encre); }
.btn.ghost:hover { border-color: var(--encre-douce); }
.btn.danger { background: transparent; border: 1px solid #D9BCBC; color: var(--danger); }
.btn.danger:hover { background: #F6E9E7; }
.btn.link { background: none; color: var(--danger); padding: 4px 8px; min-height: 0; display: inline; }
.btn.small { padding: 0 16px; font-size: 13.5px; }
.btn.plein { width: 100%; }
.btn.grand { min-height: 50px; font-size: 15.5px; padding: 0 24px; }

input[type=text], input[type=password], input[type=tel], input[type=search], input[type=email],
input[type=number], input[type=url], textarea, select {
    width: 100%; min-height: 48px; padding: 11px 14px;
    border: 1px solid var(--trait-fort); border-radius: 12px;
    font-family: inherit; font-size: 16px; background: #FFFFFF; color: var(--encre);
}
input:focus-visible, textarea:focus-visible, select:focus-visible, .btn:focus-visible, summary:focus-visible, a:focus-visible {
    outline: 2px solid var(--or-profond); outline-offset: 2px;
}
textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
label { display: block; font-size: 13.5px; font-weight: 600; color: var(--encre-douce); margin: 14px 0 6px; }
/* La vraie cible d'une case à cocher est son étiquette : 44 px (mesuré le 2026-09-08). */
label:has(> input[type=checkbox]), label:has(> input[type=radio]) {
    display: flex; align-items: flex-start; gap: 9px; min-height: 44px; padding: 7px 0; margin: 0;
    font-size: 15px; font-weight: 400; color: var(--encre); cursor: pointer;
}
label:has(> input[type=checkbox]) input, label:has(> input[type=radio]) input {
    margin: 4px 0 0; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--foret);
}
input[type=range] { width: 100%; height: 44px; padding: 0; accent-color: var(--foret); }

.code {
    font-family: ui-monospace, "SF Mono", Menlo, monospace; background: #FFFFFF;
    border: 1px solid var(--trait); padding: 3px 8px; border-radius: 8px; font-size: 13.5px; word-break: break-all;
}

/* Les pastilles d'état */
.pill {
    display: inline-block; padding: 3px 11px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.pill.active { background: #DDEBE1; color: #1C5C38; }
.pill.invited { background: #F1E8CF; color: #6B5417; }
.pill.revoked { background: #F2E1DF; color: var(--danger); }
.pill.neutre { background: transparent; border: 1px solid var(--trait-fort); color: var(--encre-douce); font-weight: 500; }

/* ------ Tableaux ----------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--trait); font-size: 14.5px; vertical-align: top; }
th { color: var(--encre-douce); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.row-actions { white-space: nowrap; text-align: right; }

dialog {
    border: 1px solid var(--trait); border-radius: 18px; padding: 28px; max-width: 480px;
    background: var(--ivoire); color: var(--encre); box-shadow: 0 24px 60px rgba(14, 42, 30, .25);
}
dialog h3 { font-size: 21px; margin-top: 0; }
dialog::backdrop { background: rgba(14, 42, 30, .42); }
dialog form { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* ------ L'accueil ------------------------------------------------------------ */
.heros {
    position: relative; overflow: hidden;
    background: var(--foret-profond); color: var(--ivoire);
    border-radius: 22px; padding: 44px 48px; margin-bottom: 22px;
    display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.heros .filigrane {
    position: absolute; right: -70px; top: -60px; width: 420px; height: 420px; opacity: .06; pointer-events: none;
}
.heros .texte { position: relative; max-width: 640px; display: flex; flex-direction: column; gap: 14px; }
.heros .surtitre { color: var(--or); }
.heros h1 { color: var(--ivoire); font-size: 40px; line-height: 1.14; }
.heros p { margin: 0; color: #C8D6CE; font-size: 16.5px; line-height: 1.6; }
.anneau-bloc { position: relative; display: flex; align-items: center; gap: 28px; flex: none; }
.anneau { position: relative; width: 170px; height: 170px; flex: none; }
.anneau svg { display: block; }
.anneau .centre {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.anneau .centre b { font-family: var(--serif); font-weight: 400; font-size: 48px; line-height: 1; color: var(--ivoire); font-variant-numeric: lining-nums; }
.anneau .centre span { font-size: 13px; color: #C8D6CE; margin-top: 4px; }
.legende { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: #E4EBE2; }
.legende li { display: flex; align-items: center; gap: 10px; }
.legende i { width: 10px; height: 10px; border-radius: 999px; flex: none; }

.prochain { display: flex; align-items: center; gap: 24px; }
.prochain .icone {
    width: 54px; height: 54px; flex: none; border-radius: 999px; background: #F1E8CF; color: var(--or-encre);
    display: flex; align-items: center; justify-content: center;
}
.prochain .corps { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.prochain h2 { margin: 0; font-size: 25px; }
.prochain p { margin: 0; color: var(--encre-douce); }

/* Le chemin du pilote : une frise sur grand écran, une liste verticale sur téléphone. */
.chemin-bloc { position: relative; }
.chemin { position: relative; list-style: none; margin: 0; padding: 48px 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.chemin::before {
    content: ""; position: absolute; top: 65px; height: 2px; background: var(--trait-fort);
    left: calc(100% / (2 * var(--n))); right: calc(100% / (2 * var(--n)));
}
.chemin-bloc .progres { position: absolute; top: 65px; height: 2px; background: var(--or-profond); left: calc(100% / (2 * var(--n))); }
.chemin-bloc .aujourdhui {
    position: absolute; top: 0; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.chemin-bloc .aujourdhui span {
    padding: 3px 10px; border-radius: 999px; background: var(--foret-profond); color: var(--ivoire);
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
.chemin-bloc .aujourdhui i { width: 2px; height: 22px; background: var(--foret-profond); }
.chemin li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 0 6px; }
.chemin .point {
    width: 34px; height: 34px; border-radius: 999px; background: var(--ivoire);
    border: 2px solid var(--trait-fort); display: flex; align-items: center; justify-content: center; flex: none;
}
.chemin .fait .point { background: var(--foret); border-color: var(--foret); color: var(--ivoire); }
.chemin .a_faire .point { border-color: var(--or-profond); }
.chemin .a_faire .point::after { content: ""; width: 12px; height: 12px; border-radius: 999px; background: var(--or-profond); }
.chemin .repere .point { width: 18px; height: 18px; margin: 8px 0; border-color: var(--or-profond); }
.chemin .quand { font-size: 12px; font-weight: 600; letter-spacing: .4px; color: var(--encre-douce); }
.chemin .a_faire .quand { color: var(--or-encre); }
.chemin .quoi { font-size: 14px; line-height: 1.35; color: var(--encre); }
.chemin .a_faire .quoi { font-weight: 600; }
.chemin .repere .quoi { color: var(--encre-douce); }
.chemin a.aller { font-size: 13px; font-weight: 600; }

.carte-sceau { display: flex; gap: 20px; }
.carte-sceau .icone {
    width: 50px; height: 50px; flex: none; border-radius: 999px; border: 1.5px solid var(--or-profond); color: var(--foret);
    display: flex; align-items: center; justify-content: center;
}
.carte-sceau h2 { margin: 4px 0 8px; }
.carte-sceau p { margin: 0 0 10px; color: var(--encre-douce); }

.champ-lien {
    display: flex; align-items: center; gap: 10px; background: #FFFFFF; border: 1px solid var(--trait-fort);
    border-radius: 12px; padding: 6px 6px 6px 14px; min-height: 54px;
}
.champ-lien .code { flex: 1; border: 0; padding: 0; background: none; }
.ligne-boutons { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 6px; }
.tuile { background: #FFFFFF; border: 1px solid var(--trait); border-radius: 14px; padding: 16px 18px; }
.tuile b { display: block; font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.1; color: var(--foret-profond); font-variant-numeric: lining-nums; }
.tuile span { font-size: 12.5px; color: var(--encre-douce); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }

/* Le premier jour : trois gestes, sans compte à rebours. */
.gestes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gestes a {
    display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 22px;
    background: #FFFFFF; border: 1px solid var(--trait); border-radius: 16px; text-decoration: none; color: var(--encre);
}
.gestes a:hover { border-color: var(--or-profond); }
.gestes .numero {
    width: 38px; height: 38px; border-radius: 999px; border: 1.5px solid var(--or-profond); color: var(--or-encre);
    font-family: var(--serif); font-size: 19px; display: flex; align-items: center; justify-content: center;
}
.gestes b { font-size: 16.5px; color: var(--foret-profond); }
.gestes span { font-size: 14px; color: var(--encre-douce); }

/* ------ Les sièges ----------------------------------------------------------- */
.jauge { display: flex; gap: 3px; height: 10px; border-radius: 999px; overflow: hidden; margin: 4px 0 26px; }
.jauge span { display: block; height: 100%; }
.jauge .occ { background: var(--foret); }
.jauge .inv { background: #D2B866; }
.jauge .free { background: #D5D2C2; flex: 1; }
.comptes { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14.5px; color: var(--encre-douce); }
.comptes span { display: inline-flex; align-items: center; gap: 8px; }
.comptes i { width: 10px; height: 10px; border-radius: 999px; }
.comptes b { color: var(--encre); }

.sieges-grille { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.sieges-grille > .card { margin-bottom: 0; }
.bloc-liste { padding: 0; overflow: visible; }
.filtres { display: flex; gap: 6px; flex-wrap: wrap; padding: 18px 22px; }
.filtres input { position: absolute; opacity: 0; pointer-events: none; }
.filtres label {
    margin: 0; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
    border: 1px solid var(--trait-fort); font-size: 13.5px; font-weight: 500; color: var(--encre); cursor: pointer;
}
.filtres input:checked + label { background: var(--foret-profond); border-color: var(--foret-profond); color: var(--ivoire); font-weight: 600; }
.filtres input:focus-visible + label { outline: 2px solid var(--or-profond); outline-offset: 2px; }
.bloc-liste:has(#f-actifs:checked) .siege:not([data-statut=actif]),
.bloc-liste:has(#f-invites:checked) .siege:not([data-statut=invite]),
.bloc-liste:has(#f-revoques:checked) .siege:not([data-statut=revoque]) { display: none; }

ul.sieges { list-style: none; margin: 0; padding: 0; }
.siege {
    display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 22px; min-height: 70px;
    border-top: 1px solid var(--trait);
}
.avatar {
    width: 40px; height: 40px; flex: none; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .4px;
    display: flex; align-items: center; justify-content: center; color: var(--encre);
}
.avatar.t0 { background: #DCE6DD; } .avatar.t1 { background: #EFE4C8; } .avatar.t2 { background: #E3E0EC; }
.avatar.t3 { background: #F1E2D6; } .avatar.t4 { background: #D8E4E8; }
.avatar.equipe { background: var(--foret-profond); }
.avatar.equipe img { width: 18px; height: 19px; }
.siege .qui { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.siege .qui b { font-weight: 500; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.siege .qui span { font-size: 13px; color: var(--encre-douce); }
.siege .etat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.siege form { margin: 0; }
.vide { padding: 8px 22px 22px; margin: 0; }
.pied-liste {
    display: flex; align-items: center; gap: 10px; padding: 14px 22px 16px; border-top: 1px solid var(--trait);
    font-size: 13.5px; color: var(--encre-douce);
}

details.menu-actions { position: relative; }
details.menu-actions > summary {
    list-style: none; cursor: pointer; width: 44px; height: 44px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; color: var(--encre);
}
details.menu-actions > summary::-webkit-details-marker { display: none; }
details.menu-actions > summary:hover, details.menu-actions[open] > summary { background: #E9E4D6; }
details.menu-actions .menu-panneau { top: 48px; min-width: 250px; }

.inviter { position: sticky; top: 20px; }
/* Libelles sur une ligne : « Por enlace de equipo » et « Con il link del team »
   passaient sur deux lignes dans leur moitie (29-09). */
.bascule { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; background: #E9E4D6; border-radius: 999px; margin: 4px 0 16px; }
.bascule input { position: absolute; opacity: 0; pointer-events: none; }
.bascule label {
    white-space: nowrap; letter-spacing: -.01em; overflow: hidden;
    margin: 0; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 5px;
    border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--encre-douce); cursor: pointer; text-align: center;
}
.bascule label svg { flex-shrink: 0; }
.bascule input:checked + label { background: #FFFFFF; color: var(--foret-profond); font-weight: 600; box-shadow: 0 1px 3px rgba(14, 42, 30, .12); }
.bascule input:focus-visible + label { outline: 2px solid var(--or-profond); outline-offset: 2px; }
.inviter .volet { display: none; }
.inviter:has(#m-email:checked) .volet-email,
.inviter:has(#m-lien:checked) .volet-lien { display: block; }
.inviter p { margin: 0 0 12px; }
.inviter label:first-of-type { margin-top: 0; }

/* ------ Onglets sans script (kit d'annonce) ---------------------------------- */
.onglets-radio > input { position: absolute; opacity: 0; pointer-events: none; }
.onglets-radio .liste-onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--trait); margin: 18px -30px 0; padding: 0 30px; overflow-x: auto; }
.onglets-radio .liste-onglets label {
    margin: 0 0 -1px; display: inline-flex; align-items: center; min-height: 46px; padding: 0 14px;
    font-size: 14.5px; font-weight: 500; color: var(--encre-douce); white-space: nowrap; cursor: pointer;
    border-bottom: 2px solid transparent;
}
.onglets-radio .panneau { display: none; padding-top: 22px; }
.onglets-radio > input:nth-of-type(1):checked ~ .liste-onglets label:nth-of-type(1),
.onglets-radio > input:nth-of-type(2):checked ~ .liste-onglets label:nth-of-type(2),
.onglets-radio > input:nth-of-type(3):checked ~ .liste-onglets label:nth-of-type(3),
.onglets-radio > input:nth-of-type(4):checked ~ .liste-onglets label:nth-of-type(4) { color: var(--foret-profond); font-weight: 600; border-bottom-color: var(--or-profond); }
.onglets-radio > input:nth-of-type(1):checked ~ section.panneau:nth-of-type(1),
.onglets-radio > input:nth-of-type(2):checked ~ section.panneau:nth-of-type(2),
.onglets-radio > input:nth-of-type(3):checked ~ section.panneau:nth-of-type(3),
.onglets-radio > input:nth-of-type(4):checked ~ section.panneau:nth-of-type(4) { display: block; }
.onglets-radio > input:focus-visible ~ .liste-onglets { outline: 2px solid var(--or-profond); outline-offset: 2px; }
.message { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: start; }
.message textarea { font-size: 14.5px; }
.conseil { background: #EDF2EC; border-radius: 14px; padding: 16px 18px; font-size: 14px; }
.conseil b { display: block; font-size: 12px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--foret); margin-bottom: 4px; }
.pret { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: #1C5C38; margin: 12px 0; }

/* ------ Ressources : la bibliothèque ------------------------------------------ */
.bibliotheque { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 28px; }
.document { background: var(--ivoire); border: 1px solid var(--trait); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--ombre); }
.document .scene { height: 180px; background: var(--sauge-profonde); display: flex; align-items: center; justify-content: center; }
.couverture {
    width: 112px; height: 152px; border-radius: 3px 8px 8px 3px; padding: 16px 10px; box-shadow: 0 10px 24px rgba(14, 42, 30, .24);
    display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
    font-family: var(--serif); font-size: 13px; line-height: 1.25;
}
.couverture img { width: 22px; height: 24px; }
.couverture.c-support { background: var(--foret-profond); color: var(--ivoire); }
.couverture.c-guide { background: #F7F2E7; color: var(--foret-profond); border: 1px solid var(--trait); }
.couverture.c-gouvernance { background: var(--foret); color: var(--ivoire); }
.couverture.c-kit { background: var(--or); color: var(--foret-profond); }
.document .corps { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.document h2 { font-family: inherit; font-size: 15.5px; font-weight: 600; margin: 0; line-height: 1.35; }
.document .corps p { margin: 0; font-size: 13.5px; color: var(--encre-douce); }
.document .corps .resume { flex: 1; }
.document details { font-size: 13.5px; }
.document summary { cursor: pointer; font-weight: 600; color: var(--foret); min-height: 32px; }
.document ul { margin: 6px 0 8px; padding-left: 18px; color: var(--encre-douce); }
.meta { font-size: 12.5px; color: var(--encre-douce); }
.meta .repli { color: #6B5417; }
.avis { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: #6B5417; }
.avis::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--or-profond); margin-top: 6px; flex: none; }

.affiche-apercu {
    width: 250px; aspect-ratio: 210 / 297; background: #F9F6EE; border: 1px solid var(--trait); border-radius: 4px;
    box-shadow: 0 14px 34px rgba(14, 42, 30, .14); padding: 22px 18px; display: flex; flex-direction: column; align-items: center;
    gap: 9px; text-align: center; flex: none;
}
.affiche-apercu img { width: 26px; height: 28px; }
.affiche-apercu .sur { font-size: 8.5px; letter-spacing: 1.3px; font-weight: 600; color: var(--or-encre); }
.affiche-apercu .titre { font-family: var(--serif); font-size: 20px; line-height: 1.15; color: var(--foret-profond); }
.affiche-apercu .qr {
    width: 96px; height: 96px; border: 1.5px dashed var(--trait-fort); border-radius: 8px; margin-top: 4px;
    display: flex; align-items: center; justify-content: center; color: var(--encre-douce);
}
.affiche-bloc { display: flex; gap: 32px; align-items: flex-start; }

details.question { background: var(--ivoire); border: 1px solid var(--trait); border-radius: 16px; padding: 16px 22px; margin-bottom: 12px; }
details.question > summary { cursor: pointer; font-weight: 600; color: var(--foret-profond); font-size: 16px; min-height: 30px; }
details.question blockquote { margin: 12px 0; font-family: var(--serif); font-size: 17px; line-height: 1.6; color: var(--encre); }
details.question blockquote p { margin: 0 0 10px; }

/* ------ Connexion -------------------------------------------------------------- */
.entree {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); max-width: 980px; margin: 12px auto 0;
    background: var(--ivoire); border: 1px solid var(--trait); border-radius: 24px; overflow: hidden; box-shadow: var(--ombre);
}
.entree .panneau-marque {
    position: relative; overflow: hidden; background: var(--foret-profond); color: var(--ivoire);
    padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; gap: 24px;
}
.entree .panneau-marque .filigrane { position: absolute; left: -110px; bottom: -120px; width: 440px; height: 440px; opacity: .05; }
.entree .panneau-marque .embleme { width: 96px; height: 96px; position: relative; }
.entree .panneau-marque p { margin: 0; position: relative; }
.entree .devise { font-family: var(--serif); font-size: 31px; line-height: 1.22; }
.entree .devise em { font-style: normal; color: var(--or); }
.entree .panneau-marque .soustitre { color: #C8D6CE; font-size: 15.5px; line-height: 1.6; }
.entree .formulaires { padding: 44px 48px; display: flex; flex-direction: column; justify-content: center; }
.entree h1 { font-size: 34px; }
.entree .formulaires > p { margin: 6px 0 12px; color: var(--encre-douce); }
.separateur { display: flex; align-items: center; gap: 12px; margin: 24px 0 14px; font-size: 13.5px; color: var(--encre-douce); }
.separateur::before, .separateur::after { content: ""; flex: 1; height: 1px; background: var(--trait-fort); }
details.secours > summary { list-style: none; }
details.secours > summary::-webkit-details-marker { display: none; }
details.secours[open] > summary { display: none; }
.erreur { color: var(--danger); font-size: 13.5px; margin: 6px 0 0; }

/* ------ La restitution d'une vague ------------------------------------------------
   Les classes rst-* vivent dans /css/restitution.css, partagée avec la console. */

/* ------ Grand écran d'abord, puis tablette, puis téléphone ----------------------- */
/* ⚠️ SOUS 1000 PX, LA NAVIGATION PASSE EN BAS. Mesuré par ops/recette/rendu.sh le
   28-09 : à 768 px, la marque, 5 onglets, la langue et le compte débordaient de
   160 px. Le seuil vient de la langue la plus longue, mesurée : en allemand.
   Remesuré le 29-09 avec 6 onglets (Documents) : l'allemand demandait 1020 px
   sous 1180 (nom de l'organisation masqué), donc débordait de 961 à 1019 px ;
   les 5 autres langues tenaient dès 961. D'où, sous 1180 px, des onglets
   resserrés (10 px au lieu de 16 de chaque côté, 72 px gagnés) ET une bascule
   relevée à 1000 px : la marge couvre une police système plus large que celle
   du Mac (Segoe UI sous Windows). */
@media (max-width: 1180px) {
    .menu-bouton .nom { display: none; }
    nav.onglets a { padding: 0 10px; }
}
@media (max-width: 1000px) {
    nav.onglets { display: none; }
    .wrap { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
    nav.bas {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
        background: var(--ivoire); border-top: 1px solid var(--trait);
        display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
        padding-bottom: env(safe-area-inset-bottom);
    }
    nav.bas a {
        min-width: 0; min-height: 58px; padding: 8px 2px 7px; text-decoration: none; color: var(--encre-douce);
        font-size: 11px; line-height: 1.2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    }
    /* Un libellé long (« Geri bildirimler ») passe sur 2 lignes au lieu d'être coupé.
       Avec 6 onglets (29-09), une colonne ne laisse que 58 px au libellé à 375 px :
       « Dokumente », « Ressources », « Impostazioni », « Documentos » n'y tiennent
       plus sur une ligne. La césure suit la langue de la page (lang de <html>) :
       « Doku-mente » plutôt que « Dokument / e ». overflow-wrap reste le filet
       d'un navigateur sans dictionnaire de césure. */
    nav.bas a span {
        max-width: 100%; text-align: center; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    nav.bas a.active { color: var(--foret-profond); font-weight: 700; }
}

@media (max-width: 1080px) {
    .bibliotheque { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sieges-grille { grid-template-columns: minmax(0, 1fr); }
    .inviter { position: static; }
}

@media (max-width: 899px) {
    .heros { flex-direction: column; align-items: flex-start; padding: 32px 28px; }
    .heros h1 { font-size: 31px; }
    .grille-2, .gestes, .tuiles { grid-template-columns: minmax(0, 1fr); }
    .message { grid-template-columns: minmax(0, 1fr); }
    .affiche-bloc { flex-direction: column; }
    .entree { grid-template-columns: minmax(0, 1fr); }
    .entree .panneau-marque { padding: 32px 28px; gap: 16px; }
    .entree .panneau-marque .embleme { width: 64px; height: 64px; }
    .entree .devise { font-size: 24px; }
    .entree .formulaires { padding: 30px 26px 34px; }

    /* Le chemin devient une liste verticale : 8 étapes côte à côte ne tiennent pas. */
    .chemin { display: block; padding: 0; }
    .chemin::before { left: 16px; right: auto; top: 18px; bottom: 18px; width: 2px; height: auto; }
    .chemin-bloc .progres, .chemin-bloc .aujourdhui { display: none; }
    .chemin li { flex-direction: row; align-items: flex-start; text-align: left; gap: 14px; padding: 8px 0; }
    .chemin li .texte { display: flex; flex-direction: column; }
    .chemin .repere .point { margin: 8px 8px; }

    /* Tableaux repliés en fiches. ⚠️ `block` ET NON `flex` sur la cellule : en flex, chaque
       enfant devient un élément de rangée et la valeur sort de l'écran (Hakan, 2026-09-08). */
    table.repliable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    table.repliable, table.repliable tbody { display: block; }
    table.repliable tr { display: block; border: 1px solid var(--trait); border-radius: 14px; background: var(--ivoire); padding: 10px 14px; margin-bottom: 10px; }
    table.repliable td { display: block; border: 0; padding: 6px 0; }
    table.repliable td::before { content: attr(data-label); display: block; color: var(--encre-douce); font-size: 12px; margin-bottom: 2px; }
    table.repliable td:not([data-label]) { padding-top: 10px; }
    table.repliable td:not([data-label])::before { content: none; }
    .card table.repliable { display: block; overflow-x: visible; }
}

@media (max-width: 640px) {
    header.topbar { height: 56px; padding: 0 10px 0 16px; }
    .marque { font-size: 19px; }
    .marque img { width: 22px; height: 24px; }
    .menu-bouton { padding: 0 8px; }
    .menu-bouton .pastille { margin-left: 0; }
    .wrap { padding: 20px 16px calc(96px + env(safe-area-inset-bottom)); }
    h1 { font-size: 30px; }
    .card { padding: 20px 18px; border-radius: 16px; }
    .heros { border-radius: 18px; padding: 26px 22px; gap: 22px; }
    .heros h1 { font-size: 27px; }
    .anneau { width: 96px; height: 96px; }
    .anneau svg { width: 96px; height: 96px; }
    .anneau .centre b { font-size: 28px; }
    .anneau .centre span { display: none; }
    .prochain { flex-direction: column; align-items: flex-start; gap: 14px; }
    .prochain .icone { display: none; }
    .bibliotheque { grid-template-columns: minmax(0, 1fr); }
    .siege { padding: 10px 8px 10px 14px; gap: 12px; }
    .siege .etat .pill { display: none; }
    /* Sur téléphone, un libellé long passe à la ligne au lieu d'être coupé. */
    .siege .qui b { white-space: normal; overflow-wrap: anywhere; }
    .filtres { padding: 14px; }
    .onglets-radio .liste-onglets { margin: 14px -18px 0; padding: 0 18px; }
    th, td { padding: 9px 6px; font-size: 13.5px; }
    .row-actions { white-space: normal; }
    /* Un tableau non replié défile DANS sa carte, la page jamais (mesuré le 05-09 en turc). */
    .card table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

}

@media print {
    header.topbar, nav.bas { display: none; }
}

/* Réglages · Factures et contrats (D-347, lot 1). Une ligne par pièce : objet,
   montant, état, téléchargement ; sur téléphone, l'objet prend toute la largeur. */
.pieces-titre { font-family: var(--serif); font-weight: 500; font-size: 19px; margin: 22px 0 4px; }
/* En tête de carte (onglet Documents), le titre n'a pas à se décoller du bord. */
.card > .pieces-titre:first-child { margin-top: 0; }
.pieces { list-style: none; margin: 0; padding: 0; }
.piece { display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem 15rem auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--trait); }
.piece.contrat { grid-template-columns: minmax(0, 1fr) auto; }
.piece-objet { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.piece-montant { font-family: var(--serif); font-size: 18px; font-variant-numeric: lining-nums tabular-nums; text-align: right; white-space: nowrap; }
.piece-etat { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.piece-etat.ok { background: #DDEBE1; color: #1C5C38; }
.piece-etat.du { background: #F3EDDA; color: #6B5417; }
@media (max-width: 720px) {
    .piece { grid-template-columns: minmax(0, 1fr) auto; }
    .piece-objet { grid-column: 1 / -1; }
    .piece-montant { text-align: left; }
    .piece .btn { grid-column: 1 / -1; justify-self: start; }
}