/* =========================================================================
   ClubArea — Site public d'un club (#52)
   Direction artistique « affiche sportive imprimée » : fond papier, encre
   noire, accent du club, typographie condensée en capitales, bordures épaisses
   et ombres DURES (sans flou), aucun rayon sauf les avatars et les pastilles.

   Cette feuille sert `/club/:slug` UNIQUEMENT. La page publique d'un match
   (`/match/public/:slug`) continue d'utiliser `public.css` : les deux peaux
   cohabitent tant que l'harmonisation du match n'est pas faite.

   ⚠️ Toutes les classes sont préfixées `ca-` : aucune ne peut entrer en
   collision avec `public.css`, qui n'est pas chargée ici.

   RESPONSIVE : aucune media query de mise en page. Toutes les grilles sont en
   `repeat(auto-fit, minmax(min(100%, Xpx), 1fr))` — le `min(100%, …)` est
   essentiel : `minmax(Xpx, 1fr)` seul impose X px meme quand l'ecran n'en offre
   pas autant, et la page se met a defiler de cote. Les tailles sont en
   `clamp()`. Verifie par mesure de 320 a 1440 px sur les six vues.

   Personnalisation : `--ca-accent`, `--ca-accent-fonce`, `--ca-sur-accent`,
   `--ca-accent-voile` et `--ca-accent-bord` sont RÉÉCRITES par le serveur à
   partir de la couleur du club (`<style id="ca-accent">`). Les valeurs
   ci-dessous ne sont que le repli.
   ========================================================================= */

:root {
  /* Peau */
  --ca-papier: #f5f3ef;
  --ca-surface: #ffffff;
  --ca-neutre: #f1eee9;
  --ca-encre: #14171c;
  /* Même couleur, en composantes : `rgba()` ne sait pas prendre un `var()`
     hexadécimal, et le voile du héros a besoin de trois opacités. */
  --ca-encre-rgb: 20, 23, 28;

  /* Accent du club — réécrit par le serveur */
  --ca-accent: #d9232d;
  --ca-accent-fonce: #a8161e;
  --ca-sur-accent: #ffffff;
  --ca-accent-voile: rgba(217, 35, 45, 0.08);
  --ca-accent-bord: rgba(217, 35, 45, 0.35);

  /* Le rouge du « direct » n'est JAMAIS personnalisé : c'est un code de
     lecture universel, pas un élément d'identité du club. */
  --ca-direct: #d9232d;

  /* Or des partenaires */
  --ca-or: #c08a1e;
  --ca-or-fonce: #8a6416;
  --ca-or-clair: #ffc53d;

  /* Argent des partenaires (#533) — le palier intermédiaire n'avait aucune
     couleur parce qu'il n'avait aucun gabarit : il tombait dans le mur. */
  --ca-argent-fonce: #6b7076;
  --ca-argent-clair: #c9ced6;

  /* Textes */
  --ca-txt-2: #4b5259;
  --ca-txt-3: #6e767f;
  --ca-txt-4: #7a828c;
  --ca-txt-sombre-2: #b9c0c9;
  --ca-txt-sombre-3: #9aa2ac;

  /* Traits */
  --ca-bord: #e5e0d8;
  --ca-bord-2: #dcd6cd;

  /* Issues de match */
  --ca-victoire: #1b7f4b;
  --ca-nul: #b8860b;
  --ca-defaite: #c0392b;

  /* Badge ClubArea */
  --ca-badge: #3dbe7a;
  --ca-badge-txt: #062313;

  --ca-titre: 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif;
  --ca-corps: 'Manrope', system-ui, -apple-system, sans-serif;

  --ca-ombre: 4px 4px 0 rgba(20, 23, 28, 0.14);
  --ca-max: 1320px;
  --ca-goutt: clamp(16px, 4vw, 28px);
}

/* ---------- Base ---------- */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

.ca-body {
  background: var(--ca-papier);
  color: var(--ca-encre);
  font-family: var(--ca-corps);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: var(--ca-accent);
  text-decoration: none;
}
a:hover {
  color: var(--ca-accent-fonce);
}

img {
  max-width: 100%;
  display: block;
}

p {
  text-wrap: pretty;
}

.ca-wrap {
  max-width: var(--ca-max);
  margin: 0 auto;
  padding-left: var(--ca-goutt);
  padding-right: var(--ca-goutt);
}

/* ---------- Typographie ---------- */

/* Un titre est en capitales condensées : un seul mot long y dépasse sa boîte,
   et un débordement EN LIGNE fait défiler toute la page — mesuré à 320 px, où
   « PARTENAIRES » en 40 px faisait 293 px pour 288 px utiles. Les minimums de
   `clamp()` sont donc plus bas que ceux du handoff (vérifiés, eux, avec des
   mots courts), et la coupure sert de filet quel que soit le nom du club. */
.ca-h1,
.ca-h2,
.ca-h3,
.ca-actu__t,
.ca-equipe h3,
.ca-we__qui,
.ca-tdb__equipe,
.ca-personne b,
.ca-info b {
  overflow-wrap: break-word;
  word-break: break-word;
}

.ca-h1 {
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: clamp(34px, 8vw, 112px);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0 0 18px;
}
.ca-h1 em {
  font-style: normal;
  color: var(--ca-accent);
}
.ca-h1--page {
  font-size: clamp(30px, 7vw, 80px);
  /* `line-height: .92` fait déborder les accents des capitales au-dessus de la
     boîte de ligne : sans cette marge, le « É » de « ÉQUIPES » chevauche
     l'œil-de-bœuf posé juste au-dessus. */
  margin-top: 12px;
}

.ca-h2 {
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: clamp(26px, 6vw, 60px);
  line-height: 0.96;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 4px 0 0;
}

.ca-h3 {
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: clamp(20px, 4vw, 32px);
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.ca-oeil {
  display: block;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ca-txt-4);
}

.ca-intro {
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ca-txt-2);
  margin: 14px 0 0;
}

.ca-note {
  font-size: 12px;
  color: var(--ca-txt-4);
  margin: 14px 0 0;
}

.ca-prose p {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ca-txt-2);
  margin: 0 0 16px;
}

.ca-tag {
  display: inline-block;
  padding: 4px 9px;
  border: 1px solid var(--ca-bord-2);
  background: var(--ca-neutre);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ca-txt-2);
}

/* ---------- Boutons ---------- */

