/* Composants Infinitum. Mesures de référence : maquettes desktop 1440 px. */

/* ---- En-tête (fond marine profond, 112 px) ---- */
.entete { position: sticky; top: 0; z-index: 50; background: var(--couleur-fond-inverse); color: var(--couleur-texte-inverse); }
.entete__interieur { display: flex; align-items: center; justify-content: space-between; gap: var(--e-6); min-height: var(--hauteur-entete); }
.entete__logo { position: relative; flex: none; padding-block: var(--e-3) var(--e-4); }
.entete__logo img, .pied__identite img { width: 12.625rem; height: auto; }   /* 202 px, comme dans la maquette */
/* Petit filet or sous le logo (présent dans toutes les maquettes, en-tête et pied de page) */
.entete__logo::after, .pied__identite a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 1.875rem; height: 2px; background: var(--couleur-accent);
}
.entete__burger { display: none; padding: var(--e-2); color: inherit; }

.nav { display: flex; align-items: center; gap: clamp(1.25rem, -13.8rem + 18.67vw, 3rem); font-size: var(--taille-nav); }
.nav__liste { display: flex; align-items: center; gap: clamp(1.25rem, -13.8rem + 18.67vw, 3rem); list-style: none; padding: 0; }
.nav__lien { display: inline-flex; align-items: center; gap: var(--e-3); padding-block: var(--e-2); text-decoration: none; color: inherit; white-space: nowrap; }
.nav__lien:hover { text-decoration: underline; text-decoration-color: var(--couleur-accent); }
/* Page active : libellé or clair + filet or mat sous le lien (maquette : 1,5 px, 25 px sous le texte) */
.nav__lien[aria-current="page"] { position: relative; color: var(--couleur-accent-inverse); }
.nav__lien[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.95rem; height: 1.5px; background: var(--couleur-accent); }
.nav__groupe { position: relative; }
.nav__groupe [aria-expanded="true"] .chevron, .langues [aria-expanded="true"] .chevron { transform: rotate(180deg); }
.nav__sous-menu, .langues__liste {
  position: absolute; top: calc(100% + var(--e-4)); left: 0; min-width: 19rem; list-style: none;
  padding: var(--e-3) 0; background: var(--couleur-fond-inverse); border-top: var(--trait) solid var(--couleur-accent);
}
.nav__sous-menu a, .langues__liste a { display: block; padding: var(--e-3) var(--e-5); text-decoration: none; color: inherit; }
.nav__sous-menu a:hover, .langues__liste a:hover, .nav__sous-menu a[aria-current="page"] { color: var(--couleur-accent-inverse); }

.langues { position: relative; }
.langues__bouton { display: inline-flex; align-items: center; gap: var(--e-3); padding: var(--e-2); color: inherit; }
.langues__liste { left: auto; right: 0; min-width: 10rem; }

/* ---- Boutons (cible ≥ 44 px) ---- */
.bouton {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--e-7);
  min-height: 3.625rem; padding: 0 var(--e-5);
  background: var(--couleur-bouton); color: var(--couleur-texte-inverse);
  border: var(--trait) solid var(--couleur-bouton); border-radius: var(--rayon);
  font-size: var(--taille-champ); text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.bouton:hover { background: var(--couleur-fond-inverse); }
.bouton .fleche { flex: none; transition: transform var(--transition); }
.bouton:hover .fleche { transform: translateX(3px); }
.bouton--entete {
  min-height: 3.4375rem; gap: var(--e-6); padding: 0 var(--e-4) 0 var(--e-4);
  background: transparent; border-color: var(--couleur-accent); color: var(--couleur-accent-inverse); font-size: var(--taille-nav); white-space: nowrap;
}
.bouton--entete:hover, .bouton--entete[aria-current="page"] { background: transparent; border-color: var(--couleur-accent-inverse); }

/* ---- Étiquette mono (repère) ---- */
.etiquette {
  font-family: var(--police-mono); font-size: var(--taille-etiquette); font-weight: 400; line-height: 1.4;
  letter-spacing: var(--interlettrage-etiquette); text-transform: uppercase; color: var(--couleur-texte-secondaire);
}

