/* ===============================
   [V] FONT-FACE MANROPE (LOCAL / RGPD)
   =============================== */

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope/Manrope-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope/Manrope-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope/Manrope-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope/Manrope-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ===============================
   [V] DESIGN TOKENS TANGRAM - PALETTE GLOBALE
   =============================== */

:root {
    /* Palette Tangram officielle */
    --tg-blue: #44499C;
    --tg-blue-dark: #2F2951;
    --tg-yellow: #F6B700;
    --tg-orange: #FF9E1B;
    --tg-purple: #6E2383;

    /* Alias utilisés dans tout le site */
    --tg-bg-dark: var(--tg-blue-dark);
    /* fonds sombres (hero, footer, etc.) */
    --tg-primary: var(--tg-blue);
    /* ou var(--tg-blue-dark) si tu préfères */
    --tg-accent: var(--tg-orange);
    /* CTA forts, outline, etc. */
    --tg-light-accent: var(--tg-yellow);
    /* pastilles, filets, soulignés */

    --tg-bg-soft: #F4F3EE;
    --tg-text-light: #ffffff;
    --tg-text-soft: #d9e1e5;

    /* Echelles typographiques Tangram */
    --tg-font-h2: 1.1rem;
    --tg-font-h3: 1rem;
    --tg-font-body: 0.9rem;
    --tg-font-small: 0.85rem;
}


/* ===============================
   [V] TYPOGRAPHIE & ACCENTS PAR CONTENU
   =============================== */

/* Typo globale Manrope */
html,
body,
.modular,
.modular h1,
.modular h2,
.modular h3,
.modular p,
.modular a,
.modular li {
    font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Transitions génériques (liens, boutons, cartes) */
a,
button,
.tg-card {
    transition:
        color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease,
        border-color 0.15s ease;
}

/* Modules de la home */
.modular {
    font-size: var(--tg-font-body);
}

/* Hiérarchie standard */
h1,
.herotangram h1 {
    font-weight: 600;
}

h2,
.modular h2 {
    font-weight: 600;
}

h3,
.modular h3 {
    font-weight: 500;
}

.modular p {
    font-weight: 400;
}

/* Titres de sections (Ce qui guide Tangram, Concrètement..., etc.) */
.modular-text h2,
.modular-features h2 {
    font-size: var(--tg-font-h2);
    line-height: 1.25;
}

/* Titres de blocs (Pédagogie, Pragmatisme, etc.) */
.modular-text h3,
.modular-features h3 {
    font-size: var(--tg-font-h3);
    line-height: 1.3;
}

/* Paragraphes standards */
.modular-text p,
.modular-features p {
    font-size: 0.9;
    line-height: 1.6;
}

/* Texte secondaire */
.tg-small {
    font-size: var(--tg-font-small);
    line-height: 1.5;
}

/* Souligné premium sur les accents de titres */
.modular h2 .accent,
.modular h3 .accent,
.tg-ateliers-title .accent,
.tg-project-title .accent,
.tg-apropos-title .accent,
.tg-apropos-areas-text h2 .accent,
.tg-apropos-expect h3 .accent {
    position: relative;
    background: none !important;
    border-bottom: none !important;
    padding-bottom: .15em;
    display: inline-block;
}

/* Trait dégradé */
.modular h2 .accent::after,
.modular h3 .accent::after,
.tg-ateliers-title .accent::after,
.tg-project-title .accent::after,
.tg-apropos-title .accent::after,
.tg-apropos-areas-text h2 .accent::after,
.tg-apropos-expect h3 .accent::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: .06em;
    height: 3px;
    width: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg,
            rgba(255, 158, 27, 0.85) 0%,
            rgba(255, 158, 27, 0.55) 55%,
            rgba(255, 158, 27, 0.0) 100%);
}

/* Comportement divers */
#to-start {
    /* Masquer la flèche de scroll en bas de page */
    display: none !important;
}

/* ===============================
   [V] HERO TANGRAM - HERO PRINCIPAL
   =============================== */

.herotangram.hero-parallax {
    position: relative;
    overflow: hidden;
    background: url('/user/images/hero-tangram.jpg');
    background-size: 100% auto;;
    background-position: 50% calc(0% + 30px);
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* ➜ CORRECTION HAUTEUR DYNAMIQUE : on utilise le padding en REM */
    /* 10rem en haut, 6rem en bas */
    /* Conserver le centrage vertical */
    display: flex;
    align-items: center;
    /* plein écran malgré le conteneur Grav */
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-bottom: 0 !important;
    padding-bottom: 2.5rem !important;
    /* ajuste si besoin */
    height: clamp(420px, 30.7vw, 590px);
    padding: 0;
    min-height: unset;
    background-color: #0b1220;
}

/* Voile sombre au-dessus de l'image */
.herotangram.hero-parallax::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.40), rgba(0, 0, 0, 0.65));
    z-index: 0;
}

/* Boîte centrale */
.herotangram .frame-box {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
    padding-top: 4rem;
    padding-bottom: 2.5rem;
}

.herotangram .frame-box>p:nth-of-type(2) {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Kicker */
.herotangram .hero-kicker {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--tg-light-accent);
    margin-bottom: 1rem;
    display: inline-block;
}

/* Titre principal */
.herotangram h1 {
    font-size: clamp(2rem, 3.5vw, 3.5rem);
    /* taille adaptable premium */
    font-weight: 700;
    line-height: 1.1;
    margin: 1rem 0 2rem;
    text-align: center;
    /* ➜ largeur complète */
    max-width: none !important;
    width: 100%;
    display: block;
    white-space: normal;
    /* laisse les retours à la ligne naturels */
}

/* Paragraphes du hero */
.herotangram p {
    font-size: 1rem;
    line-height: 1.7;
    max-width: none;
    width: 100%;
    margin: 0 auto 0.8rem;
}

/* Bouton CTA */
.herotangram .hero-cta {
    margin-top: 1.8rem;
}

/* Texte du hero en clair */
.herotangram h1,
.herotangram h2,
.herotangram h3,
.herotangram p,
.herotangram a {
    color: var(--tg-text-light);
}


/* ===============================
   [V] SECTIONS GÉNÉRALES & FONDS SOMBRES
   =============================== */

.tg-section {
    padding: 72px 0;
}

.tg-section--tight {
    padding: 48px 0;
}

.modular-text,
.modular.section {
    padding: 1rem 0;
}

.modular h2 {
    color: var(--tg-bg-dark);
    font-weight: 700;
}

/* Sections sombres */
.bg-dark,
.dark-section {
    background: var(--tg-bg-dark) !important;
    color: var(--tg-text-light) !important;
}

.bg-dark h2,
.bg-dark h3,
.bg-dark p,
.bg-dark a,
.dark-section h2,
.dark-section h3,
.dark-section p,
.dark-section a {
    color: var(--tg-text-light) !important;
}


/* ===============================
   [V] BOUTONS OUTLINE PREMIUM - CTA
   =============================== */

a.button,
.modular a.button,
.tg-programme-cta {
    background: transparent !important;
    color: var(--tg-blue-dark) !important;
    border: 2px solid var(--tg-blue-dark) !important;
    border-radius: 5px !important;
    /* moins arrondi */
    padding: 0.6rem 1.6rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

/* Boutons centrés dans les cartes */
.tg-col a.button,
.tg-card a.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 48px;
    line-height: 1 !important;
    padding: 0 1.8rem !important;
}

/* Effet blur discret pour le bouton du hero */
.herotangram .tg-programme-cta.hero-cta {
    background: rgba(15, 23, 42, 0.18) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-color: var(--tg-light-accent) !important;
    color: var(--tg-text-light) !important;
}

.herotangram .tg-programme-cta.hero-cta:hover {
    background: rgba(15, 23, 42, 0.26) !important;
    border-color: #ffffff !important;
    color: var(--tg-text-light) !important;
}


/* ===============================
   [V] CARDS (services, formations) - SERVICES & FORMATIONS
   =============================== */

.tg-services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.tg-card {
    background: #ffffff;
    border-radius: 5px;
    padding: 2rem;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    transition: 0.25s ease;
    border-left: 6px solid var(--tg-light-accent);
}

.tg-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
    border-left-color: var(--tg-yellow);
}

/* Cartes services */
.tg-service-card {
    border-left: none;
    position: relative;
}

/* Texte lisible dans les cartes sur fond sombre */
.bg-dark .tg-card h1,
.bg-dark .tg-card h2,
.bg-dark .tg-card h3,
.bg-dark .tg-card p,
.bg-dark .tg-card li,
.bg-dark .tg-card a {
    color: var(--tg-primary) !important;
}

.bg-gray {
    background: var(--tg-bg-soft) !important;
}


/* ===============================
   [V] COLONNES (3 piliers, etc.) - LAYOUT EN COLONNES
   =============================== */

/* Layout des colonnes */
.tg-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 2rem 0 0;
}

/* Carte colonne (ex : 3 piliers) */
.tg-col {
    background: #fafafa;
    border-radius: 5px;
    padding: 1.8rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    border-left: 5px solid var(--tg-light-accent);
    text-align: left;
    min-width: 0;
    overflow-wrap: break-word;
}

.tg-col h3 {
    margin-top: 0;
}

/* Bouton dans les colonnes */
.tg-col .button {
    display: inline-block;
    margin: 1.5rem auto 0;
}

/* ===============================
   [V] HEADER & MENU - NAVIGATION PRINCIPALE
   =============================== */

/* Header fixe en haut */
#header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    padding: 0;
    border-bottom: 1px solid #E5E8EB;
    background-color: #ffffff;
    z-index: 9999 !important;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    font-weight: 400;
}

/* Wrapper interne */
#header .wrapper {
    width: 100%;
    padding: 0.6rem 3rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Logo */
#logo {
    display: flex;
    align-items: center;
    margin: 0;
}

#logo img {
    height: 40px;
    margin: 0;
}

/* TANGRAM - logo header plus grand (si SVG) */
#header .navbar .navbar-brand svg {
    height: 35px !important;
    width: auto;
}

/* Bloc navigation */
#navbar {
    margin-left: 2.5rem;
}

#navbar ul {
    display: flex;
    align-items: center;
    gap: 1.8rem;
    margin: 0;
    padding: 0;
}

/* Liens du menu principal - typo uniquement (PAS de couleur ici) */
#header #navbar ul.navigation li a {
    font-size: 1rem;
    font-weight: 500;
    /* medium */
    letter-spacing: 0.01em;
    line-height: 1.2;
    padding: 0.2rem 0;
    text-decoration: none;
}

/* On ne définit plus de color ici, on laisse .dropmenu gérer */


/* ============================
   NAV TANGRAM - couleurs menu (desktop + mobile)
   ============================ */

/* Desktop - liens par défaut */
#header .dropmenu ul li>a {
    color: #2F2951;
    /* bleu foncé Tangram */
}

/* Desktop - hover / focus */
#header .dropmenu ul li>a:hover,
#header .dropmenu ul li>a:focus {
    color: #FF9E1B !important;
    /* orange Tangram au survol */
}

/* Desktop - lien actif */
#header .dropmenu ul li>a.active,
#header .dropmenu ul li>a[aria-current="page"],
#header .dropmenu ul li.active>a,
#header .dropmenu ul li.current>a,
#header .dropmenu ul li.selected>a {
    color: #391E6D !important;
    /* violet Tangram pour la page active */
    font-weight: 600;
}

/* Desktop - lien actif survolé : on garde le violet */
#header .dropmenu ul li.active>a:hover,
#header .dropmenu ul li.current>a:hover,
#header .dropmenu ul li.selected>a:hover {
    color: #391E6D !important;
}

/* Mobile - liens par défaut */
.treemenu li a {
    color: #2F2951;
}

/* Mobile - hover / focus */
.treemenu li a:hover,
.treemenu li a:focus {
    color: #FF9E1B !important;
}

/* Mobile - lien actif */
.treemenu li a.active {
    color: #391E6D !important;
}

/* ===============================
   [V] FOOTER TANGRAM - PIED DE PAGE
   =============================== */

/* Bloc footer global */
#footer {
    background: #ffffff;
    color: #111827;
    padding: 1.6rem 1rem 1.3rem;
    font-size: 0.9rem;
    border-top: 1px solid #E5E8EB;
}

#footer .wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

/* === Layout === */

.footer-main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 1.8rem 2.6rem;
}

/* ======================================================
   ─── Bloc Marque ───
   ====================================================== */

