/* =========================================================
   C2 SERVICES : refonte
   Couleurs de marque : lin #E9DDDB, pêche #F39854, olive #718878.
   Titres en Clash Display, texte en Satoshi.
   Formes : panneaux et images en coins de 22px, tout ce qui se
   clique (boutons, onglets, puces) en pilule ou en cercle.
   Couches : remonter 90, menu 95, en-tête 100, modale 200,
   rideau 220, chargement 230, grain 250, lien d'évitement 300.
   ========================================================= */

:root {
  --lin: #E9DDDB;
  --lin-clair: #F1E8E5;
  --craie: #FBF7F5;
  --carte: #FFFDFB;
  --peche: #F39854;
  --peche-voile: #F6E4D4;
  --peche-texte: #A9541A;
  --olive: #718878;
  --olive-voile: #C4CFC6;
  --sauge: #D7E0D8;
  --olive-fonce: #38463F;
  --olive-nuit: #2B372F;
  --encre: #33403A;
  --doux: #56605A;
  --filet: rgba(56, 70, 63, 0.14);
  --filet-fort: rgba(56, 70, 63, 0.26);

  --display: "Clash Display", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --texte: "Satoshi", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --gout: clamp(1.15rem, 4vw, 3.5rem);
  --max: 1440px;
  --r: 22px;
  --r-grand: clamp(22px, 2.4vw, 34px);
  --entete: 84px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
}

@media (max-width: 960px) {
  :root { --entete: 72px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; color-scheme: light; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--lin);
  color: var(--encre);
  font-family: var(--texte);
  font-size: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.est-bloquee { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, fieldset { margin: 0; }
ul, ol { list-style: none; padding: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--olive-fonce);
  text-wrap: balance;
  word-spacing: 0.05em;
}

/* Clash Display a des espaces étroites : on les ouvre un peu partout où il sert. */
.manifeste__texte, .panneau__titre, .principe__titre, .coord__valeur,
.bandeau__groupe, .marque__nom, .menu__liens a, .rideau__titre { word-spacing: 0.06em; }

::selection { background: var(--peche); color: var(--olive-nuit); }

:focus-visible {
  outline: 2px solid var(--olive-fonce);
  outline-offset: 4px;
  border-radius: 8px;
}

.saut {
  position: fixed; left: 1rem; top: -5rem; z-index: 300;
  background: var(--olive-fonce); color: var(--craie);
  padding: 0.8rem 1.3rem; border-radius: 999px; font-weight: 500;
  transition: top 0.3s var(--ease);
}
.saut:focus { top: 1rem; }

.enveloppe {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gout);
}

/* Grain : posé une fois, fixe, sans aucun coût au défilement. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 250;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .25 0 0 0 0 .22 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Découpage du texte ---------- */
.mot {
  display: inline-block;
  vertical-align: top;
  overflow: clip;
  padding: 0.1em 0.03em 0.12em;
  margin: -0.1em -0.03em -0.12em;
  text-indent: 0;
  white-space: nowrap;
}
.lettre, .mot__in { display: inline-block; }

/* ---------- Petits textes ---------- */
.surtitre {
  font-family: var(--texte);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive-fonce);
}

.titre-section { font-size: clamp(2.6rem, 6.6vw, 6.4rem); letter-spacing: -0.04em; }

/* ---------- Boutons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 1.05rem 1.6rem;
  border-radius: 999px;
  background: var(--olive-fonce);
  color: var(--craie);
  font-weight: 500; font-size: 1rem; line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.5s var(--ease);
}
.btn__fond {
  position: absolute; z-index: -1;
  left: var(--x, 50%); top: var(--y, 50%);
  width: 260%; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--peche);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.7s var(--ease);
  pointer-events: none;
}
.btn:hover .btn__fond, .btn:focus-visible .btn__fond { transform: translate(-50%, -50%) scale(1); }
.btn:hover, .btn:focus-visible { color: var(--olive-nuit); }
.btn--peche { background: var(--peche); color: var(--olive-nuit); }
.btn--peche .btn__fond { background: var(--olive-fonce); }
.btn--peche:hover, .btn--peche:focus-visible { color: var(--craie); }
.btn__texte { display: inline-block; transition: transform 0.2s; }
.btn:active .btn__texte { transform: scale(0.96); }
.fleche {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.6s var(--ease);
}
.btn:hover .fleche { transform: rotate(-45deg); }

.lien {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding-block: 0.3rem;
  font-weight: 500;
  color: var(--olive-fonce);
}
.lien::before, .lien::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px; background: currentColor;
  transition: transform 0.6s var(--ease);
}
.lien::after { transform-origin: right; }
.lien::before { transform: scaleX(0); transform-origin: left; }
.lien:hover::after { transform: scaleX(0); }
.lien:hover::before { transform: scaleX(1); transition-delay: 0.22s; }
.lien:hover .fleche { transform: translateX(4px); }

/* Texte qui roule au survol : la copie attend sous la ligne. */
.roulant { display: inline-flex; overflow: hidden; vertical-align: top; line-height: 1.25; }
.roulant > span { position: relative; display: block; transition: transform 0.55s var(--ease); }
.roulant > span::after { content: attr(data-t); position: absolute; left: 0; top: 100%; }
.roulant:hover > span, a:hover > .roulant > span, a:focus-visible > .roulant > span { transform: translateY(-100%); }

