/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/

/* ===== SMOOTH SCROLL : désactivation du "scroll-behavior: smooth" natif =====
   Bootstrap (css/plugins.css) applique "scroll-behavior: smooth" sur :root.
   Ce comportement natif du navigateur entre en conflit avec le smooth scroll
   jQuery du thème (bouton #scrollTop, liens .scroll-to, animate({scrollTop})
   avec easing "easeInOutExpo" dans js/functions.js) : chaque changement de
   scrollTop déclenché par jQuery est réinterprété par le navigateur comme une
   nouvelle cible de scroll fluide, ce qui casse/rend saccadée l'animation.
   On revient donc à "auto" pour laisser jQuery gérer seul l'animation.
   Note : on utilise ":root" (et pas "html") + !important car le sélecteur
   ":root" de Bootstrap a une spécificité de pseudo-classe (0,1,0,0),
   supérieure à un simple sélecteur de type "html" (0,0,1,0) qui perdrait
   la bataille de spécificité même chargé après. */
:root {
    scroll-behavior: auto !important;
}

/* ===== CORRECTIF HEADER : le menu (#mainMenu nav, float:right) n'est pas
   contenu par son parent (float non "clearé"), le header du thème (INSPIRO)
   a donc toujours calculé une hauteur fixe de 80px (juste la ligne du logo),
   ce qui fait apparaître le menu de navigation sur une seconde ligne de 80px
   SANS fond, superposé au contenu de la page. Le problème est invisible sur
   les pages où l'arrière-plan sous le header est déjà sombre/coloré au bon
   endroit (image de fond, dégradé...), mais devient très visible dès qu'une
   section claire (carte blanche, etc.) se trouve à cet endroit une fois le
   header fixé au scroll ("sticky-active"). Correctif : on laisse le header
   grandir (hauteur automatique + clearfix) pour que son fond dégradé
   recouvre bien tout le menu, sur toutes les pages du site. */
#header .header-inner,
#header #header-wrap {
    height: auto;
    min-height: 80px;
}

#header .header-inner > .container::after,
#header #header-wrap > .container::after {
    content: "";
    display: table;
    clear: both;
}

.fond-vert {
    background-color: var(--color-teal);
}

.fond-bleu {
    background-color: var(--color-blue);
}

.fond-blanc {
    background-color: var(--color-white);
}

.fond-gris {
    background-color: var(--color-gray-light) !important;
}

.fond-gris-fonce {
    background-color: var(--color-gray-dark) !important;
}

.fond-etudes-1 {
    background-color: var(--color-gray-1) !important;
}

.fond-etudes-2 {
    background-color: var(--color-gray-2) !important;
}

.fond-degrade {
    background: var(--gradient-brand);
}

.logo-home {
    /*border: solid red 1px;*/
    height: 300px;
}

/* Le thème (style.css) met les balises <p> en blanc par défaut (pensé pour des
   sections sombres), ce qui rend illisible tout paragraphe qui n'est pas
   explicitement enveloppé dans .text-light / .texte-blanc. On rétablit ici la
   couleur de texte normale du site ; les sections sombres restent blanches
   grâce à leurs règles plus spécifiques (.text-light p, .texte-blanc, etc.). */
p {
    color: #3c4043;
}

.texte-blanc {
    color: var(--color-white) !important;
}

.texte-vert {
    color: var(--color-teal);
}

.texte-gris {
    color: var(--color-text-gray) !important;
}

.texte-base {
    font-size: 1rem;
}

.texte-bleu {
    color: var(--color-blue);
}

.carre-blanc {
    background-color: var(--color-white);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    height: width;
}

.carrieres-bloc {
    border: 2px solid var(--color-teal-border);
    background-color: var(--color-white);
}

.btn-bleu {
    background-color: var(--color-blue);
    padding: 10px 20px 10px 20px;
    border-radius: 20px;
    display: inline-block;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn-bleu:hover,
.btn-bleu:focus-visible {
    background-color: var(--color-blue-dark);
    box-shadow: 0 6px 14px rgba(0, 108, 166, 0.35);
    transform: translateY(-2px);
    color: var(--color-white);
}

/* theme.css applique un background-image en degrade (teal -> bleu) a tous les .btn,
   qui se peint par-dessus le background-color blanc de .btn-white. On force donc
   l'absence d'image de fond pour que .btn-white / .btn-white.btn-outline restent blancs. */
.btn.btn-white,
.btn.btn-white.btn-outline {
    background-image: none !important;
}

.btn-width {
    width: 100%;
}

/* Mention discrète des partenaires/financeurs (accueil, section Présentation).
   Remplace l'ancienne grosse section Financeurs (fond degradé + gros logos) :
   présentée ici comme un argument de rayonnement territorial plutôt qu'un
   "merci à nos financeurs", sous une forme compacte qui ne casse pas le
   rythme de lecture de la section. Logos en niveaux de gris, colorisés au
   survol du lien "Découvrir nos partenaires". */
.home-partners-note {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px 40px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.home-partners-text {
    flex: 1 1 260px;
    max-width: 320px;
}

.home-partners-text p {
    margin: 0 0 8px;
    font-size: 0.9rem;
    color: var(--color-gray-1);
}

.home-partners-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-blue);
}

.home-partners-link i {
    font-size: 0.65rem;
    transition: transform 0.2s ease;
}

.home-partners-link:hover i,
.home-partners-link:focus-visible i {
    transform: translateX(4px);
}

.home-partners-logos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 26px;
    flex: 2 1 420px;
}

.home-partners-logos img {
    height: 70px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.55;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

.home-partners-logos img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.ombre {
  box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.2);
}

.alignement-vertical {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.alignement-horizontal {
    display: flex;
    justify-content: center;
}

.font-size-1 {
    font-size: 1rem;
}

.font-size-11 {
    font-size: 1.1rem;
}

.font-size-2 {
    font-size: 2rem;
}

.font-size-big {
    font-size: 3rem;
}

.font-500 {
    font-weight: 500;
}

.font-regular {
    font-weight: 400;
}

.font-light {
    font-weight: 300;
}

.border-gris {
    border: 1px solid #bbb;
}

.etude-titre-statut {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.etude-container{
    background-color:white;
    padding:2rem;
    border-radius:1rem;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.etude-container:hover,
.etude-container:focus-visible{
    box-shadow: 0px 5px 15px rgba(122, 122, 122, 0.2);
    transform: scale(1.02);
}

.etude-title{
    font-size:1.5em;
    font-weight:500;

}

.etude-logo {
    width: 100%;
}

/*.etude-bando {
    display: flex;
    justify-content: space-between;
}*/

.etude-bando img {
    height: 40px;
}

.etude-bando-btn {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.etude-cadre {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.portrait {
    width: 100%;
    /*height: 100%;*/
}

.sous-menu {
    padding-left: 50px !important;
}

.sous-menu2 {
    padding-left: 70px !important;
}

.recherche-equipe {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

.recherche-equipe-item {
    padding: 30px 50px 0px 50px;
}

.etude-lien {
    color: #fff;
}

.etude-lien:hover {
    color: #363636 !important;
}

.logo-feder {
    width: 100px;
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: 1.5em;
    margin-bottom: 1.5em;
}

.actu-height {
    height: 280px;
}

.texte-italic {
    font-weight: 400;
    font-style: italic;
}

.texte-italic2 {
    font-weight: 300;
    font-style: italic;
}

.responsive-flex {
    display: flex;
    flex-direction: row;
}

.pres-height {
    height: 400px;
}

.flex-only {
    display: flex;
}

.thera {
    display: flex;
    justify-content: center;
}

iframe {
    display: block;
}

/* Footer layout + navigation */

/* Le thème utilise un gris foncé (#181818) pour #footer.inverted ; on le
   remplace par la teinte de marque bleu nuit très sombre. */
#footer.inverted {
    background-color: var(--color-navy-deep) !important;
}

#footer .footer-columns {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

/* Slightly wider footer (still centered, not full-width) */
@media (min-width: 1200px) {
    #footer .container.footer-columns,
    #footer .container.footer-bottom {
        max-width: 1280px !important;
    }

    #footer .footer-nav-grid {
        max-width: 1040px;
    }
}

#footer .footer-col {
    padding-top: 15px;
    padding-bottom: 15px;
}

#footer .footer-bottom {
    margin-top: 10px;
    padding-top: 10px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

#footer .footer-copyright {
    opacity: 0.9;
}

#footer .footer-col-left,
#footer .footer-col-middle {
    text-align: left;
}

