/* =========================================================
   L’Été des projets, version A
   Marion Juton, architecte d’intérieur, Du récit au lieu

   Deux familles typographiques, et deux seulement :
     Cormorant Garamond pour les titres et les citations
     Manrope pour les textes, la navigation et le fonctionnel

   Des Montilles n’est pas embarquée. Tant que la licence webfont n’est
   pas validée et le fichier hébergé, la faire figurer dans la pile de
   polices ne ferait que produire deux rendus différents : l’un chez
   Marion, qui l’a installée sur son poste, l’autre chez les visiteurs.
   Le fichier `des-montilles.css` conserve la marche à suivre pour
   l’activer plus tard.

   Cinq styles de texte :
   1. Titre d’entrée     Cormorant Garamond italique, une seule occurrence
   2. Titre de section   Cormorant Garamond romain
   3. Repère             Manrope 500, terracotta, casse naturelle
   4. Texte courant      Manrope 400
   5. Texte fonctionnel  Manrope 400, plus petit
   Aucune petite capitale, aucun espacement de lettres, aucun autre style.
   ========================================================= */

/* =========================================================
   BLEU ENCRIER, VALEUR RETENUE
   =========================================================
   Deux valeurs coexistent dans le socle :
     RETENUE : #1F2C41, valeur des fichiers maîtres du logo.
     Ancienne : #243046, encore inscrite dans `charte-visuelle`, à corriger.

   Tout le bleu de la page passe par la seule variable `--encre`
   ci-dessous. Le logo conserve la même valeur, il n’y a donc plus
   qu’un seul bleu dans la page.

   POUR COMPARER SANS RIEN MODIFIER :
     index.html?encre=a   affiche #243046
     index.html?encre=b   affiche #1F2C41
   Le fichier `comparaison-bleu-encrier.html` montre les deux côte à côte.

   Une fois la valeur choisie, écrire la valeur retenue ci-dessous et
   retirer le paramètre de comparaison dans `assets/js/main.js`
   (section 6, une dizaine de lignes clairement signalées).
   ========================================================= */

:root{
  --encre:      #1F2C41;   /* VALEUR RETENUE le 4 août 2026, fichiers maîtres du logo */
  /* --encre:   #243046; */ /* ancienne valeur de charte-visuelle, à corriger dans la charte */

  --ivoire:     #FBF6EF;
  --sable:      #F0E2D4;
  --terracotta: #C26F5C;
  --rose:       #E8B5B8;

  /* Valeur portée par les fichiers maîtres du logo.
     Le logo n’est jamais recoloré, cette valeur ne bouge pas. */
  --encre-logo: #1F2C41;

  /* Teintes translucides du Bleu Encrier.
     Elles dérivent toutes de --encre. La ligne rgba() sert de repli
     aux navigateurs sans color-mix ; la ligne suivante prend le relais
     partout ailleurs et suit automatiquement la variante choisie. */
  --encre-10: rgba(31,44,65,.10); --encre-10: color-mix(in srgb, var(--encre) 10%, transparent);
  --encre-12: rgba(31,44,65,.12); --encre-12: color-mix(in srgb, var(--encre) 12%, transparent);
  --encre-14: rgba(31,44,65,.14); --encre-14: color-mix(in srgb, var(--encre) 14%, transparent);
  --encre-16: rgba(31,44,65,.16); --encre-16: color-mix(in srgb, var(--encre) 16%, transparent);
  --encre-26: rgba(31,44,65,.26); --encre-26: color-mix(in srgb, var(--encre) 26%, transparent);
  --encre-30: rgba(31,44,65,.30); --encre-30: color-mix(in srgb, var(--encre) 30%, transparent);
  --encre-45: rgba(31,44,65,.45); --encre-45: color-mix(in srgb, var(--encre) 45%, transparent);


  /* Dérivés de lecture, calculés pour tenir le contraste AA */
  --encre-70:   #55606F;
  --encre-55:   #6B7383;
  --terra-txt:  #9A4F3B;
  --terra-btn:  #9A4F3B;
  --terra-btn-h:#8E4735;
  --ivoire-doux:#EDE6DD;
  --ivoire-70:  #C8C1B8;

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --shell: 1160px;
  --gouttiere: clamp(1.4rem, 5vw, 5rem);
  --pas: clamp(5rem, 10vw, 9.5rem);

  --terra-trait: rgba(194,111,92,.34); --terra-trait: color-mix(in srgb, var(--terracotta) 34%, transparent);
  --trait:       1px solid var(--encre-14);
  --trait-clair: 1px solid rgba(251, 246, 239, .18);
}

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

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body{
  margin: 0;
  background: var(--ivoire);
  color: var(--encre);
  font-family: var(--sans);
  font-size: clamp(1rem, .95rem + .22vw, 1.0625rem);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg{ max-width: 100%; display: block; }
/* Les titres ne sont jamais coupés au milieu d’un mot. */
p, li, label, a{ overflow-wrap: break-word; }
h1, h2, h3{ overflow-wrap: normal; hyphens: none; }
input, select, textarea{ max-width: 100%; }

h1,h2,h3{
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.005em;
  margin: 0;
  text-wrap: balance;
}

p{ margin: 0 0 1.2rem; }
p:last-child{ margin-bottom: 0; }
ul, ol{ margin: 0; padding: 0; list-style: none; }

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

/* ---------- Accessibilité ---------- */
.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--encre); color: var(--ivoire);
  padding: .85rem 1.25rem; text-decoration: none; font-size: .875rem;
}
.skip-link:focus{ left: 1rem; top: 1rem; }

