/* ==========================================================================
   Psy.Link — Coquille commune (tokens, en-tête, pied de page)
   --------------------------------------------------------------------------
   Ce fichier est partagé par DEUX layouts :
     - layout « site »    (accueil, motifs…)  → chargé via @import depuis site.css
     - layout « vitrine » (annuaire, profils) → chargé directement, PAR-DESSUS
       Bootstrap/Metronic.
   Conséquence : tout ce qui suit doit être auto-suffisant et cadré sur
   .entete / .menu-mobile / .pied, pour ne jamais déborder sur Bootstrap
   (surtout la classe .btn, qui reste celle de Bootstrap sur la vitrine).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Couleurs de marque */
    --vert: #31a99f;
    /* couleur principale Psy.Link */
    --vert-fonce: #1e7f77;
    /* variante foncée : contraste AA du texte blanc sur aplat (5:1) */
    --vert-clair: #e6f5f3;
    --teal: #0B5768;
    /* teal profond (titres, aplats) */
    --teal-2: #258C8C;
    --ambre: #FFAE1E;
    --ambre-fonce: #3a2a00;
    --menthe: #E2F0F1;

    /* Neutres */
    --encre: #12333a;
    --gris: #5c6f72;
    --gris-clair: #8a9b9d;
    --doux: #F5FAFA;
    --ligne: #E3ECEC;
    --blanc: #fff;

    /* Formes */
    --rayon: 18px;
    --rayon-sm: 12px;
    --rayon-pill: 999px;
    --ombre-sm: 0 2px 8px -2px rgba(11, 87, 104, .12);
    --ombre: 0 18px 44px -24px rgba(11, 87, 104, .38);
    --ombre-lg: 0 34px 70px -30px rgba(11, 87, 104, .42);

    /* Typo */
    --ff: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* Titres : même famille que le texte, en graisse contenue et interlettrage
       resserré (plus net que Nunito, qui était trop rond et trop gras). */
    --ff-titre: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Hauteur de l'en-tête : sert de repère aux pages qui doivent occuper le
       reste de la fenêtre (ex. la carte de l'annuaire). */
    --entete-h: 76px;
    /* Hauteur totale de l'en-tête une fois flottant (12 + 64 + 12) */
    --entete-h-defile: 88px;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* --------------------------------------------------------------------------
   2. Réinitialisations cadrées sur la coquille
   -------------------------------------------------------------------------- */
/* Sur le layout « site » ces règles font doublon avec la base de site.css ;
   sur la vitrine elles neutralisent la reboot Bootstrap (liens bleus, puces
   de listes, marges de titres) sans toucher au reste de la page. */
.entete,
.menu-mobile,
.voile-menu,
.pied {
    box-sizing: border-box;
    font-family: var(--ff);
}

.entete *,
.menu-mobile *,
.pied * {
    box-sizing: border-box;
}

.entete a,
.menu-mobile a,
.pied a {
    color: inherit;
    text-decoration: none;
}

.entete ul,
.menu-mobile ul,
.pied ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.entete img,
.menu-mobile img,
.pied img {
    max-width: 100%;
    display: block;
}

.entete p,
.menu-mobile p,
.pied p {
    margin: 0 0 1em;
}

.entete button,
.menu-mobile button {
    font-family: inherit;
}

.pied h2,
.pied h3 {
    font-family: var(--ff-titre);
    margin: 0 0 14px;
}

.visuellement-cache {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--teal);
    color: #fff;
    padding: 12px 18px;
    border-radius: 0 0 10px 0;
}

.skip-link:focus {
    left: 0;
}

.conteneur {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 22px;
}

.conteneur-large {
    max-width: 1360px;
}

/* --------------------------------------------------------------------------
   3. Boutons de la coquille
   -------------------------------------------------------------------------- */
/* Volontairement cadrés : sur la vitrine, .btn appartient à Bootstrap et ne
   doit surtout pas être redéfini globalement. */
.entete .btn,
.menu-mobile .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    padding: 15px 26px;
    border-radius: var(--rayon-pill);
    border: 2px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
    white-space: nowrap;
}

.entete .btn-principal,
.menu-mobile .btn-principal {
    background: var(--vert-fonce);
    color: #fff;
    box-shadow: 0 12px 26px -12px rgba(30, 127, 119, .9);
}

