/*
Theme Name: Impreza Child
Theme URI: http://impreza.us-themes.com/
Description: Thème enfant d'Impreza pour cgattiercoaching.com. Design system "cg-" issu des maquettes accueil.html et landing-coaching-transition.html.
Author: UpSolution
Author URI: http://us-themes.com/
Template: Impreza
Version: 1.1.0
Text Domain: us
*/

/* ==========================================================================
   CGattier Coaching — design system
   Chargé automatiquement par us-core APRÈS le CSS d'Impreza (prio 18 vs 15),
   les règles ci-dessous l'emportent donc sans !important superflu.
   ========================================================================== */

/* ── TOKENS ────────────────────────────────────────────────────────────── */
:root {
    --cg-blue:        #013183;
    --cg-blue-mid:    #0244B0;
    --cg-blue-light:  #e8eef8;
    --cg-yellow:      #F4C431;
    --cg-yellow-pale: #FEF6CC;
    --cg-orange:      #F07030;
    --cg-white:       #FAF8F4;
    --cg-dark:        #09152B;
    --cg-gray:        #677189;
    --cg-gray-light:  #ECEEF3;

    --cg-f-title: 'Cormorant Garamond', Times, Georgia, serif;
    --cg-f-text:  'DM Sans', system-ui, sans-serif;

    --cg-w-max: 1400px;
    --cg-px:    80px;
}

/* ── CONTENEUR ─────────────────────────────────────────────────────────── */
.cg-wrap {
    width: 100%;
    max-width: var(--cg-w-max);
    margin: 0 auto;
    padding: 0 var(--cg-px);
}
.cg-sec { position: relative; }
.cg-sec *, .cg-sec *::before, .cg-sec *::after { box-sizing: border-box; }

/* Neutralise l'habillage qu'Impreza/WPBakery pose autour du contenu de page.
   Chaque section "cg-" gère elle-même sa largeur (.cg-wrap) et son padding
   vertical ; sans cela le contenu resterait enfermé dans le conteneur 1200px
   du thème et les sections pleine largeur ne le seraient pas. */
.cg-page .l-main { padding: 0; }
/* Non scopé sur .cg-page à dessein : la classe cg-host n'est posée que sur nos
   propres lignes, et le footer est rendu hors du contexte de la page. */
.l-section.cg-host {
    /* Impreza pose --padding-inline:5vmin sur .l-section : c'est ce qui créait
       les bandes claires de part et d'autre des sections pleine largeur.
       Et .l-section.height_medium ajoute 4rem de padding vertical sur ce même
       élément extérieur — d'où la bande de fond visible sous le header.
       Les deux se neutralisent ici, pas sur .l-section-h (l'élément intérieur). */
    --padding-inline: 0px;
    padding-top: 0;
    padding-bottom: 0;
}
.l-section.cg-host > .l-section-h {
    padding: 0;
    max-width: none;
}
.cg-host .g-cols { margin: 0; }
.cg-host .g-cols > .wpb_column { padding: 0; }
.cg-host .vc_column-inner { padding: 0; }
.cg-host .wpb_raw_html,
.cg-host .wpb_content_element { margin-bottom: 0; }

/* ==========================================================================
   HEADER — Impreza Header Builder stylé aux couleurs de la maquette
   Sélecteurs réels d'Impreza 9 : .l-header / .l-subheader / .w-nav / .w-btn
   ========================================================================== */
.l-header.bg_solid .l-subheader.at_middle { background: var(--cg-blue); }
/* Le header de la maquette occupe toute la largeur (logo à --cg-px du bord),
   contrairement au contenu qui reste centré dans 1400px. */
.l-header .l-subheader-h {
    max-width: none;
    padding: 0 var(--cg-px);
}
.l-header.shadow_wide.sticky { box-shadow: 0 4px 40px rgba(0,0,0,.35); }

/* Logo : image + nom + sous-titre, comme dans la maquette */
.l-header .w-html { line-height: 1; }
.cg-logo {
    display: flex; align-items: center; gap: 14px;
    text-decoration: none;
}
.cg-logo:hover { text-decoration: none; }
.cg-logo-img { width: 52px; height: auto; display: block; flex-shrink: 0; }
.cg-logo-txt { display: flex; flex-direction: column; gap: 3px; }
.cg-logo-name {
    font-family: var(--cg-f-title);
    font-size: 22px; font-weight: 600;
    color: #fff; letter-spacing: .02em; line-height: 1;
}
.cg-logo-sub {
    font-family: var(--cg-f-text);
    font-size: 10px; font-weight: 300;
    color: rgba(255,255,255,.5);
    letter-spacing: .18em; text-transform: uppercase; line-height: 1.2;
}
/* Repli si l'élément texte natif d'Impreza est réutilisé */
.l-header .w-text .w-text-value {
    font-family: var(--cg-f-title);
    font-size: 22px; font-weight: 600;
    color: #fff; letter-spacing: .02em; line-height: 1;
}

/* Navigation principale.
   Impreza espace les entrées via --menu-items-gap (20px par défaut, appliqué
   en padding sur les ancres) : un `gap` de flex ne le remplace pas, il s'y ajoute. */
.l-header .w-nav.type_desktop { --menu-items-gap: 32px; }
.l-header .w-nav-item.level_1 > .w-nav-anchor {
    font-family: var(--cg-f-text);
    font-size: 12px; font-weight: 500;
    color: rgba(255,255,255,.78);
    letter-spacing: .08em; text-transform: uppercase;
    padding: 0; position: relative;
    transition: color .2s;
}
.l-header .w-nav-item.level_1 > .w-nav-anchor::after {
    content: ''; position: absolute;
    bottom: -2px; left: 0; right: 0; height: 1px;
    background: var(--cg-yellow);
    transform: scaleX(0); transition: transform .3s ease;
}
.l-header .w-nav-item.level_1 > .w-nav-anchor:hover,
.l-header .w-nav-item.level_1.current-menu-item > .w-nav-anchor { color: var(--cg-yellow); }
.l-header .w-nav-item.level_1 > .w-nav-anchor:hover::after { transform: scaleX(1); }

/* Bouton CTA du header */
.l-header .w-btn {
    background: var(--cg-yellow); color: var(--cg-dark);
    padding: 10px 26px; border-radius: 2px; border: none;
    font-family: var(--cg-f-text);
    font-size: 12px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    transition: background .2s, transform .2s;
}
.l-header .w-btn:hover { background: var(--cg-orange); color: var(--cg-dark); transform: translateY(-1px); }

/* ==========================================================================
   HERO — page d'accueil
   ========================================================================== */
.cg-hero {
    min-height: 100vh; padding-top: 76px;
    /* Image de fond : cghero.jpg, importée dans la médiathèque (ID 32).
       Longhand volontaire : dans le raccourci, seule la dernière couche peut
       porter la couleur, ce qui rend le repli bleu illisible. */
    background-color: var(--cg-blue);
    background-image: linear-gradient(rgba(4,13,58,.5), rgba(7,19,70,.5)),
                      url("/wp-content/uploads/2026/09/cghero.jpg");
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    display: flex; align-items: center;
    position: relative; overflow: hidden;
}
.cg-hero-panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: 52%;
    background: var(--cg-white);
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%);
    opacity: .15;
}
.cg-hero-acc-circle {
    position: absolute; width: 320px; height: 320px; border-radius: 50%;
    background: var(--cg-yellow); opacity: .08; top: -80px; left: 35%;
}
.cg-hero-acc-tri {
    position: absolute; right: 0; bottom: 0; width: 0; height: 0;
    border-style: solid; border-width: 0 0 280px 220px;
    border-color: transparent transparent var(--cg-yellow) transparent; opacity: .35;
}
.cg-hero-acc-dot {
    position: absolute; width: 12px; height: 12px; border-radius: 50%;
    background: var(--cg-orange); top: 38%; left: 46%;
}
.cg-hero-wrap {
    position: relative; z-index: 2;
    width: 100%; max-width: var(--cg-w-max);
    margin: 0 auto; padding: 40px var(--cg-px) 60px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.cg-hero-eyebrow {
    display: flex; align-items: center; gap: 14px;
    font-family: var(--cg-f-text);
    font-size: 11px; font-weight: 500;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--cg-yellow); margin-bottom: 28px;
    animation: cg-fadL .8s ease .1s both;
}
.cg-hero-eyebrow span { display: block; width: 36px; height: 1px; background: var(--cg-yellow); }
.cg-page h1.cg-hero-h1 {
    font-family: var(--cg-f-title);
    font-size: 76px; font-weight: 500; line-height: 1.02;
    color: #fff; margin: 0 0 28px; letter-spacing: -.015em;
    animation: cg-fadU .8s ease .2s both;
}
.cg-hero-h1 em { font-style: italic; color: var(--cg-yellow); }
.cg-hero-desc {
    font-family: var(--cg-f-text);
    font-size: 16px; font-weight: 300; line-height: 1.75;
    color: rgba(255,255,255,.72); max-width: 400px; margin: 0 0 44px;
    animation: cg-fadU .8s ease .35s both;
}
.cg-hero-actions {
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    animation: cg-fadU .8s ease .5s both;
}
.cg-hero-stats {
    display: flex; gap: 44px; margin-top: 56px; flex-wrap: wrap;
    animation: cg-fadU .8s ease .65s both;
    padding-top: 44px; border-top: 1px solid rgba(255,255,255,.1);
}
.cg-stat-num { font-family: var(--cg-f-title); font-size: 52px; font-weight: 600; line-height: 1; color: #fff; }
.cg-stat-lbl { font-family: var(--cg-f-text); font-size: 11px; font-weight: 300; color: rgba(255,255,255,.5); letter-spacing: .04em; margin-top: 4px; }
.cg-hero-right {
    display: flex; flex-direction: column; gap: 16px; padding-left: 30px;
    animation: cg-fadU .8s ease .3s both;
}
.cg-hero-card {
    background: #fff; border-left: 3px solid var(--cg-yellow);
    border-radius: 3px; padding: 24px 28px;
    box-shadow: 0 4px 32px rgba(0,0,0,.07);
    transition: transform .25s, box-shadow .25s;
}
.cg-hero-card:nth-child(2) { border-left-color: var(--cg-orange); }
.cg-hero-card:nth-child(3) { border-left-color: var(--cg-blue); }
.cg-hero-card:hover { transform: translateX(4px); box-shadow: 0 8px 40px rgba(0,0,0,.12); }
.cg-hc-tag { font-family: var(--cg-f-text); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cg-orange); margin-bottom: 8px; }
.cg-hc-title { font-family: var(--cg-f-title); font-size: 22px; font-weight: 600; color: var(--cg-dark); margin-bottom: 6px; }
.cg-hc-text { font-family: var(--cg-f-text); font-size: 13px; color: var(--cg-gray); line-height: 1.6; font-weight: 300; }

