/* ====================================================================
   Liza Soulagnet — Feuille de style principale
   Palette : vert forêt / crème ivoire, typographie Montserrat.
   ==================================================================== */

/* ============================ POLICES ============================ */
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================ TOKENS ============================ */
:root {
  --forest: #2b3618;
  --forest-dark: #202810;
  --forest-light: #3b4a22;
  --cream: #fffff0; /* blanc cassé de la charte (identique au logo) */
  --cream-dim: #f1f1e0;
  --ink: #2b3618;

  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --container: 72rem;
  --gutter: 1.5rem;
  --header-h: 4.5rem;

  --radius: 4px;
  --radius-lg: 8px;

  --step-eyebrow: 0.78rem;
  --step-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --step-h2: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  --step-h1: clamp(2.5rem, 1.4rem + 5vw, 5rem);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  /* Cale l'ancre juste sous l'en-tête collant : tout offset supplémentaire
     laisserait apparaître un bout de la section précédente au-dessus de la cible. */
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  --surface: var(--cream);
  font-family: var(--font);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  line-height: 1.2;
  margin: 0;
  font-weight: 700;
}

p {
  margin: 0 0 1.1em;
}

p:last-child {
  margin-bottom: 0;
}

ul {
  margin: 0;
  padding: 0;
}

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--forest);
  color: var(--cream);
  text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: transform 0.2s var(--ease);
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

/* ============================ SURFACES ============================ */
/* `--surface` = couleur de fond courante. Les titres `bracketed` s'en servent
   pour trouer le cadre qui passe derrière eux. Toute section posant un tel
   titre doit donc la définir. */
.surface--forest {
  --surface: var(--forest);
  background: var(--forest);
  color: var(--cream);
}

.surface--cream {
  --surface: var(--cream);
  background: var(--cream);
  color: var(--forest);
}

/* ============================ BOUTONS ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.6rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
}

/* Sur fond forêt : bouton crème plein */
.btn--primary {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--forest);
}

.btn--primary:hover {
  background: #fff;
  border-color: #fff;
}

/* Sur fond crème : bouton forêt plein */
.surface--cream .btn--primary {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--cream);
}

.surface--cream .btn--primary:hover {
  background: var(--forest-light);
  border-color: var(--forest-light);
}

.btn--ghost {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

.btn--ghost:hover {
  background: rgb(254 254 239 /0.12);
}

.btn--dark {
  color: var(--forest);
}

.btn--dark:hover {
  background: var(--forest);
  color: var(--cream);
}

.btn--lg {
  padding: 1.05rem 2.2rem;
  font-size: 0.95rem;
}

.btn--nav {
  padding: 0.6rem 1.1rem;
  background: var(--forest);
  border-color: var(--forest);
  color: var(--cream);
  font-size: 0.72rem;
}

.btn--nav:hover {
  background: var(--forest-light);
  border-color: var(--forest-light);
}

/* ============================ EN-TÊTE ============================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid rgb(43 54 24 /0.1);
  transition: box-shadow 0.25s var(--ease);
}

.site-header.is-scrolled {
  box-shadow: 0 4px 20px rgb(43 54 24 /0.1);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* Logo complet en réduction : le nom y devient minuscule, c'est assumé — le
   texte reste accessible via l'`aria-label` du lien. */
.brand__logo {
  display: block;
  width: auto;
  height: 3.25rem;
}

/* Bouton burger */
/* Icône burger seule : pas de cadre. La taille 2.75rem est conservée comme
   zone de clic accessible (cible tactile ≥ 44px). */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 1.25rem;
  height: 2px;
  margin-inline: auto;
  background: var(--forest);
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
}

.site-nav__list a {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

/* La couleur reste sur `:not(.btn)` : sinon elle l’emporterait sur celle du
   bouton, qui deviendrait vert sur vert. */
.site-nav__list a:not(.btn) {
  position: relative;
  padding-block: 0.25rem;
  color: var(--forest);
}

.site-nav__list a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: currentColor;
  transition: width 0.25s var(--ease);
}

