/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://wordpress.org/themes/twentytwentyfive/
 * Template:    twentytwentyfive
 * Version:     1.0
Author: the WordPress team
Author URI: https://wordpress.org
Text Domain: twentytwentyfive
*/

/* //
•⁠  ⁠JUAN - 
// */

/* ═══════════════════════════════════════════════════════
   1. VARIABLES GLOBALES (tokens du Café Bretelles)
   ═══════════════════════════════════════════════════════ */

:root {

  /* — Couleurs — */
  --cb-blanc-casse:#FCF9F2;
  --cb-brun-clair:#7B3F00;
  --cb-brun:      #522a00;
  --cb-brun-fond: #896D5D;

  /* — Typographies — */
  --cb-font-titre:  'Playfair Display', serif;
  --cb-font-corps:  'Playfair Display', serif;

  /* — Largeurs : Occupation de l'écran augmentée — */
  --cb-max-content: 1400px; 
  --cb-max-text:    900px;
  --wp--style--root--padding-left: 0px;
  --wp--style--root--padding-right: 0px;

  --cb-radius:      2px; /* Bordures plus discrètes */
  --cb-transition:  0.3s ease;


/* ═══════════════════════════════════════════════════════
   VARIABLES ADAPTABLES
   ═══════════════════════════════════════════════════════ */

   /* — Tailles de texte avec clamp(min, valeur fluide, max) — */
  --cb-size-h1:     clamp(2.5rem, 5vw, 4.37rem);
  --cb-size-h2:     clamp(1.6rem, 3.5vw, 2.88rem);
  --cb-size-h3:     clamp(1.2rem, 2.5vw, 1.73rem);
  --cb-size-body:   clamp(1rem, 1.8vw, 1.27rem);
  --cb-size-small:  clamp(0.85rem, 1.5vw, 1.15rem);
  --cb-size-price:  clamp(1rem, 1.8vw, 1.38rem);

  /* — Espacements fluides — */
  --cb-space-md:    clamp(1.5rem, 4vw, 3rem);
  --cb-space-lg:    clamp(3rem, 6vw, 6rem);

  /* — Tailles fluides logo, icônes, boutons — */
  --cb-logo-size:        clamp(120px, 20vw, 319px);
  --cb-icon-size:        clamp(28px, 4vw, 50px);
  --cb-icon-svg:         clamp(16px, 2.5vw, 42px);
  --cb-btn-padding-x:    clamp(12px, 2.5vw, 28px);
  --cb-btn-padding-y:    clamp(6px, 1.2vw, 12px);
  --cb-btn-font:         clamp(0.75rem, 1.5vw, 1rem);
}

html {
scroll-behavior: smooth;
}

/* — Logo — */
.cb-logo img,
.wp-block-site-logo img {
  width:     var(--cb-logo-size) !important;
  height:    auto !important;
  transition: transform 0.3s ease;
}

/* — Icônes réseaux header & footer — */
.cb-hero-header .wp-social-link,
.cb-footer .wp-social-link {
  width:  var(--cb-icon-size) !important;
  height: var(--cb-icon-size) !important;
}

.cb-hero-header .wp-social-link svg,
.cb-footer .wp-social-link svg {
  width:  var(--cb-icon-svg) !important;
  height: var(--cb-icon-svg) !important;
}

/* — Boutons header & footer — */
.cb-hero-header .wp-block-button__link,
.cb-footer .wp-block-button__link,
.cb-button .wp-block-button__link,
.cb-button-blanc .wp-block-button__link {
  font-size: var(--cb-btn-font) !important;
  padding:   var(--cb-btn-padding-y) var(--cb-btn-padding-x) !important;
}
/* ═══════════════════════════════════════════════════════
   2. IMPORT DES POLICES (Google)
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');


/* ═══════════════════════════════════════════════════════
   3. RESET / BASE SITE
   ═══════════════════════════════════════════════════════ */

body {
  font-family:  var(--cb-font-corps);
  font-size:    var(--cb-size-body);
  color:        var(--cb-brun);
  background-color: var(--cb-blanc-casse);
  line-height:  1.8;
  margin: 0;
  overflow-x: hidden !important;
}

