/* =========================================================================
   TENNIS CLUB ETOY — Feuille de style principale
   -------------------------------------------------------------------------
   Tout le site utilise ce seul fichier CSS.
   Pour changer les couleurs du site, modifiez uniquement les variables
   du bloc ":root" ci-dessous.

   Deux familles de couleurs : le BLEU du logo (titres, fonds sombres, pied
   de page) et la TERRE BATTUE (accents, boutons, liens). Les couleurs des
   niveaux Kids Tennis (rouge, orange, vert) et les couleurs de message
   (succès en vert, erreur en rouge) sont volontairement indépendantes du
   thème : elles gardent leur sens et ne suivent pas la palette.
   ========================================================================= */

:root {
  /* --- Couleurs principales --- */
  --terre:        #C0573A;   /* terre battue — couleur d'accent principale */
  --terre-fonce:  #9B4229;
  --terre-clair:  #E8A78F;
  /* Échelle de bleus dérivée du bleu du logo (#004AAD, même teinte pour
     les trois nuances) : le plus sombre pour les textes et les fonds
     foncés, le bleu du logo pour le pied de page et les aplats. */
  --bleu-nuit:    #002C66;   /* bleu nuit — titres, fonds sombres */
  --bleu-moyen:   #003D8F;
  --bleu:         #004AAD;   /* bleu exact du logo */
  --bleu-vif:     #0B5FCE;   /* éclaircie des dégradés */
  --balle:        #D7E24E;   /* jaune balle de tennis — petits accents */
  --creme:        #FBF8F3;   /* fond général */
  --sable:        #F0E8DC;   /* fond des blocs secondaires */
  --bordure:      #E2D8C9;
  --encre:        #21201E;   /* texte courant */
  --encre-douce:  #5F5A52;   /* texte secondaire */
  --blanc:        #FFFFFF;

  /* --- Mesures --- */
  --largeur-max:  1160px;
  --rayon:        14px;
  --rayon-petit:  8px;
  --ombre:        0 2px 4px rgba(33,32,30,.04), 0 12px 28px rgba(33,32,30,.07);
  --ombre-forte:  0 4px 10px rgba(33,32,30,.08), 0 20px 50px rgba(33,32,30,.12);
  --transition:   .2s ease;

  /* --- Typographie --- */
  --police-titre: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --police-texte: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =========================== Base =========================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
/* Sur les pages qui ont la barre d'ancres, on décale un peu plus pour que
   le titre visé ne passe pas sous les barres fixes. */
html:has(.ancres) { scroll-padding-top: 148px; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--terre-fonce); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  line-height: 1.15;
  color: var(--bleu-nuit);
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -.015em;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.15rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.08rem; }

p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li { margin-bottom: .35em; }

hr {
  border: 0; height: 1px; background: var(--bordure); margin: 2.5rem 0;
}

/* ======================= Mise en page ======================= */

.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 24px;
}
.conteneur-etroit { max-width: 840px; }

.section { padding: 72px 0; }
.section--sable { background: var(--sable); }
.section--bleu  { background: var(--bleu-nuit); color: #E9E4DA; }
.section--bleu h2, .section--bleu h3, .section--bleu h4 { color: var(--blanc); }
.section--bleu a { color: var(--balle); }

.section > .conteneur > h2:first-child { margin-top: 0; }

/* Surtitre décoratif au-dessus des titres de section */
.surtitre {
  display: inline-block;
  font-family: var(--police-titre);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--terre);
  margin-bottom: .6rem;
}

.plomb { font-size: 1.18rem; color: var(--encre-douce); }

/* =========================== Boutons =========================== */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: 13px 26px;
  border-radius: 100px;
  background: var(--terre);
  color: var(--blanc) !important;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid var(--terre);
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none !important;
}
.bouton:hover { background: var(--terre-fonce); border-color: var(--terre-fonce); transform: translateY(-2px); }

.bouton--secondaire {
  background: transparent;
  color: var(--bleu-nuit) !important;
  border-color: var(--bleu-nuit);
}
.bouton--secondaire:hover { background: var(--bleu-nuit); color: var(--blanc) !important; }

.bouton--clair {
  background: var(--blanc); color: var(--bleu-nuit) !important; border-color: var(--blanc);
}
.bouton--clair:hover { background: var(--balle); border-color: var(--balle); color: var(--bleu-nuit) !important; }

