/*
 * Gabarits de section et composants du site ARMUNIA : le contenu propre à chaque type
 * de section (héros, cartes, tarifs, formulaire de contact...) et les éléments
 * réutilisables du handoff §8 (boutons, cartes, champs de formulaire).
 *
 * [Tâche 7, tour de correction 1] Scindée depuis l'ancien fichier unique site.css
 * (tâche 5) avec base.css (variables, polices, ossature), sœur de celui-ci — voir son
 * en-tête pour la raison du découpage. Les couleurs (--olive, --terre-cuite...) sont
 * définies dans base.css et s'appliquent ici via :root, qui vaut pour tout le document
 * une fois les deux feuilles chargées, quel que soit leur ordre.
 *
 * Structure du fichier, dans l'ordre :
 *   1. Gabarits de section, communs à toutes les pages
 *   2. Composants du handoff §8
 */

/* ---------------------------------------------------------------------------------
   1. Gabarits de section, communs à toutes les pages (handoff §6, en-tête) : un
   conteneur centré à 1120 px (820 px pour les pages légales), une alternance de fond
   blanc / crème et rien d'autre. Le contenu propre à chaque type de section (héros,
   cartes, tarifs...) est ajouté par le module de gabarits, pas ici.
   --------------------------------------------------------------------------------- */

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

.section-creme {
  background: var(--creme);
}

/* [Tâche 8] Le générateur pose systématiquement .section-creme ou .section-blanc sur
   chaque section — jamais .section seule — pour que la position réelle dans la page
   (contenu-initial/pages.php, champ 'fond') tranche le fond, pas la valeur par défaut du
   gabarit du type de section. Même fond que .section : classe distincte pour que le nom
   dise ce qu'il fait, sans dupliquer la couleur ailleurs. */
.section-blanc {
  background: var(--blanc);
}

.conteneur {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(44px, 6vw, 80px) clamp(20px, 5vw, 40px);
}

.conteneur-etroit {
  max-width: 820px;
}

/* --- Héros (tâche 6, handoff §6.1) : grille deux colonnes, une seule colonne si la
   photo n'a pas encore été déposée. Le padding du .conteneur suit la valeur des pages
   intérieures (même simplification que .conteneur lui-même, tâche 5). Fond crème :
   .section-creme (tâche 5) — pas de classe .fond-creme séparée, qui ferait doublon et
   dépendrait de l'ordre des règles plutôt que de la spécificité (tour de correction 1).
   --------------------------------------------------------------------------------- */
