/*
 * CSS Global & Composants — Planète Freeride
 *
 * Styles communs chargés sur toutes les pages.
 * Contient :
 * — Typographie H1 globale
 * — Boutons hero (section)
 * — Bouton "plein sombre" (inverse de .is-style-outline-sombre)
 * — Surtitre centré (.surtitre-centre)
 * — Cards séjour (slider homepage + page archive)
 * — Galerie 3 photos (section ADN homepage / section Freetest)
 * — Cards témoignage + template single témoignage
 * — Layouts pf-blocks : slider, grid, list
 * — Responsive global @media (max-width: 768px) :
 *     marges racine, nav header mobile, galeries ADN/Freetest,
 *     slider mobile (flèches repositionnées sous le viewport),
 *     grille pf-blocks (1 colonne quel que soit le réglage desktop),
 *     newsletter embarquée, boutons hero mobile
 *
 * ⚠ BUG CORRIGÉ 2026-07-01 :
 * Le snippet source (Code Snippets ID 32) contenait un @media (max-width: 768px)
 * imbriqué dans un autre @media identique — CSS invalide, toléré silencieusement
 * par les navigateurs mais qui provoquait un déséquilibre d'accolades.
 * Corrigé : le @media interne est supprimé, les règles sont remontées
 * dans le bloc @media principal (déjà actif au même breakpoint).
 *
 * ℹ️ PRÉCISION 24/08/2026 : .is-style-outline-sombre / -clair / -beige ET
 * .is-style-surtitre-* (enregistrées côté PHP dans boutons.php / surtitre.php)
 * ne sont PAS définies ici — leur CSS de rendu est généré par WordPress dans
 * #global-styles-inline-css (configuré via Apparence → Éditeur → Styles →
 * Blocs), donc absent de ce fichier malgré les anciens commentaires qui
 * l'annonçaient à tort. Vérifié en direct sur le site : la règle commune
 * [class*="is-style-surtitre-"] pose `display: inline-block; width: fit-content;
 * transform: rotate(-2.71deg);` — d'où le besoin de forcer `display: block` +
 * marges auto (et non un simple `text-align: center`, sans effet sur un
 * inline-block) pour centrer un surtitre avec .surtitre-centre ci-dessous.
 * Le bouton "plein sombre" et .surtitre-centre sont eux des classes CSS
 * classiques (pas des variantes de style de bloc) : plus simples à livrer
 * par ce biais, à coller dans "Classes CSS supplémentaires" du bloc.
 *
 * Enqueued via pf-loader.php — toutes pages (pas de condition is_page).
 * Migré depuis Code Snippets (ID 32) le 2026-07-01.
 * Ref. PR2602-0009
 */

