@import url("fonts.css");

/* =========================================================================
   Solstice — feuille principale

   Nommage BEM : bloc, bloc__element, bloc--modificateur.
   Les descendants et les pseudo-classes sont imbriques dans leur bloc
   (imbrication CSS native, sans preprocesseur).

   Limite a connaitre : l'imbrication native ne concatene pas les selecteurs
   comme le ferait Sass. « &:hover » fonctionne, « &--plein » non. Les
   modificateurs restent donc ecrits a plat.

   Le design est fluide : il repose sur clamp() et grid auto-fit, pas sur une
   cascade de points de rupture. Ne pas ajouter de breakpoint sans necessite.
   Valeurs reprises de la maquette « Piste B Editorial ».
   ========================================================================= */

:root {
  /* Fonds */
  --fond: #f6f3ea;
  --fond-creme: #f2eee2;
  --fond-sable: #efeadc;

  /* Encres */
  --encre: #2e3234;
  --encre-doux: #43484a;
  --gris: #64696b;
  /* Maquette : #6C7270, contraste 4.42 sur le fond creme, sous le seuil WCAG
     AA de 4.5 pour du petit texte. Assombri de 2 %, ecart invisible a l'oeil. */
  --gris-clair: #6a706e;

  /* Marque */
  --vert: #1f5c2b;
  --vert-fonce: #17441f;
  --vert-pale: #e4eadd;

  /* Filets */
  --filet: rgba(46, 50, 52, 0.14);
  --filet-doux: rgba(46, 50, 52, 0.12);
  --filet-moyen: rgba(46, 50, 52, 0.16);
  --filet-fort: rgba(46, 50, 52, 0.2);
  --filet-net: rgba(46, 50, 52, 0.22);
  --filet-champ: rgba(46, 50, 52, 0.4);
  --sable: #c3c1b7;
  /* Maquette : #94948C, contraste 2.75, nettement insuffisant pour la mention
     du pied en 12 px. Assombri jusqu'a 4.56. Ecart visible et volontaire :
     revenir a la valeur de la maquette rendrait la ligne difficile a lire. */
  --sable-fonce: #6f6f69;

  /* Trame */
  --largeur: 1280px;
  --marge: clamp(20px, 5vw, 72px);
  --air-section: clamp(92px, 12vw, 152px);

  /* Le logo deborde du header : sa largeur sert a tracer les filets en
     escalier qui l'encadrent. Ratio de solstice-logo.png : 1162 / 671. */
  --logo-h: clamp(82px, 10vw, 118px);
  --logo-w: calc(var(--logo-h) * 1.7318);

  --police-titre: "Newsreader", Georgia, "Times New Roman", serif;
  --police-texte: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: 18px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--vert);
  text-decoration: none;
  transition: color 0.18s ease;

  &:hover {
    color: var(--vert-fonce);
  }
}

::selection {
  background: var(--vert-pale);
  color: var(--vert);
}

img {
  max-width: 100%;
}

input,
select,
textarea,
button {
  font-family: inherit;
}

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

.sprite {
  display: none;
}

