h1, h2, h3 { font-weight: 700; color: var(--violet-sombre); margin: 0; letter-spacing: -.018em; }


.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--h-entete) + 1.6rem) 0 clamp(2.2rem, 8vh, 5.4rem);
  overflow: hidden;
  isolation: isolate;
}

.hero__contenu {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--marge);
  display: grid;
  grid-template-columns: minmax(0, 1.07fr) minmax(0, .93fr);
  gap: clamp(1.9rem, 5.4vw, 6rem);
  align-items: end;
}

.kicker { font-size: .8rem; font-weight: 600; letter-spacing: .16em; color: var(--violet-sombre); margin-bottom: .9rem; }

.hero h1 { max-width: 14ch; text-wrap: balance; }

.hero__lead { margin-top: 1.3rem; font-size: var(--t-lead); font-weight: 500; line-height: 1.32; max-width: 46ch; color: var(--violet-sombre); }

.hero__phrase { font-size: clamp(1.2rem, 1.72vw, 1.62rem); font-weight: 500; line-height: 1.54; max-width: 30ch; color: var(--texte); }

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.7rem; margin-top: 1.6rem; }


.jauge__ensemble { width: max-content; max-width: 100%; margin: 0 auto; }

.jauge__ensemble[data-attente] { visibility: hidden; }

.jauge__ensemble[hidden], .jauge__note[hidden] { display: none; }

.jauge {
  margin-top: 1.9rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--filet);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.9rem, 1.6vw, 1.4rem);
}

.jauge__deja {
  flex: 0 0 auto;
  align-self: center;
  font-family: "Meow Script", "Onest", cursive;
  font-size: clamp(2.6rem, 3.4vw, 3.9rem);
  line-height: 1;
  color: var(--texte);
  -webkit-text-stroke: .6px currentColor;
  paint-order: stroke fill;
  transform: rotate(-7deg);
  margin: 0 -.2rem .5rem 0;
}

.jauge__anneau { position: relative; flex: 0 0 auto; width: 124px; height: 124px; }

.jauge__anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); }

.jauge__piste { fill: none; stroke: rgba(56, 54, 72, .13); stroke-width: 8; }

.jauge__arc { fill: none; stroke: var(--vert); stroke-width: 8; stroke-linecap: round; }

.jauge__nombre {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.55rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--vert);
  line-height: 1;
}

.jauge__nombre[data-chiffres="4"] { font-size: 1.9rem; }

.jauge__nombre[data-chiffres="5"] { font-size: 1.6rem; }

.jauge__legende { line-height: 1.4; }

.jauge__quoi { display: block; font-size: 1.0625rem; font-weight: 600; color: var(--violet-sombre); }

.jauge__palier { display: block; margin-top: .3rem; font-size: var(--t-petit); color: var(--texte); }

.jauge__note {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: .1rem;
  margin: -.7rem 0 0;
  padding-right: .7rem;
  color: var(--texte);
}

.jauge__note-texte {
  display: block;
  text-align: right;
  font-size: .79rem;
  line-height: 1.34;
  transform: rotate(-6deg);
  transform-origin: 100% 100%;
}

.jauge__note-fleche { flex: none; width: 56px; height: 52px; margin-bottom: .3rem; }


#le-lieu {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--h-entete) + 1rem) 0 clamp(2rem, 4vh, 3rem);
  overflow: hidden;
}

#le-lieu > .contenu { position: relative; z-index: 1; width: 100%; }

#le-lieu h2 { max-width: none; font-size: calc(var(--t-titre) * .95); }

#le-lieu br.coupe-mobile { display: none; }

.lieu__grille {
  display: grid;
  grid-template-columns: minmax(0, 4.6fr) minmax(0, 6fr);
  gap: clamp(1.8rem, 3.4vw, 3.4rem);
  align-items: start;
}

.lieu__texte { display: flex; flex-direction: column; gap: 1.1rem; max-width: 40rem; }

.lieu__texte p { line-height: 1.66; }

.lieu__reponse { color: var(--violet-sombre); font-weight: 600; }


.usages {
  margin-top: clamp(1.8rem, 4vh, 3.2rem);
  padding-top: clamp(1.4rem, 3vh, 2.2rem);
  border-top: 1px solid rgba(56, 54, 72, .14);
}

