:root {

    /* Hauteur de la barre de navigation (fixe). Sert au panneau du méga-menu :
       une seule source, sinon les deux valeurs dérivent. */
    --nav-height: 70px;

    /* ---------------------------------------------------------------------
       Échelle typographique fluide
       ---------------------------------------------------------------------
       Les titres de sections étaient figés en pixels et aucun palier ne les
       réduisait : le titre de l'en-tête restait à 42px sur un écran de 375px,
       où il occupait quatre lignes.

       Chaque valeur interpole linéairement entre 360px de large (le plus petit
       terminal courant) et 1320px (le max-width du .container). La borne haute
       reprend exactement la taille d'origine : le rendu sur grand écran est
       inchangé, on ne fait qu'ajouter le bas de l'échelle.

       Les bornes sont en rem et non en pixels pour que la taille de police
       choisie par l'utilisateur dans son navigateur continue de s'appliquer.
       ------------------------------------------------------------------- */
    --fs-hero:  clamp(1.75rem,   1.458vw + 1.422rem, 2.625rem);  /* 28 -> 42 */
    --fs-2xl:   clamp(1.625rem,  1.042vw + 1.391rem, 2.25rem);   /* 26 -> 36 */
    --fs-lead:  clamp(1.0625rem, 0.521vw + 0.945rem, 1.375rem);  /* 17 -> 22 */
    --fs-xl:    clamp(1.5rem,    1.042vw + 1.266rem, 2.125rem);  /* 24 -> 34 */
    --fs-lg:    clamp(1.4375rem, 0.938vw + 1.227rem, 2rem);      /* 23 -> 32 */
    --fs-md:    clamp(1.3125rem, 0.729vw + 1.148rem, 1.75rem);   /* 21 -> 28 */
    --fs-sm:    clamp(1.25rem,   0.625vw + 1.109rem, 1.625rem);  /* 20 -> 26 */

    /* Légendes manuscrites (Indie Flower), toutes à 24px auparavant. */
    --fs-hand:  clamp(1.1875rem, 0.521vw + 1.070rem, 1.5rem);    /* 19 -> 24 */

    /* Textes courants : chapeaux et paragraphes de section (18px), questions et
       réponses de la FAQ (20px). Mêmes bornes de calcul que les titres. */
    --fs-text:    clamp(1rem,      0.208vw + 0.953rem, 1.125rem); /* 16 -> 18 */
    --fs-text-lg: clamp(1.0625rem, 0.313vw + 0.992rem, 1.25rem);  /* 17 -> 20 */

    /* Corps éditorial (templates/content, templates/layouts) : paragraphe
       d'introduction et petits textes de tableaux ou de sommaire. Les autres
       tailles du contenu retombent sur les échelons ci-dessus — 34px sur
       --fs-xl, 28 sur --fs-md, 22 sur --fs-lead, 20 sur --fs-text-lg, 18 sur
       --fs-text. */
    --fs-intro:   clamp(1.125rem,  0.625vw + 0.984rem, 1.5rem);   /* 18 -> 24 */
    --fs-text-sm: clamp(0.875rem,  0.208vw + 0.828rem, 1rem);     /* 14 -> 16 */

    /* Sur-titre vert des sections (capitales espacées, 13px). Il était figé
       alors que le titre qu'il surmonte est devenu fluide : son rapport au
       titre passait de 13/34 sur grand écran à 13/24 sur mobile, où il paraît
       donc nettement plus gros. Conserver ce rapport exact demanderait environ
       10px, en dessous du lisible pour des capitales espacées ; 11px est le
       plancher retenu. */
    --fs-eyebrow: clamp(0.6875rem, 0.208vw + 0.641rem, 0.8125rem); /* 11 -> 13 */

    /* Couleurs */
    --color-white: #fff;
    --color-black: #000;
    --color-grey: #F9F9F9;

    --color-text: #252E38;
    --color-bold: #6A2E35;
    --color-nav: #569690;
    --color-nav-dark: #6A2E35;
    --color-text--header: #FDFDFD;
    --color-border: #707070;
    --color-border-grey: #D5E3EC;


    --color-primary: #6A2E35;
}

/******************/
/** Styles Reset **/
/******************/

.cmplz-btn.cmplz-manage-consent {
    display: none;
}