.ca-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border: 2px solid var(--ca-encre);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.18s;
}
.ca-btn--petit {
  padding: 9px 14px;
  font-size: 11px;
}
.ca-btn--plein {
  background: var(--ca-accent);
  border-color: var(--ca-accent);
  color: var(--ca-sur-accent);
  box-shadow: var(--ca-ombre);
}
.ca-btn--plein:hover {
  color: var(--ca-sur-accent);
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--ca-encre);
}
.ca-btn--contour {
  background: transparent;
  color: inherit;
}
.ca-btn--contour:hover {
  background: var(--ca-encre);
  color: var(--ca-papier);
}
.ca-btn--blanc {
  background: var(--ca-surface);
  border-color: var(--ca-surface);
  color: var(--ca-encre);
}
.ca-btn--blanc:hover {
  color: var(--ca-encre);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35);
}
.ca-btn--contour-clair {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

/* ---------- En-tête ---------- */

.ca-entete {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(245, 243, 239, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 2px solid var(--ca-encre);
}

.ca-entete__inner {
  max-width: var(--ca-max);
  margin: 0 auto;
  padding: 12px var(--ca-goutt);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.ca-marque {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ca-encre);
  /* `flex: none` interdisait tout retrecissement : un nom de club a rallonge
     imposait sa largeur a l'en-tete — mesure : 779 px pour un ecran de 320.
     L'ecusson, lui, garde sa taille (il porte deja `flex: none`). */
  flex: 0 1 auto;
  min-width: 0;
}
.ca-marque:hover {
  color: var(--ca-encre);
}

.ca-marque__ecusson,
.ca-pied__ecusson,
.ca-ecusson {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--ca-accent);
  color: var(--ca-sur-accent);
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 0.04em;
}
.ca-marque__ecusson img,
.ca-pied__ecusson img,
.ca-ecusson img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ca-marque__txt {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}
.ca-marque__txt b {
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.ca-marque__txt small {
  overflow-wrap: anywhere;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ca-txt-4);
}

.ca-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.ca-nav::-webkit-scrollbar {
  display: none;
}

.ca-nav__item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ca-encre);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: 0.18s;
}
.ca-nav__item:hover {
  color: var(--ca-accent);
  border-bottom-color: var(--ca-accent);
}
.ca-nav__item--actif {
  color: var(--ca-accent);
  border-bottom-color: var(--ca-accent);
}
.ca-nav__item--direct {
  color: var(--ca-direct);
}

.ca-entete__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ca-saison {
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ca-txt-4);
}

.ca-cta {
  padding: 11px 16px;
  border: 0;
  background: var(--ca-accent);
  color: var(--ca-sur-accent);
  font-family: var(--ca-corps);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ca-encre);
  transition: 0.18s;
}
.ca-cta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ca-encre);
}

/* Pastille « en direct » — pulsée, toujours rouge */
.ca-pastille {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--ca-direct);
  animation: ca-pulse 1.5s ease-in-out infinite;
}

@keyframes ca-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.82);
  }
}

.ca-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ca-direct);
}
.ca-live--grand {
  font-size: 12px;
}

.ca-minute {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  padding: 4px 8px;
  background: var(--ca-direct);
  color: #fff;
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 16px;
}
.ca-minute--grand {
  font-size: 22px;
  min-width: 52px;
}

/* ---------- Héros ---------- */

.ca-heros {
  position: relative;
  background: var(--ca-encre);
  color: var(--ca-papier);
  overflow: hidden;
  isolation: isolate;
}
.ca-heros__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  z-index: -2;
}
.ca-heros__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    78deg,
    rgb(var(--ca-encre-rgb)) 0%,
    rgba(var(--ca-encre-rgb), 0.92) 42%,
    rgba(var(--ca-encre-rgb), 0.25) 100%
  );
  z-index: -1;
}
.ca-heros__bande {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 38%;
  width: 120px;
  background: var(--ca-accent);
  transform: skewX(-11deg);
  mix-blend-mode: multiply;
  z-index: -1;
}

.ca-heros__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: clamp(48px, 7vw, 88px);
}

.ca-heros__badge {
  display: inline-block;
  margin-bottom: 20px;
  padding: 7px 14px;
  background: var(--ca-accent);
  color: var(--ca-sur-accent);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: skewX(-9deg);
}

.ca-heros__texte {
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ca-txt-sombre-2);
  margin: 0 0 26px;
}

.ca-heros__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.ca-heros .ca-btn--contour {
  border-color: rgba(245, 243, 239, 0.5);
  color: var(--ca-papier);
}
.ca-heros .ca-btn--contour:hover {
  background: var(--ca-papier);
  color: var(--ca-encre);
}

.ca-chiffres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: rgba(245, 243, 239, 0.14);
  border: 2px solid rgba(245, 243, 239, 0.14);
}
/* La grille est 2×2 quand les quatre chiffres existent ; sinon elle se
   resserre sur une rangée plutôt que de laisser une case creuse. */
.ca-chiffres--n1 {
  grid-template-columns: minmax(0, 1fr);
}
.ca-chiffres--n3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ca-chiffre {
  background: var(--ca-encre);
  padding: clamp(18px, 3vw, 28px);
}
.ca-chiffre b {
  display: block;
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1;
}
.ca-chiffre span {
  display: block;
  margin-top: 6px;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ca-txt-sombre-3);
}
.ca-chiffre--or b {
  color: var(--ca-or-clair);
}
.ca-chiffre--accent b {
  color: var(--ca-accent);
}

/* ---------- Bandeau défilant ---------- */

.ca-marquee {
  background: var(--ca-accent);
  color: var(--ca-sur-accent);
  overflow: hidden;
  border-bottom: 2px solid var(--ca-encre);
}
.ca-marquee__piste {
  display: flex;
  width: max-content;
  animation: ca-marq 34s linear infinite;
}
.ca-marquee__piste span {
  padding: 12px 26px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ca-marquee__piste span::after {
  content: '·';
  margin-left: 26px;
  opacity: 0.5;
}

@keyframes ca-marq {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ---------- Bandeau « match en direct » ---------- */

.ca-direct-bandeau {
  display: block;
  background: var(--ca-encre);
  color: var(--ca-papier);
  border-left: 6px solid var(--ca-direct);
  transition: 0.18s;
}
.ca-direct-bandeau:hover {
  color: var(--ca-papier);
  transform: translateX(4px);
}
.ca-direct-bandeau__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 34px);
  flex-wrap: wrap;
  padding-top: 20px;
  padding-bottom: 20px;
}
.ca-direct-bandeau__quoi b {
  display: block;
  margin-top: 6px;
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: clamp(20px, 2.4vw, 28px);
  text-transform: uppercase;
}
.ca-direct-bandeau__quoi b i {
  font-style: normal;
  color: var(--ca-txt-sombre-3);
}
.ca-direct-bandeau__score {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.ca-direct-bandeau__score b {
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: clamp(44px, 6vw, 68px);
  line-height: 1;
}
.ca-direct-bandeau__score i {
  width: 24px;
  height: 3px;
  background: var(--ca-direct);
}
.ca-direct-bandeau__score--sans {
  margin-left: auto;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ca-txt-sombre-3);
}
.ca-direct-bandeau__suivre {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ca-direct);
  white-space: nowrap;
}

