/* ==========================================================
   Structure — mécanique de mise en page uniquement (flex, grid,
   responsive, comportements). Ne PAS modifier par client : c'est ce
   qui fait fonctionner le page builder et la mise en page quelle
   que soit l'apparence appliquée par-dessus.

   Les couleurs, polices, marges et arrondis sont dans theme.css —
   c'est ce fichier-là qu'on ajuste pour chaque client.
   ========================================================== */

* { box-sizing: border-box; }

/* Filet de sécurité pour toute image sans classe/traitement spécifique (ex: le
   bloc "Image" nu, posé directement dans une colonne plutôt que dans une
   Galerie/un Hero) — sans ça, une grande photo déborderait de son conteneur.
   Les images qui ont déjà leurs propres règles de largeur (galerie, hero,
   figure du bloc Image spéciale...) ne sont pas affectées, plus spécifiques. */
img { max-width: 100%; height: auto; }

/* Défilement fluide pour tous les liens d'ancre (#xxx) du site */
html { scroll-behavior: smooth; }

body {
    margin: 0;
    /* Pousse le contenu sous le header, qui est toujours en position fixe.
       Retiré en mode transparent (voir body.has-transparent-header ci-dessous) :
       le hero doit s'étendre jusqu'en haut, derrière le header. */
    padding-top: var(--header-height-live);
	overflow-x: clip;
}
body.has-transparent-header { padding-top: 0; }

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--header-height);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, background-color 0.3s ease;
}
.site-header a { display: flex; align-items: center; }

/* Masqué en scrollant vers le bas, réaffiché en remontant (voir theme/site.js) */
.site-header.header-hidden { transform: translateY(-100%); }

/* Barre supérieure optionnelle (voir Navigation dans l'admin) : ajoute sa propre
   hauteur par-dessus --header-height — à augmenter d'autant si tu actives cette
   barre, --topbar-height sert juste de repli si la variable n'est pas ajustée. */
.site-header.has-topbar { height: calc(var(--header-height) + var(--topbar-height, 32px)); }

.site-topbar {
    height: var(--topbar-height, 32px);
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    gap: 12px;
}
.site-topbar-side { display: flex; align-items: center; gap: 2vw; }

.site-header-main {
    flex: 1;
    min-height: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0 24px;
    gap: 12px;
}

/* Mode transparent (page d'accueil avec hero) : fond transparent tant qu'on n'a pas
   scrollé plus bas que la hauteur du header, puis repasse en fond plein (.header-solid,
   ajoutée par theme/site.js). Les couleurs elles-mêmes sont définies dans theme.css. */
.site-header-transparent { background: transparent; }

/* Bouton burger : caché par défaut, affiché uniquement quand .burger-active
   est ajouté par theme/site.js (menu trop étroit ou qui déborde) */
.burger-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    position: relative;
    z-index: 1100; /* toujours au-dessus du panneau plein écran */
}
.burger-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    transition: transform 0.3s ease, opacity 0.2s ease;
}

.site-header.burger-active .burger-toggle { display: flex; }

/* Animation des 3 barres en croix quand le menu est ouvert */
.site-header.nav-open .burger-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg);  }
.site-header.nav-open .burger-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .burger-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu plein écran, glissé depuis la droite */
.site-header.burger-active .site-menu {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    transform: translateX(100%);
    z-index: 1050;
}
/* La transition n'est activée qu'une fois le menu déjà positionné hors écran une
   première fois (classe posée juste après par theme/site.js, au prochain repaint)
   — sinon le passage de "pas de transform" à "translateX(100%)" au chargement de
   la page est lui-même animé, ce qui donne l'impression que le menu "glisse" à
   chaque chargement alors qu'il devrait juste apparaître déjà caché. */