/* Masque un texte a l'oeil tout en le laissant dans l'arbre d'accessibilite.
 *
 * Cette classe etait en `display:none`, ce qui retire au contraire l'element de
 * cet arbre : les lecteurs d'ecran ne l'annoncaient pas. Les libelles de champs
 * qui s'en servent n'avaient donc aucun effet. Motif de rognage standard, deja
 * utilise correctement par .error__sr-only sur la page 404. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-to-content {
    position: fixed;
    top: -100%;
    left: 16px;
    z-index: 9999;
    background: var(--color-nav);
    color: var(--color-white);
    padding: 12px 20px;
    border-radius: 0 0 8px 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: top .2s;
}

.skip-to-content:focus {
    top: 0;
    outline: 2px solid var(--color-nav);
    outline-offset: 2px;
}

* {
    position: relative;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    color: var(--color-text);
    font-weight: 500;
    text-decoration: underline;
}
a:hover {
    color: var(--color-nav-dark);
    font-weight: 500;
    text-decoration: underline;
    transition: linear .15s;
}
strong {
    color: var(--color-text);
    font-weight: 550;
}


ul, ol {
    list-style: none;
    padding-left: 0;
}

button {
    background: none;
    box-shadow: none;
    border: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 25px
}
@media all and (max-width: 1024px){
    .container {
        padding:0 16px;
    }
}

html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    line-height: 1.6;
    font-weight: 400;
    scroll-behavior: smooth;
}

/* Garde-fou contre le débordement horizontal du document.
 *
 * Les intégrations tierces collées dans les blocs « HTML personnalisé » —
 * moteurs de recherche de billets, widgets d'activités — arrivent avec leur
 * propre feuille de style, souvent sans media query et en `!important`. Un seul
 * élément trop large suffit à décaler toute la page latéralement, sur tous les
 * contenus qui portent l'intégration.
 *
 * `clip` plutôt que `hidden` : `hidden` ferait du document un conteneur de
 * défilement, ce qui neutraliserait `position: sticky` — la barre de
 * progression de lecture et le panneau du méga-menu en dépendent. `clip` arrête
 * le débordement sans créer ce conteneur. La ligne en `hidden` reste en repli
 * pour les navigateurs qui ignorent `clip`.
 *
 * Contrepartie assumée : un widget plus large que l'écran se retrouve rogné
 * plutôt que d'être atteignable en faisant défiler la page de côté. C'est le
 * moindre mal — le décalage latéral gêne la lecture de tout le contenu, le
 * rognage ne gêne que le widget. */
html {
    overflow-x: hidden;
    overflow-x: clip;
}

/* Intégrations tierces (bloc « HTML personnalisé »).
 *
 * core/html rend son contenu brut, sans élément englobant : ce conteneur est
 * ajouté au rendu (voir NativeBlocksRegistrar::wrapCustomHtml) pour offrir une
 * prise unique sur des markups qu'on ne maîtrise pas.
 *
 * Pas d'`overflow` ici : ces widgets ouvrent calendriers et listes de
 * suggestions en position absolue, qu'un overflow sur un ancêtre rognerait —
 * et régler un seul axe force l'autre à `auto`, ce qui rognerait aussi
 * verticalement. On se contente de brider ce qui se bride sans casse. */
.cwp-embed {
    max-width: 100%;
}

.cwp-embed :is(iframe, img, video, embed, object, table) {
    max-width: 100%;
}

/* Footer collant.
 *
 * Sur une page plus courte que l'écran (mentions légales, galerie filtrée, 404,
 * ou simplement la galerie avant que le JS n'ait rempli la grille), le pied de
 * page s'arrêtait au milieu de l'écran et laissait du blanc en dessous. Le body
 * occupe donc au minimum toute la hauteur visible, et le footer est poussé en
 * bas par une marge automatique — qui vaut 0 dès que le contenu est assez long.
 *
 * La barre de navigation et le lien d'évitement sont en position fixed, donc
 * hors flux : ils ne deviennent pas des éléments flex. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* dvh suit la barre d'outils mobile, qui fait varier la hauteur visible. */
    min-height: 100dvh;
}

body.no-scroll {
    overflow: hidden;
}


/* -------------------- Default section -------------------- */

.section {
}

.section .container {
}

.section .section__header {
}

/* Titre de section par défaut. C'est cette règle qui habille la majorité des
   titres du site : seuls quelques blocs la surchargent.
   Elle etait restee figee a 34px lors du passage a l'echelle fluide, qui n'avait
   traite que ces surcharges.

   L'interligne passe de 1.4 a 1.25 : sur un titre d'une seule ligne, ce qui est
   le cas general sur grand ecran, il n'a aucun effet visible ; il ne joue que
   lorsque le titre se coupe, c'est-a-dire sur mobile, ou 1.4 aerait trop les
   deux lignes. */
.section .section__title {
    font-size: var(--fs-xl);
    line-height: 1.25;
    font-weight: 700;
    margin-bottom: 24px;
}

.section .section__subtitle {
    font-size: 20px;
    line-height: 1.6;
    font-weight: 500; 
    margin-bottom:0;
}

.section .section__introduction {
    line-height: 1.6;
    font-size: var(--fs-text);
}

.section .section__text {
    line-height: 1.6;
    font-size: var(--fs-text);
}

.section .section__content {
}

.section .section__list {
    padding: 0;
}

.section .section__list .section__list-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding-left: 16px;
}

.section .section__list .section__list-item::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-nav);
    position: absolute;
    top: 12px;
    left: 0;
}
.section .section__list .section__list .section__list-item {
    padding-left: 40px;
    font-size:14px;
}
.section .section__list .section__list .section__list-item::before {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-nav);
    position: absolute;
    top: 8px;
    left: 24px;
}

.section .section__footer {
}

/*#region Navigation */


/* -------------------------------------------------
   LOADER
------------------------------------------------- */

figure.is-loading {
    background: linear-gradient(
        100deg,
        var( --color-grey) 25%,
        #f5f5f5 37%,
        var( --color-grey) 63%
    );
    background-size: 200% 100%;
    animation: skeleton-wave 3s ease infinite;
}

figure.is-loaded {
    animation: none;
    background: none;
}

figure > img {
    opacity: 0;
    transition: opacity 0.35s ease;
}

figure.is-loaded > img {
    opacity: 1;
}

/* wp-block-image : centrer l'image quand elle est plus petite que la figure
   (flex-direction:column pour garder figcaption sous l'image) */
