/* French Riviera Kayak Fishing : feuille de style du site public.
   Polices auto-hébergées (SIL Open Font License 1.1). Aucune ressource externe. */

@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-condensed-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-condensed-600-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:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-condensed-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-condensed-700-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:'Source Sans 3';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/source-sans-3-400-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/source-sans-3-400-italic-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:'Source Sans 3';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/source-sans-3-var-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/source-sans-3-var-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}
/* Polices de secours ajustées pour limiter les sauts de mise en page */
@font-face{font-family:'Barlow Condensed Fallback';src:local('Arial Narrow'),local('ArialNarrow'),local('Arial');size-adjust:84%;ascent-override:118%;descent-override:30%}
@font-face{font-family:'Source Sans Fallback';src:local('Arial'),local('Helvetica');size-adjust:93%;ascent-override:110%;descent-override:30%}

:root {
  --marine: #043862;
  --mer: #08517D;
  --ocean: #0F7AA6;
  --lagon: #40B0D6;
  --frkf-bleu: #0153AF;
  --rouge-action: #E0030F;
  --rouge-action-fonce: #C7020E;
  --blanc: #FFFFFF;
  --sable: #F6F2EA;
  --sable-fonce: #ECE5D8;
  --ardoise: #2F3D49;
  --ardoise-douce: #4F5F6C;
  --filet: #D8DEE4;
  --gris-ferme: #8A97A3;
  --meteo-vert: #1E7B3C;
  --meteo-orange: #A84E0A;
  --meteo-rouge: #C7020E;

  --fond: var(--blanc);
  --texte: var(--ardoise);
  --texte-doux: var(--ardoise-douce);
  --texte-fort: var(--marine);
  --lien: var(--mer);
  --focus: var(--frkf-bleu);

  --police-titre: 'Barlow Condensed', 'Barlow Condensed Fallback', 'Arial Narrow', sans-serif;
  --police-texte: 'Source Sans 3', 'Source Sans Fallback', system-ui, sans-serif;
  --taille-base: 1.0625rem;
  --t-h1: clamp(2.75rem, 1.4rem + 5.6vw, 6rem);
  --t-h2: clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem);
  --t-h3: clamp(1.375rem, 1.2rem + .75vw, 1.75rem);
  --t-chapo: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  --t-petit: .9375rem;
  --mesure: 38rem;

  --section: clamp(4rem, 2.5rem + 6vw, 8rem);
  --largeur-max: 75rem;
  --gouttiere: clamp(1rem, .5rem + 2.5vw, 2.5rem);
  --rayon-s: 4px;
  --rayon-m: 8px;
  --entete: 64px;
  --duree: 220ms;
  --courbe: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 64rem) { :root { --taille-base: 1.125rem; --entete: 76px; } }
@media (prefers-reduced-motion: reduce) { :root { --duree: 0ms; } html { scroll-behavior: auto !important; } }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--entete) + 1rem); scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; background: var(--fond); color: var(--texte);
  font-family: var(--police-texte); font-size: var(--taille-base); line-height: 1.55;
  font-kerning: normal; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, svg, video { max-width: 100%; }
