/*#region Alignement (texte & images)*/

/* L'éditeur produit ces classes quand on choisit Gauche/Centre/Droite, mais leur
   CSS vit dans la feuille COMMUNE de wp-block-library, que FrontOptimizations
   déqueue : sans les règles ci-dessous, l'alignement choisi est visible dans
   l'éditeur et perdu en front. Les styles PAR BLOC, eux, restent inlinés par WP —
   d'où .wp-block-image.aligncenter qui fonctionne déjà, alignleft/alignright non.
   À supprimer si wp-block-library venait à être réactivé. */

.has-text-align-left {
    text-align: left;
}

.has-text-align-center {
    text-align: center;
}

.has-text-align-right {
    text-align: right;
}

.has-text-align-justify {
    text-align: justify;
}

/* Bloc Image : alignement par les marges et non par float. Le float de core
   déborde des cellules de tableau et des colonnes, et il faudrait le clearer. */
.wp-block-image.alignleft,
.wp-block-image.aligncenter,
.wp-block-image.alignright {
    display: table;
    float: none;
}

.wp-block-image.alignleft {
    margin-inline: 0 auto;
}

.wp-block-image.aligncenter {
    margin-inline: auto;
}

.wp-block-image.alignright {
    margin-inline: auto 0;
}

/*#endregion Alignement (texte & images)*/

/*#region Intro Paragraph*/

.block-acf-intro p {
    font-size: var(--fs-intro);
    line-height: 1.6;
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: 40px;
}


/*#endregion Intro Paragraph*/

/*#region Summary*/

.block-acf-summary {
    width: 100%;
    max-width: 900px;
    margin: 48px auto;
}

.block-acf-summary .summary {
    border-left: 3px solid var(--color-nav);
    padding: 4px 0 4px 20px;
}

.block-acf-summary .summary__title {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text);
    opacity: 0.7;
}

.block-acf-summary .summary__list,
.block-acf-summary .summary__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: summary-counter;
}

.block-acf-summary .summary__sublist {
    margin: 6px 0 2px;
    padding-left: 22px;
}

.block-acf-summary .summary__item {
    counter-increment: summary-counter;
    padding: 5px 0;
    font-size: var(--fs-text-sm);
    line-height: 1.5;
}

.block-acf-summary .summary__link {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    color: var(--color-text);
    text-decoration: none;
    transition: color .2s;
}

.block-acf-summary .summary__link::before {
    content: counters(summary-counter, ".") ".";
    font-variant-numeric: tabular-nums;
    color: var(--color-nav);
    font-weight: 600;
    flex-shrink: 0;
}

.block-acf-summary .summary__link:hover {
    color: var(--color-nav);
}

.block-acf-summary .summary__link:hover .summary__text {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.block-acf-summary .summary__item--child {
    font-size: 15px;
}

/*#endregion Summary*/

/*#region title Block*/

.block-acf-title {
    max-width: 900px;
    margin: 80px auto 32px auto;
    position: relative; /* contexte pour le bouton ancre (hors du <hn>) */
}

.block-acf-title h2 {
    position: relative;
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}


/*#endregion title Block*/

/*#region Heading Anchor*/

.custom-heading-h2,
.custom-heading-h3 {
    scroll-margin-top: 100px;
}

.heading-anchor {
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s, background .15s;
    padding: 0;
}

.heading-anchor svg {
    width: 15px;
    height: 15px;
    fill: var(--color-text);
    opacity: .5;
    flex-shrink: 0;
    transition: fill .15s, opacity .15s;
}

.block-acf-title:hover .heading-anchor,
.block-acf-subtitle:hover .heading-anchor {
    opacity: 1;
}

.heading-anchor:hover {
    background: var(--color-grey);
}

.heading-anchor:hover svg {
    fill: var(--color-nav);
    opacity: 1;
}

.heading-anchor:active {
    transform: translateY(-50%) scale(0.92);
}

/* Tooltip */
.heading-anchor__tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--color-text);
    color: var(--color-white);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s, transform .15s;
}

.heading-anchor__tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--color-text);
}

.heading-anchor.is-copied .heading-anchor__tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.heading-anchor.is-copied {
    opacity: 1;
    background: var(--color-nav);
    border-color: var(--color-nav);
}

.heading-anchor.is-copied svg {
    fill: var(--color-white);
    opacity: 1;
}

@media all and (max-width: 768px) {
    .heading-anchor {
        display: none;
    }
}

/*#endregion Heading Anchor*/

/*#region Subtitle Block*/

.block-acf-subtitle {
    max-width: 900px;
    margin: 48px auto 24px auto;
    position: relative; /* contexte pour le bouton ancre (hors du <hn>) */
}

.block-acf-subtitle h3 {
    position: relative;
    font-size: var(--fs-lead);
    font-weight: 600;
    color: var(--color-text);
    padding-left: 14px; /* espace pour la barre décorative */
    line-height: 1.3;
}

