/*
 * JG Expérience : adaptations du thème Flectine (enfant de Flixita).
 *
 * Les fichiers du thème (flixita.css, flixita-responsive.css, flectine.css) sont copiés
 * tels quels pour rester comparables à l'original. Toutes les modifications sont ici,
 * chargées en dernier.
 */

/* --- Police : Source Sans Pro servie en local (sous-ensemble latin, licence SIL OFL 1.1).
 *     ?v= : à incrémenter si les fichiers changent (cache d'un an), en même temps que
 *     FONTS_VERSION (app/bootstrap.php), utilisée par le préchargement de l'en-tête. */
@font-face {
    font-family: "Source Sans Pro";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/source-sans-pro/source-sans-pro-400.woff2?v=1") format("woff2");
}

@font-face {
    font-family: "Source Sans Pro";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/source-sans-pro/source-sans-pro-400-italic.woff2?v=1") format("woff2");
}

@font-face {
    font-family: "Source Sans Pro";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/source-sans-pro/source-sans-pro-600.woff2?v=1") format("woff2");
}

@font-face {
    font-family: "Source Sans Pro";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/source-sans-pro/source-sans-pro-700.woff2?v=1") format("woff2");
}

@font-face {
    font-family: "Source Sans Pro";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/source-sans-pro/source-sans-pro-900.woff2?v=1") format("woff2");
}

/* --- Couleurs du logo (remplacent le vert de Flectine) */
:root {
    --jg-blue: #246cb8;
    --jg-navy: #011a45;
    --jg-blue-grey: #bccedc;
    /* Accent sur fond marine : #bccedc est trop proche du blanc et #246cb8 du marine.
     * Contraste de #4fa3f7 sur #011a45 : 6,4:1 (WCAG AA texte normal : 4,5:1). */
    --jg-accent: #4fa3f7;

    --bs-primary: var(--jg-blue);
    --bs-primary-dark: var(--jg-navy);
    --bs-primary-light: var(--jg-blue-grey);
    --bs-primary-shadow: rgb(36 108 184 / 0.5);
    --bs-secondary: var(--jg-navy);
    --bs-secondary-dark: #000f2b;
}

/* --- Accessibilité */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 1000;
    padding: 0.75rem 1.25rem;
    color: var(--bs-white);
    background-color: var(--bs-primary-dark);
    text-decoration: none;
}

.skip-link:focus {
    top: 1rem;
}

/* Texte blanc dans tous les états : sinon « a:hover, a:focus » du thème (plus spécifique) le passe en bleu
   sur le fond marine (3,2:1). */
.skip-link:hover,
.skip-link:focus {
    color: var(--bs-white);
}

/* --- Bandeau de titre des pages intérieures et bannière de l'accueil : fond bleu marine sans image.
 *     Avec une image choisie dans l'admin (Emplacements d'images), la photo passe sous un voile marine
 *     à 80 % : le texte blanc reste lisible quelle que soit la photo (contraste ≥ 9:1 sur fond blanc). */
.breadcrumb-area:after {
    opacity: 0;
}

.home-hero.has-banner-image {
    isolation: isolate;
}

.page-banner-image,
.home-hero-image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

.breadcrumb-area.has-banner-image:after,
.home-hero.has-banner-image:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--bs-secondary);
    opacity: 0.8;
}

/* --- Photo de profil (Parcours) : sans photo, initiales sur fond marine. */
.parcours-profile {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.profile-photo {
    flex: 0 0 auto;
    width: 8rem;
    height: 8rem;
    overflow: hidden;
    border-radius: 50%;
}

.profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-photo-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-white);
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    background-color: var(--bs-secondary);
}

@media (max-width: 575.98px) {
    .parcours-profile {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .profile-photo {
        width: 6.5rem;
        height: 6.5rem;
    }
}

/* --- Cibles d'ancre (#cookies, #contenu…) : décalées de la hauteur de l'en-tête fixe
 *     (barre de 101 px + 3 px sur ordinateur, logo de 72 px + marges sur mobile), sinon le titre visé passe sous la barre de menu. */
:root {
    --jg-header-offset: 104px;
}

@media (max-width: 991.98px) {
    :root {
        --jg-header-offset: 92px;
    }
}

[id] {
    scroll-margin-top: var(--jg-header-offset);
}

/* --- Images envoyées : <picture> (WebP et repli JPEG/PNG) sans effet sur la mise en page, l'image
 *     reste l'enfant direct de son conteneur pour le CSS (grilles, positionnement). */
picture {
    display: contents;
}

/* --- Logo (fond transparent, 240 × 192, dans l'encart blanc du thème) */
.logo img,
.mobile-logo img {
    width: auto;
    height: auto;
    max-height: 120px;
}

.is-sticky-menu .logo img {
    max-height: 88px;
}

.mobile-logo img {
    max-height: 72px;
}

/* --- Menu ordinateur : lien survolé ou actif en bleu d'accent, souligné de la même couleur
 *     (le bleu principal du thème se confondait avec le fond marine). */
.flectine-theme .main-navbar .main-menu > li.menu-item > a:hover,
.flectine-theme .main-navbar .main-menu > li.menu-item > a:focus,
.flectine-theme .main-navbar .main-menu > li.menu-item.active > a {
    color: var(--jg-accent);
}

.flectine-theme .main-navbar .main-menu > li.menu-item > a:after {
    height: 4px;
    background-color: var(--jg-accent);
}

/* --- Bouton « Demander un devis » : encart blanc à la hauteur exacte de la barre
 *     (avec la hauteur minimale et les marges du thème, il dépassait de la barre). */
@media (min-width: 992px) {
    .flectine-theme .main-navigation > .container > .row {
        min-height: 101px;
    }

    .flectine-theme .navbar-area {
        flex-wrap: nowrap;
        height: auto;
    }

    .flectine-theme .main-menu-right {
        flex-shrink: 0;
        align-self: stretch;
    }

    .flectine-theme .main-menu-right > ul {
        align-items: stretch;
        height: 100%;
    }

    .flectine-theme .main-menu-right > ul > li.button-area {
        width: auto;
        height: auto;
        min-height: 0;
        padding: 0 1.75rem 0 3rem;
    }
}

/* Écrans moyens : menu resserré pour que le menu et le bouton tiennent sur une ligne. */
@media (min-width: 992px) and (max-width: 1299.98px) {
    .flectine-theme .main-navbar {
        padding-left: 0.5rem;
    }

    .flectine-theme .main-navbar .main-menu > li.menu-item > a {
        padding: 0 0.5rem;
    }

    .flectine-theme .main-menu-right > ul {
        padding-left: 0.5rem;
    }

    .flectine-theme .main-menu-right > ul > li.button-area {
        padding: 0 1rem 0 2rem;
    }
}

/* --- Menu mobile : survol et page courante visibles */
.main-mobile-build .main-menu > li > a {
    display: block;
    padding: 0 1.25rem;
    color: var(--bs-secondary);
}

.main-mobile-build .main-menu > li > a:hover,
.main-mobile-build .main-menu > li > a:focus {
    color: var(--bs-secondary);
    background-color: var(--jg-blue-grey);
}

.main-mobile-build .main-menu > li.active > a {
    color: var(--bs-white);
    background-color: var(--bs-primary);
}

/* --- Sous-menus (Apparence > En-tête, un seul niveau) : liste « dropdown-menu » du thème, sur fond blanc. Ouverte
 *     au survol (thème) et au clavier dès que le focus est dans l'entrée (:focus-within), donc atteignable avec Tab.
 *     Texte marine sur blanc (16:1), survol et page courante en bleu principal (5,4:1) ; contour de focus en bleu
 *     principal (le bleu d'accent de la barre marine n'est pas assez contrasté sur blanc). */
.flectine-theme .main-navbar .main-menu .menu-item:focus-within > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scaleY(1);
}

