/* ============================================================
   REGA v3 — HERO (proposition 1)
   Reference de structure : hero kitemi.studio
   - fond clair texture + grille verticale fine
   - fenetre de navigateur translucide qui porte le titre
   - un seul mot en couleur d'accent
   - chevron discret plutot qu'un gros bouton
   - ligne de croissance dont les noeuds sont cales sur la grille
   Traduction REGA : creme, orange signature, encre brune, Sora + Caveat.
   ============================================================ */

.hero3 {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(120px, 16vh, 180px) var(--gutter) clamp(70px, 10vh, 120px);
  /* clip lateral seulement : le rognage vertical tranchait les annotations
     en pleine disparition. Elles peuvent deborder un peu sous la section,
     leur fondu est cale pour qu'elles y soient deja presque eteintes. */
  overflow-x: clip;
  perspective: 1500px;
}

/* ---- Couche d'ambiance ----
   Fixee au viewport et posee derriere toute la page : elle ne peut plus
   etre coupee par la limite d'une section. */
.ambiance {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.amb__grid {
  position: absolute;
  inset: 0;
  /* point plus petit, aux bords fondus : la trame se sent, elle ne se compte pas */
  background-image: radial-gradient(circle,
                    rgba(92, 53, 38, .21) 0,
                    rgba(92, 53, 38, .19) .85px,
                    transparent 1.9px);
  background-size: 24px 24px;
  background-position: center;
  opacity: .5;
  /* deux masques combines :
     - l'ellipse eteint la trame sur les bords de la page
     - le degrade vertical l'eteint sous la barre de navigation */
  -webkit-mask-image:
    radial-gradient(ellipse 108% 104% at 50% 50%, #000 52%, transparent 100%),
    linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .3) 100px, #000 215px);
  -webkit-mask-composite: source-in;
          mask-image:
    radial-gradient(ellipse 108% 104% at 50% 50%, #000 52%, transparent 100%),
    linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .3) 100px, #000 215px);
          mask-composite: intersect;
}

/* ---- Formes organiques ----
   Le blob est un element graphique de la charte REGA. Il remplace la ligne
   de croissance, qui appartenait au vocabulaire de la reference et pas au
   notre : REGA, c'est de la matiere chaude, pas un graphique de performance. */
.amb__blob {
  position: absolute;
  width: auto;
  filter: blur(18px);
  will-change: transform;
  animation: blob-breathe 24s ease-in-out infinite;
}

.amb__blob path { fill: currentColor; }

/* grande masse chaude en bas a gauche */
.amb__blob--1 {
  left: -14%;
  bottom: -26%;
  height: min(760px, 78vh);
  color: var(--orange-soft);
  opacity: .4;
}

/* rappel plus vif en haut a droite */
.amb__blob--2 {
  right: -12%;
  top: -22%;
  height: min(660px, 68vh);
  color: var(--orange);
  opacity: .06;
  animation-duration: 29s;
  animation-delay: -11s;
}

/* petite masse basse a droite, pour equilibrer */
.amb__blob--3 {
  right: 2%;
  bottom: -30%;
  height: min(460px, 46vh);
  color: var(--orange-soft);
  opacity: .26;
  animation-duration: 21s;
  animation-delay: -6s;
}

/* respiration lente : la forme vit sans jamais attirer l'oeil */
@keyframes blob-breathe {
  0%, 100% { transform: rotate(0deg)   scale(1); }
  34%      { transform: rotate(7deg)   scale(1.07); }
  67%      { transform: rotate(-5deg)  scale(.95); }
}

/* ---- La fenetre ---- */

/* La scene porte le relevement 3D. On separe les deux transformations :
   la scene se releve une fois, la fenetre garde son inclinaison et suit
   la souris. Melangees sur un seul element, elles se marcheraient dessus. */
.hero3__stage {
  position: relative;
  z-index: 1;
  width: min(1060px, 100%);
  transform-style: preserve-3d;
  will-change: transform;
  /* la revelation joue une fois, le flottement prend le relais ensuite */
  animation: window-drop 1.1s cubic-bezier(.28, .9, .3, 1) .2s both,
             window-float 8.5s ease-in-out 1.45s infinite;
}

/* La feuille se pose : elle descend, depasse legerement, se balance une
   fois et se stabilise. Un mouvement de matiere, pas un volet qui s'ouvre. */
@keyframes window-drop {
  0%   { opacity: 0; transform: translateY(-40px) rotate(-5.4deg) scale(.964); }
  40%  { opacity: 1; }
  58%  { transform: translateY(7px)  rotate(1.5deg)  scale(1.005); }
  80%  { transform: translateY(-3px) rotate(-1.6deg) scale(1); }
  100% { transform: translateY(0)    rotate(0deg)    scale(1); }
}

/* Flottement : quelques pixels et un tiers de degre. La fenetre respire,
   elle ne bouge pas. Au dela, l'oeil decroche du texte. */
@keyframes window-float {
  0%, 100% { transform: translateY(0)     rotate(0deg); }
  50%      { transform: translateY(-9px)  rotate(.34deg); }
}

/* ---- Reperes de calage ----
   Quatre equerres posees loin de la fenetre, comme les traits de coupe qu'on
   trace autour d'un document avant de l'imprimer. Elles cadrent sans fermer :
   un rectangle complet aurait ajoute une boite autour d'une boite.
   Elles sont dessinees et non construites en filets : coin largement arrondi
   comme tous les angles du site, et trace legerement irregulier. Les quatre
   sont differentes, chacune avec son propre tremblement : quatre equerres au
   pixel pres, ce serait un gabarit de logiciel, pas un geste. */
.hero3__reperes {
  --long: clamp(30px, 3.4vw, 46px);
  position: absolute;
  z-index: -1;
  inset: clamp(-42px, -3.6vw, -28px) clamp(-56px, -4.2vw, -32px);
  pointer-events: none;
}

.hero3__reperes svg {
  position: absolute;
  width: var(--long);
  height: var(--long);
  overflow: visible;
  opacity: 0;
  /* Deux temps sur le meme element, sans se marcher dessus : le cadrage se
     pose d'abord, puis le calage respire. La seconde animation demarre apres
     la fin de la premiere, et gagne alors sur le transform.
     Les miroirs sont dans le trace lui-meme, pas dans un transform CSS :
     sinon l'animation les ecraserait et les quatre equerres regarderaient
     toutes dans le meme sens. */
  animation: repere-cale .9s cubic-bezier(.2, 1.25, .35, 1) forwards,
             repere-souffle 15s ease-in-out infinite;
}

/* chaque equerre arrive de son coin, en diagonale */
.hero3__reperes svg:nth-child(1) { top: 0; left: 0;     --dx: -20px; --dy: -20px; }
.hero3__reperes svg:nth-child(2) { top: 0; right: 0;    --dx:  20px; --dy: -20px; }
.hero3__reperes svg:nth-child(3) { bottom: 0; right: 0; --dx:  20px; --dy:  20px; }
.hero3__reperes svg:nth-child(4) { bottom: 0; left: 0;  --dx: -20px; --dy:  20px; }

/* Retards en croix plutot qu'en tournant : les deux diagonales se posent
   l'une apres l'autre, comme deux equerres qu'on pose a deux mains. */
.hero3__reperes svg:nth-child(1),
.hero3__reperes svg:nth-child(3) { animation-delay: 1.15s, 2.4s; }
.hero3__reperes svg:nth-child(2),
.hero3__reperes svg:nth-child(4) { animation-delay: 1.34s, 3.9s; }

/* le souffle s'ecarte vers l'exterieur, chaque diagonale a son amplitude */
.hero3__reperes svg:nth-child(2),
.hero3__reperes svg:nth-child(4) { --souffle: 3.5px; }

.hero3__reperes path {
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: .45;
}

@keyframes repere-cale {
  from { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.6); }
  to   { opacity: 1; transform: none; }
}