.wp-block-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5em; /* espace après la figure, qu'il y ait caption ou non */
}

.wp-block-image > img {
    margin-inline: auto;
}

.wp-element-caption {
    text-align: center;
    margin-top: 8px;
    margin-bottom: 0;
}

@keyframes skeleton-wave {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* -------------------------------------------------
   NEWSLETTERS
------------------------------------------------- */

.form-newsletters button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.newsletter-success {
    width:100%;
    text-align: center;
}

/* -------------------------------------------------
   NAVIGATION
------------------------------------------------- */

.nav {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 9999;
    background: var(--color-white);
    border-bottom: 1px solid rgb(218, 217, 220);
    transition: .25s;
}
.home .nav:not(.is-scrolled) {
    background: none;
    border-bottom: 1px solid transparent;
}
.home .nav:not(.is-scrolled) .nav__logo img{
    filter: brightness(0) invert(1);
}
.home .nav:not(.is-scrolled) .nav__menu > a {
    color: var(--color-text--header);
    font-weight: 400;
}
.nav .nav__left{
    display:flex;
    align-items:center;
    justify-content:flex-start;
}
.nav .nav__right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
}
.nav .nav__socials{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:2px;
}
.nav .nav__socials .nav__social{
    width:24Px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.home .nav:not(.is-scrolled) .nav__socials .nav__social svg *{
    fill:var(--color-white);
}
.nav .nav__socials .nav__social svg{
    width:16px;
}
.nav .nav__socials .nav__social svg *{
    fill:var(--color-text);
}

.home .nav:not(.is-scrolled) .nav__contact {
    background:none;
    border:1px solid var(--color-white);
}
.home .nav:not(.is-scrolled) .nav__contact:hover {
    background:var(--color-white);
    color:var(--color-text);
}
.nav .nav__contact  {
    background:var(--color-nav);
    border:1px solid var(--color-nav);
    color:var(--color-white);
    line-height:36px;
    padding:0 16px;
    font-size:14px;
    font-family:inherit;
    cursor:pointer;
    margin:0 0 0 16px;
    border-radius: 4px;
    text-decoration:none;
}
.nav .nav__contact:hover {
    background:var(--color-bold);
    border-color:var(--color-bold);
}

/* Newsletter dans le menu mobile (ouvre la popin). */
.nav__sidebar-newsletter {
    display: inline-block;
    margin: 24px 0 0;
    padding: 10px 22px;
    background: var(--color-nav);
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.nav__sidebar-newsletter:hover {
    background: var(--color-bold);
}
.nav .nav__link--search {
    margin-right:12px;
    margin-bottom:-5Px;
}
.home .nav:not(.is-scrolled) .nav__link--search svg *{
    fill:var(--color-white);
}
.nav .nav__link--search svg{
    width: 16px;
}
.nav .nav__link--search svg *{
    fill:var(--color-black);
}

.home .nav:not(.is-scrolled) .nav__item--dropdown > .nav__link{
    color: var(--color-text--header);
    font-weight: 400;
}
.home .nav:not(.is-scrolled) .nav__item--dropdown .nav__link svg *{
    fill:var(--color-text--header);
}
.home .nav:not(.is-scrolled) .nav__menu > a:hover {
    text-decoration: underline;
    color: var(--color-text--header);
}
.home .nav:not(.is-scrolled) .nav__item--dropdown .nav__link:hover svg *{
    color: var(--color-text--header);
}

.page:not(.home) .nav ,
.home .nav.is-scrolled {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    background: var(--color-white);
    border-bottom: 1px solid #eee;
}

/* WRAPPER */
.nav  .container {
    max-width: 100%;
}
.nav .nav__wrapper {
    width:100%;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:32px;
}

/* LOGO */
.nav .nav__logo {
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    color: var(--color-text);
    margin: 0 32px 0 0;
}

/* MENU DESKTOP */
.nav .nav__menu {
    display: flex;
    gap: 24px;
}

.nav .nav__menu a {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 450;
    font-size:15px;
    transition: .25s;
    /* Filet de sécurité : les liens sont des éléments flex, donc compressibles.
       Sans ça, quand la barre manque de place, ce sont les libellés eux-mêmes
       qui se coupent en deux lignes (« Organiser son / voyage ») au lieu que la
       barre passe à son palier compact. */
    white-space: nowrap;
}

.nav .nav__menu a:hover {
    color: var(--color-nav);
}

/* HAMBURGER */
.nav .nav__hamburger {
    width: 34px;
    height: 24px;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.nav .nav__hamburger span {
    height: 3px;
    width: 100%;
    background: var(--color-text);
    display: block;
    border-radius: 2px;
}

/* -------------------------------------------------
   SIDEBAR MOBILE
------------------------------------------------- */

.nav .nav__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: .25s;
}

.nav .nav__overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.nav .nav__sidebar {
    position: fixed;
    top: 0;
    right: -300px;
    width: 280px;
    /* svh : en vh le tiroir depasse sous la barre d'outils mobile et ses
       derniers liens deviennent inatteignables (le body est verrouille). */
    height: 100vh;
    height: 100svh;
    background: #fff;
    box-shadow: -6px 0 22px rgba(0, 0, 0, 0.15);
    padding: 24px;
    transition: .3s ease;
    display: flex;
    flex-direction: column;
    z-index: 1100;
}

.nav .nav__sidebar.is-open {
    right: 0;
}

/* Bouton de fermeture du menu mobile.
 *
 * C'était un simple caractère « × » à 32px, sans zone cliquable définie : la
 * cible tactile se réduisait au glyphe, sous les 44px recommandés, et rien
 * n'indiquait qu'il s'agissait d'un bouton. Il devient une pastille explicite,
 * icône plus libellé, avec le même vocabulaire de forme que les boutons du
 * thème (rayon de 4px, teinte de la navigation au survol). */
.nav .nav__close {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-bottom: 20px;
    padding: 0 14px;
    background: none;
    border: 1px solid var(--color-border-grey);
    border-radius: 4px;
    color: var(--color-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.nav .nav__close svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.nav .nav__close:hover,
.nav .nav__close:focus-visible {
    background: var(--color-nav);
    border-color: var(--color-nav);
    color: var(--color-white);
}

/* Pied du panneau : newsletter puis réseaux sociaux, pousses en bas du tiroir.
   Le menu prend la hauteur restante et defile si les entrees sont nombreuses,
   plutot que de repousser ce pied hors de l'ecran. */
.nav .nav__sidebar-menu {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nav .nav__sidebar-footer {
    flex-shrink: 0;
    margin-top: 16px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border-grey);
}

.nav .nav__sidebar-footer .nav__sidebar-newsletter {
    display: block;
    width: 100%;
    margin: 0;
    text-align: center;
}

.nav .sidebar__socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

/* Cible tactile de 40px pour une icone de 18px : le lien seul serait trop
   petit et trop proche de ses voisins. */
.nav .sidebar__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-grey);
    color: var(--color-text);
    transition: background .15s, color .15s;
}

.nav .sidebar__social svg {
    width: 18px;
    height: 18px;
}

.nav .sidebar__social svg * {
    fill: currentColor;
}

.nav .sidebar__social:hover,
.nav .sidebar__social:focus-visible {
    background: var(--color-nav);
    color: var(--color-white);
}

.nav .nav__sidebar-menu a {
    display: block;
    text-decoration: none;
    color: var(--color-text);
    font-size: 18px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.nav .nav__sidebar-toggle {
    display: block;
    width: 100%;
    text-align: left;
    color: var(--color-text);
    font-size: 18px;
    padding: 12px 0;
    border: none;
    border-bottom: 1px solid #eee;
    background: none;
    cursor: pointer;
}

.nav .nav__sidebar-dropdown {
    display: none;
    padding-left: 14px;
}

.nav .nav__sidebar-dropdown.is-open {
    display: block;
}

.nav .nav__sidebar-dropdown a {
    font-size: 16px;
}

/* -----------------------------------------------
   DROPDOWN DESKTOP
----------------------------------------------- */

.nav .nav__item--dropdown {
    position: relative;
}

.nav .nav__item--dropdown .nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav .nav__item--dropdown .nav__link svg {
    width: 14px;
    margin: 0 0 0 8px;
}

.nav .nav__item--dropdown .nav__link svg * {
    fill: var(--color-text);
}

.nav .nav__item--dropdown .nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-white);
    min-width: 240px;
    padding: 14px 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: .25s;
    z-index: 1000;
}

.nav .nav__item--dropdown:hover .nav__dropdown {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.nav .nav__dropdown a {
    display: block;
    padding: 10px 18px;
    text-decoration: none;
    color: var(--color-text);
    font-size: 14px;
}

.nav .nav__dropdown a:hover {
    background: rgba(0, 0, 0, 0.04);
}


/* -------------------------------------------------
   RESPONSIVE
------------------------------------------------- */
/* Paliers de la barre de navigation.
 *
 * En configuration complète (libellés 15px, gouttière 24px, réseaux sociaux
 * visibles), la barre réclame environ 1290px : logo 194 + menu 682 + 32 de
 * gouttière + 334 à droite. Le premier palier était à 1210px, soit 80px trop
 * bas — entre 1211 et 1290px la barre était trop pleine et les libellés se
 * coupaient en deux lignes. Chaque palier garde maintenant une marge. */
@media (max-width: 1340px) {
    .nav .nav__menu{
        gap:20px;
    }
    .nav .nav__menu a{
        font-size:14px;
    }
    .nav .nav__link--search {
        margin-right:8px;
    }
    .nav .nav__socials {
        display:none;
    }
}
@media (max-width: 1120px) {
    .nav .nav__menu{
        gap:10px;
    }
    .nav .nav__menu a{
        font-size:13px;
    }
    .nav .nav__logo {
        margin-right:20px;
    }
}
/* Bascule mobile alignée sur le 1024px déjà utilisé ailleurs dans la feuille :
   en dessous, même compacté, le menu ne tient plus. */
@media (max-width: 1024px) {

    .nav .nav__menu {
        display: none;
    }
    .nav .nav__wrapper {
        justify-content: space-between;
    }
    .nav .nav__link--search {
        margin-right:24px;
    }
    .nav .nav__link--search svg{
        width:22px;
    }

    .nav .nav__contact  {
        display:none;
    }
    .nav .nav__hamburger {
        display: flex;
    }

    .page:not(.home) .nav, .home .nav:not(.is-scrolled) .nav__hamburger span{
        background:var(--color-white);
    }
}

/* MEGA MENU */
.nav .nav__item--mega {
    display: flex;
    align-items: center;
}

.nav .nav__link--mega {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    font-weight: 450;
    color: var(--color-text);
    transition: .25s;
}

.nav .nav__link--mega svg {
    width: 13px;
    transition: transform .25s;
}

.nav .nav__link--mega svg * {
    fill: currentColor;
}

.nav .nav__link--mega:hover,
.nav .nav__item--mega.is-open .nav__link--mega {
    color: var(--color-nav);
}

.nav .nav__item--mega.is-open .nav__link--mega svg {
    transform: rotate(180deg);
}

/* Sur l'accueil non scrollée la barre est transparente : texte clair, sauf
   quand un panneau est ouvert (le fond redevient blanc). */
.home .nav:not(.is-scrolled):not(.has-mega-open) .nav__link--mega {
    color: var(--color-text--header);
}

.home .nav.has-mega-open {
    background: var(--color-white);
    border-bottom-color: #eee;
}

.home .nav.has-mega-open .nav__logo img {
    filter: none;
}

/* Panneau pleine largeur.
   `fixed` et non `absolute` : en absolute, le panneau se cale sur le premier
   ancêtre positionné. Il est imbriqué dans .nav__item--mega, et il suffirait
   qu'un `position`, un `transform`, un `filter` ou un `contain` apparaisse sur
   un ancêtre — dans le thème ou dans l'une des ~40 feuilles chargées — pour
   qu'il se replie sur la largeur du bouton. En fixed, le bloc conteneur est le
   viewport : la pleine largeur ne dépend plus de rien. */
.nav .mega {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--color-white);
    border-top: 1px solid var(--color-border-grey);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .10);
    max-height: calc(100vh - var(--nav-height));
    max-height: calc(100svh - var(--nav-height));
    /* Deux axes explicites : avec `overflow-y: auto` seul, la spec fait passer
       overflow-x de `visible` à `auto` et une barre horizontale apparaît. */
    overflow-x: hidden;
    overflow-y: auto;
}

