/*
Theme Name: Le Clos des Voyageurs
Theme URI: https://web120.fr
Author: Web120
Description: Thème custom d'hôtel — moteur de réservation entièrement accessible. Standard d'accessibilité Web120, contrastes AAA.
Version: 1.0.0
Text Domain: clos
*/

/* =========================================================================
   Direction artistique — « reposant & sûr ».
   Minimalisme chaleureux : beaucoup d'air, typographie douce, aucun effet
   tape-à-l'œil. Ici, la clarté EST le luxe.

   Contrastes vérifiés :
   - encre #141C26 sur lin #F7F4EF ............ 16,1:1  (AAA)
   - blanc sur bleu lac #1B3A4B ............... 10,9:1  (AAA)
   - ardoise #3F4956 sur lin .................. 8,3:1   (AAA)
   - ardoise #3F4956 sur lin-2 #EFEAE2 ........ 7,6:1   (AAA — panneaux)
   - cuivre foncé #7E3A12 sur lin ............. 7,7:1   (AAA)
   - blanc sur cuivre foncé #7E3A12 ...........  8,4:1  (AAA)

   Le cuivre clair #9C4A1A de la charte ne donne que 6,2:1 avec du blanc :
   c'est en dessous du seuil AAA (7:1) pour du texte courant. Il reste donc
   DÉCORATIF (filets, icônes, ligne d'horizon, bordures), et tout ce qui porte
   du texte blanc passe au cuivre foncé. La couleur reste la même à l'œil ;
   c'est le contraste qui devient tenable.
   ========================================================================= */

:root {
    --lin:        #F7F4EF;
    --lin-2:      #EFEAE2;   /* panneaux */
    --pierre:     #E3DDD3;
    --encre:      #141C26;
    --ardoise:    #3F4956;   /* texte secondaire — 8,3:1 sur lin, 7,6:1 sur lin-2 */
    --lac:        #1B3A4B;
    --lac-2:      #122936;   /* survol */
    --lac-clair:  #2C5A72;   /* décor uniquement, jamais sous du texte */
    --cuivre:     #9C4A1A;   /* décoratif uniquement : jamais sous du texte blanc */
    --cuivre-2:   #7E3A12;   /* fond des boutons — blanc dessus : 8,4:1 */
    --cuivre-3:   #63300E;   /* survol des boutons — blanc dessus : 10,7:1 */
    --blanc:      #FFFFFF;
    --erreur:     #8C1D18;
    --succes:     #14532D;

    --police-titre: "Newsreader", Georgia, serif;
    --police-texte: "Public Sans", "Segoe UI", sans-serif;

    --rayon:       10px;
    --rayon-petit: 6px;
    --largeur:     1200px;
    --ombre:       0 1px 2px rgba(20, 28, 38, 0.05), 0 10px 30px rgba(20, 28, 38, 0.07);
    --ombre-haute: 0 2px 6px rgba(20, 28, 38, 0.08), 0 20px 48px rgba(20, 28, 38, 0.13);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

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

body {
    margin: 0;
    background: var(--lin);
    color: var(--encre);
    font-family: var(--police-texte);
    font-size: 1.075rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--police-titre);
    font-weight: 600;
    line-height: 1.2;
    color: var(--encre);
    margin: 0 0 0.6rem;
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

p {
    margin: 0 0 1rem;
    max-width: 72ch;
}

a {
    color: var(--lac);
    text-underline-offset: 3px;
}

a:hover {
    color: var(--cuivre-2);
}

:focus-visible {
    outline: 3px solid var(--cuivre);
    outline-offset: 3px;
    border-radius: 3px;
}

img,
svg {
    max-width: 100%;
}

img {
    height: auto;
    display: block;
}

.icone {
    flex: 0 0 auto;
    vertical-align: -0.15em;
}

/* La ligne d'horizon — signature du thème, purement décorative. */
.horizon {
    display: block;
    color: var(--cuivre);
    margin-top: 0.35rem;
    overflow: visible;
}

.fond-lac .horizon,
.hero .horizon,
.site-footer .horizon {
    color: var(--pierre);
}

.visually-hidden,
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.conteneur {
    width: min(100% - 2.4rem, var(--largeur));
    margin-inline: auto;
}

.section {
    padding-block: clamp(3rem, 7vw, 5.5rem);
}

.section-intro {
    max-width: 62ch;
    margin-bottom: 2.4rem;
}

.surtitre {
    font-family: var(--police-texte);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cuivre-2);
    margin: 0 0 0.3rem;
}

