/*------------------------------------*\
    GABARIT CHAMBRE
    Habillage des pages "Chambres & Suites".
    Le contenu vient des blocs Gutenberg : on ne fait que le cadrer.
    Typographie et couleurs restent celles du theme (variables ACF) :
    on ne redefinit ni font-size ni color sur p / h2 / h3.
\*------------------------------------*/

.chambre {
    /* Tokens de la charte (noms Figma). */
    --chambre-encre: #36252B;   /* Pourpre Tenebreux : texte courant */
    --chambre-plume: #6B525F;   /* Pourpre Royal : accents, puces */
    --chambre-rose: #C2869C;    /* Mauve Rose : liens, boutons */
    --chambre-trait: #D9D9D9;   /* filets de separation */

    /* Largeurs relevees dans Figma. L'artboard fait 2889px et correspond a un
       ecran de 1920 (rapport 1,505) : a cette echelle le corps de texte de la
       maquette tombe a 16,6px et le bandeau large a 1224px, soit presque le
       .wrapper de 1280px du theme. Les deux se recoupent, l'echelle est bonne.
       Colonne de texte 1316 -> 875. Bandeau large 1841 -> 1224. */
    --chambre-etroit: 875px;
    --chambre-large: 1224px;

    --chambre-ratio-galerie: 1841 / 1200; /* diaporama Figma : galerie ET sliders */

    /* Equipements : libelles petits pour tenir dans 4 colonnes, icones plus
       grandes que le texte pour rester lisibles. */
    --chambre-icone-texte: 10px;
    --chambre-icone-taille: 40px;

    /* Badges : plus grands que les equipements. Dans la maquette leur libelle
       a la meme taille que le texte courant, et l'icone environ 32px. */
    --chambre-badge-icone: 32px;
    --chambre-badge-texte: var(--fontsizep, 1rem);
}

/* Le hero doit toucher le haut de page : on annule le retrait global de main. */
.page-template-template-chambre main {
    padding-top: 0;
}

/*------------------------------------*\
    HERO
\*------------------------------------*/

.chambre-hero {
    position: relative;
    height: 100vh;
    min-height: 520px;
    background-color: var(--chambre-plume);
    background-size: cover;
    background-position: center;
}

.chambre-hero__voile {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, .45) 100%);
}

.chambre-hero__inner {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
}

/* Figma : Filson Pro Bold, 82px, interligne 1. On plafonne sur --fontsizeh1
   (70px dans les options du theme) pour rester coherent avec les autres pages,
   et on laisse le titre descendre proprement sur petit ecran. */
.chambre-hero__titre {
    margin: 0;
    color: #fff;
    font-family: 'FilsonPro Bold', sans-serif;
    font-size: clamp(2rem, 6vw, var(--fontsizeh1, 4.375rem));
    font-weight: 400;
    line-height: 1;
    letter-spacing: .01em;
}

.chambre-hero__scroll {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    font-family: 'FilsonPro Book', sans-serif;
    font-size: var(--fontsizep, 1rem);
    letter-spacing: .04em;
}

.chambre-souris__roue {
    animation: chambre-roue 1.6s infinite cubic-bezier(.45, 0, .55, 1);
}

@keyframes chambre-roue {
    0%   { transform: translateY(0);   opacity: 1; }
    50%  { transform: translateY(8px); opacity: .5; }
    100% { transform: translateY(0);   opacity: 1; }
}

/* Au-dessus du hero le header est transparent, logo et burger en blanc.
   Une fois le hero defile, js/chambre.js pose la classe .header-opaque :
   le fond passe au blanc et tout reprend sa couleur d'origine. */
.page-template-template-chambre .header {
    background: transparent;
    transition: background .3s ease;
}

.page-template-template-chambre .header .logo img {
    filter: brightness(0) invert(1);
    transition: filter .3s ease;
}

.page-template-template-chambre .header .menu-responsive line {
    stroke: #fff;
    transition: stroke .3s ease;
}

.page-template-template-chambre .header.header-opaque {
    background: #fff;
}

.page-template-template-chambre .header.header-opaque .logo img {
    filter: none;
}

