/* ==========================================================================
   L’Aura du Vivant — feuille de style
   --------------------------------------------------------------------------
   Trois mises en page, un seul jeu de règles :
   1. GRAND ÉCRAN  (≥ 1200 px de large, format paysage) : maquette 1920×1080
      mise à l’échelle avec l’unité --u. Défilement vertical, un écran à la fois.
   2. TABLETTE     : image + texte empilés (portrait) ou côte à côte (paysage).
      Défilement vertical.
   3. TÉLÉPHONE    : mêmes écrans empilés, défilement HORIZONTAL (swipe) ;
      le texte défile à la verticale s’il ne tient pas.
   ========================================================================== */

/* ---------- Polices ---------- */
@font-face{font-family:"Libre Bodoni";src:url("../fonts/LibreBodoni-VariableFont_wght.ttf") format("truetype");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("../fonts/SourceSans3-VariableFont_wght.ttf") format("truetype");font-weight:200 900;font-style:normal;font-display:swap}

/* ---------- Variables ---------- */
:root{
  --blue:#3E86D7;
  --brown:#996647;
  --vh:100vh;
  --ease:cubic-bezier(.16,.84,.3,1);          /* arrivée douce, de plus en plus lente */
  --ui:#fff;                                  /* couleur loupe / menu (changée par l’écran actif) */
}
@supports (height:100svh){:root{--vh:100svh}}
@supports (height:100dvh){:root{--vh:100dvh}}   /* suit la zone réellement visible sur tablette / téléphone */

