/* =========================================================
   DIRECTION GRAPHIQUE B
   L’Été des projets, Marion Juton
   =========================================================

   Cette feuille se charge APRÈS `styles.css` et ne fait que reprendre
   la direction artistique. Toute la base technique de la version A
   reste intacte : structure, responsive, formulaire, SEO, accessibilité.

   Trois familles, trois rôles :
     Des Montilles        le geste de marque, rare et ample
     Cormorant Garamond   les grands titres éditoriaux
     Manrope              les textes et les interfaces

   Des Montilles n’est PAS embarquée. Elle est lue sur le poste qui
   consulte la page, le temps de la conception. Repli de marque prévu
   pour la version publique : Cormorant Garamond italique.
   ========================================================= */

:root{
  --geste: "Des Montilles", "Cormorant Garamond", Georgia, serif;
  --sable-profond: #E2CDB6;
  --encre-fumee: rgba(31,44,65,.55);
}

/* Le geste de marque. Jamais de paragraphe, de menu, de bouton,
   de formulaire ni de texte technique. */
.geste{
  font-family: var(--geste);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.06;
}
/* Tant que Des Montilles est absente, le repli passe en italique
   pour conserver le contraste de geste. */
@supports not (font-family: "Des Montilles"){ .geste{ font-style: italic; } }

/* =========================================================
   1. CHAPEAU
   Le logo et la navigation reprennent de la présence.
   ========================================================= */
.entete{ background: transparent; backdrop-filter: none; border-bottom: 0; }
.entete.est-detache{
  background: rgba(251,246,239,.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--encre-12);
}

.entete__inner{ min-height: clamp(5.5rem, 7.5vw, 7.25rem); align-items: flex-start; padding-top: clamp(1.5rem, 2.2vw, 2.25rem); }

.marque{ gap: .55rem; }
.marque__logo{ height: clamp(2.6rem, 4.2vw, 3.6rem); }
.marque__signature{
  font-family: var(--geste);
  font-style: normal;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  color: var(--terra-txt);
  line-height: 1;
  padding-left: .18em;
}

.nav__liste{ gap: clamp(.85rem, 1.5vw, 1.2rem); padding-top: .45rem; align-items: center; }
.nav__liste li:first-child{ margin-right: clamp(.45rem, .9vw, .9rem); }
.nav__liste a{
  font-size: clamp(.875rem, 1.05vw, .9688rem);
  font-weight: 500;
  color: var(--encre);
  padding-bottom: .3rem;
  border-bottom: 1px solid transparent;
}
.nav__liste li:not(:first-child) a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(8.6rem, 9vw, 10rem);
  padding: .58rem .95rem .54rem;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  border: 1px solid var(--encre-16);
  border-radius: 2px;
  background: rgba(251,246,239,.32);
  backdrop-filter: blur(2px);
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.nav__liste li:first-child a:hover{ border-bottom-color: var(--terracotta); }
.nav__liste li:not(:first-child) a:hover{ border-color: var(--terracotta); background: rgba(251,246,239,.55); }

.nav__bouton{ padding: .7rem 1.05rem; font-size: .875rem; }

/* =========================================================
   2. PREMIER ÉCRAN
   Le sable est la matière, pas un aplat.
   ========================================================= */
/* Le sable est posé sur le document lui-même, derrière l’en-tête.
   Sans cela, l’en-tête transparent laisse voir l’ivoire et une couture
   blanche apparaît juste au-dessus du sable. */
body::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 100svh;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(251,246,239,.30) 0%, rgba(251,246,239,0) 22%, rgba(251,246,239,0) 76%, rgba(240,226,212,.34) 100%),
    var(--sable);
}

.seuil{
  position: relative;
  min-height: calc(100svh - clamp(5.5rem, 7.5vw, 7.25rem));
  background: transparent;
  padding-block: 0 clamp(2rem, 3.5vw, 3rem);
  justify-content: flex-start;
  overflow: clip;
}

/* Le contour décoratif de la version A est retiré : la trace est
   maintenant dans le sable lui-même. */
.seuil__signe{ display: none; }

.seuil__contenu{
  position: relative;
  display: flex; flex-direction: column;
  justify-content: center;
  flex: 1;
  padding-block: clamp(3rem, 7vw, 6rem) 0;
}

/* Niveau 3 de la hiérarchie : la capsule */
.seuil__capsule{
  font-family: var(--geste);
  font-size: clamp(2.15rem, 4.4vw, 3.55rem);
  color: var(--terra-txt);
  margin: 0 0 clamp(.9rem, 1.6vw, 1.4rem);
  line-height: 1;
}

/* Niveau 4 : l’accroche */
.seuil__titre{
  font-family: var(--serif);
  font-size: clamp(3rem, 7.4vw, 6.1rem);
  font-style: normal;
  font-weight: 300;
  line-height: .99;
  letter-spacing: -.028em;
  max-width: 14ch;
  margin-bottom: clamp(1.9rem, 3.2vw, 2.8rem);
  color: var(--encre);
}

.seuil__texte{
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.62;
  color: var(--encre);
  max-width: 42ch;
  padding-left: clamp(1.25rem, 1.8vw, 1.6rem);
  border-left: 2px solid var(--terracotta);
}

.seuil__pied{ position: relative; padding-top: 0; }
.seuil__passage{
  font-size: .9688rem;
  border-bottom-color: var(--encre-45);
}

/* =========================================================
   3. QUATRE SITUATIONS
   Composition asymétrique, grands numéros, aucune carte.
   ========================================================= */
#situations.fond-sable{ background: var(--ivoire); }

#situations .tete{ max-width: 46ch; margin-bottom: clamp(3.5rem, 6vw, 5rem); }
#situations .titre-section{ font-size: clamp(2.1rem, 4.4vw, 3.4rem); max-width: 16ch; }

.situations{ display: block; }

.situation{
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3.25rem);
  align-items: start;
  padding-block: clamp(2.75rem, 5vw, 4.25rem);
  border-top: 1px solid var(--encre-14);
  background: transparent;
  border-radius: 0;
  margin: 0;
}
.situation:last-child{ border-bottom: 1px solid var(--encre-14); }

/* Décalage : une situation sur deux respire davantage à gauche */
.situation:nth-child(even){ padding-left: clamp(0rem, 6vw, 5.5rem); }

.situation__num{
  font-family: var(--serif);
  font-size: clamp(3.25rem, 6vw, 5rem);
  font-weight: 300;
  line-height: .8;
  color: var(--terracotta);
  opacity: .34;
  margin: 0;
}

.situation__titre{
  grid-column: 2;
  font-family: var(--sans);
  font-size: clamp(.9375rem, 1.05vw, 1.0625rem);
  font-weight: 500;
  color: var(--encre-70);
  line-height: 1.45;
  margin: 0;
}
.situation__mot{
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--encre);
  margin-bottom: .35rem;
}

.situation__probleme{
  grid-column: 3;
  grid-row: 1;
  font-size: clamp(1rem, 1.1vw, 1.0625rem);
  line-height: 1.66;
  color: var(--encre);
  margin: 0 0 1.15rem;
}
.situation__action{
  grid-column: 3;
  font-size: .9375rem;
  line-height: 1.68;
  color: var(--encre-70);
  margin: 0 0 1.35rem;
  padding-left: 1.1rem;
  border-left: 1px solid var(--terra-trait);
}
.situation__resultat{
  grid-column: 3;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--terra-txt);
  margin: 0;
}
.situation__resultat span{
  display: block;
  font-weight: 400;
  font-size: .8125rem;
  color: var(--encre-70);
  margin-bottom: .3rem;
}

