/* ==========================================================================
   SAG — Finitions visuelles du site public  (css/sag-ui.css)
   Chargée après bootstrap.min.css, style.css et responsive.css (includes/declar.php).
   Surcharges ciblées : rythme vertical, titres, boutons, formulaires, alertes,
   cartes, fil d'Ariane, espace membre, pied de page.
   Volontairement NON modifiés : slider d'accueil (sag-hero*), cartes /congres (cg-*),
   pastilles (sag-chip*), formulaires d'inscription aux congrès (cf-*, cfc-*).
   Les !important ne servent qu'à battre un style en ligne ou un utilitaire Bootstrap.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Variables (identité : bleu nuit, bleus SAG, orange d'action, jaune du logo)
   -------------------------------------------------------------------------- */
:root {
    --sag-navy: #0c2d48;
    --sag-ink: #1e293b;
    --sag-text: #334155;
    --sag-muted: #64748b;
    --sag-line: #e2e8f0;
    --sag-soft: #f4f8fb;
    --sag-blue: #0284c7;
    --sag-blue-dark: #0369a1;
    --sag-blue-deep: #0460A9;
    --sag-sky: #38bdf8;
    --sag-orange: #fa7e23;
    --sag-orange-dark: #ea6a0c;
    --sag-yellow: #FCE128;
    --sag-violet: #2B215E;
    --sag-radius: 16px;
    --sag-shadow: 0 14px 34px -16px rgba(15, 23, 42, .28);
    --sag-shadow-sm: 0 6px 18px -10px rgba(15, 23, 42, .22);
    --sag-section: 72px;          /* espacement vertical des sections */
    --sag-accent: linear-gradient(90deg, #0284c7 0 66%, #FCE128 66% 100%);
}
@media (max-width: 991.98px) { :root { --sag-section: 60px; } }
@media (max-width: 575.98px) { :root { --sag-section: 44px; } }


/* --------------------------------------------------------------------------
   1. Base : texte courant, focus clavier, transitions
   -------------------------------------------------------------------------- */
/* style.css anime TOUT (« * { transition: all .5s } ») : effets mous et saccadés.
   Les éléments qui déclarent leur propre transition la conservent. */
* { transition: none; }

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* paragraphes : le thème les met en 300 / noir pur, peu lisible */
p {
    font-weight: 400;
    color: var(--sag-text);
}

::selection { background: rgba(2, 132, 199, .18); }

/* le thème supprime tout contour de focus : on le rend visible au clavier
   (les champs de saisie ont déjà leur propre halo de focus) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 2px solid var(--sag-sky) !important;
    outline-offset: 2px;
}

/* images insérées dans les contenus éditables : jamais plus larges que leur colonne */
.blog-container img,
.container-fluid.wow img,
.services_section_2 img {
    max-width: 100%;
    height: auto;
}


/* --------------------------------------------------------------------------
   2. Rythme vertical des sections
   -------------------------------------------------------------------------- */
/* L'en-tête est flottant : le bloc qui le suit démarrait SOUS la barre de navigation
   (carte de connexion collée au menu, marges masquées). */
.header_section + div { clear: both; }

.layout_padding { padding-top: var(--sag-section); }

.blog_section,
.contact_section { padding-bottom: var(--sag-section); }

/* pages « formulaires / espace membre » : fond doux, les cartes blanches ressortent */
.contact_section { background: linear-gradient(180deg, #f8fafc 0%, #eef4f9 100%); }

/* page À propos : padding + marge 90 px cumulés (180 px sous le menu) */
.services_section.margin_90 {
    margin: 0;
    padding-bottom: var(--sag-section);
}

/* détail d'une actualité / d'une page : conteneurs sans classe de section,
   dont le contenu est flottant (flow-root : ils l'englobent, la marge basse s'applique) */
div[class="layout_padding"],
.layout_padding.pt-1:not(.blog_section) { display: flow-root; }
div[class="layout_padding"] { padding-bottom: var(--sag-section); }
div[class="layout_padding"] .blog-container.pt-5 { padding-top: 0 !important; }
div[class="layout_padding"] > .blog_section_2.pt-3 { padding-top: 8px !important; }
.layout_padding.pt-1:not(.blog_section) { padding-bottom: 32px; }

/* écart titre de section -> contenu */
.blog_section > .blog_section_2 { padding-top: 32px !important; }
.contact_section > .container > .row:first-child { margin-bottom: 28px; }


/* --------------------------------------------------------------------------
   3. Titres de section uniformisés (+ filet bleu / jaune du logo)
   -------------------------------------------------------------------------- */
.blog_taital,
.portfolio_taital,
.services_taital,
.contact_taital {
    float: none;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.4px;
    color: var(--sag-navy);
    padding: 0;
    margin: 0 0 14px;
}
.portfolio_taital,
.portfolio_taital_1,
.contact_taital_1 { color: var(--sag-navy); }

.blog_taital::after,
.portfolio_taital::after,
.services_taital::after,
.contact_taital::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin: 14px auto 0;
    border-radius: 4px;
    background: var(--sag-accent);
}

/* sous-titres / chapeaux */
.blog_text {
    float: none;
    max-width: 680px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.6;
    color: #cbd5e1;
}
.contact_section > .container > .row:first-child p {
    max-width: 680px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.6;
    color: var(--sag-muted);
}
.services_text_1 {
    font-size: 17px;
    font-weight: 500;
    color: var(--sag-blue-deep);
    padding: 0;
    margin: 0;
}


/* --------------------------------------------------------------------------
   4. Navigation : marges latérales sur mobile + icônes absentes de Font Awesome 4.0.3
   -------------------------------------------------------------------------- */
/* Bootstrap retire le padding du conteneur de la barre sous 992 px : logo et
   bouton menu collés aux bords de l'écran. */
@media (max-width: 991.98px) {
    .sag-navbar.navbar-expand-lg > .container {
        padding-left: 15px;          /* aligné sur la gouttière des contenus */
        padding-right: 15px;
    }
}

/* Libellés de champs (formulaire du profil : les champs pré-remplis masquent le texte indicatif) */
.sag-form-label {
    display: block;
    margin: 0 0 6px 2px;
    color: var(--sag-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}


/* --------------------------------------------------------------------------
   5. Boutons
   -------------------------------------------------------------------------- */
/* .btn-secondary (gris Bootstrap) sert partout de bouton principal :
   bleu SAG ; orange pour les actions d'inscription / de paiement. */
.btn.btn-secondary {
    background: linear-gradient(135deg, var(--sag-blue) 0%, var(--sag-blue-dark) 100%);
    border: 0;
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
    letter-spacing: .2px;
    box-shadow: 0 8px 18px -8px rgba(2, 132, 199, .65);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn.btn-secondary:hover,
.btn.btn-secondary:focus {
    background: linear-gradient(135deg, #0ea5e9 0%, var(--sag-blue) 100%);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -10px rgba(2, 132, 199, .7);
}
a.btn.btn-secondary[href^="inscription-congres"],
a.btn.btn-secondary[href^="compte-abonnement"] {
    background: var(--sag-orange);
    box-shadow: 0 8px 18px -8px rgba(250, 126, 35, .7);
}
a.btn.btn-secondary[href^="inscription-congres"]:hover,
a.btn.btn-secondary[href^="compte-abonnement"]:hover {
    background: var(--sag-orange-dark);
}

/* « Nos congrès » (accueil) : pilule bleue au lieu du bloc gris anthracite */
.seemore_bt {
    width: auto;
    display: flex;
    justify-content: center;
    margin: 12px auto 0 !important;
}
.seemore_bt a {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 30px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--sag-blue) 0%, var(--sag-blue-dark) 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 10px 22px -10px rgba(2, 132, 199, .7);
    transition: transform .2s ease, box-shadow .2s ease;
}
.seemore_bt a::after {
    content: "\f061";
    font-family: FontAwesome;
    font-size: 13px;
}
.seemore_bt a:hover {
    background: linear-gradient(135deg, #0ea5e9 0%, var(--sag-blue) 100%);
    color: #fff;
    transform: translateY(-1px);
}


/* --------------------------------------------------------------------------
   6. Formulaires (contact, newsletter, adhésion, profil)
   -------------------------------------------------------------------------- */
.mail_section_1 {
    width: 100%;
    max-width: 680px;
}
/* adhésion (formulaire long, sur deux colonnes) : un peu plus large */
.contact_section .col-md-10 > .mail_section_1 { max-width: 800px; }
/* le formulaire devient une carte, comme les pages de connexion */
.contact_section .mail_section_1 > form {
    background: #fff;
    border: 1px solid var(--sag-line);
    border-radius: 18px;
    padding: 32px 32px 30px;
    box-shadow: var(--sag-shadow);
}

.mail_text,
.massage-bt {
    float: none;
    display: block;
    width: 100%;
    margin: 0 0 16px;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    color: var(--sag-ink);
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.mail_text { height: 50px; }
.massage-bt {
    height: 150px;
    min-height: 110px;
    resize: vertical;
}
.mail_text::placeholder,
.massage-bt::placeholder {
    color: #64748b !important;
    opacity: 1;
}
.mail_text:focus,
.massage-bt:focus {
    outline: none;
    background: #fff;
    border-color: var(--sag-blue);
    box-shadow: 0 0 0 4px rgba(56, 189, 248, .2);
}

/* bouton d'envoi centré, largeur confortable */
.send_bt {
    clear: both;
    width: 100%;
    max-width: 280px;
    margin: 8px auto 0;
}
.send_bt .btn { font-size: 16px; }

/* carte Google Maps (page contact) */
.contact_section .mail_section_1 iframe {
    display: block;
    border: 0;
    border-radius: 16px;
    box-shadow: var(--sag-shadow-sm);
}


/* --------------------------------------------------------------------------
   7. Alertes du site (.alert.error / .alert.verify) — remplace les aplats rouge / turquoise
   -------------------------------------------------------------------------- */
.alert.error,
.alert.verify {
    position: relative;
    padding: 14px 18px 14px 48px;
    margin-bottom: 20px;
    border: 1px solid;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.6;
    text-align: left;
}
.alert.error::before,
.alert.verify::before {
    position: absolute;
    left: 18px;
    top: 14px;
    font-family: FontAwesome;
    font-size: 18px;
    line-height: 1.3;
}
.alert.error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}
.alert.error::before { content: "\f06a"; color: #dc2626; }
.alert.verify {
    background: #effcf9;
    border-color: #a7e5d9;
    color: #0f5e57;
}
.alert.verify::before { content: "\f05a"; color: #0d9488; }
.alert.error a,
.alert.verify a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline !important;
}


/* --------------------------------------------------------------------------
   8. Accueil
   -------------------------------------------------------------------------- */
/* 8a. Bloc « Congrès » : grille de vignettes alignées, coins arrondis, ombre */
.services_section:not(.layout_padding) { padding: var(--sag-section) 0; }
.services_section:not(.layout_padding) .portfolio_taital.mt-5 { margin-top: 0 !important; margin-bottom: 30px; }
.services_section:not(.layout_padding) .row.text-center { justify-content: center; }
.services_section:not(.layout_padding) .row.text-center > [class*="col-"] { margin-bottom: 0 !important; }
.services_section:not(.layout_padding) .row.text-center .border {
    border: 0 !important;
    margin-bottom: 30px !important;
    border-radius: 14px;
    overflow: hidden;
    background: #0b1424;
    box-shadow: var(--sag-shadow);
}
.services_section:not(.layout_padding) .image-overlay-container > a { display: block; }
.services_section:not(.layout_padding) .image-overlay-container img {
    display: block;
    margin: 0 !important;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
/* grande vignette : même hauteur que les deux petites empilées à droite */
.services_section:not(.layout_padding) .row.text-center > .col-8 > .border { height: calc(100% - 30px); }
.services_section:not(.layout_padding) .row.text-center > .col-8 .image-overlay-container,
.services_section:not(.layout_padding) .row.text-center > .col-8 .image-overlay-container > a { height: 100%; }
.services_section:not(.layout_padding) .row.text-center > .col-8 .image-overlay-container img {
    height: 100%;
    aspect-ratio: auto;
}
/* survol : voile bleu nuit + titre en pilule */
.services_section:not(.layout_padding) .overlay-text {
    background: linear-gradient(0deg, rgba(4, 11, 26, .85) 0%, rgba(4, 11, 26, .35) 100%);
    padding: 16px;
}
.services_section:not(.layout_padding) .overlay-text .btn {
    background: var(--sag-blue);
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 14.5px;
    font-weight: 600;
    white-space: normal;
    line-height: 1.35;
    box-shadow: 0 10px 24px -8px rgba(2, 132, 199, .7);
}

/* 8b. Présentation de l'association + catégories (fond doux pour rythmer la page) */
.services_section.layout_padding.mt-5 {
    margin-top: 0 !important;
    padding-bottom: var(--sag-section);
    background: linear-gradient(180deg, var(--sag-soft) 0%, #eaf2f8 100%);
}
.services_section.layout_padding.mt-5 > .container.mb-5 { margin-bottom: 0 !important; }
.services_section.layout_padding.mt-5 .services_section_2 { padding-top: 36px; }
.services_section.layout_padding.mt-5 .services_section_2 > .row:first-child { align-items: center; }
.services_section_2 h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--sag-navy);
    padding: 0;
    margin: 0 0 12px;
}
.services_section_2 .text-justify {
    text-align: left !important;          /* le texte justifié creusait des « rivières » */
    font-size: 16px;
    line-height: 1.8;
    color: var(--sag-text);
}
.services_section_2 .col-lg-8 > p + a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 10px 22px;
    border: 1.5px solid var(--sag-blue);
    border-radius: 999px;
    color: var(--sag-blue);
    font-size: 14.5px;
    font-weight: 600;
    transition: background .2s ease, color .2s ease;
}
.services_section_2 .col-lg-8 > p + a::after {
    content: "\f061";
    font-family: FontAwesome;
    font-size: 12px;
}
.services_section_2 .col-lg-8 > p + a:hover {
    background: var(--sag-blue);
    color: #fff;
}
/* pastilles rondes Patients / Professionnels : taille plafonnée, ombre douce */
.services_section_2 .row.mt-5 { margin-top: 36px !important; }
.services_section_2 .box_main {
    width: 100%;
    max-width: 180px;
    margin: 0 auto 24px;
    padding: 16px;
    box-shadow: 0 18px 34px -16px rgba(4, 96, 169, .65);
}
.services_section_2 .box_main .services_text {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    padding: 0;
    margin: 0;
}

/* 8c. Contact en bas d'accueil : fond blanc (la section précédente est teintée) */
.services_section + .contact_section { background: #fff; }


/* --------------------------------------------------------------------------
   9. Cartes (actualités, pages) + pagination
   -------------------------------------------------------------------------- */
/* la date suit le titre au lieu d'être repoussée en bas de carte ;
   responsive.css ajoutait 30 px de marge haute (vide parasite en bas de carte) */
.blog_box {
    justify-content: flex-start;
    margin-top: 0;
}
.blog_box > a { display: block; }
.blog_img img,
.product_img img {
    display: block;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.prep_text { color: var(--sag-navy); }

/* même écart vertical entre les cartes qu'entre les colonnes (30 px) */
.blog-container > .col-md-4,
.product-container > .col-md-4 {
    margin-top: 0 !important;
    margin-bottom: 30px !important;
}

/* cartes des pages « Patients / Professionnels » alignées sur celles des actualités */
.product_section { padding: 28px 0 var(--sag-section); }
.product_box {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(2, 132, 199, .12);
    border-radius: var(--sag-radius);
    overflow: hidden;
    padding-bottom: 14px;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, .08) !important;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease, border-color .3s ease;
}
.product_box:hover {
    transform: translateY(-6px);
    border-color: rgba(56, 189, 248, .4);
    box-shadow: 0 20px 35px -8px rgba(2, 132, 199, .22) !important;
}
.product_img {
    overflow: hidden;
    background: #f1f5f9;
}
.product_img img { transition: transform .5s ease; }
.product_box:hover .product_img img { transform: scale(1.05); }
.product_box:hover .prep_text { color: var(--sag-blue); }

/* pagination (fond sombre des actualités) */
.blog_section .readmore_bt_1 {
    width: auto;
    margin-top: 28px;
}
.blog_section .readmore_bt_1 .pagination {
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
}
.blog_section .readmore_bt_1 .pagination .page-item { margin: 0; }
.blog_section .readmore_bt_1 .pagination .page-item .page-link {
    float: none;
    width: auto;
    min-width: 44px;
    height: 44px;
    margin: 0;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
}
.blog_section .readmore_bt_1 .pagination .page-item .page-link:hover {
    background: rgba(56, 189, 248, .2);
    border-color: rgba(56, 189, 248, .55);
    color: #fff;
}
.blog_section .readmore_bt_1 .pagination .page-item.active .page-link {
    background: var(--sag-blue);
    border-color: var(--sag-blue);
    box-shadow: 0 8px 18px -8px rgba(2, 132, 199, .8);
}
.blog_section .readmore_bt_1 .pagination .page-item.disabled .page-link { opacity: .4; }


/* --------------------------------------------------------------------------
   10. Pages de détail : actualité, page de contenu, congrès, information, À propos
   -------------------------------------------------------------------------- */
/* titre + date + texte (actualité / page) */
.blog-container > [class*="col-md-"] > h3 {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sag-navy);
    padding: 0;
    margin: 0 0 14px;
}
.blog-container > .col-md-8 > h3 + span {
    display: inline-block;
    margin-bottom: 14px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(2, 132, 199, .08);
    color: var(--sag-blue);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.blog-container > .col-md-8 > h3 + span + br { display: none; }
.blog-container > .col-md-8,
.blog-container > .col-md-6.my-3 {
    font-size: 16px;
    line-height: 1.8;
    color: var(--sag-text);
}
.blog-container > .col-md-8 p,
.blog-container > .col-md-6.my-3 p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--sag-text);
    margin: 0 0 14px;
}
.blog-container > .col-4 > img,
.blog-container > .col-md-6 > img {
    display: block;
    border-radius: 16px;
    box-shadow: var(--sag-shadow);
}
.blog-container > .col-md-6.my-3 { margin-top: 0 !important; }

/* « Autres actualités » : vraies cartes */
.row.g-4 > .col-lg-12 > h2 {
    font-size: 26px;
    font-weight: 600;
    color: var(--sag-navy);
    padding: 0;
}
.row.g-4 > .col-lg-12 > h2::after {
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    margin: 12px auto 0;
    border-radius: 4px;
    background: var(--sag-accent);
}
.row.g-4 > .col-lg-3 { margin-bottom: 24px; }
.feature-item {
    height: 100%;
    background: #fff;
    border: 1px solid var(--sag-line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--sag-shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease;
}
.feature-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--sag-shadow);
}
.feature-item img.rounded {
    display: block;
    border-radius: 0 !important;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.feature-item .feature-content.p-4 {
    padding: 16px 18px 18px !important;
    font-size: 14px;
    line-height: 1.6;
    color: var(--sag-muted);
}
.feature-item .feature-content-inner > a {
    color: var(--sag-navy);
    font-size: 15.5px;
    line-height: 1.4;
}
.feature-item .feature-content-inner > a:hover { color: var(--sag-blue); }
.feature-item .feature-content-inner small b {
    color: var(--sag-blue);
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    font-size: 11.5px;
}

/* détail d'un congrès (fond sombre) : texte aligné sur la colonne, affiche mise en valeur */
.blog_section .blog-container > .row.my-4 { margin-top: 0 !important; }
.blog_section .blog-container > .row > .col-md-5 > img {
    display: block;
    border-radius: 14px;
    box-shadow: 0 26px 50px -22px rgba(0, 0, 0, .8);
}
.blog_section .blog-container > .row > .col-md-7 > .prep_text {
    font-size: 22px;
    line-height: 1.35;
    padding: 0 0 12px;
}
.blog_section .blog-container > .row > .col-md-7 > .lorem_text {
    padding: 0;
    font-size: 15.5px;
    line-height: 1.8;
}
.blog_section .blog-container > .row > .col-md-7 > .lorem_text p { font-weight: 400; }

/* page « Informations utiles » : mêmes marges que les autres pages
   (container-fluid + container doublaient la marge latérale sur mobile) */
.container-fluid.wow {
    padding-left: 0;
    padding-right: 0;
}
.container-fluid.wow > .container.py-5 {
    padding-top: var(--sag-section) !important;
    padding-bottom: var(--sag-section) !important;
}
.container-fluid.wow .section-title {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    padding-bottom: 0 !important;
}
/* « Lire aussi » masqué quand il n'y a aucune autre page à proposer */
.container-fluid.wow > .container:not(:has(> .row.my-4 > [class*="col-"])) > hr,
.container-fluid.wow > .container:not(:has(> .row.my-4 > [class*="col-"])) > .contact_title,
.container-fluid.wow > .container:not(:has(> .row.my-4 > [class*="col-"])) > .row.my-4 { display: none; }
.container-fluid.wow .section-title h1 {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--sag-navy);
}
.container-fluid.wow .section-title h1::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin-top: 14px;
    border-radius: 4px;
    background: var(--sag-accent);
}
.container-fluid.wow .col-lg-12 {
    font-size: 16px;
    line-height: 1.8;
    color: var(--sag-text);
}
.container-fluid.wow .col-lg-12 p {
    font-size: 16px;
    line-height: 1.8;
}
.container-fluid.wow hr {
    margin: 40px 0 8px;
    border-color: var(--sag-line);
}
.container-fluid.wow .contact_title {
    font-size: 24px;
    font-weight: 600;
    color: var(--sag-navy);
}
.container-fluid.wow .col-lg-3 h5 a {
    color: var(--sag-blue);
    font-weight: 600;
}

/* page À propos : colonne de lecture centrée */
.services_section.margin_90 .services_section_2 {
    float: none;
    max-width: 860px;
    margin: 0 auto;
}
.services_section.margin_90 .services_section_2 p {
    font-size: 16.5px;
    line-height: 1.85;
}
.services_section.margin_90 .services_section_2 p.text-center { margin: 8px 0 28px; }


/* --------------------------------------------------------------------------
   11. Fil d'Ariane (pages Patients / Professionnels)
   -------------------------------------------------------------------------- */
.breadcrumb_section {
    background: #f8fafc;
    border-bottom: 1px solid var(--sag-line);
    box-shadow: none !important;
}
.breadcrumb_section .breadcrumb {
    margin: 0;
    padding: 13px 0 !important;
    background: none !important;
    font-size: 13.5px;
    line-height: 1.5;
}
.breadcrumb_section .breadcrumb-item a {
    color: var(--sag-blue);
    font-weight: 500;
}
.breadcrumb_section .breadcrumb-item a:hover { color: var(--sag-blue-dark); }
.breadcrumb_section .breadcrumb-item:last-child a {
    color: #475569;
    font-weight: 500;
}
.breadcrumb_section .breadcrumb-item + .breadcrumb-item::before {
    content: "\203A";
    color: #94a3b8;
    font-weight: 600;
}


/* --------------------------------------------------------------------------
   12. Connexion / mot de passe oublié (cartes « auth »)
   -------------------------------------------------------------------------- */
.sag-auth-section { padding: 56px 0 var(--sag-section); }
.sag-auth-card .sag-alert { text-align: left; }


/* --------------------------------------------------------------------------
   13. Espace membre : menu latéral, tableau de bord, tableaux
   -------------------------------------------------------------------------- */
/* .col-md-4 est en display:flex dans style.css : le menu s'étirait sur toute la
   hauteur de la ligne (cadre vide) et, replié, se réduisait à une pastille. */
.sag-espace-nav {
    align-self: flex-start;
    width: 100%;
}
@media (min-width: 992px) {
    .sag-espace-nav {
        position: sticky;
        top: 20px;
    }
}

/* cartes « État du compte » / « Cotisation » / « Inscriptions aux congrès »
   (styles en ligne : on ajoute seulement relief et hiérarchie) */
.contact_section .col-lg-9 .row > .col-md-6 > div[style] {
    box-shadow: var(--sag-shadow-sm);
    padding: 22px 24px !important;
}
.contact_section .col-lg-9 .row > .col-md-6 > div[style] > h4 {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--sag-muted);
    padding: 0;
    margin-bottom: 12px;
}

/* tableaux (historique des transactions, inscriptions aux congrès) */
.contact_section .table-responsive {
    background: #fff;
    border: 1px solid var(--sag-line);
    border-radius: 14px;
    box-shadow: var(--sag-shadow-sm);
}
.contact_section .table-responsive > .table {
    margin: 0;
    border: 0;
}
.contact_section .table-responsive > .table th,
.contact_section .table-responsive > .table td {
    border: 0;
    border-bottom: 1px solid #eef2f7;
    padding: 13px 16px;
    vertical-align: middle;
    font-size: 14px;
    color: var(--sag-ink);
}
.contact_section .table-responsive > .table thead th {
    background: #f8fafc;
    border-bottom: 1px solid var(--sag-line);
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    white-space: nowrap;
}
.contact_section .table-responsive > .table tbody tr:last-child td { border-bottom: 0; }
.contact_section .table-responsive > .table tbody tr:hover td { background: #f8fbfe; }
/* références de commande : pastille neutre, sur une seule ligne (au lieu du rose Bootstrap) */
.contact_section .table-responsive > .table code {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569;
    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   14. Pré-pied de page + pied de page
   -------------------------------------------------------------------------- */
.project_box { padding: 40px 0; }

.footer_section { padding: 56px 0 20px; }
.footer_section .location_text { margin-bottom: 8px; }
.footer_section .location_text.text-white { color: #cbd5e1 !important; }

/* pastilles d'icônes (adresse, contact) */
.footer_section .location_icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(56, 189, 248, .12);
    color: var(--sag-sky);
    font-size: 20px;
}
/* 3e colonne : « Infos utiles » devient un intitulé, centré comme les autres */
.footer_section .location_text.text-left { text-align: center !important; }
.footer_section .location_text.text-left .location_icon {
    width: auto;
    border-radius: 0;
    background: none;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .3px;
}
.footer_section .location_text h4 {
    font-size: 16px;
    line-height: 1.4;
    padding: 0 0 6px;
}
.footer_section .location_text span {
    font-size: 14.5px;
    line-height: 1.7;
}
.footer_section .location_text a.text-white,
.footer_section .location_text a.text-light {
    color: #cbd5e1 !important;
    font-size: 14.5px;
    line-height: 1.8;
}
.footer_section .location_text a.text-light { display: inline-block; }
.footer_section .location_text a.text-white:hover,
.footer_section .location_text a.text-light:hover { color: var(--sag-sky) !important; }

.footer_section hr.bg-white {
    background-color: transparent !important;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    margin: 4px 0 16px;
}
.footer_section .menu-list { gap: 2px 4px; }
.footer_section .menu-list li a {
    font-size: 13px;
    letter-spacing: .8px;
    padding: 8px 12px;
    color: #cbd5e1 !important;
}
.footer_section .menu-list li a:hover { color: #fff !important; }
.footer_section .row.mb-4 { margin-bottom: 8px !important; }

.copyright_text { margin: 10px 0; font-size: 13.5px; }


/* --------------------------------------------------------------------------
   15. Tablette (< 992 px)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* responsive.css masque tout .form-group sous 992 px (reliquat du gabarit) :
       un futur formulaire Bootstrap disparaîtrait sur mobile */
    .form-group { display: block; }

    /* espace membre : menu replié en barre pleine largeur au-dessus du contenu */
    .contact_section .row > .col-lg-3.col-md-4,
    .contact_section .row > .col-lg-9.col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* « Autres actualités » : 2 cartes par ligne au lieu d'images pleine largeur */
    .row.g-4 > .col-lg-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* adhésion : colonne pleine largeur (sinon libellés tronqués dans les champs) */
    .contact_section .row.justify-content-center > .col-md-10 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* tablette / grand mobile : cartes d'actualités et de pages par deux
   (trois colonnes trop étroites, une seule trop grande) */
@media (min-width: 576px) and (max-width: 991.98px) {
    .blog-container,
    .product-container { justify-content: center; }
    .blog-container > .col-md-4,
    .product-container > .col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}


/* --------------------------------------------------------------------------
   16. Mobile (< 768 px puis < 576 px)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .blog_taital,
    .portfolio_taital,
    .services_taital,
    .contact_taital { font-size: 28px; }

    /* actualité : l'image restait au tiers de la largeur (col-4 non responsive) */
    .blog-container > .col-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .blog-container > [class*="col-md-"] > h3 { font-size: 23px; }
    .blog_section .blog-container > .row > .col-md-7 > .prep_text { font-size: 20px; }

    .container-fluid.wow .section-title h1 { font-size: 26px; }

    .contact_section .mail_section_1 > form { padding: 24px 18px 22px; }

    .contact_section .table-responsive > .table th,
    .contact_section .table-responsive > .table td {
        padding: 11px 12px;
        font-size: 13.5px;
    }

    /* accueil — congrès : grande vignette pleine largeur, les autres par deux */
    .services_section:not(.layout_padding) .row.text-center > .col-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .services_section:not(.layout_padding) .row.text-center > .col-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .services_section:not(.layout_padding) .row.text-center > .col-8 + .col-4 {
        flex: 0 0 100%;
        max-width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 30px;
    }
    .services_section:not(.layout_padding) .row.text-center .border { margin-bottom: 24px !important; }
    .services_section:not(.layout_padding) .row.text-center > .col-8 > .border { height: auto; }
    .services_section:not(.layout_padding) .row.text-center > .col-8 .image-overlay-container img {
        height: auto;
        aspect-ratio: 3 / 2;
    }

    /* pied de page : blocs empilés et aérés */
    .project_box { padding: 34px 0; }
    .footer_section { padding-top: 44px; }
    .footer_section .row.mb-4 > .col-sm-4 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 26px;
    }
    .footer_section .location_text.text-left .location_icon {
        height: auto;
        margin-bottom: 8px;
    }
}

/* menu du pied de page : footer.php l'empile en liste verticale jusqu'à 768 px inclus ;
   on le garde en ligne, sur plusieurs rangées centrées */
@media (max-width: 768px) {
    .footer_section .menu-list {
        flex-direction: row;
        gap: 0 2px;
    }
    .footer_section .menu-list li {
        display: inline-block;
        width: auto;
    }
    .footer_section .menu-list li a {
        display: inline-block;
        padding: 7px 10px;
    }
}

@media (max-width: 575.98px) {
    .blog_taital,
    .portfolio_taital,
    .services_taital,
    .contact_taital { font-size: 26px; }
    .blog_text,
    .contact_section > .container > .row:first-child p { font-size: 15px; }

    /* accueil — pastilles rondes : deux par ligne */
    .services_section_2 .row.mt-5 > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .services_section_2 .box_main { max-width: 150px; }
    .services_section_2 .box_main .services_text { font-size: 15px; }
    .services_section.layout_padding.mt-5 .services_section_2 .col-lg-4 { margin-top: 28px; }

    /* cartes d'authentification plus compactes */
    .sag-auth-section { padding-top: 32px; }
    .sag-auth-card { padding: 30px 20px; }
    .sag-auth-title { font-size: 22px; }

    /* « Autres actualités » : une carte par ligne */
    .row.g-4 > .col-lg-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}