/* ==========================================================================
   Paris-est systema — feuille de style unique
   --------------------------------------------------------------------------
   Parti pris validé le 2026-09-07 :
   le système visuel de systemamontreuil.fr, repris tel quel — Open Sans en
   famille unique auto-hébergée, grille 1200 px, colonne de lecture à 68
   caractères, bandeau photographique pleine hauteur, pied de page noir à
   pictogrammes — avec un seul écart : la couleur.

   L'or de Systema Montreuil est clair : 2,03:1 sur blanc, 9,28:1 sur le noir.
   D'où sa règle là-bas, où il ne porte jamais de texte sur fond clair.
   Le bordeaux est sombre et fait l'inverse : 10,59:1 sur blanc, 1,78 sur le
   noir. Il ne peut donc pas prendre la place de l'or, et le système se
   retourne.

   RUPTURE VOLONTAIRE, et règle à ne pas défaire : l'accent existe en DEUX
   TONS, chacun dans son régime de fond.
     — bordeaux #7d1128 dès qu'il porte du texte sur fond clair : liens du
       corps, surtitres, boutons en fond, filets des en-têtes clairs ;
     — rosé #e8909f dès qu'il se pose sur du sombre : liens et titres du pied,
       filet sous les titres de bandeau, boutons du pied, contours de focus
       sur fond noir.
   Un bordeaux sur noir (1,78) ou un rosé sur blanc (2,35) sont des fautes,
   pas des variantes. Seule exception, et c'est une exception de fond et non
   de texte : `mark` emploie le rosé comme couleur de FOND, le noir posé
   dessus donnant 8,02:1.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Polices
   Police variable : un seul fichier par style couvre les graisses 300 à 800.
   Deux sous-ensembles, latin et latin-ext, suffisants pour le français.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/open-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/open-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/open-sans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/open-sans-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Variables
   Les contrastes indiqués sont mesurés sur le fond nommé, seuil WCAG AA
   de 4,5:1 pour du texte courant.
   -------------------------------------------------------------------------- */

:root {
  /* Couleurs */
  --noir: #111;              /* 18,88:1 sur blanc */
  --noir-profond: #000;
  --gris-texte: #333;        /* 12,63:1 sur blanc */
  --gris-mention: #767676;   /*  4,54:1 sur blanc */
  --gris-fond: #f5f5f5;
  --gris-filet: #e2e2e2;
  --blanc: #fff;
  /* L'accent existe en deux tons, chacun dans son régime de fond. Les
     échanger est une faute : bordeaux sur noir donne 1,78 et rosé sur blanc
     2,35, tous deux sous le seuil WCAG AA. */
  --bordeaux: #7d1128;       /* 10,59:1 sur blanc — porte le texte sur fond clair */
  --rose: #e8909f;           /*  8,02:1 sur le noir — porte le texte sur fond sombre */

  /* Grille */
  --largeur-page: 1200px;
  --largeur-lecture: 68ch;
  --gouttiere: 2rem;
  --marge-laterale: clamp(1.25rem, 4vw, 2.5rem);

  /* Rythme vertical */
  --section-y: clamp(3.5rem, 8vw, 6rem);

  /* Typographie */
  --corps: 'Open Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   3. Remise à zéro minimale
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--corps);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--noir);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}

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

hr {
  border: 0;
  border-top: 1px solid var(--gris-filet);
  margin: 2.5rem 0;
}

/* --------------------------------------------------------------------------
   4. Titres et texte
   La hiérarchie ne repose pas sur un contraste entre deux familles mais sur
   la graisse, la casse et la taille — c'est la condition posée à la levée du
   pattern 4.4 du référentiel anti-générique.
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  margin: 0 0 0.6em;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
}

h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.125rem);
  font-weight: 700;
  margin-top: 2.5em;
}

h2:first-child {
  margin-top: 0;
}

h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 700;
  margin-top: 2em;
}

h4 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-top: 1.8em;
}

p {
  margin: 0 0 1.35em;
}

strong {
  font-weight: 700;
}

blockquote {
  margin: 2rem 0;
  padding: 0 0 0 1.5rem;
  border-left: 3px solid var(--bordeaux);
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--gris-texte);
}

blockquote p:last-child {
  margin-bottom: 0;
}

ul {
  margin: 0 0 1.35em;
  padding-left: 1.25rem;
}

li {
  margin-bottom: 0.4em;
}

/* Surtitre de section : petit corps, capitales, interlettrage ouvert.
   Le bordeaux est employé ici parce que ce texte est sur fond clair. */
