/* ==========================================================================
   AASS SUB — feuille personnalisée pour le site Yapla (modèle 00050)
   À coller dans : Sites web > AASSSUB > Personnalisation > Avancée
   Palette reprise du logo et d'aass-sub.fr. Version 4 — 11/11/2026 (sous-titre au bleu du logo, bouton Accessibilité)
   ========================================================================== */

:root {
  --aass-profond: #005A8D;   /* bleu du logo */
  --aass-nuit:    #003A5D;   /* bleu foncé du menu (v2) */
  --aass-lagon:   #009FD4;   /* bleu clair du logo */
  --aass-clair:   #DCEFF8;
  --aass-encre:   #12303f;
  --aass-corail:  #F26A21;   /* orange du logo : décor seulement (traits, liserés) */
  --aass-corail-texte: #C2410C; /* orange foncé : texte et boutons, contraste 5,2:1 */
  --aass-lagon-texte:  #0077A8; /* bleu lagon foncé : texte, contraste 5:1 */
  --aass-logo:    #2A78BA;   /* bleu du lettrage du logo (demande de Virginie) */
  /* variables du modèle Yapla */
  --primary:   var(--aass-corail);
  --secondary: var(--aass-profond);
  --font-color: var(--aass-encre);
}

body.template-00050 { color: var(--aass-encre); background: #fff; }

/* ---------- En-tête : logo + nom du club ---------- */
#site-wrapper .site_line__item:has(.zone-header) {
  background: linear-gradient(180deg, #fff 55%, #eef7fc 100%);
  padding: 18px 0 14px;
}
#site-wrapper .zone-header img { max-height: 120px; width: auto; }
#site-wrapper .site_line__item:has(.zone-header) .zone-html h2 {
  margin: 0; line-height: 1.2; text-align: center;
}
#site-wrapper .site_line__item:has(.zone-header) .zone-html h2:first-of-type {
  color: var(--aass-profond); font-size: 40px !important; font-weight: 800; letter-spacing: .04em;
  padding-top: 22px;
}
#site-wrapper .site_line__item:has(.zone-header) .zone-html h2:nth-of-type(2) {
  color: var(--aass-logo); font-size: 22px !important; font-weight: 700; margin-top: 6px;
}

/* ---------- Menu : bandeau bleu profond ---------- */
#site-wrapper .line-menu {
  background: var(--aass-nuit);
  box-shadow: 0 3px 12px rgba(0, 25, 45, .45);
  position: sticky; top: 0; z-index: 50;
}
#site-wrapper .line-menu { --navlink-color: #fff; --navlink-color-active: #fff; }
#site-wrapper .line-menu .navbar-default { background: transparent; border: 0; margin: 0; min-height: 0; }
#site-wrapper .zone-menu ul.nav:not(.nav-stacked):not(.nav-progress):not(.nav-tabs) > li > a,
#site-wrapper .zone-menu ul.nav:not(.nav-stacked):not(.nav-progress):not(.nav-tabs) > li:not(.active):not(:hover) > a {
  color: #fff; font-weight: 600; padding: 14px 12px; position: relative;
}
#site-wrapper .zone-menu ul.nav > li > a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 3px;
  background: var(--aass-corail); border-radius: 2px; transform: scaleX(0); transition: transform .2s;
}
#site-wrapper .zone-menu ul.nav:not(.nav-stacked):not(.nav-progress):not(.nav-tabs) > li.active > a,
#site-wrapper .zone-menu ul.nav:not(.nav-stacked):not(.nav-progress):not(.nav-tabs) > li:hover > a { color: #fff; }
#site-wrapper .zone-menu ul.nav > li.active > a::after,
#site-wrapper .zone-menu ul.nav > li:hover > a::after { transform: scaleX(1); }
#site-wrapper .zone-menu ul.nav > li > a.dropdown-toggle::after { display: none; }
#site-wrapper .zone-menu .dropdown-toggle, #site-wrapper .zone-menu .dropdown-toggle *, #site-wrapper .zone-menu .dropdown-toggle::before { color: #fff !important; border-color: #fff !important; fill: #fff !important; }
#site-wrapper .navbar-default .navbar-nav > li > .dropdown-menu {
  background: #fff; border: 0; border-top: 3px solid var(--aass-corail);
  border-radius: 0 0 8px 8px; box-shadow: 0 8px 20px rgba(0, 40, 70, .18);
}
#site-wrapper .navbar-default .navbar-nav > li > .dropdown-menu > li > a { color: var(--aass-profond) !important; padding: 10px 18px; }
#site-wrapper .navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover { background: var(--aass-clair) !important; }
#site-wrapper .navbar-toggle { border-color: #fff; }
#site-wrapper .navbar-toggle .icon-bar { background: #fff; }