.entete .btn-principal:hover,
.menu-mobile .btn-principal:hover {
    background: #17685f;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 32px -12px rgba(30, 127, 119, .95);
}

.entete .btn-fantome,
.menu-mobile .btn-fantome {
    background: transparent;
    color: var(--teal);
    border-color: var(--ligne);
}

.entete .btn-fantome:hover,
.menu-mobile .btn-fantome:hover {
    border-color: var(--teal);
    background: var(--menthe);
    color: var(--teal);
}

.entete .btn-sm,
.menu-mobile .btn-sm {
    padding: 11px 20px;
    font-size: 14px;
}

.entete .btn-bloc,
.menu-mobile .btn-bloc {
    width: 100%;
}

/* --------------------------------------------------------------------------
   4. En-tête (navbar)
   -------------------------------------------------------------------------- */
/* L'en-tête est une simple enveloppe : c'est .entete-interieur qui porte
   l'habillage, pour pouvoir passer en « pill » flottante au défilement. */
.entete {
    position: sticky;
    top: 0;
    z-index: 60;
    padding: 0;
    transition: padding .35s cubic-bezier(.22, .61, .36, 1);
}

/* Logo à gauche, liens parfaitement centrés (les deux blocs latéraux
   partagent la même largeur souple), actions à droite. */
.entete-interieur {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    height: var(--entete-h);
    /* Plus large que le conteneur de contenu : laisse respirer les liens centrés */
    max-width: 1320px;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-radius: 0;
    box-shadow: 0 0 0 0 rgba(11, 87, 104, 0);
    transition:
        max-width .35s cubic-bezier(.22, .61, .36, 1),
        height .35s cubic-bezier(.22, .61, .36, 1),
        border-radius .35s cubic-bezier(.22, .61, .36, 1),
        background-color .3s ease,
        box-shadow .35s ease,
        padding .35s cubic-bezier(.22, .61, .36, 1);
}

/* Au défilement : barre détachée du haut, arrondie et centrée */
.entete.est-defile {
    padding: 12px 0;
}

.entete.est-defile .entete-interieur {
    max-width: min(1280px, calc(100% - 24px));
    height: 64px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 18px 44px -26px rgba(11, 87, 104, .85), 0 0 0 1px rgba(227, 236, 236, .9);
}

/* La barre est plus étroite une fois flottante : on resserre les liens */
.entete.est-defile .entete-liens a {
    padding: 8px 10px;
}

.entete-logo {
    flex: 1 1 0;
    min-width: 0;
}

.entete-logo img {
    height: 40px;
    width: auto;
}

/* Version blanche du logo : affichée uniquement sur en-tête transparent */
.entete-logo .logo-clair {
    display: none;
}

/* Positionnement absolu : les liens restent au centre exact de la page,
   quelle que soit la largeur du logo et du bloc d'actions. */
.entete-liens {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
}

.entete-liens a {
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--encre);
    white-space: nowrap;
    transition: background-color .16s ease, color .16s ease;
}

.entete-liens a:hover,
.entete-liens a.est-actif {
    background: var(--vert-clair);
    color: var(--teal);
}

/* --------------------------------------------------------------------------
   Méga-menu (rubrique Blog)
   Le panneau est rendu sur toutes les pages, replié : ses liens irriguent les
   archives de catégorie. Le masquer par `display` plutôt que par l'opacité
   évite qu'il n'intercepte les clics quand il est fermé.
   -------------------------------------------------------------------------- */
.entete-lien-mega {
    position: relative;
    display: flex;
    align-items: center;
}

.entete-lien-mega>a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.entete-lien-chevron {
    transition: transform .18s ease;
}

.entete-lien-mega.est-ouvert .entete-lien-chevron {
    transform: rotate(180deg);
}

.entete-lien-mega.est-ouvert>a {
    background: var(--vert-clair);
    color: var(--teal);
}

/* Ancré sur la fenêtre et non sur le lien : « Blog » n'est pas au centre de la
   barre, et un panneau large centré sur lui débordait d'un côté, ce qui faisait
   passer les colonnes à la ligne. `position: fixed` fonctionne ici parce que
   l'en-tête est lui-même collé en haut. */
