/* =========================================================================
   FEIZ E BREIZH — POLE CLERGE-CEREMONIES — feuille de style commune.

   PALETTE calée le 11/09/2026 sur deux captures d'écran de feiz.bzh envoyées
   par Stéfan (le site est en JavaScript, illisible par récupération directe) :
   en-tête blanc, blocs de fond noirs, accent bleu marine/cyan pour les
   actions (bouton « Inscriptions »), touches dorées dans l'illustration du
   blason mais PAS dominantes contrairement à mon premier essai. À affiner
   encore si Stéfan objecte une fois le site vu en vrai.

   Même construction que Couaridouc et Recythal : jetons CSS, .btn/.btn-sec
   uniques, mêmes composants (cartes, tuiles, volets d'explication, tableaux).
   Toujours clair par défaut (pas de bascule automatique au thème système),
   comme Recythal : à revoir si Stéfan veut un bouton Clair/Sombre plus tard.
   ========================================================================= */
:root{
  color-scheme: light;
  --page:#f4f5f6;
  --surface-1:#ffffff;
  --text-primary:#14161a;
  --text-secondary:#565c66;
  --text-muted:#868d99;
  --border:#dfe2e6;
  --border-strong:#c3c8d0;
  --accent:#1d4d78;
  --on-accent:#ffffff;
  --accent-soft:#e4edf4;
  --danger:#a3372a;
  --hover-wash:rgba(29,77,120,.07);
  --radius:12px;
  --radius-sm:8px;
  --side-bg:#0d0e10;
  --side-border:#26282c;
  --side-text:#c9cdd3;
  --side-active-bg:#1d4d78;
  --side-active-text:#ffffff;
  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --page:#0d0e10;
  --surface-1:#181a1d;
  --text-primary:#eceef0;
  --text-secondary:#aeb3ba;
  --text-muted:#767c85;
  --border:#2a2d31;
  --border-strong:#3a3e44;
  --accent:#5b9bcf;
  --on-accent:#0d1620;
  --accent-soft:#1c2b38;
  --danger:#e0857a;
  --hover-wash:rgba(91,155,207,.12);
  --side-bg:#08090a;
  --side-border:#1e2023;
  --side-text:#b6bcc4;
  --side-active-bg:#1c2b38;
  --side-active-text:#8fc0eb;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--page);color:var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height:1.45;
}
a{color:var(--accent);}
h1{font-family:var(--font-serif);letter-spacing:-.01em;}
h2,h3{font-family:inherit;}

/* --- Structure générale : barre latérale + contenu --- */
.layout{display:flex;min-height:100vh;}
.side{width:220px;flex:none;background:var(--side-bg);border-right:1px solid var(--side-border);
  padding:18px 12px;display:flex;flex-direction:column;gap:2px;}
.side .marque{display:flex;align-items:center;gap:9px;padding:6px 8px 18px;font-weight:700;
  font-size:16px;color:var(--side-active-text);}
.side a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--radius-sm);
  color:var(--side-text);text-decoration:none;font-size:14px;}
.side a:hover{background:rgba(255,255,255,.06);}
.side a.actif{background:var(--side-active-bg);color:var(--side-active-text);font-weight:600;}

.nav-ico{width:18px;height:18px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.main{flex:1;min-width:0;}
.app{max-width:1080px;margin:0 auto;padding:28px 24px 72px;}

/* --- Menu mobile : barre fine en haut, tiroir coulissant à GAUCHE ---
   Mêmes conventions que Couaridouc et Recythal. */
.nav-barre{display:none;}
.nav-fond{display:none;}
@media(max-width:820px), (max-height:500px){
  .layout{flex-direction:column;}
  .nav-barre{
    display:flex;align-items:center;gap:10px;
    position:fixed;top:0;left:0;right:0;height:52px;z-index:60;
    background:var(--side-bg);border-bottom:1px solid var(--side-border);padding:0 12px;
  }
  .nav-burger{
    border:1px solid var(--side-border);background:var(--hover-wash);color:var(--side-active-text);
    border-radius:var(--radius-sm);font-size:18px;line-height:1;padding:6px 11px;cursor:pointer;font-family:inherit;
  }
  .nav-barre img{width:26px;height:26px;object-fit:cover;border-radius:3px;}
  .nav-barre .titre{font-family:var(--font-serif);font-size:16px;font-weight:600;color:var(--side-active-text);}

  .side{
    position:fixed;top:0;left:0;bottom:0;width:250px;z-index:80;
    overflow-y:auto;border-right:1px solid var(--side-border);border-bottom:none;
    padding:18px 12px;transform:translateX(-100%);transition:transform .25s ease;
    box-shadow:2px 0 16px rgba(0,0,0,.35);flex-direction:column;
  }
  .side.ouvert{transform:translateX(0);}
  .side .marque{display:flex;}

  .nav-fond.visible{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:70;}

  .main{padding-top:52px;}
}
@media (prefers-reduced-motion: reduce){ .side{transition:none;} }

header.top h1{font-size:26px;margin:0;}
header.top p{margin:4px 0 0;color:var(--text-secondary);font-size:14px;}
.subtle{font-size:13px;color:var(--text-secondary);}
.aide{font-size:12px;color:var(--text-muted);line-height:1.45;margin:4px 0 0;}
.msg{font-size:12px;color:var(--text-secondary);}
.msg.err{color:var(--danger);font-weight:600;}
.msg.ok{color:var(--accent);font-weight:600;}

/* --- Boutons : source unique --- */
.btn{
  display:inline-block;box-sizing:border-box;
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  padding:8px 12px;font-size:14px;line-height:1.2;
  background:var(--surface-1);color:var(--text-primary);
  font-family:inherit;text-decoration:none;cursor:pointer;
}
.btn:hover{background:var(--hover-wash);}
.btn:disabled{opacity:.55;cursor:default;}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:600;}
.btn.primary:hover{filter:brightness(1.15);background:var(--accent);}
.btn.small{padding:6px 10px;font-size:13px;}
.btn.danger{color:var(--danger);}
.btn-sec{background:var(--surface-1);color:var(--text-primary);border:1px solid var(--border);
  border-radius:6px;padding:8px 13px;font-size:13px;cursor:pointer;font-family:inherit;}
