/* Page Séances apnée (FR /apnee/, EN /freediving/).
   La page suit le profil d’une plongée : surface, descente, grand bleu, remontée, retour à la surface pour réserver.
   Pensée d’abord pour le téléphone : la plupart des apnéistes arrivent depuis Instagram ou WhatsApp. */

/* Ouverture --------------------------------------------------------------------------------- */
.ouverture{padding-top:calc(var(--bar-h) + clamp(40px,6vw,96px))}
.ouverture .grid{align-items:end;row-gap:32px}
.ouverture__texte{grid-column:1/6;padding-bottom:.4em}
.ouverture__photo{grid-column:6/13}
.ouverture__lieu{color:var(--note)}
.ouverture h1{margin-top:22px;font:300 clamp(3rem,5.4vw,6rem)/.92 var(--display);letter-spacing:-.018em}
.ouverture h1 em{font-weight:300}
.ouverture h1 .line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.ouverture h1 .line>span{display:block}
.ouverture__lede{margin-top:clamp(22px,2.4vw,34px);max-width:30em}

/* Descente : sur la ligne ------------------------------------------------------------------------ */
.ligne .grid{row-gap:28px;margin-bottom:clamp(56px,7vw,104px)}
.ligne .h2{grid-column:1/7}
.ligne .body{grid-column:7/12;padding-top:.6em}

/* Grand bleu : les formules ----------------------------------------------------------------------- */
.formules .grid.head{row-gap:28px}
.formules .h2{grid-column:1/7}
.formules .head .body{grid-column:7/12;padding-top:.6em}
.offres{list-style:none;margin:clamp(56px,7vw,104px) 0 0;padding:0;border-top:1px solid var(--trait)}
.offre{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:14px;align-items:baseline;padding:clamp(30px,3.4vw,48px) 0;border-bottom:1px solid var(--trait)}
.offre>.label{grid-column:1/3;color:var(--note)}
.offre h3{grid-column:3/8;font:300 clamp(1.9rem,3.1vw,2.9rem)/1.04 var(--display);letter-spacing:-.008em}
.offre h3 em{font-weight:300}
.offre__detail{grid-column:8/13}
.offre__detail p{max-width:30em}
.offre__detail .lien{margin-top:18px}
.formules .apres{margin-top:28px;max-width:46em}

/* Remontée : déroulement et questions ------------------------------------------------------------- */
.etapes{list-style:none;margin:clamp(56px,7vw,104px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px var(--gutter)}
.etape{border-top:1px solid var(--trait);padding-top:24px}
.etape__n{display:block;color:var(--note)}
.etape h3{margin:20px 0 10px;font:400 clamp(1.6rem,2.2vw,2rem)/1.12 var(--display)}
.etape p{max-width:26em}
.faq{margin-top:clamp(80px,10vw,150px);row-gap:20px}
.faq>.label{grid-column:1/4;color:var(--note);padding-top:26px}
.faq__liste{grid-column:4/11}
.faq details{border-top:1px solid var(--trait)}
.faq details:last-child{border-bottom:1px solid var(--trait)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;cursor:pointer;list-style:none;font:400 clamp(1.3rem,1.8vw,1.6rem)/1.25 var(--display);-webkit-tap-highlight-color:transparent}
.faq summary::-webkit-details-marker{display:none}
.plus{position:relative;flex:none;width:14px;height:14px}
.plus::before,.plus::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform 420ms var(--ease-out)}
.plus::after{transform:rotate(90deg)}
.faq details[open] .plus::after{transform:rotate(0deg)}
.faq details p{padding:0 0 24px;max-width:38em;color:var(--note)}

/* Surface : réserver ------------------------------------------------------------------------------- */
.reserver{padding-top:calc(var(--section) + clamp(18px,2.4vw,34px))}
.vague{position:absolute;left:0;top:-1px;width:100%;height:clamp(18px,2.4vw,34px);overflow:hidden;pointer-events:none;transform:scaleY(-1)}
.vague svg{display:block;width:200%;height:100%;fill:var(--recif)}
.reserver.is-active .vague svg{animation:houle 7s linear infinite}
.reserver .grid{row-gap:56px;align-items:start}
.reserver__intro{grid-column:1/6;position:sticky;top:calc(var(--bar-h) + 6vh)}
.reserver__intro .body{margin-top:clamp(26px,2.8vw,40px)}
.autres{list-style:none;margin:clamp(32px,3.4vw,48px) 0 0;padding:0;display:grid;gap:16px}
.autres .label{display:block;color:var(--note);margin-bottom:4px}
.autres a{font:400 1.375rem/1.25 var(--display);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size 420ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.autres a:hover{background-size:100% 1px}}