/* ── BOUTONS ───────────────────────────────────────────────────────────── */
.cg-btn-yellow, .cg-btn-y {
    background: var(--cg-yellow); color: var(--cg-dark);
    padding: 16px 36px; border-radius: 2px;
    font-family: var(--cg-f-text);
    font-size: 13px; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase;
    text-decoration: none; display: inline-block;
    transition: background .25s, transform .25s, box-shadow .25s;
}
.cg-btn-yellow:hover, .cg-btn-y:hover {
    background: var(--cg-orange); color: var(--cg-dark);
    transform: translateY(-2px); box-shadow: 0 10px 28px rgba(240,112,48,.4);
}
.cg-btn-ghost-white {
    font-family: var(--cg-f-text); font-size: 13px; font-weight: 400;
    color: rgba(255,255,255,.7); text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px; transition: color .2s;
}
.cg-btn-ghost-white:hover { color: #fff; }
.cg-btn-outline-w {
    border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.7);
    padding: 16px 30px; border-radius: 2px;
    font-family: var(--cg-f-text);
    font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
    text-decoration: none; display: inline-block; transition: all .2s;
}
.cg-btn-outline-w:hover { border-color: rgba(255,255,255,.6); color: #fff; }
.cg-btn-blue {
    background: var(--cg-blue); color: #fff;
    padding: 17px 38px; border-radius: 2px;
    font-family: var(--cg-f-text);
    font-size: 13px; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase;
    text-decoration: none; display: inline-block; transition: all .25s;
}
.cg-btn-blue:hover { background: var(--cg-blue-mid); color: #fff; transform: translateY(-2px); }

/* ── TITRES DE SECTION ─────────────────────────────────────────────────── */
.cg-sec-eyebrow {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--cg-f-text);
    font-size: 10px; font-weight: 600;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--cg-orange); margin-bottom: 16px;
}
.cg-sec-eyebrow::before { content: ''; display: block; width: 28px; height: 1px; background: var(--cg-orange); }
.cg-page .cg-sec-title, .cg-page .cg-sec-h2 {
    font-family: var(--cg-f-title);
    font-size: 58px; font-weight: 500; line-height: 1.08;
    color: var(--cg-dark); margin: 0;
}
.cg-sec-title em, .cg-sec-h2 em { font-style: italic; color: var(--cg-blue); }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.cg-services { padding: 130px 0; background: var(--cg-white); }
.cg-services-head { display: grid; grid-template-columns: 5fr 7fr; gap: 60px; align-items: end; margin-bottom: 80px; }
.cg-services-intro { font-family: var(--cg-f-text); font-size: 15px; line-height: 1.85; color: var(--cg-gray); font-weight: 300; margin: 0; }
.cg-services-intro strong { color: var(--cg-dark); font-weight: 500; }
.cg-srv-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--cg-gray-light); }
.cg-srv-card {
    background: var(--cg-white); padding: 52px 40px 44px;
    position: relative; overflow: hidden;
    border-top: 3px solid transparent; transition: background .4s;
}
.cg-srv-card::before {
    content: ''; position: absolute; inset: 0; background: var(--cg-blue);
    transform: scaleY(0); transform-origin: bottom;
    transition: transform .45s cubic-bezier(.4,0,.2,1); z-index: 0;
}
.cg-srv-card:hover::before { transform: scaleY(1); }
.cg-srv-card:hover { border-top-color: var(--cg-yellow); }
.cg-srv-card > * { position: relative; z-index: 1; }
.cg-srv-n { font-family: var(--cg-f-title); font-size: 72px; font-weight: 300; line-height: 1; color: var(--cg-gray-light); margin-bottom: 24px; transition: color .4s; }
.cg-srv-card:hover .cg-srv-n { color: rgba(255,255,255,.12); }
.cg-srv-bar { width: 40px; height: 3px; background: var(--cg-orange); margin-bottom: 22px; transition: background .4s; }
.cg-srv-card:hover .cg-srv-bar { background: var(--cg-yellow); }
.cg-page .cg-srv-title { font-family: var(--cg-f-title); font-size: 25px; font-weight: 600; line-height: 1.2; color: var(--cg-dark); margin: 0 0 14px; transition: color .4s; }
.cg-srv-card:hover .cg-srv-title { color: #fff; }
.cg-srv-text { font-family: var(--cg-f-text); font-size: 13.5px; line-height: 1.7; color: var(--cg-gray); font-weight: 300; margin: 0 0 28px; transition: color .4s; }
.cg-srv-card:hover .cg-srv-text { color: rgba(255,255,255,.65); }
.cg-srv-lnk {
    font-family: var(--cg-f-text); font-size: 11px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--cg-blue); text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px; transition: color .4s;
}
.cg-srv-lnk::after { content: '\2192'; transition: transform .2s; }
.cg-srv-card:hover .cg-srv-lnk { color: #fff; }
.cg-srv-card:hover .cg-srv-lnk::after { transform: translateX(4px); }

/* ==========================================================================
   À PROPOS
   ========================================================================== */
.cg-about { padding: 130px 0; background: var(--cg-dark); position: relative; overflow: hidden; }
.cg-about::before {
    content: ''; position: absolute; top: -160px; right: -160px;
    width: 500px; height: 500px; border-radius: 50%;
    background: var(--cg-blue-mid); opacity: .18;
}
.cg-about::after {
    content: ''; position: absolute; bottom: -60px; left: 35%;
    width: 200px; height: 200px; border-radius: 50%;
    background: var(--cg-yellow); opacity: .06;
}
.cg-about-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 100px; align-items: center; position: relative; z-index: 1; }
.cg-img-area { position: relative; }
.cg-img-area img { width: 100%; height: auto; border-radius: 4px; display: block; }
.cg-img-placeholder {
    width: 100%; aspect-ratio: 3/4; max-width: 100%;
    background: linear-gradient(145deg,var(--cg-blue) 0%,var(--cg-blue-mid) 100%);
    border-radius: 4px; display: flex; align-items: center; justify-content: center;
    font-family: var(--cg-f-title); font-size: 18px; color: rgba(255,255,255,.25); font-style: italic;
}
.cg-img-badge {
    position: absolute; bottom: -28px; right: -28px;
    width: 150px; height: 150px; border-radius: 50%;
    background: var(--cg-yellow);
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 20px;
}
.cg-img-badge-txt { font-family: var(--cg-f-title); font-size: 13.5px; font-weight: 700; color: var(--cg-dark); line-height: 1.3; }
.cg-about-content .cg-sec-eyebrow { color: var(--cg-yellow); }
.cg-about-content .cg-sec-eyebrow::before { background: var(--cg-yellow); }
.cg-page .cg-about-h2 { font-family: var(--cg-f-title); font-size: 58px; font-weight: 500; line-height: 1.07; color: #fff; margin: 0 0 32px; }
.cg-about-h2 em { font-style: italic; color: var(--cg-yellow); }
.cg-about-p { font-family: var(--cg-f-text); font-size: 15px; line-height: 1.85; color: rgba(255,255,255,.62); font-weight: 300; margin: 0 0 20px; }
.cg-creds { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }
.cg-cred { display: grid; grid-template-columns: 3px 1fr; gap: 16px; background: rgba(255,255,255,.04); border-radius: 2px; overflow: hidden; transition: background .25s; }
.cg-cred:hover { background: rgba(255,255,255,.07); }
.cg-cred-bar { background: var(--cg-orange); }
.cg-cred-txt { padding: 14px 16px; font-family: var(--cg-f-text); font-size: 13px; color: rgba(255,255,255,.72); line-height: 1.5; }
.cg-cred-txt strong { color: #fff; }

/* ==========================================================================
   PROCESSUS
   ========================================================================== */
.cg-process { padding: 130px 0; background: var(--cg-white); }
.cg-process-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 100px; align-items: start; }
.cg-process-sticky { position: sticky; top: 108px; }
.cg-process-desc { font-family: var(--cg-f-text); font-size: 15px; line-height: 1.85; color: var(--cg-gray); font-weight: 300; margin-top: 24px; }
.cg-steps { display: flex; flex-direction: column; }
.cg-step { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 36px 0; border-bottom: 1px solid var(--cg-gray-light); transition: padding .25s; }
.cg-step:first-child { border-top: 1px solid var(--cg-gray-light); }
.cg-step:hover { padding-left: 8px; }
.cg-step-n { font-family: var(--cg-f-title); font-size: 44px; font-weight: 300; color: var(--cg-gray-light); line-height: 1; padding-top: 6px; }
.cg-page .cg-step-h { font-family: var(--cg-f-title); font-size: 24px; font-weight: 600; color: var(--cg-dark); margin: 0 0 10px; }
.cg-step-p { font-family: var(--cg-f-text); font-size: 14px; line-height: 1.7; color: var(--cg-gray); font-weight: 300; margin: 0; }

/* ==========================================================================
   BANDEAU CITATION
   ========================================================================== */
.cg-quote-strip { padding: 100px 0; background: var(--cg-blue); position: relative; overflow: hidden; }
.cg-quote-strip::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(-45deg, transparent, transparent 38px, rgba(255,255,255,.018) 38px, rgba(255,255,255,.018) 39px);
}
.cg-quote-inner { position: relative; z-index: 1; text-align: center; }
.cg-q-mark { font-family: var(--cg-f-title); font-size: 220px; line-height: .4; font-weight: 700; color: rgba(255,255,255,.05); margin-bottom: 36px; display: block; }
.cg-q-text { font-family: var(--cg-f-title); font-size: 52px; font-style: italic; font-weight: 400; color: #fff; line-height: 1.25; max-width: 860px; margin: 0 auto 28px; }
.cg-q-text span { color: var(--cg-yellow); }
.cg-q-attr { font-family: var(--cg-f-text); font-size: 12px; font-weight: 400; color: rgba(255,255,255,.4); letter-spacing: .18em; text-transform: uppercase; }

/* ==========================================================================
   CTA ACCUEIL
   ========================================================================== */
.cg-cta-sec { padding: 120px 0; background: var(--cg-white); }
.cg-cta-box {
    background: var(--cg-blue); border-radius: 4px; padding: 80px;
    display: grid; grid-template-columns: 1fr auto; gap: 80px; align-items: center;
    position: relative; overflow: hidden;
}
.cg-cta-box::before {
    content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 380px;
    background: var(--cg-yellow); clip-path: polygon(40% 0,100% 0,100% 100%,0% 100%); opacity: .1;
}
.cg-cta-box::after {
    content: ''; position: absolute; top: -60px; left: 55%;
    width: 180px; height: 180px; border-radius: 50%;
    background: var(--cg-orange); opacity: .08;
}
.cg-cta-box > * { position: relative; z-index: 1; }
.cg-cta-label { font-family: var(--cg-f-text); font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--cg-yellow); margin-bottom: 16px; }
.cg-page .cg-cta-h2 { font-family: var(--cg-f-title); font-size: 50px; font-weight: 500; line-height: 1.08; color: #fff; margin: 0 0 16px; }
.cg-cta-p { font-family: var(--cg-f-text); font-size: 15px; color: rgba(255,255,255,.6); font-weight: 300; line-height: 1.7; margin: 0; }
.cg-cta-p strong { color: rgba(255,255,255,.85); font-weight: 400; }
.cg-cta-col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; min-width: 230px; }
.cg-btn-cta {
    padding: 18px 32px; border-radius: 2px;
    font-family: var(--cg-f-text);
    font-size: 13px; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase;
    text-align: center; transition: all .25s; display: block; text-decoration: none;
}
.cg-btn-cta-1 { background: var(--cg-yellow); color: var(--cg-dark); }
.cg-btn-cta-1:hover { background: var(--cg-orange); transform: translateY(-2px); color: var(--cg-dark); }
.cg-btn-cta-2 { border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.7); }
.cg-btn-cta-2:hover { border-color: rgba(255,255,255,.6); color: #fff; }

/* ==========================================================================
   LANDING — HERO
   ========================================================================== */
.cg-lp-hero { padding-top: 76px; min-height: 100vh; background: var(--cg-dark); display: flex; align-items: center; position: relative; overflow: hidden; }
.cg-lph-geo-r { position: absolute; top: 0; right: 0; bottom: 0; width: 42%; background: var(--cg-blue); clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%); }
.cg-lph-geo-y { position: absolute; right: 0; bottom: 0; width: 26%; height: 55%; background: var(--cg-yellow); clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%); opacity: .85; }
.cg-lph-geo-o { position: absolute; top: 0; right: 0; width: 14%; height: 38%; background: var(--cg-orange); clip-path: polygon(0 0, 100% 0, 100% 100%); opacity: .7; }
.cg-lph-circle { position: absolute; width: 380px; height: 380px; border-radius: 50%; border: 1px solid rgba(255,255,255,.06); top: 50%; left: 40%; transform: translate(-50%,-50%); }
.cg-lph-circle2 { position: absolute; width: 550px; height: 550px; border-radius: 50%; border: 1px solid rgba(255,255,255,.03); top: 50%; left: 40%; transform: translate(-50%,-50%); }
.cg-lph-wrap {
    position: relative; z-index: 2;
    width: 100%; max-width: var(--cg-w-max);
    margin: 0 auto; padding: 60px var(--cg-px);
    display: grid; grid-template-columns: 6fr 5fr; gap: 80px; align-items: center;
}
.cg-lph-breadcrumb { font-family: var(--cg-f-text); font-size: 12px; color: rgba(255,255,255,.38); margin-bottom: 20px; letter-spacing: .04em; animation: cg-fadL .8s ease 0s both; }
.cg-lph-breadcrumb a { color: rgba(255,255,255,.55); text-decoration: none; transition: color .2s; }
.cg-lph-breadcrumb a:hover { color: var(--cg-yellow); }
.cg-lph-eyebrow {
    display: flex; align-items: center; gap: 14px;
    font-family: var(--cg-f-text);
    font-size: 11px; font-weight: 500;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--cg-yellow); margin-bottom: 20px;
    animation: cg-fadL .8s ease .1s both;
}
.cg-lph-eyebrow span { display: block; width: 36px; height: 1px; background: var(--cg-yellow); }
.cg-page h1.cg-lph-h1 {
    font-family: var(--cg-f-title);
    font-size: 74px; font-weight: 500; line-height: 1.02;
    color: #fff; margin: 0 0 24px; letter-spacing: -.015em;
    animation: cg-fadU .8s ease .2s both;
}
.cg-lph-h1 em { font-style: italic; color: var(--cg-yellow); }
.cg-lph-tagline { font-family: var(--cg-f-title); font-size: 24px; font-style: italic; font-weight: 300; color: rgba(255,255,255,.55); margin: 0 0 32px; animation: cg-fadU .8s ease .3s both; }
.cg-lph-desc { font-family: var(--cg-f-text); font-size: 15px; font-weight: 300; line-height: 1.8; color: rgba(255,255,255,.65); max-width: 500px; margin: 0 0 44px; animation: cg-fadU .8s ease .4s both; }
.cg-lph-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; animation: cg-fadU .8s ease .55s both; }
.cg-lph-proof { animation: cg-fadU .8s ease .35s both; }
.cg-proof-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 4px; padding: 36px 32px; margin-bottom: 16px; backdrop-filter: blur(6px); }
.cg-proof-q { font-family: var(--cg-f-title); font-size: 38px; font-style: italic; font-weight: 400; color: #fff; line-height: 1.25; margin: 0 0 20px; }
.cg-proof-q strong { color: var(--cg-yellow); font-style: normal; }
.cg-proof-label { font-family: var(--cg-f-text); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 18px; }
.cg-proof-items { display: flex; flex-direction: column; gap: 10px; }
.cg-proof-item { display: flex; align-items: flex-start; gap: 12px; font-family: var(--cg-f-text); font-size: 13.5px; color: rgba(255,255,255,.7); line-height: 1.5; }
.cg-proof-item::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--cg-orange); margin-top: 7px; flex-shrink: 0; }
.cg-proof-price-card { background: var(--cg-yellow); border-radius: 3px; padding: 24px 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cg-pp-label { font-family: var(--cg-f-text); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(1,49,131,.7); }
.cg-pp-price { font-family: var(--cg-f-title); font-size: 36px; font-weight: 700; color: var(--cg-dark); }
.cg-pp-unit { font-family: var(--cg-f-text); font-size: 12px; color: rgba(1,49,131,.7); }
.cg-btn-outline-d { border: 1px solid rgba(1,49,131,.3); color: var(--cg-dark); padding: 12px 24px; border-radius: 2px; font-family: var(--cg-f-text); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; display: inline-block; transition: all .2s; }
.cg-btn-outline-d:hover { border-color: var(--cg-blue); background: rgba(1,49,131,.06); color: var(--cg-dark); }

/* ── LANDING : L'ENJEU ─────────────────────────────────────────────────── */
.cg-problem { padding: 120px 0; background: var(--cg-white); }
.cg-prob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.cg-prob-intro { font-family: var(--cg-f-text); font-size: 15px; line-height: 1.85; color: var(--cg-gray); font-weight: 300; margin-top: 24px; }
.cg-prob-situations { display: flex; flex-direction: column; }
.cg-sit { padding: 28px 0; border-bottom: 1px solid var(--cg-gray-light); display: flex; align-items: flex-start; gap: 20px; }
.cg-sit:first-child { border-top: 1px solid var(--cg-gray-light); }
.cg-sit-num { font-family: var(--cg-f-title); font-size: 36px; font-weight: 300; color: var(--cg-gray-light); line-height: 1; flex-shrink: 0; width: 36px; }
.cg-sit-txt { font-family: var(--cg-f-text); font-size: 15px; line-height: 1.65; color: var(--cg-dark); font-weight: 300; }
.cg-sit-txt strong { font-weight: 500; }

/* ── LANDING : PROGRAMME ───────────────────────────────────────────────── */
.cg-program { padding: 130px 0; background: var(--cg-blue); position: relative; overflow: hidden; }
.cg-program::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(-45deg, transparent, transparent 40px, rgba(255,255,255,.018) 40px, rgba(255,255,255,.018) 41px);
}
.cg-prog-header { text-align: center; margin-bottom: 80px; position: relative; z-index: 1; }
.cg-prog-header .cg-sec-eyebrow { justify-content: center; color: var(--cg-yellow); }
.cg-prog-header .cg-sec-eyebrow::before { background: var(--cg-yellow); }
.cg-page .cg-prog-header .cg-sec-h2 { color: #fff; }
.cg-prog-header .cg-sec-h2 em { color: var(--cg-yellow); }
.cg-phases { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; background: rgba(255,255,255,.07); }
.cg-phase { background: rgba(255,255,255,.03); padding: 44px 32px; border-top: 3px solid transparent; transition: background .3s, border-color .3s; position: relative; }
.cg-phase:hover { background: rgba(255,255,255,.08); border-top-color: var(--cg-yellow); }
.cg-ph-num { font-family: var(--cg-f-title); font-size: 72px; font-weight: 300; line-height: 1; color: rgba(255,255,255,.1); margin-bottom: 20px; }
.cg-ph-tag { font-family: var(--cg-f-text); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cg-yellow); margin-bottom: 10px; }
.cg-page .cg-ph-title { font-family: var(--cg-f-title); font-size: 24px; font-weight: 600; color: #fff; margin: 0 0 14px; }
.cg-ph-text { font-family: var(--cg-f-text); font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,.58); font-weight: 300; margin: 0; }
.cg-ph-connector {
    position: absolute; right: -12px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; background: var(--cg-yellow); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; color: var(--cg-dark); z-index: 2;
}
.cg-phase:last-child .cg-ph-connector { display: none; }