/* La quatrième porte : la seule à changer de fond, sur toute la largeur */
.situation--rentree{
  position: relative;
  padding-inline: clamp(1.5rem, 3.5vw, 3rem);
  margin-inline: clamp(-1.5rem, -3.5vw, -3rem);
  background: var(--sable);
  border-top-color: transparent;
}
.situation--rentree .situation__num{ opacity: .5; }
.situation__marqueur{
  grid-column: 1 / -1;
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 500;
  color: var(--terra-txt);
  margin: 0 0 .5rem;
}

/* =========================================================
   4. MANIFESTE
   Un moment majeur, pas un paragraphe de plus.
   ========================================================= */
.manifeste{
  position: relative;
  padding-block: clamp(7rem, 15vw, 14rem);
  overflow: clip;
}
/* Matière : le même sable, en très faible densité, sur le bleu profond */
.manifeste::before{
  content: "";
  position: absolute; inset: 0;
  background: url("../img/sable-campagne-desktop.webp") center / cover no-repeat;
  mix-blend-mode: soft-light;
  opacity: .16;
  pointer-events: none;
}
.manifeste > .shell{ position: relative; }

.manifeste__titre{
  font-family: var(--geste);
  font-style: normal;
  font-size: clamp(3.4rem, 9vw, 7.6rem);
  line-height: .92;
  color: var(--ivoire);
  margin: 0 0 clamp(2.75rem, 6vw, 4.5rem);
}

.manifeste__phrase{
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3.6vw, 3.05rem);
  font-weight: 300;
  line-height: 1.24;
  letter-spacing: -.012em;
  color: var(--ivoire);
  max-width: 22ch;
  margin: 0 0 clamp(3rem, 6vw, 4.75rem);
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
  border-left: 2px solid var(--rose);
}

.manifeste__grille{ gap: clamp(2.5rem, 6vw, 5rem); max-width: 62rem; }
.manifeste__grille p{ font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.78; }
.manifeste__passage{ color: var(--rose); }

/* =========================================================
   5. ADAPTATIONS
   ========================================================= */
@media (max-width: 68rem){
  .situation{ grid-template-columns: minmax(0, 5rem) minmax(0, 1fr); }
  .situation__probleme, .situation__action, .situation__resultat{ grid-column: 2; }
  .situation__probleme{ grid-row: auto; margin-top: 1.35rem; }
  .situation:nth-child(even){ padding-left: 0; }
}

@media (max-width: 48rem){
  .seuil{ min-height: auto; padding-bottom: clamp(2.5rem, 6vw, 3.5rem); }
  body::before{ height: 118svh; background-position: center 58%; }
  .seuil__contenu{ padding-block: clamp(2.5rem, 8vw, 4rem) 0; }
  .seuil__titre{ max-width: 100%; }

  .entete__inner{ padding-top: 1.1rem; min-height: 4.75rem; }
  .marque__logo{ height: 2.35rem; }
  .marque__signature{ font-size: 1.2rem; }

  .situation{ grid-template-columns: minmax(0, 1fr); gap: 0; }
  .situation__num{ font-size: 2.6rem; margin-bottom: .75rem; }
  .situation__titre, .situation__probleme, .situation__action, .situation__resultat, .situation__marqueur{ grid-column: 1; }
  .situation--rentree{ margin-inline: calc(var(--gouttiere) * -1); padding-inline: var(--gouttiere); }
}

@media print{ .seuil{ background: var(--sable); } .manifeste::before{ display: none; } }


/* =========================================================
   PASSE 2, 6 août
   Header, situations, manifeste. Le premier écran attend
   l’image de campagne.
   ========================================================= */

/* ---------- 1. Le header redevient un bloc d’identité ----------
   Des Montilles est retirée de la signature : le header porte la
   marque permanente, pas le langage temporaire de la campagne.
   La signature reste en Cormorant Garamond italique, la serif
   éditoriale de l’identité. */
.marque{ gap: .5rem; }
.marque__logo{ height: clamp(3.4rem, 5.6vw, 5rem); }
.marque__signature{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  color: var(--terra-txt);
  line-height: 1;
  padding-left: .12em;
}

.entete__inner{
  min-height: clamp(6.5rem, 9vw, 8.5rem);
  padding-top: clamp(1.6rem, 2.4vw, 2.5rem);
  gap: clamp(1.5rem, 5vw, 4rem);
}

/* Voile très léger derrière le header, pour que la navigation reste
   lisible quelle que soit la zone de l’image qui passe dessous. */
.entete::after{
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 100%;
  background: linear-gradient(to bottom, rgba(251,246,239,.55), rgba(251,246,239,0));
  pointer-events: none; z-index: -1;
}
.entete.est-detache::after{ display: none; }

.nav__liste{ padding-top: .95rem; gap: clamp(.85rem, 1.35vw, 1.1rem); }
.nav__liste a{ font-size: clamp(.8438rem, 1vw, .9375rem); font-weight: 500; }


@media (max-width: 64rem){
  .nav__liste li:first-child{ margin-right: 0; }
  .nav__liste li:not(:first-child) a{
    display: block;
    min-width: 0;
    padding: .95rem 0;
    border: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    text-align: left;
  }
}

/* Mobile : le menu s’allège, il ne concurrence plus le logo */
@media (max-width: 64rem){
  .nav__bouton{
    border: 0; padding: .5rem 0 .5rem .5rem; background: none;
    font-size: .9375rem; font-weight: 500; color: var(--encre);
    gap: .6rem;
  }
  .nav__barres{ width: 20px; gap: 5px; }
  .nav__barres i{ height: 1.5px; }
}

/* Téléphone : le bloc d’identité doit tenir sur la ligne avec le menu.
   À 390 px, un logo de 54 px de haut mesure 311 px de large et poussait
   le bouton Menu hors de l’écran. Mesuré, corrigé, revérifié. */
@media (max-width: 30rem){
  .entete__inner{
    min-height: clamp(4.75rem, 17vw, 6rem);
    padding-top: clamp(1rem, 3.5vw, 1.4rem);
    gap: .75rem;
  }
  .marque{ gap: .35rem; min-width: 0; }
  .marque__logo{ height: clamp(2rem, 10.2vw, 2.6rem); width: auto; max-width: 100%; }
  .marque__signature{ font-size: clamp(.875rem, 3.4vw, 1rem); }
}

/* ---------- 2. Quatre situations : plus de contraste et de rythme ---------- */
#situations{ padding-block: clamp(5.5rem, 11vw, 10rem); }
#situations .tete{ margin-bottom: clamp(2.5rem, 4.5vw, 3.5rem); }

.situation{
  grid-template-columns: minmax(0, 6rem) minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.75rem) clamp(1.75rem, 4vw, 3.75rem);
  padding-block: clamp(3.25rem, 6vw, 5.25rem);
  border-top: 1px solid var(--encre-26);
}
.situation:first-child{ border-top: 2px solid var(--encre); }

.situation__num{
  font-family: var(--sans);
  font-size: clamp(.875rem, 1vw, .9375rem);
  font-weight: 600;
  line-height: 1;
  color: var(--terra-txt);
  opacity: 1;
  padding-top: .55rem;
  letter-spacing: .04em;
}

.situation__mot{
  font-size: clamp(2.9rem, 5.6vw, 4.5rem);
  line-height: .96;
  letter-spacing: -.028em;
  margin-bottom: .55rem;
}
.situation__titre{
  font-size: clamp(.9375rem, 1.05vw, 1.0625rem);
  color: var(--encre-70);
  max-width: 24ch;
}