.fond-lac .surtitre,
.hero .surtitre,
.page-entete .surtitre,
.site-footer .surtitre {
    color: var(--pierre);
}

.fond-lac,
.page-entete {
    background: var(--lac);
    color: var(--blanc);
}

.fond-lac h2,
.fond-lac h3,
.page-entete h1,
.page-entete h2 {
    color: var(--blanc);
}

.fond-lac a,
.page-entete a {
    color: var(--blanc);
}

.fond-clair {
    background: var(--lin-2);
}

/* =========================================================================
   Liens d'évitement
   ========================================================================= */

.skip-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: 0.9rem 1.4rem;
    background: var(--encre);
    color: var(--blanc);
    font-weight: 700;
}

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

/* =========================================================================
   En-tête
   ========================================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--lin);
    border-bottom: 1px solid var(--pierre);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.4rem;
    padding-block: 0.9rem;
    flex-wrap: wrap;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--police-titre);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--encre);
    text-decoration: none;
    line-height: 1.15;
}

.logo:hover {
    color: var(--lac);
}

.logo-marque {
    display: block;
}

.logo-lieu {
    display: block;
    font-family: var(--police-texte);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ardoise);
}

.nav-principale ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-principale a {
    display: inline-block;
    padding: 0.5rem 0.1rem;
    color: var(--encre);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.nav-principale a:hover,
.nav-principale .current-menu-item > a {
    color: var(--lac);
    border-bottom-color: var(--cuivre);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

/* =========================================================================
   Boutons
   ========================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 50px;
    padding: 0.75rem 1.6rem;
    border: 2px solid transparent;
    border-radius: var(--rayon-petit);
    font: inherit;
    font-size: 1.05rem;   /* ≥ 18,5 px : le blanc sur cuivre est AAA à cette taille */
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-cuivre {
    background: var(--cuivre-2);
    border-color: var(--cuivre-2);
    color: var(--blanc);
}

.btn-cuivre:hover {
    background: var(--cuivre-3);
    border-color: var(--cuivre-3);
    color: var(--blanc);
}

.btn-lac {
    background: var(--lac);
    border-color: var(--lac);
    color: var(--blanc);
}

.btn-lac:hover {
    background: var(--lac-2);
    border-color: var(--lac-2);
    color: var(--blanc);
}

.btn-contour {
    background: transparent;
    border-color: var(--lac);
    color: var(--lac);
}

.btn-contour:hover {
    background: var(--lac);
    color: var(--blanc);
}

/* Sur fond sombre, le bouton contour doit rester lisible. */
.hero .btn-contour,
.page-entete .btn-contour,
.fond-lac .btn-contour,
.site-footer .btn-contour {
    border-color: var(--blanc);
    color: var(--blanc);
}

.hero .btn-contour:hover,
.page-entete .btn-contour:hover,
.fond-lac .btn-contour:hover,
.site-footer .btn-contour:hover {
    background: var(--blanc);
    color: var(--lac);
}

.btn-petit {
    min-height: 44px;
    padding: 0.5rem 1.1rem;
    font-size: 1rem;
}

/* =========================================================================
   Hero
   ========================================================================= */

.hero {
    background: var(--lac);
    color: var(--blanc);
    position: relative;
    overflow: hidden;
}

.hero-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
    width: min(100% - 2.4rem, var(--largeur));
    margin-inline: auto;
    padding-block: clamp(3rem, 7vw, 5.5rem);
}

.hero h1 {
    color: var(--blanc);
}

.hero-accroche {
    font-size: 1.2rem;
    color: var(--pierre);
    max-width: 46ch;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    list-style: none;
    margin: 1.8rem 0 0;
    padding: 0;
}

.hero-note {
    margin-top: 1.6rem;
    font-size: 0.98rem;
    color: var(--pierre);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.hero-visuel img {
    border-radius: var(--rayon);
    box-shadow: var(--ombre-haute);
    width: 100%;
}

.etoiles {
    display: inline-flex;
    gap: 0.15rem;
    color: var(--pierre);
}

/* =========================================================================
   En-tête de page intérieure
   ========================================================================= */

.page-entete {
    padding-block: clamp(2.6rem, 6vw, 4.2rem);
}

.page-entete p {
    color: var(--pierre);
}

.page-entete .conteneur > * {
    max-width: 66ch;
}

.bande-titre {
    background: var(--lac);
    color: var(--blanc);
    margin: 0;
    padding-block: clamp(2.4rem, 5vw, 3.6rem);
}

.bande-titre .conteneur {
    display: block;
}

/* =========================================================================
   Cartes génériques
   ========================================================================= */

.grille-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.carte {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--blanc);
    border: 1px solid var(--pierre);
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: var(--ombre);
}

