/* =====================================================================
   IMP TALENTS - direction visuelle
   ---------------------------------------------------------------------
   LA CHARTE VIENT D'IMP, ELLE N'EST PAS INVENTÉE ICI. Elle est relevée
   dans `~/dev/imp-landings/app/globals.css` et sur le logo officiel
   (`imp-logo-dark.webp`) : fond BLANC, Space Grotesk en titres, Inter en
   texte courant, rouge #FA2C2E, encre #0A0A0A, angles arrondis à 14 px.
   Une première version partait sur un papier crème, de l'Archivo et des
   angles vifs : c'était peut-être joli, mais ce n'était plus IMP. Une
   plateforme qui porte le nom de l'agence doit ressembler à l'agence.

   Registre, à l'intérieur de cette charte : éditorial, façon feuille de
   production.

   Ce qui est conservé de la première version, parce que ça sert la
   lecture et non l'effet :

   1. LA GRILLE SE VOIT. Filets d'un pixel, colonnes marquées. Les missions
      sont numérotées comme sur une feuille de service - parce que c'en est
      une, et qu'on doit pouvoir dire « la 03 est prise » à l'oral.

   2. LE ROUGE EST UN CRI, PAS UNE COULEUR DE FOND. #FA2C2E ne sert qu'à
      trois choses : la marque, l'urgence, l'action en cours. Répandu
      partout il ne veut plus rien dire ; réservé, il fait lever la tête.

   3. L'URGENCE PASSE EN NOIR et déborde de la grille. C'est le seul
      élément de la page qui la casse, et c'est pour ça qu'on le voit avant
      tout le reste.

   Le grain et le papier crème de la première version ont sauté : la charte
   IMP est sur blanc franc, et un grain ajouté par-dessus ne serait qu'une
   signature personnelle de plus sur le travail d'un autre.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* --- valeurs relevées dans la charte IMP, à ne pas dériver --- */
  --noir: #0a0a0a;
  --noir-doux: #1a1a1a;
  --gris: #6b6b6b;
  --gris-clair: #9a9a9a;
  --trait: #e8e8e8;
  --trait-fort: rgba(10, 10, 10, .14);

  --papier: #ffffff;
  --papier-clair: #f6f6f6;
  --papier-sombre: #f1f1f1;

  --rouge: #fa2c2e;
  --rouge-sombre: #cf2e2e;

  --sur-noir: #ededed;
  --sur-noir-doux: #b4b4b4;

  --vert: #1f6b3a;
  --ambre: #8a5a00;

  --rayon: 14px;
  --rayon-lg: 22px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --pad: clamp(20px, 4vw, 44px);
  --large: 1320px;
}

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--noir);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--rouge); color: #fff; }

/* Titres : la police d'affichage de la charte. Le texte courant reste en
   Inter - c'est la répartition d'IMP, pas une préférence. */
h1, h2, h3,
.hero h1, .ligne-offre__titre, .carte__nom, .etape h3, .logo span {
  font-family: 'Space Grotesk', system-ui, sans-serif;
}

/* ---------------------------------------------------------- primitives */

.mono {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.contenu { max-width: var(--large); margin: 0 auto; padding: 0 var(--pad); }

/* ------------------------------------------------------------- en-tête */

.tete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--papier);
  border-bottom: 1px solid var(--trait-fort);
}

.tete__in {
  max-width: var(--large);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 68px;
  display: flex;
  align-items: center;
  gap: 26px;
}

/* Le logo est le FICHIER officiel d'IMP, jamais un logotype redessiné en
   CSS. Le mot « Talents » se pose à côté, dans la typo de la charte : la
   plateforme est une extension de l'agence, pas une marque à part. */
.logo{display:flex;align-items:center;gap:12px}
/* Le logo mene au site de l'agence, le mot « Talents » a la plateforme :
   on le signale au survol, sinon rien ne laisse deviner deux cibles. */
.logo__marque{display:flex;align-items:center;transition:opacity .2s}
.logo__marque:hover{opacity:.65}
.logo__nom{font-weight:700;letter-spacing:.01em;color:inherit;text-decoration:none;transition:opacity .2s}
.logo__nom:hover{opacity:.65}

.logo img {
  height: 40px;
  width: auto;
  display: block;
}

.logo span {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.02em;
  padding-left: 12px;
  border-left: 1px solid var(--trait);
  align-self: stretch;
  display: flex;
  align-items: center;
}

.nav { display: flex; align-items: stretch; height: 100%; margin-left: 14px; }