/* ---------- Chargement ---------- */
.chargement {
  position: fixed; inset: 0; z-index: 230;
  display: grid; place-items: center;
  background: var(--craie);
  --trou: 0px;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--trou), #000 calc(var(--trou) + 0.5px));
  mask: radial-gradient(circle at 50% 50%, transparent var(--trou), #000 calc(var(--trou) + 0.5px));
  animation: secours 0.01s 7s forwards;
}
html:not(.js) .chargement { display: none; }
@keyframes secours { to { visibility: hidden; opacity: 0; } }
.chargement__anneaux { width: min(38vmin, 300px); overflow: visible; }
.chargement__anneaux circle { fill: none; stroke-width: 1.4; stroke-dasharray: 1 1; }
.chargement .a-peche { stroke: var(--peche); }
.chargement .a-olive { stroke: var(--olive); }
.chargement .a-point { fill: var(--peche); stroke: none; }
.chargement__nom {
  position: absolute; left: 0; right: 0; bottom: 11vh;
  text-align: center; overflow: hidden;
  font-family: var(--display); font-weight: 500;
  font-size: 1.15rem; letter-spacing: 0.01em;
  color: var(--olive-fonce);
}
.chargement__nom span { display: inline-block; }

/* ---------- Rideau entre les pages ---------- */
.rideau { position: fixed; inset: 0; z-index: 220; pointer-events: none; visibility: hidden; }
.rideau.est-actif { pointer-events: auto; }
.rideau__couche { position: absolute; inset: 0; }
.rideau__couche--peche { background: var(--peche); }
.rideau__couche--lin { background: var(--lin-clair); display: grid; place-items: center; }
.rideau__titre {
  overflow: hidden;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(3rem, 10vw, 9rem); line-height: 1.05; letter-spacing: -0.045em;
  color: var(--olive-fonce);
  padding: 0 0.1em;
}
.rideau__titre span { display: inline-block; }

/* ---------- En-tête ---------- */
.entete {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--entete);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 var(--gout);
  transition: transform 0.7s var(--ease);
}
.entete::before {
  content: "";
  position: absolute; z-index: -1;
  inset: 0.55rem calc(var(--gout) - 0.9rem);
  border-radius: 999px;
  background: rgba(241, 232, 229, 0.74);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 14px 34px -22px rgba(56, 70, 63, 0.45);
  opacity: 0; transform: scale(0.97);
  transition: opacity 0.5s, transform 0.7s var(--ease);
}
.entete.est-ancree::before { opacity: 1; transform: none; }
.entete.est-masquee { transform: translateY(-115%); }
body.menu-ouvert .entete::before { opacity: 0; }

.marque { display: flex; align-items: center; gap: 0.7rem; flex: none; }
.marque img { width: 44px; height: auto; transition: transform 0.9s var(--ease); }
.marque:hover img { transform: rotate(-30deg); }
.marque__nom {
  font-family: var(--display); font-weight: 500;
  font-size: 1.22rem; letter-spacing: -0.01em;
  color: var(--olive-fonce);
}

.nav { margin-left: auto; display: flex; align-items: center; gap: 0.15rem; }
.nav a {
  padding: 0.6rem 0.9rem; border-radius: 999px;
  font-weight: 500; font-size: 0.98rem; color: var(--olive-fonce);
  transition: background 0.4s;
}
.nav a:hover { background: rgba(56, 70, 63, 0.06); }
.nav a[aria-current="page"] { background: rgba(56, 70, 63, 0.1); }
.entete__cta { margin-left: 0.6rem; padding: 0.9rem 1.35rem; }

.burger {
  display: none;
  margin-left: auto;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--olive-fonce);
  position: relative;
}
.burger span {
  position: absolute; left: 50%; top: 50%;
  width: 1.15rem; height: 1.5px; background: var(--craie);
  transition: transform 0.6s var(--ease);
}
.burger span:first-child { transform: translate(-50%, -4px); }
.burger span:last-child { transform: translate(-50%, 4px); }
.burger[aria-expanded="true"] span:first-child { transform: translate(-50%, 0) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translate(-50%, 0) rotate(-45deg); }

@media (max-width: 960px) {
  .nav, .entete__cta { display: none; }
  .burger { display: block; }
  .marque img { width: 38px; }
}

/* Menu plein écran (mobile) */
.menu {
  position: fixed; inset: 0; z-index: 95;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: calc(var(--entete) + 2.5rem) var(--gout) 2rem;
  background: var(--lin-clair);
  clip-path: circle(0% at calc(100% - var(--gout) - 1.5rem) calc(var(--entete) / 2));
  visibility: hidden;
  transition: clip-path 0.9s var(--ease-io), visibility 0s 0.9s;
}
.menu.est-ouvert {
  clip-path: circle(150% at calc(100% - var(--gout) - 1.5rem) calc(var(--entete) / 2));
  visibility: visible;
  transition: clip-path 0.9s var(--ease-io);
}
.menu__liens { display: grid; gap: 0.2rem; }
.menu__liens a {
  display: block; overflow: hidden;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.6rem, 12vw, 4.6rem); line-height: 1.08; letter-spacing: -0.04em;
  color: var(--olive-fonce);
}
.menu__liens a span { display: inline-block; transform: translateY(105%); transition: transform 0.9s var(--ease); }
.menu.est-ouvert .menu__liens a span { transform: none; transition-delay: calc(0.25s + var(--i) * 0.06s); }
.menu__liens a[aria-current="page"] span { color: var(--peche-texte); }
.menu__pied { display: grid; gap: 0.3rem; font-weight: 500; color: var(--olive-fonce); }
.menu__pied .btn { justify-self: start; margin-bottom: 1rem; }

/* ---------- Pages ---------- */
.js .page:not(.est-active) { display: none; }

/* ---------- Héro ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--entete) + 1.5rem) 0 clamp(1.8rem, 5vh, 3.4rem);
  overflow: clip;
}

/* Deux colonnes : le titre à gauche, le logo dans ses anneaux à droite.
   Le titre se règle sur la largeur de sa colonne (cqi), il ne déborde
   donc jamais sur les anneaux. */