.grille-hero {
  display: grid;
  /* [Tour de correction 3, tâche 8] minmax(min(300px, 100%), 1fr), pas minmax(300px,
     1fr) : un plancher de piste fixe à 300px impose une largeur de grille supérieure à
     la fenêtre sous 300px (320px de marge quasi nulle une fois le padding du conteneur
     déduit) — c'est la grille qui doit s'incliner devant la fenêtre, jamais l'inverse.
     min(300px, 100%) laisse le plancher descendre sous la largeur disponible plutôt que
     de forcer un débordement horizontal. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

/* [Tour de correction 3, tâche 8] La minmax() ci-dessus ne suffit pas seule : la piste
   « une-colonne » (juste en dessous) vaut 1fr sans minmax, et un item de grille a une
   largeur minimale automatique par défaut (« auto », qui vaut min-content) — c'est CE
   plancher-là, pas celui de la piste, qui forçait .colonne-texte à 390px sous 320/375px
   de fenêtre (mesuré : le mot majuscule « COMPORTEMENTALISTE », interlettré, ne casse
   jamais tant que la piste peut grandir pour l'accueillir). min-width: 0 retire ce
   plancher, laissant enfin overflow-wrap (.titre-hero) et le retour à la ligne normal
   des <p> décider de la largeur. */
.colonne-texte,
.colonne-image {
  min-width: 0;
}

.grille-hero.une-colonne {
  grid-template-columns: 1fr;
}

.surtitre {
  font: 700 13px/1.4 Lato, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 14px;
}

/* Taille des pages intérieures (46 px) par défaut ; .titre-hero-grand (posée en plus,
   tour de correction 1) porte le h1 à 52 px, celui de l'accueil dans la maquette.

   Plancher abaissé de 28 à 20 px pour que le mot le plus long du site,
   « COMPORTEMENTALISTE » (18 signes, h1 de l'accueil), tienne ENTIER à 320 px de
   large — 260 px pour 280 disponibles. Mesuré, pas estimé : à 30 px ce mot occupait
   390 px et se coupait jusqu'à environ 430 px de fenêtre. C'est le prix de la règle
   « jamais de césure » : un titre plus petit sur les petits téléphones plutôt qu'un
   mot fendu en deux. La pente de 4,2vw est inchangée — dès 480 px de fenêtre elle
   reprend la main et la taille redevient celle d'origine. */
.titre-hero {
  font: 600 clamp(20px, 4.2vw, 46px)/1.18 'Cormorant Garamond', serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 22px;
  /* [Tour de correction 3, tâche 8] Un mot majuscule interlettré (« COMPORTEMENTALISTE »,
     accueil) sans espace de coupure force sinon la largeur minimale de contenu de la
     grille au-delà de la fenêtre à 320/375px, débordement mesuré au contrôle mobile
     malgré grid-template-columns: 1fr — le point de coupure autorisé fait céder le mot
     plutôt que la page. */
  overflow-wrap: break-word;
  /* Aucune césure, jamais (règle posée le 8 août 2026). hyphens: auto avait été mis
     pour rendre « COMPORTEMEN-/TALISTE » lisible plutôt que « COMPORTEMENT/ALISTE ».
     La bonne réponse n'était ni l'un ni l'autre : c'est que le mot ne se coupe pas.
     Le plancher de taille des titres (voir .titre-hero) est calculé pour que le mot
     le plus long du site tienne entier à 320 px — overflow-wrap ne reste qu'un filet
     de sécurité si un titre plus long est saisi un jour, et il coupera alors sans
     insérer de trait d'union. */
  -webkit-hyphens: manual;
  hyphens: manual;
}

.titre-hero-grand {
  font-size: clamp(20px, 4.6vw, 52px);
}

.chapeau {
  font: 400 19px/1.6 Lato, sans-serif;
  margin: 0 0 12px;
  max-width: 52ch;
}

/* Une bordure de 30 px sépare le texte du bouton d'appel quand il suit — annulée par
   :last-child quand ce paragraphe est le dernier élément (pages sans bouton). */
.texte-courant {
  font: 400 17px/1.6 Lato, sans-serif;
  margin: 0 0 30px;
  max-width: 52ch;
}

.chapeau:last-child,
.texte-courant:last-child {
  margin-bottom: 0;
}

.mention-bouton {
  font: 400 16px/1.5 Lato, sans-serif;
  margin: 16px 0 0;
}

/* --- Titre de section générique (tâche 6) : texte, cartes, listes filetées, étapes.
   La maquette fait varier son margin-bottom de 20 à 34 px selon la section ; la valeur
   médiane réelle des sept occurrences (20 px, pas 24 — corrigé au tour de correction 1)
   est reprise ici pour la même raison que .titre-hero ci-dessus. --- */
.titre-section {
  font: 600 clamp(25px, 3.4vw, 34px)/1.22 'Cormorant Garamond', serif;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 20px;
}

.texte-paragraphe {
  font: 400 17px/1.65 Lato, sans-serif;
  margin: 0 0 12px;
  max-width: 62ch;
}

.texte-paragraphe:last-child {
  margin-bottom: 0;
}

/* Disposition « colonnes-filetees » du type texte (tour de correction 1, handoff
   « Ma façon de travailler ») : chaque paragraphe devient une colonne coiffée d'un
   filet olive de 2 px, distincte de .texte-paragraphe (qui n'a pas de filet). */
.grille-texte-filete {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin-top: 8px;
}

.texte-filete {
  font: 400 17px/1.7 Lato, sans-serif;
  margin: 0;
  border-top: 2px solid var(--olive);
  padding-top: 18px;
}

/* Photo d'une section texte (« Communes couvertes ») : pas de cadre décoratif propre,
   contrairement à .carte-photo — juste un peu d'air au-dessus. */
.texte-image {
  margin-top: 20px;
}

/* --- Cartes (tâche 6, handoff §8.4) : la rangée à trois cartes de l'accueil. Les deux
   classes .carte, .carte-media, .carte-photo, .carte-corps existent déjà (tâche 5) pour
   la variante à photo ; la variante olive (« Tarifs et zone ») est posée ici. --- */
.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.carte-titre {
  font: 600 24px/1.2 'Cormorant Garamond', serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0;
}

.carte-texte {
  font: 400 16px/1.6 Lato, sans-serif;
  margin: 0;
  flex: 1;
}

/* Le lien de la carte à photo doit garder la largeur de son texte, pas s'étirer sur
   toute la largeur de la carte (comportement par défaut d'un enfant flex en colonne). */
.carte-media .carte-corps .lien-souligne {
  align-self: flex-start;
}

/* Aplat olive : aucun texte ni lien terre cuite ne doit y figurer, contraste 1,86:1
   interdit par la charte (voir le test dédié). Le survol du lien va au crème.
   [Tâche 8, contrôle visuel] Sélecteur composé .carte.carte-olive, et non .carte-olive
   seul : la carte porte toujours les deux classes ensemble (armunia_carte_olive(),
   sections-a.php) et .carte (8.4, plus bas dans ce fichier) pose son propre fond blanc
   et son propre filet à la MÊME spécificité — sans le composé, l'ordre du fichier
   tranchait, et .carte gagnait : la carte « Tarifs et zone » de l'accueil se rendait sur
   fond blanc, illisible, plutôt que sur l'aplat olive de la maquette. */
.carte.carte-olive {
  background: var(--olive);
  border: 1px solid var(--olive);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
}

.carte-olive-corps {
  padding: clamp(26px, 3vw, 34px) 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  justify-content: center;
}

.carte-olive-titre {
  font: 600 24px/1.2 'Cormorant Garamond', serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blanc);
  margin: 0;
}

