/* ============================================================
   Wdraw — feuille de style
   Palette ancrée Shotokan : papier washi, encre sumi, indigo du gi,
   accent rouge hinomaru. Repère de rang = pastille de ceinture.
   ============================================================ */

:root {
  --paper:   #F7F5F0;
  --card:    #FFFFFF;
  --ink:     #16161A;
  --ink-soft:#54515A;
  --line:    #E2DDD3;
  --indigo:  #243B6B;
  --indigo-d:#1A2C50;
  --red:     #C8362B;
  --ok-bg:   #E8F2EA;  --ok-fg: #1F6B3A;
  --err-bg:  #FBEAE8;  --err-fg: #9B2B22;
  --radius:  10px;
  --shadow:  0 1px 2px rgba(22,22,26,.06), 0 8px 24px rgba(22,22,26,.05);
  --maxw:    1040px;
  --font-display: "Zilla Slab", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0 0 .4em; letter-spacing: -0.01em; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0 0 1rem; }

/* ---------------- En-tête ---------------- */
.site-header {
  background: var(--indigo);
  color: #fff;
  border-bottom: 3px solid var(--red);
}
.site-header .bar {
  max-width: var(--maxw); margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: #fff; }
.brand:hover { text-decoration: none; }
.hinomaru { width: 22px; height: 22px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(255,255,255,.18); flex: none; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; align-items: center; }
.nav a, .nav .navinfo {
  color: #E8EAF2; padding: 8px 13px; border-radius: 8px; font-size: 1.08rem; font-weight: 500;
}
.nav a:hover { background: rgba(255,255,255,.12); text-decoration: none; }
.nav a.active { background: rgba(255,255,255,.18); color: #fff; }
.nav .navinfo { color: #B9C0D6; font-size: .95rem; }

/* ---------------- Conteneur ---------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 28px 20px 64px; }
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 600; color: var(--red); margin-bottom: 4px; }
.muted { color: var(--ink-soft); }

/* ---------------- Cartes ---------------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; margin-bottom: 18px; }
.card-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ---------------- Tableaux ---------------- */
table.data { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.data th, table.data td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: .94rem; }
table.data thead th { background: #F0EDE6; font-family: var(--font-display); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: #FBFAF7; }
.tcenter { text-align: center; }
.tright  { text-align: right; }

/* ---------------- Pastille ceinture ---------------- */
.belt { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.belt .dot { width: 13px; height: 13px; border-radius: 3px; border: 1px solid rgba(0,0,0,.22); flex: none; }

/* ---------------- Badges activité ---------------- */
.tags { display: flex; gap: 5px; flex-wrap: wrap; }
.tag { font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #EEF1F8; color: var(--indigo); border: 1px solid #DCE2F0; }
.tag.off { background: #F3F1EC; color: #B4AEA3; border-color: var(--line); }

/* ---------------- Boutons ---------------- */
.btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--indigo); background: var(--indigo); color: #fff; padding: 9px 16px; border-radius: 8px; transition: background .15s, transform .02s; }
.btn:hover { background: var(--indigo-d); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: #fff; color: var(--indigo); }
.btn.secondary:hover { background: #F0EDE6; }
.btn.danger { background: #fff; color: var(--red); border-color: var(--red); }
.btn.danger:hover { background: var(--err-bg); }
.btn.small { padding: 5px 11px; font-size: .82rem; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------------- Formulaires ---------------- */
/* (2026-09-07, Alain) formulaires plus compacts : moins d'air entre les champs, champs moins hauts */
.form-grid { display: grid; gap: 9px 18px; grid-template-columns: repeat(2, 1fr); }
.form-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .form-grid-3 { grid-template-columns: repeat(2, 1fr); } }
/* (2026-09-07, Alain) grille à 6 colonnes : champs larges (span-2) et étroits comme Sexe et Âge (span-1) */
.form-grid-6 { grid-template-columns: repeat(6, 1fr); }
.form-grid-6 .span-1 { grid-column: span 1; } .form-grid-6 .span-2 { grid-column: span 2; } .form-grid-6 .span-3 { grid-column: span 3; }
@media (max-width: 900px) { .form-grid-6 { grid-template-columns: repeat(2, 1fr); } .form-grid-6 .span-1, .form-grid-6 .span-2, .form-grid-6 .span-3 { grid-column: auto; } }
.field { display: flex; flex-direction: column; gap: 3px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
input[type=text], input[type=password], input[type=number], input[type=tel], input[type=email], input[type=date], select, textarea {
  font: inherit; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--indigo); outline-offset: 1px; border-color: var(--indigo); }
/* (2026-09-07, Alain) cases compactes : autant par ligne que la largeur le permet (≥ 190 px), marges réduites */
.checks { display: grid; gap: 6px 8px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.check { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: .9rem; line-height: 1.25; }
.check input { width: auto; }
.dob { display: flex; gap: 8px; }
.dob select { flex: 1; }

/* ---------------- Messages ---------------- */
.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 14px; font-size: .94rem; border: 1px solid; }
.flash.ok  { background: var(--ok-bg);  color: var(--ok-fg);  border-color: #BFE0C9; }
.flash.err { background: var(--err-bg); color: var(--err-fg); border-color: #F0C9C4; }

/* ---------------- Accessibilité & responsive ---------------- */
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
@media (max-width: 680px) {
  .form-grid, .form-grid-6, .checks { grid-template-columns: 1fr; }
  .nav { width: 100%; }
  table.data { display: block; overflow-x: auto; }

  /* ---- Liste des tirages : fiches empilées, pas de défilement latéral ----
     (2026-08-29) C'est la page qu'on consulte en gymnase, entre deux
     catégories, une main déjà occupée. Le tableau à cinq colonnes y devenait
     illisible : il fallait glisser vers la droite pour voir les boutons.
     Chaque tirage devient une fiche ; l'en-tête disparaît et ses libellés
     reviennent devant chaque valeur, par data-lbl. */
  #table-tirages { display: block; overflow-x: visible; border: 0; }
  #table-tirages thead { display: none; }
  #table-tirages tbody,
  #table-tirages tr,
  #table-tirages td { display: block; width: 100%; }
  #table-tirages tr {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
    padding: 12px 14px;
    margin-bottom: 12px;
  }
  #table-tirages td { border: 0; padding: 0; }
  #table-tirages td + td { margin-top: 8px; }

  /* Numéro, sexe et nombre d'inscrits : sur une seule ligne, en tête de fiche */
  #table-tirages td:first-child,
  #table-tirages td:nth-child(3),
  #table-tirages td:nth-child(4) {
    display: inline-block; width: auto; margin: 0 16px 0 0;
    font-size: .88rem; color: var(--ink-soft); text-align: left;
  }
  #table-tirages td:first-child::before { content: "#"; color: var(--ink-soft); }
  #table-tirages td:nth-child(3)::before,
  #table-tirages td:nth-child(4)::before {
    content: attr(data-lbl) " : ";
    text-transform: lowercase;
  }
  #table-tirages td:nth-child(2) { margin-top: 10px; }

  /* Le champ du titre imposait 300 px de large : c'est lui qui débordait. */
  #table-tirages input[name="titre"] { min-width: 0; width: 100%; flex: 1 1 100%; }
  #table-tirages td:nth-child(2) form.actions { gap: 8px; }
  #table-tirages td:last-child .actions { justify-content: flex-start; flex-wrap: wrap; }
  #table-tirages td:last-child .btn { flex: 1 1 auto; justify-content: center; }

  /* Barre de filtres : la recherche prend toute la largeur */
  .filtres-tirages { flex-wrap: wrap; }
  .filtres-tirages input[type="search"] { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------------- Impression (feuille de tirage) ---------------- */
@media print {
  .site-header, .actions, .no-print { display: none !important; }
  body { background: #fff; }
  .wrap { padding: 0; max-width: none; }
  .card, table.data { box-shadow: none; border-color: #999; }
}

/* ---------------- Sélecteur de langue ---------------- */
/* Bascule FR/EN/ES dans l'en-tête (le choix principal se fait via le menu
   déroulant « Langue » de la page de connexion) */
.nav .lang-switch { display: inline-flex; gap: 2px; margin-left: 6px; padding-left: 8px; border-left: 1px solid rgba(255,255,255,.22); }
.nav .lang-switch a { padding: 6px 9px; font-size: .92rem; font-weight: 600; color: #C7CDDF; }
.nav .lang-switch a.active { background: rgba(255,255,255,.18); color: #fff; }

/* ---------------- Logo ---------------- */
/* Logo dans l'en-tête (remplace la pastille + le nom si le fichier
   public/assets/logo.png est présent). */
.brand-logo { height: 34px; width: auto; display: block; }
@media (max-width: 520px) { .brand-logo { height: 28px; } }

/* Logo au-dessus du formulaire de connexion. Le logo ayant un fond sombre,
   on l'affiche dans un cadre arrondi pour un rendu net et intentionnel. */
.auth-logo { text-align: center; margin: 0 0 16px; }
.auth-logo img {
  max-width: 100%; height: auto; display: block; margin: 0 auto;
  border-radius: 12px; box-shadow: var(--shadow);
}

/* Bannière logo complète sur l'accueil public */
.hero-logo { max-width: 760px; margin: 6px auto 22px; }
.hero-logo img { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: var(--shadow); }

/* ---------------- Invitations ---------------- */
.invit-pre {
  white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: .82rem; line-height: 1.5;
  background: #FBFAF7; border: 1px dashed var(--line); border-radius: 8px;
  padding: 14px 16px; margin: 0;
}
code.pw {
  background: #FFF7E6; border: 1px solid #F0DBA8; padding: 2px 8px;
  border-radius: 6px; font-weight: 700; letter-spacing: .5px; white-space: nowrap;
}
.copywrap { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.copybtn {
  border: 1px solid #C9CFDB; background: #fff; color: #33415C;
  border-radius: 6px; padding: 2px 8px; font-size: .75rem; font-weight: 600;
  cursor: pointer; line-height: 1.4;
}
.copybtn:hover { background: #EEF1F7; }
.copybtn.done { background: #E7F6EC; border-color: #9BD3AC; color: #1E7A3C; }
@media print { .copybtn { display: none; } }

/* Épreuve hors critères du devis AKJQ (liste des participants) */
.tag.nc {
  background: #FDECEA; border: 1px solid #E74C3C; color: #A93226; font-weight: 700;
}

/* Champ en erreur dans un formulaire : la saisie est conservée,
   seule la case fautive est surlignée en rouge. */
.field.err input, .field.err select {
  border-color: #E74C3C; background: #FDF3F2;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, .12);
}
.field.err label { color: #A93226; font-weight: 700; }

/* (2026-09-02) Un champ obligatoire manquant est signalé COMME LA CASE DE
   CONSENTEMENT : cadre rouge et fond rouge pâle autour de toute la case,
   étiquette comprise — et non plus seulement autour de la ligne de saisie,
   qui passait inaperçue au milieu d'un long formulaire.
   Le cadre est peint par box-shadow et non par une bordure : il ne prend
   aucune place, donc rien ne se déplace quand l'erreur apparaît. */
.field.err {
  border-radius: 8px;
  background: #FDECEA;
  box-shadow: 0 0 0 5px #FDECEA, 0 0 0 6.5px #E74C3C;
}
.check.err {
  border-color: #E74C3C !important; background: #FDECEA;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, .12);
}

/* (2026-09-01) CHAMPS OBLIGATOIRES MANQUANTS — trois battements au retour du
   formulaire pour que l'œil les trouve sans les chercher, puis le surlignage
   rouge reste en place tant que le champ n'est pas corrigé. Trois battements
   plutôt qu'un clignotement perpétuel : au-delà, l'écran fatigue et devient
   pénible pour les personnes sensibles au mouvement. Le repère, lui, ne
   disparaît jamais. */
@keyframes wd-battement {
  0%, 100% { box-shadow: 0 0 0 3px rgba(231, 76, 60, .12); }
  50%      { box-shadow: 0 0 0 8px rgba(231, 76, 60, .55); }
}
.field.err input,
.field.err select,
.check.err {
  animation: wd-battement .6s ease-in-out 3;
}
@media (prefers-reduced-motion: reduce) {
  .field.err input, .field.err select, .check.err { animation: none; }
}
@media print {
  .invit-card { page-break-after: always; border: none; box-shadow: none; }
  .invit-pre { border: none; background: #fff; font-size: .9rem; }
}
.invit-lang { width: auto; padding: 6px 10px; font-size: .85rem; }

/* ---------------- Distinction visuelle des rôles ----------------
   Repère inspiré des ceintures :
   - Dojo (write)        → barre indigo, liseré rouge (présentation habituelle)
   - Organisateur (orga) → barre BRUNE, liseré ambre (ceinture brune)
   - Responsable (admin) → barre NOIRE, liseré doré (ceinture noire)          */

/* Insigne de rôle dans l'en-tête — bien visible dans le coin droit,
   pour savoir d'un coup d'œil dans quel espace on se trouve. */
.rolebadge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: 999px; margin-left: 8px;
  font-size: 1.05rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  border: 2px solid rgba(255,255,255,.45); color: #fff; white-space: nowrap;
}
.rolebadge::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .9; }
.rb-write { background: rgba(255,255,255,.12); }
.rb-read  { background: rgba(255,255,255,.08); color: #C9CDD8; }
.rb-orga  { background: #8A5A2B; border-color: #E0A44C; color: #FFE2B8; }
.rb-admin { background: #000;    border-color: #D9A62E; color: #F2CD6B; }

/* Organisateur : ceinture brune */
body.role-orga .site-header { background: #4A3120; border-bottom-color: #E0952B; }
body.role-orga .nav a:hover { background: rgba(255,255,255,.14); }
body.role-orga .nav a.active { background: rgba(255,255,255,.2); }
body.role-orga .hinomaru { background: #E0952B; }

/* Responsable Wdraw2 : ceinture noire */
body.role-admin .site-header { background: #141417; border-bottom-color: #D9A62E; }
body.role-admin .nav a:hover { background: rgba(255,255,255,.14); }
body.role-admin .nav a.active { background: rgba(255,255,255,.2); }
body.role-admin .hinomaru { background: #D9A62E; }

/* ---------------- Contrat de location ---------------- */
.contract-sheet { max-width: 820px; margin: 0 auto; }
.ct-head { display: flex; align-items: center; gap: 18px; border-bottom: 3px solid var(--indigo); padding-bottom: 14px; margin-bottom: 16px; }
.ct-head img { height: 52px; border-radius: 8px; }
.ct-title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--indigo); }
.ct-resp { font-size: .85rem; color: var(--ink-soft); margin-top: 3px; }
.ct-vars { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: .92rem; }
.ct-vars td { border: 1px solid var(--line); padding: 7px 10px; }
.ct-vars td:nth-child(odd) { background: #F0EDE6; font-weight: 600; width: 17%; color: var(--ink-soft); font-size: .8rem; }
.ct-clauses { padding-left: 20px; font-size: .92rem; }
.ct-clauses li { margin-bottom: 9px; }
.ct-sign { display: flex; gap: 40px; margin-top: 34px; }
.ct-sign > div { flex: 1; font-size: .9rem; }
.ct-line { border-bottom: 1px solid var(--ink); height: 34px; margin-bottom: 6px; }
@media print {
  .contract-sheet { border: none; box-shadow: none; max-width: none; padding: 0; }
  .ct-clauses { font-size: .85rem; }
}

/* ---------------- Vérification des tirages ---------------- */
.rev-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); align-items: start; }
.rev-card { padding: 16px 16px 12px; margin-bottom: 0; }
.rev-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.rev-list { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: rev; }
.rev-row { counter-increment: rev; padding: 7px 9px 7px 30px; position: relative; border-radius: 7px; cursor: pointer; font-size: .9rem; line-height: 1.35; }
.rev-row::before { content: counter(rev); position: absolute; left: 8px; top: 8px; font-size: .72rem; font-weight: 700; color: var(--ink-soft); }
.rev-row:hover { background: #F0EDE6; }
.rev-row.sel { background: #EEF1F8; outline: 2px solid var(--indigo); }
.rev-row.nc { background: var(--err-bg); }
.rev-row.nc:hover { background: #F6DAD6; }
.tag.ncflag { background: var(--err-bg); color: var(--err-fg); border-color: #F0C9C4; margin-left: 6px; }
.dropbtn { display: none; white-space: nowrap; }
body.moving .dropbtn { display: inline-flex; }
body.moving .rev-card { outline: 2px dashed #C7CDDF; outline-offset: 2px; }
.movebar {
  display: none; position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 50;
  background: var(--indigo); color: #fff; padding: 12px 18px; border-radius: 12px;
  box-shadow: 0 8px 30px rgba(22,22,26,.35); gap: 14px; align-items: center; font-size: .92rem; max-width: 92vw;
}

/* ---------------- Bloc responsable de compétition ---------------- */
.orga-bloc { border-top: 1px solid var(--line); padding-top: 12px; }
.orga-id { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }

/* ---------------- Rapport de la compétition ---------------- */
.rpt-total { display: flex; gap: 26px; flex-wrap: wrap; justify-content: flex-end; align-items: center; margin-top: 12px; font-size: .95rem; }
.rpt-apayer { background: var(--indigo); color: #fff; padding: 9px 16px; border-radius: 9px; }
.rpt-apayer strong { color: #FFD34D; }
@media print { .rpt-dojo { page-break-after: always; border: none; box-shadow: none; } }


/* ---------------- Saisie des résultats (arbre cliquable) ---------------- */
.res-cols { display: flex; gap: 18px; align-items: stretch; overflow-x: auto; padding-bottom: 8px; }
.res-col { min-width: 240px; flex: 1; display: flex; flex-direction: column; }
.res-col h3 { margin: 0 0 10px; font-size: .95rem; }
.res-col .res-match { margin: auto 0; }
.res-match {
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  padding: 6px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.res-part {
  display: block; width: 100%; text-align: left; padding: 7px 10px;
  border: 1px solid transparent; border-radius: 8px; font-size: .9rem; background: none;
}
.res-part.cliquable { cursor: pointer; }
.res-part.cliquable:hover { background: #EEF1F7; border-color: #C9CFDB; }
.res-part.gagnant { background: #E7F6EC; border-color: #9BD3AC; color: #1E7A3C; font-weight: 700; }
.res-part.vide, .res-part.passe { color: #9A958C; }

@media print {
  .prog-aire { page-break-after: always; border: none; box-shadow: none; }
}

/* ---------------- Page d'accueil (refonte 25-07-2026) ---------------- */
.hp-hero {
  background: linear-gradient(135deg, var(--indigo-d) 0%, var(--indigo) 62%, #2E4A85 100%);
  border-radius: 14px; box-shadow: var(--shadow);
  border-bottom: 3px solid var(--red);
  color: #fff; text-align: center;
  padding: 44px 28px 40px; margin: 4px 0 34px;
}
.hp-hero img.mark { height: 68px; width: auto; margin-bottom: 18px; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.hp-hero h1 { color: #fff; font-size: clamp(1.9rem, 4.6vw, 2.7rem); margin: 0 0 12px; }
.hp-hero .sub { color: #DCE3F2; max-width: 700px; margin: 0 auto 26px; font-size: 1.18rem; line-height: 1.6; }
/* Note d'accès (visiteur non connecté) : dans le bandeau, sous le bouton */
.hp-note { color: #DCE3F2; max-width: 720px; margin: 22px auto 0; font-size: 1.08rem;
  line-height: 1.65; border-top: 1px solid rgba(255,255,255,.22); padding-top: 18px; }
.hp-hero .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hp-hero .btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,.45); color: #fff; }
.hp-hero .btn.ghost:hover { background: rgba(255,255,255,.1); }

.hp-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.hp-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.hp-top { display: flex; gap: 14px; align-items: flex-start; }
.hp-date { flex: none; width: 62px; text-align: center; background: var(--indigo); color: #fff;
  border-radius: 10px; padding: 8px 4px 7px; line-height: 1.1; }
.hp-date .d { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; display: block; }
.hp-date .m { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; display: block; margin-top: 2px; color: #C9D2E6; }
.hp-date .y { font-size: .72rem; display: block; color: #C9D2E6; }
.hp-card h2 { font-size: 1.15rem; margin: 2px 0 4px; }
.hp-lieu { color: var(--ink-soft); font-size: .86rem; }
.hp-desc { color: var(--ink-soft); font-size: .9rem; margin: 0; flex: 1; }
.hp-card .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.hp-open { display: inline-block; background: var(--ok-bg); color: var(--ok-fg);
  border-radius: 999px; font-size: .76rem; font-weight: 600; padding: 3px 11px; }
.hp-open::before { content: "●"; font-size: .6rem; vertical-align: 1px; margin-right: 5px; }

.hp-past { margin-top: 34px; }
.hp-past summary { cursor: pointer; font-family: var(--font-display); font-weight: 700;
  font-size: 1.1rem; color: var(--ink-soft); list-style: none; }
.hp-past summary::-webkit-details-marker { display: none; }
.hp-past summary::after { content: " ▸"; color: var(--red); }
.hp-past[open] summary::after { content: " ▾"; }
.hp-past table { margin-top: 12px; }
@media (max-width: 560px) { .hp-hero { padding: 32px 18px 30px; } }

/* ---- Accueil : choix de l'association ---- */
.hp-assos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
a.hp-asso { display: flex; align-items: center; gap: 16px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px; color: var(--ink); transition: transform .08s ease, border-color .08s ease; }
a.hp-asso:hover { transform: translateY(-2px); border-color: var(--indigo); }
.hp-asso .code { flex: none; width: 58px; height: 58px; border-radius: 12px; background: var(--indigo);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem; letter-spacing: .02em; }
.hp-asso .mid { flex: 1; min-width: 0; }
.hp-asso h2 { font-size: 1.12rem; margin: 0 0 4px; }
.hp-asso .st { color: var(--ink-soft); font-size: .84rem; }
.hp-asso .st .ok { color: var(--ok-fg); font-weight: 600; }
.hp-asso .go { flex: none; color: var(--red); font-size: 1.3rem; }

/* ===== Mode compétition (super-admin) : 2e ligne de menu ===== */
.nav-compe { border-top: 1px solid rgba(255,255,255,.14); background: rgba(122, 83, 32, .35);
  display: flex; align-items: center; gap: 14px; padding-top: 8px; padding-bottom: 8px; }
.nav-compe .nc-label { color: #F5D8A0; font-weight: 700; white-space: nowrap; font-size: .95rem; }
.nav-compe .nav { flex-wrap: wrap; }
.nav-compe .nav a { font-size: .95rem; }
.nav-compe .nc-quit { border: 1px solid rgba(255,255,255,.4); border-radius: 8px;
  padding: 2px 10px; color: #fff; }
.nav-compe .nc-quit:hover { background: rgba(255,255,255,.12); }

/* ---------------- Sections repliables (page Tirages) ----------------
   La page Tirages regroupe beaucoup d'outils : chaque outil vit dans une
   section repliée par défaut — la liste des tirages reste l'essentiel. */
details.acc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 14px; padding: 0; }
details.acc > summary { cursor: pointer; list-style: none; padding: 15px 20px; font-weight: 700; font-size: 1.02rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; user-select: none; }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::before { content: '▸'; color: var(--indigo); transition: transform .15s ease; flex: none; }
details.acc[open] > summary::before { transform: rotate(90deg); }
details.acc > summary:hover { background: #F5F2EB; border-radius: var(--radius); }
details.acc > summary .acc-hint { font-weight: 400; font-size: .84rem; color: #8A8578; }
details.acc > .acc-body { padding: 2px 20px 20px; }

/* Barre de filtres de la liste des tirages */
.filtres-tirages { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.filtres-tirages input[type="search"] { flex: 1; min-width: 220px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.filtres-tirages select { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: #fff; }

/* ===== (2026-09-04) PAGE « Démonstration du programme Wdraw » (?p=presentation) ===== */
.pr-hero { background: linear-gradient(135deg, var(--indigo-d), #2E4A85); color:#fff; border-radius: var(--radius); padding: 44px 32px 40px; text-align:center; border-bottom: 3px solid var(--red); box-shadow: var(--shadow); }
.pr-hero img.mark { height: 64px; width:auto; margin-bottom: 16px; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.pr-hero h1 { color:#fff; font-size: clamp(1.9rem, 4.6vw, 2.7rem); margin: 0 0 10px; text-wrap: balance; }
.pr-hero .sub { color:#DCE3F2; max-width: 680px; margin: 0 auto 22px; font-size: 1.15rem; line-height: 1.6; }
.pr-hero .actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.pr-hero .btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,.5); color:#fff; }
.pr-hero .btn.ghost:hover { background: rgba(255,255,255,.1); }
.pr-hero .chips { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top: 22px; }
.pr-hero .chip { font-size:.8rem; font-weight:600; letter-spacing:.04em; padding: 4px 11px; border-radius: 999px; background: rgba(255,255,255,.12); color:#E6EBF7; border:1px solid rgba(255,255,255,.18); }
.pr-section { margin-top: 44px; }
.pr-section > h2 { font-size: 1.55rem; margin-bottom: 6px; text-wrap: balance; }
.pr-section > .lead { color: var(--ink-soft); max-width: 62ch; margin: 0 0 18px; }
.pr-grid { display:grid; gap:14px; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); }
.pr-feat { background: var(--card); border:1px solid var(--line); border-top: 3px solid var(--red); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 18px 16px; }
.pr-feat h3 { font-size: 1.08rem; margin: 0 0 6px; }
.pr-feat p { margin:0; color: var(--ink-soft); font-size:.95rem; line-height:1.5; }
.pr-feat ul { margin: 10px 0 0; padding-left: 18px; color: var(--ink); font-size:.92rem; line-height:1.5; }
.pr-feat li + li { margin-top: 3px; }
.pr-roles { display:grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; background: var(--card); box-shadow: var(--shadow); }
.pr-role { padding: 18px 18px 16px; border-right: 1px solid var(--line); position: relative; }
.pr-role:last-child { border-right: 0; }
.pr-role .who { display:flex; align-items:center; gap:8px; margin-bottom: 8px; }
.pr-role .who .ico { font-size: 1.35rem; }
.pr-role .who h3 { font-size: 1.02rem; margin: 0; }
.pr-role code { font-size: .78rem; background: #F0EDE6; padding: 2px 7px; border-radius: 6px; color: var(--indigo); }
.pr-role ul { margin: 0; padding-left: 16px; font-size:.9rem; line-height:1.5; color: var(--ink); }
.pr-role .arrow { position:absolute; right:-11px; top: 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--indigo); color:#fff; font-size:.8rem; display:flex; align-items:center; justify-content:center; z-index:1; }
.pr-role:last-child .arrow { display:none; }
@media (max-width: 700px) { .pr-role { border-right:0; border-bottom:1px solid var(--line);} .pr-role .arrow { display:none; } }
.pr-steps { counter-reset: st; display:grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(165px,1fr)); }
.pr-step { background: var(--card); border:1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 14px; box-shadow: var(--shadow); }
.pr-step .n { font-family: var(--font-display); font-weight:700; font-size: 1.9rem; color: var(--red); line-height:1; }
.pr-step h3 { font-size: 1rem; margin: 6px 0 4px; }
.pr-step p { margin:0; color: var(--ink-soft); font-size:.9rem; line-height:1.5; }
.pr-oly { background: var(--card); border:1px solid var(--line); border-left: 4px solid var(--indigo); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); display:grid; gap: 20px; grid-template-columns: 1.1fr 1fr; }
@media (max-width: 760px) { .pr-oly { grid-template-columns: 1fr; } }
.pr-oly h3 { font-size: 1.05rem; margin: 0 0 8px; }
.pr-oly ol, .pr-oly ul { margin:0; padding-left: 18px; font-size:.93rem; line-height:1.55; }
.pr-oly li + li { margin-top: 4px; }

.pr-ex-grid { display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(340px,1fr)); }
.pr-ex { background: var(--card); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px 14px; overflow-x:auto; }
.pr-ex-head h3 { font-size: 1.02rem; margin: 0 0 10px; }
.pr-ex svg { width:100%; height:auto; display:block; }
.pr-tbl { width:100%; border-collapse: collapse; font-size:.9rem; font-variant-numeric: tabular-nums; }
.pr-tbl th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-soft); border-bottom: 1px solid var(--line); padding: 6px 8px; }
.pr-tbl td { padding: 7px 8px; border-bottom: 1px solid #EFEBE3; }
.pr-tbl td.x { color:#A8A29A; text-decoration: line-through; }
.pr-ex-note { margin: 10px 0 0; font-size:.86rem; color: var(--ink-soft); line-height:1.5; }

.pr-cal-wrap { display:grid; grid-template-columns: 190px 1fr; gap: 16px; align-items:start; }
@media (max-width: 480px) { .pr-cal-wrap { grid-template-columns: 1fr; } }
.pr-cal-phone { background:#1A2C50; color:#fff; border-radius: 22px; padding: 14px 12px 12px; box-shadow: 0 8px 24px rgba(22,22,26,.25); font-variant-numeric: tabular-nums; }
.pr-cal-top { font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:#B9C0D6; text-align:center; margin-bottom: 8px; }
.pr-cal-row { display:flex; justify-content:space-between; align-items:center; background: rgba(255,255,255,.08); border-radius: 8px; padding: 6px 10px; margin-bottom: 5px; font-size:.9rem; }
.pr-cal-row .pr-cal-v { font-family: var(--font-display); font-weight:700; font-size: 1.15rem; }
.pr-cal-row.x { opacity:.45; }
.pr-cal-row.x .pr-cal-v { text-decoration: line-through; }
.pr-cal-total { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top: 8px; padding: 8px 10px; background:#C8362B; border-radius: 8px; font-size:.75rem; }
.pr-cal-total strong { font-family: var(--font-display); font-size: 1.5rem; }
.pr-cal-btn { margin-top: 8px; text-align:center; font-size:.8rem; color:#DCE3F2; border:1px solid rgba(255,255,255,.35); border-radius: 8px; padding: 5px; }

.pr-msg-box { background:#F0EDE6; border-radius: 12px; padding: 12px; display:flex; flex-direction:column; gap:8px; }
.pr-msg { max-width: 82%; border-radius: 12px; padding: 8px 11px; font-size:.88rem; line-height:1.4; }
.pr-msg.l { align-self:flex-start; background:#fff; border:1px solid var(--line); }
.pr-msg.r { align-self:flex-end; background: var(--indigo-d); color:#fff; }
.pr-msg-who { font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; opacity:.7; margin-bottom:2px; }
.pr-msg-t { font-size:.7rem; opacity:.6; margin-top:3px; text-align:right; }
.pr-msg-att { margin-top:6px; font-size:.8rem; background:#F0EDE6; border-radius:6px; padding:3px 8px; display:inline-block; color: var(--indigo); }
.pr-msg-trans { font-size:.75rem; color: var(--ink-soft); text-align:center; margin-top:2px; }
.pr-tbl.grid td { text-align:center; }
.pr-tbl.grid td:first-child, .pr-tbl.grid td:nth-child(3) { text-align:left; }
.pr-tbl.grid td.ok { color: var(--ok-fg); font-weight:700; }
.pr-tbl.grid td.warn { background: var(--err-bg); color: var(--err-fg); font-weight:700; }
.pr-tbl.grid tr.foot td { border-top: 2px solid var(--line); border-bottom:0; color: var(--ink-soft); font-size:.82rem; }
.pr-grid-warn { margin-top:10px; background: var(--err-bg); color: var(--err-fg); border-radius: 8px; padding: 7px 10px; font-size:.85rem; }

.pr-price { margin-top: 14px; background: var(--card); border:1px solid var(--line); border-left: 4px solid var(--red); border-radius: var(--radius); padding: 18px 20px; display:flex; gap: 18px; align-items:center; justify-content:space-between; flex-wrap:wrap; box-shadow: var(--shadow); }
.pr-price p { margin: 4px 0 0; color: var(--ink-soft); max-width: 58ch; }

.pr-amounts { display:flex; gap: 28px; flex-wrap:wrap; margin: 6px 0 4px; }
.pr-amounts .amt { display:flex; flex-direction:column; }
.pr-amounts .big { font-family: var(--font-display); font-weight:700; font-size: 2.2rem; line-height:1; color: var(--indigo); font-variant-numeric: tabular-nums; }
.pr-amounts .lbl { font-size:.88rem; color: var(--ink-soft); margin-top: 4px; }

.pr-fiche { display:grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; background:#FBFAF7; border:1px solid var(--line); border-radius: 10px; padding: 12px; font-size:.85rem; }
.pr-fiche .ferr { grid-column: 1 / -1; background: var(--err-bg); color: var(--err-fg); border-radius: 6px; padding: 6px 10px; font-size:.82rem; }
.pr-fiche .ff { display:flex; flex-direction:column; gap:3px; }
.pr-fiche .ff.full { grid-column: 1 / -1; }
.pr-fiche label { font-size:.7rem; font-weight:600; color: var(--ink-soft); }
.pr-fiche .fv { background:#fff; border:1px solid var(--line); border-radius: 6px; padding: 5px 8px; min-height: 1.6em; }
.pr-fiche .ff.err label { color: var(--err-fg); }
.pr-fiche .ff.err .fv { border: 2px solid var(--red); background: var(--err-bg); }
.pr-fiche .fsec { grid-column: 1 / -1; font-family: var(--font-display); font-weight:700; font-size:.92rem; margin-top: 4px; }
.pr-fiche .fchk { grid-column: 1 / -1; display:flex; flex-wrap:wrap; gap:6px; }
.pr-fiche .cb { display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size:.8rem; }
.pr-fiche .cb i { width:14px; height:14px; border:1.5px solid #B9B3A6; border-radius:3px; font-style:normal; font-size:.7rem; line-height:12px; text-align:center; color:#fff; }
.pr-fiche .cb.on i { background: var(--indigo); border-color: var(--indigo); }
.pr-fiche .fbtn { grid-column: 1 / -1; background: var(--indigo); color:#fff; text-align:center; border-radius: 8px; padding: 7px; font-weight:600; font-size:.85rem; margin-top: 2px; }

.pr-callout { margin-top: 18px; background: var(--card); border:1px solid var(--line); border-left: 4px solid var(--indigo); border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow); max-width: 70ch; }
.pr-callout p { margin: 6px 0 0; font-size:.95rem; line-height:1.55; }
.pr-cta { margin-top: 44px; background: var(--indigo-d); color:#fff; border-radius: var(--radius); padding: 30px 28px; display:flex; gap: 20px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.pr-cta h2 { color:#fff; margin:0 0 4px; font-size:1.4rem; }
.pr-cta p { margin:0; color:#DCE3F2; max-width: 56ch; }
.pr-cta .btn.secondary { background:#fff; color: var(--indigo); }
.pr-foot { margin-top: 22px; color: var(--ink-soft); font-size:.88rem; text-align:center; }
.pr-kicker { font-size:.85rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#DCE3F2; margin-bottom: 6px; }
.pr-checks { list-style:none; margin: 14px 0 0; padding:0; display:grid; gap: 8px 18px; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); max-width: 820px; }
.pr-checks li { position:relative; padding-left: 28px; font-size:.98rem; line-height:1.45; }
.pr-checks li::before { content:"✓"; position:absolute; left:0; top:0; width:20px; height:20px; border-radius:50%; background: var(--ok-bg); color: var(--ok-fg); font-weight:700; font-size:.8rem; text-align:center; line-height:20px; }
.pr-ex-one { max-width: 720px; }
.pr-tabs { display:flex; gap:6px; justify-content:center; margin: 0 0 14px; }
.pr-tabs a { text-decoration:none; font-weight:600; font-size:.92rem; padding: 7px 16px; border-radius: 999px; border:1px solid var(--line); background: var(--card); color: var(--ink-soft); }
.pr-tabs a.on { background: var(--indigo); border-color: var(--indigo); color:#fff; }
.pr-pts { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:10px; }
.pr-pts-h { font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-soft); margin-right:4px; }
.pr-pt { background:#EEF2FA; border:1px solid #C9D3EA; color: var(--indigo); border-radius: 999px; padding: 3px 10px; font-size:.82rem; font-variant-numeric: tabular-nums; }
.pr-pt b { font-weight:700; }

/* (2026-09-06) Bouton « Formulaires d'inscription » du menu principal — encadré
   pour être repéré d'un coup d'œil, à côté de Participants / Inscriptions,
   sur ordinateur, tablette et téléphone. */
.nav a.nav-forms { border: 1.5px solid rgba(255,255,255,.65); border-radius: 10px; padding: 3px 11px; font-weight: 700; white-space: nowrap; }
.nav a.nav-forms:hover { background: rgba(255,255,255,.2); }