/* ---------- Bandeau d'accroche (bloc coloré en haut des pages) ---------- */
#site-wrapper .line-secondary {
  background: linear-gradient(135deg, var(--aass-profond) 0%, var(--aass-lagon-texte) 100%);
  position: relative; overflow: hidden;
}
#site-wrapper .line-secondary::after {          /* vague en bas du bandeau */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22c180-20 360-20 540-6s360 18 540 4 270-20 360-14V40z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}
#site-wrapper .line-secondary .container { position: relative; z-index: 1; padding-bottom: 30px; }
#site-wrapper .line-secondary h2 { color: #fff; font-size: 34px !important; font-weight: 800; line-height: 1.2; }
#site-wrapper .line-secondary .mod-article__intro,
#site-wrapper .line-secondary p { color: #f2fbff; font-size: 1.1rem; line-height: 1.6; }
#site-wrapper .line-secondary img {
  border-radius: 14px; box-shadow: 0 12px 30px rgba(0, 30, 60, .35);
}

/* ---------- Titres de section ---------- */
#site-wrapper .line-main h2,
#site-wrapper .site_line__item:not(.line-secondary):not(:has(.zone-header)) h2 {
  color: var(--aass-profond); font-weight: 800; position: relative; padding-bottom: 12px; margin-bottom: 18px;
}
#site-wrapper .line-main h2::after,
#site-wrapper .site_line__item:not(.line-secondary):not(:has(.zone-header)) h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px;
  background: var(--aass-corail); border-radius: 2px;
}

/* ---------- Blocs de texte en cartes (créneaux, nous rejoindre…) ---------- */
#site-wrapper .site_line__item:not(.line-secondary):not(:has(.zone-header)) .row:has(> .zone-50.zone-html) { display: flex; flex-wrap: wrap; }
#site-wrapper .site_line__item:not(.line-secondary):not(:has(.zone-header)) .zone-50.zone-html {
  position: relative; padding: 26px 40px 22px; isolation: isolate;
}
#site-wrapper .site_line__item:not(.line-secondary):not(:has(.zone-header)) .zone-50.zone-html::before {
  content: ""; position: absolute; inset: 0 12px; z-index: -1;
  background: var(--aass-clair); border-radius: 14px; border-left: 5px solid var(--aass-lagon);
}
#site-wrapper .site_line__item .zone-50.zone-html + .zone-50.zone-html::before { border-left-color: var(--aass-corail) !important; }
#site-wrapper .zone-50.zone-html h2 { font-size: 26px !important; }
#site-wrapper .zone-html ul { padding-left: 1.2em; }
#site-wrapper .zone-html li, #site-wrapper .zone-html p { font-size: 16px !important; line-height: 1.6; }
#site-wrapper .zone-html li::marker { color: var(--aass-lagon); }
#site-wrapper .zone-image img { border-radius: 10px; }

/* ---------- Liens et boutons ---------- */
#site-wrapper .content a:not(.btn) { color: var(--aass-profond); text-decoration: underline; text-decoration-color: var(--aass-lagon); text-underline-offset: 3px; }
#site-wrapper .content a:not(.btn):hover { color: var(--aass-corail-texte); }
#site-wrapper .btn { border-radius: 999px !important; font-weight: 700; padding: 10px 24px !important; line-height: 1.2 !important; border-width: 2px !important; border-style: solid !important; transition: transform .15s, box-shadow .15s; }
#site-wrapper .btn-primary { background: var(--aass-corail-texte) !important; border-color: var(--aass-corail-texte) !important; color: #fff !important; }
#site-wrapper .btn-default { background: #fff !important; border: 2px solid var(--aass-profond) !important; color: var(--aass-profond) !important; }
#site-wrapper .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0, 40, 70, .2); }

