/* ==========================================================================
   Force Intérim — Feuille de style unique
   Vanilla CSS, mobile-first, sans framework.

   Sommaire :
     0.  Polices auto-hébergées (Poppins, SIL OFL)
     1.  Variables (couleurs, espacements, typographie)
     2.  Reset et bases
     3.  Accessibilité (lien d'évitement, focus visible)
     4.  Utilitaires et mise en page
     5.  Boutons
     6.  En-tête et navigation
     7.  Hero et cartes d'orientation
     8.  Étapes du processus
     9.  Présentation, valeurs, agences
     10. Secteurs d'activité (carrousel)
     11. Espace candidat
     12. Formulaires
     13. Pied de page
     14. Pages internes et contenu légal
     15. Marqueurs [À COMPLÉTER]
     16. Utilitaires d'espacement
     17. Apparition au défilement
     18. Visuels d'illustration
     19. Micro-interactions
     20. Bloc contact
     21. Formulaires — envoi
   ========================================================================== */

/* ==========================================================================
   0. POLICES AUTO-HÉBERGÉES
   Poppins, sous licence SIL Open Font License 1.1 — donc redistribuable avec
   le site. Les fichiers et la licence sont dans assets/fonts/.
   Servie depuis notre propre serveur, et non depuis Google Fonts : aucune
   requête vers un tiers, donc aucun transfert d'adresse IP à déclarer.
   Deux graisses seulement, les seules que le site utilise.
   font-display: swap — le texte s'affiche immédiatement dans la police de
   secours, puis bascule : jamais de blanc au chargement.
   ========================================================================== */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   1. VARIABLES
   Palette issue du cahier des charges, recoupée avec les pixels du logo.
   ========================================================================== */
:root {
  /* --- Couleurs de marque --- */
  --bleu-marine:        #0d0d43; /* dominante : en-tête, boutons, pied de page */
  --bleu-marine-clair:  #1b1b6b; /* survol des éléments marine */
  --bleu-marine-sombre: #08082c; /* aplats profonds */
  --rose:               #ec4795; /* accent du cahier des charges — aplats uniquement */
  --rose-sombre:        #c2166f; /* accent lisible en TEXTE sur blanc (ratio 5,4:1) */
  --rose-pale:          #fdebf4; /* fonds teintés très légers */
  --violet:             #4a337b; /* extrémité froide du dégradé du monogramme */

  /* --- Neutres --- */
  --blanc:        #ffffff; /* arrière-plan général */
  --gris-clair:   #f5f5f5; /* fond des blocs de contenu */
  --gris-bordure: #e2e2e8;
  --gris-texte:   #55555f; /* texte secondaire, ratio 7,3:1 sur blanc */
  --noir:         #1a1a1a; /* texte courant et titres */

  /* --- Dégradé de marque (relevé sur le monogramme hexagonal) --- */
  --degrade-marque: linear-gradient(135deg, var(--violet) 0%, var(--rose) 100%);

  /* --- Échelle d'espacement (base 4 px) --- */
  --espace-3xs: 0.25rem;
  --espace-2xs: 0.5rem;
  --espace-xs:  0.75rem;
  --espace-s:   1rem;
  --espace-m:   1.5rem;
  --espace-l:   2rem;
  --espace-xl:  3rem;
  --espace-2xl: 4rem;
  --espace-3xl: 6rem;

  /* --- Typographie ---
     Arial n'est pas redistribuable : on ne l'auto-héberge pas, on utilise la
     copie déjà installée chez le visiteur. Zéro requête externe, donc conforme
     RGPD. Liberation Sans et Arimo sont métriquement identiques à Arial et
     prennent le relais sur Linux / Android. Voir assets/fonts/LISEZ-MOI.txt. */
  --police-base: Arial, "Liberation Sans", Arimo, "Helvetica Neue", Helvetica, sans-serif;

  /* Seconde famille : le titrage. Poppins, un géométrique aux bols
     parfaitement circulaires — la même géométrie que l'hexagone du logo.
     C'est la voix qui s'adresse au lecteur : titres de section, surtitres,
     chapôs, boutons, libellés de cartes. Auto-hébergée (voir §0), donc
     identique sur tous les postes.
     Les polices système derrière ne servent que le temps du chargement,
     ou si les fichiers venaient à manquer. */
  --police-titre: "Poppins", "Century Gothic", Futura, "Trebuchet MS",
                  Arial, "Liberation Sans", sans-serif;

  /* Troisième famille : le registre technique.
     Bahnschrift est la version Microsoft du DIN 1451 — le tracé des plans
     d'ingénierie, de la signalétique industrielle et des plaques
     minéralogiques allemandes. Pour une agence qui recrute en aéronautique,
     automobile, industrie et pharmaceutique, ce n'est pas un ornement : c'est
     l'alphabet du métier de ses clients.
     Réservée aux éléments les plus graphiques — le grand titre en capitales,
     les numéros d'étape, les chiffres clés — là où elle fait signal sans
     jamais avoir à être lue longtemps. C'est le contraste entre sa raideur
     et la rondeur de Poppins qui fait le caractère de la page.
       Bahnschrift    : Windows 10 et suivants
       DIN Alternate  : macOS, le même dessin d'origine
       Oswald / Franklin Gothic / Arial : filets de sécurité
     Non auto-hébergée : elle ne porte que quelques mots et de grands
     chiffres, où une substitution reste sans conséquence sur la mise en page.
     Pour revenir à un titrage tout en Arial, donner à ces deux variables la
     valeur var(--police-base). Voir assets/fonts/LISEZ-MOI.txt. */
  --police-technique: Bahnschrift, "DIN Alternate", Oswald,
                      "Franklin Gothic Medium", "Segoe UI",
                      Arial, "Liberation Sans", sans-serif;

  --taille-xs: 0.8125rem;
  --taille-s:  0.9375rem;
  --taille-m:  1rem;
  --taille-l:  1.125rem;
  --taille-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --taille-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
  --taille-h2: clamp(1.5rem, 1.25rem + 1.4vw, 2.25rem);
  --taille-h1: clamp(1.625rem, 1.2rem + 2.1vw, 2.5rem);

  --interligne-titre: 1.1;
  --interligne-texte: 1.65;

  /* --- Formes et profondeur --- */
  --rayon-s:     6px;
  --rayon-m:     12px;
  --rayon-l:     20px;
  --rayon-plein: 999px;
  --ombre-s: 0 1px 2px rgba(13, 13, 67, 0.06), 0 2px 8px rgba(13, 13, 67, 0.06);
  --ombre-m: 0 4px 16px rgba(13, 13, 67, 0.10);
  --ombre-l: 0 12px 32px rgba(13, 13, 67, 0.14);

  /* --- Structure --- */
  --largeur-max:    1200px;
  --largeur-texte:  68ch; /* confort de lecture des paragraphes longs */
  --hauteur-entete: 5rem;
  --gouttiere:      1rem;

  --transition: 180ms ease;
}

