/* Eden Saint-Tropez — annonce de location, une page, deux langues.

   Palette prise sur le bandeau : le bleu du golfe, l'ocre des toits, le vert
   des pins. Clair par défaut — c'est une annonce de location d'été, le blanc
   lui va — avec bascule vers le sombre.

   ⚠️ Les trois régimes de thème (système, clair forcé, sombre forcé)
   fonctionnent ensemble : la requête média est gardée par
   `:not([data-theme="clair"])`, sans quoi le bouton n'aurait aucun effet
   pour un visiteur dont l'appareil est déjà en sombre. */

:root {
  --fond: #ffffff;
  --fond-doux: #f4f8fa;
  --encre: #1c2529;
  --encre-douce: #5d6d75;
  --accent: #0e6f86;      /* le bleu du golfe */
  --chaud: #c96f2c;       /* l'ocre des toits */
  --trait: #dee7eb;
  --largeur: 900px;
  /* Les 8 pictogrammes sont monochromes mais de HUIT gris différents (8 à
     115 sur 255) : `x2` et `piscine`, quasi noirs, disparaissaient en mode
     sombre. Plutôt que de retoucher huit fichiers, on les normalise au
     rendu — `brightness(0)` les ramène tous au noir pur, `invert()` les
     passe en blanc quand le fond est sombre. La rangée devient homogène
     dans les deux thèmes, ce qu'elle n'était pas non plus en clair. */
  --filtre-picto: brightness(0) opacity(.72);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --filtre-picto: brightness(0) invert(1) opacity(.85);
    --fond: #11181b;
    --fond-doux: #182226;
    --encre: #e7eef1;
    --encre-douce: #9db0b8;
    --accent: #56c2d8;
    --chaud: #e5924f;
    --trait: #26343a;
  }
}
:root[data-theme="sombre"] {
  --filtre-picto: brightness(0) invert(1) opacity(.85);
  --fond: #11181b;
  --fond-doux: #182226;
  --encre: #e7eef1;
  --encre-douce: #9db0b8;
  --accent: #56c2d8;
  --chaud: #e5924f;
  --trait: #26343a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 16px/1.65 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

/* ------------------------------------------------------------------ pavés
   La page enchaînait ses blocs sans respiration — « un peu confuse », dit
   Yvan, et il a raison : description, tarifs, photos, hôte et plan se
   suivaient au même rythme, sans rien pour dire où l'un finit.
   Chaque pavé a maintenant son air et un filet de séparation ; un pavé sur
   deux prend un fond légèrement teinté, ce qui découpe la page à l'œil sans
   ajouter le moindre trait de plus. */
section, main { max-width: var(--largeur); margin: 0 auto; padding: 0 1.2rem; }

.pave {
  padding-top: 2.6rem;
  padding-bottom: 2.6rem;
  border-top: 1px solid var(--trait);
}
main.pave { border-top: 0; }
.pave:nth-of-type(even) {
  background: var(--fond-doux);
  max-width: none;
  padding-left: max(1.2rem, calc((100% - var(--largeur)) / 2 + 1.2rem));
  padding-right: max(1.2rem, calc((100% - var(--largeur)) / 2 + 1.2rem));
}

h2 { font-size: 1.45rem; margin: 0 0 1.1rem; color: var(--accent); }
h3 { font-size: 1.1rem; margin: 2.8rem 0 .9rem; }

/* --- bascule de thème --- */
/* Posé DANS la page, en haut, plutôt que flottant (Yvan, 2026-08-23) :
   en `position: fixed` il passait par-dessus le bandeau et suivait le
   défilement — présent en permanence pour un réglage qu'on touche une fois.
   Étiqueté « Thème » : un ◐ seul avec une infobulle est muet au toucher. */
.reglages { margin: .5rem 0 0; text-align: center; }
.bascule {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .75rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: none;
  color: var(--encre-douce);
  font: inherit;
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
}
.bascule:hover { border-color: var(--accent); color: var(--accent); }

/* --- en-tête --- */
.bandeau {
  display: block; width: 100%; max-width: var(--largeur);
  margin: 0 auto; height: auto; border-radius: 0 0 6px 6px;
}
.titre { max-width: var(--largeur); margin: 0 auto; padding: 1.2rem 1.2rem .2rem; text-align: center; }

/* Le logo coiffe la page, calé à gauche, au-dessus du bandeau. */
/* Sans marge latérale : le logo s'aligne alors EXACTEMENT sur le bord
   gauche du bandeau, qui n'en a pas non plus. Avec l'espacement commun de
   1,2 rem il était décalé de 19 px — assez peu pour ne pas se nommer, assez
   pour se voir. */
.marque { max-width: var(--largeur); margin: 0 auto; padding: 1rem 0 .8rem; }
.logo { max-width: 190px; height: auto; display: block; }
/* L'accroche est le titre de page : c'est ce qu'un visiteur doit lire en
   premier — ce que c'est, et où (demande d'Yvan, 2026-08-23). */
.accroche {
  margin: .7rem 0 .9rem;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--encre);
}
.accroche span {
  display: block;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--chaud);
  margin-top: .2rem;
}

.langues { display: flex; gap: .8rem; justify-content: center; font-size: .88rem; }
.langues a { color: var(--accent); text-decoration: none; }
.langues a.actuelle { color: var(--encre-douce); font-weight: 600; pointer-events: none; }

