:root{--deep:#071f30;--ink:#103144;--teal:#8fe4d7;--coral:#fc7768;--paper:#f7f8f4;--nav:72px}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.65 system-ui,sans-serif}html{scroll-behavior:smooth;scroll-padding-top:85px}a{color:inherit}img{display:block;width:100%;object-fit:cover}figure,p{margin:0}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--coral);outline-offset:4px}.skip{position:fixed;left:12px;top:-100px;background:white;padding:10px;z-index:10}.skip:focus{top:10px}.wrap{width:min(1180px,calc(100% - 88px));margin-inline:auto}
.header{height:var(--nav);position:sticky;top:0;z-index:5;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 clamp(18px,4vw,62px);box-shadow:0 2px 16px #071f3015}.logo{width:168px;height:auto;object-fit:contain}.header nav{display:flex;align-items:center;gap:clamp(10px,2vw,28px);font-size:.85rem;font-weight:650}.header details{position:relative}.header summary{cursor:pointer;white-space:nowrap}.menu-links{position:absolute;top:36px;left:0;min-width:210px;background:#fff;border-radius:10px;padding:8px;box-shadow:0 7px 26px #071f3030}.menu-links a{display:block;padding:7px 10px;text-decoration:none}.menu-links a:hover{background:#e9f6f3;border-radius:5px}.toggle{display:none}.book,.ghost{display:inline-flex;align-items:center;min-height:46px;padding:10px 19px;border-radius:6px;text-decoration:none;font-weight:750;font-size:.88rem;white-space:nowrap}.book{background:var(--teal);color:var(--deep)}.book:hover{background:#b8f6ed}.ghost{border:1px solid #ffffff85;color:#fff}.ghost:hover{background:#ffffff20}
.hero{min-height:min(670px,85svh);position:relative;display:flex;align-items:center;background:#10394c;color:white;isolation:isolate}.hero picture,.hero picture img,.hero::after{position:absolute;inset:0;width:100%;height:100%;z-index:-1}.hero picture img{object-position:center 52%}.hero::after{content:"";background:linear-gradient(90deg,#051824ed,#051824a8 38%,#05182415 84%),linear-gradient(0deg,#05182466,transparent 45%)}.hero-inner{padding-block:65px 75px}.eyebrow{font-size:.76rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:12px}.eyebrow span{background:var(--coral);width:23px;height:2px}.hero h1,h2{font-family:Georgia,serif;font-weight:400;letter-spacing:-.045em;line-height:1}.hero h1{font-size:clamp(4rem,9.7vw,9rem);margin:15px 0 20px}.hero h1 span{color:var(--coral)}.lead{font-size:clamp(1rem,1.7vw,1.25rem);max-width:38ch;color:#eef8f8}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:25px}.hero-caption{position:absolute;bottom:15px;right:25px;font-size:.72rem;color:#e3f0f0}
h2{font-size:clamp(2.6rem,6vw,5rem);margin:12px 0 20px}h3{line-height:1.2;font-size:1.35rem;margin:8px 0 10px}.intro,.webcam-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,8vw,105px);align-items:center;padding-block:82px}.intro figure img,.webcam img{aspect-ratio:1.52;border-radius:10px}.intro figcaption{font-size:.75rem;margin-top:8px}.arrow{display:inline-block;text-underline-offset:4px;margin-top:15px;font-weight:700;font-size:.9rem}
.activities{background:#e7efed;padding-block:75px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}.cards article{background:white;overflow:hidden;border-radius:10px}.cards img{aspect-ratio:1.75}.cards article div{padding:22px}.cards small{color:#3e6667;letter-spacing:.08em;text-transform:uppercase;font-weight:700}.rates{margin-top:24px}.gallery{padding-block:75px}.mosaic{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:12px;margin:30px 0 5px}.mosaic button{background:#10394c;border:0;padding:0;border-radius:8px;overflow:hidden}.mosaic img{height:100%;aspect-ratio:1.35;transition:transform .22s}
.webcam{background:var(--deep);color:white}.webcam .book{margin-top:20px}footer{padding-block:40px;background:#fff}.footer-inner{display:grid;align-items:end;grid-template-columns:1.15fr 1fr 1fr;gap:24px}.footer-inner a{display:block;width:fit-content;text-decoration:none}.footer-inner p{margin-top:12px}dialog{background:var(--deep);border:0;padding:0;max-width:min(1000px,95vw);border-radius:8px}dialog img{max-height:86vh;object-fit:contain}dialog::backdrop{background:#03121be0}dialog button{position:absolute;right:10px;top:10px;border:0;border-radius:100%;background:white;width:44px;height:44px;font-size:1.6rem}
@media(max-width:980px){.toggle{display:inline-flex;gap:10px;align-items:center;background:#edf5f4;border:0;border-radius:5px;padding:7px 11px;color:var(--deep);margin-left:auto}.header nav{display:none;position:absolute;inset:var(--nav) 0 auto;background:white;padding:12px 24px 22px;max-height:75vh;overflow:auto;box-shadow:0 12px 25px #071f3020}.header nav.open{display:block}.header summary{padding:9px 0}.menu-links{position:static;box-shadow:none;padding:0 0 4px 12px}}
@media(max-width:650px){:root{--nav:62px}.wrap{width:calc(100% - 36px)}.header{gap:8px}.logo{width:113px}.top-book{padding-inline:9px;min-height:36px}.hero{min-height:575px}.hero::after{background:linear-gradient(90deg,#051824d9,#0518244d),linear-gradient(0deg,#0518248c,transparent 55%)}.hero h1{font-size:clamp(3.5rem,15vw,6rem)}.intro,.webcam-inner,.cards,.footer-inner{grid-template-columns:1fr}.intro,.webcam-inner,.activities,.gallery{padding-block:48px}.mosaic{grid-template-columns:1fr 1fr}.mosaic button:first-child{grid-column:1/-1}.actions{gap:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

.intro figure img,.webcam img{object-position:74% center}

.page-hero{position:relative;isolation:isolate;background:var(--deep);color:white}
.page-hero .wrap{padding-block:25px 55px}
.page-hero.has-photo .wrap{padding-bottom:75px}
.page-photo,.page-hero.has-photo::after{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.page-photo{object-position:center 41%}
.page-hero.has-photo::after{content:"";background:linear-gradient(90deg,#051824f2,#051824b5 46%,#05182435)}
.breadcrumb{display:flex;gap:10px;color:#dcebea;font-size:.83rem;margin-bottom:32px}
.page-hero h1{font:400 clamp(2.9rem,8vw,6.8rem)/.98 Georgia,serif;letter-spacing:-.045em;margin:13px 0 18px}
.page-hero h1 span{color:var(--coral)}
.page-block{max-width:960px;padding-block:clamp(34px,6vw,72px)}
.dive-intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,6vw,72px);align-items:start}
.practical{background:#e7efed;padding:clamp(15px,3vw,24px);border-radius:10px}
.practical ul{margin:0;padding-inline-start:20px}
.practical li+li{margin-top:8px}
.soft{background:#e7efed}
.end-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.price-jump{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.price-jump a{background:#e7efed;border-radius:5px;padding:7px 12px;font-weight:700;font-size:.88rem;text-decoration:none}
.price-jump a:hover{background:var(--teal)}
.price-group,.documents{margin-top:42px}
.price-group h2,.documents h2{font-size:clamp(2.2rem,5vw,3.7rem)}
.price-group>p{max-width:68ch;margin-bottom:15px}
@media(min-width:901px){.prices .price-group>p{max-width:none}}
.price-table{border-collapse:separate;border-spacing:0;width:100%;background:white;border:1px solid #cfdfdd;border-radius:8px;overflow:hidden;font-size:.97rem}
.price-table th,.price-table td{padding:10px clamp(10px,2vw,19px);text-align:left;vertical-align:top}
.price-table thead{background:var(--deep);color:white;font-size:.82rem}
.price-table thead th:last-child,.price-table td{text-align:right;white-space:nowrap;font-weight:750}
.price-table tbody tr+tr>*{border-top:1px solid #e1ebe9}
.price-table tbody th{font-weight:700}
.price-table th span{display:block;font-size:.86rem;font-weight:400}
.table-note{margin-top:8px;font-size:.83rem}
.documents a{display:block;width:fit-content;margin-top:8px;text-decoration:none}
@media(max-width:650px){.dive-intro{grid-template-columns:1fr}.page-hero.has-photo .wrap{padding-bottom:48px}.page-hero.has-photo::after{background:#051824a8}.price-table th span{font-size:.8rem}}

.practice-image img{border-radius:10px}
.practice-image figcaption{margin-top:8px;font-size:.8rem}
.practice-map{background:white;border-radius:10px;padding:12px}
.practice-map img{width:auto;max-width:100%;max-height:560px;margin-inline:auto;object-fit:contain}
.practice-cards article{border:1px solid #d5e4e1}

.dive-intro p+p,.practice-cards p+p,.original-copy p+p{margin-top:.8em}
.original-copy p{max-width:70ch}

.centre-copy+.centre-copy{margin-top:clamp(30px,6vw,60px);padding-top:24px;border-top:1px solid #cfdfdd}
.centre-copy h2{font-size:clamp(2rem,5vw,3.65rem)}
.centre-copy h2.directions-heading{font-size:clamp(2rem,4.6vw,3.35rem)}
.centre-copy p+p{margin-top:.85em}
.centre-plan,.centre-boat img{width:auto;max-width:100%;max-height:540px;object-fit:contain;border-radius:8px}
.centre-plan,.centre-boat{margin-bottom:18px}

.training-body .centre-copy p{max-width:68ch}
.training-detail.with-visual{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(20px,4vw,40px);align-items:start}
.training-visual img,.training-extra img{width:auto;max-width:100%;max-height:240px;object-fit:contain;border-radius:8px}
.training-extra{margin-top:16px}
.training-visual img[src*="/diplome-plongeur-"]{width:100%;height:auto}
@media(max-width:650px){.training-detail.with-visual{grid-template-columns:1fr}}

.finish-wide{max-width:1100px}
.finish-figure{margin-block:14px}
.finish-figure img{width:auto;max-width:100%;max-height:280px;object-fit:contain;border-radius:8px}
.finish-grid,.finish-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-block:18px}
.finish-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}
.gallery-photo{display:block;border-radius:8px;overflow:hidden;background:#e7efed}
.gallery-photo img{aspect-ratio:4/3;transition:transform .2s}

.video-card,.finish-partners a,.contact-reference{background:white;border:1px solid #d5e4e1;border-radius:8px}
.video-card{padding:10px}
.video-card iframe,.webcam-frame{display:block;width:100%;border:0;aspect-ratio:16/9;border-radius:6px;background:var(--deep)}
.finish-partners{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.finish-partners a{padding:8px 12px;margin:0}
.centre-copy h3:not(:first-child){margin-top:22px}
@media(max-width:650px){.finish-grid{grid-template-columns:1fr}.finish-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gift-card-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.gift-card-grid .finish-figure{margin:0}
.gift-card-grid img{width:100%;height:auto;margin-inline:auto}
@media(max-width:800px){.gift-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:480px){.gift-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.intro figure img.port-panorama{aspect-ratio:auto}

.webcam-preview{overflow:hidden;border-radius:10px}
.webcam-preview img{aspect-ratio:auto;transform:scale(1.018)}

.page-photo.cadre-photo{object-position:35% 72%}

.cadre-illustrated{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,4vw,40px);align-items:center}
.cadre-illustrated img{height:auto;border-radius:8px}
@media(max-width:650px){.cadre-illustrated{grid-template-columns:1fr}}

.page-photo.bapteme-photo{object-position:58% 49%}

.finish-partners{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr))}
.finish-partners a,.contact-reference{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;min-height:90px}
.finish-partners img{width:100%;max-width:96px;height:46px;object-fit:contain}

.contact-reference{padding:8px 12px;font-size:.9rem;font-weight:700}

.voyage-illustration{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,230px);gap:24px;align-items:start;margin-top:24px}
.voyage-illustration img{height:auto;border-radius:8px}
@media(max-width:650px){.voyage-illustration{grid-template-columns:1fr;gap:12px}.voyage-illustration figure{max-width:300px}}

.page-photo.corse-photo{object-position:center 50%}

.corse-faune-photo{filter:brightness(1.10)}

.corse-relief-photos{display:grid;gap:16px}
.corse-relief-photos img{height:auto}

.page-photo.installations-photo{object-position:center 38%}

.page-photo.tarifs-photo{object-position:center 61%}

.page-photo.galerie-photo{object-position:58% 50%}

.page-photo.videos-photo{object-position:38% 58%}

.weather-frame{display:block;width:100%;border:0;border-radius:6px}

.ghost.webcam-cta{background:var(--coral);border-color:var(--coral);color:var(--deep)}

/* Navigation principale */
.header .logo { width: 180px; }
.header nav { gap: clamp(12px, 1.6vw, 24px); font-size: .92rem; }
.header summary {
  display: flex;
  align-items: center;
  gap: .55em;
  list-style: none;
  padding-block: 9px;
}
.header summary::-webkit-details-marker { display: none; }
.header .menu-label,
.header nav > a { position: relative; }
.header .menu-label::after,
.header nav > a::after {
  content: "";
  position: absolute;
  inset: auto 0 -4px;
  height: 2px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.header details[open] .menu-label::after,
.header details.is-current .menu-label::after,
.header summary:focus-visible .menu-label::after,
.header nav > a:is(:focus-visible, [aria-current="page"])::after { transform: scaleX(1); }
@media (hover: hover) {
  .header summary:hover .menu-label::after,
  .header nav > a:hover::after { transform: scaleX(1); }
}
.header nav > a { text-decoration: none; }
.header summary:hover,
.header nav > a:hover,
.footer-inner a:hover,
main p a:hover,
.documents a:hover { color: #376873; }
main p a,.documents a { font-weight: 700; text-decoration: none; }
.header .menu-links {
  box-shadow: 0 8px 24px #071f301a, 0 2px 6px #071f300d;
}
.header .menu-links a {
  padding: 9px 10px;
  border-left: 2px solid transparent;
  border-radius: 4px;
}
.header .menu-links a[aria-current="page"] {
  background: #e9f6f3;
  border-left-color: var(--coral);
  font-weight: 750;
}
.header .menu-links a[aria-current="page"]:hover { background: #def2ee; }
@supports selector(details::details-content) {
  .header details::details-content {
    opacity: 0;
    transition: opacity .16s ease, content-visibility .16s allow-discrete;
  }
  .header details[open]::details-content { opacity: 1; }
  .header details:not([open])::details-content { pointer-events: none; }
}
@media (min-width: 981px) {
  .header .menu-links { top: 100%; }
}
@media (max-width: 980px) {
  .header summary { justify-content: space-between; }
  .header .menu-links { box-shadow: none; }
}
@media (max-width: 650px) {
  .header .logo { width: clamp(100px, 31vw, 121px); }
}

.enfant-hero .page-photo { object-position: center 39%; }
.enfant-photo-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 2vw, 20px);
  margin-top: 16px;
}
.enfant-photo-pair .training-extra { margin: 0; }
.enfant-photo-pair img { width: 100%; height: auto; max-height: none; }

@media (width > 650px) {
  main p:not(.eyebrow, .hero-caption, .table-note) { text-align: justify; }
}

.footer-icons { display: grid; gap: 4px; }
.footer-inner .footer-icons a {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 28px;
  font-size: .875rem;
}
.footer-icons svg { width: 18px; height: 18px; color: var(--coral); flex: 0 0 18px; }

.contact-hero .page-photo { object-position: center 48%; }

.price-table .tarif-saison { color: var(--coral); }

.bapteme-age { color: var(--coral); }


@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  main img:not(.hero img, .page-hero img, dialog img) {
    transition: scale .22s ease;
  }
  main img:not(.hero img, .page-hero img, dialog img):hover,
  main :is(a, button):hover img:not(.hero img, .page-hero img, dialog img) {
    scale: 1.045;
  }
}

.page-photo.equipements-photo { object-position: center 43%; }

.installations-books figure { mix-blend-mode: multiply; }

.installations-books img {
  max-width: 180px;
  height: auto;
  margin-inline: auto;
  object-fit: contain;
}

.station-gonflage-photo { width: 100%; max-width: 380px; justify-self: center; }

.formation-hero { overflow: hidden; }
.formation-hero-art {
  position: absolute;
  z-index: -1;
  right: clamp(-100px, calc(10vw - 140px), 40px);
  top: 50%;
  width: clamp(330px, 58vw, 820px);
  transform: translateY(-50%) rotate(12deg);
  mix-blend-mode: screen;
  opacity: .24;
  pointer-events: none;
}
.formation-hero-art img {
  width: 100%;
  height: auto;
  filter: grayscale(1) invert(1) contrast(1.8);
}
@media (max-width: 650px) {
  .formation-hero-art { opacity: .17; }
}

.formation-hero-art img[src$="formation-ssi-logo.svg"] { filter: brightness(0) invert(1); }

.encadrant-body { container-type: inline-size; }
.encadrant-body :is(.training-visual, .training-extra) img {
  width: min(100%, 325px);
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
@media (min-width: 651px) {
  .encadrant-body :is(.training-visual, .training-extra) img {
    width: min(325px, calc((100cqw - clamp(20px, 4vw, 40px)) / 3));
  }
}
