/*
 Theme Name:   Divi Child - Groupe du Mail
 Theme URI:    https://groupedumail.fr
 Description:  Child theme for Divi - Groupe du Mail, Clinique d'Imagerie Médicale
 Author:       Aestivo
 Author URI:   https://aestivo.com
 Template:     Divi
 Version:      1.2.2
 Text Domain:  divi-child-gdm
*/

/* ==========================================================================
   VARIABLES
   ========================================================================== */

:root {
    --gdm-teal: #1a9e9e;
    --gdm-teal-dark: #158585;
    --gdm-teal-light: #5fbfbf;
    --gdm-gold: #c8a84e;
    --gdm-yellow: #f5c518;
    --gdm-red: #cf3f38;
    --gdm-white: #ffffff;
    --gdm-dark: #333333;
    --gdm-gray: #666666;
    --gdm-light-gray: #f5f5f5;
    --gdm-header-height: 90px;
    --gdm-social-width: 44px;
    --gdm-page-gutter: 30px;
    --gdm-page-bg: #eef3f3;
}

/* ==========================================================================
   HIDE DEFAULT DIVI HEADER
   ========================================================================== */

#main-header,
#top-header {
    display: none !important;
}

/* ==========================================================================
   CUSTOM HEADER - SINGLE BAR (logo | nav | phone + search)
   ========================================================================== */

.gdm-header {
    background-color: var(--gdm-white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 9999;
}

.gdm-header__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 0 30px;
    height: var(--gdm-header-height);
    gap: 15px;
}

/* Logo */
.gdm-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.gdm-header__logo img {
    width: auto;
}

.gdm-header__logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* Navigation (centre) */
.gdm-nav {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
}

.gdm-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
}

.gdm-nav > ul > li {
    position: relative;
}

.gdm-nav > ul > li > a {
    display: block;
    padding: 10px 14px;
    color: var(--gdm-dark);
    text-decoration: none;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.gdm-nav > ul > li > a:hover,
.gdm-nav > ul > li.current-menu-item > a,
.gdm-nav > ul > li.current-menu-ancestor > a {
    color: var(--gdm-teal);
}

/* Dropdown indicator (niveau 1) */
.gdm-nav > ul > li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    margin-left: 6px;
    vertical-align: middle;
}

/* Dropdown menu (niveau 2) — aligné à gauche */
.gdm-nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--gdm-teal-light);
    min-width: 260px;
    padding: 5px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 10000;
    list-style: none;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
}

.gdm-nav > ul > li:hover > ul {
    display: flex;
}

.gdm-nav ul ul li {
    position: relative;
}

.gdm-nav ul ul li a {
    display: block;
    padding: 6px 15px;
    color: var(--gdm-white);
    text-decoration: none;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: background-color 0.2s ease;
}

.gdm-nav ul ul li a:hover {
    background-color: var(--gdm-teal);
}

/* Indicateur sous-sous-menu (niveau 2 → 3) */
.gdm-nav ul ul li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid currentColor;
    margin-left: 8px;
    vertical-align: middle;
}

/* Sous-sous-menu (niveau 3) */
.gdm-nav ul ul ul {
    top: 0;
    left: 100%;
    background-color: var(--gdm-teal);
    min-width: 260px;
}

.gdm-nav ul ul li:hover > ul {
    display: flex;
}

.gdm-nav ul ul ul li a:hover {
    background-color: var(--gdm-teal-dark);
}

/* ==========================================================================
   HEADER RIGHT (phone + search) - à droite du menu
   ========================================================================== */

.gdm-header__right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.gdm-header__phone {
    color: var(--gdm-teal);
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    text-align: right;
    white-space: nowrap;
}

.gdm-header__phone strong {
    font-weight: 700;
    font-size: 14px;
}

.gdm-header__search {
    background: none;
    border: none;
    color: var(--gdm-teal);
    cursor: pointer;
    font-size: 16px;
    padding: 5px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.gdm-header__search:hover {
    color: var(--gdm-teal-dark);
}

/* ==========================================================================
   MOBILE MENU
   ========================================================================== */

.gdm-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    flex-direction: column;
    gap: 5px;
}

.gdm-hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--gdm-teal);
    transition: all 0.3s ease;
    border-radius: 2px;
}

.gdm-hamburger.is-active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}

.gdm-hamburger.is-active span:nth-child(2) {
    opacity: 0;
}

.gdm-hamburger.is-active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
}

/* ==========================================================================
   SEARCH OVERLAY
   ========================================================================== */

.gdm-search-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

.gdm-search-overlay.is-active {
    display: flex;
}

.gdm-search-overlay__form {
    width: 90%;
    max-width: 600px;
    position: relative;
}

.gdm-search-overlay__input {
    width: 100%;
    padding: 20px 60px 20px 25px;
    font-size: 18px;
    border: none;
    border-bottom: 3px solid var(--gdm-teal);
    background: transparent;
    color: var(--gdm-white);
    font-family: 'Open Sans', Arial, sans-serif;
    outline: none;
}

.gdm-search-overlay__input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.gdm-search-overlay__close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--gdm-white);
    font-size: 30px;
    cursor: pointer;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.gdm-footer {
    font-family: 'Open Sans', Arial, sans-serif;
}

/* Sur les pages de contenu, le fond teinté de .gdm-page va jusqu'au footer :
   pas de marge, sinon on rouvre une bande blanche. L'accueil n'a pas ce fond,
   on y garde une respiration avant le footer. */
body.home .gdm-footer {
    margin-top: 60px;
}

.gdm-footer__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
}

/* Barre de liens */
.gdm-footer__bar {
    background-color: #4a4a4a;
    padding: 18px 0;
    border-bottom: 1px solid #3a3a3a;
}

.gdm-footer__bar .gdm-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

.gdm-footer__left {
    display: flex;
    align-items: center;
    gap: 25px;
}

.gdm-footer__link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #b0b0b0;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s ease;
}

.gdm-footer__link:hover {
    color: var(--gdm-white);
}

.gdm-footer__link svg {
    flex-shrink: 0;
}

.gdm-footer__right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gdm-footer__right a {
    color: #b0b0b0;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s ease;
}

.gdm-footer__right a:hover {
    color: var(--gdm-white);
}

.gdm-footer__sep {
    color: #666;
    font-size: 13px;
}

/* Copyright */
.gdm-footer__copyright {
    background-color: #333333;
    padding: 15px 0;
    color: #888;
    font-size: 12px;
}

/* ==========================================================================
   SOCIAL - BARRE FIXE DROITE
   ========================================================================== */

.gdm-social-fixed {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    z-index: 9998;
    border-radius: 8px 0 0 8px;
    overflow: hidden;
}

.gdm-social-fixed a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--gdm-social-width);
    height: var(--gdm-social-width);
    color: var(--gdm-white);
    background-color: var(--gdm-teal);
    transition: background-color 0.2s ease;
}