.lecteur-seul {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Cible de saut d'ancre : degage la hauteur du header colle */
[id] {
  scroll-margin-top: calc(var(--logo-h) + 40px);
}

/* ---------- Elements recurrents ---------- */

/* Les <symbol> du sprite ne portent que les traces : les attributs de rendu
   vivaient sur la balise <svg> d'origine et doivent etre redonnes ici. */
.ico {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contenu {
  max-width: var(--largeur);
  margin: 0 auto;
  padding-left: var(--marge);
  padding-right: var(--marge);
}

.surtitre {
  margin: 0 0 30px;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--vert);
}

.titre-section {
  margin: 0 0 32px;
  max-width: 20ch;
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: clamp(40px, 5.2vw, 78px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--encre);
}

.titre-section em,
.titre-page em,
.titre-bloc em,
.immobilier__titre em,
.opportunite__titre em {
  font-style: italic;
  font-weight: 500;
  color: var(--vert);
}

.chapo {
  margin: 0;
  font-size: 21px;
  line-height: 1.65;
  color: var(--encre-doux);
  text-wrap: pretty;
}

.texte {
  margin: 0;
  font-size: 18px;
  line-height: 1.72;
  color: var(--encre-doux);
  text-wrap: pretty;
}

.texte--large {
  font-size: 20px;
}

.titre-bloc {
  margin: 0 0 14px;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 27px;
  line-height: 1.2;
  color: var(--encre);
}

.bouton {
  display: inline-block;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 18px 30px;
  border: none;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

.bouton--plein {
  background: var(--vert);
  color: var(--fond);

  &:hover {
    background: var(--vert-fonce);
    color: var(--fond);
  }
}

.bouton--ligne {
  color: var(--encre);
  padding: 17px 30px;
  border: 1.5px solid var(--filet-champ);

  &:hover {
    border-color: var(--vert);
    color: var(--vert);
  }
}

/* ---------- Grain ---------- */

.grain {
  position: fixed;
  inset: 0;
  background-image: url("../assets/img/grain.webp");
  background-size: 240px 240px;
  pointer-events: none;
  z-index: 60;
  mix-blend-mode: multiply;
  opacity: 0.45;
}

/* ---------- Rail de la fusee ----------
   Effet decoratif : la fusee du logo descend le long d'un trait pointille au
   fil du defilement. Purement ornemental, donc masque des que la gouttiere
   gauche devient trop etroite, et retire si l'utilisateur demande moins
   d'animation. */

.rail {
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  display: none;

  @media (min-width: 1280px) and (prefers-reduced-motion: no-preference) {
    display: block;
  }
}

.rail__trait,
.rail__trait-clair {
  position: absolute;
  top: 0;
  width: 1px;
  height: 0;
  background-image: linear-gradient(to bottom, rgba(31, 92, 43, 0.5) 0 3px, transparent 3px 10px);
  background-size: 1px 10px;
}

.rail__trait-clair {
  background-image: linear-gradient(
    to bottom,
    rgba(246, 243, 234, 0.6) 0 3px,
    transparent 3px 10px
  );
}

.rail__fusee,
.rail__fusee-claire {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: auto;
}

.rail__fusee-claire {
  opacity: 0;
}

/* ---------- En-tete ----------
   Le logo deborde sous la barre : quatre filets dessinent un decrochement en
   escalier autour de lui. Tout est calcule en CSS a partir de --logo-w, sans
   mesure JavaScript, pour eviter tout saut au chargement. */

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 243, 234, 0.94);
  backdrop-filter: blur(6px);

  /* Bord droit reel du logo, mesure depuis le bord gauche de l'en-tete.
     La barre est centree et plafonnee a --largeur : au-dela, une gouttiere
     apparait de chaque cote et decale le logo vers la droite. Les filets sont
     positionnes par rapport a l'en-tete pleine largeur : sans ce report, ils
     restent colles a gauche et traversent le logo des que la fenetre depasse
     1280 px. Le script de la maquette faisait ce calcul en mesurant le logo. */
  --bord-logo: calc(max(0px, (100% - var(--largeur)) / 2) + var(--marge) + var(--logo-w) + 30px);
}

.entete__barre {
  position: relative;
  z-index: 2;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 20px var(--marge) 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 4vw, 64px);
}

.entete__logo {
  display: block;
  flex: none;
  margin: -4px 0 -76px;
  padding: 10px 30px 20px 0;

  img {
    height: var(--logo-h);
    width: auto;
    display: block;
  }

  /* La navigation compacte laisse moins de place sous la barre */
  @media (max-width: 1023px) {
    margin-bottom: -60px;
  }
}

.entete__logo-enveloppe {
  position: relative;
  display: block;
}

/* Decoupe exacte de la fusee dans solstice-logo.png, en proportions */
.entete__logo-cache {
  position: absolute;
  left: 40.2%;
  top: 0;
  width: 19.4%;
  height: 54%;
  background: var(--fond);
  opacity: 0;
}

/* Plaque opaque derriere le logo debordant, pour que le contenu defile dessous */
.entete__plaque {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--bord-logo);
  height: calc(var(--logo-h) + 46px);
  background: var(--fond);
  z-index: 1;
}

/* Filet horizontal bas, a droite du logo */
.entete__filet-menu {
  position: absolute;
  left: var(--bord-logo);
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--filet);
}

/* Filet horizontal sous le logo */
.entete__filet-logo {
  position: absolute;
  left: 0;
  top: calc(var(--logo-h) + 46px);
  width: var(--bord-logo);
  height: 1px;
  background: var(--filet);
}