@media (min-width: 48em) {
  :root {
    --gouttiere: 2rem;
    --hauteur-entete: 5.5rem;
  }
}

/* ==========================================================================
   2. RESET ET BASES
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Décale les ancres pour qu'elles ne glissent pas sous l'en-tête fixe */
  scroll-padding-top: calc(var(--hauteur-entete) + var(--espace-s));
}

body {
  margin: 0;
  background-color: var(--blanc);
  color: var(--noir);
  font-family: var(--police-base);
  font-size: var(--taille-m);
  line-height: var(--interligne-texte);
  overflow-x: hidden; /* garde-fou contre les débordements horizontaux */
}

/* Les titres de section sont en Poppins, le texte courant en Arial, et le h1
   seul passe en DIN (voir la règle suivante). Interlignage serré : les titres
   forment un bloc compact, ce qui accentue le contraste avec le corps de
   texte, plus aéré. */
h1, h2, h3, h4 {
  margin: 0 0 var(--espace-s);
  color: var(--noir);
  font-family: var(--police-titre);
  font-weight: 600; /* Poppins SemiBold : la graisse la plus lourde embarquee */
  line-height: var(--interligne-titre);
  text-wrap: balance;
  /* Garde-fou : un titre long ne doit jamais déborder sur petit écran */
  overflow-wrap: break-word;
}

/* Le h1 joue à contre-emploi des h2 : même famille ronde, mais capitales
   contre bas-de-casse et graisse normale contre demi-grasse, avec un
   interlettrage plus large. C'est ce double écart qui hiérarchise la page,
   pas la seule différence de taille. */
h1 {
  font-size: var(--taille-h1);
  font-family: var(--police-titre);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
h2 { font-size: var(--taille-h2); }
h3 { font-size: var(--taille-h3); }
h4 { font-size: var(--taille-l); }

p { margin: 0 0 var(--espace-s); }
p:last-child { margin-bottom: 0; }

/* Mise en exergue : quelques groupes de mots en gras dans le texte courant,
   pour que l'œil accroche l'essentiel en survolant la page. Là où le texte
   de base est atténué (chapô en gris, sous-titre du hero en blanc à 88 %),
   le gras reprend aussi la couleur pleine — sinon l'emphase se verrait à
   peine. */
strong { font-weight: 700; }
.chapo strong { color: var(--noir); }
.hero__sous-titre strong { color: var(--blanc); }
.section--marine .chapo strong { color: var(--blanc); }

a {
  color: var(--rose-sombre);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--bleu-marine); }

img, picture, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol { margin: 0 0 var(--espace-s); padding-left: 1.25rem; }
li { margin-bottom: var(--espace-3xs); }

address { font-style: normal; }

/* Respect de la préférence système « animations réduites » */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   3. ACCESSIBILITÉ
   ========================================================================== */

/* Lien d'évitement : premier élément focusable de chaque page */
.lien-evitement {
  position: absolute;
  top: var(--espace-2xs);
  left: var(--espace-2xs);
  z-index: 200;
  padding: var(--espace-2xs) var(--espace-s);
  background-color: var(--bleu-marine);
  color: var(--blanc);
  border-radius: var(--rayon-s);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-250%);
  transition: transform var(--transition);
}
.lien-evitement:focus {
  transform: translateY(0);
  color: var(--blanc);
}

/* Focus visible homogène sur tout le site (WCAG 2.4.7) */
:focus-visible {
  outline: 3px solid var(--rose-sombre);
  outline-offset: 3px;
  border-radius: var(--rayon-s);
}
/* Sur fonds sombres, le contour passe en blanc pour rester perceptible */
.en-tete :focus-visible,
.pied :focus-visible,
.section--marine :focus-visible {
  outline-color: var(--blanc);
}

/* Contenu réservé aux lecteurs d'écran */
.lecteur-ecran-seul {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   4. UTILITAIRES ET MISE EN PAGE
   ========================================================================== */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: var(--espace-xl); }
@media (min-width: 48em) { .section { padding-block: var(--espace-2xl); } }

.section--grise  { background-color: var(--gris-clair); }
.section--marine { background-color: var(--bleu-marine); color: var(--blanc); }
.section--marine h1,
.section--marine h2,
.section--marine h3 { color: var(--blanc); }

.section__entete {
  max-width: var(--largeur-texte);
  margin-bottom: var(--espace-l);
}
.section__entete--centre {
  margin-inline: auto;
  text-align: center;
}

/* --- Rythme typographique ---
   Le titre se lit en deux temps : sa première moitié en graisse normale,
   la seconde en gras. Même famille, même corps — seule la graisse change,
   ce qui suffit à créer la respiration sans fragmenter le titre.
   Sans effet dans un h1, déjà en graisse normale : la rupture s'y fait
   par les capitales. */
.titre__accent {
  font-weight: 400;
}

/* Surtitre : petites capitales espacées, précédées d'un filet dégradé.
   Le contraste de casse avec le titre qui suit fait le rythme. */
