@charset "UTF-8";
/* ==========================================================================
Gîte Le Murger — feuille de style unique.
Parti pris : la pierre calcaire et le chardonnay. Fonds crème, texte brun
très foncé, un or discret pour les accents, un vert de vigne pour les
actions. Titres en Cormorant Garamond, tout le reste en Inter.
Aucune ressource distante : les deux polices sont servies depuis ce
serveur, les icônes sont des SVG en ligne. La CSP n'autorise rien d'autre.
========================================================================== */
/* ── Polices ─────────────────────────────────────────────────────────────
Inter est une police VARIABLE : un seul fichier couvre 100 à 900. En
déclarer une par graisse téléchargerait trois fois le même octet. */
@font-face {
font-family: 'Cormorant';
src: url('/assets/fonts/cormorant.woff2?v=1.0.0') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
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: 'InterVar';
src: url('/assets/fonts/inter.woff2?v=1.0.0') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
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;
}
/* ── Jetons de design ──────────────────────────────────────────────────── */
:root {
/* Couleurs */
--craie: #fcfaf6;
--craie-2: #f7f3ec;
--pierre: #f2ece1;
--pierre-2: #e7ddcb;
--bord: #e0d5c1;
--bord-fort: #cdbfa5;
--encre: #221f1c;
--encre-2: #5b5349;
--encre-3: #857c6e;
--or: #9c722a;
--or-clair: #c8a45e;
--or-pale: #f6ecd7;
--vigne: #3c5137;
--vigne-2: #4c6645;
--vigne-pale: #eaf0e6;
--blanc: #ffffff;
--nuit: #1b1917;
/* Typographie */
--f-titre: 'Cormorant', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
--f-texte: 'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, sans-serif;
/* Échelle fluide : de la taille mobile à la taille bureau, sans palier */
--t-xs: 0.8125rem;
--t-s: 0.9375rem;
--t-base: 1.0625rem;
--t-m: clamp(1.125rem, 0.4vw + 1.03rem, 1.25rem);
--t-l: clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
--t-xl: clamp(1.75rem, 2vw + 1.2rem, 2.5rem);
--t-2xl: clamp(2.125rem, 3.2vw + 1.2rem, 3.5rem);
--t-3xl: clamp(2.5rem, 5vw + 1rem, 4.75rem);
/* Rythme */
--sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
--sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem;
--sp-9: 6rem; --sp-10: 8rem;
/* Rythme resserre : le contenu doit tenir en peu de defilements. */
--section: clamp(2.5rem, 4.4vw, 4.5rem);
/* Formes */
--r-s: 4px;
--r-m: 8px;
--r-l: 14px;
--r-xl: 22px;
--ombre-s: 0 1px 2px rgba(34,31,28,.05), 0 2px 8px rgba(34,31,28,.04);
--ombre-m: 0 2px 6px rgba(34,31,28,.06), 0 12px 32px rgba(34,31,28,.07);
--ombre-l: 0 8px 24px rgba(34,31,28,.09), 0 32px 64px rgba(34,31,28,.09);
--largeur: 1200px;
--etroit: 860px;
--prose: 68ch; /* au-delà de ~78ch, élargir ne fait plus rien gagner */
--tr: 180ms cubic-bezier(.4,0,.2,1);
}
/* ── Remise à zéro ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 6rem; /* l'en-tête collant ne doit pas masquer l'ancre */
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important; animation-iteration-count: 1 !important;
transition-duration: .01ms !important; scroll-behavior: auto !important;
}
}
body {
font-family: var(--f-texte);
font-size: var(--t-base);
line-height: 1.65;
color: var(--encre);
background: var(--craie);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-synthesis-weight: none;
text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
/* Le fond d'attente se pose sur le CONTENEUR, jamais sur l'![]()
: appliqué à
l'image, il transparaît dans les zones transparentes et dessine un
rectangle clair derrière un logo détouré. */
.duo__media, .hero__media, .appel__media { background: var(--pierre); border-radius: inherit; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
/* ── Typographie ───────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
font-family: var(--f-titre);
font-weight: 600;
line-height: 1.1;
letter-spacing: -.01em;
text-wrap: balance;
}
/* Cormorant dessine des chiffres elzéviriens : le 3, le 4, le 5, le 7 et le 9
descendent sous la ligne de base. À côté d'un « € », qui est de hauteur
capitale, un prix paraît remonter — très visible sur le total de
l'estimateur, affiché à 60 px. On force la hauteur capitale partout où
cette police porte un nombre. */
h1, h2, h3, h4,
.marque__nom, .tarif__prix, .prix-vedette__val, .pdj__prix,
.esti__total, .hote__nom {
font-variant-numeric: lining-nums;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-l); }
h4 { font-size: var(--t-m); }
p { text-wrap: pretty; }
a { color: inherit; text-decoration-color: var(--or-clair); text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--or); }
:focus-visible {
outline: 2.5px solid var(--vigne);
outline-offset: 3px;
border-radius: var(--r-s);
}
::selection { background: var(--or-pale); color: var(--encre); }
/* ── Structures ────────────────────────────────────────────────────────── */
.conteneur { width: min(100% - 2.5rem, var(--largeur)); margin-inline: auto; }
@media (min-width: 700px) { .conteneur { width: min(100% - 4rem, var(--largeur)); } }
.etroit { width: min(100%, var(--etroit)); margin-inline: auto; }
.prose { max-width: var(--prose); }
.prose p + p { margin-top: 1em; }
.section { padding-block: var(--section); }
.section--pierre { background: var(--pierre); }
.section--craie2 { background: var(--craie-2); }
.section--nuit { background: var(--nuit); color: #ece7de; }
.section--nuit h2, .section--nuit h3 { color: var(--blanc); }
/* Le contenu sous la ligne de flottaison n'est peint qu'à l'approche.
contain-intrinsic-size évite que la barre de défilement saute. */
.differe { content-visibility: auto; contain-intrinsic-size: auto 700px; }
/* ── Sur-titre + titre de section ──────────────────────────────────────── */
.sur {
display: inline-flex; align-items: center; gap: .6rem;
font-size: var(--t-xs); font-weight: 600;
letter-spacing: .13em; text-transform: uppercase;
color: var(--or);
margin-bottom: var(--sp-3);
}
.sur::before {
content: ''; width: 1.9rem; height: 1px; background: var(--or-clair);
}
.tete { margin-bottom: var(--sp-5); }
.tete--centre { text-align: center; }
.tete--centre .sur, .sur--centre { justify-content: center; }
.tete p { color: var(--encre-2); font-size: var(--t-m); margin-top: var(--sp-4); max-width: var(--prose); }
.tete--centre p { margin-inline: auto; }
/* ── Boutons ───────────────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
padding: .85rem 1.6rem;
font-size: var(--t-s); font-weight: 600; letter-spacing: .01em;
border-radius: 100px;
text-decoration: none;
border: 1.5px solid transparent;
transition: background var(--tr), color var(--tr), border-color var(--tr),
transform var(--tr), box-shadow var(--tr);
white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--plein { background: var(--vigne); color: #f6f2e9; box-shadow: var(--ombre-s); }
.btn--plein:hover { background: var(--vigne-2); box-shadow: var(--ombre-m); }
.btn--or { background: var(--or); color: #fffdf7; }
.btn--or:hover { background: #86611f; }
.btn--ligne { border-color: var(--bord-fort); color: var(--encre); background: transparent; }
.btn--ligne:hover { border-color: var(--encre); background: var(--blanc); }
.btn--clair { border-color: rgba(255,255,255,.42); color: #fff; }
.btn--clair:hover { background: rgba(255,255,255,.13); border-color: #fff; }
.btn--sm { padding: .6rem 1.15rem; font-size: var(--t-xs); }
.btn .ic { width: 1.15em; height: 1.15em; flex: none; }
.btns { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btns--centre { justify-content: center; }
/* ── Icônes ────────────────────────────────────────────────────────────── */
.ic { width: 1.5rem; height: 1.5rem; flex: none; }
.ic-s { width: 1.15rem; height: 1.15rem; }
.ic-l { width: 1.85rem; height: 1.85rem; }
/* ── Lien d'évitement ──────────────────────────────────────────────────── */
.evitement {
position: absolute; left: -9999px; top: 0; z-index: 200;
background: var(--vigne); color: #fff; padding: .8rem 1.3rem;
border-radius: 0 0 var(--r-m) 0; font-weight: 600;
}
.evitement:focus { left: 0; }
/* ══════════════════════════════════════════════════════ En-tête ═══════ */
.entete {
position: sticky; top: 0; z-index: 100;
background: rgba(252,250,246,.86);
backdrop-filter: saturate(1.6) blur(14px);
-webkit-backdrop-filter: saturate(1.6) blur(14px);
border-bottom: 1px solid transparent;
transition: border-color var(--tr), background var(--tr), box-shadow var(--tr);
}
.entete[data-defile='1'] {
border-bottom-color: var(--bord);
box-shadow: 0 1px 12px rgba(34,31,28,.05);
}
.entete__in {
display: flex; align-items: center; gap: var(--sp-5);
min-height: 5.4rem;
}
.marque { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.marque__nom {
font-family: var(--f-titre); font-size: 1.42rem; font-weight: 600;
line-height: 1.05; letter-spacing: -.005em;
}
.marque__sous {
display: block; font-family: var(--f-texte);
font-size: .625rem; letter-spacing: .17em; text-transform: uppercase;
color: var(--or); font-weight: 600; margin-top: .15rem;
}
/* La hauteur est fixée, la largeur suit : le bloc horizontal et le badge
carré partagent la même ligne de base dans l'en-tête. */
.marque__logo { height: 3.6rem; width: auto; flex: none; display: block; }
@media (max-width: 1080px) { .marque__logo { height: 3.2rem; } }
@media (max-width: 559px) { .marque__logo { height: 2.8rem; } }
.marque { line-height: 0; }
/* La barre d actions est poussee a droite par elle-meme : sur mobile la
navigation est masquee, donc son margin-left:auto ne s applique plus
et le hamburger venait se coller au logo. */
.nav { margin-left: auto; }
.entete__actions { margin-left: auto; }
.nav__liste { display: flex; align-items: center; gap: .35rem; }
.nav__lien {
display: block; padding: .55rem .78rem;
font-size: var(--t-s); font-weight: 500; text-decoration: none;
border-radius: var(--r-m); color: var(--encre-2);
transition: color var(--tr), background var(--tr);
}
.nav__lien:hover { color: var(--encre); background: var(--pierre); }
.nav__lien[aria-current='page'] { color: var(--encre); font-weight: 600; }
.nav__lien[aria-current='page']::after {
content: ''; display: block; height: 2px; margin-top: .18rem;
background: var(--or-clair); border-radius: 2px;
}
.entete__actions { display: flex; align-items: center; gap: .35rem; flex: none; }
/* Sélecteur de langue */
.langue { position: relative; }
.langue__btn {
display: flex; align-items: center; gap: .3rem;
padding: .5rem .6rem; border-radius: var(--r-m);
font-size: var(--t-xs); font-weight: 600; color: var(--encre-2);
text-transform: uppercase; letter-spacing: .06em;
}
.langue__btn:hover { background: var(--pierre); color: var(--encre); }
.langue__menu {
position: absolute; right: 0; top: calc(100% + .4rem);
background: var(--blanc); border: 1px solid var(--bord);
border-radius: var(--r-m); box-shadow: var(--ombre-m);
padding: .3rem; min-width: 9rem;
}
.langue__menu[hidden] { display: none; }
.langue__menu a {
display: block; padding: .5rem .7rem; border-radius: var(--r-s);
font-size: var(--t-s); text-decoration: none;
}
.langue__menu a:hover { background: var(--pierre); }
.langue__menu a[aria-current='true'] { font-weight: 600; color: var(--or); }
/* Bascule du menu mobile */
.burger {
display: none; border-radius: var(--r-m); color: var(--encre);
/* 44 px minimum : cible tactile confortable. */
width: 2.75rem; height: 2.75rem; place-items: center;
}
.burger:hover { background: var(--pierre); }
@media (max-width: 1080px) {
.burger { display: grid; }
.nav {
position: fixed; inset: 5.4rem 0 auto; margin: 0;
background: var(--craie); border-bottom: 1px solid var(--bord);
box-shadow: var(--ombre-l);
padding: var(--sp-4) 0 var(--sp-5);
max-height: calc(100dvh - 5.4rem); overflow-y: auto;
}
.nav[hidden] { display: none; }
.nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
.nav__lien {
padding: .95rem 1.25rem; border-radius: 0; font-size: var(--t-m);
border-bottom: 1px solid var(--pierre-2);
}
.nav__lien[aria-current='page']::after { display: none; }
.nav__lien[aria-current='page'] { color: var(--or); }
.entete__cta { display: none; }
}
@media (max-width: 420px) {
.marque__nom { font-size: 1.2rem; }
}
/* ══════════════════════════════════════════════════════ Bandeau ═══════ */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media picture, .diapo__vue picture { display: block; width: 100%; height: 100%; }
.hero__media img, .diapo__vue img {
width: 100%; height: 100%; object-fit: cover;
/* glm_img() pose un aspect-ratio en ligne pour eviter les sauts de
mise en page ; sur une image de fond il doit ceder, sinon la photo
garde son ratio et laisse un vide sous le bandeau. */
aspect-ratio: auto !important;
}
.hero::after {
content: ''; position: absolute; inset: 0; z-index: 1;
/* Deux voiles superposés plutôt qu'un seul.
Un dégradé vertical uniforme ne suffit pas : mesuré sur la vue aérienne,
20 à 34 % de la zone du titre tombait sous 4,5:1, avec des taches à
1,04:1 — du blanc sur un toit clair. La moyenne, elle, semblait bonne :
c'est le pire cas local qui rend un mot illisible, pas la moyenne.
Le voile HORIZONTAL assombrit la gauche, où le texte est aligné, et
libère la droite pour que la photo reste visible. */
/* Dosage : un voile plus léger, compensé par une ombre de texte plus
franche. L'ombre n'assombrit que le pourtour des lettres ; le voile,
lui, éteint toute la photo. Mieux vaut donc charger l'ombre et alléger
le voile que l'inverse. */
/* Les arrêts horizontaux suivent la largeur du texte : elle est passée de
580 à ~840 px, la zone sombre devait s'étirer avec elle, sinon les
derniers mots retombent sur la photo nue. */
background:
linear-gradient(to right,
rgba(16,14,12,.34) 0%, rgba(16,14,12,.20) 34%,
rgba(16,14,12,.06) 62%, rgba(16,14,12,0) 84%),
linear-gradient(to bottom,
rgba(16,14,12,.22) 0%, rgba(16,14,12,.06) 34%, rgba(16,14,12,.34) 100%);
}
.hero__in {
position: relative;
z-index: 2; /* au-dessus du média (0) et du voile (1) */
min-height: min(72vh, 36rem);
/* « flex-end » collait le bloc en bas : mesuré sur l'accueil en 1810 px,
159 px de vide au-dessus du texte contre 48 en dessous. On centre, puis
on rend au bas un léger surplus de padding — un titre posé exactement au
milieu paraît tomber, l'œil attend le centre OPTIQUE, un peu plus haut. */
display: flex; flex-direction: column; justify-content: center;
padding-block: var(--sp-7) var(--sp-8);
color: #fff;
}
.hero__sur { color: #f0dfb8; }
.hero__sur::before { background: #c8a45e; }
/* Ombre portée en deux temps : une ombre serrée qui détache la lettre de ce
qui est juste derrière, et une ombre large qui assombrit son halo. */
/* Largeur : le titre plafonnait à 580 px dans un conteneur de 1200 — moins de
la moitié de la place. On desserre jusqu'à environ 70 % de la colonne, ce
qui reste sous la limite de lisibilité et laisse la photo respirer à
droite. Le voile horizontal a été étiré d'autant, sans quoi les derniers
mots sortiraient de la zone assombrie. */
.hero h1 {
color: #fff; max-width: 24ch;
/* Trois ombres, du plus serre au plus large. C'est ce qui permet au voile
de rester leger : l'ombre n'assombrit que le pourtour immediat des
lettres, alors que le voile eteint toute la photo. Mesure a l'appui,
renforcer l'ombre a fait remonter le fond sous l'encre de 3,5 a 5,4:1
sans changer d'un point la luminosite de la bande. */
text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 2px 8px rgba(0,0,0,.78),
0 4px 22px rgba(0,0,0,.68), 0 8px 46px rgba(0,0,0,.5);
}
.hero__texte {
margin-top: var(--sp-4); font-size: var(--t-m);
max-width: 58ch; color: #f7f4ee;
text-shadow: 0 1px 2px rgba(0,0,0,.88), 0 2px 8px rgba(0,0,0,.75),
0 4px 24px rgba(0,0,0,.6);
/* « pretty » (hérité des paragraphes) ne soigne que la DERNIÈRE ligne.
Sur une accroche de deux lignes, ça laisse 570 px puis 210 px. « balance »
les égalise, ce qui est le bon compromis sur un texte court — et les
navigateurs l'ignorent d'eux-mêmes au-delà de quelques lignes. */
text-wrap: balance;
}
.hero__sur { text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.75), 0 0 26px rgba(0,0,0,.55); }
.hero .btns { margin-top: var(--sp-6); }
/* Prix dans le bandeau. Le montant est en police d'affichage et en chiffres
de hauteur capitale, le libellé en petit — on lit le nombre d'abord.
Chaque groupe porte son propre fond translucide plutôt qu'un bandeau plein :
la photo reste visible entre les pastilles. */
.hero__prix {
margin-top: var(--sp-5);
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem;
}
.hero__prix-i {
display: inline-flex; align-items: baseline; gap: .4rem;
padding: .34rem .78rem;
background: rgba(16,14,12,.42);
border: 1px solid rgba(255,255,255,.2);
border-radius: 999px;
backdrop-filter: blur(3px);
}
.hero__prix-i strong {
font-family: var(--f-titre); font-variant-numeric: lining-nums;
font-size: 1.55rem; font-weight: 600; line-height: 1; color: #fff;
}
.hero__prix-i > span { font-size: var(--t-s); color: rgba(255,255,255,.9); }
.hero__prix-tout {
font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em;
text-transform: uppercase; color: var(--or-clair);
}
/* Bandeau court des pages intérieures */
.hero--page .hero__in { min-height: min(44vh, 23rem); }
.hero--page h1 { max-width: 30ch; }
/* Bandeau sans photo */
.hero--sobre {
background: var(--pierre);
border-bottom: 1px solid var(--bord);
padding-block: var(--sp-8) var(--sp-7);
}
.hero--sobre h1 { color: var(--encre); text-shadow: none; }
.hero--sobre .hero__texte { color: var(--encre-2); text-shadow: none; }
/* Fil d'Ariane */
.fil { font-size: var(--t-xs); color: var(--encre-3); padding-top: var(--sp-5); }
.fil ol { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.fil a { text-decoration: none; color: inherit; }
.fil a:hover { color: var(--encre); text-decoration: underline; }
.fil li + li::before { content: '›'; margin-right: .4rem; color: var(--bord-fort); }
.hero .fil { color: rgba(255,255,255,.78); }
.hero .fil a:hover { color: #fff; }
.hero .fil li + li::before { color: rgba(255,255,255,.5); }
/* ══════════════════════════════════════════ Bande de chiffres ═════════ */
.chiffres {
display: grid; grid-template-columns: repeat(2, 1fr);
border-top: 1px solid var(--bord);
background: var(--craie);
}
@media (min-width: 760px) { .chiffres { grid-template-columns: repeat(4, 1fr); } }
.chiffre {
display: flex; align-items: center; gap: .8rem;
padding: var(--sp-5) var(--sp-4);
border-right: 1px solid var(--bord); border-bottom: 1px solid var(--bord);
font-size: var(--t-s); font-weight: 500;
}
.chiffre:last-child { border-right: 0; }
@media (min-width: 760px) { .chiffre { border-bottom: 0; justify-content: center; } }
@media (max-width: 759px) { .chiffre:nth-child(2n) { border-right: 0; } }
.chiffre .ic { color: var(--or); }
/* ══════════════════════════════════════════════════════ Grilles ═══════ */
.grille { display: grid; gap: var(--sp-5); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
/* Les atouts portent deux à trois lignes de texte : à quatre colonnes les
lignes tombent à ~22 caractères et le texte devient haché. Trois maximum. */
.grille--atouts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
@media (min-width: 1100px) { .grille--atouts { grid-template-columns: repeat(3, 1fr); } }
/* minmax(0,1fr) : sans lui une cellule au contenu long élargit toute la grille
et fait déborder la page — y compris en français. */
.grille > * { min-width: 0; }
/* Alternance texte / image */
.duo {
display: grid; gap: var(--sp-6); align-items: center;
grid-template-columns: 1fr;
}
@media (min-width: 860px) {
.duo { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
.duo--inverse .duo__media { order: -1; }
}
.duo__media img { border-radius: var(--r-l); box-shadow: var(--ombre-m); width: 100%; }
.duo__texte h2 { margin-bottom: var(--sp-4); }
.duo__texte p { color: var(--encre-2); }
.duo__texte p + p { margin-top: var(--sp-4); }
.duo + .duo { margin-top: clamp(2.25rem, 3.6vw, 3.5rem); }
/* ══════════════════════════════════════════════════════ Cartes ═══════ */
.carte {
background: var(--blanc);
border: 1px solid var(--bord);
border-radius: var(--r-l);
overflow: hidden;
display: flex; flex-direction: column;
transition: border-color var(--tr), box-shadow var(--tr), transform var(--tr);
}
.carte--lien:hover { border-color: var(--bord-fort); box-shadow: var(--ombre-m); transform: translateY(-2px); }
.carte__media img { width: 100%; object-fit: cover; }
.carte__corps { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.carte__titre { font-size: var(--t-m); }
.carte__titre a { text-decoration: none; }
.carte__titre a::after { content: ''; position: absolute; inset: 0; }
.carte__texte { font-size: var(--t-s); color: var(--encre-2); }
.carte__pied { margin-top: auto; padding-top: var(--sp-3); }
.carte { position: relative; }
/* Atouts */
.atout {
display: flex; gap: var(--sp-4);
padding: var(--sp-5);
background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--r-l);
}
.atout__ic {
flex: none; width: 3rem; height: 3rem; border-radius: 50%;
display: grid; place-items: center;
background: var(--or-pale); color: var(--or);
}
.atout h3 { font-size: var(--t-m); margin-bottom: .3rem; }
.atout p { font-size: var(--t-s); color: var(--encre-2); }
/* ══════════════════════════════════════════════════════ Tarifs ═══════ */
.tarif {
background: var(--blanc); border: 1px solid var(--bord);
border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--ombre-m);
}
.tarif__tete {
padding: var(--sp-6) var(--sp-6) var(--sp-5);
background: linear-gradient(160deg, var(--vigne) 0%, #2f402b 100%);
color: #f4f0e6; text-align: center;
}
.tarif__tete h2, .tarif__tete h3 { color: #fff; }
.tarif__periode {
display: inline-block; margin-top: var(--sp-3);
padding: .3rem .85rem; border-radius: 100px;
background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24);
font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.tarif__lignes { padding: var(--sp-5) var(--sp-6); }
.tarif__ligne {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
padding-block: var(--sp-4);
border-bottom: 1px dashed var(--bord);
}
.tarif__ligne:last-child { border-bottom: 0; }
.tarif__label { font-weight: 500; }
.tarif__prix { font-family: var(--f-titre); font-size: var(--t-xl); font-weight: 600; white-space: nowrap; }
.tarif__prix small { font-family: var(--f-texte); font-size: var(--t-s); font-weight: 500; color: var(--encre-3); }
.tarif__pied { padding: var(--sp-5) var(--sp-6) var(--sp-6); border-top: 1px solid var(--bord); background: var(--craie-2); }
.inclus { display: grid; gap: var(--sp-2); }
.inclus li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--t-s); }
.inclus .ic { color: var(--vigne-2); margin-top: .12em; }
/* Prix mis en avant sur l'accueil */
.prix-vedette { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.prix-vedette__eyebrow { font-size: var(--t-s); color: var(--encre-3); }
.prix-vedette__val { font-family: var(--f-titre); font-size: var(--t-3xl); font-weight: 600; line-height: 1; }
.prix-vedette__unite { font-size: var(--t-m); color: var(--encre-2); }
/* Petit-déjeuner */
.pdj { display: grid; gap: var(--sp-4); }
@media (min-width: 720px) { .pdj { grid-template-columns: 1fr 1fr; } }
.pdj__carte {
padding: var(--sp-5); border: 1px solid var(--bord); border-radius: var(--r-l);
background: var(--blanc);
}
.pdj__prix { font-family: var(--f-titre); font-size: var(--t-xl); font-weight: 600; color: var(--or); }
.pdj__prix small { font-family: var(--f-texte); font-size: var(--t-xs); color: var(--encre-3); font-weight: 500; }
/* ══════════════════════════════════════════════════ Équipements ══════ */
.equip-groupe + .equip-groupe { margin-top: var(--sp-6); }
.equip-groupe__tete { display: flex; align-items: center; gap: .7rem; margin-bottom: var(--sp-4); }
.equip-groupe__tete .ic { color: var(--or); }
.equip-groupe__tete h3 { font-size: var(--t-m); }
.equip-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--sp-2) var(--sp-5); }
.equip-liste li { display: flex; gap: .55rem; align-items: center; font-size: var(--t-s); color: var(--encre-2); }
.equip-liste .ic { color: var(--vigne-2); }
/* Règles de la maison */
.regle {
display: flex; gap: var(--sp-4); padding: var(--sp-4) 0;
border-bottom: 1px solid var(--bord);
}
.regle:last-child { border-bottom: 0; }
.regle__ic { flex: none; color: var(--or); }
.regle strong { display: block; font-weight: 600; }
.regle span { font-size: var(--t-s); color: var(--encre-2); }
/* ══════════════════════════════════════════════════════ Galerie ══════ */
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--sp-6); }
.filtre {
padding: .5rem 1rem; border-radius: 100px;
border: 1.5px solid var(--bord); background: var(--blanc);
font-size: var(--t-s); font-weight: 500; color: var(--encre-2);
transition: all var(--tr);
}
.filtre:hover { border-color: var(--bord-fort); color: var(--encre); }
.filtre[aria-pressed='true'] { background: var(--encre); border-color: var(--encre); color: var(--craie); }
.galerie {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
gap: var(--sp-3);
}
@media (min-width: 900px) { .galerie { grid-template-columns: repeat(4, 1fr); } }
.galerie__item { position: relative; border-radius: var(--r-m); overflow: hidden; background: var(--pierre); }
.galerie__item[hidden] { display: none; }
.galerie__btn { display: block; width: 100%; padding: 0; cursor: zoom-in; }
.galerie__btn img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform 420ms cubic-bezier(.2,.6,.2,1); }
.galerie__btn:hover img { transform: scale(1.045); }
.galerie__legende {
position: absolute; inset: auto 0 0 0;
padding: 2.2rem .8rem .7rem;
background: linear-gradient(to top, rgba(20,18,16,.78), transparent);
color: #fff; font-size: var(--t-xs); line-height: 1.35;
opacity: 0; transition: opacity var(--tr);
pointer-events: none;
}
.galerie__btn:hover .galerie__legende,
.galerie__btn:focus-visible .galerie__legende { opacity: 1; }
/* Une seule grande image en tête de galerie */
@media (min-width: 900px) {
.galerie__item--large { grid-column: span 2; grid-row: span 2; }
.galerie__item--large .galerie__btn img { aspect-ratio: 1/1; }
}
/* Visionneuse */
.visio {
position: fixed; inset: 0; z-index: 300;
background: rgba(18,16,14,.94);
display: grid; grid-template-rows: auto 1fr auto;
padding: var(--sp-4);
}
.visio[hidden] { display: none; }
.visio__barre { display: flex; justify-content: space-between; align-items: center; color: #cfc7bb; font-size: var(--t-s); }
.visio__fig { display: grid; place-items: center; min-height: 0; position: relative; }
.visio__fig img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--r-m); }
.visio__legende { text-align: center; color: #ded7cb; font-size: var(--t-s); padding-top: var(--sp-3); min-height: 2.4rem; }
.visio__nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 3rem; height: 3rem; border-radius: 50%;
display: grid; place-items: center;
background: rgba(255,255,255,.1); color: #fff;
transition: background var(--tr);
}
.visio__nav:hover { background: rgba(255,255,255,.22); }
.visio__nav--prec { left: 0; }
.visio__nav--suiv { right: 0; }
.visio__nav--prec .ic { transform: rotate(180deg); }
.visio__fermer { color: #fff; padding: .5rem; border-radius: 50%; }
.visio__fermer:hover { background: rgba(255,255,255,.15); }
/* ══════════════════════════════════════════════════════ Accordéon ════ */
.accordeon { border-top: 1px solid var(--bord); }
.accordeon__item { border-bottom: 1px solid var(--bord); }
.accordeon__btn {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
width: 100%; text-align: left;
padding: var(--sp-5) 0;
font-size: var(--t-m); font-weight: 500; font-family: var(--f-texte);
}
.accordeon__btn:hover { color: var(--or); }
.accordeon__btn .ic { color: var(--or); transition: transform var(--tr); flex: none; }
.accordeon__btn[aria-expanded='true'] .ic { transform: rotate(180deg); }
.accordeon__corps { padding-bottom: var(--sp-5); color: var(--encre-2); max-width: var(--prose); }
.accordeon__corps[hidden] { display: none; }
/* ══════════════════════════════════════════════════ Restaurants ══════ */
.ville-tete {
display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
margin-bottom: var(--sp-5); padding-bottom: var(--sp-3);
border-bottom: 1px solid var(--bord);
}
.ville-tete h2 { font-size: var(--t-xl); }
.ville-tete span { font-size: var(--t-s); color: var(--encre-3); }
.ville + .ville { margin-top: var(--sp-8); }
.table-carte { position: relative; }
.table-carte__media { aspect-ratio: 3/2; background: var(--pierre); }
.table-carte__media img { width: 100%; height: 100%; object-fit: cover; }
.table-carte__media--vide {
display: grid; place-items: center;
background: linear-gradient(150deg, var(--pierre) 0%, var(--pierre-2) 100%);
color: var(--bord-fort);
}
.table-carte__media--vide .ic { width: 2.6rem; height: 2.6rem; }
.etiquette {
display: inline-flex; align-items: center; gap: .35rem;
padding: .22rem .6rem; border-radius: 100px;
background: var(--or-pale); color: var(--or);
font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.coord { display: grid; gap: .4rem; font-size: var(--t-s); margin-top: var(--sp-3); }
.coord li { display: flex; gap: .55rem; align-items: flex-start; color: var(--encre-2); }
.coord .ic { color: var(--or); margin-top: .1em; }
.coord a { text-decoration: none; }
.coord a:hover { text-decoration: underline; }
/* ══════════════════════════════════════════════════════ Contact ═════ */
/* Le formulaire passe en PREMIER et prend la plus grande part : c'est
l'action de la page. Les coordonnées l'accompagnent, elles ne le
précèdent plus. */
.contact-grille { display: grid; gap: var(--sp-7); }
@media (min-width: 940px) {
.contact-grille { grid-template-columns: 1.45fr 1fr; gap: var(--sp-8); align-items: start; }
/* La colonne d'appui suit le défilement : le numéro de téléphone et
l'adresse restent à portée pendant toute la saisie, qui est longue.
`top` dégage la hauteur de l'en-tête, lui-même collant. */
.contact-cote { position: sticky; top: calc(5.4rem + var(--sp-5)); }
}
.hote {
display: flex; gap: var(--sp-4); align-items: center;
padding-bottom: var(--sp-5); margin-bottom: var(--sp-5);
border-bottom: 1px solid var(--bord);
}
.hote img { width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover; flex: none; }
.hote__nom { font-family: var(--f-titre); font-size: var(--t-l); font-weight: 600; }
.hote__role { font-size: var(--t-xs); letter-spacing: .11em; text-transform: uppercase; color: var(--or); font-weight: 600; }
.contact-bloc + .contact-bloc { margin-top: var(--sp-6); }
.contact-liste { display: grid; gap: var(--sp-4); }
.contact-item { display: flex; gap: var(--sp-4); align-items: flex-start; }
.contact-item__ic {
flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
display: grid; place-items: center; background: var(--pierre); color: var(--or);
}
.contact-item dt { font-size: var(--t-xs); letter-spacing: .09em; text-transform: uppercase; color: var(--encre-3); font-weight: 600; }
.contact-item dd { margin: .15rem 0 0; font-size: var(--t-m); font-weight: 500; }
.contact-item dd a { text-decoration: none; }
.contact-item dd a:hover { text-decoration: underline; }
.contact-item small { display: block; font-size: var(--t-xs); color: var(--encre-3); font-weight: 400; margin-top: .15rem; }
/* Formulaire */
.form {
background: var(--blanc); border: 1px solid var(--bord);
border-radius: var(--r-xl); padding: clamp(1.4rem, 3vw, 2.4rem);
box-shadow: var(--ombre-s);
}
.champs { display: grid; gap: var(--sp-4); }
.champs--2 { grid-template-columns: 1fr; }
@media (min-width: 560px) { .champs--2 { grid-template-columns: 1fr 1fr; } }
.champ { display: flex; flex-direction: column; gap: .4rem; }
.champ label { font-size: var(--t-s); font-weight: 600; }
.champ label .opt { font-weight: 400; color: var(--encre-3); }
.champ input, .champ textarea, .champ select {
width: 100%; padding: .78rem .9rem;
background: var(--craie); border: 1.5px solid var(--bord); border-radius: var(--r-m);
transition: border-color var(--tr), background var(--tr), box-shadow var(--tr);
font-size: var(--t-base);
}
.champ input:hover, .champ textarea:hover, .champ select:hover { border-color: var(--bord-fort); }
.champ input:focus, .champ textarea:focus, .champ select:focus {
outline: none; background-color: var(--blanc);
border-color: var(--vigne); box-shadow: 0 0 0 3px rgba(60,81,55,.14);
}
/* La flèche native d'un