/* =========================================================
   La voix du coquelicot · v4
   Charte Charlotte : braise #a81900 · flamme #ff571f · ocre #d78614 · or #ebb427
   Titres : La Belle Aurore · Corps : Josefin Slab
   Sobre, doux, sensible, chaud.

   La charte « fraîche » d'origine (rose, cyan, violet) et sa pastille de bascule
   ont été retirées le 14/08/2026 sur décision de Vie, remplacées par la
   quatrième couleur vers le jaune. Retour arrière :
   /root/backups/coquelicot-avant-retours-rdv3-2026-08-14.tar.gz

   Partis pris v4 :
   · même contenu et même matière que la v3 (fil conducteur,
     lavis, bourgeons, grain du papier, panneaux éditoriaux)
   · hero recomposé en proportions classiques : titrage droit
     en deux colonnes, barre de navigation visible dès l'arrivée
   ========================================================= */

/* ---------- polices ---------- */
@font-face {
  font-family: 'Josefin Slab';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('assets/fonts/josefinslab-var.woff2?v=500377f7') format('woff2');
}
@font-face {
  font-family: 'Josefin Slab';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('assets/fonts/josefinslab-italic.woff2?v=8e2c08e3') format('woff2');
}
@font-face {
  font-family: 'La Belle Aurore';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/labelleaurore.woff2?v=5cd049d9') format('woff2');
}
@font-face {
  font-family: 'Cormorant';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/cormorant-italic.woff2?v=f19c16a2') format('woff2');
}

/* ---------- variables ---------- */
:root {
  /* Les couleurs de Charlotte : ocre et orange, choisies le 05/08/2026.
     Les noms de variables (--rose, --cyan, --violet) datent de sa première charte
     et sont gardés, ils portent les teintes de feu.

     Le 14/08/2026 s'ajoute une quatrième couleur, plus claire, vers le jaune,
     demandée au 3ème rendez-vous. Elle prolonge la rampe chaude : les quatre
     teintes montent régulièrement en clarté et tournent de la brique vers l'or.

       --violet  L .47  teinte 32   la braise
       --rose    L .68  teinte 37   la flamme
       --cyan    L .69  teinte 67   l'ocre
       --jaune   L .80  teinte 85   l'or            <- la nouvelle

     --jaune sert aux accents clairs (contour des bulles, aplats légers) et
     --jaune-fonce à ce qui doit rester lisible (chiffres, traits), avec un
     contraste de 4:1 sur blanc. */
  --rose: #ff571f;
  --cyan: #d78614;
  --violet: #a81900;
  --jaune: #ebb427;

  --rose-pale: #ffe1d3;
  --cyan-pale: #f9ecd4;
  --lilas: #f9e3d5;
  --jaune-pale: #fef1d0;

  --cyan-fonce: #9c6207;
  --violet-doux: #c9451f;
  --jaune-fonce: #a37800;

  --encre: #3a1409;
  --encre-2: #52271a;
  --encre-3: #7f4c38;
  --encre-main: #6e1f0d;

  --fond: #fffaf7;
  --blanc: #ffffff;

  --ciel-haut: #fffaf6;
  --ciel-bas: #fdf1e8;

  --voile-a: rgba(255, 246, 240, .97);
  --voile-b: rgba(252, 243, 229, .97);

  /* triplets pour les rgba() dérivés */
  --rose-rgb: 255, 87, 31;
  --cyan-rgb: 215, 134, 20;
  --violet-rgb: 168, 25, 0;
  --jaune-rgb: 235, 180, 39;
  --cyanf-rgb: 156, 98, 7;
  --jaunef-rgb: 163, 120, 0;
  --lilas-rgb: 249, 227, 213;
  --fond-rgb: 255, 250, 247;

  --police-corps: 'Josefin Slab', 'Iowan Old Style', Georgia, serif;
  --police-main: 'La Belle Aurore', 'Segoe Script', cursive;
  --police-phrase: 'Cormorant', 'Iowan Old Style', Georgia, serif;

  --rayon-organique-a: 34px 42px 30px 46px / 42px 32px 44px 32px;
  --rayon-organique-b: 44px 32px 46px 30px / 30px 44px 30px 42px;

  --ombre-douce: 0 18px 50px -18px rgba(var(--violet-rgb), .16);
  --ombre-legere: 0 10px 30px -14px rgba(var(--violet-rgb), .14);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* verrou horizontal : clip coupe sans créer de conteneur de scroll,
     contrairement à hidden qui laisse le viewport mobile s'élargir */
  overflow-x: hidden;
  overflow-x: clip;
}
/* ordi : lecture plus confortable, tout le corps de texte grandit */
@media (min-width: 980px) {
  html { font-size: 17.5px; }
  /* le hero garde la taille de la v5 (base 16px) : le titrage
     reste posé pendant que le corps de texte grandit */
  .seuil__surtitre { font-size: 13.1px; }
  .seuil__titre { font-size: clamp(48px, 6.2vw, 73.6px); }
  .seuil__phrase { font-size: clamp(24px, 2.6vw, 28.8px); }
  .seuil__qui { font-size: 15.2px; }
  /* idem pour les boutons : aux tailles v5 ils tiennent sur une ligne */
  .seuil__actions { gap: 14.4px; }
  .seuil__actions .bouton {
    font-size: 14.7px;
    padding: 16px 30.4px;
    gap: 9.6px;
  }
  /* paragraphes et textes courants agrandis sur ordi (22/07) */
  .texte { font-size: 1.14rem; }
  .texte--large { font-size: 1.26rem; }
  .etats li { font-size: 1.08rem; }
  .carte p { font-size: 1.06rem; }
  .temps__item p { font-size: 1.05rem; }
  .info p { font-size: 1.06rem; }
  .tarifs__duree { font-size: 1.06rem; }
  .tarifs__prix { font-size: 1.24rem; }
  .info__note { font-size: .93rem !important; }
}