.nav a {
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
  border-bottom: 2px solid transparent;
  transition: color .18s, border-color .18s;
}
.nav a:hover { color: var(--noir); }
.nav a[aria-current="page"] { color: var(--noir); border-bottom-color: var(--rouge); }

.tete__fin { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* ------------------------------------------------------------- boutons */

.bt {
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--trait-fort);
  background: transparent;
  color: var(--noir);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .2s;
}

/* Le remplissage monte du bas : le bouton se « charge » au survol plutôt
   que de changer de couleur d'un coup. */
.bt::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--noir);
  transform: translateY(101%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  z-index: -1;
}
.bt:hover { color: var(--papier); }
.bt:hover::after { transform: translateY(0); }

.bt--plein { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.bt--plein::after { background: var(--noir); }
.bt--plein:hover { color: #fff; }

.bt--petit { min-height: 36px; padding: 0 14px; font-size: 10.5px; }
.bt--nu { border-color: transparent; padding: 0 6px; color: var(--gris); }
.bt--nu::after { display: none; }
.bt--nu:hover { color: var(--rouge); }
.bt[disabled] { opacity: .4; cursor: not-allowed; }

/* --------------------------------------------------------------- hero */

.hero {
  border-bottom: 1px solid var(--trait-fort);
  padding: clamp(38px, 6vw, 76px) 0 0;
  position: relative;
  overflow: hidden;
}

.hero__in { max-width: var(--large); margin: 0 auto; padding: 0 var(--pad); }

.hero__num {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rouge);
  /* Marge généreuse : en capitales accentuées et à cette taille, l'accent
     du É remonte franchement au-dessus de la hauteur de capitale et venait
     barrer cette ligne-ci. Mesuré sur « UN MÉTIER » à 104 px. */
  margin: 0 0 34px;
}

.hero h1 {
  margin: 0;
  font-size: clamp(38px, 8.5vw, 104px);
  line-height: .92;
  font-weight: 800;
  letter-spacing: -.045em;
  text-transform: uppercase;
  max-width: 13ch;
}
.hero h1 em { font-style: normal; color: var(--rouge); }

.hero p {
  margin: 20px 0 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--noir-doux);
}

/* ---------------------------------------------------------- recherche */

.rech {
  border-radius: var(--rayon);
  overflow: hidden;

  display: flex;
  flex-wrap: wrap;
  margin: clamp(26px, 4vw, 44px) 0 0;
  border: 1px solid var(--trait-fort);
  background: var(--papier-clair);
}

.rech__champ {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 240px;
  min-height: 62px;
  padding: 0 20px;
  border-right: 1px solid var(--trait);
}
.rech__champ:last-of-type { border-right: 0; }

.rech__champ svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: var(--rouge); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.rech__champ input,
.rech__champ select {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 15.5px;
  color: var(--noir);
  padding: 14px 0;
  appearance: none;
}
.rech__champ input:focus, .rech__champ select:focus { outline: none; }
.rech__champ input::placeholder { color: var(--gris); }

.rech .bt {
  border: 0;
  border-left: 1px solid var(--trait-fort);
  min-height: 62px;
  padding: 0 30px;
  flex: none;
}

/* --------------------------------------------------------------- corps */

.corps {
  max-width: var(--large);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 52px) var(--pad) 90px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  align-items: start;
}

/* La colonne de filtres est séparée par un vrai filet, pas par du vide :
   la grille doit se voir. */
.corps > aside { padding-right: 30px; border-right: 1px solid var(--trait); }
.corps > main  { padding-left: 30px; min-width: 0; }

.corps--simple {
  display: block;
  max-width: 900px;
  padding-top: clamp(28px, 4vw, 48px);
}

/* ------------------------------------------------------------ filtres */

.filtres { position: sticky; top: 92px; }

.filtres h2 {
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--trait-fort);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.filtres h2 a { color: var(--rouge); font-weight: 400; }

.filtres fieldset { border: 0; padding: 0; margin: 0 0 24px; }

.filtres legend {
  padding: 0 0 8px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
}

.coche {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 14.5px;
  cursor: pointer;
  transition: color .15s;
}
.coche:hover { color: var(--rouge); }
.coche input { width: 15px; height: 15px; accent-color: var(--rouge); margin: 0; flex: none; }
.coche .n { margin-left: auto; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 11px; color: var(--gris); }

/* ----------------------------------------------------------- résultats */

.compte {
  margin: 0 0 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--trait-fort);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
}
.compte b { font-size: 15px; }
.compte span { color: var(--gris); }