.gdm-social-fixed a + a {
    border-top: 1px solid rgba(255,255,255,0.2);
}

.gdm-social-fixed a:hover {
    background-color: var(--gdm-teal-dark);
}

/* Masquer le footer Divi par défaut */
#main-footer {
    display: none !important;
}

/* ==========================================================================
   HOMEPAGE - HERO (slider + 4 CTA)
   ========================================================================== */

.gdm-hero {
    display: flex;
    height: 600px;
}

.gdm-hero__slider {
    flex: 2;
    height: 600px;
    overflow: hidden;
    background-color: #f0f0f0;
}

.gdm-hero__slider .n2-section-smartslider {
    margin: 0 !important;
    padding: 0 !important;
}

.gdm-hero__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 600px;
    background: var(--gdm-light-gray);
    color: var(--gdm-gray);
    text-align: center;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
}

.gdm-hero__buttons {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 600px;
}

.gdm-hero__cta {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 20px 25px;
    color: var(--gdm-white);
    text-decoration: none;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.3;
    position: relative;
    overflow: hidden;
}

.gdm-hero__cta::before {
    content: '';
    position: absolute;
    inset: -5px;
    background-size: cover;
    background-position: center;
    transition: filter 0.3s ease;
    z-index: 0;
}

.gdm-hero__cta:hover::before {
    filter: blur(4px);
}

.gdm-hero__cta span {
    position: relative;
    z-index: 1;
}

.gdm-hero__cta strong {
    font-weight: 800;
}

.gdm-hero__cta--rdv::before {
    background-image: url('images/hero-rdv.jpg');
}

.gdm-hero__cta--resultats::before {
    background-image: url('images/hero-resultats.jpg');
}

.gdm-hero__cta--pro::before {
    background-image: url('images/hero-pro.jpg');
}

.gdm-hero__cta--recrute::before {
    background-image: url('images/hero-recrute.png');
}

/* ==========================================================================
   HOMEPAGE - INFO BANNER
   ========================================================================== */

/* ==========================================================================
   HOMEPAGE - NOS SITES TEXTE
   ========================================================================== */

.gdm-sites-text {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 30px 40px;
    text-align: center;
    font-family: 'Open Sans', Arial, sans-serif;
}

.gdm-sites-text h2 {
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: var(--gdm-dark);
    margin-bottom: 20px;
}

.gdm-sites-text p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--gdm-gray);
}

/* ==========================================================================
   HOMEPAGE - MAP SECTION
   ========================================================================== */

.gdm-map-section {
    display: flex;
    min-height: 400px;
}

.gdm-map-section__left {
    flex: 1;
    background-color: var(--gdm-teal);
    background-image: url('images/sites-gdm.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px 40px;
    text-align: center;
}

.gdm-map-section__left h2 {
    color: var(--gdm-white);
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 32px;
    font-weight: 300;
    line-height: 1.4;
    margin-bottom: 30px;
}

.gdm-map-section__left h2 strong {
    font-weight: 800;
}

.gdm-map-section__icon {
    margin-top: 10px;
}

.gdm-map-section__right {
    flex: 1;
}

.gdm-map-section__right iframe {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border: 0;
    display: block;
}

.gdm-map-section__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    background: var(--gdm-light-gray);
    color: var(--gdm-gray);
    text-align: center;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
}

/* ==========================================================================
   HOMEPAGE - CARDS 3 + 2
   ========================================================================== */

.gdm-cards {
    font-family: 'Open Sans', Arial, sans-serif;
}

.gdm-cards__row {
    display: flex;
}

.gdm-card--half {
    flex: 2;
}

.gdm-card--quarter {
    flex: 1;
}

.gdm-card--sites {
    background-image: url('images/card-sites.jpg');
}

.gdm-card--infos {
    background-image: url('images/card-infos.jpg');
}

.gdm-card--contact {
    background-image: url('images/card-contact.jpg');
}

.gdm-card--examens {
    background-image: url('images/card-examens.jpg');
}

.gdm-card--spe {
    background-image: url('images/card-spe.jpg');
}

.gdm-card {
    flex: 1;
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    color: var(--gdm-white);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: #555;
}

.gdm-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,0.6) 100%);
    transition: background 0.3s ease;
    z-index: 1;
}

.gdm-card:hover::before {
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.7) 100%);
}

.gdm-card__content {
    position: relative;
    z-index: 2;
    padding: 30px;
}

.gdm-card__content h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--gdm-white);
}

.gdm-card__content p {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 15px;
    opacity: 0.9;
}

.gdm-card__btn {
    display: inline-block;
    padding: 8px 20px;
    border: 2px solid var(--gdm-white);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.gdm-card:hover .gdm-card__btn {
    background-color: var(--gdm-teal);
    border-color: var(--gdm-teal);
}

/* ==========================================================================
   SOUS-PAGES - GRILLE DE CARTES (ex. sous-menu Examens)
   ========================================================================== */

.gdm-subpages {
    display: grid;
    grid-template-columns: repeat(var(--gdm-subpages-cols, 2), 1fr);
    gap: 30px;
    font-family: 'Open Sans', Arial, sans-serif;
}

.gdm-subpages--cols-1 { --gdm-subpages-cols: 1; }
.gdm-subpages--cols-2 { --gdm-subpages-cols: 2; }
.gdm-subpages--cols-3 { --gdm-subpages-cols: 3; }
.gdm-subpages--cols-4 { --gdm-subpages-cols: 4; }

.gdm-subpage-card {
    display: flex;
    flex-direction: column;
    background-color: var(--gdm-white);
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.gdm-subpage-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
    transform: translateY(-2px);
}

.gdm-subpage-card__image {
    display: block;
    aspect-ratio: 16 / 9;
    background-color: var(--gdm-light-gray);
    overflow: hidden;
}

.gdm-subpage-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gdm-subpage-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px;
}

.gdm-subpage-card__title {
    font-size: 19px;
    font-weight: 700;
    color: var(--gdm-teal);
    margin-bottom: 10px;
}

.gdm-subpage-card__excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: var(--gdm-gray);
    margin-bottom: 16px;
    flex: 1;
}

.gdm-subpage-card__btn {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gdm-teal);
    border-bottom: 2px solid var(--gdm-teal);
    padding-bottom: 2px;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.gdm-subpage-card:hover .gdm-subpage-card__btn {
    color: var(--gdm-teal-dark);
    border-color: var(--gdm-teal-dark);
}

.gdm-subpages__empty {
    color: var(--gdm-gray);
    font-style: italic;
}