/* ── LANDING : AXES ────────────────────────────────────────────────────── */
.cg-axes { padding: 130px 0; background: var(--cg-white); }
.cg-axes-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 100px; align-items: start; }
.cg-axes-sticky { position: sticky; top: 108px; }
.cg-axes-desc { font-family: var(--cg-f-text); font-size: 15px; line-height: 1.85; color: var(--cg-gray); font-weight: 300; margin-top: 24px; }
.cg-axes-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cg-axe { padding: 28px 26px; background: var(--cg-white); border: 1px solid var(--cg-gray-light); border-radius: 3px; border-top: 3px solid var(--cg-orange); transition: all .25s; }
.cg-axe:hover { border-color: var(--cg-blue); border-top-color: var(--cg-yellow); box-shadow: 0 8px 32px rgba(1,49,131,.08); transform: translateY(-2px); }
.cg-axe-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--cg-yellow-pale); display: flex; align-items: center; justify-content: center; font-size: 14px; margin-bottom: 14px; }
.cg-page .cg-axe-title { font-family: var(--cg-f-title); font-size: 18px; font-weight: 600; color: var(--cg-dark); margin: 0 0 8px; line-height: 1.2; }
.cg-axe-text { font-family: var(--cg-f-text); font-size: 13px; line-height: 1.65; color: var(--cg-gray); font-weight: 300; margin: 0; }