.block-acf-subtitle h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 3px;
    border-radius: 2px;
    background: var(--color-nav); /* ton vert doux du thème */
}

/*#endregion Subtitle Block*/

/*#region Titres natifs (core/heading) */
/* Même design que nos blocs titre. Le bouton « copier le lien » est sorti du <hn>
   dans un wrapper .heading-anchored (SEO : pas de <button> dans un titre) ; le
   wrapper porte le centrage et sert de contexte de positionnement au bouton. */
.section--scripts .section__content > .heading-anchored {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

.section--scripts .section__content > .heading-anchored > h2.wp-block-heading {
    max-width: 900px;
    margin: 80px auto 32px auto;
    position: relative;
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    scroll-margin-top: 100px;
}

.section--scripts .section__content > .heading-anchored > h3.wp-block-heading {
    max-width: 900px;
    margin: 48px auto 24px auto;
    position: relative;
    font-size: var(--fs-lead);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    padding-left: 14px;
    scroll-margin-top: 100px;
}

.section--scripts .section__content > .heading-anchored > h3.wp-block-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 3px;
    border-radius: 2px;
    background: var(--color-nav);
}

/* H4 : sous-section, accent vert, subordonné au H3 (sans barre). */
.section--scripts .section__content > .heading-anchored > h4.wp-block-heading {
    max-width: 900px;
    margin: 32px auto 14px auto;
    position: relative;
    font-size: var(--fs-text);
    font-weight: 700;
    color: var(--color-nav);
    line-height: 1.4;
    scroll-margin-top: 100px;
}

/* Révèle le bouton « copier le lien » au survol des titres natifs.
   (Le bouton est hors du <hn>, dans le wrapper .heading-anchored.) */
.heading-anchored:hover .heading-anchor {
    opacity: 1;
}

/*#endregion */

/*#region Iframe / Embed */
/* Iframes (vidéos, cartes…) dans le layout article : même largeur que les
   paragraphes (900px), centrées, sans bordure, avec marges comme les autres blocs. */
.section--scripts .section__content iframe,
.section--scripts .section__content .wp-block-embed,
.section--scripts .section__content .wp-block-embed__wrapper iframe {
    display: block;
    width: 100%;
    max-width: 900px;
    margin: 32px auto !important;
    border: 0;
}
.section--scripts .section__content iframe,
.section--scripts .section__content .wp-block-embed__wrapper iframe {
    aspect-ratio: 16 / 9;
    min-height: 0;
    height: auto;
    overflow-x: auto;
}
.section--scripts .section__content .wp-block-embed iframe {
    margin: 0 !important;
}
/*#endregion */

/*#region ListBlock*/
.block-acf-list .section__list {
    max-width: 900px;
    margin: 0 auto 32px auto;
    padding:0 0 0 24px;
}

@media all and (max-width: 768px) {
    .block-acf-list .section__list {
        padding: 0;
    }
}

.block-acf-list .section__list .section__list-item {
    margin-bottom: 6px;
    font-size: var(--fs-text-lg);
    line-height: 1.6;
}

.block-acf-list .section__list .section__list-item::before {
    top: 15px;
}

.block-acf-list .section__list .section__list-item p {
    margin:4px 0;
    padding:0 0 0 8px;
}

/* --- Listes natives Gutenberg (core/list) : même rendu que nos listes custom,
   pour pouvoir utiliser le bloc « Liste » de base à la place de cwp/layout-list.
   Scopé à .section (comme nos styles existants). --- */
.section ul.wp-block-list {
    list-style: none;
    max-width: 900px;
    margin: 0 auto 32px auto;
    padding: 0 0 0 24px;
}

.section ul.wp-block-list li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 0;
    font-size: var(--fs-text-lg);
    line-height: 1.7;
    color: var(--color-text);
}

.section ul.wp-block-list li::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-nav);
    position: absolute;
    top: 14px;
    left: 0;
}

/* Sous-listes */
.section ul.wp-block-list ul.wp-block-list {
    max-width: none;
    margin: 6px 0 0;
    padding-left: 24px;
}

.section ul.wp-block-list ul.wp-block-list li {
    font-size: 14px;
}

.section ul.wp-block-list ul.wp-block-list li::before {
    width: 4px;
    height: 4px;
    top: 10px;
}

/* Listes ordonnées natives (core/list ordered) : numérotation conservée,
   marqueur dans la couleur de la marque + même gabarit que les ul. */
.section ol.wp-block-list {
    list-style: decimal;
    max-width: 900px;
    margin: 0 auto 32px auto;
    padding: 0 0 0 28px;
}

.section ol.wp-block-list li {
    margin-bottom: 0;
    padding-left: 8px;
    font-size: var(--fs-text-lg);
    line-height: 1.7;
    color: var(--color-text);
}

.section ol.wp-block-list li::marker {
    color: var(--color-nav);
    font-weight: 600;
}

/* Sous-listes ordonnées */
.section ol.wp-block-list ol.wp-block-list {
    max-width: none;
    margin: 6px 0 0;
}