.flectine-theme .main-navbar .dropdown-menu {
    min-width: 14rem;
    padding: 0.5rem 0;
    list-style: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.flectine-theme .main-navbar .dropdown-menu a {
    display: block;
    padding: 0.6rem 1.25rem;
    color: var(--bs-secondary);
    font-size: 1rem;
    line-height: 1.4;
    white-space: normal;
    background: none;
}

.flectine-theme .main-navbar .dropdown-menu a:hover,
.flectine-theme .main-navbar .dropdown-menu li.active > a {
    color: var(--bs-primary);
    text-decoration: underline;
}

.main-navigation .dropdown-menu :focus-visible {
    outline-color: var(--bs-primary) !important;
    outline-offset: -3px;
}

/* Mobile : sous-entrées toujours affichées, en retrait sous leur entrée. */
.main-mobile-build .dropdown-menu {
    position: static;
    display: block;
    margin: 0;
    padding: 0 0 0.25rem;
    list-style: none;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
}

.main-mobile-build .dropdown-menu a {
    display: block;
    padding: 0 1.25rem 0 2.5rem;
    color: var(--bs-secondary);
    line-height: 2.5rem;
}

.main-mobile-build .dropdown-menu a:hover,
.main-mobile-build .dropdown-menu a:focus {
    background-color: var(--jg-blue-grey);
}

.main-mobile-build .dropdown-menu li.active > a {
    color: var(--bs-white);
    background-color: var(--bs-primary);
}

/* --- Mobile : bandeau de coordonnées compact sur une ligne
 *     (le bandeau du thème empilait trois blocs et prenait trop de hauteur). */
.above-header-compact {
    background-color: var(--bs-primary);
}

.above-header-compact ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 1.5rem;
    margin: 0;
    padding: 0.4rem 1rem;
    list-style: none;
}

.above-header-compact a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 32px;
    color: var(--bs-white);
    font-weight: 600;
    text-decoration: none;
}

/* Survol : blanc souligné (le bleu-gris sur le bleu du bandeau n'atteint que 3,3:1). */
.above-header-compact a:hover,
.above-header-compact a:focus {
    color: var(--bs-white);
    text-decoration: underline;
}

.above-header-compact .fa {
    font-size: 1.125rem;
}

/* =========================================================================
 * Pied de page
 * ========================================================================= */

/* --- Colonnes */
.footer-main {
    padding-top: 3rem;
    padding-bottom: 3.5rem;
}

.footer-main .widget-text,
.footer-area {
    color: var(--jg-blue-grey);
}

.footer-area .fa {
    width: 1rem;
    margin-right: 0.35rem;
    color: var(--jg-accent);
}

.footer-area a {
    color: var(--bs-white);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.footer-area a:hover,
.footer-area a:focus {
    color: var(--jg-accent);
    text-decoration: underline;
}

/* Logo sur fond transparent : présenté dans un encart blanc pour rester lisible sur le marine
 * (le nom « JG EXPÉRIENCE » est en bleu marine). */
.footer-logo {
    display: inline-block;
    margin-bottom: 1.25rem;
    padding: 0.5rem;
    background-color: var(--bs-white);
    border-radius: var(--radius-md);
}

.footer-logo img {
    display: block;
    width: 112px;
    height: auto;
}

/* Le thème colore en --bs-primary les premières lettres et petits traits des titres,
 * les icônes et le survol des liens : dans le pied de page, cette couleur devient l'accent. */
.main-footer {
    --bs-primary: var(--jg-accent);
}

/* Listes de liens : chevron fixe à gauche du texte, en accent. La flèche animée du thème
 * (qui remplace le chevron au survol) est retirée : sobriété.
 * Préfixe #footer-section : les règles du thème enchaînent une dizaine de :not(). */
.footer-main .widget_nav_menu ul.menu {
    margin: 0;
    padding: 0;
}

.footer-main .widget_nav_menu li:not(:last-child) {
    margin-bottom: 0.6rem;
}

.footer-main .widget_nav_menu li a {
    padding-left: 1.25rem;
}

#footer-section .widget_nav_menu li a:before,
#footer-section .widget_nav_menu li a:hover:before,
#footer-section .widget_nav_menu li a:focus:before {
    top: 0.3em;
    left: 0;
    right: auto;
    font-size: 0.7em;
    opacity: 1;
    color: var(--jg-accent);
}

#footer-section .widget_nav_menu li a:after {
    display: none;
}

/* Encart certification : discret, affiché seulement s'il a un contenu. */
.footer-certification {
    padding: 1.25rem;
    border: 1px solid rgb(188 206 220 / 0.25);
    border-radius: var(--radius-md);
}

/* --- Barre basse : séparation, copyright / LinkedIn / liens légaux */
.footer-bottom {
    padding: 1.5rem 0;
    line-height: 1.5;
    background-color: transparent;
    border-top: 1px solid rgb(188 206 220 / 0.25);
}

.footer-bottom .copyright-text {
    font-size: 0.95rem;
    color: var(--jg-blue-grey);
}

.footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--jg-accent);
    font-size: 1.25rem;
    border: 1px solid currentColor;
    border-radius: 50%;
}

.footer-social:hover,
.footer-social:focus {
    color: var(--bs-white);
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
}

@media (min-width: 992px) {
    .footer-legal {
        justify-content: flex-end;
    }
}

.footer-legal a {
    color: var(--jg-blue-grey);
    text-decoration: none;
}

.footer-legal a:hover,
.footer-legal a:focus {
    color: var(--jg-accent);
    text-decoration: underline;
}

/* --- Barre d'actions : 3 parts égales sur toute la largeur.
 *     Sur mobile, elle reste collée en bas de l'écran (position sticky : elle ne masque
 *     donc jamais la fin de la page). */
.footer-actions {
    display: flex;
    background-color: var(--bs-primary);
}