:focus-visible{ outline: 2px solid var(--terra-txt); outline-offset: 3px; border-radius: 2px; }
.fond-encre :focus-visible{ outline-color: var(--rose); }

/* ---------- Style 3 : le repère ---------- */
.repere{
  font-family: var(--sans);
  font-size: clamp(.9375rem, 1.05vw, 1.0625rem);
  font-weight: 500;
  color: var(--terra-txt);
  margin: 0 0 1.1rem;
}
.fond-encre .repere{ color: var(--rose); }

/* ---------- Titres de section, style 2 ---------- */
.titre-section{
  font-size: clamp(1.9rem, 3.7vw, 2.9rem);
  line-height: 1.14;
  max-width: 20ch;
}
.fond-encre .titre-section{ color: var(--ivoire); }

.lede{
  margin-top: 1.4rem;
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  color: var(--encre-70);
  max-width: 54ch;
}
.fond-encre .lede{ color: var(--ivoire-70); }

/* ---------- Bouton, une seule apparition sur la page ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--sans); font-size: .9375rem; font-weight: 600; line-height: 1.25;
  padding: 1.1rem 2rem; border: 1px solid var(--terra-btn); border-radius: 2px;
  background: var(--terra-btn); color: #fff; text-decoration: none; cursor: pointer;
  transition: background-color .22s ease, border-color .22s ease;
}
.btn:hover, .btn:focus-visible{ background: var(--terra-btn-h); border-color: var(--terra-btn-h); }

/* =========================================================
   Chapeau permanent
   ========================================================= */
.entete{
  position: sticky; top: 0; z-index: 60;
  background: rgba(240, 226, 212, .96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--encre-10);
  transition: background-color .3s ease;
}
.entete.est-detache{ background: rgba(251, 246, 239, .96); border-bottom-color: var(--encre-14); }

.entete__inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.25rem, 4vw, 3rem); min-height: 5rem;
}

.marque{ display: flex; flex-direction: column; gap: .28rem; text-decoration: none; flex-shrink: 0; }
.marque__logo{ height: clamp(2rem, 3.3vw, 2.5rem); width: auto; }
.marque__signature{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(.9375rem, 1.15vw, 1.0625rem);
  color: var(--terra-txt); line-height: 1;
}