/* Respiration : l'equerre s'ecarte d'un cheveu vers son coin, puis revient.
   Le mouvement est plus lent que le regard, on ne le voit pas bouger, on
   sent seulement que le cadrage n'est pas fige. */
@keyframes repere-souffle {
  0%, 100% { opacity: 1; transform: none; }
  50% {
    opacity: .82;
    transform: translate(calc(var(--dx) * var(--souffle, 3px) / 20px),
                         calc(var(--dy) * var(--souffle, 3px) / 20px));
  }
}

.hero3__window {
  --rot: -1.15deg;              /* posee a la main, pas alignee au pixel */
  --tx: 0deg;                   /* inclinaison suivant la souris (app.js) */
  --ty: 0deg;
  position: relative;
  width: 100%;
  border: 1px solid rgba(42, 16, 10, .1);
  border-radius: var(--r-lg);   /* les coins genereux de la charte */
  background: rgba(255, 252, 248, .72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  /* ombre teintee orange : jamais de gris dans la charte REGA.
     Elle glisse avec l'inclinaison, comme un objet sous une lampe. */
  box-shadow: 0 2px 10px rgba(42, 16, 10, .05),
              var(--shx, 0px) calc(40px + var(--shy, 0px)) 90px rgba(238, 78, 39, .14);
  overflow: hidden;
  transform: rotate(var(--rot)) rotateX(var(--tx)) rotateY(var(--ty));
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}

/* ---- L'encre qui seche ----
   Chaque mot du titre se pose comme un coup de tampon : il arrive un peu
   trop grand, en orange vif, puis reprend sa taille et vire au brun encre.
   C'est le mot lui-meme qui porte la couleur, plus une bande qui passe. */
.hero3__title .mot {
  --pose: var(--ink-soft);       /* encre ou le mot se repose */
  display: inline-block;
  opacity: 0;
  animation: encre-seche .8s var(--ease) both;
}

/* L'accroche seule porte la phrase : encre pleine et graisse plus haute.
   La suite reste en retrait, sinon plus rien ne ressort. */
.hero3__title .mot--fort {
  --pose: var(--ink);
  font-weight: 600;
}

@keyframes encre-seche {
  0% {
    opacity: 0;
    transform: translateY(9px) scale(1.09);
    color: var(--orange);
  }
  30%  { opacity: 1; }
  55%  { color: var(--orange); }
  100% {
    opacity: 1;
    transform: none;
    color: var(--pose);
  }
}

/* le reste du bloc se depose simplement, sans decoupe */
.hero3__sub,
.hero3__ctas,
.hero3__trust {
  animation: ink-lay .75s var(--ease) both;
}

.hero3__sub   { animation-delay: 1.20s; }
.hero3__ctas  { animation-delay: 1.32s; }
.hero3__trust { animation-delay: 1.42s; }

@keyframes ink-lay {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* barre de titre */
.hero3__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 17px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(244, 236, 223, .62);
}

/* fin liseré orange sous la barre : la signature de la maison */
.hero3__bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg,
              var(--orange) 0%,
              rgba(238, 78, 39, .35) 26%,
              transparent 60%);
}