.surtitre {
  display: block;
  margin-bottom: var(--espace-2xs);
  color: var(--rose-sombre);
  font-family: var(--police-titre);
  font-size: var(--taille-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.surtitre::before {
  content: "";
  display: inline-block;
  width: 1.75rem;
  height: 2px;
  margin-right: 0.6rem;
  vertical-align: 0.2em;
  background: var(--degrade-marque);
}
/* Centré : un filet de chaque côté pour rester symétrique */
.section__entete--centre .surtitre::after {
  content: "";
  display: inline-block;
  width: 1.75rem;
  height: 2px;
  margin-left: 0.6rem;
  vertical-align: 0.2em;
  background: var(--degrade-marque);
}
.section--marine .surtitre { color: var(--rose); }

.chapo {
  max-width: var(--largeur-texte);
  color: var(--gris-texte);
  font-family: var(--police-titre);
  font-size: var(--taille-l);
}
.section--marine .chapo { color: rgba(255, 255, 255, 0.88); }

/* Chapô d'une seule phrase courte : on desserre la largeur de lecture pour
   qu'elle tienne sur une ligne au lieu de se couper en deux. */
.chapo--large { max-width: none; }

/* …et son parent, qui borne la largeur de lecture à 68ch, doit suivre :
   sinon c'est lui qui impose le retour à la ligne. */
.section__entete--large { max-width: none; }

/* Filet décoratif reprenant le dégradé du monogramme */
.filet-marque {
  width: 64px;
  height: 4px;
  margin: 0 0 var(--espace-s);
  border: 0;
  border-radius: var(--rayon-plein);
  background: var(--degrade-marque);
}
.section__entete--centre .filet-marque { margin-inline: auto; }

/* Grilles génériques réutilisées par plusieurs sections */
.grille {
  display: grid;
  gap: var(--espace-s);
  grid-template-columns: 1fr;
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 40em) {
  .grille--2 { grid-template-columns: repeat(2, 1fr); }
  .grille--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 48em) {
  .grille { gap: var(--espace-m); }
  .grille--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 64em) {
  .grille--4 { grid-template-columns: repeat(4, 1fr); }
}

.grille li { margin-bottom: 0; }

/* Carte seule : on borne sa largeur. Étirée sur toute la page, elle se
   lirait mal et paraîtrait vide. */
.grille--solo { max-width: 32rem; }

/* ==========================================================================
   5. BOUTONS
   ========================================================================== */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-2xs);
  min-height: 44px; /* cible tactile confortable */
  padding: var(--espace-xs) var(--espace-m);
  border: 2px solid transparent;
  border-radius: var(--rayon-plein);
  font-family: var(--police-titre);
  font-size: var(--taille-s);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.bouton:hover { transform: translateY(-1px); }
.bouton:active { transform: translateY(0); }

/* Principal : blanc sur bleu marine */
.bouton--primaire {
  background-color: var(--bleu-marine);
  border-color: var(--bleu-marine);
  color: var(--blanc);
}
.bouton--primaire:hover {
  background-color: var(--bleu-marine-clair);
  border-color: var(--bleu-marine-clair);
  color: var(--blanc);
}

/* Accent : blanc sur rose — réservé aux appels à l'action forts */
.bouton--accent {
  background-color: var(--rose-sombre);
  border-color: var(--rose-sombre);
  color: var(--blanc);
}
.bouton--accent:hover {
  background-color: #a01159;
  border-color: #a01159;
  color: var(--blanc);
}

/* Secondaire : contour marine sur fond clair */
.bouton--contour {
  background-color: transparent;
  border-color: var(--bleu-marine);
  color: var(--bleu-marine);
}
.bouton--contour:hover {
  background-color: var(--bleu-marine);
  color: var(--blanc);
}

/* Pour fonds sombres */
.bouton--blanc {
  background-color: var(--blanc);
  border-color: var(--blanc);
  color: var(--bleu-marine);
}
.bouton--blanc:hover {
  background-color: var(--rose-pale);
  border-color: var(--rose-pale);
  color: var(--bleu-marine);
}

.bouton--large { width: 100%; }
@media (min-width: 40em) { .bouton--large { width: auto; } }

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2xs);
}

/* ==========================================================================
   6. EN-TÊTE ET NAVIGATION
   Bandeau fin, fixe en haut, visible en permanence (cahier des charges).
   ========================================================================== */
.en-tete {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--bleu-marine);
  color: var(--blanc);
  box-shadow: var(--ombre-m);
}

.en-tete__interieur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-s);
  min-height: var(--hauteur-entete);
}

.en-tete__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.en-tete__logo img {
  width: auto;
  height: 3rem;
}
@media (min-width: 48em) {
  .en-tete__logo img { height: 3.5rem; }
}

/* --- Bouton burger, visible sous 64em --- */
.burger {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-2xs);
  min-height: 44px;
  padding: var(--espace-2xs) var(--espace-xs);
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--rayon-s);
  color: var(--blanc);
  font-family: inherit;
  font-size: var(--taille-s);
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
}
.burger:hover { border-color: var(--blanc); background-color: rgba(255, 255, 255, 0.08); }

.burger__barres {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background-color: currentColor;
  transition: background-color var(--transition);
}
.burger__barres::before,
.burger__barres::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background-color: currentColor;
  transition: transform var(--transition), top var(--transition);
}
.burger__barres::before { top: -6px; }
.burger__barres::after  { top: 6px; }

/* État ouvert : les trois barres deviennent une croix */
.burger[aria-expanded="true"] .burger__barres { background-color: transparent; }
.burger[aria-expanded="true"] .burger__barres::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__barres::after  { top: 0; transform: rotate(-45deg); }

/* --- Panneau de navigation --- */
.nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--hauteur-entete));
  overflow-y: auto;
  padding: var(--espace-s) var(--gouttiere) var(--espace-m);
  background-color: var(--bleu-marine);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: var(--ombre-l);
}
/* Fermé par défaut : l'attribut hidden est piloté par le JS */
.nav[hidden] { display: none; }

.nav__liste {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3xs);
  margin: 0 0 var(--espace-s);
  padding: 0;
  list-style: none;
}
.nav__liste li { margin-bottom: 0; }

