/* =========================================================================
   LA CROIX MATHELOT — feuille de style unique
   Portage du site WordPress d'origine sur CodeIgniter 4 : mêmes couleurs,
   mêmes polices, mise en page modernisée.
   Aucune dépendance externe : polices auto-hébergées, icônes en SVG inline.

   Sommaire
     1. Polices
     2. Variables
     3. Reset et base
     4. Utilitaires
     5. Boutons
     6. En-tête et navigation
     7. Héros et bandeaux
     8. Sections et grilles
     9. Composants (gîtes, listes, encarts, tarifs, galeries…)
    10. Visionneuse
    11. Appel à contact et pied de page
    12. Responsive, mouvement réduit et impression
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. POLICES
   Titre d'accueil : Arizonia · Titres : Josefin Sans · Texte : Tajawal
   Fichiers dans /public/assets/fonts/, donc ../fonts/ depuis ce CSS.
   ------------------------------------------------------------------------- */
@font-face {
    font-family: 'Arizonia';
    src: url('../fonts/arizonia-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/* Police variable : un seul fichier couvre toutes les graisses. */
@font-face {
    font-family: 'Josefin Sans';
    src: url('../fonts/josefin-sans-variable.woff2') format('woff2');
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/tajawal-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/tajawal-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/tajawal-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/tajawal-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* -------------------------------------------------------------------------
   2. VARIABLES
   Toute la charte tient dans ce bloc : le modifier suffit à redéfinir
   l'apparence du site sans toucher au reste de la feuille.
   ------------------------------------------------------------------------- */
:root {
    /* Couleurs reprises du site d'origine */
    --c-sable:        #E8D6B7;   /* couleur principale du WordPress */
    --c-sable-clair:  #F5EDDF;
    --c-creme:        #FCFAF6;   /* fond des pages */
    --c-bleu:         #64B7FF;   /* couleur secondaire : accents sur fond sombre */
    --c-nuit:         #0B2035;   /* pied de page d'origine */
    --c-nuit-clair:   #16324F;

    /* Le bleu d'origine est trop clair pour porter du texte blanc ou être
       lu sur le sable : ces deux nuances, plus soutenues, servent aux
       boutons et aux liens (contraste AA respecté sur blanc et sur sable). */
    --c-bleu-fonce:   #1C6BB0;
    --c-lien:         #15548C;

    --c-texte:        #33393F;
    --c-texte-doux:   #5D6670;
    --c-titre:        #0B2035;
    --c-bordure:      #E2D5BF;

    /* Typographie */
    --f-script: 'Arizonia', 'Brush Script MT', cursive;
    --f-titre:  'Josefin Sans', 'Century Gothic', 'Trebuchet MS', sans-serif;
    --f-corps:  'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

    --taille-base: 1.0625rem;
    --interligne:  1.7;

    /* Mise en page */
    --conteneur:   1180px;
    --gouttiere:   20px;
    --rayon:       8px;
    --ombre:       0 10px 30px rgba(11, 32, 53, 0.14);
    --ombre-douce: 0 4px 18px rgba(11, 32, 53, 0.08);
    --transition:  0.2s ease;

    --z-entete:      100;
    --z-sous-menu:   110;
}

/* -------------------------------------------------------------------------
   3. RESET ET BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--c-creme);
    color: var(--c-texte);
    font-family: var(--f-corps);
    font-size: var(--taille-base);
    line-height: var(--interligne);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

img, svg { max-width: 100%; height: auto; display: block; }

a {
    color: var(--c-lien);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--transition);
}
a:hover, a:focus { color: var(--c-nuit); }

h1, h2, h3, h4 {
    font-family: var(--f-titre);
    color: var(--c-titre);
    line-height: 1.25;
    margin: 0 0 0.6em;
    font-weight: 600;
}
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }

p, ul, ol { margin: 0 0 1.1em; }
li { margin-bottom: 0.35em; }

strong { font-weight: 700; }

address { font-style: normal; }

:focus-visible {
    outline: 3px solid var(--c-bleu);
    outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   4. UTILITAIRES
   ------------------------------------------------------------------------- */
.conteneur {
    width: 100%;
    max-width: var(--conteneur);
    margin-inline: auto;
    padding-inline: var(--gouttiere);
}

.visuellement-cache {
    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;
}

.lien-evitement {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--c-nuit);
    color: #fff;
    padding: 12px 20px;
    text-decoration: none;
}
.lien-evitement:focus {
    left: 0;
    color: #fff;
}

.centre { text-align: center; }

.surtitre {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-lien);
    margin-bottom: 0.5em;
}

.ombre { box-shadow: var(--ombre); border-radius: var(--rayon); }

.prose { max-width: 48rem; }
.prose.centre { margin-inline: auto; }

/* -------------------------------------------------------------------------
   5. BOUTONS
   Repris du WordPress : capitales espacées sur fond bleu.
   ------------------------------------------------------------------------- */
.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.85em 2em;
    border: 2px solid var(--c-bleu-fonce);
    border-radius: 4px;
    background: var(--c-bleu-fonce);
    color: #fff;
    font-family: var(--f-corps);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.bouton:hover, .bouton:focus {
    background: var(--c-nuit);
    border-color: var(--c-nuit);
    color: #fff;
}

.bouton--large { padding: 1em 2.6em; font-size: 0.95rem; }

.bouton--contour {
    background: transparent;
    color: var(--c-lien);
}
.bouton--contour:hover, .bouton--contour:focus {
    background: var(--c-bleu-fonce);
    border-color: var(--c-bleu-fonce);
    color: #fff;
}

.bouton--clair {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.8);
    color: #fff;
}
.bouton--clair:hover, .bouton--clair:focus {
    background: #fff;
    border-color: #fff;
    color: var(--c-nuit);
}