.bouton--petit { padding: 9px 18px; font-size: .92rem; }

.groupe-boutons { display: flex; flex-wrap: wrap; gap: 14px; }

/* =========================== En-tête =========================== */

.entete {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,248,243,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bordure);
}
.entete__interieur {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 78px;
}
.logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; text-decoration: none !important; }
.logo img { height: 52px; width: auto; }
.logo__texte { display: flex; flex-direction: column; line-height: 1.1; }
.logo__nom {
  font-family: var(--police-titre); font-weight: 700; font-size: 1.12rem;
  color: var(--bleu-nuit); letter-spacing: -.01em; white-space: nowrap;
}
.logo__sous {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--terre); white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.nav a {
  font-family: var(--police-titre);
  font-weight: 500; font-size: .96rem;
  color: var(--bleu-nuit); padding: 9px 11px; border-radius: 8px;
  text-decoration: none !important; transition: var(--transition);
  white-space: nowrap;
}
.nav a:hover { background: var(--sable); }
.nav a.actif { color: var(--terre-fonce); font-weight: 700; }
.nav a.actif::after {
  content: ""; display: block; height: 2px; background: var(--terre);
  border-radius: 2px; margin-top: 3px;
}
.nav .bouton { margin-left: 10px; }
.nav .bouton::after { display: none; }

/* Bouton hamburger (mobile) */
.burger {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 10px; border-radius: 8px;
}
.burger span {
  display: block; width: 24px; height: 2px; background: var(--bleu-nuit);
  border-radius: 2px; transition: var(--transition);
}
.burger span + span { margin-top: 6px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Écrans intermédiaires : menu un peu plus compact */
@media (max-width: 1300px) {
  .nav a { padding: 9px 8px; font-size: .92rem; }
  .nav .bouton { margin-left: 6px; }
}

@media (max-width: 1100px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: 78px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--creme); border-bottom: 1px solid var(--bordure);
    padding: 12px 24px 26px;
    box-shadow: var(--ombre);
    display: none;
  }
  .nav.ouvert { display: flex; }
  .nav a { padding: 14px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--bordure); border-radius: 0; }
  .nav a.actif::after { display: none; }
  .nav .bouton {
    margin: 16px 0 0; justify-content: center;
    border-bottom: 0; border-radius: 100px; padding: 14px 26px;
  }
}

/* =========================== Bandeau d'accueil =========================== */

.hero {
  position: relative;
background: linear-gradient(135deg, var(--bleu-nuit) 0%, var(--bleu) 58%, var(--bleu-vif) 100%);
  color: var(--blanc);
  overflow: hidden;
}
.hero::after {
  /* halo terre battue décoratif */
  content: ""; position: absolute; right: -12%; top: -30%;
  width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, rgba(192,87,58,.55) 0%, rgba(192,87,58,0) 68%);
  pointer-events: none;
}
.hero__interieur { position: relative; z-index: 1; padding: 104px 0 92px; max-width: 720px; }
.hero h1 { color: var(--blanc); margin-bottom: .35em; }
.hero p { font-size: 1.2rem; color: rgba(255,255,255,.9); max-width: 58ch; }
.hero .etiquette {
  display: inline-flex; align-items: center; gap: .5em;
  background: rgba(215,226,78,.16); color: var(--balle);
  border: 1px solid rgba(215,226,78,.35);
  padding: 6px 15px; border-radius: 100px;
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; margin-bottom: 22px;
}

/* Bandeau simple pour les pages intérieures */
.banniere {
  background: var(--bleu-nuit);
  color: var(--blanc);
  padding: 64px 0 58px;
  position: relative; overflow: hidden;
}
.banniere::after {
  content: ""; position: absolute; right: -6%; bottom: -60%;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(192,87,58,.5) 0%, rgba(192,87,58,0) 70%);
}
.banniere > .conteneur { position: relative; z-index: 1; }
.banniere h1 { color: var(--blanc); margin-bottom: .25em; }
.banniere p { color: rgba(255,255,255,.85); max-width: 62ch; margin: 0; font-size: 1.1rem; }
.banniere .surtitre { color: var(--balle); }

