/* ─── Reset ─────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

.wp-site-blocks,
.wp-block-group,
.entry-content,
.wp-block-post-content {
    margin: 0 !important;
    padding: 0 !important;
}

.wp-block-template-part,
.is-layout-flow > .wp-block-template-part,
.is-layout-constrained > .wp-block-template-part,
.wp-block-hl-header,
.is-layout-flow > .wp-block-hl-header,
.is-layout-constrained > .wp-block-hl-header,
.wp-block-hl-footer,
.is-layout-flow > .wp-block-hl-footer,
.is-layout-constrained > .wp-block-hl-footer {
    max-width: none !important;
    width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
}

/* ─── Layout ─────────────────────────────────────────── */
.hl-container {
    max-width: var(--wp--style--global--content-size);
    margin-inline: auto;
    padding-inline: 58px;
}

/* ─── Grid 12 colonnes ───────────────────────────────── */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: -12px;
}

.row > * {
    padding-inline: 12px;
    flex: 0 0 100%;
    width: 100%;
}

/* col sans préfixe : toutes tailles */
.col-1  { flex: 0 0 8.3333%;  width: 8.3333%; }
.col-2  { flex: 0 0 16.6666%; width: 16.6666%; }
.col-3  { flex: 0 0 25%;      width: 25%; }
.col-4  { flex: 0 0 33.3333%; width: 33.3333%; }
.col-5  { flex: 0 0 41.6666%; width: 41.6666%; }
.col-6  { flex: 0 0 50%;      width: 50%; }
.col-7  { flex: 0 0 58.3333%; width: 58.3333%; }
.col-8  { flex: 0 0 66.6666%; width: 66.6666%; }
.col-9  { flex: 0 0 75%;      width: 75%; }
.col-10 { flex: 0 0 83.3333%; width: 83.3333%; }
.col-11 { flex: 0 0 91.6666%; width: 91.6666%; }
.col-12 { flex: 0 0 100%;     width: 100%; }

/* col-lg-* : ≥992px, pas de media query, toujours actif */
.col-lg-1  { flex: 0 0 8.3333%;  width: 8.3333%; }
.col-lg-2  { flex: 0 0 16.6666%; width: 16.6666%; }
.col-lg-3  { flex: 0 0 25%;      width: 25%; }
.col-lg-4  { flex: 0 0 33.3333%; width: 33.3333%; }
.col-lg-5  { flex: 0 0 41.6666%; width: 41.6666%; }
.col-lg-6  { flex: 0 0 50%;      width: 50%; }
.col-lg-7  { flex: 0 0 58.3333%; width: 58.3333%; }
.col-lg-8  { flex: 0 0 66.6666%; width: 66.6666%; }
.col-lg-9  { flex: 0 0 75%;      width: 75%; }
.col-lg-10 { flex: 0 0 83.3333%; width: 83.3333%; }
.col-lg-11 { flex: 0 0 91.6666%; width: 91.6666%; }
.col-lg-12 { flex: 0 0 100%;     width: 100%; }

/* col-md-* : ≤991px, ecrase col-lg-* sur tablette/mobile */
@media (max-width: 991px) {
    .col-md-1  { flex: 0 0 8.3333%;  width: 8.3333%; }
    .col-md-2  { flex: 0 0 16.6666%; width: 16.6666%; }
    .col-md-3  { flex: 0 0 25%;      width: 25%; }
    .col-md-4  { flex: 0 0 33.3333%; width: 33.3333%; }
    .col-md-5  { flex: 0 0 41.6666%; width: 41.6666%; }
    .col-md-6  { flex: 0 0 50%;      width: 50%; }
    .col-md-7  { flex: 0 0 58.3333%; width: 58.3333%; }
    .col-md-8  { flex: 0 0 66.6666%; width: 66.6666%; }
    .col-md-9  { flex: 0 0 75%;      width: 75%; }
    .col-md-10 { flex: 0 0 83.3333%; width: 83.3333%; }
    .col-md-11 { flex: 0 0 91.6666%; width: 91.6666%; }
    .col-md-12 { flex: 0 0 100%;     width: 100%; }
}

/* col-sm-* : ≤767px, ecrase col-md-* sur mobile */
@media (max-width: 767px) {
    .col-sm-1  { flex: 0 0 8.3333%;  width: 8.3333%; }
    .col-sm-2  { flex: 0 0 16.6666%; width: 16.6666%; }
    .col-sm-3  { flex: 0 0 25%;      width: 25%; }
    .col-sm-4  { flex: 0 0 33.3333%; width: 33.3333%; }
    .col-sm-5  { flex: 0 0 41.6666%; width: 41.6666%; }
    .col-sm-6  { flex: 0 0 50%;      width: 50%; }
    .col-sm-7  { flex: 0 0 58.3333%; width: 58.3333%; }
    .col-sm-8  { flex: 0 0 66.6666%; width: 66.6666%; }
    .col-sm-9  { flex: 0 0 75%;      width: 75%; }
    .col-sm-10 { flex: 0 0 83.3333%; width: 83.3333%; }
    .col-sm-11 { flex: 0 0 91.6666%; width: 91.6666%; }
    .col-sm-12 { flex: 0 0 100%;     width: 100%; }
}

/* ─── Offsets ────────────────────────────────────────── */
.offset-1  { margin-left: 8.3333%; }
.offset-2  { margin-left: 16.6666%; }
.offset-3  { margin-left: 25%; }
.offset-4  { margin-left: 33.3333%; }
.offset-5  { margin-left: 41.6666%; }
.offset-6  { margin-left: 50%; }
.offset-7  { margin-left: 58.3333%; }
.offset-8  { margin-left: 66.6666%; }
.offset-9  { margin-left: 75%; }
.offset-10 { margin-left: 83.3333%; }
.offset-11 { margin-left: 91.6666%; }