.boutons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 1.6em;
}
.boutons.centre { justify-content: center; }

/* -------------------------------------------------------------------------
   6. EN-TÊTE ET NAVIGATION
   Comme sur le site d'origine, l'en-tête se pose en transparence sur le
   visuel de tête de page : chaque page commence donc par un héros ou un
   bandeau, qui réserve la place nécessaire en haut.
   ------------------------------------------------------------------------- */
.entete {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-entete);
    color: #fff;
}
/* Plus large que le contenu : le nom du site, six entrées et le téléphone
   doivent tenir sur une seule ligne. */
.entete__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1360px;
    min-height: 92px;
}

.entete__nom {
    font-family: var(--f-titre);
    font-size: clamp(1.45rem, 2.4vw, 1.9rem);
    font-weight: 600;
    line-height: 1.1;
    color: var(--c-bleu);
    text-decoration: none;
    text-shadow: 2px 1px 0 rgba(0, 0, 0, 0.45);
    white-space: nowrap;
}
.entete__nom:hover, .entete__nom:focus { color: #fff; }

.entete__bascule {
    display: none;
    flex: none;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--rayon);
    background: rgba(11, 32, 53, 0.35);
    cursor: pointer;
}
.entete__bascule-barres,
.entete__bascule-barres::before,
.entete__bascule-barres::after {
    display: block;
    width: 22px;
    height: 2px;
    margin-inline: auto;
    background: #fff;
    transition: transform var(--transition), background-color var(--transition);
}
.entete__bascule-barres::before,
.entete__bascule-barres::after {
    content: '';
    position: relative;
}
.entete__bascule-barres::before { top: -7px; }
.entete__bascule-barres::after  { top: 5px; }

.entete__bascule[aria-expanded="true"] .entete__bascule-barres { background: transparent; }
.entete__bascule[aria-expanded="true"] .entete__bascule-barres::before { transform: translateY(7px) rotate(45deg); }
.entete__bascule[aria-expanded="true"] .entete__bascule-barres::after  { transform: translateY(-5px) rotate(-45deg); }

.navigation__liste {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.navigation__item { position: relative; margin: 0; }

.navigation__lien {
    display: block;
    padding: 8px 0;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.navigation__lien:hover,
.navigation__lien:focus,
.navigation__lien.est-actif {
    color: #fff;
    border-bottom-color: var(--c-bleu);
}

.navigation__item--parent > .navigation__lien::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
}

/* Sous-menu : fond sable, comme le menu déroulant d'origine. Il s'ouvre au
   survol et au clavier (focus-within), sans JavaScript. */
.sous-menu {
    position: absolute;
    top: 100%;
    left: -16px;
    z-index: var(--z-sous-menu);
    min-width: 220px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: var(--c-sable);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.sous-menu li { margin: 0; }
.navigation__item--parent:hover .sous-menu,
.navigation__item--parent:focus-within .sous-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.sous-menu__lien {
    display: block;
    padding: 8px 18px;
    color: var(--c-titre);
    font-weight: 500;
    text-decoration: none;
}
.sous-menu__lien:hover,
.sous-menu__lien:focus,
.sous-menu__lien.est-actif {
    background: var(--c-sable-clair);
    color: var(--c-lien);
}

.navigation__tel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 999px;
    background: rgba(11, 32, 53, 0.25);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--transition), color var(--transition);
}
.navigation__tel:hover, .navigation__tel:focus {
    background: #fff;
    color: var(--c-nuit);
}

