/*
Theme Name: Brise des Pins
Theme URI: https://brisedespins.com
Author: La Conciergerie Informatique
Author URI: https://conciergerie.tech
Description: Thème de direction artistique pour la villa Brise des Pins (Cap d'Antibes). Thème de site complet (FSE) construit en blocs Gutenberg — navigation, pied de page et contenu éditables depuis l'admin.
Version: 1.6.0
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bdp
*/

/* ==========================================================================
   Tokens de secours (theme.json pilote l'éditeur ; ce fichier couvre le
   front-end et les éléments que les blocs natifs ne stylent pas encore)
   ========================================================================== */

:root {
  --wp--custom--paper: #FAF8F3;
  --wp--custom--paper-2: #F0E9D8;
  --wp--custom--card: #FFFFFF;
  --wp--custom--ink: #201C14;
  --wp--custom--muted: #6E6553;
  --wp--custom--line: #DED2B2;
}

body {
  background: var(--wp--custom--paper);
}

a {
  color: inherit;
}

/* En-tête du site : la bordure basse est posée ici en CSS pur plutôt
   que via les attributs de style d'un bloc, pour éviter tout risque de
   divergence avec le HTML régénéré par l'éditeur (bloc invalide) */
.bdp-site-header {
  border-bottom: 1px solid var(--wp--custom--line);
}

/* Bascule bilingue FR/EN (header & footer) — voir bdp_lang_body_class()
   dans functions.php. Par défaut (langue française, classe absente ou
   body.lang-fr) : on affiche les blocs .bdp-i18n-fr, on masque les
   .bdp-i18n-en. Avec body.lang-en : l'inverse.

   Cas général (pied de page, etc.) : le bloc i18n EST l'élément de mise
   en page (colonne flex, bloc), donc un simple display:block/none.

   Cas de l'en-tête (.bdp-nav-row) : le bloc i18n ne contient qu'un seul
   enfant (titre du site, ou menu) qui doit lui-même être l'élément flex
   direct de la rangée — on utilise donc display:contents pour que le
   wrapper s'efface sans casser le justify-content:space-between. */
.bdp-i18n-en {
  display: none;
}
.bdp-i18n-fr {
  display: block;
}
body.lang-en .bdp-i18n-fr {
  display: none;
}
body.lang-en .bdp-i18n-en {
  display: block;
}

.bdp-nav-row .bdp-i18n-fr {
  display: contents;
}
.bdp-nav-row .bdp-i18n-en {
  display: none;
}
body.lang-en .bdp-nav-row .bdp-i18n-fr {
  display: none;
}
body.lang-en .bdp-nav-row .bdp-i18n-en {
  display: contents;
}

/* Diaporama plein écran */
.bdp-diaporama {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  max-height: 980px;
  overflow: hidden;
  background: #000;
}
.bdp-diaporama .bdp-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.bdp-diaporama .bdp-slide.is-active {
  opacity: 1;
}
.bdp-diaporama .bdp-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bdp-diaporama-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(0deg, rgba(14,12,7,0.76) 0%, rgba(14,12,7,0.16) 45%, rgba(14,12,7,0.02) 65%);
  pointer-events: none;
}
.bdp-diaporama-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 56px 48px;
  color: #F8F5EE;
  z-index: 3;
}
.bdp-diaporama-text .bdp-eyebrow {
  color: rgba(248,245,238,0.8);
}
.bdp-diaporama-text h1 {
  color: #F8F5EE;
  max-width: 760px;
}
.bdp-diaporama-text p {
  color: rgba(248,245,238,0.88);
  max-width: 480px;
}
.bdp-diaporama-dots {
  position: absolute;
  right: 56px;
  bottom: 48px;
  display: flex;
  gap: 10px;
  z-index: 3;
}
.bdp-diaporama-dots button {
  width: 7px;
  height: 7px;
  margin: 0;
  border-radius: 50%;
  border: 1px solid rgba(248,245,238,0.7);
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.bdp-diaporama-dots button.is-active {
  background: #F8F5EE;
}

@media (max-width: 880px) {
  .bdp-diaporama-text { padding: 0 24px 32px; }
  .bdp-diaporama-dots { right: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .bdp-diaporama .bdp-slide { transition: none; }
}

.bdp-site-footer {
  border-top: 1px solid var(--wp--custom--line);
}
.bdp-footer-note {
  border-top: 1px solid var(--wp--custom--line);
}

/* Photo plein format "breakshot" */
.bdp-breakshot {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  max-height: 640px;
  height: 56vh;
}
.bdp-breakshot figure {
  position: absolute;
  inset: 0;
  margin: 0;
}
.bdp-breakshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  display: block;
}
.bdp-breakshot-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(14,12,7,0.6) 0%, rgba(14,12,7,0.02) 45%);
  pointer-events: none;
}
.bdp-breakshot-cap {
  position: absolute;
  left: 56px;
  bottom: 28px;
  color: #F8F5EE;
  font-size: 19px;
  font-weight: 500;
  z-index: 2;
}
@media (max-width: 880px) {
  .bdp-breakshot-cap { left: 24px; }
}

