/*
 Theme Name:   Lahar
 Author:       Fanny Plantier
 Template:     twentytwentyfive
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   1. FONTS IMPORTATION
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&display=swap');

@font-face {
    font-family: 'Chanticl';
    src: url('assets/fonts/chanticl.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   2. VARIABLES DECLARATION
   ========================================================================== */:root {
    --main-background: #131316;  
    --nav-background: transparent;     
    --section: #252529;     
    --border: #27272a;

    --main-title: white;
    --secondary-title: #ea580c;
    --main-text: #9ea2a7;
    --descriptive-text: #9ca3af;
    --label: #6b7280;
    --placeholder: #4b5563;

    --button-border-hover: #f97316;

    --orange-10: #ea580c1a;
    --orange-30: #ea580c4d;
    --black-70: #000000b3;
    --black-50: #00000080;
    --white-90:#ffffffe6;

    --gutter: 2%;
    --nav-gap: 3%;
    --nav-mobile-width: 55%;

    --font-main: 'Chanticl', serif;      
    --font-title: 'Syne', sans-serif;  
}

/* ==========================================================================
   3. CSS' BASE
   ========================================================================== */* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
    scroll-behavior: smooth;
    font-size: 100%; 
}

body {
    font-family: var(--font-main); 
    background-color: var(--main-background);
    color: var(--main-text);
    overflow-x: hidden;
    
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

main {
    flex: 1 0 auto;
    width: 100%;
    padding: 5% var(--gutter); 
}

a {
    text-decoration: none;
    color: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
    font-weight: 600; 
}

h1 { 
    font-size: 250%; 
}

h2 { 
    font-size: 200%;
    margin-left: 15% !important;
    padding-left: 3%; 
    padding-top: 0;
    padding-bottom: 0;
    color: var(--secondary-title);
    border-left: solid 5px var(--secondary-title);
    width: auto;
    line-height: 1.2; 
    display: inline-block;
}

.gutenberg-content {
    background-color: var(--main-background);
    padding: 5% var(--gutter); 
    min-height: 50vh;
}

.container {
    width: 90%; 
    max-width: 100%; 
    margin: 0 auto;
}

.gutenberg-content p {
    color: var(--main-text);
    margin: 2% 15%; 
    line-height: 160%; 
    font-size: 120%;  
}
/* ================ GLOBAL RESPONSIVE DESIGN ================= */

   @media (max-width: 768px) 
   {
       .gutenberg-content p {
           margin: 5% 2%; 
           font-size: 100% !important;
           line-height: 1.3;
       }
       h2 {
           margin: 15% 3% 5% !important;
           font-size: 170%;
       }
   }

/* ==========================================================================
   4. À PROPOS SECTION
   ========================================================================== */
#apropos {
    margin-top: 5%;
}

.pbold {
    color: white!important;
    font-weight: 600;
    margin-bottom: 2%;
}

.last {
    margin-bottom: 5% !important;
}

.img-txt-apropos {
    margin-left: 8%;
    margin-bottom: 7%;
}

.img-txt-apropos img {
    filter: grayscale(100%); 
    border: solid 2px var(--secondary-title);
    transform: scale(1.05); 
    transition: filter 0.5s ease-in-out, transform 0.3s ease; 
}

.img-txt-apropos img:hover {
    filter: grayscale(0%);
}

