/* ============================================================
   style2.css — style du site, chargé par includes/layout.php sur toutes les pages

   Chargé après bootstrap, mobile.css et site.css : il les surcharge sans les modifier.
   Parti pris : un plan d'eau clair et lumineux. Bandeau marine en dégradé en haut de page,
   surfaces blanches posées dessus avec des ombres douces et teintées de bleu ;
   l'orange du logo signale la page active, le focus et l'action « S'inscrire ».
   Élément marquant : le calendrier, avec un pavé de date marine par jour, qui reste visible au défilement.

   Couleurs
     --s2-encre   #12304f  texte, titres, pavés de date
     --s2-papier  #eef2f7  fond de page
     --s2-blanc   #ffffff  surfaces
     --s2-filet   #e1e7ef  traits fins
     --s2-signal  #e5481f  orange du logo : page active, focus, « S'inscrire »
     --s2-chenal  #1f5f99  liens
     --s2-balise  #16805a  inscrit, validé
   Typographie
     Bricolage Grotesque : titres et chiffres (la même que la page d'accueil)
     Instrument Sans     : texte courant et interface
   ============================================================ */

:root {
  --s2-encre: #12304f;
  --s2-encre-douce: #546780;
  --s2-papier: #eef2f7;
  --s2-blanc: #ffffff;
  --s2-filet: #e1e7ef;
  --s2-filet-fort: #c8d2de;
  --s2-signal: #e5481f;
  --s2-signal-fonce: #c63a14;
  --s2-signal-clair: #ffb59c;
  --s2-chenal: #1f5f99;
  --s2-chenal-fond: #e8f0fa;
  --s2-balise: #16805a;
  --s2-balise-fond: #e3f4ec;
  --s2-titre: "Bricolage Grotesque", "Segoe UI", sans-serif;
  --s2-texte: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --s2-rayon: 16px;
  --s2-rayon-petit: 10px;

  /* Ombres teintées de marine, en deux couches (contact + diffusion) */
  --s2-ombre-1: 0 1px 2px rgba(18, 48, 79, .06), 0 2px 6px rgba(18, 48, 79, .05);
  --s2-ombre-2: 0 1px 3px rgba(18, 48, 79, .06), 0 10px 28px -6px rgba(18, 48, 79, .14);
  --s2-ombre-3: 0 2px 6px rgba(18, 48, 79, .08), 0 22px 48px -12px rgba(18, 48, 79, .28);

  /* Bootstrap suit les mêmes valeurs */
  --bs-body-font-family: var(--s2-texte);
  --bs-body-color: var(--s2-encre);
  --bs-border-color: var(--s2-filet);
  --bs-link-color: var(--s2-chenal);
  --bs-link-color-rgb: 31, 95, 153;
  --bs-link-hover-color: var(--s2-encre);
  --bs-link-hover-color-rgb: 18, 48, 79;
  --bs-secondary-color: var(--s2-encre-douce);
  --bs-primary: #1f5f99;
  --bs-primary-rgb: 31, 95, 153;
  --marine: var(--s2-encre);
}

body,
input,
select,
button,
textarea {
  font-family: var(--s2-texte);
}

