/* =====================================================================
   JE Digital · feuille de style
   ---------------------------------------------------------------------
   Sommaire
   1.  Réglages (couleurs, typo, mise en page, mouvement)
   2.  Base
   3.  Utilitaires (conteneur, grain, accessibilité)
   4.  Boutons et liens
   5.  En-tête et barre de progression
   6.  Hero
   7.  Bande des engagements
   8.  Sections, étapes, besoins
   9.  Preuve
   10. Contact
   11. Pied de page
   12. Animations : ouverture du hero
   13. Animations : étapes, contact
   14. Responsive
   15. Mouvement réduit
   ===================================================================== */


/* 1. RÉGLAGES --------------------------------------------------------- */
:root {
  /* Couleurs de la DA « Signature » */
  --encre:       #101E33;   /* texte, logo, fonds pleins */
  --encre-2:     #1A2B45;   /* surfaces posées sur l'encre */
  --encre-3:     #2B3C56;   /* filets sur l'encre */
  --ivoire:      #F7F4ED;   /* fond principal */
  --blanc:       #FFFFFF;
  --terre:       #A8451F;   /* accent sur fond clair : actions, JE */
  --terre-fonce: #7E3315;   /* survol des actions */
  --ambre:       #E09B45;   /* accent sur fond encre uniquement */
  --ardoise:     #4E5867;   /* texte secondaire */
  --ligne:       #E4DED1;   /* filets sur l'ivoire */
  --brume:       #8E99A8;   /* texte secondaire sur l'encre */
  --alerte:      #A11D1D;   /* erreurs de saisie uniquement */

  /* Typographie */
  --f-titre: 'Bricolage Grotesque', Georgia, 'Times New Roman', serif;
  --f-texte: Karla, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Mise en page */
  --largeur: 1240px;
  --marge:   clamp(20px, 5vw, 72px);
  --biais:   42px;           /* inclinaison des bords de section, reprise des barres du logo */
  --biais-hero: 72px;        /* coupe du panneau portrait */
  --nav-h:   80px;

  /* Mouvement */
  --duree: 1;                /* multiplicateur global : 0.6 = plus vif, 1.4 = plus posé */
  --ease-sortie: cubic-bezier(.16, 1, .3, 1);
  --ease-coupe:  cubic-bezier(.7, 0, .2, 1);

  /* Grain des sections sombres (bruit SVG, aucun fichier externe) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");

  color-scheme: light;
}
/* L'identité est fixe : même rendu quel que soit le thème du système */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: light; }
}
:root[data-theme="dark"] { color-scheme: light; }


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

html {
  background: var(--ivoire);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

body {
  margin: 0;
  background: var(--ivoire);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
picture { display: contents; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-titre);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.032em;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--terre); }
a:hover { color: var(--terre-fonce); }


/* 3. UTILITAIRES ------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.grain { position: relative; isolation: isolate; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .06;
  pointer-events: none;
  z-index: 0;
}
.grain > * { position: relative; z-index: 1; }

.evitement {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--encre);
  color: var(--ivoire);
  font-weight: 700;
  text-decoration: none;
  transition: top .2s;
}
.evitement:focus { top: calc(12px + env(safe-area-inset-top, 0px)); color: var(--ivoire); }

:focus-visible { outline: 3px solid var(--terre); outline-offset: 3px; }
.bande :focus-visible,
.realisations :focus-visible,
.pied :focus-visible { outline-color: var(--ambre); }
.contact :focus-visible { outline-color: var(--ivoire); }
.contact .formulaire-carte :focus-visible { outline-color: var(--terre); }

[hidden] { display: none !important; }


/* 4. BOUTONS ET LIENS ------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 2px solid var(--terre);
  background: var(--terre);
  color: var(--ivoire);
  font-family: var(--f-texte);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s;
}
.btn:hover { background: var(--terre-fonce); border-color: var(--terre-fonce); color: var(--ivoire); }
.btn-lg { min-height: 60px; padding: 0 32px; font-size: 17px; }
.btn-contour { background: transparent; border-color: var(--encre); color: var(--encre); }
.btn-contour:hover { background: var(--encre); border-color: var(--encre); color: var(--ivoire); }

.lien {
  position: relative;
  padding: 10px 0;
  color: var(--encre);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.lien::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  background: var(--terre);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .35s var(--ease-sortie);
}
.lien:hover { color: var(--encre); }
.lien:hover::after,
.lien:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }


/* 5. EN-TÊTE ET BARRE DE PROGRESSION ---------------------------------- */
.progression {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  z-index: 60;
  height: 3px;
  background: var(--terre);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

.nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: rgba(247, 244, 237, .9);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.nav.defile { border-bottom-color: var(--ligne); }

.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--nav-h);
  transition: min-height .4s var(--ease-sortie);
}
.nav.defile .nav-in { min-height: 64px; }