/* ---- Introduction de page (hors accueil) ---- */
.intro-page { padding-top: clamp(2.5rem, 1rem + 4vw, 4.375rem); }
.intro-page .conteneur { position: relative; padding-bottom: clamp(2.5rem, 1.5rem + 2.5vw, 3.25rem); }
/* Filet aligné sur la grille (96 → 1344 px), pas sur toute la largeur du conteneur */
.intro-page .conteneur::after { content: ""; position: absolute; left: var(--marge-page); right: var(--marge-page); bottom: 0; height: var(--trait); background: var(--couleur-ligne); }
.intro-page__titre { margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem); font-size: var(--taille-h1); line-height: 1.1; }
.intro-page__chapeau {
  margin-top: clamp(1.25rem, 0.8rem + 1vw, 1.75rem); max-width: 50rem;
  font-family: var(--police-titres); font-size: var(--taille-chapeau); line-height: 1.38; letter-spacing: var(--interlettrage-titres); color: var(--couleur-texte-secondaire);
}

/* ---- Contact : colonne dialogue + formulaire ---- */
.contact { padding-block: var(--espace-section) clamp(3.5rem, 2rem + 4vw, 4.25rem); }
.contact__grille { display: grid; grid-template-columns: minmax(0, 27rem) minmax(0, 47rem); justify-content: space-between; gap: var(--e-7); }
.contact__titre { margin-top: var(--e-6); font-size: var(--taille-titre-moyen); line-height: 1.22; }
.contact__texte { margin-top: var(--e-6); font-size: var(--taille-texte-grand); line-height: 1.48; color: var(--couleur-texte-secondaire); }

.identite { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.75rem); max-width: 22.125rem; padding-top: var(--e-6); border-top: 1.5px solid var(--couleur-accent); }
.identite__nom { font-family: var(--police-titres); letter-spacing: var(--interlettrage-titres); font-size: var(--taille-titre-petit); line-height: 1.2; }
.identite__lieu { margin-top: var(--e-3); font-size: var(--taille-texte); }
.identite__ide { margin-top: var(--e-3); font-family: var(--police-mono); font-size: var(--taille-mono-info); color: var(--couleur-texte-secondaire); }

/* ---- Formulaire ---- */
.formulaire__note { margin-top: var(--e-4); font-size: var(--taille-note); line-height: 1.5; color: var(--couleur-texte-secondaire); }
.formulaire__note a { color: inherit; }
.formulaire__erreur { margin-top: var(--e-4); padding: var(--e-3) var(--e-4); border-left: 3px solid var(--couleur-texte); background: var(--couleur-surface); font-size: var(--taille-note); }
.formulaire { display: grid; gap: 1.75rem; margin-top: var(--e-6); }
.champ { display: grid; gap: 0.625rem; }
.champ label { font-size: var(--taille-champ-libelle); color: var(--couleur-texte); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: var(--hauteur-champ); padding: var(--e-4) 1.125rem;
  background: var(--couleur-surface); color: var(--couleur-texte);
  border: var(--trait) solid var(--couleur-bordure-champ); border-radius: var(--rayon);
  font-size: var(--taille-champ); line-height: 1.5;
}
.champ ::placeholder { color: var(--couleur-texte-secondaire); opacity: 1; }
.champ textarea { height: 9.4375rem; min-height: 6rem; resize: vertical; }
.champ select { appearance: none; padding-right: 3rem; cursor: pointer; }
.champ select:has(option[value=""]:checked) { color: var(--couleur-texte-secondaire); }
.champ--select { position: relative; }
.champ--select::after {
  content: ""; position: absolute; right: 1.75rem; bottom: 1.6rem; width: 0.5rem; height: 0.5rem;
  border-right: var(--trait) solid var(--couleur-texte-secondaire); border-bottom: var(--trait) solid var(--couleur-texte-secondaire);
  transform: rotate(45deg); pointer-events: none;
}
/* Bordure ardoise (6,3:1, validée le 05.10.2026) ; renforcée au focus et en cas d'erreur */
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 2px solid var(--couleur-focus); outline-offset: 0; border-color: var(--couleur-texte); }
.champ input:user-invalid, .champ textarea:user-invalid { border-color: var(--couleur-texte); border-width: 2px; }
.formulaire > .formulaire__note { margin-top: calc(-1 * var(--e-2)); }
.formulaire .bouton { justify-self: start; min-width: 18rem; margin-top: var(--e-2); }