.hero3__bar i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--orange);
}

.hero3__bar i:nth-child(2) { background: var(--orange-soft); }
.hero3__bar i:nth-child(3) { background: rgba(140, 101, 83, .45); }

/* adresse discrete, comme une vraie fenetre */
.hero3__url {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 14px;
  padding: 5px 17px 5px 10px;
  border-radius: 999px;
  background: rgba(250, 245, 238, .8);
  border: 1px solid var(--line);
  font-size: .89rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-mute);
}

.hero3__url img {
  width: 17px;
  height: 17px;
  border-radius: 50%;
}

/* contenu */
.hero3__content {
  padding: clamp(51px, 6.7vw, 86px) clamp(31px, 6vw, 91px) clamp(39px, 4.5vw, 55px);
  text-align: center;
}

.hero3__title {
  font-family: var(--titre);
  font-size: clamp(2.21rem, 4.65vw, 3.78rem);
  font-weight: 400;
  /* Fraunces se regle : SOFT arrondit les angles, WONK autorise les formes
     un peu de travers. C'est ce couple qui evite la serif de notaire.
     L'optique reste automatique, la police epaissit donc ses deliés d'elle-meme
     quand le titre retrecit sur mobile. */
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 34, 'WONK' 1;
  line-height: 1.18;
  /* une serif ne se resserre pas comme une grotesque : le tracking negatif de
     Sora collait les empattements les uns aux autres. */
  letter-spacing: -0.008em;
  color: var(--ink-soft);
  text-wrap: balance;
}