/* ── LANDING : PLUS-VALUE ──────────────────────────────────────────────── */
.cg-va-section { padding: 120px 0; background: var(--cg-dark); position: relative; overflow: hidden; }
.cg-va-section::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; border-radius: 50%; background: var(--cg-blue-mid); opacity: .2; }
.cg-va-head { text-align: center; margin-bottom: 72px; position: relative; z-index: 1; }
.cg-va-head .cg-sec-eyebrow { justify-content: center; color: var(--cg-yellow); }
.cg-va-head .cg-sec-eyebrow::before { background: var(--cg-yellow); }
.cg-page .cg-va-h2 { font-family: var(--cg-f-title); font-size: 56px; font-weight: 500; line-height: 1.1; color: #fff; margin: 4px 0 0; }
.cg-va-h2 em { font-style: italic; color: var(--cg-yellow); }
.cg-va-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; position: relative; z-index: 1; }
.cg-va-card { padding: 40px 32px; background: rgba(255,255,255,.04); border-radius: 3px; border-bottom: 3px solid transparent; transition: all .3s; }
.cg-va-card:hover { background: rgba(255,255,255,.08); border-bottom-color: var(--cg-yellow); }
.cg-va-quote { font-family: var(--cg-f-title); font-size: 22px; font-style: italic; font-weight: 400; color: rgba(255,255,255,.9); line-height: 1.3; margin: 0 0 20px; }
.cg-va-quote::before { content: '\00AB\00A0'; color: var(--cg-yellow); }
.cg-va-quote::after  { content: '\00A0\00BB'; color: var(--cg-yellow); }
.cg-va-body { font-family: var(--cg-f-text); font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,.5); font-weight: 300; margin: 0; }

/* ── LANDING : MODALITÉS ───────────────────────────────────────────────── */
.cg-modalities { padding: 120px 0; background: var(--cg-white); }
.cg-mod-head { margin-bottom: 70px; }
.cg-mod-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--cg-gray-light); }
.cg-mod-card { background: var(--cg-white); padding: 44px 36px; border-top: 3px solid transparent; transition: border-color .2s; }
.cg-mod-card:hover { border-top-color: var(--cg-orange); }
.cg-mod-icon { font-size: 28px; margin-bottom: 16px; }
.cg-page .cg-mod-title { font-family: var(--cg-f-title); font-size: 22px; font-weight: 600; color: var(--cg-dark); margin: 0 0 12px; }
.cg-mod-list { list-style: none; display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; }
.cg-mod-list li { font-family: var(--cg-f-text); font-size: 13.5px; color: var(--cg-gray); font-weight: 300; line-height: 1.5; padding-left: 14px; position: relative; }
.cg-mod-list li::before { content: '\2013'; position: absolute; left: 0; color: var(--cg-orange); }

/* ── LANDING : TARIFS ──────────────────────────────────────────────────── */
.cg-pricing { padding: 120px 0; background: var(--cg-blue-light); }
.cg-price-box {
    background: #fff; border-radius: 4px; padding: 80px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
    box-shadow: 0 8px 60px rgba(1,49,131,.1); position: relative; overflow: hidden;
}
.cg-price-box::before { content: ''; position: absolute; top: 0; right: 0; width: 200px; height: 200px; background: var(--cg-yellow); border-radius: 0 4px 0 50%; opacity: .15; }
.cg-price-box > * { position: relative; z-index: 1; }
.cg-price-offer { font-family: var(--cg-f-text); font-size: 14px; line-height: 1.85; color: var(--cg-gray); font-weight: 300; margin-top: 20px; }
.cg-price-features { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.cg-pf { display: flex; align-items: center; gap: 12px; font-family: var(--cg-f-text); font-size: 14px; color: var(--cg-dark); }
.cg-pf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cg-yellow); flex-shrink: 0; }
.cg-price-numbers { display: flex; flex-direction: column; gap: 20px; }
.cg-p-tag { font-family: var(--cg-f-text); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cg-orange); margin-bottom: 8px; }
.cg-p-main { font-family: var(--cg-f-title); font-size: 80px; font-weight: 600; line-height: 1; color: var(--cg-blue); }
.cg-p-main sup { font-size: 32px; vertical-align: top; padding-top: 12px; }
.cg-p-main sub { font-size: 20px; font-weight: 300; color: var(--cg-gray); }
.cg-p-sep { width: 100%; height: 1px; background: var(--cg-gray-light); margin: 8px 0; }
.cg-p-alt { font-family: var(--cg-f-text); font-size: 14px; color: var(--cg-gray); font-weight: 300; line-height: 1.5; }
.cg-price-note { font-family: var(--cg-f-text); font-size: 12px; color: var(--cg-gray); font-weight: 300; margin-top: 16px; font-style: italic; }
.cg-price-cta { margin-top: 40px; }