.footer-brand {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    flex: 1 1 50px;
}

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

/* bloc texte sous le logo */
.footer-brand-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* on masque le "Tangram" en gras
   pour ne garder que la baseline */
.footer-title {
    display: none;
}

.footer-subtitle {
    font-size: 0.8rem;
    color: #6B7280;
}

/* ======================================================
   ─── Colonnes Liens ───
   ====================================================== */

.footer-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 3rem;
}

.footer-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    min-width: 150px;
}

/* Titres colonnes */
.footer-heading {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: #A0A6AF;
}

/* Liens du footer
   - taille 0.9
   - pas de soulignement pointillé
*/
.footer-nav a {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--tg-blue-dark);
    text-decoration: none;
    border-bottom: none;
    box-shadow: none;
}

/* Comportement générique des liens dans le footer */
#footer a {
    font-size: 0.8rem;
    text-decoration: none;
    color: var(--tg-blue-dark);
}

/* Hover sobre */
#footer a:hover {
    color: var(--tg-purple);
    text-decoration: underline;
}

/* ======================================================
   ─── Copyright ───
   ====================================================== */

.footer-sub {
    margin-top: 1.1rem;
    text-align: center;
    color: #6B7280;
    font-size: 0.8rem;
    border-top: 1px solid #E5E8EB;
    padding-top: 0.7rem;
}

/* ======================================================
   ─── Responsive ───
   ====================================================== */

@media (max-width: 900px) {
    .footer-main {
        justify-content: center;
        gap: 1.6rem 2rem;
    }

    .footer-columns {
        gap: 1.8rem 2.2rem;
    }

    .footer-logo {
        margin-inline: auto;
        /* garantit le centrage visuel */
    }
}

@media (max-width: 640px) {
    .footer-brand {
        align-items: center;
        text-align: center;
        justify-content: center;
    }

    .footer-columns {
        flex-direction: column;
        align-items: center;
        gap: 1.4rem;
    }

    .footer-nav {
        min-width: auto;
    }
}

/* ===============================
   [V] BANDE PARALLAX PLEINE LARGEUR - STRIPE
   =============================== */

/* Module parallax : sans padding vertical ajouté */
.parallax-module {
    padding: 0 !important;
}

/* Bande qui sort du wrapper pour faire la pleine largeur */
.parallax-module .parallax-line {
    display: block;
    height: 60px;
    /* épaisseur : 40 / 60 / 80 si besoin */
    background-image: url('/user/images/hero-tangram.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    /* - parallax desktop */
    background-attachment: fixed;

    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
}

/* ===============================
   [V] SECTION "CE QUI GUIDE TANGRAM" - VALEURS TANGRAM
   =============================== */

/* Layout général de la section */
#tangram-values {
    max-width: 1100px;
    margin: 40px auto;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Titre + phrase d'accroche */
#tangram-values .values-heading {
    max-width: 100%;
    margin: 0 0 32px 0;
}

#tangram-values .values-heading h2,
.tg-ateliers-intro .tg-ateliers-title {
    font-size: var(--tg-font-h2);
    font-weight: 700;
    color: var(--tg-primary);
    margin: 0 0 8px 0;
}

#tangram-values .values-heading p,
.tg-ateliers-intro p {
    font-size: var(--tg-font-body);
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
}

/* Pile de cartes verticales */
#tangram-values .values-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Ligne = image à gauche + carte à droite */
#tangram-values .value-row {
    display: flex;
    align-items: center;
    gap: 24px;
    transition: all 0.3s ease-out;
}

/* Média (visuel) à gauche */
#tangram-values .value-media {
    width: 130px;
    height: 130px;
    border-radius: 5px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    align-self: center;
    filter: grayscale(0.2) contrast(1.1);
    transition: all 0.25s ease;
}

/* Effet média au survol de la ligne */
#tangram-values .value-row:hover .value-media {
    transform: scale(1.05) translateX(-4px);
    filter: grayscale(0) contrast(1.2);
}

/* Images spécifiques par valeur */
#tangram-values .value-media-pedago {
    background-image: url('/user/images/hero-val-peda.webp');
}

#tangram-values .value-media-pragma {
    background-image: url('/user/images/hero-val-prag.webp');
}

#tangram-values .value-media-confiance {
    background-image: url('/user/images/hero-val-conf.webp');
}

#tangram-values .value-media-sobriete {
    background-image: url('/user/images/hero-val-sobr.webp');
}

/* Carte dans la ligne (prend le reste de la largeur) */
#tangram-values .value-row .value-card {
    flex: 1 1 auto;
    width: 100%;
    transform: rotate(0.1deg);
    transition: all 0.25s ease-out;
}

/* Carte principale */
#tangram-values .value-card {
    position: relative;
    padding: 18px 22px 16px;
    border-radius: 5px;
    background-color: var(--tg-blue-dark);
    color: var(--tg-text-light);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Effet carte au survol */
#tangram-values .value-card:hover {
    transform: translateY(-4px) rotate(-0.5deg);
    box-shadow: none;
}

/* Filet couleur à gauche */
#tangram-values .value-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    border-radius: 0;
    background: #ffffff;
    opacity: 1;
    transition: all 0.2s ease;
}

#tangram-values .value-card:hover::before {
    background: var(--tg-light-accent);
    width: 8px;
}

/* Pastilles VALEURS - même gabarit que les formations, plus discret */
#tangram-values .value-card h3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0.55rem 0;
    padding: 0.22rem 1.05rem;
    border-radius: 5px;
    background: var(--tg-yellow);
    color: var(--tg-blue-dark);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(249, 250, 251, 0.35);
}

/* Effet léger au survol */
#tangram-values .value-card:hover h3 {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

#tangram-values .value-card p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #DCE0E5;
}

/* Variantes de couleur par valeur (filet) */
#tangram-values .value-card.pedago::before,
#tangram-values .value-card.pragma::before,
#tangram-values .value-card.confiance::before,
#tangram-values .value-card.sobriete::before {
    background: #ffffff;
}

/* Intégration dans le flux des modules */
.modular-row:has(#tangram-values),
.modular.section:has(#tangram-values),
.modular-text:has(#tangram-values),
section:has(#tangram-values) {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/****************************************************
 * [V] TANGRAM – SECTION FORMATIONS PREMIUM (STYLE MODERNE)
 ****************************************************/

/* ========== Layout & structure ========== */

/* Titre de section */
.tg-section-training {
    padding: 1.5rem 0 1rem;
}

.tg-section-training .tg-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.tg-section-training .tg-section-header {
    margin-bottom: 1.5rem;
}

.tg-section-training .tg-section-title {
    font-size: var(--tg-font-h2);
    font-weight: 700;
    margin: 0 0 0.35rem;
    color: var(--tg-primary);
}

.tg-section-training .tg-section-subtitle {
    max-width: 100%;
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.5;
    color: #4b5563;
}

/* Card principale : 2 colonnes */
.tg-training-card {
    display: grid;
    /* Le menu s'adapte à son contenu (min-content), la 2e colonne prend le reste (1fr) */
    grid-template-columns: minmax(220px, min-content) minmax(0, 1fr);
    gap: 2.25rem;
    align-items: stretch;
}

/* Colonne de contenu (carte sombre premium) */
.tg-training-content {
    background: var(--tg-blue-dark);
    border-radius: 5px;
    padding: 1rem 2.2rem 2rem;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
    position: relative;
    color: var(--tg-text-light);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Colonne décorative supprimée visuellement */
.tg-training-visual,
.tg-training-visual-inner {
    display: none;
}

/* ========== Menu de gauche (onglets) ========== */

.tg-training-menu {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

/* Onglet de menu */
.tg-training-tab {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    border-radius: 0.55rem;
    border: 1px solid #e0e0e0;
    /* Bordure neutre */
    background: #ffffff;
    color: var(--tg-bg-dark);
    /* Texte foncé */
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.08s ease;
}

.tg-training-tab:hover {
    background: #f8f8f8;
    transform: translateY(-1px);
    border-color: #d0d0d0;
}

/* Barre verticale accent pour l'onglet actif */
.tg-training-tab::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    border-radius: 0.55rem 0 0 0.55rem;
    background: transparent;
    opacity: 0;
    transition: all 0.2s ease;
}

.tg-training-tab.is-active::before {
    opacity: 1;
    background: var(--tg-light-accent);
}

/* Libellé principal */
.tg-tab-label-main {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--tg-bg-dark);
}

/* Icône triangle */
.tg-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    border: 1px solid var(--tg-light-accent);
    background: #ffffff;
    transition: all 0.2s ease;
}

.tg-training-tab.is-active .tg-tab-icon {
    border-color: var(--tg-light-accent);
    background: #ffffff;
}

/* État actif */
.tg-training-tab.is-active {
    background: #ffffff;
    color: var(--tg-bg-dark);
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
    transform: translateY(0);
}

.tg-training-tab.is-active .tg-tab-icon {
    border-color: var(--tg-purple);
    background: #ffffff;
}

.tg-training-tab.is-active .tg-tab-label-main {
    color: var(--tg-bg-dark);
}

/* ========== Contenus dans la carte sombre ========== */
/* Pastilles FORMATIONS - version compacte */
/* Pastille FORMATIONS - encore plus compacte */
.tg-training-kicker {
    display: inline-flex;
    width: fit-content;
    flex: 0 0 auto;
    align-self: flex-start;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    color: #111827;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--tg-yellow);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.22);
    margin: 0 0 6px 0;
}

.tg-training-title {
    margin: 0 0 1rem;
    line-height: 1.3;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--tg-text-light);
}

.tg-training-intro {
    margin: 0 0 1.6rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--tg-text-soft);
    /* Texte doux sur fond sombre */
    opacity: 0.9;
}

.tg-training-list {
    margin: 0 0 1.2rem;
    padding-left: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--tg-text-soft);
}

.tg-training-list li {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0.8rem;
    line-height: 1.55;
}

/* plus de puces visibles */
.tg-training-list li::before {
    content: none;
}

.tg-training-list li::marker {
    font-size: 1.1em;
}

/* ========== CTA FORMATIONS / ATELIERS / ACCOMPAGNEMENT ========== */

.tg-training-cta {
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* Bouton Outline (fond sombre – héros Formations) */
.tg-btn-outline,
.tg-btn-outline:link,
.tg-btn-outline:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 5px;
    border: 2px solid var(--tg-yellow);
    background: none;
    font-size: 0.88rem;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    line-height: 1.2;
    transition:
        color 0.16s ease;
}

/* Hover: seul le texte change de couleur */
.tg-btn-outline:hover {
    background: none;
    border-color: var(--tg-yellow);
    box-shadow: none;
    transform: none;
    color: var(--tg-yellow);
}


/* ========== Trait décoratif vertical & marqueur ========== */

.tg-section-training .tg-training-content {
    /* uniquement les ajustements spécifiques à cette section */
    padding-left: 2.5rem;
}

.tg-section-training .tg-training-content::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 3.3rem;
    left: 1.2rem;
    width: 2px;
    background: rgba(246, 183, 0, 1);
    /* trait jaune discret */
    border-radius: 2px;
    pointer-events: none;
}

.tg-section-training .tg-training-kicker {
    margin-bottom: 1rem;
}

.tg-section-training .tg-training-content::after {
    content: "";
    position: absolute;
    left: 1.2rem;
    /* même axe que le trait vertical */
    bottom: 3.3rem;
    /* juste au-dessus du CTA */
    width: 27px;
    height: 2px;
    background: rgba(246, 183, 0, 1);
}

/* Pastille dans la carte Formations (Comprendre / Agir / Avancer) */
.tg-section-training .tg-training-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    flex: 0 0 auto;
    margin: 0 0 0.7rem 0;
    padding: 0.22rem 1.05rem;
    border-radius: 5px;
    background: var(--tg-yellow);
    color: #111827;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.25);
}

/* ===============================
   [V] SECTION "CE QUE TANGRAM PEUT FAIRE POUR VOUS" – BENTO
   =============================== */

/* Layout global */
#tg-bento-services {
    max-width: 1100px;
    margin: 10px auto -30px;
    padding: 0 20px;
}

#tg-bento-services .tg-bento-header {
    margin-bottom: 32px;
}

#tg-bento-services h2 {
    font-size: var(--tg-font-h2);
    color: var(--tg-primary);
    margin: 0 0 8px 0;
}

#tg-bento-services .tg-bento-header p {
    font-size: var(--tg-font-body);
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
}

