/* Villa Sémaphore, le site autour de la visite.

   Page blanche chaude, encre noire, un seul accent : le bleu du bassin.
   Instrument Serif en grand pour les titres et le mot SÉMAPHORE, Inter pour
   le texte et les pilules. Les images sont des cartes arrondies, les
   boutons des pilules, l'en-tête est une carte posée sur la page avec une
   marge tout autour.

   La chose qui ne change pas : chaque image est d'abord un croquis tiré de
   la maquette, et devient photo quand elle entre à l'écran (site.js pose la
   classe .vu). Au survol, le croquis revient. */

/* Les polices sont servies par le site (polices/, jeu latin, 90 Ko) et non
   par Google Fonts : la page ne contacte aucun tiers. Inter est une police
   variable, un seul fichier couvre les graisses 300 a 500. */
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(polices/instrument-serif.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(polices/instrument-serif-italique.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 500; font-display: swap; src: url(polices/inter.woff2) format('woff2'); }

:root {
  --page: #f7f6f3;
  --encre: #0f0f0f;
  --encre-douce: #5e5e59;
  --gris: #8c8c86;
  --bassin: #2e7d84;
  --filet: rgba(15, 15, 15, 0.12);
  --nuit: #0a0a0a;
  --papier: #f3efe7;
  --marge: clamp(8px, 1vw, 14px);       /* la marge autour de l'en-tête */
  --haut-barre: 64px;                   /* la barre du haut, pleine largeur */
  --rayon: 28px;                          /* le rayon de l'en-tête */
  --rayon-carte: 22px;                    /* le rayon des images */
  --pad: clamp(20px, 5vw, 72px);
  --col: minmax(0, 1fr);
  --serif: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--page); color-scheme: light; scroll-behavior: smooth; }
body {
  background: var(--page); color: var(--encre);
  font-family: var(--sans); font-weight: 400; font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--bassin); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 0.98; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(2.8rem, 2rem + 5.5vw, 7rem); }
h2 { font-size: clamp(2.2rem, 1.6rem + 3vw, 4.4rem); }
h3 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.1rem); line-height: 1.08; }
p { text-wrap: pretty; }

/* ------------------------------------------------------------ la barre */
/* Une bande pleine largeur, fixe en haut, sur le fond clair du site ; tout
   le contenu commence dessous (29/09 : la barre transparente posee sur le
   hero « fait bizarre », et elle doit rester toujours visible). Le nom a
   gauche, les pages en pilules au centre, les liens et le telephone a
   droite. Une ombre douce apparait des qu'on a quitte le haut de page. */