/* -------------------------------------------------------------------------
   7. HÉROS ET BANDEAUX
   Deux recadrages du visuel : portrait sur téléphone, paysage au-delà.
   ------------------------------------------------------------------------- */
.heros,
.bandeau {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--c-nuit);
    background-image: var(--bandeau-image-mobile);
    background-size: cover;
    background-position: center;
    color: #fff;
    isolation: isolate;
}
.heros   { min-height: min(100vh, 860px); min-height: min(100svh, 860px); padding: 130px 0 90px; text-align: center; }
.bandeau { min-height: clamp(340px, 54vh, 520px); padding: 130px 0 56px; }

.bandeau__voile {
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Assombri en haut pour la lisibilité du menu, puis voile léger. */
    background:
        linear-gradient(180deg, rgba(11, 32, 53, 0.65) 0%, rgba(11, 32, 53, 0) 32%),
        rgba(0, 0, 0, 0.3);
}

.heros__contenu,
.bandeau__contenu { position: relative; }

.heros__titre {
    margin: 0 0 0.25em;
    font-family: var(--f-script);
    font-size: clamp(3rem, 9vw, 6rem);
    font-weight: 400;
    line-height: 1.1;
    color: #fff;
    text-shadow: 2px 1px 0 rgba(0, 0, 0, 0.6), 0 4px 30px rgba(0, 0, 0, 0.35);
}
/* Le visuel d'accueil est très clair (ciel, sable, mer turquoise) : le
   sous-titre et la description reposent sur un voile sombre discret, et
   l'ombre portée du texte prend le relais là où la photo reste claire. */
.heros__encart {
    max-width: 780px;
    margin: 0 auto;
    padding: clamp(18px, 3vw, 28px) clamp(20px, 4vw, 40px);
    border-radius: 12px;
    background: rgba(11, 32, 53, 0.16);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.heros__encart > :last-child { margin-bottom: 0; }

.heros__accroche {
    max-width: 34ch;
    margin: 0 auto 0.7em;
    font-size: clamp(1.25rem, 2.6vw, 1.85rem);
    font-weight: 500;
    line-height: 1.25;
    color: #fff;
    text-shadow: 2px 1px 0 rgba(0, 0, 0, 0.55), 0 0 18px rgba(0, 0, 0, 0.6);
}
.heros__texte {
    max-width: 58ch;
    margin-inline: auto;
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    font-weight: 500;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), 0 0 14px rgba(0, 0, 0, 0.6);
}
.heros__actions { margin: 2em 0 0; }