.btn-sec:hover{background:var(--hover-wash);}
.btn-sec.danger{color:var(--danger);}

/* --- Champs de formulaire : source unique --- */
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;}
.field label{font-size:12.5px;color:var(--text-secondary);}
.champ{border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:9px 11px;
  font-size:14px;background:var(--surface-1);color:var(--text-primary);font-family:inherit;}
.champ-groupe{display:flex;flex-direction:column;gap:3px;}
.champ-groupe label{font-size:11px;color:var(--text-secondary);}
.champ-groupe input,.champ-groupe select{border:1px solid var(--border);border-radius:6px;padding:7px 9px;
  font-size:14px;background:var(--surface-1);color:var(--text-primary);}

/* Bouton "afficher le mot de passe" — mêmes précautions que Couaridouc/Recythal
   (spécificité CSS, ::-ms-reveal d'Edge). */
.pwd-wrap{position:relative;}
.pwd-wrap input{width:100%;padding-right:38px !important;}
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear{display:none;}
.pwd-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;
  cursor:pointer;font-size:16px;padding:6px 8px;color:var(--text-muted);line-height:1;}
.pwd-toggle:hover{color:var(--text-primary);}

/* --- Cartes, encadrés --- */
.card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;margin-bottom:16px;}
.stat-tile{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;}
.stat-tile .label{font-size:12px;color:var(--text-secondary);}
.stat-tile .value{font-size:22px;font-weight:600;margin-top:2px;}
.stat-tile .sub{font-size:11px;color:var(--text-muted);margin-top:2px;}
a.stat-tile{display:block;color:inherit;text-decoration:none;
  transition:border-color .12s, background .12s;}
a.stat-tile:hover{border-color:var(--accent);background:var(--accent-soft);}
a.stat-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
a.stat-tile .label,a.stat-tile .value,a.stat-tile .sub{color:inherit;}
a.stat-tile .label{color:var(--text-secondary);}
a.stat-tile .sub{color:var(--text-muted);}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;}
.encadre{background:var(--accent-soft);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;font-size:13px;}
.encadre.discret{background:var(--surface-1);}
.encadre-titre{font-weight:600;margin-bottom:6px;}

/* =========================================================================
   LES EXPLICATIONS SONT SOUS UN VOLET, REPLIÉ PAR DÉFAUT.
   Même composant que Couaridouc et Recythal, aux couleurs de ce site.
   ========================================================================= */
details.explique{
  background:transparent;
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin:6px 0 20px;
  font-size:13px;
  color:var(--text-secondary);
}
details.explique > summary{
  cursor:pointer;
  padding:11px 16px;
  display:flex;align-items:center;gap:8px;
  font-weight:600;font-size:13px;
  color:var(--accent);
  list-style:none;
}
details.explique > summary::-webkit-details-marker{display:none;}
details.explique > summary::before{
  content:"\25B8";
  display:inline-block;font-size:13px;line-height:1;
  transition:transform .15s ease;
}
details.explique[open] > summary::before{transform:rotate(90deg);}
details.explique > summary:hover{color:var(--text-primary);}
details.explique > summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
details.explique > :not(summary){margin-left:16px;margin-right:16px;}
details.explique > :not(summary):last-child{margin-bottom:14px;}
details.explique p{margin:0 0 8px;}
details.explique a{color:var(--accent);}
@media (prefers-reduced-motion: reduce){
  details.explique > summary::before{transition:none;}
}

/* --- Tableaux --- */
.table-card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);overflow-x:auto;}
table.grille{width:100%;border-collapse:collapse;font-size:13.5px;}
table.grille th{text-align:left;font-weight:600;color:var(--text-secondary);font-size:12px;
  padding:8px 10px;border-bottom:1px solid var(--border-strong);}
table.grille td{padding:8px 10px;border-bottom:1px solid var(--border);}
table.grille td.num, table.grille th.num{text-align:right;font-variant-numeric:tabular-nums;}
/* La ligne de total se distingue des lignes courantes (consigne systématique
   de Stéfan sur les deux autres sites, reprise ici dès le départ). */
table.grille tfoot td{font-weight:600;border-top:1px solid var(--border-strong);}