/* ===============================
   BMVR Nice – Style accessible et très lisible
   =============================== */

:root {
  /* Couleurs */
  --bg: #fffdf8;              /* blanc chaud pour limiter l’éblouissement */
  --text: #0a0a0a;            /* noir quasi pur : contraste maximal */
  --text-secondary: #2a2a2a;
  --surface: #f2f2f2;
  --card-bg: #fff;           /* fond pour les cartes / articles (modifiable en mode contraste) */
  --border: #bdbdbd;

  /* Couleurs de marque */
  --magenta: #8a004f;         /* magenta foncé, contraste 9:1 sur fond clair */
  --magenta-hover: #600036;
  --jaune: #eec6005e;           /* jaune lumineux mais lisible sur fond sombre */
  --jaune-hover: #e6b800;

  /* Autres */
  --focus: #ffcc00;
  --radius: 0.5rem;
  --maxw: 70rem;

  /* Typo */
  --font-size: 125%;          /* ≈20px */
  --line-height: 1.8;
}

/* ===============================
   Manipulation souris (etiquette du formulaire de contact cliquable)
   =============================== */
form label {
  cursor: pointer;
}
/* ===============================
   Base
   =============================== */
html {
  font-size: var(--font-size);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Roboto, system-ui, sans-serif;
  line-height: var(--line-height);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  visibility: hidden; /*default pour construire la page en js avant l'affichage*/
}

/* Zones principales */
header,
main,
footer {
  width: min(100% - 2rem, var(--maxw));
  margin-inline: auto;
}

/* ===============================
   Titres
   =============================== */
h1, h2, h3 {
  line-height: 1.3;
  font-weight: 700;
  margin-block: 1rem 0.5rem;
}

h1 {
  font-size: 2.2rem;
  color: var(--magenta);
}

h2 {
  font-size: 1.8rem;
  color: var(--text);
}

h3 {
  font-size: 1.4rem;
  color: var(--text-secondary);
}

/* ===============================
   Paragraphes
   =============================== */
p {
  max-width: 70ch;
  margin-block: 0.9rem;
  color: var(--text);
  font-size: 1rem;
}

/* ===============================
   Liens
   =============================== */
a {
  color: var(--magenta);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

a:hover {
  color: var(--magenta-hover);
}

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

/* ===============================
   Liens d’évitement
   =============================== */
.skip-links a {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--jaune);
  color: #000;
  padding: 0.7rem 1rem;
  font-weight: bold;
  z-index: 1000;
  text-decoration: none;
}
.skip-links a:focus-visible {
  top: 0;
}
/* ===============================
   Icones décoratives
   =============================== */
.icone {
  border-radius: 0px;
  width: 45px; 
  height: auto;
}
.icone_accueil {
  border-radius: 0px;
  width: 40px; 
  height: auto;
}
body.contrast .icone {
  filter: hue-rotate(104deg) brightness(650%);
}
body.contrast .icone_accueil {
  filter: hue-rotate(101deg) brightness(550%);
}

/* ===============================
   Header et navigation
   =============================== */
header {
  display: block; /* Assurer que le conteneur parent est un bloc */
  height: auto; /* Ajuster la hauteur pour inclure le contenu */
  border-bottom: 5px solid var(--jaune);
  padding: 1.2rem 0;
}

.brand {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  /* Image de bannière */
  background-image: url("images/bmvr.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;

  border-top: 4px solid var(--magenta);
  border-bottom: 4px solid var(--magenta);
  margin-bottom: 1.5rem;
}
.brand img {
  width: 50%;  
  height: auto;
  display: block;
  margin: 0 auto;
}

#menu-principal {
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre pour distinguer la navigation */
}

#menu-principal ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem 0 0;
  padding: 0;
}

#menu-principal a {
  text-decoration: none;
  padding: 0.7rem 1rem;
  border-radius: 0.3rem;
  font-weight: 700;
  color: var(--text);
  border: 2px solid transparent;
  font-size: 1rem;
}

#menu-principal a:hover {
  background: var(--surface);
  border-color: var(--magenta);
}