.surtitre {
  display: block;
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bordeaux);
}

.mention {
  color: var(--gris-mention);
  font-size: 0.9375rem;
}

/* Chapô : paragraphe mis en exergue. Corps plus grand, graisse allégée, et un
   filet doré au-dessus qui reprend celui posé sous les titres de page. Pas de
   bordure latérale, pattern 7.7 du référentiel anti-générique. */
.chapo {
  margin: 2.75rem 0;
  font-size: clamp(1.1875rem, 2.1vw, 1.4375rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--noir);
}

.chapo::before {
  content: '';
  display: block;
  width: 3.5rem;
  height: 4px;
  margin-bottom: 1.1rem;
  background: var(--bordeaux);
}

/* Champs restant à renseigner. Le rosé sert ici de FOND et non de texte :
   le noir posé dessus donne 8,02:1, et le repère est impossible à manquer. */
mark {
  padding: 0.1em 0.4em;
  background: var(--rose);
  color: var(--noir);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. Liens
   Sur fond clair, le bordeaux porte le texte lui-même — 10,59:1 — ce que l'or
   de Systema Montreuil ne permettait pas. Le soulignement est conservé : la
   couleur ne doit jamais véhiculer seule l'information (WCAG 1.4.1).
   -------------------------------------------------------------------------- */

a {
  color: var(--bordeaux);
  text-decoration: none;
  border-bottom: 2px solid rgba(125, 17, 40, 0.45);
  transition: color 0.15s ease, border-color 0.15s ease;
}

a:hover {
  color: var(--noir);
  border-bottom-color: var(--noir);
}

:focus-visible {
  outline: 2px solid var(--bordeaux);
  outline-offset: 3px;
}

/* Sur fond sombre, c'est le rosé qui porte le texte : 8,02:1. Le bordeaux y
   serait illisible. */
.bandeau a,
.entete-page--bandeau a,
.section--sombre a,
.site-pied a {
  color: var(--rose);
  border-bottom-color: rgba(232, 144, 159, 0.45);
}

.bandeau a:hover,
.entete-page--bandeau a:hover,
.section--sombre a:hover,
.site-pied a:hover {
  color: var(--blanc);
  border-bottom-color: var(--blanc);
}

.bandeau :focus-visible,
.entete-page--bandeau :focus-visible,
.section--sombre :focus-visible,
.site-pied :focus-visible {
  outline-color: var(--rose);
}

/* L'en-tête est sur fond clair : son contour de focus suit le régime clair.
   Sur Systema Montreuil il était groupé avec les fonds sombres, ce qui lui
   donnait un contour à 2,03:1. */
.site-entete :focus-visible {
  outline-color: var(--bordeaux);
}

/* Lien d'évitement, révélé au focus clavier. */
.lien-evitement {
  position: absolute;
  top: -60px;
  left: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--noir);
  color: var(--rose);
  border: 0;
  font-weight: 600;
}

.lien-evitement:focus {
  top: 0;
}

/* --------------------------------------------------------------------------
   6. Conteneurs
   -------------------------------------------------------------------------- */

.contenant {
  width: 100%;
  max-width: var(--largeur-page);
  margin: 0 auto;
  padding: 0 var(--marge-laterale);
}

.section {
  padding: var(--section-y) 0;
}

.section--gris {
  background: var(--gris-fond);
}

.section--sombre {
  background: var(--noir);
  color: var(--blanc);
}

.section--sombre .surtitre {
  color: var(--rose);
}

.section--sombre .mention {
  color: #bdbdbd;
}

/* --------------------------------------------------------------------------
   7. En-tête et navigation
   -------------------------------------------------------------------------- */

.site-entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blanc);
  border-bottom: 1px solid var(--gris-filet);
}

