/*
 * NEXORIA TALENT — site vitrine.
 *
 * Même maison que la plateforme : les valeurs viennent de son index.css.
 *   ivoire   #F3F0E9  fond de page
 *   sable    #EDE7DA  sections alternées
 *   encre    #141210  texte, aplats, en-tête et pied de page
 *   encre-2  #6B655C  texte atténué                     (sur sable : 4,68:1)
 *   filet    #D8D2C6  séparateurs, 1 px
 *   laiton   #7D6036  le seul accent, rare. Le #8A6B3D du cahier des charges
 *                     donne 4,34:1 sur ivoire ; assombri d'un cran pour tenir
 *                     AA en petit corps (5,13:1 sur ivoire, 4,74:1 sur sable).
 *
 * L'angle de la maison : 32° entre la verticale et les diagonales. Il règle
 * le X du logotype, le motif du hero, le biseau du bouton (16 px × tan 32°)
 * et l'amorce des surtitres.
 *
 * Cormorant Garamond : ce qui est humain — titres, logotype, numéros.
 * Instrument Sans : le reste. Aucune ombre, aucun dégradé, aucun rayon.
 */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

/* Repli calé sur les métriques de Cormorant : le titre ne saute pas quand la police arrive. */
@font-face {
  font-family: "Cormorant Repli";
  src: local("Georgia");
  size-adjust: 86%;
  ascent-override: 107%;
  descent-override: 33%;
  line-gap-override: 0%;
}

:root {
  --ivoire: #f3f0e9;
  --sable: #ede7da;
  --encre: #141210;
  --encre-2: #6b655c;
  --filet: #d8d2c6;
  --laiton: #7d6036;
  /* Sur sable, le filet ivoire disparaît : même encre-2, diluée. Pas une couleur de plus. */
  --filet-sable: color-mix(in srgb, var(--encre-2) 38%, transparent);

  --serif: "Cormorant Garamond", "Cormorant Repli", Georgia, serif;
  --sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;

  --tan-k: 0.6249;
  --biseau: 16px;

  --gouttiere: 24px;
  --marge: 5vw;
  --section: 80px;
  --entete: 64px;

  --courbe: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 1024px) {
  :root {
    --section: 128px;
    --entete: 72px;
  }
}

/* ---------- Base ---------- */

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

html {
  scroll-padding-top: var(--entete);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--ivoire);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html.menu-ouvert,