body {
  background: var(--s2-papier);
  color: var(--s2-encre);
  font-size: 1rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

h1,
h2,
h3,
.h1,
.h2,
.h3 {
  font-family: var(--s2-titre);
  font-weight: 800;
  letter-spacing: -.01em;
  color: inherit;
}

h1.text-primary {
  color: var(--s2-encre) !important;
}

a {
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 3px solid var(--s2-signal);
  outline-offset: 2px;
  border-radius: 4px;
}

.small-muted {
  color: var(--s2-encre-douce);
}

/* ── En-tête : blanc translucide, collé en haut ; la page active est soulignée comme une ligne de départ ── */
.navbar-ycib {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: 0 1px 0 rgba(18, 48, 79, .06), 0 6px 20px -10px rgba(18, 48, 79, .25);
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.navbar-ycib .navbar-brand img {
  height: 44px !important;
}

.navbar-ycib .title {
  font-family: var(--s2-titre);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -.01em;
  color: var(--s2-signal);
  margin-left: .6rem;
}

.navbar-ycib .nav-link {
  position: relative;
  color: var(--s2-encre) !important;
  font-size: .95rem;
  font-weight: 500;
  border-radius: var(--s2-rayon-petit);
  padding: .5rem .85rem !important;
  transition: background .15s;
}

.navbar-ycib .nav-link .fa {
  display: none;
}

/* site.css passe le texte en blanc au survol (fond marine) : sur l'en-tête blanc, il reste à l'encre */
.navbar-ycib .nav-link:hover,
.navbar-ycib .nav-link:focus,
.navbar-ycib .nav-link.show,
.navbar-ycib .nav-link.active {
  color: var(--s2-encre) !important;
}

.navbar-ycib .nav-link:hover,
.navbar-ycib .nav-link.show {
  background: var(--s2-papier);
}

.navbar-ycib .nav-link.active {
  background: none;
}

.navbar-ycib .nav-link.active::after {
  content: "";
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: -.55rem;
  height: 3px;
  border-radius: 3px;
  background: var(--s2-signal);
}

.navbar-ycib .dropdown-menu {
  --bs-dropdown-link-color: var(--s2-encre);
  --bs-dropdown-link-hover-color: var(--s2-encre);
  --bs-dropdown-link-hover-bg: var(--s2-papier);
  --bs-dropdown-link-active-color: var(--s2-encre);
  --bs-dropdown-link-active-bg: #e3eaf3;
  border: 1px solid var(--s2-filet);
  border-radius: var(--s2-rayon);
  box-shadow: var(--s2-ombre-3);
  padding: .4rem;
}

.navbar-ycib .dropdown-item {
  border-radius: var(--s2-rayon-petit);
  padding: .5rem .75rem;
  color: var(--s2-encre);
}

.navbar-ycib .dropdown-item .fa {
  width: 1.1em;
  color: var(--s2-encre-douce);
}

.navbar-ycib .dropdown-item:hover {
  background: var(--s2-papier);
}

.navbar-toggler {
  border-color: var(--s2-filet);
}

.navbar-toggler-icon {
  filter: none;
}

/* ── Pied de page ── */
.footer-ycib {
  background: var(--s2-blanc);
  border-color: var(--s2-filet) !important;
}

.footer-ycib .fa {
  display: none;
}

.footer-ycib a.small-muted:hover {
  color: var(--s2-encre);
}

/* ── Boutons ── */
.btn {
  font-weight: 600;
  border-radius: var(--s2-rayon-petit);
  padding: .55rem 1.1rem;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s;
}

.btn-sm {
  padding: .35rem .8rem;
  font-size: .875rem;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--bs-btn-bg); /* site.css fixe un fond en dur : on revient aux variables */
  --bs-btn-bg: var(--s2-encre);
  --bs-btn-border-color: var(--s2-encre);
  --bs-btn-hover-bg: #0b2138;
  --bs-btn-hover-border-color: #0b2138;
  --bs-btn-active-bg: #0b2138;
  --bs-btn-active-border-color: #0b2138;
  --bs-btn-disabled-bg: var(--s2-encre);
  --bs-btn-disabled-border-color: var(--s2-encre);
  box-shadow: 0 4px 12px -4px rgba(18, 48, 79, .5);
}

.btn-primary:hover,
.btn-primary:active {
  background: var(--bs-btn-hover-bg);
  box-shadow: 0 8px 18px -6px rgba(18, 48, 79, .55);
}

.btn-outline-primary {
  --bs-btn-color: var(--s2-encre);
  --bs-btn-border-color: var(--s2-filet-fort);
  --bs-btn-hover-color: var(--s2-encre);
  --bs-btn-hover-bg: var(--s2-blanc);
  --bs-btn-hover-border-color: var(--s2-encre);
  --bs-btn-active-color: var(--s2-encre);
  --bs-btn-active-bg: var(--s2-blanc);
  --bs-btn-active-border-color: var(--s2-encre);
  background: var(--s2-blanc);
  box-shadow: var(--s2-ombre-1);
}

/* Action principale d'une ligne (« S'inscrire ») : orange du logo */
.btn-signal {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--s2-signal);
  --bs-btn-border-color: var(--s2-signal);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--s2-signal-fonce);
  --bs-btn-hover-border-color: var(--s2-signal-fonce);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--s2-signal-fonce);
  --bs-btn-active-border-color: var(--s2-signal-fonce);
  box-shadow: 0 4px 12px -4px rgba(229, 72, 31, .6);
}

.btn-signal:hover {
  box-shadow: 0 8px 18px -6px rgba(229, 72, 31, .65);
}