.site-entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.5rem;
}

.marque {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0;
  white-space: nowrap;
}

.marque:hover {
  color: var(--bordeaux);
}

.nav-principale ul {
  display: flex;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-principale a {
  display: inline-block;
  padding: 0.35rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  border-bottom: 2px solid transparent;
}

.nav-principale a:hover {
  color: var(--noir);
  border-bottom-color: var(--bordeaux);
}

/* Page courante : soulignement bordeaux permanent, doublé d'un aria-current
   dans le HTML pour que l'information ne soit pas seulement visuelle. */
.nav-principale a[aria-current='page'] {
  border-bottom-color: var(--bordeaux);
}

.nav-bascule {
  display: none;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--noir);
  background: transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--noir);
  cursor: pointer;
}

.nav-bascule:hover {
  background: var(--noir);
  color: var(--rose);
}

.nav-bascule__traits {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
}

/* --------------------------------------------------------------------------
   8. Bandeau photographique
   L'image de fond est décorative : elle est appelée en CSS, ce qui la
   dispense d'un texte alternatif.
   -------------------------------------------------------------------------- */

.bandeau,
.entete-page--bandeau {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(22rem, 62vh, 34rem);
  padding: var(--section-y) 0 clamp(2.5rem, 6vw, 4rem);
  background-color: var(--noir);
  /* Le voile est faible en haut, pour laisser voir la photo, et fort en bas,
     là où le titre et l'accroche se posent. */
  background-image: linear-gradient(
      rgba(17, 17, 17, 0.20) 0%,
      rgba(17, 17, 17, 0.45) 45%,
      rgba(17, 17, 17, 0.82) 100%),
    url('../images/parisest-systema-banniere.webp');
  background-size: cover;
  /* La banniere est deja recadree au format bandeau : elle se centre. Sur
     Systema Montreuil, la photo etait pleine et demandait un decalage. */
  background-position: center;
  color: var(--blanc);
}

.bandeau h1 {
  margin-bottom: 0.4em;
  letter-spacing: 0.02em;
}

/* Filet doré sous le titre : rappel des deux barres du logo. */
.bandeau h1::after {
  content: '';
  display: block;
  width: 5rem;
  height: 4px;
  margin-top: 0.5em;
  background: var(--rose);
}

.bandeau__accroche {
  max-width: 46ch;
  margin: 0;
  /* Quatre lignes réservées, la longueur de l'accroche d'accueil, la plus
     longue du site. Une accroche plus courte n'en occupe pas moins la même
     hauteur : le titre reste ainsi au même niveau d'une page à l'autre.
     La réserve est un plancher, pas un plafond : sur un écran étroit une
     accroche qui déborde de quatre lignes remontera son titre d'autant. */
  min-height: 6em;
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  font-weight: 300;
  line-height: 1.5;
  color: #ededed;
}

/* --------------------------------------------------------------------------
   9. Titre des pages internes
   -------------------------------------------------------------------------- */

.entete-page {
  padding: clamp(2.5rem, 6vw, 4rem) 0 0;
}

.entete-page h1::after {
  content: '';
  display: block;
  width: 4rem;
  height: 4px;
  margin-top: 0.6em;
  background: var(--bordeaux);
}

/* --------------------------------------------------------------------------
   9 bis. Bandeau photographique des pages de menu
   Les six pages de menu reprennent le bandeau de l'accueil à l'identique :
   même image, même hauteur, même voile, tout étant déclaré section 8. Il n'y
   a donc pas deux jeux de valeurs à tenir en phase, et un réglage de cadrage
   vaut pour les sept pages d'un coup.
   Ne subsiste ici que ce que la section 9 ci-dessus écraserait, étant
   déclarée après la section 8.
   Les mentions légales et la page 404 gardent l'en-tête clair d'origine.
   -------------------------------------------------------------------------- */

.entete-page--bandeau {
  padding: var(--section-y) 0 clamp(2.5rem, 6vw, 4rem);
}

/* Le titre et son filet reprennent les valeurs de l'accueil. Sans cela le
   filet, plus court et posé plus bas, décalerait les titres de quelques
   pixels d'une page à l'autre — ce que la réserve de hauteur cherche
   précisément à éviter. */