html.menu-ouvert body {
  overflow: hidden;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
address {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

address {
  font-style: normal;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
}

h1 {
  font-size: clamp(2.8rem, 6vw, 5.6rem);
  line-height: 1.02;
  font-weight: 300;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  line-height: 1.1;
}

h3 {
  font-size: 1.35rem;
  line-height: 1.25;
  font-weight: 500;
}

p {
  max-width: 62ch;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

.petit {
  font-size: 0.875rem;
  line-height: 1.55;
}

.attenue {
  color: var(--encre-2);
}

.saut {
  position: absolute;
  left: var(--marge);
  top: -100px;
  z-index: 30;
  padding: 10px 16px;
  background: var(--encre);
  color: var(--ivoire);
}

.saut:focus {
  top: 8px;
}

/* ---------- Grille ---------- */

.cadre {
  width: 100%;
  max-width: calc(1200px + 2 * var(--marge));
  margin-inline: auto;
  padding-inline: var(--marge);
}

.section {
  padding-block: var(--section);
}

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

.section + .section:not(.section--sable),
.section--filet {
  border-top: 1px solid var(--filet);
}

.section--sable + .section:not(.section--sable) {
  border-top: 0;
}

.tete {
  display: grid;
  gap: 24px;
  margin-bottom: 56px;
}

@media (min-width: 1024px) {
  .grille,
  .tete {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gouttiere);
  }

  .tete {
    row-gap: 0;
    align-items: end;
    margin-bottom: 96px;
  }

  .tete__titre {
    grid-column: 1 / span 6;
  }

  .tete__texte {
    grid-column: 8 / span 5;
  }

  /* L'inverse : le titre passe à droite, le texte à gauche. */
  .tete--inverse .tete__titre {
    grid-column: 7 / span 6;
    grid-row: 1;
  }

  .tete--inverse .tete__texte {
    grid-column: 1 / span 5;
    grid-row: 1;
  }
}

/* ---------- Surtitre : amorce de la maison + petites capitales ---------- */

.surtitre {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  max-width: none;
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-2);
}

/* L'amorce : un trait de 1 px à l'angle de la maison, 32° de la verticale. */
.amorce {
  flex: none;
  width: 9px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

/* Comme la `.meta-list` de la plateforme : un filet vertical, jamais de point médian. */
.meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.meta > * + *::before {
  content: "";
  display: none;
  width: 1px;
  height: 12px;
  /* Le letter-spacing laisse 0,14 em après la dernière lettre : on le reprend à gauche du filet. */
  margin: 0 12px 0 calc(12px - 0.14em);
  vertical-align: middle;
  background: var(--filet);
}

@media (min-width: 720px) {
  .meta {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }

  .meta > * + *::before {
    display: inline-block;
  }
}


/* ---------- Boutons et liens ---------- */

.bouton {
  display: inline-block;
  padding: 16px 28px 16px 32px;
  border: 0;
  background: var(--encre);
  color: var(--ivoire);
  font: 500 1rem/1.25 var(--sans);
  text-decoration: none;
  cursor: pointer;
  clip-path: polygon(calc(var(--biseau) * var(--tan-k)) 0, 100% 0, 100% 100%, 0 100%, 0 var(--biseau));
  transition: background-color 180ms ease;
}

.bouton:hover {
  background: var(--laiton);
}

/* Le biseau rogne un contour extérieur : le focus se dessine à l'intérieur. */
.bouton:focus-visible {
  outline: 1px solid var(--ivoire);
  outline-offset: -5px;
}

.lien {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color 180ms ease;
}

.lien:hover {
  color: var(--laiton);
  text-decoration-thickness: 2px;
}

/* ---------- Logotype ---------- */

.logo {
  display: inline-block;
  font-family: var(--serif);
  font-size: 1.375rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
}

/*
 * Le X n'est pas une glyphe : deux branches à 32° de la verticale, la
 * descendante pleine et prolongée sous la ligne de base, la montante fine.
 * Cotes en em, calées sur la hauteur de capitale de Cormorant (0,63 em).
 */
.logo__x {
  width: 0.5355em;
  height: 0.7245em;
  margin: 0 -0.045em 0 0.005em;
  vertical-align: -0.0945em;
  fill: none;
  stroke: currentColor;
}

/* Le X reste une lettre du texte — pour les machines — mais seul le tracé se voit. */
.logo__lettre {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.logo__talent {
  font-weight: 300;
}

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

.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  color: var(--encre);
  background: transparent;
  transition: background-color 200ms ease, color 200ms ease;
}

.entete.est-pleine,
.entete--pleine {
  background: var(--encre);
  color: var(--ivoire);
}

.entete__ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--entete);
}

.menu-ouvrir,
.menu-fermer {
  padding: 12px 0;
  border: 0;
  background: none;
  color: inherit;
  font: 500 0.875rem/1 var(--sans);
  letter-spacing: 0.06em;
  cursor: pointer;
}

.nav {
  display: none;
}

.nav a {
  text-decoration: none;
}

/* Menu mobile : plein écran, fond encre, liens en grande serif. */
.nav.est-ouvert {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 25;
  padding: 0 var(--marge) 40px;
  background: var(--encre);
  color: var(--ivoire);
  overflow-y: auto;
}

.nav__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  height: var(--entete);
}

.menu-fermer {
  padding: 12px;
  margin-right: -12px;
}