#footer .footer-col-left img {
    max-width: 260px;
    width: 100%;
    height: auto;
}

#footer .footer-nav {
    margin-top: 5px;
    width: 100%;
}

#footer .footer-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 26px;
    justify-items: start;
    align-items: start;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

#footer .footer-nav-section {
    text-align: left;
}

#footer .footer-nav-section h5,
#footer .footer-social h5 {
    margin-bottom: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#footer .footer-nav-section ul {
    padding-left: 0;
    margin: 0;
    list-style: none;
}

#footer .footer-nav-section li {
    margin-bottom: 6px;
}

#footer .footer-nav-section a {
    color: inherit;
    text-decoration: none;
    opacity: 0.9;
}

#footer .footer-nav-section a:hover,
#footer .footer-nav-section a:focus {
    opacity: 1;
    text-decoration: underline;
}

#footer .footer-col-right {
    text-align: center;
}

#footer .footer-social .social-icons ul {
    display: flex;
    justify-content: center;
}

/* ===== BARRE DE RECHERCHE ETUDES ===== */

.etudes-page-bg {
    background-color: #f6f7f8;
}

/* Cette section suit directement .page-hero, dont la règle générique de
   chevauchement impose un fond blanc avec une spécificité plus élevée
   (élément + classe) : on la précise à l'identique pour la emporter ici. */
.page-hero + section.etudes-page-bg {
    background-color: #f6f7f8;
}

.etudes-search-wrapper {
    max-width: 900px;
    margin: 0 auto 30px auto;
    position: relative;
    z-index: 200;
}

.etudes-search-bar {
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 25px;
    padding: 10px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

.etudes-search-bar input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 1rem;
    font-family: inherit;
    color: #333;
}

.etudes-search-bar input::placeholder {
    color: #999;
}

.etudes-search-icon {
    color: #333;
    margin-left: 10px;
    flex-shrink: 0;
}

.etudes-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.etudes-result-count {
    font-size: 0.85rem;
    color: #888;
    white-space: nowrap;
    margin-right: 4px;
}

.etudes-sort-wrapper {
    margin-left: auto;
}

.etudes-sort-wrapper .etudes-filter-btn {
    background-color: transparent;
    box-shadow: none;
}

.etudes-sort-wrapper .etudes-filter-btn:hover {
    background-color: transparent;
}

.etudes-filter-dropdown {
    position: relative;
}

.etudes-filter-btn {
    background-color: white;
    border: none;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #555;
    transition: background-color 0.2s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.09);
}

.etudes-filter-btn:hover {
    background-color: #f5f5f5;
}

.etudes-filter-btn .etudes-filter-chevron {
    flex-shrink: 0;
    transition: transform 0.2s;
}

.etudes-filter-btn.active .etudes-filter-chevron {
    transform: rotate(180deg);
}

.etudes-filter-menu {
    display: none;
    position: fixed;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.13);
    padding: 8px 0;
    min-width: 200px;
    z-index: 99999;
}

.etudes-filter-menu.open {
    display: block;
}

.etudes-filter-menu label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #333;
    transition: background-color 0.15s;
    white-space: nowrap;
}

.etudes-filter-menu label:hover {
    background-color: #f5f5f5;
}

.etudes-filter-menu input[type="radio"] {
    accent-color: var(--color-blue-dark);
}

.etudes-no-result {
    display: none;
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 1.1rem;
}

.etudes-filter-btn.etudes-filter-active {
    background-color: var(--color-blue-dark);
    color: white;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 80, 143, 0.25);
}

.etudes-filter-btn.etudes-filter-active:hover {
    background-color: var(--color-blue-darker);
}

#footer .footer-legal {
    margin-top: 8px;
}

#footer .footer-legal a {
    color: inherit;
    text-decoration: none;
    opacity: 0.9;
}

#footer .footer-legal a:hover,
#footer .footer-legal a:focus {
    opacity: 1;
    text-decoration: underline;
}

/* Footer: simplify social icon hover (no background, no animation) */
#footer .footer-social .social-icons li a {
    background-color: transparent !important;
    transition: opacity 0.2s ease !important;
}

#footer .footer-social .social-icons li a:hover,
#footer .footer-social .social-icons li a:focus {
    background-color: transparent !important;
    opacity: 0.7;
}

#footer .footer-social .social-icons li:hover i {
    animation: none !important;
    -webkit-animation: none !important;
}

#footer .footer-social ul {
    margin: 0;
}

/* Badge ISO 9001 discret : rendu tout blanc (le logo source est en couleur)
   et peu opaque au repos, pour ne pas concurrencer le logo linkedin. */
#footer .footer-iso-badge {
    display: inline-block;
    margin: 14px 0;
}

#footer .footer-iso-badge img {
    display: block;
    height: 34px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.55;
    transition: opacity 0.2s ease;
}

#footer .footer-iso-badge:hover img,
#footer .footer-iso-badge:focus img {
    opacity: 0.9;
}

@media(max-width:992px) {
    #footer .footer-nav-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #footer .footer-col-right {
        text-align: left;
    }
}

@media(max-width:500px) {
    #footer .footer-nav-grid {
        grid-template-columns: 1fr;
    }
}




@media(max-width:500px) {
    .responsive-flex {
        display: flex;
        flex-direction: column-reverse;
    }

    .actu-height {
        height: auto;
    }

    .etude-reponsive {
        padding-right: 0px;
    }

    .etude-bando {
        display: flex;
        flex-direction: column;
    }

    .flickity-button {
        display: none;
    }

    .logo-home {
        height: 100px;
    }
}

@media(max-width:800px) and (min-width:501px) {
    .flickity-button {
        display: none;
    }

    .logo-home {
        height: 150px;
    }
}

/* ===== BLOCS COMPTEURS (accueil) ===== */

.counter-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 30px 20px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.counter-block .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.14);
    margin-bottom: 20px;
}

.counter-block .counter span {
    font-weight: 400;
}

/* ===== MICRO-INTERACTIONS : NAVIGATION ===== */

/* Le thème (style.css) met ces libellés en capitales et à 12px ; on repasse
   en casse normale (seule la 1ère lettre des libellés HTML est majuscule).
   La taille/graisse est fixée dans css/fonts.css (chargé après ce fichier). */
#mainMenu nav > ul > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-transform: none;
    /* Le thème met "transition: all .3s ease" sur ce lien : au retrait de
       .dark (voir plus bas), le poids de la police interpolait alors entre
       400 et 500 pendant .3s, ce qui produit un rendu instable (graisse
       intermédiaire inexistante dans la police). On restreint la transition
       aux propriétés qu'on veut réellement animer. */
    transition: color 0.3s ease;
}

#mainMenu nav > ul > li > a::after {
    content: "";
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 3px;
    height: 1.5px;
    border-radius: 2px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

#mainMenu nav > ul > li:hover > a::after,
#mainMenu nav > ul > li.hover-active > a::after,
#mainMenu nav > ul > li > a:focus-visible::after {
    transform: scaleX(1);
}

/* Petite flèche signalant les entrées à sous-menu (comme sur stacker.ai).
   Le thème stylise tous les "i" du menu (14px, marges) avec une spécificité
   de 1 id + 5 éléments : notre sélecteur ajoute une classe, il passe donc
   devant sans !important. */
#mainMenu nav > ul > li > a .nav-caret {
    display: inline-block;
    margin: 1px 0 0 6px;
    min-width: 0;
    font-size: 8px;
    opacity: 0.5;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

#mainMenu nav > ul > li:hover > a .nav-caret,
#mainMenu nav > ul > li.hover-active > a .nav-caret {
    transform: rotate(180deg);
    opacity: 1;
}

/* ===== NAVBAR : glassmorphism (remplace le dégradé teal->bleu) =====
   Mobile / tablette uniquement : le bandeau garde un fond glass pleine
   largeur. Sur desktop (>= 992px) le fond migre vers la "pilule" flottante
   définie plus bas.
   - Pages intérieures (header.php) : classe .header-glass-static.
   - Accueil (header-index.php) : transparente au-dessus du hero (classe
     .dark + submenu-light), puis glass dès que le JS du thème retire .dark
     au scroll (cf Settings.submenuLight dans js/functions.js). */