/* le mot qui porte la promesse : il s'encre en orange juste avant
   que le trait se dessine dessous */
.hero3__title b {
  font-weight: 800;
  color: var(--ink);
  animation: ink-in .45s var(--ease) 1.42s forwards;
}

@keyframes ink-in {
  to { color: var(--orange); }
}

/* soulignement trace a la main sous le mot cle */
.hero3__underline {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

/* ---- Coup de surligneur ----
   Un aplat qui passe derriere le mot, entre par la gauche et ressort par la
   droite. Le mot ne bouge pas : c'est le geste qui vit, pas la typo. Legerement
   de travers et deborde des lettres, comme un vrai trait de surligneur. */
.hero3__underline::before {
  content: "";
  position: absolute;
  left: -.16em;
  right: -.16em;
  top: .12em;
  bottom: -.02em;
  border-radius: .16em;
  background: var(--orange-soft);
  transform: rotate(-.7deg);
  clip-path: inset(0 100% 0 0);
  animation: surligneur 6.5s var(--ease) 3s infinite;
}

/* le mot repasse au-dessus de l'aplat */
.hero3__underline > b {
  position: relative;
  z-index: 1;
}

/* Le surlignage est un passage, pas un etat : l'aplat reste hors champ la
   plus grande partie du cycle, traverse le mot, et disparait. C'est le trait
   au feutre qui tient la position le reste du temps. */
@keyframes surligneur {
  0%, 55%   { clip-path: inset(0 100% 0 0); }   /* hors champ, cote gauche */
  70%, 78%  { clip-path: inset(0 0 0 0); }      /* le mot est couvert */
  92%, 100% { clip-path: inset(0 0 0 100%); }   /* sorti par la droite */
}

.hero3__underline svg {
  position: absolute;
  left: -4%;
  bottom: -.3em;
  width: 108%;
  height: .34em;
  overflow: visible;
}

.hero3__underline path {
  fill: none;
  stroke: var(--orange);
  stroke-width: 3.4;
  stroke-linecap: round;
  opacity: .28;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: underline-draw 1s var(--ease) 1.52s forwards,
             trait-cede .9s var(--ease) 6.4s forwards;
}

@keyframes underline-draw {
  to { stroke-dashoffset: 0; }
}

/* Passage de relais, une seule fois. Le trait accompagne l'arrivee de la page
   puis s'efface pour de bon, juste avant que l'aplat entre dans le mot. C'est
   ensuite le surlignage seul qui fait vivre "exister" : deux marques sur le
   meme mot, ca fait raye plutot que souligne. */
@keyframes trait-cede {
  to { opacity: 0; }
}

.hero3__sub {
  margin: clamp(26px, 3.35vw, 39px) auto 0;
  max-width: 52ch;
  font-size: clamp(1.18rem, 1.5vw, 1.32rem);
  line-height: 1.66;
  color: var(--ink-mute);
}

.hero3__sub strong {
  font-weight: 700;
  color: var(--ink);
}

/* ---- Appel a l'action ---- */
.hero3__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 26px;
  margin-top: clamp(31px, 3.9vw, 45px);
}

.hero3__link {
  position: relative;
  padding-block: 4px;
  font-size: 1.13rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: color .3s ease;
}

.hero3__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: currentColor;
  opacity: .3;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform .45s var(--ease), opacity .3s ease;
}

.hero3__link:hover { color: var(--orange); }

.hero3__link:hover::after {
  opacity: 1;
  transform-origin: left;
}

.hero3__trust {
  margin-top: 22px;
  font-size: .98rem;
  color: var(--ink-mute);
}

/* repere de scroll, hors de la fenetre */
.hero3__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(22px, 4vh, 46px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 78px;
  height: 36px;
  margin-left: -39px;
  border: 1.5px solid rgba(238, 78, 39, .34);
  border-radius: 999px;
  color: var(--orange);
  background: rgba(250, 245, 238, .72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  animation: note-in 1s var(--ease) 2.4s forwards;
  transition: background-color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}

.hero3__scroll:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--cream);
  transform: translateY(2px);
}