.hero__grille {
  --visuel: min(38vw, 66vh, 600px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--visuel);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.hero__texte { container-type: inline-size; min-width: 0; }

.hero__visuel {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 1;
  pointer-events: none;
}
.hero__anneaux {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.hero__anneaux circle { fill: none; stroke-width: 0.42; }
.hero__logo {
  position: relative;
  width: 46%; height: auto;
  filter: drop-shadow(0 18px 40px rgba(56, 70, 63, 0.13));
}
.trace { stroke-dasharray: 1 1; }
.a-peche { stroke: var(--peche); }
.a-olive { stroke: var(--olive); }
.a-point { fill: var(--peche) !important; stroke: none !important; }

.hero__titre {
  display: grid;
  font-size: clamp(2.6rem, 7vw, 9rem);
  font-size: clamp(2.4rem, min(15.4cqi, 13vh), 9rem);
  line-height: 0.9;
  letter-spacing: -0.048em;
  text-wrap: nowrap;
}
.ligne { display: block; white-space: nowrap; }
.ligne--retrait { padding-left: 0.8em; }
.ligne--droite { justify-self: end; margin-right: 0.3em; }

.entoure { position: relative; display: inline-block; }
.entoure__trait {
  position: absolute; z-index: -1;
  left: -11.3%; top: -24%;
  width: 124%; max-width: none; height: 136%;
  overflow: visible; pointer-events: none;
}
.entoure__trait path {
  fill: none; stroke: var(--peche);
  stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1;
}

.hero__bas {
  display: grid; justify-items: start;
  gap: 1.6rem;
  margin-top: clamp(1.8rem, 5vh, 3.2rem);
}
.hero__accroche { max-width: 34ch; font-size: clamp(1.05rem, 1.25vw, 1.28rem); line-height: 1.5; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; }

/* Mobile : le logo passe au-dessus du titre. */
@media (max-width: 760px) {
  .hero { align-items: flex-start; }
  .hero__grille { grid-template-columns: minmax(0, 1fr); gap: clamp(1.6rem, 6vw, 2.4rem); }
  .hero__visuel { order: -1; width: min(64vw, 290px); justify-self: center; }
  .hero__titre { font-size: clamp(2.3rem, 15.4cqi, 4.6rem); }
  .ligne--retrait { padding-left: 0.5em; }
}

/* ---------- Manifeste ---------- */
.manifeste { padding: clamp(5rem, 11vw, 9rem) 0 clamp(3.5rem, 7vw, 6rem); }
.manifeste__grille {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
}
.manifeste__tete { display: grid; gap: 1.3rem; }
.manifeste__titre { font-size: clamp(2.1rem, 3.7vw, 3.6rem); line-height: 1; letter-spacing: -0.035em; }
.manifeste__titre .entoure { margin-left: 0.15em; }
.manifeste__titre .entoure__trait path { stroke-width: 5; }
.manifeste__corps { padding-top: 2.1rem; }
.manifeste__texte {
  max-width: 29em;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.2rem, 1.6vw, 1.55rem);
  line-height: 1.42; letter-spacing: -0.01em;
  color: var(--olive-fonce);
  text-wrap: pretty;
}
.manifeste__texte .marque-mot {
  background: linear-gradient(var(--peche), var(--peche)) 0 92% / var(--trait, 100%) 0.14em no-repeat;
}
.manifeste__pied {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2.5rem;
  margin-top: clamp(1.8rem, 3.5vw, 2.8rem);
  padding-top: clamp(1.3rem, 2.5vw, 1.8rem);
  border-top: 1px solid var(--filet-fort);
}
.manifeste__pied p { max-width: 34ch; color: var(--doux); }

@media (max-width: 860px) {
  .manifeste__grille { grid-template-columns: 1fr; gap: 1.8rem; }
  .manifeste__corps { padding-top: 0; }
}

/* ---------- Engagements ---------- */
.engagements { padding: clamp(3rem, 7vw, 6rem) 0 clamp(6rem, 12vw, 10rem); }
.engagements__tete { margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.engagements__grille {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  grid-auto-rows: minmax(9.5rem, auto);
  gap: clamp(0.9rem, 1.8vw, 1.5rem);
}
.engagement:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.engagement:nth-child(2) { grid-column: 2; grid-row: 2 / span 2; }
.engagement:nth-child(3) { grid-column: 1; grid-row: 3 / span 2; }
.engagement:nth-child(4) { grid-column: 2; grid-row: 4 / span 2; }

.engagement {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.7rem;
  min-height: 19rem;
  padding: clamp(1.5rem, 3vw, 2.6rem);
  border-radius: var(--r);
  overflow: hidden;
  isolation: isolate;
}
.engagement__corps { transition: transform 0.8s var(--ease); }
.engagement:hover .engagement__corps { transform: translateY(-6px); }
.engagement--craie { background: var(--craie); }
.engagement--sauge { background: var(--sauge); }
.engagement--peche { background: var(--peche); }
.engagement--voile { background: var(--peche-voile); }
.engagement h3 { font-size: clamp(1.9rem, 3.3vw, 3.2rem); letter-spacing: -0.035em; }
.engagement p { margin-top: 0.7rem; max-width: 26ch; color: var(--doux); }
.engagement--peche p { color: var(--olive-nuit); }

.art {
  position: absolute;
  top: clamp(1.2rem, 2.6vw, 2.2rem); right: clamp(1.2rem, 2.6vw, 2.2rem);
  width: clamp(6rem, 11vw, 9.6rem);
  overflow: visible;
}
.art * { fill: none; stroke: var(--olive-fonce); stroke-width: 1.6; stroke-linecap: round; }
.art .plein { fill: var(--peche); stroke: none; }
.engagement--peche .art .plein { fill: var(--craie); }
.art .p-peche { stroke: var(--peche); }
.engagement--peche .art .p-peche { stroke: var(--craie); }
.art g, .art circle, .art path, .art line { transform-box: view-box; transform-origin: 60px 60px; transition: transform 1.1s var(--ease), stroke-dashoffset 1.3s var(--ease); }

.art--horloge .aiguille { transform: rotate(0deg); }
.engagement:hover .art--horloge .aiguille { transform: rotate(360deg); }
.art--horloge .tic { stroke-dasharray: 1 1; }

.art--mesure .m-a { transform: translate(-6px, 5px); }
.art--mesure .m-b { transform: translate(6px, -5px); }
.engagement:hover .art--mesure .m-a,
.engagement:hover .art--mesure .m-b { transform: translate(0, 0); }

.art--trace .pointille { stroke-dasharray: 3 6; }
.art--trace .arc { stroke-dasharray: 1 1; stroke-dashoffset: 0.72; stroke: var(--peche); stroke-width: 3; }
.engagement:hover .art--trace .arc { stroke-dashoffset: 0; }
.art--trace .rot { transform: rotate(0deg); }
.engagement:hover .art--trace .rot { transform: rotate(-260deg); }

.art--duo .d-a { transform: translateX(-16px); }
.art--duo .d-b { transform: translateX(16px); }
.art--duo .plein { transform: scale(0); transform-origin: 98px 96px; }
.engagement:hover .art--duo .d-a, .engagement:hover .art--duo .d-b { transform: translateX(0); }
.engagement:hover .art--duo .plein { transform: scale(1); transition-delay: 0.35s; }

@media (max-width: 760px) {
  .engagements__grille { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .engagement:nth-child(n) { grid-column: 1; grid-row: auto; min-height: 16rem; }
}

/* ---------- Prestations en défilement horizontal ---------- */
.defile { position: relative; padding: clamp(3rem, 7vw, 6rem) 0; }
.defile__piste { display: grid; gap: 1.1rem; padding-inline: var(--gout); }
.defile__intro { display: flex; flex-direction: column; gap: 1.4rem; padding-bottom: 1.5rem; }
.defile__intro h2 { font-size: clamp(3rem, 7vw, 7.4rem); letter-spacing: -0.045em; line-height: 0.88; }
.defile__intro p { max-width: 30ch; color: var(--doux); }

.panneau {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 30rem;
  border-radius: var(--r);
  overflow: hidden;
  isolation: isolate;
  background: var(--craie);
}
.panneau__media { position: relative; flex: 1; min-height: 15rem; overflow: hidden; }
.panneau__media img {
  position: absolute; top: 0; left: -12%;
  width: 124%; max-width: none; height: 100%;
  object-fit: cover;
  transition: scale 1.2s var(--ease);
}
.panneau:hover .panneau__media img { scale: 1.07; }
.panneau__texte { position: relative; display: grid; gap: 0.55rem; padding: 1.5rem 1.6rem 1.7rem; }
.panneau__titre {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.75rem, 2.5vw, 2.5rem); line-height: 1; letter-spacing: -0.03em;
  color: var(--olive-fonce);
}
.panneau__note { max-width: 34ch; color: var(--doux); font-size: 0.98rem; line-height: 1.5; }
.panneau__fleche {
  position: absolute; top: 1.1rem; right: 1.1rem; z-index: 2;
  width: 3.3rem; height: 3.3rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--craie); color: var(--olive-fonce);
  transition: transform 0.7s var(--ease), background 0.4s;
}
.panneau:hover .panneau__fleche { transform: rotate(-45deg) scale(1.08); background: var(--peche); }
.panneau--peche { background: var(--peche); }
.panneau--peche .panneau__note { color: var(--olive-nuit); }
.panneau--sauge { background: var(--sauge); }
.panneau--voile { background: var(--peche-voile); }

@media (min-width: 900px) {
  .defile__piste { grid-template-columns: repeat(2, 1fr); }
  .defile__intro { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  html:not(.anim) .defile__piste {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
  }
  html:not(.anim) .panneau { flex: 0 0 min(28rem, 40vw); scroll-snap-align: start; }
  .anim .defile { height: 100vh; padding: 0; display: flex; align-items: center; overflow: hidden; }
  .anim .defile__piste {
    display: flex; align-items: stretch; gap: 1.5vw;
    width: max-content;
    height: min(76vh, 42rem);
  }
  .anim .defile__intro {
    width: min(40vw, 38rem);
    justify-content: flex-end;
    padding: 0 3vw 0 0;
  }
  .anim .panneau { width: clamp(21rem, 30vw, 30rem); min-height: 0; }
}

/* ---------- Vue aérienne ---------- */
.aerien { position: relative; }
.aerien__colle { position: relative; padding: clamp(3rem, 7vw, 6rem) 0 0; }
.aerien__titre { font-size: clamp(2.8rem, 8.4vw, 8.2rem); letter-spacing: -0.045em; line-height: 0.88; margin-bottom: 2rem; }
.aerien__cadre {
  max-width: var(--max); margin-inline: auto;
  width: calc(100% - 2 * var(--gout));
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  overflow: hidden;
}
.aerien__cadre img { width: 100%; height: 100%; object-fit: cover; }
.anim .aerien__colle { height: 100svh; padding: 0; overflow: hidden; }
.anim .aerien__titre-env { position: absolute; left: 0; right: 0; top: calc(var(--entete) + 4vh); }
.anim .aerien__titre { margin: 0; }
.anim .aerien__cadre { position: absolute; inset: 0; width: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; }

/* ---------- Bandeau des communes ---------- */
.bandeau { padding: clamp(2rem, 4.5vw, 3.5rem) 0 clamp(0.8rem, 2vw, 1.5rem); overflow: clip; }
.bandeau__piste { display: flex; width: max-content; will-change: transform; }
.bandeau__groupe {
  display: flex; align-items: center; flex: none;
  gap: clamp(1.2rem, 2.6vw, 2.6rem);
  padding-right: clamp(1.2rem, 2.6vw, 2.6rem);
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2rem, 4.6vw, 4.4rem); line-height: 1.1; letter-spacing: -0.035em;
  color: var(--olive-fonce);
  white-space: nowrap;
}
.bandeau__groupe .creux { color: transparent; -webkit-text-stroke: 1.2px var(--olive-fonce); }
.bandeau__groupe i { flex: none; width: 0.2em; height: 0.2em; border-radius: 50%; background: var(--peche); }

/* ---------- Carte des zones ---------- */
.zones { padding: clamp(4rem, 9vw, 8rem) 0; }
.zones__tete { display: grid; gap: 1.4rem; margin-bottom: clamp(2rem, 5vw, 4rem); }
.zones__tete p { max-width: 34ch; color: var(--doux); }
.zc-bloc { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.2rem, 3.5vw, 3.5rem); align-items: start; }
.zc { position: relative; padding: clamp(1rem, 2.4vw, 2rem); border-radius: var(--r-grand); background: var(--craie); }
.zc__onglets { display: inline-flex; gap: 0.2rem; padding: 0.3rem; margin-bottom: 1rem; border-radius: 999px; background: var(--lin); }
.zc__onglet {
  padding: 0.6rem 1.1rem; border-radius: 999px; white-space: nowrap;
  font-weight: 500; font-size: 0.92rem; color: var(--olive-fonce);
  transition: background 0.4s, color 0.4s;
}
.zc__onglet:hover { background: rgba(56, 70, 63, 0.08); }
.zc__onglet.est-actif { background: var(--olive-fonce); color: var(--craie); }
.zc__scene { position: relative; }
.zc__svg { display: none; width: 100%; height: auto; overflow: visible; }
.zc__svg.est-visible { display: block; }
.z { stroke: var(--craie); stroke-width: 1.3; stroke-linejoin: round; cursor: pointer; transition: fill 0.45s, opacity 0.45s; }
.z--toulouse { fill: var(--peche); }
.z--agglo { fill: var(--olive-voile); }
.z.est-survolee { fill: var(--olive-fonce); }
.zc.est-filtree .z { opacity: 0.2; }
.zc.est-filtree .z.est-active { opacity: 1; }
.et { font-family: var(--texte); font-size: 8px; font-weight: 700; fill: var(--olive-nuit); text-anchor: middle; pointer-events: none; transition: opacity 0.4s, fill 0.3s; }
.et--agglo { font-size: 6.6px; }
.zc.est-filtree .et { opacity: 0.25; }
.zc.est-filtree .et.est-active { opacity: 1; }
.zc__info { display: grid; gap: 0.25rem; margin-top: 1rem; font-size: 0.95rem; min-height: 3.2em; }
.zc__ligne { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; }
.zc__ligne > span { font-weight: 700; color: var(--olive-fonce); }

