/* ═══════════════════════════════════════════════════════════════════════════
   TIRE ET POINTE — « LE MIDI » : le site au dessin de l'application.

   Demande d'Adrien (20/10/2026) : refaire le site — public, joueur, comite,
   administration — « totalement lie a l'application », beaucoup plus propre.
   La source de verite est le cahier de l'appli :
   passion-petanque-app/.travaux/le-midi/DESIGN.md, et ses jetons
   (lib/theme/couleurs.dart, jetons.dart).

   LA DIRECTION, en une phrase : une plage du Midi. Du sable chaud en sol, des
   cartes de chaux tres arrondies posees dessus avec leur ombre de plein
   soleil, la mer en tete de page avec sa houle et son astre, et un soleil qui
   se couche dans chaque bouton principal. La nuit (« La Buvette »), c'est le
   port en ete : l'eau noire, la lune sur l'horizon, le meme couchant.

   Trois familles de couleur, trois roles, jamais melanges :
     · le sable et la chaux  — les surfaces ;
     · le couchant (soleil → corail) — CE QUI SE FAIT : le geste principal ;
     · la mer (turquoise) — CE QUI INFORME : l'en-tete, le focus, une coche.

   COMMENT CETTE FEUILLE S'ACCROCHE
   Elle vit dans la couche « midi », nommee ici pour la premiere fois : elle se
   range donc APRES « tire », la derniere declaree par app.css, et l'emporte
   sur tout le reste sans un seul !important (qui, lui, inverserait l'ordre).
   Elle redefinit d'abord les jetons --tp-* : les 2 900 emplois qu'en font
   tire.css, tire-public.css et tire-poste.css basculent d'un coup. Puis elle
   redessine le chrome (en-tete, bannieres, pied, barre d'onglets) et le kit
   (bouton, carte, champ) sans renommer une seule classe : app.js, eclat.js,
   guide.js et les visites guidees les visent par leur nom.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────── LES CARACTERES ──
   Les memes fichiers que l'application, servis par le site (aucun tiers sur
   le chemin critique). Caveat Brush est deja declaree par polices.css. */