.carte-visuel img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.carte-corps {
    padding: 1.4rem;
    flex: 1;
}

.carte h3 {
    margin-bottom: 0.4rem;
}

.carte p {
    color: var(--ardoise);
    margin-bottom: 0;
}

.carte-icone {
    color: var(--cuivre-2);
    margin-bottom: 0.6rem;
}

.apparition {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.apparition.visible {
    opacity: 1;
    transform: none;
}

/* =========================================================================
   Les chambres
   ========================================================================= */

.chambres-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2rem;
}

.chambre {
    display: grid;
    grid-template-columns: minmax(240px, 380px) 1fr;
    gap: 0;
    background: var(--blanc);
    border: 1px solid var(--pierre);
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: var(--ombre);
}

.chambre-visuel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.chambre-corps {
    padding: clamp(1.4rem, 3vw, 2.2rem);
}

.chambre-entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}

.chambre-prix {
    font-family: var(--police-titre);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--lac);
    white-space: nowrap;
    margin: 0;
}

.chambre-prix span {
    font-family: var(--police-texte);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ardoise);
    display: block;
    text-align: right;
}

.chambre-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.4rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    color: var(--ardoise);
    font-size: 0.98rem;
}

.chambre-meta li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.chambre-equipements {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 1rem 0;
    padding: 0;
}

.chambre-equipements li {
    padding: 0.25rem 0.7rem;
    background: var(--lin-2);
    border: 1px solid var(--pierre);
    border-radius: 999px;
    font-size: 0.9rem;
    color: var(--encre);
}

.chambre-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.2rem;
}

/* Badge d'accessibilité — le texte porte l'information, jamais la couleur seule. */
.badge-acces {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 700;
}

.badge-acces.badge-acces-oui {
    background: #DCEFE3;
    color: var(--succes);          /* 7,6:1 — AAA */
    border: 1px solid var(--succes);
}

.badge-acces.badge-acces-non {
    background: #F6E3E1;
    color: var(--erreur);          /* 7,4:1 — AAA */
    border: 1px solid var(--erreur);
}

/* =========================================================================
   Fiche d'accessibilité d'une chambre — le cœur de l'argumentaire.
   ========================================================================= */

.fiche-acces {
    background: var(--lin-2);
    border: 1px solid var(--pierre);
    border-left: 5px solid var(--cuivre);
    border-radius: var(--rayon);
    padding: clamp(1.4rem, 3vw, 2.2rem);
    margin-top: 1.6rem;
}

.fiche-acces h3,
.fiche-acces h2 {
    margin-top: 0;
}

.fiche-acces-liste {
    list-style: none;
    margin: 1.2rem 0 0;
    padding: 0;
    display: grid;
    gap: 1.1rem;
}

.fiche-acces-liste > li {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
}

.fiche-acces-liste .icone {
    color: var(--lac);
    margin-top: 0.25rem;
}

.fiche-acces-titre {
    font-weight: 700;
    margin: 0 0 0.15rem;
}

.fiche-acces-liste p {
    margin: 0;
    color: var(--ardoise);
    max-width: 68ch;
}

/* Ce qui n'est PAS accessible : dit clairement, jamais caché. */
.acces-limite {
    background: #F6E3E1;
    border: 1px solid var(--erreur);
    border-radius: var(--rayon-petit);
    padding: 1rem 1.2rem;
    margin-top: 1.2rem;
}

.acces-limite .fiche-acces-titre,
.acces-limite p {
    color: var(--erreur);
}

.acces-limite p {
    margin: 0;
}

/* =========================================================================
   Le moteur de réservation
   ========================================================================= */

.resa {
    max-width: 900px;
}

.etapes-resa {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    list-style: none;
    margin: 0 0 2.4rem;
    padding: 0;
    counter-reset: etape;
}

.etapes-resa li {
    flex: 1 1 170px;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    background: var(--lin-2);
    border: 1px solid var(--pierre);
    border-radius: var(--rayon-petit);
    color: var(--ardoise);
    font-size: 0.98rem;
    font-weight: 600;
}