.menu-fermer svg {
  display: block;
  width: 17px;
  height: 24px;
  fill: none;
  stroke: currentColor;
}

.nav.est-ouvert .nav__liste {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  gap: 4px;
}

.nav.est-ouvert .nav__liste a {
  display: block;
  padding: 8px 0;
  font-family: var(--serif);
  font-size: clamp(2.5rem, 11vw, 3.5rem);
  line-height: 1.1;
  font-weight: 300;
}

@media (min-width: 1024px) {
  .menu-ouvrir,
  .nav__tete {
    display: none;
  }

  .nav {
    display: block;
  }

  .nav__liste {
    display: flex;
    gap: 36px;
    font-size: 0.875rem;
    font-weight: 500;
  }

  .nav__liste a {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid transparent;
    transition: border-color 180ms ease;
  }

  .nav__liste a:hover {
    border-bottom-color: currentColor;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  /* Centré, puis remonté de 4vh pour l'équilibre optique : le bas reçoit 8vh de plus que le haut. */
  padding-block: calc(var(--entete) + 24px) calc(var(--entete) + 24px + 8vh);
  overflow: hidden;
}

/*
 * La signature : le X du logotype, deux traits de 1 px à 32° de la verticale,
 * très grand, en bas à droite, qui déborde du cadre.
 */
.hero__x {
  position: absolute;
  right: -6vw;
  bottom: -14vh;
  /* En portrait, la largeur borne la taille : le X reste en bas à droite au lieu d'occuper tout l'écran. */
  height: min(118vh, 175vw);
  width: auto;
  fill: none;
  stroke: var(--filet);
  pointer-events: none;
}

.hero__contenu {
  position: relative;
}

.hero h1 {
  margin-bottom: 32px;
}

.hero h1 em {
  font-style: normal;
  color: var(--laiton);
}

.hero__texte {
  margin-bottom: 40px;
  max-width: 54ch;
  color: var(--encre-2);
}

@media (min-width: 720px) {
  .hero__x {
    height: min(118vh, 130vw);
  }

  .hero h1 span {
    display: block;
  }
}

@media (min-width: 1024px) {
  .hero .surtitre {
    margin-bottom: 32px;
  }

  .hero h1 {
    margin-bottom: 40px;
  }
}

/* ---------- Photographies ----------
 * Même maison que le reste : aucun rayon, aucune ombre, aucun voile sur l'image.
 * Le seul geste est le biseau du bouton (16 px × tan 32°), repris à l'échelle de
 * la photo sur son angle haut-gauche. Photos d'ambiance, sans visage : alt vide.
 * Aucun style en ligne dans le HTML (la CSP du site les refuse) : tout passe ici.
 */

.photo {
  --biseau-photo: 40px;
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--filet);
}

/* L'image est posée dans le cadre : c'est le cadre (ratio ou hauteur) qui décide, jamais le fichier. */
.photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo--biseau {
  clip-path: polygon(
    calc(var(--biseau-photo) * var(--tan-k)) 0,
    100% 0,
    100% 100%,
    0 100%,
    0 var(--biseau-photo)
  );
}

/* Hero : sous le texte en mobile et tablette, en panneau à droite dès 1024 px. */
.hero {
  padding-bottom: 0;
}

.hero__photo {
  --biseau-photo: 56px;
  aspect-ratio: 4 / 5;
  margin-top: 40px;
}

.hero__photo img {
  object-position: 50% 58%;
}

/*
 * Le X de la maison est gravé sur la photo : deux filets ivoire de 1 px, visibles là où il
 * traverse l'image, invisibles sur le fond ivoire. Il ne passe donc jamais sous le texte.
 * (La page « merci », sans photo, garde son X au filet.)
 */
.hero > .hero__x {
  z-index: 1;
  stroke: var(--ivoire);
  opacity: 0.6;
}

.hero__photo {
  z-index: 0;
}