body {
  margin: 0;
  font-family: var(--police-corps);
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--encre-2);
  background: var(--fond);
  overflow-x: hidden;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--rose); color: var(--encre); }

/* fond qui évolue au fil du scroll */
.ciel {
  position: fixed;
  inset: 0;
  z-index: -3;
  background: linear-gradient(180deg, var(--ciel-haut), var(--ciel-bas));
}

/* grain de papier, extrait du scan de Charlotte */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .34;
  mix-blend-mode: multiply;
  background-image: url('assets/img/papier.jpg?v=f0250642');
  background-size: 480px;
}

/* halo qui suit le pointeur */
.halo {
  position: fixed;
  top: -280px;
  left: -280px;
  width: 560px;
  height: 560px;
  z-index: -2;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(var(--rose-rgb), .28), rgba(var(--cyan-rgb), .07) 55%, transparent 70%);
  transition: opacity 1.2s ease;
}
body.pointeur-fin .halo { opacity: .8; }

.saut {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .7rem 1.2rem;
  background: var(--violet);
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  transition: top .3s;
}
.saut:focus { top: 1rem; }

/* ---------- le fil conducteur ---------- */
/* la page clippe en X : les lavis décoratifs qui débordent des sections
   ne peuvent plus élargir la zone de scroll (clip laisse l'axe Y libre) */
.page { position: relative; overflow-x: clip; }

.fil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
#fil-chemin {
  stroke-width: 3.2;
  stroke-linecap: round;
  opacity: .3;
}

/* ---------- typographie commune ---------- */
.manuscrit {
  font-family: var(--police-main);
  font-weight: 400;
  color: var(--encre-main);
}

.main {
  font-family: var(--police-main);
  font-style: normal;
  font-size: 1.22em;
  color: var(--encre-main);
  white-space: nowrap;
}

.chapeau {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 .6rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--encre-3);
}

/* bourgeons : les marqueurs accrochés au fil */
.repere {
  flex: none;
  width: 40px;
  height: 40px;
  margin-left: -6px;
  display: grid;
  place-items: center;
}
.repere img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Les bourgeons sont découpés dans le premier dessin, rose et orange :
     même passage dans les ocres que les nappes, pour tenir avec la charte de feu. */
  filter: sepia(.88) saturate(2.5) hue-rotate(-12deg) drop-shadow(0 3px 6px rgba(var(--violet-rgb), .18));
}

.titre {
  position: relative;
  margin: 0 0 1.5rem;
  padding-bottom: .55em;
  font-family: var(--police-main);
  font-weight: 400;
  font-size: clamp(2.3rem, 4.8vw, 3.3rem);
  line-height: 1.15;
  color: var(--encre-main);
}

/* soulignement au feutre, tracé à l'apparition */
.trait {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(260px, 70%);
  height: .5em;
  overflow: visible;
}
.trait path {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  opacity: .55;
  stroke-dasharray: 330;
  stroke-dashoffset: 330;
}
.trait--rose path   { stroke: var(--rose); }
.trait--cyan path   { stroke: var(--cyan); opacity: .75; }
.trait--violet path { stroke: var(--violet); opacity: .4; }
.est-la .trait path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.15s cubic-bezier(.5, 0, .2, 1) .25s;
}

.texte { margin: 0 0 1.15rem; max-width: 62ch; }
.texte--large { font-size: 1.18rem; line-height: 1.72; color: var(--encre-2); }
.texte em { font-style: italic; color: var(--encre); }

.mention {
  font-size: .85rem;
  color: var(--encre-3);
  max-width: 52ch;
}
.mention--centre { margin: 2rem auto 0; text-align: center; }

/* apparitions */
html.js [data-parait] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .95s ease, transform .95s ease;
}
html.js [data-parait].est-la { opacity: 1; transform: none; }

