/* EnCorps — Design system
   Extrait des maquettes Claude Design — direction "Bichromie corail & blanc · photos naturelles".
   Les pages conservent des styles inline fidèles aux maquettes ; ce fichier porte le reset,
   les tokens de couleur, les polices, les animations et les classes de composants partagées. */

/* ─── Polices auto-hébergées (RGPD : aucune requête vers Google) ─── */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/hanken-grotesk-latin.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:italic;font-weight:400 600;font-display:swap;src:url('/assets/fonts/hanken-grotesk-latin-italic.woff2') format('woff2');}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-latin.woff2') format('woff2');}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-latin-italic.woff2') format('woff2');}

:root{
  --ec-coral:#ff4c59; --ec-coral-dark:#d22436; --ec-coral-deep:#b41c2a; --ec-coral-light:#ff8089;
  --ec-ink:#1c1416; --ec-text:#5c5152; --ec-muted:#857f80;
  --ec-bg:#fff; --ec-bg-warm:#ddd9d5; --ec-bg-soft:#f3eeea;
  --ec-chip:#fff0f1; --ec-chip-hover:#fff5f5;
  --ec-teal:#0e8d7f; --ec-teal-dark:#0c7d70; --ec-teal-soft:#e7f4f1;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;color:var(--ec-ink);background:#fff;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
h1,h2,h3,p,blockquote,figure{margin:0;}
::selection{background:#ff4c59;color:#fff;}
.ec4{font-family:'Hanken Grotesk',system-ui,sans-serif;}

/* ─── Animations ─── */
@keyframes ec4marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes ec4ken{0%{transform:scale(1.05)}100%{transform:scale(1.15)}}
@keyframes ec4heroA{0%{opacity:0;transform:scale(1.16) rotate(1.4deg)}3%{opacity:1;transform:scale(1.04) rotate(0deg)}25%{opacity:1;transform:scale(1.09) rotate(0deg)}30%{opacity:0;transform:scale(1.13) rotate(-1.2deg)}100%{opacity:0;transform:scale(1.16) rotate(1.4deg)}}
@keyframes ec4heroB{0%{opacity:0;transform:scale(1.16) rotate(-1.4deg)}3%{opacity:1;transform:scale(1.04) rotate(0deg)}25%{opacity:1;transform:scale(1.09) rotate(0deg)}30%{opacity:0;transform:scale(1.13) rotate(1.2deg)}100%{opacity:0;transform:scale(1.16) rotate(-1.4deg)}}
@keyframes ec4dot{0%{opacity:.4;width:7px}3%{opacity:1;width:24px}25%{opacity:1;width:24px}30%{opacity:.4;width:7px}100%{opacity:.4;width:7px}}
@keyframes ec4bob{0%,100%{transform:translateY(0);opacity:.85}50%{transform:translateY(7px);opacity:.35}}
@keyframes echFloatA{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-26px,-20px,0) scale(1.1)}}
@keyframes ecfillsweep{from{--ecang:0deg}to{--ecang:360deg}}
@property --ecang{syntax:'<angle>';inherits:false;initial-value:0deg;}