/* Grille 3x3 : A1+B1 / C1+C2 / A2+A3 */
#tg-bento-services .tg-bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* colonnes A, B, C */
    grid-auto-rows: minmax(230px, auto);
    /* 3 lignes */
    gap: 22px;
}

/* ADMIN : A1 + B1 */
#tg-bento-services .tg-bento-item--admin {
    grid-column: 1 / span 2;
    /* colonnes A et B */
    grid-row: 1;
    /* ligne 1 */
}

/* STRAT : C1 + C2 */
#tg-bento-services .tg-bento-item--strategie {
    grid-column: 3;
    /* colonne C */
    grid-row: 1 / span 2;
    /* lignes 1 et 2 */
}

/* AGENTS : A2 + A3 */
#tg-bento-services .tg-bento-item--agents {
    grid-column: 1;
    /* colonne A */
    grid-row: 2 / span 2;
    /* lignes 2 et 3 */
}

/* SOUVERAINETE : B3 + C3 */
#tg-bento-services .tg-bento-item--souverainete {
    grid-column: 2 / span 2;
    /* colonnes B et C */
    grid-row: 3;
    /* ligne 3 */
}

/* Tuile principale */
#tg-bento-services .tg-bento-item {
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    padding: 22px 20px 18px;
    color: #ffffff;
    /* fond uniforme violet */
    background: var(--tg-blue-dark);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: flex-start;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

/* plus d'image de fond, juste un léger voile interne si besoin */
#tg-bento-services .tg-bento-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.22);
    filter: saturate(1.05);
}

#tg-bento-services .tg-bento-item:hover::before {
    transform: translate3d(0, -6px, 0) scale(1.06);
    filter: brightness(1);
}

/* Contenu interne */
#tg-bento-services .tg-bento-content {
    position: relative;
    z-index: 1;
    max-width: 95%;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Kicker (pastille en haut de tuile) */
#tg-bento-services .tg-bento-kicker {
    display: inline-flex !important;
    width: fit-content !important;
    flex: 0 0 auto;
    align-self: flex-start;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: #111827;
    /* texte foncé */
    padding: 4px 12px;
    border-radius: 5px;
    background: var(--tg-yellow);
    /* jaune-orangé type hero */
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.25);
    margin-bottom: 10px;
}

/* Titres & texte des tuiles */
#tg-bento-services .tg-bento-item h3 {
    margin: 0 0 6px 0;
    font-size: 1rem;
    font-weight: 650;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
    margin-bottom: 0.6rem;
}

#tg-bento-services .tg-bento-item p {
    margin: 0 0 10px 0;
    margin-bottom: 1.4rem;
    font-size: 0.9rem;
    line-height: 1.45;
    max-width: 600px;
    color: rgba(249, 250, 251, 0.92);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Boutons “glass” dans les tuiles */
#tg-bento-services .tg-bento-item .button {
    border-color: rgba(255, 255, 255, 0.85) !important;
    color: #ffffff !important;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(4px);
    padding-inline: 1.3rem;
    font-size: 0.86rem;
    margin-top: auto;
    align-self: center;
    /* centré */
}

#tg-bento-services .tg-bento-item .button:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #ffffff !important;
}

/* Motifs Tangram ligne fine sur les bentos home */
#tg-bento-services .tg-bento-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 60%;
    opacity: 0.55;
    pointer-events: none;
}

/* Harmonisation des boutons dans les tuiles */
#tg-bento-services .tg-bento-item a.button,
#tg-bento-services .tg-bento-item .button {
    border: 2px solid rgba(246, 183, 0, 0.9) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    background: transparent !important;
}

#tg-bento-services .tg-bento-item a.button:hover,
#tg-bento-services .tg-bento-item .button:hover {
    background: rgba(246, 183, 0, 0.08) !important;
}

/* Motifs Tangram ligne fine sur les cartes services (home) */
#tg-bento-services .tg-bento-ornament {
    position: absolute;
    pointer-events: none;
    opacity: 0.55;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Cartes verticales : Formation + Outils métiers
   - on ajoute un peu d'espace en bas pour loger le motif entre texte et CTA */
#tg-bento-services .tg-bento-item--strategie .tg-bento-content,
#tg-bento-services .tg-bento-item--agents .tg-bento-content {
    padding-bottom: 10px;
}

#tg-bento-services .tg-bento-item--strategie .tg-bento-ornament,
#tg-bento-services .tg-bento-item--agents .tg-bento-ornament {
    left: 14%;
    right: 8%;
    height: 190px;
    bottom: 40px;
    background-position: center;
}

/* Cartes horizontales : Administratif + Souveraineté
   - motif plus petit, visible en entier à droite */
#tg-bento-services .tg-bento-item--admin .tg-bento-ornament,
#tg-bento-services .tg-bento-item--souverainete .tg-bento-ornament {
    top: 30px;
    bottom: 10px;
    right: 16px;
    width: 33%;
    background-position: right center;
}

/* Association des SVG par carte */
#tg-bento-services .tg-bento-item--admin .tg-bento-ornament {
    background-image: url('/user/images/hero-serv-admi.svg');
}

#tg-bento-services .tg-bento-item--strategie .tg-bento-ornament {
    background-image: url('/user/images/hero-serv-form.svg');
}

#tg-bento-services .tg-bento-item--agents .tg-bento-ornament {
    background-image: url('/user/images/hero-serv-outi.svg');
}

#tg-bento-services .tg-bento-item--souverainete .tg-bento-ornament {
    background-image: url('/user/images/hero-serv-souv.svg');
}

/****************************************************
 * [V] TANGRAM - SECTION CTA : DISCUTONS DE VOTRE PROJET
 ****************************************************/

/* ========== Layout global CTA ========== */

/* Section neutre (laisse le hero gérer la largeur) */
#tg-contact {
    padding: 0;
}

/* HERO FULL-WIDTH (full-bleed hack) */
#tg-contact .tg-cta-hero {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    padding: 1rem 0 1.6rem;
    background-image: url('/user/images/hero-tangram.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Voile sombre pour lisibilité */
#tg-contact .tg-cta-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(6, 12, 20, 0.65), rgba(6, 12, 20, 0.4));
    pointer-events: none;
}

/* Contenu au-dessus du voile */
#tg-contact .tg-cta-hero-overlay {
    position: relative;
    z-index: 1;
}

/* Carte centrée (texte seulement) */
#tg-contact .tg-cta-card {
    max-width: 880px;
    margin: 0 auto;
    padding: 2.7rem 2.8rem 2.4rem;
    text-align: center;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 1rem;
}

/* Titre + texte */
#tg-contact .tg-cta-title {
    margin: 0 0 0.9rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

#tg-contact .tg-cta-text {
    margin: 0 0 1.8rem;
    font-size: 0.98rem;
    line-height: 1.6;
    color: rgba(249, 250, 251, 0.9);
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}

/* Zone bouton */
#tg-contact .tg-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    justify-content: center;
}

/* Bouton Prendre RDV (outline orange) */
#tg-contact .tg-btn-cta,
#tg-contact .tg-btn-cta:link,
#tg-contact .tg-btn-cta:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 1.8rem;
    border-radius: 5px;
    /* bord jaune */
    border: 2px solid var(--tg-light-accent);
    background: rgba(15, 23, 42, 0.18);
    font-size: 0.98rem;
    font-weight: 600;
    /* texte blanc */
    color: #ffffff;
    text-decoration: none;
    line-height: 1.2;
    backdrop-filter: blur(6px);
    transition:
        background 0.16s ease,
        color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.1s ease,
        border-color 0.16s ease;
}

#tg-contact .tg-btn-cta:hover {
    background: rgba(15, 23, 42, 0.26);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
    /* bordure blanche au hover */
    border-color: #ffffff;
    color: #ffffff;
}


/* ===============================
   [V] FIX - supprimer la bande blanche sous les bandeaux full-width
   (Hero + bandeau CTA bas)
   =============================== */

/* 1) Le hero ne doit pas créer de blanc en bas */
.herotangram.hero-parallax {
    margin-bottom: 0 !important;
    padding-bottom: 2.5rem !important;
    /* ajuste selon goût (ex: 2rem ou 3rem) */
}

/* 2) Les wrappers contenant le hero : pas de padding/margin bas */
.modular-row:has(> .herotangram),
.modular:has(> .herotangram),
.modular-hero:has(> .herotangram),
section:has(> .herotangram),
.content-wrapper:has(.herotangram),
.wrapper:has(.herotangram) {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    background: transparent !important;
}

/* 3) Même logique pour le bandeau “Discutons...” (.tg-cta-hero) */
.modular-row:has(.tg-cta-hero),
.modular:has(.tg-cta-hero),
section:has(.tg-cta-hero),
.content-wrapper:has(.tg-cta-hero),
.wrapper:has(.tg-cta-hero) {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    background: transparent !important;
}

/* Fond global */
html,
body {
    background: var(--tg-bg-soft) !important;
    padding-top: 0px;
    /* compense la hauteur du header fixe */
}






/* ============================
   [V] INTRO PAGES SECONDAIRES (Formations / Services / À propos / Contact)
   ============================ */

.tg-page-intro,
.tg-page-intro--formations,
.tg-page-intro--services,
.tg-page-intro--apropos,
.tg-page-intro--contact {
    max-width: 1024px;
    margin: 0.8rem auto 2.5rem;
    padding: 0 1.5rem;
    text-align: center;
}

/* Titre principal (L’IA, avec méthode…, Agents IA…, etc.) */
.tg-page-intro h1,
.tg-page-intro--formations h1,
.tg-page-intro--services h1,
.tg-page-intro--apropos h1,
.tg-page-intro--contact h1 {
    font-size: clamp(2rem, 3.2vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--tg-blue-dark);
    /* violet Tangram */
    margin: 0 0 1rem;
}

/* Sous-titre (la ligne de texte sous le h1) */
.tg-page-intro p,
.tg-page-intro--formations p,
.tg-page-intro--services p,
.tg-page-intro--apropos p,
.tg-page-intro--contact p {
    font-size: 1.02rem;
    line-height: 1.7;
    color: #4b5563;
    max-width: 860px;
    margin: 0 auto;
}


/* ===============================
   [V] TANGRAM TABS - Premium (Chrome-like)
   =============================== */

/* Barre d’onglets */
.tg-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: flex-end;
    margin: 18px auto 0px;
    padding: 0 8px;
}

/* Un onglet (barre principale Formations/Ateliers/Accompagnement) */
.tg-tab {
    appearance: none;
    border: 1px solid rgba(17, 24, 39, 0.14);
    border-bottom: none;
    background: rgba(255, 255, 255, 0.65);
    color: rgba(17, 24, 39, 0.78);
    padding: 10px 16px;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    font-weight: 650;
    letter-spacing: 0.01em;
    cursor: pointer;
}

.tg-tab:hover {
    background: rgba(255, 255, 255, 0.9);
    color: rgba(17, 24, 39, 0.92);
}

/* Onglet actif = jaune Tangram */
.tg-tab.is-active {
    background: var(--tg-yellow);
    color: var(--tg-blue-dark);
    border-color: var(--tg-blue-dark);
}

/* Zone de contenu */
.tg-tabpanels {
    max-width: 980px;
    margin: 0 auto;
    padding: 0px 0px 0px;
}

/* Optionnel : onglet actif + hover = fond jaune mais texte reste violet */
.tg-tab.is-active:hover {
    color: var(--tg-blue-dark);
    border-color: var(--tg-blue-dark);
}

/* Panneaux: comportement avec JS actif */
.tg-panel {
    margin-bottom: 28px;
}

/* Avec JS actif: on cache les panneaux non actifs */
html.tg-js .tg-panel {
    display: none !important;
}

html.tg-js .tg-panel.is-active {
    display: block !important;
}

/* Carte de contenu (effet "studio") */
html.tg-js .tg-panel.is-active {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(17, 24, 39, 0.10);
    border-radius: 10px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
    padding: 26px 22px;
}

html.tg-js .tg-panel.is-active h2 {
    margin-top: 0;
    margin-bottom: 8px;
}

html.tg-js .tg-panel.is-active p {
    margin-bottom: 0;
}

/* Image principale en haut de chaque onglet (Formations / Ateliers / Accompagnement) */
.tg-tab-image {
    margin: 14px auto 22px;
    max-width: 1100px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(47, 41, 81, 0.15);
}