.nav__liste{ display: flex; align-items: center; gap: clamp(1rem, 2.1vw, 1.85rem); }
.nav__liste a{
  font-size: .8125rem; font-weight: 500; color: var(--encre);
  text-decoration: none; white-space: nowrap;
  padding: .35rem 0; border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.nav__liste a:hover{ border-bottom-color: var(--terracotta); }

.nav__bouton{
  display: none; align-items: center; gap: .55rem;
  background: none; border: 1px solid var(--encre-30); border-radius: 2px;
  padding: .6rem .9rem; font-family: var(--sans);
  font-size: .8125rem; font-weight: 500; color: var(--encre); cursor: pointer;
}
.nav__barres{ display: inline-flex; flex-direction: column; gap: 4px; width: 16px; }
.nav__barres i{ display:block; height:1px; background: var(--encre); transition: transform .2s ease; }
.nav__bouton[aria-expanded="true"] .nav__barres i:first-child{ transform: translateY(2.5px) rotate(11deg); }
.nav__bouton[aria-expanded="true"] .nav__barres i:last-child{ transform: translateY(-2.5px) rotate(-11deg); }

/* =========================================================
   Étape 2 : la page-seuil
   ========================================================= */
.seuil{
  position: relative;
  background: var(--sable);
  min-height: min(88vh, 780px);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(4.5rem, 10vw, 8rem) clamp(2rem, 4vw, 3rem);
  overflow: hidden;
}

/* Le signe : une seule arche, ample, issue de l’alphabet de formes.
   Elle n’est répétée nulle part ailleurs sur la page. */
.seuil__signe{
  position: absolute; right: -6%; bottom: -12%;
  width: min(46vw, 480px); height: auto;
  color: var(--terracotta); opacity: .16;
  pointer-events: none;
}

/* Le conteneur garde la largeur du bandeau. Chaque élément fixe sa propre
   mesure, en ch calculés sur sa taille de police réelle. */
.seuil__contenu{ position: relative; width: 100%; }

.seuil__capsule{
  font-family: var(--sans); font-size: clamp(1rem, 1.2vw, 1.125rem);
  font-weight: 500; color: var(--terra-txt); margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
}

/* Style 1 : la seule occurrence d’italique en grand titre */
.seuil__titre{
  font-size: clamp(2.6rem, 6.6vw, 4.9rem);
  font-style: italic; font-weight: 300;
  line-height: 1.06; letter-spacing: -.02em;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  max-width: 15ch;          /* mesure calculée sur la taille du titre */
  overflow-wrap: normal;    /* aucun mot coupé en deux */
  hyphens: none;
}

.seuil__texte{
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.62; color: var(--encre-70); max-width: 46ch;
}

/* Seuil narratif de défilement, pas un appel à l’action commercial */
.seuil__passage{
  position: relative;
  margin-top: clamp(3rem, 6vw, 5rem);
  display: flex; align-items: baseline; gap: .7rem;
  font-family: var(--sans); font-size: .9375rem; font-weight: 500;
  color: var(--encre); text-decoration: none; width: fit-content;
  padding-bottom: .4rem; border-bottom: 1px solid var(--encre-30);
  transition: border-color .2s ease;
}
.seuil__passage:hover{ border-bottom-color: var(--terracotta); }
.seuil__passage span{ font-size: 1.1rem; line-height: 1; animation: descendre 3.4s ease-in-out infinite; }
@keyframes descendre{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(4px);} }

/* Amorce de la section suivante, visible en bas d’écran */
.seuil__amorce{
  position: relative; margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem; border-top: 1px solid var(--encre-16);
  font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.6rem);
  color: var(--encre-45);
}

/* =========================================================
   Sections
   ========================================================= */
.section{ padding-block: var(--pas); }
.fond-sable{ background: var(--sable); }
.fond-encre{ background: var(--encre); color: var(--ivoire-doux); }