.situation__probleme{
  font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
  line-height: 1.58;
  color: var(--encre);
  margin-bottom: 1.5rem;
  max-width: 40ch;
}
.situation__action{
  border-left: 2px solid var(--terracotta);
  padding-left: 1.25rem;
  margin-bottom: 1.5rem;
  max-width: 40ch;
}
.situation__resultat{
  font-size: 1rem;
  font-weight: 600;
  color: var(--terra-txt);
  max-width: 38ch;
}
.situation__resultat span{
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--encre-70);
  margin-bottom: .4rem;
}

/* La quatrième situation ne change plus de fond sans raison.
   Elle est marquée par le filet, la couleur du numéro et le repère
   d’échéance : c’est la seule qui porte une contrainte de calendrier. */
.situation--rentree{
  background: transparent;
  padding-inline: 0;
  margin-inline: 0;
  border-top: 2px solid var(--terracotta);
}
/* Le repère d’échéance tient dans la colonne du numéro, sous celui-ci.
   Il occupait auparavant toute la largeur et créait une rangée à lui seul :
   le verbe « Préparer » se retrouvait décroché de sa description. */
.situation__marqueur{
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.35;
  color: var(--terra-txt);
  margin: 0;
}
.situation--rentree .situation__num{ grid-row: 1; align-self: start; }

/* Les rangées sont posées explicitement : sans cela, l’ajout du repère
   dans la quatrième situation décalait le verbe d’une rangée et le
   séparait de sa description. */
@media (min-width: 48.0625rem){
  .situation__num{ grid-column: 1; grid-row: 1; }
  .situation__titre{ grid-row: 1; }
  .situation__probleme{ grid-row: 1; }
  .situation__action{ grid-row: 2; }
  .situation__resultat{ grid-row: 3; }
}

/* ---------- 3. Manifeste : ancrage, respiration, largeurs ---------- */
.manifeste{ padding-block: clamp(8rem, 17vw, 16rem); }

