/* Boule de Gomme — feuille de style du site (design "Accueil B", self-hosted). */
@import url("fonts.css");

/* ============ Base (issu du design) ============ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:#fff;}

.ph{background-image:repeating-linear-gradient(45deg,rgba(58,42,34,0.06) 0 11px,rgba(58,42,34,0.025) 11px 22px);display:flex;align-items:center;justify-content:center;}
.ph span{font-family:'Courier New',monospace;font-size:11px;letter-spacing:.03em;color:rgba(58,42,34,.5);text-transform:uppercase;padding:4px 8px;text-align:center;line-height:1.5;}
@keyframes spinB{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.nav-links a{color:#55362A;text-decoration:none;}
.nav-links a:hover{color:#E6007E;}
.menu-btn{display:none;}

@media(max-width:860px){
  .nav-links{display:none !important;}
  .menu-btn{display:flex !important;}
  .col2{grid-template-columns:1fr !important;}
  .col3{grid-template-columns:1fr !important;}
  .col4{grid-template-columns:1fr 1fr !important;}
  .hero-grid{grid-template-columns:1fr !important;}
  .h1{font-size:36px !important;}
  .h2{font-size:28px !important;}
  .pad-x{padding-left:22px !important;padding-right:22px !important;}
}

@keyframes auroraA{0%{background-position:0% 50%;}100%{background-position:200% 50%;}}
@keyframes auroraB{0%{background-position:0% 50%;}100%{background-position:-200% 50%;}}
.aurora-wrap{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;}
.aurora{
  position:absolute;inset:-16px;opacity:0.55;will-change:transform,background-position;
  background-image:repeating-linear-gradient(100deg,#31B6B2 0%,#7fd6d3 8%,#FFE900 16%,#f7a8cf 24%,#E6007E 32%,#31B6B2 40%);
  background-size:200% 200%;
  filter:blur(42px) saturate(1.2);
  animation:auroraA 18s linear infinite;
}
.aurora::after{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(72deg,#31B6B2 0%,#FFE900 14%,#E6007E 28%,#7fd6d3 42%,#31B6B2 56%);
  background-size:220% 200%;
  filter:blur(38px);
  mix-blend-mode:screen;opacity:0.6;
  animation:auroraB 13s linear infinite;
}

.ph img{transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.ph:hover img{transform:scale(1.06);}

#prog{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,#31B6B2,#FFE900,#E6007E);z-index:100;}

.nav-links a{position:relative;transition:color .25s ease;padding:6px 2px;}
.nav-links a:not(:last-child)::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2.5px;border-radius:2px;background:linear-gradient(90deg,#31B6B2,#E6007E);transition:right .3s cubic-bezier(.4,.8,.3,1);}
.nav-links a:not(:last-child):hover::after{right:0;}
.nav-links a.active{color:#E6007E;}
.nav-links a.active:not(:last-child)::after{right:0;background:#E6007E;}

.nav-cta{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(230,0,126,0.32);}

/* primary button slide-up reveal */
.btn-rise{position:relative;overflow:hidden;display:inline-block;}
.btn-rise .l1{display:inline-block;transition:transform .36s cubic-bezier(.4,.85,.3,1),opacity .36s;}
.btn-rise:hover .l1{transform:translateY(-160%);opacity:0;}
.btn-rise .l2{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#31B6B2;color:#fff;transform:translateY(105%);transition:transform .36s cubic-bezier(.4,.85,.3,1);border-radius:inherit;}
.btn-rise:hover .l2{transform:translateY(0);}

/* custom cursor */
@media (hover:hover) and (pointer:fine){
  *{cursor:none !important;}
  .cur{position:fixed;top:0;left:0;z-index:300;pointer-events:none;border-radius:50%;mix-blend-mode:difference;}
  #cur-ring{width:36px;height:36px;border:2px solid #fff;transform:translate(-50%,-50%);transition:width .28s cubic-bezier(.3,.8,.3,1),height .28s cubic-bezier(.3,.8,.3,1),background .28s,opacity .25s;}
  #cur-dot{width:7px;height:7px;background:#fff;transform:translate(-50%,-50%);transition:opacity .2s;}
  #cur-ring.hl{width:64px;height:64px;background:rgba(255,255,255,0.85);border-color:transparent;}
  #cur-ring.hl ~ #cur-dot,#cur-dot.hide{opacity:0;}
  #cur-ring.press{width:28px;height:28px;}
}

/* ============ Onglets « journée type » (ex-runtime DC, ré-implémenté en CSS+JS) ============ */
.tab-btn{padding:13px 26px;border-radius:12px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:16px;border:none;cursor:pointer;background:#fff;color:#6b5a50;transition:background .2s ease,color .2s ease;}
.tab-btn.is-on{background:#E6007E;color:#fff;}
.day-panel[hidden]{display:none;}

/* ============ Accessibilité ============ */
:focus-visible{outline:3px solid #31B6B2;outline-offset:2px;border-radius:6px;}
.skip-link{position:absolute;left:-9999px;top:0;z-index:400;background:#E6007E;color:#fff;padding:12px 18px;border-radius:0 0 10px 0;font-family:'Fredoka',sans-serif;font-weight:600;text-decoration:none;}
.skip-link:focus{left:0;}

/* ============ Menu mobile (le bouton « Menu » du design est rendu fonctionnel) ============ */
.menu-btn{align-items:center;justify-content:center;}
@media(max-width:860px){
  header.nav-open .nav-links{
    display:flex !important;flex-direction:column;align-items:flex-start;gap:6px;
    position:absolute;left:0;right:0;top:100%;
    background:#fff;border-bottom:3px solid #f3f1ee;
    padding:14px 22px 20px;box-shadow:0 16px 30px rgba(85,54,42,0.10);
  }
  header.nav-open .nav-links a{width:100%;padding:10px 2px;}
  header.nav-open .nav-links a.nav-cta{width:auto;margin-top:4px;}
}

/* ============ prefers-reduced-motion : on coupe toute l'animation ============ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important;transition:none !important;}
  .aurora{display:none;}
  .ph:hover img{transform:none;}
}