/* ==========================================================
   POLICES AUTO-HEBERGEES  (ajoute le 30/09/2026)
   Fraunces et Inter etaient appelees chez Google Fonts, ce qui
   transmettait l'adresse IP des visiteurs a Google. Elles sont
   desormais servies depuis ce serveur.

   Fichiers variables : un seul fichier couvre toutes les graisses.
   Fraunces porte l'axe opsz, le navigateur ajuste donc le dessin
   a la taille du texte, comme avant.

   Fraunces est volontairement bornee a 400-600 : c'est la plage
   que Google servait. L'elargir ferait rendre en 700 les <strong>
   places dans un titre, ce qui changerait l'aspect.

   Les fichiers latin-ext ne sont telecharges que si un caractere
   hors Latin-1 apparait. En francais, cela n'arrive pas.
   ========================================================== */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('fonts/fraunces-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('fonts/fraunces-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   VARIABLES ET BASE
   ========================================================================== */
:root {
    /* Palette « Feuillage & Lauze » — validée le 25/08/2026.
       Contrastes WCAG AA vérifiés : vert/blanc 7,58:1, texte/fond 14,38:1,
       vert/lin 4,72:1, lauze/fond 5,61:1. */
    --primary-color: #2E5D46;   /* vert profond */
    --primary-dark:  #244937;   /* survol */
    --secondary-color: #D8CBB0; /* lin */
    --accent-color: #55636B;    /* lauze */
    --text-color: #1F2320;      /* encre */
    --text-soft: #5A625C;
    --bg-color: #F2F4F0;
    --card-bg: #FFFFFF;
    --dark-color: #1C2620;      /* nuit, pied de page */
    --hairline: #E0E4DD;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: var(--text-color);
    background-color: var(--bg-color);
}

h1, h2, h3, h4 {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

/* ==========================================================================
   EN-TÊTE (HEADER) ET NAVIGATION
   ========================================================================== */
header {
    background-color: white;
    padding: 0.8rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
}

header.nav-hidden {
    transform: translateY(-100%);
}

.logo {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-size: 1.3rem;
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
}

#nav-menu {
    display: flex;
    align-items: center;
}

#nav-menu a {
    margin-left: 1.5rem;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: color 0.3s;
}

#nav-menu a:hover {
    color: var(--primary-color);
}

.btn-reserver {
    background-color: var(--primary-color);
    color: white !important;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: bold;
}

.burger-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -0.5rem;
    padding: 0;
    line-height: 1;
    transform: translateY(-3px);
    background: none;
    border: none;
    font-size: 1.7rem;
    color: var(--primary-color);
    cursor: pointer;
    padding: 0;
}

/* ==========================================================================
   HERO SECTIONS (Bannières haut de page)
   ========================================================================== */
.hero {
    position: relative;
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    padding: 0 1rem;
    overflow: hidden;
}

.hero-inner {
    /* L'image vient de --hero, posee en style inline par chaque page ; le voile
       vient de --voile-haut / --voile-bas. Ce detour permet a la media query
       600px plus bas de basculer sur la version allegee --hero-m, ce qu'un
       background-image ecrit en inline ne permettrait pas. */
    background-image: linear-gradient(var(--voile-haut, rgba(0, 0, 0, 0.5)),
                                      var(--voile-bas,  rgba(0, 0, 0, 0.5))), var(--hero);
    background-size: cover;
    background-position: center;
    height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    padding: 0 1rem;
}

.hero-inner h1, .hero-content h1 {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    max-width: 800px;
}

@media (max-width: 768px) {
    .hero-inner h1, .hero-content h1 { font-size: 2.2rem; }
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    max-width: 650px;
    line-height: 1.5;
    margin-left: auto;
    margin-right: auto;
}

/* Carrousel Accueil */
.carousel-slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: var(--hero);
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity 1.5s ease-in-out; z-index: 1;
}
.carousel-slide.active { opacity: 1; }
.carousel-slide::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.45);
}

.indicator { cursor: pointer; touch-action: manipulation; }
.indicator:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.carousel-indicators {
    position: absolute; bottom: 30px; left: 50%;
    transform: translateX(-50%); display: flex; gap: 12px; z-index: 3;
}
.indicator {
    /* La barre reste haute de 4px ; le remplissage transparent porte la
       zone cliquable a 24px, minimum de WCAG 2.2 AA (critere 2.5.8).
       background-clip limite la peinture au contenu. */
    width: 45px; height: 4px; padding: 10px 0;
    background-color: rgba(255, 255, 255, 0.3); background-clip: content-box;
    border-radius: 2px; position: relative;
}
.indicator::after {
    content: ''; position: absolute; top: 10px; left: 0; height: 4px; width: 0;
    background-color: white; border-radius: 2px;
}
.indicator.active::after { animation: progressBar 6s linear forwards; }
@keyframes progressBar { 0% { width: 0; } 100% { width: 100%; } }

/* Preference « animations reduites » : plus de fondu ni de barre qui se
   remplit. Les photos changent quand meme, simplement sans transition. */
.hero.sans-animation .carousel-slide { transition: none; }
.hero.sans-animation .indicator.active::after { animation: none; width: 100%; }

/* ==========================================================================
   MISE EN PAGE GÉNÉRALE ET GRILLES
   ========================================================================== */
.section {
    padding: 3rem 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.intro-text {
    text-align: center;
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    /* Repartit les mots entre les lignes au lieu de remplir chaque ligne
       au maximum : plus de derniere ligne orpheline de trois mots. */
    text-wrap: balance;
}

.btn-large {
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    padding: 1rem 2rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    transition: background 0.3s;
}

.btn-large:hover { background-color: var(--primary-dark); }

.btn-outline {
    display: inline-block;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s;
}

.btn-outline:hover { background-color: var(--primary-color); color: white; }

/* ==========================================================================
   PAGE HÉBERGEMENTS
   ========================================================================== */
.filter-container { display: flex; justify-content: center; gap: 1rem; margin-bottom: 3rem; flex-wrap: wrap; }
.filter-btn { background: white; border: 2px solid var(--primary-color); color: var(--primary-color); padding: 0.6rem 1.5rem; border-radius: 30px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: all 0.3s ease; }
.filter-btn:hover, .filter-btn.active { background: var(--primary-color); color: white; }

.common-room { background-color: var(--card-bg); padding: 2.2rem; border-radius: 3px; margin-bottom: 4rem; text-align: left; border: 0; border-top: 2px solid var(--primary-color); box-shadow: 0 1px 3px rgba(28,38,32,0.06); }
.common-room h2 { color: var(--primary-color); margin-top: 0; font-size: 2rem; }

.gite-card { background: var(--card-bg); border-radius: 3px; overflow: hidden; box-shadow: 0 1px 3px rgba(28,38,32,0.05); margin-bottom: 3rem; padding: 2rem; animation: fadeIn 0.5s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.gite-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--secondary-color); padding-bottom: 1rem; margin-bottom: 1.5rem; }
.gite-header h2 { color: var(--primary-color); margin: 0; font-size: 1.8rem; }
.capacity-badge { background-color: var(--card-bg); color: var(--text-color); border: 1px solid var(--hairline); padding: 0.45rem 0.9rem; border-radius: 2px; font-weight: 600; font-size: 0.85rem; white-space: nowrap; }