/* Filet vertical reliant les deux */
.entete__filet-vertical {
  position: absolute;
  left: var(--bord-logo);
  top: 0;
  width: 1px;
  height: calc(var(--logo-h) + 46px);
  background: var(--filet);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 34px);
  flex-wrap: nowrap;
  justify-content: flex-end;
  font-weight: 600;
  font-size: clamp(11px, 1.05vw, 13.5px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;

  a {
    color: var(--encre);

    &:hover {
      color: var(--vert);
    }
  }

  /* Bascule vers la navigation compacte : seuil repris du script d'origine */
  @media (max-width: 1023px) {
    display: none;
  }
}

.nav__actif {
  color: var(--vert);
  border-bottom: 1.5px solid var(--vert);
  padding-bottom: 3px;

  &:hover {
    color: var(--vert-fonce);
    border-bottom-color: var(--vert-fonce);
  }
}

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 46px;
  height: 46px;
  padding: 0 6px;
  background: transparent;
  border: 1px solid rgba(46, 50, 52, 0.2);
  cursor: pointer;
  transition: border-color 0.18s ease;

  &:hover {
    border-color: var(--vert);
  }

  span {
    display: block;
    height: 1.5px;
    background: var(--encre);
  }

  @media (max-width: 1023px) {
    display: flex;
  }
}

.menu {
  position: relative;
  z-index: 3;
  display: none;
  background: var(--fond);
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);

  &[data-ouvert="true"] {
    display: block;
  }

  nav {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 26px var(--marge) 30px;
    display: grid;
    justify-items: end;
    text-align: right;
    gap: 22px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  a {
    color: var(--encre);

    &:hover {
      color: var(--vert);
    }
  }

  .nav__actif {
    justify-self: end;
    white-space: nowrap;
    color: var(--fond);
    background: var(--vert);
    border: none;
    padding: 15px 26px;

    &:hover {
      background: var(--vert-fonce);
      color: var(--fond);
    }
  }
}

/* ---------- Accroche ---------- */

.accroche {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: var(--air-section) var(--marge) clamp(76px, 10vw, 132px);
}

.titre-page {
  margin: 0;
  max-width: 18ch;
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: clamp(56px, 7.4vw, 122px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--encre);
}

.accroche__socle {
  margin-top: clamp(44px, 6vw, 76px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: end;

  .chapo {
    max-width: 34ch;
  }
}

.accroche__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.accroche__image {
  margin-top: 100px;
  display: block;
  width: 100%;
  height: 440px;
  object-fit: cover;
  object-position: 50% 45%;
}

/* ---------- Manifeste ---------- */

.manifeste {
  border-top: 1px solid var(--filet);
  background: var(--fond-creme);
}

.manifeste__grille {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: clamp(72px, 9vw, 112px) var(--marge) clamp(76px, 9vw, 120px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(44px, 6vw, 96px);
  align-items: start;
}

.manifeste__points {
  display: grid;
  gap: 48px;
  padding-top: 8px;
}

.citation {
  margin: 0;
  font-family: var(--police-titre);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(32px, 3.9vw, 58px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--vert);
}

.point {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 22px;
  align-items: start;

  .ico {
    width: 30px;
    height: 30px;
    color: var(--vert);
    margin-top: 4px;
  }

  & + .point {
    border-top: 1px solid var(--filet-moyen);
    padding-top: 44px;
  }
}

/* ---------- Approche ---------- */

.approche {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: var(--air-section) var(--marge) 0;
}

.approche__chapo {
  margin-bottom: 84px;
  max-width: 46ch;
}

.piliers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--filet-net);
  padding-top: 42px;
}

.pilier {
  .ico {
    width: 34px;
    height: 34px;
    color: var(--vert);
    display: block;
    margin-bottom: 24px;
  }
}

.pilier__nom {
  margin: 0 0 16px;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vert);
}

/* ---------- Bandeau vert ---------- */

.bandeau {
  margin-top: var(--air-section);
  background: var(--vert);
  color: var(--fond);
}

.bandeau__contenu {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: clamp(56px, 6vw, 80px) var(--marge) clamp(58px, 6vw, 84px);
  display: grid;
  justify-items: center;
  text-align: center;
}

.bandeau__surtitre {
  margin: 0 0 22px;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(246, 243, 234, 0.7);
}