.resa{grid-column:7/13;scroll-margin-top:calc(var(--bar-h) + 24px)}
.resa form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px var(--gutter)}
.champ{display:grid;gap:8px;grid-column:1/-1;min-width:0}
.champ.demi{grid-column:span 1}
.champ>.label,.choix legend{color:var(--note)}
.champ .opt{font-weight:500;letter-spacing:.12em;opacity:.8}
.resa input:not([type=radio]):not([type=checkbox]),.resa textarea{width:100%;margin:0;padding:10px 0 11px;border:0;border-bottom:1px solid var(--trait);border-radius:0;background:transparent;color:inherit;font:400 1rem/1.5 var(--text);-webkit-appearance:none;appearance:none;transition:border-color 200ms ease,box-shadow 200ms ease}
.resa textarea{min-height:7.5em;resize:vertical}
.resa input::placeholder,.resa textarea::placeholder{color:color-mix(in oklab,var(--encre) 46%,transparent)}
.resa input:not([type=radio]):not([type=checkbox]):focus-visible,.resa textarea:focus-visible{outline:none;border-bottom-color:var(--ouakari);box-shadow:0 1px 0 var(--ouakari)}
.resa input:user-invalid{border-bottom-color:var(--ouakari)}
.choix{grid-column:1/-1;margin:0;padding:0;border:0;min-width:0}
.choix legend{padding:0;margin-bottom:14px}
.choix__opts{display:flex;flex-wrap:wrap;gap:8px}
.choix label{position:relative;display:flex;cursor:pointer;-webkit-tap-highlight-color:transparent}
.choix input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.choix span{flex:1;display:flex;align-items:center;justify-content:center;padding:13px 16px;border:1px solid var(--trait);font:600 var(--t-label)/1.2 var(--text);letter-spacing:.16em;text-transform:uppercase;transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease,transform 140ms var(--ease-out)}
.choix label:active span{transform:scale(.97)}
.choix input:checked+span{background:var(--encre);border-color:var(--encre);color:var(--pale)}
.choix input:focus-visible+span{outline:2px solid var(--ouakari);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.choix input:not(:checked)+span:hover{border-color:var(--encre)}}
.pot{position:absolute;left:-9999px}