.carte-olive-texte {
  font: 400 16px/1.6 Lato, sans-serif;
  color: var(--blanc);
  margin: 0;
  flex: 1;
}

.carte-olive-lien {
  font: 700 14px/1.4 Lato, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blanc);
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, .5);
  align-self: flex-start;
  padding-bottom: 4px;
}

.carte-olive-lien:hover {
  color: var(--creme);
  border-bottom-color: var(--creme);
}

/* --- Liste filetée (tâche 6, handoff §6.2) : chaque situation est un paragraphe
   coiffé d'un filet, jamais une puce. Grille à 2 px d'écart, comme la maquette. --- */
.grille-filets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2px;
}

.filet {
  font: 400 17px/1.6 Lato, sans-serif;
  margin: 0;
  padding: 18px 20px 18px 0;
  border-top: 1px solid var(--filet-clair);
}

/* --- Étapes (tâche 6, handoff §6.3) : numéro engendré automatiquement, en Cormorant
   Garamond 500 40 px terre cuite — admise ici seulement parce que la carte est sur
   fond blanc, jamais sur l'aplat olive. --- */
.grille-etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
}

/* Cinq étapes tombaient en 4 + 1 : quatre cartes alignées et une cinquième seule au
   rang suivant, qui se lisait comme un oubli. Le plancher passe à 300 px pour ces
   grilles-là seulement, ce qui donne 3 + 2 sur une largeur de contenu de 1040 px.
   min(300px, 100%) plutôt que 300px sec : sous 300 px de large, la colonne ne peut
   pas rester à 300 et la grille retomberait en débordement plutôt qu'en une colonne.
   Aucune requête média — une seule est autorisée sur les deux feuilles (celle de la
   navigation à 899 px), et le compte est vérifié par gabarits_test.php. */