.bandeau__phrase {
  margin: 0;
  max-width: 68ch;
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 31px);
  line-height: 1.32;
  color: var(--fond);
  text-wrap: pretty;
}

/* ---------- Entreprises ---------- */

.entreprises {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: var(--air-section) var(--marge) 0;

  .titre-section {
    max-width: 22ch;
    margin-bottom: 72px;
  }
}

.entreprises__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

.entreprises__texte {
  .texte + .texte {
    margin-top: 26px;
  }
}

.entreprises__image {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: 50% 50%;
}

.metiers {
  margin: 44px 0 0;
  padding: 22px 0 0;
  list-style: none;
  border-top: 1px solid rgba(46, 50, 52, 0.2);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 clamp(24px, 4vw, 56px);

  li {
    padding: 14px 0;
    border-bottom: 1px solid rgba(46, 50, 52, 0.13);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.01em;
    color: var(--encre);
  }
}

.invite {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 22px;
  align-items: center;

  .ico {
    width: 30px;
    height: 30px;
    color: var(--vert);
  }

  p {
    margin: 0;
    font-family: var(--police-titre);
    font-style: italic;
    font-weight: 500;
    font-size: 27px;
    line-height: 1.34;
    color: var(--vert);
  }
}

/* ---------- Separateur ---------- */

.separateur {
  max-width: var(--largeur);
  margin: clamp(88px, 11vw, 132px) auto 0;
  padding: 0 var(--marge);

  span {
    display: block;
    height: 8px;
    background: var(--vert);
    clip-path: ellipse(50% 50% at 50% 50%);
  }
}

/* ---------- Immobilier ---------- */

.immobilier {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: clamp(76px, 9vw, 120px) var(--marge) 0;
}

.immobilier__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}

.immobilier__titre {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: clamp(38px, 4.8vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--encre);
}

.immobilier__texte {
  padding-top: 10px;

  .texte--large + .texte--large {
    margin-top: 24px;
  }
}

.immobilier__images {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;

  img {
    display: block;
    width: 100%;
    height: 400px;
    object-fit: cover;

    &:first-child {
      object-position: 50% 58%;
    }
  }
}

.actifs {
  margin: 40px 0 0;
  padding: 26px 0 0;
  list-style: none;
  border-top: 1px solid var(--filet-moyen);
  display: flex;
  gap: 40px;
  flex-wrap: wrap;

  li {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .ico {
    width: 26px;
    height: 26px;
    color: var(--vert);
  }

  span {
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--encre);
  }
}

/* ---------- Formulaire ---------- */

.opportunite {
  margin-top: var(--air-section);
  background: var(--fond-sable);
  border-top: 1px solid var(--filet);
}

.opportunite__grille {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: clamp(80px, 10vw, 124px) var(--marge) clamp(84px, 10vw, 132px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(44px, 6vw, 96px);
  align-items: start;
}

.opportunite__marque {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 30px;

  .ico {
    width: 26px;
    height: 26px;
    color: var(--vert);
  }

  .surtitre {
    margin: 0;
  }
}

.opportunite__titre {
  margin: 0 0 40px;
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: clamp(38px, 4.6vw, 66px);
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--encre);
}

.opportunite__texte + .opportunite__texte {
  margin-top: 22px;
}

.gage {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(46, 50, 52, 0.2);
  display: flex;
  align-items: center;
  gap: 12px;

  .ico {
    width: 20px;
    height: 20px;
    color: var(--gris);
  }

  p {
    margin: 0;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gris);
  }
}

.formulaire {
  display: grid;
  gap: 30px;
}

.champ {
  display: grid;
  gap: 10px;

  input,
  select,
  textarea {
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--filet-champ);
    padding: 10px 0;
    font-size: 18px;
    color: var(--encre);
    transition: border-color 0.18s ease;

    &:focus {
      outline: none;
      border-bottom-color: var(--vert);
    }
  }

  select {
    appearance: none;
  }

  textarea {
    resize: vertical;
  }
}

.champ__libelle {
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
}

.champs-groupe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
}

.champ-fichier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--filet-champ);
  cursor: pointer;

  input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  &:focus-within {
    border-bottom-color: var(--vert);
  }
}

.champ-fichier__action {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vert);

  .ico {
    width: 17px;
    height: 17px;
  }
}