.tg-tab-image img {
    width: 100%;
    height: 260px;
    /* ajuste 220–300px si besoin */
    object-fit: cover;
    object-position: 50% 15%;
    /* remonte un peu le cadrage */
    display: block;
}

.tg-tab-image--title {
    position: relative;
}

.tg-tab-image--title::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(47, 41, 81, 0.55),
            rgba(47, 41, 81, 0.15) 40%,
            rgba(47, 41, 81, 0) 70%);
    pointer-events: none;
}

.tg-tab-title {
    position: absolute;
    left: 20px;
    bottom: 18px;
    z-index: 1;
}

.tg-tab-title span {
    font-size: clamp(1.4rem, 2vw, 1.9rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}













/* ===============================
   [V] FORMATIONS - catalogue en cartes (2 colonnes)
   =============================== */

/* Formations - Ateliers - Accompagnement : texte plus compact */
.tg-page-intro--formations p.tg-offers-intro {
    font-size: 0.9rem;
    line-height: 1.45;
    color: #4b5563;
    max-width: 780px;
    margin: 0.4rem auto 0.6rem;
    text-align: left;
    margin-left: auto;
    /* centré par défaut */
    margin-right: auto;
}

/* Variables par carte */
.tg-training-item {
    --tg-card-color-main: #44499C;
    /* défaut */
    --tg-card-header-grey: #EEF1F7;
    --tg-program-cta-color: var(--tg-yellow);
    /* bouton "Télécharger le programme" */
    --tg-training-preview-cta-color: var(--tg-yellow, #F6B700);
    /* CTA + liseré au survol */
}

.tg-training-item--f1 {
    --tg-card-color-main: #44499C;
    /* violet foncé */
}

.tg-training-item--f2 {
    --tg-card-color-main: #555FB0;
    /* violet bleuté */
}

.tg-training-item--f3 {
    --tg-card-color-main: #6B80CC;
    /* bleu moyen */
}

.tg-training-item--f4 {
    --tg-card-color-main: #8FA9F2;
    /* bleu ciel */
}

.tg-training-item--custom {
    --tg-card-color-main: #F6B700;
    /* jaune/orange Tangram */
    --tg-card-header-grey: #FFF6D0;
    /* bande grise teintée */
    --tg-program-cta-color: var(--tg-yellow);
    --tg-training-preview-cta-color: var(--tg-yellow, #F6B700);
}

/* Layout global du catalogue */
.tg-training-catalog {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 10px 32px;
}

.tg-training-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

/* Cartes fermées strictement carrées */
.tg-training-grid>details.tg-training-item:not([open]) {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
}

/* Détail ouvert = pleine largeur */
.tg-training-grid>details.tg-training-item[open] {
    grid-column: 1 / -1;
}

.tg-training-grid>details.tg-training-item[open] .tg-training-details {
    max-width: 900px;
    margin-inline: auto;
}

/* Cartes de formation */
.tg-training-item {
    position: relative;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        border-left-width 0.18s ease,
        border-left-color 0.18s ease;
    /* Liseré permanent à gauche (ouverte & fermée) */
    border-left: 5px solid var(--tg-card-color-main);
}

/* Hover (carte fermée ou ouverte) : liseré légèrement plus large + jaune Tangram */
.tg-training-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
    border-color: rgba(15, 23, 42, 0.08);
    border-left-color: var(--tg-training-preview-cta-color);
    border-left-width: 6px;
}

/* Carte ouverte : ombre renforcée, liseré conservé (couleur carte) */
.tg-training-item[open] {
    border-color: rgba(15, 23, 42, 0.12);
    border-left-color: var(--tg-card-color-main);
    border-left-width: 5px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.16);
}

/* Résumé générique */
.tg-training-summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 22px 20px;
    position: relative;
    background: #ffffff;
    transition: background 0.22s ease;
    overflow: hidden;
    z-index: 1;
}

/* Carte FERMÉE : bande grise moins haute (descend juste sous le titre) */
.tg-training-item:not([open]) .tg-training-summary {
    background: linear-gradient(to bottom,
            var(--tg-card-header-grey) 0,
            var(--tg-card-header-grey) 100px,
            #ffffff 100px,
            #ffffff 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* titre en haut, CTA en bas, texte au milieu */
    height: 100%;
}

/* Carte OUVERTE : bande grise sur toute la hauteur du résumé */
.tg-training-item[open] .tg-training-summary {
    background: var(--tg-card-header-grey);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

/* CTA carte fermée - largeur du texte uniquement */
.tg-training-summary .tg-expand-hint {
    align-self: center;
    /* évite l'étirement */
    width: auto;
    min-width: unset;
    max-width: fit-content;
}

/* Supprimer la flèche après "Voir le programme" */
.tg-training-summary .tg-expand-hint::after {
    content: none;
}

/* contenu au-dessus du SVG */
.tg-training-summary>* {
    position: relative;
    z-index: 2;
}

/* SVG - visible en fermé, centré dans l’espace ; en ouvert il remonte en haut à droite */
.tg-training-illu {
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    width: 170px;
    height: 170px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.5;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        top 0.25s ease,
        left 0.25s ease,
        right 0.25s ease,
        width 0.25s ease,
        height 0.25s ease;
    z-index: 1;
}

/* Carte FERMÉE : remonter légèrement le SVG pour le centrer
   visuellement entre le titre et le CTA */
.tg-training-item:not([open]) .tg-training-illu {
    top: 63%;
}

/* une image par carte – URLs à ajuster ensuite si besoin */
.tg-training-illu--f1 {
    background-image: url("/user/images/tang-bird.svg");
}

.tg-training-illu--f2 {
    background-image: url("/user/images/tang-bird.svg");
}

.tg-training-illu--f3 {
    background-image: url("/user/images/tang-bird.svg");
}

.tg-training-illu--f4 {
    background-image: url("/user/images/tang-bird.svg");
}

/* Visible et décalé en haut à droite quand la carte est ouverte */
.tg-training-item[open] .tg-training-illu {
    top: 60px;
    right: 32px;
    left: auto;
    width: 200px;
    height: 200px;
    opacity: 0.9;
    transform: translateY(0);
}

/* En-tête : durée / format / pitch */
.tg-training-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

/* Badge durée - couleur unie par carte */
.tg-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    text-transform: uppercase;
    padding: 4px 14px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    background: var(--tg-card-color-main);
    color: #F9FAFB;
    border: 1px solid rgba(15, 23, 42, 0.15);
}

/* "Présentiel / Visio" - plus discret */
.tg-meta {
    font-size: 0.8rem;
    color: rgba(15, 23, 42, 0.7);
    font-weight: 500;
    text-align: right;
}

/* Titre & pitch - titre en bouton jaune type "Diagnostic IA & Organisation" */
.tg-training-name {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.9rem;
    border-radius: 10px;
    background: var(--tg-yellow, #F6B700);
    border: 1px solid var(--tg-yellow, #F6B700);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #2F2951;
    margin: 12px 0 8px;
}

.tg-training-teaser {
    font-size: 0.95rem;
    color: rgba(15, 23, 42, 0.85);
    font-weight: 500;
    line-height: 1.55;
    margin: 0 0 12px;
}

/* Liste des points - sans puces visibles */
.tg-training-points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 4px;
}

/* Cartes fermées - on n’affiche que la première phrase (premier li) */
.tg-training-item:not([open]) .tg-training-points li:not(:first-child) {
    display: none;
}

.tg-training-points li {
    font-size: 0.9rem;
    color: rgba(15, 23, 42, 0.78);
    font-weight: 500;
    line-height: 1.5;
}

/* Cartes fermées - n’afficher que la phrase d'intro, masquer la liste */
.tg-training-item:not([open]) .tg-training-teaser+.tg-training-points {
    display: none;
}

/* CTA "Voir le programme" - toujours en bas de la carte fermée */
.tg-expand-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding: 9px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 10px;
    /* plus carré, comme les CTA ateliers */
    background: #ffffff;
    border: 1.5px solid var(--tg-bg-dark);
    color: var(--tg-bg-dark);
    transition:
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.12s ease;
}

.tg-expand-hint::after {
    content: "→";
    font-size: 1rem;
    transition: transform 0.18s ease;
}

.tg-expand-label--close {
    display: none;
}

.tg-training-item[open] .tg-expand-label--open {
    display: none;
}

.tg-training-item[open] .tg-expand-label--close {
    display: inline;
}

/* Hover : jaune Tangram pour le CTA */
.tg-training-summary:hover .tg-expand-hint {
    background: var(--tg-training-preview-cta-color);
    border-color: var(--tg-training-preview-cta-color);
    color: #2F2951;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
    transform: translateX(1px);
}

.tg-training-summary:hover .tg-expand-hint::after {
    transform: translateX(2px);
}

/* Quand la carte est OUVERTE : bouton reste jaune */
.tg-training-item[open] .tg-expand-hint {
    background: #ffffff;
    border-color: var(--tg-blue-dark);
    color: #2F2951;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
    margin-top: 16px;
    /* remet un comportement "normal" en carte ouverte */
}

/* Détails de la formation */
.tg-training-details {
    padding: 18px 22px 22px;
    background: #ffffff;
    animation: slideDownFade 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.tg-training-teaser {
    margin: 0 0 12px;
}

.tg-expand-hint {
    margin-top: 16px;
    /* ou ce que tu veux, mais sans auto */
}


/* Infos clés - boutons bleu foncé Tangram */
.tg-infos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 10px 0 18px;
}

.tg-info {
    padding: 9px 11px;
    border-radius: 10px;
    background: #2F2951;
    border: 1px solid rgba(15, 23, 42, 0.4);
}

/* Labels PUBLIC / PREREQUIS / DUREE en jaune Tangram */
.tg-info span {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: #F6B700;
    /* jaune Tangram */
    margin-bottom: 3px;
}

.tg-info strong {
    color: #F9FAFB;
    font-weight: 700;
}

/* Étapes / temps forts */
.tg-step {
    position: relative;
    padding-left: 16px;
    color: rgba(15, 23, 42, 0.82);
    font-weight: 600;
}

.tg-step::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--tg-card-color-main);
}

/* Zone actions : un seul bouton centré */
.tg-detail-actions {
    margin-top: 1.4rem;
    display: flex;
    justify-content: center;
}

/* "Télécharger le programme (PDF)" centré - reste orange */
.tg-programme-cta {
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid var(--tg-blue-dark);
    background: transparent;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--tg-blue-dark);
    transition:
        background 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;
    text-align: center;
}

.tg-programme-cta:hover {
    background: var(--tg-program-cta-color);
    color: #F9FAFB;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
}

/* Onglets internes (Objectifs, Programme, Modalités, Infos, Contact) */
.tg-tabbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 10px 0 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

/* Contenu des onglets : texte aligné à gauche, sans puces */
.tg-pane {
    line-height: 1.6;
    color: rgba(15, 23, 42, 0.78);
    text-align: left;
}

.tg-pane ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* Correction du rendu couleur sur Firefox sans supprimer l'élément */
@supports (-moz-appearance:none) {
    .tg-tangram-complex-svg {
        animation: none !important;
        filter: none !important;
    }
}




























/* ======================================================
   ─── NAVIGATION TANGRAM (BUMP & ÉLÉVATION CASCADE) ───
   ====================================================== */

/* 1. Animation de pulsation permanente (Bump) */
@keyframes tg-permanent-bump {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 4px 8px rgba(47, 41, 81, 0.08)); }
    50% { transform: scale(1.02); filter: drop-shadow(0 8px 15px rgba(47, 41, 81, 0.15)); }
}

.tg-tangram-complex-svg {
    width: 100%;
    max-width: 100%; 
    height: auto;
    overflow: visible;
    cursor: pointer;
    /* Activation du bump permanent */
    animation: tg-permanent-bump 3s ease-in-out infinite;
    transition: transform 0.3s ease;
}

/* On stoppe l'animation au survol pour la précision du clic */
.tg-tangram-complex-svg:hover {
    animation-play-state: paused;
}

/* 2. LOGIQUE D'ÉLÉVATION EN CASCADE */
/* On utilise un décalage standard de -12px */

/* Cas A : Si "COMPRENDRE" (initiation) est actif -> TOUT monte */
.tg-tangram-complex-svg[data-active-level="initiation"] .tg-nav-piece {
    transform: translateY(-12px);
}

/* Cas B : Si "MAÎTRISER" (exploration) est actif -> Milieu + Sommet montent */
.tg-tangram-complex-svg[data-active-level="exploration"] [data-level="exploration"],
.tg-tangram-complex-svg[data-active-level="exploration"] [data-level="creation"] {
    transform: translateY(-12px);
}

