/* ============================================================ LE CLOS DU SOLEIL, Mode nuit (visiteurs) Activé par la classe .nuit sur (posée par theme.js et, très tôt, par le script anti-flash dans le ). Principe : on inverse les rôles fond/texte via les jetons, on éclaircit les filets, et on requalifie les quelques littéraux ivoire/blanc pour qu'ils ne « brillent » plus sur fond sombre. La transition douce donne l'effet « coucher de soleil ». ============================================================ */ :root.nuit{ --ivoire:#181310; /* ancien « clair » → devient le fond nuit */ --encre:#EDE4D2; /* ancien « sombre » → devient le texte nuit */ --fond:#161210; --texte:#ECE3D1; --rgb-encre:236,228,210; /* les rgba(...,opacité) s'éclaircissent */ --fond-voile:rgba(22,18,16,.9); --carte-voile:rgba(246,240,226,.05); --filet:rgba(236,228,210,.16); /* accents : un cran plus lumineux pour tenir sur le fond sombre */ --terre:#D06B44; --ocre:#D6A354; --olive:#93967A; --sauge:#B7B893; --piscine:#48BFC2; } /* transition « crépuscule » sur tout ce qui porte une couleur */ html{transition:background-color .5s ease} .nuit-anim, .nuit-anim *:not(video):not(img){ transition:background-color .5s ease, color .5s ease, border-color .5s ease !important; } /* le corps suit les jetons */ :root.nuit body{background:var(--fond);color:var(--texte)} /* sections nativement « encre » : on les pose sur un ton légèrement distinct du fond pour garder la profondeur (sinon tout fusionne) */ :root.nuit .avis, :root.nuit .attentions, :root.nuit .menu-xl, :root.nuit .seminaires, :root.nuit .ciel, :root.nuit footer.pied{ background:#221b16; } :root.nuit .menu-xl{background:linear-gradient(165deg,#221b16,#301710)} /* header translucide en nuit */ :root.nuit header.scrolled{background:var(--fond-voile);box-shadow:0 1px 0 var(--filet)} /* le voile de menu mobile et les panneaux clairs */ :root.nuit .voile{background:var(--fond)} :root.nuit .barre-reserver{background:var(--fond-voile)} :root.nuit .formulaire{background:var(--carte-voile)} :root.nuit .champ input, :root.nuit .champ select, :root.nuit .champ textarea{background:rgba(236,228,210,.04);color:var(--texte)} /* les CTA terre cuite restent pleins ; on garde leur texte ivoire clair */ :root.nuit .btn-plein, :root.nuit .cta-header, :root.nuit .barre-reserver a{color:#fdf6e9} /* les héros et ouvertures restent volontairement sombres (déjà lisibles) ; on assombrit juste un cran les dégradés d'ouverture pour l'unité */ :root.nuit .ouverture{background:linear-gradient(165deg,#120e0c 0%,#161210 55%,#2a1710 100%)} /* ⚠️ Panneaux qui RESTENT sombres en nuit : le jeton --ivoire y reprend sa valeur littérale. Partout ailleurs il s'inverse (il sert de fond), mais sur ces panneaux il sert de couleur de TEXTE : sans ce re-scope, leurs textes deviennent encre-sur-encre sur les panneaux qui restent sombres. */ :root.nuit header, :root.nuit .hero, :root.nuit .ouverture, :root.nuit .cine-scene, :root.nuit .cine-contenu, :root.nuit .avis, :root.nuit .attentions, :root.nuit .menu-xl, :root.nuit .seminaires, :root.nuit .ciel, :root.nuit .direct, :root.nuit footer.pied, :root.nuit .hero-fiche, :root.nuit .hero-table, :root.nuit .hero-ext, :root.nuit #lightbox, :root.nuit .barre-reserver{ --ivoire:#F6F0E2; } /* galeries des fiches chambres : les legendes posees sur bandeau sombre gardent l'ivoire litteral (le jeton inverse les rendait invisibles) */ :root.nuit .galerie-fiche figcaption{--ivoire:#F6F0E2} /* les photos : un léger voile chaud pour qu'elles ne crient pas dans le noir */ :root.nuit figure.photo .zoom::after, :root.nuit .carte figure.photo::after{ content:"";position:absolute;inset:0;background:rgba(24,19,13,.14);pointer-events:none;z-index:1; } /* page Réserver : les surfaces blanches (#fff en dur) deviennent des panneaux sombres, sinon calendrier, cartes et carte de recherche sont illisibles en nuit (texte clair sur blanc). Même pattern que le hero. */ :root.nuit .recherche-carte, :root.nuit .cal-nav, :root.nuit .moteur-cadre, :root.nuit .carte-ch{background:#221b16} :root.nuit .recherche-carte{box-shadow:0 26px 60px -34px rgba(0,0,0,.6)} :root.nuit .cal-jour:not(.passe):not(.debut):not(.fin):hover, :root.nuit .cal-jour.entre, :root.nuit .cal-jour.apercu{background:rgba(208,107,68,.22)} /* l'iframe Thaïs garde son propre fond clair (contenu externe thémé à part) */ :root.nuit .moteur-cadre iframe{background:#fff} /* CTA « Réserver » : la terre cuite eclaircie de nuit (#D06B44) ne tenait que 3,15:1 sous le texte ivoire ; on la fonce d'un cran (4,66:1 texte, 3,2:1 face au panneau #221b16). Le survol #8d3b20 reste prioritaire. */ :root.nuit .reserve-cta{background:#B04E28;border-color:#B04E28} /* ============================================================ Assistant de réservation plein écran (#assistant-resa). Ses styles sont injectés par reserver.js avec des littéraux clairs codés en dur (#F6F0E2, #fff, #27211A) : sans ces règles, un visiteur en nuit reçoit un écran blanc plein cadre. Même motif que .recherche-carte / .carte-ch ci-dessus. Nos sélecteurs :root.nuit sont plus spécifiques que la feuille injectée, d'où la ré-affirmation des états .choisi et :hover plus bas (sinon ils seraient écrasés par nos règles de base). */ :root.nuit #assistant-resa{background:var(--fond);color:var(--texte)} :root.nuit .ar-haut{border-bottom-color:rgba(236,228,210,.2)} :root.nuit .ar-carte, :root.nuit .ar-recap, :root.nuit .ar-champ input, :root.nuit .ar-champ textarea{background:#221b16;color:var(--texte);border-color:rgba(236,228,210,.35)} :root.nuit .ar-recap{border-color:rgba(236,228,210,.28)} :root.nuit .ar-pied{background:var(--fond);border-top-color:rgba(236,228,210,.2)} :root.nuit .ar-champ label{color:var(--texte)} :root.nuit .ar-champ .ar-facultatif{color:rgba(236,228,210,.6)} :root.nuit .ar-fermer, :root.nuit .ar-retour, :root.nuit .ar-secondaire{color:var(--texte);border-color:rgba(236,228,210,.45)} :root.nuit .ar-fermer:hover, :root.nuit .ar-retour:hover, :root.nuit .ar-secondaire:hover{border-color:var(--texte);background:rgba(236,228,210,.08)} :root.nuit .ar-aide{color:rgba(236,228,210,.75)} :root.nuit .ar-securise{color:rgba(236,228,210,.65)} :root.nuit .ar-tel-bandeau{color:rgba(236,228,210,.78)} :root.nuit .ar-fin p{color:rgba(236,228,210,.82)} :root.nuit .ar-etape-info, :root.nuit .ar-recap dt{color:var(--olive)} :root.nuit .ar-carte .ar-c-det{color:rgba(236,228,210,.68)} :root.nuit .ar-carte .ar-c-coche{border-color:rgba(236,228,210,.4)} :root.nuit .ar-progression span{background:rgba(236,228,210,.18)} :root.nuit .ar-progression span.fait{background:var(--ocre)} /* accents terre cuite : la valeur nuit (--terre #D06B44) tient le contraste AA sur fond sombre, contrairement au #B24E2C du jour */ :root.nuit .ar-reco, :root.nuit .ar-erreur, :root.nuit .ar-modif, :root.nuit .ar-tel{color:var(--terre)} :root.nuit .ar-carte:hover{border-color:var(--terre)} /* ré-affirmation de l'état « choisi » : identique au jour (carte terre cuite pleine, texte ivoire), écrasé sinon par nos règles */ :root.nuit .ar-carte.choisi{background:#B24E2C;border-color:#B24E2C;color:#F6F0E2} :root.nuit .ar-carte.choisi .ar-c-det{color:rgba(246,240,226,.85)} :root.nuit .ar-carte.choisi .ar-c-coche{border-color:#F6F0E2;background:#F6F0E2} :root.nuit .ar-carte.choisi .ar-reco{color:#F6F0E2} /* l'anneau de focus du bouton flottant était encre (#27211A), invisible sur les pages devenues sombres */ :root.nuit #bouton-resa-flottant:focus-visible{outline-color:var(--texte)} /* la carte Google en nocturne (filtre d'inversion classique) */ :root.nuit .carte-gmap{filter:invert(.89) hue-rotate(180deg) saturate(.65) brightness(.95);border-color:var(--filet)} /* le bouton de bascule jour/nuit */ .bascule-theme{ position:fixed;right:clamp(18px,3vw,32px);bottom:clamp(84px,12vh,110px);z-index:59; width:56px;height:56px;border-radius:50%;border:1px solid var(--filet); background:var(--fond-voile);backdrop-filter:blur(8px);color:var(--ocre); display:flex;align-items:center;justify-content:center;cursor:pointer; box-shadow:0 10px 28px -12px rgba(0,0,0,.5); transition:transform .3s var(--lent),background .3s,color .3s; } .bascule-theme:hover{transform:scale(1.07)} .bascule-theme:focus-visible{outline:3px solid var(--terre);outline-offset:3px} .bascule-theme svg{width:26px;height:26px} .bascule-theme .lune{display:none} :root.nuit .bascule-theme .soleil-ic{display:none} :root.nuit .bascule-theme .lune{display:block} /* sur desktop le bouton résa flottant occupe le coin : on remonte la bascule */ @media (min-width:981px){ .bascule-theme{bottom:clamp(96px,14vh,150px)} } /* sur mobile les CTA du héros occupent toute la largeur en bas d'écran : la bascule migre en haut à droite, sous le bouton menu (chevauchement avec les boutons du héros sur petit écran) */ @media (max-width:640px){ .bascule-theme{width:46px;height:46px} .bascule-theme svg{width:22px;height:22px} } @media (prefers-reduced-motion:reduce){ html,.nuit-anim,.nuit-anim *{transition:none !important} .bascule-theme{transition:none} } /* ============================================================ Contraste AA des petits libellés ocre, en JOURNÉE seulement. En nuit, --ocre est déjà éclairci (#D6A354, lisible sur fond sombre). En jour, #C08A38 ne fait que 2,66:1 sur l'ivoire pour du petit texte : on fonce ces libellés à #8A6220 (4,8:1). Règle chargée sur les 12 pages publiques via ce fichier commun. */ :root:not(.nuit) .kicker, :root:not(.nuit) .ch-rail .num{color:#8A6220} /* ============================================================ Header compact sur mobile (toutes les pages publiques). Le sous-titre du lockup (« Hôtel ★★★★ · Salon-de-Provence ») est plus large que le nom et faisait déborder la barre sous ~430px. On le masque, on resserre le nom, et le sélecteur de langue passe en « globe seul » (son aria-label reste, donc l'accessibilité est préservée) : logo + langue + burger tiennent alors sans débordement, sur l'accueil comme sur les pages intérieures. */ @media (max-width:600px){ header .logo small{display:none} header .logo b{font-size:1.06rem;letter-spacing:.08em} header #sel-langue .sl-actuel, header #sel-langue .sl-fleche{display:none} header #sel-langue .sl-bouton{padding:0 9px;gap:0} } /* ============================================================ Lien d'évitement (skip-link), style commun à toutes les pages. La règle inline n'existait que sur index/reservation ; on la centralise ici pour les pages intérieures qui reçoivent le lien, sinon il s'afficherait en clair en haut de page. Caché hors écran, révélé au focus clavier. */ .saut-contenu{position:absolute;left:-9999px;top:0;z-index:300;background:var(--terre);color:#F6F0E2;padding:12px 20px;border-radius:0 0 6px 0;font-family:var(--f-label);font-size:.9rem;text-decoration:none} .saut-contenu:focus{left:0} /* étiquette « chambre suivante » des fiches : ocre AA en jour (2,66 -> 4,8) */ :root:not(.nuit) .suivante .etiquette{color:#8A6220} /* ============================================================ Bande 981-1240px (toutes les pages publiques) : le rang complet logo + nav + langue + CTA demande ~1230px en typo pleine, le CTA sortait de l'ecran et « La table » passait sur deux lignes. On resserre typo, gouttieres et marges pour que tout tienne des 981px. (Selecteurs volontairement plus specifiques que les regles inline des pages, chargees apres ce fichier.) */ @media (min-width:981px) and (max-width:1240px){ body header .barre{gap:12px;padding-left:18px;padding-right:18px} body header .barre .logo b{font-size:1.28rem} body header .barre .logo small{letter-spacing:.16em} body header .barre nav.principale{gap:clamp(9px,1.2vw,18px)} body header .barre nav.principale a{font-size:.62rem;letter-spacing:.08em;white-space:nowrap} body header .barre .cta-header{padding:10px 12px;font-size:.62rem;letter-spacing:.08em} body header .barre #sel-langue .sl-bouton{padding:0 9px} /* l'allemand, plus long, garde ses propres regles injectees par i18n.js : on les resserre encore d'un cran dans cette bande */ :root[data-langue="de"] body header .barre .cta-header{padding:10px 10px;letter-spacing:.06em;font-size:.6rem} :root[data-langue="de"] body header .barre nav.principale a{font-size:.6rem;letter-spacing:.05em} } /* ============================================================ Barre de specs des fiches chambres, tablette (521-980px) : les 5 items passaient en 4 + 1 avec un dernier rang etire et un filet orphelin. On force une grille equilibree 3 + 2 et on redistribue les filets par rang. */ @media (min-width:521px) and (max-width:980px){ .barre-specs ul li{flex:1 1 33.333%;min-width:0} .barre-specs ul li:nth-child(3n+1){border-left:none} .barre-specs ul li:nth-child(n+4){border-top:1px solid var(--filet)} } /* Largeurs 981 a 1240 px : la nav 6 rubriques + langue + CTA ne tenaient pas, le bouton « Réserver en un clic » sortait de l'écran. On resserre l'en-tête d'un cran sur cette plage, pour toutes les pages. */ @media (min-width:981px) and (max-width:1240px){ header .barre{gap:12px;padding-left:clamp(14px,2vw,28px);padding-right:clamp(14px,2vw,28px)} header nav.principale{gap:clamp(8px,1vw,14px)} header nav.principale a{font-size:.64rem;letter-spacing:.09em;white-space:nowrap} header .cta-header{padding:11px 13px;font-size:.63rem;letter-spacing:.1em} header .logo small{letter-spacing:.16em} header #sel-langue .sl-bouton{min-height:34px;padding:0 8px;font-size:.64rem} } /* lien mentions légales du pied de page, toutes pages */ .pied-bas a{color:inherit;text-decoration:none;transition:color .3s} .pied-bas a:hover{color:var(--ivoire)} /* crédit signature du pied de page : conception + photographies (lien Instagram Just Ju) */ .pied-credit{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center} .pied-bas .credit-photo{display:inline-flex;align-items:center;gap:6px;color:rgba(246,240,226,.72)} .pied-bas .credit-photo svg{flex:none;opacity:.85;transition:opacity .3s} .pied-bas .credit-photo:hover{color:var(--ivoire)} .pied-bas .credit-photo:hover svg{opacity:1} /* bandeaux de photos des pages, avec repli mobile */ .bande-2,.bande-3,.bande-duo{display:grid;gap:clamp(14px,1.8vw,24px)} .bande-3{grid-template-columns:repeat(3,1fr)} .bande-2{grid-template-columns:repeat(2,1fr)} .bande-duo{grid-template-columns:1.5fr 1fr} @media (max-width:700px){ .bande-2,.bande-3,.bande-duo{grid-template-columns:1fr} }