/* Mise en page du site. Seulement des variables du design système, aucune valeur à la main. */

html, body { margin: 0; }

.site-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-16);
}

.site-intro { margin: 0 0 var(--space-8); }
.site-intro h1 { margin: 0 0 var(--space-3); }
.site-intro p { margin: 0; max-width: 62ch; }
.site-intro > .il-alert { margin-top: var(--space-5); }
.site-intro > .il-alert + .il-btn { margin-top: var(--space-4); }

.site-section { margin: 0 0 var(--space-8); }
.site-section > h2 { margin: 0 0 var(--space-4); }

.site-grid { display: grid; gap: var(--space-6); }

/* Sur mobile, laisser la place à la barre du bas (80px demandés par BottomNav). */
/* Téléphone : la barre du bas (~72 px + bord arrondi de l'iPhone) est posée par-dessus la page :
   on laisse sa hauteur + un vrai espace (~40 px) pour que le dernier bouton ne la touche pas. */
.site-footer-space { padding-bottom: calc(var(--space-16) + var(--space-12) + env(safe-area-inset-bottom)); }

.is-hidden { display: none !important; }

/* Pages de formulaire (connexion, inscription, compte) : une colonne étroite et centrée. */
.site-etroit { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-6); }
.site-etroit > h1 { margin: 0; }
.site-sans-marge { margin: 0; }
.site-centre { align-items: center; text-align: center; }
.site-pleine-largeur { width: 100%; }
.site-liens { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.site-liens a { color: var(--ink); }
.site-lignes { display: flex; flex-direction: column; gap: var(--space-4); }
.site-lignes > .il-badge { align-self: flex-start; }
.site-centre > .il-badge { align-self: center; }
.site-secret { overflow-wrap: anywhere; }
/* Le lien final « Et X autres choses » est un raccourci, pas une notification : plus compact. */
.il-list-item.site-voir-autres { min-height: 0; padding-block: var(--space-3); }
/* Une jauge pleine n'a plus de séparation à droite : la couleur rejoint l'arrondi du cadre. */
.il-progress-fill.is-complete { border-right: 0; }
.site-bloc { display: flex; flex-direction: column; gap: var(--space-3); }
.site-titre-bloc { margin: 0; display: flex; align-items: center; gap: var(--space-2); }
/* Ligne de liste cliquable faite avec un <button> (ouvre les actions sur un invité). */
.il-list button.il-list-item { width: 100%; margin: 0; background: transparent; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.il-list button.il-list-item:hover { background: var(--surface-hover); }
.il-list li + li { border-top: var(--stroke-1) solid var(--line-soft); }
.site-entete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.site-entete h1 { margin: 0; }
.site-two { display: grid; gap: var(--space-6); }
.site-etroit-gauche { max-width: 480px; width: 100%; }
.site-lignes > h1 { margin: 0; }
@media (min-width: 640px) { .site-two { grid-template-columns: 1fr 1fr; } }
/* Sélecteur pleine largeur à 3 choix : sur petit téléphone, marges réduites pour ne pas déborder. */
.il-segmented-block button { min-width: 0; padding: 0 var(--space-2); }
.site-row-egal { flex-wrap: nowrap; }
.site-inactif { color: var(--ink-muted); }
.site-texte-libre { white-space: pre-line; overflow-wrap: anywhere; }
.site-serre { gap: var(--space-1); }
.site-decision { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); align-items: center; }
.site-decision > .il-input { grid-column: 1 / -1; }
.site-grand { min-height: 200px; }
.site-date-noire { background: var(--ink); }
/* Rassemblement : date jaune comme son badge, chiffres en encre (sur jaune, le texte crème ne se lit pas). */
.site-date-jaune { background: var(--yellow-400); color: var(--ink); }
.site-cr { gap: var(--space-5); }
.site-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
/* Chiffre clé cliquable : il s'enfonce quand on appuie, comme une carte-lien. */
.site-stat-lien { color: inherit; text-decoration: none; transition: transform .08s, box-shadow .08s; }
.site-stat-lien:hover { background: var(--surface-hover); }
.site-stat-lien:active { transform: translate(6px, 6px); box-shadow: var(--shadow-none); }
@media (prefers-reduced-motion: reduce) { .site-stat-lien { transition: none; } }
.site-lien-neutre { color: inherit; text-decoration: none; }
.site-lien-neutre:hover { background: var(--surface-hover); }
.site-fieldset { border: 0; padding: 0; margin: 0; gap: var(--space-1); }
.site-fieldset legend { margin-bottom: var(--space-2); }
.site-inactif .il-list-icon { border-style: dashed; }
.site-row-egal > * { flex: 1; }

@media (min-width: 640px) {
  .site-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .site-main { padding: var(--space-10) var(--space-8) var(--space-16); }
  .site-footer-space { padding-bottom: var(--space-6); }
}

/* Pages de texte (charte, mentions légales) : paragraphes et listes à puces lisibles. */
.site-texte p, .site-texte ul { margin: 0; max-width: 62ch; }
.site-texte ul { padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.site-etroit > .il-badge { align-self: flex-start; }
/* Une zone encore vide (bouton retour, bouton « Proposer »…) ne doit pas ajouter d'écart :
   même espace sous le titre sur toutes les pages. */
.site-etroit > div:empty, .site-lignes > div:empty { display: none; }

/* Boutons de premier niveau (posés dans la page, pas dans une carte) : même arrondi que les cartes,
   les alertes et les chiffres clés (radius-lg). Dans une carte, ils gardent leur petit arrondi (arrondis emboîtés). */
.site-main .il-btn:not(.il-btn-sm):not(:is(.il-card, .il-alert, .il-list, .il-accordion, .il-btn-group, .il-selbar, .il-stat) .il-btn) { border-radius: var(--radius-lg); }

/* Décisions d'un compte rendu : le badge (Adopté, Refusé…) bien centré en hauteur dans sa ligne,
   pour que l'écart au-dessus et au-dessous soit le même. */

/* ───────────── Cartes de choix (remplacent le contrôle segmenté) ─────────────
   Un choix parmi 2 ou 3 : picto, titre, une phrase. Le choix retenu devient rouge, avec une coche.
   2 choix : côte à côte. 3 choix : les uns sous les autres (trop serré sur téléphone sinon). */
.site-choix { display: grid; gap: var(--space-3); }
.site-choix-2 { grid-template-columns: 1fr 1fr; }
.site-choix-carte {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: var(--space-2); align-content: start;
  width: 100%; min-height: var(--space-12); margin: 0;
  padding: var(--space-3); text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  background: var(--surface); border: var(--stroke-2) solid var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  transition: transform .08s ease, box-shadow .08s ease, background-color .12s ease;
  -webkit-tap-highlight-color: transparent;
}
/* Ligne 1 : picto, titre, coche. Ligne 2 : l'explication, sur toute la largeur (lisible même à 2 colonnes). */
.site-choix-texte { display: contents; }
.site-choix-titre { grid-row: 1; grid-column: 2; min-width: 0; font-family: var(--font-mono); font-weight: 700; font-size: 15px; line-height: 20px; }
.site-choix-sous { grid-row: 2; grid-column: 1 / -1; margin-top: var(--space-1); font-size: 14px; line-height: 19px; color: var(--ink-muted); }
.site-choix-coche { grid-row: 1; grid-column: 3; visibility: hidden; }
.site-choix-carte:hover { background: var(--surface-hover); }
.site-choix-carte:active { transform: translate(3px, 3px); box-shadow: var(--shadow-none); }
.site-choix-carte[aria-pressed="true"] { background: var(--red-500); color: var(--on-color); transform: translate(3px, 3px); box-shadow: var(--shadow-none); }
.site-choix-carte[aria-pressed="true"] .site-choix-sous { color: var(--red-100); }
.site-choix-carte[aria-pressed="true"] .site-choix-coche { visibility: visible; animation: site-pop .3s cubic-bezier(.2,.9,.3,1.5); }
/* Dans une carte, une feuille ou une fenêtre : une seule ombre par bloc, donc pas d'ombre ici
   (comme les boutons du design système). Le choix retenu se voit au rouge et à la coche. */
:is(.il-card:not(.il-card-flat), .il-modal, .il-sheet, .il-alert) .site-choix-carte { box-shadow: none; }
:is(.il-card:not(.il-card-flat), .il-modal, .il-sheet, .il-alert) .site-choix-carte:is(:active, [aria-pressed="true"]) { transform: none; }
:is(.il-card:not(.il-card-flat), .il-modal, .il-sheet, .il-alert) .site-choix-carte:active:not([aria-pressed="true"]) { background: var(--surface-sunken); }

/* ═════════════ Version ordinateur ═════════════
   Sur téléphone, rien ne change : une colonne. À partir de bp-desktop (1024 px) :
   - site-lecture : textes et formulaires plus larges, lignes encore lisibles ;
   - site-large : toute la largeur (1120 px max), les listes de cartes passent en 2 colonnes ;
   - site-colonnes : deux colonnes côte à côte (accueil, Mon compte, invités). */

/* Téléphone : les colonnes « disparaissent », leur contenu reste dans la colonne unique. */
.site-colonnes, .site-colonne { display: contents; }
/* Accueil sur téléphone : on garde l'ordre d'origine (épinglé, chiffres clés, agenda, décisions, infos). */
@media (max-width: 1023px) {
  #bloc-attend { order: 0; }
  #zone-epingle { order: 1; }
  .site-bloc:has(#agenda) { order: 2; }
  #stats { order: 3; }
  #bloc-decisions { order: 4; }
  .site-bloc:has(#derniers) { order: 5; }
}
/* Les blocs dans une colonne montent un par un, comme les autres. */
.site-main .site-colonne > * { animation: il-rise .3s cubic-bezier(.2,.9,.3,1.2) backwards; }
.site-colonne > :nth-child(2) { animation-delay: .08s; }
.site-colonne > :nth-child(3) { animation-delay: .16s; }
.site-colonne > :nth-child(n+4) { animation-delay: .24s; }

@media (min-width: 1024px) {
  .site-etroit.site-lecture { max-width: 720px; }
  .site-etroit.site-large { max-width: 1120px; }

  /* Listes de cartes (votes, pétitions, infos, suspensions…) et groupes (réglages) : 2 colonnes. */
  .site-large > :is(#liste, #groupes) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
  /* Le titre d'une section introduit la rangée entière : les cartes commencent ensemble juste dessous. */
  .site-large > #liste > .site-titre-bloc { grid-column: 1 / -1; }
  /* Une seule carte (un compte rendu ouvert, une pétition partagée) : centrée, largeur de lecture. */
  .site-large > #liste > :only-child { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 720px; }
  /* Les boutons « Proposer un vote », « Lancer une pétition »… ne s'étirent pas sur 1120 px. */
  .site-large > div > .il-btn-block { width: auto; }
  .site-large > div:has(> .il-btn-block) { display: flex; }

  .site-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); align-items: start; }
  .site-colonne { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
  /* Pages invités / lycée : le code à gauche (plus étroit), la liste à droite. */
  .site-colonnes:has(#bouton-inviter) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  /* … et le code reste en vue pendant qu'on fait défiler une longue liste. */
  .site-colonnes:has(#bouton-inviter) > .site-colonne:first-child { position: sticky; top: calc(72px + var(--space-6)); }
  /* Accueil : le grand titre et son texte sur une ligne plus large. */
  .site-large > .site-intro { margin-bottom: 0; }
}

/* ═════════════ Animations ═════════════
   Rapides et « physiques », comme le dit le design système (§ 8) : appui 80 ms, léger rebond.
   Tout s'arrête si le téléphone demande moins d'animations (voir tout en bas). */

/* Machine à écrire : les grands titres et les codes s'écrivent lettre par lettre (Space Mono). */
.site-main .title-1, .il-code-value { animation: site-tape .5s steps(16, end) backwards; }

/* Entrée des pages : les blocs montent un par un. */
.site-main .site-etroit > *, .site-main .site-lignes > * { animation: il-rise .3s cubic-bezier(.2,.9,.3,1.2) backwards; }
:is(.site-etroit, .site-lignes) > :nth-child(2) { animation-delay: .04s; }
:is(.site-etroit, .site-lignes) > :nth-child(3) { animation-delay: .08s; }
:is(.site-etroit, .site-lignes) > :nth-child(4) { animation-delay: .12s; }
:is(.site-etroit, .site-lignes) > :nth-child(5) { animation-delay: .16s; }
:is(.site-etroit, .site-lignes) > :nth-child(6) { animation-delay: .2s; }
:is(.site-etroit, .site-lignes) > :nth-child(7) { animation-delay: .24s; }
:is(.site-etroit, .site-lignes) > :nth-child(n+8) { animation-delay: .28s; }
/* Dans une liste, les lignes glissent un peu moins (elles restent dans leur cadre). */
.il-list > li { animation: site-glisse .25s ease-out backwards; }
.il-list > li:nth-child(2) { animation-delay: .04s; }
.il-list > li:nth-child(3) { animation-delay: .08s; }
.il-list > li:nth-child(4) { animation-delay: .12s; }
.il-list > li:nth-child(n+5) { animation-delay: .16s; }
/* Dans une feuille ou une fenêtre, pas d'entrée en cascade : elles ont déjà leur propre animation. */
:is(.il-sheet, .il-modal) :is(.site-lignes > *, .il-list > li) { animation: none; }

/* Survol (souris seulement) : pas de soulèvement (Andranik le trouvait bizarre) ; le fond change
   (design système) et la carte s'enfonce quand on appuie. Le poing du logo se lève au survol. */
@media (hover: hover) {
  .il-brand:hover .il-brand-badge .il-ico { animation: site-poing .5s cubic-bezier(.2,.9,.3,1.4); }
}
/* Les flèches avancent quand on survole ou touche. */
.il-ico-chevron-droite, .il-ico-retour, .il-ico-suivant { transition: transform .12s ease; }
:is(.il-list-item, .il-card-link, .il-btn):hover .il-ico-chevron-droite,
:is(.il-list-item, .il-btn):hover .il-ico-suivant { transform: translateX(3px); }
.il-btn:hover .il-ico-retour { transform: translateX(-3px); }
/* Appui sur une ligne de liste : elle s'enfonce légèrement. */
.il-list button.il-list-item { transition: background-color .08s ease; }
.il-list button.il-list-item:active { background: var(--surface-sunken); }

/* Barre du bas : le picto de la page ouverte rebondit, et chaque picto s'écrase sous le doigt. */
.il-bottomnav-item .il-ico { transition: transform .08s ease; }
.il-bottomnav-item[aria-current="page"] .il-ico { animation: site-pop .4s cubic-bezier(.2,.9,.3,1.5) .1s backwards; }
.il-bottomnav-item:active .il-ico { transform: scale(.85); }

/* Onglets : la barre défile seulement de gauche à droite. Les onglets descendent de 2 px sur la ligne
   du dessous (margin-bottom: -2px) : sans ça, la molette faisait aussi défiler la barre de haut en bas. */
.il-tabs { overflow-y: hidden; }
/* Onglets : la barre rouge de l'onglet choisi descend. */
.il-tab[aria-selected="true"] { animation: site-onglet .2s ease-out; }
/* Pastilles de nombre : petit « pop ». */
.il-tab-count, .il-badge-count { animation: site-pop .35s cubic-bezier(.2,.9,.3,1.5) .25s backwards; }

/* Barres de progression (participation, soutiens, résultats) : elles se remplissent. */
.il-progress-fill { transform-origin: left center; animation: site-remplir .8s cubic-bezier(.2,.9,.3,1) .2s backwards; }

/* Vote : le choix sélectionné rebondit ; après avoir voté, coup de tampon. */
.il-vote-choice[aria-pressed="true"] .il-ico { animation: site-pop .3s cubic-bezier(.2,.9,.3,1.5); }
.site-tampon { animation: site-secousse .3s ease-out .3s backwards; }
.site-tampon > .il-ico { animation: site-tampon .45s cubic-bezier(.2,.9,.3,1.3) backwards; }
/* Pétition : après « Je soutiens », le poing se lève. */
.site-poing .il-ico { animation: site-poing .6s cubic-bezier(.2,.9,.3,1.4) .1s backwards; }

/* Cases et boutons radio : la coche apparaît avec un rebond. */
.il-check input:checked::after, .il-radio input:checked::after { animation: site-pop .2s cubic-bezier(.2,.9,.3,1.5); }
/* Accordéon : le contenu glisse en s'ouvrant. */
.il-accordion details[open] .il-accordion-body { animation: site-glisse .2s ease-out; }

/* Erreurs : le champ ou l'alerte fait « non » de la tête. */
.il-field.is-invalid .il-input, .il-field.is-invalid .il-textarea, .il-alert-danger { animation: site-non .35s ease-out; }
.il-error { animation: site-glisse .2s ease-out; }

/* Accueil et agenda : l'épingle se plante, la date du calendrier se retourne. */
.il-pinned .il-ico-epingle { display: inline-block; animation: site-epingle .5s cubic-bezier(.2,.9,.3,1.4) .3s backwards; }
.il-event-date { animation: site-calendrier .45s cubic-bezier(.2,.9,.3,1.2) .15s backwards; }
/* Illustration des pages vides : elle flotte doucement. */
.il-empty-art { animation: site-flotte 3s ease-in-out infinite; }

@keyframes site-tape { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes site-glisse { from { transform: translateY(8px); opacity: 0; } }
@keyframes site-pop { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@keyframes site-onglet { from { box-shadow: inset 0 0 0 var(--red-500); } }
@keyframes site-remplir { from { transform: scaleX(0); } }
@keyframes site-tampon { 0% { transform: scale(2.4) rotate(-16deg); opacity: 0; } 60% { transform: scale(.9) rotate(4deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes site-secousse { 30% { transform: translateY(2px); } 60% { transform: translateY(-1px); } }
@keyframes site-poing { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-5px) rotate(-12deg); } 70% { transform: translateY(-2px) rotate(6deg); } }
@keyframes site-non { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes site-epingle { from { transform: translateY(-12px) rotate(-35deg); opacity: 0; } }
@keyframes site-calendrier { from { transform: perspective(300px) rotateX(-90deg); opacity: 0; } }
@keyframes site-flotte { 50% { transform: translateY(-5px); } }

/* Moins d'animations demandé : tout apparaît tout de suite, sans attendre. */
@media (prefers-reduced-motion: reduce) {
  .il-page * { animation-delay: 0s !important; transition-delay: 0s !important; }
  .site-main .title-1, .il-code-value { animation: none; }
}
/* Organisation sans outils (simple membre) : une seule colonne, centrée, au lieu d'une colonne vide à droite. */
@media (min-width: 1024px) {
  .site-etroit.site-large:has(#colonne-outils.is-hidden) { max-width: 720px; }
  .site-colonnes:has(> #colonne-outils.is-hidden) { grid-template-columns: minmax(0, 1fr); }
}
/* Organisation sur téléphone : « À faire », puis les outils de ton rôle, puis les responsables et le contrôle. */
@media (max-width: 1023px) {
  #colonne-outils > * { order: 2; }
  #colonne-moi > :not(#bloc-a-faire) { order: 3; }
}
/* Pastille « À faire » qui n'est pas urgente : plus discrète que le jaune. */
.il-badge-count.site-badge-calme { background: var(--surface-sunken); }

/* Suivi des décisions : la frise ① Décidé → ② En cours → ③ Fait. L'étape atteinte est en couleur
   (jaune, rouge, vert, comme son badge) ; les étapes passées sont cochées ; le trait se remplit. */
.site-etapes { display: flex; margin: 0; padding: 0; list-style: none; }
.site-etape { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-muted); text-align: center; }
.site-etape:not(:first-child)::before { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: var(--line-soft); }
.site-etape.is-passee::before, .site-etape.is-actuelle::before { background: var(--ink); }
.site-etape-rond { position: relative; z-index: 1; width: 32px; height: 32px; display: grid; place-items: center; border: var(--stroke-2) solid var(--line-soft); border-radius: 50%; background: var(--surface); font-weight: 700; }
.site-etape.is-passee .site-etape-rond { border-color: var(--ink); background: var(--ink); color: var(--on-color); }
.site-etape.is-actuelle { color: var(--ink); font-weight: 700; }
.site-etape.is-actuelle .site-etape-rond { border-color: var(--ink); }
.site-etape.is-actuelle.is-decide .site-etape-rond { background: var(--yellow-400); }
.site-etape.is-actuelle.is-en_cours .site-etape-rond { background: var(--red-500); color: var(--on-color); }
.site-etape.is-actuelle.is-fait .site-etape-rond { background: var(--success-100); color: var(--success); }
.site-etape .il-ico { width: 18px; height: 18px; }
/* Les chiffres en haut de la page (combien à chaque étape) : 3 côte à côte. */
.site-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.site-stats-3 .il-stat { padding: var(--space-3); }
.site-stats-3 .il-stat-value { font-size: 28px; line-height: 34px; }
.site-stats-3 .il-stat-label { font-size: 11px; letter-spacing: .04em; }
.site-row-suivi { align-items: center; }
.site-grandit { flex: 1; min-width: 0; }

/* Agenda : atelier en bleu, événement (concert, spectacle…) en vert ; la date prend la couleur du badge. */
.site-badge-bleu { background: var(--info); color: var(--on-color); }
.site-badge-vert { background: var(--success); color: var(--on-color); }
.site-date-bleue { background: var(--info); }
.site-date-verte { background: var(--success); }
.site-date-passee { background: var(--surface-sunken); color: var(--ink-muted); }
/* Ce qui est relié à un événement (compte rendu, infos, votes rapides, décisions, points à discuter). */
.site-liens { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.site-liens li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 15px; line-height: 22px; }
.site-liens li > .il-ico { flex: none; margin-top: 2px; width: 18px; height: 18px; }
.site-liens a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* Le détail des voix peut être long (plusieurs choix) : il passe à la ligne au lieu de dépasser. */
.site-liens li > span { min-width: 0; overflow-wrap: anywhere; }

/* Écran du vote rapide (projeté en AG) : le code se lit du fond de la salle. */
.site-ecran-code { align-items: center; text-align: center; }
.site-code-geant { font-family: var(--font-mono); font-weight: 700; font-size: clamp(56px, 18vw, 140px); line-height: 1; letter-spacing: .12em; user-select: all; }
.site-chrono-ligne { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 28px; font-weight: 700; }

/* ═════════════ Retouches du 17/10 (demandées par Andranik) ═════════════ */

/* Fenêtres (modales) et feuilles du bas : pas d'ombre, seulement le contour. */
.il-modal, .il-sheet { box-shadow: none; }

/* Petits carrés à gauche (date d'un événement, icône d'une ligne de liste, icône d'introduction) :
   collés en haut, alignés avec la première ligne du titre, au lieu d'être centrés en hauteur.
   Ce qui est à droite d'une ligne de liste (flèche, pastille) reste centré. */
.il-event-top, .il-list-item, .il-card-intro { align-items: flex-start; }
.il-list-item > .il-list-end { align-self: center; }

/* Boutons de vote Pour / Contre / Je m'abstiens : remplis de couleur (vert, rouge, jaune).
   Après un choix, les autres pâlissent et le choix retenu garde sa couleur, avec une coche
   (le choix ne se voit pas qu'à la couleur). */
.il-vote-choice.is-pour { background: var(--success); color: var(--on-color); }
.il-vote-choice.is-contre { background: var(--red-500); color: var(--on-color); }
.il-vote-choice.is-abstention { background: var(--yellow-400); color: var(--ink); }
.il-vote-choice:is(.is-pour, .is-contre) .il-ico { color: var(--on-color); }
.il-vote-choice.is-abstention .il-ico, .il-vote-choice.is-abstention[aria-pressed="true"] .il-ico { color: var(--ink); }
.il-vote-choice.is-abstention[aria-pressed="true"] { background: var(--yellow-400); color: var(--ink); }
.il-vote-choice.is-contre[aria-pressed="true"] { background: var(--red-500); }
.il-vote-choices:has([aria-pressed="true"]) .il-vote-choice.is-pour[aria-pressed="false"] { background: var(--success-100); color: var(--ink); }
.il-vote-choices:has([aria-pressed="true"]) .il-vote-choice.is-contre[aria-pressed="false"] { background: var(--red-100); color: var(--ink); }
.il-vote-choices:has([aria-pressed="true"]) .il-vote-choice.is-abstention[aria-pressed="false"] { background: var(--yellow-100); }
.il-vote-choices:has([aria-pressed="true"]) .il-vote-choice[aria-pressed="false"] .il-ico { color: var(--ink); }
.il-vote-choice:is(.is-pour, .is-contre, .is-abstention):hover { filter: brightness(1.08); }
/* Votes à plusieurs choix (pas de couleur propre) : le choix retenu devient noir. */
.il-vote-choice:not(.is-pour, .is-contre, .is-abstention)[aria-pressed="true"] { background: var(--ink); color: var(--on-color); }
.site-vote-coche { margin-left: auto; visibility: hidden; }
.il-vote-choice[aria-pressed="true"] .site-vote-coche { visibility: visible; }

/* Champs date et heure : sur iPhone, Safari leur donne une largeur minimale à lui, et le champ dépassait
   à droite de l'écran. On enlève son style à lui : le champ prend la largeur prévue, texte à gauche. */
.il-input:is([type="date"], [type="time"]) { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; text-align: left; }
.il-input:is([type="date"], [type="time"])::-webkit-date-and-time-value { text-align: left; margin: 0; }
.il-field { min-width: 0; }

/* Fenêtres et clavier du téléphone : le voile est calé sur la partie visible de l'écran (suivreClavier
   dans commun.js). La feuille défile seule, sans faire défiler la page derrière. */
.il-sheet, .il-modal { overscroll-behavior: contain; }
.il-sheet { max-height: calc(100% - var(--space-6)); }

/* Bouton « Retour » en haut des pages hors barre du bas (Organisation → Vote rapide, Alertes…) :
   collé au titre, au-dessus de lui. */
.site-retour { align-self: flex-start; margin-bottom: calc(-1 * var(--space-3)); }
.site-retour:hover .il-ico-retour { transform: translateX(-3px); }

/* Contestation d'une suspension (page Suspensions) : le picto en haut, le texte sur plusieurs lignes. */
.site-contestation { align-items: flex-start; }

/* « En bref » en haut d'un vote : le résumé simple, sur un fond jaune clair, lu en premier. */
.site-en-bref { margin: 0; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--yellow-100); border-radius: var(--radius-md); font-size: 17px; line-height: 26px; font-weight: 700; }
.site-en-bref .detail-label { font-weight: 700; }
.site-bref { min-height: 0; resize: none; }

/* ───────────── Formulaire du compte rendu (rangé en parties) ─────────────
   Une décision = le texte, puis 3 boutons de couleur : Adopté (vert), Rejeté (rouge), Reporté (jaune),
   les mêmes couleurs que les badges du compte rendu publié. Les décisions sont séparées par un trait fin. */
.site-decisions { display: flex; flex-direction: column; gap: var(--space-4); }
.site-decision-ligne { display: flex; flex-direction: column; gap: var(--space-2); }
.site-decision-ligne + .site-decision-ligne { padding-top: var(--space-4); border-top: var(--stroke-1) solid var(--line-soft); }
.site-decision-ligne > .il-check { padding: 0; }
.site-statuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.site-statut {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: 44px; min-width: 0; margin: 0;
  padding: 0 var(--space-2); font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--ink); cursor: pointer;
  background: var(--surface); border: var(--stroke-2) solid var(--ink); border-radius: var(--radius-md);
  transition: background-color .12s ease; -webkit-tap-highlight-color: transparent;
}
.site-statut .il-ico { width: 18px; height: 18px; flex: none; }
.site-statut:hover { background: var(--surface-hover); }
.site-statut:active { background: var(--surface-sunken); }
.site-statut:is(.is-adopte, .is-confirmee)[aria-pressed="true"] { background: var(--success); color: var(--on-color); }
.site-statut:is(.is-refuse, .is-rejetee)[aria-pressed="true"] { background: var(--red-500); color: var(--on-color); }
.site-statut.is-reporte[aria-pressed="true"] { background: var(--yellow-400); }
.site-statut.is-attente[aria-pressed="true"] { background: var(--surface-sunken); border-style: dashed; }
/* Le picto du choix retenu rebondit, comme les boutons de vote. */
.site-statut[aria-pressed="true"] .il-ico { animation: site-pop .3s cubic-bezier(.2,.9,.3,1.5); }
/* Champ avec picto (date, heure, lieu) : le picto reste au milieu du champ. */
.il-input-wrap > .il-input:is([type="date"], [type="time"]) { padding-left: 48px; }

/* ───────────── Arguments Pour / Contre sous un vote ─────────────
   Deux colonnes (une seule sur téléphone) : Pour avec un trait vert à gauche, Contre avec un trait rouge. */
.site-arguments { border-top: var(--stroke-1) solid var(--line-soft); padding-top: var(--space-3); }
.site-ouvrir-arguments { align-self: flex-start; }
.site-ouvrir-arguments[aria-expanded="true"] .il-ico-chevron-bas { transform: rotate(180deg); }
.site-arguments-colonnes { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .site-arguments-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site-arguments-colonne { display: flex; flex-direction: column; gap: var(--space-2); padding-left: var(--space-3); border-left: var(--stroke-3) solid var(--success); }
.site-arguments-colonne.is-contre { border-left-color: var(--red-500); }
.site-arguments-titre { margin: 0; display: flex; align-items: center; gap: var(--space-1); font-family: var(--font-mono); font-size: 15px; }
.site-arguments-colonne.is-pour .site-arguments-titre .il-ico { color: var(--success); }
.site-arguments-colonne.is-contre .site-arguments-titre .il-ico { color: var(--red-500); }
.site-arguments-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.site-argument { display: flex; flex-direction: column; gap: var(--space-1); font-size: 16px; line-height: 24px; }
.site-argument.is-masque > p { color: var(--ink-muted); text-decoration: line-through; }
.site-argument-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.site-argument-actions:empty { display: none; }
.site-statuts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-statut.site-plein.is-adopte { background: var(--success); color: var(--on-color); }
.site-statut.site-plein.is-refuse { background: var(--red-500); color: var(--on-color); }
.site-statut.site-plein:hover { filter: brightness(1.08); }

/* Ligne de liste avec une action à droite (supprimer un vote rapide) : le lien prend la place, le bouton à côté. */
.site-ligne-action { display: flex; align-items: center; }
.site-ligne-action > .il-list-item { flex: 1; min-width: 0; }
.site-ligne-action > .il-btn { flex: none; margin-right: var(--space-3); }

/* Téléphone : pas de rectangle gris au toucher ; c'est l'enfoncement (:active) qui montre l'appui
   (commun.js écoute les touchers, sinon Safari n'affiche pas :active). */
.il-page :is(a, button, label, summary) { -webkit-tap-highlight-color: transparent; }
/* Sous un argument : « Signaler », « Retirer »… alignés sur le texte, discrets. */
.site-argument-actions .il-btn-ghost { padding-left: 0; padding-right: var(--space-2); min-height: 36px; }
.site-decision-texte { display: flex; align-items: center; gap: var(--space-2); }
.site-decision-texte > .il-input { flex: 1; min-width: 0; }

/* ───────────── Ordinateur : pages longues en deux colonnes (choix d'Andranik : « la mise en page ordinateur compte ») ─────────────
   Suivi des décisions : sous chaque titre d'étape, les cartes en 2 colonnes.
   Transparence : l'équipe en haut sur toute la largeur, puis les blocs en 2 colonnes.
   Journal : les filtres passent à la ligne au lieu de défiler (assez de place). */
@media (min-width: 1024px) {
  .site-large > .site-intro, .site-large > p.site-sans-marge { max-width: 72ch; }
  #blocs > .site-bloc:has(> article.il-card) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
  #blocs > .site-bloc:has(> article.il-card) > h2 { grid-column: 1 / -1; margin: 0; }
  #blocs:has(> .site-bloc > .il-list) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-8); align-items: start; }
  #blocs:has(> .site-bloc > .il-list) > :first-child, #blocs:has(> .site-bloc > .il-list) > p { grid-column: 1 / -1; }
  #blocs:has(> .site-bloc > .il-list) > :first-child .site-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .il-tabs-pills { flex-wrap: wrap; overflow: visible; }
}

/* Élections : les candidats dans une carte. Pas de cadre ni d'ombre (rien d'ombré dans une carte) :
   une ligne fine entre deux candidats. */
.site-candidats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.site-candidat { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) 0; border-top: var(--stroke-1) solid var(--line-soft); }
.site-candidat:first-child { border-top: 0; padding-top: 0; }
.site-candidat-nom { font-family: var(--font-mono); font-weight: 700; font-size: 17px; line-height: 24px; }

/* Texte sur deux lignes serrées (titre + explication), par exemple à côté d'un interrupteur. */
.site-lignes-serrees { display: flex; flex-direction: column; gap: 2px; }
.site-lignes-serrees .il-help { margin: 0; }

/* iPhone (site sur l'écran d'accueil) : l'écran est arrondi et a un trait noir en bas.
   Avec « viewport-fit=cover » (balise viewport de chaque page), on laisse la place qu'il faut :
   en bas pour la barre, la feuille du bas, les messages et le bouton flottant ; sur les côtés en paysage. */
.il-bottomnav {
  padding-left: calc(var(--space-2) + env(safe-area-inset-left));
  padding-right: calc(var(--space-2) + env(safe-area-inset-right));
}
.il-topbar {
  padding-left: max(var(--space-4), env(safe-area-inset-left));
  padding-right: max(var(--space-4), env(safe-area-inset-right));
}
.il-sheet { padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); }
.il-toast-zone, .il-fab { bottom: calc(80px + var(--space-4) + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) {
  .il-topbar { padding-left: max(var(--space-8), env(safe-area-inset-left)); padding-right: max(var(--space-8), env(safe-area-inset-right)); }
}

/* ───────────── Décisions d'un compte rendu ─────────────
   Le résultat en haut à droite, « Urgence » dessous. Arrondis emboîtés : pastille 10 (plus douce que carrée,
   choix d'Andranik) + marge 8 = 18 pour la ligne.
   Une décision venue d'un vote s'ouvre (page du vote, ou résultat du vote rapide). */
.il-report-decisions li { display: block; padding: 0; background: none; border-radius: 0; }
.site-decision-cr {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-3); align-items: start;
  width: 100%; padding: 8px 8px 8px var(--space-3); background: var(--surface-sunken); border-radius: 18px;
  color: var(--ink); text-decoration: none; text-align: left; font: inherit; line-height: 24px; border: 0;
}
.site-decision-cr-texte { padding-top: 2px; padding-bottom: 2px; min-width: 0; overflow-wrap: anywhere; }
.site-badge-carre { border-radius: 10px; }
.site-decision-cr-urgence, .site-decision-cr-lien { grid-column: 1 / -1; justify-self: start; }
.site-decision-cr-lien { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--info); font-weight: 700; font-size: 15px; }
.site-decision-cr-lien .il-ico:last-child { width: 16px; height: 16px; }
.site-decision-cr-ouvrable { cursor: pointer; }
.site-decision-cr-ouvrable:hover { background: var(--surface-hover); box-shadow: inset 0 0 0 var(--stroke-2) var(--ink); }
.site-decision-cr-ouvrable:hover .site-decision-cr-lien { text-decoration: underline; text-underline-offset: 3px; }
.site-decision-cr-ouvrable:focus-visible { outline: var(--stroke-2) solid var(--ink); outline-offset: 2px; }

/* ───────────── Ordre du jour d'un événement ─────────────
   Des lignes sur fond creusé (comme les décisions d'un compte rendu) : jamais une carte dans la carte.
   Arrondis emboîtés : pastille 10 + marge 8 = 18 pour la ligne. */
.site-odj { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.site-odj-point {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-2) var(--space-3); align-items: start;
  padding: 8px 8px 8px var(--space-3); background: var(--surface-sunken); border-radius: 18px; line-height: 24px;
}
.site-odj-point:not(:has(.site-odj-numero)) { grid-template-columns: 1fr auto; }
.site-odj-numero {
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-md);
  background: var(--surface); border: var(--stroke-2) solid var(--ink); font-family: var(--font-mono); font-weight: 700; font-size: 14px;
}
.site-odj-texte { min-width: 0; overflow-wrap: anywhere; padding: 2px 0; display: flex; flex-direction: column; gap: 2px; }
.site-odj-source { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.site-odj-source .il-ico { width: 16px; height: 16px; }
.site-badge-doux { border-radius: var(--radius-md); }
.site-odj-cocher, .site-odj-actions { grid-column: 1 / -1; }
.site-odj-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.site-odj-actions .il-btn-sm { border-radius: var(--radius-md); }
.site-odj-cocher .site-statut { border-radius: var(--radius-md); }
.site-odj-resume { margin: 0; padding-left: 22px; }
/* Titre d'un événement dans l'agenda : un lien vers sa page, sans changer son allure. */
.site-lien-titre { color: inherit; text-decoration: none; }
.site-lien-titre:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Pied d'un événement à venir : « Je viens », combien viennent, et l'agenda en petit bouton, sur une ligne. */
.site-pied-evenement { gap: var(--space-3); }
.site-pied-evenement .site-je-viens { flex: 1; }
.site-odj-vote { border-radius: var(--radius-md); white-space: normal; text-align: center; }

/* Petit téléphone : 3 boutons de statut côte à côte (« Confirmée », « Rejetée », « Reportée ») ne tiennent pas
   sur une ligne : le picto passe au-dessus du mot, et le mot n'est jamais coupé. */
@media (max-width: 420px) {
  .site-statuts:not(.site-statuts-2) .site-statut { flex-direction: column; gap: 2px; min-height: 54px; padding: 4px 2px; line-height: 16px; font-size: 13px; }
}
/* Alertes rangées par jour. */
.site-alertes-jour { margin: 0; padding: var(--space-3) var(--space-4) var(--space-1); font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-sunken); }
.site-alertes-jour::first-letter { text-transform: uppercase; }
/* Petit titre dans une liste (« Urgent », « À voir »). */
.il-list > .site-liste-titre { padding: var(--space-2) var(--space-4); font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-sunken); border-bottom: var(--stroke-1) solid var(--line-soft); }
/* Accueil : combien viennent, sur la carte courte d'un événement. */
.site-venir { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: 14px; font-weight: 700; }
.site-venir .il-ico { width: 16px; height: 16px; }
.site-venir > span { display: inline-flex; align-items: center; gap: var(--space-1); }
/* Formulaire : une ligne par point (ordre du jour, points reportés). */
.site-decision-texte > .site-odj-numero { flex: none; }
.site-ajouter-ligne { align-self: flex-start; }
/* Aperçu dans une fenêtre : la carte garde son allure, sans déborder. */
.site-apercu { min-width: 0; }
.site-apercu > .il-card { box-shadow: none; }
/* Visiteur : tout ce qu'il voit est public ; l'étiquette « Public » est inutile. */
.site-visiteur .site-badge-public { display: none; }
.site-visiteur .il-row:has(> .site-badge-public:only-child) { display: none; }

/* Connexion / création de compte : deux gros boutons de même taille */
.site-choix-entree { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.site-choix-entree .il-btn { min-height: 56px; min-width: 0; padding-inline: var(--space-2); }

/* Deux gros boutons l'un sous l'autre : jamais collés */
.site-serre > .il-btn-block + .il-btn-block { margin-top: var(--space-2); }
/* Encadré qui finit par des boutons : la marge du bas = celle des côtés */
.il-empty.site-empty-boutons { padding-bottom: var(--space-5); }
/* Accueil : zone vide (pas de message épinglé) = pas d'espace en trop, les deux colonnes commencent au même niveau */
.site-colonne > div:empty { display: none; }
/* Petits encadrés d'info : même arrondi que les autres grands blocs (pas en pilule, moche sur plusieurs lignes) */
.site-main .il-alert-compact { border-radius: var(--radius-lg); }
:is(.il-card, .il-modal, .il-sheet) .il-alert-compact { border-radius: var(--radius-md); }
/* Résultat du vote rapide d'un point : une petite ligne sous son texte, l'icône en couleur */
.site-odj-resultat { display: inline-flex; align-items: flex-start; gap: var(--space-1); font-size: 14px; line-height: 20px; font-weight: 600; }
.site-odj-resultat .il-ico { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.site-odj-resultat.is-adopte .il-ico { color: var(--success); }
.site-odj-resultat.is-rejete .il-ico, .site-odj-resultat.is-encours .il-ico { color: var(--red-500); }
.site-odj-resultat.is-egalite .il-ico, .site-odj-resultat.is-neutre .il-ico { color: var(--ink-muted); }
.site-odj-adoption { margin: 0; }