/* Personnalisations du 7 septembre 2026.
   Cette feuille se charge après celle d'origine et ne la modifie pas.
   La retirer du HTML suffit à revenir au site publié. */

/* 1. La phrase d'introduction se lit en deux temps.
      La coupure est écrite dans la page, après « Une coupe qui vous ressemble. »,
      elle tient donc quelle que soit la largeur de l'écran.
      On élargit en plus le bloc dès qu'il y a la place, pour que chacune des
      deux parties tienne sur une seule ligne. En dessous de 620 pixels de large,
      un téléphone tenu à la verticale, chaque partie occupe deux lignes,
      c'est la largeur de l'écran qui commande. */
@media (min-width: 620px) {
  .hero .hero-copy > p { max-width: 600px; }
}

/* 2. Le bandeau d'informations est centré, en colonne comme en ligne.
      Le troisième élément est un lien qui occupe toute la largeur et qui
      aligne son contenu à gauche, il lui faut sa propre règle. */
.info-strip {
  justify-content: center;
  justify-items: center;
  text-align: center;
  gap: 8px 46px;
}

.info-strip a {
  justify-content: center;
}

/* 3. La pastille qui dit si le salon est ouvert, posée à droite du sur-titre.
      Le sur-titre garde sa marge basse d'origine, c'est elle qui crée
      l'espace avant le grand titre. */
.ligne-statut {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
}

.statut {
  border: 1px solid var(--line);
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  padding: 5px 13px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  display: inline-flex;
  white-space: nowrap;
}

/* La pastille reste invisible tant que le script n'a pas lu l'heure.
   Cette règle doit gagner sur celle du dessus, d'où le sélecteur plus précis. */
.statut[hidden] { display: none; }

/* Un point de couleur avant le mot, pour que l'information passe même
   en un coup d'œil rapide. */
.statut::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* Ouvert, le vert du salon. Fermé, un gris sourd, jamais du rouge,
   un salon fermé le soir n'est pas une alerte. */
.statut.est-ouvert { color: var(--accent); border-color: var(--accent); }
.statut.est-ferme  { color: var(--muted);  border-color: var(--line); }

/* Sur téléphone, l'étiquette « L'art du détail » était rognée par le coin arrondi de la photo (vu le 12.11.2026). */
@media (max-width: 620px) {
  .photo-label { left: 64px; top: 22px; }
}

/* 12.11.2026, nouvelles photos fournies par le salon et Instagram mis en avant (demande de Yehya). */

/* Photo du salon en accueil, cadrée sur le plafond lumineux et l'allée */
.hero-photo-main { object-fit: cover; object-position: center 40%; }

/* Instagram dans l'en-tête, à côté de Réserver */
.header-actions { display: flex; align-items: center; gap: 10px; }
.site-header > .header-actions { grid-area: 1 / 2; }
.bouton-insta { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 1px solid currentColor;
  font-weight: 650; font-size: 14px; text-decoration: none; color: inherit; }