.nav__lien {
  display: block;
  padding: var(--espace-2xs) var(--espace-3xs);
  color: var(--blanc);
  font-size: var(--taille-s);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--rayon-s);
  transition: color var(--transition), background-color var(--transition);
}
.nav__lien:hover {
  color: var(--blanc);
  background-color: rgba(255, 255, 255, 0.1);
}
/* Page courante : soulignement rose, pas seulement une différence de couleur */
.nav__lien[aria-current="page"] {
  color: var(--blanc);
  box-shadow: inset 0 -3px 0 var(--rose);
}

.nav__actions {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2xs);
  padding-top: var(--espace-s);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* --- Bascule vers la navigation horizontale sur grand écran --- */
@media (min-width: 64em) {
  .burger { display: none; }

  .nav,
  .nav[hidden] {
    display: flex;
    position: static;
    align-items: center;
    gap: var(--espace-m);
    max-height: none;
    overflow: visible;
    padding: 0;
    background: transparent;
    border-top: 0;
    box-shadow: none;
  }
  .nav__liste {
    flex-direction: row;
    align-items: center;
    gap: var(--espace-xs);
    margin-bottom: 0;
  }
  .nav__actions {
    flex-direction: row;
    padding-top: 0;
    border-top: 0;
  }
  .nav__actions .bouton { padding-inline: var(--espace-s); }
}

/* ==========================================================================
   7. HERO ET CARTES D'ORIENTATION
   ========================================================================== */
.hero {
  position: relative;
  background-color: var(--bleu-marine);
  color: var(--blanc);
  padding-block: var(--espace-xl);
  overflow: hidden;
}
@media (min-width: 48em) { .hero { padding-block: var(--espace-2xl); } }

/* --- Visuel d'ambiance en fond de bandeau ---
   La photo est très claire (luminance médiane 219/255, jusqu'à 255 dans les
   hautes lumières). Sans voile, le texte blanc serait illisible : c'est le
   pire cas — du blanc pur — qui a dicté l'opacité.
   Sur du blanc, un voile marine à 60 % suffit tout juste à tenir les 4,5:1
   du texte blanc. Le dégradé ci-dessous ne descend jamais sous 68 %, avec une
   marge confortable côté texte (93 %) et une ouverture côté droit, où la
   photo respire entre les cartes d'orientation. */
.hero__visuel {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Recentré vers le haut : sur grand écran le bandeau est panoramique et
     rogne la hauteur, ce qui ferait disparaître les visages sinon. */
  object-position: 50% 22%;
}

/* Voile marine.
   Il suit la mise en page plutôt que d'être uniforme : là où il y a du texte
   il est épais, ailleurs il s'ouvre pour laisser voir la photo.
   Sur petit écran le texte occupe toute la largeur : le voile est donc dense
   en haut, sous le titre, et s'allège vers le bas. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(13, 13, 67, 0.93) 0%,
    rgba(13, 13, 67, 0.88) 45%,
    rgba(13, 13, 67, 0.76) 100%
  );
  pointer-events: none;
}

/* À partir de 64em le texte se cantonne à la colonne de gauche (jusqu'à 48 %
   de la largeur) : le voile peut s'ouvrir franchement à droite, où la photo
   apparaît autour des cartes d'orientation et dans les marges de page. */
@media (min-width: 64em) {
  .hero::before {
    background: linear-gradient(
      90deg,
      rgba(13, 13, 67, 0.95) 0%,
      rgba(13, 13, 67, 0.90) 48%,
      rgba(13, 13, 67, 0.55) 78%,
      rgba(13, 13, 67, 0.50) 100%
    );
  }
}

/* Halo rose discret repris du monogramme, par-dessus le voile.
   Dimensions fixes (et non en pourcentage) pour qu'il reste un accent
   localisé sur mobile au lieu d'envahir tout le bandeau. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(26rem 20rem at 92% 6%, rgba(236, 71, 149, 0.22), transparent 70%);
  pointer-events: none;
}

.hero__interieur {
  position: relative;
  z-index: 3; /* au-dessus du visuel, du voile et du halo */
  display: grid;
  gap: var(--espace-l);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 64em) {
  .hero__interieur {
    grid-template-columns: 1fr 1fr;
    gap: var(--espace-xl);
  }
}

.hero h1 { color: var(--blanc); }

.hero__sous-titre {
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--taille-xl);
}

/* Le fond utilise --rose-sombre et non --rose : à 15 px gras, le texte n'est
   pas du « grand texte » au sens WCAG et exige donc 4,5:1. Le #ec4795 n'offre
   que 3,56:1 sur blanc, le #c2166f monte à 5,77:1 pour une teinte identique à l'œil. */
/* Capitales espacées : le contraste de casse avec le grand titre juste en
   dessous installe le rythme dès le premier écran. */
.hero__baseline {
  display: inline-block;
  margin-bottom: var(--espace-s);
  padding: var(--espace-3xs) var(--espace-s);
  background-color: var(--rose-sombre);
  border-radius: var(--rayon-plein);
  color: var(--blanc);
  font-size: var(--taille-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Les 4 blocs d'orientation, regroupés à droite du hero */
.orientation {
  display: grid;
  gap: var(--espace-2xs);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 30em) {
  .orientation { grid-template-columns: repeat(2, 1fr); gap: var(--espace-s); }
}
.orientation li { margin-bottom: 0; }

.carte-orientation {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2xs);
  height: 100%;
  padding: var(--espace-s);
  background-color: var(--blanc);
  border: 2px solid transparent;
  border-radius: var(--rayon-m);
  color: var(--noir);
  text-decoration: none;
  box-shadow: var(--ombre-s);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}
.carte-orientation:hover {
  transform: translateY(-3px);
  border-color: var(--rose);
  box-shadow: var(--ombre-l);
  color: var(--noir);
}

.carte-orientation__titre {
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--taille-m);
  font-weight: 600;
}

.carte-orientation__lien {
  margin-top: auto;
  color: var(--rose-sombre);
  font-size: var(--taille-s);
  font-weight: 700;
}