/* ---------- boutons ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.9rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: var(--police-corps);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.bouton:hover { transform: translateY(-2px); }
.bouton:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.bouton--plein {
  background: linear-gradient(120deg, var(--violet), var(--violet-doux));
  color: #fff;
  box-shadow: 0 14px 30px -12px rgba(var(--violet-rgb), .45);
}
.bouton--plein:hover { box-shadow: 0 18px 36px -12px rgba(var(--violet-rgb), .55); }

.bouton--ecoute {
  background: var(--blanc);
  border-color: rgba(var(--cyanf-rgb), .45);
  color: var(--cyan-fonce);
}
.bouton--ecoute:hover { border-color: var(--cyan-fonce); }

/* petites ondes dans le bouton d'écoute */
.ondes-mini {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 14px;
}
.ondes-mini i {
  width: 3px;
  height: 6px;
  border-radius: 2px;
  background: currentColor;
}
.ondes-mini i:nth-child(2) { height: 12px; }
body.son-actif .ondes-mini i { animation: onde .9s ease-in-out infinite alternate; }
body.son-actif .ondes-mini i:nth-child(2) { animation-delay: .2s; }
body.son-actif .ondes-mini i:nth-child(3) { animation-delay: .4s; }
@keyframes onde {
  from { transform: scaleY(.5); }
  to   { transform: scaleY(1.6); }
}

/* ---------- jauge ---------- */
.jauge {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 90;
  pointer-events: none;
}
.jauge span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--rose), var(--cyan), var(--violet));
}

/* ---------- barre de navigation ----------
   v4 : visible dès l'arrivée. Transparente sur le seuil,
   elle se pose sur un fond voilé quand on descend. */
.barre {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem clamp(1rem, 4vw, 2.4rem);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .5s ease, border-color .5s ease, backdrop-filter .5s ease;
}
.barre.est-posee, .barre:focus-within {
  background: rgba(var(--fond-rgb), .88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(var(--violet-rgb), .08);
}

.barre__marque {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}
.barre__marque img { width: 38px; height: 30px; }
.barre__marque span {
  font-family: var(--police-main);
  font-size: 1.25rem;
  color: var(--encre);
  white-space: nowrap;
}

.barre__nav {
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 2vw, 1.6rem);
}
.barre__nav a {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre-2);
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
  transition: color .25s, border-color .25s;
}
.barre__nav a:hover { color: var(--violet); }
.barre__nav a.est-active { color: var(--violet); border-bottom-color: var(--cyan); }

.barre__cta {
  padding: .55rem 1.2rem !important;
  border-radius: 999px;
  background: var(--violet);
  color: #fff !important;
  border-bottom: none !important;
}
.barre__cta:hover { background: var(--violet-doux); }

/* ---------- menu mobile ---------- */
.rond-menu {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 96;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(var(--violet-rgb), .14);
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--ombre-legere);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
}
.rond-menu span {
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--encre);
  transition: transform .3s, opacity .3s;
}
.rond-menu[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.rond-menu[aria-expanded="true"] span:last-child  { transform: translateY(-4px) rotate(-45deg); }

.voile-nav {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background: linear-gradient(160deg, var(--voile-a), var(--voile-b));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.voile-nav[hidden] { display: none; }
/* menu ouvert : la page derrière le voile arrête de défiler */
body.voile-ouvert { overflow: hidden; height: 100dvh; }
.voile-nav__bourgeon {
  width: 92px;
  height: 72px;
  object-fit: contain;
  opacity: .9;
}
.voile-nav nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.voile-nav a {
  font-family: var(--police-main);
  font-size: 2rem;
  text-decoration: none;
  color: var(--encre-main);
  transition: color .2s;
}
.voile-nav a:hover, .voile-nav a:focus-visible { color: var(--violet); }

/* ---------- pastille sonore ---------- */
.pastille-son {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 85;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--cyanf-rgb), .25);
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--ombre-legere);
  font-family: var(--police-corps);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan-fonce);
  cursor: pointer;
  transition: transform .25s, border-color .25s, color .25s, background-color .25s;
}
.pastille-son:hover { transform: translateY(-2px); border-color: var(--cyan-fonce); }
.pastille-son:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.pastille-son__ondes {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 16px;
}
.pastille-son__ondes i {
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: currentColor;
}
.pastille-son__ondes i:nth-child(2) { height: 13px; }
.pastille-son__ondes i:nth-child(4) { height: 11px; }
.pastille-son__mot { min-width: 5.2ch; text-align: left; }
body.son-actif .pastille-son {
  color: #fff;
  background: linear-gradient(120deg, var(--cyan-fonce), var(--violet));
  border-color: transparent;
}
body.son-actif .pastille-son__ondes i { animation: onde .8s ease-in-out infinite alternate; }
body.son-actif .pastille-son__ondes i:nth-child(2) { animation-delay: .15s; }
body.son-actif .pastille-son__ondes i:nth-child(3) { animation-delay: .3s; }
body.son-actif .pastille-son__ondes i:nth-child(4) { animation-delay: .45s; }

/* ---------- pastille charte : bascule de couleurs ----------
   Le bouton montre les couleurs vers lesquelles on bascule. */

/* =========================================================
   le seuil
   ========================================================= */
.seuil {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6rem 1.5rem 5.6rem;
  overflow: hidden;
}