.section ol.wp-block-list ol.wp-block-list li {
    font-size: 14px;
}


/* Retrait des listes sur petit écran.
 *
 * Le retrait se cumulait sur deux niveaux : celui de la liste (24px pour les
 * puces, 28px pour les numéros) puis celui de chaque entrée, qui ménage la
 * place du marqueur (16px et 8px). Soit 40px perdus à gauche sur une largeur
 * utile de 343px, et 64px pour une sous-liste — le texte se retrouvait tassé
 * contre le bord droit.
 *
 * Sur mobile, le retrait de la liste est supprimé pour les puces : le marqueur
 * est un ::before calé sur le bord de l'entrée, celui de l'entrée suffit donc.
 * Pour les listes numérotées il est seulement réduit, le marqueur natif ayant
 * besoin de place pour les nombres à deux chiffres.
 *
 * Même parti pris que .block-acf-list, dont le retrait tombait déjà à zéro. */
@media all and (max-width: 768px) {
    .section ul.wp-block-list {
        padding-left: 0;
    }

    .section ol.wp-block-list {
        padding-left: 20px;
    }

    .section ul.wp-block-list ul.wp-block-list {
        padding-left: 14px;
    }
}

/*#endregion ListBlock*/

/*#region Buttons Block*/

.block-acf-buttons {
    margin: 32px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px; /* espace entre les boutons */
    flex-wrap: wrap;
}

.block-acf-buttons .btn {
    display: inline-block;
    padding: 12px 26px;
    background: var(--color-nav);
    color: var(--color-white);
    border-radius: 4px;
    font-size: 15px;
    text-decoration: none;
    transition: 0.25s;
    text-align: center;
}

.block-acf-buttons .btn:hover {
    background: var(--color-bold);
    text-decoration: none;
    transform: none;
}

/* Boutons natifs Gutenberg (core/buttons + core/button) : même design que .btn,
   pour utiliser les blocs Boutons de base. */
.wp-block-buttons {
    margin: 32px 0;
    gap: 16px;
    justify-content: center;
}

/* Dernier bloc Boutons de son conteneur : pas de marge basse, partout
   (évite l'espace superflu sous un bouton en fin de contenu / de cadre). */
.wp-block-buttons:last-child {
    margin-bottom: 0;
}

.wp-block-button__link {
    display: inline-block;
    padding: 12px 26px;
    background: var(--color-nav);
    color: var(--color-white);
    border-radius: 4px;
    font-size: 15px;
    line-height: 1.2;
    text-decoration: none;
    transition: 0.25s;
    text-align: center;
}

.wp-block-button__link,
.wp-block-button__link:hover {
    transform: none;
}

.wp-block-button__link:hover {
    background: var(--color-bold);
    color: var(--color-white);
    text-decoration: none;
}

/*#endregion Buttons Block*/

/*#region Media & texte natif (core/media-text) */
/* Reprend le design de nos blocs « image à gauche / à droite » :
   cadre blanc + ombre, bouton loupe au survol, légende, alignement centré.
   La classe .section__image-figure + data-src-large + la loupe + la légende
   sont injectées côté serveur (filtre render_block_core/media-text) -> la
   modale de zoom existante fonctionne. */
.section--scripts .section__content .wp-block-media-text {
    margin: 32px 0;
    gap: 40px;
    align-items: center;
}

/* Texte du media-text : même taille/couleur que les paragraphes d'article. */
.section--scripts .section__content .wp-block-media-text__content p {
    font-size: var(--fs-text-lg);
    line-height: 1.7;
    color: var(--color-text);
    margin: 0 0 24px;
}
.section--scripts .section__content .wp-block-media-text__content p:last-child {
    margin-bottom: 0;
}

/* Titres natifs dans le media-text : même design (barre h3) mais marges
   adaptées à la colonne (pas de centrage 900px). */
.section--scripts .section__content .wp-block-media-text__content h2.wp-block-heading,
.section--scripts .section__content .wp-block-media-text__content h3.wp-block-heading {
    position: relative;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    scroll-margin-top: 100px;
}
.section--scripts .section__content .wp-block-media-text__content h2.wp-block-heading {
    font-size: var(--fs-md);
    margin: 0 0 16px;
}
.section--scripts .section__content .wp-block-media-text__content h3.wp-block-heading {
    font-size: var(--fs-lead);
    margin: 0 0 16px;
    padding-left: 14px;
}
.section--scripts .section__content .wp-block-media-text__content h3.wp-block-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 3px;
    border-radius: 2px;
    background: var(--color-nav);
}

.section--scripts .section__content .wp-block-media-text__media {
    position: relative;
    background: #fff;
    padding: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    cursor: pointer;
}

.section--scripts .section__content .wp-block-media-text__media img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.wp-block-media-text__media .section__image-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 32px;
    height: 32px;
    background: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .8;
    transition: linear .15s;
    border: none;
    cursor: pointer;
    padding: 0;
}

