/*
 * Socle commun du Visual Builder (rendu serveur partagé).
 * Chargé À LA FOIS par le front (page publiée) et l'aperçu admin, pour que
 * "ce que l'éditeur voit = ce qui s'affiche en ligne".
 *
 * Remplace progressivement le CSS défensif (!important) de show.blade.php :
 * la responsivité vit ici, dans des classes utilitaires, plus dans des
 * sélecteurs d'attribut fragiles.
 */

/* Enveloppe de bloc : largeur + position du BLOC ENTIER (fond compris) dans
   la page. Largeur = fraction du conteneur (--blk-w, défaut 1 = 100%).
   La lisibilité reste bornée par .page-content (max-width au niveau page). */
.blk {
    box-sizing: border-box;
    width: calc(var(--blk-w, 1) * 100%);
    /* Plafond optionnel en px (--blk-maxw) : colonne lisible centrée par la classe
       d'alignement (margin auto). Sous le plafond la largeur reste fluide → mobile
       et zoom restent corrects sans media query, contrairement à une largeur en %. */
    max-width: var(--blk-maxw, none);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.blk *,
.blk *::before,
.blk *::after {
    box-sizing: border-box;
}

/* Chevauchement : remonte le bloc (marge haute négative) pour le faire mordre sur
   le bloc précédent ; z-index pour passer au-dessus (ex. carte sur un hero). */
.blk--overlap {
    margin-top: var(--blk-mt, 0);
    position: relative;
    z-index: 2;
}

/* Largeur du bloc : pilotée par --blk-w (inline, posé par BlockSocle). ----- */

/* Position horizontale du bloc -------------------------------------------- */
/* On répartit l'espace libre (1 - largeur) de part et d'autre de la boîte :
   les "demi" placent la boîte à 25% / 75% du parcours, sans dépendre d'une
   largeur fixe. À 100% l'espace libre est nul → la position n'a aucun effet. */
.blk--al-left       { margin-left: 0; margin-right: auto; }
.blk--al-left-half  { margin-left: calc((1 - var(--blk-w, 1)) * 25%); margin-right: auto; }
.blk--al-center     { margin-left: auto; margin-right: auto; }
.blk--al-right-half { margin-right: calc((1 - var(--blk-w, 1)) * 25%); margin-left: auto; }
.blk--al-right      { margin-left: auto; margin-right: 0; }

/* Conteneur interne : largeur + position du CONTENU à l'intérieur du bloc.
   Indépendant du niveau bloc (--blki-w, défaut 1 = 100%). */
.blk__inner {
    width: calc(var(--blki-w, 1) * 100%);
    margin-left: auto;
    margin-right: auto;
}

/* Largeur du contenu : pilotée par --blki-w (inline, posé par BlockSocle). - */

/* Position horizontale du contenu ----------------------------------------- */
.blk--cal-left       .blk__inner { margin-left: 0; margin-right: auto; }
.blk--cal-left-half  .blk__inner { margin-left: calc((1 - var(--blki-w, 1)) * 25%); margin-right: auto; }
.blk--cal-center     .blk__inner { margin-left: auto; margin-right: auto; }
.blk--cal-right-half .blk__inner { margin-right: calc((1 - var(--blki-w, 1)) * 25%); margin-left: auto; }
.blk--cal-right      .blk__inner { margin-left: auto; margin-right: 0; }

/* Espacements verticaux (échelle aucun / S / M / L / XL) ------------------- */
.blk-pt-none { padding-top: 0; }
.blk-pt-s    { padding-top: 1rem; }
.blk-pt-m    { padding-top: 2rem; }
.blk-pt-l    { padding-top: 3.5rem; }
.blk-pt-xl   { padding-top: 5rem; }

.blk-pb-none { padding-bottom: 0; }
.blk-pb-s    { padding-bottom: 1rem; }
.blk-pb-m    { padding-bottom: 2rem; }
.blk-pb-l    { padding-bottom: 3.5rem; }
.blk-pb-xl   { padding-bottom: 5rem; }

/* Padding interne horizontal des blocs à fond/arrondi (posé par BlockSocle quand
   background ou borderRadius est défini) : le contenu ne colle pas aux bords. */
.blk--inset { padding-left: clamp(1rem, 5%, 2rem); padding-right: clamp(1rem, 5%, 2rem); }

/* Encart « callout » réutilisable : fond orangé clair + barre gauche orange.
   Utilisé par plusieurs blocs (comparison, image+contenu…). */
.blk .vb-callout {
    background: linear-gradient(to right, #fff7ed, transparent);
    border-left: 4px solid #DB702C;
    border-radius: 0.75rem;
    padding: 1.5rem;
}
.blk .vb-callout > :last-child { margin-bottom: 0; }
.blk .vb-callout ul { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.blk .vb-callout li { position: relative; padding-left: 1.75rem; margin: 0 0 0.5rem; }
.blk .vb-callout li::before { content: "\2022"; position: absolute; left: 0.25rem; color: #DB702C; font-weight: 700; }

/* Alignement du texte ----------------------------------------------------- */
.blk-text-left   { text-align: left; }
.blk-text-center { text-align: center; }
.blk-text-right  { text-align: right; }

/* Interligne -------------------------------------------------------------- */
.blk-lh-tight  { line-height: 1.3; }
.blk-lh-normal { line-height: 1.6; }
.blk-lh-loose  { line-height: 2; }

/* Médias : jamais de débordement, jamais de rognage involontaire. */
.blk img {
    max-width: 100%;
    height: auto;
}

/* Titre de section (CDC §6.2) -------------------------------------------- */
.blk .vb-heading {
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

/* Le contenu riche Quill enveloppe le texte dans des <p> : neutraliser leur
   marge pour que le titre garde sa hauteur de ligne propre. */
.blk .vb-heading p { margin: 0; }

.blk .vb-heading-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    font-weight: 600;
    color: #DB702C;
    margin: 0 0 0.5rem;
}

/* Alignement produit par la barre d'outils Quill (classes ql-align-*). */
.blk .ql-align-center  { text-align: center; }
.blk .ql-align-right   { text-align: right; }
.blk .ql-align-justify { text-align: justify; }

/* Texte riche (CDC §6.3) ------------------------------------------------- */
.blk .vb-text {
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
}

.blk .vb-text p { margin: 0 0 1rem; }
.blk .vb-text p:last-child { margin-bottom: 0; }

/* Presets « encadré » du bloc Texte (nota / info) : carte colorée, titre accentué. */
.blk .vb-callout { padding: 1.5rem 1.75rem; border-radius: 0.75rem; border: 1px solid transparent; }
.blk .vb-callout > :first-child { margin-top: 0; }
.blk .vb-callout > :last-child { margin-bottom: 0; }
.blk .vb-callout--nota { background: #FDF3EA; border-color: #F1C9A3; }
.blk .vb-callout--nota h1, .blk .vb-callout--nota h2,
.blk .vb-callout--nota h3, .blk .vb-callout--nota h4 { color: #DB702C; }
.blk .vb-callout--info { background: #EFF4FB; border-color: #C9DBF5; }
.blk .vb-callout--info h1, .blk .vb-callout--info h2,
.blk .vb-callout--info h3, .blk .vb-callout--info h4 { color: #2563EB; }
/* Carte « mise en avant » : blanc, liseré haut orange, ombre portée (idéale pour
   chevaucher un hero). */
.blk .vb-callout--highlight {
    background: #ffffff;
    border-color: transparent;
    border-top: 4px solid #DB702C;
    border-radius: 1rem;
    padding: 2.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Mise en forme riche produite par l'éditeur Quill (parité front / aperçu).
   Sans ces règles, le reset global supprime les puces, les citations, etc.,
   alors que le HTML sauvegardé les contient bien. S'applique à TOUS les
   conteneurs de contenu riche des blocs (pas seulement .vb-text) : chaque type
   de bloc a son propre wrapper de texte alimenté par le même éditeur. */
.blk .vb-text strong, .blk .vb-text b,
.blk .vb-ti__body strong, .blk .vb-ti__body b,
.blk .vb-cta__text strong, .blk .vb-cta__text b,
.blk .vb-hero__body strong, .blk .vb-hero__body b,
.blk .vb-features__item-text strong, .blk .vb-features__item-text b,
.blk .vb-acci__a strong, .blk .vb-acci__a b,
.blk .vb-accordion__a strong, .blk .vb-accordion__a b { font-weight: 700; }
.blk .vb-text em, .blk .vb-text i,
.blk .vb-ti__body em, .blk .vb-ti__body i,
.blk .vb-cta__text em, .blk .vb-cta__text i,
.blk .vb-hero__body em, .blk .vb-hero__body i,
.blk .vb-features__item-text em, .blk .vb-features__item-text i,
.blk .vb-acci__a em, .blk .vb-acci__a i,
.blk .vb-accordion__a em, .blk .vb-accordion__a i { font-style: italic; }
.blk .vb-text u, .blk .vb-ti__body u, .blk .vb-cta__text u,
.blk .vb-hero__body u, .blk .vb-features__item-text u,
.blk .vb-acci__a u, .blk .vb-accordion__a u { text-decoration: underline; }
.blk .vb-text s, .blk .vb-ti__body s, .blk .vb-cta__text s,
.blk .vb-hero__body s, .blk .vb-features__item-text s,
.blk .vb-acci__a s, .blk .vb-accordion__a s { text-decoration: line-through; }
.blk .vb-text a, .blk .vb-ti__body a, .blk .vb-cta__text a,
.blk .vb-hero__body a, .blk .vb-features__item-text a,
.blk .vb-acci__a a, .blk .vb-accordion__a a { text-decoration: underline; }
.blk .vb-text ul, .blk .vb-text ol,
.blk .vb-ti__body ul, .blk .vb-ti__body ol,
.blk .vb-cta__text ul, .blk .vb-cta__text ol,
.blk .vb-hero__body ul, .blk .vb-hero__body ol,
.blk .vb-features__item-text ul, .blk .vb-features__item-text ol,
.blk .vb-acci__a ul, .blk .vb-acci__a ol,
.blk .vb-accordion__a ul, .blk .vb-accordion__a ol { margin: 0 0 1rem; padding-left: 1.5em; }
.blk .vb-text ul, .blk .vb-ti__body ul, .blk .vb-cta__text ul,
.blk .vb-hero__body ul, .blk .vb-features__item-text ul,
.blk .vb-acci__a ul, .blk .vb-accordion__a ul { list-style: disc; }
.blk .vb-text ol, .blk .vb-ti__body ol, .blk .vb-cta__text ol,
.blk .vb-hero__body ol, .blk .vb-features__item-text ol,
.blk .vb-acci__a ol, .blk .vb-accordion__a ol { list-style: decimal; }
.blk .vb-text li, .blk .vb-ti__body li, .blk .vb-cta__text li,
.blk .vb-hero__body li, .blk .vb-features__item-text li,
.blk .vb-acci__a li, .blk .vb-accordion__a li { margin: 0.25em 0; }
.blk .vb-text blockquote, .blk .vb-ti__body blockquote, .blk .vb-cta__text blockquote,
.blk .vb-hero__body blockquote, .blk .vb-features__item-text blockquote, .blk .vb-features__intro blockquote,
.blk .vb-acci__a blockquote, .blk .vb-accordion__a blockquote {
    margin: 0 0 1rem; padding: 0.75em 1.25em;
    border-left: 4px solid #DB702C; border-radius: 0.5rem;
    background: #f9fafb; color: #4b5563; font-style: italic;
}
.blk .vb-text pre, .blk .vb-text .ql-code-block-container,
.blk .vb-ti__body pre, .blk .vb-ti__body .ql-code-block-container,
.blk .vb-cta__text pre, .blk .vb-cta__text .ql-code-block-container,
.blk .vb-hero__body pre, .blk .vb-hero__body .ql-code-block-container,
.blk .vb-features__item-text pre, .blk .vb-features__item-text .ql-code-block-container,
.blk .vb-acci__a pre, .blk .vb-accordion__a pre {
    background: #1f2937; color: #f9fafb; border-radius: 6px;
    padding: 0.75em 1em; margin: 0 0 1rem; overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875em;
}
.blk .vb-text img, .blk .vb-ti__body img, .blk .vb-cta__text img,
.blk .vb-hero__body img, .blk .vb-features__item-text img,
.blk .vb-acci__a img, .blk .vb-accordion__a img { max-width: 100%; height: auto; }
/* Titres libres dans les blocs de texte courant (pas dans hero/features/cta
   qui ont leurs propres champs titre). */
.blk .vb-text h1, .blk .vb-ti__body h1 { font-size: 1.875rem; font-weight: 700; line-height: 1.2; margin: 0 0 0.75rem; color: #1f2937; }
.blk .vb-text h2, .blk .vb-ti__body h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin: 1rem 0 0.5rem; color: #1f2937; }
.blk .vb-text h3, .blk .vb-ti__body h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin: 1rem 0 0.5rem; color: #1f2937; }

/* Classes émises par Quill (alignement + retrait) — globales à tout bloc. */
.blk .ql-align-center { text-align: center; }
.blk .ql-align-right  { text-align: right; }
.blk .ql-align-justify { text-align: justify; }
.blk .ql-indent-1 { padding-left: 3em; }
.blk .ql-indent-2 { padding-left: 6em; }
.blk .ql-indent-3 { padding-left: 9em; }
.blk .ql-indent-4 { padding-left: 12em; }
.blk .ql-indent-5 { padding-left: 15em; }
.blk .ql-indent-6 { padding-left: 18em; }

@media (max-width: 768px) {
    .blk .vb-heading { font-size: 1.5rem; }
}

/* Bannière Hero (CDC §6.1) ----------------------------------------------- */
.blk-hero .vb-hero {
    overflow: hidden;
}

.blk-hero .vb-hero--centered {
    padding: 80px 40px;
    text-align: center;
}

.blk-hero .vb-hero--split {
    padding: 100px 40px;
}

.blk-hero .vb-hero__grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.blk-hero .vb-hero__body { text-align: left; }

.blk-hero .vb-hero__eyebrow {
    display: block;
    color: inherit;
    opacity: 0.85;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.875rem;
    margin-bottom: 20px;
}

.blk-hero .vb-hero__title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 20px;
}

.blk-hero .vb-hero--split .vb-hero__title { font-size: 3.5rem; }
.blk-hero .vb-hero__title div { margin: 0; }
.blk-hero .vb-hero__title p { margin: 0; }

.blk-hero .vb-hero__subtitle {
    font-size: 1.25rem;
    line-height: 1.6;
    opacity: 0.9;
    margin: 0;
}

.blk-hero .vb-hero__subtitle p { margin: 0; }

.blk-hero .vb-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

@media (max-width: 768px) {
    .blk-hero .vb-hero__grid { grid-template-columns: 1fr; gap: 24px; }
    .blk-hero .vb-hero__body { text-align: center; }
    .blk-hero .vb-hero--centered,
    .blk-hero .vb-hero--split { padding: 30px 20px; }
    .blk-hero .vb-hero__title,
    .blk-hero .vb-hero--split .vb-hero__title { font-size: 1.875rem; }
    .blk-hero .vb-hero__subtitle { font-size: 1rem; }
}

/* Texte + image (CDC §6.4) ----------------------------------------------- */
.blk-text_image .vb-ti__grid {
    display: grid;
    grid-template-columns: var(--ti-cols, 1fr 1fr);
    gap: 60px;
    align-items: center;
}

/* Image à gauche : on inverse l'ordre des colonnes sans toucher au HTML. */
.blk-text_image .vb-ti--img-left .vb-ti__media { order: -1; }

.blk-text_image .vb-ti__title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 20px;
}

.blk-text_image .vb-ti__title div,
.blk-text_image .vb-ti__title p { margin: 0; }

.blk-text_image .vb-ti__body {
    font-size: 1.125rem;
    color: #6b7280;
    line-height: 1.8;
}

.blk-text_image .vb-ti__body p { margin: 0 0 20px; }
.blk-text_image .vb-ti__body p:last-child { margin-bottom: 0; }

.blk-text_image .vb-ti__media img {
    width: 100%;
    height: auto;
    /* --ti-ar absent => aspect-ratio:auto (image à ses dimensions naturelles).
       Sinon object-fit:cover recadre pour uniformiser des sources hétérogènes. */
    aspect-ratio: var(--ti-ar, auto);
    object-fit: cover;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
    display: block;
}

@media (max-width: 768px) {
    .blk-text_image .vb-ti__grid { grid-template-columns: 1fr; gap: 24px; }
    .blk-text_image .vb-ti--img-left .vb-ti__media { order: 0; }
    .blk-text_image .vb-ti__title { font-size: 1.875rem; }
}

/* Appel à l'action (CDC §6.5) -------------------------------------------- */
.blk-cta .vb-cta { text-align: center; }
.blk-cta .vb-cta--left { text-align: left; }

.blk-cta .vb-cta__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 0 0 20px;
}
.blk-cta .vb-cta--left .vb-cta__head {
    flex-direction: row;
    align-items: center;
}

.blk-cta .vb-cta__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
}
.blk-cta .vb-cta--bordered .vb-cta__icon {
    background: rgba(219, 112, 44, 0.12);
    color: #DB702C;
}

.blk-cta .vb-cta__title {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
}
.blk-cta .vb-cta--left .vb-cta__text { margin-left: 0; margin-right: 0; }
.blk-cta .vb-cta--left .vb-cta__button { align-self: flex-start; }

.blk-cta .vb-cta__footnote {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 0.875rem;
    opacity: 0.85;
}
.blk-cta .vb-cta__footnote p { margin: 0; }
.blk-cta .vb-cta--bordered .vb-cta__footnote {
    border-top-color: #e5e7eb;
    color: #6b7280;
}

.blk-cta .vb-cta__title div,
.blk-cta .vb-cta__title p { margin: 0; }

.blk-cta .vb-cta__text {
    font-size: 1.125rem;
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto 30px;
}

.blk-cta .vb-cta__text div,
.blk-cta .vb-cta__text p { margin: 0; }

.blk-cta .vb-cta__button {
    display: inline-block;
    background: #fff;
    color: #DB702C;
    padding: 18px 40px;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
}

/* Groupe de boutons (1 ou 2) + 2e bouton « outline ». */
.blk-cta .vb-cta__buttons { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.blk-cta .vb-cta--center .vb-cta__buttons { justify-content: center; }
.blk-cta .vb-cta__button--alt { background: transparent; color: inherit; border: 2px solid currentColor; }

/* Variante carte colorée. */
.blk-cta .vb-cta--box {
    padding: 3rem;
    border-radius: 0.5rem;
    background: #DB702C;
    color: #fff;
}

.blk-cta .vb-cta--box .vb-cta__title { color: inherit; }
.blk-cta .vb-cta--box .vb-cta__text { color: inherit; opacity: 0.95; }

/* Variante bannière bordée (pleine largeur). */
.blk-cta .vb-cta--bordered {
    padding: 80px 20px;
    border-top: 4px solid #DB702C;
    border-bottom: 4px solid #DB702C;
}

.blk-cta .vb-cta--bordered .vb-cta__title {
    color: #1f2937;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.blk-cta .vb-cta--bordered .vb-cta__text { color: #6b7280; }

@media (max-width: 768px) {
    .blk-cta .vb-cta__title { font-size: 1.875rem; }
    .blk-cta .vb-cta--box { padding: 2rem 1.25rem; }
    .blk-cta .vb-cta--bordered { padding: 40px 16px; }
}

/* Caractéristiques (CDC §6.6) -------------------------------------------- */
/* Gouttière horizontale : la colonne (et l'encadré) ne touchent jamais les bords. */
.blk-features .vb-features { padding-left: 1rem; padding-right: 1rem; }

.blk-features .vb-features__title {
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
    text-align: center;
    margin: 0 0 2.5rem;
}

.blk-features .vb-features__title p { margin: 0; }

.blk-features .vb-features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.blk-features .vb-features--cols-2 .vb-features__grid { grid-template-columns: repeat(2, 1fr); }
.blk-features .vb-features--cols-4 .vb-features__grid { grid-template-columns: repeat(4, 1fr); }

.blk-features .vb-features__item { text-align: center; }

.blk-features .vb-features__icon {
    display: block;
    font-size: 2.5rem;
    line-height: 1;
    color: #DB702C;
    margin-bottom: 1rem;
}

/* Icône-texte (chiffre / emoji) : pastille ronde orange à chiffre blanc. */
.blk-features .vb-features__icon--text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: #DB702C;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
}

.blk-features .vb-features__item-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 0.5rem;
}

.blk-features .vb-features__item-title p { margin: 0; }

.blk-features .vb-features__item-text {
    font-size: 1rem;
    color: #6b7280;
    line-height: 1.7;
}

.blk-features .vb-features__item-text p { margin: 0 0 1rem; }
.blk-features .vb-features__item-text p:last-child { margin-bottom: 0; }

/* Eyebrow : pastille (tag) centrée au-dessus du titre. */
.blk-features .vb-features__eyebrow {
    display: block;
    width: fit-content;
    margin: 0 auto 0.75rem;
    padding: 0.375rem 1rem;
    background: rgba(219, 112, 44, 0.1);
    color: #DB702C;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
}

/* Lien optionnel par carte. */
.blk-features .vb-features__item-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    font-weight: 600;
    color: #DB702C;
    text-decoration: none;
    transition: gap .2s ease;
}
.blk-features .vb-features__item-link:hover { gap: 0.75rem; }

/* Variante « carte bordée » : carte blanche alignée à gauche, bordure haute orange,
   icône en carré arrondi (façon section « Nos engagements »). */
.blk-features .vb-features--card-bordered .vb-features__grid { align-items: stretch; }
.blk-features .vb-features--card-bordered .vb-features__item {
    text-align: left;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    padding: 2rem;
    border-top: 4px solid #DB702C;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.blk-features .vb-features--card-bordered .vb-features__icon,
.blk-features .vb-features--card-bordered .vb-features__icon--text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 0 1.25rem;
    border-radius: 0.75rem;
    background: rgba(219, 112, 44, 0.1);
    color: #DB702C;
    font-size: 1.5rem;
    font-weight: 700;
}
.blk-features .vb-features--card-bordered .vb-features__item-text { color: #374151; }
.blk-features .vb-features--card-bordered .vb-features__item-link { margin-top: auto; padding-top: 1.25rem; }

/* Encadré gris autour de l'intro + grille (sections « Institut »). */
.blk-features .vb-features__box {
    background: #f9fafb;
    border-radius: 1rem;
    padding: 2.5rem;
    /* Encart = colonne lisible centrée (≈ max-w-4xl), pas pleine largeur :
       contraste avec le fond blanc du bloc (sinon gris-sur-gris du body). */
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
}
.blk-features .vb-features__intro {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #374151;
    margin: 0 0 1.5rem;
}
.blk-features .vb-features__intro p { margin: 0 0 1rem; }
.blk-features .vb-features__intro p:last-child { margin-bottom: 0; }

/* Style d'icône « pastille ronde » (façon badges de certification). */
.blk-features .vb-features--icon-circle .vb-features__icon,
.blk-features .vb-features--icon-circle .vb-features__icon--text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 0.5rem;
    border-radius: 9999px;
    background: rgba(219, 112, 44, 0.1);
    color: #DB702C;
    font-size: 1.5rem;
    font-weight: 700;
}
.blk-features .vb-features--icon-circle .vb-features__item-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin: 0;
}

@media (max-width: 768px) {
    .blk-features .vb-features__grid,
    .blk-features .vb-features--cols-2 .vb-features__grid,
    .blk-features .vb-features--cols-4 .vb-features__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .blk-features .vb-features__title { font-size: 1.5rem; }
}

/* Colonnes (CDC §6.7) ---------------------------------------------------- */
.blk-columns .vb-columns {
    display: grid;
    gap: 2rem;
    align-items: start;
    margin-bottom: 2rem;
}

.blk-columns .vb-columns--1 { grid-template-columns: 1fr; }
.blk-columns .vb-columns--2 { grid-template-columns: repeat(2, 1fr); }
.blk-columns .vb-columns--3 { grid-template-columns: repeat(3, 1fr); }
.blk-columns .vb-columns--4 { grid-template-columns: repeat(4, 1fr); }

.blk-columns .vb-columns__col {
    padding: 20px;
    border-radius: 8px;
    min-width: 0;
}

.blk-columns .vb-columns__col > :first-child { margin-top: 0; }
.blk-columns .vb-columns__col > :last-child { margin-bottom: 0; }
.blk-columns .vb-columns__col img { max-width: 100%; height: auto; }

/* Titres de colonne uniformes (le legacy n'avait le style inline que sur le 1er). */
.blk-columns .vb-columns__col h2,
.blk-columns .vb-columns__col h3 {
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 1rem;
}

@media (max-width: 768px) {
    .blk-columns .vb-columns--2,
    .blk-columns .vb-columns--3,
    .blk-columns .vb-columns--4 {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Accordéon / FAQ (CDC §6.8) -------------------------------------------- */
.blk-accordion .vb-accordion__title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    color: #1f2937;
    margin: 0 0 2.5rem;
}

.blk-accordion .vb-accordion__title p,
.blk-accordion .vb-accordion__title div { margin: 0; }

.blk-accordion .accordion-container {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.blk-accordion .accordion-item {
    margin-bottom: 15px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.blk-accordion .accordion-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #fff;
}

.blk-accordion .vb-accordion__q {
    flex: 1;
    margin: 0;
    color: #1f2937;
    font-size: 1.125rem;
    font-weight: 700;
}

.blk-accordion .vb-accordion__q p { margin: 0; }

.blk-accordion .accordion-icon {
    margin-left: 12px;
    color: #DB702C;
    font-size: 1.5rem;
    line-height: 1;
}

.blk-accordion .accordion-content {
    display: none;
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
}

.blk-accordion .vb-accordion__a {
    padding: 20px 0;
    color: #6b7280;
    line-height: 1.6;
}

.blk-accordion .vb-accordion__a p { margin: 0 0 1rem; }
.blk-accordion .vb-accordion__a p:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
    .blk-accordion .vb-accordion__title { font-size: 1.875rem; }
}

/* Accordéon + Image (grille 2 colonnes) --------------------------------- */
.blk-accordion_image .vb-acci {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}

.blk-accordion_image .vb-acci--img-left .vb-acci__media { order: -1; }

.blk-accordion_image .vb-acci__title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 40px;
}

.blk-accordion_image .vb-acci__title p,
.blk-accordion_image .vb-acci__title div { margin: 0; }

.blk-accordion_image .accordion-item {
    margin-bottom: 15px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.blk-accordion_image .accordion-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #fff;
}

.blk-accordion_image .vb-acci__q {
    flex: 1;
    margin: 0;
    color: #1f2937;
    font-size: 1.125rem;
    font-weight: 700;
}

.blk-accordion_image .vb-acci__q p,
.blk-accordion_image .vb-acci__q div { margin: 0; }

.blk-accordion_image .accordion-icon {
    margin-left: 12px;
    color: #DB702C;
    font-size: 1.5rem;
    line-height: 1;
}

.blk-accordion_image .accordion-content {
    display: none;
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
}

.blk-accordion_image .vb-acci__a {
    padding: 20px 0;
    color: #6b7280;
    line-height: 1.6;
}

.blk-accordion_image .vb-acci__a p { margin: 0 0 1rem; }
.blk-accordion_image .vb-acci__a p:last-child { margin-bottom: 0; }

.blk-accordion_image .vb-acci__media {
    position: sticky;
    top: 20px;
}

.blk-accordion_image .vb-acci__media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}

@media (max-width: 768px) {
    .blk-accordion_image .vb-acci { grid-template-columns: 1fr; gap: 32px; }
    .blk-accordion_image .vb-acci--img-left .vb-acci__media { order: 0; }
    .blk-accordion_image .vb-acci__title { font-size: 1.875rem; }
    .blk-accordion_image .vb-acci__media { position: static; }
}

/* Galerie photos -------------------------------------------------------- */
.blk-gallery .vb-gallery__title {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    color: #1f2937;
    margin: 0 0 1rem;
}

.blk-gallery .vb-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.blk-gallery .vb-gallery__grid--2 { grid-template-columns: repeat(2, 1fr); }
.blk-gallery .vb-gallery__grid--3 { grid-template-columns: repeat(3, 1fr); }
.blk-gallery .vb-gallery__grid--4 { grid-template-columns: repeat(4, 1fr); }

.blk-gallery .vb-gallery__item {
    background: #f3f4f6;
    border-radius: 0.375rem;
    overflow: hidden;
    aspect-ratio: 1;
}

.blk-gallery .vb-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .blk-gallery .vb-gallery__grid,
    .blk-gallery .vb-gallery__grid--2,
    .blk-gallery .vb-gallery__grid--3,
    .blk-gallery .vb-gallery__grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive : l'échelle d'espacement se resserre sur petit écran. -------- */
@media (max-width: 768px) {
    .blk-pt-l  { padding-top: 2rem; }
    .blk-pt-xl { padding-top: 2.5rem; }
    .blk-pb-l  { padding-bottom: 2rem; }
    .blk-pb-xl { padding-bottom: 2.5rem; }

    /* Sur petit écran : bloc ET contenu passent en pleine largeur, empilés. */
    .blk,
    .blk__inner {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}