.mega-menu {
    position: fixed;
    top: calc(var(--entete-h) + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: min(1140px, calc(100vw - 40px));
    z-index: 60;
}

/* L'en-tête grandit une fois défilé : le panneau suit. */
.entete.est-defile .mega-menu {
    top: calc(var(--entete-h-defile) + 2px);
}

.mega-menu[hidden] {
    display: none;
}

/* Passerelle invisible entre le lien et le panneau, pour que le curseur reste
   en terrain connu pendant la descente. Sa hauteur s'arrête juste sous les
   liens de la barre — les recouvrir empêcherait de les cliquer. Le reste de
   l'écart est couvert par la fermeture différée, côté script. */
.mega-menu::before {
    content: "";
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    height: 24px;
}

.mega-menu-corps {
    background: #fff;
    border: 1px solid var(--ligne);
    border-radius: 18px;
    box-shadow: 0 34px 70px -30px rgba(11, 87, 104, .42);
    padding: 28px 32px 22px;
    /* Sur un écran peu haut, le panneau défile plutôt que de sortir du cadre. */
    max-height: calc(100vh - var(--entete-h) - 40px);
    overflow-y: auto;
}

/* Cinq colonnes de largeur égale, une par famille. Des colonnes fixes plutôt
   qu'un auto-fit : ce dernier réajustait leur nombre selon la place et
   renvoyait les dernières à la ligne. */
.mega-menu-colonnes {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    gap: 10px 26px;
}

/* Les liens du panneau vivent dans .entete-liens, dont la règle générique est
   très affirmée. On la surclasse par la spécificité (deux classes contre une)
   plutôt qu'avec !important, pour rester surchargeable ensuite. */
.entete-liens .mega-menu-famille {
    display: block;
    padding: 0 0 9px;
    margin-bottom: 9px;
    border-bottom: 1px solid var(--ligne);
    border-radius: 0;
    font-family: var(--ff-titre);
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--teal);
    background: transparent;
    white-space: normal;
}

.entete-liens .mega-menu-famille:hover {
    background: transparent;
    color: var(--vert-fonce);
}

.mega-menu-liens {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.entete-liens .mega-menu-liens a {
    display: block;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--gris);
    background: transparent;
    white-space: normal;
}

.entete-liens .mega-menu-liens a:hover {
    background: var(--doux);
    color: var(--teal);
}

.mega-menu-pied {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--ligne);
}

.entete-liens .mega-menu-pied .lien-fleche {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    background: transparent;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--vert-fonce);
}

/* Sur un en-tête transparent, la barre passe ses liens en blanc pour rester
   lisible sur l'image de fond. Le panneau, lui, est posé sur du blanc : sans
   ces règles, tout son contenu y devient invisible. */
body.entete-transparente .entete:not(.est-defile) .entete-liens .mega-menu a {
    color: var(--gris);
}

body.entete-transparente .entete:not(.est-defile) .entete-liens .mega-menu-famille {
    color: var(--teal);
}

body.entete-transparente .entete:not(.est-defile) .entete-liens .mega-menu a:hover {
    background: var(--doux);
    color: var(--teal);
}

body.entete-transparente .entete:not(.est-defile) .entete-liens .mega-menu-pied .lien-fleche {
    background: transparent;
    color: var(--vert-fonce);
}

/* Entre 1025 et 1200 px, cinq colonnes deviennent trop étroites : on passe à
   trois, les familles restantes se plaçant sur une seconde rangée. */
@media (max-width: 1200px) {
    .mega-menu-colonnes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px 22px;
    }

    .mega-menu-corps {
        padding: 24px 24px 18px;
    }
}

/* Sous la barre de navigation horizontale, le méga-menu n'a plus de point
   d'ancrage : le lien « Blog » du tiroir mobile suffit. */
@media (max-width: 1024px) {

    .mega-menu,
    .entete-lien-chevron {
        display: none;
    }
}

.entete-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 0;
    gap: 10px;
}

/* En-tête posé sur une page à fond coloré (layout « vitrine ») --------------
   Au repos, la barre blanche prend toute la largeur : sinon les bords du
   conteneur (1320px) dessinent une coupure nette sur le fond vert très clair
   de la page. Au défilement, on retrouve la pastille flottante. */
body.entete-pleine-largeur .entete:not(.est-defile) {
    background: #fff;
    border-bottom: 1px solid var(--ligne);
}