.entete-page--bandeau h1 {
  margin-bottom: 0.4em;
}

.entete-page--bandeau h1::after {
  width: 5rem;
  margin-top: 0.5em;
  background: var(--rose);
}

/* --------------------------------------------------------------------------
   10. Corps de page
   -------------------------------------------------------------------------- */

.corps > :first-child {
  margin-top: 0;
}

/* Seul le texte est plafonné à 68 caractères : les images et les grilles
   reprennent toute la largeur du conteneur. */
.corps > p,
.corps > h2,
.corps > h3,
.corps > h4,
.corps > ul,
.corps > ol,
.corps > blockquote,
.corps > hr {
  max-width: var(--largeur-lecture);
}

/* Le chapô est composé plus grand : 68 caractères y feraient une ligne
   beaucoup trop longue en pixels. On le ramène à une mesure confortable. */
.corps > .chapo {
  max-width: 42rem;
}

.corps > img,
.corps > a > img {
  margin: 2.5rem 0;
  max-width: min(100%, 58rem);
}

/* Une image seule dans un lien : pas de soulignement doré sous l'image. */
.corps > a {
  display: block;
  width: fit-content;
  border-bottom: 0;
}

.corps > a:hover > img {
  opacity: 0.92;
}

/* --------------------------------------------------------------------------
   11. Tarifs
   Les listes de prix du contenu source deviennent des lignes séparées par un
   filet. Le libellé est en gras dans la source, le montant suit : on ne
   touche pas au texte, seulement à sa présentation.
   -------------------------------------------------------------------------- */

.tarifs ul {
  max-width: 34rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--gris-filet);
}

.tarifs li {
  margin: 0;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--gris-filet);
}

/* Les lignes de prix isolées, hors liste, gardent le même rythme. */
.tarifs > p {
  max-width: 34rem;
}

/* --------------------------------------------------------------------------
   12. Instructeurs
   Trois colonnes, sans carte, sans arrondi, sans ombre portée — le pattern
   6.1 du référentiel anti-générique n'est pas touché.
   -------------------------------------------------------------------------- */

.instructeurs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gouttiere);
  align-items: start;
  margin-top: 2.5rem;
}

.instructeur img {
  width: 100%;
  margin: 0 0 1.25rem;
}

.instructeur h3 {
  margin-top: 0;
  font-size: 1.25rem;
}

.instructeur p {
  font-size: 0.9375rem;
  line-height: 1.6;
}

.instructeur blockquote {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   13. Boutons
   Fond bordeaux, texte blanc : 10,59:1. L'inverse de Systema Montreuil, dont
   les boutons sont noirs à texte doré : un bouton bordeaux à texte doré
   n'aurait aucun contraste.
   -------------------------------------------------------------------------- */

.bouton {
  display: inline-block;
  padding: 0.9rem 1.75rem;
  background: var(--bordeaux);
  color: var(--blanc);
  border: 2px solid var(--bordeaux);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bouton:hover {
  background: transparent;
  color: var(--bordeaux);
  border-color: var(--bordeaux);
}

/* --------------------------------------------------------------------------
   14. Pied de page
   -------------------------------------------------------------------------- */

.site-pied {
  padding: var(--section-y) 0 2.5rem;
  background: var(--noir);
  color: #d6d6d6;
  font-size: 0.9375rem;
}

.site-pied__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--gouttiere);
}

.site-pied h2 {
  margin: 0 0 0.9rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose);
}

.site-pied p {
  margin: 0 0 0.6em;
}

.site-pied__logo {
  width: 190px;
  margin-bottom: 1rem;
  /* Le logo est noir sur fond transparent : on l'éclaircit pour le fond sombre. */
  filter: invert(1) brightness(1.6);
}

.site-pied__bas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #2c2c2c;
  font-size: 0.875rem;
  color: #9d9d9d;
}