/* Cas C : Si "BÂTIR" (creation) est actif -> Seul le sommet monte */
.tg-tangram-complex-svg[data-active-level="creation"] [data-level="creation"] {
    transform: translateY(-12px);
}

/* 3. Feedback visuel du clic (Bordure jaune) */
.tg-nav-piece.is-active path {
    stroke: #F6B700 !important;
    stroke-width: 2px;
}

/* Reste du style (inchangé) */
.tg-nav-piece path {
    stroke: #ffffff;
    stroke-width: 1.2px;
    stroke-linejoin: round;
    transition: all 0.3s ease;
}
.fill-initiation { fill: #44499C; }
.fill-exploration { fill: #555FB0; }
.fill-creation { fill: #8FA9F2; }
.tg-nav-piece:hover path { stroke: #F6B700 !important; filter: brightness(1.1); }

.tg-nav-legend {
    font-weight: 700;
}























/* Règle de masquage pour le filtrage Tangram */
.tg-item-hidden {
    display: none !important;
}










































/* ============================
   [V] SECTION ATELIERS / ACCOMPAGNEMENT
   ============================ */

/* Intro section */
.tg-ateliers {
    margin-top: 3rem;
    margin-bottom: 4rem;
}

/* Intro au dessus des cartes - Formations / Ateliers / Accompagnement */
.tg-ateliers-intro {
    max-width: 960px;
    margin: 0 auto 2.5rem;
    text-align: left;
    /* aligné comme la home */
}

/* Titre et texte héritent maintenant des règles communes ci dessus
.tg-ateliers-intro .tg-ateliers-title {
    line-height: 1.25;
    margin-bottom: 0.85rem;
}

/* LAYOUT DES CARTES */

/* Layout principal Ateliers (page ateliers) */
.tg-workshops-layout {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    padding-left: 0;
}

.tg-workshops-list {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

/* Layout spécifique Accompagnement (cartes espacées) */
.tg-accompagnement .tg-ateliers-groups {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

/* CARTES D'ATELIERS - VARIABLES DE THÈME */
.tg-workshop-group {
    /* variables par défaut */
    --tg-workshop-accent: #44499c;
    --tg-workshop-band-height: 255px;

    /* bg des blocs "Dans le détail" (décliné par thématique) */
    --tg-workshop-details-bg: #e6e8f7;
    --tg-workshop-details-border: rgba(148, 163, 184, 0.7);

    --tg-workshop-cta-bg: rgba(68, 73, 156, 0.05);
    --tg-workshop-cta-bg-hover: rgba(68, 73, 156, 0.18);

    position: relative;
    margin: 0;
    padding: 1.9rem 2.3rem 2rem;
    border-radius: 10px;
    background-color: #ffffff;
    color: #111827;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-left: 9px solid var(--tg-workshop-accent);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
    overflow: hidden;
}

/* THÉMATIQUES - palette alignée sur FORMATIONS :
   bleu nuit -> indigo -> bleu -> bleu clair */

.tg-workshop-group--explore {
    /* bleu nuit légèrement violacé */
    --tg-workshop-accent: #2f2951;
    --tg-workshop-details-bg: #e4e6f4;
    --tg-workshop-details-border: rgba(47, 41, 81, 0.35);
}

.tg-workshop-group--improve {
    /* indigo Tangram */
    --tg-workshop-accent: #44499c;
    --tg-workshop-details-bg: #e2e6ff;
    --tg-workshop-details-border: rgba(68, 73, 156, 0.35);
}

.tg-workshop-group--build {
    /* bleu un peu plus lumineux */
    --tg-workshop-accent: #4b63c4;
    --tg-workshop-details-bg: #dde8ff;
    --tg-workshop-details-border: rgba(75, 99, 196, 0.35);
}

.tg-workshop-group--data {
    /* -> bleu plus clair (aligné fin de gradient formations) */
    --tg-workshop-accent: #8FA9F2;
    --tg-workshop-details-bg: #e3ecff;
    --tg-workshop-details-border: rgba(143, 169, 242, 0.45);
}

.tg-workshop-group--governance {
    /* -> bleu encore plus clair (gouvernance) */
    --tg-workshop-accent: #A9BDF7;
    --tg-workshop-details-bg: #F0F5FF;
    --tg-workshop-details-border: rgba(169, 189, 247, 0.45);
}

/* bande grise fixe en haut de la carte */
.tg-workshop-group::before {
    content: "";
    position: absolute;
    inset: 0;
    bottom: auto;
    height: var(--tg-workshop-band-height);
    background-color: #f3f4f6;
    border-radius: 20px 20px 0 0;
    pointer-events: none;
    z-index: 0;
}

/* contenu au-dessus de la bande + svg */
.tg-workshop-group>* {
    position: relative;
    z-index: 2;
}

/* Filigranes Tangram par carte */
.tg-workshop-group::after {
    content: "";
    position: absolute;
    top: 46px;
    right: 24px;
    width: 210px;
    height: 210px;
    background-repeat: no-repeat;
    background-size: contain;
    mix-blend-mode: multiply;
    opacity: 0.9;
    pointer-events: none;
    z-index: 1;
}

.tg-workshop-group--explore::after {
    background-image: url("/user/images/tang-bird.svg");
}

.tg-workshop-group--improve::after {
    background-image: url("/user/images/tang-bird.svg");
}

.tg-workshop-group--build::after {
    background-image: url("/user/images/tang-bird.svg");
}

.tg-workshop-group--data::after {
    background-image: url("/user/images/tang-bird.svg");
}

.tg-workshop-group--governance::after {
    background-image: url("/user/images/tang-bird.svg");
}

/* HEADER & TEXTE EDITORIAL */
.tg-workshop-group-header {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.3rem;
}

.tg-pill-label {
    align-self: flex-start;
    padding: 0.35rem 0.9rem;
    border-radius: 10px;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    border: 1px solid var(--tg-workshop-accent);
    background: var(--tg-workshop-accent);
    color: #ffffff;
}

/* titre éditorial */
.tg-workshop-group-header h3 {
    font-size: 1.45rem;
    line-height: 1.35;
    margin: 0;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.01em;
}

/* sous-texte éditorial */
.tg-workshop-group-header p {
    font-size: 0.96rem;
    line-height: 1.7;
    color: rgba(31, 41, 55, 0.9);
    margin: 0;
}

/* CONTENU ATELIER */
.tg-workshop-group-body {
    margin-top: 0.4rem;
}

.tg-workshop {
    margin-top: 0.9rem;
    text-align: left;
}

.tg-accompagnement .tg-workshop {
    text-align: center;
}

/* Titre d’atelier - bouton thématique (Explorer, Structurer…) */
.tg-workshop-title-wrapper {
    text-align: center;
    margin-bottom: 1.45rem;
}

.tg-workshop h4 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.9rem;
    border-radius: 10px;
    background: var(--tg-yellow);
    border: 1px solid var(--tg-yellow);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.22);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #2F2951;
    margin: 0;
}

/* META : Durée / Public / Lieu (ATELIERS + ACCOMPAGNEMENT) */
.tg-workshop-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 2.2rem;
    padding: 0;
    list-style: none;
}

/* Icône en haut, textes centrés dessous */
.tg-workshop-meta-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem;
    padding: 0.7rem 0.9rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(17, 24, 39, 0.10);
    font-size: 0.86rem;
    line-height: 1.4;
    color: rgba(17, 24, 39, 0.9);
    text-align: center;
}

.tg-meta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-bottom: 0.15rem;
}

.tg-meta-icon img,
.tg-meta-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    opacity: 0.85;
}

.tg-workshop-meta-item-label {
    display: block;
    width: 100%;
    font-size: 0.72rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 2px;
    color: var(--tg-blue-dark);
    /* jaune Tangram */
}

.tg-workshop-meta-item-value {
    font-weight: 700;
    font-size: 0.9rem;
    color: #111827;
}