/* Dates : calendrier (ou deux champs date sans JavaScript) */
.dates{border:0;margin:0;padding:0}
.dates legend{padding:0;margin-bottom:14px}
.dates__natives{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter)}
.dates__natives label{display:grid;gap:8px}
.dates__natives .label{color:var(--note)}
.cal{border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);padding:10px 0 14px}
.cal__tete{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cal__mois{font:400 1.5rem/1 var(--display);letter-spacing:-.005em}
.cal__nav{display:grid;place-items:center;width:44px;height:44px;background:none;border:0;padding:0;cursor:pointer;transition:opacity 200ms ease,transform 140ms var(--ease-out)}
.cal__nav svg{width:14px;height:12px}
.cal__nav:active:not(:disabled){transform:scale(.92)}
.cal__nav:disabled{opacity:.25;cursor:default}
.cal__jours,.cal__grille{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal__jours{margin-top:6px}
.cal__jours span{padding:10px 0 8px;text-align:center;font:600 var(--t-label)/1 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--note)}
.cal__j{position:relative;height:46px;margin:0;padding:0;border:0;background:transparent;color:inherit;font:500 .9375rem/1 var(--text);font-variant-numeric:tabular-nums;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color 160ms ease,color 160ms ease}
.cal__j:disabled{opacity:.28;cursor:default}
.cal__j.is-today::after{content:"";position:absolute;left:50%;bottom:8px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.cal__j.is-range{background:color-mix(in oklab,var(--encre) 10%,transparent)}
.cal__j.is-preview{background:color-mix(in oklab,var(--encre) 6%,transparent)}
.cal__j.is-preview-end{box-shadow:inset 0 0 0 1px var(--encre)}
.cal__j.is-start,.cal__j.is-end{background:var(--encre);color:var(--pale)}
.cal__j:focus-visible{outline-offset:-2px;z-index:1}
@media (hover:hover) and (pointer:fine){.cal__j:not(:disabled):not(.is-start):not(.is-end):hover{box-shadow:inset 0 0 0 1px var(--encre)}}
.cal__pied{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:12px;min-height:1.6em}
.cal__choix{font-size:var(--t-small);line-height:1.5;color:var(--note)}
.cal.is-invalid .cal__choix{color:var(--ouakari-fort);font-weight:500}
.cal__effacer{flex:none}
.souple{display:inline-flex;align-items:center;gap:12px;margin-top:16px;cursor:pointer;font-size:var(--t-small)}
.souple input{-webkit-appearance:none;appearance:none;flex:none;width:18px;height:18px;margin:0;border:1px solid color-mix(in oklab,var(--encre) 55%,transparent);border-radius:0;display:grid;place-items:center;cursor:pointer;transition:background-color 160ms ease}
.souple input::after{content:"";width:9px;height:5px;border:solid var(--pale);border-width:0 0 1.5px 1.5px;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform 200ms var(--ease-out)}
.souple input:checked{background:var(--encre);border-color:var(--encre)}
.souple input:checked::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.envoi{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.envoi .note{max-width:24em}
.btn[aria-busy="true"]{opacity:.7;cursor:progress}
.resa__statut:empty{display:none}
.resa__statut{grid-column:1/-1;padding:16px 18px;background:color-mix(in oklab,var(--ouakari) 10%,transparent);font-size:var(--t-small);line-height:1.6}
.resa__statut a{font-weight:600}
.merci{display:none}
.resa.is-sent form{display:none}
.resa.is-sent .merci{display:block}
.merci h3{font:300 clamp(2.2rem,3.6vw,3.4rem)/1 var(--display)}
.merci p{margin-top:20px;max-width:30em}
.merci:focus{outline:none}

/* Pied de page -------------------------------------------------------------------------------------- */
.pied{padding-top:clamp(64px,8vw,120px);padding-bottom:max(28px,env(safe-area-inset-bottom,0px))}
.pied .grid{row-gap:28px;align-items:end}
.pied__nom{grid-column:1/6;font:300 clamp(2.2rem,3.6vw,3.4rem)/1 var(--display)}
.pied__liens{grid-column:7/13;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:flex-end}
.colophon{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;margin-top:clamp(56px,7vw,96px)}

/* Bouton de réservation flottant (téléphone) ------------------------------------------------------------ */
.flottant{position:fixed;z-index:30;left:var(--side-l);right:var(--side-r);bottom:calc(12px + env(safe-area-inset-bottom,0px));justify-content:center;box-shadow:0 14px 34px -12px rgba(4,19,31,.55);transform:translateY(calc(100% + 28px));visibility:hidden;transition:transform 420ms var(--ease-out),visibility 0s linear 420ms}
.flottant.is-on{transform:none;visibility:visible;transition:transform 520ms var(--ease-out),visibility 0s}
@media (min-width:761px){.flottant{display:none}}

/* Mouvement ----------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  /* À l’ouverture, la photo se dévoile vers le bas (on est sous la surface) et le titre monte ligne à ligne. */
  .js .ouverture__photo .photo{animation:devoile 1400ms var(--ease-water) 150ms both}
  .js .ouverture h1 .line>span{transform:translateY(108%);animation:line-up 1000ms var(--ease-out) forwards;animation-delay:calc(var(--i) * 120ms + 450ms)}
  .js .ouverture [data-rise]{opacity:0;transform:translateY(14px);animation:rise 900ms var(--ease-out) forwards;animation-delay:calc(var(--i) * 100ms + 700ms)}
  .js .merci{animation:rise 700ms var(--ease-out) both}
  @supports (interpolate-size:allow-keywords){
    .faq{interpolate-size:allow-keywords}
    .faq details::details-content{height:0;overflow:clip;transition:height 460ms var(--ease-out),content-visibility 460ms allow-discrete}
    .faq details[open]::details-content{height:auto}
  }
}
@keyframes devoile{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@media (prefers-reduced-motion:reduce){
  .flottant,.flottant.is-on{transition:visibility 0s}
  .flottant{transform:none;opacity:0}
  .flottant.is-on{opacity:1}
}

/* Écrans moyens ------------------------------------------------------------------------------------------- */
@media (max-width:1100px){
  .offre>.label{grid-column:1/-1}
  .offre h3{grid-column:1/7}
  .offre__detail{grid-column:7/13}
  .faq>.label{grid-column:1/-1;padding-top:0}
  .faq__liste{grid-column:1/-1}
}

/* Téléphone ----------------------------------------------------------------------------------------------- */
@media (max-width:760px){
  .ouverture{padding-top:var(--bar-h);padding-bottom:72px}
  .ouverture .grid{row-gap:34px}
  .ouverture__photo{order:-1;margin-inline:calc(-1 * var(--side-l)) calc(-1 * var(--side-r))}
  .ouverture__photo figcaption{padding-inline:var(--side-l) var(--side-r)}
  .ouverture h1{font-size:clamp(2.9rem,13.4vw,4.4rem);margin-top:16px}
  .ouverture .actions .btn{flex:1 1 100%;justify-content:center}

  .offre{grid-template-columns:minmax(0,1fr)}
  .offre>*{grid-column:1/-1!important}
  .offre h3{margin-top:4px}
  .etapes{grid-template-columns:minmax(0,1fr)}

  .reserver__intro{position:static}
  .resa form{grid-template-columns:minmax(0,1fr);gap:30px}
  .champ.demi{grid-column:1/-1}
  .choix__opts label{flex:1 1 calc(50% - 4px)}
  .choix span{text-align:center;padding:15px 10px}
  .envoi .btn{flex:1 1 100%;justify-content:center}

  .pied__liens{justify-content:flex-start}
  .pied{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}