/* Pastille numérotée / pictogramme des cartes */
/* Pastille porte-pictogramme.
   Les quatre blocs d'accueil sont des choix parallèles, pas des étapes : ils
   portent donc un pictogramme et non un numéro, qui laisserait croire à un
   ordre. Les tracés sont dessinés au trait et héritent de la couleur du texte,
   d'où le blanc sur le dégradé. */
.carte-orientation__pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--rayon-m);
  background: var(--degrade-marque);
  color: var(--blanc);
}
.carte-orientation__pastille svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* ==========================================================================
   8. ÉTAPES DU PROCESSUS
   Reprend la logique de la maquette : cartes numérotées, contour rose.
   ========================================================================== */
.etapes {
  display: grid;
  gap: var(--espace-s);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}
@media (min-width: 40em) { .etapes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .etapes { grid-template-columns: repeat(5, 1fr); gap: var(--espace-xs); } }

.etapes li { margin-bottom: 0; }

.etape {
  position: relative;
  height: 100%;
  padding: var(--espace-m) var(--espace-s);
  background-color: var(--blanc);
  border: 1px solid var(--rose);
  border-radius: var(--rayon-m);
}

/* --- Pastille de liaison entre deux étapes ---
   Un disque au dégradé de marque, portant un chevron blanc, posé dans la
   gouttière et débordant légèrement sur les deux cartes voisines.
   Elle est accrochée au bord GAUCHE des étapes 2 à 5, et non au bord droit
   des étapes 1 à 4 : ainsi la pastille appartient à la carte la plus tardive
   dans le DOM et se peint par-dessus sa voisine de gauche, sans avoir à
   bricoler des z-index entre éléments frères.
   Purement décorative : la succession est déjà portée par la liste ordonnée. */
@media (min-width: 64em) {
  .etapes li:not(:first-child) .etape::before,
  .etapes li:not(:first-child) .etape::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    pointer-events: none;
  }

  /* Le disque */
  .etapes li:not(:first-child) .etape::before {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--degrade-marque);
    box-shadow: 0 2px 8px rgba(13, 13, 67, 0.3);
    transform: translate(calc(-50% - var(--espace-xs) / 2), -50%);
  }

  /* Le chevron blanc, décalé d'un pixel pour paraître optiquement centré */
  .etapes li:not(:first-child) .etape::after {
    width: 7px;
    height: 7px;
    border-top: 2px solid var(--blanc);
    border-right: 2px solid var(--blanc);
    transform: translate(calc(-50% - var(--espace-xs) / 2 - 1px), -50%) rotate(45deg);
  }
}

/* Grand numéro d'étape, dans la seconde famille : le serif tranche avec
   le texte en Arial juste en dessous et donne son rythme à la carte. */
.etape__numero {
  display: block;
  margin-bottom: var(--espace-2xs);
  color: var(--rose-sombre);
  font-family: var(--police-technique);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

.etape__texte {
  margin: 0;
  font-size: var(--taille-s);
  color: var(--noir);
}

.etapes-transition {
  max-width: var(--largeur-texte);
  margin-block: var(--espace-l) var(--espace-m);
}

/* ==========================================================================
   9. PRÉSENTATION, VALEURS, AGENCES
   ========================================================================== */

/* Paragraphe de présentation : fond blanc, texte noir (cahier des charges) */
.presentation {
  max-width: var(--largeur-texte);
  padding: var(--espace-m);
  background-color: var(--blanc);
  border-radius: var(--rayon-m);
  border-left: 4px solid var(--rose);
  color: var(--noir);
  font-size: var(--taille-l);
}

/* Carte d'agence */
.agence {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2xs);
  height: 100%;
  padding: var(--espace-m);
  background-color: var(--blanc);
  border: 1px solid var(--gris-bordure);
  border-top: 4px solid var(--rose);
  border-radius: var(--rayon-m);
  box-shadow: var(--ombre-s);
}

.agence__nom {
  margin: 0;
  font-size: var(--taille-l);
  color: var(--bleu-marine);
}

/* Un site = une adresse et ses contacts. Une carte peut en regrouper deux
   lorsqu'ils partagent le même téléphone et la même adresse e-mail. */
.agence__site {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3xs);
}
.agence__site + .agence__site {
  margin-top: var(--espace-2xs);
  padding-top: var(--espace-s);
  border-top: 1px solid var(--gris-bordure);
}

.agence__adresse {
  font-size: var(--taille-s);
  color: var(--gris-texte);
}

.agence__coordonnees {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3xs);
  margin: 0;
  font-size: var(--taille-s);
}
.agence__coordonnees a { font-weight: 700; }

/* --- Présentation : texte à gauche, chiffres clés à droite --- */
.presentation-duo {
  display: grid;
  gap: var(--espace-xl);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 64em) {
  .presentation-duo { grid-template-columns: 1fr 1fr; }
}

/* --- Chiffres clés en maçonnerie ---
   Deux colonnes de tuiles de hauteurs inégales qui s'imbriquent : une courte
   surmonte une haute à gauche, l'inverse à droite. Les positions sont posées
   explicitement plutôt que laissées au placement automatique, qui laisserait
   des trous. Les rangées peuvent grandir (minmax) si un libellé est long. */
.chiffres {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-s);
  margin: 0;
  padding: 0;
  list-style: none;
}
.chiffres li { margin-bottom: 0; }

@media (min-width: 30em) {
  .chiffres {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(2.4rem, auto);
  }
  .chiffres li:nth-child(1) { grid-column: 1; grid-row: 1 / span 3; }
  .chiffres li:nth-child(2) { grid-column: 2; grid-row: 1 / span 4; }
  .chiffres li:nth-child(3) { grid-column: 1; grid-row: 4 / span 4; }
  .chiffres li:nth-child(4) { grid-column: 2; grid-row: 5 / span 3; }
}

.chiffre {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--espace-3xs);
  height: 100%;
  min-height: 6.5rem;
  padding: var(--espace-m);
  border-radius: var(--rayon-m);
  transition: transform var(--transition), box-shadow var(--transition);
}
.chiffre:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-l);
}