.wp-block-media-text__media .section__image-btn svg { width: 15px; opacity: .5; transition: linear .15s; }
.wp-block-media-text__media .section__image-btn svg * { fill: var(--color-text); transition: linear .15s; }
.wp-block-media-text__media:hover .section__image-btn { opacity: 1; }
.wp-block-media-text__media:hover .section__image-btn svg { opacity: 1; }
.wp-block-media-text__media:hover .section__image-btn svg * { fill: var(--color-nav); }

.section--scripts .section__content .wp-block-media-text .section__picture-caption {
    font-size: 12px;
    text-align: right;
    margin: 10px 6px 0;
    opacity: 0.7;
}

/*#endregion */

/*#region Info Block*/

.block-acf-info {
    max-width: 900px;
    margin: 32px auto;

    position: relative;
   
    padding: 28px 32px;
    border-radius: 12px;
}

/* ICON */
.block-acf-info .block-acf-info__icon {
    position: absolute;
    top: -22px;
    left: -22px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.block-acf-info .block-acf-info__icon svg {
    width: 22px;
    height: 22px;
    fill: var(--color-nav);
    flex-shrink: 0;
}

.block-acf-info{ background: rgba(188, 228, 217, .2);}
.block-acf-info[data-background="grey"] { background: var(--color-grey); }

.block-acf-info[data-background="grey"] .block-acf-info__icon svg {
    fill: var(--color-bold);
}

/* Cadre d'information sur petit écran.
 *
 * Le retrait de 28/32px laissait 279px utiles sur les 343 de la largeur
 * disponible, soit près d'un cinquième mangé par les marges du cadre.
 *
 * La pastille d'icône est par ailleurs posée en dehors du cadre (top et left à
 * -22px), ce qui fonctionne tant que le cadre est plus étroit que son
 * conteneur. Sur mobile il en occupe toute la largeur : l'icône sortait donc
 * du conteneur et pouvait provoquer un défilement horizontal. Elle rentre dans
 * le cadre, toujours à cheval sur son bord haut. */
@media all and (max-width: 768px) {
    .block-acf-info {
        padding: 22px 18px;
    }

    .block-acf-info .block-acf-info__icon {
        top: -16px;
        left: 14px;
        width: 36px;
        height: 36px;
    }

    .block-acf-info .block-acf-info__icon svg {
        width: 18px;
        height: 18px;
    }
}

/* TEXT */
.block-acf-info__content p {
    font-size: var(--fs-text);
    line-height: 1.6;
    color: var(--color-text);
}

/* Petit espacement entre paragraphes consécutifs dans un cadre (bloc natif). */
.block-acf-info__content .wp-block-paragraph + .wp-block-paragraph {
    margin-top: 12px;
}

.block-acf-info__content strong {
    color: var(--color-text);
}
.block-acf-info .block-acf-info__content .block-acf-paragraph:first-child,
.block-acf-info .block-acf-info__content .block-acf-subtitle:first-child,
.block-acf-info .block-acf-info__content .block-acf-title:first-child {
margin-top:0;
}
.block-acf-info .block-acf-info__content .block-acf-paragraph:last-child p:last-child{
    margin-bottom:0;
}

/* Liste dans un cadre : plus petite (18px) que la liste normale (20px),
   espacement titre -> liste resserré, et marge basse pour respirer avant
   l'élément suivant (bouton, paragraphe...). */
.block-acf-info ul.wp-block-list {
    margin-top: 8px;
    margin-bottom: 16px;
}
.block-acf-info__content p:has(+ .wp-block-list) {
    margin-bottom: 8px;
}
.block-acf-info ul.wp-block-list li {
    font-size: var(--fs-text);
}
.block-acf-info ul.wp-block-list li::before {
    top: 12px;
}

/* Dernier élément du contenu d'un cadre : jamais de marge basse
   (liste, paragraphe, boutons...) pour éviter le double espacement
   avec le padding du cadre. */
.block-acf-info__content > *:last-child {
    margin-bottom: 0;
}
/*#endregion Info Block*/

/*#region CTA Cards (import Kadence infobox) */
.cwp-cta-cards {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    gap: 16px;
    max-width: 900px;
    margin: 40px auto;
}

.cwp-cta-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 28px 16px;
    border-radius: 12px;
    background: var(--color-grey);
    border: 1px solid var(--color-border-grey);
    text-decoration: none;
    color: var(--color-text);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.cwp-cta-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    border-color: var(--color-nav);
    text-decoration: none;
}

.cwp-cta-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-nav);
    color: #fff;
    flex-shrink: 0;
}

.cwp-cta-card__icon svg {
    width: 26px;
    height: 26px;
}

.cwp-cta-card__label {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text);
}

@media (max-width: 900px) {
    .cwp-cta-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .cwp-cta-cards { grid-template-columns: 1fr; }
}
/*#endregion */

/*#region Question Block*/