.niveaux {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2.2rem);
}

.niveaux li {
  position: relative;
  color: var(--violet-sombre);
  font-size: 1rem;
  line-height: 1.5;
}


.niveaux .nom-structure {
  display: block;
  font-size: clamp(.85rem, .72vw, .94rem);
  font-weight: 700;
  letter-spacing: .025em;
  text-transform: uppercase;
  color: var(--vert);
  line-height: 1.3;
  white-space: nowrap;
  margin-bottom: .45rem;
}

.lieu__lien { margin-top: clamp(1.2rem, 2.6vh, 1.9rem); }


#la-ferme {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--h-entete) + 1.5rem) 0 clamp(2.4rem, 6vh, 4.4rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--violet-sombre);
}

.ferme__fond {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  opacity: .65;
}

#la-ferme > .grain__voile { z-index: 2; opacity: .12; }

.ferme__contenu {
  position: relative;
  z-index: 3;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  align-items: end;
}

.panneau {
  background: var(--blanc);
  padding: clamp(1.5rem, 2.5vw, 2.5rem) clamp(1.35rem, 2.3vw, 2.3rem);
  border-radius: 3px;
  box-shadow: 0 26px 60px rgba(56, 54, 72, .34);
  max-width: 615px;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.panneau h2 { font-size: clamp(1.6rem, 2.35vw, 2.25rem); line-height: 1.08; margin-bottom: .25rem; }

.panneau p { line-height: 1.56; }

.panneau .lien-texte { margin-top: .3rem; align-self: flex-start; }

.apres {
  position: relative;
  width: min(100%, 424px);
  margin: 0 0 clamp(1rem, 3.4vh, 2.6rem) clamp(-3.4rem, -2.6vw, -1.4rem);
  padding: 10px 10px 0;
  background: var(--blanc);
  border-radius: 3px;
  box-shadow: 0 20px 44px rgba(56, 54, 72, .38);
  transform: rotate(4deg);
}

.apres img { border-radius: 1px; }

.apres__pied { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .4rem .8rem; padding: 0 .15rem .5rem; }

.apres__mot {
  font-family: "Meow Script", "Onest", cursive;
  font-size: clamp(2.1rem, 2.9vw, 3.1rem);
  line-height: 1;
  color: var(--vert);
  -webkit-text-stroke: 1px currentColor;
  paint-order: stroke fill;
  transform: rotate(-4deg);
  margin: .35rem 0 0 .2rem;
}

.apres figcaption { font-size: .72rem; letter-spacing: .03em; color: var(--texte); text-align: right; padding-bottom: .35rem; }

#la-ferme .bail { font-weight: 700; }


#les-etapes {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--h-entete) + 1rem) 0 clamp(2rem, 4vh, 3rem);
  overflow: hidden;
}

#les-etapes > .contenu { position: relative; z-index: 1; width: 100%; }

#les-etapes h2 { text-align: center; }