/* ═══════════════════════════════════════════════════════
   4. TYPOGRAPHIE PARTAGÉE
   ═══════════════════════════════════════════════════════ */

/* H1 display none */
.page-header, h1 {
  position:   absolute !important;
  width:       1px !important;
  height:      1px !important;
  padding:     0 !important;
  margin:      -1px !important;
  overflow:    hidden !important;
  clip:        rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border:      0 !important;
}


/* H2 */
h2 {
    font-family: var(--cb-font-titre); 
	font-size: 2.1rem;
	font-weight: 600; 
	color: var(--cb-brun); 
 }

/* H3 */
h3 {
    font-family: var(--cb-font-titre); 
	font-size: 1.6rem; 
    font-weight: 500; 
	color: var(--cb-brun); 
    }

/* — Sous-texte / légende — */
.cb-subtitle {
  font-family:  var(--cb-font-corps);
  font-size:    var(--cb-size-price);
  color:        var(--cb-brun-clair);
  font-style: italic;
  font-weight: 400;
}

/* — Paragraphe : prix — */
p,
.wp-block-paragraph,
.cb-price {
  font-family:  var(--cb-font-titre);
  font-size:    var(--cb-size-price);
  color:        var(--cb-brun-clair);
  font-weight: 500;
  line-height: 1.25;
}

/* - Header - Maj — */
.cb-maj{
  font-family: var(--cb-font-titre) ;
  font-weight: 600 ;
  font-size: var(--cb-size-mid) ;
  text-transform: uppercase ;
  color: var(--cb-blanc-casse) ;
  /margin-top: -35px !important;/
}

/* - Footer - Mention légale - */
.cb-small{
  color: var(--cb-blanc-casse);
  font-family: var(--cb-font-corps) ;
  font-size: var(--cb-size-mid) !important;
}
.cb-mention-legale {
  color: var(--cb-blanc-casse);
  font-family: var(--cb-font-corps) ;
  font-size: var(--cb-size-small) !important;
}

/* ═══════════════════════════════════════════════════════
   7. GROUPES PARTAGÉS
   ═══════════════════════════════════════════════════════ */

/* — Espacement vertical entre groupes !! — */
.wp-block-group + .wp-block-group {
  margin-top: var(--cb-space-lg);
}

/* — Padding horizontal sur TOUS les groupes de contenu — */
.wp-site-blocks > .wp-block-group > .wp-block-group {
  padding-left:  var(--cb-space-md);
  padding-right: var(--cb-space-md);
  max-width:     var(--cb-max-content);
  margin-left:   auto;
  margin-right:  auto;
  box-sizing:    border-box;
}

/* — Groupe fond brun — */
.cb-group--brun {
  background-color: var(--cb-brun-fond);
  color:            var(--cb-blanc-casse);
  width:     100vw !important;
  max-width: 100vw !important;
  position:  relative !important;
  left: 53.8% !important;
  transform: translateX(-50%) !important;
}
 
/* texte blanc fond brun */
.cb-group--brun h2,
.cb-group--brun h3,
.cb-group--brun p,
.cb-group--brun .wp-block-paragraph,
.cb-group--brun .cb-price,
.cb-group--brun .cb-subtitle,
.cb-group--brun .cb-button .wp-block-button__link{
  color: var(--cb-blanc-casse) !important;
}

/* — Wrapper intérieur groupe brun — */
.cb-group--brun > .wp-block-group {
  margin:         0 auto;
  padding-top:    var(--cb-space-md);
  padding-bottom: var(--cb-space-md);
  padding-left:   var(--cb-space-md);
  padding-right:  var(--cb-space-md);
}

/* ═══════════════════════════════════════════════════════
   7. BOUTONS PARTAGÉS : CORPS HEADER FOOTER
   ═══════════════════════════════════════════════════════ */

/* - bouton - */
.cb-button .wp-block-button__link{
  background-color: transparent ;
  border: 3px solid var(--cb-brun-clair) !important;
  border-radius: 50px ;   
  color: var(--cb-brun-clair) ;
  font-family: var(--cb-font-titre) ;
  font-size: 1.2rem ;
  font-weight: 600 ;
  letter-spacing: 0.12em ;
  text-transform: uppercase ;
  padding: 12px 28px ;
  transition: background 0.2s, color 0.2s ;
}
.cb-button .wp-block-button__link:hover,
.wp-block-button.cb-button .wp-block-button__link:hover{
    transform: scale(1.08);
}