.bandeau__signature {
    margin: 0;
    font-family: var(--f-script);
    font-size: clamp(1.7rem, 3.5vw, 2.4rem);
    line-height: 1.2;
    color: var(--c-sable);
    text-shadow: 2px 1px 0 rgba(0, 0, 0, 0.5);
}
.bandeau__titre {
    max-width: 24ch;
    margin-bottom: 0.3em;
    color: #fff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}
.bandeau__chapo {
    max-width: 50ch;
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

.fil-ariane { margin-top: 1.4em; font-size: 0.88rem; }
.fil-ariane ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.fil-ariane li { margin: 0; }
.fil-ariane li + li::before { content: '›'; margin-right: 8px; opacity: 0.75; }
.fil-ariane a { color: rgba(255, 255, 255, 0.92); }
.fil-ariane a:hover, .fil-ariane a:focus { color: #fff; }
.fil-ariane span { color: rgba(255, 255, 255, 0.8); }

/* -------------------------------------------------------------------------
   8. SECTIONS ET GRILLES
   ------------------------------------------------------------------------- */
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section--sable  { background: var(--c-sable); }
.section--claire { background: var(--c-sable-clair); }

.entete-section {
    margin-bottom: 2.4em;
    text-align: center;
}
.entete-section > :last-child { margin-bottom: 0; }

.section__titre { margin-bottom: 1.2em; text-align: center; }
.section__titre::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    margin: 0.5em auto 0;
    background: var(--c-bleu-fonce);
    border-radius: 2px;
}
.entete-section .section__titre { margin-bottom: 0.6em; }

.grille-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}
.grille-2--haut { align-items: start; }
.grille-2__texte > :last-child,
.grille-2__visuel > :last-child { margin-bottom: 0; }
.grille-2__visuel img { width: 100%; }

.figure { margin: 0; }
.figure img { margin-inline: auto; }
.figure figcaption {
    margin-top: 12px;
    font-size: 0.9rem;
    color: var(--c-texte-doux);
    text-align: center;
}
.grille-2__visuel .figure__image--petite { width: auto; }

/* -------------------------------------------------------------------------
   9. COMPOSANTS
   ------------------------------------------------------------------------- */

/* Cartes des gîtes : toute la carte est cliquable (lien étiré). */
.cartes-gites {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cartes-gites--deux { grid-template-columns: repeat(auto-fit, minmax(280px, 380px)); justify-content: center; }

.carte-gite {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--ombre-douce);
    transition: transform var(--transition), box-shadow var(--transition);
}
.carte-gite:hover,
.carte-gite:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--ombre);
}
.carte-gite__image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.carte-gite__corps {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 24px 24px;
}
.carte-gite__corps p { color: var(--c-texte-doux); font-size: 0.98rem; }
.carte-gite__nom { margin-bottom: 0.5em; font-size: 1.4rem; }
.carte-gite__lien { color: inherit; text-decoration: none; }
.carte-gite__lien::after { content: ''; position: absolute; inset: 0; }
.carte-gite__lien:focus-visible { outline: none; }
.carte-gite:has(.carte-gite__lien:focus-visible) { outline: 3px solid var(--c-bleu); outline-offset: 3px; }
.carte-gite__suite {
    margin-top: auto;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-lien);
}
.carte-gite__suite::after { content: ' →'; }

.caracteristiques {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 1em;
    padding: 0;
    list-style: none;
}
.caracteristiques li {
    margin: 0;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--c-sable-clair);
    font-size: 0.9rem;
    color: var(--c-titre);
}
.caracteristiques strong { font-weight: 700; }

/* Atouts communs aux gîtes */
.atouts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px 28px;
    max-width: 960px;
    margin: 0 auto 3em;
    padding: 0;
    list-style: none;
    text-align: center;
    color: var(--c-texte-doux);
}
.atouts li { margin: 0; }
.atouts li::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: var(--c-bleu);
}

/* Liste à coches */
.liste-coches {
    margin-bottom: 1.4em;
    padding: 0;
    list-style: none;
}
.liste-coches > li {
    position: relative;
    padding-left: 1.9em;
    margin-bottom: 0.6em;
}
.liste-coches > li::before {
    content: '';
    position: absolute;
    left: 0.3em;
    top: 0.3em;
    width: 0.45em;
    height: 0.8em;
    border-right: 2px solid var(--c-bleu-fonce);
    border-bottom: 2px solid var(--c-bleu-fonce);
    transform: rotate(40deg);
}
.liste-coches ul {
    margin: 0.4em 0 0;
    padding-left: 1.1em;
    list-style: '– ';
}
.liste-coches ul li { margin-bottom: 0.25em; }

/* Étapes numérotées de l'itinéraire */
.etapes {
    margin: 0;
    padding-left: 1.4em;
}
.etapes li { padding-left: 0.3em; margin-bottom: 0.5em; }
.etapes li::marker { font-weight: 700; color: var(--c-lien); }

/* Encarts */
.encart {
    padding: 26px 30px;
    border-left: 3px solid var(--c-bleu-fonce);
    border-radius: 0 var(--rayon) var(--rayon) 0;
    background: #fff;
    box-shadow: var(--ombre-douce);
}
.encart > :last-child { margin-bottom: 0; }
.encart h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.encart--sable { background: var(--c-sable-clair); box-shadow: none; }