.hero__contenu {
  z-index: 2;
}

@media (min-width: 720px) {
  .hero__photo {
    aspect-ratio: 3 / 2;
    margin-top: 56px;
  }
}

@media (min-width: 1024px) {
  .hero {
    /* Texte et panneau photo partagent le même centre : l'un et l'autre sont calés sous l'en-tête. */
    padding-block: calc(var(--entete) + 24px) 24px;
    /* Largeur laissée au texte : tout ce qui précède le panneau photo, moins une gouttière. */
    --hero-texte: calc(60vw - max(var(--marge), (100vw - 1200px) / 2) - 24px);
  }

  .hero .surtitre,
  .hero h1 {
    max-width: var(--hero-texte);
  }

  .hero__texte {
    max-width: min(54ch, var(--hero-texte));
  }

  /* Le panneau démarre sous l'en-tête : la navigation reste sur l'ivoire, lisible. */
  .hero__photo {
    --biseau-photo: 96px;
    position: absolute;
    top: var(--entete);
    right: 0;
    bottom: 0;
    width: 40vw;
    margin-top: 0;
    aspect-ratio: auto;
  }

  .hero__photo img {
    object-position: 50% 50%;
  }

  /* En haut de page, l'en-tête reste sur un aplat ivoire : les diagonales du X naissent
     sous la barre et se glissent sous la photo, sans traverser la navigation. */
  .entete:not(.est-pleine):not(.entete--pleine) {
    background: var(--ivoire);
  }
}

/* Expertises : une photo par secteur, en tête de colonne. */
.expertise__photo {
  aspect-ratio: 3 / 2;
  margin-bottom: 28px;
}

/* Entreprises / Candidats : la photo ouvre la colonne des engagements. */
.duo__photo {
  --biseau-photo: 56px;
  aspect-ratio: 16 / 10;
  margin-bottom: 40px;
}

@media (min-width: 1024px) {
  .duo__colonne {
    grid-column: 7 / span 6;
  }

  .duo--inverse .duo__colonne {
    grid-column: 1 / span 6;
    grid-row: 1;
  }

  .duo__photo {
    margin-bottom: 56px;
  }
}

/* ---------- Expertises : trois colonnes hautes, filets verticaux ---------- */

.expertise {
  padding-block: 32px;
  border-top: 1px solid var(--filet);
}

.expertise h3 {
  margin-bottom: 12px;
  font-size: 1.75rem;
  line-height: 1.15;
  font-weight: 400;
}

.expertise__texte {
  margin-bottom: 28px;
}

.expertise li {
  padding: 9px 0;
  color: var(--encre-2);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.expertise li + li {
  border-top: 1px solid var(--filet);
}

.expertises__note {
  margin-top: 40px;
  color: var(--encre-2);
}

/* Tablette : deux colonnes, deux rangées, séparées par des filets. */
@media (min-width: 720px) {
  .expertises {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .expertise {
    padding: 32px 40px 32px 0;
  }

  .expertise:nth-child(even) {
    padding: 32px 0 32px 40px;
    border-left: 1px solid var(--filet);
  }
}

@media (min-width: 1024px) {
  .expertise h3 {
    margin-bottom: 16px;
    font-size: 2rem;
  }

  .expertise__texte {
    margin-bottom: 32px;
  }
}

/* Grand écran : quatre colonnes hautes, filets verticaux. */
@media (min-width: 1200px) {
  .expertises {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 56px;
  }

  /* Colonnes de même largeur : le filet se glisse au milieu de la gouttière, il ne mange plus la photo. */
  .expertise,
  .expertise:nth-child(even) {
    position: relative;
    padding: 0 0 8px;
    border: 0;
  }

  .expertise + .expertise::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -28px;
    width: 1px;
    background: var(--filet);
  }

  /* Les listes démarrent à la même hauteur, quelle que soit la longueur de la description. */
  .expertise__texte {
    min-height: 6.4em;
  }

  /* Hauteur fixe : les colonnes des bords sont plus larges que celles du milieu, les titres restent alignés. */
  .expertise__photo {
    height: 200px;
    margin-bottom: 32px;
    aspect-ratio: auto;
  }
}

/* ---------- Méthode : quatre étapes ---------- */

.etapes {
  display: grid;
  gap: 40px;
  counter-reset: etape;
}

.etape {
  padding-left: 24px;
  border-left: 1px solid var(--filet);
}

.section--sable .etape {
  border-left-color: var(--filet-sable);
}

.etape__numero {
  display: block;
  margin-bottom: 12px;
  font-family: var(--serif);
  font-size: clamp(4rem, 7vw, 6.5rem);
  line-height: 0.9;
  font-weight: 300;
  font-variant-numeric: lining-nums;
  color: var(--encre-2);
}

.etape h3 {
  margin-bottom: 10px;
}

.etape p {
  font-size: 0.9375rem;
  line-height: 1.55;
}

@media (min-width: 720px) {
  .etapes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px var(--gouttiere);
  }
}