.footer-actions a {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 64px;
    padding: 0.5rem 1rem;
    color: var(--bs-white);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.footer-actions a + a {
    border-left: 1px solid rgb(255 255 255 / 0.3);
}

.footer-actions a:hover,
.footer-actions a:focus {
    color: var(--bs-white);
    background-color: var(--bs-primary-dark);
}

@media (max-width: 991.98px) {
    .footer-actions {
        position: sticky;
        bottom: 0;
        z-index: 4;
        box-shadow: 0 -2px 8px rgb(1 26 69 / 0.25);
    }

    .footer-actions a {
        flex-direction: column;
        gap: 0.15rem;
        min-height: 56px;
        padding: 0.4rem 0.25rem;
        font-size: 0.8125rem;
        line-height: 1.2;
    }

    .footer-actions .fa {
        font-size: 1.125rem;
    }

    /* Bouton de retour en haut à droite (hauteur : voir « Bouton et panneau Cookies »). */
    .scrollingUp {
        right: 16px;
    }
}

/* =========================================================================
 * Page d'accueil
 * Direction artistique (CLAUDE.md section 5) : les animations du thème (titres qui
 * rebondissent, icônes qui tournent, bandeau défilant en boucle) sont neutralisées ; seules les
 * animations discrètes du bloc « Animations discrètes » (fin de fichier) sont utilisées.
 * ========================================================================= */
:root {
    --jg-light: #f4f7fa;
    --jg-line: #dbe4ec;
}

.theme-main-heading .title,
.marquee-box .marquee-group {
    animation: none;
}

.theme-main-heading h2 {
    color: var(--bs-secondary);
}

/* --- En-tête de page (slider du thème, en une seule vue fixe, sans carrousel) */
.home-hero .main-slider {
    position: relative;
    height: auto;
    background: none;
}

.home-hero .main-slider div.main-content {
    max-width: 46rem;
    margin: 0;
    padding: 6rem 0 7.5rem;
}

.home-hero .main-content h1 {
    color: var(--bs-white);
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    line-height: 1.1;
}

.home-hero .main-content p {
    color: var(--jg-blue-grey);
}

.home-hero .main-content .home-hero-kicker {
    margin-bottom: 1rem;
    color: var(--jg-accent);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.home-hero .main-content .btn {
    margin-right: 0;
}

.home-hero .btn-border-white {
    border: 0.15em solid var(--bs-white);
}

@media (max-width: 767.98px) {
    .home-hero .main-slider div.main-content {
        padding: 3.5rem 0 4rem;
    }
}

/* Téléphone (540 px et moins) : le thème met le texte du slider sur une seule ligne coupée par « … » et
 * réduit les boutons ; la bannière de l'accueil garde son texte complet et des boutons lisibles. */
@media (max-width: 540px) {
    .home-hero .main-content p {
        max-width: none;
        overflow: visible;
        font-size: 1rem;
        white-space: normal;
        text-overflow: clip;
    }

    .home-hero .main-content .home-hero-kicker {
        font-size: 0.8125rem;
    }

    .home-hero .main-content > p:not(.home-hero-kicker) {
        margin-bottom: 1.25rem;
    }

    .home-hero .main-content h1 {
        margin-bottom: 0.75rem;
        font-size: 2rem;
    }

    .home-hero .main-content .btn {
        padding: 0.75rem 1.25rem;
        font-size: 1rem;
    }
}

/* --- Trois encadrés (activités) : même hauteur, sans effet au survol */
.info-section {
    margin-bottom: 0;
}

/*
 * Sous la zone bleue de l'accueil : le thème remonte les encadrés dans le bandeau (marge négative de
 * -3,55rem sur ordinateur, -1,55rem vers 768 px, flixita-responsive.css), donc par-dessus la courbe.
 * Ici, à toutes les largeurs (hors media query) : aucune marge négative, et 20 px d'espace entre le bas
 * de la courbe (bas du bandeau) et le haut des cartes. Même spécificité que la règle du thème, chargée après.
 */
.home-hero + .info-section {
    position: relative;
    z-index: 1;
    /* Recouvre de 2 px le bas du bandeau : le bandeau masque son débordement (overflow: hidden), donc le
     * chevauchement de 1 px de la courbe est coupé et un trait fin de marine pouvait apparaître sur les écrans
     * à densité fractionnaire. Au-dessus du bandeau, la courbe ne peut plus recouvrir une carte ni son ombre. */
    margin-top: -2px;
    padding-top: calc(1.25rem + 2px);
    background-color: var(--bs-white);
}

/* Téléphone et tablette : 24 px entre la courbe et le haut de la première carte (bordure et coins compris). */
@media (max-width: 991.98px) {
    .home-hero + .info-section {
        padding-top: calc(1.5rem + 2px);
    }
}

/* Ordinateur : bannière un peu moins haute (environ 35 px), cartes remontées d'autant. */
@media (min-width: 992px) {
    .home-hero .main-slider div.main-content {
        padding: 5rem 0 6.25rem;
    }
}

/*
 * Écrans d'ordinateur peu hauts (1366 × 768, 1440 × 900…) : bannière et cartes resserrées pour que les trois
 * cartes soient visibles en entier sans défiler (mesuré dans Chromium : bas des cartes vers 745 px en
 * 1366 × 768, marge pour les écarts de polices). Les grands écrans (1920 × 1080) gardent le rendu complet.
 */
@media (min-width: 992px) and (max-height: 900px) {
    .home-hero .main-slider div.main-content {
        padding: 1rem 0 3.5rem; /* 56 px en bas : les boutons restent au-dessus de la courbe (44 px au plus ici) */
    }


    .home-hero .main-content .home-hero-kicker {
        margin-bottom: 0.5rem;
    }

    .home-hero .main-content h1 {
        margin-bottom: 0.75rem;
        font-size: 2.75rem;
    }

    .home-hero .main-content > p:not(.home-hero-kicker) {
        margin-bottom: 1rem;
    }

    .slider-section.home-hero:before {
        height: clamp(24px, 3vw, 44px); /* courbe un peu plus basse ; sélecteur renforcé : la règle commune des courbes vient après */
    }

    .flectine-theme .info-section .info-inner {
        padding: 1.5rem;
    }

    .flectine-theme .info-section .info-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 1rem;
        font-size: 34px;
    }
}

.info-section .row > [class*="col-"] {
    display: flex;
}

.flectine-theme .info-section .info-inner {
    flex: 1 1 auto;
    border-top: 4px solid var(--bs-primary);
}

.flectine-theme .info-section .feature-box-title {
    margin-bottom: 0.75rem;
    font-size: 1.375rem;
}

.flectine-theme .info-section .feature-box-title a {
    margin-bottom: 0;
}

.flectine-theme .info-section .info-inner .fbox-content {
    margin-bottom: 0;
}

.flectine-theme .info-section .info-inner:hover .feature-box-title a,
.flectine-theme .info-section .info-inner:hover .fbox-content {
    color: var(--bs-secondary);
}

.flectine-theme .info-section .info-inner:hover .info-icon {
    transform: none;
}

.flectine-theme .info-section .feature-box-title a:hover,
.flectine-theme .info-section .feature-box-title a:focus {
    color: var(--bs-primary);
}

/* --- Bandeau de domaines : fixe, centré, sur une ou plusieurs lignes */
.marquee-section {
    margin-top: 4rem;
    padding: 0;
}

/* Téléphone (moins de 768 px) : bandeau masqué (demande de Lucas, 2026-10-10) ; display: none retire aussi
 * sa marge de 4rem, donc aucun espace vide à sa place. Tablette et ordinateur : inchangé. */
@media (max-width: 767.98px) {
    .marquee-section {
        display: none;
    }

    /* Sans le bandeau, la section suivante (fond bleu très clair) touchait la dernière carte : 40 px de marge. */
    .info-section {
        padding-bottom: 2.5rem;
    }
}

.marquee-section:before {
    display: none;
}

.marquee-box {
    justify-content: center;
    padding: 1.5rem 1rem;
    border-top: 1px solid var(--jg-line);
    border-bottom: 1px solid var(--jg-line);
    box-shadow: none;
    transform: none;
}

.marquee-box .marquee-group {
    /* Bandeau fixe (aucun défilement : CLAUDE.md) : la rangée du thème ne rétrécit pas (flex-shrink: 0) et
     * débordait des deux côtés, texte coupé ; ici elle tient dans la largeur et passe à la ligne. */
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 2.5rem;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.marquee-box li {
    display: flex;
    align-items: center;
}

.marquee-box .icon {
    margin-right: 0.6rem;
    font-size: 0.9rem;
}

.marquee-box .text {
    padding-right: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

/* Ordinateur de 1200 à 1499 px : espacement resserré pour que 5 domaines tiennent sur une ligne (mesuré dans Chromium :
 * 1 388 px de contenu pour 1 324 px disponibles en 1366 avec l'espacement normal ; 1 324 px avec celui-ci, sur
 * 1 340). Au-delà, l'espacement normal tient sur une ligne. Plus de 5 domaines, ou plus longs : passage à la ligne. */
@media (min-width: 1200px) and (max-width: 1499.98px) {
    .marquee-box {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    .marquee-box .marquee-group {
        column-gap: 1.5rem;
    }
}

/* --- Volets de formation (section services du thème, sans image) */
.flectine-theme .service-section {
    background-color: var(--jg-light);
}

.service-section .row > [class*="col-"] {
    display: flex;
}

.flectine-theme .service-section .service-inner {
    flex: 1 1 auto;
}

.flectine-theme .service-section .service-content {
    margin-top: 0;
    padding: 2.5rem 2rem 2rem;
}

.flectine-theme .service-section .service-content .icon {
    position: relative;
    top: auto;
    width: 76px;
    height: 76px;
    margin: 0 auto 1.5rem;
    font-size: 32px;
    background-color: #ebf1f5;
    border: 0;
    box-shadow: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.flectine-theme .service-section .service-content .icon:after {
    display: none;
}

.flectine-theme .service-section .service-inner:hover .icon {
    color: var(--bs-white);
    background-color: var(--bs-primary);
}

.flectine-theme .service-section .service-title {
    font-size: 1.375rem;
}

.flectine-theme .service-section .service-title a {
    color: var(--bs-secondary);
    text-decoration: none;
}

.flectine-theme .service-section .service-title a:hover,
.flectine-theme .service-section .service-title a:focus {
    color: var(--bs-primary);
}

.service-section .service-excerpt p {
    margin-bottom: 0;
}

/* --- Aperçu du parcours (remplace le bloc blog du thème) : chiffres clés et frise courte */
.home-figures {
    display: grid;
    gap: 1.5rem;
    margin: 2rem 0 0;
}

.home-figure {
    padding-left: 1rem;
    border-left: 3px solid var(--bs-primary);
}

.home-figure dt {
    color: var(--bs-primary);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.1;
}

.home-figure dd {
    margin: 0.25rem 0 0;
    color: var(--bs-secondary);
}

.home-timeline-title {
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
}

.home-timeline {
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
    border-left: 2px solid var(--jg-line);
}

.home-timeline li {
    position: relative;
    padding: 0 0 1.5rem 1.75rem;
}

.home-timeline li:before {
    content: "";
    position: absolute;
    top: 0.35rem;
    left: -8px;
    width: 14px;
    height: 14px;
    background-color: var(--bs-white);
    border: 3px solid var(--bs-primary);
    border-radius: 50%;
}

.home-timeline-period {
    display: block;
    color: var(--bs-primary);
    font-size: 0.95rem;
    font-weight: 700;
}

.home-timeline strong {
    display: block;
    color: var(--bs-secondary);
    font-size: 1.125rem;
}

.home-timeline-subtitle {
    display: block;
}

/* =========================================================================
 * Formations : catalogue, catégorie, fiche
 * ========================================================================= */
.lead-text {
    color: var(--bs-secondary);
    font-size: 1.1875rem;
}

.formations-catalogue .service-title {
    font-size: 1.375rem;
}

/* Onglets de filtre des formations : pastilles renvoyées à la ligne (jamais de défilement horizontal). */
.volets-nav {
    margin-bottom: 2.5rem;
}

.volets-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.volets-nav a {
    display: inline-block;
    padding: 0.5rem 1.125rem;
    color: var(--bs-secondary);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    background-color: var(--bs-white);
    border: 1px solid var(--jg-blue-grey);
    border-radius: var(--radius-sm);
}

.volets-nav a:hover,
.volets-nav a:focus-visible {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.volets-nav a[aria-current="page"] {
    color: var(--bs-white);
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

@media (max-width: 575.98px) {
    .volets-nav ul {
        justify-content: flex-start;
    }

    .volets-nav a {
        padding: 0.4375rem 0.875rem;
        font-size: 0.9375rem;
    }
}

/*
 * Cartes des volets (catalogue) : structure identique pour toutes (icône, titre, description, séparateur,
 * thèmes, lien), même style d'icône, même typographie. Chaque carte est une colonne flexible : le lien
 * est poussé en bas, les cartes d'une rangée ont la même hauteur. Avec la grille partagée (subgrid,
 * ordinateur), les titres, séparateurs, listes et liens des trois cartes sont en plus alignés ligne à ligne.
 */
.flectine-theme .formations-catalogue .volet-card,
.flectine-theme .formations-catalogue .volet-card .service-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.volet-card-text {
    margin: 0;
}

.volet-card-separator {
    width: 48px;
    height: 3px;
    margin: 1.5rem auto;
    background-color: var(--bs-primary);
    border-radius: var(--radius-sm);
}

.volet-card-topics {
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
    text-align: left;
}

.volet-card-topics li {
    position: relative;
    padding-left: 1rem;
}

.volet-card-topics li:before {
    content: "";
    position: absolute;
    top: 0.6em;
    left: 0;
    width: 6px;
    height: 6px;
    background-color: var(--bs-primary);
    border-radius: 50%;
}

.volet-card-topics li + li {
    margin-top: 0.35rem;
}

.volet-card-topics-empty {
    color: var(--bs-secondary);
    text-align: center;
}

.volet-card-link {
    align-self: center;
    margin-top: auto;
    font-weight: 600;
}

.volet-card-link .fa {
    margin-left: 0.35rem;
}

/*
 * Trois volets en podium (ordinateur) : carte centrale surélevée et soulignée d'un filet bleu, cartes
 * latérales décalées de 1,5 rem vers le bas (position relative : ni la hauteur ni l'alignement des
 * lignes ne changent, et transform reste libre pour l'animation d'apparition). Sur mobile, simple pile.
 */
.flectine-theme .formations-podium .podium-featured .volet-card {
    border-top: 4px solid var(--bs-primary);
    box-shadow: 0 12px 32px rgba(1, 26, 69, 0.14);
}

@media (min-width: 992px) {
    .formations-podium {
        padding-bottom: 1.5rem;
    }

    .formations-podium > .podium-side {
        position: relative;
        top: 1.5rem;
    }

    .flectine-theme .formations-podium .podium-side .volet-card {
        border-top: 4px solid transparent;
    }
}

@supports (grid-template-rows: subgrid) {
    @media (min-width: 992px) {
        .formations-podium {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            grid-template-rows: repeat(7, auto);
            column-gap: 1.5rem;
            margin-right: 0;
            margin-left: 0;
        }

        .formations-podium > [class*="col-"] {
            display: grid;
            grid-row: span 7;
            grid-template-rows: subgrid;
            width: auto;
            margin-top: 0;
            padding: 0;
        }

        .flectine-theme .formations-podium .volet-card,
        .flectine-theme .formations-podium .volet-card .service-content {
            display: grid;
            grid-row: span 7;
            grid-template-rows: subgrid;
            row-gap: 0;
        }

        /* 1re ligne : image de la carte (vide, donc sans hauteur, si aucun volet n'en a) ; puis les 6 lignes du contenu. */
        .flectine-theme .formations-podium .volet-card .service-content {
            grid-row: 2 / span 6;
        }

        .formations-podium .volet-card-link {
            align-self: end;
            justify-self: center;
        }
    }
}

/* Liste des formations d'une catégorie */
.formations-list .row > [class*="col-"] {
    display: flex;
}

.formation-card {
    flex: 1 1 auto;
    padding: 2rem;
    background-color: var(--bs-white);
    border: 1px solid var(--jg-line);
    border-left: 4px solid var(--bs-primary);
}

.formation-card-title {
    margin-bottom: 0.75rem;
    font-size: 1.375rem;
}

.formation-card-title a {
    color: var(--bs-secondary);
    text-decoration: none;
}

.formation-card-title a:hover,
.formation-card-title a:focus-visible {
    color: var(--bs-primary);
    text-decoration: underline;
}

/*
 * Formations du volet : toute la carte mène à la fiche. Un seul lien, celui du titre, étendu à la carte par son
 * pseudo-élément (pas de lien imbriqué, intitulé lu une seule fois). Survol de la carte : bordure et titre en bleu
 * (plus élévation et ombre, bloc « Animations discrètes ») ; focus clavier : contour autour de toute la carte.
 */
.volet-formations-section .formation-card {
    position: relative;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease-out;
}

/*
 * Cartes d'une même ligne de même hauteur (colonne en flex, carte étirée). Résumé sur exactement 3 lignes : coupé
 * proprement avec « … » s'il est plus long, même hauteur s'il est plus court ou vide (le texte complet est sur la
 * fiche et reste lu par les lecteurs d'écran). Durée, tarif et « Voir la fiche » poussés en bas de la carte.
 */
.volet-formations-section .row > [class*="col-"] {
    display: flex;
}

.formation-card-summary {
    display: -webkit-box;
    min-height: calc(3 * 1.6em);
    margin-bottom: 0;
    overflow: hidden;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.volet-formations-section .formation-card-facts {
    margin-top: auto;
    padding-top: 1rem;
}

.volet-formations-section .formation-card-more {
    margin-top: 0; /* juste sous la durée et le tarif, eux-mêmes en bas : une seule marge automatique */
}

.volet-formations-section .formation-card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--radius-lg);
}

.volet-formations-section .formation-card:hover {
    border-color: var(--bs-primary);
}

.volet-formations-section .formation-card:hover .formation-card-title a {
    color: var(--bs-primary);
    text-decoration: underline;
}

/* Aucun contour sur le titre lui-même, ni après un clic (« a:focus » pointillé du thème), ni au clavier (contour
   général « a:focus-visible », !important) : le seul contour est celui de la carte, au clavier seulement. */
.volet-formations-section .formation-card-title a:focus,
.volet-formations-section .formation-card-title a:focus-visible {
    outline: none !important;
}

.volet-formations-section .formation-card-title a:focus-visible::after {
    outline: 3px solid var(--bs-primary);
    outline-offset: 3px;
}

.formation-card-more {
    margin-top: auto;
    padding-top: 1rem;
    color: var(--bs-primary);
    font-weight: 600;
}

.formation-card-more .fa {
    margin-left: 0.35rem;
}

.formation-card-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    margin: 1rem 0 0;
}

.formation-card-facts dt,
.formation-facts dt {
    color: var(--bs-primary);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.formation-card-facts dd,
.formation-facts dd {
    margin: 0;
    color: var(--bs-secondary);
}

/*
 * Page d'un volet : même gabarit pour les trois. Bandeau pleine largeur (icône, titre, introduction ; image
 * du volet sous le voile marine, sinon fond marine, courbe et formes décoratives), thèmes en tuiles
 * arrondies, formations, encart « Programme détaillé sur demande » pleine largeur.
 */
.volet-hero .breadcrumb-content {
    padding-bottom: 4rem; /* le texte reste au-dessus de la courbe du bas du bandeau */
}

.volet-hero .breadcrumb-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 46rem;
}

/* Icône du volet : rond clair sur le marine, bleu d'accent (autorisé sur fond marine). Sélecteur renforcé :
 * flixita-responsive.css étire sinon tout élément du bandeau à 100 % de largeur sur mobile. */
.breadcrumb-area .breadcrumb-content .volet-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    max-width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    color: var(--jg-accent);
    font-size: 1.75rem;
    background-color: rgb(255 255 255 / 0.08);
    border: 1px solid rgb(188 206 220 / 0.35);
    border-radius: 50%;
}

.volet-hero .volet-hero-intro {
    margin: 1rem 0 0;
    color: var(--jg-blue-grey);
    font-size: 1.125rem;
    line-height: 1.6;
}

.volet-page + .volet-page {
    padding-top: 3rem;
}

/* Sous le bandeau : 3,5rem au lieu des 6,75rem du thème (pas de grand vide avant les thèmes). */
.volet-page.volet-topics-section {
    padding-top: 3.5rem;
}

.volet-section-title {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

/* Objectifs, public, modalités, approche : quatre cartes, 1 colonne sur mobile, 2 à partir de la tablette. */
.volet-details,
.volet-others {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .volet-details,
    .volet-others {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.volet-detail {
    height: 100%;
    padding: 1.75rem;
    background-color: var(--bs-white);
    border: 1px solid var(--jg-line);
    border-radius: var(--radius-lg);
}

.volet-detail-title {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.volet-detail-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--bs-primary);
    font-size: 1.125rem;
    background-color: var(--jg-light);
    border-radius: var(--radius-md);
}

.volet-detail ul,
.volet-credentials ul {
    margin: 0;
    padding-left: 1.1rem;
}

.volet-detail li + li,
.volet-credentials li + li {
    margin-top: 0.5rem;
}

/* Habilitations : encart marine (texte blanc 17:1, icône en bleu d'accent, autorisé sur marine). */
.volet-credentials {
    padding: 2rem;
    color: var(--bs-white);
    background-color: var(--bs-secondary);
    border-radius: var(--radius-lg);
}

.volet-credentials .volet-section-title {
    color: var(--bs-white);
}

.volet-credentials .fa {
    color: var(--jg-accent);
}

/* Autres volets : cartes-liens (icône, titre, résumé, flèche). « a. » : le thème souligne tous les liens
 * (a:not(.comments-count), plus spécifique qu'une simple classe). */
a.volet-other {
    position: relative;
    display: flex;
    gap: 1rem;
    align-items: center;
    height: 100%;
    padding: 1.25rem 1.5rem;
    color: var(--bs-body-color);
    text-decoration: none;
    background-color: var(--jg-light);
    border-radius: var(--radius-lg);
    isolation: isolate;
}

.volet-other-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.25rem;
}

.volet-other-text strong {
    color: var(--bs-secondary);
    font-size: 1.125rem;
}

.volet-other:hover .volet-other-text strong,
.volet-other:focus .volet-other-text strong {
    color: var(--bs-primary);
}

.volet-other-arrow {
    color: var(--bs-primary);
    font-size: 1.5rem;
}

/* Thèmes : tuiles arrondies, 1 colonne sur mobile, 2 à partir de la tablette. */
.volet-topics {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .volet-topics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.volet-topic {
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
    height: 100%;
    padding: 1.25rem 1.5rem;
    color: var(--bs-secondary);
    font-weight: 600;
    background-color: var(--jg-light);
    border-radius: var(--radius-lg);
}

.volet-topic .fa {
    flex: 0 0 auto;
    margin-top: 0.15em;
    color: var(--bs-primary);
    font-size: 1.25rem;
}

.volet-back {
    margin: 2rem 0 0;
}

.formation-back {
    font-weight: 600;
    text-decoration: none;
}

.formation-back:hover,
.formation-back:focus {
    text-decoration: underline;
}

/* Fiche d'une formation */
.formation-detail h2 {
    margin: 2rem 0 1rem;
    font-size: 1.5rem;
}

.formation-objectives {
    padding-left: 1.25rem;
}

.formation-objectives li {
    margin-bottom: 0.5rem;
}

.formation-facts {
    padding: 2rem;
    background-color: var(--jg-light);
    border-top: 4px solid var(--bs-primary);
}

.formation-facts dl {
    margin: 0 0 1.5rem;
}

.formation-facts dl > div + div {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--jg-line);
}

/* Encart de fin de page : demande de devis (Formations, Secours, Conseil) */
.devis-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 3rem;
    padding: 2.5rem;
    border: 1px solid var(--jg-line);
}

.devis-inner h2 {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.devis-inner p {
    max-width: 44rem;
    margin: 0;
}

.formations-catalogue + .devis-section {
    padding-top: 0;
    background-color: var(--jg-light);
}

/* --- Fiche de formation : bouton « Télécharger le programme » (contour bleu, sous « Demander un devis »). */
/* « a. » : le thème souligne tous les liens (a:not(.comments-count)). */
.formation-facts a.btn.formation-program {
    display: inline-block;
    margin-top: 0.75rem;
    color: var(--bs-primary);
    text-align: center;
    text-decoration: none;
    background-color: var(--bs-white);
    border: 2px solid var(--bs-primary);
}

.formation-facts a.btn.formation-program:hover,
.formation-facts a.btn.formation-program:focus {
    color: var(--bs-white);
    background-color: var(--bs-primary);
}

.formation-program-size {
    font-weight: 400;
}

/* --- « Ils m'ont fait confiance » (accueil) : logos ou noms dans des tuiles de même hauteur. */
/* Flex plutôt que grille : une dernière rangée incomplète reste centrée. */
.references-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.reference {
    flex: 0 0 calc((100% - 1rem) / 2);
}

@media (min-width: 768px) {
    .reference {
        flex-basis: calc((100% - 2rem) / 3);
    }
}

@media (min-width: 992px) {
    .reference {
        flex-basis: calc((100% - 3rem) / 4);
    }
}

.reference {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 6.5rem;
    padding: 1rem 1.25rem;
    text-align: center;
    background-color: var(--bs-white);
    border: 1px solid var(--jg-line);
    border-radius: var(--radius-lg);
}

a.reference-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--bs-secondary);
    text-decoration: none;
}

.reference-logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 4rem;
    object-fit: contain;
}

.reference-name {
    color: var(--bs-secondary);
    font-weight: 600;
    line-height: 1.3;
}

a.reference-link:hover .reference-name,
a.reference-link:focus .reference-name {
    color: var(--bs-primary);
    text-decoration: underline;
}

/* --- Formulaire de contact et de demande de devis (page Contact) */
.contact-form-box {
    margin-top: 3rem;
    padding: 2rem;
    background-color: var(--jg-light);
    border-radius: var(--radius-lg);
}

.contact-form-box h2 {
    margin-bottom: 1.25rem;
    font-size: 1.5rem;
}

.contact-form label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--bs-secondary);
    font-weight: 600;
}