.btn-success {
  --bs-btn-bg: var(--s2-balise);
  --bs-btn-border-color: var(--s2-balise);
  --bs-btn-hover-bg: #0f6647;
  --bs-btn-hover-border-color: #0f6647;
  box-shadow: 0 4px 12px -4px rgba(22, 128, 90, .55);
}

.btn-link {
  --bs-btn-color: var(--s2-chenal);
  --bs-btn-hover-color: var(--s2-encre);
  text-decoration: none;
  font-weight: 500;
}

.btn-link:hover {
  text-decoration: underline;
}

/* ── Champs ── */
.form-control,
.form-select {
  background-color: var(--s2-blanc);
  border: 1px solid var(--s2-filet-fort);
  border-radius: var(--s2-rayon-petit);
  min-height: 44px;
  color: var(--s2-encre);
  box-shadow: inset 0 1px 2px rgba(18, 48, 79, .05);
}

.form-control::placeholder {
  color: #8a99aa;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--s2-chenal);
  box-shadow: 0 0 0 4px rgba(31, 95, 153, .15);
}

.form-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--s2-encre);
}

.form-check-input:checked {
  background-color: var(--s2-encre);
  border-color: var(--s2-encre);
}

/* ── Blocs ── */
.card {
  border: 0;
  border-radius: var(--s2-rayon);
  box-shadow: var(--s2-ombre-2) !important;
}

.card-header {
  background: var(--s2-blanc);
  color: var(--s2-encre);
  border-bottom: 1px solid var(--s2-filet);
  border-radius: var(--s2-rayon) var(--s2-rayon) 0 0 !important;
  font-family: var(--s2-titre);
  font-weight: 600;
}

.alert {
  border: 0;
  border-radius: var(--s2-rayon);
  box-shadow: var(--s2-ombre-1);
}

.table {
  --bs-table-hover-bg: #f5f8fc;
}

.table > thead th {
  font-size: .82rem;
  font-weight: 600;
  color: var(--s2-encre-douce);
  background: var(--s2-blanc);
  border-bottom-color: var(--s2-filet);
}

/* Étiquettes : pastilles teintées */
.s2-tag {
  display: inline-block;
  padding: .12rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.5;
  background: var(--s2-chenal-fond);
  color: var(--s2-chenal);
  vertical-align: .1em;
}

.s2-tag-vert {
  background: var(--s2-balise-fond);
  color: var(--s2-balise);
}

.s2-compteur {
  display: inline-block;
  min-width: 1.5em;
  margin-left: .35rem;
  padding: 0 .4em;
  border-radius: 999px;
  background: var(--s2-signal);
  color: #fff;
  font-size: .78rem;
  line-height: 1.5;
  text-align: center;
}

/* ============================================================
   Page des régates
   ============================================================ */

/* Bandeau marine pleine largeur derrière le titre ; la barre de filtres flotte à cheval dessus */
.rg-haut {
  position: relative;
  isolation: isolate;
  padding-bottom: .25rem;
}

.rg-haut::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1rem;
  bottom: 3.2rem;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background:
    radial-gradient(1200px 380px at 85% -10%, rgba(76, 152, 214, .55), transparent 60%),
    linear-gradient(160deg, #163a63 0%, #12304f 55%, #0d2540 100%);
}

.rg-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.75rem 0 2.25rem;
}

.rg-tete h1 {
  font-size: clamp(2.1rem, 4.2vw, 2.9rem);
  line-height: 1.05;
  margin: 0;
  color: #fff;
}

.rg-sous-titre {
  margin: .5rem 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: 1.05rem;
}

.rg-tete-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.rg-tete .btn-outline-primary {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, .4);
  --bs-btn-hover-color: var(--s2-encre);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  background: transparent;
  box-shadow: none;
}

.rg-tete .btn-primary {
  --bs-btn-bg: #fff;
  --bs-btn-color: var(--s2-encre);
  --bs-btn-border-color: #fff;
  --bs-btn-hover-bg: #e9f0f8;
  --bs-btn-hover-color: var(--s2-encre);
  --bs-btn-hover-border-color: #e9f0f8;
  color: var(--s2-encre);
}

/* Filtres : une seule barre, en relief */
.rg-filtres {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) repeat(4, minmax(0, 1fr));
  gap: .75rem;
  align-items: end;
  padding: 1.1rem 1.2rem;
  margin-bottom: 2.5rem;
  background: var(--s2-blanc);
  border-radius: var(--s2-rayon);
  box-shadow: var(--s2-ombre-3);
}