.hero3__scroll svg {
  width: 17px;
  height: 17px;
  animation: chevron-bob 2.4s var(--ease) infinite;
}

.hero3__scroll:hover svg { animation: none; }

@keyframes chevron-bob {
  0%, 100% { transform: translateY(-1px); }
  50%      { transform: translateY(2px); }
}

/* ---- Annotations manuscrites ----
   Une note griffonnee a cote de la maquette, pas une pastille d'application.
   Du Caveat pose directement sur le fond, sans cartouche : c'est l'ecriture
   qui porte la touche artisanale, un cadre arrondi la neutralisait. */
.hero3__note {
  --px: 0px;
  --py: 0px;
  --sy: 0px;       /* traine au defilement, pilotee par app.js */
  --tilt: 0deg;
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(268px, 23vw);
  /* pas de transition ici : le lissage se fait dans app.js, image par image.
     Une transition CSS ferait trainer l'annotation a chaque coup de molette. */
  transform: translate3d(var(--px), calc(var(--py) + var(--sy)), 0) rotate(var(--tilt));
}

.hero3__note-txt {
  display: block;
  transform-origin: left center;
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(1rem, 1.2vw, 1.24rem);
  /* Caveat a de longues hampes : trop serre, les jambages d'une ligne
     viennent toucher les majuscules de la suivante. */
  line-height: 1.16;
  color: var(--ink-soft);
}

.hero3__note-txt b {
  font-weight: 700;
  /* Assez pour porter l'accroche, pas assez pour ecraser les lignes qui
     suivent : au-dela, la note se lit comme un titre suivi d'une legende. */
  font-size: 1.1em;
  color: var(--orange);
}

/* Chaque ligne se decouvre de gauche a droite, dans le sens de l'ecriture.
   Elles sont aussi legerement decalees et inclinees l'une par rapport a
   l'autre : une main qui griffonne ne repart jamais de la meme abscisse, et
   un empilement parfaitement aligne trahit tout de suite le bloc de texte. */
.hero3__note-l {
  display: block;
  width: fit-content;
  transform: translateX(var(--dx, 0)) rotate(var(--dl, 0deg));
  clip-path: inset(-25% 100% -25% -6%);
  animation: hand-write .85s var(--ease) forwards;
}

@keyframes hand-write {
  to { clip-path: inset(-25% -6% -25% -6%); }
}

/* fleche tracee a la main, qui designe la fenetre */
.hero3__note-arrow {
  --rot: 0deg;
  transform: rotate(var(--rot));
  width: clamp(76px, 6.8vw, 106px);
  height: auto;
  margin-top: 8px;
  overflow: visible;
  fill: none;
  stroke: var(--orange);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .82;
}

/* Le trait a son propre geste, distinct de l'ecriture : un coup de feutre.
   Il part epais, se trace vite et s'affine en relachant, la ou le texte se
   decouvre lentement. Sa forme et son orientation sont ensuite reprises par
   app.js, qui la garde pointee sur la fenetre pendant le defilement. */
.hero3__note-line {
  stroke-dasharray: 160;
  animation: trait-feutre .55s cubic-bezier(.2, .8, .3, 1) both;
}

@keyframes trait-feutre {
  0%   { stroke-dashoffset: 160; stroke-width: 4.4; opacity: 0; }
  18%  { opacity: 1; }
  100% { stroke-dashoffset: 0;   stroke-width: 2.1; opacity: 1; }
}

/* la pointe se pose juste apres, d'un coup sec */
.hero3__note-tip {
  opacity: 0;
  animation: pointe-pose .28s cubic-bezier(.34, 1.5, .64, 1) both;
}