/* CTA - "Discuter de cet atelier" */
.tg-workshop-cta,
.tg-workshop-cta:link,
.tg-workshop-cta:visited {
    display: block;
    width: max-content;
    margin: 1.1rem auto 0;
    padding: 0.55rem 1.9rem;
    border-radius: 10px;
    border: 1px solid var(--tg-blue-dark);
    background-color: var(#ffffff);
    color: --tg-blue-dark !important;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: none;
    transform: translateY(0);
    white-space: nowrap;
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.1s ease,
        border-color 0.18s ease;
}

.tg-workshop-cta:hover {
    background-color: #ffffff;
    border-color: var(--tg-workshop-accent);
    color: var(--tg-workshop-accent);
    box-shadow: none;
    transform: none;
}

/* Variante "sur-mesure" : on force aussi le texte en bleu foncé au survol */
.tg-workshop-cta--ghost,
.tg-workshop-cta--ghost:link,
.tg-workshop-cta--ghost:visited {
    display: block;
    width: max-content;
    margin: 1.1rem auto 0;
    padding: 0.55rem 1.9rem;
    border-radius: 10px;
    border: 1px solid #2F2951;
    background-color: transparent;
    color: #2F2951;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
    transform: translateY(0);
    white-space: nowrap;
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.1s ease,
        border-color 0.18s ease;
}

.tg-workshop-cta--ghost:hover {
    background-color: var(--tg-yellow, #F6B700);
    border-color: #2F2951 !important;
    color: #2F2951;
    /* on garde bien le texte foncé, pas blanc */
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
    transform: translateY(-1px);
}

/* BOUTON "VOIR / MASQUER LE DÉTAIL" + PANNEAU DE DÉTAIL */
.tg-workshop-toggle {
    margin-top: 0.9rem;
    padding: 0.25rem 0;
    border: none;
    background: transparent;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--tg-workshop-accent);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.tg-workshop-toggle:hover {
    color: #111827;
}

/* phrase d’accroche dans le bloc de détail */
.tg-workshop-intro {
    margin: 0.9rem 0 1.1rem;
    font-size: 1rem;
    line-height: 1.7;
    font-weight: 650;
    color: var(--tg-workshop-accent);
}

/* bloc de détail (couleur = var(--tg-workshop-details-bg)) */
.tg-workshop-details {
    position: relative;
    margin-top: 1.1rem;
    padding: 1.6rem 1.15rem 1.3rem;
    border-radius: 10px;
    background-color: var(--tg-workshop-details-bg);
    border: 1px solid var(--tg-workshop-details-border);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    font-size: 0.94rem;
    line-height: 1.7;
    color: rgba(17, 24, 39, 0.96);
    display: none;
}

/* ouverture contrôlée par aria-expanded */
.tg-workshop-toggle[aria-expanded="true"]+.tg-workshop-details {
    display: block;
}

/* label "Dans le détail" */
.tg-workshop-details::before {
    content: "Dans le détail";
    position: absolute;
    top: 0.55rem;
    left: 1.1rem;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 800;
    color: rgba(17, 24, 39, 0.85);
    padding: 0.2rem 0.8rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(17, 24, 39, 0.14);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.14);
}

/* premier paragraphe dans le bloc */
.tg-workshop-details>p:first-of-type {
    margin: 0.9rem 0 1rem;
}

/* liste interne - sans bullets */
.tg-workshop-details .tg-workshop-list {
    margin: 0.3rem 0 0;
    padding-left: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    border-top: 1px solid rgba(17, 24, 39, 0.18);
    padding-top: 0.6rem;
}

.tg-workshop-details .tg-workshop-list li {
    padding: 0.1rem 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.tg-workshop-details .tg-workshop-list li::before {
    content: none;
}

/* Tarif indicatif : centré */
.tg-workshop-details .tg-workshop-list li.tg-workshop-price-item {
    grid-column: 1 / -1;
    font-weight: 600;
    text-align: center;
    max-width: 480px;
    margin: 0.2rem auto 0;
}

/* CTA éventuel inside détails */
.tg-workshop-details .tg-workshop-cta {
    margin-top: 1.2rem;
}

/* CARTE "ATELIERS / ACCOMPAGNEMENT SUR-MESURE" */
.tg-workshop-custom {
    margin-top: 2.3rem;
}

.tg-workshop-custom-inner {
    position: relative;
    padding: 2.1rem 2.6rem 2.4rem;
    border-radius: 10px;
    background:
        radial-gradient(circle at top left,
            #f5f3ff 0%,
            #f8fafc 45%,
            #e5edf9 100%);
    border: 1px solid rgba(68, 73, 156, 0.35);
    border-left: 9px solid var(--tg-yellow);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.10);
    color: #111827;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    text-align: center;
}

.tg-workshop-custom-inner::after {
    content: "";
    position: absolute;
    top: 52px;
    right: 32px;
    width: 210px;
    height: 210px;
    background-image: url("/user/images/tang-bird.svg");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.9;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}

.tg-pill-label--custom {
    align-self: flex-start;
    margin-bottom: 0.2rem;
    /* style du badge SUR-MESURE */
    background: var(--tg-yellow);
    /* orange Tangram */
    border-color: #2F2951;
    color: #ffffff;
}

.tg-workshop-custom-inner h3 {
    font-size: 1.35rem;
    margin: 0;
    font-weight: 700;
    color: #111827;
    position: relative;
    z-index: 1;
}

.tg-workshop-custom-inner p {
    font-size: 0.96rem;
    line-height: 1.8;
    margin: 0;
    width: 100%;
    color: rgba(17, 24, 39, 0.94);
    position: relative;
    z-index: 1;
}

.tg-workshop-custom-inner p+p {
    margin-top: 0.4rem;
}

.tg-workshop-cta--ghost {
    margin-top: 1.1rem;
    padding-inline: 2.1rem;
    align-self: center;
}















/****************************************************
 * [V] TANGRAM - PAGE SERVICES (Agents IA et automatisation)
 ****************************************************/

/* ========== Section principale services ========== */

.tg-section-services {
    padding: 1.5rem 0 2.5rem;
}

/* Largeur standard Tangram (comme la home) */
.tg-section-services .tg-container,
.tg-project-flow .tg-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Illustration hero dans la page services (si utilisée) */
.tg-services-hero-visual {
    margin: 0 0 2rem;
    border-radius: 22px;
    overflow: hidden;
    background: #f3f4f6;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.tg-services-hero-visual img {
    display: block;
    width: 100%;
    height: auto;
}

/* Header de section Services : "Avancer avec l’IA" */
.tg-section-services .tg-section-header {
    margin-bottom: 2.2rem;
    text-align: center;
}

.tg-section-services .tg-section-title {
    font-size: clamp(1.9rem, 3vw, 2.3rem);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--tg-purple, #391E6D);
    margin: 0 0 0.75rem;
}

.tg-section-services .tg-section-subtitle-alt {
    max-width: 780px;
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.6;
    color: #4b5563;
}

/* Override CTA services vs spectre.min.css */
.tg-section-services .tg-services-content .tg-service-cta a.tg-service-cta-btn.tg-cta-primary,
.tg-section-services .tg-services-content .tg-service-cta a.tg-service-cta-btn.tg-cta-primary:link,
.tg-section-services .tg-services-content .tg-service-cta a.tg-service-cta-btn.tg-cta-primary:visited {
    display: flex;
    background-color: transparent !important;
    border: 1px solid var(--tg-yellow) !important;
    color: #ffffff !important;
    border-radius: 10px;
    padding: 0.55rem 1.9rem;
    box-shadow: none !important;
    text-align: center;
}

/* Hover */
.tg-section-services .tg-services-content .tg-service-cta a.tg-service-cta-btn.tg-cta-primary:hover {
    background-color: transparent !important;
    border-color: var(--tg-yellow) !important;
    color: var(--tg-yellow) !important;
}

/* CTA Services : centré et largeur au texte */
.tg-section-services .tg-services-content .tg-service-cta {
    margin-top: 1.2rem;
    display: flex;
    justify-content: center;
    /* centre le conteneur flex */
}

.tg-section-services .tg-services-content .tg-service-cta .tg-service-cta-btn {
    display: inline-flex !important;
    /* pas full width */
    width: auto !important;
    max-width: none;
    margin: 0 auto;
    /* double sécurité pour le centrage */
}

/* ========== Carte principale services - 2 colonnes ========== */

.tg-services-card {
    display: grid;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    gap: 2.4rem;
    align-items: stretch;
}

/* Colonne gauche - menu */
.tg-services-menu {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ========== Onglets menu services (liseré permanent) ========== */

.tg-services-tab {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    background: #ffffff;
    color: var(--tg-blue-dark);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
    transition: background .15s, border-color .15s, box-shadow .15s, transform .08s;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .06em;
    font-size: 0.8rem;
}

/* filet vertical gauche */
.tg-services-tab::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    border-radius: 12px 0 0 12px;
    background: transparent;
    opacity: 0;
    transition: all .2s ease;
}

/* Pastille flèche */
.tg-services-tab::after {
    content: "►";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, 0.16);
    font-size: 0.8rem;
}

/* Hover */
.tg-services-tab:hover {
    background: #f8f8f8;
    transform: translateY(-1px);
    border-color: #d0d0d0;
}

/* survol : liseré un peu plus fort */
.tg-services-tab:hover::before {
    background: rgba(255, 158, 27, 0.7);
    box-shadow: 0 0 0 1px rgba(255, 158, 27, 0.25);
}

/* onglet actif : liseré orange, shadow sobre */
.tg-services-tab.is-active {
    border-color: #e5e7eb;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.tg-services-tab.is-active::before {
    opacity: 1;
    background: var(--tg-accent);
}

.tg-services-tab.is-active::after {
    border-color: var(--tg-accent);
}

/* Onglet "Garde-fous" - style différent des services */
.tg-services-tab[data-service="service-lignes"] {
    background: #f9fafb;
    border-style: dashed;
    border-color: #e5e7eb;
    color: #4b5563;
    font-weight: 600;
}

/* Liseré gauche - plus discret, couleur violet */
.tg-services-tab[data-service="service-lignes"]::before {
    background: #2F2951;
    opacity: 0.4;
}

/* Etat actif du même onglet - tonalité différente des autres */
.tg-services-tab[data-service="service-lignes"].is-active {
    background: #fefce8;
    border-color: #FF9E1B;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.tg-services-tab[data-service="service-lignes"].is-active::before {
    background: #FF9E1B;
    opacity: 1;
}

/* ========== Colonne droite - carte sombre ========== */

.tg-services-content {
    background: var(--tg-bg-dark, #2f2951);
    border-radius: 10px;
    padding: 2rem 2rem 2rem;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.45);
    position: relative;
    color: var(--tg-text-light, #f9fafb);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Panels - fallback sans JS */
.tg-service-panel {
    margin: 0;
}

/* Avec JS: seul le panel actif est visible */
html.tg-js .tg-service-panel {
    display: none;
}

html.tg-js .tg-service-panel.is-active {
    display: block;
}

/* Ligne verticale jaune - bloc de droite Services */
.tg-services-content {
    position: relative;
}

/* Trait pleine hauteur, sans toucher au texte */
.tg-services-content::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1.4rem;
    /* ajuste si tu veux la rapprocher/éloigner */
    width: 2px;
    background: var(--tg-light-accent);
    z-index: 0;
    pointer-events: none;
}

/* Le contenu passe au-dessus */
.tg-services-content .tg-service-panel {
    position: relative;
    z-index: 1;
}

/* Ornements Tangram - page Services (petit motif en haut à droite) */
.tg-services-content .tg-service-panel::after {
    content: "";
    position: absolute;
    top: -1rem;
    right: -1.5rem;
    width: 120px;
    height: 120px;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain;
    opacity: 0.75;
    pointer-events: none;
}

/* Association des SVG par service */
#service-admin::after {
    background-image: url('/user/images/home-s1.svg');
}

#service-pedago::after {
    background-image: url('/user/images/home-s2.svg');
}

#service-agents::after {
    background-image: url('/user/images/home-s3.svg');
}

#service-souverainete::after {
    background-image: url('/user/images/home-s4.svg');
}

/* Pas de motif sur le bloc Garde-fous */
#service-lignes::after {
    content: none;
}