.grille-etapes:has(> :nth-child(5):last-child) {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.etape {
  background: var(--blanc);
  border: 1px solid var(--filet-clair);
  border-radius: 3px;
  padding: 24px;
}

.etape-numero {
  font: 500 40px/1 'Cormorant Garamond', serif;
  color: var(--terre-cuite);
  margin: 0 0 14px;
}

.etape-titre {
  font: 600 20px/1.3 'Cormorant Garamond', serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 10px;
}

.etape-texte {
  font: 400 16px/1.6 Lato, sans-serif;
  margin: 0;
}

/* --- Preuves (tâche 7, handoff : « Formation et assurance », « Déplacements /
   Paiement / Annulation », « Mon approche »). Réutilise la carte de base (.carte,
   tâche 5) : même fond blanc, même filet, même rayon — la carte de preuve n'a ni photo
   ni lien, seuls son titre et son texte ont leurs propres classes. Les trois occurrences
   de la maquette sont toutes sur fond crème (contrairement à .grille-cartes, sur blanc). --- */
.preuves-chapeau {
  font: 400 17px/1.65 Lato, sans-serif;
  margin: 0 0 30px;
  max-width: 62ch;
}

.grille-preuves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

/* Quatre blocs tombaient en 3 + 1 (« Qui suis-je ») : le quatrième restait seul et
   étiré sur toute la largeur. 2 + 2 se lit comme un ensemble. Ciblé sur le cas à
   quatre : les grilles à trois blocs (page Tarifs) gardent leur rang unique, qui est
   la bonne réponse pour elles. */
.grille-preuves:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}

.preuve-titre {
  font: 600 20px/1.3 'Cormorant Garamond', serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 10px;
}

.preuve-texte {
  font: 400 16px/1.6 Lato, sans-serif;
  margin: 0;
}

/* --- Colonnes (tâche 7, handoff page Qui suis-je : « Mon parcours », « Ma formation »).
   Pas de carte, pas de filet : juste deux colonnes de texte côte à côte, fond blanc. --- */
.grille-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(28px, 4vw, 56px);
}

.colonne-titre {
  font: 600 clamp(23px, 3vw, 30px)/1.25 'Cormorant Garamond', serif;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 20px;
}

.colonne-paragraphe {
  font: 400 17px/1.7 Lato, sans-serif;
  margin: 0 0 16px;
}

.colonne-paragraphe:last-child {
  margin-bottom: 0;
}

/* --- Tarifs (tâche 7, handoff §6.4) : une grille, jamais un <table> — c'est ce qui
   garantit la lisibilité sous 360 px. Filet supérieur épais sur l'ensemble, filet fin
   sous chaque ligne, prix aligné à droite et jamais coupé (white-space: nowrap). --- */
.tarif-message-masque {
  font: 400 17px/1.6 Lato, sans-serif;
  margin: 0 0 24px;
  padding: 16px 20px;
  background: var(--creme);
  border-radius: 3px;
}

.grille-tarifs {
  border-top: 2px solid var(--olive);
}

.ligne-tarif {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) auto;
  gap: 6px 24px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--filet-clair);
}

.tarif-titre {
  font: 600 21px/1.3 'Cormorant Garamond', serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 6px;
}

.tarif-texte {
  font: 400 16px/1.6 Lato, sans-serif;
  margin: 0;
  max-width: 58ch;
}

.tarif-prix {
  font: 700 18px/1.4 Lato, sans-serif;
  color: var(--olive);
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

.tarif-mention-tva {
  font: 400 15px/1.6 Lato, sans-serif;
  margin: 20px 0 0;
}

/* --- Bandeau de lancement (tâche 7, page Tarifs et zone). Fond blanc, filet complet,
   pas d'aplat. Le surtitre est en terre cuite : avec le numéro d'étape (.etape-numero),
   c'est l'un des deux seuls emplacements du site où la charte l'autorise sur fond blanc
   (contraste 4,85:1) — jamais sur olive ni crème en petit corps (voir le test dédié). --- */
.bandeau-lancement {
  border: 1px solid rgba(73, 75, 46, .3);
  border-radius: 3px;
  padding: 24px;
  background: var(--blanc);
}

.bandeau-lancement-surtitre {
  font: 700 13px/1.4 Lato, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terre-cuite);
  margin: 0 0 10px;
}