.block-acf-question {
    width: 100%;
    max-width: 900px;
    margin: 60px auto 40px auto;

    position: relative;
    background: var(--color-grey);
    padding: 28px 32px;
    border-radius: 12px;
    
}

/* ICON */
.block-acf-question__icon {
    position: absolute;
    top: -24px;
    left: -24px;

    width: 48px;
    height: 48px;
    background: url('/wp-content/uploads/question.png') center center no-repeat;
    background-size: contain;

}

/* TEXT */
.block-acf-question__content p {
    font-size: var(--fs-text);
    line-height: 1.6;
    color: var(--color-text);
}

.block-acf-question__content strong {
    color: var(--color-bold);
}

/*#endregion Question Block*/

/*#region Gallery Block*/

.block-acf-gallery {
    position: relative;
    margin: 40px auto;
    width: 100%;
}

.gallery__wrapper {
    overflow: hidden;
}

.gallery__track {
    display: flex;
    gap: 16px;
}

.gallery__item {
    flex: 0 0 calc(50% - 8px); /* 2 images visibles */
    text-align: center;
    display: none;
}

.gallery__item.is-active {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gallery__image {
    overflow: hidden;
}

.gallery__item img {
    width: 100%;
    display: block;
}

.gallery__item figcaption {
    font-size: 15px;
    text-align: center;
    margin: 16px 8px 0 8px;
}

/* BUTTONS */
.gallery__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;

    background: #ffffff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    font-size: var(--fs-intro);
    color: var(--color-nav);
    transition: 0.25s;

    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery__btn svg {
    width: 10px;
}

.gallery__btn--next svg {
    transform-origin: center center;
    transform: rotate(180deg);
}

.gallery__btn svg * {
    fill: var(--color-border);
}

.gallery__btn:hover {
    border-color: var(--color-nav);
}

.gallery__btn:hover svg * {
    fill: var(--color-nav);
}

.gallery__btn--prev {
    left: 0;
}

.gallery__btn--next {
    right: 0;
}

.block-acf-gallery[data-count="2"] .gallery__btn {
    display: none;
}

@media all and (max-width:768px){
    .block-acf-gallery[data-count="2"] .gallery__btn {
        display: block;
    }
    .gallery__item{
        flex:0 0 100%;
    }
}

/* ---- Variante triple : 3 images visibles côte à côte ---- */
.block-acf-gallery--triple .gallery__item {
    flex: 0 0 calc((100% - 32px) / 3);
}
.block-acf-gallery--triple[data-count="3"] .gallery__btn {
    display: none; /* exactement 3 : tout est visible, pas de slide */
}
@media all and (max-width: 1024px) {
    .block-acf-gallery--triple .gallery__item {
        flex: 0 0 calc((100% - 16px) / 2);
    }
    .block-acf-gallery--triple[data-count="3"] .gallery__btn {
        display: flex;
    }
}
@media all and (max-width: 768px) {
    .block-acf-gallery--triple .gallery__item {
        flex: 0 0 100%;
    }
}


/*#endregion Gallery Block*/

/*#region Tags Block*/

.block-acf-tags {
    margin: 60px 0 40px;
}

.block-acf-tags .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.block-acf-tags .tag {
    background: #f7f7f7;
    padding: 10px 18px;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    display: inline-block;
    cursor: default;
    white-space: nowrap;
}

.block-acf-tags .tag:hover {
    background: var(--color-bold);
    color: var(--color-white);
    text-decoration: none;
    cursor: pointer;
}

/*#endregion Tags Block*/

/*#region Big Slider Block*/

.block-acf-big-slider {
    margin: 40px auto;
    width: 100%;
}

.big-slider {
    position: relative;
}

.big-slider__container {
    overflow: hidden;
}

.big-slider__track {
    display: flex;
    transition: transform .35s ease;
    gap: 16px;
}

.big-slider__slide {
    min-width: 100%;
    position: relative;
    display: none;
}

.big-slider__slide.is-active {
    display: block;
}

.big-slider__image {
    overflow: hidden;
}

.big-slider__slide img {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    object-fit: contain;
    margin: 0 auto;
}

/* Slider avec une seule image : pas de crop, on respecte ses proportions */
.block-acf-big-slider[data-count="1"] .big-slider__slide img {
    aspect-ratio: auto;
    object-fit: contain;
}

/* Caption */
.big-slider__caption {
    font-size: 15px;
    text-align: center;
    margin: 16px 8px 0 8px;
}

/* Buttons */
.big-slider__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;

    background: #ffffff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    font-size: var(--fs-intro);
    color: var(--color-nav);
    transition: 0.25s;

    display: flex;
    align-items: center;
    justify-content: center;
}

.big-slider__btn svg {
    width: 10px;
}

.big-slider__btn--next svg {
    transform-origin: center center;
    transform: rotate(180deg);
}

.big-slider__btn svg * {
    fill: var(--color-border);
}

.big-slider__btn:hover {
    border-color: var(--color-nav);
}