@media (max-width: 991.98px) {

    #header.header-glass-static .header-inner,
    #header.header-glass-static #header-wrap,
    #header.header-sticky.sticky-active .header-inner,
    #header.header-sticky.sticky-active #header-wrap,
    body.nav-floating #header .header-inner,
    body.nav-floating #header #header-wrap {
        background: rgba(255, 255, 255, 0.72) !important;
        background-image: none !important;
        -webkit-backdrop-filter: blur(16px) saturate(160%);
        backdrop-filter: blur(16px) saturate(160%);
        box-shadow: 0 8px 30px rgba(0, 30, 60, 0.1);
    }

    /* Le thème passe le logo en position absolue sur toute la largeur en
       mobile : le sélecteur de langue, flottant à gauche, se retrouvait
       superposé au logo. On le sort du flux et on le cale juste à gauche
       du bouton burger. */
    #header .header-extras {
        float: none;
        position: absolute;
        top: 0;
        right: 56px;
    }
}

/* ===== NAVBAR DESKTOP : "pilule" flottante en glassmorphism =====
   Inspiration stacker.ai : tout en haut de page la barre est large et sans
   fond (elle se fond dans le hero / la page) ; dès le premier pixel de
   scroll elle se contracte en un ovale translucide centré. Le basculement
   se fait via la classe .nav-floating posée sur <body> par js/custom.js
   (et non sur #header, que le thème réinitialise à coups de removeClass()
   quand on revient en haut de page — cf INSPIRO.header.stickyHeader).
   Le bandeau (.header-inner) devient un simple conteneur transparent : la
   hauteur totale reste 80px (62px de pilule + 2x9px de marge) pour ne pas
   décaler le contenu des pages. */
@media (min-width: 992px) {

    #header .header-inner,
    #header #header-wrap,
    #header.header-glass-static .header-inner,
    #header.header-glass-static #header-wrap,
    #header.header-sticky.sticky-active .header-inner,
    #header.header-sticky.sticky-active #header-wrap {
        height: auto;
        min-height: 0;
        padding: 9px 0;
        border: 0;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /* Le clearfix (flottants du thème) n'a plus lieu d'être : la barre passe
       en flexbox, ce qui neutralise les float des enfants. */
    #header .header-inner > .container::after,
    #header #header-wrap > .container::after {
        display: none;
    }

    #header[data-fullwidth="true"] .header-inner > .container,
    #header[data-fullwidth="true"] #header-wrap > .container {
        position: relative;
        display: flex;
        align-items: center;
        gap: 16px;
        height: 62px;
        line-height: 1;
        max-width: 1480px;
        padding: 0 30px;
        border: 0;
        border-radius: 999px;
        background-color: transparent;
        transition:
            max-width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
            padding 0.55s cubic-bezier(0.22, 1, 0.36, 1),
            background-color 0.4s ease,
            box-shadow 0.4s ease;
    }

    body.nav-floating #header[data-fullwidth="true"] .header-inner > .container,
    body.nav-floating #header[data-fullwidth="true"] #header-wrap > .container {
        max-width: 1180px;
        padding: 0 22px;
        background-color: rgba(255, 255, 255, 0.7);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        box-shadow: 0 14px 38px rgba(0, 40, 80, 0.14);
    }

    /* Remise à plat des flottants/hauteurs fixes du thème pour la flexbox. */
    #header .header-inner #logo {
        order: 1;
        float: none;
        height: auto;
        line-height: 1;
    }

    #header .header-inner #mainMenu {
        order: 2;
        float: none;
        margin-left: auto;
        margin-right: auto;
    }

    #header .header-inner #mainMenu > .container {
        width: auto;
        max-width: none;
        margin: 0;
        position: static;
    }

    #header .header-inner #mainMenu nav {
        float: none;
    }

    #header .header-inner #mainMenu nav > ul {
        display: flex;
        align-items: center;
    }

    #header .header-inner #mainMenu nav > ul > li {
        float: none;
        margin-left: 2px;
    }

    #header .header-inner .header-extras {
        order: 3;
        float: none;
        height: auto;
        margin-left: 4px;
    }
}

/* Le thème colore les liens du menu en blanc par défaut (#fff, quel que soit
   l'état dark/light) : on fonce le texte/logo dès que le header n'est plus
   "dark" (donc: toujours sur les pages intérieures, et après scroll sur
   l'accueil). Le sélecteur ".p-dropdown a > span" cible spécifiquement le
   texte "FR"/"EN" du sélecteur de langue : le thème le colore en blanc en
   dur (style.css), avec une spécificité plus forte que le simple lien "a",
   d'où le besoin d'un !important ici. */
#header:not(.dark) #mainMenu nav > ul > li > a,
#header:not(.dark) .header-extras a,
#header:not(.dark) .header-extras a > i,
#header:not(.dark) .header-extras .p-dropdown a > span,
#header:not(.dark) .p-dropdown-content a {
    color: #5b6068 !important;
    font-weight: 500;
}

#header:not(.dark) #mainMenu nav > ul > li.hover-active > a,
#header:not(.dark) #mainMenu nav > ul > li.current > a,
#header:not(.dark) #mainMenu nav > ul > li:hover > a,
#header:not(.dark) #mainMenu nav > ul > li:focus > a {
    color: var(--color-teal) !important;
}

#header:not(.dark) .lines,
#header:not(.dark) .lines:before,
#header:not(.dark) .lines:after {
    background-color: var(--color-blue-darker);
}

/* ===== NAVBAR : sélecteur de langue "FR"/"EN" en rond blanc =====
   Le thème positionne le texte ("span") en absolu (top:-8px, 9px) pour
   qu'il flotte en badge sur l'icône globe ; sans icône, le lien n'a donc
   plus de contenu dans le flux normal. On remet le texte dans le flux et on
   transforme le lien en petit rond BLANC PLEIN (toujours blanc, que le
   header soit transparent sur le hero ou clair au scroll), texte centré. */
.header-extras .p-dropdown {
    display: flex;
    align-items: center;
}

.header-extras .p-dropdown > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--color-white);
    box-shadow: 0 3px 12px rgba(0, 20, 40, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.header-extras .p-dropdown:hover > a {
    transform: scale(1.08);
    box-shadow: 0 5px 16px rgba(0, 20, 40, 0.26);
}

/* Le texte doit rester foncé sur le rond blanc dans tous les cas, y compris
   quand le header est en mode "dark" (texte du menu blanc par défaut). */
#header .header-extras .p-dropdown > a > span {
    position: static !important;
    color: var(--color-blue-darker) !important;
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: 0.5px;
    opacity: 1;
}

/* Volet Français/English : aligné au même niveau que les bulles de sous-menu
   (Présentation, Activités...) du menu principal. Le thème définit aussi
   "ul.p-dropdown-content" (avec le type d'élément, style.css) qui gagne sur
   notre simple ".p-dropdown-content" à spécificité égale : on préfixe par
   "#header" pour repasser devant sans ambiguïté. */
#header .header-extras .p-dropdown .p-dropdown-content {
    top: 100%;
    margin-top: 9px;
    border-radius: 15px;
}

/* ===== NAVBAR : logo réduit =====
   Le thème réserve toute la hauteur du bandeau (80px) à l'image du logo et
   sa règle "#header .header-inner #logo a > img" a une classe de plus que
   notre précédente tentative ("#header #logo a > img"), donc une
   spécificité plus forte : notre réduction de hauteur n'était en réalité
   jamais appliquée. D'où le besoin d'un !important ici. */
#header #logo a {
    display: flex;
    align-items: center;
    height: 100%;
}

#header #logo a > img {
    height: 34px !important;
    width: auto !important;
}

/* ===== NAVBAR : transition douce du fond/ombre au scroll =====
   Le thème définit sa propre transition sur "top" avec une spécificité plus
   forte que notre règle ("#header.header-sticky .header-inner" = 1 id + 2
   classes, contre 1 id + 1 classe ici) : la transition sur le fond/ombre de
   la pilule (voir plus bas) n'était donc jamais animée sans ce
   renforcement. La navbar reste toujours visible, quel que soit le sens du
   scroll (pas de masquage). */
#header .header-inner,
#header #header-wrap {
    transition: background 0.3s ease, box-shadow 0.3s ease !important;
}