.tete{ max-width: 62ch; margin-bottom: clamp(3rem, 6vw, 4.5rem); }

/* ---------- Étape 3 : l’opportunité ---------- */
.opportunite__grille{
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem); align-items: start;
}
.opportunite__texte{ font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); line-height: 1.68; max-width: 46ch; }

.appuis{ border-top: var(--trait); }
.appuis li{
  padding-block: 1.25rem; border-bottom: var(--trait);
  font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 1.65rem); line-height: 1.25;
}

/* ---------- Étape 4 : les quatre situations ---------- */
.situations{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(2.5rem, 4.5vw, 3.5rem);
}
.situation{ scroll-margin-top: 7rem; }
.situation__titre{ font-size: clamp(1.7rem, 2.5vw, 2.05rem); margin-bottom: 1rem; }
.situation__probleme{ font-size: 1rem; line-height: 1.66; margin-bottom: 1.15rem; }
.situation__action{ font-size: .9375rem; line-height: 1.66; color: var(--encre-70); margin-bottom: 1.35rem; }
.situation__resultat{
  padding-top: 1.15rem; border-top: 1px solid rgba(194,111,92,.4);
  font-size: .9375rem; font-weight: 500; color: var(--terra-txt);
}

/* La quatrième porte reçoit un traitement légèrement distinct */
.situation--rentree{
  background: var(--sable); padding: clamp(1.75rem, 3vw, 2.25rem);
  border-radius: 2px; margin-top: -.5rem;
}
.situation--rentree .situation__action{ color: var(--encre-70); }
.situation__marqueur{
  font-family: var(--sans); font-size: .875rem; font-weight: 500;
  color: var(--terra-txt); margin: 0 0 .75rem;
}

/* ---------- Étape 5 : le manifeste ---------- */
.manifeste{ padding-block: clamp(6rem, 12vw, 11rem); }
.manifeste__titre{
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 4.5rem); line-height: 1.05;
  color: var(--ivoire); margin: 0 0 clamp(2.5rem, 5vw, 3.75rem);
}
.manifeste__phrase{
  font-family: var(--serif); font-size: clamp(1.5rem, 2.9vw, 2.3rem);
  line-height: 1.32; color: var(--ivoire); max-width: 26ch;
  margin: 0 0 clamp(2.5rem, 4vw, 3.25rem);
}
.manifeste__grille{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.manifeste__grille p{ font-size: clamp(1rem, 1.1vw, 1.125rem); line-height: 1.72; color: var(--ivoire-doux); }
.manifeste__passage{ color: var(--rose); }

/* ---------- Étape 6 : direction et faisabilité ---------- */
.etapes{ counter-reset: etape; }
.etape{
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(2rem, 3.5vw, 2.75rem);
  border-top: var(--trait);
  align-items: start;
}
.etape:last-child{ border-bottom: var(--trait); }
.etape__num{
  font-family: var(--serif); font-size: 1.5rem; color: var(--terra-txt); margin: 0; line-height: 1.2;
}
.etape h3{ font-size: clamp(1.35rem, 1.9vw, 1.6rem); margin-bottom: .7rem; }
.etape p{ font-size: .9375rem; line-height: 1.68; color: var(--encre-70); }
.etape__benefice{ font-weight: 500; color: var(--encre); }
.etape__benefice span{ display: block; font-weight: 400; color: var(--terra-txt); font-size: .875rem; margin-bottom: .3rem; }

.perimetre{
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-size: .9375rem; line-height: 1.75; color: var(--encre-70); max-width: 68ch;
}

/* ---------- Étape 7 : l’expérience ---------- */
.exp__grille{
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem); align-items: start;
}
.exp__texte{ font-size: clamp(1rem, 1.1vw, 1.125rem); line-height: 1.74; max-width: 52ch; }
.exp__final{
  font-family: var(--serif); font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.36; max-width: 30ch; margin-top: 2.25rem;
  padding-left: 1.4rem; border-left: 2px solid var(--terracotta);
}
.preuves li{ padding-block: 1.35rem; border-bottom: var(--trait); }
.preuves li:first-child{ border-top: var(--trait); }
.preuves strong{ display: block; font-weight: 600; font-size: .9375rem; margin-bottom: .35rem; }
.preuves span{ font-size: .9375rem; color: var(--encre-70); line-height: 1.62; }