.zones-services { display: grid; gap: 0.6rem; }
.zone-service {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  column-gap: 1rem; row-gap: 0.15rem;
  padding: 1.05rem 1.25rem;
  border-radius: var(--r);
  background: var(--craie);
  outline-offset: 3px;
  transition: background 0.45s, transform 0.7s var(--ease);
}
.zone-service:hover, .zone-service:focus-visible { background: var(--peche); transform: translateX(10px); }
.zone-service h3 { font-size: clamp(1.2rem, 1.6vw, 1.55rem); letter-spacing: -0.02em; line-height: 1.1; }
.zone-service__note { grid-column: 2; font-size: 0.9rem; color: var(--doux); }
.zone-service:hover .zone-service__note, .zone-service:focus-visible .zone-service__note { color: var(--olive-nuit); }
.zone-service__marque {
  grid-row: span 2;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--olive-fonce);
  transition: background 0.4s;
}
.zone-service:hover .zone-service__marque { background: var(--olive-fonce); }
.zone-service__marque svg { width: 1.05rem; fill: none; stroke: var(--olive-fonce); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.4s; }
.zone-service:hover .zone-service__marque svg { stroke: var(--craie); }

@media (max-width: 860px) {
  .zc-bloc { grid-template-columns: 1fr; }
}