/* ===== NAVBAR : volet de sous-menu en "bulle" =====
   Le volet est une bulle compacte qui épouse la largeur de son contenu (pas
   de zones blanches superflues), centrée sous son lien de menu — et non
   plus étirée sur toute la largeur de la pilule.
   Le DOM du thème enveloppe toujours les liens dans un <li
   class="dropdown-menu-inner"> à l'intérieur du <ul class="dropdown-menu">
   (cf include/header.php) : on exploite cette double couche pour séparer
   la zone de survol (le <ul>, invisible, qui comble le vide entre le lien
   et la bulle) de la bulle visible elle-même (le <li>, avec fond, ombre et
   coins arrondis). Sans cette astuce, le petit espace vertical entre le
   lien et le volet n'appartient à aucun des deux éléments et coupe le
   survol (:hover) dès que la souris le traverse — la bulle affichée par un
   simple hover devenait alors inatteignable. */
@media (min-width: 992px) {

    #mainMenu nav > ul > li .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: max-content;
        max-width: calc(100vw - 32px);
        min-width: 0;
        margin: 0;
        padding-top: 12px;
        border: 0 !important;
        border-radius: 0;
        background: transparent !important;
        background-image: none !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
        overflow: visible;
    }
}

/* Bulle visible : chaque sous-menu (Présentation, Activités...) enveloppe
   ses liens dans "<li class="dropdown-menu-inner">", qui porte donc le
   fond, l'ombre et les coins très arrondis de la bulle. */
.dropdown-menu-inner {
    display: flex;
    justify-content: center;
    padding: 10px;
    border-radius: 28px;
    background-color: var(--color-white);
    box-shadow: 0 20px 44px rgba(0, 40, 80, 0.16);
}

.dropdown-menu-inner > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dropdown-menu-inner > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 260px;
    padding: 12px 16px;
    line-height: normal;
    border-radius: 14px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    color: var(--color-blue-darker) !important;
    background: transparent !important;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.dropdown-menu-inner > ul > li > a i {
    color: var(--color-teal);
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.dropdown-menu-inner > ul > li > a:hover,
.dropdown-menu-inner > ul > li > a:focus {
    color: var(--color-teal) !important;
}

.dropdown-menu-inner > ul > li > a:hover i,
.dropdown-menu-inner > ul > li > a:focus i {
    transform: translateX(4px);
}

@media (min-width: 992px) {

    .dropdown-menu-inner > ul > li > a:hover,
    .dropdown-menu-inner > ul > li > a:focus {
        background-color: rgba(29, 156, 149, 0.07) !important;
    }
}

/* Variante 2 colonnes pour les sous-menus les plus fournis (Activités) :
   même largeur de lien que la version mono-colonne, simplement répartie
   sur 2 colonnes, toujours en bulle compacte centrée sous son lien. */
@media (min-width: 992px) {
    .menu-mega .dropdown-menu-inner > ul {
        width: 552px;
        columns: 2;
        column-gap: 32px;
    }

    .menu-mega .dropdown-menu-inner > ul > li {
        break-inside: avoid;
    }
}

/* ===== PAGE LE KIOSQUE : mise en page "une de journal" ===== */

/* Ours : ligne d'identité du journal en tête de page. */
.kiosque-masthead {
    display: flex;
    justify-content: center;
    border-top: 3px solid var(--color-blue-dark);
    border-bottom: 1px solid var(--color-gray-light);
    padding: 12px 0;
    margin-bottom: 26px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.kiosque-masthead-title {
    color: var(--color-blue-dark);
}

.kiosque-intro {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    color: var(--color-gray-1);
    line-height: 1.7;
}

/* Titre de rubrique : libellé court suivi d'un filet, comme les rubriques d'un journal. */
.kiosque-rubrique {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.kiosque-rubrique::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--color-gray-light);
}

.kiosque-rubrique-label {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-teal);
    white-space: nowrap;
}

.kiosque-une {
    margin-bottom: 60px;
}

.kiosque-vide {
    color: var(--color-gray-1);
}

/* Colonne des petites annonces : même langage graphique que les articles
   (carte blanche arrondie) mais contenu composé en annonces. Hauteur libre :
   comme dans un journal, les colonnes n'ont pas à finir à la même ligne. */
.kiosque-annonces {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    padding: 28px 28px 24px;
}

.kiosque-annonces-title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 400;
    color: var(--color-blue-dark);
}

.kiosque-annonces-intro {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--color-gray-1);
    margin-bottom: 20px;
}

.kiosque-annonces-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px dashed var(--color-gray-light);
}

.kiosque-annonces-item {
    border-bottom: 1px dashed var(--color-gray-light);
}

.kiosque-annonces-link {
    display: block;
    padding: 14px 0;
    text-decoration: none;
    color: inherit;
}

.kiosque-annonces-link:hover,
.kiosque-annonces-link:focus-visible {
    text-decoration: none;
    color: inherit;
}

.kiosque-annonces-poste {
    display: block;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-gray);
    transition: color 0.2s ease;
}

.kiosque-annonces-link:hover .kiosque-annonces-poste,
.kiosque-annonces-link:focus-visible .kiosque-annonces-poste {
    color: var(--color-blue);
}

.kiosque-annonces-meta {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--color-gray-2);
}

.kiosque-annonces-apply {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-blue);
}

.kiosque-annonces-apply i {
    transition: transform 0.2s ease;
}

.kiosque-annonces-link:hover .kiosque-annonces-apply i,
.kiosque-annonces-link:focus-visible .kiosque-annonces-apply i {
    transform: translateX(4px);
}

.kiosque-annonces-empty {
    margin: 0;
    padding: 14px 0;
    border-top: 1px dashed var(--color-gray-light);
    border-bottom: 1px dashed var(--color-gray-light);
    font-size: 14px;
    font-style: italic;
    color: var(--color-gray-2);
}

.kiosque-annonces-foot {
    margin-top: auto;
    padding-top: 20px;
}

.kiosque-annonces-foot p {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--color-gray-1);
    margin-bottom: 8px;
}

.kiosque-annonces-foot a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-blue);
}

.kiosque-annonces-foot a:hover,
.kiosque-annonces-foot a:focus-visible {
    color: var(--color-blue-dark);
}

@media (max-width: 991px) {
    .kiosque-une-main {
        margin-bottom: 45px;
    }
}

@media (max-width: 575px) {
    .kiosque-masthead {
        gap: 4px;
        font-size: 11px;
        letter-spacing: 0.08em;
    }
}

/* Étiquette distinguant une actualité d'un poste à pourvoir dans une même liste. */
.actu-kind-label {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.actu-kind-label-actu {
    color: var(--color-teal);
}

.actu-kind-label-poste {
    color: var(--color-blue);
}

/* Vignette de remplacement quand l'entrée (poste, le plus souvent) n'a pas d'image. */
.actu-media-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-brand);
}

.actu-media-fallback i {
    font-size: 42px;
    color: rgba(255, 255, 255, 0.85);
}

.actu-featured-media.actu-media-fallback i {
    font-size: 64px;
}

.actu-date-badge,
.actu-card-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.actu-date-badge i,
.actu-card-date i {
    font-size: 12px;
}

/* --- Article à la une --- */