img { height: auto; display: block; }
picture { display: block; }
a { color: var(--lien); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--marine); text-decoration-thickness: 2px; }
p, ul, ol, dl, blockquote, figure { margin: 0; }
p + p { margin-top: .9em; }
h1, h2, h3, h4 { margin: 0; color: var(--texte-fort); }
h1, h2 { font-family: var(--police-titre); font-weight: 700; line-height: 1.02; text-wrap: balance; }
h3 { font-family: var(--police-titre); font-weight: 700; font-size: var(--t-h3); line-height: 1.12; }
strong, b { font-weight: 700; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.fond--marine :focus-visible, .hero :focus-visible, .cta :focus-visible { outline-color: #fff; }
[hidden] { display: none !important; }
main { display: block; }
main:focus { outline: none; }
mark.a-completer { background: #FFF1B8; color: #5A4300; padding: 0 .2em; border-radius: 2px; font-style: normal; }
.fond--marine mark.a-completer, .hero mark.a-completer { color: #5A4300; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sentinelle { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
.conteneur { width: 100%; max-width: var(--largeur-max); margin-inline: auto; padding-inline: var(--gouttiere); }
.conteneur--etroit { max-width: calc(48rem + 2 * var(--gouttiere)); }
.conteneur--large { max-width: none; }
.ico { width: 1.375rem; height: 1.375rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ico--petit { width: 1.05rem; height: 1.05rem; }
.ico-meteo { width: 1.5rem; height: 1.5rem; flex: none; vertical-align: middle; }
.ico-meteo--vert { color: var(--meteo-vert); }
.ico-meteo--orange { color: var(--meteo-orange); }
.ico-meteo--rouge { color: var(--meteo-rouge); }
.ico-meteo:not([class*="--"]) { color: var(--ardoise-douce); fill: none; stroke: currentColor; stroke-width: 1.75; }
.note { font-size: var(--t-petit); color: var(--texte-doux); }
.note .ico { margin-right: .35rem; }

/* Lien d'évitement */
.evitement {
  position: absolute; left: 1rem; top: -5rem; z-index: 100;
  background: var(--marine); color: #fff; padding: .75rem 1rem; border-radius: var(--rayon-s); font-weight: 600;
}
.evitement:focus { top: .5rem; color: #fff; }

/* Boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .7rem 1.375rem;
  border: 2px solid transparent; border-radius: var(--rayon-s);
  font-family: var(--police-texte); font-weight: 600; font-size: 1.0625rem; line-height: 1.2; text-align: center;
  text-decoration: none; cursor: pointer; background: transparent;
  transition: background-color var(--duree) var(--courbe), color var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}
.bouton:hover { text-decoration: none; }
.bouton .ico { width: 1.25rem; height: 1.25rem; }
.bouton--principal { background: var(--rouge-action); color: #fff; }
.bouton--principal:hover { background: var(--rouge-action-fonce); color: #fff; }
.bouton--principal-discret { border-color: var(--marine); color: var(--marine); }
.bouton--principal-discret:hover { background: var(--marine); color: #fff; }
.bouton--contour { border-color: var(--marine); color: var(--marine); }
.bouton--contour:hover { background: var(--marine); color: #fff; }
.fond--marine .bouton--contour, .fond--marine .bouton--principal-discret { border-color: #fff; color: #fff; }
.fond--marine .bouton--contour:hover, .fond--marine .bouton--principal-discret:hover { background: #fff; color: var(--marine); }
.bouton--contour-clair { border-color: rgba(255, 255, 255, .92); color: #fff; }
.bouton--contour-clair:hover { background: #fff; color: var(--marine); }
.bouton--grand { min-height: 52px; padding: .8rem 1.6rem; font-size: 1.125rem; }
.bouton--large { width: 100%; }
.bouton--lien { min-height: 44px; padding: .5rem 0; border: 0; color: var(--lien); text-decoration: underline; font-weight: 600; }
.bouton[disabled], .bouton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.lien-fleche { font-weight: 600; }
.lien-fleche::after { content: " \2192"; }

/* En-tête : toujours blanc (le monogramme ne se pose que sur fond clair) */
.entete {
  position: sticky; top: 0; z-index: 50; background: var(--blanc);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}
.est-defile .entete { border-bottom-color: var(--filet); box-shadow: 0 6px 18px -14px rgba(4, 56, 98, .45); }
.entete__barre { display: flex; align-items: center; gap: .5rem; min-height: var(--entete); }
.entete__logo { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; }
.entete__logo img { height: 30px; width: auto; }
.entete__nav { display: none; }
.entete__nav ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.entete__nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--police-titre); font-weight: 600; font-size: 1.1875rem; letter-spacing: .01em;
  color: var(--marine); text-decoration: none; border-bottom: 2px solid transparent;
  transition: border-color var(--duree) var(--courbe);
}
.entete__nav a:hover { border-bottom-color: var(--ocean); }
.entete__actions { display: flex; align-items: center; gap: .375rem; }
.langue { position: relative; display: none; }
.langue summary {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding: 0 .5rem;
  list-style: none; cursor: pointer; color: var(--marine); font-weight: 600; border-radius: var(--rayon-s);
}
.langue summary::-webkit-details-marker { display: none; }
.langue ul {
  position: absolute; right: 0; top: calc(100% + .25rem); z-index: 60; min-width: 11rem; margin: 0; padding: .375rem; list-style: none;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon-m); box-shadow: 0 12px 28px -18px rgba(4, 56, 98, .5);
}
.langue li a { display: flex; align-items: center; min-height: 44px; padding: 0 .75rem; color: var(--ardoise); text-decoration: none; border-radius: var(--rayon-s); }
.langue li a:hover { background: var(--sable); }
.langue li a[aria-current] { color: var(--marine); font-weight: 700; }
.entete__tel { display: none; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .5rem; color: var(--marine); font-weight: 600; text-decoration: none; }
/* Un seul bouton rouge par écran : « Réserver » reste en contour tant que le hero (ou le formulaire) porte le bouton rouge */
.entete .bouton--reserver { min-height: 44px; padding: .45rem .9rem; background: var(--rouge-action); border-color: var(--rouge-action); color: #fff; }
.entete .bouton--reserver:hover { background: var(--rouge-action-fonce); border-color: var(--rouge-action-fonce); color: #fff; }
.page-accueil:not(.hero-quitte) .entete .bouton--reserver, .page-reserver .entete .bouton--reserver { background: transparent; border-color: var(--marine); color: var(--marine); }
.page-accueil:not(.hero-quitte) .entete .bouton--reserver:hover, .page-reserver .entete .bouton--reserver:hover { background: var(--marine); color: #fff; }
.entete__menu {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: -.5rem;
  background: none; border: 0; border-radius: var(--rayon-s); color: var(--marine);
}
.entete__menu .ico { width: 1.75rem; height: 1.75rem; }
@media (min-width: 64rem) {
  .entete__logo { margin-right: 2rem; }
  .entete__logo img { height: 38px; }
  .entete__nav { display: block; margin-right: auto; }
  .langue, .entete__tel { display: inline-flex; }
  .entete__menu { display: none; }
}
@media (min-width: 64rem) and (max-width: 74.99rem) {
  .entete__nav ul { gap: 1rem; }
  .entete__tel span { display: none; }
}

/* Menu mobile */
.menu-mobile {
  position: fixed; inset: var(--entete) 0 0 0; z-index: 60;
  background: var(--blanc); overflow-y: auto; padding: 1.25rem var(--gouttiere) 2rem; border-top: 1px solid var(--filet);
}
.menu-mobile ul { list-style: none; margin: 0; padding: 0; }
.menu-mobile__nav a {
  display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--filet);
  font-family: var(--police-titre); font-weight: 700; font-size: 1.75rem; color: var(--marine); text-decoration: none;
}
.menu-mobile__langues { display: flex; gap: .5rem; margin: 1.5rem 0; }
.menu-mobile__langues a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px;
  border: 1px solid var(--filet); border-radius: var(--rayon-s); color: var(--marine); font-weight: 600; text-decoration: none;
}
.menu-mobile__langues a[aria-current] { background: var(--marine); color: #fff; border-color: var(--marine); }
.menu-mobile .bouton { width: 100%; margin-top: .75rem; }
.menu-ouvert { overflow: hidden; }

/* Bandeau d'annonce */
.bandeau { background: var(--marine); color: #fff; font-size: var(--t-petit); }
.bandeau.fond--sable { background: var(--sable); color: var(--ardoise); }
.bandeau__texte { padding-block: .6rem; text-align: center; }
.bandeau a { color: inherit; font-weight: 600; }

/* Sections */
.section { padding-block: var(--section); }
.fond--blanc { background: var(--blanc); }
.fond--sable { background: var(--sable); }
.fond--marine { background: var(--marine); color: #fff; }
.fond--marine h2, .fond--marine h3 { color: #fff; }
.fond--marine a { color: #fff; }
.fond--blanc + .fond--blanc, .fond--sable + .fond--sable { border-top: 1px solid var(--filet); }
.section__titre { margin: 0 0 1.25rem; max-width: 22ch; font-size: var(--t-h2); }
.section__intro { max-width: var(--mesure); margin-bottom: 2.5rem; font-size: var(--t-chapo); line-height: 1.5; color: var(--texte); }
.section__intro:empty { display: none; }
.fond--marine .section__intro { color: rgba(255, 255, 255, .92); }
.section__action { margin-top: 2.5rem; }
.encadre { margin-top: 2rem; padding: 1.25rem 1.375rem; border-left: 4px solid var(--ocean); background: var(--blanc); border-radius: 0 var(--rayon-s) var(--rayon-s) 0; max-width: 46rem; }
.fond--blanc .encadre { background: var(--sable); }
.encadre__titre { margin-bottom: .5rem; font-size: 1.375rem; }
.encadre p { max-width: 60ch; }
.texte-riche { max-width: var(--mesure); }
.texte-riche ul, .texte-riche ol { padding-left: 1.25rem; margin: .75rem 0; }
.texte-riche li + li { margin-top: .35rem; }
.texte-riche h2 { font-size: var(--t-h3); margin: 2rem 0 .75rem; }
.texte-riche h3 { font-size: 1.375rem; margin: 1.5rem 0 .5rem; }
.texte--deux { max-width: none; }
@media (min-width: 64rem) { .texte--deux { columns: 2; column-gap: 3rem; } .texte--deux > * { break-inside: avoid; } }

/* Placeholder de photo : sable et monogramme en filigrane */
.photo-attente {
  position: relative; display: flex; align-items: flex-end; justify-content: flex-start; width: 100%;
  aspect-ratio: 4 / 3; background: var(--sable-fonce); border-radius: var(--rayon-s); overflow: hidden;
}
.photo-attente::before {
  content: ""; position: absolute; inset: 0; background: url('../img/monogramme-frkf-300.png') center / 55% auto no-repeat; opacity: .15;
}
.photo-attente__texte { position: relative; margin: .75rem; padding: .2rem .5rem; background: rgba(255, 255, 255, .85); border-radius: var(--rayon-s); font-size: .875rem; font-weight: 600; color: var(--ardoise); }
.photo-attente--16x9 { aspect-ratio: 16 / 9; }
.photo-attente--21x9 { aspect-ratio: 21 / 9; }
.photo-attente--4x5 { aspect-ratio: 4 / 5; }
.photo-attente--1x1 { aspect-ratio: 1; }

/* Hero */
.hero { position: relative; isolation: isolate; color: #fff; background: var(--marine); }
.hero__photo { position: absolute; inset: 0; z-index: -2; }
.hero__photo img, .hero__photo picture { width: 100%; height: 100%; object-fit: cover; }
.hero__photo .photo-attente { height: 100%; aspect-ratio: auto; border-radius: 0; }
.hero__voile { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__surtitre { margin: 0 0 .75rem; font-weight: 600; font-size: 1rem; letter-spacing: .01em; color: rgba(255, 255, 255, .92); }
.hero__titre {
  margin: 0; max-width: 16ch; color: #fff;
  font-family: var(--police-titre); font-weight: 700; font-size: clamp(2.5rem, 1.3rem + 4.6vw, 5.25rem); line-height: .98; letter-spacing: -.005em;
}
.hero__sous-titre { margin: 1.125rem 0 0; max-width: 34rem; font-size: var(--t-chapo); line-height: 1.45; color: rgba(255, 255, 255, .95); }
.hero__boutons { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.hero a:not(.bouton) { color: #fff; }

.reassurance__liste { display: grid; gap: .875rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.reassurance__liste li { display: flex; align-items: center; gap: .625rem; font-weight: 600; line-height: 1.3; }
.reassurance__liste .ico { width: 1.625rem; height: 1.625rem; }
.meteo-pastille { display: inline-flex; align-items: center; gap: .625rem; margin: 0; padding: .5rem .875rem .5rem .5rem; border-radius: var(--rayon-s); line-height: 1.35; font-size: .9375rem; }
.meteo-pastille .ico-meteo { width: 1.75rem; height: 1.75rem; }
.meteo-pastille a { font-weight: 600; }
.reassurance--sombre { background: var(--marine); color: #fff; padding: 1.5rem 0 1.75rem; }
.reassurance--sombre .ico { color: var(--lagon); }
.reassurance--sombre .meteo-pastille { background: rgba(255, 255, 255, .1); color: #fff; }
.reassurance--sombre .meteo-pastille a { color: #fff; }
.reassurance--sombre .ico-meteo--vert, .hero--c .ico-meteo--vert { color: #3FBF68; }
.reassurance--sombre .ico-meteo--orange, .hero--c .ico-meteo--orange { color: #F08A3C; }
.reassurance--sombre .ico-meteo--rouge, .hero--c .ico-meteo--rouge { color: #FF5A62; }
.reassurance--claire { background: var(--blanc); color: var(--marine); padding: 1.5rem 0 1.75rem; border-bottom: 1px solid var(--filet); }
.reassurance--claire .ico { color: var(--ocean); }
.reassurance--claire .meteo-pastille { background: var(--sable); color: var(--ardoise); }
.reassurance__grille { display: grid; gap: 1.25rem; justify-items: start; }
@media (min-width: 48rem) { .reassurance__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .reassurance__liste { grid-template-columns: repeat(4, max-content); gap: 1rem 2.75rem; }
  .reassurance__liste li { white-space: nowrap; }
}

/* Hero A : plein écran, titre posé sur l'eau sombre, à droite du kayak (photo fondue vers le marine sur téléphone) */
.hero--a .hero__cadre { position: relative; }
.hero--a .hero__photo { position: relative; inset: auto; z-index: 0; width: 100%; aspect-ratio: 4 / 5; max-height: 46svh; }
.hero--a .hero__voile { position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 45%; z-index: 1; background: linear-gradient(to bottom, rgba(4, 56, 98, 0) 0%, var(--marine) 100%); }
.hero--a .hero__contenu { position: relative; z-index: 2; margin-top: -4.5rem; padding-bottom: 2.5rem; }
@media (min-width: 48rem) { .hero--a .hero__photo { aspect-ratio: 16 / 9; max-height: 52svh; } }
@media (min-width: 64rem) {
  .hero--a { min-height: clamp(36rem, calc(100svh - var(--entete)), 56rem); display: flex; align-items: flex-end; }
  .hero--a .hero__cadre { position: absolute; inset: 0; z-index: -1; }
  .hero--a .hero__photo { position: absolute; inset: 0; aspect-ratio: auto; max-height: none; }
  .hero--a .hero__voile {
    top: 0; height: auto;
    background: linear-gradient(to top, rgba(4, 56, 98, .9) 0%, rgba(4, 56, 98, .55) 30%, rgba(4, 56, 98, 0) 60%), linear-gradient(to left, rgba(4, 56, 98, .55) 0%, rgba(4, 56, 98, 0) 55%);
  }
  .hero--a .hero__contenu { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); margin-top: 0; padding-top: 10rem; padding-bottom: clamp(2.75rem, 5vw, 4.5rem); }
  .hero--a .hero__texte { grid-column: 2; }
}

/* Hero B : bandeau panoramique, texte posé sur l'eau */
.hero--b { min-height: clamp(36rem, calc(100svh - var(--entete)), 50rem); display: flex; align-items: flex-end; }
.hero--b .hero__cadre { position: absolute; inset: 0; z-index: -1; }
.hero--b .hero__voile { background: linear-gradient(to top, rgba(4, 56, 98, .88) 0%, rgba(4, 56, 98, .55) 38%, rgba(4, 56, 98, .08) 62%, rgba(4, 56, 98, 0) 70%); }
.hero--b .hero__contenu { padding-top: 12rem; padding-bottom: 2.75rem; }
@media (min-width: 48rem) {
  .hero--b { min-height: clamp(34rem, 80svh, 50rem); align-items: center; }
  .hero--b .hero__voile { background: linear-gradient(to right, rgba(4, 56, 98, .78) 0%, rgba(4, 56, 98, .5) 38%, rgba(4, 56, 98, 0) 62%), linear-gradient(to top, rgba(4, 56, 98, .35) 0%, rgba(4, 56, 98, 0) 45%); }
  .hero--b .hero__contenu { padding-top: 14rem; padding-bottom: 4rem; }
}

/* Hero C : écran partagé, panneau marine et photo (photo en haut sur téléphone) */
.hero--c .hero__photo { position: relative; inset: auto; z-index: 0; width: 100%; aspect-ratio: 4 / 3; }
.hero--c .hero__panneau { padding: 2rem var(--gouttiere) 2.5rem; }
.hero--c .hero__surtitre { color: var(--lagon); }
.hero--c .reassurance__liste { grid-template-columns: 1fr; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .18); }
.hero--c .reassurance__liste .ico { color: var(--lagon); }
.hero--c .meteo-pastille { margin-top: 1.5rem; background: rgba(255, 255, 255, .1); color: #fff; }
@media (min-width: 48rem) { .hero--c .hero__photo { aspect-ratio: 16 / 9; } .hero--c .reassurance__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .hero--c { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); min-height: clamp(38rem, calc(100svh - var(--entete)), 54rem); }
  .hero--c .hero__photo { order: 2; aspect-ratio: auto; height: 100%; }
  .hero--c .hero__panneau { display: flex; flex-direction: column; justify-content: center; padding: 4rem clamp(2rem, 4vw, 4rem) 4rem max(var(--gouttiere), calc((100vw - var(--largeur-max)) / 2 + var(--gouttiere))); }
  .hero--c .hero__titre { font-size: clamp(2.75rem, .5rem + 3.6vw, 4.5rem); max-width: 14ch; }
  .hero--c .reassurance__liste { grid-template-columns: 1fr; }
}

/* Étapes */
.etapes { display: grid; gap: 2rem; margin: 2rem 0 0; padding: 0; list-style: none; counter-reset: etape; }
.etapes li { counter-increment: etape; border-top: 2px solid var(--marine); padding-top: 1rem; }
.etapes li::before { content: counter(etape); display: block; margin-bottom: .5rem; font-family: var(--police-titre); font-weight: 700; font-size: 2.75rem; line-height: 1; color: var(--ocean); }
.etapes h3 { margin: 0 0 .5rem; }
.etapes p { max-width: 36ch; }
.fond--marine .etapes li { border-top-color: rgba(255, 255, 255, .6); }
.fond--marine .etapes li::before { color: var(--lagon); }
@media (min-width: 48rem) { .etapes--colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .etapes--colonnes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; } }
.etapes--liste { max-width: 46rem; }

/* Fiches kayaks */
.kayaks { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.kayak { display: flex; flex-direction: column; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon-m); overflow: hidden; }
.fond--blanc .kayak { background: var(--sable); border-color: transparent; }
.kayak__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kayak__photo .photo-attente { border-radius: 0; }
.kayak__corps { display: flex; flex-direction: column; gap: .6rem; flex: 1; padding: 1.25rem 1.25rem 1.5rem; }
.kayak__nom { font-size: 1.75rem; }
.kayak__modele { font-weight: 600; color: var(--texte); }
.kayak__description, .kayak__equipement { color: var(--texte-doux); font-size: var(--t-petit); }
.kayak__libelle { font-weight: 600; color: var(--texte); }
.kayak__prix { font-family: var(--police-titre); font-weight: 700; font-size: 1.625rem; color: var(--marine); font-variant-numeric: tabular-nums; }
.kayak__dispo { display: flex; align-items: center; gap: .4rem; font-size: var(--t-petit); color: var(--texte); }
.kayak__dispo .ico { color: var(--ocean); }
.kayak .bouton { margin-top: auto; align-self: stretch; }
@media (min-width: 48rem) { .kayaks--grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .kayaks--grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 48rem) { .kayaks--liste .kayak { flex-direction: row; } .kayaks--liste .kayak__photo { flex: 0 0 40%; } }

/* Texte et photo (MirageDrive, événement) */
.texte-photo { display: grid; gap: 2rem; align-items: center; }
.texte-photo__photo img { width: 100%; border-radius: var(--rayon-s); }
.points { display: grid; gap: 1rem; margin: 1.5rem 0 0; padding: 0; list-style: none; max-width: 40rem; }
.points li { padding-left: 1rem; border-left: 3px solid var(--ocean); }
.points strong { display: block; font-family: var(--police-titre); font-weight: 700; font-size: 1.375rem; line-height: 1.15; color: var(--marine); }
.fond--marine .points strong { color: #fff; }
.fond--marine .points li { border-left-color: var(--lagon); }
@media (min-width: 64rem) {
  .texte-photo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; }
  .texte-photo--photo_gauche .texte-photo__photo { order: -1; }
  .texte-photo--photo_gauche { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* Tableaux de tarifs */
.tableau-defile { overflow-x: auto; max-width: 100%; border-radius: var(--rayon-m); }
.tableau { width: 100%; border-collapse: collapse; background: var(--blanc); font-variant-numeric: tabular-nums; }
.fond--blanc .tableau { background: var(--sable); }
.tableau th, .tableau td { padding: .875rem 1rem; text-align: left; border-bottom: 1px solid var(--filet); vertical-align: top; }
.tableau thead th { font-size: var(--t-petit); color: var(--texte-doux); font-weight: 600; background: transparent; }
.tableau tbody th { font-weight: 700; color: var(--marine); }
.tableau__sous { display: block; font-weight: 400; font-size: var(--t-petit); color: var(--texte-doux); }
.tableau__prix { font-family: var(--police-titre); font-weight: 700; font-size: 1.375rem; color: var(--marine); white-space: nowrap; }
.tableau--options { max-width: 34rem; }
.tarifs__titre { margin: 2.5rem 0 1rem; }
.tarifs__tva { margin: 1.5rem 0; font-size: var(--t-petit); color: var(--texte-doux); }

/* Disponibilités sur 14 jours */
.legende { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0 0 1.5rem; padding: 0; list-style: none; font-size: var(--t-petit); }
.legende li { display: inline-flex; align-items: center; gap: .4rem; }
.puce { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; flex: none; }
.puce--libre { background: var(--meteo-vert); }
.puce--presque { background: var(--meteo-orange); border-radius: 2px; transform: rotate(45deg) scale(.85); }
.puce--complet { background: var(--meteo-rouge); border-radius: 1px; }
.puce--ferme { background: transparent; border: 2px solid var(--gris-ferme); }
.dispo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; margin: 0; padding: 0; list-style: none; }
.dispo__lien {
  display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: .75rem .8rem; border-radius: var(--rayon-m);
  background: var(--blanc); border: 1px solid var(--filet); color: var(--texte); text-decoration: none;
  transition: border-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}
.fond--blanc .dispo__lien { background: var(--sable); border-color: transparent; }
a.dispo__lien:hover { border-color: var(--ocean); box-shadow: 0 0 0 1px var(--ocean); color: var(--texte); }
.dispo__jour--ferme .dispo__lien { background: transparent !important; border: 1px dashed #AEB8C1 !important; }
.dispo__jour--ferme .dispo__date { color: var(--texte-doux); }
.dispo__date { display: flex; align-items: baseline; gap: .35rem; font-family: var(--police-titre); font-weight: 700; color: var(--marine); }
.dispo__jour-nom { font-size: 1.125rem; }
.dispo__jour-nom::first-letter, .carte-meteo__date::first-letter, .calendrier__mois::first-letter { text-transform: uppercase; }
.dispo__num { font-size: 1.5rem; line-height: 1; }
.dispo__lien > .ico-meteo { position: absolute; }
.dispo__jour { position: relative; }
.dispo__jour .dispo__lien > .ico-meteo { top: .65rem; right: .65rem; width: 1.3rem; height: 1.3rem; }
.dispo__creneaux { display: grid; gap: .3rem; font-size: .875rem; }
.dispo__creneau { display: flex; align-items: center; gap: .4rem; }
.dispo__creneau-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texte-doux); }
.dispo__nombre { font-weight: 700; font-variant-numeric: tabular-nums; }
@media (min-width: 40rem) { .dispo { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .dispo { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

/* Spots et carte */
.spots { display: grid; gap: 2.5rem; }
.spots__texte > div { max-width: var(--mesure); }
.spots__carte { margin-top: 2rem; }
.carte { width: 100%; height: auto; border-radius: var(--rayon-m); display: block; }
.carte__mer { fill: #D9ECF4; }
.carte__terre { fill: #F2EDE3; stroke: #C9BFAE; stroke-width: 1; }
.fond--sable .carte__terre { fill: #FFFFFF; }
.carte__eau { fill: #9FD0E3; stroke: #6BAFCB; stroke-width: 1; }
.carte__riviere { fill: none; stroke: #6BAFCB; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.carte__ville { fill: var(--ardoise-douce); }
.carte__texte-ville { font: 600 13px var(--police-texte); fill: var(--ardoise); }
.carte__texte-mer { font: italic 400 18px var(--police-texte); fill: var(--mer); letter-spacing: .08em; }
.carte__texte-zone { font: 600 14px var(--police-texte); fill: var(--mer); }
.carte__spot circle { fill: var(--rouge-action); stroke: #fff; stroke-width: 2.5; }
.carte__spot--verdon circle { fill: var(--marine); }
.carte__spot text { font: 700 13px var(--police-texte); fill: #fff; }
.spots__liste { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.spot { display: grid; gap: .75rem; padding: 1.125rem 1.25rem; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon-m); }
.fond--blanc .spot { background: var(--sable); border-color: transparent; }
.spot__photo img { width: 100%; border-radius: var(--rayon-s); aspect-ratio: 4 / 3; object-fit: cover; }
.spot__corps { display: grid; gap: .5rem; }
.spot__nom { display: flex; align-items: center; gap: .6rem; font-size: 1.5rem; }
.spot__numero { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--rouge-action); color: #fff; font-family: var(--police-texte); font-size: .9375rem; font-weight: 700; flex: none; }
.spot__etiquettes { display: flex; flex-wrap: wrap; gap: .4rem; }
.etiquette { display: inline-block; padding: .1rem .5rem; border-radius: var(--rayon-s); background: var(--sable); color: var(--ardoise); font-size: .8125rem; font-weight: 700; letter-spacing: .01em; vertical-align: middle; }
.fond--sable .etiquette { background: var(--sable-fonce); }
.etiquette--mer { background: #DCEEF6; color: var(--mer); }
.etiquette--verdon { background: #E3F0E6; color: #1C5F31; }
.etiquette--exemple { background: #FFF1B8; color: #5A4300; }
.spot__rdv { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--t-petit); }
.spot__rdv .ico { color: var(--ocean); margin-top: .15rem; }
@media (min-width: 64rem) { .spots--carte { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; align-items: start; } }
@media (min-width: 48rem) and (max-width: 63.99rem) { .spots__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Météo et sécurité */
.meteo { display: grid; gap: 2.5rem; }
.meteo h3 { margin-bottom: .75rem; }
.meteo__niveaux { display: grid; gap: .5rem; margin: 1rem 0 1.5rem; padding: 0; list-style: none; }
.meteo__niveau { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.meteo__jours { display: grid; gap: 1rem; }
.carte-meteo { padding: 1.125rem 1.25rem; border: 1px solid var(--filet); border-left-width: 6px; border-radius: var(--rayon-m); background: var(--blanc); }
.fond--blanc .carte-meteo { background: var(--sable); border-color: transparent; border-left-color: var(--gris-ferme); }
.carte-meteo--vert { border-left-color: var(--meteo-vert) !important; }
.carte-meteo--orange { border-left-color: var(--meteo-orange) !important; }
.carte-meteo--rouge { border-left-color: var(--meteo-rouge) !important; }
.carte-meteo__titre { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 1.5rem; margin-bottom: .5rem; }
.carte-meteo__date { display: inline-block; font-family: var(--police-texte); font-weight: 400; font-size: var(--t-petit); color: var(--texte-doux); }
.carte-meteo__niveau { display: flex; align-items: flex-start; gap: .5rem; }
.carte-meteo__niveau .ico-meteo { width: 1.75rem; height: 1.75rem; margin-top: -.1rem; }
.carte-meteo__statut { margin-top: .35rem; font-size: var(--t-petit); font-weight: 600; color: var(--texte-doux); }
.carte-meteo__details { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .6rem 0 0; padding: 0; list-style: none; font-size: var(--t-petit); }
.carte-meteo__commentaire { margin-top: .6rem; font-style: italic; }
.carte-meteo__maj { margin-top: .6rem; font-size: .8125rem; color: var(--texte-doux); }
.meteo__liens { display: grid; gap: .35rem; margin: .75rem 0 0; padding: 0 0 0 1.1rem; font-size: var(--t-petit); }
.schema-zone { margin: 0 0 1rem; max-width: 26rem; }
.schema-zone svg { width: 100%; height: auto; border-radius: var(--rayon-m); }
.schema-zone__mer { fill: #0F7AA6; }
.schema-zone__large { fill: #2E8FB8; }
.schema-zone__proche { fill: #5DB2D3; }
.schema-zone__cote { fill: #F2EDE3; }
.schema-zone__texte { font: 700 15px var(--police-texte); fill: var(--marine); }
.schema-zone__texte--clair { fill: #fff; }
.meteo__garantie.encadre { margin-top: 0; }
.liste-coches { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.liste-coches li { display: flex; gap: .55rem; align-items: flex-start; }
.liste-coches .ico { color: var(--meteo-vert); margin-top: .1rem; }
.urgences { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.urgences li, .urgences a { display: inline-flex; align-items: center; min-height: 44px; padding: .35rem .85rem; border-radius: var(--rayon-s); background: var(--meteo-rouge); color: #fff; font-weight: 700; text-decoration: none; }
.urgences li:has(a) { padding: 0; background: none; }
.urgences a:hover { background: #A00009; color: #fff; }
@media (min-width: 64rem) {
  .meteo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 4rem; }
  .meteo__jours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meteo__indicateur { grid-column: 1 / -1; }
}

/* Citation : le mot de Joël */
.citation { display: grid; gap: 2rem; align-items: start; }
.citation__photo { max-width: 14rem; }
.citation__photo img { width: 100%; border-radius: var(--rayon-m); }
.citation__corps { font-size: var(--t-chapo); line-height: 1.55; max-width: 40rem; }
.citation__corps p + p { margin-top: 1em; }
.citation__signature { margin-top: 1.25rem; font-family: var(--police-titre); font-weight: 700; font-size: 1.375rem; color: var(--marine); }
@media (min-width: 48rem) {
  .citation { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 3.5rem; }
  .citation__photo { max-width: none; }
  .citation--photo_droite .citation__photo { order: 2; }
  .citation--photo_droite { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}

/* Galerie et vidéos */
.galerie { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.galerie figure { height: 100%; display: flex; flex-direction: column; gap: .4rem; }
.galerie img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--rayon-s); }
.galerie picture { flex: 1; }
.galerie figcaption { font-size: var(--t-petit); color: var(--texte-doux); }
@media (min-width: 48rem) { .galerie--trois, .galerie--deux, .galerie--mosaique { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .galerie--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .galerie--mosaique { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
  .galerie--mosaique .galerie__element:first-child { grid-column: span 2; grid-row: span 2; }
  .galerie--mosaique .galerie__element:first-child img { aspect-ratio: auto; }
}
.galerie img { aspect-ratio: 4 / 3; }
.video { position: relative; display: block; overflow: hidden; border-radius: var(--rayon-s); background: var(--marine); color: #fff; aspect-ratio: 16 / 9; text-decoration: none; }
.video img, .video picture { width: 100%; height: 100%; object-fit: cover; }
.video__fond { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.video__motif { width: 4rem; height: 4rem; color: rgba(255, 255, 255, .35); }
.video__bouton {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.1rem .7rem .8rem; border-radius: var(--rayon-s);
  background: rgba(4, 56, 98, .88); color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.video__bouton:hover { background: var(--marine); color: #fff; }
.video__ico { width: 2rem; height: 2rem; color: var(--rouge-action); }
.video--externe .video__ico { color: #fff; }
.video__note { position: absolute; left: .75rem; right: .75rem; bottom: .6rem; font-size: .8125rem; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); text-align: center; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-bloc figcaption { margin-top: .6rem; font-size: var(--t-petit); color: var(--texte-doux); }

/* Avis */
.avis { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.avis__element { padding: 1.25rem; border-radius: var(--rayon-m); background: var(--blanc); border: 1px solid var(--filet); }
.avis__note { color: #B07A00; margin-bottom: .5rem; }
.avis__etoile { width: 1.1rem; height: 1.1rem; color: var(--filet); fill: currentColor; stroke: none; }
.avis__etoile--pleine { color: #C88A00; }
.avis blockquote { font-size: 1.0625rem; }
.avis__auteur { margin-top: .75rem; font-weight: 700; color: var(--marine); }
.avis__source { display: block; font-weight: 400; font-size: var(--t-petit); color: var(--texte-doux); }
.avis__liens { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1.5rem; }
@media (min-width: 64rem) { .avis--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* FAQ */
.faq { border-top: 1px solid var(--filet); }
.faq__item { border-bottom: 1px solid var(--filet); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding: 1rem 0;
  cursor: pointer; list-style: none; font-weight: 700; font-size: 1.125rem; color: var(--marine);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__ico { color: var(--ocean); transition: transform var(--duree) var(--courbe); }
.faq__item[open] .faq__ico { transform: rotate(45deg); }
.faq__reponse { padding: 0 0 1.25rem; max-width: 44rem; }

/* Contact et formulaires */
.contact { display: grid; gap: 2.5rem; }
@media (min-width: 64rem) { .contact--coordonnees { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; } }
.coordonnees { display: grid; gap: 1rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.coordonnees li { display: flex; gap: .75rem; align-items: flex-start; }
.coordonnees .ico { color: var(--ocean); margin-top: .2rem; }
.coordonnees__libelle { display: block; font-size: var(--t-petit); color: var(--texte-doux); }
.coordonnees a { font-weight: 600; font-size: 1.125rem; }
.formulaire__form { display: grid; gap: 1.25rem; }
.formulaire__etape { display: grid; gap: 1.25rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.formulaire__legende { padding: 0; margin-bottom: .25rem; font-family: var(--police-titre); font-weight: 700; font-size: var(--t-h3); color: var(--marine); }
.formulaire__intertitre { font-size: 1.375rem; }
.formulaire__mention { font-size: var(--t-petit); color: var(--texte-doux); }
.formulaire__message { padding: 1rem 1.25rem; border-radius: var(--rayon-m); margin-bottom: 1.25rem; }
.formulaire__message:focus { outline: none; }
.formulaire__message--ok { background: #E3F2E7; color: #14532A; border-left: 4px solid var(--meteo-vert); }
.formulaire__message--erreur { background: #FDECEC; color: #8A0009; border-left: 4px solid var(--meteo-rouge); }
.formulaire__message ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.formulaire__message a { color: inherit; }
.champ { display: grid; gap: .4rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.champ__libelle { font-weight: 600; color: var(--texte); padding: 0; }
.champ__facultatif { font-weight: 400; color: var(--texte-doux); }
.champ__aide { font-size: var(--t-petit); color: var(--texte-doux); }
.champ__erreur { display: flex; align-items: center; gap: .35rem; font-size: var(--t-petit); font-weight: 600; color: var(--meteo-rouge); }
.champ__lien { font-size: var(--t-petit); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="password"], input[type="search"], input[type="url"], select, textarea {
  width: 100%; min-height: 48px; padding: .65rem .8rem; border: 1px solid #8995A1; border-radius: var(--rayon-s);
  background: #fff; color: var(--ardoise); font-size: 1.0625rem; line-height: 1.3;
}
textarea { min-height: 7.5rem; resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--marine) 50%), linear-gradient(135deg, var(--marine) 50%, transparent 50%); background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%; background-size: .36rem .36rem; background-repeat: no-repeat; padding-right: 2.2rem; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
[aria-invalid="true"] { border-color: var(--meteo-rouge) !important; box-shadow: 0 0 0 1px var(--meteo-rouge); }
.champ--erreur .choix__option { border-color: var(--meteo-rouge); }
.choix { display: grid; gap: .5rem; }
@media (min-width: 40rem) { .choix--colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choix__option {
  position: relative; display: flex; align-items: flex-start; gap: .65rem; min-height: 48px; padding: .7rem .85rem;
  border: 1px solid var(--filet); border-radius: var(--rayon-s); background: #fff; cursor: pointer; line-height: 1.35;
}
.champ--case .choix__option { border: 0; padding: .35rem 0; background: transparent; }
.choix__option input { flex: none; width: 1.3rem; height: 1.3rem; margin: .05rem 0 0; accent-color: var(--marine); }
.choix__option:has(input:checked) { border-color: var(--marine); box-shadow: 0 0 0 1px var(--marine); }
.champ--case .choix__option:has(input:checked) { box-shadow: none; }
.choix__option--carte { padding: 1rem; }
.champs-deux { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .champs-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.telephone { display: grid; grid-template-columns: minmax(7rem, 9rem) 1fr; gap: .5rem; }

/* Appel à l'action */
.cta { position: relative; isolation: isolate; text-align: left; }
.cta__contenu { max-width: calc(46rem + 2 * var(--gouttiere)); }
.cta__titre { font-size: var(--t-h2); margin-bottom: 1rem; color: inherit; }
.cta.fond--marine .cta__titre { color: #fff; }
.cta__texte { font-size: var(--t-chapo); margin-bottom: 1.75rem; }
.cta__ps { margin-top: 1.75rem; font-style: italic; max-width: 40rem; }
.cta.fond--marine .cta__ps { color: rgba(255, 255, 255, .9); }
.cta--photo { color: #fff; padding-block: clamp(6rem, 4rem + 8vw, 11rem); }
.cta--photo .cta__photo { position: absolute; inset: 0; z-index: -1; }
.cta--photo .cta__photo img, .cta--photo .cta__photo picture { width: 100%; height: 100%; object-fit: cover; }
.cta__voile { position: absolute; inset: 0; background: linear-gradient(to right, rgba(4, 56, 98, .88), rgba(4, 56, 98, .45)); }
.cta--photo .cta__titre { color: #fff; }

/* Boutique et cadeaux */
.produits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.produit img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--rayon-s); }
.produit__nom { margin-top: .6rem; font-size: 1.25rem; }
.produit__prix { font-weight: 700; color: var(--marine); }
@media (min-width: 64rem) { .produits { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cadeaux { text-align: left; }

/* Pages simples (légales, confirmation, erreurs) */
.page-simple { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--section); }
.page-simple h1 { font-size: var(--t-h2); margin-bottom: 1.25rem; }
.page-simple h2 { font-size: var(--t-h3); margin: 2.25rem 0 .75rem; }
.legal__titre { font-size: var(--t-h2); margin-bottom: 1.5rem; }
.legal__texte { max-width: none; }
.legal__texte h2 { font-family: var(--police-titre); font-size: var(--t-h3); margin: 2.25rem 0 .6rem; }
.legal__texte p, .legal__texte li { max-width: 46rem; }
.resa__retour { margin-bottom: 1.25rem; font-size: var(--t-petit); }
.resa__retour a { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; font-weight: 600; }
.alerte { margin: 0 0 1.5rem; padding: 1rem 1.25rem; border-radius: var(--rayon-m); border-left: 4px solid var(--ocean); background: #E6F2F8; color: var(--ardoise); }
.alerte:focus { outline: none; }
.alerte--erreur { background: #FDECEC; border-left-color: var(--meteo-rouge); color: #6E0007; }
.alerte__titre { font-weight: 700; }
.alerte__liste { margin: .5rem 0 0; padding-left: 1.1rem; }
.alerte a { color: inherit; }
.confirmation { padding: 1.5rem; margin-bottom: 2rem; border-radius: var(--rayon-m); background: var(--sable); }
.confirmation__ico { display: inline-flex; width: 3rem; height: 3rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--meteo-vert); color: #fff; margin-bottom: 1rem; }
.confirmation__ico .ico { width: 1.75rem; height: 1.75rem; stroke-width: 2.5; }
.confirmation__texte { font-size: var(--t-chapo); }
.reference { display: inline-flex; flex-direction: column; margin-top: 1rem; padding: .6rem 1rem; background: var(--blanc); border-radius: var(--rayon-s); border: 1px dashed var(--marine); }
.reference span { font-size: var(--t-petit); color: var(--texte-doux); }
.reference strong { font-family: var(--police-titre); font-size: 1.75rem; letter-spacing: .03em; color: var(--marine); }
.page-erreur__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.page-maintenance main { text-align: left; }
.page-maintenance img { width: 180px; margin-bottom: 2rem; }

/* Page Réserver */
.resa { padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) var(--section); }
.resa__entete { max-width: 46rem; margin-bottom: 1.75rem; }
.resa__titre { font-size: var(--t-h2); margin-bottom: .75rem; }
.resa__intro { font-size: 1.0625rem; color: var(--texte); }
.resa__grille { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 64rem) { .resa__grille { grid-template-columns: minmax(0, 1fr) 21rem; gap: 3rem; } }
.resa__form { display: grid; gap: 1rem; min-width: 0; }
.etape { border: 1px solid var(--filet); border-radius: var(--rayon-m); background: var(--blanc); }
.etape__titre { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; font-size: 1.5rem; }
.etape__num { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--marine); color: #fff; font-family: var(--police-texte); font-size: 1rem; font-weight: 700; flex: none; }
.etape__corps { display: grid; gap: 1.25rem; padding: 0 1.25rem 1.5rem; }
.etape__resume { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1.25rem 1rem 4.25rem; color: var(--texte); }
.etape__resume button { flex: none; }
.etape--fermee .etape__corps { display: none; }
.etape--faite .etape__num { background: var(--meteo-vert); }
.etape--active { border-color: var(--marine); box-shadow: 0 0 0 1px var(--marine); }
.etape__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.creneaux { display: grid; gap: .75rem; }
@media (min-width: 40rem) { .creneaux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.creneau { position: relative; display: block; cursor: pointer; }
.creneau input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.creneau__corps { display: grid; gap: .15rem; height: 100%; padding: .9rem 1rem; border: 1px solid #8995A1; border-radius: var(--rayon-m); background: #fff; }
.creneau input:checked + .creneau__corps { border-color: var(--marine); box-shadow: 0 0 0 2px var(--marine); background: #F2F7FA; }
.creneau input:focus-visible + .creneau__corps { outline: 3px solid var(--focus); outline-offset: 2px; }
.creneau input:disabled + .creneau__corps { opacity: .5; background: var(--sable); }
.creneau__nom { font-family: var(--police-titre); font-weight: 700; font-size: 1.375rem; color: var(--marine); }
.creneau__horaires { font-weight: 600; }
.creneau__sous { font-size: var(--t-petit); color: var(--texte-doux); }
.creneau__dispo { font-size: var(--t-petit); font-weight: 700; }
.creneau__dispo:empty { display: none; }
.info-jour:empty { display: none; }
.info-jour { display: grid; gap: .5rem; padding: .85rem 1rem; border-radius: var(--rayon-s); background: var(--sable); font-size: var(--t-petit); }
.info-jour p { display: flex; align-items: center; gap: .45rem; }

/* Calendrier (construit par reserver.js) */
.calendrier__entete { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.calendrier__mois { font-size: 1.5rem; }
.calendrier__nav { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--filet); border-radius: var(--rayon-s); background: #fff; color: var(--marine); }
.calendrier__nav[disabled] { opacity: .35; cursor: not-allowed; }
.calendrier table { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.calendrier th { padding: .25rem 0; font-size: .8125rem; font-weight: 600; color: var(--texte-doux); text-align: center; text-transform: capitalize; }
.calendrier td { padding: 0; }
.jour {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  width: 100%; min-height: 48px; aspect-ratio: 1; max-height: 64px; padding: 0; border: 1px solid var(--filet); border-radius: var(--rayon-s);
  background: #fff; color: var(--ardoise); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
}
.jour .puce { width: .55rem; height: .55rem; }
.jour .ico-meteo { position: absolute; top: 2px; right: 2px; width: .8rem; height: .8rem; }
.jour--libre { border-color: #9CC9AB; }
.jour--presque { border-color: #E2B48A; }
.jour--complet, .jour--ferme { background: var(--sable); color: #6B7884; cursor: not-allowed; }
.jour--complet { text-decoration: line-through; }
.jour--hors { visibility: hidden; }
.jour[aria-pressed="true"] { background: var(--marine); border-color: var(--marine); color: #fff; }
.jour[aria-pressed="true"] .puce--libre { background: #6FD08F; }
.jour:not([disabled]):hover { border-color: var(--marine); }
.calendrier__legende { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .75rem; font-size: .8125rem; }
.calendrier__legende span { display: inline-flex; align-items: center; gap: .3rem; }
.calendrier__charge { min-height: 18rem; display: flex; align-items: center; justify-content: center; color: var(--texte-doux); }

/* Personnes, formules, kayaks */
.compteur { display: inline-flex; align-items: stretch; border: 1px solid #8995A1; border-radius: var(--rayon-s); overflow: hidden; width: max-content; }
.compteur input { width: 4.5rem; border: 0; border-radius: 0; text-align: center; font-weight: 700; font-size: 1.25rem; -moz-appearance: textfield; }
.compteur input::-webkit-outer-spin-button, .compteur input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.compteur__bouton { display: inline-flex; align-items: center; justify-content: center; width: 48px; min-height: 48px; border: 0; background: var(--sable); color: var(--marine); }
.compteur__bouton:hover { background: var(--sable-fonce); }
.compteur__bouton[disabled] { opacity: .4; cursor: not-allowed; }
.compteur--petit input { width: 3.25rem; font-size: 1.125rem; }
.compteur--petit .compteur__bouton { width: 44px; min-height: 44px; }
.formules { display: grid; gap: .75rem; }
.formules__titre { font-weight: 700; }
.formule { display: flex; align-items: center; gap: 1rem; width: 100%; padding: .85rem 1rem; border: 1px solid #8995A1; border-radius: var(--rayon-m); background: #fff; text-align: left; }
.formule[aria-pressed="true"] { border-color: var(--marine); box-shadow: 0 0 0 2px var(--marine); background: #F2F7FA; }
.formule__photos { display: flex; flex: none; }
.formule__photos img { width: 64px; height: 48px; object-fit: cover; border-radius: var(--rayon-s); border: 2px solid #fff; }
.formule__photos img + img { margin-left: -18px; }
.formule__texte { display: grid; gap: .1rem; flex: 1; min-width: 0; }
.formule__nom { font-weight: 700; color: var(--marine); }
.formule__detail { font-size: var(--t-petit); color: var(--texte-doux); }
.formule__prix { font-family: var(--police-titre); font-weight: 700; font-size: 1.375rem; color: var(--marine); white-space: nowrap; }
.choix-precis summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--lien); text-decoration: underline; cursor: pointer; }
.choix-precis[open] summary { margin-bottom: .75rem; }
.kayaks-choix { display: grid; gap: 1rem; }
.kayaks-choix__liste { display: grid; gap: .75rem; }
.kayak-choix { position: relative; display: flex; align-items: center; gap: .9rem; padding: .75rem .9rem; border: 1px solid #8995A1; border-radius: var(--rayon-m); background: #fff; cursor: pointer; }
.kayak-choix input { flex: none; width: 1.35rem; height: 1.35rem; accent-color: var(--marine); }
.kayak-choix:has(input:checked) { border-color: var(--marine); box-shadow: 0 0 0 2px var(--marine); background: #F2F7FA; }
.kayak-choix--pris { opacity: .55; }
.kayak-choix__photo { width: 80px; height: 60px; object-fit: cover; border-radius: var(--rayon-s); flex: none; }
.kayak-choix__texte { display: grid; gap: .1rem; min-width: 0; }
.kayak-choix__nom { font-weight: 700; color: var(--marine); }
.kayak-choix__modele, .kayak-choix__etat { font-size: var(--t-petit); color: var(--texte-doux); }
.kayak-choix__prix { font-weight: 700; }
.alternatives { padding: 1rem; border-radius: var(--rayon-m); background: #FFF6E5; border-left: 4px solid var(--meteo-orange); }
.alternatives__titre { font-weight: 700; margin-bottom: .6rem; }
.alternatives__liste { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.alternative { width: 100%; min-height: 48px; padding: .65rem .9rem; border: 1px solid var(--marine); border-radius: var(--rayon-s); background: #fff; color: var(--marine); font-weight: 600; text-align: left; }
.alternative:hover { background: var(--marine); color: #fff; }
.alternatives__dernier { font-weight: 600; }
.options-choix { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.option-choix { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--filet); }
.option-choix__libelle { display: grid; font-weight: 600; }
.option-choix__prix { font-weight: 400; font-size: var(--t-petit); color: var(--texte-doux); }
.spot-du-jour { display: grid; gap: .5rem; }
.spot-du-jour__nom { font-family: var(--police-titre); font-weight: 700; font-size: 1.375rem; color: var(--marine); }
.spot-autre summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--lien); text-decoration: underline; cursor: pointer; }
.spot-autre fieldset { margin-top: .5rem; display: grid; gap: .5rem; }

/* Récapitulatif */
.recap { display: grid; gap: 1rem; padding: 1.125rem; border-radius: var(--rayon-m); background: var(--sable); }
.recap__liste { display: grid; gap: .45rem; }
.recap__liste div { display: flex; justify-content: space-between; gap: 1rem; }
.recap__liste dt { color: var(--texte-doux); }
.recap__liste dd { margin: 0; font-weight: 600; text-align: right; }
.recap__liste--page { padding: 1.25rem; border-radius: var(--rayon-m); background: var(--sable); margin-bottom: 1rem; }
.recap__liste--page .recap__total dd, .recap__liste--page .recap__total dt { font-weight: 700; color: var(--marine); }
.recap__lignes { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.recap__lignes th, .recap__lignes td { padding: .4rem 0; text-align: left; font-weight: 400; border-bottom: 1px solid var(--sable-fonce); vertical-align: top; }
.recap__lignes td { text-align: right; white-space: nowrap; padding-left: .75rem; }
.recap__lignes td[colspan] { text-align: left; color: var(--texte-doux); white-space: normal; }
.recap__total th, .recap__total td { font-weight: 700; font-size: 1.125rem; color: var(--marine); border-bottom: 0; padding-top: .75rem; }
.recap__caution { font-size: var(--t-petit); }
.recap__sous-titre { font-size: 1.375rem; }
.ensuite { display: grid; gap: .4rem; margin: 0; padding-left: 1.3rem; }
.resa__envoi { margin-top: .5rem; }
.resa__collant { position: sticky; top: calc(var(--entete) + 1rem); display: grid; gap: .75rem; padding: 1.125rem; border-radius: var(--rayon-m); background: var(--sable); }
.collant__ligne { font-weight: 700; color: var(--marine); }
.collant__detail { display: grid; gap: .3rem; font-size: var(--t-petit); }
.collant__lien { font-weight: 600; }
@media (max-width: 63.99rem) {
  .resa__collant {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    border-radius: 0; padding: .7rem var(--gouttiere) calc(.7rem + env(safe-area-inset-bottom)); background: var(--marine); color: #fff;
    box-shadow: 0 -6px 18px -12px rgba(4, 56, 98, .6);
  }
  .resa__collant .collant__ligne { color: #fff; font-size: 1rem; }
  .resa__collant .collant__detail { display: none; }
  .resa__collant .collant__lien { color: #fff; white-space: nowrap; }
  .page-reserver .pied { padding-bottom: 5rem; }
}

/* Pied de page */
.pied { background: var(--sable); color: var(--ardoise); padding: 3.5rem 0 1.5rem; font-size: var(--t-petit); }
.pied__grille { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .pied__grille { grid-template-columns: 1.1fr 1fr 1.3fr .9fr; gap: 2.5rem; } }
.pied__marque img { width: 170px; height: auto; }
.pied__nom { margin-top: .75rem; font-family: var(--police-titre); font-weight: 700; font-size: 1.25rem; color: var(--marine); }
.pied__petit { margin-top: .5rem; color: var(--texte-doux); }
.pied__titre { margin-bottom: .75rem; font-family: var(--police-titre); font-weight: 700; font-size: 1.25rem; color: var(--marine); }
.pied__liste { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.pied__liste li { display: flex; gap: .55rem; align-items: flex-start; }
.pied__liste .ico { color: var(--ocean); margin-top: .1rem; }
.pied__liste--simple li { display: block; }
.pied__liste a, .pied__langues a { display: inline-block; padding-block: .3rem; }
.pied__langues { margin-top: 1rem; }
.pied__langues a[aria-current] { font-weight: 700; color: var(--marine); text-decoration: none; }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--sable-fonce); color: var(--texte-doux); }
.pied__espace { color: var(--texte-doux); }

/* Impression : le récapitulatif et la confirmation restent lisibles */
@media print {
  .entete, .pied, .resa__collant, .menu-mobile, .evitement, .bandeau { display: none !important; }
  body { font-size: 11pt; }
  a { color: inherit; }
}