.grille-2__texte .encart { margin: 1.6em 0; }

/* Coordonnées (contact) */
.coordonnees__adresse { margin-bottom: 1.4em; font-size: 1.1rem; line-height: 1.6; }
.coordonnees__moyens {
    margin: 0;
    padding: 0;
    list-style: none;
}
.coordonnees__moyens li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-bottom: 0.9em;
    font-size: 1.1rem;
}
.coordonnees__moyens svg { flex: none; color: var(--c-bleu-fonce); }
.coordonnees__precision {
    flex-basis: 100%;
    padding-left: 30px;
    font-size: 0.88rem;
    color: var(--c-texte-doux);
}

/* Distances (Oléron) */
.distances {
    margin: 0 0 1.2em;
    padding: 0;
    list-style: none;
}
.distances li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px dashed var(--c-bordure);
}
.distances strong { flex: none; color: var(--c-lien); }

/* Nouvelles */
.nouvelle__titre { font-size: 1.1rem; margin-bottom: 0.3em; }

/* Tarifs */
.pile-tarifs {
    display: grid;
    gap: 32px;
    max-width: 920px;
    margin-inline: auto;
}
.tarifs { margin: 0; }
.tarifs__titre {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    margin-bottom: 0.6em;
    font-size: 1.35rem;
}
.tarifs__titre a { color: inherit; text-decoration: none; }
.tarifs__titre a:hover, .tarifs__titre a:focus { color: var(--c-lien); text-decoration: underline; }
.tarifs__capacite {
    font-family: var(--f-corps);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--c-texte-doux);
}
.note-tarifs { margin-top: 2.6em; }
.note-tarifs > :last-child { margin-bottom: 0; }

/* Tableaux (tarifs, mentions légales).
   Un tableau large ne doit jamais élargir la page : il défile dans sa boîte. */
.tableau-defilant {
    overflow-x: auto;
    border-radius: var(--rayon);
    border: 1px solid var(--c-bordure);
    background: #fff;
}
.tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    line-height: 1.6;
}
.tableau th,
.tableau td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--c-bordure);
}
.tableau thead th {
    background: var(--c-nuit);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}
.tableau tbody tr:last-child > * { border-bottom: 0; }

.tableau--tarifs { font-size: 1rem; }
.tableau--tarifs tbody th { font-weight: 700; color: var(--c-titre); white-space: nowrap; }
.tableau--tarifs td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau--tarifs td small { color: var(--c-texte-doux); font-size: 0.82em; }
.tableau--tarifs tbody tr:nth-child(even) { background: var(--c-creme); }
.tableau__vide { color: var(--c-texte-doux); }

/* Traitements de données (mentions légales) */
.traitement { margin-bottom: 40px; }
.traitement__finalite {
    margin-bottom: 0.3em;
    font-size: 1.1rem;
    color: var(--c-lien);
}
.traitement__sous-finalite {
    margin-bottom: 0.6em;
    font-size: 0.9rem;
    color: var(--c-texte-doux);
}

/* Galeries : vignettes 4:3 recadrées, photo entière dans la visionneuse. */
.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.galerie__item { margin: 0; }
.galerie__lien {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--rayon);
    background: var(--c-nuit);
    box-shadow: var(--ombre-douce);
}
.galerie__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease, opacity 0.35s ease;
}
.galerie__lien:hover .galerie__image,
.galerie__lien:focus .galerie__image { transform: scale(1.05); opacity: 0.9; }