body.entete-pleine-largeur .entete:not(.est-defile) .entete-interieur {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* En-tête transparent au-dessus d'un héros sombre ------------------------
   Activé par la classe body « entete-transparente » posée par la page.
   Dès que l'on défile (.est-defile), l'en-tête reprend son habillage blanc. */
body.entete-transparente .entete:not(.est-defile) .entete-interieur {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.entete-transparente .entete:not(.est-defile) .logo-sombre {
    display: none;
}

body.entete-transparente .entete:not(.est-defile) .logo-clair {
    display: block;
}

body.entete-transparente .entete:not(.est-defile) .entete-liens a {
    color: rgba(255, 255, 255, .9);
}

body.entete-transparente .entete:not(.est-defile) .entete-liens a:hover,
body.entete-transparente .entete:not(.est-defile) .entete-liens a.est-actif {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

body.entete-transparente .entete:not(.est-defile) .compte-bouton {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}

body.entete-transparente .entete:not(.est-defile) .compte-bouton:hover,
body.entete-transparente .entete:not(.est-defile) .compte:hover .compte-bouton {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .55);
}

body.entete-transparente .entete:not(.est-defile) .btn-principal {
    background: #fff;
    color: var(--teal);
    box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .7);
}

body.entete-transparente .entete:not(.est-defile) .btn-principal:hover {
    background: var(--menthe);
    color: var(--teal);
}

body.entete-transparente .entete:not(.est-defile) .entete-burger {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .3);
}

body.entete-transparente .entete:not(.est-defile) .entete-burger span {
    background: #fff;
}

/* Menu compte (icône utilisateur) --------------------------------------- */
.compte {
    position: relative;
}

.compte-bouton {
    width: 42px;
    height: 42px;
    border: 1px solid var(--ligne);
    background: #fff;
    border-radius: 50%;
    color: var(--teal);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: border-color .16s ease, background-color .16s ease;
}

.compte-bouton svg {
    width: 21px;
    height: 21px;
}

.compte-bouton:hover,
.compte:focus-within .compte-bouton,
.compte.est-ouvert .compte-bouton {
    border-color: var(--vert);
    background: var(--vert-clair);
}

/* Pont invisible entre le bouton et le menu : le survol ne se coupe pas */
.compte::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
}

.compte-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 190px;
    background: #fff;
    border: 1px solid var(--ligne);
    border-radius: 14px;
    box-shadow: var(--ombre);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.compte:hover .compte-menu,
.compte:focus-within .compte-menu,
.compte.est-ouvert .compte-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.compte-menu a {
    display: block;
    padding: 10px 13px;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--encre);
    white-space: nowrap;
}

.compte-menu a:hover {
    background: var(--vert-clair);
    color: var(--teal);
}

.entete-burger {
    display: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ligne);
    background: #fff;
    border-radius: 12px;
    padding: 0;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.entete-burger span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--teal);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}

body.menu-ouvert .entete-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

body.menu-ouvert .entete-burger span:nth-child(2) {
    opacity: 0;
}

body.menu-ouvert .entete-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Drawer mobile */
.voile-menu {
    position: fixed;
    inset: 0;
    background: rgba(18, 51, 58, .45);
    opacity: 0;
    transition: opacity .28s ease;
    z-index: 70;
}

body.menu-ouvert .voile-menu {
    opacity: 1;
}

.menu-mobile {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(88vw, 330px);
    background: #fff;
    z-index: 80;
    transform: translateX(100%);
    transition: transform .28s ease;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow-y: auto;
}

body.menu-ouvert .menu-mobile {
    transform: none;
}

.menu-mobile-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.menu-mobile-entete img {
    height: 36px;
    width: auto;
}

.menu-mobile-fermer {
    width: 40px;
    height: 40px;
    border: 1px solid var(--ligne);
    background: #fff;
    border-radius: 12px;
    font-size: 24px;
    line-height: 1;
    color: var(--teal);
    cursor: pointer;
}

.menu-mobile-liens {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--ligne);
}

.menu-mobile-liens a {
    padding: 13px 12px;
    border-radius: 12px;
    font-weight: 600;
    color: var(--encre);
}

.menu-mobile-liens a:hover {
    background: var(--vert-clair);
}

.menu-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

/* --------------------------------------------------------------------------
   5. Pied de page
   -------------------------------------------------------------------------- */