.etapes-resa .etape-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: var(--pierre);
    color: var(--encre);
    font-weight: 700;
    font-size: 0.95rem;
}

.etapes-resa li[aria-current="step"] {
    background: var(--lac);
    border-color: var(--lac);
    color: var(--blanc);
}

.etapes-resa li[aria-current="step"] .etape-numero {
    background: var(--cuivre-2);
    color: var(--blanc);
}

.etapes-resa li.etape-faite {
    background: var(--blanc);
    border-color: var(--lac);
    color: var(--lac);
}

.etapes-resa li.etape-faite .etape-numero {
    background: var(--lac);
    color: var(--blanc);
}

.resa-bloc {
    background: var(--blanc);
    border: 1px solid var(--pierre);
    border-radius: var(--rayon);
    padding: clamp(1.4rem, 3vw, 2.4rem);
    box-shadow: var(--ombre);
}

.resa-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 1.8rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--pierre);
}

fieldset {
    border: 0;
    margin: 0 0 1.6rem;
    padding: 0;
}

legend {
    font-family: var(--police-titre);
    font-size: 1.35rem;
    font-weight: 600;
    padding: 0;
    margin-bottom: 0.8rem;
}

.champs-ligne {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem 1.4rem;
}

/* =========================================================================
   Le calendrier — SEULE exception au « pas de tableau » de tout le projet.
   Un calendrier est une vraie donnée tabulaire : les jours sont en colonnes
   (lundi… dimanche), les semaines en lignes. Le rendre en liste mentirait
   sur sa structure et priverait le lecteur d'écran de la navigation par
   cellule. On le balise donc proprement : caption, th scope="col", et chaque
   jour est un <button> dont le libellé complet est lu (« Mardi 14 juillet
   2026, disponible, 129 euros »).
   Il ne REMPLACE jamais les champs date natifs : il les complète.
   ========================================================================= */

.calendrier {
    margin-top: 1.6rem;
    background: var(--lin-2);
    border: 1px solid var(--pierre);
    border-radius: var(--rayon);
    padding: 1.2rem;
}

.calendrier-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.calendrier-mois {
    font-family: var(--police-titre);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.calendrier-nav {
    display: flex;
    gap: 0.5rem;
}

.calendrier-nav button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--lac);
    border-radius: var(--rayon-petit);
    background: var(--blanc);
    color: var(--lac);
    cursor: pointer;
}

.calendrier-nav button:hover {
    background: var(--lac);
    color: var(--blanc);
}

.calendrier table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.calendrier caption {
    text-align: left;
    color: var(--ardoise);
    font-size: 0.95rem;
    padding-bottom: 0.8rem;
}

.calendrier th {
    padding: 0.4rem 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ardoise);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.calendrier td {
    padding: 2px;
    text-align: center;
    vertical-align: top;
}

.jour {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 100%;
    min-height: 52px;
    padding: 0.3rem 0.1rem;
    border: 1px solid var(--pierre);
    border-radius: var(--rayon-petit);
    background: var(--blanc);
    color: var(--encre);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.15;
}

.jour:hover {
    border-color: var(--lac);
    background: var(--lac);
    color: var(--blanc);
}

.jour:hover .jour-prix {
    color: var(--blanc);
}

.jour-prix {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ardoise);
}

/* Jour non réservable. WCAG exempte les contrôles désactivés du critère de
   contraste : on le respecte quand même (9:1). Et l'information n'est jamais
   portée par la seule couleur — le libellé lu dit « complet, non réservable »,
   et le chiffre est barré. */
.jour[disabled] {
    background: var(--pierre);
    color: #2E3640;
    border-color: var(--pierre);
    cursor: not-allowed;
    text-decoration: line-through;
}

.jour[aria-pressed="true"] {
    background: var(--cuivre-2);
    border-color: var(--cuivre-2);
    color: var(--blanc);
}

.jour[aria-pressed="true"] .jour-prix {
    color: var(--blanc);
}

.jour-dans-sejour {
    background: #D8E3E9;
    border-color: var(--lac-clair);
}

.calendrier-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.4rem;
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    font-size: 0.95rem;
    color: var(--ardoise);
}

.calendrier-legende li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.calendrier-statut {
    margin: 1rem 0 0;
    font-weight: 600;
    color: var(--lac);
}

/* =========================================================================
   Formulaires
   ========================================================================= */

.champ {
    margin-bottom: 1.2rem;
}