/* ---------- Confiance (accueil) ---------- */
.confiance { padding: clamp(4rem, 8vw, 7rem) 0 clamp(2rem, 5vw, 4rem); }
.confiance__grille { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 2rem 4rem; align-items: center; }
.confiance h2 { font-size: clamp(2.2rem, 4.4vw, 4.2rem); letter-spacing: -0.04em; }
.confiance .lien { margin-top: 1.5rem; }
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2.2rem 3rem; }
.logos li { display: grid; place-items: center; }
.logos img {
  height: var(--h); width: auto;
  filter: grayscale(1) contrast(0.95);
  opacity: 0.72;
  mix-blend-mode: multiply;
  transition: filter 0.5s, opacity 0.5s, transform 0.8s var(--ease);
}
.logos li:hover img { filter: none; opacity: 1; transform: scale(1.08) rotate(-3deg); }
@media (max-width: 860px) {
  .confiance__grille { grid-template-columns: 1fr; }
  .logos { justify-content: flex-start; }
}

/* ---------- Appel au devis (commun aux pages) ---------- */
.appel { padding: clamp(4rem, 8vw, 7rem) 0 clamp(3.5rem, 7vw, 6rem); }
.appel[hidden] { display: none; }
.appel__panneau {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  align-items: end;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(2rem, 5vw, 4.5rem);
  border-radius: var(--r-grand);
  background: var(--craie);
  overflow: clip;
  isolation: isolate;
}
.appel__anneaux {
  position: absolute; z-index: -1;
  right: -9%; top: -38%;
  width: min(56vw, 640px);
  overflow: visible; pointer-events: none;
  opacity: 0.7;
}
.appel__anneaux circle { fill: none; stroke-width: 0.32; }
.appel__titre { margin-top: 1.1rem; max-width: 13em; font-size: clamp(2.1rem, 4.2vw, 4rem); line-height: 1; letter-spacing: -0.035em; }
.appel__note { max-width: 36ch; margin-top: clamp(1rem, 2vw, 1.4rem); color: var(--doux); }
.appel__actions { display: grid; gap: 0.75rem; }
.appel__actions .btn { justify-content: space-between; padding-block: 1.2rem; }
.appel__ou { margin-top: 0.4rem; font-size: 0.9rem; color: var(--doux); text-align: center; }
.appel__tels { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.appel__tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.85rem 0.6rem;
  border: 1px solid var(--filet-fort); border-radius: 999px;
  background: var(--craie);
  font-weight: 500; font-size: 0.95rem; white-space: nowrap;
  color: var(--olive-fonce);
  transition: background 0.4s, border-color 0.4s, color 0.4s;
}
.appel__tel svg { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.appel__tel:hover, .appel__tel:focus-visible { background: var(--olive-fonce); border-color: var(--olive-fonce); color: var(--craie); }

@media (max-width: 860px) {
  .appel__panneau { grid-template-columns: 1fr; }
  .appel__anneaux { width: 110vw; right: -45%; top: -20%; }
}
@media (max-width: 380px) {
  .appel__tels { grid-template-columns: 1fr; }
}

/* ---------- Têtes de page ---------- */
.tete-page { position: relative; padding: calc(var(--entete) + clamp(3.5rem, 11vh, 8rem)) 0 clamp(3rem, 7vw, 6rem); overflow: clip; }
.tete-page__anneaux { position: absolute; right: -9vw; top: -8vw; width: min(52vw, 720px); overflow: visible; pointer-events: none; }
.tete-page__anneaux circle { fill: none; stroke-width: 0.45; }
.tete-page .enveloppe { position: relative; }
.fil { margin-bottom: 1.6rem; font-size: 0.92rem; color: var(--doux); }
.fil a { color: var(--olive-fonce); font-weight: 500; }
.fil a:hover { text-decoration: underline; text-underline-offset: 3px; }
.titre-page { font-size: clamp(3.2rem, 10.6vw, 10.6rem); line-height: 0.88; letter-spacing: -0.05em; }
.tete-page__chapeau { margin-top: clamp(1.6rem, 3vw, 2.4rem); max-width: 40ch; font-size: clamp(1.1rem, 1.5vw, 1.42rem); line-height: 1.5; }

/* ---------- Fiches prestations empilées ---------- */
.pile { padding: 0 0 clamp(4rem, 8vw, 7rem); }
.pile .enveloppe > .fiche + .ancre { margin-top: 1.4rem; }
.ancre { display: block; height: 0; }
.fiche {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.4rem, 3.4vw, 3.2rem);
  border-radius: var(--r-grand);
  overflow: hidden;
  transform-origin: 50% 0;
}
.fiche--craie { background: var(--craie); }
.fiche--sauge { background: var(--sauge); }
.fiche--voile { background: var(--peche-voile); }
.fiche--carte { background: var(--carte); }
.fiche--peche { background: var(--peche); }
.fiche__voile { position: absolute; inset: 0; z-index: 3; background: var(--lin); opacity: 0; pointer-events: none; }
.fiche__texte { display: flex; flex-direction: column; gap: 1.2rem; }
.fiche h2 { font-size: clamp(2.3rem, 4.6vw, 4.6rem); letter-spacing: -0.04em; }
.fiche__intro { max-width: 36ch; font-size: clamp(1.08rem, 1.35vw, 1.3rem); line-height: 1.5; }
.fiche ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.8rem; margin-top: auto; padding-top: 1rem; }
.fiche li { display: flex; gap: 0.75rem; align-items: baseline; line-height: 1.4; }
.fiche li::before {
  content: ""; flex: none;
  width: 0.62rem; height: 0.62rem; border-radius: 50%;
  border: 1.5px solid var(--olive-fonce);
  transform: translateY(0.02em);
}
.fiche--peche li::before { border-color: var(--olive-nuit); }
.fiche__zone {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.95rem; border-radius: 999px;
  border: 1.5px solid var(--olive-fonce);
  font-size: 0.85rem; font-weight: 700; color: var(--olive-fonce);
}
.fiche__media { position: relative; min-height: 22rem; border-radius: calc(var(--r-grand) - 8px); overflow: hidden; }
.fiche__media img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; }