/* ------------------------------------------------ missions : la liste */

/* Pas de cartes flottantes. Des lignes séparées par un filet, comme un
   relevé - et le numéro de mission à gauche, en gros, qui sert de repère
   quand on cherche « la 04 » à l'oral. */
.ligne-offre {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 0 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--trait);
  position: relative;
  transition: background .2s;
}
.ligne-offre:hover { background: var(--papier-clair); }

.ligne-offre__num {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  color: var(--trait);
  letter-spacing: -.03em;
  transition: color .2s;
}
.ligne-offre:hover .ligne-offre__num { color: var(--rouge); }

/* L'urgence prend le noir. Elle déborde volontairement de la colonne de
   texte, des deux côtés : c'est le seul élément de la page qui casse la
   grille, et c'est exactement pour ça qu'on la voit avant tout le reste. */
.ligne-offre--urgente {
  border-radius: var(--rayon);
  background: var(--noir);
  color: var(--papier);
  padding: 26px 22px;
  margin: 0 -22px;
  border-bottom-color: var(--noir);
}
.ligne-offre--urgente:hover { background: var(--noir-doux); }
.ligne-offre--urgente .ligne-offre__num { color: var(--rouge); }
.ligne-offre--urgente .fait,
.ligne-offre--urgente .ligne-offre__desc { color: var(--sur-noir-doux); }
.ligne-offre--urgente .fait b { color: var(--sur-noir); }
.ligne-offre--urgente .fait svg { stroke: var(--rouge); }
.ligne-offre--urgente .pill {
  border-radius: 999px;
 border-color: #4a443d; color: #b8b0a5; }

.ligne-offre__titre {
  margin: 0;
  font-size: clamp(20px, 2.3vw, 27px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.08;
}

.ligne-offre__desc {
  margin: 10px 0 0;
  color: var(--noir-doux);
  font-size: 15px;
  max-width: 62ch;
}

/* Les faits : métier, lieu, heure, rémunération. Toujours dans cet ordre,
   toujours en monospace - on les compare d'une ligne à l'autre à la
   verticale, comme dans un tableau. */
.faits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.fait {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gris);
}
.fait b { color: var(--noir); font-weight: 600; }
.fait svg {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: var(--rouge); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ------------------------------------------------- réseau : les cartes */

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
  gap: 0;
  border-top: 1px solid var(--trait);
  border-left: 1px solid var(--trait);
}

/* Les cartes partagent leurs filets : une vraie grille, pas des tuiles
   posées côte à côte avec des gouttières. */
.carte {
  border-radius: 0;

  padding: 24px;
  border-right: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background .2s;
}
.carte:hover { background: var(--papier-clair); }

/* Le trait rouge qui pousse depuis la gauche au survol : c'est la seule
   animation de la grille, elle suffit à désigner. */
.carte::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--rouge);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}
.carte:hover::before { transform: scaleY(1); }

.carte__haut { display: flex; gap: 14px; align-items: center; }

.pastille {
  border-radius: var(--rayon);

  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
}

.carte__nom {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.carte__metier {
  margin: 2px 0 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--rouge);
}

.carte .faits { margin-top: 18px; flex-direction: column; gap: 7px; }

.carte__bas { margin-top: auto; padding-top: 18px; }

/* -------------------------------------------------------- étiquettes */

.pill {
  display: inline-block;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border: 1px solid var(--trait);
  color: var(--gris);
}

.pills { display: flex; flex-wrap: wrap; gap: 6px; }

.etat {
  border-radius: 6px;

  display: inline-block;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 10px;
}
.etat--urgent  { background: var(--rouge); color: #fff; }
.etat--dispo   { background: var(--vert); color: #fff; }
.etat--attente { background: var(--ambre); color: #fff; }
.etat--ferme   { background: var(--papier-sombre); color: var(--gris); }

/* --------------------------------------------------------- formulaires */

.form { display: flex; flex-direction: column; gap: 22px; max-width: 680px; }

.champ { display: flex; flex-direction: column; gap: 8px; }

.champ > label {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
}

.champ small { color: var(--gris); font-size: 13px; line-height: 1.45; }

.champ input[type=text], .champ input[type=email], .champ input[type=tel],
.champ input[type=password], .champ input[type=datetime-local],
.champ select, .champ textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 15px;
  border: 1px solid var(--trait);
  border-radius: 10px;
  background: var(--papier-clair);
  font-family: inherit;
  font-size: 15.5px;
  color: var(--noir);
  transition: border-color .18s;
}
.champ textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--rouge);
}