.champ label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.champ input,
.champ select,
.champ textarea {
    width: 100%;
    min-height: 50px;
    padding: 0.7rem 0.9rem;
    border: 2px solid var(--pierre);
    border-radius: var(--rayon-petit);
    background: var(--blanc);
    color: var(--encre);
    font: inherit;
}

.champ input:focus,
.champ textarea:focus,
.champ select:focus {
    border-color: var(--lac);
}

.champ .aide {
    margin: 0.3rem 0 0;
    font-size: 0.94rem;
    color: var(--ardoise);
}

.champ-erreur input,
.champ-erreur textarea,
.champ-erreur select {
    border-color: var(--erreur);
}

.message-erreur {
    margin: 0.35rem 0 0;
    color: var(--erreur);
    font-weight: 600;
    font-size: 0.96rem;
}

.form-erreurs {
    border: 2px solid var(--erreur);
    border-radius: var(--rayon-petit);
    background: #F9EDEC;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1.6rem;
}

.form-erreurs-titre {
    margin: 0 0 0.5rem;
    font-weight: 700;
    color: var(--erreur);
}

.form-erreurs ul {
    margin: 0;
    padding-left: 1.3rem;
}

.form-erreurs a {
    color: var(--erreur);
    font-weight: 600;
}

.form-succes {
    border: 2px solid var(--succes);
    border-radius: var(--rayon-petit);
    background: #E7F3EC;
    color: var(--succes);
    padding: 1.1rem 1.3rem;
    font-weight: 600;
}

/* Cases à cocher et boutons radio */
.liste-cases {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}

.liste-cases label {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.9rem 1.1rem;
    background: var(--blanc);
    border: 2px solid var(--pierre);
    border-radius: var(--rayon-petit);
    cursor: pointer;
    font-weight: 500;
}

.liste-cases label:hover {
    border-color: var(--lac);
}

.liste-cases input {
    width: 1.35rem;
    height: 1.35rem;
    margin: 0.15rem 0 0;
    flex: 0 0 auto;
    accent-color: var(--cuivre);
}

.liste-cases input:checked + span {
    font-weight: 700;
}

/* Le choix d'une chambre dans le tunnel */
.choix-chambres {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.2rem;
}

.choix-chambre {
    border: 2px solid var(--pierre);
    border-radius: var(--rayon);
    background: var(--blanc);
    overflow: hidden;
}

.choix-chambre:has(input:checked) {
    border-color: var(--cuivre);
    box-shadow: var(--ombre);
}

.choix-chambre > label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding: 1.2rem;
    cursor: pointer;
    align-items: start;
}

.choix-chambre input[type="radio"] {
    width: 1.4rem;
    height: 1.4rem;
    margin: 0.3rem 0 0;
    accent-color: var(--cuivre);
}

.choix-chambre-titre {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.choix-chambre h3 {
    margin: 0;
}

.choix-chambre-details {
    margin: 0 1.2rem 1.2rem;
}

/* Récapitulatif */
.recap {
    list-style: none;
    margin: 0;
    padding: 0;
}

.recap > li {
    display: flex;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--pierre);
}

.recap dt {
    font-weight: 600;
    color: var(--ardoise);
}

.recap dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
}

.recap-total {
    display: flex;
    justify-content: space-between;
    gap: 1.2rem;
    padding-top: 1rem;
    margin-top: 0.4rem;
    border-top: 2px solid var(--encre);
    font-family: var(--police-titre);
    font-size: 1.5rem;
    font-weight: 700;
}

.paiement-note {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 1rem 1.2rem;
    margin-bottom: 1.4rem;
    background: var(--lin-2);
    border: 1px solid var(--pierre);
    border-radius: var(--rayon-petit);
    color: var(--ardoise);
    font-size: 0.98rem;
}

.paiement-note .icone {
    color: var(--lac);
    margin-top: 0.15rem;
}

.confirmation {
    text-align: left;
}

.confirmation-marque {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--succes);
    color: var(--blanc);
    margin-bottom: 1.2rem;
}

/* =========================================================================
   Avis
   ========================================================================= */

.carrousel {
    position: relative;
    /* La piste défile horizontalement en interne ; sans ce clip, ses cartes
       élargissent la page entière (débordement de 780 px sur mobile).
       « clip » plutôt que « hidden » : le débordement vertical reste visible,
       donc les ombres et les anneaux de focus ne sont pas rognés. */
    overflow-x: clip;
}

.carrousel-piste {
    display: flex;
    gap: 1.4rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 0.6rem;
    list-style: none;
    margin: 0;
    padding-inline: 0;
    scrollbar-width: thin;
}