/* Spécificité renforcée : le thème stylise input[type="text"]:not(…) (sans bordure visible), et les colonnes
 * de la page Contact sont en flex (cartes de même hauteur) : ici libellé au-dessus du champ. */
.contact-page .contact-form .row > [class*="col-"] {
    display: block;
}

.contact-form-box .contact-form input,
.contact-form-box .contact-form select,
.contact-form-box .contact-form textarea {
    display: block;
    min-height: 0;
    letter-spacing: normal;
    width: 100%;
    padding: 0.65rem 0.85rem;
    color: var(--bs-secondary);
    font: inherit;
    background-color: var(--bs-white);
    border: 1px solid #8a9bb0;
    border-radius: var(--radius-sm);
}

.contact-form-box .contact-form input:focus,
.contact-form-box .contact-form select:focus,
.contact-form-box .contact-form textarea:focus {
    border-color: var(--bs-primary);
    outline: 3px solid rgb(36 108 184 / 0.35);
    outline-offset: 0;
}

.contact-form-box .contact-form [aria-invalid="true"] {
    border-color: #a4161a;
}

.contact-field-error,
.contact-field-help {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
}

.contact-field-error {
    color: #a4161a;
    font-weight: 600;
}

.contact-form-message {
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem;
    font-weight: 600;
    background-color: var(--bs-white);
    border-left: 4px solid;
    border-radius: var(--radius-sm);
}

