/* ============================================================================
   MOULINS FOUCHÉ — PAGES 2026 EN BLOCS (landing « Accompagnement boulanger »,
   pages de service, nouvelle page d'accueil)
   ----------------------------------------------------------------------------
   Chargée sur le modèle tpl_page-2026.php (front) ET comme feuille d'éditeur
   (voir fouchetheme_pages_2026_css() dans functions.php).

   Toutes les classes sont préfixées « fo- ».
   Chaque règle est écrite pour les deux contextes à la fois :
     :is(.fo-page, .editor-styles-wrapper)
   — .fo-page est posée sur <main> par le modèle de page ;
   — .editor-styles-wrapper est le conteneur de l'éditeur de blocs.
   (Sur Girardeau, les règles préfixées .srv-page n'existaient pas dans
   l'éditeur et une seconde feuille dédiée avait dû être créée.)

   Répartition des responsabilités (identique à Girardeau) :
   - fond, padding, largeur max, alignement pleine largeur, gouttières
     = ATTRIBUTS des blocs Kadence (réglables par la cliente) ;
   - typographie de marque, encarts, ombres, arrondis, ornements = cette feuille.
   ========================================================================== */

/* ---- Polices -------------------------------------------------------------
   La maquette est dessinée en Gotham (texte) et Didot LT Pro (accents), deux
   polices commerciales absentes du thème. Substituts libres hébergés sur le
   site (aucun appel à Google Fonts) :
   - Gotham        → Montserrat (même construction géométrique) ;
   - Didot LT Pro  → Bodoni Moda (didone à fort contraste, graisse variable).
   Pour passer aux polices d'origine le jour où la licence web est achetée :
   déposer les fichiers et ne modifier QUE les deux variables --fo-font-*. */