.frise {
  position: relative;
  list-style: none;
  margin: clamp(2.4rem, 6vh, 4.4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.frise::before,
.frise::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 0;
  border-top: 2px solid var(--vert);
}

.frise::before { left: 0; width: 56.25%; }

.frise::after { left: 56.25%; right: 0; border-top-style: dashed; }

.jalon {
  position: relative;
  min-height: clamp(230px, 34vh, 300px);
  padding: 0 .45rem;
}

.jalon__point {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border-radius: 50%;
  background: var(--vert);
}

.jalon--vient .jalon__point { background: var(--violace); border: 2px solid var(--vert); }

.jalon__bloc {
  position: absolute;
  left: 50%;
  width: 175%;
  transform: translateX(-50%);
  text-align: center;
}

.jalon:first-child .jalon__bloc { left: 0; width: 150%; transform: none; }

.jalon:last-child .jalon__bloc { left: auto; right: 0; width: 150%; transform: none; }

.jalon:nth-child(odd) .jalon__bloc { bottom: calc(50% + 22px); }

.jalon:nth-child(even) .jalon__bloc { top: calc(50% + 22px); }

.jalon__date {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  color: var(--violet-sombre);
  letter-spacing: -.005em;
  margin-bottom: .3rem;
}

.jalon__texte { display: block; font-size: .89rem; line-height: 1.42; }

.jalon--maintenant .jalon__texte { text-wrap: balance; }

.jalon--maintenant .jalon__bloc {
  background: var(--menthe);
  border-radius: 8px;
  padding: .7rem .9rem .8rem;
  width: 180%;
}

.jalon--maintenant .jalon__point { background: var(--vert); border: 0; width: 19px; height: 19px; margin: -9.5px 0 0 -9.5px; }

.jalon__fleche { color: var(--vert); font-weight: 700; }

.jalon__lien {
  display: inline-block;
  min-height: 24px;
  margin-top: .25rem;
  padding: .2rem 0;
  font-size: .78rem;
  color: var(--texte);
  text-decoration: underline;
  text-decoration-color: var(--filet);
  text-underline-offset: .22em;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

.jalon__lien:hover { color: var(--violet-sombre); text-decoration-color: var(--violet); }

.jalon__lien:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 3px; }

.etapes__chute {
  margin: clamp(3rem, 8vh, 5.5rem) auto 0;
  max-width: 44ch;
  text-align: center;
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  line-height: 1.42;
}

.etapes__chute strong { color: var(--violet-sombre); }


.etapes__lien { margin-top: .5rem; text-align: center; }


#le-pari {
  position: relative;
  color: var(--blanc);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--h-entete) + 1rem) 0 calc(clamp(2rem, 4vh, 3rem) + var(--bascule));
  overflow: hidden;
}

#le-pari > .contenu { position: relative; z-index: 1; width: 100%; }

#le-pari h2 { color: var(--blanc); max-width: 11ch; }

.pari__grille {
  display: grid;
  grid-template-columns: minmax(0, 4.2fr) minmax(0, 6.4fr);
  gap: clamp(1.8rem, 3.4vw, 3.4rem);
  align-items: start;
}

.pari__texte {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  font-size: clamp(1.05rem, 1.1vw, 1.14rem);
  line-height: 1.58;
}

.pari__texte strong { font-weight: 700; }

.pari__chute {
  margin-top: clamp(3.4rem, 9.5vh, 6.8rem);
  max-width: 27ch;
  font-size: clamp(1.1rem, 1.45vw, 1.45rem);
  font-weight: 500;
  line-height: 1.36;
  font-style: italic;
}

.pari__fort { font-weight: 700; }


:root { --bascule: clamp(2rem, 4.4vh, 3.5rem); }

#le-pari > .bascule {
  --filet: 2.5px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: calc(var(--bascule) + 2px);
  background: var(--blanc);
  clip-path: polygon(
    0 calc(var(--bascule) * .3214 - var(--filet)),
    100% calc(var(--bascule) - var(--filet)),
    100% 100%,
    0 100%);
  pointer-events: none;
}


#pourquoi-maintenant {
  position: relative;
  color: var(--blanc);
  min-height: 110vh;
  min-height: 110svh;
  display: flex;
  align-items: center;
  margin-top: calc(-1 * var(--bascule));
  padding: calc(var(--h-entete) + 1rem + var(--bascule)) 0 clamp(5rem, 22vh, 13rem);
  overflow: hidden;
  clip-path: polygon(0 calc(var(--bascule) * .3214), 100% var(--bascule), 100% 100%, 0 100%);
  background:
    radial-gradient(64% 40% at 92% 104%, rgba(56,54,72,.40), rgba(56,54,72,0) 66%),
    radial-gradient(72% 44% at 4% 100%, rgba(56,54,72,.30), rgba(56,54,72,0) 70%),
    radial-gradient(46% 42% at 86% -8%, rgba(186,255,228,.22), rgba(186,255,228,0) 70%),
    linear-gradient(rgba(56,54,72,.54), rgba(56,54,72,.54)),
    var(--vert);
}

#pourquoi-maintenant > .contenu { position: relative; z-index: 1; width: 100%; }

#pourquoi-maintenant h2 { color: var(--blanc); }

.maintenant__bloc { max-width: 58rem; margin: 0 auto; }

.maintenant__accroche {
  margin-top: clamp(1rem, 2.4vh, 1.8rem);
  font-size: clamp(1.1rem, 1.45vw, 1.45rem);
  font-weight: 500;
  line-height: 1.36;
  font-style: italic;
}