@keyframes pointe-pose {
  from { opacity: 0; transform: scale(.5); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- Note de gauche ---- */
.hero3__note--left {
  left: 4.5%;
  top: 58%;
  --tilt: -3.5deg;
  align-items: flex-start;
}

.hero3__note--left .hero3__note-l:nth-child(1) { animation-delay: 1.52s; }
.hero3__note--left .hero3__note-l:nth-child(2) { animation-delay: 1.70s; --dx: 3px; --dl: .22deg;  }
.hero3__note--left .hero3__note-l:nth-child(3) { animation-delay: 1.88s; --dx: 1px; --dl: -.18deg; }
.hero3__note--left .hero3__note-arrow { align-self: flex-end; margin-right: 6%; margin-top: 30px; transform-origin: 4% 13%; }
.hero3__note--left .hero3__note-line  { animation-delay: 1.22s; }
.hero3__note--left .hero3__note-tip   { animation-delay: 2.02s; }

/* ---- Note de droite ---- */
.hero3__note--right {
  right: 4.5%;
  top: 24%;
  --tilt: 2.8deg;
  align-items: flex-end;
  text-align: right;
}

/* alignee a droite, mais l'ecriture part toujours de la gauche du mot */
.hero3__note--right .hero3__note-txt { transform-origin: right center; }
.hero3__note--right .hero3__note-l { margin-left: auto; }
.hero3__note--right .hero3__note-l:nth-child(1) { animation-delay: 1.70s; }
.hero3__note--right .hero3__note-l:nth-child(2) { animation-delay: 1.88s; --dx: -3px; --dl: .2deg; }
.hero3__note--right .hero3__note-arrow { align-self: flex-start; margin-left: 6%; transform-origin: 96% 13%; }
.hero3__note--right .hero3__note-line  { animation-delay: 1.40s; }
.hero3__note--right .hero3__note-tip   { animation-delay: 1.92s; }

/* ---- Responsive ---- */

/* Les etiquettes ne s'affichent que s'il reste de la marge autour de la
   fenetre. En dessous elles mordraient sur le titre. */
@media (max-width: 1400px) {
  .hero3__note { display: none; }
}

@media (max-width: 900px) {
  .amb__grid { background-size: 22px 22px; }

  .hero3__url {
    margin-left: 10px;
    padding: 3px 11px 3px 6px;
    font-size: .68rem;
  }

  /* « Voir nos réalisations » faisait 40 px de haut : deux pixels de plus de
     chaque cote et le doigt ne le rate plus (44 px, WCAG 2.5.5).
     Le soulignement est cale sur le bas du lien : on le remonte d'autant,
     sinon il se decrocherait du texte. */
  .hero3__link { padding-block: 6px; }
  .hero3__link::after { bottom: 2px; }
}

@media (max-width: 620px) {
  .hero3 { padding-top: clamp(104px, 14vh, 140px); }
  .hero3__window { --rot: -0.7deg; border-radius: var(--r); }
  /* sur telephone, la fenetre touche presque les bords : les equerres se
     resserrent et s'effacent un peu */
  .hero3__reperes { inset: -20px -16px; --long: 24px; }
  .hero3__reperes path { opacity: .32; }
  /* sur telephone le geste de scroll est evident, le chevron n'apporte rien */
  .hero3__scroll { display: none; }

  /* moins de flou sur mobile : le rendu du blur coute cher sur petit GPU */
  .amb__blob { filter: blur(14px); }
  .amb__blob--2 { opacity: .05; }
}

@media (prefers-reduced-motion: reduce) {
  .hero3__note-l { clip-path: none; }
  .hero3__note-tip,
  .hero3__scroll,
  .hero3__title .mot { color: var(--pose); }
  .hero3__title,
  .hero3__sub,
  .hero3__ctas,
  .hero3__trust { opacity: 1; animation: none; transform: none; }

  .hero3__stage { opacity: 1; animation: none; transform: none; clip-path: none; }
  .hero3__reperes svg { opacity: 1; animation: none; transform: none; }
  .hero3__window { transform: rotate(var(--rot)); transition: none; }
  .hero3__title b { color: var(--orange); animation: none; }


  .hero3__note { transform: rotate(var(--tilt)); transition: none; }
  .amb__blob { animation: none; }
  .hero3__underline path { stroke-dashoffset: 0; animation: none; }
  .hero3__underline::before { display: none; }
  .hero3__scroll svg { animation: none; }
}