@media (min-width: 1024px) {
  .etapes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0;
  }

  .etape {
    padding: 0 32px 0 0;
    border-left: 0;
  }

  .etape + .etape {
    padding-left: 32px;
    border-left: 1px solid var(--filet-sable);
  }

  .etape:last-child {
    padding-right: 0;
  }

  .etape__numero {
    margin-bottom: 32px;
  }
}

/* ---------- Entreprises / Candidats : titre d'un côté, engagements de l'autre ---------- */

.duo {
  display: grid;
  gap: 48px;
}

.duo__titre h2 {
  margin-bottom: 24px;
}

.duo__titre p + .bouton,
.duo__titre p + p {
  margin-top: 32px;
}

.duo__titre .petit {
  margin-top: 20px;
  color: var(--encre-2);
}

.engagement {
  padding-block: 28px;
  border-top: 1px solid var(--filet);
}

.section--sable .engagement {
  border-top-color: var(--filet-sable);
}

.engagement:last-child {
  padding-bottom: 0;
}

.engagement dt {
  margin-bottom: 8px;
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.25;
  font-weight: 500;
}

.engagement dd {
  max-width: 52ch;
  color: var(--encre-2);
}

@media (min-width: 1024px) {
  .duo {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gouttiere);
    row-gap: 0;
    align-items: start;
  }

  .duo__titre {
    grid-column: 1 / span 5;
    position: sticky;
    top: calc(var(--entete) + 48px);
  }

  .duo__liste {
    grid-column: 7 / span 6;
  }

  .duo--inverse .duo__titre {
    grid-column: 8 / span 5;
    grid-row: 1;
  }

  .duo--inverse .duo__liste {
    grid-column: 1 / span 6;
    grid-row: 1;
  }

  .engagement:first-child {
    padding-top: 0;
    border-top: 0;
  }
}

/* ---------- Preuves (masquée tant que rien n'est fourni) ---------- */

.preuves__chiffres {
  display: grid;
  gap: 32px;
  margin-bottom: 72px;
}

.preuves__chiffre dt {
  font-family: var(--serif);
  font-size: clamp(3rem, 5vw, 4.5rem);
  line-height: 1;
  font-weight: 300;
}

.preuves__chiffre dd {
  margin-top: 8px;
  color: var(--encre-2);
  font-size: 0.875rem;
}

.temoignages {
  display: grid;
  gap: 40px;
}

.temoignage {
  margin: 0;
  padding-left: 24px;
  border-left: 1px solid var(--filet);
}

.temoignage blockquote {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.3;
}

.temoignage figcaption {
  color: var(--encre-2);
  font-size: 0.875rem;
}

@media (min-width: 1024px) {
  .preuves__chiffres {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .temoignages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gouttiere);
  }
}

/* ---------- Contact ---------- */