/* Fil d'ariane / ancres de page */
.ancres {
  background: var(--sable);
  border-bottom: 1px solid var(--bordure);
  position: sticky; top: 78px; z-index: 50;
}
.ancres ul {
  display: flex; flex-wrap: wrap; gap: 6px; list-style: none;
  margin: 0; padding: 12px 0;
}
.ancres a {
  display: inline-block; padding: 7px 15px; border-radius: 100px;
  background: var(--blanc); border: 1px solid var(--bordure);
  font-family: var(--police-titre); font-weight: 500; font-size: .9rem;
  color: var(--bleu-nuit); text-decoration: none !important; transition: var(--transition);
}
.ancres a:hover { background: var(--bleu-nuit); color: var(--blanc); border-color: var(--bleu-nuit); }

/* =========================== Cartes =========================== */

.grille { display: grid; gap: 24px; }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 28px;
  box-shadow: var(--ombre);
  transition: var(--transition);
}
.carte h3 { margin-top: 0; }
.carte > *:last-child { margin-bottom: 0; }

a.carte { color: inherit; text-decoration: none !important; display: block; }
a.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); border-color: var(--terre-clair); }

.carte__icone {
  font-size: 1.9rem; line-height: 1; margin-bottom: 14px; display: block;
}
.carte__fleche { color: var(--terre); font-weight: 600; font-family: var(--police-titre); }