.actu-featured {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    background-color: var(--color-white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.actu-featured:hover,
.actu-featured:focus-visible {
    color: inherit;
    text-decoration: none;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
    transform: translateY(-3px);
}

.actu-featured-media {
    position: relative;
    flex: 1 1 480px;
    min-height: 280px;
    overflow: hidden;
}

.actu-featured-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.actu-featured:hover .actu-featured-media img {
    transform: scale(1.05);
}

.actu-date-badge {
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 2;
    background-color: var(--color-teal);
    color: var(--color-white);
    padding: 6px 16px;
    border-radius: 50px;
}

.actu-featured-body {
    flex: 1 1 380px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
}

.actu-featured-body h2 {
    font-size: 28px;
    line-height: 1.3;
    font-weight: 400;
    color: var(--color-text-gray);
    margin-bottom: 16px;
}

.actu-featured-body p {
    color: var(--color-gray-1);
    line-height: 1.7;
    margin-bottom: 20px;
}

/* Variante de l'article à la une pour la colonne principale de la "une" :
   photo en bandeau au-dessus du texte plutôt qu'à côté. */
.actu-featured-stack {
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
}

.actu-featured-stack .actu-featured-media {
    flex: 0 0 auto;
    width: 100%;
    min-height: 340px;
}

.actu-featured-stack .actu-featured-body {
    flex: 1 1 auto;
    justify-content: flex-start;
    padding: 32px 36px 34px;
}

/* --- Grille de cartes --- */

.actu-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--color-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.actu-card:hover,
.actu-card:focus-visible {
    color: inherit;
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
    transform: translateY(-6px);
}

.actu-card-media {
    position: relative;
    padding-top: 62%;
    overflow: hidden;
}

.actu-card-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.actu-card:hover .actu-card-media img {
    transform: scale(1.08);
}

.actu-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 22px 24px 24px;
}

.actu-card-date {
    color: var(--color-teal);
    margin-bottom: 10px;
}

.actu-card-body h3 {
    font-size: 18px;
    line-height: 1.35;
    font-weight: 400;
    color: var(--color-text-gray);
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.actu-card-body p {
    font-size: 14.5px;
    color: var(--color-gray-1);
    line-height: 1.6;
    margin-bottom: 18px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.actu-card-link {
    margin-top: auto;
    color: var(--color-blue);
    font-weight: 600;
    font-size: 14px;
}

.actu-card-link i {
    display: inline-block;
    margin-left: 2px;
    transition: transform 0.2s ease;
}

.actu-card:hover .actu-card-link i,
.actu-featured:hover .actu-card-link i {
    transform: translateX(4px);
}

.actu-hidden {
    display: none;
}

@media (max-width: 991px) {
    .actu-featured-media {
        min-height: 220px;
        flex-basis: 100%;
    }

    .actu-featured-body {
        padding: 30px;
    }
}

/* ===== PAGE PRÉSENTATION : carte "coup d'œil", citation et objectifs ===== */

.presentation-card {
    background-color: var(--color-white);
    border-radius: 16px;
    padding: 40px 36px;
    height: 100%;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.presentation-card h4 {
    margin-bottom: 26px;
    color: var(--color-blue-dark);
}

.presentation-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.presentation-card-list li {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.presentation-card-list li + li {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.presentation-card-list i {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border-radius: 50%;
    background-color: var(--color-teal);
    color: var(--color-white);
}

.presentation-card-list strong {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
    color: var(--color-blue-dark);
}

.presentation-card-list span {
    display: block;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--color-text-gray);
}

.presentation-quote {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-image: url("../images/pages/nancyclotep-page-pres.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.presentation-quote-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 61, 110, 0.55), rgba(0, 61, 110, 0.8));
}

.presentation-quote-content {
    position: relative;
    max-width: 760px;
    padding: 40px 24px;
    text-align: center;
}

.presentation-quote-content p {
    color: var(--color-white);
    font-size: 30px;
    line-height: 1.55;
    font-weight: 600;
    font-style: italic;
    margin: 0;
}

/* Variante sans photo : simple bandeau blanc, utilisée quand une autre
   section de la même page porte déjà une image en fond (ex. frise "Notre
   histoire"), pour éviter d'empiler deux visuels photo à la suite. */
.presentation-quote-plain {
    min-height: 0;
    padding: 90px 0;
    background-image: none;
    background-color: var(--color-white);
}

.presentation-quote-plain .presentation-quote-content p {
    color: var(--color-blue-dark);
}

.objectif-card {
    background-color: var(--color-white);
    border-radius: 14px;
    padding: 36px 28px;
    height: 100%;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.objectif-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    color: var(--color-white);
    font-size: 22px;
}

.objectif-card.objectif-teal .objectif-icon {
    background-color: var(--color-teal);
}

.objectif-card.objectif-bleu .objectif-icon {
    background-color: var(--color-blue);
}

.objectif-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-gray);
    margin-bottom: 12px;
}

.objectif-card p {
    font-size: 14.5px;
    color: var(--color-gray-1);
    line-height: 1.65;
    margin: 0;
}

/* Page "Nos partenaires" (financeurs.php) : une carte par partenaire,
   uniquement le logo (sans nom ni texte), le logo se suffisant à lui-même. */
.partner-container-narrow {
    max-width: 900px;
}

.partner-card {
    display: block;
    background-color: var(--color-white);
    border-radius: 14px;
    padding: 34px 28px;
    height: 100%;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.partner-card:hover,
.partner-card:focus-visible {
    box-shadow: 0 14px 30px rgba(0, 30, 60, 0.1);
    transform: translateY(-4px);
}

.partner-card-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
}

.partner-card-logo img {
    max-height: 100%;
    max-width: 160px;
    object-fit: contain;
}

/* ===== Section "Notre histoire" : photo en fond sur tout le bloc =====
   L'image et son dégradé couvrent l'ensemble de la section (titre inclus),
   pas seulement la frise, pour un effet plus immersif. Le dégradé reprend la
   couleur de fond par défaut des sections (#ECECEC) pour que la vignette se
   fonde dans la page plutôt que de trancher dessus. */
.history-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("../images/pages/nancyclotep-page-pres.jpg");
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    will-change: background-position;
}

.history-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(236, 236, 236, 0.85) 20%, rgba(236, 236, 236, 0.85) 80%, rgba(236, 236, 236, 1) 100%);
}

.history-content {
    position: relative;
    z-index: 1;
}

/* ===== Frise "Dates clés" : chronologie déroulante horizontale =====
   Fonctionne nativement sans JS : défilement horizontal standard
   (molette, trackpad, tactile, clavier). Le JS ajoute seulement les
   flèches de raccourci et les désactive en début/fin de parcours. */

.dates-timeline {
    position: relative;
    margin-top: 45px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.dates-track {
    position: relative;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    padding: 55px clamp(20px, 6vw, 100px) 35px;
}

.dates-track::-webkit-scrollbar {
    height: 6px;
}

.dates-track::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

.dates-cards {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 44px;
    list-style: none;
    margin: 0;
    padding: 0 16px;
}

.dates-cards::before {
    content: '';
    position: absolute;
    top: 32px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-brand);
    opacity: 0.25;
}

.dates-card {
    position: relative;
    flex: 0 0 260px;
    scroll-snap-align: start;
    padding: 28px 26px;
    background-color: var(--color-white);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.dates-card-dot {
    display: block;
    width: 12px;
    height: 12px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--gradient-brand);
}

.dates-card-year {
    display: block;
    margin-bottom: 12px;
    font-size: 32px;
    font-weight: 800;
    color: var(--color-blue-dark);
    line-height: 1;
}

.dates-card-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-text-gray);
}

.dates-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background-color: var(--color-white);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    color: var(--color-blue-dark);
    font-size: 18px;
    cursor: pointer;
    transform: translateY(-50%);
    transition: box-shadow 0.2s ease, opacity 0.2s ease;
}

.dates-arrow:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}

.dates-arrow[disabled] {
    opacity: 0.35;
    cursor: default;
    box-shadow: none;
}

.dates-arrow-prev {
    left: clamp(10px, 3vw, 50px);
}

.dates-arrow-next {
    right: clamp(10px, 3vw, 50px);
}

@media (max-width: 767px) {
    .dates-arrow {
        display: none;
    }

    .dates-card {
        flex-basis: 230px;
    }
}

.image-break {
    min-height: 380px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Separation Presentation -> Activites (accueil) : la section part d'un gris
   plat (meme teinte que .bg-light) qui se fond progressivement dans une
   photo en niveaux de gris, plutot qu'un trait ou un aplat de couleur. La
   photo est isolee dans ::before pour que le grayscale ne s'applique qu'au
   fond, pas au texte/aux cartes au-dessus. */
#activites {
    position: relative;
    isolation: isolate;
}

#activites::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url('../images/pages/radiopharma.jpg') center 30% / cover no-repeat;
    filter: grayscale(1);
}

#activites::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, var(--color-gray-light) 0%, var(--color-gray-light) 5%, rgba(236, 236, 236, 0.75) 45%, rgba(236, 236, 236, 0.9) 65%);
}

/* ===== Page "Activités" : grille bento vers chaque activité ===== */

.activities-grid {
    display: flex;
    align-items: stretch;
    gap: 24px;
    margin-top: 10px;
}

.activities-secondary {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 24px;
}

.activity-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-radius: 18px;
    min-height: 260px;
    text-decoration: none;
}

/* Carte secondaire étirée sur les deux lignes de la grille 2x2. */
.activity-card-tall {
    grid-row: span 2;
}