.bandeau-lancement-texte {
  font: 400 16px/1.6 Lato, sans-serif;
  margin: 0;
  max-width: 70ch;
}

/* --- Avis Google (tâche 7, accueil) : encadré tireté sur fond crème, dans une section
   blanche — jamais d'avis fictif, seulement l'annonce de l'emplacement réservé. --- */
.avis-google {
  border: 1px dashed rgba(73, 75, 46, .55);
  border-radius: 3px;
  padding: clamp(28px, 4vw, 44px);
  text-align: center;
  background: var(--creme);
}

.avis-google-surtitre {
  font: 700 13px/1.4 Lato, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 12px;
}

.avis-google-texte {
  font: 400 16px/1.6 Lato, sans-serif;
  margin: 0 auto;
  max-width: 56ch;
}

/* --- Contact (tâche 7, tour de correction 1, handoff §6.6) : une seule section,
   deux colonnes — le formulaire à gauche, les blocs de coordonnées (« Coordonnées »,
   « Me retrouver ») à droite. .grille-contact porte la grille ; ses deux colonnes sont
   .formulaire/.formulaire-titre (partie 2, Composants, plus bas dans ce fichier) et
   .blocs-contact ci-dessous. --- */
.grille-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(30px, 4vw, 56px);
}

.blocs-contact {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bloc-contact {
  background: var(--creme);
  border-radius: 3px;
  padding: 24px;
}

.bloc-contact-titre {
  font: 600 20px/1.3 'Cormorant Garamond', serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 12px;
}

.bloc-contact-ligne {
  font: 400 16px/1.7 Lato, sans-serif;
  margin: 0 0 4px;
}

.bloc-contact-ligne:last-child {
  margin-bottom: 0;
}

/* --- Appel en fin de page intérieure (tâche 7, pages Le chien / Le chat / Tarifs et
   zone / Qui suis-je) : lien souligné puis bouton terre cuite, empilés. Nommée
   .appel-page plutôt que .pied-de-page-quelque-chose pour ne jamais se confondre avec
   .pied-de-page, le grand aplat olive de l'ossature (composant distinct). --- */
.appel-page {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
}

/* --- Mentions légales / confidentialité (tâche 7). Conteneur étroit : .conteneur-etroit
   (tâche 5). --- */
.legal-titre {
  font: 600 clamp(26px, 3.6vw, 38px)/1.2 'Cormorant Garamond', serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 32px;
}

.legal-section {
  margin: 0 0 28px;
}

.legal-section:last-child {
  margin-bottom: 0;
}

.legal-sous-titre {
  font: 600 21px/1.3 'Cormorant Garamond', serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 12px;
}

.legal-paragraphe {
  font: 400 17px/1.7 Lato, sans-serif;
  margin: 0 0 8px;
}

.legal-paragraphe:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------------
   2. Composants (handoff §8)
   --------------------------------------------------------------------------------- */

/* 8.1 — bouton d'appel à l'action, terre cuite. Un seul par page. */
.bouton-terre-cuite {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--terre-cuite);
  color: var(--blanc);
  font: 700 16px/1 Lato, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 20px 32px;
  min-height: 44px;
  border-radius: 3px;
  text-decoration: none;
}

.bouton-terre-cuite:hover {
  background: var(--terre-cuite-foncee);
  color: var(--blanc);
}

/* 8.2 — bouton secondaire, olive. Formulaire uniquement. min-height:48px, pas 44 —
   c'est la valeur portée par le bouton d'envoi du formulaire dans la maquette, distincte
   de celle du bouton terre cuite malgré le résumé « mêmes règles » du handoff §8.2. */