/* Carte de tarif / formule de cours */
.formule { border-top: 5px solid var(--terre); }
.formule .prix {
  font-family: var(--police-titre); font-size: 2rem; font-weight: 700;
  color: var(--terre-fonce); line-height: 1; margin: 4px 0 14px;
}
.formule ul { list-style: none; padding: 0; margin: 0 0 18px; }
.formule li {
  padding-left: 1.6em; position: relative; font-size: .97rem; color: var(--encre-douce);
}
.formule li::before {
  content: "›"; position: absolute; left: .45em; color: var(--terre); font-weight: 700;
}
.formule--rouge  { border-top-color: #D9534F; }
.formule--orange { border-top-color: #E08A2E; }
.formule--vert   { border-top-color: #4C9A5B; }
.formule--compet { border-top-color: var(--bleu-nuit); }

/* Encadré d'information */
.encadre {
  background: var(--sable);
  border-left: 4px solid var(--terre);
  border-radius: var(--rayon-petit);
  padding: 20px 24px;
  margin: 0 0 1.6em;
}
.encadre > *:last-child { margin-bottom: 0; }
.encadre--bleu { border-left-color: var(--bleu-nuit); }
.encadre--whatsapp { border-left-color: #25D366; }

/* Bloc WhatsApp : texte à gauche, code QR à droite */
.whatsapp {
  display: grid; grid-template-columns: 1fr auto;
  gap: 30px; align-items: center;
}
.whatsapp__qr { display: block; line-height: 0; }
.whatsapp__qr img {
  width: 230px; height: auto; border-radius: 14px;
  box-shadow: var(--ombre); transition: var(--transition);
}
.whatsapp__qr:hover img { transform: translateY(-3px); box-shadow: var(--ombre-forte); }
@media (max-width: 680px) {
  .whatsapp { grid-template-columns: 1fr; }
  .whatsapp__qr { justify-self: center; }
  .whatsapp__qr img { width: 210px; }
}

.bouton--whatsapp { background: #0F7B4F; border-color: #0F7B4F; }
.bouton--whatsapp:hover { background: #0B6340; border-color: #0B6340; }

/* Liste de documents PDF */
.documents { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.documents a {
  display: flex; align-items: center; gap: 12px;
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit); padding: 15px 18px;
  color: var(--bleu-nuit); text-decoration: none !important;
  font-family: var(--police-titre); font-weight: 500;
  transition: var(--transition);
}
.documents a:hover { border-color: var(--terre); background: #fff; transform: translateX(4px); }

/* =========================== Comité =========================== */

/* NOMBRE DE MEMBRES PAR LIGNE : c'est le chiffre de « repeat(6, 1fr) ».
   Avec six membres, cela fait une seule rangée pleine, sans orphelin.
   Si le comité change de taille, ajustez ce chiffre (et éventuellement les
   deux lignes suivantes, qui gèrent les écrans plus étroits). */
.comite { display: grid; gap: 22px; grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1000px) { .comite { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .comite { grid-template-columns: repeat(2, 1fr); } }
.membre { text-align: center; }
.membre__photo {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--rayon); background: var(--sable);
  border: 1px solid var(--bordure); margin-bottom: 12px;
  /* mise en page des initiales, quand il n'y a pas encore de photo */
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; color: var(--terre-clair);
}
/* height:auto est indispensable : sans lui, l'attribut height="600" du
   <img> l'emporte sur aspect-ratio et la photo sort étirée. */
img.membre__photo { display: block; height: auto; }

/* Photo de groupe du comité */
.photo-groupe {
  margin: 0; border-radius: var(--rayon); overflow: hidden;
  box-shadow: var(--ombre); border: 1px solid var(--bordure);
}
.photo-groupe img { width: 100%; height: auto; display: block; }
.membre__nom { font-family: var(--police-titre); font-weight: 700; color: var(--bleu-nuit); }
.membre__role { font-size: .92rem; color: var(--encre-douce); }

/* =========================== Tableaux =========================== */

.tableau-scroll { overflow-x: auto; margin: 0 0 1.6em; }
table {
  width: 100%; border-collapse: collapse; background: var(--blanc);
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  overflow: hidden; font-size: .98rem;
}
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--bordure); vertical-align: top; }
thead th {
  background: var(--bleu-nuit); color: var(--blanc);
  font-family: var(--police-titre); font-weight: 600; font-size: .9rem;
  letter-spacing: .04em; text-transform: uppercase;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #FCFAF6; }
td strong { color: var(--bleu-nuit); }
.montant { font-family: var(--police-titre); font-weight: 700; color: var(--terre-fonce); white-space: nowrap; }

/* ================== Fiches des professeurs ==================
   Le nom du professeur est un bouton ; la fiche s'ouvre par-dessus la page
   (élément <dialog>, géré par assets/js/site.js). */

.lien-fiche {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--police-titre); font-weight: 600; font-size: 1rem;
  color: var(--terre-fonce); text-align: left; line-height: 1.4;
  border-bottom: 1px dashed var(--terre-clair);
  transition: var(--transition);
}
.lien-fiche::after { content: " \203A"; font-weight: 400; }
.lien-fiche:hover { color: var(--terre); border-bottom-style: solid; }
.lien-fiche:focus-visible {
  outline: 2px solid var(--terre); outline-offset: 3px; border-radius: 3px;
}

.note-tableau { font-size: .92rem; color: var(--encre-douce); }

dialog.fiche {
  padding: 0; border: 0; border-radius: var(--rayon);
  width: calc(100% - 32px); max-width: 560px;
  max-height: 85vh; overflow: auto;
  background: var(--blanc); color: var(--encre);
  box-shadow: var(--ombre-forte);
}
dialog.fiche::backdrop {
  background: rgba(0, 20, 45, .55);
  backdrop-filter: blur(2px);
}
dialog.fiche[open] { animation: fiche-apparait .18s ease-out; }
@keyframes fiche-apparait {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
}
@media (prefers-reduced-motion: reduce) {
  dialog.fiche[open] { animation: none; }
}

.fiche__interieur { position: relative; padding: 30px 32px 32px; }
.fiche__interieur h3 { margin: 0 0 .2em; padding-right: 40px; }
.fiche__interieur > *:last-child { margin-bottom: 0; }

.fiche__contact {
  font-family: var(--police-titre); font-weight: 600;
  margin-bottom: 1.4em;
}

.fiche__fermer { position: absolute; top: 14px; right: 14px; margin: 0; }
.fiche__fermer button {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--bordure); background: var(--creme);
  color: var(--encre-douce); font-size: 1.4rem; line-height: 1;
  cursor: pointer; transition: var(--transition);
}
.fiche__fermer button:hover {
  background: var(--terre); border-color: var(--terre); color: var(--blanc);
}

@media (max-width: 560px) {
  .fiche__interieur { padding: 26px 22px 28px; }
}

/* =========================== Camps =========================== */

.camp {
  display: grid; grid-template-columns: 130px 1fr auto; gap: 20px; align-items: start;
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--rayon); padding: 20px 24px; margin-bottom: 12px;
}
.camp__dates {
  font-family: var(--police-titre); font-weight: 700; color: var(--terre-fonce);
  font-size: 1.02rem; line-height: 1.3;
}
.camp__titre { font-family: var(--police-titre); font-weight: 600; color: var(--bleu-nuit); font-size: 1.06rem; }
.camp__detail { font-size: .94rem; color: var(--encre-douce); margin: 4px 0 0; }
.camp__prix { font-family: var(--police-titre); font-weight: 700; color: var(--bleu-nuit); white-space: nowrap; }
@media (max-width: 700px) {
  .camp { grid-template-columns: 1fr; gap: 8px; }
}

/* =========================== Équipes interclubs =========================== */

.equipes { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.equipes li {
  background: var(--blanc); border: 1px solid var(--bordure);
  border-left: 4px solid var(--terre);
  border-radius: var(--rayon-petit); padding: 12px 20px;
  font-family: var(--police-titre); font-weight: 600; color: var(--bleu-nuit);
  margin: 0;
}

/* =========================== FAQ (accordéon) =========================== */

.faq { display: grid; gap: 10px; }
.faq details {
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit); overflow: hidden;
}
.faq details[open] { border-color: var(--terre-clair); box-shadow: var(--ombre); }
.faq summary {
  cursor: pointer; padding: 18px 52px 18px 22px; position: relative;
  font-family: var(--police-titre); font-weight: 600; color: var(--bleu-nuit);
  font-size: 1.03rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; color: var(--terre); font-weight: 400; line-height: 1;
  transition: var(--transition);
}
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { background: #FCFAF6; }
.faq .reponse { padding: 0 22px 20px; color: var(--encre-douce); }
.faq .reponse > *:last-child { margin-bottom: 0; }

/* =========================== Vidéo =========================== */

.video {
  position: relative; padding-top: 56.25%; border-radius: var(--rayon);
  overflow: hidden; background: var(--bleu-nuit); box-shadow: var(--ombre-forte);
}
.video iframe, .video video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.video__placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  color: rgba(255,255,255,.75); text-align: center; padding: 24px;
}

/* =========================== Partenaires =========================== */

/* Les cartes gardent une largeur raisonnable quel que soit le nombre de
   partenaires (sinon, à trois logos, chacune occuperait un tiers de l'écran)
   et la rangée reste centrée. */
/* NOMBRE DE LOGOS PAR LIGNE : c'est le chiffre de « repeat(4, 1fr) »
   ci-dessous. Mettez 3 ou 5 si vous préférez. Les lignes suivantes réduisent
   ce nombre sur les écrans plus étroits, laissez-les telles quelles. */
.partenaires {
  display: grid; gap: 18px;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
}
@media (max-width: 980px) { .partenaires { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .partenaires { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 430px) { .partenaires { grid-template-columns: 1fr; } }

.partenaire {
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon);
  height: 130px; display: flex; align-items: center; justify-content: center;
  padding: 18px; color: var(--encre-douce); font-size: .9rem; text-align: center;
  transition: var(--transition);
}
.partenaire img {
  max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain;
}
a.partenaire { text-decoration: none !important; }
a.partenaire:hover { border-color: var(--terre-clair); box-shadow: var(--ombre); }

/* =========================== Formulaire =========================== */

.formulaire { margin: 0; }

.formulaire__ligne {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px;
}
@media (max-width: 560px) { .formulaire__ligne { grid-template-columns: 1fr; } }

.champ { display: flex; flex-direction: column; gap: 7px; margin: 0 0 20px; }

.champ > label {
  font-family: var(--police-titre); font-weight: 600;
  font-size: .95rem; color: var(--bleu-nuit);
}
.obligatoire { color: var(--terre); font-weight: 700; }

.champ__aide { font-size: .86rem; color: var(--encre-douce); }

.formulaire input[type="text"],
.formulaire input[type="email"],
.formulaire select,
.formulaire textarea {
  width: 100%;
  font-family: var(--police-texte); font-size: 1rem; color: var(--encre);
  background: var(--blanc);
  border: 1px solid var(--bordure); border-radius: var(--rayon-petit);
  padding: 12px 14px;
  transition: var(--transition);
}
.formulaire textarea { resize: vertical; min-height: 140px; line-height: 1.6; }

.formulaire select {
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23002C66' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px;
  cursor: pointer;
}

.formulaire input:hover, .formulaire select:hover, .formulaire textarea:hover {
  border-color: var(--terre-clair);
}
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus {
  outline: none; border-color: var(--terre);
  box-shadow: 0 0 0 3px rgba(192,87,58,.16);
}
/* Bordure rouge uniquement après que le visiteur a réellement saisi
   quelque chose d'incorrect (et non sur un champ encore vide). */
.formulaire :user-invalid { border-color: #C9553F; }
.formulaire :user-invalid:focus { box-shadow: 0 0 0 3px rgba(201,85,63,.18); }

/* Case à cocher du consentement */
.champ--case > label {
  display: flex; align-items: flex-start; gap: 11px;
  font-family: var(--police-texte); font-weight: 400;
  font-size: .93rem; color: var(--encre-douce); line-height: 1.55;
}
.champ--case input[type="checkbox"] {
  flex: 0 0 auto; width: 19px; height: 19px; margin-top: 2px;
  accent-color: var(--terre); cursor: pointer;
}

.formulaire__pied {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 4px 0 0;
}

/* Piège à robots : invisible pour les visiteurs, rempli par les spambots */
.pot-de-miel {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* Bandeau de confirmation ou d'erreur après envoi */
.message-envoi {
  border-radius: var(--rayon-petit);
  padding: 18px 22px; margin: 0 0 26px;
  border-left: 4px solid;
  font-size: .98rem;
}
.message-envoi > *:last-child { margin-bottom: 0; }
.message-envoi--succes { background: #EAF6EE; border-color: #2E8B57; color: #1C5334; }
.message-envoi--erreur { background: #FBEEEA; border-color: #C9553F; color: #8A3323; }
.message-envoi h3 { margin: 0 0 .35em; font-size: 1.05rem; color: inherit; }

/* =========================== Pied de page =========================== */

.pied {
  background: var(--bleu); color: rgba(255,255,255,.82);
  padding: 60px 0 28px; margin-top: 0; font-size: .96rem;
}
.pied__grille {
  display: grid; gap: 36px; grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
@media (max-width: 860px) { .pied__grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pied__grille { grid-template-columns: 1fr; } }
.pied h4 {
  color: var(--blanc); font-size: .88rem; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 1em;
}
.pied a { color: rgba(255,255,255,.82); }
.pied a:hover { color: var(--balle); }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: .55em; }
/* Le logo blanc est fourni sur un aplat bleu identique au fond du pied de
   page (#004AAD) : le rectangle se fond donc dans le fond. Si vous changez la
   couleur du pied de page, il faudra un logo sur fond transparent. */
.pied__logo img { height: 58px; margin-bottom: 16px; }
.pied__bas {
  border-top: 1px solid rgba(255,255,255,.22);
  margin-top: 42px; padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: .88rem; color: rgba(255,255,255,.62);
}

/* =========================== Bandeau d'appel =========================== */

.appel {
  background: var(--terre);
  color: var(--blanc);
  padding: 62px 0;
  text-align: center;
}
.appel h2 { color: var(--blanc); }
.appel p { color: rgba(255,255,255,.9); max-width: 56ch; margin-left: auto; margin-right: auto; }
.appel .groupe-boutons { justify-content: center; margin-top: 26px; }

/* =========================== Divers =========================== */

.retour-haut {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--bleu-nuit); color: var(--blanc); border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--ombre-forte); opacity: 0; pointer-events: none;
  transition: var(--transition); font-size: 1.1rem;
}
.retour-haut.visible { opacity: 1; pointer-events: auto; }
.retour-haut:hover { background: var(--terre); }

.a-completer {
  background: #FFF8E1; border: 1px dashed #D6B656; color: #7A5C10;
  border-radius: var(--rayon-petit); padding: 14px 18px; font-size: .94rem;
}

/* Adresse e-mail non publiée : marqueur « [adresse à compléter] ».
   Les adresses e-mail ne sont volontairement pas écrites sur le site.
   Pour retrouver tous les emplacements, cherchez « a-remplir » dans les
   fichiers .html. */
.a-remplir {
  display: inline-block;
  font-size: .93em;
  color: var(--encre-douce);
  background: rgba(192,87,58,.08);
  border: 1px dashed var(--terre-clair);
  border-radius: 5px;
  padding: 1px 8px;
  white-space: nowrap;
}
.pied .a-remplir { color: rgba(255,255,255,.7); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.25); }

/* Document annoncé mais pas encore disponible */
.document-indisponible {
  display: flex; align-items: center; gap: 12px;
  background: var(--blanc); border: 1px dashed var(--bordure);
  border-radius: var(--rayon-petit); padding: 15px 18px;
  color: var(--encre-douce);
  font-family: var(--police-titre); font-weight: 500;
}
.document-indisponible em { font-weight: 400; font-style: normal; opacity: .75; }

.centre { text-align: center; }
.marge-haut { margin-top: 2rem; }

@media print {
  .entete, .ancres, .retour-haut, .appel { display: none; }
}