/* Reprise à l'identique de l'ancien pied de page du catalogue :
   fond #003838 + motif « serpent », coins hauts arrondis, et le dégradé sombre
   « bg-degrade-fonce » derrière chaque lien pour rester lisible sur le motif.
   Les tailles sont en pixels (et non en rem) : la racine vaut 13px sous
   Metronic et 16px sur le layout « site » — en rem, le pied de page ne serait
   pas au même format d'une page à l'autre. Les valeurs ci-dessous sont celles
   que Metronic produisait (racine 13px). */
.pied {
    background-color: #003838;
    background-image: url("../media/assets/bg-serp-ordi.png");
    background-size: cover;
    color: #F9F9F9;
    padding: 80px 0;
    margin-top: 52px;
    border-top-left-radius: 52px;
    border-top-right-radius: 52px;
    font-size: 13px;
    line-height: 1.5;
}

/* Équivalent du « row justify-content-between » d'origine :
   col-lg-4 / col-xl-3 / col-xl-3, l'espace restant réparti entre les colonnes. */
.pied-haut {
    display: grid;
    grid-template-columns: 33.33% 25% 25%;
    justify-content: space-between;
    margin-bottom: 32px;
}

.pied-logo {
    width: 150px;
    height: auto;
}

.pied-marque p {
    margin: 16px 0 13px;
}

.pied-reseaux {
    display: flex;
    margin-bottom: 16px;
}

.pied-reseaux a {
    color: #F9F9F9;
    line-height: 1;
    margin-right: 13px;
}

/* Metronic impose « font-size: 1rem » à tout <i> : sans cette règle, les
   icônes de marque retomberaient à 13px au lieu de la taille « fs-2 ». */
.pied-reseaux i {
    font-size: 21px;
    line-height: 1;
    color: inherit;
}

.pied-avis {
    width: 200px;
    height: auto;
}

/* Intitulé de colonne : équivalent du « .h4 text-light mb-4 » d'origine */
.pied-titre {
    color: #F9F9F9;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 13px;
}

.pied-colonne li {
    margin-bottom: 10px;
}

/* Le dégradé sombre d'origine (« bg-degrade-fonce ») : il sert de fond de
   lecture aux liens posés sur le motif du fond. */
.pied-colonne a,
.pied-nuage a,
.pied-mention {
    background: linear-gradient(90deg, #003838, #0038384a);
    color: #F9F9F9;
}

.pied-colonne a {
    font-size: 14px;
}

.pied-colonne a:hover,
.pied-nuage a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Équivalent du « badge badge-primary » d'origine */
.pied-etiquette {
    display: inline-block;
    background: var(--vert);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 7px;
}

.pied-mention {
    margin: 13px 0 0;
}

/* Recherches fréquentes ------------------------------------------------- */
.pied-recherches {
    margin-bottom: 32px;
}

.pied-titre .fa-solid {
    margin-right: 7px;
}

.pied-nuage {
    display: flex;
    flex-wrap: wrap;
}

.pied-nuage a {
    margin: 0 10px 10px 0;
}

/* Bandeau d'urgence ------------------------------------------------------ */
.pied-urgence {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--rayon-sm);
    padding: 16px 20px;
    line-height: 1.6;
    margin-bottom: 32px;
}

.pied-urgence strong {
    color: #fff;
    display: block;
    margin-bottom: 2px;
}

.pied-urgence a {
    color: var(--ambre);
    font-weight: 700;
}

.pied-urgence a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Équivalent du « <hr> » puis du copyright centré */
.pied-bas {
    text-align: center;
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, .25);
}

/* --------------------------------------------------------------------------
   6. Responsive de la coquille
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
    .entete-liens a {
        padding: 8px 9px;
        font-size: 14px;
    }

    /* Place limitée : ce lien reste dans le menu mobile et le pied de page */
    .entete-liens .lien-secondaire {
        display: none;
    }

    .entete-actions .btn-sm {
        padding: 11px 18px;
    }
}

@media (max-width: 1000px) {

    .entete-liens,
    .entete-actions {
        display: none;
    }

    .entete-burger {
        display: flex;
    }

    .pied-haut {
        grid-template-columns: 1fr 1fr;
        justify-content: initial;
        gap: 30px;
    }

    .pied-marque {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .pied {
        padding: 54px 0;
        margin-top: 32px;
        border-top-left-radius: 26px;
        border-top-right-radius: 26px;
    }
}

@media (max-width: 520px) {
    .pied-haut {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    * {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}