/* #6B525F est la couleur d'origine du trace, cf. le SVG dans header.php. */
.page-template-template-chambre .header.header-opaque .menu-responsive line {
    stroke: var(--chambre-plume, #6B525F);
}

/* Le selecteur de langue est transparent : au-dessus du hero il prend la
   bordure et le texte blancs de la maquette, et reprend ses couleurs une
   fois le header opaque. */
.page-template-template-chambre .header .selected-lang {
    border-color: #fff;
    color: #fff;
    transition: border-color .3s ease, color .3s ease;
}

.page-template-template-chambre .header .selected-lang .arrow {
    color: #fff;
}

.page-template-template-chambre .header.header-opaque .selected-lang {
    border-color: #6B525F;
    color: #36252B;
}

.page-template-template-chambre .header.header-opaque .selected-lang .arrow {
    color: #6B525F;
}


/*------------------------------------*\
    CORPS - meme largeur centree que .wrapper
\*------------------------------------*/

.chambre-corps {
    padding-top: 3.5rem;
}

.chambre-fil,
.chambre-contenu {
    max-width: var(--chambre-etroit);
    width: 92%;
    margin-left: auto;
    margin-right: auto;
}

/* Le theme force article{min-width:100%} (style.css), et min-width l'emporte
   sur max-width : sans cela le contenu deborde sur toute la largeur. */
.chambre-contenu {
    min-width: 0;
    box-sizing: border-box;
}

.chambre-fil {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: 1.1rem;
    color: var(--chambre-encre);
    font-size: var(--fontsizep, 1rem);
}

.chambre-fil a {
    color: var(--chambre-encre);
    text-decoration: none;
}

.chambre-fil a:hover {
    text-decoration: underline;
}

.chambre-fil__sep {
    color: var(--chambre-rose);
}

.chambre-fil__actuel {
    opacity: .75;
}

/*------------------------------------*\
    BLOCS GUTENBERG DANS LA CHAMBRE
    Marges et mise en page seulement : la taille du texte
    reste celle du theme.
\*------------------------------------*/

.chambre-contenu h2,
.chambre-contenu h3 {
    margin: 2.5rem 0 1rem;
}

/* Titre resserre : ajouter la classe "titre-serre" au bloc Titre
   (Reglages > Avance > Classe(s) CSS additionnelle(s)). */
.chambre-contenu .titre-serre {
    margin-top: .5rem;
    margin-bottom: .5rem;
}

.chambre-contenu p {
    line-height: 1.505;
    margin: 0 0 1rem;
}

.chambre-contenu a {
    color: var(--chambre-rose);
    font-family: 'FilsonPro Bold', sans-serif;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.chambre-contenu .wp-block-separator {
    max-width: 100%;
    margin: 2.5rem 0;
    border: 0;
    border-top: 1px solid var(--chambre-trait);
}

/* Colonnes : sur la maquette elles portent la paire Description / Equipements,
   separees par un filet vertical. */
.chambre-contenu .wp-block-columns {
    gap: 2.5rem;
}

/* Filet vertical entre colonnes, comme le Divider central de la maquette.
   Pose d'office, sans classe a saisir. Le guard :not(:empty) evite de tracer
   un trait a cote d'une colonne laissee vide dans l'editeur. */
.chambre-contenu .wp-block-columns > .wp-block-column:not(:first-child):not(:empty) {
    border-left: 1px solid var(--chambre-trait);
    padding-left: 2.5rem;
}

.chambre-contenu .wp-block-columns > .wp-block-column:first-child {
    padding-right: 2.5rem;
}

/* Ligne de meta sous le titre :
   "16 m² / 172 sq. ft  •  1 a 2 personnes  •  Lit Queen Size".
   Bloc Paragraphe portant la classe "meta-chambre". */
.chambre-contenu .meta-chambre {
    margin-bottom: 1.75rem;
}

/* Puces en Pourpre Royal quand le texte reste en Pourpre Tenebreux.
   Entourer chaque • de <span class="puce"> depuis l'editeur de code. */
.chambre-contenu .puce {
    color: var(--chambre-plume);
    padding: 0 .35rem;
}

/* --- Bloc "Icones + Titres" -------------------------------------------
   Le theme borne chaque item a max-width:100px. Combine a un white-space
   nowrap, les libelles debordaient et se chevauchaient : on laisse donc le
   texte revenir a la ligne et on libere la largeur.
   Trois presentations, selon la classe posee sur le bloc dans l'editeur :
     (sans classe)  icone au-dessus, centre  - reglage du theme
     .badges        icone a gauche du libelle, pastille mauve
     .equipements   grille de 4, icone au-dessus, centre
   -------------------------------------------------------------------- */

.chambre-contenu .icones-titres-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin: 1rem 0 1.75rem;
}

/* Les badges font exception : ils restent cales a gauche. Le selecteur porte
   trois classes (0,3,0) pour passer devant la regle ci-dessus, que la version
   de blocs-chambre.css ne pouvait pas battre a specificite egale. */
.chambre-contenu .icones-titres-block.badges {
    align-items: flex-start;
    justify-content: flex-start;
}

/* Les equipements aussi : le centrage vertical faisait descendre l'icone des
   cases dont le libelle tient sur une seule ligne. (0,3,0) pour passer devant
   la regle centree ci-dessus. */
.chambre-contenu .icones-titres-block.equipements {
    align-items: start;
}

/* Pastille teintee derriere l'icone, comme dans la maquette, mais seulement
   dans le corps d'une page chambre : ailleurs l'icone reste nue.
   content-box : le padding s'ajoute autour de l'icone, dont la taille reste
   celle de --chambre-badge-icone. */
.chambre-corps .icones-titres-block.badges .icones-titres-icone {
    box-sizing: content-box;
    padding: 7px;
    background: rgba(194, 134, 156, .32);
    border-radius: 5px;
}

.chambre-contenu .icones-titres-item {
    min-width: 0;
    max-width: none;
}

.chambre-contenu .icones-titres-icone {
    width: auto;
    height: 24px;
    flex: 0 0 auto;
    margin-bottom: .5rem;
}

.chambre-contenu .icones-titres-titre {
    color: var(--chambre-encre);
    font-size: var(--chambre-icone-texte, .8em);
    font-family: 'FilsonPro Regular', sans-serif;
    font-weight: 400;
    line-height: 1.505;
    white-space: normal;
}


/* Elements larges. Dans la maquette le diaporama, la paire
   Description / Equipements et les visuels pleine largeur occupent 1841px
   quand le texte tient sur 1316 : ils debordent donc symetriquement. */
.chambre-contenu .gallery_gutenberg_block,
.chambre-contenu .slider-block,
.chambre-contenu .gallery-slider-block {
    width: auto;
    max-width: none;
    margin-left: calc((var(--chambre-etroit) - var(--chambre-large)) / 2);
    margin-right: calc((var(--chambre-etroit) - var(--chambre-large)) / 2);
}

/* Alignements Gutenberg : c'est l'editeur qui decide, bloc par bloc.
   "Large"          -> le bandeau de 1224px de la maquette
   "Pleine largeur" -> toute la fenetre, bord a bord */
.chambre-contenu .alignwide {
    width: auto;
    max-width: none;
    margin-left: calc((var(--chambre-etroit) - var(--chambre-large)) / 2);
    margin-right: calc((var(--chambre-etroit) - var(--chambre-large)) / 2);
}

.chambre-contenu .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.chambre-contenu .alignfull img {
    width: 100%;
}

/* Les blocs slider s'imposent width:100% !important plus un style en ligne.
   Une largeur explicite rend margin-right surcontraint : il est ignore et le
   bloc glisse a gauche au lieu de s'elargir. Il faut donc liberer la largeur
   en !important, la specificite (0,2,0) l'emportant sur le (0,1,0) du bloc. */
.chambre-contenu .slider-block,
.chambre-contenu .slider-block .swiper {
    width: auto !important;
    max-width: none !important;
}

.chambre-contenu .gallery_gutenberg_block {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Le bloc galerie du theme empile les visuels en colonnes CSS, ce qui laisse
   a chacun sa hauteur naturelle. Ici on veut une grille reguliere : toutes les
   images au meme format. Portee limitee au gabarit chambre. */
.chambre-contenu .gallery-grid {
    column-count: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.chambre-contenu .gallery-grid-item {
    display: block;
    width: auto;
    margin-bottom: 0;
}

.chambre-contenu .gallery-grid-item img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: var(--chambre-ratio-galerie);
    object-fit: cover;
}

/* Sliders (blocs "Slider seul", "Texte et slider", "Gallery slider").
   Tous partagent le balisage .slider-block > .swiper > .swiper-slide > img
   et laissent a chaque visuel sa hauteur naturelle : on impose le meme
   format qu'a la galerie pour que les diapositives ne sautent plus. */
.chambre-contenu .slider-block .swiper-slide,
.chambre-contenu .gallery-slider-block .swiper-slide {
    height: auto;
}

.chambre-contenu .slider-block .swiper-slide img,
.chambre-contenu .gallery-slider-block .swiper-slide img {
    display: block;
    width: 100%;
    aspect-ratio: var(--chambre-ratio-galerie);
    object-fit: cover;
}


/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

@media only screen and (max-width: 1280px) {
    .chambre-contenu .gallery_gutenberg_block,
    .chambre-contenu .slider-block,
    .chambre-contenu .gallery-slider-block,
    .chambre-contenu .alignwide {
        margin-left: 0;
        margin-right: 0;
    }
}

@media only screen and (max-width: 700px) {
    .chambre-hero {
        height: 70vh;
        min-height: 420px;
    }

    .chambre-hero__scroll {
        bottom: 2rem;
    }

    .chambre-corps {
        padding-top: 2.25rem;
    }

    .chambre-contenu .wp-block-columns {
        gap: 1.5rem;
    }

    .chambre-contenu .wp-block-columns > .wp-block-column:not(:first-child):not(:empty) {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--chambre-trait);
        padding-top: 1.5rem;
    }

    .chambre-contenu .wp-block-columns > .wp-block-column:first-child {
        padding-right: 0;
    }

    .chambre-contenu .icones-titres-block {
        gap: 1rem;
    }

    .chambre-contenu .gallery-grid {
        grid-template-columns: 1fr;
    }
}