@media (min-width: 900px) and (min-height: 640px) {
  .fiche {
    position: sticky;
    top: calc(var(--entete) + 0.4rem + var(--i, 0) * 14px);
    min-height: calc(100vh - var(--entete) - 2.5rem - var(--i, 0) * 14px);
  }
}
@media (max-width: 899px) {
  .fiche { grid-template-columns: 1fr; }
  .fiche__media { min-height: 16rem; order: -1; }
}
@media (max-width: 520px) {
  .fiche ul { grid-template-columns: 1fr; }
}

/* ---------- Références ---------- */
.refs { padding: 0 0 clamp(5rem, 10vw, 8rem); }
.refs__groupe + .refs__groupe { margin-top: clamp(4rem, 8vw, 7rem); }
.refs__titre { margin-bottom: clamp(1.4rem, 3vw, 2.4rem); font-size: clamp(2rem, 4vw, 3.8rem); letter-spacing: -0.04em; }
.tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.7rem, 1.4vw, 1.2rem); }
.tuile { perspective: 900px; }
.tuile__in {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 1 / 1.08;
  padding: 1.4rem;
  border-radius: var(--r);
  background: var(--craie);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.8s var(--ease), background 0.5s;
  overflow: hidden;
}
.tuile__in.est-suivie { transition: transform 0.18s linear, background 0.5s; }
.tuile__in::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.85), transparent 46%);
  opacity: 0; transition: opacity 0.5s;
  pointer-events: none;
}
.tuile__in:hover { background: var(--carte); }
.tuile__in:hover::after { opacity: 1; }
.tuile img { height: var(--h); width: auto; max-width: 82%; object-fit: contain; transition: transform 0.8s var(--ease); }
.tuile__in:hover img { transform: scale(1.06); }
.refs__appel { display: flex; justify-content: center; margin-top: clamp(3rem, 6vw, 5rem); }
@media (max-width: 800px) {
  .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tuile img { height: calc(var(--h) * 0.72); }
}

