/* Coora-Site — systeme visuel du site.
   Reconstruction a l'identique de coora.fr (palette + Poppins d'origine).
   Pose par le chantier Accueil ; reutilise par toutes les pages. */

/* ============================================================
   Police Poppins (auto-hebergee, sous-ensemble latin normal)
   ============================================================ */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url(../fonts/poppins-200.woff2) format("woff2");
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/poppins-300.woff2) format("woff2");
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/poppins-400.woff2) format("woff2");
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/poppins-500.woff2) format("woff2");
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/poppins-600.woff2) format("woff2");
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/poppins-700.woff2) format("woff2");
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(../fonts/poppins-800.woff2) format("woff2");
}

/* ============================================================
   Tokens
   ============================================================ */
:root {
    --blue: #074187;      /* couleur primaire : titres, texte fort */
    --mint: #1de1a4;      /* accent : emphase, boutons, puces */
    --gray-bg: #f1f1f1;   /* fond des bandes alternees */
    --dark: #212529;
    --text: #074187;      /* corps de texte : bleu primaire (kit d'origine) */
    --white: #fff;

    --container: 1280px;  /* largeur de section du kit d'origine */
    --radius-pill: 25px;
    --shadow: 0 10px 30px rgba(7, 65, 135, .12);
    --header-h: 84px;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text);
    background: var(--white);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); }

h1, h2, h3 {
    color: var(--blue);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 .6em;
}
h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.125rem); }
h3 { font-size: clamp(1.4rem, 2.8vw, 2.375rem); }

/* Mots mis en avant dans les titres : menthe, droits, legerement plus grands
   (reproduit le .title-fx em de l'original). */
h1 em, h2 em, h3 em { color: var(--mint); font-style: normal; font-size: 1.2em; }
h1 strong { color: var(--mint); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

/* Accessibilite : lien d'evitement */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--blue);
    color: #fff;
    padding: .5rem 1rem;
    z-index: 200;
}
.skip-link:focus { left: 0; }

/* ============================================================
   Boutons (CTA — pattern >= 3, en CSS)
   ============================================================ */