.activity-card-featured {
    flex: 0 0 42%;
}

.activity-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.activity-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 20, 40, 0.05) 0%, rgba(0, 20, 40, 0.35) 55%, rgba(0, 20, 40, 0.88) 100%);
    transition: background-color 0.3s ease;
}

.activity-card-icon {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    color: var(--color-white);
    font-size: 17px;
}

.activity-card-content {
    position: relative;
    z-index: 1;
    padding: 26px;
    width: 100%;
}

.activity-card-title {
    display: block;
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 400;
    color: var(--color-white);
}

.activity-card-featured .activity-card-title {
    font-size: 26px;
}

.activity-card-text {
    margin: 0 0 14px;
    max-width: 420px;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}

.activity-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-white);
}

.activity-card-link i {
    transition: transform 0.25s ease;
}

.activity-card:hover .activity-card-bg {
    transform: scale(1.06);
}

.activity-card:hover .activity-card-overlay {
    background: linear-gradient(180deg, rgba(0, 20, 40, 0.15) 0%, rgba(0, 20, 40, 0.45) 55%, rgba(0, 20, 40, 0.92) 100%);
}

.activity-card:hover .activity-card-link i {
    transform: translateX(4px);
}

@media (max-width: 991px) {
    .activities-grid {
        flex-direction: column;
    }

    .activity-card-featured {
        flex-basis: auto;
        min-height: 320px;
    }

    .activities-secondary {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .activity-card-tall {
        grid-row: auto;
    }
}

@media (max-width: 575px) {
    .activity-card {
        min-height: 220px;
    }

    .activity-card-featured {
        min-height: 260px;
    }
}

.cta-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

/* Bandeau CTA de fin de page (ex : presentation.php) : dégradé de marque
   animé (même principe que le site Posifit) à la place de l'ancien aplat
   ".fond-bleu" uni. */
@keyframes cta-banner-glow {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
}

.cta-banner {
    position: relative;
    overflow: hidden;
    padding: 80px 20px;
    background-image:
        radial-gradient(circle at 18% 20%, rgba(29, 156, 149, 0.55), transparent 55%),
        radial-gradient(circle at 85% 85%, rgba(0, 80, 143, 0.5), transparent 50%),
        linear-gradient(135deg, var(--color-teal) 0%, var(--color-blue) 50%, var(--color-blue-darker) 100%);
    background-size: 200% 200%;
    animation: cta-banner-glow 14s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .cta-banner {
        animation: none;
    }
}

.cta-banner .container {
    position: relative;
    z-index: 1;
}

.cta-banner-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 24px;
    color: var(--color-white);
}

.quote-break {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-image: url("../images/pages/nancyclotep-page-nct_01.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.quote-break-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 61, 110, 0.55), rgba(0, 61, 110, 0.8));
}

.quote-break-content {
    position: relative;
    max-width: 760px;
    padding: 40px 24px;
    text-align: center;
}

.quote-break-content p {
    color: var(--color-white);
    font-size: 30px;
    line-height: 1.55;
    font-weight: 600;
    font-style: italic;
    margin: 0;
}

/* ===== Timeline des activit\u00e9s (page R\u00e9sultats) ===== */

.activites-timeline {
    margin-top: 40px;
}

.activites-timeline:before {
    border-left: 3px dashed var(--color-gray-light);
}

.activites-timeline .timeline-item {
    margin-top: 0;
    margin-bottom: 2.4rem;
}

.activites-timeline .timeline-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 16px;
    font-weight: 400;
}

.activites-timeline .timeline-item:nth-child(odd) .timeline-icon {
    background-color: var(--color-teal);
}

.activites-timeline .timeline-item:nth-child(even) .timeline-icon {
    background-color: var(--color-blue);
}

.activites-timeline .timeline-item p {
    font-size: 17px;
    font-weight: 500;
    color: var(--color-text-gray);
    margin: 0;
    padding-top: 4px;
}

/* ===== Bilan croissance : chiffres + check-list ===== */

.growth-figures {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.growth-figure {
    border-left: 4px solid var(--color-teal);
    padding-left: 24px;
}

.growth-figure:nth-child(even) {
    border-left-color: var(--color-blue);
}

.growth-figure-number {
    display: block;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-blue-dark);
}

.growth-figure-label {
    display: block;
    font-size: 14.5px;
    color: var(--color-gray-1);
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.check-list {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 15.5px;
    color: var(--color-text-gray);
}

.check-list li:first-child {
    padding-top: 0;
}

.check-list li:last-child {
    border-bottom: none;
}

.check-list i {
    color: var(--color-teal);
    font-size: 20px;
    margin-top: 2px;
    flex: 0 0 auto;
}

@media (max-width: 991px) {
    .presentation-card {
        margin-top: 30px;
    }

    .growth-figures {
        margin-bottom: 20px;
    }
}

/* ===== Page "Présentation" : portail vers les 3 sous-pages ===== */

.presentation-hub-lead {
    max-width: 760px;
    margin: 0 auto;
    color: var(--color-text-gray);
}

.presentation-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.presentation-hub-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border-radius: 14px;
    padding: 36px 28px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.04);
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.presentation-hub-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0, 30, 60, 0.1);
}

.presentation-hub-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin-bottom: 22px;
    background-color: var(--color-teal);
    color: var(--color-white);
    font-size: 22px;
}

.presentation-hub-card-alt .presentation-hub-icon {
    background-color: var(--color-blue);
}

.presentation-hub-title {
    font-size: 20px;
    font-weight: 400;
    color: var(--color-blue-dark);
    margin-bottom: 10px;
}

.presentation-hub-text {
    flex: 1 1 auto;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--color-text-gray);
    margin-bottom: 20px;
}

.presentation-hub-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-teal);
}

.presentation-hub-link i {
    transition: transform 0.25s ease;
}

.presentation-hub-card:hover .presentation-hub-link i {
    transform: translateX(4px);
}

@media (max-width: 991px) {
    .presentation-hub-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin: 0 auto;
    }
}

/* ===== Pages Activités (Radiochimie, Radiopharmacie, Recherche préclinique/clinique,
   Traitement d'images, Théranostique) : mise en page texte + média, listes et
   mise en avant des chiffres-clés ===== */

.activity-row {
    align-items: stretch;
}

.activity-row > [class*="col-"] {
    margin-bottom: 30px;
}

.list-icon.list-icon-caret li:before {
    color: var(--color-teal);
}

.list-icon.list-icon-caret li {
    margin-bottom: 12px;
    line-height: 1.65;
}

.stat-highlight {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: rgba(29, 156, 149, 0.07);
    border-left: 4px solid var(--color-teal);
    border-radius: 8px;
    padding: 22px 28px;
    margin: 35px 0 10px;
}

.stat-highlight i {
    font-size: 28px;
    color: var(--color-teal);
    flex-shrink: 0;
}

.stat-highlight p {
    margin: 0 !important;
    font-size: 17px;
    font-weight: 600;
    color: var(--color-blue-dark);
}

.thera {
    display: flex;
    justify-content: center;
    background-color: #f7f8fa;
    padding: 50px 20px;
}

/* ===== Apparition douce des éléments au scroll (fade + léger déplacement vers le haut).
   Remplace l'ancien système Waypoint/animate.css (buggé : cf mémoire de projet
   "scroll-reveal-flash-fix" - un `transform` de keyframe s'appliquait instantanément et
   faisait "sauter" l'élément déjà visible). Le nouveau système (js/custom.js) se base sur
   IntersectionObserver + une simple transition CSS entre 2 états, sans keyframe.
   Sécurité no-JS : la classe .js-reveal n'est posée sur <html> que par un script inline
   dans <head> (include/head.php) ; sans JS, la règle ci-dessous ne s'applique jamais et
   le contenu reste visible. ===== */

html.js-reveal .reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