.mini-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 1.5rem; }
.vignette { position: relative; display: block; }
.gallery-img { width: 100%; height: 160px; object-fit: cover; border-radius: 4px; background-color: #eee; }
/* Marqueur de preproduction : photo de definition insuffisante, a refaire sur place.
   A RETIRER AVANT LA MISE EN PRODUCTION : supprimer cette regle et les attributs
   data-refaire dans hebergements.php (grep data-refaire). */
.vignette[data-refaire]::after {
    content: "photo a refaire"; position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(150, 45, 40, 0.88); color: #fff; font-size: 0.68rem;
    letter-spacing: 0.06em; text-transform: uppercase; text-align: center;
    padding: 3px 0; border-radius: 0 0 4px 4px; pointer-events: none;
}

.gite-body { display: flex; gap: 2rem; }
.gite-desc { flex: 2; line-height: 1.6; }
.gite-features { flex: 1; background: var(--bg-color); padding: 1.5rem; border-radius: 3px; }

.gite-features ul { list-style: none; padding: 0; margin: 0; }
.gite-features ul li { margin-bottom: 0.8rem; font-size: 0.95rem; display: flex; align-items: flex-start; }
.gite-features ul li::before { content: '✓'; color: var(--primary-color); font-weight: bold; margin-right: 8px; flex-shrink: 0; }

/* ==========================================================================
   PAGE LE DOMAINE
   ========================================================================== */
.feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "media titre" "media contenu";
    column-gap: 3rem;
    align-content: center;
    margin-bottom: 5rem;
}
.feature-row > h2 { grid-area: titre; align-self: end; }
.feature-media { grid-area: media; }
.feature-content { grid-area: contenu; }
.feature-row.reverse { grid-template-areas: "titre media" "contenu media"; }
.feature-image { flex: 1; min-height: 350px; background-size: cover; background-position: center; border-radius: 3px; box-shadow: 0 2px 8px rgba(28,38,32,0.08); position: relative; }
.image-badge { position: absolute; bottom: 12px; left: 12px; background-color: rgba(255,255,255,0.94); color: var(--text-color); padding: 0.55rem 0.95rem; border-radius: 2px; font-weight: 600; font-size: 0.85rem; box-shadow: 0 1px 4px rgba(28,38,32,0.16); border: 0; }
.feature-row.reverse .image-badge { left: auto; right: 12px; }


.feature-row > h2 { color: var(--primary-color); font-size: 2.2rem; margin: 0 0 1rem; }
.feature-content p { line-height: 1.7; font-size: 1.05rem; margin-bottom: 1.5rem; }
.feature-content ul { padding-left: 1.2rem; line-height: 1.8; }
.feature-content ul li::marker { color: var(--primary-color); font-size: 1.2em; }

.cta-bottom { background-color: var(--card-bg); padding: 3rem 3rem 3.2rem; border-radius: 3px; text-align: left; margin-top: 2rem; border: 0; border-top: 2px solid var(--primary-color); box-shadow: 0 1px 3px rgba(28,38,32,0.06); }
.cta-bottom::before { content: "Privatisation"; display: block; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-color); margin-bottom: 0.9rem; font-family: 'Inter', sans-serif; }
.cta-bottom p { max-width: 46ch; color: var(--text-soft); }
.cta-bottom h2 { color: var(--primary-color); margin-top: 0; font-size: 2rem; }

/* ==========================================================================
   PAGE ENVIRONS
   ========================================================================== */
.location-highlight { background-color: var(--card-bg); padding: 2.2rem 2.4rem; border-radius: 3px; text-align: left; margin-bottom: 4rem; border: 0; border-left: 3px solid var(--primary-color); box-shadow: 0 1px 3px rgba(28,38,32,0.06); }
.location-highlight h2 { color: var(--primary-color); margin-top: 0; font-size: 1.8rem; }
.location-highlight p { font-size: 1.1rem; line-height: 1.6; margin-bottom: 0; }

.content-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-bottom: 4rem; }
.card { background: var(--card-bg); border-radius: 3px; overflow: hidden; box-shadow: 0 1px 3px rgba(28,38,32,0.06); padding: 2rem; display: flex; flex-direction: column; justify-content: flex-start; }
.card h3 { color: var(--primary-color); font-size: 1.5rem; margin-top: 0; margin-bottom: 1rem; border-bottom: 2px solid var(--secondary-color); padding-bottom: 0.5rem; }
.card p, .card ul { line-height: 1.6; color: var(--text-color); font-size: 0.95rem; }
.card-full { grid-column: span 2; }

.market-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; }
.market-item { background: var(--bg-color); padding: 1rem; border-radius: 3px; border-left: 3px solid var(--primary-color); }
.market-item strong { display: block; color: var(--primary-color); }


/* ==========================================================================
   GRILLE DES CARTES (accueil) — ajoutée le 24/08/2026
   Les cartes s'affichaient en pleine largeur, ce qui donnait des images
   de 1100x200, soit un ratio 5,5:1 très panoramique sur desktop.
   ========================================================================== */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2.5rem;
}
.card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    border-radius: 3px;
    margin-bottom: 1.25rem;
    display: block;
}

/* Logotype repris de l'ancien site */
.logo img { height: 34px; width: auto; display: block; }
footer .footer-logo { height: 30px; width: auto; margin-bottom: 0.8rem; }

/* ==========================================================================
   PAGE CONTACT
   ========================================================================== */
.contact-grid { display: flex; gap: 4rem; }
.contact-form-container { flex: 3; background: var(--card-bg); padding: 3rem; border-radius: 3px; box-shadow: 0 1px 3px rgba(28,38,32,0.05); }
.contact-form-container h2 { color: var(--primary-color); margin-top: 0; font-size: 2rem; margin-bottom: 0.5rem; }

