/* Ricochet (exemple DeveloppIA, Paris 15e) : la mer de papier, sur papier crème. */
@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url(../polices/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url(../polices/inter-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}


:root{
  --creme:#F6F1E4;--blanc:#fff;--sable:#ECE5D3;--encre:#22302F;--ardoise:#56605E;
  --lagon:#22B3B0;--mer:#0F6E73;--corail:#FF6F47;--soleil:#FFCE3A;--anis:#9BD35A;--ciel:#3B98FF;--rouge:#EC4436;
  --r-carte:50px;--r-photo:56px;--r-petit:12px;
  --courbe:cubic-bezier(.2,.8,.2,1);
  --bord:24px;--max:1240px;
  --ombre-papier:0 1px 0 rgba(34,48,47,.06),0 10px 18px -12px rgba(34,48,47,.35);
  color-scheme:light;
}
@media (max-width:640px){:root{--bord:16px;--r-carte:32px;--r-photo:32px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--creme);color:var(--encre);font:400 18px/1.58 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;font-feature-settings:"ss01" 0,"cv11" 1}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0;font-weight:500;text-wrap:balance}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ciel);outline-offset:3px;border-radius:12px}
.visuellement-cache{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.conteneur{width:min(var(--max),100% - 2*var(--bord));margin-inline:auto;position:relative}

/* Typographie */
.geant{font-size:clamp(50px,9.4vw,138px);line-height:.95;letter-spacing:-.055em;font-weight:500}
.titre{font-size:clamp(38px,5.4vw,78px);line-height:1.02;letter-spacing:-.045em}
.titre-moyen{font-size:clamp(30px,3.6vw,53px);line-height:1.06;letter-spacing:-.04em}
h3,.h3{font-size:clamp(23px,2.2vw,30px);line-height:1.18;letter-spacing:-.025em}
.chapeau{font-size:clamp(19px,1.5vw,21px);line-height:1.5;max-width:36em}
.surtitre{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;letter-spacing:.01em;margin-bottom:22px;color:var(--encre)}
.surtitre::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c,var(--lagon));box-shadow:0 0 0 4px color-mix(in srgb,var(--c,var(--lagon)) 22%,transparent)}
.discret{color:var(--ardoise)}
.lien-fleche{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}

/* Le mot posé sur une bande de papier collé */
.papier{position:relative;display:inline-block;z-index:0;white-space:nowrap}
.papier::before{content:"";position:absolute;inset:.16em -.14em .02em -.12em;background:var(--c,var(--soleil));z-index:-1;transform:rotate(-1.6deg) scaleX(var(--pose,1));transform-origin:0 50%;transition:transform .9s var(--courbe) .35s;
  clip-path:polygon(0 9%,5% 1%,17% 7%,30% 0,44% 7%,58% 1%,72% 6%,86% 0,100% 8%,99% 91%,91% 100%,77% 94%,62% 100%,48% 93%,34% 100%,20% 95%,7% 100%,1% 92%)}
.papier.p-ciel{--c:#BCDDFF}.papier.p-anis{--c:#D3EEAA}.papier.p-corail{--c:#FFC4B0}.papier.p-lagon{--c:#B6EAE7}
.js .apparait .papier,.js .papier.a-poser{--pose:0}
.js .apparait.vu .papier,.js .papier.a-poser.vu{--pose:1}

/* Boutons : le papier se soulève */
.btn{--fond:var(--blanc);position:relative;display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:6px 7px 6px 24px;border-radius:50px;background:var(--fond);color:var(--encre);font-weight:600;font-size:16px;line-height:1.2;text-decoration:none;border:0;cursor:pointer;transition:transform .45s var(--courbe),box-shadow .45s var(--courbe);-webkit-tap-highlight-color:transparent}
.btn .pastille{position:relative;flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--pastille,var(--ciel));color:#fff;transition:transform .45s var(--courbe)}
.btn .pastille svg{width:19px;height:19px}
.btn-corail{--fond:var(--corail);--pastille:#fff}.btn-corail .pastille{color:var(--corail)}
.btn-blanc{--fond:var(--blanc);--pastille:var(--lagon)}
.btn-encre{--fond:var(--encre);--pastille:var(--soleil);color:#fff}.btn-encre .pastille{color:var(--encre)}
.btn small{display:block;font-weight:500;font-size:13px;opacity:.8;letter-spacing:.01em}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-3px) rotate(-1.2deg);box-shadow:0 12px 0 -6px rgba(34,48,47,.10),0 18px 26px -14px rgba(34,48,47,.45)}
  .btn:hover .pastille{transform:rotate(-14deg) scale(1.06)}
  .btn .pastille::after{content:"";position:absolute;left:50%;top:-4px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;border:2px solid var(--pastille,var(--ciel));opacity:0}
  .btn:hover .pastille::after{animation:bulle-monte .9s var(--courbe) forwards}
}
@keyframes bulle-monte{0%{opacity:0;transform:translateY(4px) scale(.5)}30%{opacity:.9}100%{opacity:0;transform:translateY(-22px) scale(1.15)}}