/* ── LANDING : CTA FINAL ───────────────────────────────────────────────── */
.cg-final-cta { padding: 120px 0; background: var(--cg-dark); position: relative; overflow: hidden; }
.cg-fc-bg-y { position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 350px 450px; border-color: transparent transparent rgba(244,196,49,.15) transparent; }
.cg-fc-bg-o { position: absolute; left: 0; top: 0; width: 0; height: 0; border-style: solid; border-width: 200px 300px 0 0; border-color: rgba(240,112,48,.08) transparent transparent transparent; }
.cg-fc-inner { position: relative; z-index: 1; text-align: center; max-width: 820px; margin: 0 auto; }
.cg-fc-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--cg-f-text); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--cg-yellow); margin-bottom: 28px; }
.cg-fc-eyebrow span { display: block; width: 28px; height: 1px; background: var(--cg-yellow); }
.cg-page .cg-fc-h2 { font-family: var(--cg-f-title); font-size: 70px; font-weight: 500; line-height: 1.06; color: #fff; margin: 0 0 24px; }
.cg-fc-h2 em { font-style: italic; color: var(--cg-yellow); }
.cg-fc-p { font-family: var(--cg-f-text); font-size: 16px; font-weight: 300; line-height: 1.8; color: rgba(255,255,255,.6); margin: 0 0 48px; }
.cg-fc-btns { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.l-footer { background: var(--cg-dark); }
.cg-footer { background: var(--cg-dark); padding: 80px 0 40px; }
.cg-foot-grid { display: grid; grid-template-columns: 2.5fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 60px; }
.cg-foot-logo-name { font-family: var(--cg-f-title); font-size: 26px; font-weight: 600; color: #fff; letter-spacing: .02em; }
.cg-foot-logo-sub { font-family: var(--cg-f-text); font-size: 10px; font-weight: 300; color: rgba(255,255,255,.4); letter-spacing: .18em; text-transform: uppercase; margin-top: 4px; }
.cg-foot-about { font-family: var(--cg-f-text); font-size: 13px; line-height: 1.75; color: rgba(255,255,255,.38); font-weight: 300; margin-top: 18px; }
.cg-foot-contact { margin-top: 18px; }
.cg-foot-ci { font-family: var(--cg-f-text); font-size: 13px; color: rgba(255,255,255,.55); margin-bottom: 7px; display: flex; align-items: center; gap: 8px; }
.cg-foot-ci a { color: inherit; text-decoration: none; }
.cg-foot-ci a:hover { color: var(--cg-yellow); }
.cg-foot-col-h { font-family: var(--cg-f-text); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 18px; }
.cg-foot-links { list-style: none; display: flex; flex-direction: column; gap: 9px; padding: 0; margin: 0; }
.cg-foot-links a { font-family: var(--cg-f-text); font-size: 13.5px; color: rgba(255,255,255,.58); font-weight: 300; text-decoration: none; transition: color .2s; }
.cg-foot-links a:hover { color: var(--cg-yellow); }
.cg-foot-bottom { border-top: 1px solid rgba(255,255,255,.07); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.cg-foot-legal { font-family: var(--cg-f-text); font-size: 12px; color: rgba(255,255,255,.28); }
.cg-foot-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.cg-foot-bdg { font-family: var(--cg-f-text); font-size: 11px; color: rgba(255,255,255,.45); padding: 6px 14px; border-radius: 2px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); letter-spacing: .04em; }

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
.cg-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.cg-reveal.cg-visible { opacity: 1; transform: none; }
@keyframes cg-fadU { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cg-fadL { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
    .cg-reveal { opacity: 1; transform: none; transition: none; }
    .cg-sec *, .cg-sec *::before, .cg-sec *::after {
        animation-duration: .001ms; animation-iteration-count: 1; transition-duration: .001ms;
    }
}

/* ==========================================================================
   RESPONSIVE
   Les maquettes HTML ne contenaient aucune media query : cette couche est
   ajoutée pour que le rendu tienne sur laptop, tablette et mobile.
   ========================================================================== */
@media (max-width: 1380px) {
    :root { --cg-px: 48px; }
    .cg-page h1.cg-hero-h1 { font-size: 62px; }
    .cg-page h1.cg-lph-h1 { font-size: 60px; }
    .cg-page .cg-sec-title, .cg-page .cg-sec-h2, .cg-page .cg-about-h2 { font-size: 48px; }
    .cg-q-text { font-size: 42px; }
    .cg-page .cg-fc-h2 { font-size: 54px; }
    .cg-hero-wrap, .cg-lph-wrap { gap: 48px; }
    .cg-about-grid, .cg-process-grid, .cg-axes-grid, .cg-prob-grid { gap: 60px; }
    .cg-price-box { padding: 56px; gap: 48px; }
    .cg-cta-box { padding: 56px; gap: 48px; }
}

@media (max-width: 1024px) {
    :root { --cg-px: 32px; }
    .cg-hero { min-height: 0; padding-bottom: 40px; }
    .cg-hero-wrap, .cg-lph-wrap { grid-template-columns: 1fr; gap: 56px; }
    .cg-hero-right { padding-left: 0; }
    .cg-lp-hero { min-height: 0; padding-bottom: 40px; }
    .cg-lph-geo-y, .cg-lph-geo-o, .cg-lph-circle, .cg-lph-circle2 { display: none; }
    .cg-lph-geo-r { width: 100%; opacity: .35; clip-path: none; }
    .cg-srv-grid, .cg-mod-grid, .cg-va-grid { grid-template-columns: repeat(2,1fr); }
    .cg-phases { grid-template-columns: repeat(2,1fr); }
    .cg-ph-connector { display: none; }
    .cg-about-grid, .cg-process-grid, .cg-axes-grid, .cg-prob-grid { grid-template-columns: 1fr; gap: 56px; }
    .cg-process-sticky, .cg-axes-sticky { position: static; }
    .cg-img-area { max-width: 420px; }
    .cg-price-box { grid-template-columns: 1fr; gap: 40px; }
    .cg-cta-box { grid-template-columns: 1fr; gap: 40px; }
    .cg-foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .cg-services, .cg-about, .cg-process, .cg-program, .cg-axes, .cg-va-section, .cg-modalities, .cg-pricing, .cg-final-cta, .cg-cta-sec, .cg-problem { padding: 88px 0; }
}

@media (max-width: 600px) {
    :root { --cg-px: 20px; }
    .cg-page h1.cg-hero-h1 { font-size: 42px; }
    .cg-page h1.cg-lph-h1 { font-size: 40px; }
    .cg-page .cg-sec-title, .cg-page .cg-sec-h2, .cg-page .cg-about-h2, .cg-page .cg-va-h2 { font-size: 34px; }
    .cg-page .cg-cta-h2 { font-size: 32px; }
    .cg-page .cg-fc-h2 { font-size: 36px; }
    .cg-q-text { font-size: 28px; }
    .cg-q-mark { font-size: 140px; }
    .cg-proof-q { font-size: 28px; }
    .cg-p-main { font-size: 60px; }
    .cg-srv-grid, .cg-mod-grid, .cg-va-grid, .cg-phases, .cg-axes-list, .cg-foot-grid { grid-template-columns: 1fr; }
    .cg-hero-stats { gap: 28px; }
    .cg-stat-num { font-size: 40px; }
    .cg-srv-card { padding: 40px 28px 36px; }
    .cg-price-box, .cg-cta-box { padding: 36px 24px; }
    .cg-services, .cg-about, .cg-process, .cg-program, .cg-axes, .cg-va-section, .cg-modalities, .cg-pricing, .cg-final-cta, .cg-cta-sec, .cg-problem { padding: 64px 0; }
    .cg-img-badge { width: 110px; height: 110px; right: -12px; bottom: -20px; padding: 14px; }
    .cg-img-badge-txt { font-size: 11px; }
    .cg-foot-bottom { flex-direction: column; align-items: flex-start; }
    .cg-btn-yellow, .cg-btn-y, .cg-btn-blue, .cg-btn-cta { width: 100%; text-align: center; }
    .cg-hero-actions, .cg-lph-actions { gap: 14px; }
}

/* ==========================================================================
   PARTIE 2 — Structuration du site (docx « Structuration site @ » v1)
   Composants ajoutés pour les pages internes : héros de page, prose,
   listes d'offres, encarts, formulaires WPForms, sous-menus.
   ========================================================================== */

/* ── SOUS-MENUS (niveau 2) ─────────────────────────────────────────────── */
.l-header .w-nav-list.level_2 {
    background: var(--cg-dark);
    border-top: 2px solid var(--cg-yellow);
    box-shadow: 0 12px 40px rgba(0,0,0,.35);
    padding: 8px 0;
    min-width: 250px;
}
.l-header .w-nav-item.level_2 > .w-nav-anchor {
    font-family: var(--cg-f-text);
    font-size: 13px; font-weight: 400;
    color: rgba(255,255,255,.7);
    letter-spacing: .02em; text-transform: none;
    padding: 11px 24px;
    transition: color .2s, background .2s;
}
.l-header .w-nav-item.level_2 > .w-nav-anchor:hover,
.l-header .w-nav-item.level_2.current-menu-item > .w-nav-anchor {
    color: var(--cg-yellow);
    background: rgba(255,255,255,.05);
}
.l-header .w-nav-item.level_1 > .w-nav-anchor .w-nav-arrow { color: inherit; }

/* ── HÉROS DE PAGE (pages éditoriales, plus compact que le héros landing) ─ */
.cg-page-hero {
    background: var(--cg-dark);
    padding: 152px 0 92px;
    position: relative; overflow: hidden;
}
.cg-pgh-geo {
    position: absolute; top: 0; right: 0; bottom: 0; width: 40%;
    background: var(--cg-blue);
    clip-path: polygon(22% 0, 100% 0, 100% 100%, 0% 100%);
}
.cg-pgh-tri {
    position: absolute; right: 0; bottom: 0; width: 0; height: 0;
    border-style: solid; border-width: 0 0 220px 300px;
    border-color: transparent transparent rgba(244,196,49,.16) transparent;
}
.cg-pgh-inner { position: relative; z-index: 1; max-width: 940px; }
.cg-pgh-breadcrumb {
    font-family: var(--cg-f-text); font-size: 12px;
    color: rgba(255,255,255,.38); margin-bottom: 20px; letter-spacing: .04em;
}
.cg-pgh-breadcrumb a { color: rgba(255,255,255,.55); text-decoration: none; transition: color .2s; }
.cg-pgh-breadcrumb a:hover { color: var(--cg-yellow); }
.cg-pgh-eyebrow {
    display: flex; align-items: center; gap: 14px;
    font-family: var(--cg-f-text); font-size: 11px; font-weight: 500;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--cg-yellow); margin-bottom: 20px;
}
.cg-pgh-eyebrow span { display: block; width: 36px; height: 1px; background: var(--cg-yellow); }
.cg-page h1.cg-pgh-h1 {
    font-family: var(--cg-f-title);
    font-size: 66px; font-weight: 500; line-height: 1.04;
    color: #fff; margin: 0 0 22px; letter-spacing: -.015em;
}
.cg-pgh-h1 em { font-style: italic; color: var(--cg-yellow); }
.cg-pgh-desc {
    font-family: var(--cg-f-text); font-size: 16px; font-weight: 300;
    line-height: 1.8; color: rgba(255,255,255,.66);
    max-width: 680px; margin: 0 0 36px;
}
.cg-pgh-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* ── SECTIONS GÉNÉRIQUES ───────────────────────────────────────────────── */
.cg-sec-w { padding: 110px 0; background: var(--cg-white); }
.cg-sec-l { padding: 110px 0; background: var(--cg-blue-light); }
.cg-sec-d { padding: 110px 0; background: var(--cg-dark); position: relative; overflow: hidden; }
.cg-sec-b { padding: 110px 0; background: var(--cg-blue); position: relative; overflow: hidden; }
.cg-sec-b::before, .cg-sec-d::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(-45deg, transparent, transparent 40px, rgba(255,255,255,.018) 40px, rgba(255,255,255,.018) 41px);
}
.cg-sec-b > .cg-wrap, .cg-sec-d > .cg-wrap { position: relative; z-index: 1; }
.cg-sec-d .cg-sec-eyebrow, .cg-sec-b .cg-sec-eyebrow { color: var(--cg-yellow); }
.cg-sec-d .cg-sec-eyebrow::before, .cg-sec-b .cg-sec-eyebrow::before { background: var(--cg-yellow); }
.cg-page .cg-sec-d .cg-sec-h2, .cg-page .cg-sec-b .cg-sec-h2 { color: #fff; }
.cg-sec-d .cg-sec-h2 em, .cg-sec-b .cg-sec-h2 em { color: var(--cg-yellow); }
.cg-head-center { text-align: center; max-width: 860px; margin: 0 auto 72px; }
.cg-head-center .cg-sec-eyebrow { justify-content: center; }
.cg-head { margin-bottom: 64px; max-width: 860px; }

/* ── PROSE (texte long) ────────────────────────────────────────────────── */
.cg-prose { font-family: var(--cg-f-text); font-size: 15.5px; font-weight: 300; line-height: 1.85; color: var(--cg-gray); }
.cg-prose > * + * { margin-top: 20px; }
.cg-prose p { margin: 0; }
.cg-prose strong { color: var(--cg-dark); font-weight: 500; }
.cg-prose em { font-style: italic; }
.cg-prose a { color: var(--cg-blue); text-decoration: underline; text-underline-offset: 3px; }
.cg-prose a:hover { color: var(--cg-orange); }
.cg-page .cg-prose h3 {
    font-family: var(--cg-f-title); font-size: 30px; font-weight: 600;
    color: var(--cg-dark); line-height: 1.2; margin: 46px 0 0;
}
.cg-page .cg-prose h4 {
    font-family: var(--cg-f-text); font-size: 13px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--cg-orange); margin: 36px 0 0;
}
.cg-prose ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.cg-prose ul li { padding-left: 22px; position: relative; }
.cg-prose ul li::before {
    content: ''; position: absolute; left: 0; top: 11px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--cg-yellow);
}
.cg-prose ol { padding-left: 22px; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.cg-prose ol li::marker { color: var(--cg-orange); font-weight: 600; }
.cg-sec-d .cg-prose, .cg-sec-b .cg-prose { color: rgba(255,255,255,.6); }
.cg-sec-d .cg-prose strong, .cg-sec-b .cg-prose strong { color: #fff; font-weight: 400; }
.cg-page .cg-sec-d .cg-prose h3, .cg-page .cg-sec-b .cg-prose h3 { color: #fff; }
.cg-sec-d .cg-prose a, .cg-sec-b .cg-prose a { color: var(--cg-yellow); }

/* Deux colonnes : colonne collante à gauche, prose à droite */
.cg-split { display: grid; grid-template-columns: 5fr 7fr; gap: 90px; align-items: start; }
.cg-split-sticky { position: sticky; top: 108px; }
.cg-split-narrow { display: grid; grid-template-columns: 4fr 8fr; gap: 80px; align-items: start; }

/* ── ENCART ────────────────────────────────────────────────────────────── */
.cg-callout {
    background: #fff; border-left: 3px solid var(--cg-yellow);
    border-radius: 3px; padding: 32px 36px;
    box-shadow: 0 4px 32px rgba(1,49,131,.07);
    font-family: var(--cg-f-text); font-size: 14.5px; font-weight: 300;
    line-height: 1.8; color: var(--cg-gray);
}
.cg-callout strong { color: var(--cg-dark); font-weight: 500; }
.cg-page .cg-callout-h {
    font-family: var(--cg-f-title); font-size: 24px; font-weight: 600;
    color: var(--cg-dark); margin: 0 0 12px;
}
.cg-callout-note {
    background: var(--cg-yellow-pale); border-left-color: var(--cg-orange);
    box-shadow: none;
}
.cg-sec-d .cg-callout, .cg-sec-b .cg-callout {
    background: rgba(255,255,255,.05); border-left-color: var(--cg-yellow);
    color: rgba(255,255,255,.62); box-shadow: none;
}
.cg-sec-d .cg-callout strong, .cg-sec-b .cg-callout strong { color: #fff; }
.cg-page .cg-sec-d .cg-callout-h, .cg-page .cg-sec-b .cg-callout-h { color: #fff; }

/* ── CARTES « PORTE D'ENTRÉE » (audiences) ─────────────────────────────── */
.cg-aud-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--cg-gray-light); }
.cg-aud {
    background: var(--cg-white); padding: 48px 38px 40px;
    display: flex; flex-direction: column;
    position: relative; overflow: hidden;
    border-top: 3px solid transparent; transition: background .4s;
    text-decoration: none;
}
.cg-aud::before {
    content: ''; position: absolute; inset: 0; background: var(--cg-blue);
    transform: scaleY(0); transform-origin: bottom;
    transition: transform .45s cubic-bezier(.4,0,.2,1); z-index: 0;
}
.cg-aud:hover::before { transform: scaleY(1); }
.cg-aud:hover { border-top-color: var(--cg-yellow); }
.cg-aud > * { position: relative; z-index: 1; }
.cg-aud-icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--cg-yellow-pale); color: var(--cg-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; margin-bottom: 24px; transition: background .4s;
}
.cg-aud:hover .cg-aud-icon { background: rgba(255,255,255,.12); }
.cg-aud-tag {
    font-family: var(--cg-f-text); font-size: 10px; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--cg-orange); margin-bottom: 10px; transition: color .4s;
}
.cg-aud:hover .cg-aud-tag { color: var(--cg-yellow); }
.cg-page .cg-aud-title {
    font-family: var(--cg-f-title); font-size: 27px; font-weight: 600;
    line-height: 1.2; color: var(--cg-dark); margin: 0 0 14px; transition: color .4s;
}
.cg-aud:hover .cg-aud-title { color: #fff; }
.cg-aud-text {
    font-family: var(--cg-f-text); font-size: 13.5px; line-height: 1.7;
    color: var(--cg-gray); font-weight: 300; margin: 0 0 26px; flex-grow: 1; transition: color .4s;
}
.cg-aud:hover .cg-aud-text { color: rgba(255,255,255,.65); }
.cg-aud-lnk {
    font-family: var(--cg-f-text); font-size: 11px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--cg-blue);
    display: inline-flex; align-items: center; gap: 8px; transition: color .4s;
}
.cg-aud-lnk::after { content: '\2192'; transition: transform .2s; }
.cg-aud:hover .cg-aud-lnk { color: var(--cg-yellow); }
.cg-aud:hover .cg-aud-lnk::after { transform: translateX(4px); }

/* ── BANDEAU CO-DÉVELOPPEMENT (accueil) ────────────────────────────────── */
.cg-codev-strip {
    margin-top: 2px; background: var(--cg-blue); border-radius: 0 0 3px 3px;
    padding: 44px 48px; display: grid; grid-template-columns: 1fr auto;
    gap: 40px; align-items: center; position: relative; overflow: hidden;
}
.cg-codev-strip::after {
    content: ''; position: absolute; top: -40px; right: 8%;
    width: 200px; height: 200px; border-radius: 50%;
    background: var(--cg-yellow); opacity: .08;
}
.cg-codev-strip > * { position: relative; z-index: 1; }
.cg-cs-tag {
    font-family: var(--cg-f-text); font-size: 10px; font-weight: 600;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--cg-yellow); margin-bottom: 10px;
}
.cg-page .cg-cs-h {
    font-family: var(--cg-f-title); font-size: 34px; font-weight: 500;
    color: #fff; margin: 0 0 10px; line-height: 1.15;
}
.cg-cs-h em { font-style: italic; color: var(--cg-yellow); }
.cg-cs-p {
    font-family: var(--cg-f-text); font-size: 14px; font-weight: 300;
    line-height: 1.7; color: rgba(255,255,255,.6); margin: 0; max-width: 720px;
}

/* ── LISTE D'OFFRES (« Pour aller plus loin ») ─────────────────────────── */
.cg-off-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.cg-off {
    background: #fff; border: 1px solid var(--cg-gray-light);
    border-top: 3px solid var(--cg-orange); border-radius: 3px;
    padding: 34px 32px; display: flex; flex-direction: column;
    text-decoration: none; transition: all .25s;
}
.cg-off:hover {
    border-color: var(--cg-blue); border-top-color: var(--cg-yellow);
    box-shadow: 0 10px 36px rgba(1,49,131,.09); transform: translateY(-2px);
}
.cg-off-tag {
    font-family: var(--cg-f-text); font-size: 10px; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--cg-orange); margin-bottom: 12px;
}
.cg-page .cg-off-title {
    font-family: var(--cg-f-title); font-size: 24px; font-weight: 600;
    line-height: 1.2; color: var(--cg-dark); margin: 0 0 10px;
}
.cg-off-text {
    font-family: var(--cg-f-text); font-size: 13.5px; line-height: 1.7;
    color: var(--cg-gray); font-weight: 300; margin: 0 0 20px; flex-grow: 1;
}
.cg-off-meta {
    font-family: var(--cg-f-text); font-size: 12px; color: var(--cg-gray);
    padding-top: 16px; border-top: 1px solid var(--cg-gray-light);
    display: flex; gap: 18px; flex-wrap: wrap;
}
.cg-off-meta strong { color: var(--cg-dark); font-weight: 500; }
.cg-off-lnk {
    font-family: var(--cg-f-text); font-size: 11px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--cg-blue);
    margin-top: 16px; display: inline-flex; align-items: center; gap: 8px;
}
.cg-off-lnk::after { content: '\2192'; transition: transform .2s; }
.cg-off:hover .cg-off-lnk::after { transform: translateX(4px); }