/* ---------- À propos : deux anneaux ---------- */
.duo { position: relative; }
.duo__scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr);
  grid-template-areas: "svg svg svg" "g c d";
  align-items: start;
  gap: 1.5rem 2rem;
  max-width: var(--max); margin-inline: auto;
  padding: clamp(2rem, 5vw, 4rem) var(--gout);
}
.anim .duo__scene { min-height: 100svh; align-content: center; padding-top: calc(var(--entete) + 1rem); }
.duo__svg { grid-area: svg; width: 100%; max-height: 52vh; overflow: visible; }
.duo__svg circle { fill: none; stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.da-peche { stroke: var(--peche); }
.da-olive { stroke: var(--olive); }
.da-point { fill: var(--peche) !important; stroke: none !important; }
.duo__nom { grid-area: g; }
.duo__nom--d { grid-area: d; text-align: right; }
.duo__nom h2 { margin-top: 0.5rem; font-size: clamp(1.5rem, 2.6vw, 2.6rem); letter-spacing: -0.03em; }
.duo__centre { grid-area: c; text-align: center; }
.duo__centre h2 { font-size: clamp(2rem, 4.2vw, 4rem); letter-spacing: -0.04em; }
.duo__centre p { max-width: 36ch; margin: 1.1rem auto 0; color: var(--doux); }
@media (max-width: 760px) {
  .duo__scene { grid-template-columns: 1fr 1fr; grid-template-areas: "svg svg" "g d" "c c"; }
  .duo__svg { max-height: none; }
}

.principes { padding: clamp(4rem, 9vw, 8rem) 0; }
.principes h2 { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.principes__liste { border-top: 1px solid var(--filet-fort); }
.principe {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 0.6rem 2rem;
  padding: clamp(1.3rem, 2.8vw, 2.3rem) clamp(0.6rem, 1.6vw, 1.6rem);
  border-bottom: 1px solid var(--filet-fort);
  isolation: isolate; overflow: hidden;
}
.principe::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--peche);
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform 0.7s var(--ease);
}
.principe.depuis-haut::before { transform-origin: 50% 0; }
.principe:hover::before { transform: scaleY(1); }
.principe__titre {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.9rem, 5.4vw, 5.2rem); line-height: 1; letter-spacing: -0.04em;
  color: var(--olive-fonce);
  transition: transform 0.8s var(--ease);
}
.principe:hover .principe__titre { transform: translateX(clamp(0.5rem, 2vw, 1.6rem)); }
.principe__note { max-width: 24ch; text-align: right; color: var(--doux); transition: color 0.4s; }
.principe:hover .principe__note { color: var(--olive-nuit); }
@media (max-width: 760px) {
  .principe { grid-template-columns: 1fr; }
  .principe__note { text-align: left; }
}

/* ---------- Contact ---------- */
.contact { padding: 0 0 clamp(5rem, 10vw, 8rem); }
.contact__grille { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.coordonnees { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); }
@media (min-width: 900px) { .coordonnees { position: sticky; top: calc(var(--entete) + 2rem); } }
.coord__etiquette { margin-bottom: 0.4rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--doux); }
.coord__valeur {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.45rem, 2.3vw, 2.1rem); line-height: 1.2; letter-spacing: -0.025em;
  color: var(--olive-fonce);
}
.coord__valeur a { display: block; width: fit-content; }