body { padding-top: var(--haut-barre); }
.barre {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: var(--haut-barre);
  padding: 0 calc(var(--marge) + 18px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  background: var(--page); border-bottom: 1px solid rgba(15, 15, 15, 0.08);
  color: var(--encre); font-size: 0.74rem; letter-spacing: 0.02em;
  transition: box-shadow 0.4s;
}
.barre-flottante .barre { box-shadow: 0 10px 30px -22px rgba(15, 15, 15, 0.45); }
.barre a { text-decoration: none; }
.barre .nom { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 1.3rem; letter-spacing: 0; justify-self: start; }
/* Le pavillon S du code maritime : un carré blanc, un carré bleu au centre */
.pavillon { width: 15px; height: 15px; border: 1px solid currentColor; border-radius: 4px; display: grid; place-items: center; }
.pavillon::before { content: ''; width: 6px; height: 6px; background: var(--bassin); border-radius: 1px; }
.barre nav { display: flex; gap: 6px; padding: 5px; border-radius: 999px; border: 1px solid rgba(15, 15, 15, 0.12); background: rgba(15, 15, 15, 0.025); }
.barre nav a { padding: 7px 15px; border-radius: 999px; white-space: nowrap; transition: background 0.3s, color 0.3s; }
.barre nav a:hover { background: rgba(15, 15, 15, 0.06); }
.barre nav a[aria-current="page"] { background: var(--encre); color: #fff; }
.barre .droite { justify-self: end; display: flex; align-items: center; gap: 8px; }
.barre .rond { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(15, 15, 15, 0.16); display: grid; place-items: center; background: transparent; transition: background 0.3s; }
.barre .rond:hover { background: rgba(15, 15, 15, 0.06); }
.barre .rond svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.barre .tel { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: 999px; background: var(--encre); color: #fff; margin-left: 6px; transition: background 0.6s, color 0.6s; }
.barre .tel svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.barre .tel:hover { background: #333; }
@media (max-width: 960px) {
  /* Une seule ligne : le nom, les pilules, le telephone */
  .barre { grid-template-columns: auto 1fr auto; padding: 0 calc(var(--marge) + 12px); }
  .barre nav { justify-self: center; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .barre nav::-webkit-scrollbar { display: none; }
  .barre .rond { display: none; }
  .barre .tel span { display: none; }
  .barre .tel { padding: 9px 11px; margin: 0; }
}

/* ------------------------------------------------------------ le dessin */
/* Deux images de la même caméra, l'une sur l'autre. Le croquis est posé en
   multiplication sur la photo. Avant .vu : croquis seul. Après : la photo
   arrive en lavis gris puis en couleur, et le trait s'efface en dernier. */
.dessin { position: relative; overflow: hidden; background: var(--papier); border-radius: var(--rayon-carte); }
.dessin img { width: 100%; height: 100%; object-fit: cover; }
.dessin .photo {
  position: absolute; inset: 0; opacity: 0;
  filter: grayscale(1) brightness(1.18) contrast(0.92);
  transition: opacity 1.2s ease, filter 2.2s ease 0.8s;
}
.dessin .croquis {
  position: absolute; inset: 0; mix-blend-mode: multiply; opacity: 1;
  transition: opacity 1.6s ease 1.8s;
}
.dessin.vu .photo { opacity: 1; filter: none; }
.dessin.vu .croquis { opacity: 0; }
@media (hover: hover) {
  .dessin.vu:hover .croquis { opacity: 1; transition-delay: 0s; transition-duration: 0.9s; }
  .entete .dessin.vu:hover .croquis { opacity: 0; }   /* pas sous le titre */
}
@media (prefers-reduced-motion: reduce) {
  .dessin .photo, .dessin .croquis, .dessin { transition: none; }
}
.dessin.paysage { aspect-ratio: 16 / 10; }
.dessin.portrait { aspect-ratio: 4 / 5; }
.dessin.carre { aspect-ratio: 1; }
/* L'étiquette posée sur une image : une pilule claire avec un point */
.etiquette-image {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.82); color: var(--encre);
  font-size: 0.72rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.etiquette-image::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--bassin); }

/* ------------------------------------------------------------ l'en-tête des pages */
/* Une carte arrondie posée sur la page, avec une marge tout autour, comme
   la visite sur l'accueil. Le titre en bas à gauche. */
.page .entete {
  position: relative; margin: var(--marge); border-radius: var(--rayon); overflow: hidden;
  min-height: calc(var(--ecran, 100svh) - var(--haut-barre) - 2 * var(--marge));
  display: grid; grid-template-rows: 1fr auto; background: var(--papier);
}
.entete .dessin { position: absolute; inset: 0; border-radius: 0; }
.entete .titre {
  position: relative; z-index: 1; grid-row: 2; padding: 0 var(--pad) calc(var(--pad) - 8px);
  display: grid; grid-template-columns: repeat(12, var(--col)); gap: 0 24px; align-items: end;
  color: var(--encre); transition: color 0.8s ease 0.9s;
}
.entete.vu .titre { color: #fff; }
.entete .titre h1 { grid-column: 1 / span 9; }
.entete .titre p { grid-column: 1 / span 5; margin-top: 18px; max-width: 42ch; }
.entete::after {
  /* un voile bas pour poser le titre sur la photo */
  content: ''; position: absolute; inset: auto 0 0 0; height: 60%; pointer-events: none;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.7), rgba(10, 10, 10, 0));
  opacity: 0; transition: opacity 1s ease 0.7s;
}
.entete.vu::after { opacity: 1; }
@media (max-width: 900px) {
  .entete .titre h1, .entete .titre p { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ les blocs des pages */
.bloc {
  display: grid; grid-template-columns: repeat(12, var(--col)); gap: 32px 24px;
  padding: clamp(64px, 9vw, 140px) var(--pad) 0;
}
.bloc:last-of-type { padding-bottom: clamp(64px, 9vw, 140px); }
.bloc > .texte { grid-column: 1 / span 5; max-width: 58ch; }
.bloc > .texte p + p { margin-top: 1.1em; }
.bloc > .texte h2 + p, .bloc > .texte h2 + ul, .bloc > .texte h2 + table { margin-top: 28px; }
.bloc > .image { grid-column: 7 / span 6; align-self: start; }
.bloc.inverse > .texte { grid-column: 8 / span 5; grid-row: 1; }
.bloc.inverse > .image { grid-column: 1 / span 6; grid-row: 1; }
.bloc.large > .image { grid-column: 1 / -1; }
.bloc.large > .texte { grid-column: 1 / span 6; }
figcaption { margin-top: 12px; font-size: 0.8rem; color: var(--gris); }
@media (max-width: 900px) {
  .bloc > .texte, .bloc.inverse > .texte, .bloc.large > .texte { grid-column: 1 / -1; grid-row: auto; }
  .bloc > .image, .bloc.inverse > .image, .bloc.large > .image { grid-column: 1 / -1; grid-row: auto; }
}

/* Faits et listes : des filets */
table.faits { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.faits th, table.faits td { text-align: left; padding: 14px 0; border-bottom: 1px solid var(--filet); vertical-align: top; }
table.faits th { font-weight: 400; color: var(--encre-douce); width: 44%; }
table.faits td { font-family: var(--serif); font-size: 1.45rem; line-height: 1.1; }
ul.liste { list-style: none; }
ul.liste li { padding: 16px 0; border-bottom: 1px solid var(--filet); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: baseline; }
ul.liste li strong { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.1; display: block; }
ul.liste li span { color: var(--encre-douce); font-size: 0.9rem; }
ul.liste li small { color: var(--gris); font-size: 0.8rem; white-space: nowrap; }

/* ------------------------------------------------------------ les pilules */
/* Le bouton est une pilule : noire sur le clair, blanche sur la nuit. Une
   flèche dans un rond peut la finir (.fleche). */
.bouton {
  display: inline-flex; align-items: center; gap: 12px; padding: 13px 22px; border-radius: 999px;
  border: 1px solid var(--encre); background: var(--encre); color: #fff;
  text-decoration: none; font-size: 0.8rem; font-family: var(--sans); font-weight: 500; letter-spacing: 0.01em;
  cursor: pointer; transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.bouton:hover { background: #2a2a2a; border-color: #2a2a2a; }
.bouton.plein { background: var(--encre); color: #fff; }
.bouton.plein:hover { background: #2a2a2a; }
.bouton.clair { background: #fff; border-color: #fff; color: var(--encre); }
.bouton.clair:hover { background: #e9e7e2; border-color: #e9e7e2; }
.bouton.contour { background: transparent; color: var(--encre); }
.bouton.contour:hover { background: var(--encre); color: #fff; }
.bouton .fleche { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--encre); margin: -6px -12px -6px 0; }
.bouton.clair .fleche { background: var(--encre); color: #fff; }
.bouton .fleche svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lien { color: var(--encre); text-decoration: none; border-bottom: 1px solid currentColor; }

/* ------------------------------------------------------------ la carte */
.carte { width: 100%; height: auto; display: block; border-radius: var(--rayon-carte); overflow: hidden; }
.carte .trait { fill: none; stroke: var(--encre); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.carte .mer { fill: rgba(46, 125, 132, 0.10); }
.carte .terre { fill: rgba(203, 191, 168, 0.28); }
.carte text { font-family: var(--sans); font-size: 12px; fill: var(--encre-douce); letter-spacing: 0.02em; }
.carte .ici { fill: var(--bassin); }
.carte .ici-texte { fill: var(--encre); font-family: var(--serif); font-size: 20px; }
.carte .route { fill: none; stroke: var(--encre-douce); stroke-width: 0.8; stroke-dasharray: 3 4; }
/* Le nom court ne sert que sur telephone, ou le long deborde sur la villa */
.carte .nom-court { display: none; }

/* ------------------------------------------------------------ la nuit */
/* La bande sombre de fin : l'appel, puis le pied. */
.nuit { background: var(--nuit); color: #fff; }
.nuit .bloc { padding-top: clamp(64px, 9vw, 130px); padding-bottom: clamp(64px, 9vw, 130px); }
.nuit .bloc > .texte p { color: #b9b9b3; }
.nuit .bouton { background: #fff; border-color: #fff; color: var(--encre); }
.nuit .bouton:hover { background: #e9e7e2; border-color: #e9e7e2; }
.nuit .lien { color: #fff; }
.nuit table.faits th { color: #b9b9b3; }
.nuit table.faits th, .nuit table.faits td { border-bottom-color: rgba(255, 255, 255, 0.16); }
.pied {
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 26px var(--pad); font-size: 0.76rem; color: #8c8c86;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.pied a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }

/* ------------------------------------------------------------ le formulaire */
form.demande { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
form.demande .champ { display: grid; gap: 8px; }
form.demande .champ.long { grid-column: 1 / -1; }
form.demande label { font-size: 0.8rem; color: #b9b9b3; }
form.demande input, form.demande textarea, form.demande select {
  font: inherit; color: #fff; background: transparent; border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding: 10px 0; border-radius: 0; width: 100%;
}
form.demande textarea { min-height: 120px; resize: vertical; }
form.demande input:focus, form.demande textarea:focus { border-bottom-color: #fff; outline: none; }
form.demande .envoi { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
form.demande .note { font-size: 0.8rem; color: #8c8c86; max-width: 46ch; }
form.demande .note-repondu { color: #d8d4cb; }
@media (max-width: 640px) { form.demande { grid-template-columns: 1fr; } }

/* ============================================================ l'accueil */
/* Les sections qui suivent la visite, dans la structure de la référence :
   un titre centré et trois colonnes, une bande noire, des cartes. */
.section { padding: clamp(72px, 9vw, 140px) var(--pad); }
.section.centre > h2 { text-align: center; max-width: 18ch; margin: 0 auto; }
.sur-titre { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); margin-bottom: 18px; }

/* Trois colonnes : texte, image, points */
.trois { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: start; margin-top: clamp(48px, 6vw, 88px); }
.trois > .colonne { padding-top: 12px; }
.trois h3 { max-width: 20ch; }
.trois .colonne > p { margin-top: 18px; color: var(--encre-douce); font-size: 0.92rem; max-width: 34ch; }
.trois .colonne > .bouton { margin-top: 28px; }
.trois .portrait { aspect-ratio: 4 / 5; }
.point { padding: 0 0 18px; border-bottom: 1px solid var(--filet); }
.point + .point { padding-top: 18px; }
.point h4 { font-family: var(--sans); font-weight: 500; font-size: 0.95rem; }
.point p { margin-top: 6px; color: var(--encre-douce); font-size: 0.86rem; max-width: 34ch; }
.mention { margin-top: 48px; font-size: 0.8rem; color: var(--gris); }
.partenaires { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 14px; font-size: 0.78rem; font-weight: 500; }
.partenaires li { display: inline-flex; align-items: center; gap: 7px; }
.partenaires li::before { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--encre); box-shadow: inset 0 0 0 2.5px var(--page), inset 0 0 0 6px var(--encre); }
.avis { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.avatars { display: flex; }
.avatars span {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--page); margin-left: -8px;
  display: grid; place-items: center; font-size: 0.66rem; font-weight: 500; color: #fff; background: #4d5860;
}
.avatars span:first-child { margin-left: 0; }
.avatars span:nth-child(2) { background: #8a6a4d; }
.avatars span:nth-child(3) { background: var(--bassin); }
.avatars span:last-child { background: var(--encre); font-size: 0.6rem; }
.avis b { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1; }
.avis small { display: block; font-size: 0.78rem; color: var(--gris); }
@media (max-width: 960px) {
  .trois { grid-template-columns: 1fr 1fr; }
  .trois > figure { grid-column: 1 / -1; grid-row: 1; }
  .trois .portrait { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) { .trois { grid-template-columns: 1fr; } }

/* La bande noire : trois cartes portrait à gauche, le titre à droite */
.bande-nuit { background: var(--nuit); color: #fff; padding: clamp(72px, 8vw, 120px) var(--pad); }
.bande-nuit .dedans { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 96px); align-items: center; }
.espaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.espaces .dessin { aspect-ratio: 3 / 4; }
.espaces figcaption { margin-top: 14px; color: #fff; font-size: 0.86rem; font-weight: 500; }
.espaces figcaption small { display: block; color: #8c8c86; font-size: 0.76rem; font-weight: 400; margin-top: 2px; }
.bande-nuit .texte > p { margin-top: 20px; color: #b9b9b3; max-width: 38ch; font-size: 0.95rem; }
.bande-nuit .texte > .bouton { margin-top: 28px; background: #fff; border-color: #fff; color: var(--encre); }
.bande-nuit .texte > .bouton:hover { background: #e9e7e2; border-color: #e9e7e2; }
@media (max-width: 960px) {
  .bande-nuit .dedans { grid-template-columns: 1fr; }
  .bande-nuit .texte { order: -1; }
}
@media (max-width: 560px) { .espaces { grid-template-columns: 1fr 1fr; } .espaces figure:last-child { display: none; } }

/* Les semaines : un titre à gauche, un texte à droite, trois cartes en
   dessous, celle du centre plus grande */
.saisons .tete { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; }
.saisons .tete p { color: var(--encre-douce); max-width: 38ch; justify-self: end; font-size: 0.95rem; }
.cartes { display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 24px; align-items: end; margin-top: clamp(40px, 5vw, 72px); }
.carte-semaine { display: block; text-decoration: none; }
.carte-semaine .dessin { aspect-ratio: 4 / 3.4; }
.cartes > .carte-semaine:nth-child(2) .dessin { aspect-ratio: 4 / 3.7; }
.carte-semaine .ligne-carte { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 16px; }
.carte-semaine .ligne-carte strong { font-weight: 500; font-size: 0.95rem; }
.carte-semaine .ligne-carte span { font-family: var(--serif); font-size: 1.5rem; white-space: nowrap; }
.carte-semaine .sous { font-size: 0.8rem; color: var(--gris); margin-top: 4px; }
@media (max-width: 900px) {
  .saisons .tete { grid-template-columns: 1fr; }
  .saisons .tete p { justify-self: start; }
  .cartes { grid-template-columns: 1fr 1fr; }
  .cartes > .carte-semaine:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
}
@media (max-width: 560px) { .cartes { grid-template-columns: 1fr; } }

/* Le pied de l'accueil */
.pied-page { background: var(--nuit); color: #fff; padding: clamp(64px, 8vw, 110px) var(--pad) 28px; }
.pied-page .appel { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.pied-page .appel h2 { max-width: 14ch; }
.pied-page .appel p { margin-top: 16px; color: #b9b9b3; max-width: 44ch; font-size: 0.95rem; }
.pied-page .appel .bouton { background: #fff; border-color: #fff; color: var(--encre); }
.pied-page .appel .bouton:hover { background: #e9e7e2; border-color: #e9e7e2; }
.pied-page .lignes { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; padding: 40px 0; font-size: 0.82rem; color: #b9b9b3; }
.pied-page .lignes .nom { font-family: var(--serif); font-size: 1.4rem; color: #fff; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.pied-page .lignes p { margin-top: 12px; max-width: 30ch; }
.pied-page .lignes ul { list-style: none; display: grid; gap: 8px; }
.pied-page .lignes a { text-decoration: none; }
.pied-page .lignes a:hover { color: #fff; }
.pied-page .lignes h5 { font-family: var(--sans); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.pied-page .bas { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.74rem; color: #8c8c86; }
.pied-page .bas a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
@media (max-width: 800px) {
  .pied-page .appel { grid-template-columns: 1fr; align-items: start; }
  .pied-page .lignes { grid-template-columns: 1fr 1fr; }
}

/* ============================================================ le mouvement */
/* Posé par anime.js. Lent, discret, une fois par élément, rien ne tremble.
   html.anime : le mouvement est actif ; sans lui, tout est simplement là. */

/* Les photos des sections : le masque s'ouvre avec le défilement, sans
   horloge. L'image commence petite et très arrondie au centre de son cadre,
   et grandit jusqu'à le remplir à mesure qu'elle monte à l'écran ; si on
   s'arrête, tout s'arrête, si on remonte, elle se referme. --p va de 1
   (fermé) à 0 (ouvert), posé par anime.js selon la position à l'écran. Le
   croquis devient photo à mi-course (site.js). Ouverte, l'image glisse
   encore un peu dans son cadre avec le défilement (--glisse) et avance très
   lentement au survol. Dans l'en-tête des pages, la photo recule pendant
   sept secondes. */
.anime .corps .dessin { clip-path: inset(calc(var(--p, 1) * 22%) round calc(var(--rayon-carte) + var(--p, 1) * 90px)); }
.anime .corps .dessin img { transform: translateY(var(--glisse, 0%)) scale(calc(1.06 + var(--p, 1) * 0.16)); }
.anime .entete .dessin img { will-change: transform; transform: scale(1.08); transition: transform 7s cubic-bezier(0.2, 0.6, 0.2, 1); }
.anime .entete .dessin.vu img { transform: translateY(var(--glisse, 0%)) scale(1.06); }
/* Le survol passe par la propriété scale, à part du transform : le
   transform suit le défilement sans transition, le survol a la sienne */
@media (hover: hover) {
  .anime .corps .dessin.vu img { transition: scale 4s cubic-bezier(0.2, 0.6, 0.2, 1); }
  .anime .corps .dessin.vu:hover img { scale: 1.05; }
}

/* Les titres : chaque ligne monte de sous un cache, lentement, en cascade */
.anime .ligne { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.anime .ligne-texte { display: inline-block; transform: translateY(110%); opacity: 0; transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.1, 1), opacity 1.2s ease; transition-delay: calc(var(--i, 0) * 0.14s); }
.anime .vu .ligne-texte { transform: none; opacity: 1; }
.anime .ligne-bloc { display: none; }

/* Les apparitions : quelques pixels vers le haut, en fondu lent, en cascade */
.anime .apparait { opacity: 0; transform: translateY(10px); transition: opacity 1.2s ease, transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 60ms + 0.2s); }
.anime .apparait.vu { opacity: 1; transform: none; }
.anime tr.apparait { transform: none; }

/* Le lien souligné se retrace lentement au survol */
.lien { border-bottom: 0; position: relative; }
.lien::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; }
.lien:hover::after { animation: retrace 1.1s cubic-bezier(0.7, 0, 0.2, 1); }
@keyframes retrace { 0% { transform: scaleX(1); transform-origin: right center; } 50% { transform: scaleX(0); transform-origin: right center; } 50.01% { transform-origin: left center; } 100% { transform: scaleX(1); transform-origin: left center; } }

/* La carte se dessine : la côte, puis les routes, puis les noms */
.anime .carte path { transition: stroke-dashoffset 3.2s cubic-bezier(0.4, 0, 0.2, 1); }
.anime .carte .route { transition-delay: 2s; transition-duration: 2s; }
.anime .carte.vu path { stroke-dashoffset: 0 !important; }
.anime .carte text, .anime .carte circle { opacity: 0; transition: opacity 1.2s ease 3s; }
.anime .carte.vu text, .anime .carte.vu circle { opacity: 1; }

/* La galerie : trois colonnes à contre-courant. Les colonnes des bords
   montent un peu plus vite que la page, celle du centre un peu moins
   (data-vitesse, anime.js), tout suit le défilement au pixel, pas d'écran
   collé. Les images ne portent pas le masque des sections, elles se
   révèlent en fondu une à une en entrant. */
.galerie { padding: clamp(64px, 9vw, 140px) var(--pad) 0; }
.colonnes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.colonnes .col { display: grid; gap: 20px; will-change: transform; }
.colonnes .col:nth-child(2) { padding-top: 18%; }
/* La légende est au-dessus des colonnes : en dessous, la colonne de gauche
   la recouvrait en descendant */
.galerie .legende { margin-bottom: 40px; font-size: 0.8rem; color: var(--gris); max-width: 60ch; }
.anime .corps .colonnes .dessin { clip-path: none; opacity: 0; transition: opacity 1.4s ease; }
.anime .corps .colonnes .dessin.vu { opacity: 1; }
.anime .corps .colonnes .dessin img { transform: none; }
.colonnes .dessin .photo { transition: opacity 1s ease 0.3s, filter 1.8s ease 0.9s; }
.colonnes .dessin .croquis { transition: opacity 1.4s ease 1.6s; }
@media (max-width: 640px) { .colonnes { grid-template-columns: 1fr 1fr; } .colonnes .col:nth-child(3) { display: none; } }


/* ============================================================ le téléphone */
/* Mesuré en émulation à 360, 390 et 430 px (`node tel-controle.js`) : rien
   ne déborde en largeur, la grille et les images tiennent. Ce qui suit
   corrige ce qui se voyait mal au doigt. */
@media (max-width: 700px) {
  /* Les cinq pilules ne tiennent pas dans 390 px : la rangée défile de
     côté, et un dégradé sur le bord droit dit qu'il reste des pages. */
  .barre nav { -webkit-mask-image: linear-gradient(to right, #000 90%, transparent); mask-image: linear-gradient(to right, #000 90%, transparent); }
  /* Des cibles qu'on attrape au doigt : 40 px pour les pages, 44 pour le
     téléphone, qui est le seul appel visible en haut sur un petit écran */
  .barre nav a { padding: 9px 15px; }
  .barre .tel { padding: 13px 15px; min-height: 44px; min-width: 44px; }
  /* iOS agrandit la page dès qu'on touche un champ dont le texte est sous
     16 px : la saisie sautait dans le formulaire de demande */
  form.demande input, form.demande textarea, form.demande select { font-size: 16px; }
  /* La pilule du pied prenait toute la largeur, texte collé à gauche */
  .pied-page .appel .bouton { justify-self: start; }
  /* Les liens du pied sont les seules pages atteignables en bas : on leur
     donne de quoi etre touches */
  .pied-page .lignes ul a { display: inline-block; padding: 5px 0; }
  /* La colonne de gauche de la galerie monte en glissant : la légende lui
     laisse la place (l'amplitude est réduite dans anime.js) */
  .galerie .legende { margin-bottom: 52px; }
  /* Les prix des prestations serraient le texte sur la moitie de la
     largeur : ils passent sous leur ligne */
  ul.liste li { grid-template-columns: minmax(0, 1fr); }
  ul.liste li small { white-space: normal; margin-top: 8px; }
}

/* La carte du golfe : à 350 px de large, les noms tombaient à cinq pixels
   et se chevauchaient autour de la villa. On les grossit, on écarte les
   trois du coin de la villa, et les repères lointains sortent. */
@media (max-width: 700px) {
  .carte text { font-size: 22px; }
  .carte .ici-texte { font-size: 30px; }
  .carte .trait { stroke-width: 2.2; }
  .carte .route { stroke-width: 1.6; stroke-dasharray: 5 6; }
  .carte .loin { display: none; }
  .carte .nom-long { display: none; }
  .carte .nom-court { display: block; }
  .carte .l-cavalaire { transform: translate(-30px, 30px); }
  .carte .l-croix { transform: translate(-10px, -34px); }
  .carte .l-gigaro { transform: translate(-4px, 16px); }
  .carte .l-lardier { transform: translate(0, 10px); }
  .carte .l-mer { transform: translate(0, -6px); }
}

/* --------------------------------------------------- le menu du telephone */
/* Le bouton vit dans la barre, a cote du telephone : deux traits qui se
   croisent quand le panneau s'ouvre. Le panneau est une page de papier qui
   descend, avec les pages en grand comme les titres du site. */
.menu-bouton { display: none; }
.menu-panneau { display: none; }

@media (max-width: 700px) {
  /* Les pilules cedent la place au bouton : la barre tient sur une ligne
     et le haut de l'ecran est rendu a l'image. */
  .barre { grid-template-columns: 1fr auto; row-gap: 0; }
  .barre nav { display: none; }
  .barre .droite { gap: 8px; }

  .menu-bouton {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08); color: inherit; cursor: pointer;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transition: border-color 0.6s, background 0.3s;
  }
  .menu-bouton { border-color: rgba(15, 15, 15, 0.2); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu-bouton .traits { display: grid; gap: 5px; width: 17px; }
  .menu-bouton .traits i { display: block; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform 0.32s ease, opacity 0.2s; }
  .menu-ouvert .menu-bouton .traits i:first-child { transform: translateY(3.25px) rotate(45deg); }
  .menu-ouvert .menu-bouton .traits i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  /* Ouvert, le bouton est sur le papier du panneau : il en prend l'encre */
  .menu-ouvert .menu-bouton { border-color: rgba(15, 15, 15, 0.2); background: transparent; color: var(--encre); }
  /* La barre ne doit pas s'effacer pendant qu'on lit le menu */
  .menu-ouvert .barre { transform: none !important; opacity: 1 !important; pointer-events: auto !important; }
  .menu-ouvert .barre .nom { color: var(--encre); }
  .menu-ouvert .barre .tel { background: var(--encre); color: #fff; }

  /* Ferme, le panneau doit disparaitre pour de bon : un display:block dans
     un media query l'emporte sur l'attribut hidden, et le panneau restait
     etendu sur toute la page, invisible mais devant tout. Plus rien
     n'etait cliquable au doigt. */
  .menu-panneau[hidden] { display: none; }
  .menu-panneau {
    display: block; position: fixed; inset: 0; z-index: 25;
    background: var(--papier); color: var(--encre);
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; transform: translateY(-14px);
    transition: opacity 0.34s ease, transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .menu-ouvert .menu-panneau { opacity: 1; transform: none; }
  .menu-dedans {
    min-height: 100%; display: flex; flex-direction: column; justify-content: space-between;
    padding: calc(var(--marge) + 96px) calc(var(--marge) + 18px) calc(var(--marge) + 28px);
  }
  .menu-pages { display: grid; }
  .menu-pages a {
    display: grid; gap: 4px; padding: 18px 0; text-decoration: none; color: inherit;
    border-top: 1px solid rgba(15, 15, 15, 0.12);
    opacity: 0; transform: translateY(12px);
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .menu-pages a:last-child { border-bottom: 1px solid rgba(15, 15, 15, 0.12); }
  .menu-ouvert .menu-pages a { opacity: 1; transform: none; }
  /* les lignes arrivent l'une apres l'autre, sans rien qui saute */
  .menu-ouvert .menu-pages a:nth-child(1) { transition-delay: 0.06s; }
  .menu-ouvert .menu-pages a:nth-child(2) { transition-delay: 0.12s; }
  .menu-ouvert .menu-pages a:nth-child(3) { transition-delay: 0.18s; }
  .menu-ouvert .menu-pages a:nth-child(4) { transition-delay: 0.24s; }
  .menu-ouvert .menu-pages a:nth-child(5) { transition-delay: 0.3s; }
  .menu-pages .titre { font-family: var(--serif); font-size: clamp(2.1rem, 11vw, 2.9rem); line-height: 1.02; letter-spacing: -0.01em; }
  .menu-pages .sous { font-size: 0.78rem; letter-spacing: 0.02em; color: var(--gris); }
  /* La page ouverte : son titre en italique et un point devant */
  .menu-pages a[aria-current="page"] .titre { font-style: italic; }
  .menu-pages a[aria-current="page"] .titre::before {
    content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--bassin); vertical-align: 0.45em; margin-right: 12px;
  }
  .menu-pied { margin-top: 40px; display: grid; gap: 8px; justify-items: start; }
  .menu-tel {
    font-family: var(--serif); font-size: 1.6rem; text-decoration: none; color: inherit;
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .menu-mail { font-size: 0.86rem; color: var(--gris); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
  .menu-lieu { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-panneau, .menu-pages a { transition: none; }
}

/* ------------------------------------------- les tableaux au telephone */
/* En deux colonnes sur 390 px, le lieu se hachait sur deux lignes et la
   duree venait se coller contre lui. Chaque ligne passe donc l'une sous
   l'autre : le lieu en petites capitales, la duree en dessous, avec de
   l'air entre les lignes. Le bureau garde ses deux colonnes. */
@media (max-width: 700px) {
  table.faits, table.faits tbody, table.faits tr, table.faits th, table.faits td { display: block; width: auto; }
  table.faits tr { padding: 15px 0; border-bottom: 1px solid var(--filet); }
  table.faits tr:last-child { border-bottom: 0; }
  table.faits th, table.faits td { padding: 0; border: 0; }
  table.faits th { font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gris); }
  table.faits td { margin-top: 7px; font-size: 1.35rem; }
  .nuit table.faits tr { border-bottom-color: rgba(255, 255, 255, 0.16); }
  .nuit table.faits th { color: #b9b9b3; }
}

/* ------------------------------------------------ les liens légaux du pied */
.pied .legal, .pied-page .bas .legal { display: inline-flex; gap: 20px; flex-wrap: wrap; }
.pied .legal a, .pied-page .bas .legal a { border-bottom: 0; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 4px; }
.pied .legal a:hover, .pied-page .bas .legal a:hover { text-decoration-color: #fff; }
@media (max-width: 700px) {
  .pied .legal a, .pied-page .bas .legal a { display: inline-block; padding: 11px 0; }
}

/* ------------------------------------------------ les pages légales */
/* Mentions légales et confidentialité. Pas de photo : l'en-tête est une
   carte de papier, le croquis d'architecte de l'arrivée s'y efface vers la
   gauche, comme une feuille du dossier de la villa. Le texte se lit sur une
   colonne étroite, le sommaire reste à gauche sur grand écran. */
.entete-legal {
  position: relative; overflow: hidden; margin: var(--marge); border-radius: var(--rayon);
  background: var(--papier); padding: clamp(86px, 12vh, 150px) var(--pad) clamp(40px, 6vw, 72px);
  display: grid; grid-template-columns: repeat(12, var(--col)); gap: 0 24px; align-items: end;
}
.entete-legal .trait {
  position: absolute; top: 0; right: 0; height: 100%; width: min(62%, 900px); object-fit: cover; object-position: 30% 50%;
  opacity: 0.5; mix-blend-mode: multiply; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}
.entete-legal > div { position: relative; grid-column: 1 / span 8; }
.entete-legal .sur-titre { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-douce); display: inline-flex; align-items: center; gap: 10px; }
.entete-legal .sur-titre::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--bassin); }
.entete-legal h1 { margin-top: 18px; }
.entete-legal p.chapeau { margin-top: 22px; max-width: 46ch; color: var(--encre-douce); }
.entete-legal .date { margin-top: 26px; font-size: 0.78rem; color: var(--gris); }

.legal-corps {
  display: grid; grid-template-columns: repeat(12, var(--col)); gap: 0 24px;
  padding: clamp(56px, 8vw, 120px) var(--pad) clamp(72px, 10vw, 150px);
}
.sommaire { grid-column: 1 / span 3; align-self: start; position: sticky; top: 110px; }
.sommaire h2 { font-family: var(--sans); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
.sommaire ol { list-style: none; counter-reset: s; }
.sommaire li { counter-increment: s; border-bottom: 1px solid var(--filet); }
.sommaire a { display: grid; grid-template-columns: 2.2em 1fr; padding: 11px 0; font-size: 0.88rem; color: var(--encre-douce); text-decoration: none; transition: color 0.3s; }
.sommaire a::before { content: counter(s, decimal-leading-zero); color: var(--gris); font-size: 0.74rem; padding-top: 0.15em; }
.sommaire a:hover { color: var(--encre); }
.legal-texte { grid-column: 5 / span 7; max-width: 66ch; }
.legal-texte section { scroll-margin-top: 110px; }
.legal-texte section + section { margin-top: clamp(56px, 7vw, 88px); }
.legal-texte h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem); display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: baseline; }
.legal-texte h2 .num { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--bassin); }
.legal-texte h3 { font-size: 1.6rem; margin-top: 36px; }
.legal-texte p, .legal-texte li { color: var(--encre-douce); line-height: 1.7; }
.legal-texte h2 + p, .legal-texte h2 + ul, .legal-texte h2 + table { margin-top: 26px; }
.legal-texte p + p, .legal-texte ul + p, .legal-texte p + ul, .legal-texte h3 + p, .legal-texte table + p { margin-top: 1em; }
.legal-texte ul { list-style: none; }
.legal-texte ul li { position: relative; padding-left: 22px; margin-top: 8px; }
.legal-texte ul li::before { content: ''; position: absolute; left: 0; top: 0.8em; width: 10px; height: 1px; background: var(--bassin); }
.legal-texte strong { color: var(--encre); font-weight: 500; }
.legal-texte a { color: var(--encre); text-decoration: none; border-bottom: 1px solid rgba(15, 15, 15, 0.3); overflow-wrap: anywhere; transition: border-color 0.3s, color 0.3s; }
.legal-texte a:hover { color: var(--bassin); border-color: var(--bassin); }
.legal-texte table.faits td { font-size: 1.2rem; overflow-wrap: anywhere; }
.legal-texte table.faits td a { border-bottom: 0; }
/* Un encadré pour ce qui distingue la démonstration d'un site en production */
.encadre { margin-top: 30px; padding: clamp(22px, 3vw, 34px); border-radius: var(--rayon-carte); background: var(--papier); }
.encadre .etiquette { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bassin); }
.encadre p { margin-top: 12px; }
.encadre p:first-of-type { margin-top: 10px; }
@media (max-width: 900px) {
  .entete-legal > div { grid-column: 1 / -1; }
  .entete-legal .trait { width: 100%; opacity: 0.28; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%); }
  .sommaire { grid-column: 1 / -1; position: static; margin-bottom: 56px; }
  .legal-texte { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .entete-legal { padding-top: 72px; }
  .sommaire a { padding: 13px 0; }
  .legal-texte h2 { grid-template-columns: 1fr; gap: 10px; }
}