/* ─── Composants & survols ─── */
.ec4tile{position:relative;overflow:hidden;cursor:pointer;}
.ec4tile .ec4img{transition:transform 1s cubic-bezier(.2,.7,.2,1);}
.ec4tile:hover .ec4img{transform:scale(1.08);}
.ec4tile .ec4rule{transition:width .5s cubic-bezier(.2,.7,.2,1);}
.ec4tile:hover .ec4rule{width:60px !important;}
.ec4tile .ec4go{transition:opacity .4s,transform .4s;opacity:0;transform:translateX(-6px);}
.ec4tile:hover .ec4go{opacity:1;transform:translateX(0);}
.ec4cta{transition:transform .2s,box-shadow .2s;}
.ec4cta:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(255,76,89,.6);}
.ec4out{transition:background .2s,color .2s;}
.ec4out:hover{background:#ff4c59;color:#fff !important;}
.ec4row{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;scroll-margin-top:130px;}
.ec4row:hover{transform:translateY(-4px);box-shadow:0 38px 66px -38px rgba(28,20,22,.4);}
.ec4rowi:hover .ec4lnk{gap:14px;}
.ec4price{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s;}
.ec4price:hover{transform:translateY(-6px);box-shadow:0 38px 66px -38px rgba(28,20,22,.4);}
.echav{transition:transform .4s cubic-bezier(.2,.7,.2,1);}
.echeroteam:hover .echav{transform:translateX(0) !important;}

/* ─── Formulaires ─── */
.ec4in{font-family:inherit;width:100%;border:1.5px solid #e4ddd6;border-radius:12px;padding:14px 16px;font-size:15px;color:#1c1416;background:#fff;transition:border-color .2s,box-shadow .2s;}
.ec4in:focus{outline:none;border-color:#ff4c59;box-shadow:0 0 0 4px rgba(255,76,89,.12);}
.ec4in::placeholder{color:#767071;}
@keyframes echPulse{0%{transform:scale(.6);opacity:.55}100%{transform:scale(1.5);opacity:0}}
/* Grandes options (étape discipline de l'inscription) */
.ec4opt{transition:transform .12s,box-shadow .12s,border-color .15s,background .15s;cursor:pointer;border-radius:16px;padding:22px;border:2px solid #f0e7e3;background:#fff;}
.ec4opt:hover{border-color:#ffb3b8;}
.ec4opt.is-selected{border-color:#ff4c59;background:#fff5f5;}
/* Check de confirmation */
@keyframes ec4pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.ec4check{animation:ec4pop .5s cubic-bezier(.2,.8,.2,1) both;}

/* ─── Galerie (masonry) ─── */
.ec4gal{columns:3;column-gap:16px;}
.ec4gi{break-inside:avoid;margin-bottom:16px;border-radius:16px;overflow:hidden;display:block;}
.ec4gi img{width:100%;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1);}
.ec4gi:hover img{transform:scale(1.07);}
.ec4gi .ec4cap{position:absolute;left:0;right:0;bottom:0;padding:30px 16px 14px;background:linear-gradient(transparent,rgba(15,12,14,.78));color:#fff;font-size:13px;font-weight:700;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s;}
.ec4gi:hover .ec4cap{opacity:1;transform:translateY(0);}

/* ─── Hero variante cadres flottants (Galerie) ─── */
.echero-frames{position:relative;overflow:hidden;}
.echero-frames>*{position:relative;z-index:1;}
.echero-frames::before,.echero-frames::after{content:"";position:absolute;z-index:0;pointer-events:none;border:2px solid rgba(255,255,255,.16);border-radius:10px;}
.echero-frames::before{width:170px;height:124px;left:9%;top:24%;animation:echFrame1 21s ease-in-out infinite alternate;}
.echero-frames::after{width:116px;height:148px;right:13%;top:30%;animation:echFrame2 25s ease-in-out infinite alternate;}
@keyframes echFrame1{0%{transform:rotate(-6deg) translateY(0);opacity:.45}100%{transform:rotate(4deg) translateY(-16px);opacity:.85}}
@keyframes echFrame2{0%{transform:rotate(6deg) translateY(0);opacity:.4}100%{transform:rotate(-5deg) translateY(14px);opacity:.8}}

/* ─── Galas (vidéo + éditions) ─── */
.ec4play{transition:transform .25s,background .25s;}
.ec4vid:hover .ec4play{transform:scale(1.08);background:#fff;}
.ec4ed{transition:transform .3s,box-shadow .3s;}
.ec4ed:hover{transform:translateY(-4px);box-shadow:0 34px 60px -36px rgba(28,20,22,.4);}
.ec4ed .ec4ci{transition:transform .9s cubic-bezier(.2,.7,.2,1);}
.ec4ed:hover .ec4ci{transform:scale(1.07);}

/* ─── Pilates (hero teal + variantes) ─── */
.echero-breath{position:relative;overflow:hidden;}
.echero-breath>*{position:relative;z-index:1;}
.echero-breath::before,.echero-breath::after{content:"";position:absolute;left:6%;top:50%;width:340px;height:340px;margin-top:-170px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);z-index:0;pointer-events:none;animation:echBreath 8s ease-in-out infinite;}
.echero-breath::after{width:210px;height:210px;margin-top:-105px;left:9%;border-color:rgba(127,217,205,.30);animation-delay:-2.6s;}
@keyframes echBreath{0%,100%{transform:scale(.72);opacity:.12}50%{transform:scale(1.18);opacity:.4}}
.ec4heroimg{transition:transform 8s ease-out;}
.ec4herowrap:hover .ec4heroimg{transform:scale(1.06);}
.ec4out-teal{transition:background .2s,color .2s;}
.ec4out-teal:hover{background:#0e8d7f;color:#fff !important;}

/* ─── Contenu prose (pages légales / texte) ─── */
.ec-prose{max-width:820px;margin:0 auto;color:#3a2f30;font-size:16px;line-height:1.72;}
.ec-prose h2{font-size:26px;font-weight:800;letter-spacing:-.02em;color:#1c1416;margin:38px 0 12px;}
.ec-prose h3{font-size:18.5px;font-weight:800;color:#1c1416;margin:26px 0 8px;}
.ec-prose p{margin:0 0 14px;}
.ec-prose ul{margin:0 0 16px;padding-left:22px;}
.ec-prose li{margin:0 0 7px;}
.ec-prose a{color:#d22436;font-weight:600;text-decoration:underline;}
.ec-prose strong{color:#1c1416;}

/* ─── Accordéon FAQ (natif <details>) ─── */
.ec-faq details{background:#faf4f3;border:1px solid #f0e7e3;border-radius:14px;margin-bottom:12px;overflow:hidden;}
.ec-faq summary{list-style:none;cursor:pointer;padding:20px 24px;font-weight:700;font-size:16.5px;color:#1c1416;display:flex;justify-content:space-between;align-items:center;gap:16px;}
.ec-faq summary::-webkit-details-marker{display:none;}
.ec-faq summary::after{content:'+';font-size:24px;line-height:1;color:#d22436;font-weight:700;flex:none;}
.ec-faq details[open] summary::after{content:'\2013';}
.ec-faq details>div{padding:0 24px 20px;font-size:15px;line-height:1.66;color:#5c5152;}

/* ─── Bannière cookies ─── */
.ec-cookie{position:fixed;left:16px;right:16px;bottom:16px;max-width:580px;margin:0 auto;background:#1c1416;color:#fff;border-radius:16px;padding:16px 20px;box-shadow:0 20px 50px -16px rgba(0,0,0,.5);z-index:200;display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:13.5px;line-height:1.5;}
.ec-cookie a{color:#ff8089;text-decoration:underline;}
.ec-cookie button{font-family:inherit;background:#ff4c59;color:#fff;border:none;font-weight:700;font-size:13.5px;padding:10px 20px;border-radius:999px;cursor:pointer;white-space:nowrap;}

@media(max-width:860px){ .ec4gal{columns:2;} }
@media(max-width:520px){ .ec4gal{columns:1;} }
.ec4card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;}
.ec4card:hover{transform:translateY(-5px);box-shadow:0 40px 70px -36px rgba(28,20,22,.42);}
.ec4card .ec4ci{transition:transform 1.1s cubic-bezier(.2,.7,.2,1);}
.ec4card:hover .ec4ci{transform:scale(1.06);}
.ec4card .ec4lnk{transition:gap .3s;}
.ec4card:hover .ec4lnk{gap:15px;}
.echfx{position:absolute;inset:-15%;z-index:1;pointer-events:none;mix-blend-mode:soft-light;background:radial-gradient(closest-side,rgba(255,255,255,.55),transparent) 18% 26%/240px 240px no-repeat,radial-gradient(closest-side,rgba(255,255,255,.45),transparent) 74% 60%/320px 320px no-repeat,radial-gradient(closest-side,rgba(255,255,255,.4),transparent) 46% 86%/200px 200px no-repeat;animation:echFloatA 22s ease-in-out infinite alternate;}
.ec4card,.ec4row,.ec4price,.ec4ed,.ec4gi,.ec4slot,.ecfill{position:relative;}
.ec4card::after,.ec4row::after,.ec4price::after,.ec4ed::after,.ec4gi::after,.ecfill::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from -90deg,#ff4c59 var(--ecang),rgba(255,76,89,0) 0);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s;pointer-events:none;z-index:6;}
.ec4card:hover::after,.ec4row:hover::after,.ec4price:hover::after,.ec4ed:hover::after,.ec4gi:hover::after,.ecfill:hover::after{opacity:1;animation:ecfillsweep .75s ease forwards;}

/* ─── Hero animé (fond marquee multi-lignes) ─── */
.echero{position:relative;overflow:hidden;}
.echero>*{position:relative;z-index:1;}
.echero::before{content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,255,.16),transparent) 16% 28%/240px 240px no-repeat,radial-gradient(closest-side,rgba(255,255,255,.11),transparent) 72% 58%/320px 320px no-repeat,radial-gradient(closest-side,rgba(255,255,255,.09),transparent) 44% 88%/200px 200px no-repeat;animation:echFloatA 22s ease-in-out infinite alternate;}
.echero::after{content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,255,.10),transparent) 88% 20%/180px 180px no-repeat,radial-gradient(closest-side,rgba(255,255,255,.07),transparent) 30% 62%/260px 260px no-repeat;animation:echFloatB 28s ease-in-out infinite alternate;}
@keyframes echFloatB{0%{transform:translate3d(0,0,0) scale(1.05)}100%{transform:translate3d(22px,16px,0) scale(1)}}
@keyframes echmq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.echmqrow{display:flex;white-space:nowrap;will-change:transform;}
.echmqrow span{padding-right:48px;}

/* ─── Hero variante grille animée (Planning) ─── */
.echero-grid{position:relative;overflow:hidden;}
.echero-grid>*{position:relative;z-index:1;}
.echero-grid::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:48px 48px;animation:echGrid 26s linear infinite;}
@keyframes echGrid{0%{background-position:0 0,0 0}100%{background-position:48px 48px,48px 48px}}
@keyframes echslotloop{from{transform:translateY(0)}to{transform:translateY(-50%)}}

/* ─── Planning : filtres, créneaux, grille ─── */
.ec-flabel{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#6b6364;font-weight:700;margin-bottom:9px;}
.ec-fbtn{font-family:inherit;font-size:13.5px;padding:9px 16px;border-radius:999px;cursor:pointer;transition:all .12s;border:1px solid #e4ddd6;background:#fff;color:#3a2f30;font-weight:600;}
.ec-fbtn:hover{border-color:#ff4c59;color:#d22436;}
.ec-fbtn.is-active{border:1px solid #ff4c59;background:#ff4c59;color:#fff;font-weight:700;box-shadow:0 6px 14px -6px rgba(255,76,89,.8);}
.ec4slot{transition:transform .15s,box-shadow .15s;}
.ec4slot:hover{transform:translateY(-2px);box-shadow:0 14px 26px -16px rgba(28,20,22,.4);}
@media(max-width:860px){ .ec-week{grid-template-columns:1fr !important;} }

/* ─── En-tête du site ─── */
.ec-head{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #f1e8e4;padding:14px 50px;}
.ec-head-inner{display:flex;align-items:center;gap:26px;max-width:1180px;margin:0 auto;width:100%;}
.ec-nav{display:flex;gap:20px;margin-left:6px;font-size:16px;font-weight:600;color:#3a2f30;white-space:nowrap;}
.ec-nav a:hover{color:#d22436;}
.ec-nav a.is-active{color:#d22436;}
.ec-head-actions{margin-left:auto;display:flex;align-items:center;gap:18px;}
.ec-burger{display:none;margin-left:auto;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;}
.ec-burger span{display:block;width:26px;height:2.5px;background:#1c1416;border-radius:2px;transition:transform .25s,opacity .2s;}
.ec-burger.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.ec-burger.is-open span:nth-child(2){opacity:0;}
.ec-burger.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
.ec-mobile{display:none;padding:6px 22px 22px;}
.ec-mobile.is-open{display:block;}
.ec-mobile a{display:block;padding:13px 4px;font-size:18px;font-weight:700;color:#1c1416;border-bottom:1px solid #f6efeb;}
.ec-mobile a:hover,.ec-mobile a.is-active{color:#d22436;}

/* ─── Avant-titre (overline) avec trait ─── */
.ec-eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:700;line-height:1;}
.ec-eyebrow::before{content:"";width:44px;height:2px;background:currentColor;flex:0 0 auto;border-radius:2px;}

/* ─── Pied de page ─── */
.ec-foot-h{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#ff8089;margin-bottom:16px;font-weight:700;}
.ec-foot-links{display:flex;flex-direction:column;gap:11px;font-size:14.5px;color:rgba(255,255,255,.74);}
.ec-foot-links a:hover,footer a:hover{color:#fff;}

/* ─── Héro pleine largeur à droite (le diaporama va jusqu'au bord droit ;
   le texte reste aligné sur la colonne de contenu max-width 1180) ─── */
.ec-hero-text{padding:84px 60px 80px;padding-left:max(50px, calc(50vw - 590px));}
/* Héro pleine hauteur : héro + bandeau défilant occupent l'écran (en-tête ~136px) */
.ec-hero-wrap{display:flex;flex-direction:column;min-height:calc(100vh - 136px);}

/* Signature animée inspirée du logo, en surimpression du diaporama (lignes blanches qui se dessinent) */
.ec-hero-sign{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;z-index:2;pointer-events:none;opacity:.5;filter:drop-shadow(0 2px 9px rgba(20,8,10,.34));clip-path:inset(0 100% 0 0);animation:ecSignWipe 2.4s cubic-bezier(.6,0,.2,1) .4s forwards, ecSignFloat 16s ease-in-out 2.8s infinite;}
@keyframes ecSignWipe{to{clip-path:inset(0 0 0 0);}}
@keyframes ecSignFloat{0%,100%{transform:translate3d(0,0,0) rotate(0deg);}50%{transform:translate3d(0,-10px,0) rotate(1.2deg);}}

/* ─── Responsive ─── (les maquettes sont desktop ; fallback mobile) */
@media(max-width:860px){
  .ec-head{padding:10px 18px;}
  .ec-nav{display:none;}
  .ec-head-actions{display:none;}
  .ec-cta-mini{display:inline-flex;margin-left:auto;}
  .ec-burger{display:flex;margin-left:10px;}
  .ec-hero-wrap{min-height:0 !important;}
  .ec-hero{grid-template-columns:1fr !important;grid-template-rows:auto !important;}
  .ec-hero-text{padding:52px 22px 48px !important;}
  .ec-hero-media{min-height:360px !important;}
  .ec-grid-2,.ec-grid-3{grid-template-columns:1fr !important;}
  .ec-foot-grid{grid-template-columns:1fr 1fr !important;}
  .ec-pad{padding-left:22px !important;padding-right:22px !important;}
  h1{font-size:46px !important;}
  h2{font-size:34px !important;}
}
@media(max-width:520px){
  .ec-foot-grid{grid-template-columns:1fr !important;}
  h1{font-size:38px !important;}
}

/* ─── Accessibilité ─── */
:focus-visible{outline:2px solid #d22436;outline-offset:2px;border-radius:3px;}
.ec4in:focus-visible{outline:none;} /* les champs gardent leur anneau corail (.ec4in:focus) */
.ec-skip{position:absolute;left:8px;top:-60px;z-index:300;background:#1c1416;color:#fff;font-weight:700;font-size:14px;padding:11px 18px;border-radius:0 0 12px 12px;transition:top .18s ease;}
.ec-skip:focus{top:0;}
.ec-cta-mini{display:none;}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  /* Diaporama figé sur la 1re photo (sinon le keyframe au repos = opacité 0 = héro vide) */
  .ec-hero-media img{opacity:0 !important;transform:none !important;}
  .ec-hero-media img:first-of-type{opacity:1 !important;}
}