.formulaire-bloc { position: relative; }
.formulaire {
  display: grid; gap: 1.7rem;
  padding: clamp(1.4rem, 3.5vw, 3rem);
  border-radius: var(--r-grand);
  background: var(--craie);
}
.formulaire[hidden] { display: none; }
.duo-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.7rem; }
.champ { display: grid; gap: 0.35rem; align-content: start; }
.champ label, .champ legend { font-size: 0.9rem; font-weight: 700; color: var(--olive-fonce); }
.champ legend { margin-bottom: 0.7rem; }
.champ__saisie { position: relative; }
.champ input, .champ textarea {
  width: 100%;
  font: inherit; color: var(--encre);
  background: transparent;
  border: 0; border-bottom: 1.5px solid rgba(56, 70, 63, 0.4);
  border-radius: 0;
  padding: 0.65rem 0;
  outline: none;
}
.champ textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
.champ textarea::placeholder { color: #6E7670; }
.champ__ligne {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--olive-fonce);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.champ__saisie:focus-within .champ__ligne { transform: scaleX(1); }
.champ [aria-invalid="true"] { border-bottom-color: var(--peche-texte); }
.champ [aria-invalid="true"] + .champ__ligne { background: var(--peche-texte); }
.champ__erreur { font-size: 0.86rem; font-weight: 500; color: var(--peche-texte); }
.champ__erreur:empty { display: none; }

.puces { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.puce { position: relative; }
.puce input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.puce span {
  display: inline-flex;
  padding: 0.62rem 1rem; border-radius: 999px;
  border: 1.5px solid rgba(56, 70, 63, 0.32);
  font-size: 0.92rem; font-weight: 500; color: var(--olive-fonce);
  cursor: pointer;
  transition: background 0.35s, border-color 0.35s, color 0.35s, transform 0.5s var(--ease);
}
.puce:hover span { border-color: var(--olive-fonce); }
.puce input:checked + span { background: var(--olive-fonce); border-color: var(--olive-fonce); color: var(--craie); }
.puce input:focus-visible + span { outline: 2px solid var(--olive-fonce); outline-offset: 3px; }
.puce:active span { transform: scale(0.96); }

.consentement { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: start; font-size: 0.92rem; line-height: 1.5; color: var(--doux); cursor: pointer; }
.consentement input {
  appearance: none; -webkit-appearance: none;
  display: grid; place-items: center;
  width: 1.35rem; height: 1.35rem; margin: 0.1rem 0 0;
  border-radius: 7px; border: 1.5px solid var(--olive-fonce);
  cursor: pointer; transition: background 0.3s;
}
.consentement input:checked { background: var(--olive-fonce); }
.consentement input:checked::after {
  content: ""; width: 0.36rem; height: 0.68rem;
  border: solid var(--craie); border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}
.consentement .champ__erreur { display: block; margin-top: 0.3rem; }
.formulaire__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.formulaire__pied small { font-size: 0.84rem; color: var(--doux); }
.btn[disabled] { opacity: 0.6; cursor: wait; }
.antirobot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.message-erreur-envoi { margin-top: 1rem; padding: 1rem 1.2rem; border-radius: var(--r); background: var(--peche-voile); color: var(--olive-nuit); font-weight: 500; }
.message-succes {
  display: none;
  gap: 1rem; justify-items: start;
  padding: clamp(1.8rem, 4vw, 3.2rem);
  border-radius: var(--r-grand);
  background: var(--craie);
}
.message-succes.est-visible { display: grid; }
.message-succes svg { width: 6rem; overflow: visible; }
.message-succes svg circle { fill: none; stroke-width: 1.6; stroke-dasharray: 1 1; }
.message-succes strong { font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -0.035em; color: var(--olive-fonce); }
.message-succes p { max-width: 40ch; }

@media (max-width: 899px) {
  .contact__grille { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .duo-champs { grid-template-columns: 1fr; }
}

/* ---------- Pied de page ---------- */
.pied { padding: 0 clamp(0.5rem, 1.2vw, 1rem) clamp(0.5rem, 1.2vw, 1rem); }
.pied__panneau { padding: clamp(3rem, 6vw, 5rem) 0 1.4rem; border-radius: clamp(24px, 3vw, 40px); background: var(--craie); overflow: hidden; }
.pied__haut { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
.pied__marque img { width: 104px; height: auto; margin-bottom: 1.3rem; }
.pied__marque p { max-width: 30ch; color: var(--doux); }
.pied h3 { margin-bottom: 1rem; font-family: var(--texte); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--doux); line-height: 1.3; }
.pied__liens { display: grid; gap: 0.3rem; }
.pied__liens a { font-size: 1.1rem; font-weight: 500; color: var(--olive-fonce); width: fit-content; }
.pied__geant {
  margin: clamp(3rem, 7vw, 6rem) 0 clamp(1rem, 2vw, 1.6rem);
  font-family: var(--display); font-weight: 500;
  font-size: clamp(3.4rem, 16.6vw, 19rem); line-height: 0.82; letter-spacing: -0.055em;
  color: var(--olive);
  text-align: center; white-space: nowrap;
  user-select: none;
}
.pied__geant .mot { padding-bottom: 0.14em; margin-bottom: -0.14em; }
.pied__bas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.8rem 2rem;
  padding-top: 1.3rem; border-top: 1px solid var(--filet);
  font-size: 0.88rem; color: var(--doux);
  padding-right: 4.5rem;
}
.pied__bas a { color: var(--olive-fonce); font-weight: 500; }
.pied__bas a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pied__droite { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; }
@media (max-width: 800px) {
  .pied__haut { grid-template-columns: 1fr 1fr; }
  .pied__marque { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .pied__haut { grid-template-columns: 1fr; }
}

/* ---------- Remonter ---------- */
.remonter {
  position: fixed; z-index: 90;
  right: clamp(0.9rem, 2vw, 1.6rem); bottom: clamp(0.9rem, 2vw, 1.6rem);
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--craie); color: var(--olive-fonce);
  box-shadow: 0 12px 30px -14px rgba(56, 70, 63, 0.5);
  opacity: 0; transform: translateY(18px) scale(0.85);
  pointer-events: none;
  transition: opacity 0.5s, transform 0.7s var(--ease);
}
.remonter.est-visible { opacity: 1; transform: none; pointer-events: auto; }
.remonter .jauge { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.remonter .jauge circle { fill: none; stroke: var(--peche); stroke-width: 2.6; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.remonter .fleche { transform: rotate(-90deg); }
.remonter:hover .fleche { transform: rotate(-90deg) translateX(3px); }

/* ---------- Modale des mentions ---------- */
.modale {
  position: fixed; inset: 0; z-index: 200;
  display: flex; justify-content: flex-end;
  background: rgba(43, 55, 47, 0.3);
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s, visibility 0s 0.5s;
}
.modale.est-ouverte { opacity: 1; visibility: visible; transition: opacity 0.5s; }
.modale__boite {
  position: relative;
  width: min(760px, 100%); height: 100%;
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(1.6rem, 4vw, 3.6rem);
  background: var(--craie);
  transform: translateX(100%);
  transition: transform 0.9s var(--ease);
}
.modale.est-ouverte .modale__boite { transform: none; }
.modale__fermer {
  position: sticky; top: 0; float: right;
  width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--olive-fonce); color: var(--craie);
  transition: transform 0.6s var(--ease);
}
.modale__fermer:hover { transform: rotate(90deg); }
.modale__fermer svg { width: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.modale h2 { margin: 0.8rem 0 2rem; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.035em; max-width: 14ch; }
.modale h3 { margin: 2rem 0 0.7rem; font-size: 1.35rem; letter-spacing: -0.02em; }
.modale p { margin-bottom: 0.9rem; font-size: 0.96rem; }
.modale a { color: var(--olive-fonce); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .chargement { display: none; }
}

@media (max-width: 520px) {
  .zc__onglet { padding: 0.55rem 0.85rem; font-size: 0.84rem; }
  .panneau { min-height: 25rem; }
  .panneau__media { min-height: 12rem; }
}