/* Surcouche DPLO (charte graphique : orange #ff801b, blanc #ffffff, gris #7b7b7b, bleu ciel #58add6).
   Chargée après la feuille Tailwind d'origine (build/assets/app-*.css), qui reste intacte. */

/* Menu : boutons orange, écriture blanche */
.nav-link { background-color: #ff801b; color: #ffffff; }
.nav-link:hover { background-color: #e8720f; color: #ffffff; }
.nav-link.active { background-color: #ff801b; color: #ffffff; box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #ff801b; }
.nav-link.active:hover { background-color: #e8720f; }
header nav.flex-col .nav-link { width: 100%; justify-content: flex-start; margin: 0; }

/* Espacement entre les boutons du menu (desktop) ; pleine largeur en mobile */
.nav-link { margin-left: .25rem; margin-right: .25rem; }

/* Adresse e-mail sous les cartes de la page Liens */
.lien-mail { padding: 0 1.5rem 1.5rem; margin-top: -.25rem; }

/* Texte à droite du logo (2 lignes, noir) */
.logo-texte { font-size: .8rem; }
@media (min-width: 640px) { .logo-texte { font-size: 1.05rem; } }

/* Accessibilité : titre présent pour les lecteurs d'écran / le référencement, invisible à l'écran */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Bloc contacts (blanc sur gris #7b7b7b) */
.bloc-contacts { background-color: #7b7b7b; color: #ffffff; border-radius: .75rem; padding: 1.5rem; margin-bottom: 2rem; }
.bloc-contacts a { color: #ffffff; text-decoration: underline; }
.bloc-contacts a:hover { text-decoration: none; }

/* Liste numérotée (la feuille Tailwind d'origine remet les listes à zéro) */
.liste-numerotee { list-style: decimal; padding-left: 1.5rem; }
.liste-numerotee li { margin-bottom: .35rem; }

/* Boutons d'action (même orange que le menu) */
.bouton-dplo { display: inline-flex; align-items: center; gap: .5rem; margin: .25rem; padding: .65rem 1.25rem; border-radius: .375rem; background: #ff801b; color: #ffffff; font-family: Arial, sans-serif; font-weight: 700; text-decoration: none; }
.bouton-dplo:hover, .bouton-dplo:focus-visible { background: #e8720f; }
.bouton-dplo svg { width: 1rem; height: 1rem; flex-shrink: 0; }

/* Page « Le Mans 2026 » : programme */
.liste-puces { list-style: disc; padding-left: 1.5rem; margin: .25rem 0 .75rem; }
.liste-puces li { margin-bottom: .3rem; }
.programme h3.jour { font-size: 1.15rem; font-weight: 700; color: #000; background: #c6ecff; padding: .6rem .9rem; border-radius: .5rem; margin: 1.5rem 0 1rem; }
.programme h3.jour:first-child { margin-top: 0; }
.programme h4 { font-weight: 700; color: #000; font-size: 1.05rem; margin: 1.5rem 0 .25rem; padding-left: .6rem; border-left: 4px solid #58add6; }
.programme h5 { font-weight: 700; color: #000; margin: 1.1rem 0 .35rem; }
.programme .temps-detail { margin-bottom: .75rem; }
.programme .heure { font-weight: 700; color: #000; white-space: nowrap; }
.programme .ligne { margin: .5rem 0; }
.programme .avec { margin: .25rem 0 0; }
.programme .sous-titre { font-weight: 700; margin: .75rem 0 .1rem; }
.programme .pause { text-align: center; color: #7b7b7b; font-style: italic; margin: 1rem 0; }
.programme p { margin-bottom: .5rem; }

/* Boutons de documents à télécharger : contour orange, fond blanc (les deux actions principales restent pleines) */
.bouton-dplo--documents { background: #ffffff; color: #000000; border: 2px solid #ff801b; padding: calc(.65rem - 2px) calc(1.25rem - 2px); }
.bouton-dplo--documents:hover, .bouton-dplo--documents:focus-visible { background: #fff1e5; color: #000000; }
.bouton-dplo .poids { font-weight: 400; font-size: .85em; }

/* Le menu est collant : quand on se déplace au clavier ou par un lien interne (#…), l'élément visé ne doit pas
   disparaître sous lui (WCAG 2.2, « focus non masqué »). */
html { scroll-padding-top: 6rem; }

/* La feuille Tailwind d'origine remet <strong> au poids normal : on le rétablit (intitulés en gras dans les textes) */
strong { font-weight: 700; }

/* Six boutons dans le menu : en dessous de 1024 px ils colleraient au logo (et débordent à 768 px).
   On garde donc le menu « hamburger » jusqu'à 1023 px au lieu de 767 px. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  header nav.md\:flex { display: none !important; }
  header #mobile-menu-btn { display: block !important; }
}