/* lavis issus du dessin, la texture du seuil */
.seuil__lavis {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* Les nappes sont des détails du premier dessin, rose et violet. Sous la charte
   de feu (celle du site depuis le 05/08/2026) elles sont ramenées dans les ocres,
   sinon elles jurent avec le reste de la page. */
.lavis {
  filter: sepia(.92) saturate(2.4) hue-rotate(-14deg);
  position: absolute;
  height: auto;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 28%, transparent 72%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 28%, transparent 72%);
}
.seuil__lavis .lavis--a {
  width: 62vmax;
  top: -24vmax;
  left: -22vmax;
  opacity: .5;
  animation: lavis-a 32s ease-in-out infinite alternate;
}
.seuil__lavis .lavis--b {
  width: 44vmax;
  top: 8%;
  right: -18vmax;
  opacity: .38;
  animation: lavis-b 38s ease-in-out infinite alternate;
}
.seuil__lavis .lavis--c {
  width: 46vmax;
  bottom: -22vmax;
  left: -10vmax;
  opacity: .4;
  animation: lavis-c 44s ease-in-out infinite alternate;
}
@keyframes lavis-a { from { transform: translate(0, 0) scale(1); }      to { transform: translate(5vmax, 4vmax) scale(1.1); } }
@keyframes lavis-b { from { transform: translate(0, 0) scale(1.06); }  to { transform: translate(-4vmax, 5vmax) scale(1); } }
@keyframes lavis-c { from { transform: translate(0, 0) scale(1); }     to { transform: translate(4vmax, -4vmax) scale(1.12); } }

/* v4 : composition en deux colonnes proportionnées,
   le dessin d'un côté, le titrage droit de l'autre */
.seuil__coeur {
  display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(300px, 540px);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  max-width: 1060px;
  width: 100%;
}

.seuil__figure {
  width: min(100%, 60svh);
  margin: 0 auto;
}
.aura {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform-origin: 50% 50%;
  animation: pouls 7s ease-in-out infinite;
}
/* le halo du dessin suit la charte active */

#voile-papier stop { stop-color: var(--fond); }
#halo-centre stop:nth-of-type(1),
#halo-centre stop:nth-of-type(2) { stop-color: var(--rose); }
#halo-centre stop:nth-of-type(3),
#halo-centre stop:nth-of-type(4) { stop-color: var(--cyan); }
@keyframes pouls {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.011); }
}

/* échos de rondeur, traits pointillés qui tournent lentement */
.echo {
  transform-origin: 350px 350px;
  stroke-linecap: round;
}
.echo--1 {
  stroke: var(--rose);
  stroke-width: 3.4;
  stroke-dasharray: 2 15;
  opacity: .9;
  animation: tourne-a 110s linear infinite;
}
.echo--2 {
  stroke: var(--cyan);
  stroke-width: 3;
  stroke-dasharray: 1 19;
  opacity: .7;
  animation: tourne-b 150s linear infinite;
}
.echo--3 {
  stroke: var(--violet);
  stroke-width: 2.4;
  stroke-dasharray: 70 38;
  opacity: .2;
  animation: tourne-a 190s linear infinite reverse;
}
@keyframes tourne-a { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes tourne-b { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* Le voile de papier tient sous le dessin : le halo coloré passe derrière lui,
   il éclaire le pourtour et laisse le trait sur du clair. */
.aura__papier { transform-origin: 350px 350px; }
.aura__halo {
  opacity: .5;
  transform-origin: 350px 350px;
  animation: halo-pouls 7s ease-in-out infinite;
}
@keyframes halo-pouls {
  0%, 100% { transform: scale(1); opacity: .85; }
  50%      { transform: scale(var(--pouls-halo, 1.05)); opacity: 1; }
}

.aura__coeur {
  transform-origin: 350px 350px;
  animation: respire-coeur 7s ease-in-out infinite;
}
/* Le mandala est tracé à l'encre, en traits fins : un rien de contraste et une
   ombre très douce le décollent des lavis roses du seuil. */
.aura__coeur image {
  filter: contrast(1.12) drop-shadow(0 8px 22px rgba(var(--violet-rgb), .10));
}
@keyframes respire-coeur {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(var(--pouls-coeur, 1.032)); }
}

/* titrage droit */
.seuil__surtitre {
  margin: 0 0 1.1rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--encre-3);
}

.seuil__titre {
  margin: 0 0 1.2rem;
  font-size: clamp(3rem, 6.2vw, 4.6rem);
  font-weight: 400;
  line-height: 1.08;
  color: var(--violet);
}

.seuil__phrase {
  margin: 0 0 1rem;
  font-family: var(--police-phrase);
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 1.8rem);
  max-width: 30ch;
  line-height: 1.45;
  color: var(--encre-2);
}

/* la ligne d'ancrage : qui reçoit, et où */
.seuil__qui {
  margin: 0 0 2rem;
  font-size: .95rem;
  letter-spacing: .02em;
  color: var(--encre-3);
}
.seuil__qui strong { font-weight: 600; color: var(--cyan-fonce); }

.seuil__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin: 0;
}