/* ── BESOINS / LISTE À PUCES EN COLONNES ───────────────────────────────── */
.cg-needs { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px 40px; }
.cg-need {
    font-family: var(--cg-f-text); font-size: 14.5px; font-weight: 300;
    line-height: 1.6; color: var(--cg-dark);
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 0; border-bottom: 1px solid var(--cg-gray-light);
}
.cg-need::before {
    content: ''; display: block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--cg-yellow); flex-shrink: 0; margin-top: 8px;
}
.cg-sec-d .cg-need, .cg-sec-b .cg-need { color: rgba(255,255,255,.72); border-bottom-color: rgba(255,255,255,.1); }

/* ── CHIFFRES / REPÈRES ────────────────────────────────────────────────── */
.cg-facts { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; background: var(--cg-gray-light); }
.cg-fact { background: var(--cg-white); padding: 36px 30px; }
.cg-fact-n { font-family: var(--cg-f-title); font-size: 46px; font-weight: 600; line-height: 1; color: var(--cg-blue); }
.cg-fact-l { font-family: var(--cg-f-text); font-size: 12.5px; font-weight: 300; color: var(--cg-gray); margin-top: 8px; line-height: 1.5; }

/* ── DIPLÔMES / JALONS ─────────────────────────────────────────────────── */
.cg-cert-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.cg-cert {
    background: #fff; border-radius: 3px; padding: 28px 30px;
    border-left: 3px solid var(--cg-blue);
    box-shadow: 0 4px 26px rgba(1,49,131,.06);
}
.cg-cert:nth-child(2n) { border-left-color: var(--cg-yellow); }
.cg-cert-date {
    font-family: var(--cg-f-text); font-size: 10px; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--cg-orange); margin-bottom: 8px;
}
.cg-page .cg-cert-h {
    font-family: var(--cg-f-title); font-size: 21px; font-weight: 600;
    color: var(--cg-dark); margin: 0 0 8px; line-height: 1.25;
}
.cg-cert-p { font-family: var(--cg-f-text); font-size: 13px; font-weight: 300; line-height: 1.65; color: var(--cg-gray); margin: 0; }