.contact-form-success {
    color: #1e6b3a;
}

.contact-form-error {
    color: #a4161a;
}

.contact-form-submit {
    margin: 1.5rem 0 1rem;
}

.contact-form-rgpd {
    margin: 0;
    font-size: 0.9rem;
}

/* Champ piège : hors de l'écran (pas display: none, que certains robots repèrent), jamais atteint au clavier. */
.contact-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 575.98px) {
    .contact-form-box {
        padding: 1.25rem;
    }
}

/* --- Questions fréquentes (page Contact) : <details> natif, sans script ; « + » devient « − » ouvert. */
.faq {
    margin-top: 3rem;
}

.faq h2 {
    margin-bottom: 1.25rem;
    font-size: 1.5rem;
}

.faq-item {
    background-color: var(--jg-light);
    border-radius: var(--radius-lg);
}

.faq-item + .faq-item {
    margin-top: 0.75rem;
}

.faq-item summary {
    position: relative;
    padding: 1.1rem 3.25rem 1.1rem 1.5rem;
    color: var(--bs-secondary);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
    border-radius: var(--radius-lg);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary:after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 1.5rem;
    color: var(--bs-primary);
    font-size: 1.5rem;
    line-height: 1;
    transform: translateY(-50%);
}

.faq-item[open] summary:after {
    content: "\2212";
}