.maintenant__colonnes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.8rem, 3.4vw, 3.4rem);
  align-items: start;
  margin-top: clamp(3rem, 8vh, 5.8rem);
}

.maintenant__texte {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.maintenant__fort { font-weight: 700; }

.maintenant__consequence { color: var(--jaune); }

.maintenant__chute {
  margin-top: clamp(2.4rem, 6vh, 4.4rem);
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  font-weight: 700;
  line-height: 1.42;
}

@media (max-width: 860px) {
  #pourquoi-maintenant {
    background:
      radial-gradient(90% 34% at 96% 104%, rgba(56,54,72,.36), rgba(56,54,72,0) 68%),
      linear-gradient(rgba(56,54,72,.54), rgba(56,54,72,.54)),
      var(--vert);
  }

  .maintenant__colonnes { grid-template-columns: minmax(0, 1fr); gap: .85rem; margin-top: 2.4rem; }

  .maintenant__chute { margin-top: 2rem; }
}


#le-pari > .grain__voile {
  background-image: var(--grain-couleur);
  background-size: 240px 240px;
  opacity: .38;
  mix-blend-mode: overlay;
}

#pourquoi-maintenant > .grain__voile { opacity: .30; mix-blend-mode: overlay; }

.hero > .grain__voile,
#le-lieu > .grain__voile,
#les-etapes > .grain__voile,
#prendre-part > .grain__voile {
  background-image: var(--grain-couleur);
  background-size: 240px 240px;
  opacity: .18;
  mix-blend-mode: normal;
}


#le-pari {
  background:
    radial-gradient(70% 40% at 88% 106%, rgba(157,150,105,.72), rgba(157,150,105,0) 64%),
    radial-gradient(58% 30% at 12% -10%, rgba(157,150,105,.52), rgba(157,150,105,0) 66%),
    radial-gradient(82% 44% at 94% 2%, rgba(56,54,72,.52), rgba(56,54,72,0) 68%),
    radial-gradient(90% 50% at 6% 98%, rgba(56,54,72,.46), rgba(56,54,72,0) 70%),
    radial-gradient(70% 78% at 76% 44%, rgba(92,91,150,.78), rgba(92,91,150,0) 70%),
    radial-gradient(64% 74% at 24% 60%, rgba(112,93,130,.70), rgba(112,93,130,0) 72%),
    linear-gradient(rgba(56,54,72,.26), rgba(56,54,72,.26)),
    var(--violet);
}


.hero {
  background:
    radial-gradient(58% 46% at 6% 4%, rgba(186,255,228,.52), rgba(186,255,228,0) 62%),
    radial-gradient(46% 62% at 104% 48%, rgba(163,113,106,.30), rgba(163,113,106,0) 64%),
    radial-gradient(64% 40% at 78% 102%, rgba(118,109,160,.26), rgba(118,109,160,0) 66%),
    radial-gradient(60% 52% at 38% 46%, rgba(255,255,255,.92), rgba(255,255,255,0) 70%),
    var(--violace);
}


#le-lieu {
  background:
    radial-gradient(56% 50% at 96% 2%, rgba(163,113,106,.34), rgba(163,113,106,0) 62%),
    radial-gradient(62% 54% at 2% 96%, rgba(94,158,133,.26), rgba(94,158,133,0) 64%),
    radial-gradient(44% 38% at 92% 98%, rgba(255,243,168,.42), rgba(255,243,168,0) 66%),
    var(--blanc);
}


#les-etapes {
  background:
    radial-gradient(54% 44% at 98% 6%, rgba(157,150,105,.34), rgba(157,150,105,0) 62%),
    radial-gradient(60% 50% at 2% 94%, rgba(118,109,160,.32), rgba(118,109,160,0) 64%),
    radial-gradient(78% 58% at 46% 44%, rgba(255,255,255,.92), rgba(255,255,255,0) 70%),
    var(--violace);
}