.carrousel-piste > li {
    flex: 0 0 min(360px, 82%);
    scroll-snap-align: start;
}

.avis {
    height: 100%;
    background: var(--blanc);
    /* La carte est blanche même dans une section sombre : elle doit donc
       reprendre la couleur d'encre, sans quoi le texte hérite du blanc de la
       section et devient invisible. */
    color: var(--encre);
    border: 1px solid var(--pierre);
    border-left: 4px solid var(--cuivre);
    border-radius: var(--rayon);
    padding: 1.6rem;
    box-shadow: var(--ombre);
}

.fond-lac .avis blockquote,
.fond-lac .avis p {
    color: var(--encre);
}

.fond-lac .avis .avis-auteur {
    color: var(--ardoise);
}

.fond-lac .avis {
    border-color: var(--lac-clair);
    border-left-color: var(--pierre);
}

.avis-note {
    display: flex;
    gap: 0.15rem;
    color: var(--cuivre);
    margin-bottom: 0.7rem;
}

.avis blockquote {
    margin: 0 0 1rem;
    font-size: 1.05rem;
}

.avis-auteur {
    margin: 0;
    font-weight: 700;
    color: var(--ardoise);
}

.carrousel-commandes {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.4rem;
}

.carrousel-bouton,
.carrousel-pause {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 2px solid var(--lac);
    border-radius: var(--rayon-petit);
    background: var(--blanc);
    color: var(--lac);
    cursor: pointer;
}

.carrousel-bouton:hover,
.carrousel-pause:hover {
    background: var(--lac);
    color: var(--blanc);
}

.fond-lac .carrousel-bouton,
.fond-lac .carrousel-pause {
    border-color: var(--blanc);
    background: transparent;
    color: var(--blanc);
}

.fond-lac .carrousel-bouton:hover,
.fond-lac .carrousel-pause:hover {
    background: var(--blanc);
    color: var(--lac);
}

.carrousel-points {
    display: flex;
    gap: 0.4rem;
    list-style: none;
    margin: 0 0 0 0.4rem;
    padding: 0;
}

.carrousel-point {
    width: 14px;
    height: 14px;
    padding: 0;
    border: 2px solid var(--lac);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.carrousel-point[aria-current="true"] {
    background: var(--cuivre);
    border-color: var(--cuivre);
}

.fond-lac .carrousel-point {
    border-color: var(--blanc);
}

.fond-lac .carrousel-point[aria-current="true"] {
    background: var(--pierre);
    border-color: var(--pierre);
}

/* =========================================================================
   Accordéons — details/summary uniquement (standard Web120)
   ========================================================================= */

.accordeons {
    display: grid;
    gap: 0.8rem;
}

details.accordeon {
    background: var(--blanc);
    border: 1px solid var(--pierre);
    border-left: 4px solid var(--lac);
    border-radius: var(--rayon-petit);
    overflow: hidden;
}

details.accordeon summary {
    padding: 1rem 1.3rem;
    font-weight: 700;
    color: var(--lac);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 52px;
}

details.accordeon summary::-webkit-details-marker {
    display: none;
}

details.accordeon summary::after {
    content: "+";
    font-size: 1.5rem;
    line-height: 1;
    color: var(--cuivre-2);
}

details.accordeon[open] summary::after {
    content: "–";
}

details.accordeon summary:hover {
    background: var(--lin-2);
}

.accordeon-contenu {
    padding: 0 1.3rem 1.3rem;
}

.accordeon-contenu p:last-child {
    margin-bottom: 0;
}

/* =========================================================================
   Articles
   ========================================================================= */

.article-meta {
    color: var(--ardoise);
    font-size: 0.95rem;
    margin: 0 0 0.3rem;
}

.article-corps-texte {
    max-width: 70ch;
}

.article-corps-texte h2 {
    margin-top: 2rem;
}

.article-corps-texte blockquote {
    margin: 1.6rem 0;
    padding: 1rem 1.4rem;
    border-left: 4px solid var(--cuivre);
    background: var(--lin-2);
    font-size: 1.1rem;
}

.article-visuel-grand img {
    width: 100%;
    max-height: 440px;
    object-fit: cover;
    border-radius: var(--rayon);
    margin-bottom: 2rem;
}

.article-pied {
    margin-top: 2.4rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--pierre);
}

.pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination a,
.pagination .current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: 0 0.8rem;
    border: 2px solid var(--pierre);
    border-radius: var(--rayon-petit);
    background: var(--blanc);
    color: var(--lac);
    text-decoration: none;
    font-weight: 700;
}

.pagination .current {
    background: var(--lac);
    border-color: var(--lac);
    color: var(--blanc);
}

.zone-afficher-plus {
    margin-top: 2rem;
    text-align: center;
}

.afficher-plus-statut {
    margin-top: 0.8rem;
    color: var(--ardoise);
    font-weight: 600;
}

/* =========================================================================
   Deux colonnes
   ========================================================================= */

.deux-colonnes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.6rem, 4vw, 3.4rem);
    align-items: center;
}

.deux-colonnes .visuel img {
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    width: 100%;
}

/* Le titre reste le premier élément du DOM ; seule l'image change de côté. */
@media (min-width: 861px) {
    .colonnes-inversees .visuel {
        order: -1;
    }
}

/* =========================================================================
   Contact
   ========================================================================= */

.contact-grille {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(1.8rem, 4vw, 3.4rem);
    align-items: start;
}

.contact-infos {
    background: var(--lin-2);
    border: 1px solid var(--pierre);
    border-radius: var(--rayon);
    padding: 1.8rem;
}

.contact-infos ul {
    list-style: none;
    margin: 0 0 1.2rem;
    padding: 0;
    display: grid;
    gap: 1.1rem;
}

.contact-infos li {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
}

.contact-infos .icone {
    color: var(--cuivre-2);
    margin-top: 0.2rem;
}

/* =========================================================================
   Trajet gare → hôtel (texte + audio)
   ========================================================================= */

.trajet {
    background: var(--blanc);
    border: 1px solid var(--pierre);
    border-radius: var(--rayon);
    padding: clamp(1.4rem, 3vw, 2.2rem);
}

.trajet ol {
    margin: 1.2rem 0 0;
    padding-left: 1.4rem;
    display: grid;
    gap: 0.9rem;
}

.trajet li {
    padding-left: 0.3rem;
}

.trajet audio {
    width: 100%;
    margin-top: 1rem;
}

/* =========================================================================
   Pied de page
   ========================================================================= */

.site-footer {
    background: var(--encre);
    color: var(--lin);
    padding-block: 3.4rem 1.6rem;
    margin-top: 0;
}

.site-footer h3 {
    color: var(--blanc);
    font-size: 1.05rem;
    margin-bottom: 0.9rem;
}

.site-footer a {
    color: var(--lin);
}

.site-footer a:hover {
    color: var(--blanc);
}

.site-footer p {
    color: var(--pierre);
}

.footer-grille {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 2rem;
}

.footer-grille ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.footer-bas {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    margin-top: 2.6rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.95rem;
}

.site-footer .champ label {
    color: var(--blanc);
}

/* Le texte d'aide doit rester lisible sur fond sombre. */
.site-footer .champ .aide,
.fond-lac .champ .aide {
    color: var(--pierre);
}

.lien-haut {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}

/* =========================================================================
   Responsive
   ========================================================================= */

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

@media (max-width: 860px) {
    .hero-grille,
    .deux-colonnes,
    .contact-grille {
        grid-template-columns: 1fr;
    }

    .hero-visuel {
        order: -1;
    }

    .chambre {
        grid-template-columns: 1fr;
    }

    .header-inner {
        justify-content: center;
        text-align: center;
    }

    .nav-principale ul {
        justify-content: center;
    }
}

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

    .etapes-resa li {
        flex-basis: 100%;
    }

    .calendrier {
        padding: 0.7rem;
    }

    .jour {
        min-height: 48px;
        font-size: 0.95rem;
    }

    .jour-prix {
        display: none;   /* le prix reste dans le libellé lu par le lecteur d'écran */
    }

    .choix-chambre > label {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   Préférences d'accessibilité — barre « arrêter les animations »
   et gestionnaire de cookies (mu-plugin Web120, commun à tous les sites).
   Le panneau de réglages est un <details> natif : aucun accordéon maison.
   ========================================================================= */

.barre-preferences {
    background: var(--encre);
    color: var(--blanc);
    font-size: 0.98rem;
}

.barre-preferences-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem 1.2rem;
    padding-block: 0.4rem;
}

.barre-preferences-form {
    margin: 0;
}

.barre-preferences-etat {
    margin: 0;
    font-weight: 700;
}