/* ── CONTACT : CANAUX ──────────────────────────────────────────────────── */
.cg-chan-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; background: var(--cg-gray-light); }
.cg-chan {
    background: var(--cg-white); padding: 46px 36px;
    border-top: 3px solid transparent; transition: border-color .2s;
    display: flex; flex-direction: column;
}
.cg-chan:hover { border-top-color: var(--cg-orange); }
.cg-chan-icon { font-size: 26px; margin-bottom: 18px; }
.cg-chan-n {
    font-family: var(--cg-f-text); font-size: 10px; font-weight: 600;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--cg-orange); margin-bottom: 10px;
}
.cg-page .cg-chan-h {
    font-family: var(--cg-f-title); font-size: 24px; font-weight: 600;
    color: var(--cg-dark); margin: 0 0 12px;
}
.cg-chan-p {
    font-family: var(--cg-f-text); font-size: 13.5px; font-weight: 300;
    line-height: 1.7; color: var(--cg-gray); margin: 0 0 22px; flex-grow: 1;
}
.cg-chan-val {
    font-family: var(--cg-f-title); font-size: 26px; font-weight: 600;
    color: var(--cg-blue); text-decoration: none; display: block; word-break: break-word;
}
.cg-chan-val:hover { color: var(--cg-orange); }
.cg-chan-slots {
    font-family: var(--cg-f-text); font-size: 13px; font-weight: 300;
    color: var(--cg-gray); line-height: 1.7;
}
.cg-chan-slots strong { color: var(--cg-dark); font-weight: 500; }

/* ── CRÉNEAUX / RENDEZ-VOUS EN LIGNE ───────────────────────────────────── */
.cg-cal {
    background: #fff; border-radius: 4px; padding: 56px;
    box-shadow: 0 8px 60px rgba(1,49,131,.1);
    display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center;
}
.cg-cal-embed {
    min-height: 320px; border-radius: 3px;
    border: 1px dashed rgba(1,49,131,.25); background: var(--cg-blue-light);
    display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 32px;
    font-family: var(--cg-f-text); font-size: 13.5px; font-weight: 300;
    line-height: 1.7; color: var(--cg-gray);
}
.cg-cal-embed strong { color: var(--cg-blue); font-weight: 500; display: block; margin-bottom: 8px; }
.cg-slot-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.cg-slot {
    font-family: var(--cg-f-text); font-size: 13px; font-weight: 500;
    color: var(--cg-blue); background: var(--cg-blue-light);
    border-radius: 2px; padding: 8px 16px;
}

/* ── FORMULAIRES WPForms ───────────────────────────────────────────────── */
.l-section.cg-formwrap { background: var(--cg-white); }
.l-section.cg-formwrap > .l-section-h {
    max-width: var(--cg-w-max); margin: 0 auto;
    padding: 0 var(--cg-px) 110px;
}
/* WPForms cible son conteneur par un sélecteur d'ID (#wpforms-42) : une chaîne
   de classes ne peut pas gagner, d'où les !important sur la « carte ». */
.cg-formwrap .wpforms-container {
    max-width: 880px !important; margin: 0 auto !important;
    background: #fff !important;
    border-radius: 4px !important;
    padding: 56px !important;
    box-shadow: 0 8px 60px rgba(1,49,131,.1) !important;
}
.cg-formwrap .wpforms-container .wpforms-field { padding: 12px 0; }
.cg-formwrap .wpforms-container .wpforms-field-label {
    font-family: var(--cg-f-text) !important;
    font-size: 13.5px !important; font-weight: 500 !important;
    color: var(--cg-dark) !important; margin-bottom: 8px !important;
}
.cg-formwrap .wpforms-container .wpforms-field-sublabel,
.cg-formwrap .wpforms-container .wpforms-field-description {
    font-family: var(--cg-f-text) !important;
    font-size: 12px !important; font-weight: 300 !important;
    color: var(--cg-gray) !important;
}
.cg-formwrap .wpforms-container input[type=text],
.cg-formwrap .wpforms-container input[type=email],
.cg-formwrap .wpforms-container input[type=tel],
.cg-formwrap .wpforms-container input[type=number],
.cg-formwrap .wpforms-container select,
.cg-formwrap .wpforms-container textarea {
    font-family: var(--cg-f-text) !important;
    font-size: 14px !important; color: var(--cg-dark) !important;
    background: #fff !important;
    border: 1px solid var(--cg-gray-light) !important;
    border-radius: 2px !important;
    padding: 13px 16px !important;
    box-shadow: none !important;
    transition: border-color .2s;
    max-width: 100%;
    /* WPForms fixe height:43px et, sur les <select>, line-height:28px : avec
       box-sizing:border-box et 26px de padding vertical, la boîte de contenu ne
       fait plus que 17px et la ligne de texte est rognée. On laisse donc la
       hauteur s'adapter au contenu. */
    height: auto !important;
    line-height: 1.4 !important;
}
.cg-formwrap .wpforms-container input:focus,
.cg-formwrap .wpforms-container select:focus,
.cg-formwrap .wpforms-container textarea:focus {
    border-color: var(--cg-blue) !important; outline: none !important;
}
.cg-formwrap .wpforms-container textarea { min-height: 130px; }
.cg-formwrap .wpforms-container .wpforms-field-radio ul,
.cg-formwrap .wpforms-container .wpforms-field-checkbox ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 9px;
}
.cg-formwrap .wpforms-container .wpforms-field-radio li,
.cg-formwrap .wpforms-container .wpforms-field-checkbox li {
    font-family: var(--cg-f-text); font-size: 14px; color: var(--cg-dark);
    display: flex; align-items: center;
}
.cg-formwrap .wpforms-container .wpforms-field-label-inline {
    margin: 0 !important; cursor: pointer; font-weight: 400 !important;
}

/* Boutons radio et cases à cocher.
   WPForms pose appearance:none et dessine la puce avec une bordure, mais la
   remise à zéro des champs par Impreza ramène border-width à 0 : la puce
   décochée devient invisible. On la redessine donc entièrement ici, le CSS du
   thème enfant étant chargé après celui d'Impreza. */
.cg-formwrap .wpforms-container input[type=radio],
.cg-formwrap .wpforms-container input[type=checkbox] {
    -webkit-appearance: none; appearance: none;
    width: 18px !important; height: 18px !important;
    flex-shrink: 0; position: relative; cursor: pointer;
    margin: 0 11px 0 0 !important;
    background: #fff !important;
    border: 1px solid var(--cg-gray) !important;
    transition: border-color .2s, background .2s;
}
.cg-formwrap .wpforms-container input[type=radio] { border-radius: 50% !important; }
.cg-formwrap .wpforms-container input[type=checkbox] { border-radius: 2px !important; }
.cg-formwrap .wpforms-container input[type=radio]:hover,
.cg-formwrap .wpforms-container input[type=checkbox]:hover { border-color: var(--cg-blue) !important; }
/* Coché : la case se remplit, le bouton radio garde un anneau clair et reçoit
   une pastille pleine au centre — la convention que les navigateurs et les
   bibliothèques d'interface utilisent, et la plus lisible à 18px. */