.chiffre__valeur {
  font-family: var(--police-technique);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
}
/* Emplacement du nombre tant que la valeur n'est pas fournie */
.chiffre__valeur--attente {
  opacity: 0.5;
  border-bottom: 2px dashed currentColor;
  align-self: flex-start;
}
.chiffre__libelle {
  font-size: var(--taille-s);
  line-height: 1.4;
}

/* --- Déclinaisons de couleur ---
   Trois fonds soutenus et un fond clair, pour que le bloc respire.
   Le blanc sur le dégradé impose sa version foncée : le magenta clair
   #ec4795 ne monte qu'à 3,6:1, insuffisant pour le libellé en petit corps. */
.chiffre--degrade {
  background: linear-gradient(135deg, var(--violet) 0%, var(--rose-sombre) 100%);
  color: var(--blanc);
}
.chiffre--marine {
  background-color: var(--bleu-marine);
  color: var(--blanc);
}
.chiffre--violet {
  background-color: var(--violet);
  color: var(--blanc);
}
.chiffre--rose {
  background-color: var(--rose-pale);
  color: var(--bleu-marine);
}
.chiffre--degrade .chiffre__libelle,
.chiffre--marine .chiffre__libelle,
.chiffre--violet .chiffre__libelle { color: rgba(255, 255, 255, 0.88); }
.chiffre--rose .chiffre__libelle { color: var(--gris-texte); }

/* ==========================================================================
   10. SECTEURS D'ACTIVITÉ
   Bande grise, tuiles photo, défilement horizontal sur petit écran.
   ========================================================================== */
.secteurs {
  position: relative;
}

.secteurs__piste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: var(--espace-s);
  margin: 0;
  padding: 0 0 var(--espace-s);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
@media (min-width: 40em) { .secteurs__piste { grid-auto-columns: 44%; } }
@media (min-width: 64em) {
  .secteurs__piste {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-columns: auto;
    overflow-x: visible;
  }
}
.secteurs__piste li {
  margin-bottom: 0;
  scroll-snap-align: start;
}

.secteur {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100%;
  min-height: 200px;
  padding: var(--espace-s);
  border-radius: var(--rayon-m);
  overflow: hidden;
  background: var(--degrade-marque);
  color: var(--blanc);
  text-decoration: none;
  isolation: isolate;
}

/* Voile sombre garantissant le contraste du texte sur la photo */
.secteur::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(8, 8, 44, 0.85) 0%, rgba(8, 8, 44, 0.25) 60%, rgba(8, 8, 44, 0.1) 100%);
}

.secteur__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.secteur__nom {
  margin: 0;
  font-size: var(--taille-l);
  color: var(--blanc);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Commandes du carrousel, masquées quand tout tient à l'écran */
.secteurs__commandes {
  display: flex;
  justify-content: flex-end;
  gap: var(--espace-2xs);
  margin-top: var(--espace-2xs);
}
@media (min-width: 64em) { .secteurs__commandes { display: none; } }

.secteurs__bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background-color: var(--bleu-marine);
  border: 0;
  border-radius: var(--rayon-plein);
  color: var(--blanc);
  cursor: pointer;
  transition: background-color var(--transition), opacity var(--transition);
}
.secteurs__bouton:hover { background-color: var(--bleu-marine-clair); }
.secteurs__bouton[disabled] { opacity: 0.35; cursor: default; }

/* ==========================================================================
   11. ESPACE CANDIDAT
   ========================================================================== */
.candidat {
  display: grid;
  gap: var(--espace-l);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 64em) {
  .candidat { grid-template-columns: 1fr 1fr; gap: var(--espace-xl); }
}

/* ==========================================================================
   12. FORMULAIRES
   ========================================================================== */
.formulaire {
  max-width: 46rem;
  margin-inline: auto;
}

/* Variante deux colonnes : « Votre besoin » et « Vos coordonnées » côte à côte.
   Le formulaire devient lui-même la grille — pas de conteneur intermédiaire —
   et le bloc consentement + envoi s'étend sous les deux colonnes.
   En dessous de 64em les deux groupes s'empilent, et leurs champs repassent
   sur deux colonnes puisqu'ils disposent alors de toute la largeur. */
.formulaire--large { max-width: 68rem; }

@media (min-width: 64em) {
  .formulaire--large {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espace-m);
    /* Chaque carte s'arrête sur son contenu. Sans cela, « Vos coordonnées »
       (4 champs) s'étirerait à la hauteur de « Votre besoin » (6 champs dont
       une zone de texte) et se terminerait par un grand vide. */
    align-items: start;
  }
  .formulaire--large .formulaire__groupe { margin-bottom: 0; }

  /* Une colonne étant deux fois moins large, un champ par ligne par défaut… */
  .formulaire--large .formulaire__grille { grid-template-columns: 1fr; }
  .formulaire--large .formulaire__grille .champ--pleine-largeur { grid-column: auto; }

  /* …sauf dans « Votre besoin », où les champs courts vont deux par ligne :
     poste / lieu, puis date / durée. La description reprend toute la largeur. */
  .formulaire--large .formulaire__grille--paires { grid-template-columns: 1fr 1fr; }
  .formulaire--large .formulaire__grille--paires .champ--pleine-largeur { grid-column: 1 / -1; }
  /* Consentement, mention RGPD et bouton sous les deux colonnes */
  .formulaire--large .formulaire__pied { grid-column: 1 / -1; }
  .formulaire--large .formulaire__envoi { display: flex; justify-content: center; }
}

.formulaire__pied { margin-top: var(--espace-s); }

.formulaire__groupe {
  margin-bottom: var(--espace-m);
  padding: var(--espace-m);
  background-color: var(--blanc);
  border: 1px solid var(--gris-bordure);
  border-radius: var(--rayon-m);
}

/* « Votre besoin » / « Vos coordonnées » : titres de groupe en plus grosse police */
.formulaire__legende {
  padding: 0;
  margin-bottom: var(--espace-s);
  color: var(--bleu-marine);
  font-family: var(--police-titre);
  font-size: var(--taille-h3);
  font-weight: 600;
}