.btn-preference {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.35rem 1rem;
    border: 2px solid var(--blanc);
    border-radius: var(--rayon-petit);
    background: transparent;
    color: var(--blanc);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.btn-preference:hover {
    background: var(--blanc);
    color: var(--encre);
}

.btn-preference[aria-pressed="true"] {
    background: var(--cuivre-2);
    color: var(--blanc);
    border-color: var(--cuivre-2);
}

body.animations-desactivees *,
body.animations-desactivees *::before,
body.animations-desactivees *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
}

body.animations-desactivees .apparition {
    opacity: 1 !important;
    transform: none !important;
}

body.animations-desactivees .carrousel-piste {
    scroll-behavior: auto !important;
}

.bandeau-cookies {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: var(--lac);
    color: var(--blanc);
    box-shadow: 0 -6px 28px rgba(20, 28, 38, 0.35);
    max-height: 85vh;
    overflow-y: auto;
}

.bandeau-cookies-inner {
    padding-block: 1.4rem;
}

.bandeau-cookies h2 {
    color: var(--blanc);
    font-size: 1.35rem;
    margin-bottom: 0.4rem;
}

.bandeau-cookies h3 {
    color: var(--blanc);
    font-size: 1.1rem;
    margin-top: 1.2rem;
}

.bandeau-cookies p {
    max-width: 70ch;
}

.bandeau-cookies-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 1.2rem 0 0;
    list-style: none;
    padding: 0;
}

.btn-cookies-accepter {
    background: var(--cuivre-2);
    color: var(--blanc);
    border: 2px solid var(--cuivre-2);
}

.btn-cookies-accepter:hover {
    background: var(--blanc);
    color: var(--encre);
    border-color: var(--blanc);
}

.btn-cookies-refuser {
    background: transparent;
    color: var(--blanc);
    border: 2px solid var(--blanc);
}

.btn-cookies-refuser:hover {
    background: var(--blanc);
    color: var(--lac);
}

.bandeau-cookies-reglages {
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 2px solid rgba(255, 255, 255, 0.35);
    background: transparent;
    border-left: 0;
    border-radius: 0;
}

.bandeau-cookies-reglages > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0.35rem 1rem;
    border: 2px solid var(--blanc);
    border-radius: var(--rayon-petit);
    background: transparent;
    color: var(--blanc);
    font-weight: 700;
    cursor: pointer;
}

.bandeau-cookies-reglages > summary:hover {
    background: var(--blanc);
    color: var(--lac);
}

.bandeau-cookies-reglages > summary::after {
    content: none;
}

.cookies-categories {
    display: grid;
    gap: 1rem;
    margin: 1.2rem 0;
    list-style: none;
    padding: 0;
}

.cookies-categorie-titre {
    font-weight: 700;
    margin: 0 0 0.2rem;
}

.cookies-categorie-desc {
    margin: 0.2rem 0 0;
    font-size: 0.96rem;
}

.champ-case {
    margin: 0;
}

.champ-case label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    cursor: pointer;
}

.champ-case input[type="checkbox"] {
    width: 1.35rem;
    height: 1.35rem;
    accent-color: var(--cuivre);
}

.lien-cookies-reouvrir {
    margin: 0;
    padding: 1rem 0 2rem;
    text-align: center;
    background: var(--lin);
}

.lien-cookies-reouvrir .btn-preference {
    border-color: var(--lac);
    color: var(--lac);
}

.lien-cookies-reouvrir .btn-preference:hover {
    background: var(--lac);
    color: var(--blanc);
}

.contenu-externe-bloque {
    border: 3px dashed var(--lac);
    border-radius: var(--rayon-petit);
    padding: 1.4rem;
    background: var(--lin-2);
    color: var(--encre);
}

.contenu-externe-message {
    font-weight: 700;
    margin-top: 0;
}

.contenu-externe-note {
    font-size: 0.95rem;
}

.contenu-externe-bloque .btn-cookies-accepter {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0.6rem 1.4rem;
    border-radius: var(--rayon-petit);
    font-weight: 700;
    cursor: pointer;
}

/* Le panneau de réglages des cookies est un <details> natif, mais il ne doit
   PAS hériter du style des accordéons du thème (fond blanc) : son texte est
   blanc, il deviendrait invisible. On masque simplement le marqueur natif. */
.bandeau-cookies-reglages > summary {
    list-style: none;
}

.bandeau-cookies-reglages > summary::-webkit-details-marker {
    display: none;
}

.bandeau-cookies-reglages > summary::marker {
    content: "";
}