.faq-answer {
    padding: 0 1.5rem 1.25rem;
}

.faq-answer p {
    margin: 0;
}

.faq-answer p + p {
    margin-top: 0.75rem;
}

/* =========================================================================
 * Pages d'activité (Secours en événementiel, Conseil et stratégie santé)
 * ========================================================================= */
.activity-page h2 {
    margin: 2rem 0 1.25rem;
    font-size: 1.5rem;
}

.activity-points {
    margin: 0;
    padding: 0;
    list-style: none;
}

.activity-points li {
    position: relative;
    padding: 0.85rem 0 0.85rem 2rem;
    border-bottom: 1px solid var(--jg-line);
    color: var(--bs-secondary);
}

.activity-points .fa {
    position: absolute;
    top: 1.1rem;
    left: 0;
    color: var(--bs-primary);
}

.activity-strengths {
    padding: 2rem;
    color: var(--jg-blue-grey);
    background-color: var(--bs-secondary);
}

.activity-strengths h2 {
    margin-top: 0;
    color: var(--bs-white);
}

.activity-strengths ul {
    margin: 0 0 1.5rem;
    padding-left: 1.1rem;
}

.activity-strengths li {
    margin-bottom: 0.75rem;
}

.activity-strengths li::marker {
    color: var(--jg-accent);
}

.activity-strengths .formation-back {
    color: var(--jg-accent);
}

/* =========================================================================
 * Parcours : frise complète, diplômes, compétences
 * ========================================================================= */
.parcours-figures {
    margin: 0;
}

.parcours-title {
    margin-bottom: 2rem;
    font-size: 1.75rem;
}

.timeline-full {
    margin: 0;
    padding: 0;
    list-style: none;
}

.timeline-full li {
    position: relative;
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: 0 2.5rem;
    padding-bottom: 2rem;
}

/* Trait vertical et pastille, entre la période et le texte. */
.timeline-full li:before {
    content: "";
    position: absolute;
    top: 0.5rem;
    bottom: 0;
    left: calc(11rem + 1.25rem - 1px);
    width: 2px;
    background-color: var(--jg-line);
}

.timeline-full li:last-child:before {
    display: none;
}

.timeline-full li:after {
    content: "";
    position: absolute;
    top: 0.3rem;
    left: calc(11rem + 1.25rem - 8px);
    width: 16px;
    height: 16px;
    background-color: var(--bs-white);
    border: 3px solid var(--bs-primary);
    border-radius: 50%;
}

.timeline-full-period {
    color: var(--bs-primary);
    font-weight: 700;
    text-align: right;
}

.timeline-full-body h3 {
    margin-bottom: 0.25rem;
    font-size: 1.25rem;
}

.timeline-full-subtitle {
    margin-bottom: 0.5rem;
    color: var(--bs-secondary);
    font-weight: 600;
}

.timeline-full-body p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .timeline-full li {
        grid-template-columns: 1fr;
        padding-left: 2rem;
    }

    .timeline-full li:before {
        left: 7px;
    }

    .timeline-full li:after {
        left: 0;
    }

    .timeline-full-period {
        text-align: left;
    }
}

.parcours-skills {
    background-color: var(--jg-light);
}

.diploma-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.diploma-list li {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 0 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--jg-line);
}

.diploma-year {
    grid-row: span 2;
    color: var(--bs-primary);
    font-weight: 700;
}

.diploma-title {
    color: var(--bs-secondary);
    font-weight: 600;
}

.parcours-subsection {
    margin-top: 3.5rem;
}

/* Formation continue : cartes datées */
.course-grid,
.skill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.course-card,
.skill-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.5rem;
    background-color: var(--bs-white);
    border: 1px solid var(--jg-line);
    border-top: 3px solid var(--bs-primary);
}

.course-year {
    margin-bottom: 0.5rem;
    color: var(--bs-primary);
    font-size: 0.9375rem;
    font-weight: 700;
}

.course-title {
    color: var(--bs-secondary);
    font-weight: 600;
    line-height: 1.4;
}

.course-organisation {
    margin-top: 0.375rem;
    font-size: 0.9375rem;
}

/* Compétences : une carte par famille, compétences en pastilles */
.skill-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.skill-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.skill-pills li {
    padding: 0.375rem 0.875rem;
    color: var(--bs-secondary);
    font-size: 0.9375rem;
    line-height: 1.4;
    background-color: #ebf1f5;
    border-radius: var(--radius-sm);
}

/* =========================================================================
 * Contact et pages légales
 * ========================================================================= */
.contact-page .row > [class*="col-"] {
    display: flex;
}

.contact-card {
    flex: 1 1 auto;
    padding: 2rem 1.5rem;
    text-align: center;
    background-color: var(--jg-light);
    border-top: 4px solid var(--bs-primary);
}

.contact-card .fa {
    margin-bottom: 1rem;
    color: var(--bs-primary);
    font-size: 2rem;
}

.contact-card h2 {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

.contact-card p {
    margin: 0;
    overflow-wrap: anywhere;
}

.contact-card a {
    font-weight: 600;
}

.contact-tips {
    max-width: 46rem;
    margin-top: 4rem;
}

.contact-tips h2,
.legal-page h2 {
    margin: 2.5rem 0 1rem;
    font-size: 1.5rem;
}

.contact-tips h2 {
    margin-top: 0;
}

.legal-page {
    max-width: 52rem;
}

.legal-page h3 {
    margin: 1.75rem 0 0.75rem;
    font-size: 1.2rem;
}

.legal-page dl > div {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: 0 1.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--jg-line);
}

.legal-page dt {
    color: var(--bs-secondary);
    font-weight: 600;
}

.legal-page dd {
    margin: 0;
}

@media (max-width: 575.98px) {
    .legal-page dl > div {
        grid-template-columns: 1fr;
    }
}

.legal-updated {
    margin-top: 3rem;
    color: var(--bs-secondary);
    font-style: italic;
}

/* =========================================================================
 * Bouton et panneau « Cookies » (fixe, en bas à droite ; au-dessus de la barre d'actions
 * sur mobile). Le bouton de retour en haut est placé juste au-dessus.
 * ========================================================================= */
