/* =====================================================================
   Chef Barbier — feuille de style
   ---------------------------------------------------------------------
   Organisation du fichier :
     1. Thèmes de couleurs (sombre et clair)  ← pour changer les couleurs
     2. Base (typographie, liens, conteneur)
     3. Composants réutilisables (boutons, titres de section)
     4. Sections de la page, dans l'ordre où elles apparaissent
     5. Animations et accessibilité
     6. Adaptation mobile
     7. Outil d'aperçu (à retirer à la mise en ligne)

   Le thème actif est choisi dans index.html : <body data-couleurs="sombre">
   ou <body data-couleurs="clair">.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. THÈMES DE COULEURS
   Chaque thème définit les mêmes variables. Pour ajuster une couleur,
   modifiez-la ici : elle changera partout sur le site.
   --------------------------------------------------------------------- */

/* Thème sombre : noir et or, ambiance feutrée */
:root,
body[data-couleurs="sombre"] {
  --fond: #0a0a0a;            /* fond principal */
  --fond-alt: #111110;        /* fond des sections alternées */
  --panneau: #151513;         /* fond des cartes */
  --hero-haut: #000000;       /* dégradé du haut de page */
  --texte: #ece7dd;           /* texte principal */
  --texte-doux: #a39d91;      /* texte secondaire */
  --texte-pale: #6f6a62;      /* mentions discrètes */
  --accent: #c9a45c;          /* or : bordures, icônes, boutons */
  --accent-texte: #e2c98f;    /* or lisible pour du texte */
  --sur-accent: #111111;      /* texte posé sur un fond or */
  --ligne: rgba(201, 164, 92, .28);
  --ligne-douce: rgba(201, 164, 92, .18);
  --halo: rgba(201, 164, 92, .10);
  --nav-fond: rgba(10, 10, 10, .88);
  --champ-fond: #0c0c0b;
  color-scheme: dark;
}

/* Thème clair : crème et laiton, ambiance chaleureuse */
body[data-couleurs="clair"] {
  --fond: #f7f2e9;
  --fond-alt: #efe7d9;
  --panneau: #fffdf8;
  --hero-haut: #efe5d3;
  --texte: #1f1c18;
  --texte-doux: #5c554b;
  --texte-pale: #857c6f;
  --accent: #a07a35;
  --accent-texte: #7a5c24;    /* plus foncé pour rester lisible sur le crème */
  --sur-accent: #ffffff;
  --ligne: rgba(122, 92, 36, .28);
  --ligne-douce: rgba(122, 92, 36, .18);
  --halo: rgba(160, 122, 53, .12);
  --nav-fond: rgba(247, 242, 233, .9);
  --champ-fond: #ffffff;
  color-scheme: light;
}


/* ---------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------- */
:root {
  --police-titre: "Cormorant Garamond", Georgia, serif;
  --police-texte: "Jost", "Helvetica Neue", Arial, sans-serif;
  --largeur-max: 1120px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .4s, color .4s;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Conteneur centré, avec 16 px de marge minimum de chaque côté */
.conteneur {
  width: min(var(--largeur-max), 100% - 32px); margin-inline: auto;
  padding-left: env(safe-area-inset-left, 0px);   /* encoche des téléphones à l'horizontale */
  padding-right: env(safe-area-inset-right, 0px);
}

/* Empêche un numéro de téléphone de se couper sur deux lignes */
.insecable, a[href^="tel:"] { white-space: nowrap; }

/* Texte visible seulement par les lecteurs d'écran */
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}


/* ---------------------------------------------------------------------
   3. COMPOSANTS RÉUTILISABLES
   --------------------------------------------------------------------- */

/* Boutons : .bouton (contour) et .bouton.plein (rempli) */
.bouton {
  display: inline-block;
  border: 1px solid var(--accent);
  color: var(--accent-texte);
  background: transparent;
  padding: 12px 26px;
  font-family: var(--police-texte);
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .3s, color .3s;
}
.bouton:hover { background: var(--accent); color: var(--sur-accent); }
.bouton.plein { background: var(--accent); color: var(--sur-accent); }
.bouton.plein:hover { filter: brightness(1.08); }

/* Sections et en-têtes de section */
section { padding: 110px 0; }
.section-alt { background: var(--fond-alt); border-block: 1px solid var(--ligne-douce); }

.surtitre {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  color: var(--accent-texte);
  font-size: .74rem; letter-spacing: .32em; text-transform: uppercase;
  margin-bottom: 14px;
}
.surtitre::before, .surtitre::after { content: ""; width: 38px; height: 1px; background: var(--accent); opacity: .6; }