.nav .mega[hidden] {
    display: none;
}

.nav .mega__inner {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 40px;
    /* .mega__inner porte aussi .container, neutralisé par .nav .container
       { max-width: 100% }. On recadre sur la largeur du site, sinon le contenu
       colle aux bords de l'écran sur grand format. */
    max-width: 1320px;
    margin: 0 auto;
    padding: 26px 25px 32px;
}

/* Sans min-width, un élément de grille ne descend pas sous la largeur de son
   contenu : les titres d'articles et la liste en colonnes faisaient déborder
   la grille au lieu de la comprimer. */
.nav .mega__content {
    min-width: 0;
}

/* Rail des rubriques */
.nav .mega__rail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 24px;
    border-right: 1px solid var(--color-border-grey);
}

/* Ces entrées étaient des <button> ; ce sont désormais des liens vers la page
   de la rubrique. D'où le text-decoration, que la règle globale sur `a` met
   à `underline`. Le reste (border, background, font) reste utile : ça neutralise
   aussi bien l'habillage d'un bouton que celui d'un lien. */
.nav .mega__tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 6px;
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    text-align: left;
    text-decoration: none;
    color: var(--color-text);
    transition: background .2s, color .2s;
}

.nav .mega__tab:hover,
.nav .mega__tab.is-active {
    background: var(--color-grey);
    color: var(--color-nav);
    text-decoration: none;
}