.site-header.burger-active.burger-transitions-ready .site-menu {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header.burger-active.nav-open .site-menu {
    transform: translateX(0);
}
/* Empêche le scroll de la page derrière le menu plein écran ouvert */
body.nav-open-lock { overflow: hidden; }

/* En mode burger : seul le contenu de type "menu" est masqué dans la barre
   normale (repris à la fin du menu plein écran à la place, voir
   .site-menu-topbar-extra ci-dessous) — un texte d'accroche reste affiché
   normalement, il n'a pas sa place dans un menu de navigation. */
.site-header.burger-active .site-topbar-type-menu { display: none; }
/* La hauteur du header ne redescend à --header-height que si aucun des deux
   côtés n'est un texte (donc que la barre est entièrement vide en mode burger) */
.site-header.has-topbar.burger-active:not(:has(.site-topbar-type-text)) { height: var(--header-height); }

/* Reprise du menu de la barre supérieure à la fin du menu plein écran mobile —
   masquée par défaut (menu normal en desktop, la barre supérieure y est déjà
   affichée séparément, pas besoin de la dupliquer ici). Ne concerne que le
   contenu de type "menu" — le texte d'accroche reste uniquement dans la barre
   normale (voir juste au-dessus), jamais dupliqué ici. */
.site-menu-topbar-extra { display: none; }
.site-header.burger-active .site-menu-topbar-extra {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    width: 100%;
}

/* Menu non-burger : jamais de retour à la ligne, c'est le débordement qui déclenche le burger */
.site-header:not(.burger-active) .site-menu {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
}

/* Repli CSS pur (sans JS) pour le cas le plus courant — écran étroit — qui
   s'applique dès le tout premier rendu, avant que theme/site.js ait eu le temps
   de s'exécuter et de poser .burger-active : sans ça, le menu normal (bureau)
   s'affiche une fraction de seconde avant de basculer en burger à chaque
   chargement de page. Le seuil ci-dessous doit rester identique à
   --burger-breakpoint dans theme/theme.css si tu le changes — une media query ne
   peut pas lire une variable CSS. Les !important sont nécessaires : la règle
   ":not(.burger-active)" juste au-dessus est plus spécifique et gagnerait sinon
   tant que le JS n'a pas encore posé la classe. Ne couvre que le cas "écran
   étroit" — le débordement de menu dépend du contenu de la page et nécessite
   toujours le JS, donc peut encore provoquer un bref flash sur les sites avec
   beaucoup de pages dans le menu. */
@media (max-width: 768px) {
    .site-header .burger-toggle { display: flex !important; }
    .site-header .site-menu {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100vh !important;
		height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        overflow-y: auto !important;
        transform: translateX(100%) !important;
        z-index: 1050 !important;
    }
    .site-header.nav-open .site-menu { transform: translateX(0) !important; }
}

.site-name {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.site-name img {
    display: block;
    max-height: calc(var(--header-height) - 24px);
    width: auto;
}

.site-menu a:first-child { margin-left: 0; }

.site-content {
    margin: 0 auto;
    min-height: 50vh;
}

.site-content h1 { margin-top: 0; }

.page-body img {
    max-width: 100%;
    height: auto;
}

.site-footer { text-align: center; }
.site-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
	padding: var(--columns-gap);
    gap: var(--columns-gap);
    max-width: var(--max-width);
    margin: 0 auto;
}
.site-footer-text { text-align: left; }
.site-footer-social { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.site-footer-social img,
.site-footer-social svg { width: 20px; height: 20px; display: block; }

@media (max-width: 698px) {
    .site-footer-inner { flex-direction: column; }
    .site-footer-text { text-align: center; }
}

.signature {
  padding: calc(var(--section-padding) / 2) 0 !important;
}

/* Formulaire de contact */
.contact-form-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
}
.contact-form label { display: block; }
.contact-form-gdpr {
    display: flex !important;
    align-items: flex-start;
    gap: 8px;
}
.contact-form-gdpr input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="date"],
.contact-form select,
.contact-form textarea {
    width: 100%;
    font-family: inherit;
	background: initial;
}
.btn-contact-submit { border: none; cursor: pointer; }

/* Sections et éléments du page builder */
.pb-section.pb-bg-image {
    background-size: cover;
    background-position: center;
    text-align: center;
    position: relative;
}
.pb-section.pb-bg-image::before {
    content: "";
    position: absolute;
    inset: 0;
}
.pb-section.pb-bg-image .pb-columns { position: relative; z-index: 1; }

.pb-columns {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}
.pb-column {
    flex: 1 1 0;
    /* Indispensable pour tout contenu large (Slick notamment) : un enfant flex
       a par défaut min-width:auto, donc refuse de rétrécir sous la taille de
       son contenu. Sans ce reset, une largeur de contenu mal calculée peut se
       répercuter sur toute la colonne et faire exploser les calculs de Slick.
       Ce n'était appliqué qu'en mobile jusqu'ici (voir plus bas) — c'était
       très probablement la vraie cause du bug de largeur aberrante. */
    min-width: 0;
}
/* Disposition flexible optionnelle (case à cocher sur la colonne) — nécessaire
   pour que le mode "Hauteur 100%" d'une image fonctionne dans cette colonne,
   mais pas activée par défaut : ça a causé un vrai conflit avec Slick (le
   slider), qui calcule mal sa largeur dans un enfant flex sans min-width:0. */