.coordonnees {
  display: grid;
  gap: 20px;
  padding-bottom: 48px;
}

.coordonnees dt {
  margin-bottom: 2px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-2);
}

.coordonnees dd {
  overflow-wrap: anywhere;
}

.formulaires {
  display: grid;
}

.formulaire {
  padding-block: 48px;
  border-top: 1px solid var(--filet);
}

.formulaire:last-child {
  padding-bottom: 0;
}

.formulaire h3 {
  margin-bottom: 8px;
  font-size: 1.75rem;
  font-weight: 400;
}

.formulaire__intro {
  margin-bottom: 32px;
  color: var(--encre-2);
}

.champs {
  display: grid;
  gap: 20px;
}

.champ > label:not(.consentement) {
  display: block;
  margin-bottom: 8px;
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-2);
}

.champ > label span {
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 400;
}

.champ input,
.champ textarea {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--filet);
  border-radius: 0;
  background: transparent;
  color: var(--encre);
  font: 400 1rem/1.5 var(--sans);
  appearance: none;
  transition: border-color 180ms ease;
}

.champ textarea {
  height: 148px;
  padding-block: 14px;
  resize: vertical;
}

.champ input:hover,
.champ textarea:hover {
  border-color: var(--encre-2);
}

.champ input:focus,
.champ textarea:focus {
  border-color: var(--encre);
  outline: 1px solid var(--encre);
  outline-offset: 0;
}

.champ.est-invalide input,
.champ.est-invalide textarea {
  border-color: var(--laiton);
}

.champ.est-invalide input:focus,
.champ.est-invalide textarea:focus {
  outline-color: var(--laiton);
}

.champ__erreur {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--laiton);
}

/* Case RGPD : un carré au filet, plein d'encre une fois cochée. Pas de coche dessinée. */
.consentement {
  position: relative;
  display: block;
  padding-left: 36px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--encre-2);
  cursor: pointer;
}

.consentement input {
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--encre-2);
  border-radius: 0;
  background: transparent content-box;
  appearance: none;
  cursor: pointer;
}

.consentement input:checked {
  background-color: var(--encre);
  border-color: var(--encre);
}

.consentement input:focus-visible {
  outline: 1px solid var(--encre);
  outline-offset: 3px;
}

.champ.est-invalide .consentement input {
  border-color: var(--laiton);
}

.formulaire .bouton {
  margin-top: 12px;
  justify-self: start;
}

.formulaire__note {
  margin-top: 4px;
  color: var(--encre-2);
}

.leurre {
  display: none;
}

@media (min-width: 1024px) {
  /*
   * Axes communs : le second formulaire et la dernière coordonnée démarrent là où
   * démarre le texte d'introduction (colonne 8 de la grille), le premier à la marge.
   * 29,75 % = 357 / 1200 ; 40,5 % = 486 / 1200 ; le filet reste au centre.
   */
  .coordonnees {
    grid-template-columns: 29.75% 29.75% minmax(0, 1fr);
    column-gap: 0;
    padding-bottom: 72px;
  }

  .formulaires {
    position: relative;
    grid-template-columns: repeat(2, 40.5%);
    justify-content: space-between;
    border-top: 1px solid var(--filet);
  }

  .formulaires::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--filet);
  }

  .formulaire,
  .formulaire + .formulaire {
    display: flex;
    flex-direction: column;
    padding: 72px 0 0;
    border: 0;
  }

  /* L'introduction occupe toujours deux lignes : le premier champ des deux formulaires démarre à la même hauteur. */
  .formulaire__intro {
    min-height: 3.1em;
  }

  /*
   * Les deux formulaires ont une longueur différente (un champ de plus d'un côté, une note de l'autre) :
   * le champ Message absorbe l'écart, les boutons d'envoi tombent sur la même ligne.
   */
  .formulaire > form {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .formulaire > form > .champ:has(textarea) {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .formulaire > form > .champ:has(textarea) textarea {
    flex: 1;
    height: auto;
    min-height: 148px;
  }

  .formulaire .bouton {
    align-self: flex-start;
  }
}

/* Deux champs côte à côte seulement quand la colonne est assez large. */
@media (min-width: 1200px) {
  .champs--deux {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
  }
}

/* ---------- Pied de page ---------- */

.pied {
  position: relative;
  padding-block: 72px 40px;
  background: var(--encre);
  color: var(--ivoire);
  overflow: hidden;
}

.pied__haut {
  display: grid;
  gap: 40px;
  padding-bottom: 56px;
}

.pied .logo {
  font-size: 1.75rem;
}

.pied__phrase {
  margin-top: 16px;
  max-width: 36ch;
  font-size: 0.9375rem;
  opacity: 0.72;
}

.pied__liens {
  display: grid;
  gap: 10px;
  font-size: 0.9375rem;
}

.pied__liens a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms ease;
}