.cases { display: flex; flex-wrap: wrap; gap: 7px; }

.case {
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--trait);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.case:hover { border-color: var(--noir); }
.case:has(input:checked) { background: var(--noir); border-color: var(--noir); color: var(--papier); }
.case input { width: 14px; height: 14px; accent-color: var(--rouge); margin: 0; }

/* ----------------------------------------------------------- encadrés */

.note {
  border-radius: var(--rayon);

  border: 1px solid var(--trait-fort);
  border-left: 5px solid var(--rouge);
  padding: 20px 22px;
  background: var(--papier-clair);
  font-size: 14.5px;
  color: var(--noir-doux);
  margin: 0 0 24px;
}
.note strong { color: var(--noir); }
.note p { margin: 0 0 8px; }
.note p:last-child { margin: 0; }

.vide {
  border-radius: var(--rayon);

  border: 1px dashed var(--trait);
  padding: 52px 24px;
  text-align: center;
  color: var(--gris);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.msg {
  border-radius: var(--rayon);

  padding: 15px 18px;
  font-size: 14.5px;
  margin: 0 0 22px;
  border-left: 5px solid;
}
.msg--ok { background: #e9f3ec; border-color: var(--vert); color: #14512b; }
.msg--ko { background: #fdecec; border-color: var(--rouge); color: #8f1214; }

/* --------------------------------------------------------- étapes home */

.etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  border-top: 1px solid var(--trait-fort);
  border-left: 1px solid var(--trait);
}

.etape {
  padding: 30px 26px 34px;
  border-right: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
}

.etape__n {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--rouge);
  display: block;
  margin-bottom: 16px;
}

.etape h3 {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.etape p { margin: 0; color: var(--noir-doux); font-size: 14.5px; }

/* --------------------------------------------------------------- pied */

.pied {
  border-top: 1px solid var(--trait-fort);
  padding: 34px var(--pad);
  background: var(--noir);
  color: var(--sur-noir-doux);
}
.pied__in {
  max-width: var(--large);
  margin: 0 auto;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: space-between;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pied a:hover { color: var(--rouge); }

/* ------------------------------------------------------- arrivée page */

/* Une seule orchestration, à l'ouverture. Décalée de quelques dizaines de
   millisecondes par bloc : l'œil suit la mise en place au lieu de recevoir
   la page d'un coup. */
@keyframes monte {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.hero__num, .hero h1, .hero p, .rech { animation: monte .6s both cubic-bezier(.2, .7, .3, 1); }
.hero h1 { animation-delay: .05s; }
.hero p  { animation-delay: .12s; }
.rech    { animation-delay: .18s; }

.ligne-offre, .carte, .etape { animation: monte .5s both cubic-bezier(.2, .7, .3, 1); }
.ligne-offre:nth-child(1), .carte:nth-child(1), .etape:nth-child(1) { animation-delay: .04s; }
.ligne-offre:nth-child(2), .carte:nth-child(2), .etape:nth-child(2) { animation-delay: .09s; }
.ligne-offre:nth-child(3), .carte:nth-child(3), .etape:nth-child(3) { animation-delay: .14s; }
.ligne-offre:nth-child(4), .carte:nth-child(4), .etape:nth-child(4) { animation-delay: .19s; }
.ligne-offre:nth-child(n+5), .carte:nth-child(n+5) { animation-delay: .24s; }

/* --------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .corps { grid-template-columns: 1fr; }
  .corps > aside {
    padding-right: 0; border-right: 0;
    border-bottom: 1px solid var(--trait-fort);
    padding-bottom: 24px; margin-bottom: 24px;
  }
  .corps > main { padding-left: 0; }
  .filtres { position: static; }
  /* La navigation ne disparait plus : elle passe sous le logo, en rangee
     defilante. Il n'y a pas de menu burger sur cette plateforme, et masquer
     les liens les rendait tout simplement inatteignables sur telephone. */
  .tete__in{flex-wrap:wrap;height:auto;padding-top:12px;padding-bottom:0;gap:12px}
  .tete__fin{margin-left:auto}
  .nav{order:3;width:100%;margin-left:0;height:auto;gap:20px;overflow-x:auto;
       border-top:1px solid var(--trait);padding:2px 0 0;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;padding:12px 0}
  /* Le bouton « Rejoindre » depassait du cadre a droite. */
  .bt--petit{padding:0 12px}
  .ligne-offre { grid-template-columns: 54px 1fr; }
  .ligne-offre__num { font-size: 21px; }
}

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