h2 {
  font-family: var(--police-titre); font-weight: 500;
  font-size: clamp(2.1rem, 4.5vw, 3.1rem);
  text-align: center; line-height: 1.15; margin-bottom: 18px;
}

.intro { color: var(--texte-doux); text-align: center; max-width: 600px; margin: 0 auto 60px; }

.carte { border: 1px solid var(--ligne); background: var(--panneau); }


/* ---------------------------------------------------------------------
   4. SECTIONS DE LA PAGE
   --------------------------------------------------------------------- */

/* --- Bandeau « version de travail » --- */
.bandeau-travail {
  background: var(--accent); color: var(--sur-accent);
  text-align: center; font-size: .8rem; letter-spacing: .06em;
  padding: 6px 16px; font-weight: 500;
}

/* --- Navigation --- */
.navigation {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--nav-fond);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ligne);
}
.navigation .conteneur { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.marque { font-family: var(--police-titre); font-size: 1.45rem; letter-spacing: .04em; }
.marque span { color: var(--accent-texte); }
.navigation ul { display: flex; gap: 28px; list-style: none; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; }
.navigation ul a { color: var(--texte-doux); transition: color .25s; }
.navigation ul a:hover { color: var(--accent-texte); }
.navigation .bouton { padding: 9px 18px; }
.bouton-menu { display: none; background: none; border: 0; color: var(--texte); font-size: 1.5rem; cursor: pointer; }

/* --- Accueil (hero) --- */
.accueil {
  position: relative;
  min-height: calc(100vh - 100px);
  display: grid; place-items: center; text-align: center;
  padding: 80px 0 90px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%, var(--halo), transparent 70%),
    linear-gradient(180deg, var(--hero-haut) 0%, var(--fond) 100%);
}
.logo { width: min(560px, 100%); height: auto; margin: 0 auto 34px; color: var(--texte); }
.logo .trait { stroke: var(--accent); fill: none; }
.logo .plein { fill: var(--accent); }
.accroche { font-family: var(--police-titre); font-style: italic; font-size: clamp(1.25rem, 2.6vw, 1.7rem); color: var(--accent-texte); margin-bottom: 12px; }
.sous-titre { color: var(--texte-doux); max-width: 560px; margin: 0 auto 38px; }
.actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.indice-defilement {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  width: 1px; height: 46px;
  background: linear-gradient(var(--accent), transparent);
  animation: pulsation 2.2s ease-in-out infinite;
}