.manifeste__titre{
  font-size: clamp(3.6rem, 9.5vw, 8.2rem);
  line-height: .9;
  margin: 0 0 clamp(4rem, 9vw, 7rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(232,181,184,.4);
  max-width: 15ch;
}

.manifeste__phrase{
  font-size: clamp(1.85rem, 3.7vw, 3.15rem);
  line-height: 1.22;
  max-width: 26ch;
  margin: 0 0 clamp(3.5rem, 7vw, 5.5rem);
  margin-left: clamp(0rem, 8vw, 7rem);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
  border-left: 2px solid var(--rose);
}

.manifeste__grille{
  max-width: 58rem;
  margin-left: clamp(0rem, 8vw, 7rem);
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

@media (max-width: 48rem){
  .manifeste{ padding-block: clamp(5rem, 14vw, 7rem); }
  .manifeste__titre{ font-size: clamp(2.9rem, 13vw, 4.2rem); margin-bottom: 2.5rem; max-width: 100%; }
  .manifeste__phrase{
    font-size: clamp(1.5rem, 6.4vw, 2rem);
    max-width: 100%; margin-left: 0;
    padding-left: 1.15rem; margin-bottom: 2.5rem;
  }
  .manifeste__grille{ margin-left: 0; }

  .situation{ gap: 0; padding-block: 2.75rem; }
  .situation__num{ padding-top: 0; margin-bottom: .5rem; }
  .situation__mot{ font-size: clamp(2.4rem, 11vw, 3.1rem); }
  .situation__probleme{ margin-top: 1.25rem; }
}


/* ---------- 4. L’image de campagne ----------
   Le premier écran porte l’image de campagne elle-même. Le fichier source
   Le fichier source `sable-campagne-source.png` reste intact, sorti du
   dossier publié : il vit dans `Marion Juton Site/sources-campagne/`.
   Trois dérivés en sont tirés, un seul se charge selon la largeur :

     sable-campagne-desktop.webp   1760 x 990   ordinateur, 346 Ko
     sable-campagne-large.webp     2400 x 1350  au-delà de 1600 px, 380 Ko
     sable-campagne-mobile.webp     760 x 1520  téléphone, 202 Ko

   L’image est présentée en miroir horizontal du fichier source. C’est le seul
   moyen d’obtenir une vague qui balaie la droite : dans le fichier d’origine
   elle traverse la gauche, exactement là où se composent le titre et
   l’accroche. Aucune déformation, aucun étirement, le rapport est conservé.

   L’empreinte du monogramme est cuite dans les deux dérivés, pas superposée
   en CSS : c’est un relief calculé dans le sable, éclairé comme la photo,
   d’en haut à gauche.

   La couche de repli a été retirée : un calque de fond est téléchargé même
   lorsqu il est masqué par celui du dessus, et la texture provisoire coûtait
   444 Ko à chaque visite pour n’être jamais vue. Le repli est désormais la
   couleur `--sable`, qui ne coûte rien.                                */
body::before{
  background:
    linear-gradient(to bottom, rgba(251,246,239,.34) 0%, rgba(251,246,239,.06) 20%, rgba(251,246,239,0) 52%, rgba(240,226,212,.22) 100%),
    linear-gradient(100deg, rgba(251,246,239,.46) 0%, rgba(251,246,239,.16) 38%, rgba(251,246,239,0) 66%),
    url("../img/sable-campagne-desktop.webp") center center / cover no-repeat,
    var(--sable);
}

/* ---------- 5. L’empreinte du symbole M. ----------
   Elle n’existe plus comme calque CSS : elle est dans l’image. La règle
   ci-dessous neutralise l’ancien dispositif si le bloc traîne encore
   quelque part dans le balisage. */
.empreinte{ display: none; }

/* Le texte passe devant l’image, jamais l’inverse */
.seuil__contenu, .seuil__pied{ position: relative; z-index: 1; }

@media (max-width: 64rem){
  body::before{
    background:
      linear-gradient(to bottom, rgba(251,246,239,.40) 0%, rgba(251,246,239,.08) 24%, rgba(251,246,239,0) 56%, rgba(240,226,212,.26) 100%),
      /* calé à droite : c’est de ce côté que la vague entre dans le cadre,
         et c’est ce que `cover` rognerait en premier sur un écran étroit */
      url("../img/sable-campagne-mobile.webp") right center / cover no-repeat,
      var(--sable);
  }
}


/* ---------- 6. Adaptations, à la toute fin ----------
   La passe 2 redéfinit `grid-template-columns` des situations sans
   condition de largeur. Placée après les requêtes média de `styles.css`,
   cette règle reprenait la main sur téléphone et sur tablette : les trois
   colonnes de bureau tenaient encore sur 390 px, et les mots se coupaient
   au milieu. Les adaptations sont donc reposées ici, en dernier. */

@media (max-width: 68rem) and (min-width: 48.0625rem){
  .situation{
    grid-template-columns: minmax(0, 5rem) minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
  }
  .situation__titre{ grid-column: 2; grid-row: 1; }
  .situation__probleme{ grid-column: 2; grid-row: 2; margin-top: .35rem; }
  .situation__action{ grid-column: 2; grid-row: 3; }
  .situation__resultat{ grid-column: 2; grid-row: 4; }
  .situation:nth-child(even){ padding-left: 0; }
}

@media (max-width: 48rem){
  .situation{
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-block: clamp(2.75rem, 9vw, 3.5rem);
  }
  .situation__num,
  .situation__marqueur,
  .situation__titre,
  .situation__probleme,
  .situation__action,
  .situation__resultat{ grid-column: 1; grid-row: auto; }

  .situation__num{ padding-top: 0; margin-bottom: .35rem; }
  .situation__marqueur{ align-self: auto; margin: 0 0 .5rem; }
  .situation__mot{ font-size: clamp(2.4rem, 11vw, 3.1rem); }
  .situation__probleme{ margin-top: 1.1rem; }
  .situation__action{ margin-top: .25rem; }
  .situation:nth-child(even){ padding-left: 0; }
}

/* ---------- 7. Le premier écran mobile est un vrai seuil ----------
   Sur téléphone, la page-seuil s’arrêtait à la hauteur de son contenu :
   la section suivante commençait avant le bas de l’écran, et l’espace
   restant sous l’accroche ne mesurait plus que 96 px, variable selon le
   modèle. L’empreinte cuite dans l’image ne pouvait pas y tenir sans
   risquer un texte.

   Le seuil reprend donc toute la hauteur visible, comme sur ordinateur.
   Le lien de passage se pose en bas, et l’empreinte occupe le silence
   entre l’accroche et ce lien, dans une bande qui suit la hauteur de
   l’écran au lieu de dépendre de la longueur du texte. */
@media (max-width: 48rem){
  .seuil{
    min-height: calc(100svh - clamp(4.75rem, 17vw, 6rem));
    padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
  }
  /* le bloc de texte se cale un peu au-dessus du centre : l’empreinte
     occupe le tiers bas, le lien de passage ferme l’écran */
  .seuil__contenu{ flex: 1; justify-content: flex-start; padding-block: clamp(2.5rem, 9vw, 4.5rem) 0; }
  .seuil__pied{ margin-top: auto; }
}

/* ---------- 8. Quatre situations, version simplifiée et alignée ----------
   Reprise pour clarifier la lecture : une seule grille, trois niveaux
   de lecture, sans décalages ni sous-titres parasites. */
#situations .lede{ max-width: 34ch; }

.situation{
  display: grid;
  grid-template-columns: minmax(3rem, 4rem) minmax(14rem, 22rem) minmax(0, 1fr);
  column-gap: clamp(1.25rem, 2.8vw, 2.75rem);
  row-gap: .75rem;
  align-items: start;
  padding-block: clamp(2.4rem, 4.4vw, 3.6rem);
  border-bottom: 1px solid var(--encre-14);
}
.situation:first-child{ border-top: 2px solid var(--encre); }
.situation:nth-child(even){ padding-left: 0; }

.situation__num{
  grid-column: 1;
  grid-row: 1 / span 3;
  margin: 0;
  padding-top: .4rem;
  font: 600 1.2rem/1 var(--font-sans);
  letter-spacing: .08em;
  color: var(--terracotta);
}

.situation__titre{
  grid-column: 2;
  grid-row: 1 / span 3;
  margin: 0;
}
.situation__mot{
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 5.2vw, 4.7rem);
  line-height: .94;
  letter-spacing: -.03em;
  color: var(--encre);
}

.situation__probleme,
.situation__action,
.situation__resultat{
  grid-column: 3;
  margin: 0;
  max-width: 33ch;
}
.situation__probleme{
  grid-row: 1;
  color: var(--encre);
  font-size: clamp(1.18rem, 1.45vw, 1.45rem);
  line-height: 1.5;
}
.situation__action{
  grid-row: 2;
  color: var(--encre-72);
  font-size: clamp(1.04rem, 1.2vw, 1.15rem);
  line-height: 1.7;
}
.situation__resultat{
  grid-row: 3;
  color: var(--terracotta);
  font-size: clamp(1.3rem, 1.8vw, 1.65rem);
  font-weight: 500;
  line-height: 1.35;
  padding-top: .2rem;
}

.situation--rentree{ background: transparent; }

@media (max-width: 48rem){
  .situation{
    grid-template-columns: 1fr;
    row-gap: .7rem;
    padding-block: 2.4rem;
  }
  .situation__num,
  .situation__titre,
  .situation__probleme,
  .situation__action,
  .situation__resultat{
    grid-column: 1;
    grid-row: auto;
    max-width: none;
  }
  .situation__num{
    padding-top: 0;
    margin-bottom: .1rem;
  }
  .situation__mot{
    font-size: clamp(2.6rem, 10.5vw, 3.5rem);
  }
  .situation__probleme{ margin-top: .35rem; }
  .situation__resultat{ padding-top: .15rem; }
}

/* ---------- 9. Grand écran : l’image de campagne à sa vraie taille ----------
   Au-delà de 1600 px, le navigateur agrandissait le fichier de 1760 px de
   près de moitié, et la trame du sable devenait visible. Un second dérivé,
   tiré de la même source, lui évite ce travail. Un seul des deux se charge. */
@media (min-width: 100rem){
  body::before{
    background:
      linear-gradient(to bottom, rgba(251,246,239,.34) 0%, rgba(251,246,239,.06) 20%, rgba(251,246,239,0) 52%, rgba(240,226,212,.22) 100%),
      linear-gradient(100deg, rgba(251,246,239,.46) 0%, rgba(251,246,239,.16) 38%, rgba(251,246,239,0) 66%),
      url("../img/sable-campagne-large.webp") center center / cover no-repeat,
      var(--sable);
  }
}


/* =========================================================
   PASSE 3, 6 août — la seconde moitié de la page
   =========================================================
   Missions, Méthode, Expérience, Contact et pied de page reprennent la
   grammaire déjà validée sur les quatre situations et le manifeste :

     — un repère en petites capitales terracotta, jamais un titre ;
     — des filets, jamais de cartes ni d’ombres portées ;
     — un filet haut de 2 px pour ouvrir une série, 1 px entre les items ;
     — la serif éditoriale pour tout ce qui nomme, Manrope pour tout ce
       qui explique ;
     — le terracotta réservé au bénéfice, à ce que la chose permet.

   Aucun mot n’est changé, aucune balise n’est déplacée, la structure
   narrative et le formulaire Netlify restent intacts.
   ========================================================= */

/* ---------- Rythme commun ---------- */
.section{ padding-block: clamp(5rem, 10vw, 9rem); }
.tete{ margin-bottom: clamp(3rem, 5vw, 4.5rem); }
.repere{
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--terra-txt);
  margin: 0 0 .9rem;
}
.titre-section{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--encre);
  max-width: 18ch;
  margin: 0;
}

/* ---------- 10. MISSIONS ----------
   Six entrées de même valeur : un tableau réglé, pas six cartes. */
.missions{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 0 clamp(2.25rem, 4.5vw, 4rem);
  border-top: 2px solid var(--encre);
  margin: 0;
}
.mission{
  padding-block: clamp(1.6rem, 2.8vw, 2.35rem);
  border-bottom: 1px solid var(--encre-14);
  background: none;
  border-radius: 0;
  padding-inline: 0;
}
.mission h3{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.14;
  letter-spacing: -.012em;
  color: var(--encre);
  margin: 0 0 .6rem;
  padding: 0;
  border: 0;
}
.mission p{
  font-size: .9375rem;
  line-height: 1.68;
  color: var(--encre-70);
  margin: 0;
  max-width: 38ch;
}

/* ---------- 11. MÉTHODE ----------
   Même grammaire que les quatre situations : un repère chiffré discret,
   le geste en serif, le bénéfice en terracotta derrière un filet. */