.bouton-olive {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--olive);
  color: var(--blanc);
  font: 700 15px/1 Lato, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 18px 28px;
  min-height: 48px;
  border-radius: 3px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}

.bouton-olive:hover {
  background: var(--olive-fonce);
  color: var(--blanc);
}

/* 8.3 — lien souligné */
.lien-souligne {
  font: 700 14px/1.4 Lato, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--olive);
  text-decoration: none;
  border-bottom: 2px solid rgba(73, 75, 46, .35);
  padding-bottom: 4px;
  display: inline-block;
}

.lien-souligne:hover {
  color: var(--terre-cuite);
  border-bottom-color: var(--terre-cuite);
}

/* 8.4 — carte */
.carte {
  background: var(--blanc);
  border: 1px solid var(--filet-clair);
  border-radius: 3px;
  padding: 24px;
}

/* Variante média : photo en haut, filet tireté de séparation, contenu en propre
   padding. */
.carte-media {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.carte-media .carte-photo {
  position: relative;
  width: 100%;
  background: var(--creme);
  border-bottom: 1px dashed var(--filet-tirete-carte);
  overflow: hidden;
}

.carte-media .carte-corps {
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

/* 8.5 — encadré aplat olive. Sert à la frontière vétérinaire et à la carte « Tarifs et
   zone » de l'accueil. */
.encadre-olive {
  background: var(--olive);
  border-radius: 3px;
  padding: clamp(28px, 4vw, 44px);
  color: var(--blanc);
}

.encadre-olive-surtitre {
  font: 700 13px/1.4 Lato, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--creme);
  margin: 0 0 14px;
}

/* Titre et texte de l'encadré (tâche 7, type de section encadre-olive) : complètent
   .encadre-olive/-surtitre ci-dessus. Toujours blanc — jamais de terre cuite ici. */
.encadre-olive-titre {
  font: 600 clamp(23px, 3vw, 30px)/1.25 'Cormorant Garamond', serif;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--blanc);
  margin: 0 0 20px;
}

.encadre-olive-texte {
  font: 400 17px/1.7 Lato, sans-serif;
  color: var(--blanc);
  margin: 0 0 14px;
  max-width: 66ch;
}

.encadre-olive-texte:last-child {
  margin-bottom: 0;
}

/* 8.6 — champ de formulaire */
.champ {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.champ label {
  font: 700 13px/1.4 Lato, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--olive);
}

.champ input,
.champ select,
.champ textarea {
  border: 1px solid rgba(73, 75, 46, .4);
  border-radius: 3px;
  padding: 14px;
  min-height: 48px;
  background: var(--blanc);
  color: var(--brun);
  font-size: 16px;
}

.champ textarea {
  line-height: 1.5;
  resize: vertical;
  min-height: 120px;
}

.champ-aide {
  font: 400 15px/1.5 Lato, sans-serif;
  margin: 0;
}

/* Case de consentement : 22×22, jamais pré-cochée (contrôlé par le formulaire, pas par
   le CSS). */
.case-consentement {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-top: 4px;
}

.case-consentement input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--olive);
  flex: none;
}

.case-consentement label {
  font: 400 16px/1.5 Lato, sans-serif;
  color: inherit;
}

/* 8.7 — formulaire de contact (tâche 7). Titre de la colonne « Écrire » : même gabarit
   typographique que .colonne-titre/.encadre-olive-titre (23-30px), en olive ici. */
.formulaire-titre {
  font: 600 clamp(23px, 3vw, 30px)/1.25 'Cormorant Garamond', serif;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 20px;
}

.formulaire {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 520px;
}

/* Champ piège anti-spam : un vrai champ de saisie, jamais type="hidden" — un robot
   élémentaire ignore les champs cachés, mais remplit ceux-ci, ce qui le révèle côté
   serveur. Caché visuellement (et hors du flux de tabulation, posé par le gabarit),
   jamais par display:none, que des robots plus soigneux savent détecter et éviter. */
.champ-piege {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -9999px;
}