.pb-column[data-flex-column="true"] { display: flex; flex-direction: column; }
.pb-cols-1 .pb-column { flex-basis: 100%; }

/* Sections à colonnes égales (2, 3, 4) : largeur FIXE en pourcentage (et non plus
   flex-grow illimité) — c'est ce qui permet à un nombre de colonnes supérieur à N
   dans la même section (ex: 6 colonnes dans une section "3 colonnes", en dupliquant
   des colonnes dans l'éditeur) de s'empiler automatiquement par rangées de N, au lieu
   de toutes se compresser sur une seule ligne. flex-grow:0 : une rangée partielle (ex:
   4 colonnes dans une section à 3, donc 1 colonne seule sur la 2e rangée) garde sa
   largeur d'1/N plutôt que de s'étirer pour remplir toute la largeur restante.
   Le calcul soustrait l'écart entre colonnes (--columns-gap, réglable par section,
   32px par défaut) pour que N colonnes + leurs écarts tiennent exactement sur 100%
   de large, quelle que soit la valeur de cet écart. */
.pb-cols-2 .pb-column { flex: 0 1 calc((100% - var(--columns-gap)) / 2); }
.pb-cols-3 .pb-column { flex: 0 1 calc((100% - 2 * var(--columns-gap)) / 3); }
.pb-cols-4 .pb-column { flex: 0 1 calc((100% - 3 * var(--columns-gap)) / 4); }

/* Ratios asymétriques (1/3 + 2/3, 2/3 + 1/3) : remplace l'ancien style inline
   flex-grow posé par GrapesJS au dépôt du bloc. Ces deux classes sont désormais
   la SEULE source du ratio — ajustables ici une fois pour toutes plutôt que
   colonne par colonne dans chaque page. flex-basis:0 est nécessaire pour que le
   ratio se calcule sur l'espace disponible uniquement (sans lui, flex-grow doit
   composer avec le contenu naturel de chaque colonne, ce qui fausse le partage
   1/3 - 2/3 attendu). */
.pb-column.pb-col-w1 { flex: 1 1 0; }
.pb-column.pb-col-w2 { flex: 2 1 0; }

.pb-element:last-child { margin-bottom: 0; }

.pb-image img, img.pb-image, .pb-image-img { width: 100%; display: block; }

/* Mode d'affichage (réglable via le panneau de droite dans l'éditeur) :
   naturel, un des ratios (recadrage), ou hauteur 100% de la colonne parente. */
.pb-image[data-img-mode="1-1"] .pb-image-img { aspect-ratio: 1 / 1; object-fit: cover; }
.pb-image[data-img-mode="4-3"] .pb-image-img { aspect-ratio: 4 / 3; object-fit: cover; }
.pb-image[data-img-mode="3-2"] .pb-image-img { aspect-ratio: 3 / 2; object-fit: cover; }
.pb-image[data-img-mode="16-9"] .pb-image-img { aspect-ratio: 16 / 9; object-fit: cover; }

.pb-image[data-img-mode="fill-height"] { height: 100%; flex: 1 1 auto; min-height: 0; margin-bottom: 0; }
.pb-image[data-img-mode="fill-height"] .pb-image-img { height: 100%; object-fit: cover; }

/* Hauteur max en mobile pour le mode "Hauteur 100%" : la valeur (en px) est saisie
   dans l'éditeur, mais une media query ne peut pas lire un attribut data-* — elle
   est donc relue en JS (theme/site.js) et exposée en variable CSS sur l'élément. */
@media (max-width: 698px) {
    .pb-image[data-img-mode="fill-height"] { min-height: var(--mobile-max-h, none); }
}

figure.pb-image { margin: 0; }