/* ---------- Sections ---------- */

.ca-sec {
  padding-top: clamp(44px, 6vw, 80px);
  padding-bottom: clamp(44px, 6vw, 80px);
}
.ca-sec--sombre {
  background: var(--ca-encre);
  color: var(--ca-papier);
}
.ca-sec--sombre .ca-oeil {
  color: var(--ca-txt-sombre-3);
}
.ca-sec--accent {
  background: var(--ca-accent);
  color: var(--ca-sur-accent);
}
.ca-sec--accent .ca-oeil {
  color: inherit;
  opacity: 0.75;
}
.ca-sec--titre {
  padding-bottom: 0;
  border-bottom: 2px solid var(--ca-encre);
  padding-top: clamp(36px, 5vw, 64px);
}
.ca-sec--titre .ca-wrap {
  padding-bottom: clamp(28px, 4vw, 48px);
}
.ca-sec--tdb {
  padding-top: clamp(28px, 4vw, 48px);
}

.ca-sec__tete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: clamp(20px, 3vw, 34px);
}
.ca-sec__lien {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Deux colonnes (matchs / résultats) ---------- */

.ca-2col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(24px, 4vw, 44px);
}
.ca-2col__large {
  grid-column: span 1;
}

/* ---------- Cartes de match ---------- */

.ca-matchs {
  display: grid;
  gap: 12px;
}

.ca-match {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  background: var(--ca-surface);
  border: 2px solid var(--ca-encre);
  color: var(--ca-encre);
  box-shadow: var(--ca-ombre);
  transition: 0.18s;
}
.ca-match:hover {
  color: var(--ca-encre);
  border-color: var(--ca-accent);
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--ca-accent);
}
.ca-match__quand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px dashed var(--ca-bord-2);
  padding-right: 12px;
}
.ca-match__jour {
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ca-txt-4);
}
.ca-match__heure {
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 26px;
  line-height: 1;
  color: var(--ca-accent);
}
.ca-match__qui b {
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 20px;
  text-transform: uppercase;
  line-height: 1.05;
}
.ca-match__qui span {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  color: var(--ca-txt-2);
}
.ca-match__qui small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--ca-txt-4);
}
.ca-match__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
}
.ca-match__lien {
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ca-accent);
  white-space: nowrap;
}

/* ---------- Lignes de résultat ---------- */

.ca-resultats {
  display: grid;
  gap: 8px;
}

.ca-res {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--ca-surface);
  border: 1px solid var(--ca-bord);
  border-left: 5px solid var(--ca-txt-4);
  color: var(--ca-encre);
  transition: 0.18s;
}
.ca-res:hover {
  color: var(--ca-encre);
  transform: translateX(4px);
}
.ca-res--V {
  border-left-color: var(--ca-victoire);
}
.ca-res--N {
  border-left-color: var(--ca-nul);
}
.ca-res--D {
  border-left-color: var(--ca-defaite);
}
.ca-res__main {
  min-width: 0;
  flex: 1;
}
.ca-res__main b {
  display: block;
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 17px;
  text-transform: uppercase;
}
.ca-res__main span {
  display: block;
  font-size: 13px;
  color: var(--ca-txt-2);
}
.ca-res__main small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--ca-txt-4);
}
.ca-res__score {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 6px 11px;
  background: var(--ca-neutre);
  color: var(--ca-encre);
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 20px;
}
.ca-res__score i {
  font-style: normal;
  opacity: 0.5;
}
.ca-res__score--mot {
  font-family: var(--ca-corps);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ca-txt-4);
}
.ca-res--V .ca-res__score {
  background: var(--ca-victoire);
  color: #fff;
}
.ca-res--N .ca-res__score {
  background: var(--ca-nul);
  color: #fff;
}
.ca-res--D .ca-res__score {
  background: var(--ca-defaite);
  color: #fff;
}

/* ---------- Actualités ---------- */

.ca-actus {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 18px;
}

.ca-actu {
  display: flex;
  flex-direction: column;
  background: var(--ca-surface);
  border: 2px solid var(--ca-encre);
  box-shadow: var(--ca-ombre);
  transition: 0.18s;
}
.ca-actu:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--ca-encre);
}
.ca-actu--une {
  grid-column: span 2;
}
.ca-actu__img {
  position: relative;
  height: 190px;
  background-size: cover;
  background-position: center;
  border-bottom: 2px solid var(--ca-encre);
}
.ca-actu--une .ca-actu__img {
  height: clamp(210px, 26vw, 320px);
}
.ca-actu__une {
  position: absolute;
  top: 0;
  left: 0;
  padding: 6px 12px;
  background: var(--ca-accent);
  color: var(--ca-sur-accent);
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ca-actu__corps {
  padding: 18px;
}
.ca-actu__t {
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 21px;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 8px 0 8px;
}
.ca-actu--une .ca-actu__t {
  font-size: clamp(24px, 3vw, 34px);
}
.ca-actu__x {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ca-txt-2);
  margin: 0;
}
.ca-actu__plus {
  margin-top: 12px;
}
.ca-actu__plus summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ca-accent);
}
.ca-actu__plus p {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ca-txt-2);
  white-space: pre-line;
}

/* ---------- Équipes ---------- */

.ca-equipes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 178px), 1fr));
  gap: 16px;
}

.ca-equipe {
  padding: 18px;
  background: var(--ca-surface);
  border: 2px solid var(--ca-encre);
  transition: 0.18s;
}
.ca-equipe:hover {
  background: var(--ca-encre);
  color: var(--ca-papier);
}
.ca-equipe__tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.ca-equipe h3 {
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  text-transform: uppercase;
  margin: 0;
  /* Le badge de niveau est `flex: none` : c'est au nom de plier, sinon la
     carte impose sa largeur a la grille et la page deborde. */
  min-width: 0;
  overflow-wrap: anywhere;
}
.ca-equipe__niv {
  flex: none;
  padding: 3px 8px;
  background: var(--ca-accent);
  color: var(--ca-sur-accent);
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ca-equipe__cat {
  display: block;
  margin-top: 10px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ca-txt-4);
}
.ca-equipe:hover .ca-equipe__cat {
  color: var(--ca-txt-sombre-3);
}