/* ================= Responsive design à propos  ================= */
   @media (max-width: 768px) 
   {
    #apropos {
        margin-top: 0;
    }
    .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important; 
        padding-right: 0 !important;
        margin: 0 !important;
    }

    .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content p,
    .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content h2 {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .wp-block-media-text__content {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .img-txt-apropos {
        margin-left: 2%;
    }
    
    .img-txt-apropos img {
        filter: none;
        border: solid 2px var(--secondary-title);
        transform: scale(1.05); 
        margin-bottom: 5%;
    }

    .img-txt-apropos p {
        padding-right: 5% !important;
        margin-left: 0;
    }

    .last {
        margin-bottom: 15% !important;
    }
}

/* ==========================================================================
   5. VIDEO SECTION
   ========================================================================== */
   .section-focus {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    
    background-color: var(--section); 
    padding: 5% 0;             
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.conteneur-interne {
    width: 90%; 
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
}

.conteneur-interne h2 {
    margin-left: 15% !important; /* Ajuste ce % jusqu'à ce que l'alignement soit parfait avec "Contact" */
    color: var(--secondary-title);
    border-left: solid 5px var(--secondary-title);
    padding-left: 3%;
}

.video-container-r2 {
    width: 100%;            
    margin: 5% 0 3% 0; 
    padding: 1%;         
    overflow: hidden;
    border: 1px solid var(--secondary-title);
    background-color: black; 
}

.video-container-r2 video {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;   
}

.lien-videos {
    font-family: var(--font-title) !important;
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important;    
    justify-content: center !important;
    width: 100% !important;
    margin: 3% 0 !important;
    clear: both;                     
}
.lien-videos a {
    text-decoration: none;
    transition: all 0.3s ease;
}

.lien-videos a:hover{
    color: var(--secondary-title);
}

/* ================= Responsive design videos  ================= */
@media (max-width: 768px) 
{
.section-focus {
    margin-bottom: 10%;
}

.lien-videos a {
     margin: 4% 0 5% 0 !important;
     font-size: 80%;
 }

 .conteneur-interne h2 {
    margin-left: 5% !important; /* Ajuste ce % jusqu'à ce que l'alignement soit parfait avec "Contact" */
    color: var(--secondary-title);
    border-left: solid 5px var(--secondary-title);
    padding-left: 3%;
}
}

/* ==========================================================================
   6. CONTACT SECTION
   ========================================================================== */
#contact {
    margin-top: 5% !important;
}

.section-contact-globale {
    margin: 5% auto;
    width: 90%;
}

/* --- LE SYSTÈME DE COLONNES --- */
.colonnes-contact {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 5%;
}

.col-infos { width: 45% !important; }
.col-formulaire { width: 50% !important; }

/* --- TEXTES & TITRES --- */
.sousTitre {
    color: white;
    font-size: 180% !important;
    margin-bottom: 5%;
}

.texte-intro {
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-bottom: 8%;
    padding-bottom: 5%;
    line-height: 1.6;
}

/* --- LISTE DE CONTACT --- */
.item-detail {
    display: flex;
    gap: 5%;
    margin: 5% 0;
}

.item-detail p {
    padding-left: 0 !important;
    margin-left: 0 !important;
    line-height: 1.2 !important;
}

.texte-box {
    width: 100%;
}

.icone-box {
    width: 45px;
    height: 45px;
    border: 1px solid var(--secondary-title);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--secondary-title);
    background-color: var(--orange-10);
}

.label-info {
    font-size: 75%;
    font-family: var(--font-title);
    color: var(--placeholder);
    display: block;
}

/* --- FORMULAIRE & ÉQUERRES --- */
.form-equerre-wrapper {
    position: relative;
    width: 100% !important; 
    padding: 8% !important; /* Padding généreux pour l'effet visuel */
    background-color: var(--section); 
    border: 1px solid var(--placeholder);
}

.fluentform input, .fluentform textarea {
    background-color: var(--main-background);
    border: 1px solid var(--placeholder) !important;
    color: white;
}

.fluentform input::placeholder, .fluentform textarea::placeholder {
    color: var(--placeholder) !important;
}

/* ÉQUERRE HAUT-GAUCHE */
.form-equerre-wrapper::before {
    content: "";
    position: absolute;
    top: -2.5%;
    left: -2.5%;
    width: 10%;
    height: 10%;
    min-width: 25px;
    min-height: 25px;
    border-top: 4px solid var(--secondary-title) !important;
    border-left: 4px solid var(--secondary-title) !important;
}