.form-group { margin-bottom: 1.5rem; }
.form-row { display: flex; gap: 1.5rem; }
.form-row .form-group { flex: 1; }

label { display: block; margin-bottom: 0.5rem; font-weight: bold; font-size: 0.95rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea {
    width: 100%; padding: 0.8rem; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; font-size: 1rem; box-sizing: border-box;
}
textarea { resize: vertical; min-height: 150px; }
input[type="date"] { display: block; min-height: 3.1rem; background: #fff; color: inherit; } /* Safari iOS : hauteur et largeur sinon ignorees */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(85, 122, 70, 0.2); }

button[type="submit"] { background-color: var(--primary-color); color: white; border: none; padding: 1rem 2rem; font-size: 1.1rem; font-weight: bold; border-radius: 4px; cursor: pointer; transition: background 0.3s; width: 100%; }
button[type="submit"]:hover { background-color: var(--primary-dark); }

.contact-info-container { flex: 2; }
.info-card { background-color: var(--secondary-color); padding: 2rem; border-radius: 3px; margin-bottom: 2rem; }
.info-card:last-child { margin-bottom: 0; }
.info-card--clair { background-color: var(--card-bg); border: 1px solid var(--hairline); }
.info-card--clair { padding: 1.6rem 1.8rem; }
.info-card--clair .info-item { font-size: 0.9rem; line-height: 1.5; margin-bottom: 1.1rem; color: var(--text-soft); }
.info-card--clair .info-item strong { color: var(--text-color); font-size: 1rem; }
.info-card h3 { color: var(--primary-color); margin-top: 0; font-size: 1.5rem; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 0.5rem; }
.info-item { margin-bottom: 1.5rem; line-height: 1.5; }
.info-item strong { display: block; color: var(--text-color); margin-bottom: 0.3rem; font-size: 1.05rem; }
.info-item a { color: var(--primary-color); text-decoration: none; }
.info-item a:hover { text-decoration: underline; }




/* ==========================================================================
   PAGE MENTIONS LÉGALES
   ========================================================================== */
.legal-content { background: var(--card-bg); padding: 3rem; border-radius: 3px; box-shadow: 0 1px 3px rgba(28,38,32,0.05); line-height: 1.7; }
.legal-content h2 { color: var(--primary-color); font-size: 1.6rem; margin-top: 2rem; border-bottom: 2px solid var(--secondary-color); padding-bottom: 0.4rem; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content ul { color: #555; }

/* ==========================================================================
   PIED DE PAGE (FOOTER)
   ========================================================================== */
footer {
    background-color: var(--dark-color);
    color: white;
    padding: 3rem 1.5rem 1.5rem 1.5rem;
    margin-top: 4rem;
}

footer a {
    color: var(--secondary-color);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

footer a:hover {
    opacity: 0.8;
}

/* =========================================
   VISIONNEUSE D'IMAGES (LIGHTBOX)
   ========================================= */

/* Modifie le curseur au survol pour indiquer que c'est cliquable */
.gallery-img {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.gallery-img:hover {
    transform: scale(1.03); /* Petit effet de zoom au survol */
}





/* ==========================================================================
   RESPONSIVE MOBILE (Général)
   ========================================================================== */
@media (max-width: 768px) {
    .burger-btn { display: flex; }
    #nav-menu {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        background-color: white; flex-direction: column; padding: 1rem 0;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    #nav-menu.active { display: flex; }
    #nav-menu a { margin: 0.8rem 0; font-size: 1.1rem; }
    
    .gite-body { flex-direction: column; }
    .mini-gallery { grid-template-columns: repeat(2, 1fr); }
    .gite-header { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
    
    .feature-row, .feature-row:nth-child(even) { flex-direction: column; gap: 2rem; margin-bottom: 4rem; }
    .feature-image { width: 100%; min-height: 250px; }
    .image-badge { bottom: 10px; left: 10px !important; right: auto !important; }
    
    .content-grid { grid-template-columns: 1fr; }
    .grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .card-full { grid-column: span 1; }
    
    .contact-grid { flex-direction: column; gap: 2rem; }
    .visionneuse { padding: 1rem 0.5rem; }
    .visionneuse-prec, .visionneuse-suiv { top: auto; bottom: 3.5rem; transform: none; }
    .feature-media .feature-image { min-height: 240px; }
    .feature-thumbs .thumb { height: 58px; }
    .access-band { padding: 1.5rem; }
    .form-row { flex-direction: column; gap: 0; }
    .contact-form-container, .legal-content { padding: 2rem 1.5rem; }
}


/* ==========================================================================
   GALERIE DES BLOCS — page Le Domaine (24/08/2026)
   ========================================================================== */
.feature-media { display: flex; flex-direction: column; gap: 1.6rem; }
.feature-media .feature-image { flex: none; min-height: 360px; }
.feature-thumbs { display: flex; gap: 0.7rem; }
.feature-thumbs .thumb {
    flex: 1; height: 74px; padding: 0; border: 2px solid transparent; border-radius: 3px;
    background-size: cover; background-position: center; cursor: pointer;
    opacity: 0.62; transition: opacity 0.2s, border-color 0.2s;
}
.feature-thumbs .thumb:hover { opacity: 0.85; }
.feature-thumbs .thumb[aria-current="true"] { opacity: 1; border-color: var(--primary-color); }
.feature-thumbs .thumb:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 2px; }

/* Carte de situation — page d'accueil */
.region-map { max-width: 900px; margin: 2.5rem auto 0; }
.region-map img { width: 100%; height: auto; display: block; border-radius: 3px; box-shadow: 0 4px 15px rgba(0,0,0,0.06); }
.region-map figcaption { text-align: center; font-size: 0.75rem; color: #707065; margin-top: 0.45rem; margin-bottom: 2.75rem; }
.location-banner { text-align: center; }
.location-banner p { max-width: 780px; margin-left: auto; margin-right: auto; }

/* Filtres des hébergements */
.filter-feedback { font-size: 0.9rem; color: #707065; margin: 0.8rem 0 0; }
#liste-hebergements { scroll-margin-top: 90px; }

/* Bandeau d'accès — page Contact */
.contact-grid { align-items: flex-start; }
.access-band { margin-top: 3rem; background-color: var(--secondary-color); padding: 2.5rem; border-radius: 3px; }
.access-band h3 { color: var(--primary-color); margin-top: 0; font-size: 1.5rem; }
.access-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; align-items: start; }


/* Consentement RGPD du formulaire */
.consent-group { display: flex; gap: 0.7rem; align-items: flex-start; margin-bottom: 1.5rem; }
.consent-group input { margin-top: 0.25rem; flex-shrink: 0; }
.consent-group label { font-weight: normal; font-size: 0.9rem; line-height: 1.5; margin: 0; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* ==========================================================================
   PASTILLES D'ACCÈS RAPIDE — page Hébergements (25/08/2026)
   Remplacent les filtres : avec 6 hébergements, un accès direct vaut mieux
   qu'un filtre dont l'effet se produit hors de l'écran.
   ========================================================================== */
.chips { margin: 2rem 0 3rem; }
.chips-groupe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; }
.chips-groupe + .chips-groupe { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--hairline); }
.chips-label {
    flex: 0 0 100%; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--accent-color); margin-bottom: 0.2rem; font-weight: 500;
}
.chip {
    display: flex; flex-direction: column; gap: 0.15rem;
    padding: 0.7rem 1.2rem; border: 1px solid rgba(85,122,70,0.35); border-radius: 999px;
    background: var(--card-bg); text-decoration: none; min-height: 44px; justify-content: center;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.chip:hover, .chip:focus-visible { background: var(--secondary-color); border-color: var(--primary-color); transform: translateY(-1px); }
.chip-nom { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; color: var(--primary-color); font-size: 1rem; }
.chip-cap { font-size: 0.78rem; color: #6f6f63; }
.gite-card { scroll-margin-top: 100px; }

/* ==========================================================================
   VISIONNEUSE D'IMAGES
   ========================================================================== */
.gallery-img { cursor: zoom-in; touch-action: manipulation; }
.visionneuse { position: fixed; inset: 0; z-index: 1000; background: rgba(20,20,18,0.94); display: flex; align-items: center; justify-content: center; padding: 3rem 1rem; }
.visionneuse[hidden] { display: none; }
.visionneuse img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 3px; position: relative; z-index: 1; touch-action: manipulation; }
.visionneuse-legende { position: absolute; z-index: 2; bottom: 1.2rem; left: 0; right: 0; text-align: center; color: #e8e4da; font-size: 0.9rem; pointer-events: none; margin: 0; }
.visionneuse button {
    position: absolute; z-index: 3; background: rgba(20,25,22,0.72); color: #fff; border: none;
    width: 52px; height: 52px; border-radius: 50%; font-size: 1.6rem; cursor: pointer; line-height: 1;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    display: flex; align-items: center; justify-content: center;
}
.visionneuse button:hover { background: rgba(255,255,255,0.25); }
.visionneuse-fermer { top: 1.2rem; right: 1.2rem; }
.visionneuse-prec { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.visionneuse-suiv { right: 1.2rem; top: 50%; transform: translateY(-50%); }

/* ==========================================================================
   AVIS GOOGLE (bas de l'accueil) — compact, logo et etoiles en SVG local,
   aucun appel aux serveurs de Google.
   ========================================================================== */
.avis { background: var(--card-bg); padding-top: 2.6rem; padding-bottom: 2.8rem; }
.avis h2 { text-align: center; margin-bottom: 0.5rem; }
.avis-source {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 0.5rem; margin: 0 0 1.6rem; font-size: 0.88rem; color: var(--text-soft);
}
.avis-source strong { color: var(--text-color); font-size: 0.95rem; }
.google-g { flex: 0 0 auto; }
.avis-etoiles { display: inline-flex; gap: 1px; line-height: 0; }
.avis-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; max-width: 960px; margin: 0 auto; }
.avis-carte {
    margin: 0; padding: 1rem 1.15rem; background: var(--bg-color);
    border-left: 3px solid var(--primary-color); border-radius: 0 3px 3px 0;
    display: flex; flex-direction: column; justify-content: space-between;
}
.avis-carte blockquote { margin: 0; }
.avis-carte blockquote p { margin: 0 0 0.7rem; font-size: 0.83rem; line-height: 1.5; font-style: italic; color: var(--text-color); }
.avis-carte figcaption { font-weight: 600; color: var(--primary-color); font-size: 0.82rem; }
.avis-carte figcaption span { font-weight: 400; color: var(--text-soft); font-size: 0.78rem; }
.avis-carte figcaption span::before { content: " · "; }
.avis-lien { text-align: center; margin: 1.4rem 0 0; font-size: 0.85rem; }
.avis-lien a { color: var(--primary-color); }

/* Focus visible partout */
a:focus-visible, button:focus-visible, .gallery-img:focus-visible {
    outline: 3px solid var(--primary-color); outline-offset: 3px; border-radius: 3px;
}


/* Marqueurs de champs manquants — visibles en préproduction, à supprimer en prod */
.a-completer {
    background: #FDECE4; color: #8A3B1C; border-bottom: 2px dotted #C4643A;
    padding: 1px 5px; border-radius: 2px; font-style: italic; font-size: 0.95em;
}
.a-completer::before { content: "⚠ "; font-style: normal; }
.legal-maj { color: #707065; font-size: 0.9rem; margin-bottom: 2.5rem; }
.legal-content h3 { color: var(--text-color); font-size: 1.05rem; margin: 1.8rem 0 0.4rem; }
.legal-content ul { line-height: 1.9; }


/* ==========================================================================
   VIGNETTES DES SITES À VISITER — page Les Environs (25/08/2026)
   Les blocs .poi-photo attendent les vraies photos : remplacer le <span>
   par <img src="..." alt="..."> et supprimer la règle de repli ci-dessous.
   ========================================================================== */
.poi-h2 { margin-top: 3.5rem; }
.poi-intro { color: #6f6f63; max-width: 62ch; margin-bottom: 2rem; }
.poi-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; margin-bottom: 4rem; }
.poi {
    display: flex; flex-direction: column; background: var(--card-bg);
    border-radius: 3px; overflow: hidden; text-decoration: none; color: inherit;
    box-shadow: 0 1px 3px rgba(28,38,32,0.06); transition: transform 0.2s, box-shadow 0.2s;
}
.poi:hover, .poi:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,0.10); }
.poi-photo {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 3 / 2; background: linear-gradient(150deg, #E8EEE1, #D6E0CC);
    position: relative;
}
.poi-photo span {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-size: 1.35rem; color: var(--primary-color);
    opacity: 0.55; text-align: center; padding: 0 1rem;
}
.poi-photo::after {
    content: "photo à venir"; position: absolute; bottom: 8px; right: 10px;
    font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: #7d8b72;
}
/* height:auto est indispensable : sans lui, les attributs width/height de la balise
   fixent une hauteur definitive et l'aspect-ratio est ignore. */
.poi img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.poi-corps { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.2rem 1.3rem 1.4rem; }
.poi-titre { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-size: 1.15rem; color: var(--primary-color); display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.poi-titre em { font-family: inherit; font-style: normal; font-size: 0.78rem; color: #707065; white-space: nowrap; }
.poi-desc { font-size: 0.88rem; line-height: 1.55; color: var(--text-color); }
.poi-lien { font-size: 0.8rem; color: var(--primary-color); font-weight: bold; margin-top: 0.2rem; }
.poi-lien::after { content: " ↗"; }


/* Pied de page : grille explicite plutôt que space-between, qui collait les deux
   premières colonnes quand la première était plus large. */
.footer-cols {
    max-width: 1100px; margin: 0 auto 2.5rem; display: grid;
    grid-template-columns: 1.5fr 1fr 1fr; gap: 4.5rem; text-align: left;
}
.footer-cols > div { min-width: 0; }

/* Accès au domaine — sous la carte de situation, page d'accueil */
.acces { max-width: 900px; margin: 0 auto; text-align: left; }
/* Le bloc vit desormais dans sa propre section (.acces-section) : le filet
   et la marge haute qui le detachaient de la carte ne servent plus. */
.acces-titre { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-color); font-family: 'Inter', sans-serif; margin: 0 0 1.6rem; font-weight: 500; }
.acces-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2.2rem; align-items: start; }
.acces-item h3 { font-size: 1rem; margin: 0 0 0.5rem; color: var(--primary-color); }
.acces-item p { font-size: 0.9rem; line-height: 1.6; color: var(--text-soft); margin: 0; }

/* ==========================================================================
   RESPONSIVE — composants ajoutés après le bloc mobile d'origine.
   Ce bloc doit rester le dernier du fichier pour l'emporter sur les règles
   bureau déclarées plus haut.
   ========================================================================== */
@media (max-width: 768px) {
    .footer-cols { grid-template-columns: 1fr; gap: 2.5rem; }

    .feature-row, .feature-row.reverse { grid-template-columns: 1fr; grid-template-areas: "titre" "media" "contenu"; row-gap: 1.2rem; }
    .feature-media { width: 100%; }
    .feature-media .feature-image { min-height: 230px; }
    .feature-thumbs .thumb { height: 58px; }
    .feature-row > h2 { font-size: 1.7rem; margin-bottom: 0; }

    .grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .content-grid { grid-template-columns: 1fr; }
    .poi-grille { grid-template-columns: 1fr; gap: 1.2rem; }

    .chips-groupe { gap: 0.5rem; }
    .chip { flex: 1 1 45%; padding: 0.6rem 0.9rem; }

    .cta-bottom { padding: 2rem 1.5rem; }
    .location-highlight { padding: 1.5rem 1.4rem; }
    .access-band { padding: 1.5rem; }
    .contact-form-container { padding: 1.8rem 1.4rem; }
    .form-row { flex-direction: column; gap: 0; }
    .legal-content { padding: 1.8rem 1.4rem; }
    .region-map { margin-top: 1.5rem; }
    .acces { margin-top: 2.5rem; }
    .acces-cols { grid-template-columns: 1fr; gap: 1.6rem; }

    .visionneuse { padding: 1rem 0.5rem; }
    .visionneuse-prec, .visionneuse-suiv { top: auto; bottom: 3.5rem; transform: none; }
    .avis-grille { grid-template-columns: 1fr; }
}


/* ==========================================================================
   CARTE DE SITUATION — agrandissement au doigt (mobile uniquement)
   ========================================================================== */
.region-map { position: relative; }
.carte-zoom {
    display: none; position: absolute; inset: 0; width: 100%; height: 100%;
    border: 0; padding: 0; cursor: zoom-in; border-radius: 3px;
    background: linear-gradient(to bottom, rgba(28,38,32,0) 45%, rgba(28,38,32,0.62) 100%);
    color: #fff; align-items: flex-end; justify-content: center;
    font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 500;
    padding-bottom: 0.9rem; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.carte-zoom span { display: inline-flex; align-items: center; gap: 0.45rem; }
.carte-zoom svg { width: 16px; height: 16px; fill: currentColor; }

.carte-plein { position: fixed; inset: 0; z-index: 1000; background: var(--bg-color); display: flex; flex-direction: column; }
.carte-plein[hidden] { display: none; }
.carte-plein-barre {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.9rem 1rem; background: var(--card-bg); border-bottom: 1px solid var(--hairline);
}
.carte-plein-barre p { margin: 0; font-size: 0.82rem; color: var(--text-soft); }
.carte-plein-barre button {
    background: var(--primary-color); color: #fff; border: 0; border-radius: 3px;
    padding: 0.6rem 1.1rem; font-size: 0.9rem; font-family: inherit; cursor: pointer;
    touch-action: manipulation; min-height: 44px;
}
.carte-plein-zone { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; display: flex; align-items: center; }
.carte-plein-zone img { width: 1240px; max-width: none; flex: 0 0 auto; height: auto; display: block; }

/* CTA de bas de section (accueil) */
.section-cta { text-align: center; margin: 2.5rem 0 0; }

/* Encart "groupe plus restreint" et rappel de bas de page (Tarifs) */
/* Volontairement discret : sans fond ni bordure, pour ne pas se confondre
   avec les deux boites beiges "Ce qui est inclus" / "Informations pratiques"
   qui le suivent. Simple filet de separation et bouton en version mineure. */
.encart-groupe {
    max-width: 700px; margin: 0 auto 3rem; padding-top: 1.9rem;
    border-top: 1px solid var(--hairline); text-align: center;
}
.encart-groupe h3 {
    color: var(--primary-color); margin: 0 0 0.5rem;
    font-size: 1.1rem;
}
.encart-groupe p {
    font-size: 0.92rem; line-height: 1.6; color: var(--text-soft);
    margin: 0 auto 1.4rem; max-width: 600px;
}
.rappel-devis {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 1rem; margin: 0; padding-top: 0.5rem; text-align: center;
    color: var(--text-soft);
}

/* ==========================================================================
   BANDEAU DE MESSAGE TEMPORAIRE (saisi dans admin.php)
   ========================================================================== */
.bandeau-note {
    background: var(--secondary-color);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 0.7rem 1.5rem;
    text-align: center;
}
.bandeau-note p {
    margin: 0 auto;
    max-width: 900px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-color);
}

/* ==========================================================================
   PAGE D'ADMINISTRATION
   Pensee pour un telephone ou un iPad : c'est la que Marie-Therese s'en sert.
   ========================================================================== */
.page-admin { background: var(--bg-color); }
.admin-enveloppe { max-width: 720px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }

.admin-entete {
    display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
    padding: 0.5rem 0 1.4rem;
}
.admin-entete img { width: 170px; height: auto; display: block; }
.admin-entete span {
    font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-color);
}

.admin-message {
    margin: 0 0 1.4rem; padding: 0.9rem 1.1rem; border-radius: 3px;
    font-size: 0.92rem; line-height: 1.5;
}
.admin-message--ok     { background: #E9F0E6; border-left: 3px solid var(--primary-color); color: #234032; }
.admin-message--erreur { background: #FBEEEC; border-left: 3px solid #9A3B33; color: #6E2A24; }

.admin-carte {
    background: white; border: 1px solid var(--hairline); border-radius: 4px;
    padding: 1.5rem; margin-bottom: 1.2rem;
}
.admin-carte h1, .admin-carte h2 { margin: 0 0 0.3rem; font-size: 1.25rem; color: var(--primary-color); }
.admin-aide { margin: 0 0 1.3rem; font-size: 0.86rem; line-height: 1.5; color: var(--text-soft); }

.admin-duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.admin-champ { display: flex; flex-direction: column; }
.admin-champ label, .admin-pages legend, .admin-connexion label {
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.85rem;
    color: var(--text-color); margin-bottom: 0.4rem; padding: 0;
}
.admin-champ input, .admin-champ select, .admin-champ textarea,
.admin-connexion input[type="password"] {
    font-family: 'Inter', sans-serif; font-size: 1rem; min-height: 44px;
    padding: 0.55rem 0.7rem; border: 1px solid var(--hairline);
    border-radius: 3px; background: white; color: var(--text-color); width: 100%;
}
.admin-champ textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
.admin-champ input:focus-visible, .admin-champ select:focus-visible, .admin-champ textarea:focus-visible,
.admin-connexion input[type="password"]:focus-visible {
    outline: 2px solid var(--primary-color); outline-offset: 1px; border-color: var(--primary-color);
}

.admin-unite, .admin-date { display: flex; align-items: center; gap: 0.5rem; }
.admin-unite span { font-size: 1rem; color: var(--text-soft); flex: 0 0 auto; }
.admin-date input { flex: 0 0 5rem; }
.admin-date select { flex: 1 1 auto; }

.admin-apercu {
    margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--hairline);
    font-size: 0.88rem; color: var(--text-soft);
}
.admin-apercu strong { color: var(--text-color); }

.admin-pages { border: 0; margin: 1.4rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--hairline); }
.admin-cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.2rem; }
.admin-case {
    display: flex; align-items: center; gap: 0.6rem; min-height: 44px;
    font-size: 0.92rem; cursor: pointer;
}
.admin-case input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--primary-color); }
.admin-case--toutes {
    font-weight: 600; margin-bottom: 0.4rem; padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--hairline);
}

.admin-barre {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem; margin-top: 1.6rem;
}
/* La regle button[type="submit"] du site public impose width:100% :
   on la neutralise ici, sinon le bouton s'etire sur toute la largeur. */
.admin-enveloppe button {
    font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 600;
    display: inline-block; width: auto;
    min-height: 48px; padding: 0.8rem 1.8rem; border: 0; border-radius: 3px;
    background: var(--primary-color); color: white; cursor: pointer;
    transition: background 0.25s;
}
.admin-enveloppe button:hover { background: var(--primary-dark); }
.admin-enveloppe button:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.admin-liens { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: 0.88rem; }
.admin-liens a { color: var(--primary-color); }

.admin-connexion { max-width: 400px; }
.admin-connexion label { display: block; }
.admin-connexion button { width: 100%; margin-top: 1.2rem; }

.admin-deconnexion { margin-top: 2rem; text-align: center; }
.admin-deconnexion button {
    background: transparent; color: var(--text-soft); font-weight: 400;
    font-size: 0.88rem; text-decoration: underline; padding: 0.6rem 1rem;
}
.admin-deconnexion button:hover { background: transparent; color: var(--text-color); }

@media (prefers-reduced-motion: reduce) {
    .admin-enveloppe button { transition: none; }
}

/* ==========================================================================
   MESSAGES DU FORMULAIRE DE CONTACT
   ========================================================================== */
.form-message {
    margin: 0 0 1.8rem; padding: 1rem 1.2rem; border-radius: 3px;
    font-size: 0.92rem; line-height: 1.6;
}
.form-message p { margin: 0; }
.form-message p + p { margin-top: 0.6rem; }
.form-message a { color: inherit; font-weight: 600; }
.form-message--erreur {
    background: #FBEEEC; border-left: 3px solid #9A3B33; color: #6E2A24;
}
.form-message--info {
    background: var(--bg-color); border-left: 3px solid var(--accent-color); color: var(--text-color);
}
.form-group input:user-invalid,
.form-group textarea:user-invalid { border-color: #9A3B33; }
.form-aide { display: block; margin-top: 0.35rem; font-size: 0.8rem; color: var(--text-soft); font-weight: 400; }

/* ==========================================================================
   ONGLETS DE SAISON (page Tarifs)
   ========================================================================== */
.saison-onglets {
    display: flex; justify-content: center; gap: 0.35rem;
    max-width: 420px; margin: 0 auto 1rem; padding: 0.3rem;
    background: var(--secondary-color); border-radius: 999px;
}
.saison-onglet {
    flex: 1; border: 0; cursor: pointer; padding: 0.7rem 1.2rem; min-height: 44px;
    font-family: 'Inter', sans-serif; font-size: 0.92rem; font-weight: 600;
    color: var(--primary-color); background: transparent;
    border-radius: 999px; transition: background 0.25s, color 0.25s;
}
.saison-onglet:hover { background: rgba(255, 255, 255, 0.55); }
.saison-onglet.est-actif { background: var(--primary-color); color: #fff; }
.saison-onglet:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.saison-info {
    text-align: center; font-size: 0.85rem; color: var(--text-soft);
    margin: 0 0 2rem;
}
.saison-contact {
    max-width: 640px; margin: 0 auto 3rem; padding: 2.2rem 2rem;
    background: white; border: 2px solid var(--primary-color);
    border-radius: 8px; text-align: center;
}
.saison-cta { text-align: center; margin: 0 0 3rem; }
.saison-contact h3 { color: var(--primary-color); margin-top: 0; }
.saison-contact p { margin-bottom: 1.6rem; }
@media (prefers-reduced-motion: reduce) {
    .saison-onglet { transition: none; }
}

/* ---------- Page Conditions de location ---------- */
.cl-bloc {
    max-width: 820px; margin: 0 auto 2.5rem;
    padding-bottom: 2.2rem; border-bottom: 1px solid var(--hairline);
}
.cl-bloc:last-of-type { border-bottom: none; }
.cl-bloc h2 {
    font-size: 1.45rem; color: var(--primary-color);
    margin: 0 0 1rem;
}
.cl-bloc ul, .cl-bloc ol { padding-left: 1.4rem; line-height: 1.75; }
.cl-bloc li { margin-bottom: 0.7rem; }
.cl-etapes li { margin-bottom: 1rem; }
.cl-note {
    font-size: 0.9rem; color: var(--text-soft);
    background: var(--card-bg); border-left: 3px solid var(--secondary-color);
    padding: 0.9rem 1.1rem; margin: 1.2rem 0 0; border-radius: 0 3px 3px 0;
}
.cl-bloc--accent {
    background: var(--card-bg); border: 1px solid var(--hairline);
    border-radius: 3px; padding: 2rem 2.2rem;
}
.cl-tableau {
    width: 100%; border-collapse: collapse; margin: 1.4rem 0 0; font-size: 0.95rem;
}
.cl-tableau-titre {
    caption-side: top; text-align: left; font-weight: 600;
    color: var(--primary-color); padding-bottom: 0.5rem;
}
.cl-tableau th {
    text-align: left; background: var(--primary-color); color: #fff;
    font-weight: 600; padding: 0.7rem 0.9rem;
}
.cl-tableau td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--hairline); }
.cl-tableau tbody tr:last-child td { border-bottom: none; }
.cl-tableau td:last-child { font-weight: 600; color: var(--primary-dark); white-space: nowrap; }
.cl-foi {
    max-width: 820px; margin: 0 auto 2rem; text-align: center;
    font-size: 0.88rem; color: var(--text-soft); font-style: italic;
}

/* Questions frequentes (tarifs.php, partials/faq.php) */
.faq { max-width: 760px; margin: 0 auto 3rem; padding-top: 1.9rem; border-top: 1px solid var(--hairline); text-align: left; }
.faq h2 { text-align: center; color: var(--primary-color); font-size: 1.5rem; margin: 0 0 1.5rem; }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
    cursor: pointer; list-style: none; position: relative;
    padding: 1rem 2.2rem 1rem 0; font-weight: 600; color: var(--text-color);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+"; position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
    font-size: 1.4rem; font-weight: 400; color: var(--primary-color);
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--primary-color); }
.faq summary:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 2px; }
.faq details p { margin: 0 0 1.1rem; line-height: 1.65; color: var(--text-soft); }