.ca-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr));
  gap: 18px;
}
.ca-cat {
  border: 2px solid var(--ca-encre);
  background: var(--ca-surface);
  padding: 16px;
  box-shadow: var(--ca-ombre);
}
.ca-cat__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--ca-bord-2);
}
.ca-cat__tete b {
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 26px;
  color: var(--ca-accent);
}
.ca-cat__liste {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.ca-cat .ca-equipe {
  border-width: 1px;
  border-color: var(--ca-bord);
  padding: 12px 14px;
}

/* ---------- Personnes (bureau, staff, organigramme) ---------- */

.ca-personnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 14px;
}
.ca-personne {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(245, 243, 239, 0.18);
  background: rgba(245, 243, 239, 0.04);
}
.ca-sec:not(.ca-sec--sombre) .ca-personne {
  border-color: var(--ca-bord);
  background: var(--ca-surface);
}
.ca-personne__av {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.ca-personne__av--mono {
  display: grid;
  place-items: center;
  background: var(--ca-accent);
  color: var(--ca-sur-accent);
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 15px;
}
.ca-personne b {
  display: block;
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 18px;
  text-transform: uppercase;
  line-height: 1.05;
}
.ca-personne div span {
  display: block;
  margin-top: 3px;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ca-txt-sombre-3);
}
.ca-sec:not(.ca-sec--sombre) .ca-personne div span {
  color: var(--ca-txt-4);
}

/* ---------- Labels FFF ---------- */

.ca-labels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 14px;
}
.ca-label {
  padding: 16px 18px;
  border-left: 4px solid var(--ca-or-clair);
  background: rgba(255, 197, 61, 0.07);
}
.ca-label b {
  display: block;
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 20px;
  text-transform: uppercase;
}
.ca-label span {
  display: block;
  margin-top: 4px;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ca-or-clair);
}

/* ---------- Événements ---------- */

.ca-events {
  display: grid;
  gap: 12px;
}
.ca-event {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--ca-surface);
  border: 1px solid var(--ca-bord);
}
.ca-event__date {
  flex: none;
  display: grid;
  place-items: center;
  width: 62px;
  padding: 8px 0;
  background: var(--ca-accent);
  color: var(--ca-sur-accent);
}
.ca-event__date b {
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 26px;
  line-height: 1;
}
.ca-event__date small {
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ca-event__corps {
  flex: 1;
  min-width: 180px;
}
.ca-event__corps h3 {
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 21px;
  text-transform: uppercase;
  margin: 0;
}
.ca-event__corps span {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--ca-txt-4);
}
.ca-event__corps p {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--ca-txt-2);
}
.ca-sec--sombre .ca-event {
  background: rgba(245, 243, 239, 0.05);
  border-color: rgba(245, 243, 239, 0.18);
  color: var(--ca-papier);
}
.ca-sec--sombre .ca-event__corps p {
  color: var(--ca-txt-sombre-2);
}
.ca-event--passe {
  opacity: 0.78;
}
.ca-event--passe .ca-event__date {
  background: var(--ca-neutre);
  color: var(--ca-txt-4);
}
.ca-event__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* ---------- Billetterie ---------- */

.ca-billet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: clamp(20px, 3vw, 28px);
  background: var(--ca-accent);
  color: var(--ca-sur-accent);
  box-shadow: var(--ca-ombre);
}
.ca-billet .ca-oeil {
  color: inherit;
  opacity: 0.75;
  margin-bottom: 8px;
}
.ca-billet .ca-h3 {
  margin-bottom: 0;
}
.ca-billet p {
  margin: 8px 0 0;
  font-size: 14px;
  opacity: 0.9;
}
.ca-billet .ca-btn--plein {
  background: var(--ca-surface);
  border-color: var(--ca-surface);
  color: var(--ca-encre);
}
.ca-billet .ca-btn--plein:hover {
  color: var(--ca-encre);
}

/* ---------- Coup de main (bénévolat public, #412) ---------- */

.ca-bnv__liste {
  display: grid;
  gap: 18px;
}
.ca-bnv {
  background: var(--ca-surface);
  border: 1px solid var(--ca-bord);
  padding: clamp(18px, 3vw, 26px);
  box-shadow: var(--ca-ombre);
}
.ca-bnv__tete p {
  margin: 6px 0 14px;
  font-size: 14px;
  color: var(--ca-txt-3);
}
.ca-bnv__postes {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.ca-bnv__poste {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ca-bord);
  background: var(--ca-neutre);
  font-size: 14px;
  cursor: pointer;
}
.ca-bnv__poste input {
  accent-color: var(--ca-accent);
  flex: none;
}
.ca-bnv__poste--plein {
  opacity: 0.55;
  cursor: not-allowed;
}
.ca-bnv__jauge {
  margin: 0 0 14px;
  font-weight: 700;
  color: var(--ca-accent);
}
.ca-bnv__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 560px) {
  .ca-bnv__grille {
    grid-template-columns: 1fr;
  }
}
.ca-bnv__champ {
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--ca-bord);
  background: var(--ca-neutre);
  color: var(--ca-encre);
  font: 500 14px Manrope, system-ui, sans-serif;
}
.ca-bnv__case {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--ca-txt-3);
  cursor: pointer;
}
.ca-bnv__case input {
  margin-top: 2px;
  flex: none;
  accent-color: var(--ca-accent);
}
.ca-bnv__msg {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
}
.ca-bnv__msg--erreur {
  color: var(--ca-direct);
}
.ca-bnv__merci,
.ca-bnv__complet {
  margin: 0;
  font-weight: 700;
  color: var(--ca-encre);
}

/* ---------- Partenaires ---------- */

.ca-partenaires__or {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.ca-part-or {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px;
  background: rgba(255, 197, 61, 0.07);
  border: 1px solid var(--ca-or-clair);
  color: inherit;
  transition: 0.18s;
}
.ca-part-or:hover {
  color: inherit;
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 var(--ca-or-fonce);
}
.ca-part-or__logo {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 18px;
  color: var(--ca-encre);
}
.ca-part-or__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ca-part-or__nom {
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 20px;
  text-transform: uppercase;
  text-align: center;
}

/* Palier ARGENT (#533) — le gabarit intermédiaire, et c'est tout son sujet :
   entre la vignette d'or (230 px, logo 72 px) et le mur (115 px, logo 48 px),
   il tient à 165 px avec un logo de 58 px. Assez pour se distinguer d'un
   bronze au premier coup d'œil, sans venir contester l'or. */
.ca-partenaires__argent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.ca-part-argent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px;
  background: rgba(201, 206, 214, 0.07);
  border: 1px solid var(--ca-argent-clair);
  color: inherit;
  transition: 0.18s;
}
.ca-part-argent:hover {
  color: inherit;
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ca-argent-fonce);
}
.ca-part-argent__logo {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 15px;
  color: var(--ca-encre);
}
.ca-part-argent__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ca-part-argent__nom {
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 15px;
  text-transform: uppercase;
  text-align: center;
}