@media (max-width: 980px) {
    .gdm-subpages {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   ADJUST MAIN CONTENT
   ========================================================================== */

#page-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.admin-bar .gdm-header {
    top: 32px;
}

/* ==========================================================================
   PAGE TEMPLATE - HERO + CONTENU
   ========================================================================== */

.gdm-page__hero {
    position: relative;
    height: 350px;
    background-color: var(--gdm-teal);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gdm-page__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
}

.gdm-page__hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 30px;
}

.gdm-page__title {
    color: var(--gdm-white);
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 42px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Fond de page teinté : la zone de contenu s'en détache comme une carte.
   Le padding latéral réserve aussi la place de la barre sociale fixe, ce qui
   évite d'avoir à décaler le texte lui-même. */
.gdm-page {
    /* flow-root : sans ça, la margin-bottom de .gdm-page__content fusionne
       avec le parent et sort de la zone teintée — d'où une bande blanche
       entre le contenu et le footer. */
    display: flow-root;
    background-color: var(--gdm-page-bg);
    padding-left: var(--gdm-page-gutter);
    padding-right: calc(var(--gdm-page-gutter) + var(--gdm-social-width));
}

/* Le bandeau reste pleine largeur : on annule le padding du parent. */
.gdm-page__hero {
    margin-left: calc(-1 * var(--gdm-page-gutter));
    margin-right: calc(-1 * (var(--gdm-page-gutter) + var(--gdm-social-width)));
}

.gdm-page__content {
    max-width: 1200px;
    margin: 50px auto 60px;
    padding: 45px 50px 50px;
    background-color: var(--gdm-white);
    border-radius: 6px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: var(--gdm-dark);
}

.gdm-page__content h2,
.gdm-page__divi h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--gdm-teal);
    margin: 40px 0 15px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--gdm-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.gdm-page__content h3,
.gdm-page__divi h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--gdm-dark);
    margin: 30px 0 10px;
}

/* Divi ajoute « p { padding-bottom: 1em } » via une feuille inline, qui
   s'additionne à la marge : on neutralise le padding et on ne pilote
   l'espacement que par margin-bottom. */
.gdm-page__content p,
.gdm-page__divi p {
    margin-bottom: 18px;
    padding-bottom: 0;
    color: var(--gdm-gray);
}

.gdm-page__content img,
.gdm-page__divi img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Divi fait « ol, ul { list-style: none } » et ne restaure les puces que pour
   .et-l--body ul ; nos pages sont dans .et-l--post, donc on les remet ici. */
.gdm-page__content ul,
.gdm-page__content ol,
.gdm-page__divi ul,
.gdm-page__divi ol {
    margin-bottom: 20px;
    padding-left: 25px;
    color: var(--gdm-gray);
}

.gdm-page__content ul,
.gdm-page__divi ul {
    list-style: disc outside;
}

.gdm-page__content ol,
.gdm-page__divi ol {
    list-style: decimal outside;
}

.gdm-page__content ul ul,
.gdm-page__divi ul ul {
    list-style-type: circle;
}

.gdm-page__content li,
.gdm-page__divi li {
    margin-bottom: 8px;
}

.gdm-page__content li::marker,
.gdm-page__divi li::marker {
    color: var(--gdm-teal);
}

/* Listes imbriquées : pas de double marge basse */
.gdm-page__content li > ul,
.gdm-page__content li > ol,
.gdm-page__divi li > ul,
.gdm-page__divi li > ol {
    margin-top: 8px;
    margin-bottom: 0;
}

