/*
 * Styles de base des blocs de contenu personnalisés (customblocks).
 * Volontairement minimal (v1.0) : structure + responsive. Le détail de l'apparence est destiné
 * à être surchargé par le thème enfant. Préfixe de classes `cb-` pour éviter toute collision.
 */

.cb-block { margin: 1.5rem 0; }

/* Le bloc s'adapte à la largeur de SON conteneur (colonne, wrapper…), pas seulement au viewport :
   il s'empile donc proprement dans un displayLeftColumn/RightColumn étroit, même sur desktop.
   container-type sur chaque bloc → les requêtes @container ci-dessous mesurent sa largeur réelle. */
.cb-block { container-type: inline-size; }

/* --- Grille 2 éléments --- */
.cb-grid2__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cb-grid2__item {
    position: relative; display: flex; flex-direction: column; aspect-ratio: 1 / 1;
    text-decoration: none; overflow: hidden;
}
/* Position du texte (flex) : en haut ou en bas, sans calque sombre. */
.cb-grid2__item--top { justify-content: flex-start; }
.cb-grid2__item--bottom { justify-content: flex-end; }

/* Image plein cadre (background) ; zoom 105 % au survol de la tuile entière. L'image est posée en
   absolu dans la tuile et l'<img> remplit son cadre en cover → elle ne déborde jamais et reste
   DERRIÈRE le contenu (z-index). */
.cb-grid2__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cb-grid2__img {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block;
    object-fit: cover; transition: transform .4s ease;
}
.cb-grid2__item:hover .cb-grid2__img,
.cb-grid2__item:focus-visible .cb-grid2__img { transform: scale(1.05); }

.cb-grid2__content {
    position: relative; z-index: 1; display: flex; flex-direction: column;
    align-items: flex-start; justify-content: center; gap: .4rem;
    min-height: 50%; padding: 1.25rem;
}
.cb-grid2__title { font-size: 1.5rem; line-height: 1.2; font-weight: 700; }
.cb-grid2__subtitle { font-size: 1rem; }
.cb-grid2__cta { text-decoration: underline; font-weight: 700; }
/* Fond + bords (légèrement) arrondis uniquement si une couleur de fond est renseignée. */
.cb-grid2__cta--filled { padding: .5rem 1.1rem; border-radius: 5px; text-decoration: none; }

/* --- Grille 3 éléments --- */
.cb-grid3__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.cb-grid3__item { display: flex; text-decoration: none; color: inherit; overflow: hidden; border-radius: 5px; }
/* Position du texte (flex) : la zone texte reste à 50 %, l'image occupe l'autre moitié. */
.cb-grid3__item--right { flex-direction: row-reverse; }
.cb-grid3__text { flex: 0 0 50%; padding: 1.25rem; display: flex; flex-direction: column; justify-content: center; }
.cb-grid3__media { flex: 0 0 50%; background: #f3f3f3; overflow: hidden; }
.cb-grid3__img {
    width: 100%; height: 100%; display: block; object-fit: cover;
    transition: transform .4s ease;
}
.cb-grid3__item:hover .cb-grid3__img,
.cb-grid3__item:focus-visible .cb-grid3__img { transform: scale(1.05); }

/* --- Mise en avant catégorie --- */
/* column-gap: 0 → le visuel et la grille produits sont accolés (aucune marge entre eux). L'espace
   avec la colonne de gauche est rétabli via un padding sur les sous-catégories.
   align-items: stretch → la grille produits prend toute la hauteur de la colonne du visuel. */
.cb-catfeature__row { display: grid; grid-template-columns: 25% 25% 50%; column-gap: 0; row-gap: 0; align-items: stretch; }

/* Colonne de gauche : titre de section AU-DESSUS de la liste de sous-catégories. */
.cb-catfeature__subcats { padding-right: 1rem; }
.cb-catfeature__title { text-align: left; font-size: 2rem; font-weight: 500; margin: 0 0 1.75rem; }
.cb-catfeature__subcats ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: .85rem;
}
.cb-catfeature__subcats a {
    color: #000; font-weight: 400; text-decoration: none;
    transition: color .15s ease;
}
/* Au survol : couleur --bs-red + faux-gras par ombre (même couleur) → épaissit le glyphe SANS
   reflow ni « flick » de largeur que provoquerait un vrai font-weight: bold. */