.ca-partenaires__mur {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 115px), 1fr));
  gap: 2px;
  background: rgba(245, 243, 239, 0.14);
  border: 1px solid rgba(245, 243, 239, 0.14);
}
.ca-part {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 10px;
  background: var(--ca-encre);
  color: inherit;
  transition: 0.18s;
}
.ca-sec:not(.ca-sec--sombre) .ca-part {
  background: var(--ca-surface);
}
.ca-part:hover {
  color: inherit;
  background: var(--ca-accent);
}
.ca-part__logo {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 12px;
  color: var(--ca-encre);
}
.ca-part__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ca-part__nom {
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

.ca-contact-part {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.ca-contact-part p {
  max-width: 52ch;
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
}
.ca-contact-part__act {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ca-contact-part__sans {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* ---------- Boutique HelloAsso (#526) ---------- */

/* Le cadre garde l'habillage de HelloAsso : il ne suivra pas les couleurs du
   club, et c'est assumé. Ce qu'on tient ici, c'est la BOÎTE — bordure épaisse,
   ombre dure, fond papier : le cadre est posé sur l'affiche, il ne la perce
   pas.

   La hauteur est FIXE et généreuse, avec défilement interne. Nous n'avons pas
   le script de redimensionnement de l'extension WordPress de HelloAsso : une
   hauteur qui s'ajuste demanderait un `postMessage` qui n'a pas été constaté.
   Un cadre trop haut laisse du blanc, un cadre trop court coupe un tunnel de
   paiement — on choisit le blanc. */

.ca-boutique {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.ca-boutique__note {
  max-width: 62ch;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ca-txt-2);
}
.ca-boutique__cadre {
  width: 100%;
  height: clamp(560px, 78vh, 1100px);
  border: 3px solid var(--ca-encre);
  box-shadow: var(--ca-ombre);
  background: var(--ca-surface);
  overflow: hidden;
}
.ca-boutique__cadre iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.ca-boutique__contact {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 2px solid var(--ca-bord);
}
.ca-boutique__contact b {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
}
.ca-boutique__contact-act {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- Tableau d'affichage (En direct) ---------- */

.ca-tdb {
  position: relative;
  overflow: hidden;
  background: var(--ca-encre);
  color: var(--ca-papier);
  border: 2px solid rgba(245, 243, 239, 0.16);
}
.ca-tdb__bande {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 62%;
  width: 140px;
  background: var(--ca-direct);
  transform: skewX(-11deg);
  opacity: 0.22;
}
.ca-tdb__inner {
  position: relative;
  padding: clamp(24px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.ca-tdb__ctx {
  font-weight: 700;
  font-size: 12px;
  color: var(--ca-txt-sombre-3);
}
.ca-tdb__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  align-items: center;
  gap: 18px;
  width: 100%;
}
.ca-tdb__equipe {
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1;
  text-transform: uppercase;
}
.ca-tdb__equipe--ext {
  text-align: right;
  color: var(--ca-txt-sombre-2);
}
.ca-tdb__score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.ca-tdb__score b {
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: clamp(56px, 8vw, 92px);
  line-height: 1;
}
.ca-tdb__score i {
  width: 26px;
  height: 4px;
  background: var(--ca-direct);
}
.ca-tdb__sans {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ca-txt-sombre-3);
}
.ca-tdb__barre {
  width: 100%;
  height: 6px;
  background: rgba(245, 243, 239, 0.16);
}
.ca-tdb__barre span {
  display: block;
  height: 100%;
  background: var(--ca-direct);
}
.ca-tdb--vide .ca-tdb__inner p {
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ca-txt-sombre-2);
  margin: 0;
}
.ca-tdb--vide .ca-h2 {
  margin: 0;
}

/* ---------- Fil du match ---------- */

.ca-fil {
  display: grid;
  gap: 8px;
}
.ca-fil__l {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--ca-surface);
  border: 1px solid var(--ca-bord);
  border-left: 4px solid var(--ca-txt-3);
}
.ca-fil__l--accent {
  border-left-color: var(--ca-accent);
}
.ca-fil__l--encre {
  border-left-color: var(--ca-encre);
}
.ca-fil__l--avertissement {
  border-left-color: var(--ca-nul);
}
.ca-fil__l--defaite {
  border-left-color: var(--ca-defaite);
}
.ca-fil__l--gris {
  border-left-color: var(--ca-txt-3);
}
.ca-fil__min {
  flex: none;
  min-width: 42px;
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 20px;
}
.ca-fil__type {
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ca-txt-4);
}
.ca-fil__qui {
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 18px;
  text-transform: uppercase;
  margin-left: auto;
}

/* ---------- Statistiques ---------- */

.ca-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 2px;
  background: var(--ca-bord-2);
  border: 1px solid var(--ca-bord-2);
}
.ca-stat {
  padding: 18px;
  background: var(--ca-surface);
  text-align: center;
}
.ca-stat b {
  display: block;
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 40px;
  line-height: 1;
  color: var(--ca-accent);
}
.ca-stat span {
  display: block;
  margin-top: 6px;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ca-txt-4);
}

/* ---------- Composition ---------- */

.ca-compo__form {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 12px;
  background: var(--ca-accent);
  color: var(--ca-sur-accent);
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 20px;
}
.ca-compo__l {
  margin-bottom: 18px;
}
.ca-compo__l > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.ca-joueur {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid rgba(245, 243, 239, 0.2);
  font-weight: 700;
  font-size: 13.5px;
}
.ca-joueur b {
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 15px;
  color: var(--ca-txt-sombre-3);
}
.ca-joueur i {
  font-style: normal;
  padding: 1px 5px;
  background: var(--ca-accent);
  color: var(--ca-sur-accent);
  font-size: 9.5px;
  font-weight: 800;
}

/* ---------- Rencontres de la semaine ---------- */

.ca-wes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 14px;
}
.ca-we {
  display: block;
  padding: 16px;
  background: var(--ca-surface);
  border: 2px solid var(--ca-encre);
  color: var(--ca-encre);
  box-shadow: var(--ca-ombre);
  transition: 0.18s;
}
.ca-we:hover {
  color: var(--ca-encre);
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--ca-accent);
}
.ca-we__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.ca-we__qui {
  display: block;
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 19px;
  line-height: 1.1;
  text-transform: uppercase;
}
.ca-we__bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--ca-bord-2);
  font-size: 12px;
  color: var(--ca-txt-4);
}
.ca-we__score {
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 22px;
  color: var(--ca-encre);
}

/* ---------- Feuille de match : plateau, terrain, banc ---------- */

.ca-ms-plateau {
  display: grid;
  gap: 8px;
  width: 100%;
}
.ca-ms-plateau__l {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(245, 243, 239, 0.06);
  border-left: 4px solid var(--ca-accent);
  font-size: 14px;
}
.ca-ms-plateau__l > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ca-ms-plateau__l > span:last-child {
  text-align: right;
}
.ca-ms-plateau__l b {
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 24px;
  white-space: nowrap;
}
.ca-ms-plateau__l b i {
  font-style: normal;
  color: var(--ca-txt-sombre-3);
  margin: 0 4px;
}

