/* ============================================================
CITY PARC HOTEL — Feuille de style principale
Mobile-first · HTML + CSS uniquement · Aucun JavaScript
============================================================ */
/* ─── Polices auto-hébergées (variables : un seul fichier par famille) ─── */
@font-face {
font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap;
src: url('/fonts/cormorant-garamond-400.woff2') format('woff2');
}
@font-face {
font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap;
src: url('/fonts/cormorant-garamond-400-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap;
src: url('/fonts/jost-400.woff2') format('woff2');
}
/* ─── Variables ─── */
:root {
--or: #c8a97e;
--or-texte: #7f6035; /* or lisible sur fond clair (contraste ≥ 5:1) */
--or-encre: #1a1c1f; /* texte posé sur un fond or */
--or-sombre: #a8885a;
--or-pale: #e8d5b8;
--gris: #4d5158;
--gris-sombre: #33373d;
--creme: #f8f9fa;
--creme-alt: #eceff2;
--bord: #dde1e6;
--texte: #23262b;
--texte-doux: #5b616a;
--blanc: #ffffff;
--f-titre: 'Cormorant Garamond', Georgia, serif;
--f-corps: 'Jost', system-ui, sans-serif;
--ombre: 0 2px 20px rgba(42,39,36,.07);
--ombre-lg: 0 8px 40px rgba(42,39,36,.12);
--tr: .28s ease;
}
/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 17px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--f-corps); font-weight: 400; line-height: 1.75; color: var(--texte); background: var(--creme); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; object-fit: cover; }
a { color: inherit; text-decoration: none; transition: color var(--tr); }
ul { list-style: none; }
button { cursor: pointer; font-family: var(--f-corps); border: none; background: none; }
input, textarea, select { font-family: var(--f-corps); font-size: 1rem; }
address { font-style: normal; }
/* ─── Typographie ─── */
h1, h2, h3, h4 { font-family: var(--f-titre); font-weight: 400; line-height: 1.2; color: var(--texte); }
/* Taille fixe d'abord : repli pour les navigateurs sans clamp() (Safari <13.1) */
h1 { font-size: 2.6rem; font-size: clamp(2rem, 7vw, 3.8rem); }
h2 { font-size: 2rem; font-size: clamp(1.6rem, 4vw, 2.6rem); }
h3 { font-size: 1.3rem; font-size: clamp(1.1rem, 3vw, 1.5rem); }
/* ─── Utilitaires ─── */
.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 1.25rem; }
.section { padding: 3.5rem 0; }
.section-alt { background: var(--creme-alt); }
.section-sombre { background: var(--gris-sombre); color: var(--creme); }
.tc { text-align: center; }
.label {
display: block;
font-size: .72rem;
font-weight: 500;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--or-texte);
margin-bottom: .6rem;
}
.filet { width: 40px; height: 1px; background: var(--or); margin: .9rem 0; }
.filet-c { margin-left: auto; margin-right: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
/* ─── Boutons ─── */
.btn {
display: inline-flex;
align-items: center;
gap: .45rem;
font-family: var(--f-corps);
font-size: .72rem;
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
padding: .8rem 1.7rem;
border: 1.5px solid transparent;
transition: all var(--tr);
cursor: pointer;
white-space: nowrap;
}
.btn svg { flex-shrink: 0; }
.btn-or { background: var(--or); color: var(--or-encre); border-color: var(--or); }
.btn-or:hover { background: var(--or-sombre); border-color: var(--or-sombre); color: var(--or-encre); transform: none; }
.btn-bord { background: transparent; color: var(--texte); border-color: var(--texte); }
.btn-bord:hover { background: var(--texte); color: var(--blanc); }
.btn-bord-blanc { background: transparent; color: var(--blanc); border-color: rgba(255,255,255,.55); }
.btn-bord-blanc:hover { background: rgba(255,255,255,.12); color: var(--blanc); }
/* ─── Focus ─── */
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
/* ============================================================
BARRE SUPÉRIEURE
============================================================ */
.topbar {
background: var(--gris-sombre);
color: rgba(245,241,232,.68);
font-size: .7rem;
letter-spacing: .05em;
padding: .45rem 1.25rem;
display: flex;
flex-direction: column;
gap: .2rem;
align-items: center;
text-align: center;
}
.topbar a { color: var(--or-pale); }
.topbar a:hover { color: var(--blanc); }
.topbar__tel { display: flex; align-items: center; }
.topbar__tel > * + * { margin-left: .4rem; } /* repli : gap flex ignoré sur Safari <14.1 */
/* ============================================================
HEADER & NAVIGATION — BURGER CSS PUR (checkbox hack)
Structure HTML requise :