.big-slider__btn:hover svg * {
    fill: var(--color-nav);
}

.big-slider__btn--prev {
    left: -20px;
}

.big-slider__btn--next {
    right: -20px;
}


/*#endregion Big Slider Block*/


.acf-block-tags .tags-list {
    width: 100%;
    max-width: 900px;
    margin: 40px auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.acf-block-tags .tags-list .tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--color-grey);
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    padding: 0 16px;
    line-height: 38px;
    border: 1px solid transparent;
    color: var(--color-text);
}

.acf-block-tags .tags-list .tag__icon {
    width: 12px;
    height: 12px;
    fill: currentColor;
    flex-shrink: 0;
}

.acf-block-tags .tags-list .tag__hash {
    font-weight: 700;
    font-size: 14px;
    opacity: .8;
}


.acf-block-share {
    padding:150px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap:16px;
}
.acf-block-share .share__background{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.acf-block-share .share__background::after{
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:rgba(0,0,0,.1);
}
.acf-block-share .share__background img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block; 
}
.acf-block-share .share__title {
    color:var(--color-white);
    font-size: var(--fs-xl);
    font-weight:600;
    line-height:1.3
}
.acf-block-share .share__socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap:32Px;
}
.acf-block-share .share__socials  .share__social {
    color:var(--color-white);
    font-weight:400;
    font-size: var(--fs-text-lg);
}
.acf-block-share .share__socials  .share__social:hover {
    color:var(--color-bold)
}

/*#region Table Block*/

.block-acf-table {
    width: 100%;
    margin: 40px auto;
    overflow-x: auto;
}

.block-acf-table .acf-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: var(--fs-text-sm);
    line-height: 1.5;
    color: var(--color-text);
}

.block-acf-table .acf-table__head th {
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 14px 16px;
    background: var(--color-nav);
    color: var(--color-white);
    border-bottom: 2px solid var(--color-nav);
}

.block-acf-table .acf-table__body td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    vertical-align: top;
}

.block-acf-table .acf-table__body td,
.block-acf-table .acf-table__body td p,
.block-acf-table .acf-table__body td a,
.block-acf-table .acf-table__body td ul li {
    font-size: var(--fs-text-sm);
    line-height: 1.5;
}

.block-acf-table .acf-table__body tr:last-child td {
    border-bottom: none;
}

.block-acf-table .acf-table__body tr:nth-child(even) td {
    background: rgba(0, 0, 0, 0.025);
}

.block-acf-table .acf-table__body td ul {
    list-style: none;
    margin: 8px 0;
    padding: 0;
}

.block-acf-table .acf-table__body td ul li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 4px;
    line-height: 1.5;
}

.block-acf-table .acf-table__body td ul li::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-nav);
}

.block-acf-table .acf-table__body td ul li:last-child {
    margin-bottom: 0;
}

@media all and (max-width: 768px) {
    .block-acf-table {
        overflow-x: visible;
    }

    .block-acf-table .acf-table,
    .block-acf-table .acf-table__body,
    .block-acf-table .acf-table__body tr,
    .block-acf-table .acf-table__body td {
        display: block;
        width: 100%;
    }

    .block-acf-table .acf-table__head {
        display: none;
    }

    .block-acf-table .acf-table__body tr {
        position: relative;
        margin-bottom: 16px;
        padding: 18px 20px 18px 24px;
        border-radius: 10px;
        background: var(--color-grey);
        overflow: hidden;
    }

    .block-acf-table .acf-table__body tr::before {
        content: '';
        position: absolute;
        top: 18px;
        bottom: 18px;
        left: 0;
        width: 3px;
        border-radius: 0 2px 2px 0;
        background: var(--color-nav);
    }

    .block-acf-table .acf-table__body tr:last-child {
        margin-bottom: 0;
    }

    .block-acf-table .acf-table__body tr:nth-child(even) td {
        background: transparent;
    }

    .block-acf-table .acf-table__body td {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 10px 0;
        border: none;
    }

    .block-acf-table .acf-table__body td:first-child {
        padding-top: 0;
    }

    .block-acf-table .acf-table__body td:last-child {
        padding-bottom: 0;
    }

    .block-acf-table .acf-table__body td + td {
        box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06);
    }

    .block-acf-table .acf-table__body td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-nav);
        line-height: 1.4;
    }

    .block-acf-table .acf-table__body td[data-label=""]::before {
        display: none;
    }

    .block-acf-table .acf-table__body td > *:not(ul) {
        margin: 0;
    }

    .block-acf-table .acf-table__body td > *:first-of-type {
        margin-top: 2px;
    }

    .block-acf-table .acf-table__body td ul {
        margin: 6px 0 0;
    }

    .block-acf-table .acf-table__body td ul li {
        font-size: 15px;
    }
}

/* --- Tableaux natifs Gutenberg (core/table) : même design que nos tableaux,
   pour utiliser le bloc Tableau de base. Le data-label (responsive mobile) est
   injecté côté serveur par le filtre render_block_core/table. --- */