.etapes{
  border-top: 2px solid var(--encre);
  margin: 0;
  padding: 0;
  list-style: none;
}
.etape{
  display: grid;
  grid-template-columns: minmax(0, 5rem) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(1rem, 2.2vw, 1.85rem) clamp(1.5rem, 3.2vw, 3rem);
  align-items: start;
  padding-block: clamp(2.25rem, 4.2vw, 3.5rem);
  border-bottom: 1px solid var(--encre-14);
  background: none;
  border-radius: 0;
  margin: 0;
}
.etape__num{
  font-family: var(--sans);
  font-size: clamp(.875rem, 1vw, .9375rem);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--terra-txt);
  opacity: 1;
  margin: 0;
  padding-top: .5rem;
}
.etape > div h3{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.55rem, 2.5vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--encre);
  margin: 0 0 .55rem;
}
.etape > div p{
  font-size: .9375rem;
  line-height: 1.68;
  color: var(--encre-70);
  margin: 0;
  max-width: 38ch;
}
.etape__benefice{
  font-size: .9375rem;
  font-weight: 500;
  color: var(--terra-txt);
  margin: 0;
  padding-left: 1.1rem;
  border-left: 1px solid var(--terra-trait);
}
.etape__benefice span{
  display: block;
  font-weight: 400;
  font-size: .8125rem;
  color: var(--encre-70);
  margin-bottom: .3rem;
}

/* ---------- 12. EXPÉRIENCE ----------
   Le récit à gauche, les trois preuves à droite, réglées comme les missions. */
.exp__grille{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
#experience .titre-section{ margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.exp__texte{
  font-size: clamp(1rem, 1.1vw, 1.0625rem);
  line-height: 1.72;
  color: var(--encre);
  max-width: 46ch;
  margin: 0 0 1.15rem;
}
.exp__final{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.24;
  letter-spacing: -.015em;
  color: var(--encre);
  max-width: 26ch;
  margin: clamp(2rem, 3.5vw, 3rem) 0 0;
  padding-left: clamp(1.25rem, 2vw, 1.75rem);
  border-left: 2px solid var(--terracotta);
}
.preuves{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--encre);
}
.preuves li{
  padding-block: clamp(1.2rem, 2.3vw, 1.8rem);
  border-bottom: 1px solid var(--encre-14);
  background: none;
  padding-inline: 0;
}
.preuves strong{
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.75vw, 1.45rem);
  line-height: 1.16;
  color: var(--encre);
  margin-bottom: .45rem;
}
.preuves span{
  display: block;
  font-size: .9375rem;
  line-height: 1.68;
  color: var(--encre-70);
}

/* ---------- 13. CONTACT ----------
   Le formulaire est le premier et le seul geste commercial de la page.
   Il gagne donc une surface à lui, sans devenir une carte : un aplat
   ivoire posé sur le sable, un filet, aucun arrondi, aucune ombre. */
.contact__grille{
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
#contact .titre-section{ margin-bottom: clamp(1.5rem, 2.5vw, 2rem); }
.contact__texte{
  font-size: clamp(1rem, 1.1vw, 1.0625rem);
  line-height: 1.7;
  color: var(--encre);
  max-width: 40ch;
  margin: 0;
}
.contact__direct{
  list-style: none;
  padding: 0;
  margin: clamp(2rem, 3.5vw, 2.75rem) 0 0;
  border-top: 1px solid var(--encre-26);
}
.contact__direct li{
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding-block: .85rem;
  border-bottom: 1px solid var(--encre-14);
  font-size: .9375rem;
  color: var(--encre);
}
.contact__direct li > span:first-child{
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--encre-70);
}
.contact__direct a{
  color: var(--terra-txt);
  border-bottom: 1px solid var(--terra-trait);
}

.form-zone{
  background: var(--ivoire);
  border: 1px solid var(--encre-12);
  border-radius: 0;
  padding: clamp(1.6rem, 3.2vw, 2.75rem);
}
.form .champ label{
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--encre-70);
  margin-bottom: .35rem;
}
.form .opt{ text-transform: none; letter-spacing: 0; font-weight: 400; }
.form input,
.form select,
.form textarea{
  border: 0;
  border-bottom: 1px solid var(--encre-26);
  border-radius: 0;
  background: transparent;
  padding: .6rem 0;
  font-size: 1rem;
  color: var(--encre);
  transition: border-color .2s ease;
}
/* Le contour de focus reste celui de la feuille de base : on ne touche
   pas à `outline`, on ajoute seulement un signal de couleur. */
.form input:focus,
.form select:focus,
.form textarea:focus{ border-bottom-color: var(--terracotta); }
.form input[aria-invalid="true"],
.form textarea[aria-invalid="true"]{ border-bottom-color: #B03A2E; }
.form textarea{ line-height: 1.6; }

.btn{
  border-radius: 0;
  padding: 1.05rem 1.9rem;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .015em;
  background: var(--encre);
  color: var(--ivoire);
  border: 1px solid var(--encre);
}
.btn:hover{ background: var(--terra-txt); border-color: var(--terra-txt); }

.merci h3{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: var(--encre);
  margin: 0 0 .75rem;
}

/* ---------- 14. PIED DE PAGE ---------- */
.pied{ background: var(--encre); }
.pied__haut{
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  align-items: start;
}
.pied__logo{ height: clamp(2.4rem, 3.6vw, 3.1rem); width: auto; }
.pied__signature{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--rose);
  margin: .7rem 0 0;
}
.pied__label{
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(251,246,239,.62);
  margin: 0 0 .9rem;
}
.pied__col p{ margin: 0 0 .45rem; font-size: .9375rem; line-height: 1.62; }
.pied__liens{ list-style: none; margin: 0; padding: 0; }
.pied__liens li{ margin-bottom: .45rem; }
.pied a{ color: var(--ivoire); border-bottom: 1px solid rgba(251,246,239,.3); }
.pied a:hover{ border-bottom-color: var(--rose); }
.pied__bas{
  border-top: 1px solid rgba(251,246,239,.16);
  padding-block: 1.6rem 2.6rem;
  font-size: .8125rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem clamp(1.5rem, 3vw, 2.5rem);
  align-items: baseline;
  justify-content: space-between;
}
.pied__bas nav{ display: flex; gap: clamp(1rem, 2vw, 1.75rem); }