.site-nav__list a:not(.btn):hover::after,
.site-nav__list a:not(.btn).is-active::after {
  width: 100%;
}

/* ============================ HERO ============================ */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--header-h));
  padding-block: 5rem 7rem;
  text-align: center;
  /* Le logo décalé peut faire dépasser sa marge transparente à droite sur les
     très petits écrans (le nom, lui, reste dans le cadre). On coupe ce dépassement
     ici plutôt que sur body/html, pour ne pas casser le `position: sticky` de
     l'en-tête. */
  overflow-x: clip;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- Logo ----------
   Fichier fourni par Liza. Le carré du logo est PLEIN : il est fait pour se
   fondre dans le fond, ne laissant voir que le trait intérieur et le nom.
   D'où le couplage strict fichier / surface, à ne pas intervertir :
     - fond vert  (#2b3618) → `logo.svg`         (carré vert,  trait crème)
     - fond crème (#fffff0) → `logo-inverse.svg` (carré crème, trait vert)
   Poser le mauvais fichier fait apparaître un aplat rectangulaire. */
/* `align-self: stretch` : le h1 prend TOUTE la largeur du hero. Sans ça, en flex
   `align-items: center`, il se dimensionne sur son contenu et la largeur en % de
   l'image ci-dessous se résout de façon circulaire (sur la taille intrinsèque du
   SVG) : l'image n'est alors plus réellement centrée, et aucun décalage ne peut
   fiablement centrer le carré. */
.hero__title {
  align-self: stretch;
  margin: 0 0 2rem;
}

/* Le carré occupe la moitié gauche du logo : son centre tombe à 31.3 % de la
   largeur de l'image (mesuré au pixel sur logo.svg). Centrer l'image placerait
   le bloc « carré + nom » au milieu, pas le carré. On centre donc l'image
   (margin auto) PUIS on la décale de 50 − 31.3 = 18.7 % : le CARRÉ tombe sur
   l'axe du hero, le nom débordant à sa droite.
   Largeur DÉFINIE en vw (jamais en %) pour éviter la circularité décrite plus
   haut ; à 18.7 % le nom reste dans l'écran, même sur mobile. */
.hero__logo {
  display: block;
  width: min(26rem, 78vw);
  height: auto;
  margin-inline: auto;
  transform: translateX(18.7%);
}

.hero__tagline {
  margin-bottom: 2rem;
  font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.15rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.75rem;
}

.hero__scroll {
  position: absolute;
  /* Centrage par marges auto (et non translateX) : le transform reste libre
     pour l'animation d'entrée `rise`, qui sinon écraserait le centrage. */
  left: 0;
  right: 0;
  bottom: 2rem;
  margin-inline: auto;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 2.6rem;
  border: 1.5px solid rgb(254 254 239 /0.5);
  border-radius: 1rem;
}

.hero__scroll-dot {
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: var(--cream);
  animation: scroll-hint 1.8s var(--ease) infinite;
}

@keyframes scroll-hint {
  0% { transform: translateY(-5px); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(6px); opacity: 0; }
}

/* ============================ SECTIONS ============================ */
.section {
  padding-block: clamp(3rem, 6vw, 5.5rem);
}

.section__head {
  margin-bottom: 3.5rem;
}

.section__head--center {
  text-align: center;
}

.section__title {
  font-size: var(--step-h2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.section__head--center .section__title {
  display: inline-block;
}

.section__intro {
  margin-top: 1rem;
  opacity: 0.8;
}

/* Même principe que le logo : le cadre passe derrière le titre, qui le troue. */
.bracketed {
  position: relative;
  display: inline-block;
  margin-block: 0.5em;
  padding-left: 0.72em;
  /* Texte calé à gauche : quand le titre passe sur plusieurs lignes (mobile),
     la 1re ligne commence toujours au niveau du cadre, qui chevauche donc
     ses premières lettres au lieu de flotter, isolé, au centre du bloc. */
  text-align: left;
}

.bracketed::before {
  content: '';
  position: absolute;
  left: 0;
  /* Ancré sur la 1re ligne (≈ moitié de la line-height) et non au centre
     vertical du bloc : identique en une ligne, correct en plusieurs. */
  top: 0.6em;
  width: 2.5em;
  height: 2.5em;
  transform: translateY(-50%);
  border: 0.18em solid currentColor; /* trait épaissi, plus proche du logo */
}

.bracketed > span {
  position: relative;
  padding: 0.14em 0.1em;
  background: var(--surface);
}

/* ---------- À propos ---------- */
.about {
  max-width: 52rem;
  margin-inline: auto;
}

.about strong {
  font-weight: 700;
}

/* Contenus long-form justifiés. La césure automatique (activée par lang="fr")
   évite les « rivières » de blancs et préserve la lisibilité ; la dernière ligne
   reste calée à gauche (text-align-last par défaut). */
.about p,
.legal__body p,
.legal__body li,
.pack__target,
.pack__list li {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* ---------- Valeur ajoutée ---------- */
.values {
  display: grid;
  gap: 1.25rem;
  max-width: 56rem;
  margin-inline: auto;
  list-style: none;
}

.value {
  position: relative;
  padding-left: 3.25rem;
  font-size: var(--step-lead);
  line-height: 1.6;
}

/* Coche extraite de la maquette vectorielle (carré crème, chevron vert). */
.value::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2.1rem;
  height: 2.1rem;
  background: url('/assets/img/check.svg') center / contain no-repeat;
}

/* ---------- Services ---------- */
.packs {
  display: grid;
  /* 20rem : les cartes basculent à 2 colonnes dès que 3 deviendraient trop
     étroites — le titre le plus long (« Pack Assistante commerciale ») reste
     ainsi sur une seule ligne à toutes les largeurs. */
  /* `min(20rem, 100%)` : la colonne vaut 20rem sur grand écran (garde les titres
     de pack sur une ligne) mais ne dépasse jamais 100 % du conteneur sur mobile
     — sinon les cartes débordent en largeur sur les petits écrans. */
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1.75rem;
  align-items: start;
}

.pack {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2.25rem 1.75rem;
  background: transparent;
  border: 1px solid rgb(43 54 24 /0.25);
  border-radius: var(--radius-lg);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.pack:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgb(43 54 24 /0.12);
}

/* Carte du milieu : léger fond teinté + trait renforcé pour scander la lecture
   (effet d'alternance, sans hiérarchie d'importance). */
.pack--alt {
  background: rgb(43 54 24 /0.04);
  border-color: rgb(43 54 24 /0.4);
}

.pack__head {
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgb(43 54 24 /0.18);
}

.pack__title {
  margin-bottom: 0.6rem;
  font-size: 1.08rem;
  letter-spacing: 0; /* le plus long titre (« Assistante commerciale ») tient ainsi sur une ligne */
}

.pack__target {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0.75;
}

.pack__list {
  display: grid;
  gap: 0.7rem;
  list-style: none;
  font-size: 0.95rem;
  line-height: 1.5;
}

.pack__list li {
  position: relative;
  padding-left: 1.1rem;
}

.pack__list li::before {
  content: '–';
  position: absolute;
  left: 0;
  font-weight: 700;
}

.pack__note {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px dashed rgb(43 54 24 /0.2);
  font-size: 0.85rem;
  font-style: italic;
  opacity: 0.75;
}

.services__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-top: 3.5rem;
  padding-top: 3rem;
  border-top: 1px solid rgb(43 54 24 /0.18);
  text-align: center;
}

.pricing {
  margin: 0;
}

.pricing__value {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.services__closing {
  max-width: 48ch;
  opacity: 0.85;
}

/* ---------- Outils ---------- */
/* Deux colonnes, sans cadre : icône + libellé, comme dans la maquette. */
.tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 3rem;
  max-width: 46rem;
  margin-inline: auto;
  list-style: none;
}

.tool {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  font-size: 1rem;
  letter-spacing: 0.06em;
}

/* Logos extraits de la maquette vectorielle, déjà aux couleurs de la charte. */
.tool__icon {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
}

/* ---------- Témoignages ----------
   Deux colonnes flex explicites (et non `columns:` multicol) : la répartition
   des cartes dans le HTML est calculée pour équilibrer la hauteur des colonnes
   malgré des témoignages de longueurs très inégales. */
.testimonials {
  display: flex;
  align-items: stretch; /* les 2 colonnes adoptent la même hauteur (la plus haute) */
  gap: 1.75rem;
}

.testimonials__col {
  flex: 1 1 0;
  min-width: 0; /* autorise le rétrécissement sous la largeur intrinsèque */
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  /* Répartit l'écart de hauteur résiduel dans les inter-cartes : les bas des
     deux colonnes s'alignent exactement. */
  justify-content: space-between;
}

.testimonial {
  margin: 0; /* l'espacement vient du `gap` de la colonne */
  padding: 1.75rem;
  border: 1px solid rgb(43 54 24 /0.28);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / 0.35);
}

.testimonial blockquote {
  margin: 0;
}

.testimonial blockquote p {
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.65;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Une seule paire de guillemets par témoignage : ouvrante au tout début,
   fermante à la toute fin — et non répétée sur chaque paragraphe (Lionel, Neda). */
.testimonial blockquote p:first-child::before {
  content: '« ';
}

.testimonial blockquote p:last-child::after {
  content: ' »';
}

.testimonial__author {
  margin-top: 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.testimonial__author::before {
  content: '— ';
}

/* ---------- Contact ---------- */
.contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.contact .section__title {
  margin-bottom: 1.5rem;
}

.contact__text {
  max-width: 42ch;
  margin-bottom: 2.5rem;
  font-size: var(--step-lead);
  opacity: 0.92;
}

.contact__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

.contact__linkedin {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s var(--ease);
}

.contact__linkedin:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ============================ PIED DE PAGE ============================ */
/* Fond au vert exact du logo : c'est ce qui permet au carré de `logo.svg` de
   s'y fondre, ne laissant apparaître que le trait et le nom. */
.site-footer {
  --surface: var(--forest);
  padding-block: 3.5rem;
  background: var(--forest);
  color: var(--cream);
  border-top: 1px solid rgb(254 254 239 /0.14);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2.5rem;
  align-items: start;
}

.site-footer__tagline {
  margin: 0.9rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}

.site-footer__nav ul {
  display: grid;
  gap: 0.6rem;
  list-style: none;
}

.site-footer__nav a {
  font-size: 0.9rem;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s var(--ease);
}

.site-footer__nav a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-footer__legal {
  font-size: 0.82rem;
  line-height: 1.8;
  opacity: 0.7;
}

.site-footer__legal p {
  margin: 0;
}

/* ============================ PAGE LÉGALE ============================ */
.page-legal {
  background: var(--cream);
}

.legal {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 8vw, 6rem);
}

.legal__inner {
  max-width: 52rem;
}

.breadcrumb {
  margin-bottom: 2.5rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.breadcrumb a {
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumb span[aria-hidden] {
  margin-inline: 0.4rem;
}

.legal__title {
  margin-bottom: 2.5rem;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.legal__identity {
  margin-bottom: 3.5rem;
  padding: 1.75rem;
  background: var(--forest);
  color: var(--cream);
  border-radius: var(--radius-lg);
}

.legal__identity dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.5rem;
  margin: 0;
}

.legal__identity dt {
  margin-bottom: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.65;
}

.legal__identity dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
}

.legal__body article {
  padding-top: 2.25rem;
  margin-top: 2.25rem;
  border-top: 1px solid rgb(43 54 24 /0.15);
}

.legal__body article:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.legal__body h2 {
  margin-bottom: 1.1rem;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}

.legal__body h3 {
  margin: 1.75rem 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
}

.legal__body ul {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 1.1em;
  padding-left: 1.4rem;
  list-style: none;
}

.legal__body li {
  position: relative;
}

.legal__body li::before {
  content: '–';
  position: absolute;
  left: -1.4rem;
  font-weight: 700;
}

.legal__back {
  margin-top: 3.5rem;
  text-align: center;
}

/* ============================ PAGE 404 ============================ */
.error404 {
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--header-h) - 6rem);
}

.error404__inner {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}

.error404__code {
  margin: 0;
  font-size: clamp(5rem, 22vw, 12rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.error404__title {
  margin-bottom: 1rem;
  font-size: var(--step-h2);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.error404__text {
  max-width: 36ch;
  margin: 0 auto 2.25rem;
  opacity: 0.85;
}

.error404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* ============================ ANIMATIONS ============================ */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Entrée du hero au chargement. CSS pur : joue même sans JavaScript. */
.hero__title {
  animation: rise 0.8s var(--ease) both;
}

.hero__tagline {
  animation: rise 0.8s var(--ease) 0.15s both;
}

.hero__actions {
  animation: rise 0.8s var(--ease) 0.3s both;
}

.hero__scroll {
  animation: rise 0.8s var(--ease) 0.7s both;
}

/* Révélation au défilement.
   `.js` est posée par un script en <head> : les éléments sont donc masqués dès
   la première peinture (pas de clignotement), et sans JavaScript rien n'est
   jamais masqué — le contenu reste lisible et indexable en l'état.

   ⚠️ Cette liste de sélecteurs est le pendant de REVEAL_SELECTOR dans main.js :
   les deux doivent rester synchronisées. */
.js .section__head,
.js .about,
.js .value,
.js .pack,
.js .services__footer,
.js .tool,
.js .testimonial,
.js .contact .section__title,
.js .contact__text,
.js .contact__actions {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  /* `--reveal-i` = rang dans la fratrie, posé en JS : les cartes d'une même
     grille entrent en cascade plutôt que toutes d'un bloc. */
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
}

.js .is-visible {
  opacity: 1;
  transform: none;
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 60rem) {
  .about {
    grid-template-columns: 1fr;
  }

  /* Sous 60rem : les deux colonnes s'empilent (une seule colonne visuelle). */
  .testimonials {
    flex-direction: column;
  }
}

@media (max-width: 48rem) {
  .nav-toggle {
    display: flex;
  }

  .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    padding: 1.25rem var(--gutter) 1.75rem;
    background: var(--cream);
    border-bottom: 1px solid rgb(43 54 24 /0.12);
    box-shadow: 0 16px 32px rgb(43 54 24 /0.14);
  }

  .site-nav.is-open {
    display: block;
  }

  /* La page légale n’a qu’un bouton : il reste toujours visible. */
  .site-nav--simple {
    position: static;
    display: block;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .site-header__inner {
    position: relative;
    flex-wrap: wrap;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
  }

  .site-nav--simple .site-nav__list {
    flex-direction: row;
    justify-content: flex-end;
  }

  .site-nav__list a:not(.btn) {
    display: block;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgb(43 54 24 /0.08);
  }

  .site-nav__list .btn--nav {
    margin-top: 1rem;
  }

  .site-nav--simple .site-nav__list .btn--nav {
    margin-top: 0;
  }

  .hero__actions .btn,
  .contact__actions .btn {
    width: 100%;
  }

  .hero__actions {
    width: min(20rem, 100%);
  }

  .hero__scroll {
    display: none;
  }

  .about__stats {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  }
}

/* Petits écrans : outils sur une seule colonne, icônes un peu plus petites */
@media (max-width: 36rem) {
  .tools {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  .tool__icon {
    width: 2.4rem;
    height: 2.4rem;
  }
}

/* ============================ PRÉFÉRENCES ============================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  .btn:hover,
  .pack:hover {
    transform: none;
  }

  /* Aucun décalage ni translation : le contenu est simplement là. */
  .js .section__head,
  .js .about,
  .js .value,
  .js .pack,
  .js .services__footer,
  .js .tool,
  .js .testimonial,
  .js .contact .section__title,
  .js .contact__text,
  .js .contact__actions {
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  .hero__scroll {
    display: none;
  }
}

@media print {
  .site-header,
  .nav-toggle,
  .hero__scroll,
  .legal__back {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}