.descendre {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
}
.descendre__mot {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--encre-3);
}
.descendre__fil {
  width: 2px;
  height: 46px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--violet), rgba(var(--violet-rgb), 0));
  animation: fil 2.6s ease-in-out infinite;
  transform-origin: top;
}
@keyframes fil {
  0%, 100% { transform: scaleY(.55); opacity: .5; }
  50%      { transform: scaleY(1); opacity: 1; }
}

@media (max-height: 760px) {
  .descendre { display: none; }
}

/* =========================================================
   les blocs
   ========================================================= */
.bloc {
  position: relative;
  padding: clamp(3.4rem, 6.6vw, 5.4rem) 1.5rem;
}
.bloc > .lavis { z-index: -1; }
.bloc::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.colonne { max-width: 720px; margin: 0 auto; position: relative; }
.colonne--etroite { max-width: 640px; }

/* teintes de chaque moment de la descente */
.bloc--voix::before {
  background: radial-gradient(46% 60% at 84% 12%, rgba(var(--rose-rgb), .3), transparent 70%);
}
.bloc--ecoute::before {
  background: radial-gradient(52% 62% at 14% 30%, rgba(var(--cyan-rgb), .12), transparent 70%);
}
.bloc--approche::before {
  background: radial-gradient(50% 55% at 88% 70%, rgba(var(--violet-rgb), .06), transparent 70%),
              radial-gradient(40% 50% at 8% 10%, rgba(var(--rose-rgb), .24), transparent 70%);
}
.bloc--seance::before {
  background: radial-gradient(48% 58% at 12% 78%, rgba(var(--cyan-rgb), .1), transparent 70%);
}
.bloc--pourqui::before {
  background: radial-gradient(46% 55% at 88% 18%, rgba(var(--rose-rgb), .28), transparent 70%);
}
.bloc--charlotte::before {
  background: radial-gradient(50% 60% at 10% 22%, rgba(var(--violet-rgb), .05), transparent 70%),
              radial-gradient(42% 52% at 90% 80%, rgba(var(--cyan-rgb), .09), transparent 70%);
}
.bloc--pratique::before {
  background: radial-gradient(48% 58% at 86% 30%, rgba(var(--rose-rgb), .22), transparent 70%);
}
.bloc--ecrire::before {
  background: linear-gradient(170deg, rgba(var(--rose-rgb), .14), rgba(var(--cyan-rgb), .08));
  border-radius: 48px 48px 0 0;
}

/* lavis de sections, positions alternées */
.lavis--voix      { width: clamp(300px, 34vw, 520px); top: 4%;  right: -6%;  opacity: .3;  transform: rotate(14deg); }
.lavis--ecoute    { width: clamp(300px, 36vw, 560px); top: 0%;  left: -8%;   opacity: .42; transform: rotate(-18deg); }
.lavis--approche  { width: clamp(320px, 38vw, 600px); top: 22%; right: -7%;  opacity: .35; transform: rotate(9deg); }
.lavis--seance    { width: clamp(280px, 32vw, 500px); bottom: 6%; left: -6%; opacity: .38; transform: rotate(-8deg); }
.lavis--pourqui   { width: clamp(300px, 36vw, 560px); top: 6%;  right: -8%;  opacity: .4;  transform: rotate(20deg); }
.lavis--charlotte { width: clamp(300px, 34vw, 540px); top: 10%; left: -7%;   opacity: .28; transform: rotate(-12deg); }
.lavis--pratique  { width: clamp(300px, 34vw, 540px); top: 0%;  right: -7%;  opacity: .3;  transform: rotate(6deg); }

/* =========================================================
   panneaux : les photos de Charlotte, traitement éditorial
   ========================================================= */
.panneau {
  position: relative;
  width: min(400px, 84vw);
  margin: 3.4rem auto 0;
}
.panneau--g { rotate: -1.4deg; }
.panneau--d { rotate: 1.2deg; }

.panneau__image {
  position: relative;
  background: var(--blanc);
  padding: 13px 13px 15px;
  border-radius: 47% 53% 51% 49% / 51% 49% 53% 47%;
  box-shadow: var(--ombre-douce);
}
.panneau__image img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 45% 55% 49% 51% / 49% 51% 55% 45%;
}

/* cadre au feutre, décalé derrière la photo */
.panneau__cadre {
  position: absolute;
  inset: -14px -18px;
  z-index: -1;
}
.panneau__cadre svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.panneau__cadre path {
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  opacity: .5;
}
.panneau--g .panneau__cadre path { stroke: var(--rose); opacity: .8; }
.panneau--d .panneau__cadre path { stroke: var(--cyan); opacity: .7; }
.panneau--sculpture .panneau__cadre path { stroke: var(--violet); opacity: .35; }

.panneau figcaption {
  margin: 1rem 1.2rem 0;
  text-align: right;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--encre-main);
  rotate: -1.6deg;
}