.wp-block-table {
    width: 100%;
    margin: 40px auto;
}

.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: var(--fs-text-sm);
    line-height: 1.5;
    color: var(--color-text);
}

.wp-block-table thead {
    border-bottom: none !important;
}

.wp-block-table thead th {
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 14px 16px;
    background: var(--color-nav);
    color: var(--color-white);
    border: none !important;
}

.wp-block-table tbody td {
    padding: 14px 16px;
    border: none !important;
    vertical-align: top;
    font-size: var(--fs-text-sm);
    line-height: 1.5;
}

.wp-block-table tbody tr:last-child td {
    border-bottom: none;
}

/* Listes dans une cellule : taille de la cellule (16px), pas 20px. */
.wp-block-table td ul.wp-block-list,
.wp-block-table td ol.wp-block-list {
    margin: 0;
}
.wp-block-table td ul.wp-block-list li,
.wp-block-table td ol.wp-block-list li {
    font-size: var(--fs-text-sm);
    line-height: 1.5;
}
.wp-block-table td ul.wp-block-list li::before {
    top: 11px;
}
/* Paragraphes dans une cellule : pas de grosse marge basse. */
.wp-block-table td p {
    margin: 0;
}
.wp-block-table td > * + * {
    margin-top: 8px;
}

/* --- Images dans une cellule ---
   En table-layout auto, l'attribut width= d'une image est une largeur définie :
   la colonne se cale dessus (un logo de 1024px fait déborder le tableau), et un
   max-width en % n'y change rien — un pourcentage est indéfini pendant le calcul
   intrinsèque. D'où le passage en layout fixe dès qu'une image est présente : les
   colonnes se partagent la largeur et l'image s'inscrit dedans. Les tableaux
   100% texte restent en auto.
   .has-fixed-layout (réglage « largeur fixe » de l'éditeur) est repris ici parce
   que cwp/table emprunte la classe wp-block-table sans être un bloc core : le
   style inline que WP génère pour core/table n'est pas garanti sur la page. --- */
.wp-block-table table:has(img),
.wp-block-table table.has-fixed-layout {
    table-layout: fixed;
}

/* Par défaut l'image est centrée dans sa cellule ; la barre d'outils du bloc
   Image (Gauche/Centre/Droite) reprend la main — cf. section Alignement. */
.wp-block-table td img,
.wp-block-table th img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}

.wp-block-table td figure,
.wp-block-table th figure {
    margin: 0;
}

/* Pas de légende sous une image de tableau : ce qu'on y place, ce sont des
   logos (comparatifs de services, partenaires). Le texte du bloc Image ajoutait
   une ligne sous chaque logo, qui allongeait la cellule et désalignait ses
   voisines. L'alternative textuelle reste portée par l'attribut alt de l'image :
   rien n'est perdu pour l'accessibilité ni pour les moteurs. */
.wp-block-table td figcaption,
.wp-block-table th figcaption {
    display: none;
}

/* <img> posée directement dans une cellule (tableau core) : pas de bloc Image,
   donc pas de barre d'alignement — elle suit l'alignement de colonne du tableau. */
.wp-block-table td.has-text-align-left > img,
.wp-block-table th.has-text-align-left > img {
    margin-inline: 0 auto;
}

.wp-block-table td.has-text-align-center > img,
.wp-block-table th.has-text-align-center > img {
    margin-inline: auto;
}

.wp-block-table td.has-text-align-right > img,
.wp-block-table th.has-text-align-right > img {
    margin-inline: auto 0;
}

.wp-block-table tbody tr:nth-child(even) td {
    background: rgba(0, 0, 0, 0.025);
}

/* Surcharge du fond core sur les lignes impaires (style « rayé »). */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: transparent;
}

.wp-block-table tbody td ul {
    list-style: none;
    margin: 8px 0;
    padding: 0;
}

.wp-block-table tbody td ul li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 4px;
    line-height: 1.5;
}

.wp-block-table tbody td ul li::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-nav);
}