html.js-reveal .reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ===== ACCESSIBILITÉ : réduction des animations ===== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== Hero de page (remplace le trio PARALLAX + bandeau ".fond-bleu" plat +
   fil d'Ariane séparé) : un seul bloc plein cadre, image + dégradé de marque,
   grand titre et amorce de scroll, dans l'esprit des sites primés (Awwwards)
   plutôt que l'ancienne bande de couleur unie posée sous l'image. ===== */

/* Le "#header" (élément englobant, position:relative) réserve toujours
   80px de hauteur dans le flux normal pour la barre — même quand son
   contenu visuel (.header-inner) passe en position:fixed via
   .header-always-fixed. Le thème compense ça lui-même pour ses propres
   composants (#slider, .fullscreen...) via "top:-80px; margin-bottom:-80px"
   dès que data-transparent="true", mais ne connaît pas notre ".page-hero"
   (ni le <main> qui l'enveloppe sur recherche-clinique.php) : sans ce
   correctif, une bande blanche vide apparaissait au-dessus du hero sur
   toutes les pages intérieures. On applique donc la même recette nous-même. */
#header[data-transparent="true"] + .page-hero,
#header[data-transparent="true"] + main {
    position: relative;
    top: -80px;
    margin-bottom: -80px;
}

.page-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    /* +30px : compense le chevauchement de la section suivante ("margin-top:
       -30px" ci-dessous) pour que la limite visible du hero reste au même
       endroit qu'un hero sans chevauchement — seul le padding-bottom (donc
       la zone sous le titre, jamais le titre lui-même) est "mangé". */
    min-height: calc(60vh + 30px);
    padding: 170px 0 110px;
    overflow: hidden;
}

.page-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(2, 3, 22, 0.2) 0%, rgba(2, 3, 22, 0.38) 45%, rgba(0, 20, 40, 0.9) 100%),
        linear-gradient(110deg, rgba(0, 61, 110, 0.55) 0%, rgba(29, 156, 149, 0.22) 100%);
}

.page-hero .container {
    position: relative;
    z-index: 1;
}

.page-hero-breadcrumb {
    margin-bottom: 20px;
}

.page-hero-breadcrumb .breadcrumb {
    margin: 0;
    padding: 0;
    background: transparent;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.page-hero-breadcrumb .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.68) !important;
}

.page-hero-breadcrumb .breadcrumb-item + li:before {
    color: rgba(255, 255, 255, 0.5) !important;
}

.page-hero-breadcrumb .breadcrumb-item.active,
.page-hero-breadcrumb .breadcrumb-item:last-child {
    color: var(--color-white) !important;
}

.page-hero-title {
    color: var(--color-white) !important;
    font-weight: 300;
    font-size: clamp(2.3rem, 5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.5px;
    margin: 0;
}

.page-hero-title::before {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-bottom: 22px;
    border-radius: 2px;
    background: var(--gradient-brand);
}

/* Effet d'empilement : la section qui suit le hero remonte légèrement dessus
   avec un angle arrondi, comme une feuille posée par-dessus (cf. mobile). */
.page-hero + section {
    position: relative;
    z-index: 2;
    margin-top: -30px;
    background-color: var(--color-white);
    border-radius: 30px 30px 0 0;
}

/* Sur la plupart des pages, ".page-hero" est un sibling DIRECT de
   "#header[data-transparent]" et hérite donc de sa "margin-bottom:-80px"
   (cf. règle plus haut). Cette marge négative fusionne (collapsing CSS) avec
   notre "margin-top:-30px" ci-dessus, et le collapsing retient la plus
   négative des deux (-80), ce qui annule complètement notre chevauchement.
   Sur presentation.php, le hero est enveloppé par un <main> qui porte lui-
   même la compensation -80 (donc le hero n'a pas cette marge), et l'effet
   s'affiche normalement — d'où l'incohérence observée entre les pages.
   Ici on vise -110px (= -80 déjà "consommés" par le collapsing + -30 pour
   qu'il en reste réellement visible) uniquement quand ce cas précis se
   présente, sans toucher au cas presentation.php. */
#header[data-transparent="true"] + .page-hero + section {
    margin-top: -110px;
}

/* Amorce de scroll en forme de souris (contour + molette qui glisse), plus
   explicite que le simple trait qui l'a précédée. */
.page-hero-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 50px;
    z-index: 1;
    display: block;
    width: 26px;
    height: 42px;
    margin-left: -13px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 13px;
}

.page-hero-scroll-cue::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 4px;
    height: 8px;
    margin-left: -2px;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.9);
    animation: page-hero-scroll-cue 1.8s ease-in-out infinite;
}

@keyframes page-hero-scroll-cue {
    0% { transform: translateY(0); opacity: 1; }
    70% { transform: translateY(12px); opacity: 0; }
    100% { transform: translateY(0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .page-hero-scroll-cue::before {
        animation: none;
    }
}

@media (max-width: 767px) {
    .page-hero {
        min-height: calc(46vh + 18px);
        padding: 130px 0 80px;
    }

    .page-hero-scroll-cue {
        display: none;
    }

    .page-hero + section {
        margin-top: -18px;
        border-radius: 18px 18px 0 0;
    }

    #header[data-transparent="true"] + .page-hero + section {
        margin-top: -98px;
    }
}

/* ===== Page "Contact" ===== */

.contact-hero {
    position: relative;
}

.contact-hero-breadcrumb {
    margin-bottom: 18px;
}

.contact-hero-breadcrumb .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.75) !important;
}

.contact-hero-breadcrumb .breadcrumb-item.active,
.contact-hero-breadcrumb .breadcrumb-item:last-child {
    color: var(--color-white) !important;
}

.contact-hero-title {
    font-weight: 300;
    margin-bottom: 14px;
}

.contact-hero-lead {
    max-width: 640px;
    opacity: 0.92;
    margin-bottom: 0;
}

.contact-info-card {
    height: 100%;
    background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-blue) 100%);
    border-radius: 20px;
    padding: 40px 34px;
    box-shadow: 0 20px 40px rgba(0, 61, 110, 0.18);
}

.contact-info-list {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.contact-info-item:last-child {
    margin-bottom: 0;
}

.contact-info-item strong {
    display: block;
    color: var(--color-white);
    font-size: 15px;
    margin-bottom: 4px;
}

.contact-info-item div span {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14.5px;
    line-height: 1.6;
}

.contact-info-item div span a {
    color: var(--color-white);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.4);
}

.contact-info-item div span a:hover {
    text-decoration-color: var(--color-white);
}

.contact-info-icon {
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.18);
    color: var(--color-white);
    font-size: 19px;
    line-height: 1;
}

.contact-info-social {
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.contact-info-social-label {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 600;
}

.contact-form-card {
    height: 100%;
    background-color: var(--color-white);
    border-radius: 20px;
    padding: 40px 34px;
    box-shadow: 0 10px 30px rgba(0, 61, 110, 0.1);
}

.contact-form-card h4 {
    font-weight: 500;
    color: var(--color-blue-dark);
    margin-bottom: 8px;
}

.contact-form-subtitle {
    color: var(--color-gray-1);
    font-size: 14px;
    margin-bottom: 26px !important;
}

.contact-form-card .form-control {
    padding-left: 30px;
    border-radius: 10px;
    border-color: #d7dae0;
    background-color: #f7f8fa;
}

.contact-form-card .form-floating > label {
    padding-left: 30px;
    color: var(--color-gray-1);
}

.contact-form-card .form-control:focus {
    border-color: var(--color-teal);
    background-color: var(--color-white);
    box-shadow: 0 0 0 0.2rem rgba(29, 156, 149, 0.15);
}

.contact-form-card .required-asterisk {
    color: #e63946;
}

.contact-form-card .btn {
    margin-top: 6px;
}

.contact-map-card {
    background-color: var(--color-white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 61, 110, 0.1);
}

.contact-map-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 22px 30px;
    border-bottom: 1px solid #ebedf0;
}

.contact-map-card-address {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-blue-dark);
    font-weight: 600;
    font-size: 15px;
}

.contact-map-card-address i {
    flex: 0 0 auto;
    color: var(--color-teal);
    font-size: 22px;
}

.contact-map-card-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.contact-map-wrap {
    line-height: 0;
}

.contact-map-wrap iframe {
    width: 100%;
    height: 420px;
    border: 0;
    display: block;
}

@media (max-width: 991px) {
    .contact-info-card {
        margin-bottom: 0;
    }

    .contact-form-card {
        margin-top: 30px;
    }

    .contact-map-card-header {
        justify-content: center;
        text-align: center;
    }
}

/* ===== PAGE ACCUEIL : refonte narrative (kickers de section, tuiles d'info,
   aperçu équipe, indicateur de scroll du hero) ===== */

/* Petit repère "chapitre" au-dessus de chaque titre de section, pour que la
   home se lise comme une histoire en plusieurs étapes plutôt qu'un empilement
   de blocs sans lien. */
