/*
 * Blocs du builder de page.
 *
 * Les réglages d'apparence arrivent en variables CSS posées sur la balise du
 * bloc (voir App\Builder\BlockStyle). Chaque réglage a sa classe « has-block-* »
 * : sans elle, aucune règle ne s'applique, donc les sections historiques du
 * site gardent exactement leur mise en forme d'origine.
 */

/* ---- Conteneur des blocs génériques ---- */

.block {
    position: relative;
    padding-top: var(--block-padding-top, 80px);
    padding-bottom: var(--block-padding-bottom, 80px);
}

.block > .block-inner {
    margin: 0 auto;
    padding: 0 1rem;
    max-width: var(--block-inner-max, var(--container-max));
}

.block--width-narrow > .block-inner { --block-inner-max: 760px; }
.block--width-wide > .block-inner { --block-inner-max: 1500px; }
.block--width-full > .block-inner { --block-inner-max: none; padding: 0; }

.block--align-center { text-align: center; }
.block--align-right { text-align: right; }
.block--align-center .block-buttons { justify-content: center; }
.block--align-right .block-buttons { justify-content: flex-end; }

/* ---- Réglages d'apparence, actifs seulement s'ils ont été choisis ----
 *
 * Chaque classe est répétée : un réglage choisi doit l'emporter sur le style
 * d'origine de la zone, y compris quand la feuille propre à la page (blog.css,
 * article.css, landing.css) est chargée après celle-ci, à poids égal. */

.has-block-pt.has-block-pt { padding-top: var(--block-padding-top); }
.has-block-pb.has-block-pb { padding-bottom: var(--block-padding-bottom); }
.has-block-bg.has-block-bg { background-color: var(--block-background); }
/*
 * Couleur du texte : les titres et paragraphes du site ont souvent leur couleur
 * écrite en dur (.intro-title, .lieux-text p…). La classe est donc répétée pour
 * peser plus lourd que ces règles, et la liste :where() n'ajoute rien au poids.
 * Les liens et boutons sont volontairement exclus : ils gardent leur couleur.
 */
.has-block-text.has-block-text { color: var(--block-text); }
.has-block-text.has-block-text :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, span, strong, b, em, i, small, figcaption, blockquote, td, th) {
    color: var(--block-text);
}
.has-block-radius.has-block-radius { border-radius: var(--block-radius); overflow: hidden; }

.has-block-img.has-block-img {
    position: relative;
    background-image: var(--block-image);
    background-size: cover;
    background-position: center;
}

/* Voile de lisibilité au-dessus de l'image de fond. */
.has-block-img.has-block-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--block-overlay, 0));
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

.has-block-img.has-block-img > * { position: relative; z-index: 1; }

/* ---- Typographie réglable bloc par bloc ----
 *
 * Les titres et textes du site ont leur mise en forme écrite en dur dans
 * app.css. La classe marqueur est donc répétée pour peser plus lourd, et la
 * liste :where() n'ajoute aucun poids. Rien ne s'applique sans le réglage.
 */

.has-title-color.has-title-color :where(h1, h2, h3, .section-title-styled, .intro-title, .split-title, .newsletter-title, .hero-title, .ar-block-title):not(:where(.ideal-card *, .article-card *, .bk-review *, .bk-gallery-item *, .mapp *, .ar-venue *)) {
    color: var(--title-color);
}

.has-title-size.has-title-size :where(h1, h2, h3, .section-title-styled, .intro-title, .split-title, .newsletter-title, .hero-title, .ar-block-title):not(:where(.ideal-card *, .article-card *, .bk-review *, .bk-gallery-item *, .mapp *, .ar-venue *)) {
    font-size: var(--title-size);
}

.has-title-weight.has-title-weight :where(h1, h2, h3, .section-title-styled, .intro-title, .split-title, .newsletter-title, .hero-title, .ar-block-title):not(:where(.ideal-card *, .article-card *, .bk-review *, .bk-gallery-item *, .mapp *, .ar-venue *)) {
    font-weight: var(--title-weight);
}