.formulaire__grille {
  display: grid;
  gap: var(--espace-s);
  grid-template-columns: 1fr;
}
@media (min-width: 40em) {
  .formulaire__grille { grid-template-columns: repeat(2, 1fr); }
  .champ--pleine-largeur { grid-column: 1 / -1; }
}

.champ {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3xs);
}

.champ__label {
  font-size: var(--taille-s);
  font-weight: 700;
  color: var(--noir);
}

/* Astérisque des champs obligatoires, doublée d'un texte pour les lecteurs d'écran */
.champ__obligatoire {
  color: var(--rose-sombre);
  font-weight: 700;
}

.champ__aide {
  color: var(--gris-texte);
  font-size: var(--taille-xs);
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--espace-2xs) var(--espace-xs);
  background-color: var(--blanc);
  border: 1px solid var(--gris-bordure);
  border-radius: var(--rayon-s);
  color: var(--noir);
  font-family: inherit;
  font-size: var(--taille-m);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea {
  min-height: 8rem;
  resize: vertical;
}
.champ input:hover,
.champ select:hover,
.champ textarea:hover { border-color: var(--bleu-marine-clair); }

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--bleu-marine);
  box-shadow: 0 0 0 3px rgba(13, 13, 67, 0.15);
}

/* Retour visuel de validation natif, uniquement après saisie */
.champ input:user-invalid,
.champ select:user-invalid,
.champ textarea:user-invalid {
  border-color: #b3261e;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.15);
}

.champ--case {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--espace-2xs);
}
.champ--case input {
  width: 1.25rem;
  min-height: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
  accent-color: var(--bleu-marine);
}
.champ--case label {
  font-size: var(--taille-s);
  font-weight: 400;
}

.formulaire__rgpd {
  margin-block: var(--espace-s);
  color: var(--gris-texte);
  font-size: var(--taille-xs);
}

.formulaire__envoi { margin-top: var(--espace-m); }

/* ==========================================================================
   13. PIED DE PAGE
   ========================================================================== */
.pied {
  background-color: var(--bleu-marine-sombre);
  color: rgba(255, 255, 255, 0.82);
  padding-block: var(--espace-xl) var(--espace-m);
  font-size: var(--taille-s);
}

.pied a {
  color: var(--blanc);
  text-decoration: none;
}
.pied a:hover { color: var(--blanc); text-decoration: underline; }

.pied__grille {
  display: grid;
  gap: var(--espace-l);
  grid-template-columns: 1fr;
  margin-bottom: var(--espace-l);
}
@media (min-width: 40em) { .pied__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .pied__grille { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* Petites capitales espacées : même logique de casse que les surtitres,
   pour distinguer les intitulés du pied des liens qu'ils coiffent. */
.pied__titre {
  margin-bottom: var(--espace-2xs);
  color: var(--blanc);
  font-family: var(--police-titre);
  font-size: var(--taille-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pied__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pied__liste li { margin-bottom: var(--espace-3xs); }

.pied__logo img {
  width: auto;
  height: 4.5rem;
  margin-bottom: var(--espace-2xs);
}

/* Réseaux sociaux */
.reseaux {
  display: flex;
  gap: var(--espace-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.reseaux li { margin-bottom: 0; }
.reseaux a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--rayon-plein);
  transition: background-color var(--transition);
}
.reseaux a:hover { background-color: var(--rose-sombre); }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2xs) var(--espace-m);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--espace-m);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: var(--taille-xs);
}

.pied__bas-liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2xs) var(--espace-s);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pied__bas-liens li { margin-bottom: 0; }

/* ==========================================================================
   14. PAGES INTERNES ET CONTENU LÉGAL
   ========================================================================== */

/* Bandeau de titre des pages internes */
.banniere {
  background-color: var(--bleu-marine);
  color: var(--blanc);
  padding-block: var(--espace-l);
}
@media (min-width: 48em) { .banniere { padding-block: var(--espace-xl); } }
.banniere h1 { color: var(--blanc); margin-bottom: var(--espace-2xs); }
.banniere p {
  max-width: var(--largeur-texte);
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--taille-l);
}

/* Fil d'Ariane */
.fil-ariane {
  padding-block: var(--espace-2xs);
  background-color: var(--gris-clair);
  font-size: var(--taille-xs);
}
.fil-ariane ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fil-ariane li { margin-bottom: 0; }
.fil-ariane li + li::before {
  content: "›";
  margin-right: var(--espace-3xs);
  color: var(--gris-texte);
}
.fil-ariane a { color: var(--gris-texte); }
.fil-ariane [aria-current="page"] { color: var(--noir); font-weight: 700; }

/* Colonne de texte des pages légales */
.contenu-legal {
  max-width: none;
}
.contenu-legal h2 {
  margin-top: var(--espace-l);
  padding-top: var(--espace-s);
  border-top: 1px solid var(--gris-bordure);
  font-size: var(--taille-h3);
}
.contenu-legal h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.contenu-legal h3 {
  margin-top: var(--espace-m);
  font-size: var(--taille-l);
}
.contenu-legal dl { margin: 0 0 var(--espace-s); }
.contenu-legal dt { font-weight: 700; margin-top: var(--espace-2xs); }
.contenu-legal dd { margin: 0 0 var(--espace-3xs); }

/* Page 404 */
.page-erreur {
  padding-block: var(--espace-2xl);
  text-align: center;
}
.page-erreur .groupe-boutons { justify-content: center; }

/* ==========================================================================
   15. MARQUEURS [À COMPLÉTER]
   Volontairement visibles : ils signalent au client ce qui manque encore.
   À supprimer une fois tous les contenus livrés.
   ========================================================================== */
.a-completer {
  display: inline-block;
  padding: 0.1em 0.5em;
  background-color: #fff4d6;
  border: 1px dashed #a86a00;
  border-radius: var(--rayon-s);
  color: #6b4400;
  font-size: 0.9em;
  font-weight: 700;
  font-style: normal;
}