/* ---------- l'approche : trois cartes ---------- */
.trois {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  max-width: 1020px;
  margin: 3rem auto 0;
  padding: 0;
}
.carte {
  position: relative;
  padding: 2.2rem 1.7rem 1.9rem;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(var(--violet-rgb), .09);
  border-radius: var(--rayon-organique-a);
  box-shadow: var(--ombre-legere);
  transition: transform .35s ease, box-shadow .35s ease;
}
.carte:nth-child(2) { border-radius: var(--rayon-organique-b); }
.carte:hover { transform: translateY(-5px); box-shadow: var(--ombre-douce); }
.carte h3 {
  margin: 0 0 .6rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--encre);
}
.carte p { margin: 0; font-size: .98rem; }

/* anneau tracé main en tête de carte */
.carte__anneau {
  display: block;
  width: 46px;
  height: 46px;
  margin-bottom: 1.1rem;
}
.carte__anneau svg { width: 100%; height: 100%; overflow: visible; }
.carte__anneau circle {
  fill: none;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-dasharray: 138 14;
  transform: rotate(-80deg);
  transform-origin: center;
}
/* Les trois anneaux, repris le 14/08/2026 : les teintes se ressemblaient trop
   (deux orangés de même clarté, et le troisième affaibli à 65 %). Elles sont
   maintenant prises aux trois extrémités de la rampe chaude, séparées d'abord
   par la clarté (L .47 / .68 / .60) et ensuite par la teinte (32 / 37 / 85).
   Même trio, même ordre, pour les chiffres de « Une séance ». */
.carte--braise .carte__anneau circle { stroke: var(--violet); }
.carte--flamme .carte__anneau circle { stroke: var(--rose); }
.carte--or .carte__anneau circle     { stroke: var(--jaune-fonce); }

.citation {
  margin: 2.6rem auto 0;
  max-width: 560px;
  text-align: center;
}
.citation .manuscrit {
  position: relative;
  font-size: clamp(1.3rem, 2.3vw, 1.6rem);
  line-height: 1.6;
  margin: 0;
  text-wrap: balance;
}
/* les guillemets restent dans le flux du texte, sur la même ligne :
   line-height 0 les empêche de gonfler la hauteur de ligne */
.citation .manuscrit::before,
.citation .manuscrit::after {
  font-size: 1.7em;
  line-height: 0;
  vertical-align: -.14em;
  color: var(--rose);
}
.citation .manuscrit::before { content: '«'; margin-inline-end: .1em; }
.citation .manuscrit::after  { content: '»'; margin-inline-start: .1em; }

/* ---------- une séance : trois temps ---------- */
.temps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  max-width: 1020px;
  margin: 3.6rem auto 0;
  padding: 0;
  counter-reset: temps;
}
.temps__item {
  position: relative;
  padding: 2.4rem 1.6rem 1.9rem;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(var(--violet-rgb), .08);
  border-radius: var(--rayon-organique-a);
}
.temps__item:nth-child(2) { border-radius: var(--rayon-organique-b); }

/* Ancre du fil au sommet de chaque carte.
   ⚠️ Le 14/08/2026 Charlotte a demandé de retirer les petits dessins de ces
   trois cartes en gardant la ligne intacte. L'image est donc partie du HTML,
   la balise reste avec sa taille exacte : app.js?v=449e0d51 relève le centre de cette
   boîte pour tracer le fil, et une boîte de 44 × 44 au même endroit laisse
   le tracé identique au pixel près. Ne pas la passer en display:none,
   `visible()` la retirerait des ancres et le fil changerait de route. */
.repere--carte {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  margin: 0;
}
.temps__num {
  display: block;
  font-size: 2.3rem;
  line-height: 1;
  margin-bottom: .4rem;
}
/* même trio que les anneaux (14/08/2026). Le 1 traînait un violet #c55cd4
   resté de la première charte, il jurait avec les ocres. */
.temps__item:nth-child(1) .temps__num { color: var(--violet); }
.temps__item:nth-child(2) .temps__num { color: var(--rose); }
.temps__item:nth-child(3) .temps__num { color: var(--jaune-fonce); }
.temps__item h3 { margin: 0 0 .5rem; font-size: 1.12rem; font-weight: 600; color: var(--encre); }
.temps__item p { margin: 0; font-size: .97rem; }