.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-teal);
    margin-bottom: 12px;
}

.section-kicker.kicker-light {
    color: var(--color-white);
}

/* Hero d'accueil : logo + dégradé de marque animé (remplace l'ancien slider
   à 3 diapositives) + effet de particules (molécule) posé par-dessus. */
.home-hero {
    position: relative;
    overflow: hidden;
    background-image:
        radial-gradient(circle at 18% 20%, rgba(29, 156, 149, 0.55), transparent 55%),
        radial-gradient(circle at 85% 85%, rgba(0, 80, 143, 0.5), transparent 50%),
        linear-gradient(135deg, var(--color-teal) 0%, var(--color-blue) 50%, var(--color-blue-darker) 100%);
    background-size: 200% 200%;
    animation: home-hero-gradient-glow 16s ease-in-out infinite;
}

@keyframes home-hero-gradient-glow {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero {
        animation: none;
    }
}

/* Aperçu équipe (page d'accueil) : "nuage" de portraits de tailles variées,
   façon nuage de mots mais avec les visages de l'équipe. */
.home-team-cloud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.home-team-face {
    position: relative;
    flex: 0 0 auto;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-team-face img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-team-face.size-sm {
    width: 76px;
    height: 76px;
}

.home-team-face.size-md {
    width: 104px;
    height: 104px;
}

.home-team-face.size-lg {
    width: 136px;
    height: 136px;
}

.home-team-face:nth-child(3n+2) {
    margin-top: 30px;
}

.home-team-face:nth-child(3n) {
    margin-top: -14px;
}

.home-team-face:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
    z-index: 2;
}

/* Tuiles de bas de page (à la manière des sites du secteur type Curium) :
   pour les destinations qui ne s'inscrivent pas dans le fil narratif de la
   home (actualités, carrières, contact), on les regroupe en 3 blocs
   cliquables edge-to-edge en bas de page plutôt que de les ignorer. */
.home-info-tiles {
    display: flex;
    flex-wrap: wrap;
}

.home-info-tile {
    position: relative;
    flex: 1 1 33.333%;
    min-height: 340px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    color: var(--color-white);
    text-decoration: none;
}

.home-info-tile-media {
    position: absolute;
    inset: 0;
}

.home-info-tile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.home-info-tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 15, 30, 0.15) 0%, rgba(0, 15, 30, 0.85) 100%);
}

.home-info-tile-body {
    position: relative;
    z-index: 1;
    padding: 40px;
    width: 100%;
}

.home-info-tile-kicker {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-white);
    opacity: 0.85;
    margin-bottom: 8px;
}

.home-info-tile-body h3 {
    color: var(--color-white);
    font-size: 1.3rem;
    margin-bottom: 12px;
}

.home-info-tile-link {
    font-weight: 600;
    font-size: 0.9rem;
}

.home-info-tile-link i {
    display: inline-block;
    transition: transform 0.2s ease;
}

.home-info-tile:hover .home-info-tile-media img {
    transform: scale(1.06);
}

.home-info-tile:hover .home-info-tile-link i {
    transform: translateX(4px);
}

.home-info-tile-plain {
    background: var(--gradient-brand);
}

/* Tuile CTA "Une question ? Contactez-nous" : même gabarit kicker/titre/lien
   que les 2 autres tuiles (cohérence de la rangée) plutôt que le bloc de
   texte centré statique d'origine, rendue dynamique par une icône
   décorative en filigrane + un gros bouton rond qui pulse en continu. */
.home-info-cta-icon {
    position: absolute;
    top: -30px;
    right: -10px;
    font-size: 9rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.14);
    pointer-events: none;
    transform: rotate(-12deg);
    transition: transform 0.4s ease;
}

.home-info-tile-cta:hover .home-info-cta-icon {
    transform: rotate(-4deg) scale(1.08);
}

/* Titre grossi pour occuper l'espace laissé vide par la suppression du
   lien "Écrivez-nous" (redondant avec "Contactez-nous") ; flèche accolée
   directement au texte plutôt que sur une ligne de lien séparée. */
.home-info-tile-cta .home-info-cta-heading {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1.15;
    margin: 0;
}

.home-info-cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-navy-deep);
    font-size: 1.1rem;
    animation: home-info-cta-pulse 2.4s ease-out infinite;
    transition: transform 0.2s ease;
}

.home-info-tile-cta:hover .home-info-cta-arrow {
    transform: translateX(6px);
    animation-play-state: paused;
}

@keyframes home-info-cta-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

@media (max-width: 991px) {
    .home-info-tile {
        flex: 1 1 100%;
    }

    .home-info-cta-icon {
        font-size: 7rem;
    }

    .home-info-tile-cta .home-info-cta-heading {
        font-size: 1.9rem;
    }
}

/* Bandeau de chiffres clés intégré à la section Présentation : ces chiffres
   étaient auparavant répétés à l'identique dans une section "Résultats"
   dédiée, qui ne faisait que redire ce que montre déjà la page
   Activités et Résultats. Ici ils illustrent directement le propos de la
   présentation. Fond gris + carte blanche pour faire ressortir les chiffres. */
.home-stats-band {
    margin-top: 50px;
    padding: 36px;
    background-color: var(--color-gray-light);
    border-radius: 20px;
}

.home-stats-card {
    background-color: var(--color-white);
    border-radius: 16px;
    padding: 36px 30px 24px;
    box-shadow: 0 12px 30px rgba(0, 30, 60, 0.08);
}

.home-stat {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}

.home-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: rgba(0, 108, 166, 0.08);
    color: var(--color-blue);
    font-size: 1.15rem;
    flex: 0 0 auto;
}

.home-stat-number {
    font-size: 1.7rem;
    font-weight: 400;
    color: var(--color-blue);
    line-height: 1.1;
}

.home-stat-label {
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: var(--color-gray-1);
}

/* Section "Études cliniques" (accueil), inspirée des listes d'actualités
   sobres type Telix Pharma : uniquement des grands titres cliquables, sans
   photo, pour ne pas répéter le pattern photo/texte des autres sections. */
.home-studies-list {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.home-study-item {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 26px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    text-decoration: none;
    transition: padding-left 0.2s ease;
}

.home-study-item:hover {
    padding-left: 10px;
}

/* Le fond degrade en forme de pilule ressemblait a un bouton cliquable ;
   on garde uniquement un texte colore et gras, plus simple et plus honnete. */
.home-study-phase {
    flex: 0 0 auto;
    min-width: 90px;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--color-teal);
    text-align: left;
}

.home-study-title {
    flex: 1 1 auto;
    color: var(--color-blue-darker);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-study-link {
    flex: 0 0 auto;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-teal);
    white-space: nowrap;
}

.home-study-link i {
    display: inline-block;
    transition: transform 0.2s ease;
}

.home-study-item:hover .home-study-link i {
    transform: translateX(4px);
}

@media (max-width: 767px) {
    .home-study-item {
        flex-wrap: wrap;
        gap: 10px;
    }

    .home-study-title {
        flex: 1 1 100%;
        order: 2;
    }

    .home-study-link {
        order: 3;
    }
}

/* ===== HARMONISATION TYPOGRAPHIQUE (alignée sur la page "À propos") =====
   Le thème Inspiro pose des titres très gras (600 à 800) et un letter-spacing
   positif ; la refonte de presentation.php a introduit un registre beaucoup
   plus léger (graisse 300, interlettrage resserré). On reporte ce registre sur
   les grands titres du site, sans toucher aux éléments d'interface (menu,
   boutons, badges, kickers) ni aux petits titres de cartes, qui gardent leur
   graisse propre définie plus haut avec une spécificité supérieure. */

h1,
h2,
h3,
.h1,
.h2,
.h3 {
    font-weight: 300;
    letter-spacing: -0.015em;
}

h4,
h5,
.h4,
.h5 {
    font-weight: 500;
    letter-spacing: -0.005em;
}

.heading-text h1,
.heading-text h2,
.heading-text h3,
.heading-text h4 {
    font-weight: 300;
    letter-spacing: -0.015em;
}

/* Les titres de slider du thème restent très grands : une graisse 300 y suffit
   largement pour rester lisible sur photo. */
.inspiro-slider .slide .slide-captions h1,
.inspiro-slider .slide .slide-captions h2 {
    font-weight: 300;
    letter-spacing: -0.02em;
}