.cg-formwrap .wpforms-container input[type=radio]:checked {
    border-color: var(--cg-blue) !important;
    background: #fff !important;
}
.cg-formwrap .wpforms-container input[type=checkbox]:checked {
    border-color: var(--cg-blue) !important;
    background: var(--cg-blue) !important;
}
.cg-formwrap .wpforms-container input[type=radio]:checked::after {
    content: ''; position: absolute; inset: 3px;
    border-radius: 50%; background: var(--cg-blue);
}
.cg-formwrap .wpforms-container input[type=checkbox]:checked::after {
    content: ''; position: absolute; left: 5px; top: 1px;
    width: 4px; height: 9px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.cg-formwrap .wpforms-container input[type=radio]:focus-visible,
.cg-formwrap .wpforms-container input[type=checkbox]:focus-visible {
    outline: 2px solid var(--cg-yellow); outline-offset: 2px;
}
.cg-formwrap .wpforms-container .wpforms-required-label { color: var(--cg-orange) !important; }
.cg-formwrap .wpforms-container button[type=submit] {
    background: var(--cg-blue) !important; color: #fff !important;
    border: none !important; border-radius: 2px !important;
    padding: 17px 40px !important; margin-top: 12px;
    font-family: var(--cg-f-text) !important;
    font-size: 13px !important; font-weight: 600 !important;
    letter-spacing: .09em !important; text-transform: uppercase !important;
    transition: background .25s, transform .25s !important;
}
.cg-formwrap .wpforms-container button[type=submit]:hover {
    background: var(--cg-blue-mid) !important; transform: translateY(-2px);
}
.cg-formwrap .wpforms-confirmation-container-full {
    background: var(--cg-yellow-pale) !important;
    border: 1px solid var(--cg-yellow) !important;
    border-radius: 3px; font-family: var(--cg-f-text);
    color: var(--cg-dark);
}

/* ── PIED DE SECTION : NOTE TARIFAIRE ──────────────────────────────────── */
.cg-fees {
    margin-top: 40px; padding-top: 28px;
    border-top: 1px solid var(--cg-gray-light);
    font-family: var(--cg-f-text); font-size: 13px; font-weight: 300;
    line-height: 1.8; color: var(--cg-gray);
}
.cg-fees strong { color: var(--cg-dark); font-weight: 500; }

/* ── RESPONSIVE (compléments) ──────────────────────────────────────────── */
@media (max-width: 1380px) {
    .cg-page h1.cg-pgh-h1 { font-size: 54px; }
    .cg-split, .cg-split-narrow { gap: 56px; }
    .cg-cal { padding: 40px; gap: 40px; }
    .cg-formwrap .wpforms-container { padding: 40px !important; }
}
@media (max-width: 1024px) {
    .cg-page-hero { padding: 128px 0 72px; }
    .cg-split, .cg-split-narrow, .cg-cal { grid-template-columns: 1fr; gap: 44px; }
    .cg-split-sticky { position: static; }
    .cg-aud-grid, .cg-chan-grid, .cg-off-grid, .cg-cert-grid { grid-template-columns: repeat(2,1fr); }
    .cg-facts { grid-template-columns: repeat(2,1fr); }
    .cg-codev-strip { grid-template-columns: 1fr; padding: 36px 32px; gap: 28px; }
    .cg-sec-w, .cg-sec-l, .cg-sec-d, .cg-sec-b { padding: 80px 0; }
    .l-section.cg-formwrap > .l-section-h { padding-bottom: 80px; }
}
@media (max-width: 600px) {
    .cg-page h1.cg-pgh-h1 { font-size: 36px; }
    .cg-page .cg-cs-h { font-size: 26px; }
    .cg-aud-grid, .cg-chan-grid, .cg-off-grid, .cg-cert-grid, .cg-needs, .cg-facts { grid-template-columns: 1fr; }
    .cg-sec-w, .cg-sec-l, .cg-sec-d, .cg-sec-b { padding: 60px 0; }
    .l-section.cg-formwrap > .l-section-h { padding-bottom: 60px; }
    .cg-formwrap .wpforms-container { padding: 28px 22px !important; }
    .cg-cal { padding: 28px 22px; }
    .cg-aud, .cg-chan { padding: 36px 26px; }
    .cg-page-hero { padding: 112px 0 56px; }
    .cg-formwrap .wpforms-container button[type=submit] { width: 100%; }
}

/* ==========================================================================
   PARTIE 3 — Contenu WPBakery réellement modifiable
   Les pages ne sont plus un [vc_raw_html] en base64 mais une suite de lignes
   [vc_row] contenant des éléments [vc_column_text] : le HTML reste lisible et
   modifiable depuis l'éditeur. Cette couche fait jouer à l'ossature WPBakery
   le rôle que tenaient <section> et .cg-wrap dans les maquettes.

   Deux classes d'hôte, posées par le convertisseur :
     .cg-row      — section standard. La ligne garde la largeur de contenu du
                    thème (site_content_width = 1400px = --cg-w-max), son
                    conteneur interne .l-section-h remplace donc .cg-wrap.
     .cg-row-full — héros. La ligne est réglée sur « Full Width » : le contenu
                    fournit lui-même son conteneur centré (.cg-hero-wrap,
                    .cg-lph-wrap).

   Le padding vertical vient des classes .cg-sec-* : les lignes sont émises avec
   height="auto", qui supprime toute classe height_* d'Impreza. Il n'y a donc
   aucun padding du thème à neutraliser ici.
   ========================================================================== */

.l-section.cg-row,
.l-section.cg-row-full {
    /* Impreza pose --padding-inline:5vmin sur .l-section et .l-section-h le
       consomme. On lui substitue la gouttière du design system, qui suit déjà
       les points de rupture. */
    --padding-inline: var(--cg-px);
}
.cg-row-full > .l-section-h {
    /* .cg-hero est en display:flex ; son enfant direct doit occuper la largeur. */
    width: 100%;
}

/* Les habillages internes de WPBakery n'ajoutent ni marge ni décalage. */
.cg-row .g-cols,
.cg-row-full .g-cols { margin: 0; }
.cg-row .g-cols > .wpb_column,
.cg-row-full .g-cols > .wpb_column { padding: 0; }
.cg-row .vc_column-inner,
.cg-row-full .vc_column-inner { padding: 0; }
.cg-row .wpb_content_element,
.cg-row-full .wpb_content_element { margin-bottom: 0; }
.cg-row .wpb_text_column > :last-child,
.cg-row-full .wpb_text_column > :last-child { margin-bottom: 0; }

/* Aucun de ces habillages ne doit créer de bloc de positionnement : les décors
   en position absolue (.cg-pgh-geo, .cg-fc-bg-y, .cg-lph-geo-r…) vivent
   désormais DANS un élément texte et doivent continuer à s'ancrer sur la
   section, pas sur un conteneur intermédiaire. */
.cg-row > .l-section-h,      .cg-row-full > .l-section-h,
.cg-row .g-cols,             .cg-row-full .g-cols,
.cg-row .wpb_column,         .cg-row-full .wpb_column,
.cg-row .vc_column-inner,    .cg-row-full .vc_column-inner,
.cg-row .wpb_text_column,    .cg-row-full .wpb_text_column { position: static; }

/* wpautop, appliqué par vc_column_text, insère un <p> vide quand un bloc se
   termine par un saut de ligne. */
.cg-row .wpb_text_column p:empty,
.cg-row-full .wpb_text_column p:empty { display: none; }

/* Utilitaire : section dont le contenu se poursuit dans la ligne suivante
   (l'en-tête d'un formulaire, dont le formulaire occupe sa propre ligne). */
.cg-sec-pb-0 { padding-bottom: 0; }

/* Second paragraphe du bloc CTA : remplace un <br><br> que wpautop coupait en
   deux paragraphes, en perdant la classe au passage. */
.cg-cta-p + .cg-cta-p-note { margin-top: 20px; }

/* ── CARTES CLIQUABLES : LIEN ÉTENDU ───────────────────────────────────────
   Les cartes .cg-aud et .cg-off étaient un <a> englobant des éléments de
   niveau bloc. wpautop scinde systématiquement un tel <a> et l'enveloppe d'un
   <p>, qui devient un élément parasite dans la grille. La carte est donc un
   <div> et c'est le lien de pied de carte qui est « étendu » à toute la
   surface via un ::before absolu — le patron habituel, également meilleur pour
   les lecteurs d'écran : le nom du lien est le libellé, pas la carte entière. */
.cg-aud-lnk a,
.cg-off-lnk a {
    font-family: var(--cg-f-text); font-size: 11px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--cg-blue); text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
    transition: color .4s;
}
.cg-aud-lnk a::before,
.cg-off-lnk a::before {
    content: ''; position: absolute; inset: 0; z-index: 2;
}
.cg-aud-lnk a::after,
.cg-off-lnk a::after { content: '\2192'; transition: transform .2s; }
.cg-aud:hover .cg-aud-lnk a { color: var(--cg-yellow); }
.cg-aud:hover .cg-aud-lnk a::after,
.cg-off:hover .cg-off-lnk a::after { transform: translateX(4px); }
.cg-aud-lnk a:focus-visible,
.cg-off-lnk a:focus-visible { outline: 2px solid var(--cg-yellow); outline-offset: 3px; }