/* ---------- 15. Adaptations de la seconde moitié ---------- */
@media (max-width: 64rem){
  .exp__grille,
  .contact__grille{ grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 3.5rem); }
  .pied__haut{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem){
  .etape{
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-block: clamp(2rem, 7vw, 2.75rem);
  }
  .etape__num{ padding-top: 0; margin-bottom: .4rem; }
  .etape__benefice{ margin-top: 1.1rem; }
  .exp__final{ max-width: 100%; }
  .contact__direct li{ grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .pied__haut{ grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .pied__bas{ flex-direction: column; align-items: flex-start; }
}

/* ---------- 16. Le formulaire a besoin de sa largeur ----------
   Avec la répartition précédente, la colonne du formulaire tombait à
   453 px : les deux champs d’une même ligne se dépliaient l’un sous
   l’autre et le libellé du bouton passait sur deux lignes. La colonne
   de droite reprend donc la part qui lui manquait, et les rangées de
   deux champs sont posées explicitement au lieu de dépendre d’un
   `auto-fit` que la largeur ne permettait plus. */
@media (min-width: 64.0625rem){
  .contact__grille{ grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); }
}
@media (min-width: 48.0625rem){
  .form .rang{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
  }
}
/* `.champ` porte une marge haute dans la feuille de base : en grille, elle
   s’applique aussi à la colonne de droite et décale d’un cran les libellés
   d’une même rangée. Mesuré à 19 px, annulé ici. */
@media (min-width: 48.0625rem){
  .form .rang > .champ{ margin-top: 0; }
}
/* « (facultatif) » à 12 px tombait à 4,43 sur ivoire, sous le seuil AA de 4,5.
   Valeur pleine plutôt que translucide. */
.form .opt{ color: #47526A; }

/* ---------- 17. Une seule image de sable par écran ----------
   La matière du manifeste réutilise l’image déjà chargée pour le premier
   écran. Sans cela, un téléphone téléchargeait le dérivé mobile ET le
   dérivé ordinateur, soit 346 Ko inutiles. Vérifié au chargement réel :
   une seule image par largeur. */
@media (max-width: 64rem){
  .manifeste::before{ background-image: url("../img/sable-campagne-mobile.webp"); }
}
@media (min-width: 100rem){
  .manifeste::before{ background-image: url("../img/sable-campagne-large.webp"); }
}


/* ---------- PASSE 4 — MÉTHODE SIMPLIFIÉE ET ALIGNÉE ----------
   Trois niveaux seulement : numéro, geste, explication.
   Même grille pour les quatre étapes, sans colonne "Ce que cela permet". */
.etapes{
  border-top: 2px solid var(--encre);
}
.etape{
  display: grid;
  grid-template-columns: minmax(3rem, 4rem) minmax(15rem, 22rem) minmax(0, 1fr);
  column-gap: clamp(1.25rem, 2.8vw, 2.75rem);
  row-gap: 0;
  align-items: start;
  padding-block: clamp(2.4rem, 4.4vw, 3.6rem);
}
.etape__num{
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding-top: .4rem;
  font-size: 1.2rem;
  letter-spacing: .08em;
  color: var(--terracotta);
}
.etape > div{
  display: contents;
}
.etape > div h3{
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.05;
  font-weight: 400;
  max-width: 14ch;
}
.etape > div p{
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  max-width: 38ch;
  font-size: clamp(1.05rem, 1.25vw, 1.18rem);
  line-height: 1.65;
  color: var(--encre-72);
}

@media (max-width: 48rem){
  .etape{
    grid-template-columns: 1fr;
    row-gap: .65rem;
    padding-block: 2.4rem;
  }
  .etape__num,
  .etape > div h3,
  .etape > div p{
    grid-column: 1;
    grid-row: auto;
    max-width: none;
  }
  .etape__num{
    padding-top: 0;
    margin-bottom: .05rem;
  }
  .etape > div h3{
    font-size: clamp(2.2rem, 10vw, 3rem);
  }
  .etape > div p{
    margin-top: .25rem;
  }
}


/* =========================================================
   PASSE 5 — COHÉRENCE VISUELLE
   12 août 2026
   - navigation sans cadres, avec repères discrets
   - largeur générale rééquilibrée
   - grands titres ramenés à la même famille éditoriale que le H1
   - échelle typographique plus calme
   ========================================================= */

/* Le contenu occupait une bande trop étroite et paraissait décalé à droite
   sur les grands écrans. On élargit le cadre sans étirer les paragraphes. */
:root{
  --shell: 1320px;
  --gouttiere: clamp(1.5rem, 3vw, 3rem);
}

/* Navigation : quatre repères identiques, sans boutons ni rectangles. */
.nav__liste{
  gap: clamp(1.15rem, 1.8vw, 1.75rem);
}
.nav__liste li:first-child{
  margin-right: clamp(.35rem, .7vw, .7rem);
}
.nav__liste li:not(:first-child) a{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  padding: .35rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  text-align: left;
  gap: .5rem;
}
.nav__liste li:not(:first-child) a::before{
  content: "";
  display: block;
  flex: 0 0 auto;
  width: .85rem;
  height: 1px;
  background: var(--terracotta);
  opacity: .75;
  transition: width .2s ease, opacity .2s ease;
}
.nav__liste li:not(:first-child) a:hover{
  border: 0;
  background: transparent;
}
.nav__liste li:not(:first-child) a:hover::before{
  width: 1.2rem;
  opacity: 1;
}

/* Tous les grands titres éditoriaux reprennent la famille du H1 :
   Cormorant Garamond, légère et non italique. */
.titre-section,
.mission h3,
.etape > div h3,
.situation__mot,
.transition__titre{
  font-family: var(--serif);
  font-style: normal;
  font-weight: 300;
  letter-spacing: -.022em;
  color: var(--encre);
}

/* Échelle générale plus calme : les titres structurent sans crier. */
.section{
  padding-block: clamp(4.5rem, 7.5vw, 7rem);
}
.tete{
  margin-bottom: clamp(2.35rem, 4vw, 3.5rem);
}
.titre-section{
  font-size: clamp(1.95rem, 3.1vw, 2.7rem);
  line-height: 1.07;
  max-width: 21ch;
}
#situations{
  padding-block: clamp(4.5rem, 7.5vw, 7rem);
}
#situations .titre-section{
  font-size: clamp(1.95rem, 3.1vw, 2.7rem);
  max-width: 19ch;
}

/* Les quatre situations restent identifiables, avec un verbe moins massif. */
.situation{
  padding-block: clamp(2.5rem, 4.2vw, 3.6rem);
}
.situation__mot{
  font-size: clamp(1.75rem, 2.65vw, 2.3rem);
  line-height: 1.04;
}

/* Missions : hiérarchie claire, sans effet d'affiche. */
.mission{
  padding-block: clamp(1.45rem, 2.3vw, 2rem);
}
.mission h3{
  font-size: clamp(1.38rem, 2vw, 1.82rem);
  line-height: 1.12;
  max-width: 19ch;
  margin-bottom: .75rem;
}
.mission p{
  font-size: clamp(.925rem, .95vw, 1rem);
  line-height: 1.66;
}

/* Méthode : même voix typographique que le H1 et les missions. */
.etape{
  grid-template-columns: minmax(3rem, 4rem) minmax(13rem, 19rem) minmax(0, 1fr);
  column-gap: clamp(1.25rem, 2.4vw, 2.5rem);
  padding-block: clamp(2.15rem, 3.7vw, 3.1rem);
}
.etape__num{
  font-size: .9375rem;
  padding-top: .32rem;
}
.etape > div h3{
  font-size: clamp(1.55rem, 2.25vw, 2.05rem);
  line-height: 1.08;
  max-width: 16ch;
}
.etape > div p{
  font-size: clamp(.925rem, .98vw, 1.02rem);
  line-height: 1.66;
}

/* Le texte de transition est un titre éditorial, pas un slogan. */
.transition__titre{
  font-size: clamp(1.75rem, 2.8vw, 2.35rem);
  line-height: 1.1;
}

/* Les deux gestes de marque restent volontairement à part :
   "L'Été des projets" et le manifeste "Du récit au lieu". */
.seuil__capsule,
.manifeste__titre{
  font-family: var(--geste);
}

/* Ajustement mobile : les repères redeviennent de simples entrées de menu. */
@media (max-width: 64rem){
  .nav__liste li:not(:first-child) a::before{
    width: .7rem;
  }
}
@media (max-width: 48rem){
  .titre-section,
  #situations .titre-section{
    font-size: clamp(1.9rem, 8.2vw, 2.45rem);
  }
  .mission h3{
    font-size: clamp(1.4rem, 6.2vw, 1.75rem);
    max-width: none;
  }
  .etape > div h3{
    font-size: clamp(1.55rem, 7vw, 1.95rem);
    max-width: none;
  }
}