.site-pied__bas p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   14 bis. Pictogrammes du pied de page
   SVG en ligne : aucune requête supplémentaire, aucun service tiers, et la
   couleur suit la charte par `fill`. Le pictogramme est placé hors du lien,
   de sorte que le soulignement doré — qui est une règle du parti pris — ne
   coure que sous le texte.
   -------------------------------------------------------------------------- */

.site-pied__contact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.site-pied__contact svg {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  fill: var(--rose);
}

/* --------------------------------------------------------------------------
   14 ter. Inscription à la lettre d'infos
   Brique documentée dans references/fonctionnalites/newsletter-mailchimp.md.
   Formulaire nu qui poste vers Mailchimp : rien n'est chargé depuis leurs
   serveurs, le navigateur ne les contacte qu'à la validation.
   -------------------------------------------------------------------------- */

.infolettre {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.infolettre label {
  width: 100%;
}

.infolettre input[type="email"] {
  flex: 1 1 11rem;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  font: inherit;
  color: var(--noir);
  background: #fff;
  border: 1px solid var(--rose);
  border-radius: 0;
}

.infolettre input[type="email"]:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}

/* Sur le fond noir du pied, le bouton bordeaux disparaîtrait : il y prend le
   rosé, avec un texte noir. 8,02:1 dans un sens comme dans l'autre. */
.site-pied .bouton {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  background: var(--rose);
  color: var(--noir);
  border-color: var(--rose);
}

.site-pied .bouton:hover {
  background: transparent;
  color: var(--rose);
}

/* Champ piège : hors de l'écran, mais bien présent dans le document. */
.infolettre__piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   15. Page 404
   -------------------------------------------------------------------------- */

.erreur {
  padding: clamp(4rem, 12vw, 8rem) 0;
  text-align: left;
}

.erreur__code {
  display: block;
  font-size: clamp(4rem, 14vw, 8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--bordeaux);
}

/* --------------------------------------------------------------------------
   15 bis. Formulaire de contact
   Brique documentée dans references/fonctionnalites/formulaire-contact.md.
   Le bouton reprend la classe .bouton déjà définie plus haut : pas de second
   jeu de styles de bouton.
   -------------------------------------------------------------------------- */

.formulaire {
  max-width: var(--largeur-lecture);
  margin: 2.5rem 0 0;
}

.formulaire__champ {
  margin: 0 0 1.5rem;
}

.formulaire label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
}

.formulaire input,
.formulaire textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid var(--gris-mention);
  border-radius: 0;
}

.formulaire textarea {
  resize: vertical;
}

.formulaire input:focus-visible,
.formulaire textarea:focus-visible {
  outline: 2px solid var(--bordeaux);
  outline-offset: 2px;
}

/* Champ piège : hors de l'écran, mais bien présent dans le document. */
.formulaire__piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulaire__mention {
  font-size: 0.9375rem;
  color: var(--gris-mention);
}

/* --------------------------------------------------------------------------
   16. Adaptation aux petits écrans
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .nav-bascule {
    display: inline-flex;
  }

  .nav-principale {
    display: none;
    width: 100%;
    padding-bottom: 1.25rem;
  }

  .nav-principale.est-ouvert {
    display: block;
  }

  .site-entete__barre {
    flex-wrap: wrap;
  }

  .nav-principale ul {
    flex-direction: column;
    gap: 0;
  }

  .nav-principale li {
    margin: 0;
    border-top: 1px solid var(--gris-filet);
  }

  .nav-principale a {
    display: block;
    padding: 0.85rem 0;
    font-size: 1rem;
  }

  .instructeurs {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .instructeur img {
    max-width: 320px;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 1rem;
  }

  .tarifs li {
    flex-wrap: wrap;
  }

  .tarifs li::after {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   17. Respect des préférences d'animation
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   18. Impression
   -------------------------------------------------------------------------- */

@media print {
  .site-entete,
  .site-pied,
  .lien-evitement {
    display: none;
  }

  body {
    font-size: 11pt;
    color: #000;
  }

  a {
    border: 0;
    text-decoration: underline;
  }

  /* Les fonds ne s'impriment pas : sans son image, un bandeau laisserait un
     titre blanc sur blanc. */
  .bandeau,
  .entete-page--bandeau {
    background: none;
    color: #000;
  }
}