/* Cartes routières : affichées en entier, sans recadrage. */
.galerie--entieres { margin-top: 2.4em; }
.galerie--entieres .galerie__lien { background: #fff; }
.galerie--entieres .galerie__image { object-fit: contain; padding: 6px; }
.galerie--entieres .galerie__lien:hover .galerie__image,
.galerie--entieres .galerie__lien:focus .galerie__image { transform: none; }

/* Plans */
.plan-gite { text-align: center; }
.plan-gite__lien {
    display: inline-block;
    padding: 18px;
    border-radius: var(--rayon);
    background: #fff;
    box-shadow: var(--ombre-douce);
}
.plan-gite__image { max-width: min(100%, 640px); }

.plan-expo {
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
    border-radius: var(--rayon);
    image-rendering: pixelated;   /* plan en aplats : reste net à l'agrandissement */
}

/* Manifestations (expositions) */
.manifestations {
    display: grid;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.manifestation {
    margin: 0;
    padding: 24px;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--ombre-douce);
}
.manifestation__titre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-bottom: 1em;
}
.manifestation__date {
    padding: 3px 10px;
    border-radius: 4px;
    background: var(--c-nuit);
    font-family: var(--f-corps);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
}
.manifestation .galerie { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* Balades (Oléron) */
.balade + .balade { margin-top: 3em; }
.balade__titre { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }

/* Environnement (accueil) : grand visuel du parc, comme sur le site
   d'origine, suivi de la mosaïque de photos sur fond clair. */
.environnement {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(360px, 60vh, 560px);
    padding: clamp(64px, 9vw, 110px) 0;
    background-color: var(--c-nuit);
    background-image: url('../images/bandeaux/parc-mobile.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    isolation: isolate;
}
.environnement__voile {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.28);
}
.environnement__titre {
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.2rem);
    text-shadow: 2px 1px 0 rgba(0, 0, 0, 0.6), 0 0 24px rgba(0, 0, 0, 0.5);
}
.environnement__texte {
    max-width: 40ch;
    margin: 0 auto;
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), 0 0 14px rgba(0, 0, 0, 0.6);
}

/* Mosaïque de six photos : 3 x 2 sur grand écran, 2 x 3 sur mobile,
   jamais de photo isolée en fin de grille. */
.mosaique .galerie { grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* Liens de secours (404) */
.liens-secours {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    margin-bottom: 2em;
    padding: 0;
    list-style: none;
}

/* Adresse e-mail reconstituée par main.js */
.courriel a { word-break: break-word; }

/* -------------------------------------------------------------------------
   10. VISIONNEUSE
   ------------------------------------------------------------------------- */
.visionneuse {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(6, 16, 27, 0.95);
    color: #fff;
}
.visionneuse[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}
.visionneuse::backdrop { background: rgba(0, 0, 0, 0.6); }

.visionneuse__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 64px 72px 24px;
    max-width: 100%;
}
.visionneuse__image {
    max-width: min(100%, 1600px);
    max-height: calc(100svh - 160px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    background: #fff;
}
.visionneuse__legende {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    max-width: 70ch;
    text-align: center;
    font-size: 0.98rem;
}
.visionneuse__compteur { color: rgba(255, 255, 255, 0.7); font-variant-numeric: tabular-nums; }

.visionneuse__bouton {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    transition: background-color var(--transition);
}
.visionneuse__bouton:hover,
.visionneuse__bouton:focus-visible { background: rgba(255, 255, 255, 0.28); }
.visionneuse__bouton[hidden] { display: none; }
.visionneuse__bouton--precedent { left: 14px; top: 50%; transform: translateY(-50%); }
.visionneuse__bouton--suivant   { right: 14px; top: 50%; transform: translateY(-50%); }
.visionneuse__bouton--fermer    { right: 14px; top: 14px; }

/* -------------------------------------------------------------------------
   11. APPEL À CONTACT ET PIED DE PAGE
   ------------------------------------------------------------------------- */
.appel {
    padding: 56px 0;
    background: linear-gradient(120deg, var(--c-nuit-clair), var(--c-nuit));
    color: rgba(255, 255, 255, 0.9);
}
.appel__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 40px;
}
.appel__texte { flex: 1 1 420px; }
.appel__texte > :last-child { margin-bottom: 0; }
.appel__titre { color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 0.3em; }
.appel__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.appel .bouton { background: var(--c-bleu); border-color: var(--c-bleu); color: var(--c-nuit); }
.appel .bouton:hover, .appel .bouton:focus { background: #fff; border-color: #fff; color: var(--c-nuit); }
.appel .bouton--clair { background: transparent; border-color: rgba(255, 255, 255, 0.8); color: #fff; }

.pied {
    background: var(--c-nuit);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.98rem;
}
.pied__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 36px;
    padding-top: 60px;
    padding-bottom: 44px;
}
.pied__titre {
    margin-bottom: 1.1em;
    padding-left: 14px;
    border-left: 3px solid var(--c-bleu);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--c-sable);
}
.pied__liens { margin: 0; padding: 0; list-style: none; }
.pied__liens li { margin-bottom: 0.45em; }
.pied a { color: #fff; text-decoration: none; }
.pied a:hover, .pied a:focus { color: var(--c-bleu); text-decoration: underline; }
.pied__adresse { line-height: 1.75; margin-bottom: 1em; }
.pied__appel {
    display: inline-block;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.85rem;
}
.pied__appel::after { content: ' →'; }

.pied__copyright {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.7);
}
.pied__copyright-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding-top: 18px;
    padding-bottom: 22px;
    border-top: 1px solid var(--c-bleu);
}
.pied__copyright p { margin: 0; }
.pied__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pied__legal li { margin: 0; }
.pied__haut { display: inline-flex; align-items: center; gap: 6px; }
.pied__haut svg { display: inline-block; }