.marque { display: flex; align-items: center; gap: 11px; color: var(--encre); text-decoration: none; }
.marque:hover { color: var(--encre); }
.marque-mot {
  font-family: var(--f-titre);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1;
}
.mono path { transform-box: fill-box; }

.liens { display: flex; align-items: center; gap: 28px; }
.nav-appel { display: none; }


/* 6. HERO ------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  min-height: min(calc(100svh - var(--nav-h)), 740px);
}

.hero-texte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  padding-block: clamp(48px, 6vw, 88px) clamp(56px, 6.5vw, 96px);
  /* aligne le texte sur la grille des autres sections, même sur grand écran */
  padding-left: max(var(--marge), calc((100vw - var(--largeur)) / 2 + var(--marge)));
  padding-right: clamp(24px, 4vw, 56px);
}

.hero-role { color: var(--terre); font-size: 15px; font-weight: 700; }

.hero-titre { font-size: clamp(2.1rem, 3.5vw, 3.5rem); line-height: 1.04; }

/* chaque ligne se dévoile derrière son propre masque */
.ligne { display: block; overflow: hidden; padding: .08em 0 .14em; margin: -.08em 0 -.14em; }
.ligne > span { display: block; }

.je {
  position: relative;
  display: inline-block;
  color: var(--terre);
  font-size: 1.3em;
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.05em;
}
/* la barre sous JE : la branche centrale du E du logo */
.je::after {
  content: "";
  position: absolute;
  left: .02em;
  right: .1em;
  bottom: -.05em;
  height: .1em;
  background: var(--terre);
  clip-path: polygon(.12em 0, 100% 0, calc(100% - .12em) 100%, 0 100%);
  transform-origin: 0 50%;
}

.chapo { max-width: 34em; color: var(--ardoise); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.62; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }
.promesse { max-width: 32em; color: var(--encre); font-size: 15px; font-weight: 600; }

.hero-visuel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(40px, 4vw, 64px) clamp(28px, 3vw, 48px) clamp(40px, 4vw, 64px) calc(var(--biais-hero) + clamp(24px, 3vw, 40px));
  background: var(--encre);
  clip-path: polygon(var(--biais-hero) 0, 100% 0, 100% 100%, 0 100%);
}
.portrait-cadre { position: relative; width: 100%; max-width: 420px; margin: 0; will-change: transform; }
.portrait { width: 100%; aspect-ratio: 1; overflow: hidden; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }

.hero-visuel .vignette {
  position: absolute;
  left: -32px;
  bottom: -24px;
  padding: 14px 20px;
  background: var(--ivoire);
}
.vignette strong { display: block; font-family: var(--f-titre); font-size: 20px; font-weight: 700; letter-spacing: -.025em; }
.vignette span { display: block; margin-top: 2px; color: var(--terre); font-size: 13.5px; font-weight: 700; }


/* 7. BANDE DES ENGAGEMENTS -------------------------------------------- */
.bande {
  margin-top: calc(-1 * var(--biais));
  padding: calc(var(--biais) + clamp(28px, 4vw, 48px)) 0 clamp(44px, 5vw, 64px);
  background: var(--encre);
  color: var(--ivoire);
  clip-path: polygon(0 var(--biais), 100% 0, 100% 100%, 0 100%);
}
.bande-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 52px); }
.bande h2 { margin-bottom: 8px; color: var(--ivoire); font-size: clamp(1.15rem, 1.75vw, 1.45rem); font-weight: 600; letter-spacing: -.025em; }
.bande p { color: var(--brume); font-size: 15.5px; line-height: 1.55; }


/* 8. SECTIONS, ÉTAPES, BESOINS ---------------------------------------- */
.bloc { padding: clamp(72px, 9vw, 128px) 0; }
.bloc.bloc-suite { padding-top: 0; }

.tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 40px;
  margin-bottom: clamp(36px, 4.5vw, 60px);
}
.tete h2 { font-size: clamp(1.8rem, 3.4vw, 2.75rem); }
.tete p { max-width: 27em; color: var(--ardoise); }

.etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.5vw, 48px); }
.etape { display: flex; flex-direction: column; gap: 14px; }
.num {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 56px;
  min-width: 96px;
  padding: 0 18px 0 24px;
  background: var(--terre);
  color: var(--ivoire);
  font-family: var(--f-titre);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.04em;
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}
.etape h3 { margin-top: 6px; font-size: clamp(1.18rem, 1.75vw, 1.42rem); font-weight: 600; letter-spacing: -.022em; }
.etape p { color: var(--ardoise); font-size: 16px; }

.besoins {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 56px) clamp(24px, 3.5vw, 48px);
}
.besoin { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid var(--ligne); }
.besoin svg { color: var(--terre); }
.besoin h3 { font-size: clamp(1.08rem, 1.5vw, 1.25rem); font-weight: 600; letter-spacing: -.022em; }
.besoin p { color: var(--ardoise); font-size: 15.5px; line-height: 1.55; }


/* 9. RÉALISATIONS : CARROUSEL ----------------------------------------
   Défilement natif (scroll-snap) : au doigt, au pavé tactile, avec les
   boutons ou les flèches du clavier (main.js). La piste part de la
   grille du site et déborde jusqu'au bord droit de l'écran.
   ------------------------------------------------------------------- */
.realisations {
  --gouttiere: max(var(--marge), calc((100vw - var(--largeur)) / 2 + var(--marge)));
  padding: calc(var(--biais) + clamp(48px, 6vw, 84px)) 0 clamp(64px, 7vw, 104px);
  background: var(--encre);
  color: var(--ivoire);
  clip-path: polygon(0 var(--biais), 100% 0, 100% 100%, 0 100%);
}
.realisations-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
.realisations h2 { max-width: 17em; color: var(--ivoire); font-size: clamp(1.75rem, 3.2vw, 2.55rem); }
.realisations-intro { max-width: 34em; margin-top: 14px; color: var(--brume); }

.projets-controles { display: flex; align-items: center; gap: 8px; }
.projets-compteur {
  margin-right: 12px;
  color: var(--brume);
  font-family: var(--f-titre);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.projets-actuel { color: var(--ivoire); }

/* boutons en parallélogramme, l'inclinaison des barres du logo ;
   la forme est portée par ::before pour que le contour de focus reste visible */
.projets-bouton {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ivoire);
  cursor: pointer;
  transition: color .2s;
}
.projets-bouton::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--encre-3);
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  transition: background-color .2s;
}
.projets-bouton:hover { color: var(--encre); }
.projets-bouton:hover::before { background: var(--ambre); }
.projets-bouton:disabled { color: var(--brume); cursor: default; opacity: .45; }
.projets-bouton:disabled::before { background: var(--encre-2); }

.projets-piste {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  padding: 4px var(--gouttiere) 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gouttiere);
  scrollbar-width: none;
}
.projets-piste::-webkit-scrollbar { display: none; }
.projets-piste:focus-visible { outline-offset: -3px; }

.projet { flex: 0 0 min(620px, 80vw); scroll-snap-align: start; }
.projet figure { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.projet-image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--encre-2);
}
.projet-image img { width: 100%; height: 100%; object-fit: cover; }
/* repère d'accent : la barre centrale du logo, posée sur l'image */
.projet-image::after {
  content: "";
  position: absolute;
  left: 22px;
  bottom: 0;
  width: 72px;
  height: 10px;
  background: var(--ambre);
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.projet figcaption { display: flex; flex-direction: column; gap: 8px; max-width: 34em; }
.projet-categorie { color: var(--ambre); font-size: 14.5px; font-weight: 700; }
.projet-titre { color: var(--ivoire); font-size: clamp(1.2rem, 1.8vw, 1.45rem); font-weight: 600; letter-spacing: -.022em; }
.projet-texte { color: var(--brume); font-size: 15.5px; line-height: 1.6; }


/* 10. CONTACT --------------------------------------------------------- */
.contact { padding: clamp(64px, 8vw, 108px) 0; background: var(--terre); color: var(--ivoire); }
.contact-grille {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 5.5vw, 88px);
  align-items: start;
}
.contact h2 { max-width: 12em; color: var(--ivoire); font-size: clamp(1.8rem, 3.4vw, 2.75rem); }
.contact-texte p { max-width: 27em; margin-top: 14px; color: var(--ivoire); font-size: 17px; }
@media (min-width: 981px) {
  .contact-texte { position: sticky; top: 96px; }   /* 64 px d'en-tête compacté + 32 px d'air */
}