.pied__liens a:hover {
  border-bottom-color: currentColor;
}

.pied__x {
  position: absolute;
  right: max(var(--marge), calc((100vw - 1200px) / 2));
  bottom: 104px;
  width: 50px;
  height: 80px;
  fill: none;
  stroke: var(--encre-2);
}

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--encre-2);
  font-size: 0.8125rem;
}

.pied__bas p,
.pied__bas a {
  opacity: 0.72;
}

.pied__bas a:hover {
  opacity: 1;
}

@media (min-width: 720px) {
  .pied__x {
    top: 64px;
    bottom: auto;
  }

  .pied__haut {
    grid-template-columns: 2fr 1fr 1fr;
    column-gap: var(--gouttiere);
    padding-right: 120px;
  }
}

/* ---------- Pages intérieures : mentions, confidentialité, merci ---------- */

.page {
  padding-block: calc(var(--entete) + 72px) var(--section);
}

.page__tete {
  padding-bottom: 48px;
  margin-bottom: 8px;
}

.page__tete h1 {
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: 1.05;
}

.page__tete p {
  margin-top: 20px;
  color: var(--encre-2);
}

.article {
  padding-block: 40px;
  border-top: 1px solid var(--filet);
}

.article h2 {
  margin-bottom: 20px;
  font-size: 1.75rem;
  line-height: 1.2;
}

.article p + p,
.article ul + p,
.article p + ul {
  margin-top: 14px;
}

.article ul {
  max-width: 62ch;
}

.article li {
  position: relative;
  padding: 4px 0 4px 20px;
}

.article li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1em;
  width: 8px;
  height: 1px;
  background: var(--encre-2);
}

.fiche {
  max-width: 62ch;
}

.fiche > div {
  display: grid;
  gap: 2px;
  padding: 12px 0;
  border-top: 1px solid var(--filet);
}

.fiche > div:first-child {
  border-top: 0;
  padding-top: 0;
}

.fiche dt {
  color: var(--encre-2);
  font-size: 0.875rem;
}

.fiche dd {
  overflow-wrap: anywhere;
}

@media (min-width: 720px) {
  .fiche > div {
    grid-template-columns: 220px 1fr;
    column-gap: var(--gouttiere);
  }
}

@media (min-width: 1024px) {
  .article {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gouttiere);
    padding-block: 56px;
  }

  .article h2 {
    grid-column: 1 / span 4;
    margin-bottom: 0;
  }

  .article__corps {
    grid-column: 6 / span 7;
  }
}

.merci {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--entete) + 48px) 72px;
  overflow: hidden;
}

.merci h1 {
  margin-bottom: 28px;
}

.merci p {
  color: var(--encre-2);
}

.merci .bouton {
  margin-top: 40px;
}

/* ---------- Révélation au défilement (une fois, et seulement si JS) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js [data-revele] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 500ms var(--courbe), transform 500ms var(--courbe);
  }

  .js [data-revele].est-visible {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}