/* -------------------------------------------------------------------------
   12. RESPONSIVE, MOUVEMENT RÉDUIT ET IMPRESSION
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .heros,
    .bandeau { background-image: var(--bandeau-image); }
    .environnement { background-image: url('../images/bandeaux/parc.jpg'); }
}

/* Menu replié : six entrées et le téléphone ne tiennent plus sur une ligne. */
@media (max-width: 1280px) {
    .entete__bascule { display: block; }

    .navigation {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        max-height: calc(100svh - 92px);
        overflow-y: auto;
        background: var(--c-nuit);
        box-shadow: var(--ombre);
    }
    .navigation.est-ouvert { display: block; }

    .navigation__liste {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px var(--gouttiere) 22px;
    }
    .navigation__lien {
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        text-shadow: none;
    }
    .navigation__lien.est-actif { color: var(--c-bleu); border-bottom-color: rgba(255, 255, 255, 0.12); }
    .navigation__item--parent > .navigation__lien::after { display: none; }

    /* Sous-menu toujours déplié dans le menu mobile */
    .sous-menu {
        position: static;
        min-width: 0;
        padding: 4px 0 8px 16px;
        background: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .sous-menu__lien { padding: 8px 0; color: rgba(255, 255, 255, 0.85); }
    .sous-menu__lien:hover,
    .sous-menu__lien:focus,
    .sous-menu__lien.est-actif { background: none; color: var(--c-bleu); }

    .navigation__item--tel { margin-top: 18px; }
}

@media (max-width: 900px) {
    .grille-2 { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .mosaique .galerie { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Sous 640 px, le tableau à plusieurs colonnes devient illisible même en
   défilement : chaque ligne passe en bloc, chaque cellule précédée de son
   intitulé de colonne. */
@media (max-width: 640px) {
    :root { --gouttiere: 16px; }

    .heros { padding-top: 120px; }
    .bandeau { padding-top: 116px; }

    .tableau-defilant { overflow-x: visible; }
    .tableau,
    .tableau tbody,
    .tableau tr,
    .tableau th,
    .tableau td { display: block; width: 100%; }
    .tableau thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
    }
    .tableau td { padding: 10px 16px; white-space: normal; }
    .tableau td::before {
        content: attr(data-colonne);
        display: block;
        margin-bottom: 2px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--c-texte-doux);
    }
    .tableau--tarifs tbody th {
        background: var(--c-nuit);
        color: #fff;
    }
    .tableau--tarifs tbody tr:nth-child(even) { background: none; }
    .tableau--tarifs td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
    }
    .tableau--tarifs td::before { margin: 0; align-self: center; }

    .visionneuse__figure { padding: 70px 12px 90px; }
    .visionneuse__bouton--precedent,
    .visionneuse__bouton--suivant { top: auto; bottom: 18px; transform: none; }
    .visionneuse__bouton--precedent { left: calc(50% - 64px); }
    .visionneuse__bouton--suivant   { right: calc(50% - 64px); }

    .encart { padding: 22px; }
}

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

@media print {
    .entete, .appel, .visionneuse, .lien-evitement, .pied__grille, .pied__legal { display: none !important; }
    .heros, .bandeau { min-height: 0; padding: 0 0 20px; background: none; color: #000; }
    .bandeau__voile { display: none; }
    .heros__titre, .bandeau__titre, .bandeau__chapo, .bandeau__signature { color: #000; text-shadow: none; }
    .section { padding: 20px 0; }
    .section--sable, .section--claire, .environnement { background: none; color: #000; }
    .pied { background: none; color: #000; }
    a { color: #000; }
}