/* Direction A, "Registre", teinte "Teal Acliam".
   Logique : la page est un document de cabinet. Une grille stricte, des filets
   plutot que des cartes, une numerotation qui court du haut en bas, et rien qui
   bouge. Les offres sont des LIGNES d'un registre, pas trois tuiles cote a cote :
   c'est ce qui la separe de toutes les pages d'agence.
   Type : IBM Plex Sans, avec Plex Mono sur les etiquettes. */

:root {
  /* Roles de couleur. La structure ne connait que ces noms : un teintage se
     fait en redefinissant ce bloc, jamais en touchant aux regles plus bas. */
  --papier:     #FAFBFA;   /* fond principal                                */
  --fond-alt:   #E9EFEC;   /* fond des sections alternees                   */
  --encre:      #141A18;   /* texte principal                               */
  --doux:       #566159;   /* texte secondaire                              */
  --accent:     #0B5D5D;   /* couleur d'action : bouton, liens, filets      */
  --accent-ink: #FFFFFF;   /* texte pose sur l'accent                       */
  --second:     #A0522D;   /* couleur de reperage : numeros, etiquettes     */
  --filet:      #D5DDD8;
  --filet-fort: #AEBAB3;
  --fin-fond:   #10312E;   /* fond du bloc de contact                       */
  --fin-encre:  #EEF4F1;
  --fin-doux:   #93A9A2;
  --fin-lien:   #FFFFFF;
  --fin-soulign:#63C9BE;

  --texte: "Plex Sans", system-ui, sans-serif;
  --mono:  "Plex Mono", ui-monospace, monospace;

  --gouttiere: clamp(1.25rem, 5vw, 5rem);
  --maxw: 78rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.label {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--doux);
  margin: 0;
}

/* ------------------------------------------------------------------ barre -- */
.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem var(--gouttiere);
  background: color-mix(in oklab, var(--papier) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--filet);
}
.mark { font-weight: 600; letter-spacing: -0.01em; text-decoration: none; font-size: 1.05rem; }
.bar nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.25rem); }
.bar nav a { font-size: 0.92rem; text-decoration: none; color: var(--doux); }
.bar nav a:hover { color: var(--encre); }
.bar__cta {
  font-family: var(--mono); font-size: 0.88rem !important;
  color: var(--accent) !important;
  background: color-mix(in oklab, var(--accent) 6%, transparent);
  border: 1px solid var(--filet-fort);
  padding: 0.4rem 0.7rem;
}
.bar__cta:hover { border-color: var(--accent); }
@media (max-width: 620px) { .bar nav a:not(.bar__cta) { display: none; } }

/* ------------------------------------------------------------------- hero -- */
.hero {
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(3.5rem, 9vw, 7.5rem) var(--gouttiere) clamp(2.5rem, 5vw, 4rem);
}
.hero__grid { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); margin-top: 1.75rem; }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: end; }
}
.hero h1 {
  margin: 0;
  font-size: clamp(2.1rem, 1.1rem + 3.6vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -0.028em;
  font-weight: 500;
  text-wrap: balance;
  max-width: 20ch;
}
.hero__side > p:first-child { margin: 0 0 1.5rem; color: var(--doux); max-width: 38ch; }
.hero__note { margin: 0.8rem 0 0; color: var(--doux); font-size: 0.88rem; }
.btn {
  display: inline-block;
  padding: 0.72rem 1.35rem;
  background: var(--accent);
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 140ms ease-out;
}
.btn { color: var(--accent-ink); }
.btn:hover { filter: brightness(0.86); }
.btn:active { transform: translateY(1px); }

/* ------------------------------------------------------------------ blocs -- */
.bloc {
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(3rem, 6vw, 5.5rem) var(--gouttiere);
}
.bloc--gris {
  max-width: none;
  background: var(--fond-alt);
  border-block: 1px solid var(--filet);
}
.bloc--gris > * { max-width: var(--maxw); margin-inline: auto; }
.bloc__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.bloc__head h2 {
  margin: 0.6rem 0 0;
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Les offres sont des lignes de registre. Un filet superieur par ligne, pas de
   boite : une grille de trois tuiles identiques est le marqueur le plus
   reconnaissable d'une page fabriquee a la chaine. */
.registre { list-style: none; margin: 0; padding: 0; }
.registre li {
  display: grid; gap: 0.35rem 2.5rem;
  padding: clamp(1.4rem, 3vw, 2.2rem) 0;
  border-top: 1px solid var(--filet-fort);
}
.registre li:last-child { border-bottom: 1px solid var(--filet-fort); }
@media (min-width: 1100px) {
  .registre li {
    grid-template-columns: 3.5rem minmax(0, 15rem) minmax(0, 1fr) minmax(0, 13rem);
    align-items: start;
  }
}
.registre__n { font-family: var(--mono); font-size: 0.82rem; color: var(--second); padding-top: 0.35rem; }
.registre h3 { margin: 0; font-size: 1.18rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.25; }
.registre p { margin: 0; color: var(--doux); max-width: 52ch; }
.registre__meta {
  font-family: var(--mono); font-size: 0.82rem; color: var(--doux);
  letter-spacing: 0.02em; padding-top: 0.2rem;
}

/* ------------------------------------------------------------------ etapes -- */
.etapes { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 2rem; counter-reset: e; }
@media (min-width: 780px) { .etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); } }
.etapes li { border-top: 2px solid var(--encre); padding-top: 0.9rem; }
.etapes__n { font-family: var(--mono); font-size: 0.82rem; color: var(--second); }
.etapes h3 { margin: 0.45rem 0 0.35rem; font-size: 1.02rem; font-weight: 600; }
.etapes p { margin: 0; color: var(--doux); font-size: 0.95rem; }

/* ------------------------------------------------------------ engagements -- */
.engagements { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 780px) { .engagements { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 3rem); } }
.engagements li { border-left: 2px solid var(--accent); padding-left: 1.1rem; }
.engagements h3 { margin: 0 0 0.35rem; font-size: 1.02rem; font-weight: 600; }
.engagements p { margin: 0; color: var(--doux); font-size: 0.95rem; }

/* ---------------------------------------------------------------- contact -- */
.contact {
  background: var(--fin-fond); color: var(--fin-encre);
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--gouttiere);
  text-align: center;
}
.contact h2 {
  margin: 0 auto 0.75rem;
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem);
  font-weight: 500; letter-spacing: -0.02em; line-height: 1.12;
  max-width: 22ch;
}
.contact p { margin: 0 0 2rem; color: var(--fin-doux); }
.contact__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; }
.contact__mail {
  font-family: var(--mono);
  font-size: clamp(1.05rem, 0.8rem + 1vw, 1.6rem);
  color: var(--fin-lien);
  text-decoration-color: var(--fin-soulign);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.28em;
}
.contact__mail:hover { text-decoration-thickness: 3px; }
.contact__copy {
  color: var(--fin-encre);
  background: transparent;
  border: 1px solid var(--fin-doux);
  padding: 0.55rem 0.85rem;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}
.contact__copy:hover { border-color: var(--fin-encre); }
.contact__status { flex-basis: 100%; color: var(--fin-doux); font-size: 0.88rem; }
.contact__status:empty { display: none; }

/* ------------------------------------------------------------------- pied -- */
.pied {
  max-width: var(--maxw); margin-inline: auto;
  padding: 1.75rem var(--gouttiere) 2.5rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: 0.85rem; color: var(--doux);
}
.pied a { color: var(--doux); }
.pied a:hover { color: var(--accent); }