.cookie-info {
    position: fixed;
    right: 30px;
    bottom: 1.25rem;
    z-index: 6;
}

.cookie-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--bs-white);
    background-color: var(--bs-secondary);
    border: 2px solid var(--bs-white);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgb(1 26 69 / 0.3);
}

.cookie-toggle:hover,
.cookie-toggle:focus-visible {
    color: var(--bs-secondary);
    background-color: var(--bs-white);
    border-color: var(--bs-secondary);
}

.cookie-close:focus-visible,
.cookie-panel a:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
}

/* L'icône flotte au-dessus de fonds variés : contour bleu doublé d'un liseré blanc. */
.cookie-toggle:focus-visible {
    outline: 3px solid var(--bs-primary) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--bs-white);
}

.cookie-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.75rem);
    width: min(22rem, calc(100vw - 32px));
    padding: 1.25rem;
    color: var(--bs-secondary);
    font-size: 0.95rem;
    background-color: var(--bs-white);
    border-top: 4px solid var(--bs-primary);
    box-shadow: 0 6px 24px rgb(1 26 69 / 0.25);
}

.cookie-panel[hidden] {
    display: none;
}

.cookie-panel-title {
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.cookie-panel .btn {
    padding: 0.4rem 1.25rem;
}

.scrollingUp {
    bottom: 5rem;
}

@media (max-width: 991.98px) {
    .cookie-info {
        right: 16px;
        bottom: 72px;
    }
}

/* Mobile : panneau en bas d'écran, sur toute la largeur, hauteur limitée avec défilement interne. */
@media (max-width: 767.98px) {
    /* .cookie-info crée le contexte d'empilement : il passe devant l'en-tête fixe (999) et la barre d'actions. */
    .cookie-info {
        z-index: 1001;
    }

    .cookie-panel {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;
        width: auto;
        max-height: 70vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 1.25rem 16px;
        box-shadow: 0 -6px 24px rgb(1 26 69 / 0.25);
    }
}

@media (max-width: 991.98px) {
    .scrollingUp {
        bottom: 124px;
    }
}

/* =========================================================================
 * Enrichissement : volets, habilitations, engagements, compétences, témoignages,
 * disponibilités
 * ========================================================================= */
/* Habilitations et engagements : fond marine, lisibles (blanc 17:1, bleu-gris 10,5:1) */
.parcours-credentials {
    color: var(--jg-blue-grey);
    background-color: var(--bs-secondary);
}

.parcours-credentials .parcours-title {
    color: var(--bs-white);
}

.credential-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.credential-list li {
    padding: 1rem 0 1rem 1.25rem;
    border-left: 3px solid var(--jg-accent);
}

.credential-list li + li {
    margin-top: 0.75rem;
}

.credential-title {
    display: block;
    color: var(--bs-white);
    font-weight: 600;
}

.credential-detail {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.95rem;
}

.skill-family {
    margin: 0 0 1rem;
    color: var(--bs-primary);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Disponibilités */
.availability-section {
    padding-top: 3rem;
}

.availability-box,
.availability-note {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    margin: 0;
    padding: 1.25rem 1.5rem;
    color: var(--bs-secondary);
    background-color: var(--jg-light);
    border-left: 4px solid var(--bs-primary);
}

.availability-box .fa,
.availability-note .fa {
    color: var(--bs-primary);
}

.availability-note {
    max-width: 46rem;
    margin-top: 3rem;
    font-size: 0.95rem;
}

/* Témoignages : citation sobre, sans photo */
.testimonials-section {
    background-color: var(--jg-light);
}

.parcours-skills + .testimonials-section {
    background-color: var(--bs-white);
}

.testimonials-section .row > [class*="col-"] {
    display: flex;
}

.testimonial {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: 2rem;
    background-color: var(--bs-white);
    border: 1px solid var(--jg-line);
    border-top: 4px solid var(--bs-primary);
}

.testimonial blockquote {
    margin: 0 0 1.5rem;
}

.testimonial blockquote p {
    margin: 0;
    color: var(--bs-secondary);
    font-size: 1.0625rem;
    font-style: italic;
}

.testimonial blockquote p:before {
    content: "« ";
}

.testimonial blockquote p:after {
    content: " »";
}

.testimonial figcaption strong,
.testimonial figcaption span {
    display: block;
}

.testimonial figcaption strong {
    color: var(--bs-secondary);
}

.testimonial figcaption span {
    font-size: 0.9rem;
}

.testimonial-source {
    margin-top: 0.35rem;
    color: var(--bs-primary);
}

/* =========================================================================
 * Accessibilité (RGAA)
 * ========================================================================= */

/* Focus visible au clavier sur tout élément interactif (le thème supprime le contour des liens).
 * La couleur du contour dépend du fond qui l'entoure (WCAG 1.4.11, 3:1 minimum, voir
 * tests/contrast.php) : bleu principal sur fond clair (5,4:1), bleu d'accent sur fond marine
 * (6,4:1), blanc sur fond bleu (5,4:1). */
:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--bs-primary) !important;
    outline-offset: 2px;
}

/* Conteneurs à fond marine sur toute leur surface. */
.main-navigation :focus-visible,
.above-header :focus-visible,
.breadcrumb-area :focus-visible,
.slider-section :focus-visible,
.main-footer :focus-visible,
.parcours-credentials :focus-visible,
.activity-strengths :focus-visible {
    outline-color: var(--jg-accent) !important;
}

/* Exceptions : encart blanc du bouton « Demander un devis » dans la barre marine. */
.main-navigation .button-area :focus-visible {
    outline-color: var(--bs-primary) !important;
}

/* Conteneurs à fond bleu. */
.above-header-compact :focus-visible,
.footer-actions :focus-visible {
    outline-color: var(--bs-white) !important;
}

/* Lien d'évitement : visible au focus, au-dessus de tout. */
.skip-link:focus {
    z-index: 2000;
    outline: 3px solid var(--jg-accent) !important;
}

/* Titres du pied de page : h2 pour la hiérarchie, taille d'un intertitre. */
.main-footer .widget .widget-title {
    font-size: 1.25rem;
}

/* =========================================================================
 * Formes et arrondis (CLAUDE.md section 5)
 * Échelle d'arrondis : --radius-sm (champs, pastilles), --radius-md (boutons), --radius-lg (cartes,
 * images, encarts, panneau cookies). Les cercles (pastille de la frise, bouton Cookies, photo de profil)
 * restent des cercles.
 * ========================================================================= */
:root {
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
}

/* Boutons */
.btn,
.flectine-theme .btn {
    border-radius: var(--radius-md);
}

/* Pastilles (onglets de filtre, compétences) : --radius-sm, dans leurs propres règles. */

/* Cartes, encarts, images, panneau cookies */
.service-inner,
.info-inner,
.course-card,
.skill-card,
.formation-card,
.contact-card,
.testimonial,
.devis-inner,
.availability-box,
.cookie-panel,
.flectine-theme .service-section .service-inner {
    border-radius: var(--radius-lg);
}