/* --- Heures d'ouverture --- */
.grille-heures { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: stretch; }
.heures { padding: 38px 40px; }
.heures ul { list-style: none; }
.heures li { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px dashed var(--ligne-douce); }
.heures li:last-child { border-bottom: 0; }
.heures .jour { font-family: var(--police-titre); font-size: 1.2rem; }
.heures .plage { color: var(--texte-doux); letter-spacing: .05em; }
.heures li.ferme .plage { color: var(--texte-pale); font-style: italic; }
.heures li.aujourdhui .jour,
.heures li.aujourdhui .plage { color: var(--accent-texte); }
.heures li.aujourdhui .jour::after {
  content: "Aujourd’hui";
  font-family: var(--police-texte); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sur-accent); background: var(--accent);
  padding: 2px 8px; margin-left: 12px; vertical-align: middle;
}
.statut { margin-top: 20px; font-size: .85rem; color: var(--texte-doux); display: flex; align-items: center; gap: 10px; }
.pastille { width: 8px; height: 8px; border-radius: 50%; background: var(--texte-pale); }
.pastille.ouvert { background: #5fa65e; box-shadow: 0 0 0 4px rgba(95, 166, 94, .18); }

.citation { padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(160deg, var(--halo), transparent 60%), var(--panneau); }
.citation blockquote { font-family: var(--police-titre); font-style: italic; font-size: 1.65rem; line-height: 1.35; margin-bottom: 22px; }
.citation p { color: var(--texte-doux); font-size: .95rem; }

/* --- Notre histoire --- */
.histoire { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
.histoire .chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.chiffre { padding: 26px 28px; }
.chiffre strong { display: block; font-family: var(--police-titre); font-weight: 500; font-size: 2.6rem; line-height: 1; color: var(--accent-texte); }
.chiffre span { color: var(--texte-doux); font-size: .9rem; }
.histoire .texte h2 { text-align: left; }
.histoire .texte p { color: var(--texte-doux); margin-bottom: 16px; }
.histoire .texte .signature { font-family: var(--police-titre); font-style: italic; font-size: 1.3rem; color: var(--accent-texte); }

/* --- Galerie --- */
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 14px; }
.galerie figure { position: relative; overflow: hidden; border: 1px solid var(--ligne-douce); transition: border-color .35s; }
.galerie figure.grande { grid-column: span 2; grid-row: span 2; }
.galerie figure.large { grid-column: span 2; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.galerie figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 14px 18px;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: #f2ede4; background: linear-gradient(transparent, rgba(0, 0, 0, .75));
  transform: translateY(100%); transition: transform .35s;
}
.galerie figure:hover { border-color: var(--accent); }
.galerie figure:hover img { transform: scale(1.04); }
.galerie figure:hover figcaption { transform: translateY(0); }

/* Case vide en attendant les vraies photos */
.photo-a-venir {
  width: 100%; height: 100%;
  display: grid; place-items: center; align-content: center; gap: 10px;
  background: radial-gradient(circle at 30% 20%, var(--halo), transparent 55%), var(--panneau);
  color: var(--texte-pale); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
}
.photo-a-venir svg { width: 42px; height: 42px; stroke: var(--accent); fill: none; stroke-width: 1.2; opacity: .7; }

/* --- Avis clients (défilement continu) --- */
.resume-avis { text-align: center; margin: -36px 0 44px; color: var(--texte-doux); }
.resume-avis strong { color: var(--accent-texte); font-weight: 500; }
.avis {
  overflow: hidden; padding: 8px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.avis-piste { display: flex; gap: 22px; width: max-content; animation: defilement 48s linear infinite; }
.avis:hover .avis-piste { animation-play-state: paused; }
.avis-carte { width: 360px; flex: none; padding: 30px 30px 26px; display: flex; flex-direction: column; }
.etoiles { color: var(--accent); letter-spacing: 4px; font-size: .9rem; margin-bottom: 14px; }
.avis-carte p { font-family: var(--police-titre); font-size: 1.22rem; line-height: 1.45; flex: 1; margin-bottom: 20px; }
.avis-carte footer { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--ligne-douce); padding-top: 16px; font-size: .88rem; }
.initiale { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--accent); display: grid; place-items: center; font-family: var(--police-titre); color: var(--accent-texte); font-size: 1.05rem; }
.source { display: block; font-size: .74rem; color: var(--texte-doux); }

/* --- Services et réservation --- */
.reservation { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: start; }
.services { padding: 38px 40px; }
.services h3, .reserver h3 { font-family: var(--police-titre); font-weight: 500; font-size: 1.7rem; margin-bottom: 8px; }
.services ul { list-style: none; margin-top: 18px; }
.services li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--ligne-douce); }
.services li .prix { color: var(--accent-texte); white-space: nowrap; }
.services .note { margin-top: 18px; font-size: .85rem; color: var(--texte-doux); }
.reserver { padding: 38px 36px; text-align: center; background: linear-gradient(160deg, var(--halo), transparent 60%), var(--panneau); }
.reserver p { color: var(--texte-doux); margin-bottom: 26px; }
.reserver .bouton { display: block; margin-bottom: 14px; }
.reserver .petit { font-size: .82rem; color: var(--texte-pale); margin: 8px 0 0; }

/* --- Contact --- */
.grille-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.contact { padding: 36px 28px; text-align: center; }
.contact svg { width: 30px; height: 30px; stroke: var(--accent); fill: none; stroke-width: 1.3; margin: 0 auto 16px; }
.contact h3 { font-family: var(--police-titre); font-weight: 500; font-size: 1.4rem; margin-bottom: 8px; }
.contact p, .contact a { color: var(--texte-doux); }
.contact a:hover { color: var(--accent-texte); }
.carte-geo {
  margin-top: 22px; height: 340px; overflow: hidden;
  display: grid; place-items: center;
  color: var(--texte-pale); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, var(--ligne-douce) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, var(--ligne-douce) 39px 40px),
    var(--panneau);
}

.carte-geo iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Repli affiché quand la carte ne peut pas être intégrée (aperçu de révision) */
.carte-geo .repli { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 24px; }