/* ÉQUERRE BAS-DROITE */
.form-equerre-wrapper::after {
    content: "";
    position: absolute;
    bottom: -2.5%;
    right: -2.5%;
    width: 10%;
    height: 10%;
    min-width: 25px;
    min-height: 25px;
    border-bottom: 4px solid var(--secondary-title) !important;
    border-right: 4px solid var(--secondary-title) !important;
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 768px) {
    .colonnes-contact {
        flex-direction: column;
    }
    .col-infos, .col-formulaire {
        width: 100% !important;
        margin-bottom: 10%;
    }
    .sousTitre { 
        font-size: 180% !important; 
    }

    .form-equerre-wrapper::before, .form-equerre-wrapper::after {
        display: none !important;
    }

    .form-equerre-wrapper {
        border: solid 1px var(--secondary-title);
    }
}

/* ==========================================================================
   7. AGENDA 
   ========================================================================== */

/* Container Archives */
.agenda-archive-list {
    width: 100%;
    margin-top: 5%;
}

.archive-item {
    display: flex;
    align-items: center;
    padding: 2.5% 0%;
    border-bottom: 0.1% solid #333; /* Ligne de séparation très fine */
    gap: 4%;
}

.archive-date {
    width: 25%;
    color: #777;
    font-size: 85%;
    text-transform: capitalize;
}

.archive-title {
    width: 45%;
    font-size: 110%;
    color: #ffffff;
    margin: 0%;
}

.archive-tag {
    background: #2a2a2a;
    color: #888;
    padding: 0.5% 2%;
    font-size: 70%;
    border-radius: 0.5%;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.archive-link {
    margin-left: auto;
    color: #ff4500;
    text-decoration: none;
    font-size: 85%;
    font-weight: bold;
    transition: opacity 0.3s;
}

.archive-link:hover {
    opacity: 70%;
}

/* Archive : corps titre + pitch */
.archive-item {
    align-items: flex-start;
}

.archive-body {
    flex: 1;
    min-width: 0;
}

.archive-title {
    width: auto !important;
    margin: 0 !important;
}

.archive-pitch {
    color: var(--descriptive-text);
    font-size: 84%;
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
    line-height: 1.6;
}

.archive-address {
    color: var(--descriptive-text);
    font-size: 82%;
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 6px;
}

.archive-address i {
    color: var(--secondary-title);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    font-size: 88%;
}

/* Accordéon par année */
.archive-year-group {
    margin-bottom: 1%;
}

.archive-year-btn {
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    color: white;
    font-family: var(--font-title);
    font-size: 140%;
    font-weight: 700;
    padding: 3% 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    transition: color 0.3s;
}

.archive-year-btn:hover {
    color: var(--secondary-title);
}

.archive-year-icon {
    color: var(--secondary-title);
    font-size: 65%;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.archive-year-content {
    padding-top: 1%;
}

/* Bouton toggle "voir les archives" */
.agenda-toggle-btn {
    background: none;
    border: 1px solid var(--secondary-title);
    color: var(--secondary-title);
    font-family: var(--font-title);
    font-size: 88%;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4%;
    transition: background-color 0.3s;
}

.agenda-toggle-btn:hover {
    background-color: var(--orange-10);
}

.agenda-toggle-icon {
    transition: transform 0.3s ease;
    font-size: 80%;
}

/* Mobile : on empile */
@media (max-width: 768px) {
    .archive-item { flex-wrap: wrap; padding: 5% 0%; align-items: flex-start; }
    .archive-date { width: 100%; margin-bottom: 2%; font-size: 80%; }
    .archive-body { width: 100%; }
    .archive-tag { margin-bottom: 3%; }
    .agenda-toggle-btn { margin-top: 8%; font-size: 85%; }
    .archive-year-btn { font-size: 115%; padding: 4% 0; }
    .archive-pitch { font-size: 82%; }
}

/* Grille des cartes événements */
.agenda-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2%;
    width: 100%;
    margin-top: 5%;
}

.event-card {
    background-color: var(--section);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.event-card:hover {
    transform: translateY(-4px);
}

.event-header {
    position: relative;
    height: 260px;
    overflow: hidden;
    flex-shrink: 0;
}

.event-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.event-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.65) 100%);
    pointer-events: none;
}

.event-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: var(--secondary-title);
    color: white;
    font-family: var(--font-title);
    font-size: 78%;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
    z-index: 2;
    letter-spacing: 0.02em;
}