/* Chevron de l'onglet actif : en CSS plutôt qu'en SVG inline répété 27 fois. */
.nav .mega__tab::after {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity .2s;
}

.nav .mega__tab.is-active::after {
    opacity: 1;
}

/* Bouton du rail : design bouton standard du thème (.btn / .nav__contact),
   en version compacte pour tenir dans la colonne.
   Sélecteur en trois classes : `.nav .nav__menu a` (0-2-1) l'emporterait
   sinon sur un `.nav .mega__rail-all` (0-2-0) et forcerait la couleur du texte. */
.nav .mega .mega__rail-all {
    display: block;
    margin-top: 16px;
    padding: 0 16px;
    background: var(--color-nav);
    border: 1px solid var(--color-nav);
    border-radius: 4px;
    color: var(--color-white);
    font-size: 14px;
    font-weight: 500;
    line-height: 36px;
    text-align: center;
    text-decoration: none;
    transition: .25s;
}

.nav .mega .mega__rail-all:hover {
    background: var(--color-bold);
    border-color: var(--color-bold);
    color: var(--color-white);
    text-decoration: none;
}

/* La barre force `white-space: nowrap` sur ses liens (voir `.nav .nav__menu a`)
   pour qu'un libellé ne se coupe jamais en deux lignes. Le panneau vit dans le
   même `.nav__menu`, il héritait donc de la règle : les titres d'articles de la
   colonne « À lire », les rubriques du rail et la liste des sous-destinations
   sortaient sur une seule ligne et passaient par-dessus les colonnes voisines.
   Le panneau est un autre contexte de mise en page — son contenu doit se
   replier dans sa colonne. Sélecteur à égale spécificité (0-2-1), placé après
   celui de la barre : c'est l'ordre qui tranche. */
.nav .mega a {
    white-space: normal;
}

/* Contenu : enfants + articles */
.nav .mega__panel {
    display: none;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 40px;
}

.nav .mega__panel:not([hidden]) {
    display: grid;
}