.bouton-insta:hover { background: #1f241c; color: #fff; }
@media (max-width: 720px) {
  .bouton-insta { width: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .bouton-insta span { display: none; }
}

/* Instagram juste sous les boutons de l'accueil */
.insta-accueil { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 9px 14px; border-radius: 999px;
  background: #eef1ea; color: #2c3a1c; font-weight: 650; font-size: 14px; text-decoration: none; max-width: 100%; }
.insta-accueil span:nth-of-type(1) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insta-accueil:hover { background: #586e3a; color: #fff; }

/* Galerie de cinq coupes, photos centrées, sans décalage en escalier */
.galerie-cinq { grid-template-columns: repeat(6, 1fr); gap: 25px; }
.galerie-cinq .gallery-item { padding-top: 0; width: auto; margin: 0; grid-column: span 2; }
.galerie-cinq .gallery-4, .galerie-cinq .gallery-5 { grid-column: span 3; }
.galerie-cinq .gallery-item img { width: 100%; height: 380px; object-fit: cover; object-position: center 35%; aspect-ratio: auto; }
@media (max-width: 1050px) {
  .galerie-cinq .gallery-item img { height: 300px; }
}
@media (max-width: 720px) {
  .galerie-cinq { grid-template-columns: 1fr 1fr; gap: 22px 14px; }
  .galerie-cinq .gallery-item, .galerie-cinq .gallery-4, .galerie-cinq .gallery-5 { grid-column: auto; }
  .galerie-cinq .gallery-1 { grid-column: 1 / -1; }
  .galerie-cinq .gallery-item img { height: 240px; }
  .galerie-cinq .gallery-1 img { height: 320px; }
}

/* Étiquettes sur la photo du salon, en pastille sombre pour rester lisibles sur le plafond lumineux (12.11.2026) */
.photo-label { text-shadow: none; align-items: flex-start; }
.photo-label .pastille { display: inline-block; background: rgba(20, 24, 18, 0.78); color: #fff; padding: 7px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
@media (max-width: 720px) {
  .photo-label .pastille:first-child { display: inline-block; font-size: 10px; padding: 6px 10px; }
  .photo-label .pastille + .pastille { display: none; }
}

/* Pied de page juridique, une ligne discrète et bien alignée (12.11.2026) */
.footer-legal { grid-column: 1 / -1; width: 100%; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 6px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.footer-legal p { margin: 0; }
.footer-legal nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer-legal a { color: var(--ink); text-decoration: none; font-weight: 600; }
.footer-legal a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
  .footer-legal { flex-direction: column; align-items: flex-start; }
  .footer-legal nav { flex-direction: column; gap: 10px; }
  .footer-legal a { min-height: 32px; display: inline-flex; align-items: center; }
}
.footer-legal p, .footer-legal nav { margin: 0; line-height: 1.4; }
@media (max-width: 720px) {
  .footer-legal nav { gap: 2px; }
  .footer-legal { padding-bottom: 76px; } /* garde les liens au-dessus de la barre « Réserver sur Salonkee » */
}

/* Boutons WhatsApp (12.11), beige du comptoir du salon, même taille partout */
.bouton-whatsapp { display: flex; width: fit-content; align-items: center; gap: 9px; margin: 22px auto 0; padding: 11px 20px;
  background: #dccbb0; color: #2b2620; border: 1px solid #c9b493; font-size: 14px; font-weight: 600; text-decoration: none;
  border-radius: 6px; box-shadow: 0 4px 14px rgba(60,45,25,.10); transition: background .2s; }
.bouton-whatsapp:hover { background: #cfbb9b; color: #2b2620; }
.bouton-whatsapp:focus-visible { outline: 2px solid #586e3a; outline-offset: 3px; }
.cheval-whatsapp { height: 0; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2; }
.cheval-whatsapp .bouton-whatsapp { margin: 0; transform: translateY(-50%); }

/* Titre de l accueil, espace avant les boutons depuis le retrait de la phrase (12.11) */
.hero h1 { margin-bottom: 34px; }
.prices .price-grid { margin-bottom: 30px; }
#realisations .section-heading { margin-top: 22px; }

/* Accueil réduit à la photo du salon et à la note Google (12.11) */
.titre-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.hero .hero-image { width: 100%; }
.hero > .rating { align-self: center; margin: 0; order: -1; }

/* Deux boutons sous la note, noir et blanc qui s inversent au toucher (12.11) */
.duo-boutons { order: -2; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 520px; align-self: center; }
.duo-boutons a { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 10px;
  border: 1.5px solid #1f211d; font-size: 14px; font-weight: 650; text-align: center; text-decoration: none; transition: background .15s, color .15s; }
.duo-noir { background: #1f211d; color: #fff; }
.duo-blanc { background: #fff; color: #1f211d; }
.duo-noir:hover, .duo-noir:active { background: #fff; color: #1f211d; }
.duo-blanc:hover, .duo-blanc:active { background: #1f211d; color: #fff; }
.duo-boutons a:focus-visible { outline: 2px solid #586e3a; outline-offset: 3px; }

/* Bouton Instagram aux vraies couleurs Instagram (12.11) */
.bouton-insta { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); color: #fff; border-color: transparent; }
.bouton-insta:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); color: #fff; filter: brightness(1.08); }

/* Bouton WhatsApp des tarifs, bandeau noir sur toute la largeur, moitié sur chaque section (12.11) */
.cheval-whatsapp .bouton-whatsapp { width: 100%; justify-content: center; min-height: 54px; padding: 0 20px;
  background: #1f211d; color: #fff; border: 0; border-radius: 0; box-shadow: none; font-size: 15px; }
.cheval-whatsapp .bouton-whatsapp:hover { background: #33362f; color: #fff; }

/* Villeneuve au-dessus des deux boutons, même écriture que le nom en haut, lien vers Google Maps (12.11) */
.lieu-villeneuve { order: -3; align-self: center; font-size: 24px; font-weight: 700; letter-spacing: -.04em; line-height: 1.2; color: #1f211d; text-decoration: none; }
.lieu-villeneuve:hover { color: #586e3a; }

/* Carte Taper, deux photos qui se relaient en fondu, une seule visible à la fois (14.11.2026) */
.galerie-cinq .fondu { position: relative; display: block; overflow: hidden; }
.galerie-cinq .fondu img { animation: fondu-taper 10s infinite; }
.galerie-cinq .fondu .fondu-2 { position: absolute; top: 0; left: 0; animation-delay: -5s; object-position: center 45%; }
@keyframes fondu-taper { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .galerie-cinq .fondu img { animation: none; }
  .galerie-cinq .fondu .fondu-2 { display: none; }
}