#prendre-part {
  background:
    radial-gradient(84% 68% at 22% 10%, rgba(186,255,228,.40), rgba(186,255,228,0) 60%),
    radial-gradient(76% 62% at 90% 4%, rgba(163,113,106,.30), rgba(163,113,106,0) 62%),
    radial-gradient(70% 58% at 4% 90%, rgba(118,109,160,.28), rgba(118,109,160,0) 64%),
    var(--blanc);
}



#prendre-part {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--h-entete) + .8rem) 0 clamp(1.6rem, 3vh, 2.6rem);
  overflow: hidden;
  text-align: center;
}

#prendre-part > .contenu { position: relative; z-index: 1; width: 100%; }

.part__bloc { max-width: 47rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }

#prendre-part h2 { max-width: 18ch; position: relative; z-index: 0; }


.part__question {
  margin-top: clamp(1rem, 2.4vh, 1.8rem);
  font-size: var(--t-lead);
  font-weight: 600;
  line-height: 1.34;
  color: var(--violet-sombre);
  max-width: 30ch;
}

.part__texte { margin-top: .8rem; max-width: 46ch; line-height: 1.6; }

.part__texte--pivot { font-weight: 700; color: var(--violet-sombre); line-height: 1.78; margin-top: 1.2rem; }

.equations {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(.7rem, 1.6vw, 1.3rem);
  margin: clamp(1.2rem, 2.8vh, 2.2rem) 0 0;
}

.equations li {
  background: var(--violace);
  border-radius: 10px;
  padding: clamp(.8rem, 1.6vh, 1.15rem) clamp(1.1rem, 2vw, 1.9rem);
  font-size: 1.05rem;
  color: var(--texte);
  line-height: 1.25;
}

.equations b { font-size: clamp(1.5rem, 2.1vw, 2rem); font-weight: 700; color: var(--violet-sombre); letter-spacing: -.02em; }

.equations .eq { font-size: 1.35rem; font-weight: 700; color: var(--violet); padding: 0 .18em; }

.equations small { display: block; margin-top: .35rem; font-size: .8rem; color: var(--texte); }

.part__reassurance { margin-top: clamp(1rem, 2.4vh, 1.7rem); max-width: 44ch; font-size: .95rem; line-height: 1.55; }

.part__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  margin-top: clamp(1.4rem, 3.2vh, 2.2rem);
}

.part__actions .bouton { min-height: 58px; padding: 0 2.1rem; font-size: .95rem; }

#agir {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--h-entete) + .8rem) 0 clamp(1.6rem, 3vh, 2.6rem);
  overflow: hidden;
  background:
    radial-gradient(58% 46% at 4% 8%, rgba(157,150,105,.30), rgba(157,150,105,0) 64%),
    radial-gradient(52% 44% at 98% 88%, rgba(186,255,228,.44), rgba(186,255,228,0) 62%),
    radial-gradient(46% 40% at 88% 6%, rgba(255,243,168,.40), rgba(255,243,168,0) 66%),
    radial-gradient(70% 56% at 44% 50%, rgba(255,255,255,.86), rgba(255,255,255,0) 72%),
    var(--violace);
}

#agir > .contenu { position: relative; z-index: 1; width: 100%; }

#agir > .grain__voile {
  background-image: var(--grain-couleur);
  background-size: 240px 240px;
  opacity: .18;
  mix-blend-mode: normal;
}

#agir h2 { text-align: center; max-width: 20ch; margin: 0 auto; }


#agir {
  background:
    radial-gradient(66% 38% at 88% 104%, rgba(56,54,72,.44), rgba(56,54,72,0) 66%),
    radial-gradient(56% 30% at 10% -8%, rgba(255,243,168,.26), rgba(255,243,168,0) 68%),
    radial-gradient(74% 42% at 6% 96%, rgba(56,54,72,.34), rgba(56,54,72,0) 70%),
    radial-gradient(68% 74% at 74% 44%, rgba(126,80,90,.56), rgba(126,80,90,0) 72%),
    radial-gradient(62% 70% at 26% 56%, rgba(146,101,80,.52), rgba(146,101,80,0) 74%),
    linear-gradient(rgba(56,54,72,.34), rgba(56,54,72,.34)),
    var(--terracotta);
  color: var(--blanc);
}

#agir > .grain__voile { opacity: .34; mix-blend-mode: overlay; }

#agir h2, #agir .geste h3 { color: var(--blanc); }