/* --- Formulaire de contact + carte côte à côte --- */
.contact-bas { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; align-items: stretch; }
.contact-bas .carte-geo { margin-top: 0; height: auto; min-height: 340px; }
.formulaire { padding: 34px 32px; display: grid; gap: 16px; }
.formulaire h3 { font-family: var(--police-titre); font-weight: 500; font-size: 1.6rem; }
.formulaire-intro { color: var(--texte-doux); font-size: .92rem; margin-top: -8px; }
.champ { display: grid; gap: 6px; }
.champ label { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--texte-doux); }
.champ label span { text-transform: none; letter-spacing: 0; color: var(--texte-pale); }
.champ input, .champ textarea {
  width: 100%; padding: 12px 14px;
  background: var(--champ-fond); color: var(--texte);
  border: 1px solid var(--ligne); border-radius: 0;
  font: inherit; font-size: .95rem;
  transition: border-color .25s;
}
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--accent); }
.champ textarea { resize: vertical; min-height: 110px; }
.consentement { font-size: .8rem; color: var(--texte-pale); }
.consentement a, .pied a { color: var(--accent-texte); text-decoration: underline; text-underline-offset: 3px; }
.formulaire .bouton { justify-self: start; }
.formulaire-statut { border: 1px solid var(--accent); color: var(--accent-texte); padding: 12px 14px; font-size: .9rem; }
/* Piège à robots : invisible pour les humains, mais présent dans la page */
.champ-cache { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Pages secondaires (merci, confidentialité) --- */
.page-simple { padding: 90px 0 110px; }
.page-simple .conteneur { max-width: 720px; }
.page-simple h1 { font-family: var(--police-titre); font-weight: 500; font-size: clamp(2.1rem, 4.5vw, 3rem); line-height: 1.15; margin-bottom: 18px; }
.page-simple h2 { text-align: left; font-size: 1.6rem; margin: 34px 0 10px; }
.page-simple p, .page-simple li { color: var(--texte-doux); margin-bottom: 12px; }
.page-simple ul { padding-left: 20px; }
.page-simple .bouton { margin-top: 18px; }

/* --- Pied de page --- */
.pied { border-top: 1px solid var(--ligne); padding: 46px 0; text-align: center; color: var(--texte-pale); font-size: .8rem; }
.pied .marque { display: block; margin-bottom: 8px; color: var(--texte); }


/* ---------------------------------------------------------------------
   5. ANIMATIONS ET ACCESSIBILITÉ
   --------------------------------------------------------------------- */
@keyframes pulsation { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
/* -50 % = largeur d'une série d'avis ; 11 px = la moitié de l'espacement (gap) */
@keyframes defilement { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 11px)); } }

/* Les blocs .apparition restent toujours visibles : main.js leur ajoute
   seulement un léger glissement quand ils entrent à l'écran. */
.apparition.glisse { animation: glisser .8s ease both; }
@keyframes glisser { from { transform: translateY(18px); } to { transform: none; } }

/* Visiteurs qui préfèrent moins d'animations */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .avis-piste { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .avis-carte.copie { display: none; }
  .apparition.glisse { animation: none; }
  .indice-defilement { animation: none; }
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }


/* ---------------------------------------------------------------------
   6. ADAPTATION MOBILE
   --------------------------------------------------------------------- */
@media (max-width: 920px) {
  .grille-heures, .reservation, .histoire { grid-template-columns: 1fr; }
  .histoire .chiffres { grid-template-columns: repeat(2, 1fr); }
  .galerie { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .grille-contact { grid-template-columns: 1fr; }
  .contact-bas { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .bouton-menu { display: block; }
  .navigation ul {
    position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--fond); border-bottom: 1px solid var(--ligne);
    display: none;
  }
  .navigation ul.ouvert { display: flex; }
  .navigation ul a { display: block; padding: 16px 20px; border-top: 1px solid var(--ligne-douce); }
  .navigation .bouton { display: none; }
  section { padding: 80px 0; }
  .heures, .citation, .services, .reserver, .formulaire { padding: 28px 22px; }
  .avis-carte { width: 290px; }
  .histoire .chiffres { grid-template-columns: 1fr 1fr; gap: 12px; }
  .chiffre { padding: 18px; }
  .chiffre strong { font-size: 2rem; }
}


/* ---------------------------------------------------------------------
   7. OUTIL D'APERÇU — permet au client de comparer les deux thèmes.
   À retirer à la mise en ligne (voir README).
   --------------------------------------------------------------------- */
.choix-theme {
  position: fixed; z-index: 100;
  left: calc(16px + env(safe-area-inset-left, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 4px;
  padding: 4px; border-radius: 999px;
  background: var(--panneau); border: 1px solid var(--ligne);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
  font-size: .72rem; letter-spacing: .08em;
}
.choix-theme span { padding: 0 8px 0 10px; color: var(--texte-doux); }
.choix-theme button {
  border: 0; border-radius: 999px; cursor: pointer;
  padding: 7px 14px; font: inherit; letter-spacing: .08em;
  background: transparent; color: var(--texte);
}
.choix-theme button[aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); }