/* Badge SERVICE (jaune style Bento) */
.tg-service-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.22rem 0.9rem;
    margin: 0 0 0.9rem;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 10px;
    background: var(--tg-yellow, #f6b700);
    border: 1px solid var(--tg-yellow, #f6b700);
    color: var(--tg-blue-dark, #2f2951);
}

.tg-service-title {
    margin: 0 0 0.6rem;
    font-size: var(--tg-font-h2);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--tg-text-light, #ffffff);
}

/* Intro */
.tg-service-intro {
    margin: 0 0 1.3rem;
    font-size: var(--tg-font-body);
    line-height: 1.6;
    color: var(--tg-text-soft, #e5e7eb);
    opacity: 0.96;
}

.tg-service-list {
    list-style: none !important;
    margin: 0;
    padding-left: 0;
    font-size: var(--tg-font-body);
    line-height: 1.6;
    color: var(--tg-text-soft, #e5e7eb);
}

.tg-service-list li {
    list-style: none;
    margin-bottom: 0.6rem;
    position: relative;
    padding-left: 0;
}

.tg-service-list li::before {
    content: "•";
    color: var(--tg-light-accent, #ff9e1b);
    font-weight: 700;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    position: absolute;
    left: 0;
}

/* Si un style ajoute des puces via ::marker ou ::before */
.tg-service-list li::marker,
.tg-service-list li::before {
    content: none !important;
}

/* CTA dans la carte SERVICES */
.tg-service-cta {
    margin-top: 1.2rem;
}

/* CTA unifié (style bouton jaune) */
.tg-cta-primary,
.tg-cta-primary:link,
.tg-cta-primary:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.9rem;
    border-radius: 10px;
    border: 1px solid var(--tg-blue-dark);
    background-color: var(#ffffff) !important;
    color: var(--tg-blue-dark, #2F2951);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: none;
    transform: translateY(0);
    white-space: nowrap;
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.1s ease,
        border-color 0.18s ease;
}

.tg-cta-primary:hover {
    background-color: #ffffff;
    border-color: var(--tg-yellow);
    color: var(--tg-yellow);
    box-shadow: none;
    transform: none;
}

/* CTA projet (bouton sous les étapes) */
.tg-project-cta {
    margin-top: 1.2rem;
    display: flex;
    justify-content: center;
}

.tg-project-cta a {
    width: auto;
    max-width: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ========== Bloc "Déroulé de votre projet" ========== */

.tg-project-flow {
    padding: 0 0 3rem;
}

.tg-project-flow-inner {
    background: #ffffff;
    border-radius: 10px;
    padding: 2.6rem 2.7rem 2.4rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.tg-project-header {
    max-width: 760px;
    margin-bottom: 1.8rem;
}

/* Titre de section (Déroulé, Cadre & méthode) */
.tg-project-title {
    margin: 0 0 0.7rem;
    font-size: var(--tg-font-h2);
    /* même taille que "L'IA au service de vos métiers" */
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--tg-primary);
}

.tg-project-intro {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.6;
    color: #4b5563;
}

/* Etapes */
.tg-project-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.4rem;
    margin-bottom: 1.2rem;
}

.tg-project-step {
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.tg-project-step-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.6rem;
}

.tg-project-step-number {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: #ffffff;
    background: var(--tg-accent, #ff9e1b);
    margin-right: 0.4rem;
    flex-shrink: 0;
}

.tg-project-step-line {
    flex: 1;
    height: 3px;
    border-radius: 10px;
    background: linear-gradient(to right, var(--tg-accent, #ff9e1b), rgba(255, 158, 27, 0.05));
}

.tg-project-step.is-last .tg-project-step-line {
    background: linear-gradient(to right, var(--tg-accent, #ff9e1b), rgba(255, 158, 27, 0.35));
}

.tg-project-step-title {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
}

.tg-project-step-text {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.6;
    color: #6b7280;
}

.tg-project-step-toggle {
    margin-top: auto;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    opacity: 0.9;
}

.tg-project-step.is-open .tg-project-step-toggle {
    opacity: 1;
}

/* panneau détail pleine largeur */
.tg-step-panel {
    margin-top: 1rem;
    margin-bottom: 1.2rem;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.tg-step-panel-inner {
    padding: 1.2rem 1.4rem 1.25rem;
}

.tg-step-panel-content h4 {
    margin: 0 0 0.6rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: #111827;
}

.tg-step-panel-content p {
    margin: 0;
    color: #4b5563;
    line-height: 1.75;
}

.tg-step-panel.tg-panel-flash {
    box-shadow: 0 0 0 3px rgba(255, 158, 27, 0.25), 0 16px 34px rgba(15, 23, 42, 0.08);
}

/* ===== Bloc modalités pratiques sous les étapes ===== */

.tg-project-modalities {
    margin-top: 1.8rem;
}

.tg-project-modalities-card {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    padding: 1.5rem 1.7rem 1.4rem;
    border-left: 5px solid #44499C;
}

.tg-project-modalities-title {
    margin: 0 0 0.55rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #111827;
}

.tg-project-modalities-intro {
    margin: 0 0 0.7rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #4b5563;
}

.tg-project-modalities-list {
    margin: 0;
    padding-left: 1.15rem;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #4b5563;
}

.tg-project-modalities-list li {
    margin-bottom: 0.5rem;
}

.tg-project-modalities-list li:last-child {
    margin-bottom: 0;
}

/* ========== Cadre & méthode (grille 2x2, cartes "carrées") ========== */

.tg-context-grid {
    display: grid;
    gap: 18px;
}

/* Grille 2x2 + 1 carte pleine largeur (modalités) */
.tg-context-grid--quad {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

/* Base carte (type formation : border-left permanent) */
.tg-context-grid--quad .tg-context-card {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 10px;
    padding: 0 0 1.3rem;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
    border-left: 5px solid var(--tg-card-color-main, #44499C);
    overflow: hidden;
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        border-left-width 0.18s ease,
        border-left-color 0.18s ease;
}

/* Hover = liseré jaune + 6px, comme formations */
.tg-context-grid--quad .tg-context-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
    border-color: rgba(15, 23, 42, 0.10);
    border-left-color: var(--tg-yellow, #F6B700);
    border-left-width: 6px;
}

/* Thèmes couleurs */
.tg-context-grid--quad .tg-cadre--f1 {
    --tg-card-color-main: #44499C;
}

.tg-context-grid--quad .tg-cadre--f2 {
    --tg-card-color-main: #555FB0;
}

.tg-context-grid--quad .tg-cadre--f3 {
    --tg-card-color-main: #6B80CC;
}

.tg-context-grid--quad .tg-cadre--f4 {
    --tg-card-color-main: #8FA9F2;
}

.tg-context-grid--quad .tg-cadre--f5 {
    --tg-card-color-main: #FF9E1B;
}

/* Carte "Modalités de mission" sur toute la largeur */
.tg-context-grid--quad .tg-cadre--f5 {
    grid-column: 1 / -1;
}

/* Image de tête */
.tg-context-visual {
    position: relative;
    height: 180px;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
}

/* Faire passer l’image sous le liseré gauche (pas de jour blanc) */
.tg-context-grid--quad .tg-context-visual {
    margin-left: -5px;
    width: calc(100% + 5px);
}

.tg-context-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Voile pour lisibilité du titre */
.tg-context-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(15, 23, 42, 0.75),
            rgba(15, 23, 42, 0.25) 40%,
            rgba(15, 23, 42, 0) 75%);
    pointer-events: none;
}

/* Titre posé sur l’image */
.tg-context-grid--quad .tg-context-title {
    position: absolute;
    left: 18px;
    bottom: 16px;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    z-index: 1;
}

/* Texte sous l’image */
.tg-context-grid--quad .tg-context-card>p {
    margin: 0;
    padding: 1.1rem 1.4rem 0.2rem;
    line-height: 1.7;
}

#service-lignes .tg-service-list strong {
    font-weight: 400 !important;
    color: #ffffff !important;
    font-size: 1rem !important;
}








/* ===============================
   PAGE A PROPOS - TANGRAM
   =============================== */

.tg-section.tg-apropos-intro {
    padding: 40px 0 40px;
}

.tg-apropos-intro .tg-container {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Grille principale : photo à gauche, texte à droite */
.tg-apropos-grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 2.5rem;
    align-items: flex-start;
}

/* Photo */
.tg-apropos-photo img {
    width: 100%;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    display: block;
}

/* Colonne texte */
.tg-apropos-content {
    max-width: 100%;
}

/* Titre */
.tg-apropos-title {
    font-size: var(--tg-font-h2);
    font-weight: 700;
    color: var(--tg-primary);
    margin: 0 0 0.6rem;
}

.tg-apropos-name {
    margin: 0 0 0.8rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
}

/* Ligne sous le titre */
.tg-apropos-line {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #4b5563;
    margin: 0 0 1.4rem;
}

.tg-apropos-content p {
    margin-bottom: 0.8rem;
}

/* Liste bullets */
.tg-apropos-list {
    margin: 1.1rem 0 1.4rem;
    padding-left: 1.2rem;
}

.tg-apropos-list li {
    margin-bottom: 0.5rem;
}

/* Compétences clés - pleine largeur dans la section */
.tg-apropos-highlights {
    max-width: 980px;
    margin: 1.6rem auto 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.tg-apropos-highlight {
    background: #ffffff;
    border-radius: 10px;
    padding: 1rem 1.1rem 0.9rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    border-left: 4px solid var(--tg-blue-dark);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.tg-apropos-highlight:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
    border-left-color: var(--tg-light-accent);
}

/* Titre de carte façon "bouton jaune" comme ailleurs */
.tg-apropos-highlight-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 10px;
    background: var(--tg-yellow);
    color: #111827;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    margin: 0 0 0.45rem;
}

.tg-apropos-highlight-text {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
}

/* Encadré "Cadre d’intervention" - pleine largeur aussi */
.tg-apropos-expect {
    max-width: 980px;
    margin: 1.8rem auto 0.8rem;
    padding: 1.6rem 1.6rem 1.3rem;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
    border-left: 6px solid var(--tg-blue-dark);
}

.tg-apropos-expect h3 {
    margin: 0 0 0.9rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--tg-primary);
}

.tg-apropos-expect ul {
    margin: 0;
    padding-left: 1.2rem;
}

.tg-apropos-expect li {
    margin-bottom: 0.85rem;
    line-height: 1.55;
}

.tg-apropos-expect strong {
    color: var(--tg-blue-dark);
}

/* Zones d’intervention */
.tg-section.tg-apropos-areas {
    padding: 30px 0 40px;
}

.tg-apropos-areas .tg-container {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.tg-apropos-areas-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr);
    gap: 1.2rem;
    align-items: center;
}

.tg-apropos-areas-text h2 {
    font-size: var(--tg-font-h2);
    font-weight: 700;
    color: var(--tg-primary);
    margin: 0 0 0.8rem;
}

.tg-apropos-areas-text p {
    margin: 0 0 0.9rem;
}

.tg-apropos-areas-text ul {
    margin: 0;
    padding-left: 1.2rem;
}

.tg-apropos-areas-text li {
    margin-bottom: 0.4rem;
}

/* Carte */
.tg-apropos-map img {
    max-height: 250px;
    /* environ moitié de ce que tu avais */
    width: auto;
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
    display: block;
    margin-left: 30px;
}

/* Responsive */
@media (max-width: 1024px) {
    .tg-apropos-grid {
        grid-template-columns: 1fr;
    }

    .tg-apropos-photo {
        max-width: 360px;
        margin: 0 auto 1.4rem;
    }

    .tg-apropos-highlights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tg-apropos-areas-grid {
        grid-template-columns: 1fr;
    }

    .tg-apropos-map {
        max-width: 420px;
        margin: 0 auto;
        display: flex;
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .tg-apropos-highlights {
        grid-template-columns: 1fr;
    }

    .tg-apropos-expect {
        padding: 1.3rem 1.2rem 1.1rem;
    }
}















/****************************************************
 * [V] PAGE CONTACT TANGRAM
 ****************************************************/

/* Intro contact */

/* Intro page générique (services, contact, etc.) */

.tg-page-intro--services,
.tg-page-intro--contact {
    padding: 1rem 0 1rem;
    text-align: center;
    max-width: 720px;
    margin: 0 auto 1.2rem auto;
}

.tg-page-intro--contact h1 {
    font-size: clamp(2rem, 3vw, 2.4rem);
    line-height: 1.2;
    margin-bottom: 0.6rem;
    color: #2F2951;
}

.tg-page-intro--contact p {
    margin: 0;
    font-size: 0.95rem;
    color: #4B5563;
}

.tg-page-intro--contact .tg-page-intro-meta {
    margin-top: 0.45rem;
    font-size: 0.9rem;
    color: #6B7280;
    white-space: nowrap;
}

.tg-page-intro--contact .tg-page-kicker {
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.tg-page-intro--contact h1 {
    font-size: clamp(2rem, 3vw, 2.6rem);
    line-height: 1.2;
    margin-bottom: 1rem;
}

.tg-page-intro--contact .tg-page-intro-text {
    max-width: 680px;
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.tg-page-intro--contact .tg-page-intro-meta {
    font-size: 0.95rem;
    opacity: 0.9;
}

/* Layout principal contact */

.tg-section-contact {
    padding: 2rem 0 1.5rem;
}

.tg-contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
    gap: 2.5rem;
    align-items: flex-start;
}

/* Bloc infos */

.tg-contact-info h2 {
    margin: 0 0 0.9rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--tg-primary);
}

.tg-contact-info p {
    margin-bottom: 0.75rem;
}

.tg-contact-info-subtitle {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0.5rem 0 0.4rem;
}

.tg-contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.tg-contact-list li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
}

.tg-contact-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #F6B700, #FF9E1B);
}

/* Carte formulaire */

.tg-contact-form-card {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    padding: 0.5rem 1.75rem 1.6rem;
    border: 1px solid #E5E7EB;
    border-left: 4px solid #44499C;
}

.tg-contact-form-card h2 {
    font-size: 1.3rem;
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Formulaire */

.tg-contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tg-form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

.tg-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.tg-form-field label,
.tg-form-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: #111827;
}

.tg-contact-form input[type="text"],
.tg-contact-form input[type="email"],
.tg-contact-form input[type="tel"],
.tg-contact-form select,
.tg-contact-form textarea {
    border-radius: 10px;
    border: 1px solid #D1D5DB;
    padding: 0.65rem 0.75rem;
    font-size: 0.8rem;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    background-color: #ffffff;
}

.tg-contact-form textarea {
    resize: vertical;
}

.tg-contact-form input:focus,
.tg-contact-form select:focus,
.tg-contact-form textarea:focus {
    outline: none;
    border-color: #44499C;
    box-shadow: 0 0 0 2px rgba(68, 73, 156, 0.18);
    background-color: #F9FAFB;
}

/* Toast - confirmation formulaire (contact) */
.tg-form-alert--success.tg-toast,
.tg-form-alert--error.tg-toast {
    position: fixed;
    z-index: 9999;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: min(720px, calc(100vw - 2rem));
    padding: 1rem 1.25rem;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    text-align: center;
}

/* Visible */
.tg-form-alert--success.tg-toast.is-visible,
.tg-form-alert--error.tg-toast.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Success = vert */
.tg-form-alert--success.tg-toast {
    background: #16a34a;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, .25);
}

/* Error = rouge (au cas ou) */
.tg-form-alert--error.tg-toast {
    background: #dc2626;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, .25);
}

/* Radios */

.tg-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
}

.tg-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.tg-radio input {
    accent-color: #44499C;
}

/* Consentement */

.tg-contact-consent label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: #4B5563;
    cursor: pointer;
}

.tg-contact-consent input[type="checkbox"] {
    margin-top: 0.15rem;
    accent-color: #F6B700;
}

.tg-contact-consent a {
    color: #44499C;
    text-decoration: underline;
}

/* Bouton envoyer (réutilise tg-programme-cta) */

.tg-contact-submit {
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Titres Contact → même logique visuelle que tg-apropos-expect */
.tg-contact-title {
    margin: 0 0 0.9rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--tg-primary);
}

.tg-contact-title.--tg-font-h2 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--tg-primary) !important;
}

/* Section rendez-vous */

.tg-section-contact-rdv {
    padding: 1.5rem 0 2rem;
}

.tg-rdv-card {
    border-radius: 10px;
    padding: 1.2rem 1.75rem 1rem;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    margin-top: 0;
}

.tg-rdv-text h2 {
    margin: 0 0 0.9rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--tg-primary);
}

.tg-rdv-text p {
    margin-bottom: 1.1rem;
    max-width: none;
}

.tg-rdv-embed {
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    margin-bottom: 0.75rem;
}

.tg-rdv-note {
    font-size: 0.85rem;
    color: #6B7280;
}

.tg-rdv-note a {
    color: #44499C;
    text-decoration: underline;
}

/* Conteneur bouton centré */
.tg-rdv-button {
    text-align: center;
    margin-top: 0.8rem;
}

/* Bouton Tangram style */
.tg-rdv-open-btn {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    border-radius: 5px;
    background: #ffffff;
    border: 1px solid #44499C;
    color: #44499C;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Hover */
.tg-rdv-open-btn:hover {
    background: #44499C;
    color: #ffffff;
}

/* Message de succès du formulaire de contact */
.tg-contact-form-card .notices.success,
.tg-contact-form-card .alert.notices.success {
    color: #b00020;
    border: 1px solid #b00020;
    background: #fde7eb;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

html {
    scroll-behavior: smooth;
}






/* En dessous de 1600px: on masque le CTA du hero */
@media (max-width: 1600px){
  .herotangram.hero-parallax .hero-cta{
    display: none !important;
  }
}




/* ===============================
   [V] MENU BURGER TANGRAM - BREAKPOINT 995PX
   =============================== */

@media (max-width: 995px) {

    /* Afficher le menu burger */
    .mobile-menu {
        display: block;
    }

    /* Cacher le menu desktop classique */
    #header .navbar-section.desktop-menu,
    .dropmenu {
        display: none;
    }
}

/* Burger au-dessus du header fixe */
.header-fixed .mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10001;
}

/* Bouton lui-même encore au-dessus */
.mobile-menu .button_container {
    z-index: 10002;
}

/* Overlay (menu plein écran) au-dessus du header */
.overlay {
    z-index: 10000;
}

.mobile-menu .button_container span {
    background-color: var(--tg-purple) !important;
}

/* Burger actif */
.mobile-menu .button_container.active span {
    background-color: var(--tg-blue-dark) !important;
}

/* Overlay blanc */
.overlay.open {
    background: #ffffff !important;
}

/* Liens du menu mobile */
.overlay-menu a {
    color: var(--tg-blue-dark) !important;
}

/* Facultatif : couleur au survol */
.overlay-menu a:hover {
    color: var(--tg-purple) !important;
}















/* ============================
   [V] RESPONSIVE - GLOBAL
   ============================ */

/* petit “look carré” sans casser le contenu */
@media (min-width: 901px) {
    .tg-context-grid--quad .tg-context-card {
        border-radius: 10px;
    }
}

/* petit “look carré” desktop */
@media (min-width: 901px) {
    .tg-context-grid--quad .tg-context-card {
        border-radius: 10px;
    }
}

/* ========== Responsive ========== */


@media (max-width: 900px) and (orientation: portrait) {

    /* 1. Force disposition horizontale */
    #tangram-values .value-row {
        flex-direction: row !important;
        align-items: center !important;
        gap: 14px;
    }

    /* 2. Image = vignette compacte */
    #tangram-values .value-media {
        flex: 0 0 84px;
        width: 84px;
        height: 84px;
        border-radius: 12px;
        background-size: cover;
        background-position: center;
        align-self: center;
    }

    /* 3. Texte prend le reste */
    #tangram-values .value-card {
        flex: 1 1 auto;
        margin-top: 0 !important;
    }

    .tg-apropos-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .tg-apropos-photo {
        max-width: 340px;
        margin: 0 auto;
    }

    .tg-apropos-highlights {
        grid-template-columns: 1fr;
    }

    .tg-apropos-name {
        margin: 0 0 0.8rem;
        font-size: 1rem;
        font-weight: 600;
        color: #374151;
    }

    .tg-cta-primary {
        width: 100%;
        white-space: normal;
        justify-content: center;
    }

    .tg-services-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .tg-services-content {
        padding: 2rem 1.6rem 2rem;
    }

    .tg-project-flow-inner {
        padding: 2rem 1.6rem 2rem;
    }

    .tg-project-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tg-context-grid--quad {
        grid-template-columns: minmax(0, 1fr);
    }

    .tg-context-grid--quad .tg-cadre--f5 {
        grid-column: auto;
    }

    .tg-project-modalities-card {
        padding: 1.3rem 1.3rem 1.2rem;
    }

}







/* ============================
   TABLETTE + MOBILE (<= 900px)
   ============================ */

@media (max-width: 900px) {

    .herotangram.hero-parallax {
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 55% 25%;

        /* Padding plus compact (évite le hero trop haut) */
        padding: 3.5rem 0 2.5rem !important;
    }

    /* On compacte le contenu pour que tout rentre sans agrandir le hero */
    .herotangram .hero-kicker {
        font-size: 0.95rem;
        margin-bottom: 0.75rem;
        letter-spacing: 0.10em;
    }

    .herotangram h1 {
        font-size: clamp(1.8rem, 7vw, 2.6rem);
        line-height: 1.08;
        margin: 0.75rem 0 1.25rem;
    }

    .herotangram p {
        font-size: 0.95rem;
        line-height: 1.55;
        margin-bottom: 1.25rem;
    }

    /* Intro formations - oiseau tangram off */
    .tg-page-intro--formations::after {
        display: none;
    }

    /* Détails Formations */
    .tg-training-summary {
        padding: 18px 16px 16px;
    }

    .tg-training-details {
        padding: 16px 16px 18px;
    }

    .tg-programme-cta {
        width: 100%;
        max-width: 260px;
    }

    /* Onglets internes (Objectifs/Programme/Modalités/...) : empêcher l'étirement */
    .tg-training-details .tg-tabbar {
        justify-content: center;
        /* optionnel : centre les onglets */
    }

    .tg-training-details .tg-tabbar>* {
        flex: 0 0 auto;
    }

    .tg-training-details .tg-tabbar a,
    .tg-training-details .tg-tabbar button,
    .tg-training-details .tg-tabbar .tg-training-tab {
        width: auto;
        max-width: 100%;
    }

    /* Grille cartes formations 2 colonnes -> plus confortable */
    .tg-training-grid {
        grid-template-columns: 1fr;
    }

    /* Carte hero formations - 2 colonnes jusqu'au mobile pur (géré en dessous de 640px) */
    .tg-training-card {
        grid-template-columns: minmax(220px, 1fr) minmax(0, 1.4fr);
    }

    /* Contenu carte hero - padding un peu réduit */
    .tg-training-content {
        padding: 1.6rem 1.4rem;
    }

    .tg-section-training .tg-section-header {
        margin-bottom: 1.1rem;
    }

    /* Tabs menu gauche hero - ligne de couleur en bas plutôt que à gauche */
    .tg-training-tab::before {
        top: auto;
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        height: 4px;
        border-radius: 0 0 0.55rem 0.55rem;
    }

    .tg-training-tab.is-active::before {
        height: 4px;
    }

    /* Trait décoratif vertical - supprimé sur petit écran */
    .tg-section-training .tg-training-content::after {
        display: none;
        content: none;
    }

    .tg-section-training .tg-training-cta {
        justify-content: center;
        text-align: center;
    }

    .tg-training-grid>details.tg-training-item:not([open]) {
        aspect-ratio: auto;
        min-height: 420px;
        /* optionnel, si tu veux une base */
    }

    /* Ateliers - layout général */
    .tg-workshops-layout {
        padding-left: 0;
    }

    .tg-workshops-layout::before {
        display: none;
    }

    /* Cartes ateliers - une colonne, padding adapté */
    .tg-workshop-group {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 1.5rem;
        margin-left: 0;
        padding: 1.5rem 1.4rem 1.6rem;
        border-radius: 10px;
        --tg-workshop-band-height: 240px;
    }

    .tg-workshop-group-header {
        margin-bottom: 0.5rem;
    }

    .tg-workshop-group-header h3 {
        font-size: 1.2rem;
    }

    .tg-workshop-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        font-size: 0.88rem;
    }

    .tg-workshop-cta {
        width: 100%;
        white-space: normal;
        justify-content: center;
    }

    .tg-workshop-custom-inner {
        padding: 1.6rem 1.4rem;
    }

    .tg-workshop-group::before {
        left: 1.5rem;
        top: -0.9rem;
        width: 9px;
        height: 9px;
        box-shadow: 0 0 0 0 transparent;
    }

    /* Détail ateliers */
    .tg-workshop-group-body {
        margin-top: 0.75rem;
    }

    .tg-workshop {
        padding: 0.9rem 1rem;
    }

    /* Groupes d ateliers / accompagnement */
    .tg-ateliers-groups {
        margin-inline: 1rem;
        gap: 1.25rem;
    }

    .tg-ateliers .tg-workshop-custom {
        margin: 2rem 1rem 0;
    }

    /* Bento services - passe en 1 colonne */
    .tg-services-grid {
        grid-template-columns: 1fr;
    }

    #tg-bento-services {
        margin: 48px auto;
    }

    #tg-bento-services .tg-bento-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    #tg-bento-services .tg-bento-item--admin,
    #tg-bento-services .tg-bento-item--strategie,
    #tg-bento-services .tg-bento-item--agents,
    #tg-bento-services .tg-bento-item--souverainete {
        grid-column: auto;
        grid-row: auto;
    }

    #tg-bento-services .tg-bento-content {
        max-width: 100%;
        flex-direction: column;
        height: 100%;
    }


    .tg-project-flow .tg-project-step img {
        display: block;
        width: 80%;
        max-width: 220px;
        margin: 0 auto 1rem;
        /* centre l'image, ajoute de l'air sur les côtés */
        border-radius: 14px;
    }

    /* CTA bas de page */
    #tg-contact .tg-cta-hero {
        padding: 3rem 0 3.2rem;
    }

    #tg-contact .tg-cta-card {
        padding: 2.1rem 1.6rem 2rem;
        margin-inline: 1.2rem;
        border-radius: 1.25rem;
    }

    #tg-contact .tg-cta-title {
        font-size: 1.35rem;
    }

    .footer-main {
        flex-direction: column;
        align-items: center;
        gap: 1.8rem;
    }

    .footer-brand {
        justify-content: flex-start;
    }

    .footer-columns {
        width: 100%;
    }

    /* Page services - carte en 1 colonne */
    .tg-services-card {
        grid-template-columns: 1fr;
    }

    .tg-services-content {
        padding: 1.8rem 1.6rem 1.8rem;
    }

    /* Page services - intro et blocs */
    .tg-page-intro--services {
        padding-inline: 1.25rem;
        margin-bottom: 2rem;
    }

    .tg-section-services .tg-section-title {
        font-size: 1.7rem;
    }

    .tg-services-content {
        border-radius: 10px;
    }

    .tg-project-flow-inner {
        padding: 2rem 1.5rem 2.1rem;
        border-radius: 10px;
    }

    .tg-project-steps {
        grid-template-columns: 1fr;
    }

    .tg-tools-grid {
        grid-template-columns: 1fr;
    }

    .tg-tools-title {
        font-size: 1.6rem;
    }

    .tg-step-panel-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .tg-step-panel-close {
        width: fit-content;
    }

    .tg-page-intro--contact .tg-page-intro-meta {
        white-space: normal;
    }

    .tg-contact-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .tg-contact-form-card {
        order: -1;
    }
}