/* Couleurs par type d'événement — WordPress génère le slug avec sanitize_title()
   ex: "Marché" → "marche", "Évènement" → "evenement" */
.event-badge--exposition  { background-color: #dc2626; }
.event-badge--atelier     { background-color: #7c3aed; }
.event-badge--festival    { background-color: #16a34a; }
.event-badge--marche      { background-color: #0891b2; }
.event-badge--evenement   { background-color: #ea580c; }
.event-badge--vente       { background-color: #059669; }
.event-badge--conference  { background-color: #d97706; }
.event-badge--residence   { background-color: #db2777; }

.event-content {
    padding: 6% 7%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.event-title {
    font-size: 130% !important;
    color: white !important;
    margin: 0 !important;
    margin-left: 0 !important;
    border: none !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    display: block !important;
    width: auto !important;
}

.event-meta {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.event-meta p {
    color: var(--descriptive-text);
    font-size: 88%;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: 9px;
    line-height: 1.4 !important;
}

.event-meta p i {
    color: var(--secondary-title);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    font-size: 90%;
}

.event-excerpt {
    color: var(--descriptive-text);
    font-size: 90%;
    line-height: 1.55;
    flex: 1;
}

.event-button {
    display: inline-block;
    background-color: var(--secondary-title);
    color: white;
    font-family: var(--font-title);
    font-weight: 600;
    font-size: 88%;
    padding: 11px 22px;
    border-radius: 8px;
    text-decoration: none;
    transition: opacity 0.3s ease;
    align-self: flex-start;
    margin-top: 6px;
}

.event-button:hover {
    opacity: 0.82;
    color: white;
}

.no-event {
    color: var(--descriptive-text);
    padding: 5% 0;
}

@media (max-width: 768px) {
    .agenda-grid {
        grid-template-columns: 1fr;
        gap: 8%;
        margin-top: 12%;
    }

    .event-header {
        height: 210px;
    }

    .event-content {
        padding: 7% 6%;
    }

    .event-title {
        font-size: 118% !important;
    }

    .event-meta p {
        font-size: 85%;
    }

    .event-button {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   8. PAGE GALERIES
   ========================================================================== */

/* Titre de section : ajouter la classe "titre-galerie" dans l'éditeur */
.titre-galerie {
    display: flex !important;
    align-items: center;
    gap: 20px;
    color: white !important;
    font-size: 160% !important;
    margin: 6% 0 1.5% !important;
    margin-left: 8% !important;
    border: none !important;
    padding: 0 !important;
    width: 100% !important;
    line-height: 1.2 !important;
}

.titre-galerie::before {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background-color: var(--secondary-title);
    flex-shrink: 0;
}

/* Galerie WordPress — grille 3 colonnes forcée */
.wp-block-gallery.has-nested-images {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    margin-top: 3% !important;
    margin-bottom: 7% !important;
    flex-wrap: unset !important;
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
    width: 100% !important;
    max-width: 100% !important;
    flex-grow: 0 !important;
    flex-basis: auto !important;
    margin: 0 !important;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background-color: var(--section);
    position: relative;
    outline: 2px solid transparent;
    outline-offset: 0;
    transition: outline-color 0.3s ease;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:hover {
    outline-color: var(--secondary-title);
}

.wp-block-gallery.has-nested-images figure.wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 8px;
    transition: transform 0.4s ease;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:hover img {
    transform: scale(1.05);
}

/* Caption révélée au hover */
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption,
.wp-block-gallery.has-nested-images figure.wp-block-image .wp-element-caption {
    position: absolute !important;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.78)) !important;
    color: white !important;
    font-size: 85%;
    padding: 28px 14px 12px !important;
    margin: 0 !important;
    text-align: left !important;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:hover figcaption,
.wp-block-gallery.has-nested-images figure.wp-block-image:hover .wp-element-caption {
    opacity: 1;
}

/* Désactivation lightbox natif WordPress */
.lightbox-trigger {
    display: none !important;
}
.wp-lightbox-overlay {
    display: none !important;
}

/* Lightbox galerie custom */
#custom-lightbox {
    opacity: 0;
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.25s ease;
}

#custom-lightbox.active {
    opacity: 1;
    pointer-events: all;
}

.lb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
}

.lb-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    max-height: 90vh;
}

.lb-img {
    max-width: 90vw;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 6px;
    display: block;
}

.lb-caption {
    color: white;
    font-size: small;
    margin-top: 12px;
    text-align: center;
    opacity: 0.8;
}

.lb-close,
.lb-prev,
.lb-next {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    cursor: pointer;
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: large;
    transition: background 0.2s ease;
}

.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
    background: var(--secondary-title);
}

.lb-close {
    top: 20px;
    right: 20px;
}

.lb-prev {
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.lb-next {
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 768px) {
    .lb-prev { left: 8px; }
    .lb-next { right: 8px; }
    .lb-close { top: 12px; right: 12px; width: 40px; height: 40px; }
    .lb-img { max-height: 75vh; }
}

@media (max-width: 768px) {
    .titre-galerie {
        font-size: 130% !important;
        margin: 10% 0 4% !important;
        gap: 14px;
    }

    .titre-galerie::before {
        width: 40px;
    }

    .wp-block-gallery.has-nested-images {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        margin-bottom: 12% !important;
    }
}

/* ==========================================================================
   9. PAGE VIDÉOS
   ========================================================================== */

.video-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3% 3% 8%;
}

#main-player {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #000;
    border-radius: 8px;
    display: block;
}

#main-video-title {
    margin-top: 3% !important;
    font-size: large !important;
    color: white !important;
    font-weight: 600 !important;
}

.video-playlist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 3%;
}

.playlist-item {
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--section);
    outline: 2px solid transparent;
    outline-offset: 0;
    transition: outline-color 0.3s ease;
}

.playlist-item:hover,
.playlist-item.active {
    outline-color: var(--secondary-title);
}

.playlist-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #000;
}

.playlist-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
}

.playlist-item:hover .playlist-thumb img {
    transform: scale(1.05);
}

.playlist-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: medium;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.playlist-item:hover .playlist-play-icon {
    opacity: 1;
}

.playlist-item.active .playlist-play-icon {
    opacity: 1;
    background: var(--secondary-title);
}

.playlist-title {
    display: block;
    padding: 10px 12px;
    color: white;
    font-size: small;
    font-weight: 500;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .video-playlist {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* ==========================================================================
   10. PAGE BOUTIQUE
   ========================================================================== */

body.page-id-27 {
    padding-top: 12%;
}

.boutique-hero {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8% 5% !important;
    min-height: 75vh;
}

.boutique-icon {
    font-size: xx-large;
    color: var(--secondary-title);
    margin-bottom: 1rem !important;
}

.boutique-hero h1 {
    font-size: xxx-large !important;
    font-weight: 800 !important;
    color: var(--secondary-title) !important;
    margin: 0 0 1.5rem !important;
}

.boutique-accroche {
    font-size: large !important;
    color: white !important;
    font-weight: 500 !important;
    max-width: 620px;
    margin: 2rem auto 1.5rem !important;
    line-height: 1.5 !important;
}

.boutique-description {
    color: var(--descriptive-text) !important;
    max-width: 540px;
    margin: 0 auto 3rem !important;
    line-height: 1.7 !important;
    font-size: medium !important;
}

.en-attendant {
    font-size: small !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--label) !important;
    margin-bottom: 0.75rem !important;
}

.boutique-hero .wp-block-buttons {
    justify-content: center !important;
    width: 100% !important;
}

/* Bouton "Contactez-moi" */
.btn-contact-boutique .wp-block-button__link {
    background-color: var(--secondary-title) !important;
    color: white !important;
    font-size: medium !important;
    padding: 16px 40px !important;
    border-radius: 50px !important;
    border: none !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.btn-contact-boutique .wp-block-button__link:hover {
    background-color: var(--button-border-hover) !important;
    color: white !important;
}

@media (max-width: 768px) {
    .page-id-27 .wp-block-post-title {
        font-size: x-large !important;
    }

    .boutique-hero h1 {
        font-size: x-large !important;
    }
}