@font-face {
    font-family: "FO Montserrat";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url(../fonts/fo2026/Montserrat-normal-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "FO Montserrat";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url(../fonts/fo2026/Montserrat-normal-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "FO Montserrat";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/fo2026/Montserrat-italic-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "FO Bodoni";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url(../fonts/fo2026/BodoniModa-normal-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "FO Bodoni";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url(../fonts/fo2026/BodoniModa-normal-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "FO Bodoni";
    font-style: italic;
    font-weight: 400 900;
    font-display: swap;
    src: url(../fonts/fo2026/BodoniModa-italic-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Jetons de la charte (relevés dans Figma) ------------------------------ */
:root {
    --fo-font-sans: "FO Montserrat", "Montserrat medium", Arial, sans-serif;
    --fo-font-serif: "FO Bodoni", "Libre Baskerville normal", Georgia, serif;

    --fo-turquoise: #43AAA5;
    --fo-turquoise-dark: #3A928E;   /* survol, déjà utilisé par le thème */
    --fo-gold: #BC8F21;
    --fo-gold-dark: #A37B1B;
    --fo-cream: #F2EFE9;            /* fond des sections claires */
    --fo-ink: #000000;              /* titres */
    --fo-text: #404040;             /* texte courant */
    --fo-muted: #615B5B;
    --fo-input-bg: #F9FFFF;
    --fo-hairline: rgba(64, 64, 64, .14);
    --fo-shadow: 0 8px 30px rgba(64, 64, 64, .08);

    /* Ornements : fichiers du thème, utilisés en MASQUE CSS pour pouvoir les
       recolorer (or, blanc) sans dupliquer les fichiers. */
    /* Un fichier par épi, exporté de Figma tel qu'il est posé dans la maquette
       (orientation et recadrage compris) : aucune rotation à recalculer. */
    --fo-epi-vision-gauche: url(../img/fo2026/epi-vision-gauche.svg);
    --fo-epi-vision-droite: url(../img/fo2026/epi-vision-droite.svg);
    --fo-epi-experts: url(../img/fo2026/epi-experts.svg);
    --fo-epi-titre: url(../img/fo2026/epi-titre.svg);
    --fo-epi-contact: url(../img/fo2026/epi-contact.svg);
    --fo-arabesque: url(../img/fo2026/arabesque.png);
}

/* ============================================================================
   0. CADRE DE PAGE
   ========================================================================== */

/* Le fil d'Ariane fixe du thème (template-parts/content-breadcrumb.php, appelé
   par header.php sur toutes les pages) n'existe pas dans la maquette. */
.page-template-tpl_page-2026 .breadcrumb {
    display: none;
}

/* .site-main reçoit déjà padding-top:104px du thème (en-tête fixe de 109px
   dont 5px de filet) : on ne le touche pas. */
.fo-page {
    font-family: var(--fo-font-sans);
    color: var(--fo-text);
    overflow-x: clip;   /* ornements débordants (épis) sans ascenseur horizontal */
}

:is(.fo-page, .editor-styles-wrapper) :is([class^="fo-"], [class*=" fo-"]) {
    font-family: var(--fo-font-sans);
}

/* Remise à zéro des styles globaux du thème qui s'appliquent aux balises nues :
   p { font-family: Montserrat medium; margin-bottom: 1.5em }, h1/h2 en
   « AW Conqueror Carved », h3 BLANC et en capitales. */
:is(.fo-page, .editor-styles-wrapper) :is(p, h1, h2, h3, h4, li):is([class^="fo-"], [class*=" fo-"]) {
    font-family: var(--fo-font-sans);
    text-transform: none;
    letter-spacing: normal;
}
:is(.fo-page, .editor-styles-wrapper) h3:is([class^="fo-"], [class*=" fo-"]) {
    color: var(--fo-ink);
}

/* ---- Filet double décoratif (motif du site : 2px / 3px / 2px) ------------
   Posé par classe sur une rangée Kadence : .fo-deco-top / .fo-deco-bottom.
   Le fond de la rangée est rogné au padding-box pour que l'intervalle entre les
   deux filets laisse voir le blanc de la page, comme dans la maquette. */
.fo-deco-top {
    border-top: 7px double var(--fo-turquoise) !important;
    background-clip: padding-box !important;
}
.fo-deco-bottom {
    border-bottom: 7px double var(--fo-turquoise) !important;
    background-clip: padding-box !important;
}

/* Filet sous l'en-tête : le thème dessine déjà un double filet BLANC sous
   l'en-tête fixe (.site-header::after, de 112 à 119px) par-dessus le contenu.
   Sur les pages 2026, la maquette le veut turquoise : on recolore celui du
   thème et on retire le filet de la première section, qu'il masquerait. */
.page-template-tpl_page-2026 .site-header::after {
    border-bottom-color: var(--fo-turquoise);
}
.fo-page > .fo-deco-top:first-child {
    border-top: 0 !important;
}

/* ============================================================================
   1. TYPOGRAPHIE COMMUNE
   ========================================================================== */

/* Sur-titre (« NOTRE CONVICTION », « NOS SERVICES »…).
   ⚠️ La maquette Figma les met en Filosofia OT (serif) ; la cliente les veut en
   « Gotham Black doré » (mail Sophie Auffret du 28/09). Gotham est une police
   payante, absente du site : on applique donc le substitut déjà retenu pour
   Gotham sur tout le projet — Montserrat — dans sa graisse la plus lourde.
   Le fichier variable auto-hébergé porte bien l'axe jusqu'à 900 ; seule la
   plage déclarée en @font-face le bridait à 700. */
:is(.fo-page, .editor-styles-wrapper) p.fo-eyebrow {
    /* Gotham du kit Adobe Fonts de la cliente (29/09/2026). ⚠️ Dans ce kit,
       Gotham Black est la graisse 800 — il n'y a pas de 900. Montserrat reste
       en secours : si le kit ne répond pas, le sur-titre retombe sur une sans
       lourde, jamais sur du serif. */
    font-family: "gotham", var(--fo-font-sans);
    font-weight: 800;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 2.3px;
    text-transform: uppercase;
    color: var(--fo-gold);
    margin: 0 0 17px;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-eyebrow--light {
    color: #fff;
}

/* Titre de section : Gotham 700 46/50, noir.
   Le mot mis en avant passe en Didot turquoise DROIT : la cliente l'obtient en
   mettant le mot en italique dans l'éditeur (bouton I), d'où le ciblage de <em>. */
:is(.fo-page, .editor-styles-wrapper) :is(h1, h2, h3).fo-title {
    font-family: var(--fo-font-sans);
    font-weight: 700;
    /* Maquette : Gotham 46/50. Montserrat est ~20 % plus large que Gotham à
       corps égal : 42px et un interlettrage resserré redonnent la même mise
       en ligne. Le mot en Didot/Bodoni (<em>) garde son corps. */
    font-size: clamp(30px, 3.1vw, 42px);
    line-height: 50px;
    letter-spacing: -1px;
    color: var(--fo-ink);
    margin: 0 0 20px;
}
:is(.fo-page, .editor-styles-wrapper) :is(h1, h2, h3, p):is([class^="fo-"], [class*=" fo-"]) em {
    font-family: var(--fo-font-serif);
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--fo-turquoise);
}
/* Le Didot de la maquette est plus étroit que le Bodoni à corps égal */
:is(.fo-page, .editor-styles-wrapper) :is(h1, h2).fo-title em,
:is(.fo-page, .editor-styles-wrapper) h1.fo-hero__title em {
    font-size: 1.04em;
    letter-spacing: -0.02em;
}
/* Variantes de couleur du mot mis en avant */
:is(.fo-page, .editor-styles-wrapper) .fo-em-gold em {
    color: var(--fo-gold) !important;
}
:is(.fo-page, .editor-styles-wrapper) .fo-em-white em {
    color: #fff !important;
}
/* Mot mis en avant en Gotham (et non Didot) : bandeau « Le regard de nos experts » */
:is(.fo-page, .editor-styles-wrapper) .fo-em-sans em {
    font-family: var(--fo-font-sans) !important;
}
:is(.fo-page, .editor-styles-wrapper) :is(h1, h2, h3).fo-title--light {
    color: #fff;
}

:is(.fo-page, .editor-styles-wrapper) p.fo-lead,
:is(.fo-page, .editor-styles-wrapper) p.fo-text {
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;
    color: var(--fo-text);
    margin: 0 0 24px;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-lead {
    max-width: 660px;
    margin-inline: auto;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-text:last-child {
    margin-bottom: 0;
}
:is(.fo-page, .editor-styles-wrapper) .fo-text--light,
:is(.fo-page, .editor-styles-wrapper) p.fo-text--light {
    color: #fff;
}

.fo-center,
.fo-center .kt-inside-inner-col {
    text-align: center;
}

/* ============================================================================
   2. BOUTONS
   ========================================================================== */

/* 🚨 Le thème pose sur TOUT .wp-block-button__link un ::after absolu de
   215×100 avec une image d'ornement (img/greencta.png), plus margin-top:1em.
   On neutralise les deux sur nos boutons : notre ::after sert à la flèche. */
:is(.fo-page, .editor-styles-wrapper) .fo-btn .wp-block-button__link {
    position: relative;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 28px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-family: var(--fo-font-sans);
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    box-shadow: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
:is(.fo-page, .editor-styles-wrapper) .fo-btn .wp-block-button__link::after {
    content: none;
    background-image: none;
    position: static;
    width: auto;
    height: auto;
}
/* 🚨 La flèche était un caractère « → » (U+2192) : il est ABSENT du sous-ensemble
   Montserrat hébergé, son rendu dépendait donc des polices système et il
   n'apparaissait pas chez tout le monde (recette Perrine du 22/09). Elle est
   désormais dessinée par la flèche SVG du thème, posée en masque et colorée par
   la couleur du texte : même rendu partout. */
:is(.fo-page, .editor-styles-wrapper) .fo-btn--arrow .wp-block-button__link::after {
    content: "";
    width: 18px;
    height: 14px;
    flex: 0 0 auto;
    /* 🚨 Le thème pose sur tous les ::after de boutons (ornement greencta.png)
       z-index:-1, top:-27px, left/right:0 et margin:auto : sans ces remises à
       zéro, la flèche est peinte DERRIÈRE le fond du bouton (invisible sur les
       boutons pleins) puis décalée en haut. */
    position: relative;
    z-index: 1;
    inset: auto;
    margin: 0;
    background-color: currentColor;
    -webkit-mask: url(../icons/arrow.svg) center / contain no-repeat;
            mask: url(../icons/arrow.svg) center / contain no-repeat;
}

:is(.fo-page, .editor-styles-wrapper) .fo-btn--primary .wp-block-button__link {
    background-color: var(--fo-turquoise);
    color: #fff;
}
:is(.fo-page, .editor-styles-wrapper) .fo-btn--primary .wp-block-button__link:hover {
    background-color: var(--fo-turquoise-dark);
}
:is(.fo-page, .editor-styles-wrapper) .fo-btn--gold .wp-block-button__link {
    background-color: var(--fo-gold);
    color: #fff;
}
:is(.fo-page, .editor-styles-wrapper) .fo-btn--gold .wp-block-button__link:hover {
    background-color: var(--fo-gold-dark);
}
:is(.fo-page, .editor-styles-wrapper) .fo-btn--outline .wp-block-button__link {
    background-color: #fff;
    color: var(--fo-gold);
    border-color: rgba(64, 64, 64, .2);
}
:is(.fo-page, .editor-styles-wrapper) .fo-btn--outline .wp-block-button__link:hover {
    border-color: var(--fo-gold);
}
:is(.fo-page, .editor-styles-wrapper) .fo-btn--white .wp-block-button__link {
    background-color: #fff;
    color: var(--fo-turquoise);
}
:is(.fo-page, .editor-styles-wrapper) .fo-btn--white .wp-block-button__link:hover {
    color: var(--fo-turquoise-dark);
}
:is(.fo-page, .editor-styles-wrapper) .fo-btn--white-gold .wp-block-button__link {
    background-color: #fff;
    color: var(--fo-gold);
}
:is(.fo-page, .editor-styles-wrapper) .wp-block-buttons.fo-buttons {
    gap: 12px;
    margin: 0;
}

/* Lien fléché (cartes de services) */
:is(.fo-page, .editor-styles-wrapper) .fo-link .wp-block-button__link {
    background: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--fo-turquoise) !important;
    font-size: 15px;
    line-height: 24px;
}
:is(.fo-page, .editor-styles-wrapper) .fo-link .wp-block-button__link:hover {
    text-decoration: underline;
}

/* ============================================================================
   3. ORNEMENTS (épis de blé, arabesques)
   ----------------------------------------------------------------------------
   ⚠️ Les ÉPIS DE BLÉ sont en attente de validation par les clientes (Perrine,
   17/09/2026). Ils sont portés UNIQUEMENT par des classes .fo-epi--* posées sur
   les rangées : pour les retirer d'une section, supprimer la classe dans
   l'éditeur (Avancé ▸ Classe CSS) ; pour les retirer partout, vider le bloc
   « 3. ORNEMENTS » ci-dessous. Aucun contenu à reprendre.
   ========================================================================== */
.fo-orn {
    position: relative;
}
.fo-orn > .kt-row-column-wrap {
    position: relative;
    z-index: 1;
}
.fo-orn::before,
.fo-orn::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
}

/* Deux épis verticaux de part et d'autre (section « Notre vision ») :
   166×640, à 54px du bord gauche et 64px du bord droit (maquette 1440). */
.fo-epi--paire::before,
.fo-epi--paire::after {
    top: 110px;
    width: 166px;
    height: 640px;
    background-color: var(--fo-gold);
}
.fo-epi--paire::before {
    left: calc(50% - 666px);
    -webkit-mask-image: var(--fo-epi-vision-gauche);
            mask-image: var(--fo-epi-vision-gauche);
}
.fo-epi--paire::after {
    left: calc(50% + 490px);
    -webkit-mask-image: var(--fo-epi-vision-droite);
            mask-image: var(--fo-epi-vision-droite);
}

/* Section « Vos interlocutrices » / « Portraits d'experts » : la rangée d'intro
   ne fait que ~330px de haut, alors que l'épi en mesure 640 à partir de 110. Il
   repassait donc derrière les cartes blanches de la rangée suivante — opaques —
   et se retrouvait coupé net à mi-hauteur (retour Perrine du 28/09). On le
   ramène à la hauteur réellement disponible et on l'écarte vers l'extérieur
   pour qu'il ne croise plus les cartes (qui commencent à 140px du bord). */
.fo-experts-intro.fo-epi--paire::before,
.fo-experts-intro.fo-epi--paire::after {
    top: 44px;
    width: 96px;
    height: 250px;
}
.fo-experts-intro.fo-epi--paire::before {
    left: calc(50% - 700px);
}
.fo-experts-intro.fo-epi--paire::after {
    left: calc(50% + 620px);
}

@media (max-width: 1100px) {
    .fo-epi--paire::before,
    .fo-epi--paire::after {
        opacity: .25;
    }
}
@media (max-width: 767px) {
    .fo-epi--paire::before,
    .fo-epi--paire::after {
        display: none;
    }
}

/* ============================================================================
   4. LANDING « ACCOMPAGNEMENT BOULANGER »
   ========================================================================== */

/* ---- 4.1 Hero ------------------------------------------------------------ */
:is(.fo-page, .editor-styles-wrapper) h1.fo-hero__title {
    font-family: var(--fo-font-sans);
    font-weight: 700;
    /* Maquette : Gotham 48/56 (même compensation de chasse que .fo-title) */
    font-size: 43px;
    line-height: 56px;
    letter-spacing: -1.2px;
    color: var(--fo-ink);
    margin: 0 0 24px;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-hero__para {
    font-size: 18px;
    line-height: 30px;
    color: var(--fo-text);
    max-width: 541px;
    margin: 0 0 24px;
}
.fo-hero .fo-buttons {
    margin-top: 24px !important;
}
.fo-hero > .kt-row-column-wrap {
    align-items: stretch;
}
.fo-hero__media > .kt-inside-inner-col {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}
/* ⚠️ L'image est posée en ABSOLU dans son cadre : sinon une photo en portrait
   impose sa hauteur naturelle à toute la section (+230px mesurés sur la page
   Développement). Le cadre prend la hauteur de la colonne de texte, avec un
   minimum égal à la hauteur de la maquette. */
:is(.fo-page, .editor-styles-wrapper) .fo-hero__image {
    position: relative;
    flex: 1 1 auto;
    margin: 0;
    min-height: 591px;
}
:is(.fo-page, .editor-styles-wrapper) .fo-hero__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}
.fo-hero--tall .fo-hero__image {
    min-height: 758px;
}

/* Encart « 4,8/5 » : 296 de large, à 69px du haut, déborde de 52px à droite. */
.fo-hero__media > .kt-inside-inner-col > .fo-hero__rating {
    position: absolute !important;
    top: 69px;
    right: -52px;
    z-index: 3;
}
.fo-hero__rating > .kt-row-column-wrap {
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
:is(.fo-page, .editor-styles-wrapper) p.fo-hero__stars {
    display: inline-block;
    margin: 0 6px 0 0;
    font-size: 18px;
    line-height: 29px;
    letter-spacing: 1px;
    color: var(--fo-gold);
}
/* Étoiles dynamiques du mu-plugin « Note Google » ([avis_google_etoiles]).
   La demi-étoile a besoin des DEUX couleurs sur le même glyphe : l'or plein et
   l'or atténué. On découpe la moitié gauche du caractère par overflow, étoile
   par étoile — un calque sur les cinq tomberait dans une gouttière à cause du
   letter-spacing de 1px. */
:is(.fo-page, .editor-styles-wrapper) .fo-etoiles {
    display: inline-block;
    color: rgba(188, 143, 33, .28);
}
:is(.fo-page, .editor-styles-wrapper) .fo-etoiles__e {
    position: relative;
    display: inline-block;
}
:is(.fo-page, .editor-styles-wrapper) .fo-etoiles__e--pleine {
    color: var(--fo-gold);
}
:is(.fo-page, .editor-styles-wrapper) .fo-etoiles__e--demie > i {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    overflow: hidden;
    font-style: normal;
    color: var(--fo-gold);
}

:is(.fo-page, .editor-styles-wrapper) p.fo-hero__score {
    display: inline-block;
    margin: 0;
    font-family: var(--fo-font-serif);
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
    color: var(--fo-text);
}
:is(.fo-page, .editor-styles-wrapper) p.fo-hero__rating-text {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--fo-text);
}

/* Encart « Notre ambition » : fond or, 484 de large, déborde de 40px à gauche. */
.fo-hero__media > .kt-inside-inner-col > .fo-hero__ambition {
    position: absolute !important;
    left: -40px;
    bottom: 107px;
    z-index: 3;
}
.fo-hero__ambition > .kt-row-column-wrap {
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
:is(.fo-page, .editor-styles-wrapper) :is(h2, p).fo-hero__ambition-title {
    font-family: var(--fo-font-serif);
    font-weight: 700;
    font-size: 26px;
    line-height: 34px;
    color: #fff;
    margin: 0 0 6px;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-hero__ambition-text {
    font-size: 13px;
    line-height: 21px;
    letter-spacing: .5px;
    color: #fff;
    margin: 0;
}

/* ---- 4.2 Notre vision ---------------------------------------------------- */
.fo-vision .fo-title {
    margin-bottom: 20px !important;
}
:is(.fo-page, .editor-styles-wrapper) .fo-vision p.fo-text {
    margin-bottom: 30px;
}
/* Dans la maquette, « Notre engagement » suit le dernier paragraphe sans blanc */
:is(.fo-page, .editor-styles-wrapper) .fo-vision p.fo-text:has(+ p.fo-vision__footer) {
    margin-bottom: 0;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-vision__footer {
    font-size: 18px;
    line-height: 30px;
    color: var(--fo-text);
    margin: 0;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-vision__footer strong {
    color: var(--fo-gold);
}
/* Arabesque en filigrane derrière le texte (1105×479, très estompée).
   ⚠️ Posée sur le conteneur interne et non sur la rangée : les ::before/::after
   de la rangée sont réservés aux épis (.fo-epi--paire). */
.fo-vision > .kt-row-column-wrap {
    position: relative;
    z-index: 1;
}
.fo-vision > .kt-row-column-wrap::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 71px;
    width: min(1105px, 90vw);
    height: 479px;
    transform: translateX(-50%);
    background-color: var(--fo-turquoise);
    -webkit-mask-image: var(--fo-arabesque);
            mask-image: var(--fo-arabesque);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    opacity: .09;
    pointer-events: none;
    z-index: -1;
}

/* ---- 4.3 Chiffres clés --------------------------------------------------- */
:is(.fo-page, .editor-styles-wrapper) :is(h2, h3, p).fo-stat__num {
    font-family: var(--fo-font-serif);
    font-weight: 700;
    font-size: 76px;
    line-height: 76px;
    color: #fff;
    text-align: center;
    margin: 0 0 10px;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-stat__txt {
    font-size: 17px;
    line-height: 27px;
    color: #fff;
    text-align: center;
    max-width: 280px;
    margin: 0 auto;
}

/* ---- 4.4 Cartes de services ---------------------------------------------- */
.fo-card > .kt-inside-inner-col {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--fo-shadow);
}
.fo-card > .kt-inside-inner-col > * {
    margin-block: 0;
}
:is(.fo-page, .editor-styles-wrapper) .fo-card__img {
    margin: 0 !important;
}
:is(.fo-page, .editor-styles-wrapper) .fo-card__img img {
    display: block;
    width: 100%;
    height: 165px !important;
    object-fit: cover;
}
.fo-card__body {
    flex: 1 1 auto;
    display: flex;
}
.fo-card__body > .kt-inside-inner-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-card__tag {
    display: inline-block;
    background-color: var(--fo-cream);
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 19px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--fo-text);
    margin: 0 0 20px;
}
:is(.fo-page, .editor-styles-wrapper) h3.fo-card__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: -0.2px;
    color: var(--fo-ink);
    margin: 0 0 14px;
}
:is(.fo-page, .editor-styles-wrapper) h3.fo-card__title em {
    font-size: 24px;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-card__lead {
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
    color: var(--fo-text);
    margin: 0;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-card__text {
    font-size: 16px;
    line-height: 26px;
    color: var(--fo-text);
    margin: 0 0 12px;
}

/* « Voir plus… / Voir moins » : bloc natif Détails, aucun JavaScript.
   ⚠️ align-self:stretch obligatoire : dans une colonne Kadence en flex,
   tout enfant se réduit à la largeur de son contenu (vécu sur Girardeau). */
:is(.fo-page, .editor-styles-wrapper) .fo-card__plus {
    align-self: stretch;
    width: 100%;
    margin: auto 0 0 !important;
    padding: 0 0 14px;
    border: 0;
    border-bottom: 1px solid var(--fo-hairline);
    background: none;
}
:is(.fo-page, .editor-styles-wrapper) .fo-card__plus > summary {
    list-style: none;
    cursor: pointer;
    text-align: right;
    font-size: 15px;
    line-height: 24px;
    color: var(--fo-gold);
}
.fo-card__plus > summary::-webkit-details-marker {
    display: none;
}
.fo-card__plus > summary::after {
    content: "Voir plus\2026";
    text-decoration: underline;
}
.fo-card__plus[open] > summary::after {
    content: "Voir moins";
}
:is(.fo-page, .editor-styles-wrapper) .fo-card__plus > :not(summary) {
    font-size: 15px;
    line-height: 24px;
    color: var(--fo-text);
    text-align: left;
}
:is(.fo-page, .editor-styles-wrapper) .fo-card__plus p {
    font-family: var(--fo-font-sans);
    margin: 0 0 10px;
}
:is(.fo-page, .editor-styles-wrapper) .fo-card__plus :is(h3, h4) {
    font-family: var(--fo-font-sans);
    font-size: 15px;
    font-weight: 700;
    line-height: 24px;
    text-transform: none;
    color: var(--fo-text);
    margin: 12px 0 6px;
}
.fo-card .fo-buttons {
    margin-top: 14px !important;
}

/* ---- 4.5 Le regard de nos experts (photo en fond) ------------------------ */
.fo-experts {
    overflow: hidden;
}
.fo-experts > .kt-row-column-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .45) 45%, rgba(0, 0, 0, .12) 80%);
}
.fo-experts .wp-block-kadence-column {
    position: relative;
    z-index: 1;
}
.fo-experts__col {
    margin-left: 0 !important;
    margin-right: auto !important;
}
:is(.fo-page, .editor-styles-wrapper) .fo-experts h2.fo-title {
    font-size: 37px;
    line-height: 46px;
    letter-spacing: -0.8px;
    margin-bottom: 21px;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-experts__quote {
    font-size: 18px;
    line-height: 30px;
    color: #fff;
    margin: 0;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-experts__person {
    font-family: var(--fo-font-serif);
    font-style: italic;
    font-weight: 700;
    font-size: 18px;
    line-height: 30px;
    color: #fff;
    margin: 0;
}
/* Épi blanc à droite du texte (160×329) */
.fo-epi--experts::after {
    left: 50%;
    top: 41px;
    width: 160px;
    height: 329px;
    background-color: #fff;
    -webkit-mask-image: var(--fo-epi-experts);
            mask-image: var(--fo-epi-experts);
    z-index: 1;
}

/* ---- 4.6 Nos valeurs (cartes turquoise) ---------------------------------- */
.fo-values-intro .wp-block-kadence-column {
    margin-left: 0 !important;
}
.fo-value > .kt-inside-inner-col {
    height: 100%;
    min-height: 218px;
    border-radius: 6px;
}
:is(.fo-page, .editor-styles-wrapper) :is(h3, p).fo-value__title {
    font-family: var(--fo-font-serif);
    font-weight: 700;
    font-size: 32px;
    line-height: 36px;
    letter-spacing: -0.2px;
    text-align: center;
    color: #fff;
    margin: 0 0 12px;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-value__text {
    font-size: 15px;
    line-height: 24px;
    color: #fff;
    margin: 0;
}
/* Arabesques qui dépassent derrière la 1re et la 4e carte (120×113) */
.fo-values::before,
.fo-values::after {
    content: "";
    position: absolute;
    top: 54px;
    width: 120px;
    height: 113px;
    background-color: var(--fo-turquoise);
    -webkit-mask-image: var(--fo-arabesque);
            mask-image: var(--fo-arabesque);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    pointer-events: none;
    z-index: 0;
}
.fo-values::before {
    left: calc(50% - 670px);
}
.fo-values::after {
    right: calc(50% - 672px);
}
.fo-values > .kt-row-column-wrap {
    position: relative;
    z-index: 1;
}

/* ---- 4.7 Pourquoi choisir (bandeau turquoise, étapes 01-04) --------------- */
.fo-how > .kt-row-column-wrap {
    align-items: start;
}
/* ⚠️ Pas d'épinglage (position: sticky) sur cette section, contrairement à
   Girardeau : la maquette Fouché n'en prévoit pas, et les deux colonnes font
   ici la même hauteur (553 px contre 564) — il n'y aurait que 11 px de course,
   donc aucun effet visible. Mesuré le 21/09/2026. */
.fo-how > .kt-row-column-wrap > .fo-how__intro {
    align-self: start;
}
/* Recette 22/09 : l'espace sous le titre était trop grand et l'arabesque de la
   photo recouvrait le paragraphe d'introduction. */
.fo-how .fo-title {
    margin-bottom: 28px !important;
}
:is(.fo-page, .editor-styles-wrapper) .fo-how__intro .fo-how__image {
    margin-top: 62px !important;
}
:is(.fo-page, .editor-styles-wrapper) .fo-how__image {
    position: relative;
    margin: 0 !important;
}
:is(.fo-page, .editor-styles-wrapper) .fo-how__image img {
    display: block;
    width: 100%;
    height: 250px;
    object-fit: cover;
}
/* Arabesques blanches au-dessus et au-dessous de la photo (215×100) */
:is(.fo-page, .editor-styles-wrapper) .fo-how__image::before,
:is(.fo-page, .editor-styles-wrapper) .fo-how__image::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 215px;
    height: 50px;
    transform: translateX(-50%);
    background-color: #fff;
    -webkit-mask-image: var(--fo-arabesque);
            mask-image: var(--fo-arabesque);
    -webkit-mask-size: 100% 200%;
            mask-size: 100% 200%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    pointer-events: none;
}
:is(.fo-page, .editor-styles-wrapper) .fo-how__image::before {
    top: -49px;
    -webkit-mask-position: top;
            mask-position: top;
}
:is(.fo-page, .editor-styles-wrapper) .fo-how__image::after {
    bottom: -49px;
    -webkit-mask-position: bottom;
            mask-position: bottom;
}

.fo-step > .kt-row-column-wrap {
    grid-template-columns: 72px 1fr !important;
    column-gap: 18px !important;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-step__num {
    position: relative;
    display: inline-block;
    font-family: var(--fo-font-serif);
    font-weight: 700;
    font-size: 52px;
    line-height: 52px;
    color: #fff;
    margin: 0;
}
/* Trait vertical entre deux numéros */
.fo-step:not(:last-of-type) p.fo-step__num::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% + 20px);
    width: 1px;
    height: 44px;
    background-color: rgba(255, 255, 255, .8);
}
:is(.fo-page, .editor-styles-wrapper) h3.fo-step__title {
    font-family: var(--fo-font-serif);
    font-weight: 700;
    font-size: 21px;
    line-height: 23px;
    letter-spacing: -0.2px;
    color: #fff;
    margin: 6px 0 8px;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-step__text {
    font-size: 15px;
    line-height: 24px;
    max-width: 360px;
    color: rgba(255, 255, 255, .88);
    margin: 0;
}

/* ---- 4.8 La parole aux artisans ------------------------------------------ */
/* Épi couché à droite du titre (254×123) */
.fo-epi--titre .fo-title {
    position: relative;
    display: inline-block;
}
.fo-epi--titre .fo-title::after {
    content: "";
    position: absolute;
    /* Retour Perrine 24/09 : l'épi touchait le point final du titre
       (il démarrait 15px AVANT la fin) → décalé de 34px après le titre. */
    left: calc(100% + 34px);
    top: -46px;
    width: 254px;
    height: 123px;
    background-color: var(--fo-gold);
    -webkit-mask-image: var(--fo-epi-titre);
            mask-image: var(--fo-epi-titre);
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    pointer-events: none;
}
@media (max-width: 767px) {
    .fo-epi--titre .fo-title::after {
        display: none;
    }
}

.fo-quote > .kt-inside-inner-col {
    height: 100%;
    min-height: 274px;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    box-shadow: var(--fo-shadow);
}
.fo-quote > .kt-inside-inner-col::before {
    content: "\201C";
    display: block;
    font-family: var(--fo-font-serif);
    font-size: 48px;
    line-height: 24px;
    height: 24px;
    color: var(--fo-turquoise);
}
:is(.fo-page, .editor-styles-wrapper) p.fo-quote__text {
    font-family: var(--fo-font-serif);
    font-style: italic;
    font-weight: 700;
    font-size: 17px;
    line-height: 30px;
    color: var(--fo-text);
    margin: 0 0 18px;
}
.fo-quote__author {
    margin-top: auto;
}
.fo-quote__author > .kt-inside-inner-col {
    display: grid;
    grid-template-columns: 46px 1fr;
    grid-template-rows: auto auto;
    column-gap: 13px !important;
    align-items: center;
}
:is(.fo-page, .editor-styles-wrapper) :is(.fo-quote__avatar, p.fo-quote__initials) {
    grid-row: 1 / span 2;
    margin: 0;
}
:is(.fo-page, .editor-styles-wrapper) .fo-quote__avatar img {
    display: block;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-quote__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: #F7F0DE;
    font-family: var(--fo-font-serif);
    font-weight: 700;
    font-size: 17px;
    color: var(--fo-gold);
}
:is(.fo-page, .editor-styles-wrapper) p.fo-quote__who {
    align-self: end;
    font-size: 15px;
    font-weight: 700;
    line-height: 24px;
    color: var(--fo-text);
    margin: 0;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-quote__post {
    align-self: start;
    font-size: 13px;
    line-height: 21px;
    color: var(--fo-text);
    margin: 0;
}

/* ---- 4.9 Une équipe à vos côtés (texte + photo pleine hauteur) ----------- */
.fo-cta > .kt-row-column-wrap {
    align-items: stretch;
}
.fo-cta__panel > .kt-inside-inner-col {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
:is(.fo-page, .editor-styles-wrapper) .fo-cta__media,
:is(.fo-page, .editor-styles-wrapper) .fo-cta__media > .kt-inside-inner-col,
:is(.fo-page, .editor-styles-wrapper) .fo-cta__media figure {
    height: 100%;
    margin: 0;
}
:is(.fo-page, .editor-styles-wrapper) .fo-cta__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 451px;
    object-fit: cover;
}

/* ---- 4.10 Partenaires (bandeau turquoise, cartes blanches) --------------- */
:is(.fo-page, .editor-styles-wrapper) .fo-partners-intro p.fo-eyebrow {
    color: #fff;
    text-align: center;
    margin: 0;
}
.fo-partner > .kt-inside-inner-col {
    height: 100%;
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
:is(.fo-page, .editor-styles-wrapper) .fo-partner figure {
    margin: 0;
}
:is(.fo-page, .editor-styles-wrapper) .fo-partner img {
    display: block;
    max-width: 126px;
    max-height: 58px;
    width: auto;
    height: auto;
    margin-inline: auto;
    object-fit: contain;
}

/* ---- 4.11 Contact -------------------------------------------------------- */
.fo-contact {
    overflow: hidden;
}
:is(.fo-page, .editor-styles-wrapper) .fo-contact p.fo-text {
    max-width: 470px;
}
.fo-contact__item {
    margin-top: 18px;
}
.fo-contact__item > .kt-row-column-wrap {
    grid-template-columns: 46px 1fr !important;
    column-gap: 14px !important;
    row-gap: 0 !important;
    align-items: center;
}
.fo-contact__icon > .kt-inside-inner-col {
    width: 46px;
    height: 46px;
    border-radius: 4px;
    background-color: #fff;
    position: relative;
}
/* Pictogramme dessiné en masque CSS (un <svg> dans un bloc HTML serait
   supprimé par kses à l'enregistrement — vécu sur Girardeau). */
.fo-contact__icon > .kt-inside-inner-col::before {
    content: "";
    position: absolute;
    inset: 11px;
    background-color: var(--fo-gold);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
}
.fo-contact__item--tel .fo-contact__icon > .kt-inside-inner-col::before {
    -webkit-mask-image: url(../img/fo2026/icone-telephone.svg);
            mask-image: url(../img/fo2026/icone-telephone.svg);
}
.fo-contact__item--mail .fo-contact__icon > .kt-inside-inner-col::before {
    -webkit-mask-image: url(../img/fo2026/icone-mail.svg);
            mask-image: url(../img/fo2026/icone-mail.svg);
}
.fo-contact__item--adresse .fo-contact__icon > .kt-inside-inner-col::before {
    -webkit-mask-image: url(../img/fo2026/icone-adresse.svg);
            mask-image: url(../img/fo2026/icone-adresse.svg);
}
:is(.fo-page, .editor-styles-wrapper) p.fo-contact__label {
    font-size: 13px;
    line-height: 21px;
    color: var(--fo-text);
    margin: 0;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-contact__value {
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
    color: var(--fo-text);
    margin: 0;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-contact__value a {
    color: inherit;
    text-decoration: none;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-contact__value a:hover {
    color: var(--fo-turquoise);
}

/* Épi à cheval sur le bord droit du formulaire (326×414).
   Retour Perrine 24/09 : il doit passer DERRIÈRE la carte blanche → z-index 0,
   le contenu de la rangée étant à 1 (règle .fo-orn > .kt-row-column-wrap). */
.fo-epi--form::after {
    left: calc(50% + 442px);
    top: 327px;
    width: 326px;
    height: 414px;
    background-color: var(--fo-gold);
    -webkit-mask-image: var(--fo-epi-contact);
            mask-image: var(--fo-epi-contact);
    z-index: 0;
}
@media (max-width: 1200px) {
    .fo-epi--form::after {
        display: none;
    }
}

/* Formulaire Gravity Forms dans sa carte blanche */
.fo-form > .kt-inside-inner-col {
    border-radius: 12px;
    box-shadow: var(--fo-shadow);
}
.fo-form .gform_wrapper {
    margin: 0 !important;
}
.fo-form .gform_fields {
    row-gap: 16px !important;
    column-gap: 16px !important;
}
.fo-form .gfield_label,
.fo-form .gform-field-label:not(.gform-field-label--type-inline) {
    font-family: var(--fo-font-sans) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 22px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: var(--fo-text) !important;
    margin-bottom: 8px !important;
}
.fo-form .gfield_required,
.fo-form .gform_required_legend {
    display: none !important;
}
.fo-form .gfield input:not([type="checkbox"]):not([type="radio"]),
.fo-form .ginput_container select,
.fo-form textarea {
    width: 100% !important;
    border: 1px solid rgba(67, 170, 165, .45) !important;
    border-radius: 4px !important;
    background-color: var(--fo-input-bg) !important;
    font-family: var(--fo-font-sans) !important;
    font-size: 15px !important;
    color: var(--fo-text) !important;
    box-shadow: none !important;
}
.fo-form .gfield input:not([type="checkbox"]):not([type="radio"]) {
    height: 46px !important;
    padding: 0 16px !important;
}
.fo-form .ginput_container select {
    height: 50px !important;
    padding: 0 18px !important;
}
.fo-form textarea {
    min-height: 104px !important;
    height: 104px !important;
    padding: 14px 16px !important;
}
.fo-form .gfield input::placeholder,
.fo-form textarea::placeholder {
    color: #757575 !important;
    opacity: 1 !important;
}
.fo-form .gfield_consent_label,
.fo-form .gchoice label {
    font-family: var(--fo-font-sans) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 21px !important;
    text-transform: none !important;
    color: var(--fo-text) !important;
}
.fo-form .charleft,
.fo-form .ginput_counter {
    display: none !important;
}
.fo-form .gform_footer,
.fo-form .gform-footer {
    margin-top: 20px !important;
    padding: 0 !important;
}
.fo-form .gform_button,
.fo-form .gform_footer input[type="submit"],
.fo-form .gform-footer input[type="submit"] {
    width: 100% !important;
    height: auto !important;
    padding: 14px 22px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: var(--fo-gold) !important;
    color: #fff !important;
    font-family: var(--fo-font-sans) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 26px !important;
    text-transform: none !important;
    cursor: pointer !important;
}
.fo-form .gform_button:hover,
.fo-form .gform_footer input[type="submit"]:hover {
    background: var(--fo-gold-dark) !important;
}

/* ============================================================================
   5. PAGES DE SERVICE (gabarit « Page Service V2 »)
   ----------------------------------------------------------------------------
   Réutilisent les composants de la landing (hero, chiffres, témoignages,
   équipe, contact). Ne sont décrits ici que les blocs propres au gabarit.
   ========================================================================== */

/* ---- 5.1 Hero de service : un seul bouton, photo 522 × 591, épi à droite -- */
.fo-epi--hero-service::after {
    left: calc(50% + 544px);
    top: 120px;
    width: 152px;
    height: 466px;
    background-color: var(--fo-gold);
    -webkit-mask-image: url(../img/fo2026/epi-hero-service.svg);
            mask-image: url(../img/fo2026/epi-hero-service.svg);
}
/* Masqué quand il n'y a plus de marge à droite de la photo */
@media (max-width: 1279px) {
    .fo-epi--hero-service::after {
        display: none;
    }
}

/* ---- 5.2 Sections image + texte (démarche, méthode, réseau) --------------- */
.fo-split > .kt-row-column-wrap {
    align-items: stretch;
}
.fo-split > .kt-row-column-wrap > .wp-block-kadence-column {
    align-self: center;
}
.fo-split__media {
    align-self: stretch !important;
}
.fo-split__media > .kt-inside-inner-col {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}
:is(.fo-page, .editor-styles-wrapper) .fo-split__image {
    position: relative;
    flex: 1 1 auto;
    margin: 0 !important;
    min-height: 480px;
}
/* Même principe que .fo-hero__image : image en absolu dans son cadre */
:is(.fo-page, .editor-styles-wrapper) .fo-split__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}
.fo-methode .fo-split__image {
    min-height: 539px;
}
.fo-reseau .fo-split__image {
    min-height: 482px;
}
/* Encart « 4,8/5 » posé sur la photo de la section démarche */
.fo-split__media > .kt-inside-inner-col > .fo-hero__rating {
    position: absolute !important;
    top: 70px;
    right: -52px;
    z-index: 3;
}
/* Encart blanc « Notre point fort » (section méthode) */
.fo-split__media > .kt-inside-inner-col > .fo-point-fort {
    position: absolute !important;
    left: -40px;
    bottom: 36px;
    z-index: 3;
}
.fo-point-fort > .kt-row-column-wrap {
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
:is(.fo-page, .editor-styles-wrapper) p.fo-point-fort__title {
    font-family: var(--fo-font-serif);
    font-weight: 700;
    font-size: 26px;
    line-height: 34px;
    color: var(--fo-gold);
    margin: 0 0 6px;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-point-fort__text {
    font-size: 13px;
    line-height: 21px;
    letter-spacing: .5px;
    color: var(--fo-text);
    margin: 0;
}
/* Petit épi blanc à droite de l'encart (128 × 191) */
.fo-split__media > .kt-inside-inner-col::after {
    content: none;
}
.fo-epi--point-fort .fo-split__media > .kt-inside-inner-col::after {
    content: "";
    position: absolute;
    left: 394px;
    top: 329px;
    width: 128px;
    height: 191px;
    background-color: #fff;
    -webkit-mask: url(../img/fo2026/epi-point-fort.svg) center / contain no-repeat;
            mask: url(../img/fo2026/epi-point-fort.svg) center / contain no-repeat;
    pointer-events: none;
    z-index: 4;
}
.fo-split .fo-buttons {
    margin-top: 8px !important;
}

/* ---- 5.3 Chiffres du réseau (4 colonnes + titre) ------------------------- */
:is(.fo-page, .editor-styles-wrapper) h2.fo-stats__title {
    font-size: 30px;
    font-weight: 700;
    line-height: 50px;
    letter-spacing: -0.5px;
    color: #fff;
    text-align: center;
    margin: 0;
}

/* ---- 5.4 Vos interlocuteurs (fiches expertes) ---------------------------- */
.fo-expert > .kt-inside-inner-col {
    height: 100%;
    border-radius: 6px;
    box-shadow: var(--fo-shadow);
}
.fo-expert__head > .kt-row-column-wrap {
    grid-template-columns: 150px minmax(0, 1fr) !important;
    column-gap: 24px !important;
    align-items: center;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-expert__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    margin: 0;
    border-radius: 50%;
    background-color: #F7F0DE;
    font-family: var(--fo-font-serif);
    font-weight: 700;
    font-size: 59px;
    line-height: 1;
    color: var(--fo-gold);
}
:is(.fo-page, .editor-styles-wrapper) .fo-expert__photo {
    margin: 0 !important;
}
:is(.fo-page, .editor-styles-wrapper) .fo-expert__photo img {
    display: block;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-expert__name {
    font-size: 26px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: -0.5px;
    color: var(--fo-text);
    margin: 0;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-expert__job {
    font-family: var(--fo-font-serif);
    font-weight: 700;
    font-size: 22px;
    line-height: 29px;
    letter-spacing: -0.3px;
    color: var(--fo-gold);
    margin: 0 0 4px;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-expert__bio {
    font-size: 14px;
    line-height: 22px;
    color: var(--fo-text);
    margin: 0;
}
.fo-expert__facts {
    margin: 24px 0 20px;
}
.fo-expert__fact > .kt-row-column-wrap {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    column-gap: 18px !important;
    padding-bottom: 12px !important;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-expert__fact-key {
    font-family: var(--fo-font-serif);
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: var(--fo-text);
    margin: 0;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-expert__fact-title {
    font-family: var(--fo-font-serif);
    font-weight: 700;
    font-size: 19px;
    line-height: 23px;
    color: var(--fo-text);
    margin: 0 0 4px;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-expert__fact-text {
    font-size: 15px;
    line-height: 24px;
    color: var(--fo-text);
    margin: 0;
}
.fo-expert__quote > .kt-inside-inner-col {
    border: 1px solid rgba(67, 170, 165, .45);
    border-radius: 4px;
}
.fo-expert__quote > .kt-inside-inner-col::before {
    content: "\201C";
    display: block;
    height: 20px;
    font-family: var(--fo-font-serif);
    font-size: 48px;
    line-height: 44px;
    color: var(--fo-gold);
}
:is(.fo-page, .editor-styles-wrapper) p.fo-expert__quote-text {
    font-family: var(--fo-font-serif);
    font-style: italic;
    font-weight: 700;
    font-size: 17px;
    line-height: 30px;
    color: var(--fo-text);
    margin: 0;
}

/* ---- 5.5 Les tendances (cartes image + texte) ----------------------------- */
.fo-trends-intro .wp-block-kadence-column {
    margin-left: 0 !important;
}
/* Titre sur 800, chapô sur 680 (maquette) */
:is(.fo-page, .editor-styles-wrapper) .fo-trends-intro p.fo-text {
    max-width: 680px;
}
.fo-trend > .kt-inside-inner-col {
    height: 100%;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--fo-shadow);
}
:is(.fo-page, .editor-styles-wrapper) .fo-trend__img {
    margin: 0 !important;
}
:is(.fo-page, .editor-styles-wrapper) .fo-trend__img img {
    display: block;
    width: 100%;
    height: 230px;
    object-fit: cover;
}
:is(.fo-page, .editor-styles-wrapper) h3.fo-trend__title {
    font-family: var(--fo-font-serif);
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: var(--fo-gold);
    margin: 0 0 14px;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-trend__text {
    font-size: 16px;
    line-height: 26px;
    color: var(--fo-text);
    margin: 0;
}

/* ---- 5.6 Engagement RSE (bandeau turquoise, photo encadrée d'arabesques) -- */
:is(.fo-page, .editor-styles-wrapper) .fo-rse__image {
    position: relative;
    margin: 0 !important;
}
:is(.fo-page, .editor-styles-wrapper) .fo-rse__image img {
    display: block;
    width: 100%;
    height: 540px;
    object-fit: cover;
    border-radius: 12px;
}
:is(.fo-page, .editor-styles-wrapper) .fo-rse__image::before,
:is(.fo-page, .editor-styles-wrapper) .fo-rse__image::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 215px;
    height: 50px;
    transform: translateX(-50%);
    background-color: #fff;
    -webkit-mask-image: var(--fo-arabesque);
            mask-image: var(--fo-arabesque);
    -webkit-mask-size: 100% 200%;
            mask-size: 100% 200%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    pointer-events: none;
}
:is(.fo-page, .editor-styles-wrapper) .fo-rse__image::before {
    top: -49px;
    -webkit-mask-position: top;
            mask-position: top;
}
:is(.fo-page, .editor-styles-wrapper) .fo-rse__image::after {
    bottom: -49px;
    -webkit-mask-position: bottom;
            mask-position: bottom;
}

@media (max-width: 1024px) {
    .fo-split__media > .kt-inside-inner-col > .fo-hero__rating {
        right: 12px;
    }
    .fo-split__media > .kt-inside-inner-col > .fo-point-fort {
        left: 12px;
    }
    .fo-epi--point-fort .fo-split__media > .kt-inside-inner-col::after {
        display: none;
    }
    .fo-stats--4 > .kt-row-column-wrap,
    .fo-trends > .kt-row-column-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        row-gap: 32px !important;
    }
    .fo-experts-list > .kt-row-column-wrap {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 24px !important;
    }
}
@media (max-width: 767px) {
    :is(.fo-page, .editor-styles-wrapper) .fo-split__image {
        min-height: 320px;
    }
    .fo-split__media > .kt-inside-inner-col > .fo-point-fort {
        left: 10px;
        right: 10px;
        bottom: 14px;
    }
    .fo-trends > .kt-row-column-wrap {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .fo-expert__head > .kt-row-column-wrap {
        grid-template-columns: 96px minmax(0, 1fr) !important;
        column-gap: 16px !important;
    }
    :is(.fo-page, .editor-styles-wrapper) p.fo-expert__initials,
    :is(.fo-page, .editor-styles-wrapper) .fo-expert__photo img {
        width: 96px;
        height: 96px;
        font-size: 38px;
    }
    :is(.fo-page, .editor-styles-wrapper) .fo-rse__image img {
        height: 320px;
    }
}

/* ============================================================================
   6. PAGES INSTALLATION ET FORMATION
   ----------------------------------------------------------------------------
   Structure reprise des pages validées de la Minoterie Girardeau (services
   communs au groupe : A.C.T.E, Atelier M'Alice), habillée aux couleurs Fouché
   avec les composants ci-dessus. Seuls les blocs absents du gabarit V2 sont
   décrits ici.
   ========================================================================== */

/* ---- 6.1 Sous-titre du hero -------------------------------------------- */
:is(.fo-page, .editor-styles-wrapper) h2.fo-hero__subtitle {
    font-family: var(--fo-font-serif);
    font-weight: 700;
    font-size: 26px;
    line-height: 34px;
    letter-spacing: 0;
    color: var(--fo-gold);
    margin: -8px 0 22px;
}

/* ---- 6.2 Trois cartes (parcours, domaines de formation) ------------------ */
:is(.fo-page, .editor-styles-wrapper) .fo-services--3 .fo-card__img img {
    height: 230px !important;
}
:is(.fo-page, .editor-styles-wrapper) .fo-services--3 p.fo-card__lead {
    margin-bottom: 12px;
}
.fo-services--3 .fo-card__body .fo-buttons {
    margin-top: auto !important;
    padding-top: 10px;
}

/* Rangée de services à UNE seule carte (carrefour, après le retrait de la carte
   « Communication » le 24/09) : demi-largeur et centrée, comme la 3e carte de la
   maquette. 573px = (1170 - 24 de gouttière) / 2. */
.fo-page .fo-services--seule > .kt-row-column-wrap {
    /* !important : Kadence pose sa propre max-width (1240px) via la CSS de bloc,
       plus spécifique que cette classe. 608 = (1240 - 24 de gouttière) / 2. */
    max-width: 608px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
@media (max-width: 1024px) {
    .fo-page .fo-services--seule > .kt-row-column-wrap {
        max-width: none !important;
    }
}

/* ---- 6.3 Bandeau méthode : texte d'introduction clair + bouton ---------- */
.fo-how .fo-buttons {
    margin-top: 10px !important;
}
:is(.fo-page, .editor-styles-wrapper) .fo-how p.fo-text {
    color: #fff;
    margin-bottom: 32px;
}

/* ---- 6.4 Parcours en 10 étapes (2 rangées de 5) --------------------------- */
.fo-parcours > .kt-row-column-wrap {
    row-gap: 22px !important;
}
.fo-parcours-step > .kt-inside-inner-col {
    height: 100%;
    border-radius: 6px;
    border-top: 3px solid var(--fo-turquoise);
    box-shadow: var(--fo-shadow);
}
:is(.fo-page, .editor-styles-wrapper) p.fo-parcours-step__num {
    font-family: var(--fo-font-serif);
    font-weight: 700;
    font-size: 40px;
    line-height: 44px;
    color: var(--fo-gold);
    margin: 0 0 10px;
}
:is(.fo-page, .editor-styles-wrapper) h3.fo-parcours-step__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    color: var(--fo-ink);
    margin: 0 0 8px;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-parcours-step__text {
    font-size: 14px;
    line-height: 22px;
    color: var(--fo-text);
    margin: 0;
}

/* ---- 6.5 Pourquoi nous (cartes à pictogramme) ---------------------------- */
.fo-why > .kt-inside-inner-col {
    height: 100%;
    border-radius: 6px;
    box-shadow: var(--fo-shadow);
}
/* Pictogramme en masque CSS, choisi par modificateur de classe sur la carte */
.fo-why > .kt-inside-inner-col::before {
    content: "";
    display: block;
    width: 52px;
    height: 52px;
    margin: 0 0 18px;
    background-color: var(--fo-turquoise);
    -webkit-mask: var(--fo-picto, none) center / contain no-repeat;
            mask: var(--fo-picto, none) center / contain no-repeat;
}
.fo-why--four { --fo-picto: url(../img/fo2026/picto-four.svg); }
.fo-why--ble { --fo-picto: url(../img/fo2026/picto-ble.svg); }
.fo-why--coeur { --fo-picto: url(../img/fo2026/picto-coeur.svg); }
:is(.fo-page, .editor-styles-wrapper) h3.fo-why__title {
    font-family: var(--fo-font-serif);
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: var(--fo-ink);
    margin: 0 0 10px;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-why__text {
    font-size: 16px;
    line-height: 26px;
    color: var(--fo-text);
    margin: 0;
}
.fo-why-cta .fo-buttons {
    justify-content: center;
}

/* ---- 6.6 Note sous les chiffres, accroche des témoignages ---------------- */
:is(.fo-page, .editor-styles-wrapper) p.fo-stats__note {
    font-size: 14px;
    font-style: italic;
    line-height: 22px;
    color: rgba(255, 255, 255, .9);
    text-align: center;
    margin: 0;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-claim {
    font-family: var(--fo-font-serif);
    font-weight: 700;
    font-size: 22px;
    line-height: 30px;
    color: var(--fo-turquoise);
    margin: -6px 0 14px;
}

/* ---- 6.7 Panneau blanc à côté d'une photo (formateurs, financement) ------ */
.fo-panel > .kt-inside-inner-col {
    border-radius: 6px;
    box-shadow: var(--fo-shadow);
}
:is(.fo-page, .editor-styles-wrapper) .fo-panel h3.fo-title {
    font-size: clamp(28px, 2.6vw, 36px);
    line-height: 42px;
}

/* ---- 6.8 Fiche experte : paragraphes de présentation --------------------- */
:is(.fo-page, .editor-styles-wrapper) .fo-expert p.fo-expert__bio + p.fo-expert__bio {
    margin-top: 10px;
}
.fo-expert__bios {
    margin: 20px 0;
}

@media (max-width: 1024px) {
    .fo-parcours > .kt-row-column-wrap {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .fo-whys > .kt-row-column-wrap,
    .fo-services--3 > .kt-row-column-wrap {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 22px !important;
    }
}
@media (max-width: 767px) {
    .fo-parcours > .kt-row-column-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 14px !important;
        row-gap: 14px !important;
    }
}

/* ============================================================================
   7. NOUVELLE PAGE D'ACCUEIL (maquette « Home Page - Bloc Services V2 »)
   ========================================================================== */

/* ---- 7.1 Hero plein écran : photo, titre Didot centré, deux épis blancs -- */
.fo-home-hero > .kt-row-column-wrap {
    position: relative;
    z-index: 1;
}
:is(.fo-page, .editor-styles-wrapper) h1.fo-home-hero__title {
    font-family: var(--fo-font-serif);
    font-weight: 700;
    font-size: 72px;
    line-height: 86px;
    letter-spacing: -0.5px;
    color: #fff;
    text-align: center;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
    margin: 0 auto 36px;
    max-width: 700px;
}
.fo-home-hero .fo-buttons {
    justify-content: center;
}
:is(.fo-page, .editor-styles-wrapper) .fo-btn--caps .wp-block-button__link {
    font-size: 14.4px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 12px 24px;
}
.fo-epi--home-hero::before,
.fo-epi--home-hero::after {
    top: 67px;
    width: 108px;
    height: 414px;
    background-color: #fff;
    z-index: 1;
}
.fo-epi--home-hero::before {
    left: calc(50% - 390px);
    -webkit-mask-image: url(../img/fo2026/epi-home-hero-gauche.svg);
            mask-image: url(../img/fo2026/epi-home-hero-gauche.svg);
}
.fo-epi--home-hero::after {
    left: calc(50% + 282px);
    -webkit-mask-image: url(../img/fo2026/epi-home-hero-droite.svg);
            mask-image: url(../img/fo2026/epi-home-hero-droite.svg);
}

/* Filet gris du site (motif .borderline du thème) */
.fo-line-grey {
    border-bottom: 7px double var(--fo-muted) !important;
    background-clip: padding-box !important;
}

/* ---- 7.2 Réassurance (4 pictos blancs) --------------------------------- */
.fo-reassurance .wp-block-kadence-column > .kt-inside-inner-col {
    text-align: center;
}
:is(.fo-page, .editor-styles-wrapper) .fo-reassurance__icon {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 82px;
    margin: 0 0 18px !important;
}
:is(.fo-page, .editor-styles-wrapper) .fo-reassurance__icon img {
    width: auto;
    max-height: 82px;
}
:is(.fo-page, .editor-styles-wrapper) h2.fo-reassurance__title {
    font-family: var(--fo-font-serif);
    font-weight: 700;
    font-size: 27px;
    line-height: 33px;
    color: #fff;
    text-align: center;
    margin: 0 0 12px;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-reassurance__text {
    font-size: 14.4px;
    line-height: 26px;
    color: #fff;
    text-align: center;
    max-width: 240px;
    margin: 0 auto;
}

/* ---- 7.3 Bandeaux photo avec carte blanche (farines, histoire) ----------- */
.fo-photo-band > .kt-row-column-wrap {
    align-items: center;
}
.fo-photo-card {
    margin-left: 0 !important;   /* Kadence centre toute colonne ayant une largeur max */
    margin-right: auto !important;
}
.fo-photo-card > .kt-inside-inner-col {
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .18);
}
:is(.fo-page, .editor-styles-wrapper) .fo-photo-card p.fo-text {
    font-size: 14px;
    line-height: 25px;
    margin-bottom: 26px;
}

/* ---- 7.4 Services (bandeau turquoise, 3 cartes courtes) ----------------- */
:is(.fo-page, .editor-styles-wrapper) .fo-home-services-intro p.fo-lead {
    color: #fff;
    max-width: none;
    margin-bottom: 10px;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-signature {
    font-family: var(--fo-font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 30px;
    line-height: 40px;
    color: #fff;
    text-align: center;
    margin: 0;
}
.fo-home-cards .fo-card__img img {
    height: 230px !important;
}
:is(.fo-page, .editor-styles-wrapper) .fo-home-cards h3.fo-card__title {
    font-size: 19px;
    line-height: 25px;
}
:is(.fo-page, .editor-styles-wrapper) .fo-home-cards p.fo-card__text {
    padding-bottom: 14px;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--fo-hairline);
    align-self: stretch;
}
.fo-home-cards .fo-card__body .fo-buttons {
    margin-top: auto !important;
}
.fo-epi--home-services::after {
    left: calc(50% + 411px);
    top: 170px;
    width: 391px;
    height: 477px;
    background-color: #fff;
    -webkit-mask-image: url(../img/fo2026/epi-home-services.svg);
            mask-image: url(../img/fo2026/epi-home-services.svg);
    z-index: 0;
}
.fo-home-services-cta .fo-buttons {
    justify-content: center;
}

/* ---- 7.5 Texte de référencement ---------------------------------------- */
:is(.fo-page, .editor-styles-wrapper) .fo-seo p.fo-seo__text {
    font-size: 16px;
    line-height: 23px;
    color: var(--fo-text);
    /* Recette Perrine : les trois paragraphes étaient collés (margin 0). */
    margin: 0 0 18px;
}
:is(.fo-page, .editor-styles-wrapper) .fo-seo p.fo-seo__text:last-child {
    margin-bottom: 0;
}

/* ---- 7.6 Qui sommes-nous (photo pleine hauteur | texte) ----------------- */
.fo-about > .kt-row-column-wrap {
    align-items: stretch;
}
:is(.fo-page, .editor-styles-wrapper) .fo-about__media,
:is(.fo-page, .editor-styles-wrapper) .fo-about__media > .kt-inside-inner-col {
    height: 100%;
}
:is(.fo-page, .editor-styles-wrapper) .fo-about__image {
    position: relative;
    height: 100%;
    min-height: 602px;
    margin: 0 !important;
}
:is(.fo-page, .editor-styles-wrapper) .fo-about__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
:is(.fo-page, .editor-styles-wrapper) .fo-about h2.fo-title {
    font-size: 40px;
    line-height: 50px;
}

/* ---- 7.7 Ce que disent nos clients (carrousel) ------------------------- */
:is(.fo-page, .editor-styles-wrapper) h2.fo-home-quotes__title {
    font-size: 36px;
    font-weight: 700;
    line-height: 47px;
    letter-spacing: -0.5px;
    color: var(--fo-gold);
    /* Aligné sur le texte du témoignage (recette Perrine : titre centré alors
       que le texte était ferré à gauche). */
    text-align: left;
    margin: 0 0 30px;
}
/* Voile crème sur la moitié gauche : la signature passait sur la photo de pains
   et devenait illisible. */
.fo-home-quotes > .kt-row-column-wrap::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 100vw;
    height: 100%;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(242, 239, 233, .985) 0%, rgba(242, 239, 233, .97) 58%, rgba(242, 239, 233, .55) 70%, rgba(242, 239, 233, 0) 82%);
}
.fo-home-quotes > .kt-row-column-wrap {
    position: relative;
}
.fo-home-quotes__col {
    margin-left: 174px !important;
    margin-right: auto !important;
}
.fo-home-quotes__col > .kt-inside-inner-col {
    position: relative;
    z-index: 1;
}
.fo-home-quote > .kt-row-column-wrap {
    grid-template-columns: 150px minmax(0, 1fr) !important;
    column-gap: 27px !important;
    align-items: center;
}
:is(.fo-page, .editor-styles-wrapper) .fo-home-quote__photo {
    margin: 0 !important;
}
:is(.fo-page, .editor-styles-wrapper) .fo-home-quote__photo img {
    display: block;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-home-quote__text {
    font-size: 14.4px;
    line-height: 26px;
    color: var(--fo-text);
    margin: 0 0 14px;
}
:is(.fo-page, .editor-styles-wrapper) p.fo-home-quote__who {
    font-family: var(--fo-font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: var(--fo-muted);
    margin: 0;
}
.fo-epi--home-quotes::before {
    left: calc(50% - 571px);
    top: 49px;
    width: 326px;
    height: 414px;
    background-color: var(--fo-gold);
    -webkit-mask-image: url(../img/fo2026/epi-home-temoignages.svg);
            mask-image: url(../img/fo2026/epi-home-temoignages.svg);
    z-index: 0;
}
/* Carrousel : sur le FRONT uniquement (dans l'éditeur, les cartes restent
   empilées pour rester modifiables). Le défilement est natif (scroll-snap) ;
   assets/js/fo-2026.js ajoute les puces et le défilement automatique.
   Deux variantes : une diapositive par vue (témoignages de l'accueil) ou
   3 cartes par vue (blocs « La parole aux artisans » de plus de 3 témoignages). */
.fo-page .fo-carousel > .kt-row-column-wrap {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.fo-page .fo-carousel > .kt-row-column-wrap::-webkit-scrollbar {
    display: none;
}
.fo-page .fo-carousel > .kt-row-column-wrap > .wp-block-kadence-column {
    flex: 0 0 100%;
    scroll-snap-align: start;
}
/* Variante « cartes » : 3 par vue en desktop, 2 en tablette, 1 en mobile.
   ⚠️ Une rangée Kadence est plafonnée à 6 colonnes : au-delà de 6 témoignages,
   il faut ajouter une seconde rangée. */
.fo-page .fo-carousel--cards > .kt-row-column-wrap {
    gap: 24px !important;
    padding-bottom: 4px;
}
.fo-page .fo-carousel--cards > .kt-row-column-wrap > .wp-block-kadence-column {
    flex: 0 0 calc((100% - 48px) / 3);
}
@media (max-width: 1024px) {
    .fo-page .fo-carousel--cards > .kt-row-column-wrap > .wp-block-kadence-column {
        flex: 0 0 calc((100% - 24px) / 2);
    }
}
@media (max-width: 767px) {
    .fo-page .fo-carousel--cards > .kt-row-column-wrap > .wp-block-kadence-column {
        flex: 0 0 100%;
    }
}
/* Les puces ne servent que si le contenu dépasse la vue (classe posée par le JS). */
.fo-carousel:not(.fo-carousel--actif) .fo-carousel__dots {
    display: none;
}
.fo-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 26px;
}
.fo-carousel__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 1px solid var(--fo-gold);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}
.fo-carousel__dot[aria-current="true"] {
    background: var(--fo-gold);
}

/* ---- 7.8 Nos dernières actualités --------------------------------------- */
.fo-news > .kt-row-column-wrap {
    align-items: stretch;
}
.fo-news__intro > .kt-inside-inner-col {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
/* Photo en fond de la colonne de gauche : bloc Image posé en absolu, le titre
   passe au-dessus. La photo reste remplaçable dans l'éditeur. */
.fo-news__intro > .kt-inside-inner-col {
    position: relative;
    min-height: 602px;
    padding: 115px 58px 40px 40px;
}
:is(.fo-page, .editor-styles-wrapper) .fo-news__image {
    position: absolute !important;
    inset: 0;
    margin: 0 !important;
    z-index: 0;
}
:is(.fo-page, .editor-styles-wrapper) .fo-news__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
:is(.fo-page, .editor-styles-wrapper) h2.fo-news__title {
    position: relative;
    z-index: 1;
    font-size: 38px;
    font-weight: 700;
    line-height: 47px;
    letter-spacing: -0.5px;
    color: #fff;
    text-align: right;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .35);
    margin: 0;
}
:is(.fo-page, .editor-styles-wrapper) h2.fo-news__title a {
    color: inherit;
    text-decoration: none;
}
/* Dernier article : bloc natif « Derniers articles » réordonné en CSS
   (date, titre, image) pour suivre la maquette. */
.fo-news__post .wp-block-latest-posts {
    margin: 0;
    padding: 0;
    list-style: none;
}
.fo-news__post .wp-block-latest-posts li {
    display: flex;
    flex-direction: column;
    margin: 0;
}
.fo-news__post .wp-block-latest-posts__post-date {
    order: 1;
    font-family: var(--fo-font-sans);
    font-size: 14.4px;
    font-weight: 700;
    line-height: 26px;
    color: #fff;
}
.fo-news__post a.wp-block-latest-posts__post-title {
    order: 2;
    font-family: var(--fo-font-serif);
    font-weight: 700;
    font-size: 23px;
    line-height: 28px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    max-width: 500px;
    margin: 0 0 22px;
}
.fo-news__post .wp-block-latest-posts__featured-image {
    order: 3;
    margin: 0 0 18px;
}
.fo-news__post .wp-block-latest-posts__featured-image img {
    display: block;
    width: 317px;
    height: 227px;
    object-fit: cover;
    border-radius: 8px;
}
:is(.fo-page, .editor-styles-wrapper) .fo-news__post p.fo-news__more a {
    font-size: 13px;
    font-weight: 300;
    color: #fff;
    text-decoration: underline;
}
.fo-epi--home-news::after {
    left: calc(50% + 428px);
    top: 106px;
    width: 364px;
    height: 544px;
    background-color: #fff;
    -webkit-mask-image: url(../img/fo2026/epi-home-actus.svg);
            mask-image: url(../img/fo2026/epi-home-actus.svg);
    z-index: 2;
}

@media (max-width: 1024px) {
    :is(.fo-page, .editor-styles-wrapper) h1.fo-home-hero__title {
        font-size: 54px;
        line-height: 64px;
    }
    .fo-epi--home-hero::before,
    .fo-epi--home-hero::after,
    .fo-epi--home-services::after,
    .fo-epi--home-news::after {
        display: none;
    }
    .fo-reassurance > .kt-row-column-wrap,
    .fo-home-cards > .kt-row-column-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        row-gap: 36px !important;
    }
    /* Qui sommes-nous : le retrait gauche de 184px (attribut Kadence calé sur
       la photo desktop) écrase la colonne une fois les colonnes empilées. */
    .fo-about > .kt-row-column-wrap {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .fo-about > .kt-row-column-wrap > .wp-block-kadence-column:last-child > .kt-inside-inner-col {
        padding: 56px 32px !important;
    }
    /* Témoignages : la photo de pains passe sous le texte une fois la colonne
       élargie → voile crème pour garder le texte lisible. */
    .fo-home-quotes::before {
        display: block !important;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(242, 239, 233, .88);
        -webkit-mask-image: none;
                mask-image: none;
    }
    .fo-news > .kt-row-column-wrap {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .fo-news__post > .kt-inside-inner-col {
        padding: 48px 32px !important;
    }
}
@media (max-width: 767px) {
    :is(.fo-page, .editor-styles-wrapper) h1.fo-home-hero__title {
        font-size: 40px;
        line-height: 48px;
    }
    .fo-home-cards > .kt-row-column-wrap {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .fo-home-quote > .kt-row-column-wrap {
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center;
        text-align: center;
    }
    :is(.fo-page, .editor-styles-wrapper) h2.fo-news__title {
        text-align: center;
    }
    .fo-home-quotes__col {
        margin-left: 0 !important;
    }
    .fo-news__intro > .kt-inside-inner-col {
        min-height: 320px;
    }
    :is(.fo-page, .editor-styles-wrapper) .fo-about__image {
        min-height: 320px;
    }
}

/* ---- 8. PIED DE PAGE (pages 2026 uniquement) ----------------------------
   La maquette dessine le pied de page dans la typographie 2026, alors que le
   thème utilise « AW Conqueror Carved » et « Libre Baskerville ». On recolore
   et retypographie SEULEMENT sur ces pages ; le reste du site est inchangé.
   ⚠️ À étendre à tout le site le jour où la maquette 2026 devient la charte. */
.page-template-tpl_page-2026 .site-footer,
.page-template-tpl_page-2026 .site-footer a,
.page-template-tpl_page-2026 .site-footer p,
.page-template-tpl_page-2026 .site-footer li,
.page-template-tpl_page-2026 .site-footer .h3 {
    font-family: var(--fo-font-sans);
}
.page-template-tpl_page-2026 .site-footer .secondtitle {
    font-family: var(--fo-font-sans);
    font-weight: 700;
    font-size: 38.9px;
    line-height: 47px;
    color: var(--fo-turquoise);
}
.page-template-tpl_page-2026 .site-footer .h3 {
    font-family: var(--fo-font-serif);
    font-weight: 700;
    font-size: 15.8px;
    line-height: 19px;
    letter-spacing: 0;
    text-transform: uppercase;
}
.page-template-tpl_page-2026 .site-footer .copyright {
    font-family: var(--fo-font-sans);
    font-size: 11.5px;
    font-weight: 700;
}

/* ============================================================================
   9. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    :is(.fo-page, .editor-styles-wrapper) h1.fo-hero__title {
        font-size: 40px;
        line-height: 46px;
    }
    .fo-hero__media > .kt-inside-inner-col > .fo-hero__rating {
        right: 12px;
    }
    .fo-hero__media > .kt-inside-inner-col > .fo-hero__ambition {
        left: 12px;
    }
    .fo-values > .kt-row-column-wrap,
    .fo-testimonials > .kt-row-column-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        row-gap: 22px !important;
    }
    .fo-partners > .kt-row-column-wrap {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        row-gap: 22px !important;
    }
    .fo-values::before,
    .fo-values::after {
        display: none;
    }
    /* L'épi blanc passerait sur le texte, plus large en tablette */
    .fo-epi--experts::after {
        display: none;
    }
}

@media (max-width: 767px) {
    :is(.fo-page, .editor-styles-wrapper) h1.fo-hero__title {
        font-size: 32px;
        line-height: 38px;
    }
    :is(.fo-page, .editor-styles-wrapper) p.fo-hero__para,
    :is(.fo-page, .editor-styles-wrapper) p.fo-text,
    :is(.fo-page, .editor-styles-wrapper) p.fo-lead {
        font-size: 16px;
        line-height: 27px;
    }
    /* On garde la disposition desktop du hero (décision Laza sur Girardeau) :
       les deux encarts restent posés sur la photo, réduits et rentrés. */
    :is(.fo-page, .editor-styles-wrapper) .fo-hero__image {
        min-height: 430px;
    }
    .fo-hero__media > .kt-inside-inner-col > .fo-hero__rating {
        top: 12px;
        right: 10px;
    }
    .fo-hero__rating > .kt-row-column-wrap {
        max-width: 230px !important;
    }
    :is(.fo-page, .editor-styles-wrapper) p.fo-hero__stars {
        font-size: 13px;
        line-height: 20px;
    }
    :is(.fo-page, .editor-styles-wrapper) p.fo-hero__score {
        font-size: 15px;
        line-height: 20px;
    }
    :is(.fo-page, .editor-styles-wrapper) p.fo-hero__rating-text {
        font-size: 12px;
        line-height: 17px;
    }
    .fo-hero__media > .kt-inside-inner-col > .fo-hero__ambition {
        left: 10px;
        right: 10px;
        bottom: 14px;
    }
    .fo-hero__ambition > .kt-row-column-wrap {
        max-width: none !important;
    }
    :is(.fo-page, .editor-styles-wrapper) :is(h2, p).fo-hero__ambition-title {
        font-size: 20px;
        line-height: 26px;
    }
    :is(.fo-page, .editor-styles-wrapper) :is(h2, h3, p).fo-stat__num {
        font-size: 56px;
        line-height: 60px;
    }
    :is(.fo-page, .editor-styles-wrapper) .fo-experts h2.fo-title {
        font-size: 28px;
        line-height: 34px;
    }
    .fo-experts > .kt-row-column-wrap::before {
        background: rgba(0, 0, 0, .55);
    }

    .fo-value > .kt-inside-inner-col,
    .fo-quote > .kt-inside-inner-col {
        min-height: 0;
    }
    .fo-values > .kt-row-column-wrap,
    .fo-testimonials > .kt-row-column-wrap {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .fo-partners > .kt-row-column-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        row-gap: 16px !important;
        column-gap: 16px !important;
    }
    .fo-step > .kt-row-column-wrap {
        grid-template-columns: 56px 1fr !important;
    }
    :is(.fo-page, .editor-styles-wrapper) p.fo-step__num {
        font-size: 40px;
        line-height: 40px;
    }
    :is(.fo-page, .editor-styles-wrapper) .fo-cta__media img {
        min-height: 260px;
    }
}