/* Bloc entier en attente de contenu (visuel, paragraphe, liste) */
.bloc-a-completer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espace-m);
  background-color: #fffaf0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(168, 106, 0, 0.06) 0 10px,
    transparent 10px 20px
  );
  border: 2px dashed #d19a3a;
  border-radius: var(--rayon-m);
  color: #6b4400;
  font-size: var(--taille-s);
  font-weight: 700;
  text-align: center;
}

/* Emplacement d'image manquante : réserve le ratio pour éviter tout décalage */
.image-a-completer {
  aspect-ratio: 4 / 3;
  width: 100%;
}
.image-a-completer--large { aspect-ratio: 16 / 9; }

/* Sur fond sombre, le marqueur reste lisible */
.section--marine .bloc-a-completer,
.hero .bloc-a-completer,
.banniere .a-completer {
  background-color: rgba(255, 244, 214, 0.95);
}

/* ==========================================================================
   16. UTILITAIRES D'ESPACEMENT
   Évitent tout attribut style= en ligne dans le HTML.
   ========================================================================== */
.marge-haut-s { margin-top: var(--espace-s); }
.marge-haut-m { margin-top: var(--espace-m); }
.marge-haut-l { margin-top: var(--espace-l); }

/* ==========================================================================
   17. APPARITION AU DÉFILEMENT
   L'état masqué est posé par le JavaScript, jamais par cette feuille : sans
   JS, ou si IntersectionObserver manque, le contenu reste simplement visible.
   Le décalage --anim-retard échelonne les éléments d'un même groupe.
   ========================================================================== */
.anim-apparition {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 520ms ease var(--anim-retard, 0ms),
    transform 520ms cubic-bezier(0.2, 0.7, 0.3, 1) var(--anim-retard, 0ms);
}
.anim-apparition.est-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   18. VISUELS D'ILLUSTRATION
   Photos posées dans le flux, à côté d'un bloc de texte (espace candidat).
   ========================================================================== */
.visuel-illustration {
  width: 100%;
  height: auto;
  border-radius: var(--rayon-m);
  box-shadow: var(--ombre-m);
}

/* ==========================================================================
   19. MICRO-INTERACTIONS
   Quelques mouvements courts, uniquement sur transform et opacity — les deux
   seules propriétés que le navigateur anime sans recalculer la mise en page.
   Toutes sont neutralisées par la préférence système « animations réduites »,
   via la règle globale du chapitre 2.
   ========================================================================== */

/* L'en-tête se détache du contenu dès que la page défile */
.en-tete {
  transition: box-shadow var(--transition);
}
.en-tete--defile {
  box-shadow: 0 6px 24px rgba(8, 8, 44, 0.45);
}

/* Soulignement des liens de navigation, tracé de la gauche vers la droite.
   Uniquement en navigation horizontale : dans le menu déroulant, le survol
   est déjà signalé par un fond. */
@media (min-width: 64em) {
  .nav__lien {
    position: relative;
  }
  .nav__lien::after {
    content: "";
    position: absolute;
    left: var(--espace-3xs);
    right: var(--espace-3xs);
    bottom: 2px;
    height: 2px;
    border-radius: var(--rayon-plein);
    background-color: var(--rose);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 220ms ease;
  }
  .nav__lien:hover::after,
  .nav__lien:focus-visible::after {
    transform: scaleX(1);
  }
}

/* Le filet dégradé se trace en même temps que son titre apparaît */
.anim-apparition .filet-marque {
  width: 0;
  transition: width 620ms cubic-bezier(0.2, 0.7, 0.3, 1)
              calc(var(--anim-retard, 0ms) + 200ms);
}
.anim-apparition.est-visible .filet-marque {
  width: 64px;
}

/* Le pictogramme des blocs d'orientation se redresse au survol de sa carte */
.carte-orientation__pastille {
  transition: transform var(--transition);
}
.carte-orientation:hover .carte-orientation__pastille {
  transform: rotate(-6deg) scale(1.06);
}

/* Les pastilles de liaison des étapes respirent au survol de leur carte */
@media (min-width: 64em) {
  .etapes li:not(:first-child) .etape::before {
    transition: transform var(--transition), box-shadow var(--transition);
  }
  .etape:hover::before {
    transform: translate(calc(-50% - var(--espace-xs) / 2), -50%) scale(1.15);
    box-shadow: 0 4px 14px rgba(13, 13, 67, 0.4);
  }
}

/* Le visuel d'illustration se soulève très légèrement au survol */
.visuel-illustration {
  transition: transform var(--transition), box-shadow var(--transition);
}
.visuel-illustration:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-l);
}

/* ==========================================================================
   20. BLOC CONTACT
   Le siège social et le formulaire se répondent sur une même ligne à partir
   de 64em : la colonne de gauche est fixe, le formulaire prend le reste.
   En dessous, ils s'empilent.
   ========================================================================== */
.contact-duo {
  display: grid;
  gap: var(--espace-l);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 64em) {
  .contact-duo {
    grid-template-columns: 22rem 1fr;
    gap: var(--espace-xl);
  }
}

/* Le formulaire est centré et borné quand il est seul sur sa section ;
   ici il doit remplir sa colonne. */
.contact-duo .formulaire {
  max-width: none;
  margin-inline: 0;
}

/* ==========================================================================
   21. FORMULAIRES — ENVOI
   ========================================================================== */

/* Piège à robots. Masqué à tous, lecteurs d'écran compris : le champ porte
   aussi aria-hidden et tabindex="-1" dans le HTML, de sorte qu'aucun humain
   ne puisse le remplir par mégarde. */
.piege-robots {
  display: none;
}

/* Message d'erreur affiché au retour du traitement serveur */
.alerte {
  display: flex;
  gap: var(--espace-2xs);
  margin-bottom: var(--espace-m);
  padding: var(--espace-s) var(--espace-m);
  background-color: #fdeceb;
  border: 1px solid #b3261e;
  border-left-width: 4px;
  border-radius: var(--rayon-m);
  color: #7a1911;
  font-size: var(--taille-s);
}
.alerte strong { color: inherit; }