/* =========================================================
   PASSE 6 — FORMULAIRE TON SUR TON
   12 août 2026
   - le formulaire cesse de lire comme un bloc rapporté blanc
   - il se fond dans la page avec un ivoire rosé très doux
   - les champs restent lisibles mais plus calmes
   ========================================================= */
.form-zone{
  background: rgba(251, 246, 239, 0.56);
  border: 1px solid rgba(36, 48, 70, 0.10);
  box-shadow: none;
}
.form{
  background: transparent;
}
.form .champ label{
  color: var(--encre-66);
}
.form input,
.form select,
.form textarea{
  background: rgba(251, 246, 239, 0.18);
  border-bottom: 1px solid rgba(36, 48, 70, 0.20);
  color: var(--encre);
}
.form input::placeholder,
.form textarea::placeholder,
.form select{
  color: rgba(36, 48, 70, 0.72);
}
.form input:hover,
.form select:hover,
.form textarea:hover{
  border-bottom-color: rgba(36, 48, 70, 0.34);
}
.form textarea{
  min-height: 7.8rem;
}
.form__note{
  color: rgba(36, 48, 70, 0.82);
}
.form__note a{
  color: var(--encre-70);
  border-bottom: 1px solid rgba(36, 48, 70, 0.22);
}
@media (max-width: 48rem){
  .form-zone{
    background: rgba(251, 246, 239, 0.72);
  }
}


/* =========================================================
   PASSE 7 — LISSAGE TYPOGRAPHIQUE ET NAVIGATION
   12 août 2026
   - calmer la hiérarchie visuelle
   - supprimer l'effet de boutons dans le menu
   - homogénéiser les tailles entre sections
   - aucune modification de fond SEO : structure et textes utiles conservés
   ========================================================= */