#agir .porte h3 { color: var(--violet-sombre); }

#agir .bouton--primaire { background: var(--jaune); color: var(--violet-sombre); }

#agir .bouton--primaire:hover { filter: brightness(.94); }


.gestes {
  list-style: none;
  margin: clamp(3.6rem, 13vh, 9rem) 0 0;
  padding: 0;
  display: grid;
  align-items: start;
}

.gestes {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: clamp(.7rem, 1.6vw, 1.5rem);
  row-gap: clamp(1.8rem, 4.4vh, 3.2rem);
}

.geste--1 { grid-area: 1 / 1; }

.fleche--a { grid-area: 1 / 2; }

.geste--2 { grid-area: 1 / 3; }

.fleche--b { grid-area: 1 / 4; }

.geste--3 { grid-area: 1 / 5; }

@media (max-width: 1199px) {
  .gestes { grid-template-columns: minmax(0, 1fr); }
  .gestes .fleche { display: none; }
  .geste--1, .geste--2, .geste--3 { grid-area: auto; }
}

.geste--cta { grid-column: 1 / -1; justify-self: center; }


.geste h3 {
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: clamp(.45rem, 1vw, .85rem);
}

.geste__no {
  font-family: "Meow Script", "Segoe Script", cursive;
  font-size: clamp(3.2rem, 4.6vw, 4.6rem);
  line-height: 0;
  position: relative;
  top: .06em;
  color: var(--jaune);
  -webkit-text-stroke: .5px currentColor;
  opacity: .82;
}

.geste p { margin-top: .5rem; font-size: .95rem; line-height: 1.5; }

.geste--cta { display: flex; }

.geste--cta .bouton { min-height: 58px; padding: 0 1.9rem; font-size: .95rem; }

.fleche { color: var(--jaune); display: flex; justify-content: center; align-self: center; }

.fleche svg { display: block; width: 100%; height: auto; }

.fleche--a { width: clamp(40px, 4.4vw, 62px); }

.fleche--b { width: clamp(54px, 6.2vw, 88px); }


.portes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.7rem, 1.6vw, 1.2rem);
  margin-top: clamp(3.6rem, 9.4vh, 6.8rem);
  align-items: stretch;
}

.porte {
  background: var(--blanc);
  color: var(--texte);
  border-radius: 12px;
  padding: clamp(.9rem, 2vh, 1.35rem) clamp(1rem, 2vw, 1.7rem) clamp(1rem, 2.2vh, 1.45rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
}

.porte h3 { font-size: 1.02rem; color: var(--violet-sombre); }

.porte p { font-size: .93rem; line-height: 1.5; }

.infolettre { margin-top: auto; }

.porte > .infolettre__suite { margin-top: -.55rem; }

.porte { container-type: inline-size; }

.porte .lien-texte { margin-top: auto; }





.ferme__credit {
  position: absolute;
  z-index: 3;
  right: var(--marge);
  bottom: 1rem;
  padding: .3rem .6rem;
  border-radius: 4px;
  background: var(--violet-sombre);
  color: var(--blanc);
  font-size: .68rem;
  letter-spacing: .03em;
}


@media (max-width: 1080px) {
  .hero__contenu { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }

  .hero h1 { max-width: 22ch; }

  .hero__phrase { max-width: 46ch; }

  .lieu__grille { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }

  .niveaux { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 2rem; }

  .ferme__contenu { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; justify-items: start; }

  .apres { margin-left: 0; width: min(62%, 380px); }

  .jalon__texte { font-size: .86rem; }

  .pari__grille { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }

  #le-pari h2 { max-width: 100%; }

  .pari__chute { max-width: 100%; }

  #prendre-part h2 { max-width: 100%; }
}

@media (max-width: 899px) {
  #les-etapes {
    min-height: 0;
    padding: calc(var(--h-entete) + 2rem) 0 3rem;
    background:
      radial-gradient(64% 22% at 98% 4%, rgba(157,150,105,.32), rgba(157,150,105,0) 62%),
      radial-gradient(70% 24% at 2% 96%, rgba(118,109,160,.26), rgba(118,109,160,0) 64%),
      radial-gradient(96% 46% at 46% 46%, rgba(255,255,255,.94), rgba(255,255,255,0) 74%),
      var(--violace);
  }

  #les-etapes h2 { text-align: left; }

  .frise { grid-template-columns: minmax(0, 1fr); margin-top: 2rem; padding-left: 1.75rem; }

  .frise::before, .frise::after { display: none; }

  .jalon { min-height: 0; padding: 0 0 1.5rem; }

  .jalon::before {
    content: "";
    position: absolute;
    left: calc(-1.75rem + 6.5px);
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 2px solid var(--vert);
  }

  .jalon:first-child::before { top: calc(.45rem + 7px); }

  .jalon--maintenant::before, .jalon--maintenant ~ .jalon::before { border-left-style: dashed; }

  .jalon__point { top: .45rem; left: -1.75rem; margin: 0; }

  .jalon--maintenant .jalon__point { left: calc(-1.75rem - 2px); top: .85rem; margin: 0; }

  .jalon__bloc, .jalon:nth-child(odd) .jalon__bloc, .jalon:nth-child(even) .jalon__bloc,
  .jalon:first-child .jalon__bloc, .jalon:last-child .jalon__bloc {
    position: static;
    width: auto;
    transform: none;
    text-align: left;
  }

  .jalon--maintenant .jalon__bloc { width: auto; margin-right: 1rem; }

  .etapes__chute { text-align: left; margin-left: 0; }

  .etapes__lien { text-align: left; }
}