.btn {
    display: inline-block;
    background: var(--mint);
    color: #fff;
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1;
    padding: 12px 24px;
    border: 3px solid var(--mint);
    border-radius: var(--radius-pill);
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.btn:hover, .btn:focus-visible {
    background: var(--white);
    color: var(--mint);
}
/* Variante 15px (le live regle la taille bouton par bouton : CTA de contenu
   Accueil / Agence / Notre Histoire a 15px ; header et Expertise restent 18px). */
.btn--sm { font-size: 15px; }

/* ============================================================
   Sections / bandes (pattern >= 3, en CSS)
   ============================================================ */
.section { padding-block: clamp(2.5rem, 6vw, 5rem); }
.section--alt { background: var(--gray-bg); }
.section--tint { background: linear-gradient(180deg, #eafaf4, #fff); }

/* Section a fond bleu (bandes « pilier » et « contact ») : texte en clair. */
.section--blue { background: var(--blue); color: #fff; }
.section--blue h1, .section--blue h2, .section--blue h3 { color: #fff; }
.section--blue a:not(.btn) { color: #fff; }

/* Filigrane symbole Coora derriere les temoignages (reproduit l'original). */
.section--symbol {
    position: relative;
    background: var(--gray-bg) url(../img/coora-symbol-white.png) no-repeat;
    background-position: -232px 116px;
    background-size: 948px auto;
    overflow: hidden;
}
.section--symbol > .container { position: relative; z-index: 1; }

.section__title { text-align: center; margin-bottom: 2rem; }
.lead { font-size: 1.1rem; }
.text-center { text-align: center; }

/* Grilles (patterns >= 3, en CSS) */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* ============================================================
   Header
   ============================================================ */
/* Header non sticky, fond transparent (comportement d'origine).
   position:relative (pas sticky) : sert d'ancre au menu mobile absolu. */
.site-header {
    position: relative;
    background: transparent;
}
/* Bandeau degrade bleu -> menthe sous le menu (divider d'origine, 7px). */
.site-header::after {
    content: "";
    display: block;
    height: 7px;
    background: linear-gradient(270deg, var(--blue) 0%, var(--mint) 100%);
}
/* Header pleine largeur (l'original n'est pas contraint au conteneur). */
.site-header .container { max-width: none; padding-inline: 25px; }
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--header-h);
}
/* flex-shrink:0 : sans lui, le flex ecrase la largeur du logo (deformation). */
.site-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.site-logo img { height: 50px; width: auto; }

.site-nav ul {
    display: flex;
    gap: 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-nav a {
    text-decoration: none;
    color: var(--blue);
    font-weight: 700;
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    padding: .35rem 0;
    border-bottom: 2px solid transparent;
    transition: color .4s ease;
}
/* Survol live : texte menthe, sans soulignement ni bordure (transition .4s). */
.site-nav a:hover { color: var(--mint); }
.site-nav a[aria-current="page"] { color: var(--mint); }

.site-header__cta { display: flex; align-items: center; gap: 1rem; }
/* Le bouton du header garde la bordure 2px du live (les CTA de contenu sont a 3px). */
.site-header__cta .btn { border-width: 2px; }
/* CTA du menu deroulant : mobile uniquement (l'original range le bouton dans le menu). */
.site-nav__cta { display: none; }

/* Hamburger (mobile) */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}
.nav-toggle span {
    display: block;
    width: 26px;
    height: 3px;
    margin-inline: auto;
    background: var(--blue);
    border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 860px) {
    .nav-toggle { display: flex; flex-shrink: 0; }
    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--white);
        box-shadow: var(--shadow);
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
        z-index: 50;
    }
    .site-nav.is-open { max-height: 60vh; }
    .site-nav ul { flex-direction: column; gap: 0; padding: .5rem 1.25rem 1rem; }
    .site-nav a { display: block; padding: .75rem 0; border-bottom: 1px solid #eee; }
    /* Mobile comme l'original : logo grand + burger seuls, CTA dans le menu. */
    .site-header .container { padding-inline: 16px; }
    .site-header__inner { gap: .75rem; min-height: 72px; }
    .site-logo img { height: 48px; }
    .site-header__cta { display: none; }
    .site-nav__cta { display: block; padding-block: .75rem; }
    .site-nav__cta a.btn { display: inline-block; padding: .7rem 1.4rem; border-width: 2px; border-bottom: 0; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
    padding: 80px 0 50px;
    background: #0b1f3a url(../img/home-hero.jpg) no-repeat center center;
    background-size: cover;
}
/* Texte en haut a gauche, carte temoignage en bas a droite (layout d'origine). */
.hero > .container {
    min-height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
}
/* Typo d'origine : 52px, tres leger (200), interligne 1.7, tout blanc. */
.hero h1 {
    color: #fff;
    font-weight: 200;
    font-size: clamp(1.65rem, 3.6vw, 3.25rem);
    line-height: 1.7;
    max-width: 900px;
    margin: 0;
}
.hero h1 strong { color: #fff; font-weight: 700; }
/* Carte temoignage : vert-canard translucide, angles tres arrondis (original). */
.hero__quote {
    align-self: flex-end;
    max-width: 715px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: #3b746d69;
    border-radius: 40px;
    color: #fff;
    padding: 20px 25px;
}
.hero__quote blockquote { margin: 0 0 .75rem; font-size: 1.06rem; font-style: italic; }
.hero__author { flex-shrink: 0; }
.hero__author img { width: 163px; height: 163px; object-fit: cover; border-radius: 50%; }
.hero__quote cite { font-style: normal; font-weight: 500; color: #fff; }
@media (max-width: 767px) {
    .hero > .container { min-height: 70vh; }
    .hero h1 { max-width: 100%; }
    .hero__quote {
        flex-direction: column;
        align-self: stretch;
        max-width: 100%;
        text-align: left;
        padding: 1rem;
        border-radius: 24px;
        gap: 1rem;
    }
    .hero__author img { width: 96px; height: 96px; }
}

/* ============================================================
   Typo fidele par bande (valeurs relevees du site d'origine)
   ============================================================ */
/* « L'HUMAIN avant tout » : titre 80px/800, intro italique 23px. */
.band-humain h2 { font-size: clamp(2.4rem, 6.5vw, 5rem); font-weight: 800; }
.band-humain .lead { font-size: clamp(1.15rem, 2vw, 1.44rem); font-style: italic; }

/* Grands titres centres (« APPROCHE 360 », « CONFIANCE ») : 50px/800. */
.section__title { font-size: clamp(2rem, 4.5vw, 3.125rem); font-weight: 800; }

/* « Coora, pilier... » (bande bleue) : titre menthe 34px/700. */
.band-pilier h2 { color: var(--mint); font-size: clamp(1.6rem, 3vw, 2.125rem); font-weight: 700; }

/* Feature-rows : h3 38px/700, texte 18px/300. */
.feature h3 { font-size: clamp(1.5rem, 3.2vw, 2.375rem); font-weight: 700; }
.feature p { font-size: 1.125rem; font-weight: 300; line-height: 1.6; }

/* Contact : intro 34px/200, titre 46px/600 blanc. */
.contact__intro { font-size: clamp(1.4rem, 3vw, 2.125rem); font-weight: 200; }
.contact h2 { font-size: clamp(1.8rem, 3.8vw, 2.875rem); font-weight: 600; }

/* ============================================================
   Cartes valeurs
   ============================================================ */
.value { text-align: center; }
.value img { width: 190px; height: auto; margin: 0 auto 1rem; }
.value h2 { font-size: 1.875rem; font-weight: 600; }
.value p { font-size: 1.125rem; font-weight: 300; line-height: 1.4; }

/* Bande equipe (bande 4) : la photo d'equipe deborde sur la bande bleue
   suivante (original : image en absolu bottom -320px, z-index 3). */
.band-equipe {
    position: relative;
    z-index: 3;
    margin-top: 60px;
    padding-bottom: 0;
}
/* Texte manuscrit cale a mi-hauteur haute de la photo (calage d'origine). */
.band-equipe .grid-2 { align-items: center; }
@media (min-width: 768px) {
    /* Original : ~100px de marge totale, pas de padding haut de section. */
    .band-equipe { margin-top: 100px; padding-top: 0; }
    /* La photo deborde vers le HAUT (~111px) et vient toucher le bas des
       valeurs, comme la reference (blanc au-dessus ~0). */
    .team__photo img { margin-top: -111px; }
}
.team__photo img { margin-inline: auto; margin-bottom: -280px; width: 100%; max-width: 640px; }
.band-pilier { padding-top: clamp(5rem, 9vw, 8rem); }
@media (max-width: 767px) {
    .team__photo img { margin-bottom: -110px; max-width: 320px; }
}
.team__illustration img { margin-inline: auto; }
.hide-mobile { display: block; }
.show-mobile { display: none; }
@media (max-width: 767px) {
    .hide-mobile { display: none; }
    .show-mobile { display: block; }
}

/* ============================================================
   Feature-rows (approche 360) — specifique a la page
   ============================================================ */
.feature + .feature { margin-top: clamp(2rem, 5vw, 3.5rem); }
/* Colonne texte elargie : « L'infrastructure Coora-Connect » tient sur une ligne. */
@media (min-width: 768px) {
    .feature.grid-2 { grid-template-columns: 5fr 7fr; }
}
/* Visuels ronds : ~300px dans l'original, pas pleine colonne. */
.feature__visual { text-align: center; }
.feature__visual img { width: 300px; height: auto; margin-inline: auto; }

/* ============================================================
   Carrousel temoignages
   ============================================================ */
/* Style d'origine : pas de carte — grande photo ronde 250px a gauche,
   texte 24px/300, nom 28px, societe 30px/700 ; puces 15px bleu/menthe. */
.carousel { position: relative; width: 75%; margin-inline: auto; }
.carousel__viewport { overflow: hidden; }
.carousel__track { display: flex; flex-direction: column; gap: 2.5rem; }
.carousel.is-enhanced .carousel__track {
    flex-direction: row;
    gap: 0;
    transition: transform .5s ease;
    will-change: transform;
}
.carousel.is-enhanced .carousel__slide { flex: 0 0 100%; }
.carousel__slide {
    display: flex;
    gap: 2.5rem;
    align-items: center;
}
.carousel__slide img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
}
.carousel__slide blockquote {
    margin: 0 0 1rem;
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 300;
    line-height: 1.2;
    font-style: italic;
}
.carousel__slide cite { font-style: normal; }
.carousel__slide cite b {
    display: block;
    color: var(--blue);
    font-size: clamp(1.3rem, 2.2vw, 1.75rem);
    font-weight: 400;
}
.carousel__slide cite span {
    color: var(--blue);
    font-size: clamp(1.35rem, 2.4vw, 1.875rem);
    font-weight: 700;
}
.carousel__nav {
    display: none;
    justify-content: center;
    gap: .6rem;
    margin-top: 2rem;
}
.carousel.is-enhanced .carousel__nav { display: flex; }
.carousel__dot {
    width: 15px; height: 15px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--blue);
    cursor: pointer;
}
.carousel__dot[aria-current="true"] { background: var(--mint); }
@media (max-width: 767px) {
    .carousel { width: 100%; }
    .carousel__slide { flex-direction: column; text-align: center; }
    .carousel__slide img { width: 180px; height: 180px; }
}

/* ============================================================
   Formulaire de contact (rendu seul — backend = chantier dedie)
   ============================================================ */
.contact { text-align: center; }
.contact__form {
    max-width: 780px;
    margin: 2rem auto 0;
    text-align: left;
}
.contact__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.field--full { grid-column: 1 / -1; }
.field label {
    display: block;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: .35rem;
    font-size: 1rem;
}
.field .req { color: var(--mint); }
.field input,
.field textarea {
    width: 100%;
    font: inherit;
    font-size: 15px;
    line-height: 1.5;
    padding: 8px;
    border: 1px solid #666;
    border-radius: 20px;
    background: var(--white);
    color: var(--text);
}
.field input:focus,
.field textarea:focus { outline: 2px solid var(--mint); border-color: var(--mint); }
.field textarea { resize: vertical; min-height: 120px; }
.contact__note { font-size: .85rem; color: #7a8aa0; margin-top: 1rem; }
.section--blue .field label { color: #fff; }
.section--blue .contact__note { color: rgba(255, 255, 255, .8); }
.contact__footer { margin-top: 1.5rem; text-align: center; }
/* « Envoyer » : style gform du live (18px/600, pad 8/20, line-height 1.6 —
   meme releve que dbmdigitalday 2607-08, confirme au live 2026-07-23). */
.contact__footer .btn { min-width: 180px; font-weight: 600; padding: 8px 20px; line-height: 1.6; }
@media (max-width: 600px) {
    .contact__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
    background: var(--blue);
    color: #fff;
    padding-block: 3rem 1.5rem;
    margin-top: 0;
    position: relative;
}
/* Barre degradee 7px au-dessus du footer (divider d'origine, comme le header). */
.site-footer::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 0;
    right: 0;
    height: 7px;
    background: linear-gradient(270deg, var(--blue) 0%, var(--mint) 100%);
}
.site-footer a { color: #fff; text-decoration: none; }
/* Survol live : menthe, jamais de soulignement (uniformise aussi tel/email,
   inertes sur le live par scorie Elementor — opt-out pa 2607-11). */
.site-footer a:hover { color: var(--mint); }
.site-footer__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
}
.site-footer__logo img { height: 55px; width: auto; margin-bottom: 1rem; }
.site-footer address { font-style: normal; font-weight: 500; line-height: 24px; }
/* Reseaux : glyphes nus blancs (FontAwesome brands), boites 76px jointives. */
.site-footer__social { display: flex; gap: 0; align-items: center; }
.site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px; height: 76px;
    transition: transform .3s ease, opacity .3s ease;
}
/* Survol live : grossissement (elementor-animation-grow) + opacite .9. */
.site-footer__social a:hover { opacity: .9; transform: scale(1.1); }
.site-footer__social svg { width: auto; height: 38px; fill: #fff; }
/* Desktop (releves live 2026-07-23) : icones calees en bas de colonne (base
   alignee sur la ligne d'adresse) et bord droit au ras du conteneur (le live
   termine a 1599/1600 ; notre gouttiere .container de 20px est compensee). */
@media (min-width: 768px) {
    .site-footer__top { align-items: flex-end; }
    .site-footer__social { margin-right: -20px; }
}
.site-footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    font-size: 1rem;
    line-height: 24px;
}
.site-footer__legal { display: flex; gap: 1.25rem; }
.site-footer__legal a { font-weight: 500; }

/* Mobile : empiler adresse / reseaux et recentrer (comme l'original). */
@media (max-width: 767px) {
    .site-footer__top { flex-direction: column; align-items: center; text-align: center; }
    .site-footer__bottom { justify-content: center; text-align: center; }
    /* Le logo (display:block) se centre comme le reste de la colonne (live). */
    .site-footer__logo img { margin-inline: auto; }
}

/* Bouton remonter en haut */
.scroll-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 46px; height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mint);
    color: var(--blue);
    border-radius: 50%;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    z-index: 90;
}
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top svg { width: 20px; height: 20px; fill: currentColor; }

main { display: block; }

/* Responsive : grilles 2/3 colonnes -> 1 colonne */
@media (max-width: 767px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ============================================================
   Page Agence (/agence/) — chantier 2607-03
   Valeurs relevees du site d'origine (post-52.css + audit navigateur).
   ============================================================ */

/* Hero : photo de fond + voile bleu opacite .22, titre blanc 53/600. */
.agence-hero {
    position: relative;
    padding: 60px 0;
    background: var(--blue) url(../img/agence-hero.jpg) no-repeat;
    background-position: 2% -473px;
    background-size: cover;
}
.agence-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--blue);
    opacity: .22;
}
.agence-hero > .container { position: relative; z-index: 1; }
.agence-hero h1 {
    margin: 0;
    color: #fff;
    font-size: 53px;
    font-weight: 600;
    line-height: 1;
    text-align: left;
}
@media (max-width: 1024px) { .agence-hero h1 { font-size: 40px; } }
@media (max-width: 767px) {
    .agence-hero { background-position: center center; padding: 40px 15px; }
    .agence-hero h1 { font-size: 34px; }
}

/* Presentation : accroche (36/800) + intro, 2 colonnes 50/50. */
.agence-presentation { padding-block: 100px 40px; }
.agence-accroche h2 { font-size: 36px; font-weight: 800; line-height: 1.4; }
@media (max-width: 767px) { .agence-presentation { padding-block: 60px 30px; } }

/* Sur-titre « Ce qui fait de nous un partenaire unique » (span, pas de hN). */
.agence-overtitle {
    margin: 0 0 2.5rem;
    padding-top: 40px;
    text-align: center;
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    color: var(--blue);
}
.agence-overtitle em { color: var(--mint); font-style: normal; font-size: 1.2em; }

/* Piliers : 3 colonnes jointives, numero geant translucide en filigrane. */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
/* Calage d'origine : colonne padding 40/20, numero absolu a 10px du bord de
   colonne, titre demarrant ~80px a droite du numero et ~7px sous son sommet. */
.pillar { position: relative; padding: 40px 20px; }
.pillar__num {
    position: absolute;
    top: 40px;
    left: 10px;
    z-index: 0;
    margin: 0;
    font-size: 120px;
    font-weight: 600;
    line-height: 1;
    color: rgba(7, 65, 135, .64);
    pointer-events: none;
}
.pillar h2 {
    position: relative;
    z-index: 1;
    margin: 0 0 .6em 70px;
    padding-top: 7px;
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    color: var(--mint);
}
/* Description alignee sur le titre (l'original degage le numero pour les deux). */
.pillar p { position: relative; z-index: 1; margin-left: 70px; font-size: 18px; font-weight: 300; line-height: 1.4; }
/* Base 300 : strong par defaut (bolder) ne rend que 400 — forcer le 700 de l'original. */
.pillar p strong, .pillar p b { font-weight: 700; }

/* Synthese + CTA « Decouvrez notre approche » (bouton fin : bordure 3px / 15px). */
.agence-synthese { text-align: center; margin-top: 2.5rem; }
.agence-synthese p { font-size: 18px; font-weight: 300; line-height: 1.4; color: var(--blue); }
.agence-synthese strong { font-weight: 700; }
.agence-synthese .btn { margin-top: 1.5rem; }

/* Bande bleue « Des collaborations » : filigrane coora-oo en bas a droite.
   Rythme d'origine : padding 40px 0 (pas le clamp de .section) + marge 20px. */
.agence-collab { position: relative; overflow: hidden; padding: 40px 0; margin-bottom: 20px; }
.agence-collab::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 41%;
    height: 100%;
    background: url(../img/coora-oo-bicolore.png) no-repeat right bottom;
    background-size: contain;
    opacity: .18;
    pointer-events: none;
}
.agence-collab > .container { position: relative; z-index: 1; }
.agence-collab h2 { color: var(--mint); font-size: 34px; font-weight: 700; line-height: 57px; }
.agence-collab__sub { display: block; margin-bottom: 1rem; font-size: 16px; font-weight: 700; }
.agence-collab p { font-size: 16px; font-weight: 400; line-height: 1.5; }