/* ---------- Événements en cartes ---------- */
#site-wrapper .events .item {
  background: #fff; border-radius: 14px; padding: 22px 24px; margin-bottom: 24px;
  border-top: 5px solid var(--aass-lagon);
  box-shadow: 0 6px 20px rgba(0, 40, 70, .10);
  transition: transform .15s, box-shadow .15s;
}
#site-wrapper .events .item:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 40, 70, .16); }
#site-wrapper .events .item h3 { color: var(--aass-profond); font-weight: 800; font-size: 22px !important; line-height: 1.3; margin-top: 0; }
#site-wrapper .events .item .e-date { color: var(--aass-corail-texte); font-weight: 700; font-size: 16px !important; letter-spacing: 0; }
#site-wrapper .events .item .actions { margin: 16px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Pied de page ---------- */
body .poweredBy-wrapper {
  background: var(--aass-profond) !important; margin-top: 48px; padding: 22px 0 !important;
}
body .poweredBy-wrapper::before {
  content: "AASS SUB · Club Subaquatique de Sarcelles · Centre sportif Nelson Mandela, 95200 Sarcelles";
  display: block; text-align: center; color: #fff; font-weight: 600; font-size: 15px; margin-bottom: 8px; padding: 0 16px;
}
body .poweredBy-link, body .poweredBy-link span { color: #cfe9f6 !important; }

/* ---------- Accessibilité ---------- */
/* Yapla supprime le contour de focus : on le rétablit pour la navigation au clavier */
#site-wrapper a:focus-visible, #site-wrapper button:focus-visible, #site-wrapper .btn:focus-visible,
#site-wrapper input:focus-visible, #site-wrapper select:focus-visible, #site-wrapper textarea:focus-visible {
  outline: 3px solid #FFB000 !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px #003A5D !important;
}
/* Menu fixe désactivé sur les petits écrans et en fort zoom : il masquerait le contenu */
@media (max-height: 600px), (max-width: 991px) { #site-wrapper .line-menu { position: static; } }
/* Pas d'animation pour qui l'a demandé dans son système */
@media (prefers-reduced-motion: reduce) {
  #site-wrapper *, #site-wrapper *::before, #site-wrapper *::after { transition: none !important; transform: none !important; }
}
/* Contraste renforcé demandé par le système (Windows, macOS) */
@media (prefers-contrast: more) {
  #site-wrapper .line-secondary { background: var(--aass-nuit); }
  #site-wrapper .site_line__item:has(.zone-header) .zone-html h2:nth-of-type(2) { color: var(--aass-nuit); }
  #site-wrapper .content a:not(.btn) { text-decoration-thickness: 2px; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 767px) {
  #site-wrapper .site_line__item:has(.zone-header) .zone-html h2:first-of-type { font-size: 30px !important; padding-top: 6px; }
  #site-wrapper .site_line__item:has(.zone-header) .zone-html h2:nth-of-type(2) { font-size: 17px !important; }
  #site-wrapper .zone-header img { max-height: 110px; min-height: 90px; width: auto; margin: 0 auto; display: block; }
  #site-wrapper .line-menu { position: static; }
  #site-wrapper .zone-menu ul.nav > li > a::after { display: none; }
  #site-wrapper .line-secondary h2 { font-size: 26px !important; }
  #site-wrapper .site_line__item .zone-50.zone-html { margin-bottom: 16px; }
}

/* ==========================================================================
   Bouton « Accessibilité » (script aass-yapla.js, onglet JS de Yapla)
   ========================================================================== */
#aass-a11y { position: fixed; right: 16px; bottom: 16px; z-index: 9999; font-family: Montserrat, system-ui, sans-serif; }
#aass-a11y-bouton {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 2px solid #fff; border-radius: 999px;
  background: var(--aass-nuit); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 25, 45, .35);
}
#aass-a11y-bouton:hover { background: var(--aass-profond); }
#aass-a11y-panneau {
  position: absolute; right: 0; bottom: calc(100% + 10px); width: 260px; padding: 16px;
  background: #fff; color: var(--aass-encre); border: 2px solid var(--aass-nuit); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 25, 45, .3);
}
#aass-a11y-panneau[hidden] { display: none; }
#aass-a11y .aass-a11y-titre { margin: 0 0 10px; font-size: 18px; font-weight: 800; color: var(--aass-nuit); }
#aass-a11y .aass-a11y-libelle { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
#aass-a11y .aass-a11y-tailles { display: flex; gap: 6px; margin-bottom: 12px; }
#aass-a11y-panneau button {
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; border-radius: 10px;
  border: 2px solid var(--aass-nuit); background: #fff; color: var(--aass-nuit); padding: 8px 10px;
}
#aass-a11y .aass-a11y-tailles button { flex: 1; }
#aass-a11y .aass-a11y-bascule, #aass-a11y .aass-a11y-raz { display: block; width: 100%; margin-top: 8px; text-align: left; }
#aass-a11y .aass-a11y-bascule::before { content: "○ "; }
#aass-a11y-panneau button[aria-pressed="true"] { background: var(--aass-nuit); color: #fff; }
#aass-a11y .aass-a11y-bascule[aria-pressed="true"]::before { content: "● "; }
#aass-a11y .aass-a11y-raz { border-style: dashed; font-weight: 600; text-align: center; }
#aass-a11y button:focus-visible { outline: 3px solid #FFB000; outline-offset: 2px; }
@media print { #aass-a11y { display: none; } }

/* Agrandir : Yapla fixe ses tailles en pixels, on agrandit donc toute la page */
html.aass-taille-1 #site-wrapper { zoom: 1.2; }
html.aass-taille-2 #site-wrapper { zoom: 1.4; }
html.aass-taille-1 #site-wrapper .line-menu, html.aass-taille-2 #site-wrapper .line-menu { position: static; }
html.aass-taille-1 #site-wrapper .container, html.aass-taille-2 #site-wrapper .container { width: auto !important; max-width: 100%; }
@media (min-width: 768px) {
  html.aass-taille-1 #site-wrapper ul.navbar-nav, html.aass-taille-2 #site-wrapper ul.navbar-nav { display: flex; flex-wrap: wrap; float: none; }
}

/* Contraste renforcé */
html.aass-contraste body, html.aass-contraste #site-wrapper { background: #fff !important; color: #000 !important; }
html.aass-contraste #site-wrapper .content p, html.aass-contraste #site-wrapper .content li,
html.aass-contraste #site-wrapper .events .item { color: #000 !important; }
html.aass-contraste #site-wrapper .site_line__item:has(.zone-header) { background: #fff !important; }
html.aass-contraste #site-wrapper .site_line__item:has(.zone-header) .zone-html h2 { color: #002B45 !important; }
html.aass-contraste #site-wrapper .line-menu, html.aass-contraste #site-wrapper .line-secondary,
html.aass-contraste body .poweredBy-wrapper { background: #002B45 !important; }
html.aass-contraste #site-wrapper .line-secondary::after { display: none; }
html.aass-contraste #site-wrapper .line-main h2,
html.aass-contraste #site-wrapper .site_line__item:not(.line-secondary):not(:has(.zone-header)) h2 { color: #002B45 !important; }
html.aass-contraste #site-wrapper .site_line__item:not(.line-secondary):not(:has(.zone-header)) .zone-50.zone-html::before {
  background: #fff !important; border: 3px solid #002B45 !important;
}
html.aass-contraste #site-wrapper .content a:not(.btn) { color: #002B45 !important; font-weight: 700; text-decoration-thickness: 3px; text-decoration-color: currentColor; }
html.aass-contraste #site-wrapper .btn-primary { background: #9A3412 !important; border-color: #9A3412 !important; }
html.aass-contraste #site-wrapper .btn-default { border-width: 3px !important; color: #002B45 !important; border-color: #002B45 !important; }
html.aass-contraste #site-wrapper .events .item { border: 3px solid #002B45; box-shadow: none; }
html.aass-contraste #site-wrapper .events .item .e-date { color: #9A3412 !important; }

/* Espacer le texte (critères WCAG 1.4.12) */
html.aass-espace #site-wrapper p, html.aass-espace #site-wrapper li, html.aass-espace #site-wrapper a,
html.aass-espace #site-wrapper h2, html.aass-espace #site-wrapper h3, html.aass-espace #site-wrapper h4 {
  letter-spacing: .12em !important; word-spacing: .16em !important; line-height: 1.8 !important;
}
html.aass-espace #site-wrapper p { margin-bottom: 1.4em !important; }