/* Header et navigation : plus simples, plus éditoriaux */
.entete__inner{
  align-items: center;
}
.nav__liste{
  gap: clamp(1rem, 1.5vw, 1.5rem);
  padding-top: .35rem;
}
.nav__liste a{
  font-size: clamp(.875rem, .95vw, .95rem);
}
.nav__liste li:not(:first-child) a{
  min-width: 0;
  padding: .25rem 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.nav__liste li:not(:first-child) a::before{
  width: .7rem;
  opacity: .68;
}
.nav__liste li:not(:first-child) a:hover::before,
.nav__liste li:not(:first-child) a:focus-visible::before{
  width: 1rem;
}

/* Lissage général des titres */
.titre-section{
  font-size: clamp(1.8rem, 2.7vw, 2.35rem);
  line-height: 1.08;
}
.transition__titre{
  font-size: clamp(1.55rem, 2.2vw, 1.95rem);
  line-height: 1.14;
}

/* Situations : le verbe garde sa place, sans effet d'affiche */
.situation__mot{
  font-size: clamp(1.9rem, 2.45vw, 2.45rem);
  line-height: 1.02;
}
.situation__probleme{
  font-size: clamp(1.03rem, 1.1vw, 1.22rem);
  line-height: 1.48;
}
.situation__action{
  font-size: clamp(.98rem, 1vw, 1.06rem);
  line-height: 1.63;
}
.situation__resultat{
  font-size: clamp(1.12rem, 1.3vw, 1.34rem);
  line-height: 1.32;
}

/* Manifeste : calmer nettement l'écart entre geste, phrase et paragraphes */
.manifeste{
  padding-block: clamp(6rem, 11vw, 9rem);
}
.manifeste__titre{
  font-size: clamp(2.8rem, 6.2vw, 5rem);
  line-height: .96;
  margin: 0 0 clamp(2.2rem, 4vw, 3.5rem);
  padding-top: clamp(1rem, 2vw, 1.5rem);
  max-width: 14ch;
}
.manifeste__phrase{
  font-size: clamp(1.45rem, 2.55vw, 2.15rem);
  line-height: 1.26;
  max-width: 20ch;
  margin: 0 0 clamp(2.5rem, 4vw, 3.5rem);
  margin-left: clamp(0rem, 4vw, 3rem);
  padding-left: clamp(1.1rem, 2vw, 1.6rem);
}
.manifeste__grille{
  max-width: 54rem;
  margin-left: clamp(0rem, 4vw, 3rem);
  gap: clamp(1.6rem, 3.5vw, 2.6rem);
}
.manifeste__grille p{
  font-size: clamp(.98rem, 1vw, 1.04rem);
  line-height: 1.72;
}

/* Contact : on garde le ton sur ton et on resserre un peu le bloc */
.form-zone{
  background: rgba(251, 246, 239, 0.64);
}
.contact__titre{
  font-size: clamp(1.9rem, 2.7vw, 2.45rem);
  line-height: 1.08;
}

@media (max-width: 48rem){
  .nav__liste li:not(:first-child) a::before{
    width: .6rem;
  }
  .situation__mot{
    font-size: clamp(2rem, 9vw, 2.6rem);
  }
  .manifeste__titre{
    font-size: clamp(2.4rem, 10.5vw, 3.5rem);
    margin-bottom: 2rem;
  }
  .manifeste__phrase{
    font-size: clamp(1.35rem, 6vw, 1.8rem);
    margin-bottom: 2rem;
    margin-left: 0;
  }
  .manifeste__grille{
    margin-left: 0;
  }
}


/* =========================================================
   PASSE 8 — FOOTER ESSENTIEL
   Seuls les accès juridiques nécessaires restent dans le pied de page bas.
   Les informations détaillées sont regroupées dans les pages dédiées.
   ========================================================= */
.pied__bas{
  justify-content: flex-end;
}
.pied__bas nav{
  margin-left: auto;
}


/* =========================================================
   PASSE 9 — DU RÉCIT AU LIEU SUR UNE LIGNE
   Le titre manifeste reste toujours sur une seule ligne.
   ========================================================= */
.manifeste__titre{
  white-space: nowrap;
  max-width: none;
  width: max-content;
  font-size: clamp(2.6rem, 5.7vw, 4.7rem);
}

@media (max-width: 48rem){
  .manifeste__titre{
    white-space: nowrap;
    width: max-content;
    font-size: clamp(2rem, 9vw, 3rem);
  }
}


/* =========================================================
   PASSE 10 — TITRE MANIFESTE VERROUILLÉ
   Empêche tout retour à la ligne, y compris avec Des Montilles locale.
   ========================================================= */
.manifeste__titre{
  display: block;
  white-space: nowrap !important;
  width: fit-content;
  max-width: calc(100vw - (2 * var(--gouttiere)));
  font-size: clamp(2.45rem, 5.2vw, 4.35rem);
  line-height: .98;
  overflow: visible;
}
@media (max-width: 48rem){
  .manifeste__titre{
    white-space: nowrap !important;
    font-size: clamp(1.9rem, 8.5vw, 2.8rem);
    max-width: calc(100vw - (2 * var(--gouttiere)));
  }
}


/* =========================================================
   PASSE 11 — SITUATIONS EN 3 NIVEAUX TYPOGRAPHIQUES
   Numéro / verbe / texte.
   Le problème, l'intervention et le résultat ont désormais
   la même taille : la hiérarchie se fait par couleur, filet
   et graisse, pas par multiplication des corps.
   ========================================================= */
.situation__num{
  font-size: .875rem;
  letter-spacing: .07em;
  padding-top: .22rem;
}

.situation__mot{
  font-size: clamp(1.85rem, 2.2vw, 2.2rem);
  line-height: 1.04;
}

.situation__probleme,
.situation__action,
.situation__resultat{
  font-size: clamp(.98rem, 1vw, 1.05rem);
  line-height: 1.58;
}

.situation__probleme{
  font-weight: 400;
  color: var(--encre);
}

.situation__action{
  font-weight: 400;
  color: var(--encre-72);
}

.situation__resultat{
  font-weight: 500;
  color: var(--terracotta);
  line-height: 1.5;
  padding-top: .15rem;
}

@media (max-width: 48rem){
  .situation__mot{
    font-size: clamp(1.9rem, 8.2vw, 2.35rem);
  }
  .situation__probleme,
  .situation__action,
  .situation__resultat{
    font-size: 1rem;
    line-height: 1.55;
  }
}


/* =========================================================
   PASSE 12 — NAVIGATION SANS TIRETS
   Les onglets du menu restent simples, sans repères décoratifs.
   ========================================================= */
.nav__liste li:not(:first-child) a::before{
  content: none !important;
  display: none !important;
}

.nav__liste li:not(:first-child) a{
  gap: 0 !important;
}


/* =========================================================
   PASSE 13 — ÉCHELLE TYPOGRAPHIQUE GLOBALE
   Objectif : moins de corps différents, mais une taille de lecture
   plus confortable. Hors hero, la page se limite essentiellement à :
   repères / corps / intertitres / titres de section.
   ========================================================= */
:root{
  --typo-repere: .875rem; /* 14 px */
  --typo-corps: clamp(1.0625rem, 1.02rem + .18vw, 1.125rem); /* 17–18 px */
  --typo-inter: clamp(1.55rem, 1.8vw, 1.8rem); /* 25–29 px */
  --typo-titre: clamp(2rem, 2.6vw, 2.35rem); /* 32–38 px */
}

/* Lecture générale */
body{
  font-size: var(--typo-corps);
  line-height: 1.65;
}
.transition__texte,
.situation__probleme,
.situation__action,
.situation__resultat,
.mission p,
.etape > div p,
.exp__texte,
.preuves span,
.contact__texte,
.contact__direct li,
.form input,
.form select,
.form textarea,
.manifeste__grille p{
  font-size: var(--typo-corps);
  line-height: 1.62;
}

/* Repères uniquement : petits, mais jamais minuscules */
.repere,
.situation__num,
.etape__num,
.form .champ label,
.contact__direct li > span:first-child,
.pied__label,
.pied__bas,
.transition__reperes{
  font-size: var(--typo-repere);
}

/* Titres intermédiaires : une seule échelle */
.situation__mot,
.mission h3,
.etape > div h3,
.preuves strong{
  font-size: var(--typo-inter);
  line-height: 1.1;
  font-weight: 300;
}

/* Titres de sections : une seule échelle */
.titre-section,
.transition__titre,
.contact__titre{
  font-size: var(--typo-titre);
  line-height: 1.08;
  font-weight: 300;
}

/* Le résultat n'est plus agrandi : la couleur suffit à le distinguer. */
.situation__resultat{
  font-weight: 500;
}

/* Expérience : la phrase de synthèse est légèrement au-dessus du corps,
   sans devenir un nouveau grand niveau typographique. */
.exp__final{
  font-size: clamp(1.35rem, 1.55vw, 1.55rem);
  line-height: 1.34;
}

/* Manifeste : deux écarts seulement avec le corps.
   Le geste de marque reste singulier, mais ne domine plus tout l'écran. */
.manifeste__titre{
  font-size: clamp(2.8rem, 4.6vw, 3.9rem);
  line-height: .98;
}
.manifeste__phrase{
  font-size: clamp(1.55rem, 1.9vw, 1.85rem);
  line-height: 1.3;
}

/* Navigation : confortable, sans décor ni boutons */
.nav__liste a{
  font-size: .9375rem;
}
.nav__liste li:not(:first-child) a::before{
  content: none !important;
  display: none !important;
}

/* Formulaire et footer : éviter les petits corps fatigants */
.form__note,
.pied__col p,
.pied__bas a{
  font-size: .875rem;
  line-height: 1.55;
}

/* Le hero reste le seul vrai registre "display" de la page. */
.seuil__texte{
  font-size: clamp(1.075rem, 1.1vw, 1.15rem);
  line-height: 1.58;
}

@media (max-width: 48rem){
  :root{
    --typo-corps: 1.0625rem;
    --typo-inter: clamp(1.5rem, 6.6vw, 1.75rem);
    --typo-titre: clamp(1.9rem, 8vw, 2.25rem);
  }

  .manifeste__titre{
    font-size: clamp(2.25rem, 9vw, 3rem);
  }
  .manifeste__phrase{
    font-size: clamp(1.45rem, 6vw, 1.7rem);
  }
}


/* =========================================================
   PASSE FINALE — RESPIRATION ET SÉPARATEURS
   12 août 2026
   La structure des situations repose sur l'alignement, l'espace et la
   couleur. Les traits horizontaux n'ajoutant pas d'information sont retirés.
   Le filet vertical du geste reste le seul repère graphique interne.
   ========================================================= */

/* Situations : aucun séparateur horizontal */
.situation,
.situation:first-child,
.situation:last-child,
.situation--rentree{
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Un peu plus d'air remplace les traits */
.situation{
  padding-block: clamp(2.7rem, 4.6vw, 3.9rem);
}
.situation + .situation{
  margin-top: clamp(.25rem, .8vw, .75rem);
}

/* Pas de trait horizontal avant le résultat */
.situation__resultat,
.situation__resultat span{
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* Le filet vertical reste volontairement discret */
.situation__action{
  border-left: 1px solid rgba(194,111,92,.72) !important;
  padding-left: clamp(.9rem, 1.4vw, 1.15rem);
}

/* Les séries suivantes conservent leurs séparateurs, mais très légers */
.missions,
.etapes,
.preuves{
  border-top-color: rgba(36,48,70,.20) !important;
  border-top-width: 1px !important;
}
.mission,
.etape,
.preuve{
  border-bottom-color: rgba(36,48,70,.10) !important;
}

/* Pas de barre lourde au contact */
.contact__direct{
  border-top-color: rgba(36,48,70,.14) !important;
}


/* =========================================================
   PASSE FINALE BIS — REPÈRES DE TRANSITION
   Les trois repères "Reprendre / Décider / Préparer" sont des éléments
   de lecture, pas des micro-légendes : taille remontée pour être confortable.
   ========================================================= */
.transition__reperes{
  font-size: clamp(1.125rem, 1.2vw, 1.25rem) !important;
  line-height: 1.35;
}


/* =========================================================
   PASSE FINALE TER — HEADER DÉTACHÉ COMPACT
   Au scroll, le grand chapeau de campagne devient un header de navigation
   plus bas, opaque et stable. Il ne recouvre plus le contenu.
   ========================================================= */
.entete{
  transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.entete.est-detache{
  background: rgba(251,246,239,.98) !important;
  backdrop-filter: saturate(120%) blur(10px);
  border-bottom: 1px solid rgba(36,48,70,.10) !important;
  box-shadow: 0 4px 18px rgba(36,48,70,.035);
}
.entete.est-detache .entete__inner{
  min-height: 5.15rem;
  padding-top: .7rem;
  padding-bottom: .55rem;
  align-items: center;
}
.entete.est-detache .marque__logo{
  height: clamp(2.55rem, 3.4vw, 3.15rem);
}
.entete.est-detache .marque__signature{
  font-size: clamp(.95rem, 1.05vw, 1.08rem);
}
.entete.est-detache .nav__liste{
  padding-top: 0;
}