@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url("../polices/figtree-400.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap; src: url("../polices/figtree-500.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url("../polices/figtree-600.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url("../polices/figtree-700.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 800; font-display: swap; src: url("../polices/figtree-800.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600; font-display: swap; src: url("../polices/bricolage-600.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700; font-display: swap; src: url("../polices/bricolage-700.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 800; font-display: swap; src: url("../polices/bricolage-800.woff2") format("woff2"); }

@layer midi {

/* ─────────────────────────────────────────────────────────── LES JETONS ──
   Valeurs relevees dans lib/theme/couleurs.dart et jetons.dart : Plein
   Cagnard a gauche, La Buvette a droite. */

:root {
  color-scheme: light dark;

  --tp-sol:        light-dark(#F6ECDD, #071B29);
  --tp-carte:      light-dark(#FFFCF6, #0F2A3C);
  --tp-creux:      light-dark(#EBDDC8, #18384D);

  --tp-encre:      light-dark(#0E2A3A, #FFF8EC);
  --tp-encre-2:    light-dark(#2E4654, #DCE7EA);
  --tp-encre-3:    light-dark(#5C6468, #A3B8C2);
  --tp-encre-4:    light-dark(#9AA0A0, #6C8794);

  --tp-or:         #FFB52E;
  --tp-or-vif:     #FFD06B;
  --tp-or-profond: #F08A24;
  --tp-or-lisible: light-dark(#9E4A14, #FFB52E);
  --tp-sur-or:     light-dark(#0E2A3A, #071B29);

  --tp-trait:      light-dark(#EBDDC8, rgb(255 255 255 / .09));
  --tp-trait-fort: light-dark(#DCCAB0, rgb(255 255 255 / .16));

  --tp-vert:       light-dark(#23774F, #6CD79D);
  --tp-vert-fond:  light-dark(#DCEFE2, rgb(14 122 79 / .28));
  --tp-rouge:      light-dark(#B93A2A, #F68675);
  --tp-rouge-fond: light-dark(#FADFD8, rgb(193 58 34 / .25));
  --tp-ambre:      light-dark(#8A5A00, #F7B83D);
  --tp-ambre-fond: light-dark(#FBEBC6, rgb(130 86 4 / .25));

  --tp-argent:     #C9CED3;
  --tp-bronze:     #C98B5E;

  /* Ce que l'ancienne charte n'avait pas : la mer, le corail, l'horizon. */
  --mi-mer:          light-dark(#14A3A8, #3FD0C9);
  --mi-mer-profonde: light-dark(#0B6E7C, #3FD0C9);
  --mi-mer-fond:     light-dark(#D5F0EC, rgb(20 163 168 / .2));
  --mi-corail:       #F26A4B;
  --mi-corail-fond:  light-dark(#FDE2D8, rgb(242 106 75 / .2));
  --mi-horizon-haut: light-dark(#0A5566, #051722);
  --mi-horizon-bas:  light-dark(#0D8590, #0B4A5C);
  --mi-sur-horizon:  light-dark(#FFFFFF, #FFF8EC);
  --mi-marine:       light-dark(#0E2A3A, #18384D);

  /* LE COUCHANT — le degrade du geste principal ; LE LAGON — celui de la mer. */
  --mi-couchant:        linear-gradient(135deg, var(--tp-or-vif) 0%, var(--tp-or) 45%, var(--mi-corail) 100%);
  --mi-couchant-presse: linear-gradient(135deg, var(--tp-or) 0%, var(--tp-or-profond) 50%, var(--mi-corail) 100%);
  --mi-lagon:           linear-gradient(180deg, var(--mi-horizon-haut), var(--mi-horizon-bas));

  --tp-titre: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --tp-texte: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tp-main:  "Caveat Brush", "Brush Script MT", cursive;

  --tp-r-carte:  24px;
  --tp-r-champ:  14px;
  --tp-r-tuile:  18px;
  --tp-r-pilule: 999px;

  /* L'ombre d'une carte posee sur le sable : une de contact, nette, une
     d'ambiance, longue et pale — c'est la seconde qui fait le relief. Brune :
     une ombre grise sur du sable chaud se lit comme une salissure. */
  --tp-ombre:      0 1px 2px rgb(92 62 24 / .10), 0 12px 22px -6px rgb(92 62 24 / .16);
  --tp-ombre-haut: 0 2px 4px rgb(92 62 24 / .10), 0 22px 34px -10px rgb(92 62 24 / .24);

  /* Le grain du sable : une tuile de bruit, sans fichier. */
  --tp-papier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .52 0 0 0 0 .38 0 0 0 0 .2 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* La houle : le sable qui mord sur la mer (masque), l'ecume par-dessus. */
  --mi-vague: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 62C160 40 300 34 440 48S700 86 860 78 1120 40 1260 42 1400 52 1440 56V100H0Z'/%3E%3C/svg%3E");
  --mi-ecume: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%233FD0C9' fill-opacity='.35' d='M0 50C150 30 290 22 430 36S700 76 860 68 1120 30 1260 32 1400 42 1440 46V100H0Z'/%3E%3Cpath fill='%23FFFFFF' fill-opacity='.55' d='M0 57C155 36 295 29 435 43S700 82 860 74 1120 36 1260 38 1400 48 1440 52V100H0Z'/%3E%3C/svg%3E");
  --mi-vague-pied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V30C1300 46 1160 52 1000 40S760 8 600 18 300 52 160 46 40 30 0 34Z'/%3E%3C/svg%3E");
  --mi-trait-vague: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8'%3E%3Cpath d='M1 5c4-4 8-4 12 0s8 4 12 0 8-4 12 0' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");

  /* L'astre : le soleil de l'en-tete, ses rayons et son halo. */
  --mi-soleil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 150'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFD06B'/%3E%3Cstop offset='.5' stop-color='%23FFB52E'/%3E%3Cstop offset='1' stop-color='%23F26A4B'/%3E%3C/linearGradient%3E%3CradialGradient id='h'%3E%3Cstop offset='0' stop-color='%23FFD06B' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%23FFD06B' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='110' cy='118' r='108' fill='url(%23h)'/%3E%3Cg stroke='%23FFD06B' stroke-width='8' stroke-linecap='round'%3E%3Cpath d='M110 46V26M145 57l11-19M75 57 64 38M171 83l19-11M49 83 30 72M180 118h22M40 118H18'/%3E%3C/g%3E%3Ccircle cx='110' cy='118' r='56' fill='url(%23g)'/%3E%3C/svg%3E");
  --mi-lune: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 150'%3E%3Cdefs%3E%3CradialGradient id='h'%3E%3Cstop offset='0' stop-color='%23FFF3D0' stop-opacity='.35'/%3E%3Cstop offset='1' stop-color='%23FFF3D0' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='110' cy='112' r='100' fill='url(%23h)'/%3E%3Ccircle cx='110' cy='112' r='46' fill='%23FFF3D0'/%3E%3Ccircle cx='128' cy='100' r='40' fill='%23051722' fill-opacity='.9'/%3E%3C/svg%3E");

  --mi-elan: 420ms cubic-bezier(.2, .8, .2, 1);
}

/* La nuit : une seule ombre, profonde (une ombre pale sur l'eau noire ne se
   voit pas), un grain d'ecume au lieu du grain de sable, et la lune. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="cagnard"]) {
    --tp-ombre:      0 14px 24px -8px rgb(0 6 12 / .6);
    --tp-ombre-haut: 0 22px 36px -10px rgb(0 6 12 / .7);
    --tp-papier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .95 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --mi-soleil: var(--mi-lune);
  }
}

:root[data-theme="cagnard"] { color-scheme: light; }

:root[data-theme="buvette"] {
  color-scheme: dark;
  --tp-ombre:      0 14px 24px -8px rgb(0 6 12 / .6);
  --tp-ombre-haut: 0 22px 36px -10px rgb(0 6 12 / .7);
  --tp-papier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .95 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --mi-soleil: var(--mi-lune);
}

/* ─────────────────────────────────────────────────────────── LE SOL ── */

body {
  background-color: var(--tp-sol);
  background-image: var(--tp-papier);
  background-size: 240px;
  color: var(--tp-encre);
  font-family: var(--tp-texte);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
}

/* Bricolage se resserre (−2 % de la taille), et jamais en capitales : les
   capitales sont pour le surtitre et l'etiquette. */
h1, h2, h3, .pied-marque {
  font-family: var(--tp-titre);
  letter-spacing: -.02em;
  text-transform: none;
}
h1 { font-weight: 800; line-height: 1.05; }
h2, h3 { font-weight: 700; line-height: 1.15; }

::selection { background: var(--tp-or-vif); color: var(--tp-sur-or); }

:focus-visible {
  outline: 3px solid var(--mi-mer);
  outline-offset: 2px;
}

.surtitre {
  font-family: var(--tp-texte);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--tp-encre-3);
}

/* ─────────────────────────────────────────────────────── L'EN-TETE ──
   La mer en haut de chaque page : la barre est posee sur l'eau du large, et
   la banniere de la page la prolonge jusqu'a la houle. Le logo est donc
   toujours le lettrage clair. */

.entete {
  background: var(--mi-horizon-haut);
  backdrop-filter: none;
  border-bottom: 0;
  box-shadow: none;
  color: var(--mi-sur-horizon);
}

.entete.est-collee { box-shadow: 0 10px 24px -12px rgb(0 20 30 / .55); }

.entete .enveloppe { min-height: 68px; }

.entete .marque .logo-encre { display: none; }
.entete .marque .logo-nuit { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="cagnard"]) .entete .marque .logo-encre { display: none; }
}
:root[data-theme="cagnard"] .entete .marque .logo-encre { display: none; }
:root[data-theme="cagnard"] .entete .marque .logo-nuit { display: block; }

.entete .prov > summary {
  background: rgb(255 255 255 / .12);
  color: var(--mi-sur-horizon);
  border: 1px solid rgb(255 255 255 / .18);
}

/* La navigation : des galets d'eau claire ; la page courante est le galet
   de chaux, l'encre du large dessus — comme la puce active de l'appli. */
.nav > a {
  height: 40px;
  padding: 0 .95rem;
  border-radius: var(--tp-r-pilule);
  color: rgb(255 255 255 / .86);
  font-weight: 600;
  font-size: .9375rem;
  box-shadow: none;
}
.nav > a:hover { background: rgb(255 255 255 / .12); color: #FFFFFF; }
.nav > a[aria-current="page"] {
  background: #FFFCF6;
  color: #0E2A3A;
  font-weight: 700;
  box-shadow: 0 6px 14px -6px rgb(0 20 30 / .5);
  border-radius: var(--tp-r-pilule);
}
.nav > a[title] { width: 42px; padding: 0; justify-content: center; }
.nav .nav-sortie { color: rgb(255 255 255 / .75); }

.nav .nav-cta {
  height: 44px;
  padding: 0 1.25rem;
  background: var(--mi-couchant);
  color: var(--tp-sur-or);
  box-shadow: 0 8px 18px -8px rgb(240 138 36 / .8), inset 0 1px 0 rgb(255 255 255 / .45);
}
.nav .nav-cta:hover { background: var(--mi-couchant-presse); color: var(--tp-sur-or); }

/* Le compteur (pas l'etiquette : .pastille-neutre & co. gardent leur ton). */
.nav .pastille,
.barre-onglets .puce {
  background: var(--mi-corail);
  color: #FFFFFF;
}

/* La bande sous l'en-tete devient la houle des pages qui n'ont pas de
   banniere : quelques pixels de mer, puis le sable qui mord dessus. Une page
   qui ouvre sur sa banniere la porte elle-meme : la bande s'efface. */
.bande {
  display: block;
  position: relative;
  height: clamp(30px, 4.5vw, 52px);
  background: var(--mi-ecume) bottom / 100% 100% no-repeat, var(--mi-horizon-haut);
}
.bande::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tp-sol);
  -webkit-mask: var(--mi-vague) bottom / 100% 100% no-repeat;
  mask: var(--mi-vague) bottom / 100% 100% no-repeat;
}
body:has(#contenu > :is(.banniere, .bandeau-photo)) .bande { display: none; }

/* ──────────────────────────────────────────────────── LES BANNIERES ──
   L'horizon de l'appli : le lagon du large au rivage, le grand titre blanc,
   l'astre qui se couche a droite et la houle qui le mange par le bas. */

.banniere,
.bandeau-photo {
  position: relative;
  isolation: isolate;
  overflow: clip;
  margin: 0;
  border: 0;
  border-radius: 0;
  color: var(--mi-sur-horizon);
  padding-block: clamp(1.25rem, 4vw, 2.5rem) clamp(4.5rem, 9vw, 7rem);
  background:
    var(--mi-ecume) bottom / 100% clamp(34px, 6vw, 72px) no-repeat,
    var(--mi-lagon);
}

.banniere::before,
.bandeau-photo::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: clamp(-30px, 4vw, 90px);
  bottom: clamp(4px, 1.6vw, 22px);
  width: clamp(170px, 24vw, 300px);
  aspect-ratio: 220 / 150;
  background: var(--mi-soleil) center / contain no-repeat;
  opacity: 1;
  inset-inline-start: auto;
  top: auto;
  border-radius: 0;
  filter: none;
  transform: none;
}

.banniere::after,
.bandeau-photo::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: -1px;
  top: auto;
  height: clamp(34px, 6vw, 72px);
  background: var(--tp-sol);
  opacity: 1;
  -webkit-mask: var(--mi-vague) bottom / 100% 100% no-repeat;
  mask: var(--mi-vague) bottom / 100% 100% no-repeat;
}

.banniere > .enveloppe,
.bandeau-photo > .enveloppe {
  position: relative;
  z-index: 1;
}

.banniere h1,
.bandeau-photo h1 {
  color: var(--mi-sur-horizon);
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  letter-spacing: -.035em;
  margin: .25rem 0 .5rem;
  max-width: 18ch;
  text-wrap: balance;
}

.banniere :is(.sous, p:not(.surtitre)),
.bandeau-photo :is(.sous, p:not(.surtitre)) {
  color: rgb(255 255 255 / .86);
  max-width: 52ch;
}

.banniere .surtitre,
.bandeau-photo .surtitre {
  color: var(--tp-or-vif);
  --jaune: var(--tp-or-vif);
  --jaune-profond: var(--tp-or-vif);
}

.banniere a:not(.bouton),
.bandeau-photo a:not(.bouton) { color: #FFFFFF; }

/* La banniere a photo devient la mer, comme toutes les autres : la photo
   sous un titre se lisait mal, et l'en-tete de l'appli n'en porte pas. Les
   photos vivent dans les cartes (la carte postale de l'accueil). */
.bandeau-photo :is(picture, img) { display: none; }

/* Sur un telephone, l'astre se fait discret : il ne doit jamais passer
   derriere un bouton de la banniere. */
@media (max-width: 600px) {
  .banniere::before,
  .bandeau-photo::before { width: 128px; right: -26px; bottom: 10px; opacity: .9; }
}

/* Une banniere qui porte un bouton pousse a droite (le profil) laisse
   l'astre de cote sur le telephone : il passait sous le bouton. */
@media (max-width: 600px) {
  .banniere:has(.pousse)::before { display: none; }
}
/* Le rang de la fiche joueur occupe la droite a toutes les tailles. */
.banniere:has(.fj-rang)::before { display: none; }

/* Les chiffres posés dans une banniere (agenda : dates, a venir, jouees). */
.banniere .pa-chiffres b,
.banniere .pa-chiffres strong {
  font-family: var(--tp-titre);
  color: #FFFFFF;
}

/* L'en-tete de l'agenda : tire-public.css l'avait fait de papier clair,
   avec ses tuiles et ses filtres blancs. Sur la mer, tout passe en verre
   d'eau ; le filtre choisi devient le galet de chaux. */
.pa-surtitre { background: none; padding: 0; color: var(--tp-or-vif); }
.pa-chiffres > li {
  background: rgb(255 255 255 / .12);
  border: 1px solid rgb(255 255 255 / .2);
  box-shadow: none;
}
.pa-chiffres b { color: #FFFFFF; font-family: var(--tp-titre); }
.pa-chiffres span { color: rgb(255 255 255 / .76); }
.banniere .pa-puce {
  background: rgb(255 255 255 / .12);
  border: 1px solid rgb(255 255 255 / .2);
  color: #FFFFFF;
  box-shadow: none;
}
.banniere .pa-puce:hover { background: rgb(255 255 255 / .2); color: #FFFFFF; }
.banniere .pa-puce[aria-current] {
  background: #FFFCF6;
  border-color: #FFFCF6;
  color: #0E2A3A;
}

/* Le surtitre d'une banniere n'est jamais une pastille : des feuilles
   anciennes lui posaient un fond pale, illisible sur la mer. */
.banniere .surtitre,
.bandeau-photo .surtitre {
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}

/* Des vues ecrivent la couleur du surtitre EN LIGNE (#6B4E08, le brun fait
   pour l'ancienne banniere jaune) : brun sur la mer, il ne se lit pas. Seul
   un !important passe devant un style en ligne ; il ne vise que ce cas. */
:is(.banniere, .bandeau-photo) .surtitre[style*="color"] { color: var(--tp-or-vif) !important; }

/* Le rang de la fiche joueur, pose dans la banniere : du verre d'eau. */
.banniere .fj-rang {
  background: rgb(255 255 255 / .12);
  border: 1px solid rgb(255 255 255 / .2);
  box-shadow: none;
  color: #FFFFFF;
}
.banniere .fj-rang :is(span, b, strong, p, small) { color: #FFFFFF; }

/* Les rangees de filtres du poste glissent sous le doigt au lieu de
   pousser la page hors de l'ecran (la page Licencies debordait de 457 px). */
.adm-filtres {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.adm-filtres::-webkit-scrollbar { display: none; }
/* Le plan de travail du poste ne s'elargit jamais au-dela de l'ecran : un
   element de grille garde sinon la largeur de son plus long tableau. */
.poste-plan { min-width: 0; max-width: 100%; }

/* Les memes regles pour tout ce qu'une banniere pose sur l'eau : les rails
   de filtres (series, saisons) en verre d'eau, le choix courant en galet de
   chaux ; les encadres (releve officiel, embargo) en verre, texte blanc. */
.banniere :is(.cl-series, .cl-saisons, nav) a:not(.bouton) {
  background: rgb(255 255 255 / .12);
  border: 1px solid rgb(255 255 255 / .2);
  color: #FFFFFF;
  box-shadow: none;
}
.banniere :is(.cl-series, .cl-saisons, nav) a:not(.bouton):hover { background: rgb(255 255 255 / .2); color: #FFFFFF; }
.banniere :is(.cl-series, .cl-saisons, nav) a:not(.bouton):is([aria-current], .actif, .est-actif) {
  background: #FFFCF6;
  border-color: #FFFCF6;
  color: #0E2A3A;
}
.banniere .cl-releve {
  background: rgb(255 255 255 / .12);
  border: 1px solid rgb(255 255 255 / .2);
  border-left: 3px solid var(--tp-or-vif);
  color: rgb(255 255 255 / .88);
  box-shadow: none;
}
.banniere .cl-releve :is(strong, b, svg) { color: #FFFFFF; }

/* Le soleil se leve une fois, a l'arrivee — puis il se pose. Rien ne
   tourne sans fin (la regle de la houle du cahier). */
@media (prefers-reduced-motion: no-preference) {
  .banniere::before,
  .bandeau-photo::before { animation: mi-astre 1.1s cubic-bezier(.2, .8, .2, 1) both; }
  .banniere > .enveloppe > *,
  .bandeau-photo > .enveloppe > * { animation: mi-monte .6s cubic-bezier(.2, .8, .2, 1) both; }
  .banniere > .enveloppe > :nth-child(2),
  .bandeau-photo > .enveloppe > :nth-child(2) { animation-delay: .06s; }
  .banniere > .enveloppe > :nth-child(3),
  .bandeau-photo > .enveloppe > :nth-child(3) { animation-delay: .12s; }
  .banniere > .enveloppe > :nth-child(n+4),
  .bandeau-photo > .enveloppe > :nth-child(n+4) { animation-delay: .18s; }
}

@keyframes mi-astre {
  from { transform: translateY(38%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes mi-monte {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ─────────────────────────────────────────────────────────── LE KIT ── */

/* LE BOUTON D'OR — le couchant, un seul par ecran. */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 50px;
  padding: 0 1.5rem;
  border: 0;
  border-radius: var(--tp-r-pilule);
  background: var(--mi-couchant);
  color: var(--tp-sur-or);
  font-family: var(--tp-texte);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  box-shadow: 0 10px 20px -10px rgb(240 138 36 / .9), inset 0 1px 0 rgb(255 255 255 / .45);
  transition: transform var(--mi-elan), box-shadow var(--mi-elan), background var(--mi-elan);
}
.bouton:hover {
  background: var(--mi-couchant);
  color: var(--tp-sur-or);
  transform: translateY(-1px);
  box-shadow: 0 14px 24px -10px rgb(240 138 36 / .95), inset 0 1px 0 rgb(255 255 255 / .5);
}
.bouton:active { background: var(--mi-couchant-presse); transform: translateY(1px) scale(.99); }

.bouton-petit { min-height: 40px; padding: 0 1.1rem; font-size: .875rem; }

/* La seconde action forte : le bleu du large. */
.bouton-bleu,
.bouton-bleu:hover {
  background: var(--mi-marine);
  color: #FFFFFF;
  box-shadow: 0 10px 20px -12px rgb(14 42 58 / .8);
}

/* Le fantome : contour de sable, encre du large. Le contour passe par la
   BORDURE (et pas une ombre interieure) : des vues la recolorent en ligne. */
.bouton-vide {
  background: transparent;
  color: var(--tp-encre);
  border: 1.5px solid var(--tp-trait-fort);
  box-shadow: none;
}
.bouton-vide:hover {
  background: color-mix(in oklab, var(--tp-creux) 55%, transparent);
  color: var(--tp-encre);
  box-shadow: none;
}

.bouton-vert,
.bouton-vert:hover {
  background: var(--tp-vert);
  color: #FFFFFF;
  box-shadow: 0 10px 20px -12px rgb(35 119 79 / .7);
}

.bouton-danger,
.bouton-danger:hover {
  background: var(--tp-rouge-fond);
  color: var(--tp-rouge);
  box-shadow: none;
}

/* Sur la mer, le fantome s'ecrit en blanc. */
:is(.banniere, .bandeau-photo, .pied, .carte-bleue, .poste-tete) .bouton-vide {
  color: #FFFFFF;
  border-color: rgb(255 255 255 / .45);
}
:is(.banniere, .bandeau-photo, .pied, .carte-bleue, .poste-tete) .bouton-vide:hover { background: rgb(255 255 255 / .12); }

/* LA CARTE — de la chaux, rayon 24, posee avec son ombre de plein soleil. */
.carte {
  background: var(--tp-carte);
  border: 1px solid light-dark(transparent, rgb(255 255 255 / .06));
  border-radius: var(--tp-r-carte);
  box-shadow: var(--tp-ombre);
}
.carte-nette { border-radius: var(--tp-r-tuile); }
.carte-lien { transition: transform var(--mi-elan), box-shadow var(--mi-elan); }
.carte-lien:hover { transform: translateY(-2px); box-shadow: var(--tp-ombre-haut); }

/* La carte « mer » (l'appel du comite, une annonce forte) et la carte d'or. */
.carte-bleue {
  background: var(--mi-ecume) bottom / 100% 26px no-repeat, var(--mi-lagon);
  color: var(--mi-sur-horizon);
  border: 0;
}
.carte-bleue :is(h1, h2, h3) { color: #FFFFFF; }
.carte-bleue .surtitre { color: var(--tp-or-vif); }
.carte-bleue :is(p, .sous, .muet) { color: rgb(255 255 255 / .82); }

.carte-jaune {
  background: var(--mi-couchant);
  color: var(--tp-sur-or);
  border: 0;
}

/* LES CHAMPS — de la chaux bordee de sable mouille, et la mer au focus.
   ⚠️ .champ est ici le CONTENEUR (libelle + saisie) : on ne vise que la
   saisie elle-meme, sinon le libelle prend un cadre. */
:is(main, .tp-portail) :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="range"], [type="file"], [type="color"]), select, textarea) {
  border-radius: var(--tp-r-champ);
  border: 1.5px solid var(--tp-trait-fort);
  background-color: var(--tp-carte);
  color: var(--tp-encre);
  font-family: var(--tp-texte);
  font-weight: 500;
}
:is(main, .tp-portail) :is(input, select, textarea):focus {
  border-color: var(--mi-mer);
  box-shadow: 0 0 0 4px var(--mi-mer-fond);
  outline: none;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--mi-mer-profonde); }

/* Un seul dessin de libelle partout : Figtree 700, en casse normale. */
.champ > label,
.choix-canal legend {
  font-family: var(--tp-texte);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tp-encre-2);
}

/* LES MESSAGES */
.message { border-radius: var(--tp-r-champ); border: 0; }
.message-info { background: var(--mi-mer-fond); color: var(--mi-mer-profonde); }

/* LE TITRE DE SECTION — titre Bricolage et son trait de vague, comme
   « Section » dans l'appli. Seulement le titre qui ouvre une section. */
main section > .enveloppe > h2:first-child,
main section > .enveloppe > .surtitre + h2 {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  margin-bottom: 1.1rem;
}
main section > .enveloppe > h2:first-child::after,
main section > .enveloppe > .surtitre + h2::after {
  content: "";
  display: block;
  width: 36px;
  height: 8px;
  margin-top: .45rem;
  background: var(--mi-mer);
  -webkit-mask: var(--mi-trait-vague) left / contain no-repeat;
  mask: var(--mi-trait-vague) left / contain no-repeat;
}

/* La revelation au defilement : ce qui est sous la ligne de flottaison
   arrive en montant, une fois. CSS seul, et seulement la ou le navigateur
   sait le faire : ailleurs, tout est simplement la. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main > section,
    main > .section,
    main > .section-mince {
      animation: mi-revele linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 28%;
    }
  }
}
@keyframes mi-revele {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* ──────────────────────────────────────────────────────────── LE PIED ──
   La mer, encore : le sable s'arrete sur une derniere vague, et la page se
   ferme sur l'eau du large qui fonce vers la nuit. */

.pied {
  position: relative;
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: clamp(4rem, 8vw, 6rem);
  background: linear-gradient(180deg, var(--mi-horizon-bas) 0%, var(--mi-horizon-haut) 45%, light-dark(#07303B, #020C13) 100%);
  color: rgb(255 255 255 / .9);
}
.pied::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: clamp(30px, 5vw, 60px);
  background: var(--tp-sol);
  -webkit-mask: var(--mi-vague-pied) top / 100% 100% no-repeat;
  mask: var(--mi-vague-pied) top / 100% 100% no-repeat;
}
.pied .intitule { color: var(--tp-or-vif); }
.pied-marque { color: #FFFFFF; font-weight: 800; font-size: 1.75rem; }
.pied-baseline { color: rgb(255 255 255 / .78); }
.pied-liens a { color: rgb(255 255 255 / .9); }
.pied-liens a:hover { color: var(--tp-or-vif); }
.pied-app { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .18); }
.pied-bas { color: rgb(255 255 255 / .6); border-top-color: rgb(255 255 255 / .14); }
.pied-bas a { color: rgb(255 255 255 / .85); }
.pied :is(.choix-theme, .choix-texte) button {
  background: rgb(255 255 255 / .08);
  color: rgb(255 255 255 / .85);
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: var(--tp-r-pilule);
}
.pied :is(.choix-theme, .choix-texte) button[aria-pressed="true"] {
  background: #FFFCF6;
  color: #0E2A3A;
  border-color: #FFFCF6;
}
.pied .aide { color: rgb(255 255 255 / .6); }

/* ─────────────────────────────────────────────── LA BARRE D'ONGLETS ──
   La barre d'un iPhone : plaquee tout en bas, pleine largeur, en verre
   depoli, la zone sure sous les icones (demande d'Adrien, 20/10/2026 :
   « menu plaque en bas, header plaque en haut »). La place courante prend
   le galet d'encre. */

.barre-onglets {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 8px env(safe-area-inset-bottom, 0px);
  border: 0;
  border-top: 1px solid var(--tp-trait);
  border-radius: 0;
  background: color-mix(in oklab, var(--tp-carte) 84%, transparent);
  backdrop-filter: saturate(1.8) blur(20px);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  box-shadow: none;
}
/* Le navigateur de Telegram (et Safari sur iOS 26) pose sa propre barre
   flottante PAR-DESSUS le bas de la page : la notre s'arrete au-dessus, et
   le contenu passait dans l'entre-deux. Son verre se prolonge donc sous le
   bord de l'ecran — invisible ailleurs, il bouche cet entre-deux la. */
.barre-onglets::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 160px;
  background: inherit;
  -webkit-backdrop-filter: inherit;
  backdrop-filter: inherit;
}
.barre-onglets > a {
  min-height: 54px;
  padding: .25rem .125rem;
  color: var(--tp-encre-3);
  font-size: .6875rem;
  font-weight: 700;
}
.barre-onglets .rond {
  width: 46px;
  height: 30px;
  border-radius: var(--tp-r-pilule);
  transition: background var(--mi-elan), color var(--mi-elan), transform var(--mi-elan);
}
.barre-onglets > a[aria-current="page"] { color: var(--tp-encre); }
.barre-onglets > a[aria-current="page"] .rond {
  background: var(--tp-encre);
  color: var(--tp-carte);
}
.barre-onglets > a:active .rond { transform: scale(.92); }

@media (max-width: 900px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}

/* Sur le telephone, l'horizon se fait compact : la page commence tout de
   suite, comme sous le grand titre d'un ecran d'iPhone. */
@media (max-width: 600px) {
  .banniere,
  .bandeau-photo { padding-block: 1rem 3.4rem; }
  .banniere h1,
  .bandeau-photo h1 { font-size: 2.15rem; margin: .1rem 0 .35rem; }
  .banniere :is(.sous, p:not(.surtitre)),
  .bandeau-photo :is(.sous, p:not(.surtitre)) { font-size: .9062rem; line-height: 1.45; }
  .banniere .bouton,
  .bandeau-photo .bouton { min-height: 40px; padding: 0 1rem; font-size: .875rem; }
  .pa-chiffres > li { padding: .45rem .5rem; min-height: 0; }
  .pa-chiffres b { font-size: 1.35rem; }
  .pa-chiffres span { font-size: .625rem; }
  .banniere .pa-puce,
  .banniere :is(.cl-series, .cl-saisons, nav) a:not(.bouton) { min-height: 36px; padding: 0 .85rem; font-size: .8438rem; }
  .mi-accueil-tete { padding-block: 1.25rem 5rem; }
  .mi-accueil-tete h1 { font-size: 2.6rem; }
  .mi-bonjour h1 { font-size: 2.8rem; }
  .nav .nav-cta { height: 38px; padding: 0 1rem; font-size: .875rem; }
}

/* L'en-tete, plaque en haut : il reste colle au defilement, la zone sure
   de l'encoche comprise, toujours sur l'eau du large. */
.entete {
  position: sticky;
  top: 0;
  z-index: 45;
  padding-top: env(safe-area-inset-top, 0px);
}
@media (max-width: 900px) {
  .entete .enveloppe { min-height: 58px; }
  .entete .marque img { height: 38px; }
}

/* ─────────────────────────────────────────────── L'ACCUEIL DU VISITEUR ──
   pages/accueil_visiteur.php : l'horizon et ses deux portes, la carte
   postale de la prochaine journee qui chevauche la houle, le fil, l'agenda
   en tickets, l'appli. */

.mi-main {
  margin: 0;
  font-family: var(--tp-main);
  font-size: clamp(1.75rem, 5.5vw, 2.625rem);
  line-height: 1;
  color: var(--tp-or-vif);
  rotate: -2deg;
  transform-origin: left center;
}

.mi-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.25rem;
}

.mi-accueil-tete { padding-block: clamp(1.75rem, 5vw, 3.5rem) clamp(6rem, 12vw, 9rem); }
.mi-accueil-tete h1 { font-size: clamp(2.6rem, 9vw, 4.8rem); margin-top: .1rem; }

/* La carte postale : la photo plein cadre, le voile du soir par le bas, le
   titre enorme, le bouton DANS la photo. Elle mord sur la houle. */
.mi-prochaine { position: relative; z-index: 2; margin-top: clamp(-5.5rem, -9vw, -3rem); }

.mi-heros {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  min-height: clamp(320px, 56vw, 440px);
  border-radius: 28px;
  color: #FFFFFF;
  text-decoration: none;
  box-shadow: var(--tp-ombre-haut);
}
.mi-heros :is(picture, img) {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 900ms cubic-bezier(.2, .8, .2, 1);
}
.mi-heros::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(5 23 34 / 0) 30%, rgb(5 23 34 / .55) 62%, rgb(5 23 34 / .9) 100%);
}
.mi-heros:hover :is(picture, img) { scale: 1.04; }

.mi-heros-texte {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  padding: clamp(20px, 4vw, 34px);
}
.mi-heros .surtitre { color: var(--tp-or-vif); margin: 0; }
.mi-heros-titre {
  font-family: var(--tp-titre);
  font-weight: 800;
  font-size: clamp(2.2rem, 8vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.035em;
}
.mi-heros-meta { font-weight: 600; color: rgb(255 255 255 / .88); }
.mi-heros .bouton { margin-top: .75rem; }

/* L'en-tete de section : le titre et son trait de vague, le « Tout voir »
   en terre cuite au bout de la ligne. */
.mi-section-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.mi-section-tete h2 {
  margin: 0;
  font-size: clamp(1.4rem, 3.4vw, 1.85rem);
  color: var(--tp-encre);
}
.mi-section-tete h2::after {
  content: "";
  display: block;
  width: 36px;
  height: 8px;
  margin-top: .45rem;
  background: var(--mi-mer);
  -webkit-mask: var(--mi-trait-vague) left / contain no-repeat;
  mask: var(--mi-trait-vague) left / contain no-repeat;
}
.mi-voir {
  flex: 0 0 auto;
  padding-top: .35rem;
  color: var(--tp-or-lisible);
  font-weight: 700;
  font-size: .9375rem;
  text-decoration: none;
}
.mi-voir:hover { text-decoration: underline; }

.mi-meta { color: var(--tp-encre-3); font-weight: 600; font-size: .8438rem; }

.mi-etiquette {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--tp-r-pilule);
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mi-etiquette-sable  { background: var(--tp-creux); color: var(--tp-encre-2); }
.mi-etiquette-mer    { background: var(--mi-mer-fond); color: var(--mi-mer-profonde); }
.mi-etiquette-corail { background: var(--mi-corail-fond); color: light-dark(#A63A1E, #F68675); }

/* Le fil : des cartes de chaux, une colonne au telephone, une grille au
   bureau. Le titre porte la carte, la date recule. */
.mi-fil {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .mi-fil { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
.mi-annonce {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  height: 100%;
  padding: 18px 20px 20px;
  color: var(--tp-encre);
  text-decoration: none;
}
.mi-annonce-tete { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.mi-annonce-titre {
  font-family: var(--tp-titre);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.mi-annonce-chapo {
  color: var(--tp-encre-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mi-vide { display: grid; justify-items: center; gap: .75rem; padding: 28px 20px; text-align: center; color: var(--tp-encre-2); }
.mi-vide p { margin: 0; }
.mi-parasol { width: 96px; aspect-ratio: 220 / 150; background: var(--mi-soleil) center / contain no-repeat; }

/* L'agenda en tickets : le bloc de la date en sable mouille, le titre, le
   lieu ; une seule carte qui empile, comme « Liste » dans l'appli. */
.mi-tickets { margin: 0; padding: 6px 0; list-style: none; }
.mi-tickets > li + li { border-top: 1px solid var(--tp-trait); margin-left: 88px; }
.mi-tickets > li + li .mi-ticket { margin-left: -88px; }
.mi-ticket {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  color: var(--tp-encre);
  text-decoration: none;
  transition: background var(--mi-elan);
}
.mi-ticket:hover { background: color-mix(in oklab, var(--tp-creux) 45%, transparent); }
.mi-ticket-date {
  display: grid;
  place-content: center;
  width: 56px;
  height: 62px;
  border-radius: 16px;
  background: var(--tp-creux);
  text-align: center;
  line-height: 1;
}
.mi-ticket-date b { font-family: var(--tp-titre); font-weight: 800; font-size: 1.5625rem; letter-spacing: -.03em; }
.mi-ticket-date span { margin-top: 3px; font-size: .6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--tp-or-lisible); }
.mi-ticket-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mi-ticket-titre { font-weight: 700; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) {
  .mi-ticket { grid-template-columns: 56px minmax(0, 1fr); row-gap: 6px; }
  .mi-ticket .mi-etiquette { grid-column: 2; justify-self: start; }
}

/* Le rail des photos du fil : des cartes postales qu'on feuillette du
   pouce, la suivante depasse au bord pour dire qu'il y en a d'autres. */
.mi-rail-photos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 42%);
  gap: 12px;
  margin: 0 calc(-1 * var(--gouttiere, 16px));
  padding: 4px var(--gouttiere, 16px) 14px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.mi-rail-photos::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .mi-rail-photos { grid-auto-columns: minmax(180px, 1fr); } }
.mi-rail-photos li { scroll-snap-align: start; }
.mi-rail-photos a {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  box-shadow: var(--tp-ombre);
  color: #FFFFFF;
  text-decoration: none;
}
.mi-rail-photos img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s cubic-bezier(.2, .8, .2, 1); }
.mi-rail-photos a:hover img { scale: 1.04; }
.mi-rail-photos span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 12px 10px;
  background: linear-gradient(180deg, rgb(5 23 34 / 0), rgb(5 23 34 / .75));
  font-size: .8125rem;
  font-weight: 700;
}

.mi-appli { padding: clamp(22px, 4vw, 38px); padding-bottom: clamp(40px, 6vw, 56px); }
.mi-appli h2 { margin: .25rem 0 .5rem; font-size: clamp(1.5rem, 4vw, 2.1rem); }
.mi-appli p:not(.surtitre) { max-width: 56ch; }

/* ─────────────────────────────────────────── LA BARRE LATERALE « MAC » ──
   Sur un ecran large, la navigation vit dans une colonne de gauche en verre
   depoli, groupes nommes, icones de mer, selection en galet doux — la barre
   laterale d'une application du Mac. L'en-tete du haut s'efface ; l'horizon
   de chaque page devient une grande carte posee dans la fenetre. Sous
   1024 px, rien de tout cela : la barre d'onglets du bas navigue (iPhone). */

.mi-cote { display: none; }

@media (min-width: 1024px) {
  body:has(> .mi-cote) { padding-left: 264px; }
  body:has(> .mi-cote) > .entete { display: none; }

  .mi-cote {
    position: fixed;
    z-index: 50;
    top: 0;
    bottom: 0;
    left: 0;
    width: 264px;
    display: flex;
    flex-direction: column;
    padding: 18px 12px 14px;
    background: color-mix(in oklab, var(--tp-carte) 62%, transparent);
    -webkit-backdrop-filter: saturate(1.8) blur(26px);
    backdrop-filter: saturate(1.8) blur(26px);
    border-right: 1px solid var(--tp-trait);
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .mi-cote-marque {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 18px;
    color: var(--tp-encre);
    text-decoration: none;
  }
  .mi-cote-marque img { height: 38px; width: auto; }
  .mi-cote-marque span { font-family: var(--tp-titre); font-weight: 800; font-size: 1.125rem; letter-spacing: -.02em; }
  .mi-cote-marque .logo-nuit { display: none; }

  .mi-cote-groupe {
    margin: 14px 10px 4px;
    font-size: .7188rem;
    font-weight: 700;
    color: var(--tp-encre-4);
  }
  .mi-cote-nav ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .mi-cote-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    color: var(--tp-encre);
    font-size: .9062rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--mi-elan);
  }
  .mi-cote-nav a:hover { background: color-mix(in oklab, var(--tp-encre) 6%, transparent); }
  .mi-cote-icone { display: grid; place-items: center; width: 22px; color: var(--mi-mer-profonde); }
  .mi-cote-mot { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mi-cote-compte {
    min-width: 22px;
    padding: 0 6px;
    border-radius: var(--tp-r-pilule);
    background: color-mix(in oklab, var(--tp-encre) 9%, transparent);
    color: var(--tp-encre-2);
    font-size: .75rem;
    font-weight: 700;
    text-align: center;
  }
  .mi-cote-nav a[aria-current="page"] {
    background: color-mix(in oklab, var(--mi-mer) 18%, transparent);
    font-weight: 700;
  }
  .mi-cote-nav a[aria-current="page"] .mi-cote-compte { background: var(--mi-corail); color: #FFFFFF; }

  .mi-cote-pied {
    display: grid;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--tp-trait);
  }
  .mi-cote-pied .bouton { min-height: 42px; font-size: .9062rem; }
  .mi-cote-qui {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 12px;
    color: var(--tp-encre);
    text-decoration: none;
  }
  .mi-cote-qui:hover { background: color-mix(in oklab, var(--tp-encre) 6%, transparent); }
  .mi-cote-qui > span:last-child { display: grid; min-width: 0; }
  .mi-cote-qui strong { font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mi-cote-qui small { color: var(--tp-encre-3); font-size: .75rem; }
  .mi-cote-initiales {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--mi-couchant);
    color: var(--tp-sur-or);
    font-weight: 800;
    font-size: .8125rem;
  }
  .mi-cote-sortie {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--tp-encre-3);
    font: 600 .8125rem var(--tp-texte);
    cursor: pointer;
  }
  .mi-cote-sortie:hover { background: color-mix(in oklab, var(--tp-encre) 6%, transparent); color: var(--tp-encre); }

  /* La fenetre : l'horizon de la page est une grande carte posee, pas un
     bandeau plein cadre. La bande-houle des pages sans banniere aussi. */
  body:has(> .mi-cote) :is(.banniere, .bandeau-photo) {
    margin: 14px 14px 0;
    border-radius: 24px;
  }
  body:has(> .mi-cote) > .bande {
    margin: 14px 14px 0;
    border-radius: 24px 24px 0 0;
    height: 64px;
  }
  body:has(> .mi-cote) .pied { margin-inline: 14px; border-radius: 24px 24px 0 0; }
  body:has(> .mi-cote) .pied::before { border-radius: 24px 24px 0 0; }
}

@media (min-width: 1024px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="cagnard"]) .mi-cote-marque .logo-encre { display: none; }
  :root:not([data-theme="cagnard"]) .mi-cote-marque .logo-nuit { display: block; }
}
@media (min-width: 1024px) {
  :root[data-theme="buvette"] .mi-cote-marque .logo-encre { display: none; }
  :root[data-theme="buvette"] .mi-cote-marque .logo-nuit { display: block; }
}

/* ──────────────────────────────────────── LE PIED, FACON IPHONE ──
   Sur le telephone, le pied n'est plus un mur de liens : des listes
   groupees en verre d'eau, une ligne par lien, le chevron au bout — comme
   les Reglages d'un iPhone. Le texte de presentation s'efface. */
@media (max-width: 760px) {
  .pied { padding-top: 3.5rem; }
  .pied-baseline,
  .pied-app,
  .pied-marque { display: none; }
  .pied-grille { gap: 1.25rem; }
  .pied-liens {
    overflow: hidden;
    border-radius: 16px;
    background: rgb(255 255 255 / .08);
    border: 1px solid rgb(255 255 255 / .1);
  }
  .pied-liens li + li { border-top: 1px solid rgb(255 255 255 / .1); }
  .pied-liens a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 16px;
    font-size: 1rem;
  }
  .pied-liens a::after {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 2px solid rgb(255 255 255 / .45);
    border-right: 2px solid rgb(255 255 255 / .45);
    rotate: 45deg;
  }
  .pied-bas { font-size: .75rem; }
}

/* ───────────────────────────────────────── L'ACCUEIL DU JOUEUR ──
   pages/accueil.php sous l'apercu : « Bonjour » a la main, le prenom en
   grand, la licence et le club — l'horizon de l'appli. */

.mi-bonjour h1 { font-size: clamp(2.9rem, 11vw, 4.8rem); margin-top: 0; }
.mi-bonjour .mi-main { margin-top: .4rem; }
.mi-etat-jour {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1rem;
  padding: .5rem .95rem;
  border-radius: var(--tp-r-pilule);
  background: rgb(255 255 255 / .14);
  border: 1px solid rgb(255 255 255 / .22);
  color: #FFFFFF;
  font-weight: 700;
  font-size: .875rem;
}
.mi-point {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mi-corail);
  box-shadow: 0 0 0 4px rgb(242 106 75 / .32);
}

/* L'avatar et la cloche restent en haut, sur le telephone aussi, comme dans
   l'appli : le galet de chaux aux initiales, la cloche dans l'eau claire. */
.nav > a[href="/profil"] {
  width: 42px;
  height: 42px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  background: #FFFCF6;
  color: #0E2A3A;
  font-weight: 800;
  font-size: .875rem;
}
.nav > a[title] {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgb(255 255 255 / .12);
  border: 1px solid rgb(255 255 255 / .2);
  color: #FFFFFF;
}
.nav > a[title] .pastille { position: absolute; top: -5px; right: -7px; }
@media (max-width: 900px) {
  .nav > a[title],
  .nav > a[href="/profil"] { display: inline-flex; }
}

/* ─────────────────────────────────────────── LE POSTE DU COMITE ──
   Le rail est la mer, de haut en bas : le large en tete, le rivage au pied.
   L'ecran courant y devient un galet de chaux, son icone un disque de
   couchant — le disque de la barre de l'appli. Le plan de travail reste le
   sable ; son en-tete est l'horizon, avec sa houle. */

.poste-rail {
  background: linear-gradient(180deg, var(--mi-horizon-haut) 0%, var(--mi-horizon-bas) 100%);
  border-right: 0;
  color: #FFFFFF;
}
.poste-rail-tete,
.poste-rail-pied { border-color: rgb(255 255 255 / .12); }
.poste-marque strong { color: #FFFFFF; font-family: var(--tp-titre); font-weight: 800; letter-spacing: -.02em; }
.poste-marque small { color: rgb(255 255 255 / .68); }
.poste-fermer { background: rgb(255 255 255 / .12); color: #FFFFFF; border-color: rgb(255 255 255 / .2); }

.poste-trouver svg { color: rgb(255 255 255 / .7); }
.poste-trouver input {
  background: rgb(255 255 255 / .1);
  border: 1px solid rgb(255 255 255 / .18);
  border-radius: var(--tp-r-pilule);
  color: #FFFFFF;
}
.poste-trouver input::placeholder { color: rgb(255 255 255 / .6); }
.poste-trouver input:focus-visible { border-color: var(--tp-or-vif); box-shadow: 0 0 0 3px rgb(255 208 107 / .35); outline: none; }

.poste-groupe { color: var(--tp-or-vif); }
.poste-nav a { color: rgb(255 255 255 / .92); border-radius: 18px; }
.poste-nav a:hover { background: rgb(255 255 255 / .1); }
.poste-lien-icone { background: rgb(255 255 255 / .12); color: #FFFFFF; }
.poste-lien-mot strong { color: #FFFFFF; }
.poste-lien-mot small { color: rgb(255 255 255 / .66); }
.poste-nav a[aria-current="page"] {
  background: #FFFCF6;
  box-shadow: 0 10px 20px -12px rgb(0 20 30 / .6);
}
.poste-nav a[aria-current="page"] .poste-lien-icone { background: var(--mi-couchant); color: #0E2A3A; }
.poste-nav a[aria-current="page"] .poste-lien-mot strong { color: #0E2A3A; }
.poste-nav a[aria-current="page"] .poste-lien-mot small { color: #5C6468; }
.poste-puce { background: var(--mi-corail); color: #FFFFFF; }
.poste-rien { color: rgb(255 255 255 / .7); }

.poste-qui { color: #FFFFFF; }
.poste-qui:hover { background: rgb(255 255 255 / .1); }
.poste-qui strong { color: #FFFFFF; }
.poste-qui small { color: rgb(255 255 255 / .66); }
.poste-initiales { background: #FFFCF6; color: #0E2A3A; }
.poste-sortie button {
  background: rgb(255 255 255 / .1);
  border: 1px solid rgb(255 255 255 / .22);
  color: #FFFFFF;
}
.poste-sortie button:hover { background: rgb(255 255 255 / .18); color: #FFFFFF; }

/* L'en-tete de l'ecran : l'horizon, et la houle qui le ferme. */
.poste-tete {
  background: var(--mi-lagon);
  border-bottom: 0;
  color: var(--mi-sur-horizon);
  padding-bottom: clamp(18px, 2.4vw, 30px);
}
.poste-tete::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(18px, 2.4vw, 30px);
  background: var(--mi-ecume) bottom / 100% 100% no-repeat;
}
.poste-tete::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(18px, 2.4vw, 30px);
  z-index: 1;
  background: var(--tp-sol);
  -webkit-mask: var(--mi-vague) bottom / 100% 100% no-repeat;
  mask: var(--mi-vague) bottom / 100% 100% no-repeat;
}
.poste-tete.est-detachee { box-shadow: 0 12px 24px -16px rgb(0 20 30 / .6); }
.poste-titre h1 { color: #FFFFFF; font-family: var(--tp-titre); font-weight: 800; letter-spacing: -.03em; }
.poste-fil { color: var(--tp-or-vif); }
.poste-sous {
  color: rgb(255 255 255 / .82);
  font-family: var(--tp-texte);
  font-weight: 500;
  letter-spacing: 0;
}
.poste-tete a:not(.bouton) { color: #FFFFFF; }
.poste-menu { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .22); color: #FFFFFF; }
.poste-menu:hover { background: rgb(255 255 255 / .2); }

/* ───────────────────────────────────────────────────────── LE PORTAIL ──
   Connexion, premiere connexion, code perdu : l'ecran d'ouverture de
   l'appli. La mer au large, le soleil qui se couche, la plage en bas — et la
   carte de chaux posee a cheval sur le rivage. */

.tp-portail {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--mi-lagon);
  background-attachment: fixed;
}
.tp-portail::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: max(-40px, calc(50% - 470px));
  bottom: calc(24dvh - 30px);
  width: clamp(200px, 34vw, 380px);
  aspect-ratio: 220 / 150;
  background: var(--mi-soleil) center / contain no-repeat;
}
.tp-portail::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30dvh;
  background: var(--tp-sol);
  -webkit-mask: var(--mi-vague) top / 100% 70px no-repeat, linear-gradient(#000, #000) 0 69px / 100% 100% no-repeat;
  mask: var(--mi-vague) top / 100% 70px no-repeat, linear-gradient(#000, #000) 0 69px / 100% 100% no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .tp-portail::before { animation: mi-astre 1.2s cubic-bezier(.2, .8, .2, 1) both; }
  .tp-portail-boite { animation: mi-monte .7s cubic-bezier(.2, .8, .2, 1) .1s both; }
}

.tp-portail-tete p {
  font-family: var(--tp-main);
  font-size: 1.75rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tp-or-vif);
}

/* Le cadre du portail s'efface : la page porte deja sa carte (.acces), et
   une carte dans une carte est la premiere chose que le cahier interdit. */
.tp-portail .tp-carte {
  background: var(--tp-carte);
  color: var(--tp-encre);
  border: 1px solid light-dark(transparent, rgb(255 255 255 / .07));
  border-radius: 28px;
  padding: clamp(20px, 5vw, 30px);
  box-shadow: 0 30px 60px -24px rgb(0 20 30 / .55), 0 2px 6px rgb(0 20 30 / .12);
}
.tp-portail .tp-carte:has(> .acces) {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.tp-portail .acces {
  background: var(--tp-carte);
  border: 1px solid light-dark(transparent, rgb(255 255 255 / .07));
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 60px -24px rgb(0 20 30 / .55), 0 2px 6px rgb(0 20 30 / .12);
}
.tp-portail .acces > .bande { height: 34px; }
/* Les ecrans du compte sans p-acces.css (premiere connexion, code perdu,
   mot de passe oublie) n'ont pas de .acces-corps : la carte porte alors
   elle-meme son rembourrage. */
.tp-portail .acces:not(:has(> .acces-corps)) { padding: clamp(20px, 5vw, 30px); }
/* La photo du boulodrome laisse la place a la mer et a son soleil. */
.tp-portail .acces-scene { display: none; }
.tp-portail .acces-premiere {
  background: var(--tp-creux);
  border: 0;
  border-radius: 20px;
  color: var(--tp-encre);
}
.tp-portail .acces-premiere h2 { color: var(--tp-encre); }
@media (max-width: 640px) {
  .tp-portail::before { top: 6px; bottom: auto; right: -64px; width: 150px; }
}
.tp-portail .tp-carte h1 {
  font-family: var(--tp-titre);
  font-weight: 800;
  font-size: 1.875rem;
  letter-spacing: -.03em;
  color: var(--tp-encre);
}
.tp-portail-pied { color: light-dark(var(--tp-encre-3), rgb(255 255 255 / .7)); }
.tp-portail-pied a { color: light-dark(var(--tp-or-lisible), var(--tp-or-vif)); }


/* ─── Le mouvement des panneaux (27/10/2026, Adrien : « plus travaillé, plus professionnel, plus de motion ») ───
   Le premier écran entre en cascade dès l'ouverture (CSS seul, sans clignotement) ; la suite arrive au défilement
   (eclat.js) ; les cartes et lignes cliquables se soulèvent au survol, les boutons s'enfoncent au toucher.
   Rien de tout cela si le lecteur a demandé moins de mouvement. */
@media (prefers-reduced-motion: no-preference) {
  #contenu > *,
  .poste-plan > * {
    animation: mi-entree 520ms cubic-bezier(.2, .7, .2, 1) both;
  }
  #contenu > :nth-child(2), .poste-plan > :nth-child(2) { animation-delay: 60ms; }
  #contenu > :nth-child(3), .poste-plan > :nth-child(3) { animation-delay: 120ms; }
  #contenu > :nth-child(4), .poste-plan > :nth-child(4) { animation-delay: 180ms; }
  #contenu > :nth-child(5), .poste-plan > :nth-child(5) { animation-delay: 240ms; }
  #contenu > :nth-child(n+6), .poste-plan > :nth-child(n+6) { animation-delay: 300ms; }

  /* Les tuiles de chiffres du poste, l'une après l'autre. */
  .adm-tuile { animation: mi-entree 480ms cubic-bezier(.2, .7, .2, 1) both; }
  .adm-tuile:nth-child(2) { animation-delay: 70ms; }
  .adm-tuile:nth-child(3) { animation-delay: 140ms; }
  .adm-tuile:nth-child(4) { animation-delay: 210ms; }
  .adm-tuile:nth-child(n+5) { animation-delay: 280ms; }

  :is(.adm-tuile, .adm-carte, .carte, .verre, .journee, .adm-lignes > a, a.rencontre) {
    transition: transform 180ms cubic-bezier(.2, .7, .2, 1), box-shadow 180ms ease, background-color 160ms ease;
  }
  :is(.bouton, .btn, button, .adm-bouton, [class*="bouton-"]):not(:disabled) {
    transition: transform 120ms ease, box-shadow 160ms ease, filter 160ms ease;
  }
  :is(.bouton, .btn, button, .adm-bouton, [class*="bouton-"]):not(:disabled):active { transform: scale(.97); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(a.adm-tuile, .adm-carte:has(> a, a.adm-carte-titre), a.carte, a.verre, a.journee, .adm-lignes > a, a.rencontre):hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -16px rgb(16 60 70 / .45);
  }
  .adm-lignes > a:hover { background-color: color-mix(in oklab, var(--tp-mer, #0f6b78) 5%, transparent); }
}
@keyframes mi-entree {
  from { opacity: 0; transform: translateY(10px); }
}

/* Lignes du poste sur téléphone (27/10/2026) : le titre et sa ligne d'infos prennent toute la largeur, les
   pastilles passent dessous au lieu d'écraser le texte en colonne étroite. */
@media (max-width: 640px) {
  :is(a, div, li, article).adm-ligne { flex-wrap: wrap; row-gap: .45rem; }
  .adm-ligne > .adm-ligne-corps { flex: 1 1 0; min-width: 0; }
  .adm-ligne-titre { white-space: normal; overflow: visible; text-overflow: clip; }
  a.adm-ligne::after { order: 2; }
  .adm-ligne > .adm-ligne-pastilles { order: 3; flex: 1 0 100%; max-width: none; justify-content: flex-start; padding-left: 3.4rem; }
  .adm-ligne-pastilles .pastille { white-space: nowrap; }
}
} /* @layer midi */

/* D'une page à l'autre, le contenu se fond au lieu de clignoter ; la colonne de navigation reste en place
   (transitions de vue entre documents : Chrome, Edge, Safari 18.2+ ; ailleurs, rien ne change). */
@view-transition { navigation: auto; }
.mi-cote, .poste-rail { view-transition-name: tep-navigation; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}