.rg-champ label {
  display: block;
  margin-bottom: .3rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--s2-encre-douce);
}

.rg-filtrer {
  min-height: 44px;
  padding-left: 1.4rem;
  padding-right: 1.4rem;
}

.rg-filtres-pied {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1rem;
  font-size: .875rem;
  color: var(--s2-encre-douce);
}

/* Pendant la mise à jour par les filtres : la liste s'estompe légèrement */
#rgResultats {
  transition: opacity .2s;
}

#rgResultats.est-en-cours {
  opacity: .45;
  pointer-events: none;
}

/* Calendrier : un pavé de date par jour, qui reste visible pendant le défilement */
.rg-calendrier {
  display: grid;
  gap: 1.75rem;
}

.rg-jour {
  display: grid;
  grid-template-columns: 7.75rem minmax(0, 1fr);
  gap: 0 1.25rem;
  align-items: start;
}

.rg-date {
  position: sticky;
  top: 5.5rem; /* sous l'en-tête collé */
  /* même hauteur qu'une carte d'une seule ligne : chiffre à gauche, mois et jour de la semaine à droite */
  display: grid;
  grid-template-columns: auto auto;
  align-content: center;
  justify-content: center;
  column-gap: .45rem;
  height: 5.25rem;
  padding: 0 .5rem;
  border-radius: var(--s2-rayon);
  background: linear-gradient(165deg, #1b4677 0%, var(--s2-encre) 70%);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(18, 48, 79, .7);
}

.rg-num {
  font-family: var(--s2-titre);
  font-weight: 800;
  grid-row: 1 / 3;
  align-self: center;
  font-size: 2.3rem;
  line-height: 1;
  letter-spacing: -.03em;
}

.rg-mois {
  font-family: var(--s2-titre);
  font-weight: 600;
  align-self: end;
  font-size: 1.05rem;
  line-height: 1.15;
  color: var(--s2-signal-clair);
}

.rg-sem {
  align-self: start;
  font-size: .74rem;
  color: rgba(255, 255, 255, .72);
}

.rg-regates {
  list-style: none;
  margin: 0;
  padding: .35rem;
  background: var(--s2-blanc);
  border-radius: var(--s2-rayon);
  box-shadow: var(--s2-ombre-2);
}

.rg-ligne {
  position: relative;
  display: grid;
  /* colonnes de largeur fixe à droite : toutes les lignes s'alignent, quel que soit leur état */
  grid-template-columns: minmax(0, 2.3fr) minmax(0, 1.5fr) 4.4rem 7rem 14.5rem;
  gap: .4rem 1.25rem;
  align-items: center;
  padding: .85rem 1rem;
  border-radius: calc(var(--s2-rayon) - 4px);
  transition: background .15s;
}

.rg-ligne + .rg-ligne {
  margin-top: 1px;
}

.rg-ligne + .rg-ligne::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 1rem;
  right: 1rem;
  border-top: 1px solid var(--s2-filet);
}

.rg-ligne:hover {
  background: #f4f8fd;
}

.rg-ligne:hover::after {
  content: "";
  position: absolute;
  left: 0;
  top: .7rem;
  bottom: .7rem;
  width: 3px;
  border-radius: 3px;
  background: var(--s2-signal);
}

.rg-ligne.est-inscrit {
  background: linear-gradient(90deg, var(--s2-balise-fond), transparent 70%);
}

.rg-ligne.est-inscrit::after {
  content: "";
  position: absolute;
  left: 0;
  top: .7rem;
  bottom: .7rem;
  width: 3px;
  border-radius: 3px;
  background: var(--s2-balise);
}

.rg-nom a {
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--s2-encre);
  text-decoration: none;
}

.rg-nom a:hover {
  color: var(--s2-chenal);
  text-decoration: underline;
}

.rg-nom .s2-tag {
  margin-left: .35rem;
}

.rg-duree {
  display: block;
  font-size: .85rem;
  color: var(--s2-encre-douce);
}

.rg-club a {
  display: block;
  color: var(--s2-chenal);
  text-decoration: none;
  font-weight: 500;
}

.rg-club a:hover {
  text-decoration: underline;
}

.rg-club span {
  display: block;
  font-size: .85rem;
  color: var(--s2-encre-douce);
}

.rg-type {
  justify-self: start;
  padding: .15rem .6rem;
  border-radius: 999px;
  background: var(--s2-chenal-fond);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--s2-chenal);
  cursor: help;
}