.coordonnees { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: clamp(28px, 3.5vw, 44px); }
.tel {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--ivoire);
  font-family: var(--f-titre);
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.03em;
  text-decoration: none;
}
.tel:hover { color: var(--ivoire); }
.tel span {
  padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size .45s var(--ease-sortie);
}
.tel:hover span,
.tel:focus-visible span { background-size: 100% 2px; }
.tel-icone { flex: 0 0 auto; transform-origin: 50% 50%; }

.mail {
  color: var(--ivoire);
  font-size: 17px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(247, 244, 237, .45);
  text-underline-offset: 4px;
  transition: text-decoration-color .2s;
}
.mail:hover { color: var(--ivoire); text-decoration-color: var(--ivoire); }

/* Formulaire : une carte ivoire posée sur la terre */
.formulaire-carte { padding: clamp(24px, 3.4vw, 48px); background: var(--ivoire); color: var(--encre); }
.formulaire { display: grid; gap: 20px; }
.champs-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.champ { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.champ label { color: var(--encre); font-size: 15px; font-weight: 700; line-height: 1.35; }
.facultatif { color: var(--ardoise); font-weight: 400; }

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1.5px solid #CFC6B5;
  border-radius: 0;
  background: var(--blanc);
  color: var(--encre);
  font: inherit;
  font-size: 16px;   /* 16 px : pas de zoom automatique sur iPhone */
  line-height: 1.4;
  transition: border-color .2s, box-shadow .2s;
}
.champ textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.champ select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23101E33' stroke-width='2'/%3E%3C/svg%3E");
  background-position: right 16px center;
  background-repeat: no-repeat;
  cursor: pointer;
}
.champ input:hover,
.champ select:hover,
.champ textarea:hover { border-color: #A99F8C; }
.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible {
  outline: none;
  border-color: var(--terre);
  box-shadow: 0 0 0 3px rgba(168, 69, 31, .2);
}
.champ [aria-invalid="true"] { border-color: var(--alerte); }
.champ-aide { color: var(--ardoise); font-size: 14px; line-height: 1.5; }
.champ-erreur { color: var(--alerte); font-size: 14px; font-weight: 700; line-height: 1.45; }

.champ-case { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: start; }
.champ-case input {
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--terre);
  cursor: pointer;
}
.champ-case label { color: var(--ardoise); font-size: 14.5px; font-weight: 400; line-height: 1.55; cursor: pointer; }
.champ-case .champ-erreur { grid-column: 2; }

/* piège à robots : hors de l'écran, ignoré des lecteurs d'écran */
.champ-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.formulaire-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 6px; }
.formulaire-pied .btn[disabled] { opacity: .7; cursor: progress; }
.formulaire-statut { font-size: 15px; font-weight: 700; }
.formulaire-statut.est-erreur { color: var(--alerte); }

.formulaire-succes { display: flex; flex-direction: column; gap: 10px; padding: clamp(8px, 2vw, 24px) 0; }
.formulaire-succes:focus { outline: none; }
.formulaire-succes svg { margin-bottom: 6px; color: var(--terre); }
.formulaire-succes p { color: var(--ardoise); }
.formulaire-succes .formulaire-succes-titre {
  color: var(--encre);
  font-family: var(--f-titre);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
}


/* 11. PIED DE PAGE ---------------------------------------------------- */
.pied { padding: 44px 0 48px; background: var(--encre); color: var(--brume); font-size: 14px; }
.pied-in { display: grid; grid-template-columns: 1.1fr 1.3fr auto; gap: 28px 48px; align-items: start; }
.pied-marque { display: flex; flex-direction: column; gap: 14px; }
.pied-engagement { color: var(--ivoire); font-weight: 600; }
.pied-legal { display: flex; flex-direction: column; gap: 4px; text-align: right; }
.pied a { color: var(--brume); }
.pied a:hover { color: var(--ivoire); }