#menu-principal a[aria-current="page"] {
  background: var(--magenta);
  color: #fff;
}

/* En mode contraste élevé, le lien actif doit rester lisible : texte noir sur fond clair/contraste */
body.contrast #menu-principal a[aria-current="page"] {
  color: #000;
  background: var(--jaune); /* on peut aussi mettre 'transparent' si tu préfères conserver le magenta en arrière-plan */
}

/* Liens du menu non-actifs doivent rester en blanc en mode contraste */
body.contrast #menu-principal a {
  color: #fff;
}

/* ===============================
   Boutons
   =============================== */
button,
input[type="submit"],
.btn {
  padding: 0.7rem 1.1rem;
  border-radius: 0.3rem;
  border: none;
  font-weight: 700;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s ease;
}


button,
.btn-primary {
  background: var(--magenta);
  color: #fff;
}

button:hover,
.btn-primary:hover {
  background: var(--magenta-hover);
}

.btn-secondary {
  background: var(--jaune);
  color: #000;
}

.btn-secondary:hover {
  background: var(--jaune-hover);
}

/* ===============================
   Box recherche arrondie
   =============================== */
form[role="search"] {
  display: flex;
  align-items: center;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 9999px;
  overflow: hidden;
  padding: 0 0.3rem;
  width: fit-content;
}

form[role="search"] input[type="search"] {
  border: none;
  padding: 0.7rem 1rem;
  font-size: 1rem;
  outline: none;
  border-radius: 9999px 0 0 9999px;
}