/* - bouton blanc - */
.cb-button-blanc .wp-block-button__link{
  background-color: transparent ;
  border: 3px solid var(--cb-blanc-casse) !important;
  border-radius: 50px ;   
  color: var(--cb-blanc-casse) ;
  font-family: var(--cb-font-titre) ;
  font-size: 1.2rem ;
  font-weight: 600 ;
  letter-spacing: 0.12em ;
  text-transform: uppercase ;
  padding: 12px 28px ;
  transition: background 0.2s, color 0.2s ;
}
.cb-button-blanc .wp-block-button__link:hover,
.wp-block-button.cb-button .wp-block-button__link:hover{
    transform: scale(1.08);
}

/* ///
DIEGO
/// */

a {
	text-decoration: none !important;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation_submenu-container .wp-block-navigation-item_content {
	outline-offset: 0;
}

/* Progressive enhancement to reduce widows and orphans */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/* Change the position of the more block on the front, by making it a block level element.*/
.more-link {
	display: block;
}

/* Prevents unnecessary scrollbars while handling long lines of preformatted text. */
:where(pre) {
	overflow-x: auto;
}

/* ══════════════════════════════════════
   HEADER — hero cover
══════════════════════════════════════ */
.cb-hero-header.wp-block-cover.alignfull[style*="min-height"] {
  min-height: 87vh !important;
}


/* ══════════════════════════════════════
   NAV — sticky full width
══════════════════════════════════════ */
.cb-nav {
  background-color: #896D5D !important;
  width: 100vw !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  padding: 10px 10px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  justify-content: center !important;
  gap: 4rem !important;
}
 

.cb-nav .wp-block-separator,
.cb-nav hr {
  display: none !important;
}

.cb-hero-header,
.cb-hero-header.wp-block-cover,
.wp-block-cover.alignfull,
.cb-header {
  overflow: visible !important;
}

/* ══════════════════════════════════════
   NAV — textos + bounce hover
══════════════════════════════════════ */
.cb-nav .wp-block-navigation-item__label {
  font-family: var(--cb-font-titre) !important;
  font-size: 1.2rem !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  white-space: nowrap !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
  display: inline-block !important;
}

.cb-nav .wp-block-navigation-item:hover .wp-block-navigation-item__label {
  opacity: 0.8 !important;
  transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════
   NAV — iconos
══════════════════════════════════════ */
.cb-nav .wp-font-awesome-icon {
  font-size: 1.1rem !important;
  color: #FFFFFF !important;
  transition: transform 0.2s ease !important;
}

.cb-nav .wp-block-navigation-item:hover .wp-font-awesome-icon {
  transform: translateY(-2px) !important;
}
/* ══════════════════════════════════════
   FLECHA SCROLL TOP
══════════════════════════════════════ */
.flecha-circulo {
  display: flex;
  position: fixed !important;
  bottom: 30px !important;
  right: 30px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 2px solid #ffffff !important;
  background: rgba(0,0,0,0.3) !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 9999 !important;
}

.flecha-circulo::after {
  content: '↑' !important;
  color: #ffffff !important;
  font-size: 18px !important;
}

.flecha-circulo:hover {
  background: rgba(0,0,0,0.6) !important;
}

/* ══════════════════════════════════════
   POLYLANG
══════════════════════════════════════ */
/* — Sélecteur de langue Polylang — */
.wp-block-polylang-language-switcher a,
.cb-langue a {
  display:          inline-block !important;
  background-color: transparent !important;
  border:           2px solid #ffffff !important;
  border-radius:    50px !important;
  color:            #ffffff !important;
  font-family:      var(--cb-font-titre) !important;
  font-size:        var(--cb-size-small) !important;
  font-weight:      600 !important;
  letter-spacing:   0.12em !important;
  text-transform:   uppercase !important;
  padding:          8px 20px !important;
  text-decoration:  none !important;
  transition:       background 0.2s, color 0.2s !important;
}

.wp-block-polylang-language-switcher a:hover,
.cb-langue a:hover {
  background-color: #ffffff !important;
  color:            var(--cb-brun) !important;
}

/* — Select Polylang — */
.pll-switcher-select {
  appearance:       none !important;
  -webkit-appearance: none !important;
  background-color: transparent !important;
  border:           2px solid #ffffff !important;
  border-radius:    50px !important;
  color:            #ffffff !important;
  font-family:      var(--cb-font-titre) !important;
  font-size:        var(--cb-size-small) !important;
  font-weight:      600 !important;
  letter-spacing:   0.12em !important;
  text-transform:   uppercase !important;
  padding:          8px 20px !important;
  cursor:           pointer !important;
  outline:          none !important;
}

/* — Options du select — */
.pll-switcher-select option {
  background-color: var(--cb-brun) !important;
  color:            #ffffff !important;
}

/* ══════════════════════════════════════
   HEADER & FOOTER LOGO
══════════════════════════════════════ */

.cb-header .cb-logo img,
.cb-footer .cb-logo img{
  transition: transform 0.3s ease;
}

.cb-header .cb-logo img:hover,
.cb-footer .cb-logo img:hover{
  transform: scale(1.08);
}

/* ══════════════════════════════════════
   HEADER & FOOTER RESEAUX SOCIAUX
══════════════════════════════════════ */
header .wp-social-link,
.cb-header .wp-social-link,
footer .wp-social-links,
.cb-footer .wp-social-link{
  display: flex !important;
/*width: 58px !important; 
  height: 58px !important;*/
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: transform 0.2s ease !important;
  background-color: transparent !important;
}

header .wp-social-link svg,
.cb-header .wp-social-link svg,
footer .wp-social-links,
.cb-footer .wp-social-link svg{
  width: 58px !important;
  height: 58px !important;
  fill: var(--cb-blanc-casse) !important;
  color: var(--cb-blanc-casse) !important;
}

header .wp-social-link:hover,
.cb-header .wp-social-link:hover,
.cb-footer .wp-social-link:hover {
  transform: scale(1.08) !important;
}


/* ═══════════════════════════════════════════════════════
   8. FOOTER
═══════════════════════════════════════════════════════ */

/* — Fondo — */
footer,
.cb-footer,
.site-footer {
  background-color: var(--cb-brun-fond) !important;
}

/* — Textos — */
.cb-footer .wp-block-paragraph,
.cb-footer p {
  color: var(--cb-blanc-casse);
  font-family: var(--cb-font-corps) ;
  font-size: var(--cb-size-price);
  line-height: 1.6 ;
}

/* — Links — */
.cb-footer a {
  color: var(--cb-blanc-casse);
  text-decoration: underline ;
}
.cb-footer a:hover {
  opacity: 0.8 ;}

/* — Mapa — */
.footer-map {
  width: 100% !important;
  display: block !important;
}
#map-footer {
  width: 100% !important;
  height: 320px !important;
  display: block !important;
  z-index: 1 !important;
}

.cb-hero-header {
  overflow: visible !important;
  min-height: 85vh !important;
}

.entry-meta,
.posted-on,
.byline,
.author,
.cat-links,
.wp-block-post-author,
.wp-block-post-date,
.wp-block-post-terms {
  display: none !important;
}

.wp-block-group.alignfull,
.wp-block-group,
.wp-site-blocks,
.entry-content,
#page,
#content,
.site-content {
  overflow: visible !important;
}

/* — Header pleine largeur — */

.cb-header {
  width:      100vw !important;
  max-width:  100vw !important;
  margin-left: calc(50% - 50vw) !important;
  position:   relative !important;
}

.cb-header .wp-block-cover {
  width:     100vw !important;
  max-width: 100vw !important;
  min-height: 85vh !important;
}

.cb-header .wp-block-cover__image-background {
  width:      100% !important;
  height:     100% !important;
  object-fit: cover !important;
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.9s;
}
 
h2.wp-block-post-title {
	display: none !important;
position:   absolute !important;
  width:       1px !important;
  height:      1px !important;
  padding:     0 !important;
  margin:      -1px !important;
  overflow:    hidden !important;
  clip:        rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border:      0 !important;}

/* ---------
 VERSION MOBILE RESPONSIVE 
 -------- */

@media (max-width: 768px) {

  /* Évite le scroll horizontal */
  body {
    overflow-x: hidden !important;
  }

  /* — Icônes plus petites — */
  .cb-nav .wp-block-font-awesome-icon svg {
      font-size: 1em !important;
    }

  /* - Reseaux celui qui marche ! - */
  .wp-block-social-link {
        width: 45px !important;
        height: 45px !important;
  }
  .wp-block-social-link svg {
  width: 18px !important;
  height: 18px !important;
  transform: scale(0.9) !important;
  transform-origin: center center !important;
  }

  /* - logo adapté mobile - */
  body .custom-logo, body .cb-logo img, body .wp-block-site-logo img {
      height: 300px !important;
      width: 220px !important;
    }

  /* 1. Augmentation générale du texte du site */
      p, .wp-block-paragraph {
          font-size: 20px !important; 
      }

  /* 2. Augmentation spécifique de vos boutons */
      a.wp-block-button__link.wp-element-button {
          font-size: 15px !important;          padding: 10px 18px !important; 
      }

/* -- POLYLANG -- */

  /* - polylang selecteur - */
  #lang_choice_1,
      select.pll-switcher-select, .pll-switcher-select, 
      .wp-block-polylang-language-switcher a,
      .cb-langue a {
          font-size: 15px !important;
          padding: 10px 18px !important;
          border: 3px solid !important;
          padding: 12px 22px !important;
          display: inline-block !important;
          box-sizing: border-box !important;
    }

/* -- NAV -- */

  /* Écran complet pour le conteneur principal du menu */
      .wp-block-navigation__responsive-container.is-menu-open,
      #modal-1 {
          position: fixed !important;
          top: 0 !important;
          left: 0 !important;
          width: 100vw !important;
          height: 100dvh !important;
          max-width: 100dvw !important;
          max-height: 100dvh !important;
          margin: 0 !important;
          padding: 0 !important;
          z-index: 99999 !important; 
      }

  /* S'assurer que la boîte de dialogue interne s'étire aussi à 100% */
      .wp-block-navigation__responsive-dialog {
          width: 100% !important;
          height: 100% !important;
          min-height: 100dvh !important;
      }

  /* — Menu mobile ouvert : forcer vertical — */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.is-layout-flex {
    flex-direction:  column !important;
    align-items:     flex-start !important;
    gap:             1rem !important;
    width:           100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: 100vh !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100% !important;
  }

  /* — Le wrapper .cb-nav à l'intérieur doit aussi passer en colonne — */
  .wp-block-navigation__responsive-container.is-menu-open .cb-nav {
    flex-direction: column !important;
    position:       static !important;
    width:          100% !important;
    height:         auto !important;
}

/* -- MENU BURGER --*/

  /* Personnaliser le conteneur du bouton burger */
  .wp-block-navigation__responsive-container-open {
    background-color: #f1e4d3; /* Couleur de fond */
    border-radius: 50%; /* Bouton circulaire */
    width: 50px; /* Largeur du bouton */
    height: 50px; /* Hauteur du bouton */
    display: flex; /* Centrer les lignes horizontalement et verticalement */
    justify-content: center;
    align-items: center;
  }

  /* Personnaliser les lignes du burger */
  .wp-block-navigation__responsive-container-open span {
    background-color: #5c4033; /* Couleur des lignes (brun) */
    height: 4px; /* Épaisseur des lignes */
    width: 30px; /* Longueur des lignes */
    border-radius: 2px; /* Coins arrondis pour les lignes */
    display: block; /* S'assurer que les lignes sont des blocs */
    margin: 4px 0; /* Espacement vertical entre les lignes */
  }

/* -- GROUPE BRUN --*/

  /groupe brun/
  .wp-block-group.alignfull.cb-group--brun,
      .cb-group--brun {
          left: 0 !important;
          transform: none !important; 
          width: 100vw !important; 
          max-width: 100vw !important;
  }

  /* Le panneau brun doit prendre toute la largeur */
  .wp-block-navigation__responsive-container-content,
  .wp-block-navigation__responsive-dialog,
  .cb-nav,
  .wp-block-navigation__container {
      width: 100% !important;
      max-width: 100% !important;
  }

}