/* ---------- Étape 8 : la conversion ---------- */
.contact__grille{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start;
}
.contact__texte{ font-size: clamp(1rem, 1.1vw, 1.125rem); line-height: 1.7; max-width: 46ch; }
.contact__direct{ margin-top: clamp(2rem, 4vw, 2.75rem); border-top: var(--trait); }
.contact__direct li{
  padding-block: 1.05rem; border-bottom: var(--trait);
  display: grid; grid-template-columns: 6rem minmax(0,1fr); gap: 1rem;
  align-items: baseline; font-size: .9375rem;
}
.contact__direct span:first-child{ color: var(--terra-txt); }
.contact__direct a{ color: var(--encre); text-decoration: none; border-bottom: 1px solid var(--encre-30); }
.contact__direct a:hover{ border-bottom-color: var(--terracotta); }

.form{
  background: var(--ivoire); padding: clamp(1.75rem, 3.5vw, 2.5rem);
  border: 1px solid var(--encre-12); border-radius: 2px;
}
.champ + .champ, .rang + .champ, .champ + .rang, .rang + .rang{ margin-top: 1.2rem; }
.rang{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 1.2rem; }

.champ label{ display: block; font-size: .8125rem; font-weight: 500; margin-bottom: .45rem; }
.champ .opt{ font-weight: 400; color: var(--encre-55); }
.champ input, .champ select, .champ textarea{
  width: 100%; font-family: var(--sans); font-size: .9375rem; color: var(--encre);
  background: #fff; border: 1px solid var(--encre-26); border-radius: 2px;
  padding: .8rem .9rem; transition: border-color .2s ease;
}
.champ textarea{ resize: vertical; min-height: 7rem; line-height: 1.6; }
.champ input::placeholder, .champ textarea::placeholder{ color: var(--encre-55); }
.champ input:hover, .champ select:hover, .champ textarea:hover{ border-color: var(--encre-45); }
.champ input:focus, .champ select:focus, .champ textarea:focus{ border-color: var(--terra-txt); }
.champ input[aria-invalid="true"], .champ textarea[aria-invalid="true"]{ border-color: var(--terra-txt); }
.erreur{ margin: .45rem 0 0; font-size: .8125rem; font-weight: 500; color: var(--terra-txt); }

.form .btn{ width: 100%; margin-top: 1.75rem; }
.statut{ margin: 1rem 0 0; font-size: .875rem; font-weight: 500; color: var(--terra-txt); min-height: 1.25rem; }
.form__note{
  margin: 1.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--encre-12);
  font-size: .78125rem; line-height: 1.62; color: var(--encre-70);
}
.form__note a{ color: var(--encre-70); }

/* =========================================================
   Pied de page
   ========================================================= */
.pied{ background: var(--encre); color: var(--ivoire-doux); padding-block: clamp(3.5rem, 6vw, 5rem) 2rem; }
.pied__haut{
  display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem); border-bottom: var(--trait-clair);
}
.pied__logo{ height: 2.5rem; width: auto; margin-bottom: 1rem; }
.pied__signature{ font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--rose); margin: 0; }
.pied__label{ font-size: .875rem; font-weight: 500; color: var(--rose); margin: 0 0 .9rem; }
.pied__col p{ font-size: .875rem; line-height: 1.68; color: var(--ivoire-70); margin: 0 0 .5rem; }
.pied__col a{ color: var(--ivoire-doux); text-decoration: none; border-bottom: 1px solid rgba(237,230,221,.3); }
.pied__col a:hover{ border-bottom-color: var(--rose); }
.pied__liens li + li{ margin-top: .6rem; }