/* ============================
   MOBILE PUR (<= 640px)
   ============================ */

@media (max-width: 640px) {

    /* Tabs Formations/Ateliers/Accompagnement sur 2 lignes */
    .tg-tabs {
        flex-wrap: wrap;
    }

    .tg-tab {
        width: calc(50% - 10px);
        text-align: center;
    }

    .tg-tab:nth-child(3) {
        width: 100%;
    }

    /* Hero formations - stack complet en 1 colonne */
    .tg-training-card {
        grid-template-columns: 1fr;
    }

    /* Top de carte - pile verticalement */
    .tg-training-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .tg-training-name {
        font-size: 1.15rem;
    }

    /* Infos clés formation */
    .tg-infos-grid {
        grid-template-columns: 1fr;
    }

    /* Section Ateliers - marges et typographie */
    .tg-ateliers {
        margin-top: 2rem;
    }

    .tg-ateliers-intro .tg-ateliers-title {
        font-size: 1.6rem;
    }

    .tg-workshop-group {
        padding: 1.2rem 1.1rem;
        border-radius: 10px;
        border-left-width: 3px;
    }

    .tg-workshop-group::before {
        width: 3px;
        display: none;
    }

    .tg-workshop-meta {
        grid-template-columns: 1fr;
    }

    .tg-workshop-custom-inner {
        padding: 1.5rem 1.3rem;
        border-radius: 10px;
    }


}


/* ===============================
   [TG] TOGGLE - Masquer "Télécharger le programme (PDF)"
   Pour le remettre : commenter ou supprimer ce bloc
   =============================== */
.tg-training-catalog .tg-detail-actions {
    display: none !important;
}