/* ================================================
       Définition des h1 du site
       ================================================ */

	h1,
	.wp-block-post-title,
	.entry-title {
		letter-spacing: 0 !important;
	}
    /* ================================================
       Boutons Hero section
       ================================================ */

    /* Retouche Julia du 25/09/2026 (suite) : le CTA n'était pas "ferré"
       à gauche avec le titre — cause trouvée par Jeff dans les styles
       globaux générés par WordPress (#global-styles-inline-css) :
       :root :where(.wp-block-group) { padding-left/right: var(--wp--
       preset--spacing--x-small) } applique un padding horizontal par
       défaut à TOUS les blocs Groupe, dont .boutons-hero. Le sélecteur
       :where() a une spécificité nulle, donc la simple classe
       .boutons-hero ci-dessous suffit à le neutraliser. */
    .boutons-hero {
        width: fit-content;
        padding-left: 0;
        padding-right: 0;
    }

    /* ================================================
       BOUTON "PLEIN SOMBRE" — inverse de .is-style-outline-sombre
       ================================================
       .is-style-outline-sombre : contour au repos, fond bleu anthracite
       au survol. Ici c'est l'inverse demandé par Jeff (page 404) : fond
       bleu anthracite (#1b2f37) au repos, qui repasse en contour seul au
       survol.
       Pas une variante de style de bloc enregistrée (pas de bouton dans
       le panneau "Styles" de l'éditeur) : classe à coller directement
       dans le champ "Classes CSS supplémentaires" du bloc Bouton
       (Réglages avancés), ex. "pf-btn-plein-sombre".
       Ref. demande du 24/08/2026.
       ================================================ */

    .wp-block-button.pf-btn-plein-sombre .wp-block-button__link {
        background: var(--wp--preset--color--custom-pf-bleu-anthracite);
        border: 1px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
        color: var(--wp--preset--color--custom-pf-beige);
        border-radius: 0;
        transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    }

    .wp-block-button.pf-btn-plein-sombre .wp-block-button__link:hover {
        background: var(--wp--preset--color--surface);
        border-color: var(--wp--preset--color--custom-pf-bleu-anthracite);
        color: var(--wp--preset--color--custom-pf-bleu-anthracite);
    }

    /* ================================================
       SURTITRE CENTRÉ — .surtitre-centre
       ================================================
       Les .is-style-surtitre-* (pastille colorée avec léger effet penché)
       sont en `display: inline-block; width: fit-content;` — elles se
       collent donc au bord gauche de leur conteneur, `text-align: center`
       posé sur l'élément lui-même n'a aucun effet sur un inline-block.
       On force ici `display: block` pour que les marges auto puissent
       centrer la pastille (qui garde sa largeur ajustée au texte via le
       `width: fit-content` déjà présent dans le style de base). !important
       nécessaire pour passer devant la règle générée par l'éditeur de
       styles (même spécificité, ordre d'impression non garanti).
       À ajouter dans "Classes CSS supplémentaires" du bloc, en plus de
       la variante de style is-style-surtitre-* déjà appliquée.
       Ref. demande du 24/08/2026 (page 404).
       ================================================ */

    .surtitre-centre {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* ================================================
       7. CARDS SEJOUR
       ================================================ */

    .pf-card-sejour {
        display: flex;
        flex-direction: column;
        border-radius: 2px;
        width: 280px;
        padding: 26px 21px 13px;
        text-decoration: none;
        gap: 21px;
        flex-shrink: 0;
    }
    /* Retouche Julia du 25/09/2026 : suppression de l'effet de survol
       (ombre portée + soulèvement translateY) — sur toutes les cards
       séjour, homepage comme page Séjours (.pf-card-sejour est la classe
       commune aux deux contextes). La card n'a plus aucune animation au
       survol. */

    .pf-card-img-wrap {
        position: relative;
        width: 100%;
        height: 207px;
        border-radius: 2px;
        overflow: hidden;
        flex-shrink: 0;
    }
    .pf-card-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .pf-card-img-placeholder {
        width: 100%;
        height: 100%;
        background: #2A4A55;
    }

    .pf-card-badge {
        position: absolute;
        top: 12px;
        left: 12px;
        background: var(--wp--preset--color--custom-pf-turquoise);
        color: var(--wp--preset--color--custom-pf-bleu-anthracite);
        font-family: var(--wp--preset--font-family--satoshi-variable);
        font-size: var(--wp--preset--font-size--x-small);
        font-weight: var(--wp--custom--font-weight--bold);
        font-style: italic;
        padding: 10px 16px;
        border-radius: 2px;
        white-space: nowrap;
    }

    .pf-card-body {
        display: flex;
        flex-direction: column;
        gap: 9px;
    }
    .pf-card-title {
        font-family: var(--wp--preset--font-family--satoshi-variable);
        font-size: var(--wp--preset--font-size--large);
        font-weight: var(--wp--custom--font-weight--medium);
        color: var(--wp--preset--color--custom-pf-beige);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: var(--wp--custom--line-height--x-small);
    }

    .pf-card-rating {
        display: flex;
        align-items: center;
        gap: 11px;
    }
    .pf-card-stars {
        display: flex;
        gap: 6px;
        align-items: center;
    }
    .pf-card-avis {
        font-family: var(--wp--preset--font-family--satoshi-variable);
        font-size: var(--wp--preset--font-size--large);
        font-weight: var(--wp--custom--font-weight--regular);
        color: var(--wp--preset--color--custom-pf-beige);
        line-height: var(--wp--custom--line-height--x-small);
    }
    /* Pas de note ou pas d'avis : le bloc garde sa hauteur (cards alignées)
       mais n'est ni visible ni lu par les lecteurs d'écran. */
    .pf-card-rating--vide {
        visibility: hidden;
    }

    /* Texte réservé aux lecteurs d'écran (si absent du thème) */
    .pf-card-rating .screen-reader-text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .pf-card-footer {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .pf-card-sep {
        border: none;
        border-top: 1.5px solid var(--wp--preset--color--custom-pf-beige);
        margin: 0;
    }
    .pf-card-prix-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .pf-card-prix {
        font-family: var(--wp--preset--font-family--satoshi-variable);
        font-size: var(--wp--preset--font-size--x-large);
        font-weight: var(--wp--custom--font-weight--medium);
        color: var(--wp--preset--color--custom-pf-beige);
        letter-spacing: 0.048px;
        line-height: var(--wp--custom--line-height--xx-small);
    }
    .pf-card-prix--demande {
        font-size: var(--wp--preset--font-size--medium);
    }
    /* ── Retouche Julia du 25/09/2026 : flèche card (.pf-card-arrow) —
       "hover pas ok, enlever le contour & fond beige". Le badge rond
       (contour 1.5px + fond beige au survol de la card) est supprimé :
       l'icône reste une simple flèche colorée, sans encadré ni remplissage,
       au repos comme au survol. ── */
    .pf-card-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        color: var(--wp--preset--color--custom-pf-beige);
        flex-shrink: 0;
    }

    .pf-card-list {
        flex-direction: row;
        width: 100%;
        align-items: center;
    }
    .pf-card-list .pf-card-img-wrap {
        width: 200px;
        height: 140px;
        flex-shrink: 0;
    }
/* ================================================
   GALERIE 3 PHOTOS — 1 grande + 2 empilées
   ================================================ */

	.pf-galerie-3photos {
		height: 450px; /* ajuste selon le rendu Figma souhaité */
		gap: 8px;
	}

	.pf-galerie-3photos .wp-block-column {
		height: 100%;
		margin: 0;
	}

	.pf-galerie-3photos .wp-block-column:last-child {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.pf-galerie-3photos .wp-block-image {
		margin: 0;
		overflow: hidden;
		height: 100%;
	}

	.pf-galerie-3photos .wp-block-column:last-child .wp-block-image {
		flex: 1;
		height: auto;
	}

	.pf-galerie-3photos .wp-block-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

    /* ================================================
       CARDS TEMOIGNAGE
       ================================================ */

    .pf-card-temoignage {
        display: flex;
        flex-direction: column;
        gap: 32px;
        background: var(--wp--preset--color--custom-pf-bleu-anthracite);
        border: 1.5px solid var(--wp--preset--color--custom-pf-beige);
        border-radius: 2px;
        padding: 32px;
        width: 354px;
        flex-shrink: 0;
    }

    .pf-temoignage-header {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .pf-temoignage-avatar {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
    }
    .pf-temoignage-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .pf-temoignage-avatar-placeholder {
        width: 100%;
        height: 100%;
        background: #2A4A55;
        border-radius: 50%;
    }
	/* page single temoignage */
	.limitcontent {
		max-width: 1140px;
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}
	 /* Wrapper commun pour le positionnement absolu */
    .pf-single-temoignage__header {
        position: relative;
        z-index: 2;
        margin-bottom: -115px;
    }
	.pf-single-temoignage__avatar {
		width: 180px;
		height: 180px;
		border-radius: 50%;
		object-fit: cover;
		flex-shrink: 0;
		position: relative;
        margin-top: -90px;
        z-index: 2;
        border: 4px solid #ffffff;
	}
    /* Hero pleine largeur */
    .pf-single-temoignage__hero {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        height: 400px;
        background-size: cover;
        background-position: center;
    }

	/* fin single témoignage*/
    .pf-temoignage-client {
        flex: 1;
        font-family: var(--wp--preset--font-family--satoshi-variable);
        font-size: var(--wp--preset--font-size--x-large);
        font-weight: var(--wp--custom--font-weight--medium);
        color: var(--wp--preset--color--surface);
        letter-spacing: 0.048px;
        line-height: var(--wp--custom--line-height--xx-small);
    }

    .pf-temoignage-quote {
        flex-shrink: 0;
        align-self: flex-start;
    }

    .pf-temoignage-sep {
        border: none;
        border-top: 1.5px solid var(--wp--preset--color--custom-pf-beige);
        margin: 0;
    }

    .pf-temoignage-texte {
        font-family: var(--wp--preset--font-family--satoshi-variable);
        font-size: var(--wp--preset--font-size--medium);
        font-weight: var(--wp--custom--font-weight--regular);
        color: var(--wp--preset--color--custom-pf-beige);
        line-height: var(--wp--custom--line-height--large);
        margin: 0;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
		overflow: hidden;
		 max-height: calc(4 * 1.6em);
    }

	/* Demande du 25/09/2026 : dans les cards du carousel témoignages, "Lire
	   la suite" doit se retrouver à la même hauteur sur toutes les cards.
	   Le texte utilisait max-height (plafond) : un témoignage court (ex.
	   "***** 5 étoiles !", 1 ligne) prenait donc moins de place qu'un
	   témoignage sur 2-3 lignes, décalant "Lire la suite" plus haut ou plus
	   bas selon la card. Passage à height fixe (4 lignes) UNIQUEMENT dans
	   le contexte card (le texte plein de la page single témoignage n'est
	   pas concerné). margin-top: auto ajouté sur le lien en filet de
	   sécurité, pour rester calé en bas même si l'en-tête (nom client sur
	   1 ou 2 lignes) varie aussi d'une card à l'autre. */
	.pf-card-temoignage .pf-temoignage-texte {
		height: calc(4 * 1.6em);
	}

	/* ── Bouton Lire la suite ── */
	.pf-temoignage-lire-suite {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-top: 12px;
		font-family: var(--wp--preset--font-family--satoshi-variable);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
		color: var(--wp--preset--color--custom-pf-beige);
		text-decoration: underline;
		text-underline-offset: 3px;
		transition: opacity 0.2s ease;
	}

	.pf-card-temoignage .pf-temoignage-lire-suite {
		margin-top: auto;
	}

	.pf-temoignage-lire-suite:hover {
		opacity: 0.7;
	}

	.pf-temoignage-lire-suite:focus-visible {
		outline: 2px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
		outline-offset: 3px;
	}
    .pf-temoignages .wp-block-columns,
    .pf-temoignages [class*="uagb-columns"] {
        align-items: stretch;
    }
    .pf-temoignages .wp-block-column,
    .pf-temoignages [class*="uagb-column"] {
        display: flex;
        flex-direction: column;
    }
    .pf-temoignages .wp-block-group,
    .pf-temoignages [class*="uagb-block"] {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
	.pf-single-temoignage__hero {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
}


    /* ================================================
       8. PF BOUCLE — LAYOUTS
       ================================================ */

    .pf-layout-slider-wrap {
        position: relative;
        overflow: visible;
    }
    /* ── Correctif du 22/09/2026 (bordure haute des cards séjour qui
       disparaît au survol) ──
       .pf-card-sejour:hover applique `transform: translateY(-4px)` +
       une box-shadow (cf. règle plus haut). Le slider vit dans
       .pf-slider-viewport en `overflow: hidden` (nécessaire pour masquer
       les cards clonées hors champ, cf. pf-blocks.php) — sans marge de
       manœuvre au-dessus des cards, ce conteneur rognait exactement les
       4px remontés au survol, dont la bordure haute (1.5px) de la card.
       `padding-top` + `margin-top` de même valeur (et négative) donnent
       de la place à la zone de clip SANS déplacer visuellement le slider
       dans la page : le padding pousse le contenu vers le bas, la marge
       négative ramène la boîte d'autant vers le haut, les deux s'annulent
       pour tout ce qui est à l'extérieur du conteneur. 24px de marge
       couvrent large : 4px de translation + l'étendue du flou de la
       box-shadow (24px de flou, décalée de 8px → ~16px visibles
       au-dessus de la card). Même logique appliquée en pied de piste
       (padding-bottom) pour ne pas rogner le bas de l'ombre non plus. */
    .pf-slider-viewport {
        overflow: hidden;
        width: 100%;
        padding-top: 24px;
        margin-top: -24px;
        padding-bottom: 24px;
        margin-bottom: -24px;
    }
    .pf-slider-track {
        display: flex;
        gap: 24px;
        transition: transform 0.4s ease;
        will-change: transform;
    }

    .pf-slider-nav {
        position: absolute;
        top: -68px;
        right: 0;
        display: flex;
        gap: 8px;
        z-index: 1;
        justify-content: flex-end;
    }

    .pf-slider-prev,
    .pf-slider-next {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: transparent;
        border: 1.5px solid var(--wp--preset--color--custom-pf-beige);
        color: var(--wp--preset--color--custom-pf-beige);
        font-size: var(--wp--preset--font-size--large);
        cursor: pointer;
        border-radius: 0;
        transition: background 0.25s ease, color 0.25s ease;
    }
    .pf-slider-prev:hover,
    .pf-slider-next:hover {
        background: var(--wp--preset--color--custom-pf-beige);
        color: var(--wp--preset--color--custom-pf-bleu-anthracite);
    }

    /* Retouche Julia du 25/09/2026 : taille de l'icône flèche alignée sur
       celle des cards (.pf-card-arrow svg fait 14px) — le SVG du carousel
       était posé à 16px dans le markup (pf-blocks.php). Le bouton garde
       son encadré, son fond beige au survol et sa zone de clic 44x44px
       (RGAA) inchangés ; seule la taille de l'icône change. */
    .pf-slider-prev svg,
    .pf-slider-next svg {
        width: 14px;
        height: 14px;
    }

    .pf-layout-grid {
        display: grid;
        gap: 24px;
        align-items: stretch; /* explicite : cards de hauteurs inégales (titres 1 vs 2 lignes) alignées sur la même hauteur de ligne */
    }
    .pf-layout-grid.pf-cols-1 { grid-template-columns: 1fr; }
    .pf-layout-grid.pf-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .pf-layout-grid.pf-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .pf-layout-grid.pf-cols-4 { grid-template-columns: repeat(4, 1fr); }

    .pf-layout-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* ── Neutralise le block-gap auto de WordPress sur les enfants de la boucle ──
       Correctif du 28/08/2026 (diagnostic en direct sur le site, cards Freetest
       désalignées en grille 2 colonnes alors que les deux cards font rigoureusement
       la même hauteur — vérifié via getBoundingClientRect()).
       Cause : block.json du bloc "PF — Boucle de contenus" déclare
       "supports": { "__experimentalLayout": true, "spacing": { "blockGap": true } }.
       Dès qu'un bloc a ce support, WordPress génère automatiquement une règle
       globale du type `.is-layout-flow > * + * { margin-block-start: var(--wp--
       style--block-gap, ...) }` pour espacer ses enfants verticalement, COMME S'ILS
       s'empilaient en flux normal — même quand on les réorganise nous-mêmes en
       grille/slider/liste avec notre propre display:flex|grid + gap ci-dessus. Le
       1er enfant n'est jamais concerné (sélecteur `+ *`), donc seule la 2e card (et
       les suivantes) hérite d'un margin-top résiduel qui la décale vers le bas dans
       sa ligne de grille — un "désalignement" alors qu'il ne s'agit ni d'un souci de
       hauteur (déjà réglé, cf. .pf-card-freetest dans freetest.css) ni d'un vrai
       problème de grille : juste une marge fantôme à neutraliser.
       .pf-slider-track > * est ajouté par précaution : le slider est théoriquement
       concerné par le même mécanisme (ses cards sont aussi des enfants directs
       d'un bloc à __experimentalLayout), même si l'effet y était moins visible
       (l'overflow + le transform de la piste masquaient le décalage). */
    .pf-boucle-contenus > *,
    .pf-slider-track > * {
        margin-block-start: 0 !important;
        margin-block-end: 0 !important;
    }

    /* ── Sticky header — transition scroll ─────────────────────────────────────── */
    /* Constat de Jeff (25/09/2026) : le contenu de la page (photos du
       carousel "Rencontrez directement votre communauté" sur Freetest,
       entre autres) apparaît "sur" le header pendant le scroll. Cause :
       le header est en position fixe/sticky par-dessus le contenu ;
       masquer/révéler via une transition d'opacity rend le header
       PARTIELLEMENT transparent pendant toute la durée de la transition,
       donc le contenu qui défile dessous devient visible en transparence
       tant que le fondu n'est pas terminé — dans les deux sens.
       Deux passes de raccourcissement de durée (0.5s → 0.15s, sur un
       sens puis sur les deux) n'ont pas suffi : à 150ms, le contenu a
       quand même le temps de défiler de plusieurs dizaines de pixels
       sous un header encore partiellement transparent, ce qui reste
       visible à l'oeil — surtout avec des photos à fort contraste. Le
       problème n'est donc pas la durée mais le principe même de
       l'opacity : tant qu'il y a une transition d'opacity, il y a une
       fenêtre de transparence, aussi courte soit-elle.
       Correctif définitif : suppression de la transition. Le header
       passe désormais de façon instantanée entre visible et masqué —
       plus de fenêtre de transparence, donc plus de ghosting, dans
       aucun des deux sens. Le petit effet de fondu est perdu, mais
       c'est le compromis nécessaire pour éliminer le bug proprement ;
       un retour à une transition douce nécessiterait de remplacer
       l'opacity par un déplacement hors écran (transform: translateY)
       du header, ce qui touche à la mécanique sticky d'OtterBlocks
       (.o-sticky-node-0 / .o-is-sticky, cf. règle juste au-dessus) et
       demande une vérification en direct sur le site avant d'y toucher. */
    header.wp-block-template-part {
        transition: none;
    }
    header.wp-block-template-part.header-hidden {
        opacity: 0;
        pointer-events: none;
    }
        /* Sticky header mobile/tablette : OtterBlocks n'active pas son sticky
       sous 1024px (header resté en position relative). On le rend
       collant en CSS natif, indépendamment d'Otter. */
    @media (max-width: 1023px) {
        header.wp-block-template-part {
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        /* Les ancres (onglets fiche séjour) ne passent pas sous le header */
        .pf-sejour-section {
            scroll-margin-top: 60px;
        }
    }
    /* ================================================
       FORMULAIRES CF7 — style de base (toutes les pages)
       ================================================
       Reprend l'apparence du formulaire de la page Contact (jusqu'ici
       définie uniquement dans contact.css, is_page('contact')) et la
       généralise à tous les formulaires Contact Form 7 du site :
       Demande de devis, Candidature exposant et Inscription Freetest
       n'avaient aucun style dédié et s'affichaient avec les contrôles
       bruts du navigateur. Même typographie, mêmes champs (soulignement
       bas), même bouton "Envoyer" (contour), pour une unité visuelle
       sur tous les formulaires. contact.css ne garde que ce qui lui est
       propre (mise en page 2 colonnes, carte OSM).
       Ref. demande du 21/08/2026.
       ================================================ */

    /* Flux vertical, espacement régulier entre les champs */
    .wpcf7-form {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* Labels */
    .wpcf7 label {
        display: flex;
        flex-direction: column;
        gap: 8px;
        font-family: var(--wp--preset--font-family--satoshi-variable);
        font-size: var(--wp--preset--font-size--small);
        font-weight: var(--wp--custom--font-weight--medium);
        color: var(--wp--preset--color--custom-pf-bleu-anthracite);
        width: 100%;
    }

    /* Wrap CF7 — pleine largeur */
    .wpcf7-form-control-wrap {
        display: block;
        width: 100%;
    }

    /* Champs texte, email, téléphone, nombre, date, et listes déroulantes */
    .wpcf7 .wpcf7-form-control.wpcf7-text,
    .wpcf7 .wpcf7-form-control.wpcf7-email,
    .wpcf7 .wpcf7-form-control.wpcf7-tel,
    .wpcf7 .wpcf7-form-control.wpcf7-number,
    .wpcf7 .wpcf7-form-control.wpcf7-date,
    .wpcf7 select {
        width: 100% !important;
        border: none;
        border-bottom: 1px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
        border-radius: 0;
        background: transparent;
        padding: 10px 0;
        font-family: var(--wp--preset--font-family--satoshi-variable);
        font-size: var(--wp--preset--font-size--medium);
        color: var(--wp--preset--color--custom-pf-bleu-anthracite);
        outline: none;
        transition: border-color 0.2s ease;
        box-sizing: border-box;
    }

    .wpcf7 select {
        cursor: pointer;
    }

    .wpcf7 .wpcf7-form-control.wpcf7-text:focus,
    .wpcf7 .wpcf7-form-control.wpcf7-email:focus,
    .wpcf7 .wpcf7-form-control.wpcf7-tel:focus,
    .wpcf7 .wpcf7-form-control.wpcf7-number:focus,
    .wpcf7 .wpcf7-form-control.wpcf7-date:focus,
    .wpcf7 select:focus {
        border-bottom-color: var(--wp--preset--color--custom-pf-orange);
    }

    /* Textarea */
    .wpcf7 .wpcf7-form-control.wpcf7-textarea {
        width: 100% !important;
        border: 1px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
        border-radius: 2px;
        background: transparent;
        padding: 12px;
        font-family: var(--wp--preset--font-family--satoshi-variable);
        font-size: var(--wp--preset--font-size--medium);
        color: var(--wp--preset--color--custom-pf-bleu-anthracite);
        outline: none;
        resize: vertical;
        min-height: 120px;
        transition: border-color 0.2s ease;
        box-sizing: border-box;
    }

    .wpcf7 .wpcf7-form-control.wpcf7-textarea:focus {
        border-color: var(--wp--preset--color--custom-pf-orange);
    }

    /* Upload — zone pointillée */
    .wpcf7 .wpcf7-form-control.wpcf7-file {
        width: 100% !important;
        padding: 16px 20px;
        border: 1px dashed var(--wp--preset--color--custom-pf-turquoise);
        border-radius: 2px;
        background: transparent;
        color: var(--wp--preset--color--custom-pf-turquoise);
        font-family: var(--wp--preset--font-family--satoshi-variable);
        font-size: var(--wp--preset--font-size--small);
        cursor: pointer;
        box-sizing: border-box;
        accent-color: var(--wp--preset--color--custom-pf-bleu-anthracite);
    }

    .pf-form-hint {
        color: var(--wp--preset--color--custom-pf-turquoise);
    }

    /* Bouton "Choisir un fichier" — style outline-sombre */
    .wpcf7 .wpcf7-form-control.wpcf7-file::-webkit-file-upload-button,
    .wpcf7 .wpcf7-form-control.wpcf7-file::file-selector-button {
        background: transparent;
        border: 1px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
        color: var(--wp--preset--color--custom-pf-bleu-anthracite);
        padding: 8px 16px;
        font-family: var(--wp--preset--font-family--satoshi-variable);
        font-size: var(--wp--preset--font-size--x-small);
        font-weight: var(--wp--custom--font-weight--medium);
        cursor: pointer;
        margin-right: 12px;
        border-radius: 0;
        transition: background 0.25s ease, color 0.25s ease;
    }

    .wpcf7 .wpcf7-form-control.wpcf7-file::-webkit-file-upload-button:hover,
    .wpcf7 .wpcf7-form-control.wpcf7-file::file-selector-button:hover {
        background: var(--wp--preset--color--custom-pf-beige);
        color: var(--wp--preset--color--custom-pf-bleu-anthracite);
    }

    /* Bouton Envoyer — style outline-beige */
    .wpcf7 .wpcf7-form-control.wpcf7-submit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 14px 32px;
        background: transparent;
        border: 2px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
        color: var(--wp--preset--color--custom-pf-bleu-anthracite);
        font-family: var(--wp--preset--font-family--satoshi-variable);
        font-size: var(--wp--preset--font-size--medium);
        font-weight: var(--wp--custom--font-weight--semi-bold);
        border-radius: 0;
        cursor: pointer;
        transition: background 0.25s ease, color 0.25s ease;
        letter-spacing: 0.02em;
        text-align: center;
        box-sizing: border-box;
    }

    .wpcf7 .wpcf7-form-control.wpcf7-submit:hover {
        background: var(--wp--preset--color--custom-pf-beige);
        color: var(--wp--preset--color--custom-pf-bleu-anthracite);
    }

    /* Groupes de cases à cocher / boutons radio (ex. "Options souhaitées") —
       même traitement visuel que la case de consentement RGPD ci-dessous */
    .wpcf7 .wpcf7-checkbox,
    .wpcf7 .wpcf7-radio {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 20px;
    }

    .wpcf7 .wpcf7-checkbox .wpcf7-list-item,
    .wpcf7 .wpcf7-radio .wpcf7-list-item {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .wpcf7 .wpcf7-checkbox input[type="checkbox"],
    .wpcf7 .wpcf7-radio input[type="radio"] {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        accent-color: var(--wp--preset--color--custom-pf-bleu-anthracite);
        cursor: pointer;
    }

    .wpcf7 .wpcf7-checkbox .wpcf7-list-item-label,
    .wpcf7 .wpcf7-radio .wpcf7-list-item-label {
        font-family: var(--wp--preset--font-family--satoshi-variable);
        font-size: var(--wp--preset--font-size--small);
        color: var(--wp--preset--color--custom-pf-bleu-anthracite);
    }

    /* Consentement RGPD */
    .wpcf7 .wpcf7-acceptance {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .wpcf7 .wpcf7-acceptance .wpcf7-list-item {
        margin: 0;
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    .wpcf7 .wpcf7-acceptance input[type="checkbox"] {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        margin-top: 2px;
        accent-color: var(--wp--preset--color--custom-pf-bleu-anthracite);
        cursor: pointer;
    }

    .wpcf7 .wpcf7-acceptance .wpcf7-list-item-label {
        font-family: var(--wp--preset--font-family--satoshi-variable);
        font-size: var(--wp--preset--font-size--x-small);
        color: var(--wp--preset--color--custom-pf-bleu-anthracite);
        line-height: 1.5;
    }

    /* Messages de validation CF7 */
    .wpcf7-not-valid-tip {
        font-size: var(--wp--preset--font-size--x-small);
        color: #dc2626;
        margin-top: 4px;
    }

    .wpcf7-response-output {
        padding: 12px 16px;
        font-size: var(--wp--preset--font-size--small);
        border-radius: 2px;
        margin-top: 8px;
    }

    .wpcf7-form.sent .wpcf7-response-output {
        border: 1px solid var(--wp--preset--color--custom-pf-vert);
        color: var(--wp--preset--color--custom-pf-bleu-anthracite);
        background-color: rgba(165, 214, 144, 0.15);
    }

    .wpcf7-form.invalid .wpcf7-response-output,
    .wpcf7-form.failed .wpcf7-response-output {
        border: 1px solid #dc2626;
        color: #dc2626;
    }

    /* ================================================
       LIENS DANS LES FORMULAIRES CF7 (toutes les pages)
       ================================================
       Même bug que sur les liens "Nos partenaires" de la fiche Freetest
       (cf. sejour.css) : sans couleur explicite, un lien hérite de la
       couleur de lien globale du thème — une teinte crème pensée pour un
       fond sombre — et devient quasi invisible sur un formulaire à fond
       clair (ex. le lien "politique de confidentialité" du consentement
       RGPD). contact.css corrige déjà ce point pour la page Contact ;
       cette règle globale couvre en plus Demande de devis, Candidature
       exposant et Inscription Freetest, qui n'ont pas de feuille de
       style dédiée et héritaient donc du crème invisible.
       :not(.wp-element-button) exclut les boutons qui ont déjà leur
       propre style (ex. "Envoyer").
       Ref. demande du 21/08/2026.
       ================================================ */
    .wpcf7 a:not(.wp-element-button) {
        color: var(--wp--preset--color--custom-pf-bleu-anthracite);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .wpcf7 a:not(.wp-element-button):hover {
        color: var(--wp--preset--color--custom-pf-orange);
    }

    .wpcf7 a:not(.wp-element-button):focus-visible {
        outline: 2px solid var(--wp--preset--color--custom-pf-orange);
        outline-offset: 2px;
    }
        /* ── Inscription Freetest : récap de l'événement ── */
    .pf-freetest-recap {
        border: 1.5px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
        border-radius: 2px;
        padding: 24px;
        margin-bottom: 32px;
    }
    .pf-freetest-recap__titre { margin: 0 0 16px; }
    .pf-freetest-recap__infos {
        display: grid;
        grid-template-columns: max-content 1fr;
        gap: 6px 16px;
        margin: 0 0 16px;
    }
    .pf-freetest-recap__infos dt { font-weight: var(--wp--custom--font-weight--bold); }
    .pf-freetest-recap__infos dd { margin: 0; }
    .pf-freetest-recap__inclus {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    .pf-freetest-recap__inclus h3 { margin: 0 0 8px; }
        .pf-freetest-recap__complement {
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1.5px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
    }
    .pf-freetest-recap__complement h3 { margin: 0 0 8px; }
    @media (max-width: 763px) {
        .wpcf7:has(.pf-freetest-recap) {
            padding-inline: 20px;
        }
        .pf-freetest-recap__infos,
        .pf-freetest-recap__inclus {
            grid-template-columns: 1fr;
        }
    }
    /* ================================================
       LIENS — PAGES DOCUMENTS COMPLIANZ (Politique de cookies, etc.)
       ================================================
       Même bug, même famille de correctif que les liens CF7 ci-dessus :
       le contenu généré par Complianz (shortcode [cmplz-cookie-statement]
       et consorts, enveloppé dans .cmplz-document) hérite lui aussi de la
       couleur de lien crème du thème, pensée pour un fond sombre — quasi
       invisible sur la page "Politique de cookies" à fond clair. On lui
       applique le même traitement que les liens CF7 : couleur à fort
       contraste + soulignement (RGAA 3.2 — pas la couleur seule) + focus
       visible au clavier.
       .cmplz-document cible le conteneur du document quel qu'il soit
       (cookie policy générée automatiquement, ou future privacy statement
       si le passage en premium a lieu) — pas besoin de cibler un slug de
       page précis.
       Ref. demande du 26/08/2026.
       ================================================ */
    .cmplz-document a {
        color: var(--wp--preset--color--custom-pf-bleu-anthracite);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .cmplz-document a:hover {
        color: var(--wp--preset--color--custom-pf-orange);
    }

    .cmplz-document a:focus-visible {
        outline: 2px solid var(--wp--preset--color--custom-pf-orange);
        outline-offset: 2px;
    }

    /* ================================================
       LARGEUR — PAGE COMPLIANZ (Politique de cookies)
       ================================================
       Constat de Jeff le 26/08 : même avec le bloc Groupe de la page réglé
       en largeur "Large"/pleine largeur, le contenu reste étroit. Cause
       probable : Complianz applique sa propre limite de largeur sur le
       conteneur qu'il génère (.cmplz-document), en CSS de plugin ou en
       style inline — dans les deux cas plus prioritaire que le réglage du
       bloc Groupe du thème, qui ne fait qu'envelopper ce conteneur sans
       pouvoir le forcer depuis l'extérieur. !important nécessaire ici pour
       passer devant un éventuel style inline posé par le plugin.
       Ref. demande du 26/08/2026.
       ================================================ */
    .cmplz-document {
        max-width: none !important;
        width: 100% !important;
    }

    /* ================================================
       PILLS CONTACT (tél / mail / adresse) — .pf-contact-infos
       ================================================
       Ce bloc (avec la classe .pf-section-contact qui l'entoure) est un
       pattern réutilisé tel quel sur plusieurs pages formulaire
       (Candidature exposant, Inscription Freetest…), pas seulement sur
       Contact. Seul contact.css (chargé uniquement is_page('contact'))
       stylait ces pills jusqu'ici : ailleurs, le bloc s'affichait en
       liste brute sans encadré. On reprend ici exactement le même style
       (3 pills encadrées, alignées en ligne) pour que le rendu soit
       identique partout où ce bloc apparaît.
       Ref. demande du 21/08/2026.
       ================================================ */
    .pf-contact-infos {
        list-style: none;
        padding: 0;
        margin: 32px 0 0;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .pf-contact-infos li {
        margin: 0;
    }

    .pf-contact-infos a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px;
        border: 1px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
        color: var(--wp--preset--color--custom-pf-bleu-anthracite);
        font-family: var(--wp--preset--font-family--satoshi-variable);
        font-size: var(--wp--preset--font-size--small);
        font-weight: var(--wp--custom--font-weight--medium);
        text-decoration: none;
        transition: background-color 0.2s ease, color 0.2s ease;
        border-radius: 2px;
    }

    .pf-contact-infos a:hover {
        background-color: var(--wp--preset--color--custom-pf-bleu-anthracite);
        color: var(--wp--preset--color--custom-pf-beige);
    }

    .pf-contact-infos svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        fill: var(--wp--preset--color--custom-pf-orange);
    }

    /* ================================================
       9. PF RESPONSIVE
       ================================================ */
@media (max-width: 763px) {

	/*  définition des marges */
	 :root {
        --wp--style--root--padding-left: 16px !important;
        --wp--preset--spacing--x-small: 16px !important;
    }

	/* ── NAV — bouton Contact mobile ── */

        /* Conteneur bouton dans le header */
    .wp-block-buttons.is-layout-flex {
        flex-shrink: 0;
    }

    /* Bouton Contact header mobile */
    .wp-block-buttons.is-layout-flex .wp-block-button__link {
       white-space: nowrap !important;
        padding: 6px 12px !important;
        font-size: 1rem !important;
        letter-spacing: 0 !important;
    }

    /* Masque la flèche ↗ sur le bouton Contact en mobile */
    .wp-block-buttons.is-layout-flex .wp-block-button__link::after {
        display: none !important;
    }
    /* ── COMMUN adn-galerie ET freetest-galerie ── */
        /* ── COMMUN — mise en colonne ── */
    .adn-galerie,
    .freetest-galerie {
        height: auto !important;
        padding-top: 0 !important;
		padding-bottom: 10px!important;
    }

    .adn-galerie > .wp-block-columns,
    .freetest-galerie > .wp-block-columns {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }

    /* Colonnes pleine largeur avec marges */
    .adn-galerie > .wp-block-columns > .wp-block-column,
    .freetest-galerie > .wp-block-columns > .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Images fluides */
    .adn-galerie img,
    .freetest-galerie img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        display: block !important;
        object-fit: unset !important;
    }

    /* ── GALERIES IMBRIQUÉES en colonne ── */
    .adn-galerie > .wp-block-columns > .wp-block-column .wp-block-columns,
    .freetest-galerie > .wp-block-columns > .wp-block-column .wp-block-columns,
    .freetest-galerie .pf-galerie-3photos {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .adn-galerie :where(.wp-block-columns),
    .freetest-galerie :where(.wp-block-columns) {
        margin-bottom: 0 !important;
    }

    /* Sous-colonnes images pleine largeur sans padding */
    .adn-galerie > .wp-block-columns > .wp-block-column .wp-block-columns .wp-block-column,
    .freetest-galerie > .wp-block-columns > .wp-block-column .wp-block-columns .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        height: auto !important;
        overflow: visible !important;
        min-width: 0 !important;
    }

    /* ── SPÉCIFIQUE adn-galerie — inversion texte/images ── */
    .adn-galerie > .wp-block-columns > .wp-block-column:last-child {
        order: -1 !important;
    }

    .adn-galerie > .wp-block-columns > .wp-block-column:first-child {
        order: 1 !important;
    }

    /* ── SPÉCIFIQUE freetest-galerie ── */
    .freetest-galerie {
        padding-top: 16px !important;
		padding-bottom: 10px !important;
    }
	.freetest-galerie .pf-galerie-3photos {
		min-height: 100%;
		height: 100%;
	}
	    /* Contient la galerie images Freetest */
    .freetest-galerie > .wp-block-columns > .wp-block-column:last-child {
        overflow: hidden !important;
    }

    /* Contient le groupe imbriqué */
    .freetest-galerie .wp-block-group.has-global-padding {
        overflow: hidden !important;
        padding: 0 !important;
    }
	.pf-galerie-3photos {
		height: auto;
	}
	/* card temoignage */
	.pf-card-temoignage {
        max-width: calc(100vw - 32px);
        width: calc(100vw - 32px);
    }
	/* Slider */
	    /* Wrapper en flex colonne */
    .pf-layout-slider-wrap {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Viewport en premier */
    .pf-slider-viewport {
        order: 1 !important;
        width: 100% !important;
    }

    /* Flèches en dessous */
    .pf-slider-nav {
        order: 2 !important;
        display: flex !important;
        justify-content: center !important;
        gap: 16px !important;
        padding: 16px 0 8px !important;
        /* Annule tout positionnement absolu desktop */
        position: static !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
    }

    /* Boutons flèches conformes WCAG 44x44px */

	.pf-slider-prev,
    .pf-slider-next {
        position: static !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1.5px solid currentColor !important;
        border-radius: 2px !important;
		border-color: var(--wp--preset--color--custom-pf-beige) !important;
        color: var(--wp--preset--color--custom-pf-beige) !important;
        background: transparent !important;
        cursor: pointer !important;
    }
    .pf-slider-prev:hover,
    .pf-slider-next:hover {
        background: transparent !important;
        color: var(--wp--preset--color--custom-pf-beige) !important;
    }

    .pf-slider-prev:active,
    .pf-slider-next:active {
        background: rgba(255, 255, 255, 0.15) !important;
        color: currentColor !important;
		color: var(--wp--preset--color--custom-pf-beige) !important;
    }

    .pf-slider-prev:focus-visible,
    .pf-slider-next:focus-visible {
        outline: 2px solid var(--wp--preset--color--custom-pf-beige) !important;
        outline-offset: 2px;
    }
	.pf-slider-prev:active,
    .pf-slider-next:active {
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
    }

    .pf-slider-prev:focus,
    .pf-slider-next:focus {
        opacity: 1 !important;
        visibility: visible !important;
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }

	/* ── PF BOUCLE — Grille : 1 colonne quel que soit le réglage desktop ──
	   Jusqu'ici seul le layout Slider avait une adaptation mobile ;
	   le layout Grille (pf-layout-grid.pf-cols-*) restait sur le nombre
	   de colonnes desktop en dessous de 763px, ce qui écrase des cards
	   (ex. cards événements Freetest en pf-cols-2) sur un viewport mobile
	   trop étroit. Ref. ajout du 28/08/2026. */
	.pf-layout-grid {
		grid-template-columns: 1fr !important;
	}

	/* Newsletter embarque */
	/* ── Newsletter embarquée (suite) ── */

    .pf-newsletter-bandeau > .wp-block-group {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 16px !important;
    }

    .pf-newsletter-bandeau .pftextenews {
        font-size: var(--wp--preset--font-size--medium) !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .pf-newsletter-bandeau .wp-block-buttons {
        width: 100%;
        justify-content: center !important;
    }

    .pf-newsletter-bandeau .wp-block-button {
        width: 100%;
        max-width: 320px;
    }

    .pf-newsletter-bandeau .wp-block-button__link {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }
		/* boutons hero */

	/* ── Retouche Julia du 25/09/2026 : "aligner les CTA au texte, pour
	   tous les héros du site" — .boutons-hero est le conteneur générique
	   des CTA réutilisé par tous les gabarits hero (séjour, homepage,
	   à-propos, Freetest...). En mobile il était centré (align-items:
	   center) alors que le titre/prix/accroche au-dessus restent
	   alignés à gauche (align-items: flex-start côté conteneur parent,
	   ex. .pf-hero-sejour__content) — d'où le décalage visible entre le
	   bloc CTA et le texte. flex-start aligne maintenant le bloc CTA sur
	   le même bord gauche que le texte, sur tous les héros du site.
	   Le texte À L'INTÉRIEUR de chaque bouton reste centré
	   (text-align/justify-content: center ci-dessous, inchangé) : seul
	   le bloc CTA dans son ensemble change de position. ── */
	.boutons-hero {
			width: 100% !important;
			display: flex !important;
			flex-direction: column !important;
			align-items: flex-start !important;
			gap: 12px !important;
		}

		.boutons-hero .wp-block-button__link {
			width: 100% !important;
			max-width: 280px !important;
			text-align: center !important;
			justify-content: center !important;
			min-height: 44px !important; /* RGAA — zone de clic minimum 44x44px */
			padding: 12px 24px !important;
		}
		/* Pills contact (tél / mail / adresse) — colonne pleine largeur */
		.pf-contact-infos {
			flex-direction: column;
		}
		.pf-contact-infos a {
			width: 100%;
			justify-content: center;
		}
}
        /* ── MailPoet : page « Gérer mon abonnement » ── */
        .mailpoet-manage-subscription,
        .mailpoet-manage-subscription input,
        .mailpoet-manage-subscription select {
            font-family: inherit;
        }
        .mailpoet-manage-subscription .mailpoet_submit {
        background: #fff;
        color: var(--wp--preset--color--custom-pf-bleu-anthracite);
        border: 1px solid;
        border-color: var(--wp--preset--color--custom-pf-bleu-anthracite) !important; /* style inline MailPoet */
        border-radius: 0;
        padding: 12px 24px;
        font-size: 18px;
        font-weight: 500;
        cursor: pointer;
        transition: background-color .2s, color .2s;
        }
        .mailpoet-manage-subscription .mailpoet_submit:hover,
        .mailpoet-manage-subscription .mailpoet_submit:focus-visible {
            background: var(--wp--preset--color--custom-pf-bleu-anthracite);
            color: var(--wp--preset--color--custom-pf-beige);
        }
        .mailpoet-manage-subscription .mailpoet_submit:focus-visible {
            outline: 2px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
            outline-offset: 3px;
        }
/* ================================================
   FOOTER
   ================================================ */

/* Lien "jf-web" dans la ligne de copyright — Jeff a vérifié en direct que
   ce <a> porte son propre font-size: var(--wp--preset--font-size--medium),
   plus grand que le reste de la ligne (x-small) : la boîte de ligne plus
   haute de ce lien le fait paraître décalé plus bas que le reste du texte.
   Ciblé par [href*="jf-web"] plutôt que par une classe, le lien n'en
   portant pas de dédiée. Constat du 25/09/2026. */
footer.wp-block-template-part a[href*="jf-web"] {
    font-size: inherit !important;
}

/* Titres de colonnes (NOS SÉJOURS, PLANÈTE FREERIDE, INFORMATIONS,
   SUIVEZ NOUS !) vs liens en dessous (span.wp-block-navigation-item__label,
   ~17,2px hérité du réglage "medium" du bloc Navigation) — valeurs Figma de
   Julia : titres 16px / liens 14px. Passage en --font-size--large (essai
   du 25/09/2026) trop gros à l'usage (constat Jeff : "INFORMATIONS" et
   "SUIVEZ NOUS !" repassent à la ligne) — remplacé par les 16px/14px fixes
   de la maquette. La ligne de copyright partage la même classe
   has-x-small-font-size que les titres : Jeff a ajouté la classe
   "copyright" sur sa rangée pour l'exclure (règle plus spécifique
   ci-dessous, qui restaure sa taille d'origine x-small). */
footer.wp-block-template-part .has-x-small-font-size {
    font-size: 16px !important;
}
footer.wp-block-template-part .copyright .has-x-small-font-size,
footer.wp-block-template-part .has-x-small-font-size.copyright {
    font-size: var(--wp--preset--font-size--x-small) !important;
}
footer.wp-block-template-part .wp-block-navigation-item__label {
    font-size: 14px !important;
}