.ca-compo {
  display: grid;
  /* Le terrain prend la place qu'il lui faut pour que quatre défenseurs
     tiennent côte à côte sans que leurs noms se touchent ; le banc occupe le
     reste. Sur téléphone, les deux s'empilent. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(18px, 3vw, 32px);
  align-items: start;
}
.ca-compo__form {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 6px 12px;
  background: var(--ca-accent);
  color: var(--ca-sur-accent);
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 20px;
}
.ca-compo__terrain {
  min-width: 0;
}

/* Le terrain garde un rapport de 2/3 : les jetons sont posés en pourcentage,
   donc un ratio fixe suffit à le rendre responsive sans media query. */
.ca-pitch {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 2 / 3;
  max-height: 620px;
  border: 2px solid rgba(245, 243, 239, 0.24);
  background: rgba(245, 243, 239, 0.04);
}
.ca-pitch__pelouse {
  position: absolute;
  inset: 0;
  /* Lignes du terrain : rond central, surface de réparation, ligne médiane —
     tracées en dégradés, sans une seule image à charger. */
  background-image:
    linear-gradient(to bottom, transparent calc(50% - 1px), rgba(245, 243, 239, 0.22) 50%, transparent calc(50% + 1px)),
    radial-gradient(circle at 50% 50%, transparent 58px, rgba(245, 243, 239, 0.22) 59px, rgba(245, 243, 239, 0.22) 60px, transparent 61px);
}
.ca-pitch__jeton {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  /* Quatre défenseurs sur une ligne = 25 % chacun. Le jeton ne dépasse donc
     jamais son voisin, quelle que soit la largeur du terrain — c'est ce que
     `62px` fixes ne garantissaient pas : à 235 px de large, les noms se
     chevauchaient. */
  width: min(72px, 24%);
}
.ca-pitch__maillot {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ca-accent);
  color: var(--ca-sur-accent);
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 16px;
}
.ca-pitch__jeton--gk .ca-pitch__maillot {
  background: var(--ca-or-clair);
  color: var(--ca-encre);
}
.ca-pitch__maillot--photo {
  background: var(--ca-encre);
}
.ca-pitch__maillot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ca-pitch__num {
  position: absolute;
  top: 26px;
  right: 8px;
  padding: 0 4px;
  background: var(--ca-encre);
  color: var(--ca-papier);
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 11px;
}
.ca-pitch__nom {
  max-width: 100%;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.ca-pitch__nom i {
  font-style: normal;
  margin-left: 3px;
  padding: 0 3px;
  background: var(--ca-accent);
  color: var(--ca-sur-accent);
}

.ca-banc__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.ca-banc .ca-joueur em {
  font-style: normal;
  margin-left: 6px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ca-txt-sombre-3);
}

/* ---------- Page « Le club » ---------- */

.ca-club-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.ca-club-photo {
  height: clamp(200px, 26vw, 260px);
  background-size: cover;
  background-position: center;
  border: 2px solid var(--ca-encre);
  margin-bottom: 18px;
}
.ca-infos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 2px;
  background: var(--ca-bord-2);
  border: 1px solid var(--ca-bord-2);
  margin-top: 24px;
}
.ca-info {
  padding: 14px;
  background: var(--ca-surface);
}
.ca-info span {
  display: block;
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ca-txt-4);
}
.ca-info b {
  display: block;
  margin-top: 5px;
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 22px;
  text-transform: uppercase;
}

.ca-devise {
  margin: 0 0 20px;
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ca-accent);
}

.ca-rejoindre {
  padding: clamp(20px, 3vw, 28px);
  background: var(--ca-encre);
  color: var(--ca-papier);
}
.ca-rejoindre .ca-oeil {
  color: var(--ca-txt-sombre-3);
}
.ca-rejoindre p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ca-txt-sombre-2);
  margin: 0 0 18px;
}
.ca-rejoindre .ca-btn {
  width: 100%;
  margin-bottom: 10px;
}
.ca-rejoindre .ca-btn--contour {
  border-color: rgba(245, 243, 239, 0.4);
  color: var(--ca-papier);
}
.ca-rejoindre .ca-btn--contour:hover {
  background: var(--ca-papier);
  color: var(--ca-encre);
}
.ca-rejoindre__adr {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed rgba(245, 243, 239, 0.24);
}
.ca-rejoindre__adr b {
  display: block;
  margin-top: 6px;
  font-size: 14px;
}
.ca-rejoindre__liens {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 16px;
}
.ca-lien-ext {
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ca-accent);
}

/* ---------- Pied de page ---------- */

.ca-pied {
  background: var(--ca-encre);
  color: var(--ca-papier);
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: 28px;
}
.ca-pied__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 28px;
}
.ca-pied__ident {
  display: flex;
  gap: 14px;
  min-width: 0;
}
.ca-pied__ident > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ca-pied__ident b {
  display: block;
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 21px;
  text-transform: uppercase;
}
.ca-pied__ident span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--ca-txt-sombre-3);
}
.ca-pied__col h3 {
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ca-txt-sombre-3);
  margin: 0 0 12px;
}
.ca-pied__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.ca-pied__col a {
  font-size: 13.5px;
  color: var(--ca-papier);
}
.ca-pied__col a:hover {
  color: var(--ca-accent);
}
.ca-pied__legal {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(245, 243, 239, 0.14);
  font-size: 12.5px;
  color: var(--ca-txt-sombre-3);
}
.ca-pied__legal a {
  margin-left: auto;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ca-badge-ca {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: var(--ca-badge);
  color: var(--ca-badge-txt);
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: 13px;
}

/* ---------- États vides ---------- */

.ca-vide {
  background: var(--ca-neutre);
  border: 1px dashed var(--ca-bord-2);
}
.ca-vide-bloc {
  padding: clamp(24px, 4vw, 40px);
  border: 2px dashed var(--ca-bord-2);
  background: var(--ca-surface);
  text-align: center;
}
.ca-sec--sombre .ca-vide-bloc {
  background: rgba(245, 243, 239, 0.04);
  border-color: rgba(245, 243, 239, 0.24);
}
.ca-vide-bloc p {
  margin: 0;
  font-family: var(--ca-titre);
  font-weight: 900;
  font-size: clamp(20px, 2.4vw, 26px);
  text-transform: uppercase;
}
.ca-vide-bloc__act {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: var(--ca-txt-2);
}
.ca-sec--sombre .ca-vide-bloc__act {
  color: var(--ca-txt-sombre-3);
}

/* ---------- Toast ---------- */

#ca-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 200;
}
.ca-toast {
  padding: 12px 18px;
  background: var(--ca-encre);
  color: var(--ca-papier);
  font-weight: 700;
  font-size: 13.5px;
  box-shadow: 4px 4px 0 var(--ca-accent);
}