/* Cartes "niveaux" — ombre portée pour les détacher du bandeau.
   Chaque niveau a sa propre nuance de fond (du plus clair au plus
   chaleureux) pour distinguer les trois étages d'un coup d'œil. */
.bdp-niveau-card {
  background: var(--wp--custom--card);
  border: 1px solid var(--wp--custom--line);
  box-shadow: 0 18px 40px -28px rgba(32,28,20,0.45);
}
.bdp-niveau-card.bdp-niveau-card--2 {
  background: var(--wp--custom--paper);
}
.bdp-niveau-card.bdp-niveau-card--3 {
  background: var(--wp--custom--paper-2);
}

/* Photo (ou mini-diaporama) de chaque carte "niveau" */
.bdp-niveau-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1100 / 731;
}
.bdp-niveau-media .bdp-niveau-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.bdp-niveau-media .bdp-niveau-slide.is-active {
  opacity: 1;
}
.bdp-niveau-media .bdp-niveau-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bdp-niveau-dots {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
  display: flex;
  gap: 5px;
  z-index: 3;
}
.bdp-niveau-dots button {
  flex: 1 1 0;
  height: 2px;
  margin: 0;
  border-radius: 1px;
  border: none;
  background: rgba(248,245,238,0.4);
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease;
}
.bdp-niveau-dots button.is-active,
.bdp-niveau-dots button:hover {
  background: #F8F5EE;
}
@media (prefers-reduced-motion: reduce) {
  .bdp-niveau-media .bdp-niveau-slide { transition: none; }
}

/* Bandeau équipements : fond sombre volontaire pour trancher avec le reste */
.bdp-amenities {
  background: var(--wp--custom--ink);
}
.bdp-amenities li,
.bdp-amenities p,
.bdp-amenities .wp-block-list {
  color: #F0E9D8;
}

/* Équipements : bloc "piscine chauffée" mis en avant, puis grille de
   pastilles icône + libellé pour le reste des agréments (gabarit
   d'icône aligné sur .bdp-stat-icon : 26×26px) */
.bdp-equip-feature {
  background: rgba(240,233,216,0.08);
  border: 1px solid rgba(240,233,216,0.22);
  border-radius: 10px;
  align-items: center;
}
.bdp-equip-feature-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  color: #F0E9D8;
}
.bdp-equip-feature-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.bdp-equip-grid {
  row-gap: 28px;
}
.bdp-equip-item {
  align-items: center;
  flex-basis: 200px;
  flex-grow: 0;
}
.bdp-equip-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  color: #F0E9D8;
  opacity: 0.92;
}
.bdp-equip-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
@media (max-width: 880px) {
  .bdp-equip-item {
    flex-basis: 45%;
  }
  .bdp-equip-feature {
    text-align: left;
  }
}

/* Bandeau niveaux / infos pratiques : fond "paper-2" pour se détacher du fond de page */
.bdp-band {
  background: var(--wp--custom--paper-2);
  border-top: 1px solid var(--wp--custom--line);
  border-bottom: 1px solid var(--wp--custom--line);
}

.bdp-stat-item {
  border-top: 1px solid var(--wp--custom--ink);
  text-align: center;
}
.bdp-stat-icon {
  width: 26px;
  height: 26px;
  margin: 0 auto 10px;
  color: var(--wp--custom--ink);
}
.bdp-stat-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.bdp-eyebrow {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--wp--custom--muted);
}

/* Bandeau de réassurance — icônes + mention courte, juste avant la CTA */
.bdp-reassurance-item {
  align-items: center;
}
.bdp-reassurance-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  color: var(--wp--custom--muted);
}
.bdp-reassurance-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Avis clients — cartes avec guillemet discret au-dessus de la citation */
.bdp-avis-card {
  position: relative;
  padding: 28px 24px 0;
  border-top: 1px solid var(--wp--custom--line);
}
.bdp-avis-quote {
  font-style: italic;
}

/* Bouton flottant "remonter en haut" — bas gauche, masqué tant qu'on
   n'a pas commencé à faire défiler la page */
.bdp-to-top {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 40;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--wp--custom--line);
  background: var(--wp--custom--card);
  color: var(--wp--custom--ink);
  box-shadow: 0 10px 24px -14px rgba(32,28,20,0.4);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.bdp-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.bdp-to-top svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 880px) {
  .bdp-to-top {
    left: 16px;
    bottom: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bdp-to-top {
    transition: none;
  }
}