.pb-galerie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    /* Nécessaire pour que Slick calcule correctement sa largeur : sans ça, un
       enfant flex (voir .pb-column, display:flex) peut se voir attribuer une
       largeur minimale basée sur son contenu au lieu de celle du conteneur,
       ce qui fait exploser les calculs de largeur de Slick (des centaines de
       milliers de pixels par slide). Même règle sur .pb-blog-recent plus bas. */
    width: 100%;
    min-width: 0;
	
}
.pb-galerie img { width: 100%; height: 140px; object-fit: cover; margin-bottom: 0; }

/* Colonnes précises par palier d'écran (réglable dans le panneau de droite) —
   remplace l'auto-fit par défaut ci-dessus si réglé. Desktop d'abord, puis
   tablette/mobile dans leurs media queries respectives, pour que la cascade
   les remplace correctement en dessous de chaque seuil (ordre d'écriture
   important : une media query ne peut pas lire une variable CSS, donc pas
   d'autre façon de faire varier ces valeurs par écran). */
.pb-galerie[data-cols-desktop="1"] { grid-template-columns: repeat(1, 1fr); }
.pb-galerie[data-cols-desktop="2"] { grid-template-columns: repeat(2, 1fr); }
.pb-galerie[data-cols-desktop="3"] { grid-template-columns: repeat(3, 1fr); }
.pb-galerie[data-cols-desktop="4"] { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .pb-galerie[data-cols-tablet="1"] { grid-template-columns: repeat(1, 1fr); }
    .pb-galerie[data-cols-tablet="2"] { grid-template-columns: repeat(2, 1fr); }
    .pb-galerie[data-cols-tablet="3"] { grid-template-columns: repeat(3, 1fr); }
    .pb-galerie[data-cols-tablet="4"] { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 698px) {
    .pb-galerie[data-cols-mobile="1"] { grid-template-columns: repeat(1, 1fr); }
    .pb-galerie[data-cols-mobile="2"] { grid-template-columns: repeat(2, 1fr); }
    .pb-galerie[data-cols-mobile="3"] { grid-template-columns: repeat(3, 1fr); }
    .pb-galerie[data-cols-mobile="4"] { grid-template-columns: repeat(4, 1fr); }
}

/* Mode slider : Slick gère sa propre mise en page interne (.slick-track,
   .slick-list...) une fois initialisé — la grille CSS ci-dessus doit alors
   être neutralisée, sinon les deux mises en page se battent (c'est ce qui
   causait des images collées/mise en page cassée dans une version
   précédente : la grille restait active en même temps que Slick).
   .slick-initialized est une classe que Slick ajoute lui-même une fois prêt
   — si Slick ne charge pas, cette classe n'existe jamais et la grille reste
   donc le repli naturel. */
.pb-galerie.slick-initialized { display: block; }

/* Slider témoignages : même principe de grille de repli + colonnes par palier
   d'écran que la Galerie ci-dessus (voir les commentaires plus haut pour le
   détail du raisonnement — identique ici). */
.pb-testimonial-slider {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    min-width: 0;
}
.pb-testimonial-slider[data-cols-desktop="1"] { grid-template-columns: repeat(1, 1fr); }
.pb-testimonial-slider[data-cols-desktop="2"] { grid-template-columns: repeat(2, 1fr); }
.pb-testimonial-slider[data-cols-desktop="3"] { grid-template-columns: repeat(3, 1fr); }
.pb-testimonial-slider[data-cols-desktop="4"] { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .pb-testimonial-slider[data-cols-tablet="1"] { grid-template-columns: repeat(1, 1fr); }
    .pb-testimonial-slider[data-cols-tablet="2"] { grid-template-columns: repeat(2, 1fr); }
    .pb-testimonial-slider[data-cols-tablet="3"] { grid-template-columns: repeat(3, 1fr); }
    .pb-testimonial-slider[data-cols-tablet="4"] { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 698px) {
    .pb-testimonial-slider[data-cols-mobile="1"] { grid-template-columns: repeat(1, 1fr); }
    .pb-testimonial-slider[data-cols-mobile="2"] { grid-template-columns: repeat(2, 1fr); }
    .pb-testimonial-slider[data-cols-mobile="3"] { grid-template-columns: repeat(3, 1fr); }
    .pb-testimonial-slider[data-cols-mobile="4"] { grid-template-columns: repeat(4, 1fr); }
}
.pb-testimonial-slider.slick-initialized { display: block; }

/* Diapositive : carte simple (fond + bordure légère) pour bien distinguer chaque
   témoignage du fond de la section, avec un peu d'air à l'intérieur pour le
   texte/image combinés que l'auteur y dépose. min-height évite qu'une
   diapositive avec juste une ligne de texte ait l'air "cassée" à côté d'une
   autre plus fournie (texte + image) dans la même rangée. */
.pb-testimonial-slide {
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: var(--border-radius, 6px);
    padding: 24px;
    box-sizing: border-box;
    min-height: 120px;
}
.pb-testimonial-slide img { width: 100%; height: auto; border-radius: var(--border-radius, 6px); margin-bottom: 12px; }
.pb-testimonial-slide p:last-child { margin-bottom: 0; }

/* Flèches/points par défaut de Slick restent fonctionnels tels quels ; seule
   la couleur est ajustée dans theme.css pour coller au thème. */

/* Structure ajoutée par theme/site.js pour la légende en overlay et l'icône zoom */
.pb-galerie-item-wrap { position: relative; }
.pb-galerie-caption-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
}
.pb-galerie-zoom-icon {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.pb-galerie-item-wrap:hover .pb-galerie-zoom-icon { opacity: 1; }

/* Overlay plein écran de la lightbox, injecté par theme/site.js — fondu +
   léger zoom à l'ouverture/fermeture (classe .pb-lightbox-open ajoutée/retirée
   en JS juste après l'insertion/avant la suppression de l'élément). */
.pb-lightbox-overlay {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.pb-lightbox-overlay.pb-lightbox-open { opacity: 1; }
.pb-lightbox-overlay img {
    max-width: 90vw; max-height: 90vh; object-fit: contain;
    transform: scale(0.92);
    transition: transform 0.25s ease;
}
.pb-lightbox-overlay.pb-lightbox-open img { transform: scale(1); }
.pb-lightbox-close { position: absolute; top: 16px; right: 20px; border: none; cursor: pointer; }

.pb-cta { text-align: center; }
.btn-cta { display: inline-block; text-decoration: none; }
/* Contour et texte souligné n'ont pas de fond ni de bordure pleine par défaut,
   contrairement au style plein (voir theme.css pour les couleurs) */
.btn-cta[data-btn-style="outline"] { background: transparent; border-style: solid; border-width: 2px; }
.btn-cta[data-btn-style="text"] { background: transparent; padding: 0; text-decoration: underline; }

@media (max-width: 698px) {
    /* Empile les colonnes en mobile sans changer l'axe du flex (flex-direction
       serait passé de row à column) : d'après un test réel, ce changement
       d'axe perturbe le calcul de largeur de Slick à l'intérieur d'une
       colonne. flex-basis:100% donne le même résultat visuel (une colonne
       par ligne) en restant sur un axe horizontal.
       Sélecteur répété avec .pb-col-w1/.pb-col-w2/.pb-cols-2/3/4 .pb-column :
       ces sélecteurs ont une spécificité CSS plus élevée (2 classes) que
       .pb-column seul (1 classe) — sans ce doublon, leur largeur fixe en %
       resterait active ici au lieu de s'empiler comme prévu en mobile. */
    .pb-column,
    .pb-column.pb-col-w1,
    .pb-column.pb-col-w2,
    .pb-cols-2 .pb-column,
    .pb-cols-3 .pb-column,
    .pb-cols-4 .pb-column { flex-basis: 100%; }
}

/* Bloc "Derniers articles" : grille de repli à 3 colonnes si Slick ne se
   charge pas ; une fois Slick réellement initialisé (.slick-initialized,
   ajoutée par la librairie elle-même), la grille est neutralisée pour ne
   pas entrer en conflit avec la mise en page interne de Slick — voir la
   même remarque pour la Galerie plus haut. */
.pb-blog-recent { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; min-width: 0; max-width: 100%; }
.pb-blog-recent[data-cols-desktop="1"] { grid-template-columns: repeat(1, 1fr); }
.pb-blog-recent[data-cols-desktop="2"] { grid-template-columns: repeat(2, 1fr); }
.pb-blog-recent[data-cols-desktop="3"] { grid-template-columns: repeat(3, 1fr); }
.pb-blog-recent[data-cols-desktop="4"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
    .pb-blog-recent[data-cols-tablet="1"] { grid-template-columns: repeat(1, 1fr); }
    .pb-blog-recent[data-cols-tablet="2"] { grid-template-columns: repeat(2, 1fr); }
    .pb-blog-recent[data-cols-tablet="3"] { grid-template-columns: repeat(3, 1fr); }
    .pb-blog-recent[data-cols-tablet="4"] { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 698px) {
    .pb-blog-recent[data-cols-mobile="1"] { grid-template-columns: repeat(1, 1fr); }
    .pb-blog-recent[data-cols-mobile="2"] { grid-template-columns: repeat(2, 1fr); }
    .pb-blog-recent[data-cols-mobile="3"] { grid-template-columns: repeat(3, 1fr); }
    .pb-blog-recent[data-cols-mobile="4"] { grid-template-columns: repeat(4, 1fr); }
}
.pb-blog-recent.slick-initialized { display: block; }
.pb-blog-recent-item a { display: block; text-decoration: none; }
.pb-blog-recent-item img { width: 100%; height: 160px; object-fit: cover; display: block; }

/* Bloc "Catalogue" : mêmes règles que "Derniers articles" ci-dessus (même
   comportement JS, voir theme/site.js). */
.pb-catalogue-recent { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; min-width: 0; max-width: 100%; }
.pb-catalogue-recent[data-cols-desktop="1"] { grid-template-columns: repeat(1, 1fr); }
.pb-catalogue-recent[data-cols-desktop="2"] { grid-template-columns: repeat(2, 1fr); }
.pb-catalogue-recent[data-cols-desktop="3"] { grid-template-columns: repeat(3, 1fr); }
.pb-catalogue-recent[data-cols-desktop="4"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
    .pb-catalogue-recent[data-cols-tablet="1"] { grid-template-columns: repeat(1, 1fr); }
    .pb-catalogue-recent[data-cols-tablet="2"] { grid-template-columns: repeat(2, 1fr); }
    .pb-catalogue-recent[data-cols-tablet="3"] { grid-template-columns: repeat(3, 1fr); }
    .pb-catalogue-recent[data-cols-tablet="4"] { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 698px) {
    .pb-catalogue-recent[data-cols-mobile="1"] { grid-template-columns: repeat(1, 1fr); }
    .pb-catalogue-recent[data-cols-mobile="2"] { grid-template-columns: repeat(2, 1fr); }
    .pb-catalogue-recent[data-cols-mobile="3"] { grid-template-columns: repeat(3, 1fr); }
    .pb-catalogue-recent[data-cols-mobile="4"] { grid-template-columns: repeat(4, 1fr); }
}
.pb-catalogue-recent.slick-initialized { display: block; }
.pb-catalogue-recent-item a { display: block; text-decoration: none; }
.pb-catalogue-recent-item img { width: 100%; height: 160px; object-fit: cover; display: block; }

/* Bloc Hero : bannière plein écran. Positionné directement dans .site-content
   (pas dans .pb-columns), qui n'a plus de largeur maximale ni de padding
   horizontal — le Hero est donc naturellement en pleine largeur, sans
   technique de marge négative nécessaire. */
.pb-hero {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: var(--hero-height, 80vh);
    margin: 0;
}
.pb-hero-media { position: absolute; inset: 0; z-index: 0; }
.pb-hero-media img, .pb-hero-media video {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Une seule image : elle seule s'affiche (pas de fondu nécessaire). */
.pb-hero-media img ~ img { display: none; }

/* Plusieurs images (2+) : la classe .pb-hero-slide est ajoutée par
   theme/site.js, qui gère aussi le cycle de la classe .pb-hero-slide-active
   toutes les X secondes — fondu maison plutôt que Slick (mode fade), plus
   simple et plus fiable à garantir sans navigateur pour tester. */
.pb-hero-media img.pb-hero-slide {
    display: block !important;
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
}
.pb-hero-media img.pb-hero-slide-active { opacity: 1; }

.pb-hero-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.pb-hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

/* Google Maps */
.pb-gmap { position: relative; overflow: hidden; }
.pb-gmap-consent {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; text-align: center; padding: 20px;
}
.pb-gmap iframe { display: block; }

/* Heures d'ouverture */
.pb-hours-row { display: flex; justify-content: space-between; gap: 16px; }

/* Bandeau de consentement cookies (sitewide) */
.cookie-consent-banner {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 3000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
}
.cookie-consent-banner p { margin: 0; flex: 1; min-width: 240px; }
.cookie-consent-actions { display: flex; gap: 10px; flex-shrink: 0; }