.cb-catfeature__subcats a:hover,
.cb-catfeature__subcats a:focus-visible {
    color: var(--bs-red, #dc3545);
    text-shadow: 0.35px 0 0 currentColor, -0.35px 0 0 currentColor;
}

/* Visuel principal : entièrement cliquable, image zoomée à 105 % au survol, CTA superposé (haut/bas). */
.cb-catfeature__visual-link { position: relative; display: block; overflow: hidden; text-decoration: none; }
.cb-catfeature__visual-img { width: 100%; height: auto; display: block; transition: transform .4s ease; }
.cb-catfeature__visual-link:hover .cb-catfeature__visual-img,
.cb-catfeature__visual-link:focus-visible .cb-catfeature__visual-img { transform: scale(1.05); }
.cb-catfeature__cta {
    position: absolute; left: 50%; transform: translateX(-50%);
    padding: .5rem 1.1rem; border-radius: 5px; text-decoration: none; font-weight: 700;
    color: #fff; /* défaut sur image ; surchargé par la couleur de texte si renseignée */
    white-space: nowrap;
}
/* Position verticale du CTA (choisie en BO). Le fond n'apparaît que si une couleur est renseignée. */
.cb-catfeature__visual-link--bottom .cb-catfeature__cta { bottom: 1rem; }
.cb-catfeature__visual-link--top .cb-catfeature__cta { top: 2rem; }

/* Grille produits : lignes visibles via le fond qui transparaît dans les gouttières (gap 1px),
   pleine hauteur de la colonne, contenu centré verticalement ; image zoomée à 105 % au survol. */
.cb-catfeature__products {
    display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr);
    gap: 1px; height: 100%;
    background: var(--bs-border-color, #dee2e6);
    border: 1px solid var(--bs-border-color, #dee2e6);
}
.cb-catfeature__product {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: .5rem; text-align: center; text-decoration: none; color: inherit;
    background: #fff; padding: .5rem; min-width: 0; overflow: hidden;
}
.cb-catfeature__product-media { display: block; max-width: 100%; overflow: hidden; }
.cb-catfeature__product-img { max-width: 100%; height: auto; display: block; transition: transform .4s ease; }
/* Catch phrase = appel à l'action (CTA) du produit → affiché en gras. */
.cb-catfeature__product-catch { font-weight: 700; }
.cb-catfeature__product:hover .cb-catfeature__product-img,
.cb-catfeature__product:focus-visible .cb-catfeature__product-img { transform: scale(1.05); }

/* --- Bannière --- */
/* Dans displayContentWrapperTop, la bannière colle au haut du contenu : on retire la margin-top
   héritée de .cb-block et on ne garde que la margin-bottom pour la séparer du contenu en dessous. */
.cb-banner--content-top { margin-top: 0; }

/* Le cadre (.cb-banner__frame) est l'enfant direct de .cb-block : il est donc contraint à la largeur
   du conteneur sur la home, comme les autres blocs. L'image (en flux) lui donne sa hauteur ; la
   couleur de fond du cadre transparaît sous les zones transparentes de l'image ; le bloc texte est
   superposé en absolu (pleine hauteur). */
.cb-banner__frame {
    position: relative; display: block; overflow: hidden; min-height: 180px;
    text-decoration: none; color: inherit;
}
.cb-banner__media { display: block; }
.cb-banner__bg { display: block; width: 100%; height: auto; transition: transform .4s ease; }
/* Toute la bannière cliquable : zoom 105 % de l'image au survol (rogné par overflow: hidden). */
.cb-banner__frame:hover .cb-banner__bg,
.cb-banner__frame:focus-visible .cb-banner__bg { transform: scale(1.05); }
.cb-banner__inner { position: absolute; inset: 0; z-index: 1; display: flex; }
.cb-banner__inner--left { justify-content: flex-start; }
.cb-banner__inner--right { justify-content: flex-end; }
/* Conteneur texte : 50 % de large, centré verticalement. */
.cb-banner__text {
    flex: 0 0 50%; max-width: 50%; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center;
    gap: .25rem; padding: 1.5rem clamp(1.5rem, 5%, 4rem);
}
/* Alignement horizontal du contenu dans le conteneur de 50 %. */
.cb-banner__inner--align-left .cb-banner__text { align-items: flex-start; text-align: left; }
.cb-banner__inner--align-center .cb-banner__text { align-items: center; text-align: center; }
.cb-banner__inner--align-right .cb-banner__text { align-items: flex-end; text-align: right; }
/* Sous-titre : plus petit mais en gras ; titre : plus grand mais en graisse normale. */
.cb-banner__subtitle { margin: 0; font-size: 1rem; font-weight: 700; }
.cb-banner__title { margin: 0; font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 300; line-height: 1.15; }

/* --- Accessibilité : focus clavier visible sur les conteneurs cliquables --- */
.cb-grid2__item:focus-visible,
.cb-grid3__item:focus-visible,
.cb-catfeature__product:focus-visible,
.cb-catfeature__visual-link:focus-visible,
.cb-catfeature__subcats a:focus-visible,
.cb-banner__frame:focus-visible {
    outline: 3px solid #2d7ff9; outline-offset: 2px;
}

/* --- Empilement selon la largeur du CONTENEUR (sidebar étroite, colonne…) --- */
@container (max-width: 540px) {
    .cb-grid2__row,
    .cb-grid3__row,
    .cb-catfeature__row,
    .cb-catfeature__products { grid-template-columns: 1fr; }
    .cb-grid3__item, .cb-grid3__item--right { flex-direction: column; }
    .cb-grid3__text, .cb-grid3__media { flex-basis: auto; }
    /* Empilé : la grille produits reprend une hauteur naturelle (plus liée au visuel). */
    .cb-catfeature__products { height: auto; grid-template-rows: auto; }
    /* Empilé : marge sous la liste de catégories (avant le visuel) + cases produits plus aérées. */
    .cb-catfeature__subcats { padding-right: 0; margin-bottom: 1rem; }
    .cb-catfeature__product { padding: 1rem; }
    /* Bannière : empilement vertical → « Texte en premier » (left) = texte EN HAUT ;
       « Image en premier » (right) = texte EN BAS (justify-content flex-start/flex-end en colonne). */
    .cb-banner__inner { flex-direction: column; }
    .cb-banner__text { flex-basis: auto; max-width: 100%; padding: 1.25rem; }
}

/* --- Responsive : empilement mobile (repli viewport, navigateurs sans @container) --- */
@media (max-width: 767px) {
    .cb-grid2__row,
    .cb-grid3__row,
    .cb-catfeature__row,
    .cb-catfeature__products { grid-template-columns: 1fr; }
    .cb-grid3__item, .cb-grid3__item--right { flex-direction: column; }
    .cb-grid3__text, .cb-grid3__media { flex-basis: auto; }
    /* Empilé : la grille produits reprend une hauteur naturelle (plus liée au visuel). */
    .cb-catfeature__products { height: auto; grid-template-rows: auto; }
    /* Empilé : marge sous la liste de catégories (avant le visuel) + cases produits plus aérées. */
    .cb-catfeature__subcats { padding-right: 0; margin-bottom: 1rem; }
    .cb-catfeature__product { padding: 1rem; }
    /* Bannière : empilement vertical → « Texte en premier » (left) = texte EN HAUT ;
       « Image en premier » (right) = texte EN BAS (justify-content flex-start/flex-end en colonne). */
    .cb-banner__inner { flex-direction: column; }
    .cb-banner__text { flex-basis: auto; max-width: 100%; padding: 1.25rem; }
}

/* ============================================================================
 * Contrainte "largeur de contenu" sur la PAGE D'ACCUEIL.
 *
 * Pourquoi : la home du thème est en `layout-full-width` (body#index) et rend les hooks SANS
 * `.container` → le bloc s'étale pleine largeur. On recentre le CONTENU de chaque bloc (l'enfant
 * direct de .cb-block) à la largeur du conteneur du thème, en laissant la <section> pleine largeur
 * (permet un futur fond pleine largeur). Scopé à `#index` → n'affecte ni les pages catégorie ni
 * les colonnes (déjà dans le wrapper).
 *
 * ⚠️ CSS d'INTÉGRATION (couplé au thème) : les paliers de max-width reprennent le conteneur
 * Bootstrap 5 par défaut du thème. Si ton thème personnalise ces largeurs, ajuste-les ici — ou,
 * plus propre, déplace ce bloc dans le CSS du thème / une surcharge thème (voir README).
 * ============================================================================ */
#index .cb-block > * {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
}
@media (min-width: 576px)  { #index .cb-block > * { max-width: 540px; } }
@media (min-width: 768px)  { #index .cb-block > * { max-width: 720px; } }
@media (min-width: 992px)  { #index .cb-block > * { max-width: 960px; } }
@media (min-width: 1200px) { #index .cb-block > * { max-width: 1140px; } }
@media (min-width: 1400px) { #index .cb-block > * { max-width: 1320px; } }

/* Bannière sur la home : on conserve la largeur du conteneur (max-width ci-dessus) MAIS on retire le
   padding de gouttière sur le cadre → l'image occupe 100 % de la bannière, sans marge latérale
   (le débordement du zoom 105 % au survol reste rogné par overflow: hidden). Placé après → l'emporte. */
#index .cb-banner > * { padding-left: 0; padding-right: 0; }

/* ============================================================================
 *  Slider / Carrousel (type de bloc « slider ») — carrousel Bootstrap 5.
 * ============================================================================ */
.cb-slider { overflow: hidden; }

/* Slider pleine largeur (hero) : pas de marge haute (collé à ce qui précède), on garde la marge basse
   héritée de .cb-block. */
.cb-slider--full { margin-top: 0; }

/* Largeur PLEINE : neutralise la contrainte "contenu" de la home pour ce variant — le carrousel
   (enfant direct de .cb-block) doit s'étaler bord à bord. Le variant `contained` garde, lui, le
   `.container` interne (et hérite donc de la largeur de grille via #index .cb-block > *). */
#index .cb-slider--full > * { max-width: none; padding-left: 0; padding-right: 0; }

.cb-slider__carousel { position: relative; }

.cb-slider__frame { position: relative; display: block; overflow: hidden; color: inherit; text-decoration: none; }
.cb-slider__media { display: block; }
/* Ratio FORCÉ : 3:1 desktop, 1:2 mobile (anti-CLS) ; recadrage propre quelle que soit la taille uploadée. */
.cb-slider__img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 1;
    object-fit: cover;
    transition: transform .4s ease;
}
/* Zoom léger au survol (rogné par overflow:hidden du cadre). */
.cb-slider__frame:hover .cb-slider__img,
.cb-slider__frame:focus-visible .cb-slider__img { transform: scale(1.04); }

/* Calque légende : superposé, pleine surface, sans capter le clic (→ lien de slide). */
.cb-slider__caption { position: absolute; inset: 0; z-index: 1; display: flex; pointer-events: none; }
/* Le bloc texte vit TOUJOURS dans un .container centré → jamais sous les flèches, même en full-width.
   `--left/--right` (= ordre d'affichage) : justify-content bascule horizontal (desktop, row) ↔
   vertical (mobile, column), exactement comme la bannière. */
.cb-slider__inner { display: flex; align-items: center; height: 100%; }
.cb-slider__inner--left  { justify-content: flex-start; }
.cb-slider__inner--right { justify-content: flex-end; }
.cb-slider__text {
    flex: 0 0 50%; max-width: 50%; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center;
    gap: .5rem; padding: 1.5rem clamp(1rem, 4%, 3rem);
    pointer-events: auto;
}
.cb-slider__inner--align-left   .cb-slider__text { align-items: flex-start; text-align: left; }
.cb-slider__inner--align-center .cb-slider__text { align-items: center; text-align: center; }
.cb-slider__inner--align-right  .cb-slider__text { align-items: flex-end; text-align: right; }

.cb-slider__subtitle { margin: 0; font-size: 1rem; font-weight: 700; }
.cb-slider__title { margin: 0; font-size: clamp(1.5rem, 3vw, 2.75rem); font-weight: 300; line-height: 1.15; }
.cb-slider__cta {
    display: inline-block;
    margin-top: .25rem;
    padding: .5rem 1.25rem;
    border-radius: .375rem;
    background-color: var(--bs-primary, #0b69f6);
    color: #fff;
    font-weight: 600;
}

/* Mobile : ratio 3:5 (~500×833 px) + empilement vertical (text-first = haut, image-first = bas). */
@media (max-width: 767px) {
    .cb-slider__img { aspect-ratio: 3 / 5; }
    .cb-slider__inner { flex-direction: column; }
    .cb-slider__text { flex: 0 0 auto; max-width: 100%; padding: 1.25rem; }
}

/* Réglage système « animations réduites » : pas de transition de slide ni de zoom. */
@media (prefers-reduced-motion: reduce) {
    .cb-slider .carousel-item { transition: none; }
    .cb-slider__img { transition: none; }
}