/* Titre equipe (32/600 bleu) + intro, dans la meme section que la grille
   (original : titre -> intro ~20px, intro -> grille ~54px). */
/* La section equipe enchaine sans padding (l'original n'en a pas : le blanc
   au-dessus du titre = la seule marge 20px de la bande bleue). */
.agence-team { padding-block: 0; }
.agence-equipe-title { text-align: center; }
.agence-equipe-title h2 { margin-bottom: 20px; font-size: 32px; font-weight: 600; line-height: 1; color: var(--blue); }
.agence-equipe-intro { margin-bottom: 40px; text-align: center; }
.agence-equipe-intro p { font-size: 16px; font-weight: 400; line-height: 1.5; }

/* Grille equipe : 4 colonnes desktop -> 1 colonne mobile.
   marge -10px : compense le padding du conteneur pour des cartes a 300px
   comme l'original (colonnes Elementor 320 dont 10px de padding par cote). */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (min-width: 768px) { .team-grid { margin-inline: -10px; } }
.team-grid + .team-grid { margin-top: 20px; }
.team-cell { display: flex; align-items: center; justify-content: center; }
.team-cell--text { padding: 0 1rem; text-align: center; }
.team-cell--text p { line-height: 1.8; }
.team-cell--text.is-blue p { font-size: 16px; font-weight: 400; color: var(--blue); }
.team-cell--text.is-mint p { font-size: 18px; font-weight: 400; color: var(--mint); }