/* Unité de référence : 1 u = 1 px sur la maquette 1920×1080 */
:root{
  --u:min(calc(100vw / 1920), calc(var(--vh) / 1080));
  --ox:max(0px, calc((100vw - 1920 * var(--u)) / 2));      /* marge latérale si écran plus large que 16:9 */
  --oy:max(0px, calc((var(--vh) - 1080 * var(--u)) / 2));  /* marge verticale si écran moins large que 16:9 */
  --left:calc(var(--ox) + 86 * var(--u));                  /* alignement avec le logo de l’en-tête */
  --fs:calc(24 * var(--u));                                /* 18 pt */
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-snap-type:y mandatory;scrollbar-width:none;-webkit-text-size-adjust:100%}
html::-webkit-scrollbar,main::-webkit-scrollbar{display:none}
body{margin:0;background:#fff;color:#000;font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:var(--fs);line-height:1.22;-webkit-font-smoothing:antialiased}
body[data-ui="brown"]{--ui:var(--brown)}
body[data-ui="white"]{--ui:#fff}
img{max-width:none}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- Écrans ---------- */
.screen{position:relative;height:var(--vh);overflow:hidden;background:#fff;scroll-snap-align:start;scroll-snap-stop:always}
.bg-frame{position:absolute;inset:0;overflow:hidden}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.frame{position:absolute;margin:0;overflow:hidden}
.frame img{display:block;width:100%;height:100%;object-fit:cover}
.copy{position:absolute}
strong{font-weight:700}

/* Titres : Libre Bodoni 51 pt + petit trait bleu */
.title{margin:0;font-family:"Libre Bodoni",Georgia,serif;font-weight:400;font-size:calc(68 * var(--u));line-height:1.04;color:#000;position:relative;z-index:1}
.title-rule{display:block;width:calc(59 * var(--u));height:calc(5 * var(--u));margin-top:calc(-2 * var(--u));background:var(--blue);position:relative;z-index:0}
.title.is-centered{text-align:center}
.title.is-centered + .title-rule{margin-left:auto;margin-right:auto}
.copy .body{margin-top:calc(46 * var(--u))}
.body p + p{margin-top:1.2em}
.body{text-align:justify}

/* ---------- Animations d’arrivée ---------- */
@keyframes arriveFromLeft{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes zoomSoft{from{transform:scale(1.15)}to{transform:scale(1)}}      /* zoom arrière doux : bien visible au début, de plus en plus lent */
@keyframes pulse{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.07) translateY(-4px)}}
@keyframes arrowBounce{
  0%{transform:translateY(-93px) scaleY(1.06)}
  22%{transform:translateY(0) scale(1.1,.88)}
  34%{transform:translateY(0) scale(1,1)}
  50%{transform:translateY(-34px)}
  64%{transform:translateY(0) scale(1.06,.94)}
  74%{transform:translateY(0) scale(1,1)}
  84%{transform:translateY(-11px)}
  93%{transform:translateY(0) scale(1.03,.97)}
  100%{transform:translateY(0) scale(1)}
}
.js .reveal-left{transform:translateX(-100%)}
.js .is-visible .reveal-left{animation:arriveFromLeft 1.7s var(--ease) both}
.js .bg,.js .zoom-in img,.js .zoom-out img{transform:scale(1.15)}
.js .is-visible .bg,
.js .is-visible .zoom-in img,
.js .is-visible .zoom-out img{animation:zoomSoft 42s cubic-bezier(.16,1,.3,1) both}

/* ---------- En-tête ---------- */
.site-header{position:fixed;z-index:50;top:0;left:0;right:0;height:0}
.header-logo{position:absolute;left:var(--left);top:calc(28 * var(--u));width:calc(290 * var(--u) * var(--k,1));aspect-ratio:var(--r,4.6);overflow:hidden;display:block;transition:opacity .35s}
/* le fichier du logo est sur une toile 1536×1024 : on n'affiche que la zone dessinée (fractions --ax/--aw/--ay/--ah) */
.header-logo img{position:absolute;display:block;max-width:none;width:calc(100% / var(--aw,1));height:auto;left:calc(var(--ax,0) / var(--aw,1) * -100%);top:calc(var(--ay,0) / var(--ah,1) * -100%);transition:filter .35s}
.header-logo img{filter:brightness(0)}   /* logo d’en-tête toujours noir */
body.home-active .header-logo{opacity:0;pointer-events:none}

.header-actions{position:absolute;top:calc(28 * var(--u));right:calc(48 * var(--u));display:flex;align-items:flex-start;gap:calc(32 * var(--u));color:var(--ui);transition:color .35s}
.icon-button{display:block;padding:0;border:0;background:none;color:inherit;cursor:pointer;position:relative}
.search-toggle{width:calc(49 * var(--u));height:calc(50 * var(--u))}
.search-toggle svg{display:block;width:100%;height:100%;transition:transform .4s var(--ease)}
.search-toggle:hover svg,.search-toggle:focus-visible svg{transform:rotate(-30deg)}

.language-switch{display:block;width:calc(50 * var(--u));height:calc(50 * var(--u));border-radius:50%;border:max(1.5px,calc(3 * var(--u))) solid var(--ui);padding:max(1px,calc(3 * var(--u)));transition:transform .4s var(--ease),border-color .35s,opacity .3s}
.language-switch img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.language-switch:hover,.language-switch:focus-visible{transform:rotate(-30deg)}

.menu-toggle{width:calc(64 * var(--u));height:calc(39 * var(--u))}
.menu-toggle .bar{position:absolute;left:0;width:100%;height:calc(5 * var(--u));border-radius:calc(5 * var(--u));background:currentColor;transition:transform .55s var(--ease),width .3s var(--ease),opacity .2s,background-color .35s}
.menu-toggle .bar-1{top:0}
.menu-toggle .bar-2{top:calc(17 * var(--u))}
.menu-toggle .bar-3{top:calc(34 * var(--u));width:40%}
.menu-toggle:hover .bar-3,.menu-toggle:focus-visible .bar-3{width:100%}

/* Menu ouvert : les traits du haut et du bas forment la croix (noire) */
body.menu-open .header-actions{color:#000}
body.menu-open .search-toggle,body.menu-open .language-switch{opacity:0;pointer-events:none}
body.menu-open .menu-toggle .bar-1{transform:translateY(calc(17 * var(--u))) rotate(45deg)}
body.menu-open .menu-toggle .bar-2{opacity:0}
body.menu-open .menu-toggle .bar-3{width:100%;transform:translateY(calc(-17 * var(--u))) rotate(-45deg)}

.menu-panel{position:fixed;z-index:40;top:0;right:0;width:calc(405 * var(--u));height:calc(382 * var(--u));background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.18);transform:translateX(105%);visibility:hidden;transition:transform .6s var(--ease),visibility 0s linear .6s}
.menu-panel.is-open{transform:none;visibility:visible;transition-delay:0s}
.menu-links{height:100%;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;padding:calc(72 * var(--u)) calc(20 * var(--u)) calc(26 * var(--u));text-align:center}
.menu-links a{font-family:"Libre Bodoni",Georgia,serif;font-size:calc(21.4 * var(--u));line-height:1.2;color:#000;text-decoration:none;text-underline-offset:.22em}
.menu-links a:hover,.menu-links a:focus-visible,.menu-links a[aria-current="true"]{text-decoration:underline}

/* Recherche : le rectangle blanc se déroule à gauche de la loupe */
.search-panel{position:absolute;top:calc(28 * var(--u));right:calc(48 * var(--u) + 64 * var(--u) + 32 * var(--u) + 49 * var(--u) + 14 * var(--u));width:calc(460 * var(--u));height:calc(50 * var(--u));min-width:230px;display:flex;align-items:center;gap:8px;padding:0 10px;background:#fff;color:#000;box-shadow:0 4px 18px rgba(0,0,0,.18);clip-path:inset(0 0 0 100%);visibility:hidden;transition:clip-path .45s var(--ease),visibility 0s linear .45s}
.search-panel.is-open{clip-path:inset(0);visibility:visible;transition-delay:0s}
.search-panel input{flex:1;min-width:0;border:0;outline:0;background:none;font:400 max(16px,calc(24 * var(--u))) "Source Sans 3",sans-serif;color:#000}
.search-panel button{border:0;background:none;color:var(--brown);font:600 max(14px,calc(18 * var(--u))) "Source Sans 3",sans-serif;cursor:pointer;padding:4px 6px}
.search-feedback{position:absolute;left:0;right:0;top:100%;margin:0;padding:6px 10px;background:#fff;color:#000;font-size:max(14px,calc(18 * var(--u)));box-shadow:0 4px 12px rgba(0,0,0,.12)}
.search-feedback:empty{display:none}
.search-hit{background:#ffe08a;color:#000;border-radius:2px}
.search-hit-current{background:#ffbd35;outline:2px solid var(--brown)}

/* ---------- Flèche « écran suivant » ---------- */
.next-screen{position:absolute;z-index:5;left:50%;bottom:calc(var(--oy) + 10 * var(--u));width:calc(79 * var(--u));height:calc(79 * var(--u));margin-left:calc(-39.5 * var(--u));padding:0;border:0;background:none;cursor:pointer}
.next-screen{color:#fff}
.next-screen[data-tone="brown"]{color:var(--brown)}
.next-screen svg{display:block;width:100%;height:100%;fill:currentColor;transition:transform .25s var(--ease)}   /* aplat, sans dégradé */
.next-screen:hover svg{transform:translateY(4px)}
.is-visible .next-screen svg{animation:arrowBounce 1.5s ease-in both}

.next-screen:hover svg{animation:none}

/* ==========================================================================
   1. ACCUEIL (FR + ES)
   ========================================================================== */
.home-screen{
  --k:max(calc(100vw / 2000), calc(var(--vh) / 1125));    /* échelle de l’image de fond (object-fit: cover) */
  --px:.5; --py:.5;                                       /* point de cadrage de l’image */
  --tipx:calc((100vw - 2000 * var(--k)) * var(--px) + 1436 * var(--k));   /* pointe des bulles = tête du personnage */
  --tipy:calc((var(--vh) - 1125 * var(--k)) * var(--py) + 922.5 * var(--k));
  background:#2c4a1c;
}
.home-photo{object-position:calc(var(--px) * 100%) calc(var(--py) * 100%)}
.home-brand{--hb-w:calc(1618 * var(--u));position:absolute;left:50%;top:calc(var(--oy) - 158 * var(--u));width:var(--hb-w);transform:translateX(-50%);display:block;pointer-events:none}
.home-brand img{display:block;width:100%;height:auto}   /* toile 1536×1024 : seul le dessin du logo est visible */

.bubble-anchor{position:absolute;left:var(--tipx);top:var(--tipy);width:0;height:0;z-index:4;
  transform-origin:calc(50vw - var(--tipx)) calc(var(--vh) / 2 - var(--tipy))}      /* même centre de zoom que l'image */
.js .bubble-anchor{transform:scale(1.15)}
.js .is-visible .bubble-anchor{animation:zoomSoft 42s cubic-bezier(.16,1,.3,1) both}
.bubble{position:absolute;right:0;bottom:0;margin:0;padding:0;border:0;background:none;cursor:pointer;color:#000;text-align:center;font-family:"Source Sans 3",sans-serif;font-size:calc(24 * var(--u));line-height:1.2}
.bubble[hidden]{display:none}
.bubble-bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bubble-small{width:calc(266 * var(--u));height:calc(96.31 * var(--u));transform-origin:100% 100%;animation:pulse 3.4s ease-in-out infinite}
.bubble-small:hover{animation-play-state:paused}
.bubble-text{position:absolute;inset:calc(9 * var(--u)) calc(40 * var(--u)) calc(9 * var(--u)) calc(9 * var(--u));display:flex;align-items:center;justify-content:center;font-size:calc(22 * var(--u));line-height:1.15}
.bubble-large{width:calc(1146 * var(--u));height:calc(336.6 * var(--u))}
.bubble-copy{position:absolute;inset:calc(22 * var(--u)) calc(78 * var(--u)) calc(50 * var(--u)) calc(48 * var(--u));overflow:auto;scrollbar-width:thin;display:flex;flex-direction:column;justify-content:center;font-size:calc(20 * var(--u));line-height:1.2}
.bubble-copy p + p{margin-top:.7em}

/* ==========================================================================
   2. SOINS ÉNERGÉTIQUES  /  10. TERAPIAS
   ========================================================================== */
.s-soins .frame{left:0;top:calc(50% - 307 * var(--u));width:calc(1093 * var(--u));height:calc(614 * var(--u))}
.s-soins .copy{left:calc(1136 * var(--u));top:calc(50% - 307 * var(--u) - 11 * var(--u));width:calc(659 * var(--u))}
.s-soins .footnote{position:absolute;left:calc(1267 * var(--u));width:calc(528 * var(--u));bottom:calc(50% - 307 * var(--u));font-size:calc(18.67 * var(--u));line-height:1.2;text-align:justify}

@media (min-width:1200px) and (min-aspect-ratio:5/4){
  .s-comm .next-screen{left:max(50%, calc(100% - 992 * var(--u)))}   /* centre de l’écran, mais jamais sur le fond blanc */
}

/* ==========================================================================
   3. COMMUNICATION ANIMALE
   ========================================================================== */
.s-comm .frame{right:0;top:calc(50% - 540 * var(--u));width:calc(1082 * var(--u));height:calc(1080 * var(--u))}
.s-comm .copy{left:var(--left);top:calc(var(--oy) + 333 * var(--u) - 11 * var(--u));width:calc(697 * var(--u))}

/* ==========================================================================
   4. ANIMAL PERDU — cadre 1127×751 collé à gauche, arrivée depuis la gauche
   ========================================================================== */
.s-lost .frame{left:0;top:calc(var(--oy) + 197 * var(--u));width:calc(1127 * var(--u));height:calc(751 * var(--u))}
.s-lost .copy{left:calc(1170 * var(--u));bottom:calc(var(--oy) + 132 * var(--u));width:calc(589 * var(--u));display:flex;flex-direction:column}
.s-lost .copy .body{font-size:calc(21 * var(--u))}

/* ==========================================================================
   5. PASSAGE D’ÂMES
   ========================================================================== */
.s-passage .copy{left:var(--left);top:calc(var(--oy) + 333 * var(--u) - 11 * var(--u));width:calc(418 * var(--u))}

/* ==========================================================================
   6. QUI SUIS-JE
   ========================================================================== */
.about-head{position:absolute;right:calc(var(--ox) + 86 * var(--u) + 552 * var(--u) + 43 * var(--u));top:calc(var(--oy) + 255 * var(--u) - 11 * var(--u));display:flex;flex-direction:column;align-items:flex-start;z-index:2}
.about-card{position:absolute;right:calc(var(--ox) + 86 * var(--u));top:calc(var(--oy) + 144 * var(--u));width:calc(552 * var(--u));height:calc(906 * var(--u));padding:calc(43 * var(--u)) calc(43 * var(--u)) calc(85 * var(--u));background:var(--brown);color:#fff;display:flex;flex-direction:column;z-index:2}
.about-slides{position:relative;flex:1;min-height:0;overflow:hidden}
.about-slide{position:absolute;inset:0;overflow-y:auto;padding-right:calc(10 * var(--u));scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.6) transparent;font-size:calc(21 * var(--u));line-height:1.22;text-align:left;transform:translateX(calc(var(--slide-order,0) * 105%));transition:transform .8s var(--ease)}
.about-slide h3{margin:0 0 .9em;font-size:1.05em;font-weight:700;line-height:1.2}
.about-slide p + p{margin-top:.8em}
.slide-dots{position:absolute;left:0;right:0;bottom:calc(31 * var(--u));display:flex;justify-content:center;gap:calc(14 * var(--u))}
.dot{width:calc(22.5 * var(--u));height:calc(22.5 * var(--u));min-width:12px;min-height:12px;padding:0;border-radius:50%;border:max(1.5px,calc(2 * var(--u))) solid rgba(255,255,255,.8);background:transparent;cursor:pointer;transition:background-color .3s}
.dot.is-active{background:rgba(255,255,255,.8)}

/* ==========================================================================
   7. OUI MAIS, COMBIEN ?
   ========================================================================== */
.s-prices .frame{right:0;bottom:0;width:calc(580 * var(--u));height:calc(946 * var(--u))}
.s-prices .copy{left:var(--left);top:calc(var(--vh) - 946 * var(--u) - 11 * var(--u));width:calc(1920 * var(--u) - 580 * var(--u) - 43 * var(--u) - 86 * var(--u))}
.price-list{list-style:none;margin:calc(46 * var(--u)) 0 0;padding:0;text-align:left}
.price-list li + li{margin-top:calc(16 * var(--u))}
.price-list strong{display:block;position:relative;padding-left:calc(20 * var(--u))}
.price-list strong::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;border:1px solid var(--brown);border-radius:50%}
.price-list p{margin-top:.1em}

/* ==========================================================================
   8. À QUI S’ADRESSENT LES RENDEZ-VOUS ?
   ========================================================================== */
.contact-body{display:contents}
.s-contact .copy{left:var(--left);top:calc(var(--oy) + 142 * var(--u) - 11 * var(--u));width:calc(1500 * var(--u))}
.s-contact .intro{width:calc(904 * var(--u));margin-top:calc(46 * var(--u));text-align:justify}
.s-contact .intro p + p{margin-top:1.2em}
.invitation{position:absolute;left:var(--left);top:calc(var(--oy) + 759 * var(--u));width:calc(904 * var(--u));color:#fff;text-align:justify}
.details{position:absolute;left:calc(var(--left) + 452 * var(--u) - 220 * var(--u));top:calc(var(--oy) + 915 * var(--u));width:calc(440 * var(--u));display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;font-size:calc(23 * var(--u));line-height:1.3;white-space:nowrap}
.details a{text-decoration:none}
.details a:hover{text-decoration:underline}
.telegram-link{position:relative;display:inline-block}
.telegram-link img{position:absolute;right:calc(100% + 27 * var(--u));bottom:.05em;width:calc(36 * var(--u));height:auto}
.legal-links{position:absolute;left:calc(var(--ox) + 1295 * var(--u));right:calc(var(--ox) + 79 * var(--u));top:calc(var(--oy) + 1043 * var(--u));display:flex;justify-content:space-between;gap:12px;font-size:max(12px,calc(12 * var(--u)))}
.legal-links a{color:#fff;text-decoration:none;white-space:nowrap}
.legal-links a:hover{text-decoration:underline}

/* ==========================================================================
   TABLETTE + TÉLÉPHONE  (tout ce qui n’est pas « grand écran »)
   ========================================================================== */
@media not all and (min-width:1200px) and (min-aspect-ratio:5/4){
  :root{
    --hdr:clamp(56px,8.5vh,72px);
    --fs:clamp(15px,1.15vw + 10.6px,20px);
    --t:clamp(31px,4vw + 17px,50px);
    --img-h:clamp(150px,31vh,420px);
    --pad:clamp(18px,4vw,36px);
  }
  html{scroll-snap-type:y mandatory}
  body{font-size:var(--fs);line-height:1.3}
  .title{font-size:var(--t);line-height:1.08}
  .title-rule{width:44px;height:4px;margin-top:-1px}
  .title.is-centered{text-align:left}
  .title.is-centered + .title-rule{margin-left:0;margin-right:0}

  /* En-tête : bande blanche (sauf accueil) */
  .site-header{height:var(--hdr);background:#fff;transition:background-color .35s;box-shadow:0 1px 0 rgba(0,0,0,.06)}
  body.home-active .site-header{background:transparent;box-shadow:none}
  .header-logo{left:var(--pad);top:calc(var(--hdr) / 2);width:calc(clamp(150px,36vw,230px) * var(--k,1));transform:translateY(-50%)}
  body:not(.home-active) .header-logo img{filter:brightness(0)}
  body:not(.home-active){--ui:var(--brown)}
  body.home-active{--ui:#fff}
  .header-actions{top:calc(var(--hdr) / 2);right:var(--pad);gap:clamp(14px,3.4vw,24px);align-items:center;transform:translateY(-50%)}
  .search-toggle{width:clamp(26px,5.6vw,34px);height:clamp(26px,5.6vw,34px)}
  .language-switch{width:clamp(30px,6.6vw,38px);height:clamp(30px,6.6vw,38px);border-width:2px;padding:2px}
  .menu-toggle{width:clamp(30px,6.6vw,40px);height:clamp(19px,4.2vw,25px)}
  .menu-toggle .bar{height:3px;border-radius:3px}
  .menu-toggle .bar-2{top:calc(50% - 1.5px)}
  .menu-toggle .bar-3{top:calc(100% - 3px)}
  body.menu-open .menu-toggle .bar-1{transform:translateY(calc(clamp(19px,4.2vw,25px) / 2 - 1.5px)) rotate(45deg)}
  body.menu-open .menu-toggle .bar-3{transform:translateY(calc(-1 * (clamp(19px,4.2vw,25px) / 2 - 1.5px))) rotate(-45deg)}
  body.menu-open .site-header{background:#fff}
  body.menu-open .header-logo{opacity:0}

  /* Menu plein écran */
  .menu-panel{inset:0;width:auto;height:auto;transform:translateX(100%);box-shadow:none}
  .menu-links{height:100%;overflow-y:auto;overscroll-behavior:contain;justify-content:flex-start;padding:calc(var(--hdr) + 8px) 24px 28px;gap:clamp(10px,2.4vh,30px)}
  .menu-links a{font-size:clamp(17px,min(4.2vw + 8px,3.8vh + 6px),30px)}
  .menu-links a:first-child{margin-top:auto}
  .menu-links a:last-child{margin-bottom:auto}

  /* Recherche */
  .search-panel{top:calc(var(--hdr) + 8px);left:var(--pad);right:var(--pad);width:auto;min-width:0;height:48px;box-shadow:0 6px 20px rgba(0,0,0,.2)}

  /* Flèche : en bas ; vers le bas en défilement vertical */
  .next-screen{width:clamp(46px,9vw,60px);height:clamp(46px,9vw,60px);margin-left:calc(clamp(46px,9vw,60px) / -2);bottom:14px}
  .screen:not(.home-screen) .next-screen[data-tone]{color:var(--brown)}
  .screen:not(.home-screen) .next-screen{background:rgba(255,255,255,.92);border-radius:50%}
  @keyframes arrowBounce{
    0%{transform:translateY(-44px) scaleY(1.06)}22%{transform:translateY(0) scale(1.1,.88)}34%{transform:translateY(0)}
    50%{transform:translateY(-16px)}64%{transform:translateY(0) scale(1.06,.94)}74%{transform:translateY(0)}
    84%{transform:translateY(-5px)}100%{transform:translateY(0)}
  }

  /* Écrans empilés : image en haut, texte dessous */
  .screen:not(.home-screen){display:flex;flex-direction:column;padding-top:var(--hdr)}
  .screen .frame,
  .screen .bg-frame{position:relative;inset:auto;flex:0 0 var(--img-h);width:100%;height:var(--img-h);margin:0}
  .s-prices .frame,.s-comm .frame,.s-lost .frame,.s-soins .frame{left:auto;right:auto;top:auto;bottom:auto}
  .s-comm .frame img{object-position:center 30%}
  .copy,
  .s-soins .copy,.s-comm .copy,.s-lost .copy,.s-passage .copy,.s-prices .copy,.s-contact .copy{position:static;flex:1 1 auto;min-height:0;width:auto;left:auto;top:auto;bottom:auto;overflow-y:auto;padding:clamp(16px,3vh,28px) var(--pad) 96px;display:block;-webkit-overflow-scrolling:touch}
  .copy .body,.s-lost .copy .body{margin-top:clamp(16px,2.6vh,26px);font-size:var(--fs);text-align:left}
  .s-soins .footnote{position:static;width:auto;flex:none;padding:8px var(--pad) 84px;margin:0;font-size:calc(var(--fs) * .8);text-align:left}
  .s-soins .copy{padding-bottom:20px}
  .price-list{margin-top:clamp(16px,2.6vh,26px)}
  .price-list li + li{margin-top:clamp(12px,2vh,20px)}
  .price-list strong{padding-left:18px}
  .price-list strong::before{top:.55em}

  /* Qui suis-je : bloc marron sous l’image */
  .s-about{background:var(--brown);color:#fff}
  .about-head{position:static;padding:clamp(14px,2.4vh,24px) var(--pad) 0;flex:none}
  .about-head .title{color:#fff}
  .about-head .title-rule{background:#fff}
  .about-card{position:relative;inset:auto;right:auto;top:auto;width:auto;height:auto;flex:1 1 auto;min-height:0;padding:clamp(14px,2.4vh,22px) var(--pad) 64px;background:none}
  .about-slide{font-size:var(--fs);padding-right:6px}
  .slide-dots{bottom:20px;gap:12px;justify-content:flex-start;padding-left:var(--pad)}
  .dot{width:14px;height:14px}

  /* Contact */
  .contact-body{display:block;flex:1 1 auto;min-height:0;overflow-y:auto;padding:clamp(16px,3vh,28px) var(--pad) 96px}
  .s-contact .copy{position:static;width:auto;padding:0;overflow:visible;flex:none}
  .s-contact .intro{width:auto;margin-top:clamp(16px,2.6vh,26px);text-align:left}
  .invitation,.details,.legal-links{position:static;width:auto;left:auto;top:auto;right:auto;color:#000}
  .invitation{margin-top:1.2em;text-align:left}
  .details{margin-top:1.4em;align-items:flex-start;text-align:left;font-size:calc(var(--fs) * 1.1);color:var(--brown)}
  .telegram-link{display:flex;align-items:center;gap:10px}
  .telegram-link img{position:static;width:24px}
  .legal-links{margin-top:1.8em;flex-wrap:wrap;justify-content:flex-start;gap:6px 18px;font-size:calc(var(--fs) * .8)}
  .legal-links a{color:#555}

  /* Accueil : le personnage reste visible en bas à droite */
  .home-screen{--px:.7;--bw:clamp(240px,60vw,360px)}
  .home-brand{--hb-w:min(125vw,1100px);left:50%;top:calc(var(--hdr) - 4vh - .024 * var(--hb-w))}
  .bubble-anchor{inset:0;left:0;top:0;width:auto;height:auto;pointer-events:none;transform-origin:50% 50%}
  .bubble{pointer-events:auto;line-height:1.25}
  /* petite bulle : le dessin d'origine (SVG), à une taille lisible */
  .bubble-small{width:var(--bw);height:calc(var(--bw) * .3621);right:calc(100vw - var(--tipx));bottom:calc(100% - var(--tipy));font-size:calc(var(--bw) * .0827);transform-origin:100% 100%}
  .bubble-text{inset:9.3% 15% 9.3% 3.4%;font-size:inherit;line-height:1.15}
  /* grande bulle : dessinée en CSS, d'une seule couleur (sans transparence : plus de superposition visible) */
  .bubble-large{left:12px;right:12px;width:auto;height:auto;bottom:calc(100% - var(--tipy) + 14px);max-height:calc(var(--tipy) - var(--hdr) - 40px);padding:16px 20px;text-align:left;background:#e8efe5;border-radius:20px;font-size:clamp(14px,1.1vw + 10.5px,19px);filter:drop-shadow(0 2px 8px rgba(0,0,0,.2))}
  .bubble-large .bubble-bg{display:none}
  .bubble-large::after{content:"";position:absolute;right:calc(100vw - 12px - var(--tipx));bottom:-13px;width:24px;height:14px;background:#e8efe5;clip-path:polygon(0 0,100% 0,100% 100%)}
  .bubble-copy{position:static;display:block;overflow:auto;max-height:calc(var(--tipy) - var(--hdr) - 90px);font-size:inherit;line-height:1.28}
}

/* ---------- Tablette en portrait : l'écran s'allonge selon son contenu ---------- */
@media (min-width:701px) and (max-aspect-ratio:5/4){
  html{scroll-snap-type:y proximity}
  .screen{scroll-snap-stop:normal}
  .screen:not(.home-screen){height:auto;min-height:var(--vh)}
  .s-soins .copy,.s-comm .copy,.s-lost .copy,.s-passage .copy,.s-prices .copy{flex:1 0 auto;overflow:visible}
  .contact-body{flex:1 0 auto;overflow:visible}
  .about-card{flex:1 0 auto}
  .about-slides{display:grid;flex:none}
  .about-slide{position:relative;inset:auto;grid-area:1 / 1;overflow:visible}
  .about-card{padding-bottom:90px}
}

/* ---------- Tablette / écran carré en paysage : image à gauche, texte à droite ---------- */
@media (orientation:landscape) and (max-width:1199px){
  .screen:not(.home-screen){flex-direction:row}
  .screen .frame,
  .screen .bg-frame{flex:0 0 46%;width:46%;height:100%}
  .s-prices .frame{order:2;flex-basis:36%;width:36%}
  .s-comm .frame{order:2}
  .s-prices .copy{order:1}
  .s-comm .copy{order:1}
  .copy{padding-bottom:70px!important}
  .screen.s-soins{display:grid;grid-template-columns:56% 1fr;grid-template-rows:minmax(0,1fr) auto}
  .screen.s-soins .frame{grid-column:1;grid-row:1 / 3;align-self:center;width:100%;height:auto;aspect-ratio:16 / 9;flex:none}
  .s-soins .copy{grid-column:2;grid-row:1;padding-bottom:12px!important}
  .s-soins .footnote{grid-column:2;grid-row:2;position:static;width:auto;margin:0;padding:6px var(--pad) 74px;background:none}
  .s-about .about-head{position:absolute;left:46%;top:var(--hdr);right:0;padding-left:var(--pad)}
  .s-about{flex-direction:row}
  .s-about .about-card{position:absolute;left:46%;right:0;top:calc(var(--hdr) + 90px);bottom:0}
  .contact-body{padding-bottom:70px}
  .next-screen{left:auto;right:16px;margin-left:0}
  .home-brand{--hb-w:min(86vw,900px);top:calc(var(--hdr) - 6vh - .024 * var(--hb-w))}
  .bubble-large{left:auto;width:min(86vw,820px)}
  .home-screen{--bw:clamp(230px,30vw,340px)}
}

/* ---------- Téléphone : défilement horizontal ---------- */
@media (max-width:700px) and (orientation:portrait), (max-height:500px) and (orientation:landscape){
  html{scroll-snap-type:none;overflow:hidden;height:100%}
  body{height:100%;overflow:hidden}
  main{display:flex;height:var(--vh);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;scroll-behavior:smooth}
  .screen{flex:0 0 100vw;width:100vw;scroll-snap-align:start;scroll-snap-stop:always}
  /* flèche à droite, tournée de 90° dans le sens anti-horaire */
  .next-screen{left:auto;right:14px;margin-left:0;bottom:14px;transform:rotate(-90deg)}
  .is-visible .next-screen svg{animation:none}
  .screen.home-screen .next-screen{bottom:18px}
  .s-soins .footnote{padding:8px 76px 18px var(--pad)}
  .screen:not(.home-screen) .next-screen{background:rgba(255,255,255,.92);border-radius:50%;width:48px;height:48px}
  .menu-panel{transform:translateX(100%)}
}
@media (max-height:500px) and (orientation:landscape){
  :root{--hdr:48px;--fs:15px;--t:28px}
  .header-logo{width:calc(150px * var(--k,1))}
  .copy{padding-bottom:20px!important}
  .bubble-large{max-height:calc(var(--tipy) - var(--hdr) - 12px)}
  .home-screen{--bw:clamp(200px,30vw,290px)}
  .home-brand{--hb-w:min(64vw,560px);top:calc(var(--hdr) - 12vh - .024 * var(--hb-w))}
}

/* ---------- Indicateur de défilement (tablette / téléphone) ---------- */
.scroll-hint{position:fixed;z-index:30;bottom:16px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:9px 16px 9px 18px;border:0;border-radius:999px;background:#fff;color:var(--brown);font:600 15px/1 "Source Sans 3",sans-serif;box-shadow:0 3px 14px rgba(0,0,0,.28);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s}
.scroll-hint.is-on{opacity:1;pointer-events:auto}
.scroll-hint svg{width:16px;height:16px;animation:hintBob 1.4s ease-in-out infinite}
@keyframes hintBob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
body.menu-open .scroll-hint{opacity:0;pointer-events:none}
@media (min-width:1200px) and (min-aspect-ratio:5/4){.scroll-hint{display:none}}
/* texte qui continue sous l'écran : il s'estompe au bas du cadre */
.has-more{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 90px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 90px),transparent)}

/* ---------- Accessibilité : réduire les mouvements ---------- */
@media (prefers-reduced-motion:reduce){
  html,main{scroll-behavior:auto}
  .js .is-visible .bg,.js .is-visible .zoom-in img,.js .is-visible .zoom-out img,.js .is-visible .bubble-anchor,
  .is-visible .next-screen svg,.bubble-small{animation:none!important}
  .js .bg,.js .zoom-in img,.js .zoom-out img,.js .bubble-anchor{transform:none}
  .about-slide,.menu-panel,.search-panel{transition-duration:.01ms!important}
  .scroll-hint svg{animation:none}
  /* l’arrivée de l’image depuis la gauche est conservée (courte, déclenchée par le défilement) */
}