/* 11 bis. PAGES DE TEXTE ---------------------------------------------- */
.texte-page { padding: clamp(48px, 7vw, 104px) 0 clamp(72px, 9vw, 128px); }
.texte-page-in { max-width: calc(760px + 2 * var(--marge)); }
.texte-page h1 { margin-bottom: clamp(28px, 4vw, 48px); font-size: clamp(2rem, 4vw, 3rem); }
.texte-page h2 { margin: clamp(32px, 4vw, 48px) 0 12px; font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 600; letter-spacing: -.022em; }
.texte-page p + p { margin-top: 12px; }
.texte-page p { color: var(--ardoise); }



/* 12. ANIMATIONS : OUVERTURE DU HERO ---------------------------------
   Les états de départ ne s'appliquent que si JavaScript tourne (.js).
   main.js ajoute .est-pret une fois les polices chargées : tout se joue
   alors en une seule séquence d'environ 1,8 seconde.
   ------------------------------------------------------------------- */

/* états de départ */
.js .mono-j { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .mono-b { opacity: 0; transform: translateX(40%); }
.js .hero-visuel { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
.js .portrait img { opacity: 0; transform: scale(1.14); }
.js .hero-visuel .vignette { opacity: 0; transform: translateY(18px); }
.js .ligne > span { transform: translateY(110%); }
.js .je::after { transform: scaleX(0); }
.js .hero-role,
.js .chapo,
.js .actions,
.js .promesse { opacity: 0; transform: translateY(14px); }

/* états d'arrivée, avec leur minutage */
.js.est-pret .mono-j {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset calc(800ms * var(--duree)) var(--ease-sortie);
}
.js.est-pret .mono-b {
  opacity: 1;
  transform: none;
  transition: opacity calc(500ms * var(--duree)) ease, transform calc(700ms * var(--duree)) var(--ease-sortie);
}
.js.est-pret .mono-b1 { transition-delay: calc(220ms * var(--duree)); }
.js.est-pret .mono-b2 { transition-delay: calc(330ms * var(--duree)); }
.js.est-pret .mono-b3 { transition-delay: calc(440ms * var(--duree)); }

.js.est-pret .hero-visuel {
  clip-path: polygon(var(--biais-hero) 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path calc(1100ms * var(--duree)) var(--ease-coupe) calc(120ms * var(--duree));
}
.js.est-pret .portrait img {
  opacity: 1;
  transform: none;
  transition: opacity calc(900ms * var(--duree)) ease calc(560ms * var(--duree)),
              transform calc(1600ms * var(--duree)) var(--ease-sortie) calc(560ms * var(--duree));
}
.js.est-pret .hero-visuel .vignette {
  opacity: 1;
  transform: none;
  transition: opacity calc(600ms * var(--duree)) ease calc(1250ms * var(--duree)),
              transform calc(800ms * var(--duree)) var(--ease-sortie) calc(1250ms * var(--duree));
}

.js.est-pret .ligne > span { transform: none; transition: transform calc(1000ms * var(--duree)) var(--ease-sortie); }
.js.est-pret .ligne:nth-child(1) > span { transition-delay: calc(320ms * var(--duree)); }
.js.est-pret .ligne:nth-child(2) > span { transition-delay: calc(440ms * var(--duree)); }
.js.est-pret .ligne:nth-child(3) > span { transition-delay: calc(560ms * var(--duree)); }

.js.est-pret .je::after {
  transform: none;
  transition: transform calc(650ms * var(--duree)) var(--ease-coupe) calc(1150ms * var(--duree));
}

.js.est-pret .hero-role,
.js.est-pret .chapo,
.js.est-pret .actions,
.js.est-pret .promesse {
  opacity: 1;
  transform: none;
  transition: opacity calc(700ms * var(--duree)) ease, transform calc(900ms * var(--duree)) var(--ease-sortie);
}
.js.est-pret .hero-role { transition-delay: calc(180ms * var(--duree)); }
.js.est-pret .chapo     { transition-delay: calc(820ms * var(--duree)); }
.js.est-pret .actions   { transition-delay: calc(940ms * var(--duree)); }
.js.est-pret .promesse  { transition-delay: calc(1060ms * var(--duree)); }


/* 13. ANIMATIONS : ÉTAPES ET CONTACT ----------------------------------
   Les étapes sont une séquence : les pavés se dévoilent l'un après
   l'autre. main.js pose .vu et le décalage (--decalage) à l'entrée
   dans l'écran. Le contact, lui, fait sonner le combiné une fois.
   ------------------------------------------------------------------- */
.js .etape .num { clip-path: polygon(16px 0, 16px 0, 0 100%, 0 100%); }
.js .etape h3,
.js .etape p { opacity: 0; transform: translateY(12px); }

.js .etape.vu .num {
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  transition: clip-path calc(750ms * var(--duree)) var(--ease-coupe) calc(var(--decalage, 0ms) * var(--duree));
}
.js .etape.vu h3,
.js .etape.vu p {
  opacity: 1;
  transform: none;
  transition: opacity calc(600ms * var(--duree)) ease calc((var(--decalage, 0ms) + 320ms) * var(--duree)),
              transform calc(800ms * var(--duree)) var(--ease-sortie) calc((var(--decalage, 0ms) + 320ms) * var(--duree));
}
.js .etape.vu p { transition-delay: calc((var(--decalage, 0ms) + 420ms) * var(--duree)); }

@keyframes sonne {
  0%, 100% { transform: rotate(0); }
  12% { transform: rotate(-16deg); }
  26% { transform: rotate(13deg); }
  40% { transform: rotate(-9deg); }
  54% { transform: rotate(6deg); }
  68% { transform: rotate(-3deg); }
  82% { transform: rotate(1deg); }
}
.js .contact.vu .tel-icone { animation: sonne calc(1000ms * var(--duree)) ease-out calc(350ms * var(--duree)) 1; }


/* 14. RESPONSIVE ------------------------------------------------------ */
@media (max-width: 980px) {
  :root { --nav-h: 72px; --biais: 30px; }

  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-texte { padding-left: var(--marge); padding-right: var(--marge); }

  .hero-visuel {
    padding: calc(var(--biais) + clamp(28px, 7vw, 44px)) var(--marge) clamp(56px, 12vw, 72px);
    clip-path: polygon(0 var(--biais), 100% 0, 100% 100%, 0 100%);
  }
  .js .hero-visuel { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
  .js.est-pret .hero-visuel { clip-path: polygon(0 var(--biais), 100% 0, 100% 100%, 0 100%); }
  .portrait-cadre { max-width: 340px; }
  .hero-visuel .vignette { left: -8px; bottom: -22px; }

  /* sur mobile le portrait et la bande se suivent : un seul bloc encre */
  .bande { margin-top: -1px; clip-path: none; padding-top: clamp(8px, 3vw, 20px); }

  .bande-liste,
  .etapes { grid-template-columns: 1fr; }
  .etapes { gap: 36px; }
  .besoins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grille { grid-template-columns: 1fr; }
  .projet { flex-basis: 84vw; }

  .pied-in { grid-template-columns: 1fr; }
  .pied-legal { text-align: left; }

  .lien { display: none; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .marque-mot { font-size: 26px; }
  .nav-cta { display: none; }
  .nav-appel { display: inline-flex; }
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn { width: 100%; }
  .besoins { grid-template-columns: 1fr; }
  .champs-2 { grid-template-columns: 1fr; }
  .formulaire-pied .btn { width: 100%; }
  .projets-compteur { margin-right: auto; }
  .realisations-tete { align-items: stretch; }
  .projets-controles { width: 100%; }
}


/* 15. MOUVEMENT RÉDUIT ------------------------------------------------
   Le visiteur a demandé moins d'animations dans son système :
   tout s'affiche directement dans son état final.
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .portrait-cadre { will-change: auto; }
}

/* ---------- Réalisations : visuels de présentation en 16:9 ----------
   À coller tout à la fin de assets/css/style.css.
   Les visuels sont au format 16:9 et chargés en texte : le cadre prend
   leur format (sinon leurs bords gauche et droit seraient rognés) et les
   diapositives s'élargissent pour qu'ils restent lisibles. */
.projet { flex-basis: min(860px, 80vw); }
.projet-image { aspect-ratio: 16 / 9; }
.projet-image::after { content: none; }   /* les visuels portent déjà leur propre décor */

@media (max-width: 980px) {
  .projet { flex-basis: 84vw; }
}