/* Titre entier en dégradé de marque. */
.has-title-gradient.has-title-gradient :where(h1, h2, h3, .section-title-styled, .intro-title, .split-title, .newsletter-title, .ar-block-title):not(:where(.ideal-card *, .article-card *, .bk-review *, .mapp *, .ar-venue *)) {
    background: linear-gradient(90deg, var(--gradient-from), var(--gradient-to));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Surtitres. */
.has-kicker-color.has-kicker-color :where(.section-surtitle, .split-surtitle, .ar-badge, .hero-badge, .bk-review-role, .bl-kicker) { color: var(--kicker-color); }
.has-kicker-size.has-kicker-size :where(.section-surtitle, .split-surtitle, .ar-badge, .hero-badge, .bl-kicker) { font-size: var(--kicker-size); }
.has-kicker-spacing.has-kicker-spacing :where(.section-surtitle, .split-surtitle, .ar-badge, .hero-badge, .bl-kicker) { letter-spacing: var(--kicker-spacing); }

/*
 * Textes courants. Les contenus de cartes et la version mobile sont exclus :
 * ils ont leur propre échelle, qu'un réglage de bloc ne doit pas casser.
 */
.has-text-size.has-text-size :where(p, li):not(:where(.ideal-card *, .article-card *, .bk-review *, .bk-gallery-item *, .mapp *, .ar-venue *)) {
    font-size: var(--text-size);
}

.has-text-leading.has-text-leading :where(p, li):not(:where(.ideal-card *, .article-card *, .bk-review *, .bk-gallery-item *, .mapp *, .ar-venue *)) {
    line-height: var(--text-leading);
}

.has-text-width.has-text-width :where(p, .block-text, .intro-content, .bk-faq-answer):not(:where(.ideal-card *, .article-card *, .mapp *)) {
    max-width: var(--text-width);
}

.has-text-width.block--align-center :where(p, .block-text, .intro-content) { margin-inline: auto; }

/* ---- Cartes (sélection de lieux, articles, avis) ---- */

.has-card-radius.has-card-radius :where(.ideal-card, .ideal-card-image, .ideal-card-image img, .article-card, .article-card-image img, .bk-review) {
    border-radius: var(--card-radius);
    overflow: hidden;
}

.has-card-shadow.has-card-shadow :where(.ideal-card, .article-card, .bk-review) { box-shadow: var(--card-shadow); }
.has-card-border.has-card-border :where(.ideal-card, .article-card, .bk-review) { border: 1px solid rgba(16, 24, 40, .12); }

.has-tag-bg.has-tag-bg :where(.ideal-card-tag, .article-card-category, .mapp-flag) { background: var(--tag-bg); }
.has-tag-color.has-tag-color :where(.ideal-card-tag, .article-card-category, .mapp-flag) { color: var(--tag-color); }

/* Nombre de cartes par ligne. Classes répétées, pour l'emporter sur la grille
   propre à une page (.page-blog .blog-grid…). */
.has-cards-cols.has-cards-cols :where(.ideal-grid, .card-grid, .bk-reviews, .blog-grid) { display: grid; }
.cards-cols-2.cards-cols-2 :where(.ideal-grid, .card-grid, .bk-reviews, .blog-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-cols-3.cards-cols-3 :where(.ideal-grid, .card-grid, .bk-reviews, .blog-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-cols-4.cards-cols-4 :where(.ideal-grid, .card-grid, .bk-reviews, .blog-grid) { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
    .cards-cols-3.cards-cols-3 :where(.ideal-grid, .card-grid, .bk-reviews, .blog-grid),
    .cards-cols-4.cards-cols-4 :where(.ideal-grid, .card-grid, .bk-reviews, .blog-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .has-cards-cols.has-cards-cols :where(.ideal-grid, .card-grid, .bk-reviews, .blog-grid) { grid-template-columns: 1fr; }
}

/* ---- Contenus des blocs génériques ---- */

.block-text > *:first-child, .block-lead > *:first-child { margin-top: 0; }
.block-text > *:last-child, .block-lead > *:last-child { margin-bottom: 0; }

.block-text--two-columns { columns: 2; column-gap: 2.5rem; }
@media (max-width: 768px) { .block-text--two-columns { columns: 1; } }

.block-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---- Styles de bouton réglables bloc par bloc ----
 *
 * Ces classes ne s'appliquent que si un style a été choisi dans le builder :
 * sans cela, chaque bouton garde la classe d'origine de sa section.
 * Les couleurs personnalisées viennent après les styles, pour les emporter.
 */

.bk-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-decoration: none; }

.bk-btn--gradient { background: linear-gradient(90deg, var(--gradient-from), var(--gradient-to)); border-color: transparent; color: #fff; }
.bk-btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.bk-btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.bk-btn--dark { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.bk-btn--white { background: #fff; border-color: #fff; color: var(--secondary); }
.bk-btn--outline-dark { background: transparent; border: 2px solid var(--secondary); color: var(--secondary); }
.bk-btn--outline-light { background: transparent; border: 2px solid rgba(255, 255, 255, .8); color: #fff; }

.bk-btn--link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bk-btn--gradient:hover, .bk-btn--primary:hover, .bk-btn--accent:hover,
.bk-btn--dark:hover, .bk-btn--white:hover { filter: brightness(.93); }
.bk-btn--outline-dark:hover { background: var(--secondary); color: #fff; }
.bk-btn--outline-light:hover { background: rgba(255, 255, 255, .16); }

/* Taille et couleurs choisies à la main : classe répétée pour l'emporter sur le
   style d'origine du bouton (.bl-btn, .ar-link…), même chargé après. */
.bk-btn--sm.bk-btn--sm { padding: 9px 20px; font-size: .875rem; }
.bk-btn--md.bk-btn--md { padding: 13px 30px; font-size: .95rem; }
.bk-btn--lg.bk-btn--lg { padding: 17px 42px; font-size: 1.05rem; }
.bk-btn--block.bk-btn--block { display: flex; width: 100%; }

/* Couleurs choisies à la main, prioritaires sur le style retenu. Au survol, elles
   restent en place, légèrement assombries, au lieu que la couleur d'origine
   du bouton revienne. */
.bk-btn--bg.bk-btn--bg, .bk-btn--bg.bk-btn--bg:hover { background: var(--btn-bg); border-color: var(--btn-bg); }
.bk-btn--bg.bk-btn--bg:hover { filter: brightness(.93); }
.bk-btn--fg.bk-btn--fg, .bk-btn--fg.bk-btn--fg:hover { color: var(--btn-color); }

/*
 * Couleurs au survol. Une couleur de survol choisie remplace l'assombrissement
 * automatique des styles pleins, sinon les deux effets se cumuleraient.
 */
.bk-btn--bgh.bk-btn--bgh:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); filter: none; }
.bk-btn--fgh.bk-btn--fgh:hover { color: var(--btn-color-hover); filter: none; }

.block-figure { margin: 0; }
.block-figure img { width: 100%; border-radius: inherit; }
.block-figure figcaption { margin-top: .6rem; font-size: .875rem; color: var(--text-light); }

.block-separator { border: 0; height: 1px; background: rgba(15, 76, 129, .18); margin: 0; }
.block-separator--gradient { height: 3px; background: linear-gradient(90deg, var(--primary, var(--gradient-from)), var(--accent, var(--gradient-to))); border-radius: 999px; }

.block-empty {
    margin: 0;
    padding: 2rem;
    border: 1px dashed rgba(15, 76, 129, .35);
    border-radius: 12px;
    text-align: center;
    color: var(--text-light);
}

/* ---- Avis clients ---- */

.bk-reviews {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-top: 2rem;
    text-align: left;
}

.bk-review {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    margin: 0;
    padding: 1.6rem;
    border: 1px solid rgba(15, 76, 129, .12);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(16, 24, 40, .05);
}

.bk-stars { display: inline-flex; gap: 2px; }
.bk-star { width: 16px; height: 16px; fill: rgba(16, 24, 40, .15); }
.bk-star.is-on { fill: #F5A623; }

.bk-review-text { margin: 0; color: var(--text, #1e2229); font-size: .975rem; line-height: 1.65; }
.bk-review-text::before { content: '« '; }
.bk-review-text::after { content: ' »'; }

.bk-review-author { display: flex; align-items: center; gap: .7rem; margin-top: auto; font-size: .875rem; }
.bk-review-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.bk-review-author strong { display: block; }
.bk-review-role { color: var(--text-light); }

/* ---- Questions fréquentes ---- */

.bk-faq { margin-top: 1.5rem; text-align: left; }

.bk-faq-item {
    border: 1px solid rgba(15, 76, 129, .14);
    border-radius: 14px;
    background: #fff;
    margin-bottom: .6rem;
}

.bk-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.bk-faq-question::-webkit-details-marker { display: none; }
.bk-faq-chevron { width: 18px; height: 18px; flex: 0 0 18px; transition: transform .2s; }
.bk-faq-item[open] .bk-faq-chevron { transform: rotate(180deg); }
.bk-faq-answer { padding: 0 1.2rem 1.15rem; color: var(--text-light, #4b5563); line-height: 1.7; }
.bk-faq-answer > *:first-child { margin-top: 0; }
.bk-faq-answer > *:last-child { margin-bottom: 0; }

/* ---- Étapes ---- */

.bk-steps {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.bk-step { display: flex; gap: .9rem; }

.bk-step-number {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: var(--primary, var(--gradient-from));
    color: #fff;
    font-weight: 700;
}

.bk-step-body { display: flex; flex-direction: column; gap: .25rem; }
.bk-step-title { font-size: 1rem; }
.bk-step-text { color: var(--text-light); font-size: .925rem; line-height: 1.6; }

/* ---- Galerie ---- */

.bk-gallery { display: grid; gap: .75rem; margin-top: 1.5rem; }
.bk-gallery--cols-2 { grid-template-columns: repeat(2, 1fr); }
.bk-gallery--cols-3 { grid-template-columns: repeat(3, 1fr); }
.bk-gallery--cols-4 { grid-template-columns: repeat(4, 1fr); }

.bk-gallery-item { margin: 0; }
.bk-gallery-item img { width: 100%; border-radius: 14px; object-fit: cover; }
.bk-gallery-item figcaption { margin-top: .4rem; color: var(--text-light); font-size: .8125rem; }

.bk-gallery--landscape img { aspect-ratio: 4 / 3; }
.bk-gallery--square img { aspect-ratio: 1 / 1; }
.bk-gallery--portrait img { aspect-ratio: 3 / 4; }
.bk-gallery--free img { aspect-ratio: auto; }

@media (max-width: 900px) { .bk-gallery--cols-4 { grid-template-columns: repeat(2, 1fr); } .bk-gallery--cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bk-gallery { grid-template-columns: 1fr !important; } }

/* ---- Vidéo ---- */

.bk-video { position: relative; margin-top: 1.5rem; border-radius: 16px; overflow: hidden; background: #000; }
.bk-video--16-9 { aspect-ratio: 16 / 9; }
.bk-video--4-3 { aspect-ratio: 4 / 3; }
.bk-video--9-16 { aspect-ratio: 9 / 16; max-width: 420px; margin-inline: auto; }
.bk-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Carte ---- */

.bk-map { margin-top: 1.5rem; border-radius: 16px; overflow: hidden; z-index: 0; }
.bk-map--sm { height: 260px; }
.bk-map--md { height: 400px; }
.bk-map--lg { height: 560px; }

/*
 * Parties de page SEO. L'emballage .ls-block n'existe qu'en édition, ou quand la
 * partie a des réglages d'apparence :
 * ces règles lui rendent la mise en forme que les sélecteurs « > » de
 * article.css appliquaient aux éléments directs, pour que l'éditeur montre la
 * même chose que la page publiée.
 */
.ar-content > .ls-block:first-child { margin-bottom: 0; color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }
.ar-content > .ls-block > h2:first-child { margin-top: 44px; }
.ar-content > .ls-block:first-child > h2:first-child { margin-top: 0; }