/* ---- Pied de page ---- */
.pied { background: var(--couleur-fond-inverse); color: var(--couleur-texte-inverse); padding-block: 1.875rem 2rem; font-size: var(--taille-note); }
.pied a { color: inherit; text-decoration: none; }
.pied a:hover { text-decoration: underline; }
.pied ul { list-style: none; padding: 0; }
.pied__haut { display: grid; grid-template-columns: 29rem minmax(0, 1fr); gap: var(--e-7); padding-bottom: var(--e-6); border-bottom: var(--trait) solid var(--couleur-ligne-inverse); }
.pied__identite p { margin-top: var(--e-3); color: var(--couleur-texte-inverse-secondaire); }
.pied__identite a { position: relative; display: inline-block; padding-bottom: var(--e-4); }
.pied__nav { display: grid; grid-template-columns: 14.375rem 15.625rem 9.375rem auto; padding-top: var(--e-2); }
.pied__nav li + li { margin-top: var(--e-3); }
.pied__bas { display: flex; justify-content: space-between; align-items: center; gap: var(--e-5); padding-top: var(--e-5); font-size: var(--taille-petit); color: var(--couleur-texte-inverse-secondaire); }
.pied__bas ul { display: flex; gap: 5.5rem; }

/* ---- Tablette et mobile ---- */
@media (max-width: 1200px) {
  .pied__haut { grid-template-columns: 1fr; }
}
@media (min-width: 1201px) {
  .pied__haut { gap: 0; }
}

/* Menu burger dès 1280 px : en dessous, la navigation complète ne tient plus sur une ligne */
@media (max-width: 1280px) {
  .entete__logo img { width: 10.5rem; }
  .entete__burger { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--hauteur-entete) 0 0 0; flex-direction: column; align-items: stretch; gap: var(--e-5);
    padding: var(--e-5) var(--marge-page) var(--e-7); background: var(--couleur-fond-inverse); overflow-y: auto;
  }
  .nav:not(.est-ouvert) { display: none; }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__liste > li { border-bottom: var(--trait) solid var(--couleur-ligne-inverse); }
  .nav__lien { width: 100%; justify-content: space-between; padding-block: var(--e-4); font-size: 1.125rem; }
  .nav__lien[aria-current="page"]::after { bottom: 0.6rem; right: auto; width: 2rem; }
  .nav__sous-menu, .langues__liste { position: static; min-width: 0; border-top: 0; padding: 0 0 var(--e-3) var(--e-4); }
  .bouton--entete { justify-content: space-between; }
}

@media (max-width: 960px) {

  .contact__grille { grid-template-columns: 1fr; gap: var(--e-8); }
  .identite { max-width: none; }
}

@media (max-width: 640px) {
  .formulaire .bouton { width: 100%; min-width: 0; }
  .pied__nav { grid-template-columns: 1fr 1fr; gap: var(--e-4) var(--e-5); }
  .pied__bas { flex-direction: column; align-items: flex-start; }
  .pied__bas ul { gap: var(--e-6); }
}

/* ---- Bannière de consentement (Google Analytics, seulement si activé) ---- */
.consentement {
  position: fixed; z-index: 60; right: var(--e-4); bottom: var(--e-4); left: var(--e-4);
  max-width: 34rem; margin-left: auto; padding: var(--e-5) var(--e-6) var(--e-6);
  background: var(--couleur-fond-inverse); color: var(--couleur-texte-inverse);
  border-top: 2px solid var(--couleur-accent);
}
.consentement[hidden] { display: none; }
.consentement__titre { font-family: var(--police-titres); font-size: var(--taille-titre-petit); letter-spacing: var(--interlettrage-titres); line-height: 1.2; }
.consentement__texte { margin-top: var(--e-3); font-size: var(--taille-note); line-height: 1.5; color: var(--couleur-texte-inverse-secondaire); }
.consentement__texte a { color: var(--couleur-texte-inverse); text-decoration: underline; }
.consentement__actions { display: flex; flex-wrap: wrap; gap: var(--e-4); margin-top: var(--e-5); }
/* Les deux choix ont exactement le même poids visuel */
.bouton--consentement { min-height: 2.75rem; padding: 0 var(--e-6); background: transparent; border-color: var(--couleur-accent); color: var(--couleur-accent-inverse); font-size: var(--taille-nav); }
.bouton--consentement:hover { background: transparent; border-color: var(--couleur-accent-inverse); }
.pied__bouton { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.pied__bouton:hover { text-decoration: underline; }