.gdm-page__content a,
.gdm-page__divi a {
    color: var(--gdm-teal);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.gdm-page__content a:hover,
.gdm-page__divi a:hover {
    border-bottom-color: var(--gdm-teal);
}

/* --------------------------------------------------------------------------
   Texte en gras
   Dans le contenu courant, <strong> sert de mise en avant (« Bus : »,
   « Arrêt : »…) : on lui donne la couleur de marque. Les intertitres de
   toggle gardent leur règle propre, plus spécifique (voir plus bas).
   -------------------------------------------------------------------------- */

.gdm-page__content p strong,
.gdm-page__content p b,
.gdm-page__content li strong,
.gdm-page__content li b,
.gdm-page__content td strong,
.gdm-page__content td b,
.gdm-page__divi p strong,
.gdm-page__divi p b,
.gdm-page__divi li strong,
.gdm-page__divi li b,
.gdm-page__divi td strong,
.gdm-page__divi td b {
    color: var(--gdm-teal);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   PICTOS (plan d'accès, transports…)
   Une ligne = un paragraphe portant deux classes, à saisir dans l'onglet
   « Texte » du module Divi :

       <p class="gdm-picto gdm-picto--voiture">En voiture, par A480…</p>

   Le carré et l'icône sont dessinés en CSS : aucune image à téléverser, et la
   couleur suit --gdm-teal. L'icône est un masque SVG (::after) posé sur un
   aplat de couleur ; le cadre est un élément distinct (::before) pour que la
   bordure ne soit pas rognée par le masque.
   -------------------------------------------------------------------------- */

.gdm-page__content .gdm-picto {
    --gdm-picto-couleur: var(--gdm-teal);
    position: relative;
    min-height: 62px;
    margin-bottom: 26px;
    padding: 8px 0 8px 92px;
    color: var(--gdm-gray);
}

.gdm-page__content .gdm-picto:last-child {
    margin-bottom: 0;
}

/* Le cadre */
.gdm-page__content .gdm-picto::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 62px;
    height: 62px;
    margin-top: -31px;
    border: 2px solid var(--gdm-picto-couleur);
    border-radius: 4px;
}

/* L'icône : masque SVG défini par la classe --xxx */
.gdm-page__content .gdm-picto::after {
    content: '';
    position: absolute;
    left: 15px;
    top: 50%;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    background-color: var(--gdm-picto-couleur);
    -webkit-mask: var(--gdm-picto-icon) center / contain no-repeat;
    mask: var(--gdm-picto-icon) center / contain no-repeat;
}

.gdm-page__content .gdm-picto--voiture {
    --gdm-picto-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M2.6 17.4v-3.8a2.6 2.6 0 0 1 1.4-2.3l2.2-1.1 1.6-3.9a2.4 2.4 0 0 1 2.2-1.5h4a2.4 2.4 0 0 1 2.2 1.5l1.6 3.9 2.2 1.1a2.6 2.6 0 0 1 1.4 2.3v3.8z'/><path d='M6.2 10.2h11.6M6 17.4v1.8M18 17.4v1.8M2.6 12.6H1.2M21.4 12.6h1.4'/><circle cx='5.9' cy='13.8' r='.9'/><circle cx='18.1' cy='13.8' r='.9'/></g></svg>");
}

.gdm-page__content .gdm-picto--bus {
    --gdm-picto-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='4.3' y='2.6' width='15.4' height='15.8' rx='2.6'/><rect x='6.9' y='5.2' width='10.2' height='5.2' rx='1'/><path d='M4.3 12.6h15.4M7.6 18.4v1.8M16.4 18.4v1.8'/><circle cx='7.6' cy='15.3' r='1'/><circle cx='16.4' cy='15.3' r='1'/></g></svg>");
}

.gdm-page__content .gdm-picto--handicap {
    --gdm-picto-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='8.8' cy='3.4' r='2.1'/><path d='M8.8 6.6v5.2h5.4M14.2 11.8l2 5h2.4'/><circle cx='10.8' cy='15.6' r='5.4'/></g></svg>");
}

.gdm-page__content .gdm-picto--tram {
    --gdm-picto-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M9.4 1.3L12 2.6l2.6-1.3'/><rect x='4.6' y='2.6' width='14.8' height='15.4' rx='3'/><rect x='6.9' y='5.2' width='10.2' height='5.2' rx='1'/><path d='M12 12.4v5.6M8 18v2.4M16 18v2.4M4 20.7h16'/><circle cx='8.6' cy='13.8' r='.9'/><circle cx='15.4' cy='13.8' r='.9'/></g></svg>");
}

.gdm-page__content .gdm-picto--train {
    --gdm-picto-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2.4c-4 0-6.6.7-6.6 3v8.4a2.6 2.6 0 0 0 2.6 2.6h8a2.6 2.6 0 0 0 2.6-2.6V5.4c0-2.3-2.6-3-6.6-3z'/><path d='M5.4 9.6h13.2M8.6 19.6l-2 2M15.4 19.6l2 2M9 16.4v3.2h6v-3.2'/><circle cx='8.6' cy='13' r='.9'/><circle cx='15.4' cy='13' r='.9'/></g></svg>");
}

.gdm-page__content .gdm-picto--parking {
    --gdm-picto-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='3'/><path d='M9.6 17.4V6.9h3.2a3 3 0 0 1 0 6H9.6'/></g></svg>");
}

.gdm-page__content .gdm-picto--telephone {
    --gdm-picto-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M8.1 3.2H5.9A2.7 2.7 0 0 0 3.2 6c.3 8.2 6.6 14.5 14.8 14.8a2.7 2.7 0 0 0 2.8-2.7v-2.2a1.4 1.4 0 0 0-1.1-1.4l-3.2-.6a1.4 1.4 0 0 0-1.4.6l-.9 1.3a12.6 12.6 0 0 1-5.5-5.5l1.3-.9a1.4 1.4 0 0 0 .6-1.4l-.6-3.2a1.4 1.4 0 0 0-1.4-1.1z'/></g></svg>");
}

.gdm-page__content .gdm-picto--horaires {
    --gdm-picto-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 6.6V12l3.6 2.4'/></g></svg>");
}

/* Couleur : --gdm-picto-couleur pilote le cadre ET l'icône. Deux préréglages,
   ou n'importe quelle valeur en ligne :

       <p class="gdm-picto gdm-picto--handicap gdm-picto--rouge">…</p>
       <p class="gdm-picto gdm-picto--bus" style="--gdm-picto-couleur:#7a5ea8">…</p> */
.gdm-page__content .gdm-picto--rouge {
    --gdm-picto-couleur: var(--gdm-red);
}

.gdm-page__content .gdm-picto--or {
    --gdm-picto-couleur: var(--gdm-gold);
}

/* Aplat : carré plein, icône en réserve blanche, texte assorti. Réservé aux
   lignes qui doivent alerter (« Accès difficile »), sinon le contour suffit. */
.gdm-page__content .gdm-picto--plein {
    color: var(--gdm-picto-couleur);
}

.gdm-page__content .gdm-picto--plein::before {
    background-color: var(--gdm-picto-couleur);
}

.gdm-page__content .gdm-picto--plein::after {
    background-color: var(--gdm-white);
}

/* Sur une ligne colorée, le <strong> suit le picto : sinon il resterait teal
   au milieu d'un cadre rouge ou or. */
.gdm-page__content .gdm-picto--rouge strong,
.gdm-page__content .gdm-picto--rouge b,
.gdm-page__content .gdm-picto--or strong,
.gdm-page__content .gdm-picto--or b,
.gdm-page__content .gdm-picto--plein strong,
.gdm-page__content .gdm-picto--plein b {
    color: var(--gdm-picto-couleur);
}

/* Variante « petite » : icône seule, sans cadre, calée sur la première ligne.
   Pour les listes serrées (téléphones, horaires…) :

       <p class="gdm-picto gdm-picto--petit gdm-picto--telephone">…</p>

   La taille se règle au cas par cas via --gdm-picto-taille. */
.gdm-page__content .gdm-picto--petit {
    --gdm-picto-taille: 17px;
    min-height: 0;
    margin-bottom: 10px;
    padding: 0 0 0 calc(var(--gdm-picto-taille) + 10px);
}

.gdm-page__content .gdm-picto--petit::before {
    display: none;
}

.gdm-page__content .gdm-picto--petit::after {
    left: 0;
    top: 0.3em;
    width: var(--gdm-picto-taille);
    height: var(--gdm-picto-taille);
    margin-top: 0;
    /* garde-fou : sans cadre, --plein rendrait l'icône blanche sur blanc */
    background-color: var(--gdm-picto-couleur);
}

@media (max-width: 640px) {
    .gdm-page__content .gdm-picto:not(.gdm-picto--petit) {
        min-height: 48px;
        margin-bottom: 20px;
        padding-left: 66px;
    }

    .gdm-page__content .gdm-picto:not(.gdm-picto--petit)::before {
        width: 48px;
        height: 48px;
        margin-top: -24px;
    }

    .gdm-page__content .gdm-picto:not(.gdm-picto--petit)::after {
        left: 12px;
        width: 24px;
        height: 24px;
        margin-top: -12px;
    }
}

/* ==========================================================================
   PAGE TEMPLATE - CONTENU CONSTRUIT AVEC DIVI (sections / rangées / colonnes)
   ==========================================================================
   Les pages de contenu sont montées dans le builder Divi. Divi impose ses
   propres largeurs et marges de rangée : on les neutralise pour que la mise
   en page reste pilotée par .gdm-page__content.
   ========================================================================== */

.gdm-page__content .et_pb_section {
    padding: 0;
    background-color: transparent;
}

.gdm-page__content .et_pb_row {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0 0 45px;
}

.gdm-page__content .et_pb_row:last-child {
    margin-bottom: 0;
}

/* Le titre de la page est déjà affiché dans le bandeau par page.php.
   Certaines pages ont gardé une première section Divi qui ne contient que ce
   même titre : on masque la section entière (sinon il reste sa bande de fond).
   Divi enveloppe le contenu dans .et-l > .et_builder_inner_content : pas de
   sélecteur en enfant direct depuis .gdm-page__content.
   Le correctif propre reste de supprimer cette section dans le builder. */
.gdm-page__content .et_pb_section:first-child:has(.et_pb_text_inner > h1:only-child):not(:has(p, ul, ol, img, .et_pb_image)) {
    display: none;
}

/* --------------------------------------------------------------------------
   Rangée 2/3 + 1/3 : contenu principal + colonne latérale
   -------------------------------------------------------------------------- */

.gdm-page__content .et_pb_row:has(> .et_flex_column_8_24) {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 55px;
    align-items: start;
}

/* Divi impose une largeur (flex-basis / max-width) sur ses colonnes :
   il faut la neutraliser pour que les pistes de la grille fassent foi. */
.gdm-page__content .et_pb_row:has(> .et_flex_column_8_24) > .et_pb_column {
    flex: none;
    width: auto;
    max-width: none;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Chapô (blockquote d'introduction)
   -------------------------------------------------------------------------- */

.gdm-page__content blockquote {
    margin: 0 0 35px;
    padding: 25px 30px;
    background-color: #f1fafa;
    border-left: 4px solid var(--gdm-teal);
    border-radius: 0 4px 4px 0;
}

.gdm-page__content blockquote p {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.7;
    color: var(--gdm-teal-dark);
}

/* --------------------------------------------------------------------------
   Titres : filet doré sous les h2
   -------------------------------------------------------------------------- */

.gdm-page__content h2 {
    position: relative;
    padding-bottom: 12px;
}

.gdm-page__content h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
    background-color: var(--gdm-gold);
}

/* --------------------------------------------------------------------------
   Colonne latérale : encadré + images
   -------------------------------------------------------------------------- */

.gdm-page__content .et_flex_column_8_24 .et_pb_text {
    margin-bottom: 30px;
    padding: 28px 28px 24px;
    background-color: var(--gdm-light-gray);
    border-top: 3px solid var(--gdm-gold);
    border-radius: 4px;
}

.gdm-page__content .et_flex_column_8_24 h2 {
    margin: 0 0 15px;
    padding-bottom: 0;
    font-size: 18px;
    letter-spacing: 0.5px;
}

.gdm-page__content .et_flex_column_8_24 h2::after {
    display: none;
}

.gdm-page__content .et_flex_column_8_24 p {
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.7;
}

.gdm-page__content .et_flex_column_8_24 p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Modules image
   -------------------------------------------------------------------------- */

.gdm-page__content .et_pb_image {
    margin-bottom: 25px;
}

.gdm-page__content .et_pb_image:last-child {
    margin-bottom: 0;
}

.gdm-page__content .et_pb_image_wrap {
    display: block;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.gdm-page__content .et_pb_image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    transition: transform 0.4s ease;
}

.gdm-page__content .et_pb_image:hover img {
    transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   Module Toggle
   Divi porte le padding sur .et_pb_toggle_close / .et_pb_toggle_open (pas sur
   .et_pb_toggle) et dessine le +/- avec une glyphe de sa police ETmodules.
   On remet le padding sur l'en-tête et le contenu, et on remplace la glyphe
   par un chevron dessiné en CSS (donc animable).
   -------------------------------------------------------------------------- */

.gdm-page__content .et_pb_toggle {
    margin-bottom: 20px;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.gdm-page__content .et_pb_toggle:last-child {
    margin-bottom: 0;
}

.gdm-page__content .et_pb_toggle_close,
.gdm-page__content .et_pb_toggle_open {
    padding: 0;
    background-color: var(--gdm-white);
}

.gdm-page__content .et_pb_toggle_open {
    border-color: var(--gdm-teal);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
}

/* En-tête cliquable */
.gdm-page__content .et_pb_toggle h5.et_pb_toggle_title,
.gdm-page__content .et_pb_toggle_close h5.et_pb_toggle_title,
.gdm-page__content .et_pb_toggle_open h5.et_pb_toggle_title {
    margin: 0;
    padding: 18px 58px 18px 24px;
    background-color: var(--gdm-teal);
    color: var(--gdm-white);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.3px;
    transition: background-color 0.25s ease;
}

.gdm-page__content .et_pb_toggle h5.et_pb_toggle_title:hover {
    background-color: var(--gdm-teal-dark);
}

/* Chevron dessiné en CSS, à la place de la glyphe ETmodules */
.gdm-page__content .et_pb_toggle .et_pb_toggle_title::before,
.gdm-page__content .et_pb_toggle_open > .et_pb_toggle_title::before {
    content: '';
    right: 24px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -7px;
    border: solid var(--gdm-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform 0.25s ease, margin-top 0.25s ease;
}

.gdm-page__content .et_pb_toggle_open > .et_pb_toggle_title::before {
    margin-top: -2px;
    transform: rotate(-135deg);
}

/* Contenu déplié */
.gdm-page__content .et_pb_toggle_content {
    padding: 28px 30px 30px;
    color: var(--gdm-gray);
}

.gdm-page__content .et_pb_toggle_content h4 {
    margin: 0 0 22px;
    color: var(--gdm-teal);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.gdm-page__content .et_pb_toggle_content p {
    margin-bottom: 24px;
}

.gdm-page__content .et_pb_toggle_content p:last-child {
    margin-bottom: 0;
}

/* Les intertitres du contenu sont de simples <strong> en début de paragraphe :
   on les passe en bloc et on masque le <br> qui suit (sinon ligne vide). */
.gdm-page__content .et_pb_toggle_content p > strong:first-child {
    display: block;
    margin-bottom: 6px;
    color: var(--gdm-teal-dark);
    font-size: 15px;
    font-weight: 700;
}

.gdm-page__content .et_pb_toggle_content p > strong:first-child + br {
    display: none;
}

/* --------------------------------------------------------------------------
   Formulaires Contact Form 7
   Le gabarit CF7 n'utilise pas de <label> : chaque libellé est un <p> placé
   juste avant le <p> qui contient le champ. On s'appuie donc sur :has() pour
   distinguer libellé / ligne de champ / texte courant, sans toucher au gabarit.
   -------------------------------------------------------------------------- */

.gdm-page__content .wpcf7-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 30px;
}

/* Tout occupe la largeur, sauf les deux blocs .colonne du gabarit */
.gdm-page__content .wpcf7-form > * {
    grid-column: 1 / -1;
}

.gdm-page__content .wpcf7-form > .colonne {
    grid-column: auto;
}

/* Ligne de champ */
.gdm-page__content .wpcf7-form p:has(.wpcf7-form-control-wrap) {
    margin: 0 0 20px;
}

/* Libellé : un <p> suivi d'un <p> qui contient un champ */
.gdm-page__content .wpcf7-form p:has(+ p .wpcf7-form-control-wrap) {
    margin: 0 0 7px;
    color: var(--gdm-dark);
    font-size: 14px;
    font-weight: 600;
}

/* Astérisque sur les champs obligatoires */
.gdm-page__content .wpcf7-form p:has(+ p .wpcf7-validates-as-required)::after {
    content: ' *';
    color: #c0392b;
    font-weight: 700;
}

/* Texte d'introduction d'un bloc (ex. « Facultatif : … ») */
.gdm-page__content .wpcf7-form p:has(+ .colonne) {
    margin: 15px 0 22px;
    padding-top: 22px;
    border-top: 1px solid #e6e6e6;
    color: var(--gdm-gray);
    font-size: 14px;
    font-style: italic;
}

.gdm-page__content .wpcf7-form-control-wrap {
    display: block;
}

/* Champs */
.gdm-page__content .wpcf7-form input[type="text"],
.gdm-page__content .wpcf7-form input[type="email"],
.gdm-page__content .wpcf7-form input[type="tel"],
.gdm-page__content .wpcf7-form textarea {
    width: 100%;
    padding: 12px 14px;
    background-color: var(--gdm-white);
    border: 1px solid #ccd4d4;
    border-radius: 4px;
    color: var(--gdm-dark);
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Les attributs rows/cols du gabarit donnent des zones trop hautes */
.gdm-page__content .wpcf7-form textarea {
    height: auto;
    min-height: 140px;
    resize: vertical;
}

.gdm-page__content .wpcf7-form .colonne textarea {
    min-height: 96px;
}

.gdm-page__content .wpcf7-form input::placeholder,
.gdm-page__content .wpcf7-form textarea::placeholder {
    color: #9aa5a5;
}

.gdm-page__content .wpcf7-form input:focus,
.gdm-page__content .wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--gdm-teal);
    box-shadow: 0 0 0 3px rgba(26, 158, 158, 0.15);
}

/* Bouton d'envoi */
.gdm-page__content .wpcf7-form .wpcf7-submit {
    width: auto;
    min-width: 200px;
    margin-top: 10px;
    padding: 14px 34px;
    background-color: var(--gdm-teal);
    border: none;
    border-radius: 4px;
    color: var(--gdm-white);
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.gdm-page__content .wpcf7-form .wpcf7-submit:hover {
    background-color: var(--gdm-teal-dark);
}

.gdm-page__content .wpcf7-form .wpcf7-submit:focus-visible {
    outline: 3px solid rgba(26, 158, 158, 0.4);
    outline-offset: 2px;
}

.gdm-page__content .wpcf7-form .wpcf7-submit:disabled {
    background-color: #9ac7c7;
    cursor: not-allowed;
}

/* Validation */
.gdm-page__content .wpcf7-form .wpcf7-not-valid {
    border-color: #c0392b;
}

.gdm-page__content .wpcf7-form .wpcf7-not-valid-tip {
    margin-top: 6px;
    color: #c0392b;
    font-size: 13px;
    font-weight: 600;
}

.gdm-page__content .wpcf7-form .wpcf7-response-output {
    margin: 22px 0 0;
    padding: 14px 18px;
    border: 1px solid #e0c200;
    border-radius: 4px;
    background-color: #fffbe6;
    color: var(--gdm-dark);
    font-size: 14px;
}

.gdm-page__content .wpcf7-form.sent .wpcf7-response-output {
    border-color: var(--gdm-teal);
    background-color: #eefafa;
}

.gdm-page__content .wpcf7-form.invalid .wpcf7-response-output,
.gdm-page__content .wpcf7-form.failed .wpcf7-response-output,
.gdm-page__content .wpcf7-form.spam .wpcf7-response-output {
    border-color: #c0392b;
    background-color: #fdeeec;
}

/* En dessous de 640px les deux blocs .colonne n'ont plus la place :
   on repasse le formulaire sur une seule colonne. */
@media (max-width: 640px) {
    .gdm-page__content .wpcf7-form {
        grid-template-columns: 1fr;
    }

    .gdm-page__content .wpcf7-form > .colonne {
        grid-column: 1 / -1;
    }

    .gdm-page__content .wpcf7-form .wpcf7-submit {
        width: 100%;
    }
}


/* ==========================================================================
   CONTACT FORM 7 — style cohérent avec le site
   ========================================================================== */

.gdm-page .wpcf7-form {
    font-family: 'Open Sans', Arial, sans-serif;
}

.gdm-page .wpcf7-form p {
    margin-bottom: 20px;
}

.gdm-page .wpcf7-form input[type="text"],
.gdm-page .wpcf7-form input[type="email"],
.gdm-page .wpcf7-form input[type="tel"],
.gdm-page .wpcf7-form input[type="url"],
.gdm-page .wpcf7-form input[type="number"],
.gdm-page .wpcf7-form textarea,
.gdm-page .wpcf7-form select {
    width: 100%;
    max-width: 500px;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    color: var(--gdm-dark);
    background-color: var(--gdm-white);
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.gdm-page .wpcf7-form input[type="text"]:focus,
.gdm-page .wpcf7-form input[type="email"]:focus,
.gdm-page .wpcf7-form input[type="tel"]:focus,
.gdm-page .wpcf7-form textarea:focus {
    border-color: var(--gdm-teal);
    outline: none;
    box-shadow: 0 0 0 2px rgba(26, 158, 158, 0.15);
}

.gdm-page .wpcf7-form textarea {
    min-height: 150px;
    resize: vertical;
}

.gdm-page .wpcf7-form input[type="submit"] {
    background-color: var(--gdm-teal);
    color: var(--gdm-white);
    border: 2px solid var(--gdm-teal);
    border-radius: 4px;
    padding: 12px 35px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gdm-page .wpcf7-form input[type="submit"]:hover {
    background-color: var(--gdm-teal-dark);
    border-color: var(--gdm-teal-dark);
}

.gdm-page .wpcf7-form .wpcf7-not-valid {
    border-color: #e74c3c;
}

.gdm-page .wpcf7-form .wpcf7-not-valid-tip {
    color: #e74c3c;
    font-size: 12px;
    margin-top: 5px;
}

.gdm-page .wpcf7-form .wpcf7-response-output {
    border-radius: 4px;
    padding: 12px 20px;
    font-size: 14px;
    margin-top: 20px;
}

/* Colonnes côte à côte */
.gdm-page .wpcf7-form {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.gdm-page .wpcf7-form > .colonne {
    flex: 1;
    min-width: 280px;
}

.gdm-page .wpcf7-form > p {
    width: 100%;
}

/* Champs fichier */
.gdm-page .wpcf7-form input[type="file"] {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 13px;
    color: var(--gdm-gray);
    padding: 8px 0;
}

.gdm-page .wpcf7-form input[type="file"]::file-selector-button {
    background-color: var(--gdm-light-gray);
    color: var(--gdm-dark);
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px 15px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 13px;
    cursor: pointer;
    margin-right: 10px;
    transition: background-color 0.2s ease;
}

.gdm-page .wpcf7-form input[type="file"]::file-selector-button:hover {
    background-color: #e0e0e0;
}

/* Champs pleine largeur dans les colonnes */
.gdm-page .wpcf7-form .colonne input[type="text"],
.gdm-page .wpcf7-form .colonne input[type="email"],
.gdm-page .wpcf7-form .colonne input[type="tel"],
.gdm-page .wpcf7-form .colonne textarea {
    max-width: 100%;
}

/* ==========================================================================
   PAGE TEMPLATE - DIVI BUILDER CONTENT (full width)
   ========================================================================== */

.gdm-page__divi {
    width: 100%;
}

/* Boutons Divi — style cohérent avec le site */
.gdm-page .et_pb_button {
    background-color: var(--gdm-teal) !important;
    color: var(--gdm-white) !important;
    border: 2px solid var(--gdm-teal) !important;
    border-radius: 4px !important;
    font-family: 'Open Sans', Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 12px 30px !important;
    transition: all 0.3s ease !important;
}

.gdm-page .et_pb_button:hover {
    background-color: var(--gdm-teal-dark) !important;
    border-color: var(--gdm-teal-dark) !important;
}

.gdm-page .et_pb_button::after {
    display: none !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1280px) {
    .gdm-nav > ul > li > a {
        padding: 10px 10px;
        font-size: 11px;
    }

    .gdm-header__phone {
        font-size: 10px;
    }

    .gdm-header__phone strong {
        font-size: 12px;
    }
}

@media (max-width: 980px) {
    .gdm-page__hero {
        height: 250px;
    }

    .gdm-page__title {
        font-size: 28px;
        letter-spacing: 2px;
    }

    :root {
        --gdm-page-gutter: 20px;
    }

    .gdm-page .wpcf7-form {
        flex-direction: column;
        gap: 0;
    }

    .gdm-page__content {
        margin: 30px auto 40px;
        padding: 30px 26px 35px;
    }

    /* Contenu Divi : la colonne latérale passe sous le contenu principal */
    .gdm-page__content .et_pb_row:has(> .et_flex_column_8_24) {
        display: block;
    }

    .gdm-page__content .et_flex_column_8_24 {
        margin-top: 40px;
    }

    .gdm-page__content .et_pb_row {
        margin-bottom: 35px;
    }

    .gdm-page__content blockquote {
        padding: 20px 22px;
    }

    .gdm-page__content blockquote p {
        font-size: 15px;
    }

    .gdm-hero {
        flex-direction: column;
        height: auto;
    }

    .gdm-hero__slider {
        height: 300px;
    }

    .gdm-hero__placeholder {
        min-height: 300px;
    }

    .gdm-hero__buttons {
        flex-direction: column;
        height: auto;
    }

    .gdm-hero__cta {
        min-height: 100px;
        font-size: 18px;
    }

    .gdm-map-section {
        flex-direction: column;
    }

    .gdm-cards__row {
        flex-direction: column;
    }

    .gdm-card {
        min-height: 250px;
    }

    .gdm-hamburger {
        display: flex;
    }

    .gdm-nav {
        display: none;
        position: absolute;
        top: var(--gdm-header-height);
        left: 0;
        right: 0;
        background: var(--gdm-white);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        padding: 20px 0;
        z-index: 9998;
    }

    .gdm-nav.is-active {
        display: block;
    }

    .gdm-nav ul {
        flex-direction: column;
        gap: 0;
    }

    .gdm-nav > ul > li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .gdm-nav > ul > li > a {
        padding: 12px 30px;
        font-size: 14px;
        flex: 1;
    }

    .gdm-nav ul ul {
        position: static;
        box-shadow: none;
        min-width: 100%;
        width: 100%;
    }

    .gdm-nav ul ul li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .gdm-nav ul ul li a {
        padding-left: 50px;
        flex: 1;
    }

    .gdm-nav ul ul ul li a {
        padding-left: 70px;
    }

    .gdm-nav > ul > li:hover > ul,
    .gdm-nav ul ul li:hover > ul {
        display: none;
    }

    .gdm-nav > ul > li.is-open > ul,
    .gdm-nav ul ul li.is-open > ul {
        display: flex;
        width: 100%;
    }

    .gdm-nav .menu-item-has-children > a::after {
        display: inline-block;
        transition: transform 0.2s ease;
    }

    .gdm-nav .menu-item-has-children.is-open > a::after {
        transform: rotate(180deg);
    }

    .gdm-header__right {
        display: none;
    }

    .gdm-footer__bar .gdm-footer__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .gdm-footer__left {
        flex-direction: column;
        gap: 12px;
    }

    .gdm-footer__right {
        flex-wrap: wrap;
        justify-content: center;
    }

    .gdm-footer__copyright {
        text-align: center;
    }
}

@media (max-width: 640px) {
    /* Sur petit écran la barre sociale coûte trop de largeur : on la réduit
       plutôt que de la masquer, et la carte se resserre. */
    :root {
        --gdm-page-gutter: 15px;
        --gdm-social-width: 36px;
    }

    .gdm-page__content {
        padding: 25px 20px 30px;
        border-radius: 4px;
    }
}

@media (max-width: 480px) {
    .gdm-header__logo img {
        height: 45px;
    }

    .gdm-header__inner {
        padding: 0 15px;
        height: 70px;
    }
}


/* ===========================================================================
   ÉQUIPE — grille [gdm_equipe] et archive /team/
   ===========================================================================
   Volontairement sans animation ni effet d'apparition : les photos se
   révèlent telles quelles. Le carré est obtenu en CSS (aspect-ratio +
   object-fit) plutôt qu'avec une taille d'image dédiée, ce qui évite d'avoir
   à régénérer les 34 photos déjà importées. */

.gdm-team {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 35px 30px;
}

.gdm-team--cols-2 { grid-template-columns: repeat(2, 1fr); }
.gdm-team--cols-3 { grid-template-columns: repeat(3, 1fr); }
.gdm-team--cols-4 { grid-template-columns: repeat(4, 1fr); }
.gdm-team--cols-5 { grid-template-columns: repeat(5, 1fr); }
.gdm-team--cols-6 { grid-template-columns: repeat(6, 1fr); }

/* Divi fait « ol, ul { list-style: none } » puis restaure les puces dans les
   contenus : on les retire à nouveau ici, la grille n'en veut pas. */
.gdm-page__content .gdm-team,
.gdm-page__content .gdm-team > li {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.gdm-page__content .gdm-team > li::marker {
    content: none;
}

.gdm-team__item {
    margin: 0;
    text-align: center;
}

.gdm-team__link {
    display: block;
    text-decoration: none;
    color: var(--gdm-dark);
}

.gdm-team__photo {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
    background-color: var(--gdm-light-gray);
}

.gdm-team__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

.gdm-team__photo-empty {
    display: block;
    width: 100%;
    height: 100%;
}

.gdm-team__name {
    display: block;
    margin-top: 14px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gdm-dark);
    line-height: 1.35;
}

.gdm-team__fullname {
    display: block;
    margin-top: 4px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--gdm-gray);
    line-height: 1.4;
}

.gdm-team__link:hover .gdm-team__name {
    color: var(--gdm-teal);
}

.gdm-team__empty {
    font-family: 'Open Sans', Arial, sans-serif;
    color: var(--gdm-gray);
}

@media (max-width: 980px) {
    .gdm-team--cols-4,
    .gdm-team--cols-5,
    .gdm-team--cols-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
    .gdm-team { gap: 25px 20px; }

    .gdm-team--cols-3,
    .gdm-team--cols-4,
    .gdm-team--cols-5,
    .gdm-team--cols-6 { grid-template-columns: repeat(2, 1fr); }

    .gdm-team__name { font-size: 14px; }
}

/* Variante compacte : le sommaire de l'équipe en colonne latérale de fiche.
   Placée après les media queries à dessein — à spécificité égale, c'est la
   dernière déclaration qui l'emporte, donc les colonnes fluides ne sont pas
   écrasées par les points de rupture ci-dessus. */
.gdm-team--compact {
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: 14px 10px;
}

.gdm-team--compact .gdm-team__photo {
    border-radius: 3px;
}

.gdm-team--compact .gdm-team__name {
    margin-top: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1.3;
}

/* La fiche affichée se repère dans son propre sommaire. */
.gdm-team--compact .is-current .gdm-team__name {
    color: var(--gdm-teal);
}

.gdm-team--compact .is-current .gdm-team__photo {
    outline: 2px solid var(--gdm-teal);
    outline-offset: 1px;
}


/* ===========================================================================
   ÉQUIPE — fiche praticien (single-employees.php)
   =========================================================================== */

.gdm-employee {
    display: flow-root;
    background-color: var(--gdm-page-bg);
    padding-left: var(--gdm-page-gutter);
    padding-right: calc(var(--gdm-page-gutter) + var(--gdm-social-width));
}

.gdm-employee__inner {
    max-width: 1200px;
    margin: 50px auto 0;
    padding: 45px 50px 50px;
    background-color: var(--gdm-white);
    border-radius: 6px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: var(--gdm-dark);

    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 260px;
    gap: 40px;
    align-items: start;
}

.gdm-employee__inner--no-aside {
    grid-template-columns: 200px minmax(0, 1fr);
}

.gdm-employee__photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.gdm-employee__name {
    margin: 0 0 12px;
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gdm-dark);
    line-height: 1.25;
}

.gdm-employee__role,
.gdm-employee__sector {
    margin: 0 0 10px;
    padding-bottom: 0;
    color: var(--gdm-gray);
}

.gdm-employee__role strong,
.gdm-employee__sector strong {
    color: var(--gdm-teal);
}

.gdm-employee__section {
    margin-top: 30px;
}

.gdm-employee__section-title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gdm-dark);
    border-bottom: 2px dotted #d9e2e2;
    padding-bottom: 6px;
}

.gdm-employee__list {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
}

.gdm-employee__list li {
    margin-bottom: 8px;
    color: var(--gdm-gray);
}

.gdm-employee__list li::marker {
    color: var(--gdm-teal);
}

/* Les entrées héritées de l'ancien site portent parfois des styles en ligne
   (couleurs criardes, tailles en points, polices Word) : on les neutralise
   pour garder une typographie homogène. */
.gdm-employee__list li [style],
.gdm-employee__free [style] {
    color: inherit !important;
    font-size: inherit !important;
    font-family: inherit !important;
    background: none !important;
}

.gdm-employee__list a,
.gdm-employee__free a {
    color: var(--gdm-teal);
    word-break: break-word;
}

.gdm-employee__list img,
.gdm-employee__free img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.gdm-employee__free {
    margin-top: 30px;
}

.gdm-employee__free p {
    margin-bottom: 18px;
    padding-bottom: 0;
    color: var(--gdm-gray);
}

.gdm-employee__free h4 {
    margin: 25px 0 10px;
    font-size: 17px;
    font-weight: 700;
    color: var(--gdm-dark);
}

.gdm-employee__aside-block {
    margin-bottom: 30px;
}

.gdm-employee__aside-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gdm-dark);
    border-bottom: 2px dotted #d9e2e2;
    padding-bottom: 6px;
}

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

.gdm-employee__aside-list li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 22px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--gdm-gray);
}

/* Puces reprises de l'ancien site : un chevron plein pour les spécialités
   (glyphe « f0da » de Jupiter), un picto « personne » pour les titres
   (« e07f »). En SVG intégré plutôt qu'en police d'icônes, pour ne dépendre
   d'aucun chargement externe. La couleur est écrite en dur : une variable CSS
   ne peut pas être interprétée à l'intérieur d'une data-URI. */
.gdm-employee__aside-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 13px;
    height: 13px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231a9e9e'%3E%3Cpath d='M8 4l10 8-10 8z'/%3E%3C/svg%3E");
}