.formulaire__envoi {
  justify-self: start;
  margin-top: 18px;
  font-size: 14px;
  letter-spacing: 0.18em;
  padding: 19px 36px;

  &[disabled] {
    opacity: 0.6;
    cursor: progress;
  }
}

.formulaire__reponse {
  margin: 0;
  padding: 16px 20px;
  font-size: 16px;
  line-height: 1.6;
  border-left: 3px solid var(--vert);
  background: rgba(31, 92, 43, 0.06);
  color: var(--encre-doux);

  &[data-etat="erreur"] {
    border-left-color: #a3322b;
    background: rgba(163, 50, 43, 0.07);
  }

  &[hidden] {
    display: none;
  }
}

/* Piege a robots : invisible a l'oeil, rempli seulement par un automate */
.appat {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

.pied {
  background: var(--fond);
}

.pied__barre {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: clamp(44px, 6vw, 60px) var(--marge) clamp(48px, 6vw, 68px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px 40px;
  flex-wrap: wrap;
  border-top: 1px solid var(--filet-moyen);

  /* Le pied se centre quand la barre devient etroite */
  @media (max-width: 700px) {
    justify-content: center;
    text-align: center;
  }
}

.pied__logo {
  height: 62px;
  width: auto;
  display: block;
  flex: none;
}

.pied__liens {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 14px 32px;
  margin-left: auto;
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: var(--gris);
    cursor: pointer;
    transition: color 0.18s ease;

    &:hover {
      color: var(--vert);
    }
  }

  @media (max-width: 700px) {
    margin-left: 0;
    flex: 1 0 100%;
    justify-content: center;
  }
}

.pied__mention {
  flex: 1 0 100%;
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 20px;
  border-top: 1px solid var(--filet-doux);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 16px;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sable-fonce);

  a {
    color: var(--gris);

    &:hover {
      color: var(--vert);
    }
  }
}

.pied__losange {
  width: 4px;
  height: 4px;
  background: var(--sable);
  transform: rotate(45deg);
}

/* ---------- Fenetre modale ---------- */

/* N'appliquer la mise en page qu'au dialogue OUVERT : un display: flex sec
   ecrase le display: none que le navigateur pose sur <dialog> ferme, et la
   fenetre s'afficherait des le chargement. */
.popin[open] {
  display: flex;
}

.popin {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(28, 30, 28, 0.42);
  align-items: flex-start;
  justify-content: center;
  padding: var(--marge);
  border: none;
  overflow-y: auto;

  /* Le navigateur applique a <dialog> un margin: auto et un max-width par
     defaut. Avec inset: 0, cela ne l'etire pas : cela le CENTRE a la taille de
     son contenu, et le voile ne couvre alors qu'une bande centrale au lieu de
     toute la fenetre. Il faut donc annuler explicitement les trois. */
  margin: 0;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;

  &::backdrop {
    background: rgba(28, 30, 28, 0.42);
  }
}

.popin__boite {
  position: relative;
  width: 100%;
  max-width: 760px;
  max-height: 84vh;
  overflow-y: auto;
  background: var(--fond);
  border: 1px solid var(--filet-fort);
  padding: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 56px) clamp(36px, 5vw, 60px);
}

.popin__fermer {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(46, 50, 52, 0.2);
  cursor: pointer;
  color: var(--encre);
  transition:
    border-color 0.18s ease,
    color 0.18s ease;

  &:hover {
    border-color: var(--vert);
    color: var(--vert);
  }

  .ico {
    width: 18px;
    height: 18px;
  }
}

.popin__surtitre {
  margin: 0 0 18px;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--vert);
}

.popin__titre {
  margin: 0 0 30px;
  max-width: 24ch;
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.014em;
  color: var(--encre);
}

.popin__corps {
  display: grid;
  gap: 26px;
  border-top: 1px solid rgba(46, 50, 52, 0.18);
  padding-top: 28px;

  h3 {
    margin: 0 0 10px;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gris);
  }

  /* La maquette posait ces blocs en monospace 12.5 px. Ce rendu « document »
     tient sur trois lignes de gabarit, pas sur de vraies mentions legales :
     l'oeil decroche. Retour a la police de labeur, taille et interligne
     releves, en gardant la couleur sourde qui distingue le bloc du reste. */
  p {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
    color: var(--gris-clair);
    text-wrap: pretty;
  }

  strong {
    font-weight: 600;
    color: var(--encre-doux);
  }
}