@media (max-width: 768px) {
    .carte-zoom { display: flex; }

    /* Composants ajoutes apres le grand bloc mobile ci-dessus. Leurs regles
       de base sont ecrites plus haut mais APRES ce bloc-la : il faut donc
       que leurs declinaisons mobiles vivent ici, en fin de feuille, sinon
       elles sont ecrasees en silence. */
    .saison-onglets { max-width: none; }
    .saison-onglet { font-size: 0.86rem; padding: 0.7rem 0.6rem; }
    .saison-contact { padding: 1.6rem 1.2rem; }
    .rappel-devis { flex-direction: column; gap: 1.2rem; }

    .admin-duo { grid-template-columns: 1fr; }
    .admin-cases { grid-template-columns: 1fr; }
    .admin-carte { padding: 1.2rem; }
    .admin-barre { flex-direction: column; align-items: stretch; }
    .admin-barre button { width: 100%; }
    .admin-liens { justify-content: center; }

    /* Page Conditions de location */
    .cl-bloc--accent { padding: 1.4rem 1.2rem; }
    .cl-tableau { font-size: 0.88rem; }
    .cl-tableau th, .cl-tableau td { padding: 0.55rem 0.6rem; }
    .cl-tableau td:last-child { white-space: normal; }
}

/* Titres des colonnes du pied de page. Balises h2, pour ne sauter aucun
   niveau depuis le h1 des pages qui n'ont pas d'autre titre (merci, 404).
   La taille d'origine du h4 est conservee a l'identique. */