.gdm-employee__aside-list--titres li::before {
    top: 4px;
    width: 15px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231a9e9e'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M4 21v-1c0-4.4 3.6-7 8-7s8 2.6 8 7v1z'/%3E%3C/svg%3E");
}

/* Le bouton de retour occupe sa propre rangée en tête de carte, aligné à
   droite. La marge négative rattrape le gap de la grille : sans elle, il
   flotterait trop loin du contenu. */
.gdm-employee__topbar {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    margin-bottom: -22px;
}

.gdm-employee__back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px 9px 14px;
    border-radius: 999px;
    background-color: var(--gdm-teal);
    color: var(--gdm-white);
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-decoration: none;
    line-height: 1;
}

.gdm-employee__back-btn:hover,
.gdm-employee__back-btn:focus {
    background-color: var(--gdm-teal-dark);
    color: var(--gdm-white);
}

.gdm-employee__back-btn svg {
    flex-shrink: 0;
}

@media (max-width: 980px) {
    .gdm-employee__inner,
    .gdm-employee__inner--no-aside {
        grid-template-columns: 160px minmax(0, 1fr);
        gap: 30px;
    }

    .gdm-employee__aside {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .gdm-employee {
        padding-right: var(--gdm-page-gutter);
    }

    .gdm-employee__inner,
    .gdm-employee__inner--no-aside {
        grid-template-columns: 1fr;
        padding: 25px 20px 30px;
        margin-top: 25px;
        border-radius: 4px;
    }

    .gdm-employee__identity {
        max-width: 200px;
        margin: 0 auto;
    }

    .gdm-employee__name {
        font-size: 22px;
        text-align: center;
    }

    /* En une seule colonne, le gap est plus serré : la marge négative qui
       rattrapait celui du bureau n'a plus lieu d'être. */
    .gdm-employee__topbar {
        margin-bottom: 0;
    }
}