/* ---------- Apparition au défilement ---------- */

[data-anim] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-anim].ca-vu {
  opacity: 1;
  transform: none;
}

/* Sans JavaScript, rien ne doit rester invisible : la règle ci-dessous n'est
   désarmée que par `vitrine.js`, qui pose `data-anim-actif` sur <html>. */
html:not([data-anim-actif]) [data-anim] {
  opacity: 1;
  transform: none;
}

/* ---------- Accessibilité : mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-anim] {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Ajustements étroits ---------- */

/* Sept onglets : la pastille de saison poussait l'en-tête sur deux lignes dès
   1440 px. C'est la moins utile des trois choses posées à droite : elle cède
   la première. */
@media (max-width: 1280px) {
  .ca-entete__actions .ca-saison {
    display: none;
  }
}

@media (max-width: 720px) {
  .ca-actu--une {
    grid-column: span 1;
  }
  .ca-match {
    grid-template-columns: 78px 1fr;
  }
  .ca-match__meta {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
  .ca-tdb__equipe--ext {
    text-align: left;
  }
  .ca-entete__actions .ca-saison {
    display: none;
  }
}

/* ============================================================
   ClubArea — Organigramme public : l'arbre interactif (#532)
   ============================================================
   Version corrigée : la feuille d'origine utilisait les jetons de
   l'APPLICATION (`--surface`, `--ink`, `--muted`, `--accent-deep`…), qui
   n'existent pas sur le site public. Aucun `var()` ne résolvait, et un
   `var()` non résolu ne produit pas d'erreur : le bloc serait simplement
   sorti sans couleur.

   Le site public travaille en `--ca-*`, définis dans `:root` de
   `vitrine.css`. Le serveur RÉÉCRIT `--ca-accent`, `--ca-accent-fonce`,
   `--ca-sur-accent`, `--ca-accent-voile`, `--ca-accent-bord` ET `--ca-encre`
   avec les couleurs du club. Tout ce qui suit s'y branche : changer la
   couleur du club rebascule l'arbre entier, sans toucher à cette feuille.

   C'est aussi pourquoi les masques de la barre de liaison utilisent
   `var(--ca-encre)` : c'est exactement le fond de `.ca-sec--sombre`, quelle
   que soit la couleur choisie par le club.

   La direction artistique est celle de l'affiche imprimée, pas celle de
   l'app : angles droits, bordures 2 px, ombre dure `--ca-ombre` sans flou,
   Saira Condensed en capitales. Les seuls arrondis sont les avatars.

   `color-mix()` n'est pas utilisé : les paliers de transparence passent par
   `--ca-accent-voile` / `--ca-accent-bord`, déjà fournis par le serveur, et
   par des `rgba()` construits sur `--ca-encre-rgb`.
   ============================================================ */

/* Le bloc vit dans une section sombre (`ca-sec--sombre`) : le fond est
   l'encre du club, les cartes sont en papier. */
.orga {
  --orga-trait: rgba(245, 243, 239, 0.32);
  --orga-txt: var(--ca-papier);
  --orga-txt-2: var(--ca-txt-sombre-2);
  --orga-txt-3: var(--ca-txt-sombre-3);
  display: block;
}

/* ---------- Barre de titre et outils ---------- */
.orga-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.orga-titre {
  margin: 4px 0 0;
  font: 900 clamp(24px, 3.4vw, 34px) / 1 var(--ca-titre);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--orga-txt);
}
.orga-bar-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.orga-season {
  font: 600 11px/1 var(--ca-corps);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orga-txt-3);
}
.orga-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
  padding: 0 10px;
  border: 2px solid var(--orga-trait);
  background: transparent;
}
.orga-search:focus-within { border-color: var(--ca-or-clair); }
.orga-search-ico {
  width: 12px;
  height: 12px;
  flex: none;
  border: 2px solid var(--orga-txt-3);
  border-radius: 50%;
  box-shadow: 4px 4px 0 -1px var(--orga-txt-3);
}
.orga-search input {
  flex: 1;
  min-width: 0;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--orga-txt);
  font: 500 13px/1 var(--ca-corps);
}
.orga-search input::placeholder { color: var(--orga-txt-3); }
.orga-search input:focus { outline: none; }
/* La croix native du champ `search` est invisible sur fond sombre. */
.orga-search input::-webkit-search-cancel-button { filter: invert(1) opacity(0.6); }

/* ---------- Canevas ---------- */
.orga-canvas {
  position: relative; /* ancre `.orga-pitch`, en `inset: 0` */
  overflow-x: auto;
  padding-bottom: 4px;
}
/* Texture des blocs sombres du site, reprise à l'identique. */
.orga-pitch {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(245, 243, 239, 0.04) 0 10px, transparent 10px 20px);
  pointer-events: none;
}
.orga-tree { position: relative; min-width: 640px; }

/* ---------- Cartes ---------- */
.orga-card {
  position: relative;
  display: block;
  background: var(--ca-papier);
  border: 2px solid var(--ca-encre);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.38);
  color: var(--ca-encre);
  cursor: pointer;
}
.orga-card:focus-visible,
.orga-node:focus-visible {
  outline: 3px solid var(--ca-or-clair);
  outline-offset: 2px;
}
.orga-card--root { max-width: 320px; margin: 0 auto; }
.orga-card-body {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

/* Bandeau de rôle, à la couleur du club. */
.orga-band {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 12px;
  background: var(--ca-accent);
  color: var(--ca-sur-accent);
}
.orga-band--root { border-bottom: 2px solid var(--ca-encre); }
.orga-card--pole > .orga-band { height: 6px; padding: 0; }
.orga-num-root {
  font: 900 13px/1 var(--ca-titre);
  font-variant-numeric: tabular-nums;
}

.orga-crest {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ca-encre);
  color: var(--ca-papier);
  display: grid;
  place-items: center;
  font: 900 15px/1 var(--ca-titre);
}
.orga-id { min-width: 0; }
.orga-role {
  display: block;
  font: 800 9px/1.4 var(--ca-corps);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ca-txt-3);
}
.orga-band .orga-role { color: var(--ca-sur-accent); }
.orga-nom {
  display: block;
  font: 900 17px/1 var(--ca-titre);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}
.orga-nom--root { font-size: 22px; }
.orga-sub {
  display: block;
  margin-top: 2px;
  font: 500 11px/1.4 var(--ca-corps);
  color: var(--ca-txt-3);
}