.footer-titre {
    font-family: Georgia, serif;
    color: var(--secondary-color);
    font-size: 1rem;
    font-weight: 400;
    margin: 0 0 1.33em;
}

/* Case de consentement : 13px au defaut du navigateur, portee a 24px,
   minimum de WCAG 2.2 AA (critere 2.5.8). */
#consentement { width: 24px; height: 24px; flex-shrink: 0; }

/* ==========================================================================
   DISPONIBILITÉS (tarifs.php, partials/calendrier.php)
   Ajoute le 06/10/2026. Donnees : planning Grands Gites, copie horaire.
   Vert = libre et cliquable, lin barre = reserve, gris = passe.
   ========================================================================== */
.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;
}
.dispos {
    max-width: 1000px; margin: 0 auto 3.5rem; padding-top: 1.9rem;
    border-top: 1px solid var(--hairline); text-align: center; position: relative;
}
.dispos h2 { color: var(--primary-color); font-size: 1.5rem; margin: 0 0 0.6rem; }
.dispos-intro { color: var(--text-soft); margin: 0 auto 1.2rem; max-width: 820px; font-size: 0.92rem; }
.dispos-sauter {
    position: absolute; left: 50%; transform: translateX(-50%); top: 0;
    padding: 0.5rem 1rem; background: var(--primary-color); color: #fff;
    border-radius: 3px; text-decoration: none; font-size: 0.88rem;
    opacity: 0; pointer-events: none;
}
.dispos-sauter:focus { opacity: 1; pointer-events: auto; outline: 3px solid var(--accent-color); outline-offset: 2px; }
.dispos-legende {
    list-style: none; padding: 0; margin: 0 0 1.6rem;
    display: flex; justify-content: center; gap: 1.6rem; font-size: 0.88rem; color: var(--text-soft);
}
.dispos-legende li { display: flex; align-items: center; gap: 0.45rem; }
.pastille { display: inline-block; width: 16px; height: 16px; border-radius: 3px; }
.pastille.libre { background: #fff; border: 2px solid var(--primary-color); }
.pastille.pris  { background: #E9E2D3; border: 2px solid #E9E2D3; }
/* Bandeau defilant : 3 mois sur ordinateur, 2 sur tablette, 1 sur telephone.
   Defilement natif (glisse du doigt, accroche mois par mois) ; script.js
   ajoute les fleches et rend inertes les mois hors champ. */
/* Ordinateur et tablette : fleches de part et d'autre, centrees sur les mois.
   Telephone : fleches sur la ligne du nom du mois (voir max-width 600px). */
.cal-defile { position: relative; --cal-ecart: 2rem; padding: 0 56px; }
.cal-piste {
    position: relative; display: flex; align-items: flex-start; gap: var(--cal-ecart);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    padding-bottom: 0.4rem;
}
.cal-defile.est-actif .cal-piste { scrollbar-width: none; }
.cal-defile.est-actif .cal-piste::-webkit-scrollbar { display: none; }
.cal-fleche {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 44px; height: 44px; padding: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--primary-color); border: 1px solid var(--primary-color);
    font-size: 1.7rem; line-height: 1; cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.cal-fleche[hidden] { display: none; }
.cal-fleche span { margin-top: -0.2rem; }
.cal-fleche--prec { left: 0; }
.cal-fleche--suiv { right: 0; }
.cal-fleche:hover:not(:disabled) { background: var(--primary-color); color: #fff; }
.cal-fleche:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 2px; }
.cal-fleche:disabled { opacity: 0.3; cursor: default; }
.cal-mois {
    flex: 0 0 calc((100% - 2 * var(--cal-ecart)) / 3); scroll-snap-align: start;
    border-collapse: separate; border-spacing: 3px;
    font-family: 'Inter', sans-serif; font-size: 0.86rem; table-layout: fixed;
}
.cal-mois caption {
    font-family: 'Fraunces', Georgia, serif; font-size: 1.08rem;
    color: var(--primary-color); padding: 0.35rem 0 0.7rem;
}
.cal-mois th { font-weight: 600; color: var(--text-soft); font-size: 0.74rem; padding: 0.2rem 0; }
.cal-mois abbr { text-decoration: none; }
.cal-mois td { height: 2.3rem; padding: 0; text-align: center; border-radius: 3px; }
.cal-mois td.passe { color: #A3A9A4; }
.cal-mois td.pris {
    background: #E9E2D3; color: var(--text-soft); text-decoration: line-through;
}
.cal-mois td.libre a {
    display: flex; align-items: center; justify-content: center; height: 100%;
    background: #fff; color: var(--primary-color); font-weight: 600; text-decoration: none;
    border: 1px solid #C9D6CE; border-radius: 3px;
    transition: background 0.15s, color 0.15s;
}
.cal-mois td.libre a:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.cal-mois td.libre a:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 1px; }
.dispos-note { font-size: 0.88rem; color: var(--text-soft); font-style: italic; margin: 1.8rem auto 1.4rem; max-width: 640px; }
.dispos-note:focus { outline: none; }
.dispos-cta { margin: 0; }
/* Ligne Arrivee / Depart / Personnes. L'aide et l'alerte suivent Depart dans
   le code (ordre de lecture sur telephone) ; sur ordinateur, order les
   renvoie sous la ligne entiere. */
.form-row--dates { flex-wrap: wrap; row-gap: 0; }
.form-row--dates .form-group { flex: 1 1 0; min-width: 0; }
.form-dates-suite { order: 5; flex: 0 0 100%; margin: -1rem 0 1.5rem; }
p.form-aide { margin: 0; }
p.form-aide--alerte {
    margin-top: 0.6rem; padding: 0.7rem 0.9rem; border-left: 3px solid #9A3B33;
    background: #FBEEEC; color: #6E2A24; font-size: 0.88rem; border-radius: 0 3px 3px 0;
}
p.form-aide--alerte a { color: inherit; font-weight: 600; }
.form-aide[hidden] { display: none; } /* .form-aide impose display: block */
/* Safari iOS donne aux champs date une largeur minimale qui deborde du cadre,
   et centre la valeur. Regle limitee a iOS (seul a lire -webkit-touch-callout). */
@supports (-webkit-touch-callout: none) {
    input[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; }
    input[type="date"]::-webkit-date-and-time-value { text-align: left; }
}
@media (max-width: 900px) {
    .cal-mois { flex-basis: calc((100% - var(--cal-ecart)) / 2); }
}
@media (max-width: 768px) {
    /* Formulaire de devis : aide et alerte des dates juste sous Depart */
    .form-dates-suite { order: 0; margin-top: -0.9rem; }
}
@media (max-width: 600px) {
    .cal-defile { max-width: 360px; margin: 0 auto; padding: 0; }
    .cal-fleche { top: -0.35rem; transform: none; }
    .cal-mois { flex-basis: 100%; }
    .cal-mois td { height: 2.6rem; }
    .dispos-legende { gap: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .cal-mois td.libre a, .cal-fleche { transition: none; }
}

/* Menu entre 769 et 1120 px (tablettes, petits portables) : l'intitule
   « Tarifs & Disponibilités » faisait passer le menu sur deux lignes des
   1100 px. On resserre un peu : il tient sur une ligne jusqu'a ~860 px.
   Ajoute le 06/10/2026. */
@media (min-width: 769px) and (max-width: 1120px) {
    header { padding-left: 1rem; padding-right: 1rem; }
    #nav-menu a { margin-left: 0.9rem; font-size: 0.9rem; }
    #nav-menu a.btn-reserver { padding: 0.45rem 0.75rem; }
    .logo img { height: 28px; }
}

/* ==========================================================================
   HÉROS SUR TÉLÉPHONE
   Sous 600px, on sert la declinaison 960px (--hero-m) : meme ratio donc
   cadrage identique sous background-size: cover, pour environ un quart du
   poids. Au-dela de 600px (tablettes, desktop) on garde l'image pleine.
   Ce bloc doit rester le dernier de la feuille.
   ========================================================================== */
@media (max-width: 600px) {
    .hero-inner {
        background-image: linear-gradient(var(--voile-haut, rgba(0, 0, 0, 0.5)),
                                          var(--voile-bas,  rgba(0, 0, 0, 0.5))),
                          var(--hero-m, var(--hero));
    }
    .carousel-slide { background-image: var(--hero-m, var(--hero)); }
}