.rg-bateaux {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  font-size: .9rem;
  color: var(--s2-encre-douce);
  white-space: nowrap;
}

.rg-bateaux .fa {
  align-self: center;
  font-size: .8rem;
  color: var(--s2-signal);
}

.rg-bateaux b {
  font-family: var(--s2-titre);
  font-size: 1.15rem;
  color: var(--s2-encre);
}

.rg-bateaux.est-vide {
  color: #8a99aa;
}

.rg-bateaux.est-vide .fa {
  color: #b7c2cf;
}

.rg-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}

/* Bouton principal de la ligne (« S'inscrire », « Mon inscription », « 2 inscriptions ») :
   même largeur partout, pour que les colonnes restent alignées quel que soit l'état */
.rg-principal {
  width: 9rem;
  text-align: center;
}

.rg-lien-inscrits {
  width: 5rem;
  text-align: center;
}

.rg-ferme {
  width: 9rem; /* occupe la place du bouton principal */
  text-align: center;
  padding: .2rem .7rem;
  border-radius: 999px;
  background: var(--s2-papier);
  font-size: .82rem;
  color: var(--s2-encre-douce);
}

.est-fermee .rg-nom a {
  color: var(--s2-encre-douce);
}

.rg-vide {
  padding: 2rem;
  background: var(--s2-blanc);
  border-radius: var(--s2-rayon);
  box-shadow: var(--s2-ombre-2);
}

.rg-vide p {
  margin: 0 0 .5rem;
  font-size: 1.05rem;
}

/* Pagination */
.rg-pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem;
  margin-top: 2.5rem;
}

.rg-pages a,
.rg-pages span {
  min-width: 2.5rem;
  padding: .45rem .75rem;
  border-radius: var(--s2-rayon-petit);
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  color: var(--s2-encre);
}

.rg-pages a {
  background: var(--s2-blanc);
  box-shadow: var(--s2-ombre-1);
}

.rg-pages a:hover {
  box-shadow: var(--s2-ombre-2);
}

.rg-pages [aria-current] {
  background: var(--s2-encre);
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(18, 48, 79, .5);
}

.rg-pages .rg-ellipse {
  color: var(--s2-encre-douce);
}

/* ── Écrans moyens : la ligne passe sur deux niveaux ── */
@media (max-width: 1199.98px) {
  .rg-filtres {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .rg-champ-large {
    grid-column: 1 / -1;
  }

  .rg-haut::before {
    bottom: 7rem;
  }

  .rg-jour {
    grid-template-columns: 6.25rem minmax(0, 1fr);
  }

  .rg-date {
    grid-template-columns: auto;
    justify-items: center;
    height: 8.45rem; /* hauteur d'une ligne sur deux niveaux */
  }

  .rg-num {
    grid-row: auto;
    font-size: 3rem;
  }

  .rg-ligne {
    grid-template-columns: 4.4rem 7rem minmax(0, 1fr);
  }

  .rg-nom,
  .rg-club {
    grid-column: 1 / -1;
  }

  .rg-club a,
  .rg-club span {
    display: inline;
  }

  .rg-club span::before {
    content: ", ";
  }

  .rg-type {
    grid-column: 1;
    grid-row: 3;
  }

  .rg-bateaux {
    grid-column: 2;
    grid-row: 3;
  }

  .rg-actions {
    grid-column: 3;
    grid-row: 3;
  }
}

/* ── Téléphone : le pavé de date passe au-dessus des régates du jour ── */
@media (max-width: 767.98px) {
  .navbar-ycib .title {
    font-size: 1.2rem;
  }

  .rg-filtres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rg-champ-large,
  .rg-filtrer {
    grid-column: 1 / -1;
  }

  .rg-haut::before {
    bottom: 12rem;
  }

  .rg-jour {
    grid-template-columns: minmax(0, 1fr);
  }

  .rg-date {
    position: static;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: .5rem;
    height: auto;
    margin-bottom: .6rem;
    padding: .45rem .9rem;
    justify-self: start;
  }

  .rg-num {
    font-size: 1.9rem;
  }

  .rg-num,
  .rg-mois,
  .rg-sem {
    align-self: baseline;
  }

  .rg-ligne {
    grid-template-columns: 4.4rem minmax(0, 1fr);
    padding: .85rem .8rem;
  }

  .rg-actions {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }

  .btn:active {
    transform: none;
  }
}