/* En-tête : une pilule blanche qui flotte */
.menu{position:fixed;z-index:60;top:14px;left:50%;transform:translateX(-50%);width:min(var(--max),100% - 2*var(--bord));display:flex;align-items:center;gap:6px;padding:7px;padding-left:9px;background:rgba(255,255,255,.96);border-radius:50px;transition:box-shadow .4s,background .4s}
.menu.defile{box-shadow:0 0 0 1px rgba(34,48,47,.06),0 14px 30px -22px rgba(34,48,47,.5);background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.marque{display:flex;align-items:center;gap:11px;text-decoration:none;padding-right:10px;min-height:44px}
.marque .logo{width:42px;height:42px}
.marque b{font-weight:600;font-size:17px;letter-spacing:-.02em}
.marque .marque-sous{display:block;font-size:12px;color:var(--ardoise);font-weight:500;letter-spacing:.01em;margin-top:-1px}
.menu .liens{display:flex;gap:2px;margin-left:auto}
.menu .liens a{display:block;padding:11px 14px;border-radius:50px;font-size:15px;font-weight:500;text-decoration:none;transition:background .25s}
.menu .liens a[aria-current="page"]{background:var(--creme)}
@media (hover:hover){.menu .liens a:hover{background:var(--creme)}}
.langues{display:flex;background:var(--creme);border-radius:50px;padding:4px;margin:0 4px}
.langues a{display:grid;place-items:center;min-width:38px;height:36px;padding:0 8px;border-radius:50px;font-size:13px;font-weight:600;text-decoration:none;letter-spacing:.02em;color:var(--ardoise)}
.langues a[aria-current="true"]{background:var(--encre);color:#fff}
.menu .btn{min-height:50px;padding-left:20px;font-size:15px}
.menu .btn .pastille{width:38px;height:38px}
.burger{display:none;width:48px;height:48px;border-radius:50%;border:0;background:var(--lagon);cursor:pointer;place-items:center}
.burger span{display:block;width:18px;height:2px;background:var(--encre);border-radius:2px;position:relative;transition:transform .3s,background .3s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--encre);border-radius:2px;transition:transform .3s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.menu-ouvert .burger span{background:transparent}
.menu-ouvert .burger span::before{transform:translateY(6px) rotate(45deg)}
.menu-ouvert .burger span::after{transform:translateY(-6px) rotate(-45deg)}
.appel-rond{display:none}
@media (max-width:1180px){.menu .liens a{padding:11px 10px}.marque .marque-sous{display:none}}
@media (max-width:1060px){
  .menu .liens,.menu .langues,.menu .btn{display:none}
  .burger{display:grid;margin-left:auto}
  .appel-rond{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--corail);margin-left:auto}
  .appel-rond + .burger{margin-left:6px}
  .appel-rond svg{width:20px;height:20px}
}
.tiroir{position:fixed;inset:0;z-index:55;background:var(--creme);padding:100px var(--bord) 40px;display:flex;flex-direction:column;gap:28px;overflow:auto;opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.menu-ouvert .tiroir{opacity:1;visibility:visible;transition:opacity .25s}
.tiroir nav a{display:block;font-size:clamp(34px,9vw,52px);font-weight:500;letter-spacing:-.04em;line-height:1.25;text-decoration:none;padding:4px 0}
.tiroir .langues{align-self:flex-start;margin:0;background:#fff}
.tiroir .langues a{min-width:52px;height:44px;font-size:15px}
.tiroir .btn{align-self:flex-start}
.menu-ouvert{overflow:hidden}

/* Premier écran */
.heros{position:relative;padding-top:clamp(128px,17vh,176px)}
.heros .conteneur{z-index:3}
.heros-haut{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.heros h1 .ligne{display:block}
.heros .chapeau{margin-top:28px}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:34px}
.statut{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--ardoise);margin-left:8px;min-height:44px}
.statut .point{width:10px;height:10px;border-radius:50%;background:var(--anis);position:relative}
.statut .point::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--anis);animation:pouls 2.6s ease-out infinite}
.statut.ferme .point{background:var(--corail)}.statut.ferme .point::after{border-color:var(--corail);animation:none;opacity:0}
@keyframes pouls{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.ages-raccourcis{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.ages-raccourcis a{display:inline-flex;align-items:center;gap:9px;padding:10px 16px 10px 12px;background:#fff;border-radius:50px;font-size:15px;font-weight:600;text-decoration:none;min-height:44px;transition:transform .35s var(--courbe)}
.ages-raccourcis a i{width:12px;height:12px;border-radius:50%;background:var(--c)}
.ages-raccourcis a span{font-weight:500;color:var(--ardoise)}
@media (hover:hover){.ages-raccourcis a:hover{transform:translateY(-2px) rotate(-1deg)}}

.fenetre{position:relative;margin-top:clamp(48px,7vh,72px);height:min(82vh,780px);--o:0}
.fenetre-cadre{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 calc(var(--bord) + (1 - var(--o)) * 3.2vw) round calc(var(--r-photo) * (1 - var(--o) * .55)));background:var(--sable)}
.fenetre-cadre img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;transform:translateY(calc((1 - var(--o)) * -10%)) scale(calc(1.14 - var(--o) * .14));transform-origin:50% 30%}
@media (max-width:640px){.fenetre{height:66vh;min-height:420px}.fenetre-cadre img{object-position:38% 50%}}

/* Premier écran : le texte à gauche, la petite mer de papier à droite */
.heros-grille{display:grid;gap:30px}
.heros .geant{font-size:clamp(50px,8.3vw,124px)}
.heros-cote{display:flex;flex-direction:column;gap:20px}
@media (min-width:1100px){
  .heros-grille{grid-template-columns:minmax(0,1.34fr) minmax(0,.66fr);align-items:end;gap:36px}
  .heros-cote .ages-raccourcis{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:470px;margin:0 0 0 auto}
  .heros-cote .ages-raccourcis a{justify-content:flex-start}
}
@media (max-width:1099px){.scene-papier{max-width:520px;margin:6px auto 0;aspect-ratio:1/.66}.scene-papier .sp-soleil{width:34%}.scene-papier .sp-nuage.n1{top:8%;width:34%}.scene-papier .sp-nuage.n2{top:30%;left:50%;width:22%}}
.scene-papier{position:relative;width:100%;max-width:470px;aspect-ratio:1/.86;margin-left:auto}
.scene-papier svg{width:100%;height:auto;overflow:visible}
.sp-soleil{position:absolute;right:2%;top:0;width:46%;filter:drop-shadow(0 10px 10px rgba(240,160,20,.25))}
.soleil .rayons{transform-box:fill-box;transform-origin:center;animation:tourne 70s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.sp-nuage{position:absolute;filter:drop-shadow(0 8px 8px rgba(34,48,47,.12))}
.sp-nuage.n1{left:0;top:22%;width:42%;animation:derive 24s ease-in-out infinite alternate}
.sp-nuage.n2{left:46%;top:44%;width:27%;animation:derive 31s ease-in-out infinite alternate-reverse}
@keyframes derive{from{transform:translateX(-16px)}to{transform:translateX(20px)}}
.sp-mer{position:absolute;left:-4%;right:-4%;bottom:0;height:30%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.sp-mer .sv{position:absolute;left:0;bottom:0;width:200%;max-width:none;height:100%;animation:vague-glisse 18s linear infinite}
.sp-mer .v1{animation-duration:13s;animation-direction:reverse}.sp-mer .v2{animation-duration:22s}
.sp-mer.avant{z-index:3;height:24%}
.sp-bateau{position:absolute;left:26%;bottom:15%;width:34%;z-index:2;animation:tangue 3.6s ease-in-out infinite;filter:drop-shadow(0 10px 8px rgba(34,48,47,.2))}
.sp-saut{position:absolute;left:66%;bottom:10%;width:19%;z-index:1;animation:saut 8s cubic-bezier(.3,.6,.4,1) infinite;opacity:0}
@keyframes saut{0%,58%{opacity:0;transform:translate(0,40%) rotate(-50deg)}62%{opacity:1;transform:translate(-10%,-30%) rotate(-40deg)}70%{transform:translate(-55%,-150%) rotate(0deg)}78%{opacity:1;transform:translate(-100%,-30%) rotate(45deg)}82%,100%{opacity:0;transform:translate(-110%,40%) rotate(55deg)}}
.sp-bouee{position:absolute;left:3%;bottom:6%;width:17%;z-index:4;animation:bouee 6s ease-in-out infinite;filter:drop-shadow(0 8px 6px rgba(34,48,47,.2))}


/* Premier écran : le texte, et quatre enfants au fauteuil (1, 5, 9, 15 ans) */
.heros{padding-bottom:clamp(30px,5vw,70px)}
@media (min-width:1100px){
  .heros-grille{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:56px}
  .heros .geant{font-size:clamp(56px,6.3vw,100px)}
}
.heros-visuel{position:relative;margin-top:10px}
.mosaique{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.panneau{position:relative;display:block;overflow:hidden;border-radius:34px;background:var(--sable);text-decoration:none;color:var(--encre);aspect-ratio:1/1.1}
.panneau img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) 38%;transition:transform .9s var(--courbe)}
.panneau .etiquette{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:9px;background:#fff;border-radius:50px;padding:9px 15px 9px 11px;font-size:15px;font-weight:600;transition:transform .45s var(--courbe)}
.panneau .etiquette i{width:12px;height:12px;border-radius:50%;background:var(--c)}
@media (hover:hover) and (pointer:fine){.panneau:hover img{transform:scale(1.05)}.panneau:hover .etiquette{transform:translateY(-3px) rotate(-2deg)}}
@media (max-width:640px){.mosaique{gap:10px}.panneau{border-radius:24px;aspect-ratio:4/5}.panneau .etiquette{left:8px;bottom:8px;font-size:14px;padding:7px 12px 7px 9px}}
.deco-mosaique{position:absolute;inset:0;pointer-events:none;z-index:2}
.deco-mosaique > div{position:absolute;filter:drop-shadow(0 12px 10px rgba(34,48,47,.2))}
.deco-mosaique svg{width:100%;height:auto;overflow:visible}
.dm-dent{width:17%;left:-7%;top:-6%;animation:dent-flotte 5s ease-in-out infinite}
.dm-et{width:5%;animation:scintille 2.8s ease-in-out infinite;filter:none!important}
.dm-et.e1{left:9%;top:-7%}.dm-et.e2{left:-9%;top:17%;width:4%;animation-delay:-1s}.dm-et.e3{left:44%;top:46%;width:5%;animation-delay:-1.8s}
.dm-brosse{width:40%;right:-1%;bottom:-5%;transform-origin:85% 50%;animation:brosser 2.6s ease-in-out infinite}
.dm-mousse{position:absolute;right:22%;bottom:4%;width:18%;height:22%}
.dm-mousse i{position:absolute;bottom:0;border-radius:50%;border:2px solid rgba(43,179,177,.7);background:radial-gradient(circle at 32% 30%,#fff 0 18%,rgba(255,255,255,.5) 22%);animation:mousse 3.4s ease-out infinite;opacity:0}
.dm-mousse i:nth-child(1){left:6%;width:14px;height:14px}.dm-mousse i:nth-child(2){left:40%;width:10px;height:10px;animation-delay:-.9s}
.dm-mousse i:nth-child(3){left:66%;width:18px;height:18px;animation-delay:-1.8s}.dm-mousse i:nth-child(4){left:24%;width:9px;height:9px;animation-delay:-2.6s}
@media (max-width:640px){.dm-dent{width:19%;left:-3%;top:-8%}.dm-brosse{width:46%;right:-2%}.dm-et.e2{left:-2%}}

/* La scène du premier écran : une dent qui brille, la brosse qui frotte */
.scene-dent .sp-dent{position:absolute;left:30%;top:24%;width:30%;z-index:2;animation:dent-flotte 5s ease-in-out infinite;filter:drop-shadow(0 16px 14px rgba(34,48,47,.18))}
@keyframes dent-flotte{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(3deg)}}
.scene-dent .sp-brosse{position:absolute;left:4%;bottom:12%;width:56%;z-index:3;transform-origin:85% 50%;animation:brosser 2.6s ease-in-out infinite;filter:drop-shadow(0 10px 8px rgba(34,48,47,.2))}
@keyframes brosser{0%,100%{transform:rotate(-14deg) translateX(0)}25%{transform:rotate(-12deg) translateX(-14px)}50%{transform:rotate(-14deg) translateX(0)}75%{transform:rotate(-16deg) translateX(-10px)}}
.sp-etincelle{position:absolute;z-index:3;width:7%;animation:scintille 2.8s ease-in-out infinite}
.sp-etincelle svg{width:100%}
.sp-etincelle.e1{left:62%;top:20%;width:8%}
.sp-etincelle.e2{left:24%;top:30%;width:6%;animation-delay:-.9s}
.sp-etincelle.e3{left:58%;top:58%;width:5%;animation-delay:-1.7s}
@keyframes scintille{0%,100%{transform:scale(.4) rotate(0);opacity:.2}50%{transform:scale(1) rotate(45deg);opacity:1}}
.sp-mousse{position:absolute;left:8%;bottom:30%;width:30%;height:30%;z-index:4;pointer-events:none}
.sp-mousse i{position:absolute;bottom:0;border-radius:50%;border:2px solid rgba(43,179,177,.6);background:radial-gradient(circle at 32% 30%,#fff 0 18%,rgba(255,255,255,.4) 22%);animation:mousse 3.4s ease-out infinite;opacity:0}
.sp-mousse i:nth-child(1){left:10%;width:16px;height:16px}
.sp-mousse i:nth-child(2){left:34%;width:11px;height:11px;animation-delay:-.7s}
.sp-mousse i:nth-child(3){left:52%;width:20px;height:20px;animation-delay:-1.4s}
.sp-mousse i:nth-child(4){left:70%;width:9px;height:9px;animation-delay:-2.1s}
.sp-mousse i:nth-child(5){left:24%;width:13px;height:13px;animation-delay:-2.8s}
@keyframes mousse{0%{transform:translateY(0) scale(.5);opacity:0}15%{opacity:1}100%{transform:translateY(-90px) scale(1.1);opacity:0}}

/* Objets dentaires des cartes et des pages */
.soin .objet svg{height:auto}
.soin .objet .brosse{width:160px}
.soin .objet .dent-papier{width:auto;height:88px}
.soin .objet .sourire-bagues{width:130px}
.soin .objet .bouee{width:84px}
.dt-dent{width:30%;right:34%;top:4%;animation:dent-flotte 5s ease-in-out infinite}
.dt-brosse{width:60%;right:2%;top:58%;transform-origin:85% 50%;animation:brosser 2.6s ease-in-out infinite}
.dt-et1{width:8%;right:22%;top:10%;animation:scintille 2.8s ease-in-out infinite}
.dt-et2{width:6%;right:70%;top:44%;animation:scintille 2.8s ease-in-out -1.2s infinite}
.dt-sourire{width:52%;right:34%;top:46%;animation:dent-flotte 6s ease-in-out infinite}
.deco-orthodontie .dt-et1{right:30%;top:40%}

/* Le ciel : mouettes de papier */
.ciel{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:visible}
.mouette{width:96px;height:auto;overflow:visible}
.oiseau{position:absolute;left:0;top:0;width:var(--t,92px);pointer-events:none;will-change:transform;filter:drop-shadow(0 10px 8px rgba(34,48,47,.16))}
.oiseau .mouette{width:100%}
.oiseau.gauche .mouette{transform:scaleX(-1)}
.aile{transform-box:view-box;transform-origin:62px 47px;animation:battre var(--battement,.42s) ease-in-out infinite alternate}
.aile-loin{animation-delay:-.08s}
.oiseau.pose .aile{animation:none;transform:scaleY(.18)}
.oiseau.pose .aile-loin{transform:scaleY(.1)}
.oiseau.plane .aile{animation-duration:1.6s}
@keyframes battre{from{transform:scaleY(1)}to{transform:scaleY(-.62)}}
.perchoir{position:absolute;pointer-events:auto;cursor:pointer;width:var(--t,78px);transform-origin:50% 100%;filter:drop-shadow(0 6px 5px rgba(34,48,47,.18))}
.perchoir .mouette{width:100%}
.perchoir.gauche .mouette{transform:scaleX(-1)}
.perchoir .aile{animation:none;transform:scaleY(.16)}
.perchoir .aile-loin{transform:scaleY(.08)}
.perchoir .tete{transform-box:view-box;transform-origin:100px 42px}
.perchoir.picore{animation:picore 3.8s ease-in-out infinite}
@keyframes picore{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(7deg)}82%{transform:rotate(0)}88%{transform:rotate(5deg)}94%{transform:rotate(0)}}

/* Parties */
.partie{position:relative;padding:clamp(88px,11vw,150px) 0}
.partie-tete{display:grid;gap:20px;margin-bottom:clamp(40px,5vw,64px)}
.partie-tete .chapeau{color:var(--ardoise)}
@media (min-width:980px){.partie-tete.cote{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;gap:60px}.partie-tete.cote .chapeau{margin-bottom:.4em}}

/* Module : à chaque âge */
.ages{background:var(--blanc);border-radius:var(--r-carte);margin-inline:var(--bord);padding:clamp(56px,7vw,100px) 0}
.ages-grille{display:grid;gap:clamp(28px,4vw,56px);align-items:start}
@media (min-width:1000px){.ages-grille{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.age-affiche{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.age-affiche .nombre{font-size:clamp(64px,8vw,112px);font-weight:500;letter-spacing:-.06em;line-height:.9}
.age-affiche .unite{font-size:clamp(22px,2vw,28px);font-weight:500;letter-spacing:-.02em}
.curseur{position:relative;height:112px;margin:18px 0 6px;touch-action:pan-y;--p:.333}
.curseur .piste{position:absolute;left:0;right:0;top:54px;height:40px;overflow:visible}
.curseur .piste svg{width:100%;height:40px;overflow:visible}
.curseur .eau{position:absolute;left:0;top:64px;height:30px;width:calc(var(--p) * 100%);overflow:hidden;pointer-events:none}
.curseur .bateau-age{position:absolute;top:0;left:calc(43px + var(--p) * (100% - 86px));width:86px;margin-left:-43px;transition:left .18s linear;filter:drop-shadow(0 8px 6px rgba(34,48,47,.22));pointer-events:none}
.curseur .bateau-age .bateau{animation:tangue 3.4s ease-in-out infinite}
.curseur.glisse .bateau-age{transition:none}
@keyframes tangue{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-3px)}}
.curseur input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:grab;-webkit-appearance:none;appearance:none;z-index:2}
.curseur input:active{cursor:grabbing}
.curseur input:focus-visible ~ .bateau-age{outline:3px solid var(--ciel);outline-offset:6px;border-radius:16px}
.graduations{display:flex;justify-content:space-between;font-size:14px;font-weight:600;color:var(--ardoise);margin-top:2px;padding:0 26px;font-variant-numeric:tabular-nums}
.graduations button{background:none;border:0;padding:10px 4px;min-width:34px;cursor:pointer;border-radius:10px;font-weight:600;color:inherit}
.graduations button[aria-pressed="true"]{color:var(--encre)}
.etapes-age{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.etapes-age button{display:inline-flex;align-items:center;gap:9px;border:0;background:var(--creme);padding:10px 16px 10px 12px;border-radius:50px;font-weight:600;font-size:15px;cursor:pointer;min-height:44px;transition:background .3s,transform .3s var(--courbe)}
.etapes-age button i{width:12px;height:12px;border-radius:50%;background:var(--c)}
.etapes-age button[aria-pressed="true"]{background:var(--encre);color:#fff}
/* La barre reste en haut pendant que les étapes défilent dessous ; l'âge suit la page (site.js) */
.ages-barre{position:sticky;top:84px;z-index:3;background:var(--blanc);margin:26px -14px 0;padding:12px 14px 8px;border-radius:0 0 24px 24px}
.ages-barre::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:96px;background:var(--blanc);pointer-events:none;visibility:hidden}
.ages-barre.collee::before{visibility:visible}
.ages-barre::after{content:"";position:absolute;left:0;right:0;top:100%;height:30px;background:linear-gradient(var(--blanc),rgba(255,255,255,0));pointer-events:none}
.ages-barre .age-affiche .nombre{font-variant-numeric:tabular-nums}
.etapes-liste{padding:10px 0 14vh}
.etape{padding:34px 0 30px;border-top:1px solid rgba(34,48,47,.09);opacity:.3;transition:opacity .5s ease}
.etape:first-child{border-top:0}
.etape.active{opacity:1}
.etape-tranche{display:inline-flex;align-items:center;gap:9px;margin:0;font-size:15px;font-weight:600;color:var(--ardoise)}
.etape-tranche i{width:12px;height:12px;border-radius:50%;background:var(--c)}
.etape h3{margin:10px 0 14px}
.etape-lien{margin:18px 0 0}
.liste-bulles li{display:flex;gap:14px;align-items:flex-start;padding:10px 0;border-top:1px solid rgba(34,48,47,.09)}
.liste-bulles li:first-child{border-top:0}
.puce{flex:none;width:22px;height:22px;margin-top:3px;color:var(--c,var(--lagon))}
.age-visuels{display:grid;gap:18px}
.age-photo{position:relative;border-radius:40px;overflow:hidden;aspect-ratio:3/2;background:var(--sable)}
.age-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .7s ease,transform 1.2s var(--courbe)}
.age-photo img.active{opacity:1;transform:none}
.arcade-carte{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 24px;align-items:center;background:var(--creme);border-radius:40px;padding:24px 28px}
.arcade{width:100%;max-width:300px;height:auto;margin:0 auto}
@media (min-width:1000px){.arcade-carte{grid-template-columns:1fr;padding:34px 36px;gap:22px}.arcade{max-width:360px}.legende{grid-template-columns:repeat(3,auto);justify-content:center;gap:18px}}
.arcade .dent{fill:#fff;stroke:#C9C1AE;stroke-width:1.1;opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .45s ease,fill .45s,stroke .45s}
.arcade .dent.vide{opacity:.55;fill:none;stroke:#D5CDB9;stroke-dasharray:2 2.5}
.arcade .dent.lait.on{opacity:1;fill:#FFE7A0;stroke:#D9A72A}
.arcade .dent.def.on{opacity:1;fill:#fff;stroke:var(--mer);stroke-width:1.4}
.arcade .dent.pousse{opacity:1;fill:#E6F6F5;stroke:var(--lagon);stroke-dasharray:3 2.2;stroke-width:1.4}
.arcade-titre{grid-column:1/-1;margin:0;font-size:17px;font-weight:600;text-align:center}
.legende{display:grid;gap:10px;font-size:15px;font-weight:500}
.legende span{display:flex;align-items:center;gap:10px}
.legende i{width:18px;height:14px;border-radius:6px;border:1.5px solid}
.legende .l-lait{background:#FFE7A0;border-color:#D9A72A}
.legende .l-def{background:#fff;border-color:var(--mer)}
.legende .l-pousse{background:#E6F6F5;border-color:var(--lagon);border-style:dashed}
.compte{grid-column:1/-1;font-size:15px;color:var(--ardoise);border-top:1px solid rgba(34,48,47,.1);padding-top:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.compte b{color:var(--encre);font-weight:600}
@media (max-width:560px){.arcade-carte{grid-template-columns:1fr;padding:20px}.legende{grid-template-columns:1fr 1fr}
  .etapes-age{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.etapes-age button{padding:10px 6px;justify-content:center;gap:6px}}
@media (min-width:1000px){.age-visuels{position:sticky;top:96px}}
.arcade-mini,.legende-tel{display:none}
@media (max-width:999px){
  .ages-grille{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .etapes-liste{padding-bottom:8vh}
  /* Téléphone et tablette : la carte de l'arcade tombe après les étapes, on ne voyait plus les dents pousser,
     et on y arrivait à 18 ans, sans une dent de lait. Elle est masquée ; une petite arcade prend place dans la
     barre collante, à droite de l'âge et du bateau (sans la rendre plus haute), et sa légende passe avant la barre. */
  .age-visuels{display:none}
  .legende-tel{display:block;margin-top:20px}
  .legende-tel .legende{grid-template-columns:repeat(3,auto);justify-content:start;gap:10px 22px}
  .legende-tel p{margin:10px 0 0;font-size:14px}
  .ages-barre{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:center}
  .ages-barre .age-affiche{grid-column:1;grid-row:1;flex-wrap:nowrap;gap:10px;white-space:nowrap}
  .ages-barre .curseur{grid-column:1;grid-row:2}
  .ages-barre .graduations{grid-column:1/-1;grid-row:3}
  .ages-barre .etapes-age{grid-column:1/-1;grid-row:4}
  .ages-barre .arcade-mini{display:block;grid-column:2;grid-row:1/3;width:clamp(118px,30vw,170px);max-width:none;margin:0}
  .arcade-mini .dent{stroke-width:2.4}
  .arcade-mini .dent.vide{stroke-dasharray:4 4}
  .arcade-mini .dent.def.on,.arcade-mini .dent.pousse{stroke-width:2.8}
  .arcade-mini .dent.pousse{stroke-dasharray:5 3.5}
}
@media (max-width:700px){
  .ages-barre{top:80px;margin-top:18px;padding-top:8px}
  .ages-barre .age-affiche .nombre{font-size:clamp(38px,11.5vw,64px)}
  .legende-tel .legende{grid-template-columns:auto auto;gap:10px 14px;font-size:14px}
  .ages-barre .graduations{display:none}
  .ages-barre .curseur{height:100px;margin:4px 0 0}
  .ages-barre .etapes-age{margin-top:6px}
  .etape{padding:28px 0 24px}
}

/* La bande des sourires */
.sourires{padding:clamp(70px,8vw,110px) 0 clamp(60px,7vw,100px);overflow:hidden}
.sourires .partie-tete{margin-bottom:clamp(28px,3.5vw,44px)}
.ruban{position:relative;overflow:hidden;padding:18px 0 30px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ruban-piste{display:flex;gap:18px;width:max-content;animation:ruban 46s linear infinite}
@keyframes ruban{to{transform:translateX(calc(-50% - 9px))}}
.sourire{position:relative;flex:none;display:block;width:clamp(190px,19vw,272px);aspect-ratio:4/5;border-radius:34px;overflow:hidden;background:var(--sable);transform:translateY(calc(var(--i) * 0px));transition:transform .5s var(--courbe);color:var(--encre);text-decoration:none}
.sourire:nth-child(even){transform:translateY(16px)}
.sourire img{width:100%;height:100%;object-fit:cover}
.sourire .etiquette{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:50px;padding:8px 14px 8px 10px;font-size:15px;font-weight:600}
.sourire .etiquette i{width:12px;height:12px;border-radius:50%;background:var(--c)}
.sourire::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 6px var(--c);opacity:0;transition:opacity .35s}
@media (hover:hover) and (pointer:fine){.sourire:hover{transform:translateY(-6px) rotate(-1.5deg)}.sourire:hover::after{opacity:1}}
@media (max-width:640px){.sourire{width:168px;border-radius:24px}.ruban-piste{gap:12px;animation-duration:34s}@keyframes ruban{to{transform:translateX(calc(-50% - 6px))}}}
@media (prefers-reduced-motion:reduce){.ruban{overflow-x:auto}.ruban-piste{animation:none}}

/* Le cabinet */
.aquarium{position:relative;height:clamp(150px,18vw,210px);margin:-10px 0 18px;pointer-events:none}
.aquarium .poisson-nage{position:absolute;left:0;top:0;width:var(--t,92px);will-change:transform;filter:drop-shadow(0 8px 6px rgba(34,48,47,.15))}
.aquarium .poisson-nage.gauche .poisson{transform:scaleX(-1)}
.poisson .queue{transform-box:view-box;transform-origin:28px 40px;animation:queue var(--q,.5s) ease-in-out infinite alternate}
@keyframes queue{from{transform:rotate(-13deg)}to{transform:rotate(13deg)}}
.bulle-eau{position:absolute;border-radius:50%;border:2px solid rgba(43,179,177,.55);background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95) 0 18%,transparent 22%);pointer-events:none}
.lieux{display:grid;gap:20px}
@media (min-width:860px){.lieux{grid-template-columns:1.25fr 1fr 1fr}}
.lieu{position:relative}
.lieu figure{margin:0;border-radius:40px;overflow:hidden;aspect-ratio:4/5;background:var(--sable)}
.lieu:first-child figure{aspect-ratio:auto;height:100%;min-height:420px}
@media (max-width:859px){.lieu:first-child figure{min-height:0;aspect-ratio:4/3}.lieu figure{aspect-ratio:4/3}}
.lieu img{width:100%;height:100%;object-fit:cover}
.lieu-texte{position:absolute;left:14px;right:14px;bottom:14px;background:#fff;border-radius:28px;padding:18px 22px}
.lieu-texte h3{font-size:20px;letter-spacing:-.02em;margin-bottom:4px}
.lieu-texte p{margin:0;font-size:16px;line-height:1.45;color:var(--ardoise)}
.cabinet-pied{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;margin-top:36px}
.citation{font-size:clamp(22px,2.2vw,30px);line-height:1.3;letter-spacing:-.02em;max-width:30em;margin:0}

/* Les soins */
.soins-grille{display:grid;gap:18px}
@media (min-width:760px){.soins-grille{grid-template-columns:1fr 1fr}}
@media (min-width:1180px){.soins-grille{grid-template-columns:repeat(4,1fr)}}
.soin{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--r-carte);padding:30px 28px 28px;min-height:390px;overflow:hidden}
.soin .objet{height:88px;display:flex;align-items:flex-end;filter:drop-shadow(0 8px 7px rgba(34,48,47,.16))}
.soin .objet svg{width:100%;height:100%}
.soin h3{margin:34px 0 10px}
.soin p{font-size:16.5px;line-height:1.5;color:var(--ardoise);margin-bottom:22px;flex:1}
.soin .btn{align-self:flex-start;min-height:50px;font-size:15px;padding-left:20px}
.soin .btn .pastille{width:36px;height:36px}
.soin.urgence{background:var(--encre);color:#fff}
.soin.urgence p{color:rgba(255,255,255,.78)}
.soin .bouee{animation:bouee 9s ease-in-out infinite}
@keyframes bouee{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(8deg) translateY(-5px)}}
@media (hover:hover){.soin{transition:transform .5s var(--courbe)}.soin:hover{transform:translateY(-4px)}.soin:hover .objet{animation:frisson .6s ease}}
@keyframes frisson{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}60%{transform:rotate(5deg)}}

/* L'équipe : la mer */
.mer{background:var(--mer);color:#fff;margin-top:120px;padding-top:clamp(70px,8vw,110px)}
.mer .surtitre{color:#fff;--c:var(--soleil)}
.mer .chapeau,.mer .discret{color:rgba(255,255,255,.8)}
.mer > .vagues{position:absolute;left:0;right:0;top:-118px;height:120px}
.vagues{overflow:hidden}
.vague{position:absolute;left:0;bottom:-1px;width:200%;max-width:none;height:100%;animation:vague-glisse var(--d,26s) linear infinite}
.vague.v0{--d:34s;opacity:.95}.vague.v1{--d:26s;animation-direction:reverse}.vague.v2{--d:42s}
@keyframes vague-glisse{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.equipe-grille{display:grid;gap:20px}
@media (min-width:900px){.equipe-grille{grid-template-columns:repeat(3,1fr)}}
.praticien{background:#fff;color:var(--encre);border-radius:var(--r-carte);overflow:hidden;display:flex;flex-direction:column}
.praticien-photo{position:relative;aspect-ratio:1/1;background:var(--c);overflow:hidden}
.praticien-photo::before{content:"";position:absolute;width:76%;aspect-ratio:1;left:12%;top:16%;border-radius:50%;background:rgba(255,255,255,.28)}
.praticien-photo img{position:absolute;left:50%;bottom:0;width:86%;transform:translateX(-50%);transition:transform .8s var(--courbe)}
.praticien-photo .deco{position:absolute;width:64px;filter:drop-shadow(0 6px 5px rgba(34,48,47,.2))}
@media (hover:hover){.praticien:hover .praticien-photo img{transform:translateX(-50%) scale(1.035)}}
.praticien-texte{padding:26px 28px 30px}
.praticien-texte .role{display:inline-block;font-size:14px;font-weight:600;letter-spacing:.02em;padding:6px 12px;border-radius:50px;background:var(--creme);margin-bottom:14px}
.praticien-texte h3{margin-bottom:10px}
.praticien-texte p{font-size:16.5px;line-height:1.5;color:var(--ardoise);margin:0}
.langues-parlees{margin-top:14px!important;font-size:14px!important;font-weight:500}

/* Première visite */
.visite-grille{display:grid;gap:clamp(30px,5vw,70px);align-items:center}
@media (min-width:1000px){.visite-grille{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}
.pas-a-pas li{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:24px 0;border-top:1px solid rgba(34,48,47,.1)}
.pas-a-pas li:first-child{border-top:0}
.pas-a-pas .num{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:26px;font-weight:600;background:var(--c);letter-spacing:-.02em}
.pas-a-pas h3{margin-bottom:6px}
.pas-a-pas p{margin:0;color:var(--ardoise);font-size:17px}
.photo-arrondie{position:relative;border-radius:var(--r-photo);overflow:hidden;background:var(--sable)}
.photo-arrondie img{width:100%;height:100%;object-fit:cover}

/* Venir nous voir */
.fanions{width:100%;height:auto;display:block}
.fanion{transform-box:fill-box;transform-origin:50% 0;animation:fanion 3.2s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.37s)}
@keyframes fanion{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.guirlande{position:relative;margin:0 0 40px;overflow:hidden}
.venir-grille{display:grid;gap:20px}
@media (min-width:980px){.venir-grille{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.carte-info{background:#fff;border-radius:var(--r-carte);padding:clamp(28px,3.4vw,44px)}
.horaires{width:100%;border-collapse:collapse;font-size:17px;margin:6px 0 26px}
.horaires th,.horaires td{text-align:left;padding:11px 0;border-top:1px solid rgba(34,48,47,.1);font-weight:500}
.horaires td{text-align:right;font-variant-numeric:tabular-nums}
.horaires tr.aujourdhui th,.horaires tr.aujourdhui td{font-weight:700}
.horaires tr:first-child th,.horaires tr:first-child td{border-top:0}
.coord{display:grid;gap:14px;margin-bottom:28px}
.coord a{text-decoration:none;font-weight:600}
.coord .ligne-info{display:flex;gap:14px;align-items:flex-start}
.coord .ligne-info i{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--creme)}
.coord .ligne-info i svg{width:18px;height:18px}
.coord small{display:block;color:var(--ardoise);font-size:15px;font-weight:400}
.plan{position:relative;border-radius:var(--r-carte);overflow:hidden;min-height:440px;background:#E8E1CF}
.plan img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plan .repere{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center}
.plan .repere .logo{width:58px;height:58px;filter:drop-shadow(0 10px 10px rgba(34,48,47,.35))}
.plan .repere::after{content:"";width:14px;height:14px;margin-top:-4px;background:var(--lagon);transform:rotate(45deg);border-radius:2px}
.plan .etiquette{position:absolute;left:16px;bottom:16px;right:16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;background:rgba(255,255,255,.94);border-radius:28px;padding:14px 16px 14px 22px;font-size:15px;font-weight:500}
.plan .credit{position:absolute;right:18px;top:14px;font-size:11px;color:var(--ardoise);background:rgba(255,255,255,.8);padding:2px 8px;border-radius:8px}

/* Pied de page : le sable */
.pied{position:relative;background:var(--soleil);margin-top:160px;padding:70px 0 calc(40px + env(safe-area-inset-bottom))}
.pied > .vagues{position:absolute;left:0;right:0;top:-118px;height:120px}
.pied-grille{display:grid;gap:36px}
@media (min-width:900px){.pied-grille{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.pied .marque{padding:0}
.pied .marque b{font-size:20px}
.pied h4{font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px}
.pied li{padding:4px 0}
.pied a{text-decoration:none;font-weight:500}
@media (hover:hover){.pied a:hover{text-decoration:underline;text-underline-offset:4px}}
.pied-bas{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:56px;padding-top:24px;border-top:1.5px solid rgba(34,48,47,.18);font-size:15px}
.pied .langues{background:rgba(255,255,255,.55);margin:0}
.pied-geant{font-size:min(12.6vw,182px);font-weight:600;letter-spacing:-.06em;line-height:.86;margin:64px 0 0;white-space:nowrap;color:var(--encre)}

/* Barre du bas au téléphone */
.barre-bas{position:fixed;z-index:50;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));display:none;gap:8px;padding:6px;background:#fff;border-radius:50px;box-shadow:0 0 0 1px rgba(34,48,47,.06),0 16px 30px -18px rgba(34,48,47,.55);transform:translateY(140%);transition:transform .45s var(--courbe)}
.barre-bas.visible{transform:none}
.barre-bas a{flex:1;justify-content:center;min-height:50px;padding:4px 6px 4px 18px;font-size:16px}
.barre-bas .btn .pastille{width:38px;height:38px}
@media (max-width:760px){.barre-bas{display:flex}}

/* Pages intérieures */
.tete-page{padding-top:clamp(130px,18vh,180px);padding-bottom:clamp(40px,6vw,70px)}
.tete-page .titre{max-width:15ch}
.tete-photo{margin-inline:var(--bord);border-radius:var(--r-photo);overflow:hidden;height:min(70vh,680px);background:var(--sable)}
.tete-photo img{width:100%;height:100%;object-fit:cover}
.texte-long{max-width:44em}
.texte-long h2{margin:2.2em 0 .6em}
.texte-long h3{margin:1.8em 0 .5em}
.blocs{display:grid;gap:18px}
@media (min-width:860px){.blocs{grid-template-columns:1fr 1fr}}
.bloc{background:#fff;border-radius:var(--r-carte);padding:clamp(28px,3vw,40px)}
.bloc h3{margin-bottom:12px}
.bloc p{color:var(--ardoise);font-size:17px}
.bloc p:last-child{margin-bottom:0}
.bloc .onglet{display:block;width:58px;height:16px;margin:0 0 20px -4px;background:var(--c);transform:rotate(-3deg);clip-path:polygon(0 12%,12% 0,26% 10%,40% 0,55% 9%,70% 0,85% 8%,100% 2%,98% 90%,84% 100%,68% 92%,52% 100%,36% 92%,20% 100%,4% 94%)}
.bloc .age-badge{display:inline-block;font-size:14px;font-weight:600;padding:6px 12px;border-radius:50px;background:var(--c,var(--creme));margin-bottom:16px}
.questions details{background:#fff;border-radius:28px;margin-bottom:10px}
.questions summary{list-style:none;cursor:pointer;padding:22px 64px 22px 26px;font-weight:600;font-size:19px;position:relative;min-height:44px}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{content:"";position:absolute;right:22px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:var(--creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4v12M4 10h12' stroke='%2322302F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .3s var(--courbe)}
.questions details[open] summary::after{transform:rotate(45deg)}
.questions .reponse{padding:0 26px 24px;color:var(--ardoise)}
.galerie{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.galerie{grid-template-columns:repeat(4,1fr)}.galerie figure:nth-child(1){grid-column:span 2;grid-row:span 2}}
.galerie figure{margin:0;border-radius:32px;overflow:hidden;aspect-ratio:1;background:var(--sable)}
.galerie figure:nth-child(1){aspect-ratio:auto}
.galerie img{width:100%;height:100%;object-fit:cover}
.appel-final{background:var(--corail);border-radius:var(--r-carte);margin-inline:var(--bord);padding:clamp(48px,6vw,90px) 0;position:relative;overflow:hidden}
.appel-final .titre{max-width:14ch}
.appel-final .bateau{position:absolute;right:6%;bottom:18%;width:clamp(120px,14vw,200px);animation:tangue 3.6s ease-in-out infinite;filter:drop-shadow(0 12px 10px rgba(34,48,47,.25))}
@media (max-width:760px){.appel-final .bateau{position:static;width:120px;margin:30px 0 0 auto}}

/* Objets de papier des pages intérieures */
.deco-tete{position:absolute;right:0;top:-10px;width:min(34vw,420px);height:300px;pointer-events:none}
.deco-tete .dt{position:absolute;filter:drop-shadow(0 10px 9px rgba(34,48,47,.18))}
.deco-tete svg{width:100%;height:auto;overflow:visible}
.dt-p1{width:42%;right:8%;top:8%;animation:nage-place 7s ease-in-out infinite}
.dt-p2{width:30%;right:46%;top:44%;animation:nage-place 8.5s ease-in-out -2s infinite}
.dt-p3{width:24%;right:2%;top:62%;animation:nage-place 6.2s ease-in-out -4s infinite}
@keyframes nage-place{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(-18px,8px) rotate(3deg)}}
.deco-tete .soleil .rayons{transform-box:fill-box;transform-origin:center;animation:tourne 70s linear infinite}
.dt-soleil{width:46%;right:4%;top:0}
.dt-bateau{width:56%;right:30%;top:48%;animation:tangue 3.6s ease-in-out infinite}
.dt-bouee{width:34%;right:40%;top:30%;animation:bouee 6s ease-in-out infinite}
.dt-nuage{width:50%;right:0;top:58%;animation:derive 26s ease-in-out infinite alternate}
.deco-contact .dt-bouee{right:44%;top:40%}
.tete-page .conteneur > :not(.deco-tete){position:relative;z-index:1}
.tete-page .titre,.tete-page .chapeau{max-width:min(15ch,60%)}
.tete-page .chapeau{max-width:min(36em,62%)}
@media (max-width:1000px){.deco-tete{display:none}.tete-page .titre{max-width:15ch}.tete-page .chapeau{max-width:36em}}
@media (max-width:640px){
  .papier{display:inline;white-space:normal;background:linear-gradient(transparent 22%,var(--c,var(--soleil)) 22% 96%,transparent 96%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em}
  .papier::before{display:none}
}

/* Apparitions par le bas */
.js .apparait{opacity:0;transform:translateY(42px);filter:blur(4px);transition:opacity 1s var(--courbe),transform 1s var(--courbe),filter 1s var(--courbe);transition-delay:calc(var(--k,0) * 90ms)}
.js .apparait.vu{opacity:1;transform:none;filter:none}

.capture .apparait,.capture .papier::before{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}

/* Bulles au clic */
.bulle-clic{position:fixed;z-index:80;border-radius:50%;border:2px solid var(--lagon);background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95) 0 16%,transparent 20%);pointer-events:none;animation:bulle-clic var(--d,1s) cubic-bezier(.2,.6,.3,1) forwards}
@keyframes bulle-clic{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}15%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% - var(--dy,80px))) scale(1)}}

/* Ouverture : une vague, un bateau */
.rideau{position:fixed;inset:0;z-index:100;background:var(--creme);display:none;place-items:center;pointer-events:none}
.avec-ouverture .rideau{display:grid}
.rideau .scene{position:relative;width:min(520px,80vw);height:200px}
.rideau .trace{position:absolute;left:0;right:0;top:118px;height:40px;width:100%}
.rideau .trace path{stroke-dasharray:1;stroke-dashoffset:1;animation:trace 1.1s var(--courbe) .1s forwards}
.rideau .bateau{position:absolute;top:40px;left:0;width:110px;margin-left:-55px;animation:traverse 1.5s var(--courbe) .2s both;filter:drop-shadow(0 10px 8px rgba(34,48,47,.2))}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes traverse{from{left:-10%;opacity:0;transform:rotate(-6deg)}20%{opacity:1}to{left:50%;opacity:1;transform:rotate(0)}}
.ouverture-finie .rideau{background:transparent;visibility:hidden;transition:background-color .7s var(--courbe),visibility 0s 1s}
.ouverture-finie .rideau .trace{opacity:0;transition:opacity .45s}
.rideau .bateau.vol{animation:none;opacity:1;transition:transform .9s var(--courbe)}
.ouverture-finie .rideau .bateau:not(.vol){opacity:0;transition:opacity .4s}
.bateau-en-vol .sp-bateau{opacity:0}
.avec-ouverture .heros .geant .ligne{transform:translateY(38px);opacity:.06;filter:blur(6px)}
.ouverture-finie .heros .geant .ligne{transform:none;opacity:1;filter:none;transition:transform 1.1s var(--courbe),opacity 1.1s var(--courbe),filter 1.1s var(--courbe)}
.ouverture-finie .heros .geant .ligne:nth-child(2){transition-delay:.08s}
.ouverture-finie .heros .geant .ligne:nth-child(3){transition-delay:.16s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .apparait{opacity:1;transform:none;filter:none}
  .fenetre{--o:1}
}

/* Ados (12-18) : plus sobre, fond encre, photos de sourires */
.ados{position:relative;margin:clamp(24px,3vw,40px) var(--bord) 0;padding:clamp(64px,8vw,120px) 0;background:var(--encre);color:#fff;border-radius:var(--r-carte);overflow:hidden}
.ados-grille{display:grid;gap:clamp(40px,5vw,72px);align-items:center}
@media (min-width:1000px){.ados-grille{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.ados-photos{position:relative;padding:0 0 18% 0}
.ados-photo{margin:0;border-radius:var(--r-photo);overflow:hidden;background:#2E3D3C}
.ados-photo img{display:block;width:100%;height:100%;object-fit:cover}
.ados-photo-1{aspect-ratio:4/3.4}
.ados-photo-2{position:absolute;right:-4%;bottom:0;width:48%;aspect-ratio:4/3;border-radius:calc(var(--r-photo) * .7);box-shadow:0 0 0 8px var(--encre)}
.ados .surtitre{color:rgba(255,255,255,.72)}
.ados .surtitre::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--lagon)}
.ados .titre{color:#fff;max-width:13ch}
.ados .titre em{font-style:normal;color:#7FE0D9}
.ados .chapeau{color:rgba(255,255,255,.78);max-width:34em}
.ados-points{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:0}
.ados-points li{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:18px 0;border-top:1px solid rgba(255,255,255,.14)}
.ados-points li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.ados-num{font-size:15px;font-weight:600;color:#7FE0D9;font-variant-numeric:tabular-nums;padding-top:3px}
.ados-points h3{margin:0 0 4px;font-size:19px;font-weight:600;letter-spacing:-.01em;color:#fff}
.ados-points p{margin:0;color:rgba(255,255,255,.72);font-size:17px;line-height:1.5}
.ados .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
@media (max-width:640px){.ados-photo-2{width:56%;right:-2%}.ados-points li{grid-template-columns:36px 1fr}}

/* Téléphone (29/10/2026) : la page ne devient jamais plus large que l'écran. Une photo inclinée,
   un décor animé ou une ouverture qui entre par le côté élargissait la page de quelques pixels
   (jusqu'à 100 px pendant l'ouverture de Ricochet) : elle glissait de côté et la barre du bas
   était coupée. « clip » ne crée pas de zone de défilement : les en-têtes collants restent collants.
   Le corps est aussi coupé, et devient le repère des éléments posés en absolu : sans lui, un élément
   ajouté après le chargement (une mouette) élargissait encore la page et la barre du bas. */
html { overflow-x: hidden; overflow-x: clip; }
body { overflow-x: clip; position: relative; }