/* ---------- pour qui ---------- */
.etats {
  list-style: none;
  max-width: 660px;
  margin: 2.6rem auto 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
/* Le contour des bulles passe à l'or le 14/08/2026 (demande de Charlotte).
   Le trait s'épaissit d'un demi-pixel : l'or est plus clair que l'orange
   qu'il remplace, à un pixel il se serait effacé. */
.etats li {
  padding: 1rem 1.6rem;
  background: rgba(255, 255, 255, .85);
  border: 1.5px solid rgba(var(--jaune-rgb), .9);
  border-radius: 999px 860px 999px 900px / 900px 999px 880px 999px;
  font-size: .99rem;
}
.etats li:nth-child(odd)  { rotate: -.5deg; }
.etats li:nth-child(even) { rotate: .5deg; border-color: rgba(var(--jaune-rgb), .55); border-radius: 860px 999px 900px 999px / 999px 900px 999px 880px; }

.apres {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: clamp(2rem, 4.5vw, 3.6rem);
  align-items: center;
  max-width: 880px;
  margin: 4rem auto 0;
}
.apres .panneau { margin: 0; width: 100%; }
.apres__texte h3 {
  margin: 0 0 .6rem;
  font-family: var(--police-main);
  font-weight: 400;
  font-size: 2rem;
  color: var(--encre-main);
}
.apres__texte p { margin: 0; }

/* ---------- charlotte ---------- */
.charlotte {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 340px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
}
.charlotte__texte { margin: 0; }
.charlotte .panneau { margin: 0; width: 100%; }

/* texture papier discrète sur les cartes fortes */
.cadre, .formulaire { position: relative; }
.cadre::before, .formulaire::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url('assets/img/papier.jpg?v=f0250642');
  background-size: 480px;
  opacity: .15;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.cadre {
  max-width: 720px;
  margin: 3.4rem auto 0;
  padding: 2.2rem 2.4rem;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(var(--violet-rgb), .12);
  border-radius: var(--rayon-organique-a);
  box-shadow: var(--ombre-legere);
}
.cadre__titre {
  margin: 0 0 1rem;
  font-family: var(--police-main);
  font-weight: 400;
  font-size: 1.8rem;
  color: var(--encre-main);
}
.cadre__liste {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.cadre__liste li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .97rem;
}
.cadre__liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 9px;
  height: 9px;
  border-radius: 50% 46% 52% 48%;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
}
.cadre__note {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--violet-rgb), .12);
  font-size: .92rem;
  color: var(--encre-3);
}

/* ---------- témoignages ---------- */
.bloc--voix-des-gens[data-vide="oui"] { display: none; }
.temoins {
  list-style: none;
  max-width: 720px;
  margin: 2.5rem auto 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.temoin {
  padding: 1.8rem 2rem;
  background: rgba(255, 255, 255, .8);
  border-radius: var(--rayon-organique-b);
  border: 1px solid rgba(var(--rose-rgb), .5);
}
.temoin blockquote { margin: 0 0 .6rem; }
.temoin p { margin: 0; font-style: italic; }
.temoin cite { font-style: normal; font-weight: 600; color: var(--encre-3); font-size: .9rem; }
.placeholder { display: none; }

/* ---------- en pratique ---------- */
/* La grille est passée de 2 à 3 colonnes le 14/08/2026, quand « Le lieu » a pris
   toute la largeur pour recevoir son image. À deux colonnes il restait trois
   cartes, donc une rangée bancale et une carte étirée dans le vide.
   align-items: start évite qu'une carte courte s'allonge sur sa voisine. */
.infos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
  gap: 1.4rem;
  max-width: 1020px;
  margin: 2.8rem auto 0;
}
.info {
  padding: 1.9rem 1.8rem;
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(var(--violet-rgb), .09);
  border-radius: var(--rayon-organique-a);
}
.info:nth-child(2), .info:nth-child(3) { border-radius: var(--rayon-organique-b); }

/* Le lieu, avec son image (14/08/2026). La carte tient toute la largeur de la
   grille : posée dans une seule colonne, elle aurait étiré sa voisine « Les
   jours » sur toute sa hauteur pour rien. */
.info--lieu {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(240px, 390px) 1fr;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: center;
}
.info__vue {
  margin: 0;
  position: relative;
}
.info__vue img {
  width: 100%;
  border-radius: var(--rayon-organique-b);
  border: 1.5px solid rgba(var(--jaune-rgb), .75);
  box-shadow: var(--ombre-legere);
  rotate: -.7deg;
}
.info__vue figcaption {
  margin-top: .7rem;
  text-align: center;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--encre-3);
}
.info__dire h3 { margin-top: 0; }
.info__dire p { margin: 0; }

/* même seuil que .infos, qui passe en une colonne à 980px */
@media (max-width: 980px) {
  .info--lieu { grid-template-columns: 1fr; gap: 1.2rem; }
  .info__vue img { rotate: -.4deg; }
}
.info h3 {
  margin: 0 0 .6rem;
  font-family: var(--police-main);
  font-weight: 400;
  font-size: 1.7rem;
  color: var(--encre-main);
}
.info p { margin: 0; font-size: .97rem; }
.info__note { margin-top: .9rem !important; font-size: .85rem !important; color: var(--encre-3); }

.tarifs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tarifs li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px dashed rgba(var(--violet-rgb), .15);
}
.tarifs li:last-child { border-bottom: none; }
.tarifs__duree { font-size: .97rem; }
.tarifs__prix { font-size: 1.15rem; font-weight: 700; color: var(--violet); }