.pied__bas{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; padding-top: 1.75rem; }
.pied__bas p{ margin: 0; font-size: .78125rem; color: rgba(237,230,221,.62); }
.pied__bas nav{ display: flex; gap: 1.25rem; }
.pied__bas a{ font-size: .78125rem; color: rgba(237,230,221,.62); text-decoration: none; border-bottom: 1px solid rgba(237,230,221,.25); }
.pied__bas a:hover{ color: var(--ivoire); border-bottom-color: var(--rose); }

/* =========================================================
   Pages juridiques
   ========================================================= */
.doc{ padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 7rem); }
.doc__retour{
  display: inline-block; margin-bottom: 2.5rem; font-size: .8125rem; font-weight: 500;
  color: var(--terra-txt); text-decoration: none; border-bottom: 1px solid rgba(154,79,59,.45); padding-bottom: .15rem;
}
.doc h1{ font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 1rem; }
.doc__maj{ font-size: .8125rem; color: var(--encre-70); margin-bottom: 3rem; }
.doc__corps{ max-width: 70ch; }
.doc__corps h2{
  font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin: 2.75rem 0 1rem;
  padding-bottom: .6rem; border-bottom: 1px solid rgba(194,111,92,.3);
}
.doc__corps h2:first-of-type{ margin-top: 0; }
.doc__corps p, .doc__corps li{ font-size: .9375rem; line-height: 1.78; color: var(--encre-70); }
.doc__corps strong{ color: var(--encre); font-weight: 600; }
.doc__corps ul{ margin: 0 0 1.2rem; }
.doc__corps li{ padding-left: 1.05rem; position: relative; margin-bottom: .5rem; }
.doc__corps li::before{ content:""; position:absolute; left:0; top:.72em; width:5px; height:1px; background: var(--terracotta); }
.doc__corps a{ color: var(--terra-txt); }

/* =========================================================
   Apparition discrète
   ========================================================= */