/* Carte flip 300x340 : recto photo + prenom, verso couleur + prenom + fonction. */
.team-card {
    position: relative;
    width: 100%;
    max-width: 300px;
    height: 340px;
    perspective: 1000px;
    cursor: pointer;
}
.team-card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .6s cubic-bezier(.5, .3, .3, 1);
    transform-style: preserve-3d;
}
.team-card:hover .team-card__inner,
.team-card:focus-within .team-card__inner { transform: rotateY(180deg); }
.team-card:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.team-card__front, .team-card__back {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    backface-visibility: hidden;
}
.team-card__front { background: #f3f3f3; }
.team-card__front img { width: 220px; height: 220px; object-fit: fill; }
.team-card__front h3 { margin: 22px 0 0; font-size: 22px; font-weight: 600; }
.team-card__back { transform: rotateY(180deg); color: #fff; }
.team-card__back strong { display: block; margin-bottom: .3em; font-size: 22px; font-weight: 400; }
.team-card__back p { font-size: 14px; font-weight: 400; }
.team-card--blue .team-card__front h3 { color: var(--blue); }
.team-card--blue .team-card__back { background: var(--blue); }
.team-card--mint .team-card__front h3 { color: var(--mint); }
.team-card--mint .team-card__back { background: var(--mint); }

/* CTA final « Travaillons ensemble ». */
.agence-cta-final { padding-block: 80px; text-align: center; }

@media (max-width: 767px) {
    .agence-intro.grid-2 { grid-template-columns: 1fr; }
    .pillars { grid-template-columns: 1fr; }
    .pillar__num { font-size: 90px; }
    .team-grid { grid-template-columns: 1fr; }
    .team-card { margin-inline: auto; }
}

/* ============================================================
   Page Expertise (/expertise/)
   ============================================================ */

/* 1. Hero degrade (bleu a droite -> menthe a gauche), texte blanc a gauche. */
.exp-hero {
    padding: 40px 0;
    background: linear-gradient(270deg, #074187 0%, #1de1a4 100%);
    color: #fff;
}
.exp-hero h1 { margin: 0; font-size: 50px; font-weight: 600; line-height: 65px; color: #fff; }
.exp-hero h2 { margin: 0; font-size: 31px; font-weight: 600; line-height: 40.3px; color: #fff; }

/* 2. Intro centree : titre 50/800 bleu #032386 (em menthe 1.2em) ; paragraphes
   18/300 bleu #093ea2. Les <b> rendent 400 comme l'original (base 300). */
.exp-intro { padding: 40px 0; text-align: center; }
.exp-intro h2 { font-size: 50px; font-weight: 800; line-height: 70px; color: #032386; }
.exp-intro p { font-size: 18px; font-weight: 300; line-height: 1.6; color: #093ea2; }
.exp-intro p b { font-weight: 400; }

/* 3-5. Bandes ancres (#f1f1f1) : visuel + texte + liste, 25px 0. Colonnes
   asymetriques : image auto (~231px) + texte qui remplit. Ancres sur la section. */
.exp-band { background: var(--gray-bg); padding: 25px 0; }
.exp-row { display: flex; align-items: center; gap: 24px; }
.exp-row--reverse { flex-direction: row-reverse; }
.exp-row__img { flex: 0 0 auto; position: relative; }
.exp-row__img img { display: block; width: 231px; height: auto; }
.exp-row__body { flex: 1 1 auto; }
.exp-row h3 { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.2; color: var(--blue); }
.exp-row p, .exp-row li { font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--blue); }
.exp-row p { margin-top: .6em; }
.exp-row ul { margin: 1rem 0 0; padding-left: 40px; }
.exp-row li { margin-bottom: .35rem; }
/* Gras 700 dans les intros #infrastructure / #expertise (#approche n'en a pas). */
.exp-row__body b { font-weight: 700; }

/* Visuels : zoomIn a l'apparition (progressive enhancement, sans JS = visible). */
.js .exp-row__img[data-reveal] { opacity: 0; transform: scale(.6); transition: opacity .6s ease, transform .6s ease; }
.js .exp-row__img[data-reveal].is-visible { opacity: 1; transform: none; }

/* Decor « bandes » : ligne verte en boucle sous/pres des visuels des 3 ancres
   (releves live 2026-07-23 : widget icon Elementor, 2 variantes miroir, stroke
   #1de1a4 8px round, boites CSS carrees 119/113/119, rotations -40/+28/-28deg,
   offsets mesures par rapport au visuel). Masque <768px comme le live
   (elementor-hidden-mobile). Rotations en CSS statique (opt-out pa 2607-11). */
.exp-decor { position: absolute; pointer-events: none; }
.exp-decor svg { display: block; width: 100%; height: 100%; }
.exp-decor--1 { left: 97px;  top: 186px; width: 119px; height: 119px; transform: rotate(-40deg); }
.exp-decor--2 { left: 0;     top: 189px; width: 113px; height: 113px; transform: rotate(28deg); }
.exp-decor--3 { left: 104px; top: 205px; width: 119px; height: 119px; transform: rotate(-28deg); }
@media (max-width: 767px) {
    .exp-decor { display: none; }
}

/* 6 + 11. CTA (« Travaillons ensemble » alt ; « Pour un devis sur mesure » bleu). */
.exp-cta { padding: 40px 0; text-align: center; }
.exp-cta h2 { margin-bottom: 1.5rem; font-size: 32px; font-weight: 600; line-height: 1; color: var(--blue); }
.exp-cta--alt { background: var(--gray-bg); }
.exp-cta--final { background: var(--blue); color: #fff; padding: 50px 40px; }
.exp-cta--final h2 { color: #fff; }

/* 7. « Nos domaines d'expertise » : transparent, titre 35/800, paragraphe centre. */
.exp-domaines { padding: 0; margin: 80px 0 15px; text-align: center; }
.exp-domaines h2 { font-size: 35px; font-weight: 800; color: var(--blue); }
.exp-domaines p { font-size: 16px; font-weight: 400; color: var(--blue); }

/* 8-10. Accordeons (bandes colorees, texte blanc). <details> natif : pas de JS,
   accessible clavier, contenu lisible sans JS. 2 toggles par bande (50/50). */
/* Bande = 25px + barre 64px + 25px = 114px (aeration d'origine). */
.exp-accordion { padding: 25px 0; color: #fff; }
/* Damier d'origine : la moitie gauche = couleur de bande, la moitie droite =
   couleur opposee (split a 50% du viewport = pile entre les 2 toggles centres). */
.exp-accordion--blue { background: linear-gradient(90deg, #074187 50%, #1de1a4 50%); }
.exp-accordion--mint { background: linear-gradient(90deg, #1de1a4 50%, #074187 50%); }
.exp-accordion__grid { display: grid; grid-template-columns: 1fr 1fr; }
.exp-toggle { padding: 0; }
.exp-toggle summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 15px;
    list-style: none;
    cursor: pointer;
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
}
.exp-toggle summary::-webkit-details-marker { display: none; }
/* Chevron (caret) a gauche : pointe a droite ferme, vers le haut ouvert. */
.exp-toggle summary::before {
    content: "";
    flex-shrink: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 14px;
    border-color: transparent transparent transparent #fff;
    transition: transform .2s ease;
}
.exp-toggle[open] summary::before { transform: rotate(-90deg); }
.exp-toggle__body { padding: 15px; font-size: 16px; font-weight: 400; line-height: 24px; }
.exp-toggle__body p { margin: 0 0 1rem; }
.exp-toggle__body ul { margin: 0 0 1rem; padding-left: 1.2em; }
.exp-toggle__body li { margin-bottom: .35rem; }

/* Ecrans intermediaires : gros titres reduits (comme les @media d'origine). */
@media (max-width: 1366px) {
    .exp-intro h2, .exp-domaines h2 { font-size: 40px; }
}

/* Mobile Expertise */
@media (max-width: 767px) {
    .exp-hero { padding: 40px 15px; }
    .exp-hero h1 { font-size: 40px; line-height: 1.2; }
    .exp-hero h2 { font-size: 40px; line-height: 1.2; }
    .exp-intro h2 { font-size: 36px; line-height: 1.2; }
    .exp-intro h2 em { font-size: 1.1em; }
    .exp-domaines h2 { font-size: 36px; }
    .exp-row, .exp-row--reverse { flex-direction: column; }
    .exp-row__img img { width: 60%; max-width: 231px; }
    /* Mobile : bandes empilees 1 colonne -> fond uni (pas de damier). */
    .exp-accordion--blue { background: #074187; }
    .exp-accordion--mint { background: #1de1a4; }
    .exp-accordion__grid { grid-template-columns: 1fr; }
    .exp-cta--final { padding: 40px 20px; }
}

/* ============================================================
   Reveal au scroll (progressive enhancement)
   Sans JS : contenu visible. Avec JS : anime a l'apparition.
   ============================================================ */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Bande equipe : animations d'origine (bounceInUp / tada), plus marquees. */
.js .team__photo[data-reveal] { transition: none; }
.js .team__photo[data-reveal].is-visible { animation: bounce-in-up .9s ease both; }
@keyframes bounce-in-up {
    0%   { opacity: 0; transform: translateY(300px); }
    60%  { opacity: 1; transform: translateY(-25px); }
    80%  { transform: translateY(10px); }
    100% { opacity: 1; transform: none; }
}
.js .team__illustration[data-reveal] { transform: none; transition: opacity .3s ease; }
.js .team__illustration[data-reveal].is-visible { animation: tada 1s ease both; }
@keyframes tada {
    0%        { opacity: 1; transform: scale(1); }
    10%, 20%  { transform: scale(.92) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale(1.08) rotate(3deg); }
    40%, 60%, 80%      { transform: scale(1.08) rotate(-3deg); }
    100%      { opacity: 1; transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* ============================================================
   Page Notre Histoire (Elementor id 1417)
   ============================================================ */

/* 1. Bandeau titre : degrade 226deg bleu->menthe, H1 blanc 40/600 a gauche. */
.nh-hero { background: linear-gradient(226deg, var(--blue) 0%, var(--mint) 100%); padding: 30px 0; }
.nh-hero h1 { margin: 0; font-size: 40px; font-weight: 600; line-height: 40px; color: #fff; text-align: left; }

/* 2. Le mot de Raphael : 2 colonnes pleine largeur.
   Gauche = image de fond + overlay noir .5, titre menthe 50/900 par-dessus.
   Droite = citation grise italique (16/500) + narration bleue (16/400, strong -> 700). */
.nh-founder { display: flex; align-items: stretch; flex-wrap: wrap; padding: 70px 0 80px; }
.nh-founder__media {
    position: relative;
    flex: 0 0 45%;
    display: flex;
    align-items: center;
    padding: 150px 55px;
    background: url("../img/histoire-fondateur.jpg") center center / cover no-repeat;
}
.nh-founder__media::before { content: ""; position: absolute; inset: 0; background: #000; opacity: .5; }
.nh-founder__media h2 { position: relative; margin: 0; font-size: 50px; font-weight: 900; line-height: 50px; color: var(--mint); }
.nh-founder__body { flex: 1 1 0; min-width: 0; padding: 0 15% 0 5%; }
.nh-founder__body p { margin: 0 0 14.4px; font-size: 16px; font-weight: 400; line-height: 32px; color: var(--blue); }
.nh-founder__body p:last-child { margin-bottom: 0; }
.nh-founder__body p strong { font-weight: 700; }
/* Citation Aime Jacquet : gris 500 italique (plus specifique que .nh-founder__body p). */
.nh-founder__body p.nh-founder__quote { font-weight: 500; font-style: italic; color: #c3c3c3; }

/* 3-8. Six bandes image + texte (#f1f1f1), colonnes 50/50 (extension .exp-row--half).
   Corps uniformement 15/300 (mesure live) ; les <b>/<strong> rendent 400. */
.nh-band { background: var(--gray-bg); padding: 70px 0; }
.nh-band .exp-row__body h2 { margin: 0 0 8px; font-size: 48px; font-weight: 800; line-height: 48px; color: var(--mint); }
.nh-band .exp-row__body h3 { margin: 8px 0 16px; font-size: 28px; font-weight: 500; line-height: 33.6px; color: var(--blue); }
.nh-band .exp-row__body .nh-band__subtitle { font-size: 32px; line-height: 38.4px; }
.nh-band .exp-row__body p,
.nh-band .exp-row__body li { font-size: 15px; font-weight: 300; line-height: 30px; color: var(--blue); }
.nh-band .exp-row__body p { margin: 0 0 1rem; }
.nh-band .exp-row__body p:last-child { margin-bottom: 0; }
.nh-band .exp-row__body ul { margin: 0 0 1rem; padding-left: 40px; }
.nh-band .exp-row__body li { margin-bottom: .35rem; }
/* Reproduction de la double logique d'origine (mesure live) :
   - <strong> -> toujours 700 (gras franc, absolu) ;
   - <b>      -> bolder du poids de base : 400 sur base 300, 700 sur base 400. */
.nh-band .exp-row__body strong { font-weight: 700; }
.nh-band .exp-row__body b { font-weight: bolder; }
/* Bandes dont le corps est en base 400 chez l'original (Croissance, Revenir,
   Relations) : le texte y est 400 et les <b> y rendent donc 700 (bolder de 400). */
.nh-band--base400 .exp-row__body p,
.nh-band--base400 .exp-row__body li { font-weight: 400; }

/* Extension de .exp-row : variante 50/50 (image pleine largeur de colonne).
   Selecteurs explicites : battre .exp-row__img{flex:0 0 auto} de la base Expertise. */
.exp-row--half { gap: 48px; }
.exp-row--half .exp-row__img,
.exp-row--half .exp-row__body { flex: 1 1 0; min-width: 0; }
.exp-row--half .exp-row__img img { width: 100%; height: auto; border-radius: 0; }

/* 9. CTA final (#f1f1f1) : titre 24/600/24 bleu centre + bouton menthe 15px
   (variante .btn--sm posee dans la vue). */
.nh-cta { background: var(--gray-bg); padding: 30px 0; text-align: center; }
.nh-cta h2 { margin: 0 0 1.5rem; font-size: 24px; font-weight: 600; line-height: 1; color: var(--blue); }

/* Mobile : colonnes empilees, titres aux tailles DESKTOP du live (garde-fou
   DNH2 leve au releve navigateur du 2026-07-23 : le live garde H1 40 et H2 48
   a 390px SANS debordement — scrollWidth mesure = 390). Le lh 55px du « mot de
   Raphael » est le residu desktop du live, copie (opt-out pa 2607-11). */
@media (max-width: 767px) {
    .nh-founder { flex-direction: column; padding: 0; }
    .nh-founder__media { flex-basis: auto; min-height: 220px; padding: 40px; }
    .nh-founder__media h2 { font-size: 34px; line-height: 55px; }
    .nh-founder__body { padding: 40px 20px; }
    .nh-band { padding: 50px 0; }
    .exp-row--half { flex-direction: column; gap: 24px; }
    /* Images du recit pleine largeur (live : 350px empiles a 390). Le wrapper
       doit porter le 100% (align-items:center du .exp-row le retrecit sinon en
       fit-content) et l'image doit lever le plafond max-width:231px du bloc
       mobile Expertise (constats staging v34/v35). */
    .exp-row--half .exp-row__img { width: 100%; }
    .exp-row--half .exp-row__img img { max-width: none; }
}

/* ============================================================
   Pages legales (Mentions legales, Politique de confidentialite)
   Bandeau titre bleu + corps de texte. Classes generiques
   reutilisables par les deux pages textuelles.
   ============================================================ */
.legal-hero { background: var(--blue); padding: 40px 0; }
.legal-hero h1 {
    margin: 0;
    color: var(--white);
    font-size: 53px;
    font-weight: 600;
    line-height: 1.3;
}

.legal-content { padding: 40px 0; }
/* Corps de texte : line-height 1.5 du kit d'origine (vs 1.7 global). */
.legal-content p { line-height: 1.5; }
.legal-content strong { font-weight: 700; }
/* Liens de contenu : bleu de marque + soulignement (affordance lien, a11y) —
   corps et liens partagent --blue, le soulignement distingue le lien. RC 2026-07-19. */
.legal-content a { color: var(--blue); text-decoration: underline; }
.legal-content a:hover { color: var(--mint); }

@media (max-width: 1366px) {
    .legal-hero h1 { font-size: 40px; }
}
@media (max-width: 767px) {
    .legal-hero h1 { font-size: 40px; }
}

/* ============================================================
   Landing DBM Digital Day (page canvas — plan 2607-08)
   Rendu scopé sous .page-dbmdigitalday : aucune fuite sur les autres pages.
   Valeurs issues de post-1452.css + kit (couleurs) confirmées à l'audit navigateur.
   ============================================================ */
.page-dbmdigitalday { --dbm-yellow: #f9e110; }

/* Conteneur boxed commun aux sections (25/50/25 du bandeau = 320/640/320 sur 1280). */
.page-dbmdigitalday .dbm-wrap {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

/* 1. Bandeau logos + shape divider "mountains" (fill jaune #F9E110).
   Section 300px de haut, fond transparent (blanc du body) ; la vague (152px)
   remplit la moitié basse, les logos (280px, centrés dans leur zone 25/50/25)
   passent au-dessus. Cf. audit géométrie 2607-08. */
.dbm-bar {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
}
.dbm-bar__inner {
    position: relative;
    z-index: 1; /* logos au-dessus de la vague */
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 1.25rem;
    display: flex;
    align-items: center;
}
.dbm-bar__logo--coora { flex: 0 0 25%; }
.dbm-bar__spacer     { flex: 0 0 50%; }
.dbm-bar__logo--dbm  { flex: 0 0 25%; }
.dbm-bar__logo { display: flex; justify-content: center; }
.dbm-bar__logo img { width: 280px; max-width: 100%; height: auto; }
.dbm-bar__shape {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    line-height: 0;
    overflow: hidden;
}
/* rotate(180deg) : convention Elementor "shape divider bottom". Sans elle, le
   remplissage se retrouve en HAUT de la vague (bug v28/v29) ; ici il remplit le bas. */
.dbm-bar__shape svg { display: block; width: 100%; height: 152px; transform: rotate(180deg); }
.dbm-bar__shape .dbm-shape-fill { fill: var(--dbm-yellow); }

/* 2. Titre principal (Poppins 40px / 600 / bleu, aligné à gauche). */
.dbm-title { padding-block: 30px; }
.dbm-title h1 {
    margin: 0;
    font-size: 40px;
    line-height: 40px;
    font-weight: 600;
    color: var(--blue);
    text-align: left;
}

/* 3. Accroche (Poppins 22px / 400, centrée -> gauche <=1366px).
   Section 75px comme le LIVE : 14 + 33 (ligne) + 14 (margin p) + 14. Le padding
   bas empêche le margin du <p> de fuir de la section (collapse). */
.dbm-intro { padding-block: 14px; }
.dbm-intro p {
    margin: 0 0 14px;
    font-size: 22px;
    line-height: 33px;
    font-weight: 400;
    color: var(--blue);
    text-align: center;
}

/* 4. Avatars ronds (image 204px, animation grow, titres 28px bleu). Section ~300px. */
.dbm-team { padding-block: 20px; }
.dbm-team__grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
}
.dbm-team__card {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}
.dbm-team__img {
    display: inline-block;
    width: 204px;       /* largeur rendue LIVE (68% de la colonne 320 d'origine) */
    max-width: 68%;
    margin-bottom: 15px; /* espace image -> nom du LIVE (15px, harmonisé sur les 4) */
    line-height: 0;
}
.dbm-team__img img {
    width: 100%;
    border-radius: 100px;
    transition: transform .3s ease;
}
.dbm-team__card:hover .dbm-team__img img,
.dbm-team__img:focus-visible img { transform: scale(1.1); }
/* Nom : stylé sur le <h3> lui-même (sinon le global h3 38px/700 l'emporte). */
.dbm-team__name {
    margin: 8px 0 0;
    font-size: 28px;
    font-weight: 600;
    color: var(--blue);
}
.dbm-team__name a { color: var(--blue); text-decoration: none; }

/* 5. Titre section formulaire (jaune sur fond gris clair). Section ~92px. */
.dbm-cta { background: #f1f1f1; }
.dbm-cta .dbm-wrap { padding-block: 0; }
.dbm-cta h2 {
    margin: 0;
    padding: 30px 20px;
    font-size: 32px;
    line-height: 32px;
    font-weight: 600;
    color: var(--dbm-yellow);
    text-align: left;
}

/* 6. Formulaire (fond dégradé 180deg ; thème gform natif, 1 colonne pleine largeur).
   Valeurs alignées sur le kit d'origine (audit comparatif 2607-08). Bouton = .btn. */
.dbm-form-section {
    background: linear-gradient(180deg, #f1f1f1 0%, #f8f7f7 100%);
    padding-block: 0; /* le rythme vertical est porté par .dbm-form (comme le LIVE) */
}
/* Gouttières 10px (vs 20px ailleurs) : formulaire rendu 1260px comme le LIVE. */
.dbm-form-section .dbm-wrap { padding-inline: 10px; }
.dbm-form { max-width: 100%; padding-block: 20px; }
.dbm-form__legend { margin: 0 0 1rem; font-size: 16px; color: var(--blue); text-align: left; }
.dbm-form .req { color: #c02b0a; }
.dbm-form__field { margin-bottom: 16px; }
.dbm-form__field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: #0e0e0e;
}
.dbm-form__field input {
    width: 100%;
    padding: 8px;
    font: inherit;
    font-size: 15px;
    line-height: 1.5; /* input rendu 41px comme le LIVE (vs 44px sur le 1.7 global) */
    color: var(--dark);
    background: #fff;
    border: 1px solid #666;
    border-radius: 3px;
}
.dbm-form__field input:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 1px;
}
.ginput_counter { margin-top: .35rem; font-size: 15px; color: var(--dark); }
.dbm-form__footer { margin-top: 1.25rem; }
/* Bouton : surcharge scopée du .btn partagé (LIVE : 180x49, 18px/600, pad 8/20).
   Le .btn global reste inchangé (résidu 18/15px systémique en roadmap). */
.dbm-form__footer .btn {
    width: 180px;
    padding: 8px 20px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
}

/* 7. Spacer de clôture (quasi nul sur le LIVE). */
.dbm-spacer { padding-block: 0; }

/* Paliers responsive repris du miroir (post-1452.css). */
@media (max-width: 1366px) {
    .dbm-intro p { text-align: left; }
}
@media (max-width: 1024px) {
    .dbm-intro p { padding: 10px; text-align: left; }
    .dbm-cta h2 { text-align: center; }
}
@media (max-width: 767px) {
    /* Bandeau : les colonnes s'empilent comme les colonnes Elementor d'origine
       (logo Coora puis logo DBM, centrés, conteneur 500px). Cible LIVE mesurée
       à 375px : section ~430px, logos 300px, vague réduite à une bande de 38px
       collée en bas (vs 152px desktop). */
    .dbm-bar { min-height: 0; padding-block: 30px; }
    .dbm-bar__inner { max-width: 500px; flex-direction: column; gap: 20px; }
    .dbm-bar__spacer { display: none; }
    .dbm-bar__logo--coora, .dbm-bar__logo--dbm { flex: 0 0 auto; width: 100%; }
    .dbm-bar__logo img { width: 300px; }
    .dbm-bar__shape svg { height: 38px; }
    .dbm-title { padding-block: 15px; }
    .dbm-title h1 { font-size: 32px; }
    .dbm-intro { padding-block: 15px; }
    .dbm-intro p { font-size: 23px; }
    /* Avatars : le wrap réactive l'empilement (le nowrap desktop le tuait — bug v29).
       Image 178px = le 50% de colonne 355px du LIVE (notre carte fait 335px). */
    .dbm-team__grid { flex-wrap: wrap; }
    .dbm-team__card { flex: 1 1 100%; }
    .dbm-team__img { width: 178px; }
    .dbm-team__img img { border-radius: 200px; }
    .dbm-cta .dbm-wrap { padding: 24px; }
    .dbm-cta h2 { font-size: 30px; padding: 20px; text-align: center; }
    .dbm-form-section { padding-block: 10px; }
    /* Gouttières 20px en mobile (les 10px ne servent qu'au 1260px desktop) : form 335px. */
    .dbm-form-section .dbm-wrap { padding-inline: 20px; }
}

/* ============================================================
   Formulaires — états serveur : garde, erreurs, confirmation (2607-09)
   ============================================================ */

/* Honeypot : hors écran (pas de display:none, trop repéré par les bots) */
.fg-extra {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Message global au-dessus du formulaire (garde, échec d'envoi, résumé d'erreurs) */
.form-notice {
    margin: 0 0 1.5rem;
    padding: .75rem 1rem;
    border: 1px solid #c02b0a;
    background: #fdf3f2;
    color: #c02b0a;
    font-size: .9375rem;
    text-align: left;
}

/* Champ en erreur + message associé */
.field--error input,
.field--error textarea,
.dbm-form__field--error input { border-color: #c02b0a; }
.field__error {
    margin: .35rem 0 0;
    font-size: .8125rem;
    color: #c02b0a;
    text-align: left;
}
/* Fond bleu de l'accueil : messages éclaircis pour rester lisibles */
.section--blue .field__error { color: #ffd6cc; }

/* Confirmation post-envoi (remplace le formulaire, pattern PRG) */
.form-confirmation {
    margin: 2rem auto 0;
    padding: 1.25rem 1.5rem;
    border: 1px solid currentColor;
    font-size: 1.0625rem;
}
.contact .form-confirmation { max-width: 640px; }
.dbm-form .form-confirmation { margin: 0; color: var(--blue); text-align: left; }

/* ============================================================
   Module outils prod (/outils/ — layout canvas, jamais indexé) (2607-09)
   ============================================================ */
.tool {
    max-width: 640px;
    margin: 3rem auto;
    padding: 0 20px;
}
.tool h1 { font-size: 1.75rem; margin-bottom: 1rem; }
.tool p,
.tool li { font-size: .9375rem; }
.tool__errors { color: #c02b0a; }
.tool__ok { border: 1px solid var(--blue); padding: 1rem; }
.tool__field { margin: 1rem 0; }
.tool__field label { display: block; font-weight: 600; margin-bottom: .3rem; }
.tool__field input {
    width: 100%;
    padding: .5rem .6rem;
    border: 1px solid #b9c2cf;
    font: inherit;
}