.service-inner .image-box,
.service-section .image-box .image {
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.content-image img,
.formation-card img,
.content-image {
    border-radius: var(--radius-lg);
}

/* Icônes des cartes dans des formes arrondies */
.flectine-theme .service-section .service-content .icon,
.info-inner .info-icon {
    border-radius: var(--radius-lg);
}

@media (max-width: 767.98px) {
    /* Panneau cookies en bas d'écran : seuls les coins du haut sont arrondis. */
    .cookie-panel {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
}

/* Séparations en courbe douce entre les bandeaux marine et la section suivante : un arc de la couleur
 * de la section suivante (blanc, ou bleu très clair avant le catalogue) monte dans le bas du bandeau. */
.home-hero,
.breadcrumb-area,
.parcours-credentials {
    --curve-color: var(--bs-white);
}

.breadcrumb-area:has(+ .service-section),
.parcours-credentials:has(+ .parcours-skills) {
    --curve-color: var(--jg-light);
}

.home-hero:before,
.breadcrumb-area:before,
.parcours-credentials:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    z-index: 1;
    height: clamp(24px, 4vw, 56px);
    background-color: var(--curve-color);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    pointer-events: none;
}

/* Section marine du Parcours : même courbe en haut, de la couleur de la section précédente (blanc). */
.parcours-credentials {
    position: relative;
}

.parcours-credentials:before {
    content: "";
    position: absolute;
    top: -1px;
    right: 0;
    left: 0;
    z-index: 1;
    height: clamp(24px, 4vw, 56px);
    background-color: var(--bs-white);
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    pointer-events: none;
}

/* Formes organiques décoratives (partials/formes.php) : bleu-gris du logo à 8 %, sous le texte. */
.home-hero {
    isolation: isolate;
}

.deco-shapes {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.deco-shape {
    fill: var(--jg-blue-grey);
    opacity: 0.08;
}

/*
 * Biseau de l'en-tête (bloc blanc du logo, Flectine) : conservé, car c'est la signature du thème et il
 * rappelle la diagonale de la croix du logo ; sa pointe basse est seulement adoucie par un petit arc
 * (points en pourcentage : il suit la largeur du bloc, qui change selon l'écran).
 */
.flectine-theme .main-navigation .logo-box:before {
    clip-path: polygon(0 0, 100% 0, 85.4% 93%, 85% 96%, 84.4% 98.6%, 83.6% 100%, 0 100%);
}

/* =========================================================================
 * Animations discrètes (CLAUDE.md section 5) — DÉBUT
 * Uniquement transform et opacity ; une seule fois par élément ; aucun mouvement en boucle ni
 * parallaxe. Toutes sous « prefers-reduced-motion: no-preference » : rien ne bouge si la personne a
 * demandé de réduire les animations. Amélioration progressive : le contenu est visible par défaut ;
 * l'état masqué (.reveal-pending) n'existe que si site.js a ajouté la classe .js-anim à <html>.
 * ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
    /* Apparition au défilement : fondu + translation de 20 px, cascade de 80 ms entre cartes. */
    .js-anim .reveal-pending {
        opacity: 0;
        transform: translateY(20px);
    }

    .js-anim .reveal {
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .js-anim .reveal-delay-1 { transition-delay: 80ms; }
    .js-anim .reveal-delay-2 { transition-delay: 160ms; }
    .js-anim .reveal-delay-3 { transition-delay: 240ms; }
    .js-anim .reveal-delay-4 { transition-delay: 320ms; }
    .js-anim .reveal-delay-5 { transition-delay: 400ms; }

    /* Frise du Parcours : chaque trait se dessine quand son entrée apparaît. */
    .js-anim .timeline-full li:before {
        transform-origin: top;
        transition: transform 0.8s ease-out 0.2s;
    }

    .js-anim .timeline-full li.reveal-pending:before {
        transform: scaleY(0);
    }

    .js-anim .timeline-full li:after {
        transition: transform 0.4s ease-out;
    }

    .js-anim .timeline-full li.reveal-pending:after {
        transform: scale(0.4);
    }

    /* Survol des cartes : élévation, ombre douce (pseudo-élément en fondu), icône légèrement agrandie. */
    .service-inner,
    .info-inner,
    .course-card,
    .skill-card,
    .formation-card,
    .contact-card,
    .testimonial {
        position: relative;
        isolation: isolate; /* l'ombre (z-index -1) reste dans la carte, au-dessus du fond de la section */
    }

    .service-inner:after,
    .info-inner:after,
    .course-card:after,
    .skill-card:after,
    .formation-card:after,
    .contact-card:after,
    .testimonial:after,
    .volet-other:after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        box-shadow: 0 14px 30px rgb(1 26 69 / 0.14);
        opacity: 0;
        transition: opacity 0.25s ease-out;
        pointer-events: none;
    }

    .service-inner:hover:after,
    .info-inner:hover:after,
    .course-card:hover:after,
    .skill-card:hover:after,
    .formation-card:hover:after,
    .contact-card:hover:after,
    .testimonial:hover:after,
    .volet-other:hover:after {
        opacity: 1;
    }

    .service-inner,
    .info-inner,
    .course-card,
    .skill-card,
    .formation-card,
    .contact-card,
    .testimonial,
    .volet-other {
        transition: transform 0.25s ease-out;
    }

    .service-inner:hover,
    .info-inner:hover,
    .course-card:hover,
    .skill-card:hover,
    .formation-card:hover,
    .contact-card:hover,
    .testimonial:hover,
    .volet-other:hover {
        transform: translateY(-4px);
    }

    /* Une carte encore en attente d'apparition garde sa translation d'entrée au survol. */
    .js-anim .reveal-pending:hover {
        transform: translateY(20px);
    }

    .service-inner .icon,
    .info-inner .info-icon {
        transition: transform 0.25s ease-out;
    }

    .service-inner:hover .icon,
    .info-inner:hover .info-icon {
        transform: scale(1.08);
    }

    /* Images : léger zoom (1,05) au survol, dans leur cadre. */
    .service-section .image-box .image,
    .content-image,
    .formation-card .image {
        overflow: hidden;
    }

    .service-section .image-box img,
    .content-image img,
    .formation-card img {
        transition: transform 0.4s ease-out;
    }

    .service-inner:hover .image-box img,
    .content-image:hover img,
    .formation-card:hover img {
        transform: scale(1.05);
    }

    /* En-tête qui s'affine au défilement : le logo rétrécit en douceur quand la barre devient fixe. */
    .flectine-theme .main-navigation.is-sticky-menu {
        animation-duration: 0.35s;
    }

    .is-sticky-menu .logo img {
        transform-origin: left center;
        animation: jg-logo-shrink 0.35s ease-out 1 both;
    }

    @keyframes jg-logo-shrink {
        from { transform: scale(1.36); }
        to { transform: scale(1); }
    }
}
/* Animations discrètes — FIN */

/* Préférence « réduire les animations » : transitions et animations quasi instantanées. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================================
 * Images envoyées depuis l'admin (volets, fiches de formation)
 * ========================================================================= */
.content-image img,
.service-section .image-box img {
    display: block;
    width: 100%;
    height: auto;
}

.content-image {
    margin-bottom: 1.5rem;
}

.service-section .image-box img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

/* Sobriété : pas de voile ni de trait animé au survol des images du thème. */
.flectine-theme .service-section .image-box:before,
.flectine-theme .service-section .image-box:after {
    display: none;
}

/* =========================================================================
 * Revue responsive : téléphone (< 576 px), tablette (576 – 991 px), ordinateur (≥ 992 px)
 * ========================================================================= */

/* Mots très longs (adresses e-mail, liens) : retour à la ligne plutôt qu'un défilement horizontal. */
main p,
main li,
main dd,
main h1,
main h2,
main h3 {
    overflow-wrap: break-word;
}

/* Images et médias jamais plus larges que leur conteneur. */
main img,
main svg,
main video {
    max-width: 100%;
    height: auto;
}

/* Écrans d'ordinateur étroits : l'encart blanc du logo (largeur minimale du thème : 220 px)
 * dépassait de sa colonne et passait sous le menu. Le logo (150 px) y est réduit à 100 px : plus large que
 * l'encart (145 à 180 px), son bas était coupé par le biseau. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .flectine-theme .main-navigation .logo-box {
        min-width: 0;
        margin-right: 0;
    }

    .flectine-theme .main-navigation .logo-box img {
        max-width: 100px;
        height: auto;
    }

    .flectine-theme .above-header .widget-left {
        padding-left: 200px;
    }
}

/* Tablette : cartes et encadrés sur deux colonnes, marges intérieures réduites. */
@media (min-width: 576px) and (max-width: 991.98px) {
    .formation-facts,
    .activity-strengths {
        padding: 1.5rem;
    }
}

/* Téléphone : marges intérieures réduites, boutons pleine largeur dans les encarts. */
@media (max-width: 575.98px) {
    .formation-card,
    .formation-facts,
    .activity-strengths,
    .testimonial,
    .devis-inner,
    .contact-card {
        padding: 1.25rem;
    }

    .devis-inner .btn,
    .formation-facts .btn,
    .home-hero-actions .btn {
        width: 100%;
        text-align: center;
    }

    .st-py-default {
        padding: 3.5rem 0;
    }

    .st-pt-default {
        padding-top: 3.5rem;
    }

    .st-pb-default {
        padding-bottom: 3.5rem;
    }
}