.reveal{ opacity: 0; transform: translateY(14px); transition: opacity .65s ease, transform .65s ease; }
.reveal.is-visible{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reveal{ opacity: 1; transform: none; transition: none; }
  .seuil__passage span{ animation: none; }
  *{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =========================================================
   Adaptations
   ========================================================= */
@media (max-width: 68rem){
  .opportunite__grille, .exp__grille, .contact__grille{ grid-template-columns: minmax(0, 1fr); }
  .etape{ grid-template-columns: 3rem minmax(0, 1fr); }
  .etape__benefice{ grid-column: 2; }
}

@media (max-width: 64rem){
  .nav__bouton{ display: inline-flex; }
  .entete{ position: relative; }
  html{ scroll-padding-top: 1.5rem; }

  .nav__liste{
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ivoire); border-bottom: var(--trait);
    padding: .25rem var(--gouttiere) 1.25rem; display: none; z-index: 60;
  }
  .nav__liste.est-ouvert{ display: flex; }
  .nav__liste li{ border-top: 1px solid var(--encre-12); }
  .nav__liste a{ display: block; padding: .95rem 0; font-size: .9375rem; white-space: normal; }

  .situation{ scroll-margin-top: 1.5rem; }
  .contact__direct li{ grid-template-columns: minmax(0,1fr); gap: .3rem; }
}

@media (max-width: 34rem){
  .seuil__signe{ width: 62vw; right: -14%; bottom: -8%; opacity: .13; }
  .seuil{ min-height: auto; }
}

@media print{
  .entete, .form, .seuil__passage, .seuil__signe, .nav__bouton{ display: none; }
  body{ background:#fff; }
  .reveal{ opacity:1; transform:none; }
}


/* =========================================================
   Ajouts de la passe finale du 5 août
   ========================================================= */

/* Le seuil occupe la fenêtre et pousse le repère de défilement en bas */
.seuil{ justify-content: space-between; }
.seuil__pied{ position: relative; width: 100%; padding-top: clamp(2.5rem, 5vw, 4rem); }

.seuil__passage{
  display: inline-flex; align-items: baseline; gap: .7rem;
  font-family: var(--sans); font-size: .9375rem; font-weight: 500;
  color: var(--encre); text-decoration: none; width: fit-content;
  padding-bottom: .4rem; border-bottom: 1px solid var(--encre-30);
  transition: border-color .2s ease;
}
.seuil__passage:hover{ border-bottom-color: var(--terracotta); }
.seuil__passage span{ font-size: 1.05rem; line-height: 1; animation: descendre 3.4s ease-in-out infinite; }

/* ---------- Transition, compacte ---------- */
.transition{ padding-block: clamp(3.5rem, 6vw, 5.5rem); border-bottom: var(--trait); }
.transition__grille{
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.transition__titre{
  font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.12;
  font-style: italic; font-weight: 300; max-width: 14ch;
}
.transition__texte{ font-size: clamp(1rem, 1.1vw, 1.0625rem); line-height: 1.7; color: var(--encre-70); max-width: 56ch; }
/* Les repères sont séparés par un filet, jamais par un caractère :
   un point médian peut se retrouver seul en début de ligne. */
.transition__reperes{
  display: flex; flex-wrap: wrap; gap: .6rem 0;
  margin: 1.6rem 0 0; padding-top: 1.4rem; border-top: var(--trait);
  font-family: var(--serif); font-size: clamp(1.15rem, 1.6vw, 1.35rem); color: var(--encre);
}
.transition__reperes span{ padding-inline: 1.4rem; }
.transition__reperes span:first-child{ padding-left: 0; }
.transition__reperes span:last-child{ padding-right: 0; }
.transition__reperes span + span{ border-left: 1px solid var(--terra-trait); }

@media (max-width: 48rem){
  .transition__reperes{ flex-direction: column; gap: 0; }
  .transition__reperes span{ padding: .55rem 0; }
  .transition__reperes span + span{ border-left: 0; border-top: 1px solid var(--terra-trait); }
}

/* ---------- Situations : intitulés sémantiques complets ---------- */
.situation__titre{
  font-size: clamp(1.05rem, 1.25vw, 1.1875rem);
  font-family: var(--sans); font-weight: 500; line-height: 1.4;
  color: var(--encre-70); margin-bottom: 1rem;
}
.situation__mot{
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.85rem, 2.7vw, 2.2rem); line-height: 1.1;
  color: var(--encre); margin-bottom: .15rem;
}
.situation__resultat span{
  display: block; font-family: var(--sans); font-size: .8125rem;
  font-weight: 400; color: var(--encre-70); margin-bottom: .25rem;
}

/* ---------- Missions ---------- */
.missions{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(2rem, 3.5vw, 3rem) clamp(2rem, 4vw, 3.5rem);
}
.mission h3{
  font-size: clamp(1.25rem, 1.7vw, 1.45rem);
  padding-bottom: .7rem; margin-bottom: .9rem;
  border-bottom: 1px solid var(--terra-trait);
}
.mission p{ font-size: .9375rem; line-height: 1.68; color: var(--encre-70); }

/* ---------- Formulaire Netlify ---------- */
.pot-de-miel{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.merci{
  background: var(--ivoire); border: 1px solid var(--terra-trait);
  border-radius: 2px; padding: clamp(1.75rem, 3.5vw, 2.5rem);
}
.merci h3{ font-size: clamp(1.5rem, 2.2vw, 1.85rem); margin-bottom: 1rem; }
.merci p{ font-size: .9375rem; line-height: 1.7; color: var(--encre-70); }
.merci a{ color: var(--terra-txt); }

@media (max-width: 68rem){
  .transition__grille{ grid-template-columns: minmax(0, 1fr); }
  .transition__titre{ max-width: 100%; }
}