/* offset-lg-* : pas de media query, toujours actif */
.offset-lg-1  { margin-left: 8.3333%; }
.offset-lg-2  { margin-left: 16.6666%; }
.offset-lg-3  { margin-left: 25%; }
.offset-lg-4  { margin-left: 33.3333%; }
.offset-lg-5  { margin-left: 41.6666%; }
.offset-lg-6  { margin-left: 50%; }
.offset-lg-7  { margin-left: 58.3333%; }
.offset-lg-8  { margin-left: 66.6666%; }
.offset-lg-9  { margin-left: 75%; }
.offset-lg-10 { margin-left: 83.3333%; }
.offset-lg-11 { margin-left: 91.6666%; }

/* offset-md-* : ≤991px */
@media (max-width: 991px) {
    .offset-md-1  { margin-left: 8.3333%; }
    .offset-md-2  { margin-left: 16.6666%; }
    .offset-md-3  { margin-left: 25%; }
    .offset-md-4  { margin-left: 33.3333%; }
    .offset-md-5  { margin-left: 41.6666%; }
    .offset-md-6  { margin-left: 50%; }
    .offset-md-7  { margin-left: 58.3333%; }
    .offset-md-8  { margin-left: 66.6666%; }
    .offset-md-9  { margin-left: 75%; }
    .offset-md-10 { margin-left: 83.3333%; }
    .offset-md-11 { margin-left: 91.6666%; }

    .offset-md-0  { margin-left: 0; }
}

/* offset-sm-* : ≤767px */
@media (max-width: 767px) {
    .offset-sm-0  { margin-left: 0; }
}

/* ─── Utilitaires flex ───────────────────────────────── */
.justify-content-start   { justify-content: flex-start; }
.justify-content-end     { justify-content: flex-end; }
.justify-content-center  { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-around  { justify-content: space-around; }
.align-items-start       { align-items: flex-start; }
.align-items-center      { align-items: center; }
.align-items-end         { align-items: flex-end; }
.align-items-stretch     { align-items: stretch; }
.flex-column             { flex-direction: column; }
.flex-row                { flex-direction: row; }
.flex-wrap               { flex-wrap: wrap; }
.flex-nowrap             { flex-wrap: nowrap; }
.gap-1  { gap: 4px; }
.gap-2  { gap: 8px; }
.gap-3  { gap: 16px; }
.gap-4  { gap: 24px; }
.gap-5  { gap: 32px; }
.gap-6  { gap: 48px; }
.gap-7  { gap: 64px; }
.mx-auto { margin-inline: auto; }

@media (max-width: 991px) {
    .hl-container { padding-inline: 32px; }
}

@media (max-width: 575px) {
    .hl-container { padding-inline: 20px; }
}

/* ─── Boutons ────────────────────────────────────────── */
.hl-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    font-family: var(--wp--preset--font-family--primary);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 500;
    line-height: 1.5rem;
    letter-spacing: 0.02rem;
    border-radius: 64px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.hl-btn-filled {
    background: var(--wp--preset--color--sand);
    color: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--sand);
}

.hl-btn-outlined {
    background: transparent;
    color: var(--wp--preset--color--sand);
    border-color: var(--wp--preset--color--sand);
}

.hl-btn-dark {
    background: var(--wp--preset--color--dark);
    color: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--dark);
}

.hl-btn-light {
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--dark);
    border-color: var(--wp--preset--color--white);
}

.hl-btn-white {
    background: transparent;
    color: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--white);
}

.hl-btn-dark-outlined {
    background: transparent;
    color: var(--wp--preset--color--dark);
    border-color: var(--wp--preset--color--dark);
}

.hl-btn-glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(7px);
    color: var(--wp--preset--color--white);
    border-color: transparent;
}

.hl-btn-hover-dark-outlined:hover { background: var(--wp--preset--color--dark); color: var(--wp--preset--color--white); border-color: var(--wp--preset--color--dark); }
.hl-btn-hover-filled:hover    { background: var(--wp--preset--color--sand); color: var(--wp--preset--color--white);               border-color: var(--wp--preset--color--sand);    }
.hl-btn-hover-outlined:hover  { background: transparent; color: var(--wp--preset--color--sand);         border-color: var(--wp--preset--color--sand);    }
.hl-btn-hover-dark:hover      { background: var(--wp--preset--color--dark); color: var(--wp--preset--color--white);               border-color: var(--wp--preset--color--dark);    }
.hl-btn-hover-light:hover     { background: var(--wp--preset--color--white);    color: var(--wp--preset--color--dark);            border-color: var(--wp--preset--color--white);       }
.hl-btn-hover-white:hover     { background: transparent; color: var(--wp--preset--color--white);            border-color: var(--wp--preset--color--white);       }
.hl-btn-hover-glass:hover     { background: rgba(255, 255, 255, 0.12); color: var(--wp--preset--color--white); border-color: transparent; }

@media (max-width: 767px) {
    .hl-btn {
        padding: 12px 16px;
        font-size: var(--wp--preset--font-size--xs);
        gap: 8px;
    }
}

@media (max-width: 575px) {
    .hl-btn {
        padding: 9px 12px;
        line-height: 1.25rem;
        width: 100%;
        justify-content: center;
    }
}