/* ---------- écrire ---------- */
.formulaire {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.3rem 1.5rem;
  max-width: 760px;
  margin: 2.8rem auto 0;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(var(--violet-rgb), .10);
  border-radius: var(--rayon-organique-a);
  box-shadow: var(--ombre-douce);
}
.champ { display: flex; flex-direction: column; gap: .45rem; }
.champ--large { grid-column: 1 / -1; }
.champ label {
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--encre);
}
.facultatif {
  font-weight: 400;
  font-size: .78rem;
  color: var(--encre-3);
  letter-spacing: .04em;
}
.champ input[type="text"],
.champ input[type="email"],
.champ input[type="tel"],
.champ textarea {
  font-family: var(--police-corps);
  font-size: 1rem;
  color: var(--encre);
  padding: .85rem 1.1rem;
  background: var(--fond);
  border: 1.5px solid rgba(var(--violet-rgb), .18);
  border-radius: 16px 20px 15px 22px / 20px 16px 22px 15px;
  transition: border-color .25s, box-shadow .25s;
}
.champ textarea { resize: vertical; min-height: 130px; }
.champ input:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--cyan-fonce);
  box-shadow: 0 0 0 4px rgba(var(--cyan-rgb), .15);
}
.champ.en-faute input,
.champ.en-faute textarea { border-color: #d0356b; }
.erreur { margin: 0; font-size: .84rem; color: #b02458; }

.champ--consent { gap: .6rem; }
.coche {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .9rem;
  line-height: 1.55;
  cursor: pointer;
}
.coche input {
  width: 20px;
  height: 20px;
  margin-top: .15rem;
  accent-color: var(--violet);
  flex: none;
}

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

.formulaire__pied {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.formulaire__etat { margin: 0; font-size: .92rem; }
.formulaire__etat.ok { color: #0a7d63; }
.formulaire__etat.ko { color: #b02458; }

/* ---------- pied ---------- */
.pied {
  position: relative;
  margin-top: 3rem;
  padding: 4rem 1.5rem 3rem;
  background: linear-gradient(180deg, rgba(var(--lilas-rgb), .55), rgba(var(--rose-rgb), .28));
  border-radius: 48px 52px 0 0;
  text-align: center;
}
.pied__symbole { width: 68px; height: 53px; margin: 0 auto .8rem; }
.pied__nom { margin: 0; font-size: 1.9rem; color: var(--encre-main); }
.pied__ligne { margin: .4rem 0 1.6rem; font-size: .92rem; color: var(--encre-2); }
.pied__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem;
}
.pied__nav a, .lien-nu {
  font-family: var(--police-corps);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre-2);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color .25s;
}
.pied__nav a:hover, .lien-nu:hover { color: var(--violet); }

.volet {
  max-width: 720px;
  margin: 2.4rem auto 0;
  padding: 2rem 2.2rem;
  background: rgba(255, 255, 255, .88);
  border-radius: var(--rayon-organique-b);
  text-align: left;
}
.volet h2 {
  margin: 0 0 1rem;
  font-family: var(--police-main);
  font-weight: 400;
  font-size: 1.7rem;
  color: var(--encre-main);
}
.volet p, .volet li { font-size: .92rem; }
.volet ul { padding-left: 1.2rem; }

/* =========================================================
   responsive
   ========================================================= */
@media (max-width: 980px) {
  .trois, .temps { grid-template-columns: 1fr; max-width: 560px; }
  .infos { grid-template-columns: 1fr; max-width: 560px; }
  .temps { gap: 2.4rem; }
}

@media (max-width: 860px) {
  .seuil__coeur {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    justify-items: center;
    text-align: center;
  }
  .seuil__figure { width: min(74vw, 46svh, 380px); }
  .seuil__phrase { margin-left: auto; margin-right: auto; }
  .seuil__actions { justify-content: center; }

  .apres, .charlotte { grid-template-columns: 1fr; }
  .apres .panneau, .charlotte .panneau { margin: 0 auto; }
  .charlotte { gap: 2.8rem; }
  .charlotte .panneau { order: -1; }
}

@media (max-width: 759px) {
  .barre { display: none; }
  .rond-menu { display: flex; }

  /* le fil : plus fin et plus discret sur petit écran,
     il passe sous le texte faute de gouttière */
  #fil-chemin {
    stroke-width: 2;
    opacity: .16;
  }

  .echo--3 { display: none; }

  .seuil { padding: 4.5rem 1.2rem 8rem; }
  .seuil__coeur { gap: 1.2rem; }
  .seuil__figure { width: min(72vw, 40svh, 340px); }
  /* le dessin est plus petit sur mobile : la pulsation s'amplifie
     pour rester perceptible (les keyframes lisent ces variables) */
  .aura { --pouls-coeur: 1.065; --pouls-halo: 1.09; }
  .seuil__surtitre { font-size: .72rem; letter-spacing: .2em; margin-bottom: .8rem; }
  .seuil__titre { font-size: clamp(2.5rem, 11vw, 3.2rem); }
  .seuil__phrase { font-size: 1.5rem; margin-bottom: .8rem; }
  .seuil__qui { font-size: .9rem; margin-bottom: 1.7rem; }

  .formulaire { grid-template-columns: 1fr; }
  .pastille-son { right: 12px; bottom: 12px; }

  .panneau figcaption { font-size: 1.2rem; }

  /* les guillemets prennent de la largeur : un peu d'air sur les côtés */
  .citation { padding-inline: .8rem; }
}

/* =========================================================
   mouvement réduit
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html.js [data-parait] { opacity: 1; transform: none; }
  .trait path { stroke-dashoffset: 0; }
}