/* --- pictogrammes --- */
.pictos {
  max-width: var(--largeur); margin: 1.2rem auto; padding: 0 1.2rem;
  display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: center;
  list-style: none;
}
.pictos li { display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 84px; }
/* Case RECTANGULAIRE, 52x40 et non 40x40. Les huit dessins n'ont pas la
   même forme : « vue » (un œil) fait 138x68 et « x2 » 234x101, soit deux
   fois plus larges que hauts. Dans une case carrée, `contain` les réduit
   à 20 px de haut pendant que « maison », carré, en occupe 40 — d'où
   l'impression que l'œil est minuscule. Une case plus large qu'elle n'est
   haute rend aux formes plates la place qui leur manque, sans rien
   retirer aux autres.
   (Les fichiers ont par ailleurs été recadrés sur leur contenu : ils
   portaient de 37 % à 82 % de marge blanche, chacun la sienne.) */
.pictos img { width: 52px; height: 40px; object-fit: contain;
              filter: var(--filtre-picto); }
.pictos span { font-size: .76rem; color: var(--encre-douce); text-align: center; }

/* --- texte --- */
main p { margin: 0 0 1.1rem; }
main ul { padding-left: 1.2rem; }
main li { margin-bottom: .35rem; }

/* --- tarifs --- */
/* Une période nommée — Les Voiles — reste une LIGNE du tableau : son prix
   doit tomber dans la même colonne que les autres. Elle est simplement
   marquée par son nom et un filet à gauche. */
.periode-nommee td { background: var(--fond-doux); }
.periode-nommee td:first-child { border-left: 3px solid var(--chaud); }
.nom-periode {
  display: block; font-weight: 600; color: var(--chaud);
  letter-spacing: .01em; margin-bottom: .1rem;
}

.tarifs table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tarifs th {
  text-align: left; padding: .55rem .7rem; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--encre-douce); border-bottom: 2px solid var(--trait);
}
.tarifs td { padding: .65rem .7rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
.tarifs .prix { font-weight: 700; font-size: 1.15rem; color: var(--chaud); white-space: nowrap; }
/* Plus en italique (Yvan, 2026-08-23) : la note dit une CONDITION de
   réservation, pas un commentaire. L'italique la faisait lire comme un
   aparté alors qu'elle engage le séjour. */
.tarifs .note { display: block; font-size: .82rem; color: var(--encre-douce); }

.supplements { list-style: none; padding: 0; margin: 0; max-width: 420px; }
.supplements li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .4rem 0; border-bottom: 1px dotted var(--trait); font-size: .93rem;
}
.montant { font-weight: 600; white-space: nowrap; }

/* --- galerie --- */
.planche {
  display: grid; gap: .7rem; list-style: none; padding: 0; margin: 0;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.vignette img {
  width: 100%; height: 150px; object-fit: cover; display: block;
  border-radius: 5px; box-shadow: 0 1px 5px rgba(0,0,0,.2);
}
.vignette:hover img { opacity: .87; }

/* --- hôte --- */
.hote { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.hote img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; flex: none; }
.hote > div { flex: 1 1 300px; }
.hote h2 { margin-top: 0; }
/* Deux liens sobres plutôt qu'une pastille pleine : le gros bouton
   entouré faisait tache dans une page par ailleurs calme (Yvan,
   2026-08-23). Le contact reste le point d'action de la page, il est
   donc en gras et à l'accent — mais sans crier. */
.contact { display: flex; flex-direction: column; gap: .3rem; margin: .9rem 0 0; }
.contact a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
  width: fit-content;
}
.contact a:hover { text-decoration: underline; }

/* --- plan --- */
.plan iframe {
  width: 100%; height: 380px; border: 0; display: block;
  border-radius: 6px; border: 1px solid var(--trait);
}
.adresse { font-size: .88rem; color: var(--encre-douce); margin: .6rem 0 3rem; }

/* --- visionneuse --- */
#visionneuse {
  position: fixed; inset: 0; background: rgba(0,0,0,.94); display: none;
  align-items: center; justify-content: center; z-index: 100;
}
#visionneuse.ouverte { display: flex; }
#visionneuse figure { margin: 0; text-align: center; }
#visionneuse img { max-width: 94vw; max-height: 82vh; object-fit: contain; }
#visionneuse figcaption { color: #ddd; font-size: .9rem; margin-top: .6rem; }
#visionneuse button {
  position: absolute; background: none; border: 0; color: #fff;
  font-size: 2.4rem; cursor: pointer; padding: .4rem .9rem; line-height: 1;
}
#vis-prec { left: 0; } #vis-suiv { right: 0; }
#vis-fermer { top: 0; right: 0; font-size: 1.8rem; }
#vis-compte { position: absolute; bottom: 1rem; color: #bbb; font-size: .85rem; }

@media (max-width: 560px) {
  body { font-size: 17px; }
  /* le bandeau touche les bords sur mobile ; le logo, lui, respire un peu */
  .marque { padding-left: .8rem; }
  .logo { max-width: 150px; }
  .hote { justify-content: center; text-align: center; }
  .hote > div { text-align: left; }
  .tarifs table { font-size: .88rem; }
  .vignette img { height: 130px; }
}