@media (max-width: 767px) {
  .hero { padding-top: calc(var(--h-entete) + 2rem); padding-bottom: 3.5rem; }

  .hero h1 { font-size: min(calc((100vw - 2.5rem) * .148), 4rem); max-width: 100%; }

  .hero__lead { font-size: 1.05rem; margin-top: .8rem; }

  .hero__contenu { display: flex; flex-direction: column; gap: 1rem; }

  .hero__bloc, .hero__colonne { display: contents; }

  .kicker { order: 1; }

  .hero h1 { order: 2; }

  .hero__lead { order: 3; }

  .jauge__ensemble { order: 5; width: max-content; max-width: 100%; margin: 0 auto; }

  .hero__phrase { order: 6; margin-top: .3rem; padding-top: 1.2rem; border-top: 1px solid var(--filet); }

  .jauge { margin-top: .5rem; padding-top: 0; border-top: 0; gap: .6rem; }

  .jauge__note { justify-content: flex-end; padding: 0 .5rem 0 0; margin-top: -.15rem; gap: .3rem; }

  .jauge__note-texte { transform: none; text-align: right; }

  .jauge__note-fleche { width: 44px; height: 38px; margin-bottom: .2rem; }

  .hero__actions { order: 7; margin-top: .4rem; }

  .jauge__anneau { width: 96px; height: 96px; }

  .jauge__nombre { font-size: 1.75rem; }

  .jauge__nombre[data-chiffres="4"] { font-size: 1.5rem; }

  .jauge__nombre[data-chiffres="5"] { font-size: 1.25rem; }

  .jauge__deja { font-size: 2.4rem; margin-bottom: .3rem; }

  .lieu__reponse { font-size: 1.1rem; }

  #la-ferme { display: block; min-height: 0; padding: 0 0 2.5rem; }

  .ferme__fond { position: relative; height: clamp(190px, 32vh, 260px); margin-bottom: 1.3rem; opacity: 1; }

  .panneau { padding: 1.25rem 1.15rem; }

  .apres { width: min(74%, 300px); margin-bottom: 0; }

  .ferme__credit { position: static; display: inline-block; margin: .9rem 0 0 var(--marge); }

  #le-pari { min-height: 0; padding: calc(var(--h-entete) + 2rem) 0 calc(3rem + var(--bascule)); }

  #pourquoi-maintenant { min-height: 0; padding: calc(var(--h-entete) + 2rem + var(--bascule)) 0 4.5rem; }


  #prendre-part { min-height: 0; padding: calc(var(--h-entete) + 2rem) 0 3rem; text-align: left; }

  #agir { min-height: 0; padding: calc(var(--h-entete) + 2rem) 0 3rem; }


  .gestes {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.3rem;
  }

  .geste, .fleche, .geste--cta { grid-area: auto; }

  .fleche { display: none; }

  #agir h2 { text-align: left; max-width: 100%; margin: 0; }

  .geste--cta { justify-self: stretch; }

  .geste--cta .bouton { width: 100%; }

  .portes { grid-template-columns: minmax(0, 1fr); }




  .part__bloc { align-items: flex-start; }

  .equations { justify-content: flex-start; }

  .part__actions { justify-content: flex-start; align-items: flex-start; }

  .part__actions .bouton { width: 100%; }


  .hero__contenu { align-items: stretch; }

  .hero__actions { gap: 1rem 1.7rem; }

  .hero__actions .bouton { width: 100%; }


  .niveaux { grid-template-columns: minmax(0, 1fr); gap: .95rem; }

  .niveaux .nom-structure {
    display: inline;
    margin: 0 .45rem 0 0;
    font-size: .82rem;
    white-space: normal;
  }


  #la-ferme { display: flex; flex-direction: column; align-items: stretch; }

  .ferme__fond { order: 1; margin-bottom: 0; }

  .ferme__credit { order: 2; margin: .6rem 0 1.3rem var(--marge); padding: 0; background: none; }

  .ferme__contenu { order: 3; }

  .apres { transform: rotate(2.5deg); }


  .pari__chute { margin-top: 1.5rem; }


  .equations li { width: 100%; text-align: center; }

  .equations small { text-align: center; }

  .part__actions { align-self: stretch; }

  br.coupe-large { display: none; }


  .gestes { margin-top: 2.6rem; row-gap: 1.7rem; }

  .geste h3 { gap: .7rem; }

  .geste--cta { margin-top: .9rem; }

  .portes { margin-top: 3.2rem; gap: .85rem; }

  .apres figcaption, .ferme__credit { font-size: .76rem; }


  .jauge { flex-wrap: wrap; justify-content: center; }

  .jauge__deja { margin-right: 0; }

  .jauge__legende { flex: 0 1 auto; min-width: 0; }

  .panneau { max-width: 100%; }


  #le-lieu {
    background:
      radial-gradient(66% 24% at 96% 2%, rgba(163,113,106,.34), rgba(163,113,106,0) 62%),
      radial-gradient(72% 24% at 2% 97%, rgba(94,158,133,.21), rgba(94,158,133,0) 64%),
      radial-gradient(54% 18% at 92% 99%, rgba(255,243,168,.42), rgba(255,243,168,0) 66%),
      var(--blanc);
  }

  #le-lieu h2 { font-size: min(calc((100vw - 2.5rem) * .0855), calc(var(--t-titre) * .95)); }

  #le-lieu br.coupe-titre { display: none; }

  #le-lieu br.coupe-mobile { display: inline; }

  #le-pari {
    background:
      radial-gradient(70% 22% at 88% 106%, rgba(157,150,105,.72), rgba(157,150,105,0) 64%),
      radial-gradient(58% 30% at 12% -10%, rgba(157,150,105,.52), rgba(157,150,105,0) 66%),
      radial-gradient(82% 44% at 94% 2%, rgba(56,54,72,.52), rgba(56,54,72,0) 68%),
      radial-gradient(90% 50% at 6% 98%, rgba(56,54,72,.46), rgba(56,54,72,0) 70%),
      radial-gradient(70% 78% at 76% 44%, rgba(92,91,150,.78), rgba(92,91,150,0) 70%),
      radial-gradient(64% 74% at 24% 60%, rgba(112,93,130,.70), rgba(112,93,130,0) 72%),
      linear-gradient(rgba(56,54,72,.26), rgba(56,54,72,.26)),
      var(--violet);
  }

  .lien-texte, .hero__phrase, .panneau p { text-wrap: pretty; }
}

@media (max-width: 879px) {
  .hero__actions .bouton--primaire,
  .part__actions .bouton--primaire,
  .geste--cta { display: none; }

  .ferme__credit { font-size: .76rem; }
}

@media (max-width: 359px) {
  .jauge__note-fleche { display: none; }

  .jauge__note { justify-content: center; padding: 0; margin-top: .4rem; }

  .jauge__note-texte { text-align: center; }

  .jalon--maintenant .jalon__bloc { margin-right: 0; padding-inline: .7rem; }
}