.nav .mega__panel--articles-only:not([hidden]) {
    grid-template-columns: minmax(0, 1fr);
}

.nav .mega__col {
    min-width: 0;
}

.nav .mega__col-title {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8A8F96;
}

.nav .mega__children {
    columns: 3;
    column-gap: 24px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.nav .mega__children li {
    break-inside: avoid;
    margin: 0 0 2px;
}

.nav .mega__children a {
    display: block;
    padding: 6px 0;
    font-size: 15px;
    color: var(--color-text);
    text-decoration: none;
    transition: color .2s;
}

.nav .mega__children a:hover {
    color: var(--color-nav);
}

/* Même remarque de spécificité que pour .mega__rail-all. */
.nav .mega .mega__all {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-nav);
    text-decoration: none;
}

.nav .mega .mega__all:hover {
    color: var(--color-bold);
    text-decoration: underline;
}

.nav .mega__articles {
    display: grid;
    gap: 14px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.nav .mega__panel--articles-only .mega__articles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.nav .mega__articles li {
    min-width: 0;
}

.nav .mega__articles a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--color-text);
}

.nav .mega__panel--articles-only .mega__articles a {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.nav .mega__article-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 6px;
    background-color: var(--color-grey);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.nav .mega__panel--articles-only .mega__article-thumb {
    width: 100%;
    height: 96px;
}

.nav .mega__article-title {
    min-width: 0;
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    transition: color .2s;
    /* Trois lignes maximum. Les titres du menu vont de 40 à 95 caractères :
       sans plafond, les plus longs étirent leur colonne et désalignent les
       cartes voisines de la rangée. Même mécanique que les cartes du site
       (.article-card__title). */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.nav .mega__articles a:hover .mega__article-title {
    color: var(--color-nav);
}

/* Tiroir mobile : liens ajoutés par le rendu unifié */
.nav .nav__sidebar-all {
    font-weight: 600;
    color: var(--color-nav) !important;
}

.nav .nav__sidebar-sub {
    padding-left: 18px !important;
    font-size: 14px;
    opacity: .8;
}

/* Mêmes paliers que la barre elle-même : les déclencheurs du méga-menu SONT
   les entrées du menu, ils doivent changer de taille au même moment. */
@media (max-width: 1340px) {
    .nav .nav__link--mega {
        font-size: 14px;
    }
    .nav .mega__inner {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 28px;
    }
    .nav .mega__children {
        columns: 2;
    }
}

@media (max-width: 1120px) {
    .nav .nav__link--mega {
        font-size: 13px;
    }
}

/*#endregion Navigation */

/*#region Footer */

.footer {
    padding: 60px 0 0 0;
    background: var(--color-grey);
    /* Colle le footer en bas quand le contenu ne remplit pas l'écran ; la marge
       automatique se résout à 0 dès que la page est assez longue. */
    margin-top: auto;
    flex-shrink: 0;
}

/* TOP GRID */
.footer .footer__top .container {
    padding-bottom: 60px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    gap:75px;
}

/* COLUMNS */
.footer .footer__column {
    font-size: 15px;
    line-height: 1.6;
}

.footer .footer__column--left {
   width:100%;

       display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.footer .footer__column--right {
    width:100%;
}

/* TITLES */
.footer .footer__logo {
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin:0 0 32px 0;
}
.footer .footer__logo-img,
.footer .footer__logo img {
    max-width: 250px;
    height: auto;
}
.footer .footer__title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    text-align: center;
}

.footer .footer__text {
    margin-bottom: 16px;
    max-width: 550px;
    text-align: center;
}
.footer .footer__text strong{
    color:var(--color-black);
}
/* SOCIALS */
.footer .footer__socials {
       display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.footer .footer__social {
    width: 28px;
    height: 28px;
    background: var(--color-text);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer .footer__social svg {
    width: 14px;
}

.footer .footer__social svg * {
    fill: var(--color-white);
}

.footer .footer__social:hover {
    background: var(--color-nav);
}

.footer__newsletter {
    margin: 48Px 0 0 0;
}

.footer .footer__form {
    display: flex;
    margin-top: 20px;
    border-radius: 50px;
    overflow: hidden;
    border: 1px solid #ccc;
}
.footer label {
    flex:1;
}
.footer .footer__input {
    width: 100%;
    padding: 14px 20px;
    border: none;
    outline: none;
    font-size: 14px;
}

.footer .footer__button {
    padding: 14px 30px;
    background: var(--color-text);
    color: var(--color-white);
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
}

.footer .footer__button:hover {
    background: var(--color-nav);
}

/* LINKS */

.footer .footer__links {

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.footer .footer__links-group .footer__links-title:not(:first-child) {
    margin-top: 32Px;
}

.footer .footer__links-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: uppercase;
      text-align: center;
}

.footer .footer__links button,
.footer .footer__links a {
    display: block;
    width:100%;
    text-decoration: none;
    color: var(--color-text);
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
}

/* « Rejoindre la newsletter » est un <button> au milieu de liens : sans ces
   remises à zéro il gardait l'habillage natif du navigateur — fond gris, bordure
   et surtout sa propre police, car un bouton n'hérite pas de font-family. */
.footer .footer__links button {
    appearance: none;
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

.footer .footer__links button:hover,
.footer .footer__links a:hover {
    color: var(--color-bold);
    text-decoration: underline;
}

/* BOTTOM BAR */
.footer .footer__bottom {
    background: var(--color-text);
    color: var(--color-white);
    text-align: center;
    padding: 12px 0;
    font-size: 13px;
    margin-top: 40px;
}

/* Barre inférieure centrée, comme le reste du pied de page.
   Les trois valeurs précédentes se contredisaient : le parent .footer__bottom
   demande text-align: center, mais `text-align: left` l'annulait et
   `align-items: flex-end` poussait en fait le bloc contre le bord droit. */
.footer .footer__copyrights {
    width: 100%;
    text-align: center;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap:5px;
}

.footer .footer__copyrights ul{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    /* Écart vertical plus large que l'horizontal : quand la liste passe à la
       ligne, les entrées ne se collent pas. */
    gap: 6px 5px;
}
.footer .footer__copyrights ul li{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap:5px;
}
.footer .footer__copyrights ul li:not(:first-child)::before{
    content:'–';
    color:var(--color-white);
    display: block;

}
.footer .footer__copyrights button,
.footer .footer__copyrights a {
    color: var(--color-white);
    text-decoration: none;
}

.footer .footer__copyrights button:hover,
.footer .footer__copyrights a:hover {
    text-decoration: underline;
}

@media all and (max-width: 1024px){
    .footer .footer__top .container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .footer .footer__column--left {
        width: 100%;
    }
    .footer .footer__column--right {
        width: 100%;
        margin: 32px 0 0 0;
    }
    .footer__links-group {
        width: calc(100% / 3);
    }
}
@media all and (max-width: 768px){
    .footer .footer__links {
        flex-wrap: wrap;
    }
    .footer__links-group {
        width: calc(100% / 2);
    }
    .footer .footer__links-title {
        width: 100%;
        text-align: center;
    }
    .footer .footer__links a {
        width: 100%;
        text-align: center;
    }
}
@media all and (max-width: 500px){
    .footer__links-group {
        width:100%;
    }
    .footer .footer__links {
        gap:24px;
    }
    .footer .footer__bottom{
        margin-top:0;
    }
}

/* Barre inférieure sur petit écran.
 *
 * Les quatre entrées réclament environ 470px alors qu'un téléphone de 375px
 * n'offre que 343px une fois le retrait du conteneur retiré : la liste passe
 * forcément à la ligne. Or les tirets séparateurs sont posés en ::before sur
 * chaque entrée : à la coupure, le tiret de la première entrée de la deuxième
 * ligne se retrouve orphelin, en tête de ligne.
 *
 * On les retire donc à cette largeur et on écarte davantage les entrées, qui
 * se lisent alors comme une liste centrée sur deux lignes. */
@media all and (max-width: 600px){
    .footer .footer__copyrights ul{
        gap: 8px 18px;
    }

    .footer .footer__copyrights ul li:not(:first-child)::before{
        content: none;
    }
}
/*#endregion Footer */



/* Newsletter -> topbar (.nav__contact) ; partage -> rail (.share-rail). */




.section--newsletter .section__box {
    display: flex;
    justify-content: space-between;
}

/* IMAGE */
.section--newsletter .section__image {
    width: 45%;
}
.section--newsletter .section__image img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    display:block;
}

.section--newsletter .section__image-inner {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* CONTENT */
.section--newsletter .section__content {
    width:55%;
    padding: 90px 50px;
}

.section--newsletter .section__subtitle {
}

.section--newsletter .section__title {
    margin-bottom: 16px;
}

.section--newsletter .section__introduction {
    margin-bottom: 30px;
}

/* FORM */
.section--newsletter .section__form {
    display: flex;

}
.section--newsletter label{
    flex: 1;
}
.section--newsletter .section__input {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--color-nav);
    outline: none;
    font-size: 16px;
    border-radius: 50px 0 0 50px;
}

.section--newsletter .section__input:focus {
    border-color: var(--color-nav);
}

.section--newsletter .section__button {
    padding: 14px 20px;
    background: var(--color-nav);
    color: var(--color-white);
    border: none;
    cursor: pointer;
    font-size:16px;
    font-weight: 500;
    transition: 0.25s;
    border-radius: 0 50px 50px 0;
}

.section--newsletter .section__button:hover {
    background:var(--color-bold);
}

.section--newsletter .section__regles {
    width: 100%;
    text-align: right;
    text-wrap: balance;
    font-size:12px;
    line-height: 1.4;
    margin: 24px 0 0 0;
}




@media all and (max-width: 1024px){
    .section--newsletter .section__box {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column-reverse;
    }
    .section--newsletter .section__image {
        aspect-ratio: 16 / 9;
    }
    .section--newsletter .section__content {
        padding: 40px 32px;
    }
}

@media all and (max-width: 768px){
    .section--newsletter .section__content {
        padding: 32px 16px;
    }
}







.newsletter-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: none;
    align-items: center;
    justify-content: center;

    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: -1;
}

.newsletter-modal.is-open {
    opacity: 1;
    pointer-events: auto;
        display: flex;
    z-index: 999;
}

.newsletter-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(3px);
}

.newsletter-modal__content {
    position: relative;
    background: white;
    border-radius: 18px;
    max-width: 1270px;
    width: calc(100% - 40px);
    max-height: 90vh;
    overflow: auto;

    box-shadow: 0 30px 80px rgba(0,0,0,.25);

    transform: translateY(10px) scale(.98);
    transition: transform .25s ease;
}

.newsletter-modal.is-open .newsletter-modal__content {
    transform: translateY(0) scale(1);
}

.newsletter-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    z-index: 100;
    width: 40Px;
    height: 40Px;
    background: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .8;
    transition: linear .15s;
}
.newsletter-modal__close svg{
    width:16px;
    max-width:20px;
}
.newsletter-modal__close svg *{
    fill:var(--color-text);
}
.newsletter-modal__close:hover {
    opacity: 1;
}

/*#region Back to top*/

.back-to-top {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 900;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-nav);
    border: 1px solid var(--color-nav);
    border-radius: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .25s, visibility .25s, transform .25s, background .15s, border-color .15s;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top svg {
    width: 22px;
    height: 22px;
    fill: var(--color-white);
    flex-shrink: 0;
    margin-bottom: -8px;
}

.back-to-top:hover {
    background: var(--color-white);
    border-color: var(--color-border-grey);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.back-to-top:hover svg {
    fill: var(--color-nav);
}

.back-to-top:active {
    transform: translateY(0) scale(0.92);
}

@media all and (max-width: 768px) {
    .back-to-top {
        bottom: 12px;
        right: 12px;
    }
}

/*#endregion Back to top*/


/*#region Reduction des animations*/

/* Respect du reglage systeme « reduire les animations ».
 *
 * Le thème compte environ 126 declarations `animation` ou `transition` et une
 * seule les neutralisait jusqu'ici (le survol des cartes d'articles de
 * categorie). Pour un utilisateur sujet au mal des transports ou aux troubles
 * vestibulaires, le chevron clignotant en boucle de l'en-tete et les
 * defilements animes sont inconfortables voire douloureux.
 *
 * Regle globale, complementaire des neutralisations ciblees deja en place.
 *
 * On ramene les durees a 0.01ms plutot qu'a zero : les evenements
 * `transitionend` et `animationend` continuent ainsi d'etre emis, et les
 * scripts qui les attendent pour enchainer ne restent pas bloques. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/*#endregion Reduction des animations*/

/*#region Visionneuse d'images (image-modal)*/

/* Le markup de la visionneuse est global : il vit dans footer.php et sert a
 * tous les blocs qui ouvrent une image en grand (saisons, galeries, images
 * d'article, carte). Ses styles vivaient pourtant dans la feuille du bloc
 * saisons, ce qui ne se voyait pas tant que toutes les feuilles etaient
 * chargees sur chaque page.
 *
 * Depuis leur chargement a la demande, cette feuille ne sort plus que sur
 * l'accueil : ailleurs, `.image-modal` perdait son `display: none` et le
 * markup s'affichait en flux, en bas de page, sous la forme d'un bandeau
 * blanc. Les styles rejoignent donc la feuille globale, comme le markup.
 */

.image-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

.image-modal.is-open {
    display: block;
}

.image-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(4px);
}

.image-modal__content {
    position: absolute;
    inset: 0;
    margin: auto;
    width: calc(100vw - 32px);
    /* svh : sans cela la visionneuse depasse l'ecran sous la barre d'outils
       mobile et son bouton de fermeture devient inatteignable. */
    height: calc(100vh - 32px);
    height: calc(100svh - 32px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.image-modal__figure {
    position: relative;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: calc(100vw - 32px);
}

.image-modal__link {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 100;
    height: 40px;
    padding: 0 18px;
    background: var(--color-nav);
    color: var(--color-white);
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    opacity: .92;
    transition: linear .15s;
}

.image-modal__link[hidden] {
    display: none;
}

.image-modal__link:hover {
    opacity: 1;
    background: var(--color-bold);
    color: var(--color-white);
}

.image-modal__img {
    max-width: 100%;
    max-height: calc(100vh - 160px);
    max-height: calc(100svh - 160px);
    object-fit: contain;
}

.image-modal__caption {
    /* Ne contribue pas à la largeur de la figure (width:0) mais la remplit
       ensuite (min-width:100%) : la légende ne dépasse jamais l'image et passe
       à la ligne au lieu d'élargir la boîte. */
    width: 0;
    min-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    margin: 12px 0 0;
    font-size: 12px;
    opacity: 0.7;
    text-align: center;
    text-decoration: underline;
}

/* Légende manuscrite (saisons) reprenant la police hors-popin. */
.image-modal--handwritten .image-modal__caption {
    font-family: "Indie Flower", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    opacity: 1;
    text-decoration: none;
}

.image-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    z-index: 100;

    width: 40Px;
    height: 40Px;
    background: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .8;
    transition: linear .15s;
}

.image-modal__close svg {
    width: 16px;
}

.image-modal__close svg * {
    fill: var(--color-black);
}

.image-modal__close:hover {
    opacity: 1;
}

.image-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--color-black);
  color:#fff;
  font-size: 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-modal__nav  svg{
    width:14px;
}
.image-modal__nav  svg *{
    fill:var(--color-white);
}


.image-modal__nav--prev { left: -60px; }
.image-modal__nav--next { right: -60px; }


.image-modal[data-solo] .image-modal__nav { display:none; }

@media (max-width: 768px) {
  .image-modal__nav--prev { left: 10px; }
  .image-modal__nav--next { right: 10px; }
}

/*#endregion Visionneuse d'images*/