@media all and (max-width: 768px) {
    .wp-block-table {
        overflow-x: visible;
    }

    .wp-block-table table,
    .wp-block-table tbody,
    .wp-block-table tbody tr,
    .wp-block-table tbody td {
        display: block;
        width: 100%;
    }

    .wp-block-table thead {
        display: none;
    }

    .wp-block-table tbody tr {
        position: relative;
        margin-bottom: 16px;
        padding: 18px 20px 18px 24px;
        border-radius: 10px;
        background: var(--color-grey);
        overflow: hidden;
    }

    .wp-block-table tbody tr::before {
        content: '';
        position: absolute;
        top: 18px;
        bottom: 18px;
        left: 0;
        width: 3px;
        border-radius: 0 2px 2px 0;
        background: var(--color-nav);
    }

    .wp-block-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .wp-block-table tbody tr:nth-child(even) td {
        background: transparent;
    }

    .wp-block-table tbody td {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 10px 0;
        border: none;
    }

    .wp-block-table tbody td:first-child {
        padding-top: 0;
    }

    .wp-block-table tbody td:last-child {
        padding-bottom: 0;
    }

    .wp-block-table tbody td + td {
        box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06);
    }

    .wp-block-table tbody td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-nav);
        line-height: 1.4;
    }

    .wp-block-table tbody td[data-label=""]::before,
    .wp-block-table tbody td:not([data-label]):not([data-label-img])::before {
        display: none;
    }

    /* Intitulé porté par un LOGO plutôt que par du texte.
       L'en-tête est masqué dans ce mode, et son contenu reporté sur chaque
       cellule via data-label — or `content: attr()` ne restitue que du texte.
       Une colonne identifiée par un seul logo perdait donc toute étiquette :
       on ne savait plus à quel service appartenait la valeur. L'URL du logo est
       passée en variable CSS et peinte en fond du pseudo-élément. */
    .wp-block-table tbody td[data-label-img]::before {
        content: "";
        display: block;
        width: 100%;
        max-width: 110px;
        height: 26px;
        margin-bottom: 2px;
        background-image: var(--cwp-label-img);
        background-repeat: no-repeat;
        background-position: left center;
        background-size: contain;
    }

    .wp-block-table tbody td > *:not(ul) {
        margin: 0;
    }

    /* La cellule empilée est un flex column : sans align-self, une image y est
       étirée par le stretch. On la recentre et on la laisse à sa taille. */
    .wp-block-table tbody td > img,
    .wp-block-table tbody td > figure {
        align-self: center;
        margin-inline: auto;
    }

    /* ============================================================
       Mode « une carte par colonne » (cwp/table, réglage par tableau)
       ============================================================

       Le tableau est un comparatif : en mobile on veut une fiche par colonne
       (un service), pas une fiche par ligne (un critère).

       Le DOM n'est pas réordonné — il reste dans l'ordre du tableau, donc
       lisible en séquence par un lecteur d'écran. C'est `order` qui regroupe :
       chaque cellule porte l'indice de sa colonne en variable CSS, et les
       cellules de même indice se retrouvent côte à côte. À `order` égal,
       l'ordre du document tranche : l'en-tête de colonne arrive donc en tête
       de sa fiche, suivi de ses cellules dans l'ordre des lignes. */
    .cwp-table--columns table {
        display: flex;
        flex-direction: column;
    }

    /* display:contents : les <tr> disparaissent de la mise en page pour que les
       cellules deviennent enfants directs du flex, seule façon de les regrouper
       autrement que par ligne. */
    .cwp-table--columns thead,
    .cwp-table--columns tbody,
    .cwp-table--columns tr {
        display: contents;
    }

    .cwp-table--columns th,
    .cwp-table--columns td {
        order: var(--cwp-col, 0);
    }

    /* Première colonne escamotée UNIQUEMENT quand elle sert d'intitulés — cas
       signalé par la classe --labelled, posée au rendu lorsque la cellule du
       coin haut-gauche est vide (l'angle mort d'un comparatif). Si cette cellule
       porte un titre ou un logo, la colonne est une donnée : la masquer
       escamotait un service entier de la comparaison. */
    .cwp-table--columns.cwp-table--labelled [data-col="1"] {
        display: none;
    }

    /* En-tête de colonne = titre de la fiche. Contrairement au mode « rows »,
       il reste visible — c'est ce qui permet d'y garder un logo, qu'un
       data-label textuel serait incapable de restituer. */
    .cwp-table--columns thead th {
        display: block;
        margin-top: 20px;
        padding: 14px 20px;
        border-radius: 10px 10px 0 0;
        background: var(--color-nav);
        color: var(--color-white);
        text-align: center;
    }

    .cwp-table--columns thead th:first-child {
        margin-top: 0;
    }

    /* Un logo en titre de fiche : il doit rester lisible sur l'aplat teal. */
    .cwp-table--columns thead th img {
        max-width: 160px;
        margin-inline: auto;
    }

    .cwp-table--columns tbody td {
        margin-bottom: 0;
        padding: 10px 20px;
        border-radius: 0;
        background: var(--color-grey);
    }

    /* Le filet teal et les coins arrondis appartenaient à la ligne : en mode
       colonne la ligne n'est plus une carte, on les neutralise. */
    .cwp-table--columns tbody tr {
        margin-bottom: 0;
        padding: 0;
        border-radius: 0;
        background: none;
    }

    .cwp-table--columns tbody tr::before {
        content: none;
    }

    /* Dernière ligne du tableau = dernière cellule de CHAQUE fiche : c'est elle
       qui ferme la carte. */
    .cwp-table--columns tbody tr:last-child td {
        padding-bottom: 18px;
        border-radius: 0 0 10px 10px;
    }

    .cwp-table--columns tbody td::before {
        color: var(--color-nav);
    }
}

/*#endregion Table Block*/