/* ---------- Traits de liaison ---------- */
.orga-stem {
  display: block;
  width: 2px;
  height: 22px;
  margin: 0 auto;
  background: var(--orga-trait);
}
.orga-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  padding-top: 22px;
}
/* Barre horizontale : arrêtée au centre des colonnes extrêmes, jamais au bord. */
.orga-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--orga-trait);
}
.orga-col {
  position: relative;
  flex: 1 1 0;
  min-width: 152px;
  max-width: 250px;
}
.orga-col::before {
  content: '';
  position: absolute;
  top: -22px;
  left: 50%;
  width: 2px;
  height: 22px;
  background: var(--orga-trait);
}
/* Les moitiés de barre qui dépassent à gauche et à droite sont masquées. */
.orga-col--first::after,
.orga-col--last::after {
  content: '';
  position: absolute;
  top: -22px;
  width: 50%;
  height: 2px;
  background: var(--ca-encre);
}
.orga-col--first::after { left: 0; }
.orga-col--last::after { right: 0; }

/* ---------- Pôles dépliables ---------- */
.orga-pole > summary { list-style: none; cursor: pointer; }
.orga-pole > summary::-webkit-details-marker { display: none; }
.orga-toggle {
  display: block;
  padding: 6px 2px 0;
  font: 700 9px/1.4 var(--ca-corps);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orga-txt-3);
}
.orga-pole[open] .orga-toggle [data-orga-shut],
.orga-pole:not([open]) .orga-toggle [data-orga-open] { display: none; }

/* ---------- Listes indentées (niveaux 2-3) ---------- */
.orga-list {
  margin: 8px 0 0 4px;
  padding: 0 0 0 12px;
  list-style: none;
  border-left: 2px solid var(--orga-trait);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.orga-branch { display: block; }
.orga-branch > summary { list-style: none; cursor: pointer; }
.orga-branch > summary::-webkit-details-marker { display: none; }

.orga-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  background: rgba(245, 243, 239, 0.07);
  border: 1px solid var(--orga-trait);
  color: var(--orga-txt);
  cursor: pointer;
}
.orga-node .orga-role { color: var(--orga-txt-3); }
.orga-node .orga-nom { font-size: 14px; }
.orga-num {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ca-accent);
  color: var(--ca-sur-accent);
  font: 900 11px/1 var(--ca-titre);
  font-variant-numeric: tabular-nums;
}
.orga-node--l3 .orga-num { background: var(--ca-accent-fonce); }
.orga-count {
  margin-left: auto;
  flex: none;
  padding: 2px 7px;
  border: 1px solid var(--orga-trait);
  font: 700 10px/1.4 var(--ca-corps);
  color: var(--orga-txt-2);
  font-variant-numeric: tabular-nums;
}

/* ---------- Pastilles (niveau 4+) ---------- */
.orga-pills {
  margin: 6px 0 0 34px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.orga-pills li {
  padding: 3px 8px;
  border: 1px solid var(--orga-trait);
  font: 700 10px/1.4 var(--ca-corps);
  color: var(--orga-txt-2);
}

/* ---------- Sélection et recherche ---------- */
/* Les crochets sont ceux que pose `organigramme.public.js` :
   `is-sel` (carte choisie), `is-path` (colonne sur le chemin),
   `is-hit` (correspondance de recherche), `is-dim` (hors recherche). */
.orga-card.is-sel,
.orga-node.is-sel {
  outline: 3px solid var(--ca-or-clair);
  outline-offset: 2px;
}
.orga-card.is-hit,
.orga-node.is-hit {
  outline: 3px solid var(--ca-or-clair);
  outline-offset: 2px;
}

/* Atténuation PAR LA COULEUR et non par l'opacité : le texte atténué reste
   au-dessus de 4.5:1 sur l'encre, ce qu'un `opacity: .35` ne garantit pas. */
.orga-card.is-dim,
.orga-node.is-dim {
  background: rgba(245, 243, 239, 0.14);
  border-color: rgba(245, 243, 239, 0.24);
  box-shadow: none;
}
.orga-card.is-dim .orga-nom,
.orga-node.is-dim .orga-nom { color: var(--orga-txt-3); }
.orga-card.is-dim .orga-role,
.orga-node.is-dim .orga-role { color: var(--orga-txt-3); }
.orga-card.is-dim .orga-crest,
.orga-node.is-dim .orga-num {
  background: rgba(245, 243, 239, 0.2);
  color: var(--orga-txt-2);
}
.orga-card.is-dim .orga-band { background: rgba(245, 243, 239, 0.2); }
.orga-card.is-dim .orga-sub,
.orga-node.is-dim .orga-count { color: var(--orga-txt-3); }

/* Le chemin jusqu'à la carte choisie s'allume à la couleur du club. */
.orga-col.is-path::before,
.orga-col.is-path::after { background: var(--ca-accent); }
.orga-col--first.is-path::after,
.orga-col--last.is-path::after { background: var(--ca-encre); }

.orga mark { background: var(--ca-or-clair); color: var(--ca-encre); }

/* ---------- Pied : chaîne de responsabilité ---------- */
.orga-foot { margin-top: 18px; }
.orga-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: baseline;
  font: 500 12px/1.4 var(--ca-corps);
  color: var(--orga-txt-2);
}
.orga-stats b {
  font: 900 18px/1 var(--ca-titre);
  color: var(--orga-txt);
  margin-right: 4px;
}
.orga-hint { color: var(--orga-txt-3); }
.orga-detail {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 2px solid var(--ca-or-clair);
  color: var(--orga-txt);
}
.orga-detail-crest {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ca-encre);
  color: var(--ca-papier);
  display: grid;
  place-items: center;
  font: 900 13px/1 var(--ca-titre);
}
.orga-field { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.orga-field-k {
  font: 800 9px/1.4 var(--ca-corps);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orga-txt-3);
}
.orga-field-v { font: 700 13px/1.4 var(--ca-corps); }
.orga-field-v--num { font-variant-numeric: tabular-nums; color: var(--ca-or-clair); }
.orga-legal {
  margin: 12px 0 0;
  font: 500 11px/1.5 var(--ca-corps);
  color: var(--orga-txt-3);
}

/* ---------- Téléphone ---------- */
@media (max-width: 720px) {
  /* L'arbre horizontal ne tient pas : les pôles s'empilent, et le canevas
     cesse de défiler latéralement — un défilement horizontal sur mobile est
     une impasse, pas une fonctionnalité. */
  .orga-canvas { overflow-x: visible; }
  .orga-tree { min-width: 0; }
  .orga-row { flex-direction: column; padding-top: 14px; gap: 12px; }
  .orga-row::before { display: none; }
  .orga-col { max-width: none; }
  .orga-col::before { display: none; }
  .orga-col--first::after,
  .orga-col--last::after { display: none; }
  .orga-card--root { max-width: none; }
  .orga-nom--root { font-size: 19px; }
  /* Cibles tactiles : 44 px minimum sur les éléments qu'on touche. */
  .orga-node { min-height: 44px; }
  .orga-search input { height: 40px; }
}

@media (prefers-reduced-motion: no-preference) {
  .orga-list { transition: none; }
}