form[role="search"] button {
  background: var(--magenta);
  border: none;
  border-radius: 9999px;

  height: 3.3rem;
  margin: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

form[role="search"] button:hover {
  background: var(--magenta-hover);
}

form[role="search"] button img {
  width: 1.4rem;
  height: 1.4rem;
}


/* ===============================
   Sections et articles
   =============================== */
main section {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.8rem 1.2rem;
  margin-block: 1.5rem;
}

article {
  border-left: 5px solid var(--magenta);
  background: var(--card-bg);
  padding: 1.5rem;
  border-radius: var(--radius);
  margin-block: 1rem;
}

/* Grille de services */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.service-card {
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 0;
  border-left: 5px solid var(--magenta);
  transition: all 0.2s ease;
}

.service-card:hover {
  border-color: var(--magenta);
  box-shadow: 0 4px 12px rgba(138, 0, 79, 0.1);
  transform: translateY(-2px);
}

.service-card:focus-within {
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px var(--focus);
}

.service-card h3 {
  color: var(--magenta);
  margin-top: 0;
  margin-bottom: 0.8rem;
  font-size: 1.2rem;
}

.service-card p {
  color: var(--text-secondary);
  margin-bottom: 1.2rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

.service-card a {
  font-weight: 700;
  color: var(--magenta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.service-card a:hover {
  color: var(--magenta-hover);
}

.service-card a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ===============================
   Tableaux
   =============================== */
table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 1rem;
  font-size: 1rem;
}

th, td {
  border: 1px solid var(--border);
  padding: 0.8rem;
  text-align: left;
}

th {
  background: var(--jaune);
  color: #000;
  font-weight: 700;
}

tr:nth-child(even) {
  background-color: #f6f6f6;
}

/* ===============================
   Pied de page
   =============================== */
footer {
  border-top: 5px solid var(--magenta);
  padding: 1.8rem 0;
  margin-top: 2rem;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 1rem;
}

footer nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0.5rem 0 0;
  padding: 0;
}

footer a {
  color: var(--magenta);
  text-decoration: underline;
}

/* ===============================
   Images et médias
   =============================== */
img, video {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* ===============================
   Accessibilité : texte invisible
   =============================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}


.contact-form .form-group {
  display: block;
  margin-bottom: 1.2em;
}

.form-group.contrast button {
  color: black; /* Appliquer la couleur noire au texte du bouton */
  background-color: var(--surface); /* Assurer un fond contrasté */
  border: 1px solid black; /* Ajouter une bordure pour plus de visibilité */
}

.contact-form label {
  display: block;
  margin-bottom: 0.3em;
  font-weight: 600;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5em;
  font-size: 1em;
}

.contact-form .checkbox {
  display: flex;
  align-items: center;
}

.contact-form .checkbox input[type="checkbox"] {
  margin-right: 0.5em;
}

.contact-form .full-width {
  width: 100%;
  resize: vertical;
}

.video-container {
      position: relative;
      padding-bottom: 56.25%; /* Format 16:9 */
      height: 0;
      overflow: hidden;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      margin-bottom: 1.5rem;
    }

    .video-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    .transcription {
      background-color: var(--card-bg);
      padding: 1.5rem;
      border-radius: 10px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .transcription h2 {
      font-size: 1.25rem;
      margin-top: 0;
      margin-bottom: 1rem;
    }

    .transcription dl {
      margin: 0;
    }

    .transcription dt {
      font-weight: bold;
      color: #555;
      margin-top: 0.5rem;
    }

    .transcription dd {
      margin-left: 1rem;
      margin-bottom: 0.5rem;
    }

  /* Accessibilité minimale intégrée (peut être déplacée dans style.css) */
  :focus-visible {
    outline: 3px solid #0a7;
    outline-offset: 2px;
  }
  .skip-links a {
    position: absolute;
    left: -9999px;
    top: 0;
  }
  .skip-links a:focus,
  .skip-links a:focus-visible {
    left: 0;
    background: #fff;
    padding: .5rem 1rem;
    z-index: 1000;
    box-shadow: 0 0 0 3px #0a7;
  }
  .sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
  }
  .table-wrapper {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* ===============================
   Mode contraste élevé (toggle via body.contrast)
   =============================== */
body.contrast {
  --bg: #0a0a0a;              /* fond sombre */
  --text: #ffffff;            /* texte clair */
  --text-secondary: #ffffff;
  --surface: #111;            /* surfaces */
  --card-bg: #2b2b2b;        /* fond des articles/cartes en mode contraste (gris) */
  --border: #666;

  /* Accents lisibles en sombre */
  --magenta: #f1ce3e;
  --magenta-hover: #f1ce3e;
  --jaune: #f1ce3e;
  --jaune-hover: #f1ce3e;
}

/* Assombrir les médias pour éviter l’éblouissement */
body.contrast img,
body.contrast video {
  filter: brightness(60%) contrast(120%);
}

/* Bannière en image de fond : overlay pour assombrir */
body.contrast .brand {
  position: relative;
}
body.contrast .brand::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  pointer-events: none;
  border-top: 4px solid var(--magenta);
  border-bottom: 4px solid var(--magenta);
}

/* Bordures et tables plus franches en mode contraste */
body.contrast table th,
body.contrast table td {
  border-color: var(--border);
}
body.contrast th {
  background: #222;
  color: #ffffff;
}

/* En mode contraste, forcer toutes les cellules <td> en fond blanc et texte noir
   (évite l'alternance sombre/claire et améliore la lisibilité uniforme) */
body.contrast table td {
  background: #ffffff !important;
  color: #000 !important;
}


/* Focus bien visible sur fond sombre */
body.contrast :focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

body.contrast button{
    background: var(--magenta);
    color: #000000;
}

body.contrast main {
  background : #363333;
}

body.contrast h1#titre.txt {
  color : #f1ce3e;
}

body.contrast p {
  color : #ffffff;
}

body.contrast a.button {
  color : #000000;
  background : #f1ce3e;
}

/* Option : prise en compte de la préférence système
   (on ne force pas, on ajoute juste la classe si besoin côté JS si tu veux)
*/
@media (prefers-contrast: more) {
  /* rien d’obligatoire ici, la bascule est manuelle avec le bouton */
}

#menu-principal a[aria-current="page"] img {
  filter: brightness(0) invert(1); /* Icône blanche */
}

body.contrast #menu-principal a[aria-current="page"] img {
  filter: brightness(0) invert(0); /* Icône noire en contraste élevé */
}