/* Theme Name: Au Château Theme URI: https://auchateau.ch Author: Restaurant Au Château Description: Thème sur mesure pour le Restaurant Au Château, Estavayer-le-Lac. Page d'accueil unique avec ancres, carte des mets gérée depuis l'administration, réservations suivies avec réponse en un clic depuis le courriel, vidéo de fond facultative, thème sombre et clair au choix du visiteur. Aucune dépendance à un constructeur de pages. Version: 2.20.1 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: au-chateau Tags: restaurant, one-page, dark-mode, custom-menu, custom-logo, translation-ready */ /* ========================================================= 1. Jetons de couleur ----------------------------------------------------------- Le thème sombre est la valeur par défaut. Le thème clair est appliqué par l'attribut data-theme="light" posé sur : soit par le script anti-scintillement (voir functions.php), soit par le bouton de bascule (voir js/main.js). ========================================================= */ :root { /* --- Thème sombre --- */ --bg: #0f0d0b; --bg-alt: #16130f; --text: #f2ebdd; --text-soft: #c2b9a9; --muted: #8d8477; --gold: #c9a24b; --accent-deep: #e0c88a; --gold-hover: #dcb767; --gold-wash: rgba(201, 162, 75, .13); --line: rgba(201, 162, 75, .28); --header-bg: rgba(15, 13, 11, .82); --header-bg-fix: rgba(15, 13, 11, .97); --footer-bg: #080706; --input-bg: #17140f; --btn-gold-text: #14110e; --shadow: rgba(0, 0, 0, .5); /* Constantes : textes posés sur une image ou un fond toujours sombre. */ --on-dark: #faf3e0; --rouge: #d98878; --vert: #9dc48a; --whatsapp: #4fc37d; --font-display: "Playfair Display", Georgia, serif; --font-body: "EB Garamond", Georgia, serif; --header-h: 88px; --ease: cubic-bezier(.22, .61, .36, 1); } :root[data-theme="light"] { --bg: #faf3e0; --bg-alt: #f3e9d2; --text: #1a1714; --text-soft: #4a423a; --muted: #8a7f70; --gold: #b8863b; --accent-deep: #6b4b28; --gold-hover: #6b4b28; --gold-wash: #f0e3c4; --line: rgba(184, 134, 59, .28); --header-bg: rgba(250, 243, 224, .82); --header-bg-fix: rgba(250, 243, 224, .97); --footer-bg: #14110e; --input-bg: #faf3e0; --btn-gold-text: #faf3e0; --shadow: rgba(26, 23, 20, .1); --rouge: #9b3d2e; --vert: #4a6b3d; --whatsapp: #1c8a4e; } /* ========================================================= 2. Base ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); background: var(--bg); } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 1.125rem; line-height: 1.75; -webkit-font-smoothing: antialiased; transition: background-color .4s var(--ease), color .4s var(--ease); } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .skip-link { position: absolute; left: -9999px; z-index: 999; padding: 1rem 1.5rem; background: var(--gold); color: var(--btn-gold-text); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; } .skip-link:focus { left: 1rem; top: 1rem; } .container { width: min(1200px, 100% - 3rem); margin-inline: auto; } .container-narrow { width: min(860px, 100% - 3rem); } .centre { text-align: center; } .note-centre { text-align: center; } /* Classes générées par WordPress. */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .alignleft { float: left; margin: .5rem 1.5rem 1rem 0; } .alignright { float: right; margin: .5rem 0 1rem 1.5rem; } .aligncenter { margin-inline: auto; } .wp-caption { max-width: 100%; } .wp-caption-text { font-style: italic; font-size: .95rem; color: var(--muted); } /* ========================================================= 3. Typographie utilitaire ========================================================= */ .eyebrow { margin: 0 0 1.25rem; font-family: var(--font-body); font-size: .78rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); } .eyebrow-light { color: var(--accent-deep); } .section-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 5vw, 3.9rem); line-height: 1.12; letter-spacing: -.01em; } .section-title em { font-style: italic; color: var(--accent-deep); } .section-title-sm { font-size: clamp(1.9rem, 3.4vw, 2.5rem); } .rule { display: block; width: 68px; height: 1px; margin: 1.75rem auto 0; background: var(--gold); } .rule-left { margin-inline: 0; } .note { font-size: .98rem; font-style: italic; color: var(--muted); } .note a { color: var(--gold); border-bottom: 1px solid var(--line); } .link-arrow { display: inline-block; font-size: .8rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--line); padding-bottom: .35rem; transition: color .25s var(--ease), border-color .25s var(--ease); } .link-arrow span { display: inline-block; transition: transform .25s var(--ease); } .link-arrow:hover { color: var(--accent-deep); border-color: var(--accent-deep); } .link-arrow:hover span { transform: translateX(5px); } /* ========================================================= 4. Boutons ========================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 1.05rem 2.4rem; border: 1px solid transparent; border-radius: 2px; font-family: var(--font-body); font-size: .8rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; cursor: pointer; transition: background-color .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease); } .btn-gold { background: var(--gold); color: var(--btn-gold-text); border-color: var(--gold); } .btn-gold:hover { background: var(--gold-hover); border-color: var(--gold-hover); transform: translateY(-2px); } /* Toujours posé sur le hero sombre : couleurs constantes. */ .btn-outline { background: transparent; color: var(--on-dark); border-color: rgba(201, 162, 75, .8); } .btn-outline:hover { background: rgba(201, 162, 75, .16); border-color: #c9a24b; transform: translateY(-2px); } .btn-sm { padding: .78rem 1.7rem; font-size: .72rem; } /* Bouton WhatsApp — contour vert plutôt qu'aplat. Le vert de la marque, en aplat, jurerait avec le doré et la crème ; le pictogramme suffit à rendre le canal reconnaissable au premier coup d'œil, et le survol donne le rappel de couleur attendu. */ .btn-whatsapp { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.4rem; border: 1px solid var(--whatsapp); border-radius: 2px; font-family: var(--font-body); font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--whatsapp); transition: background-color .25s var(--ease), color .25s var(--ease); } .btn-whatsapp svg { width: 18px; height: 18px; flex-shrink: 0; } .btn-whatsapp:hover { background: var(--whatsapp); color: var(--btn-gold-text); } .btn-whatsapp-centre { margin: 1rem auto 0; } /* ========================================================= 5. En-tête ========================================================= */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; background: var(--header-bg); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .site-header.is-scrolled { background: var(--header-bg-fix); border-bottom-color: var(--line); box-shadow: 0 6px 30px var(--shadow); } .header-inner { width: min(1320px, 100% - 3rem); margin-inline: auto; height: var(--header-h); display: flex; align-items: center; gap: 1.5rem; } .logo { display: flex; flex-direction: column; line-height: 1; } .logo-kicker { font-size: .62rem; letter-spacing: .38em; text-transform: uppercase; color: var(--gold); margin-bottom: .4rem; } .logo-name { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: .01em; } .logo-light .logo-name { color: var(--on-dark); } .logo-image img { max-height: 56px; width: auto; } .nav { margin-left: auto; } .nav-list { display: flex; align-items: center; gap: 2rem; margin: 0; padding: 0; list-style: none; } .nav-list a { font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; /* Un intitulé ne se coupe jamais en deux lignes : « Carte des mets » sur deux étages déforme toute la barre. Quand la place manque, c'est le menu burger qui prend le relais — voir la bascule à 1150 px. */ white-space: nowrap; color: var(--text-soft); padding-bottom: .3rem; border-bottom: 1px solid transparent; transition: color .25s var(--ease), border-color .25s var(--ease); } .nav-list a:hover, .nav-list a.is-current, .nav-list .current-menu-item > a { color: var(--gold); border-bottom-color: var(--gold); } .nav-cta-mobile { display: none; } .header-cta { flex-shrink: 0; } /* --- Bascule sombre / clair --- */ .theme-toggle { flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; background: transparent; border: 1px solid var(--line); border-radius: 50%; color: var(--gold); cursor: pointer; transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease); } .theme-toggle:hover { color: var(--accent-deep); border-color: var(--gold); background: var(--gold-wash); } .theme-toggle svg { width: 18px; height: 18px; display: block; } /* Une seule des deux icônes est visible selon le thème actif. */ .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } .burger { display: none; width: 44px; height: 44px; padding: 0; background: none; border: none; cursor: pointer; flex-direction: column; justify-content: center; gap: 6px; } .burger span { display: block; height: 1px; width: 26px; margin-inline: auto; background: var(--text); transition: transform .3s var(--ease), opacity .2s var(--ease); } .burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger.is-open span:nth-child(2) { opacity: 0; } .burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================= 6. Hero — toujours sombre, quel que soit le thème ========================================================= */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: calc(var(--header-h) + 3rem) 1.5rem 7rem; background: #0f0d0b; } .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Vidéo de fond : posée par-dessus la photo, révélée seulement une fois la lecture réellement lancée (voir js/main.js). La photo reste visible en dessous pendant le chargement et si la vidéo ne démarre pas. */ .hero-video { opacity: 0; transition: opacity .9s var(--ease); pointer-events: none; } .hero-video.is-playing { opacity: 1; } .hero-veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15, 13, 11, .74) 0%, rgba(15, 13, 11, .46) 40%, rgba(15, 13, 11, .86) 100%); } .hero-content { position: relative; max-width: 780px; } .hero .eyebrow { color: #c9a24b; } .hero-title { margin: 0 0 1.25rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(3.6rem, 11vw, 8rem); line-height: 1; color: var(--on-dark); letter-spacing: -.015em; } .hero-sub { margin: 0 0 3rem; font-style: italic; font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: rgba(250, 243, 224, .85); } .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } .scroll-cue { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .9rem; } .scroll-cue-label { font-size: .64rem; letter-spacing: .34em; text-transform: uppercase; color: rgba(250, 243, 224, .7); } .scroll-cue-line { width: 1px; height: 52px; background: linear-gradient(to bottom, rgba(201, 162, 75, .9), transparent); animation: cue 2.4s var(--ease) infinite; transform-origin: top; } @keyframes cue { 0%, 100% { transform: scaleY(.45); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } } /* ========================================================= 7. Sections ========================================================= */ /* Respiration resserrée : sept sections × deux marges, chaque rem gagnée compte double et se cumule sur toute la page. */ .section { padding: clamp(3rem, 6vw, 5.5rem) 0; } .section-head { text-align: center; margin-bottom: 2.75rem; } .section-ambiance { background: var(--bg-alt); } .section-reservation { background: var(--bg-alt); } .section-interieur { padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 4rem)); } /* ========================================================= 8. Événements ========================================================= */ /* Fond de base, pour que l'alternance reste juste : hero sombre → événements → menu de la semaine (alt) → carte. Si le menu de la semaine est absent, la carte suit directement et les deux fonds se confondraient : un filet les sépare alors. */ .section-evenements + .section-carte { border-top: 1px solid var(--line); } .evenement { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; max-width: 980px; margin-inline: auto; } /* Deux événements ou plus : ils passent côte à côte, chacun en colonne. */ .evenements.est-multiple { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(2rem, 4vw, 3rem); } .evenements.est-multiple .evenement { grid-template-columns: 1fr; align-items: start; max-width: none; } .evenements.est-multiple .evenement-affiche { max-width: 320px; } .evenement + .evenement { margin-top: 3.5rem; } .evenements.est-multiple .evenement + .evenement { margin-top: 0; } /* L'affiche est un document à lire, pas une illustration : on la montre entière plutôt que recadrée, et on la laisse s'agrandir au clic. */ .evenement-affiche { display: block; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; box-shadow: 0 16px 40px var(--shadow); transition: transform .3s var(--ease), border-color .3s var(--ease); } .evenement-affiche:hover { transform: translateY(-4px); border-color: var(--gold); } .evenement-affiche img { width: 100%; height: auto; } .evenement-periode { margin: 0 0 .75rem; font-size: .78rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); } .evenement-titre { margin: 0 0 1.1rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.15; } .evenement-corps { color: var(--text-soft); } .evenement-corps > :first-child { margin-top: 0; } .evenement-corps > :last-child { margin-bottom: 0; } .evenement-corps ul { padding-left: 1.1rem; } .evenement-corps li { margin-bottom: .4rem; } .evenement-prix { margin: 1.4rem 0 0; font-family: var(--font-display); font-size: 1.5rem; color: var(--accent-deep); } .evenement-pied { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 1.75rem; } .evenement-mention { font-size: .95rem; font-style: italic; color: var(--muted); } /* ========================================================= 9. Menu de la semaine ========================================================= */ .section-semaine { background: var(--bg-alt); } .semaine-periode { margin: 1.25rem 0 0; font-size: .82rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); } /* Sélecteur de jours : réservé au mobile, où les sept cartes empilées obligeraient à faire défiler. Sur ordinateur elles tiennent côte à côte, le sélecteur n'a plus de raison d'être. */ .semaine-selecteur { display: none; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: .4rem; margin-bottom: 1.5rem; } .semaine-onglet { padding: .7rem .3rem; background: transparent; border: 1px solid var(--line); border-radius: 3px; font-family: var(--font-body); color: var(--text-soft); text-align: center; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); } .semaine-onglet-jour { display: block; font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; } .semaine-onglet-date { display: block; margin-top: .15rem; font-size: .62rem; letter-spacing: .06em; color: var(--muted); } /* Le jour courant reste repérable même quand un autre est consulté. */ .semaine-onglet.est-aujourdhui { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 3px var(--gold-wash); } .semaine-onglet[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--btn-gold-text); } .semaine-onglet[aria-pressed="true"] .semaine-onglet-date { color: var(--btn-gold-text); opacity: .8; } .semaine-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; } .semaine-jour { display: flex; flex-direction: column; padding: 1.4rem 1.3rem 1.5rem; background: var(--bg); border: 1px solid var(--line); border-radius: 3px; transition: border-color .25s var(--ease), transform .25s var(--ease); } .semaine-jour:hover { border-color: var(--gold); transform: translateY(-3px); } /* Le jour courant est ce que la plupart des visiteurs viennent lire : il doit se repérer sans avoir à être cherché. */ .semaine-jour.est-aujourdhui { background: var(--gold-wash); border-color: var(--gold); } .semaine-jour-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; padding-bottom: .9rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); } .semaine-jour-id { min-width: 0; } /* La date coiffe le nom du jour : on situe la semaine d'un coup d'œil sans que le chiffre concurrence le nom, qui reste l'entrée de lecture. Format numérique et nowrap : la carte est étroite, et le badge du jour courant lui dispute la largeur. */ .semaine-jour-date { display: block; margin-bottom: .3rem; font-family: var(--font-body); font-size: .66rem; font-weight: 500; letter-spacing: .16em; white-space: nowrap; color: var(--muted); } .semaine-jour-nom { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.2; } .semaine-badge { flex-shrink: 0; padding: .18rem .4rem; background: var(--gold); color: var(--btn-gold-text); border-radius: 2px; font-size: .52rem; font-weight: 500; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; white-space: nowrap; } .semaine-plats { margin: 0; flex: 1 1 auto; } .semaine-plats dt { font-size: .64rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); } .semaine-plats dd { margin: .2rem 0 1rem; font-size: 1.02rem; line-height: 1.5; } .semaine-plats dd:last-child { margin-bottom: 0; } .semaine-prix { margin: 1.2rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); font-family: var(--font-display); font-size: 1.15rem; color: var(--accent-deep); } /* ========================================================= 10. Carte des mets ========================================================= */ /* Neuf catégories : empilées à gauche, elles se lisent d'un seul coup d'œil. Une barre horizontale en gardait la moitié hors de l'écran, et rien n'indiquait qu'il fallait la faire défiler. */ .carte-layout { display: grid; grid-template-columns: minmax(190px, 240px) 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; } /* La colonne reste en place pendant qu'on parcourt une longue catégorie : changer d'avis ne demande pas de remonter. Elle défile pour elle-même si le restaurant ajoute assez de catégories pour dépasser la hauteur utile. */ .tabs-wrap { position: sticky; top: calc(var(--header-h) + 1.5rem); max-height: calc(100vh - var(--header-h) - 3rem); overflow-y: auto; scrollbar-width: thin; } .tabs { display: flex; flex-direction: column; width: 100%; border-top: 1px solid var(--line); } .tab { width: 100%; padding: 1.05rem 1rem; background: transparent; border: none; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; border-radius: 0; font-family: var(--font-body); font-size: .74rem; font-weight: 500; letter-spacing: .16em; line-height: 1.35; text-transform: uppercase; text-align: left; color: var(--text-soft); cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .tab:hover { color: var(--gold); } .tab.is-active { background: var(--gold-wash); border-left-color: var(--gold); color: var(--accent-deep); } /* min-width: 0 — sans quoi une longue ligne de plat élargirait la colonne au lieu de se replier, et la grille déborderait. */ .menu-panels { min-width: 0; } .menu-panel { animation: panelIn .45s var(--ease); } .menu-panel[hidden] { display: none; } /* Bandeaux d'accordéon : invisibles sur ordinateur, où ce sont les onglets qui pilotent les panneaux. Ils prennent le relais sous 768 px. */ .cat-heading { display: none; } .carte-cat { scroll-margin-top: calc(var(--header-h) + 1rem); } @keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .dish { display: flex; align-items: baseline; gap: 1rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line); } .dish:last-of-type { border-bottom: none; } /* Vignette du plat. La colonne n'existe que dans les catégories qui ont au moins une photo ; les plats sans photo y laissent un vide, ce qui garde les noms alignés au lieu de partir en escalier. */ .dish-photo { flex: 0 0 auto; align-self: center; width: 76px; height: 76px; overflow: hidden; border-radius: 2px; } .dish-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .dish:hover .dish-photo img { transform: scale(1.07); } .dish-photo:empty { background: none; } .dish-text { flex: 0 1 auto; } .dish-name { margin: 0 0 .3rem; font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; line-height: 1.3; } .dish-desc { margin: 0; font-style: italic; font-size: 1rem; color: var(--muted); } .dish-dots { flex: 1 1 auto; min-width: 1.5rem; height: 1px; background-image: radial-gradient(circle, var(--line) 1px, transparent 1px); background-size: 7px 1px; background-repeat: repeat-x; transform: translateY(-4px); } .dish-price { flex-shrink: 0; font-family: var(--font-display); font-size: 1.3rem; color: var(--gold); white-space: nowrap; } .dish-mention { display: block; font-family: var(--font-body); font-size: .82rem; font-style: italic; color: var(--muted); text-align: right; } .panel-note { margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .95rem; font-style: italic; color: var(--muted); } .carte-foot { text-align: center; margin-top: 3.5rem; } .carte-foot .note { margin: 0 0 1.75rem; } /* ========================================================= 11. Galerie ambiance ========================================================= */ /* Tableau 2 × 2, identique sur ordinateur et sur mobile. Les quatre lieux ont le même poids visuel, et la section tient en deux rangées au lieu de trois — c'est ce qui raccourcit le plus le défilement. */ .gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .gal { position: relative; margin: 0; overflow: hidden; border-radius: 2px; } /* Hauteur fixe plutôt que ratio : la largeur des tuiles varie avec l'écran, la hauteur de la section reste prévisible. */ .gal img { width: 100%; height: 230px; object-fit: cover; transition: transform .8s var(--ease); } .gal:hover img { transform: scale(1.045); } .gal figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 3rem 1.75rem 1.4rem; font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: #fff; background: linear-gradient(to top, rgba(15, 13, 11, .72), transparent); } /* --- Photos cliquables --- */ .gal-texte { display: none; } /* Bouton transparent qui couvre toute la tuile : c'est la photo entière qui est cliquable, la légende reste une vraie
. */ .gal-open { position: absolute; inset: 0; padding: 0; background: none; border: none; cursor: pointer; z-index: 2; } .gal-open:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; } /* Pastille « + » : l'indice qu'il y a quelque chose à lire. Visible en permanence, car au doigt il n'y a pas de survol. */ .gal-plus { position: absolute; top: 1.1rem; right: 1.1rem; width: 38px; height: 38px; border: 1px solid rgba(250, 243, 224, .45); border-radius: 50%; background: rgba(15, 13, 11, .35); backdrop-filter: blur(4px); transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); } .gal-plus::before, .gal-plus::after { content: ""; position: absolute; inset: 50% 11px auto 11px; height: 1px; background: var(--on-dark); transition: background-color .3s var(--ease); } .gal-plus::after { transform: rotate(90deg); } .gal-cliquable:hover .gal-plus, .gal-open:focus-visible .gal-plus { background: var(--gold); border-color: var(--gold); transform: rotate(90deg); } .gal-cliquable:hover .gal-plus::before, .gal-cliquable:hover .gal-plus::after { background: var(--btn-gold-text); } /* --- Fenêtre de présentation --- */ .lieu-dialog { width: min(920px, calc(100% - 2.5rem)); max-height: min(86vh, 780px); padding: 0; border: 1px solid var(--line); border-radius: 3px; background: var(--bg); color: var(--text); overflow: hidden; } .lieu-dialog::backdrop { background: rgba(8, 7, 6, .78); backdrop-filter: blur(3px); } .lieu-dialog-inner { position: relative; display: grid; grid-template-columns: 42% 1fr; max-height: inherit; } .lieu-dialog-media { overflow: hidden; } .lieu-dialog-media img { width: 100%; height: 100%; object-fit: cover; } .lieu-dialog-body { padding: clamp(2rem, 4vw, 3.25rem); overflow-y: auto; } .lieu-dialog-titre { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.5rem); line-height: 1.15; } .lieu-dialog-body .rule-left { margin: 1.5rem 0 2rem; } .lieu-dialog-texte p { margin: 0 0 1.25rem; color: var(--text-soft); } .lieu-dialog-texte p:last-child { margin-bottom: 0; } /* Première ligne du texte traitée comme un chapeau. */ .lieu-dialog-texte p:first-child { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; line-height: 1.4; color: var(--accent-deep); } .lieu-dialog-close { position: absolute; top: 1rem; right: 1rem; z-index: 3; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 50%; color: var(--text); cursor: pointer; transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease); } .lieu-dialog-close:hover { color: var(--btn-gold-text); background: var(--gold); border-color: var(--gold); } .lieu-dialog-close svg { width: 18px; height: 18px; } .ambiance-invite { margin: 2.5rem 0 0; } /* ========================================================= 9 bis. Galerie photos ========================================================= */ /* Fond principal, pas le fond alterné : la galerie précède désormais la réservation, qui est déjà sur fond alterné. Deux sections alternées accolées feraient disparaître la séparation entre les deux. */ /* La grille s'adapte seule au nombre de colonnes : 4 sur grand écran, 2 sur téléphone, sans point de rupture à maintenir. */ .galerie-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.1rem; } /* Au-delà de neuf photos, les suivantes attendent « Voir plus ». */ .galerie-grille.is-tronquee .galerie-photo:nth-child(n + 10) { display: none; } .galerie-photo { position: relative; margin: 0; overflow: hidden; border-radius: 2px; aspect-ratio: 4 / 3; background: var(--bg); } .galerie-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), opacity .4s var(--ease); } .galerie-ouvrir { position: absolute; inset: 0; padding: 0; background: transparent; border: none; cursor: pointer; transition: background-color .35s var(--ease); } .galerie-photo:hover img { transform: scale(1.06); } .galerie-photo:hover .galerie-ouvrir, .galerie-ouvrir:focus-visible { background: rgba(15, 13, 11, .38); } .galerie-ouvrir:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; } /* Loupe révélée au survol. Sur mobile elle reste discrète mais visible, faute de survol pour la faire apparaître. */ .galerie-loupe { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border: 1px solid rgba(250, 243, 224, .6); border-radius: 50%; opacity: 0; transform: scale(.85); transition: opacity .35s var(--ease), transform .35s var(--ease); } .galerie-loupe::before, .galerie-loupe::after { content: ""; position: absolute; background: var(--on-dark); } .galerie-loupe::before { inset: 50% 13px auto 13px; height: 1px; } .galerie-loupe::after { inset: 13px auto 13px 50%; width: 1px; } .galerie-photo:hover .galerie-loupe, .galerie-ouvrir:focus-visible .galerie-loupe { opacity: 1; transform: scale(1); } .galerie-plus { margin: 3rem 0 0; text-align: center; } /* --- Visionneuse plein écran --- */ .photo-dialog { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: none; background: transparent; overflow: hidden; } .photo-dialog::backdrop { background: rgba(8, 7, 6, .93); } .photo-dialog-figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; padding: 4.5rem 4.5rem 3rem; } .photo-dialog-figure img { max-width: 100%; max-height: calc(100vh - 11rem); width: auto; object-fit: contain; border-radius: 2px; } .photo-dialog-figure figcaption { display: flex; align-items: baseline; gap: 1.25rem; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: rgba(250, 243, 224, .8); text-align: center; } .photo-dialog-compteur { font-family: var(--font-body); font-style: normal; font-size: .74rem; letter-spacing: .22em; color: #c9a24b; white-space: nowrap; } .photo-dialog-close, .photo-dialog-nav { position: absolute; z-index: 2; display: grid; place-items: center; padding: 0; background: rgba(20, 17, 14, .55); border: 1px solid rgba(201, 162, 75, .35); border-radius: 50%; color: var(--on-dark); cursor: pointer; transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); } .photo-dialog-close:hover, .photo-dialog-nav:hover { background: #c9a24b; border-color: #c9a24b; color: #14110e; } .photo-dialog-close { top: 1.25rem; right: 1.25rem; width: 46px; height: 46px; } .photo-dialog-close svg { width: 20px; height: 20px; } .photo-dialog-nav { top: 50%; margin-top: -26px; width: 52px; height: 52px; } .photo-dialog-prev { left: 1.25rem; } .photo-dialog-next { right: 1.25rem; } .photo-dialog-nav svg { width: 22px; height: 22px; } .photo-dialog-nav[hidden] { display: none; } /* ========================================================= 12. Le restaurant ========================================================= */ .story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; } .story-media img { width: 100%; height: 100%; max-height: 680px; object-fit: cover; border-radius: 2px; } .story-text p { color: var(--text-soft); } .story-text .rule-left { margin-bottom: 2rem; } .facts { display: flex; flex-wrap: wrap; gap: 2.5rem; margin: 2.75rem 0; padding: 1.75rem 0; list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .facts li { display: flex; flex-direction: column; gap: .4rem; } .fact-label { font-size: .68rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); } .fact-value { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.3; } /* Variante « chiffres clés » : le nombre passe devant, le libellé explique. */ .facts-chiffres { gap: 3rem; } .facts-chiffres .fact-value { font-size: 2.6rem; line-height: 1; color: var(--gold); } .facts-chiffres .fact-label { font-family: var(--font-body); font-size: .95rem; font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--muted); } /* ========================================================= 13. Formulaire de réservation ========================================================= */ .form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 2rem; } .field { display: flex; flex-direction: column; } .field-full { grid-column: 1 / -1; } .honeypot { position: absolute; left: -9999px; } .field label { margin-bottom: .7rem; font-size: .68rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); } .field input, .field select, .field textarea { width: 100%; padding: .95rem 1.1rem; background: var(--input-bg); border: 1px solid var(--line); border-radius: 2px; font-family: var(--font-body); font-size: 1.05rem; color: var(--text); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .field textarea { resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: var(--muted); font-style: italic; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-wash); } /* Rend la roulette du sélecteur de date lisible sur fond sombre. */ :root:not([data-theme="light"]) .field input[type="date"] { color-scheme: dark; } /* --- Listes déroulantes longues --- Le menu d'un reste en place, invisible, et c'est toujours lui qui porte la valeur envoyée. */ .select-court { position: relative; } .select-court select { display: none; } .select-court-valeur { width: 100%; padding: .95rem 2.6rem .95rem 1.1rem; background: var(--input-bg); border: 1px solid var(--line); border-radius: 2px; font-family: var(--font-body); font-size: 1.05rem; color: var(--text); text-align: left; cursor: pointer; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .select-court-valeur:focus-visible, .select-court-valeur[aria-expanded="true"] { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-wash); } /* Chevron, en pur CSS pour ne charger aucune icône. */ .select-court-valeur::after { content: ""; position: absolute; top: 50%; right: 1.1rem; width: 8px; height: 8px; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease); } .select-court-valeur[aria-expanded="true"]::after { transform: translateY(-30%) rotate(-135deg); } .select-court-liste { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 236px; margin: 0; padding: .3rem; overflow-y: auto; list-style: none; background: var(--bg-alt); border: 1px solid var(--gold); border-radius: 2px; box-shadow: 0 14px 34px var(--shadow); scrollbar-width: thin; } .select-court-option { padding: .55rem .8rem; border-radius: 2px; font-size: 1.02rem; cursor: pointer; } .select-court-option:hover { background: var(--gold-wash); color: var(--accent-deep); } .select-court-option:focus-visible { outline: 1px solid var(--gold); outline-offset: -1px; } .select-court-option[aria-selected="true"] { background: var(--gold); color: var(--btn-gold-text); } .form-notice { max-width: 640px; margin: 0 auto 2.5rem; padding: 1.1rem 1.5rem; border-left: 2px solid var(--gold); background: var(--gold-wash); font-size: 1rem; text-align: center; } .form-notice-succes { border-left-color: var(--vert); } .form-notice-erreur { border-left-color: var(--rouge); } .form-foot { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; margin-top: 1rem; } .form-foot .note { margin: 0; } /* Information sur les données, sous le bouton d'envoi : présente sans prendre le pas sur l'action. */ .mention-donnees { max-width: 560px; margin: .5rem auto 0 !important; font-size: .85rem; font-style: normal; line-height: 1.6; } .mention-donnees a { color: var(--gold); border-bottom: 1px solid var(--line); } .footer-legal { font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(250, 243, 224, .5); transition: color .25s var(--ease); } .footer-legal:hover { color: #c9a24b; } /* ========================================================= 14. Horaires & contact ========================================================= */ .infos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); } .infos-col .rule-left { margin-bottom: 2.5rem; } /* Deux saisons empilées, trois lignes chacune. La saison en cours est soulignée d'un filet doré : c'est celle qu'on vient lire. */ .saison { padding: 1.25rem 0 1.4rem; border-top: 1px solid var(--line); } .saison:last-of-type { border-bottom: 1px solid var(--line); } .saison.est-courante { padding-left: 1.1rem; border-left: 2px solid var(--gold); } .saison-titre { margin: 0; font-family: var(--font-body); font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); } .saison-periode { margin: .35rem 0 1rem; font-size: .98rem; font-style: italic; color: var(--muted); } .saison-horaires { margin: 0; } .saison-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: .42rem 0; } .saison-ligne dt { font-family: var(--font-display); font-size: 1.06rem; } .saison-ligne dd { margin: 0; font-size: 1rem; color: var(--text-soft); text-align: right; white-space: nowrap; } .saison-fermeture { margin: .8rem 0 0; font-size: .95rem; font-style: italic; color: var(--rouge); } .contact-list { margin: 0 0 2.5rem; padding: 0; list-style: none; display: grid; gap: 1.5rem; } .contact-list li { display: flex; flex-direction: column; gap: .45rem; } .contact-value { font-size: 1.05rem; line-height: 1.6; } .contact-value a { border-bottom: 1px solid var(--line); transition: color .25s var(--ease); } .contact-value a:hover { color: var(--gold); } .map-card { position: relative; overflow: hidden; border-radius: 2px; } .map-card img { width: 100%; height: 260px; object-fit: cover; } .map-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .map-btn:hover { transform: translate(-50%, -50%) translateY(-2px); } /* ========================================================= 15. Contenu éditorial (pages, articles) ========================================================= */ .prose { font-size: 1.12rem; } .prose > * + * { margin-top: 1.5rem; } .prose h2, .prose h3, .prose h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.25; margin-top: 2.5rem; } .prose h2 { font-size: 2rem; } .prose h3 { font-size: 1.5rem; } .prose a { color: var(--gold); border-bottom: 1px solid var(--line); } .prose blockquote { margin-inline: 0; padding-left: 1.75rem; border-left: 2px solid var(--gold); font-style: italic; color: var(--text-soft); } .prose img { border-radius: 2px; } .page-media { margin: 0 0 3rem; } .page-media img { width: 100%; border-radius: 2px; } .post-list { display: grid; gap: 3.5rem; } .post-card-media img { width: 100%; border-radius: 2px; margin-bottom: 1.5rem; } .post-card-title { margin: 0 0 .75rem; font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; line-height: 1.2; } .post-card-excerpt { color: var(--text-soft); margin-bottom: 1.25rem; } .post-nav { display: flex; justify-content: space-between; gap: 2rem; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--line); font-size: .95rem; } .post-nav a { color: var(--gold); } .pagination { margin-top: 4rem; text-align: center; } .pagination .page-numbers { display: inline-block; padding: .5rem .9rem; font-size: .9rem; color: var(--text-soft); } .pagination .current { background: var(--gold-wash); color: var(--accent-deep); border-radius: 2px; } /* ========================================================= 16. Pied de page — sombre dans les deux thèmes ========================================================= */ .site-footer { background: var(--footer-bg); color: rgba(250, 243, 224, .68); padding: 3.5rem 0; } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; } .footer-nav { display: flex; flex-wrap: wrap; gap: 1.9rem; } .footer-nav a { font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; transition: color .25s var(--ease); } .footer-nav a:hover { color: #c9a24b; } .copyright { margin: 0; font-size: .88rem; color: rgba(250, 243, 224, .45); } /* ========================================================= 17. Apparition au scroll ========================================================= */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } /* ========================================================= 18. Responsive ========================================================= */ /* Zone de resserrement : le nombre d'entrées varie de cinq à sept selon qu'un événement, un menu de la semaine ou des photos de galerie sont publiés. On gagne la place au lettrage plutôt qu'en coupant des intitulés. */ @media (max-width: 1280px) { .header-inner { gap: 1.1rem; } .nav-list { gap: 1.35rem; } .nav-list a { font-size: .67rem; letter-spacing: .13em; } } @media (max-width: 1150px) { :root { --header-h: 74px; } .container, .container-narrow, .header-inner { width: min(100% - 2.5rem, 1200px); } .burger { display: flex; } .header-cta { display: none; } .theme-toggle { margin-left: auto; } .nav { position: fixed; inset: var(--header-h) 0 auto 0; margin: 0; padding: 2rem 2rem 2.75rem; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 20px 40px var(--shadow); display: flex; flex-direction: column; gap: 1.75rem; max-height: calc(100svh - var(--header-h)); overflow-y: auto; transform: translateY(-140%); opacity: 0; pointer-events: none; transition: transform .38s var(--ease), opacity .3s var(--ease); } .nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; } .nav-list { flex-direction: column; align-items: flex-start; gap: 1.4rem; } .nav-list a { font-size: .82rem; letter-spacing: .2em; } .nav-cta-mobile { display: inline-flex; align-self: flex-start; } .story-grid, .infos-grid { grid-template-columns: 1fr; } .story-media { order: -1; } .story-media img { max-height: 420px; } /* Le tableau 2 × 2 est conservé : quatre vignettes tiennent dans un écran de téléphone, là où quatre images empilées demandaient trois écrans. */ .gallery { gap: .75rem; } .gal img { height: 185px; } .gal figcaption { padding: 2rem 1.1rem .9rem; font-size: 1.1rem; } /* Galerie : deux colonnes au doigt, et la loupe reste visible faute de survol pour la révéler. */ .galerie-grille { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .7rem; } .galerie-loupe { opacity: .75; transform: scale(1); width: 34px; height: 34px; margin: -17px 0 0 -17px; } .galerie-loupe::before { inset: 50% 10px auto 10px; } .galerie-loupe::after { inset: 10px auto 10px 50%; } .photo-dialog-figure { padding: 4.5rem 1rem 5.5rem; } .photo-dialog-figure img { max-height: calc(100dvh - 12rem); } .photo-dialog-figure figcaption { flex-direction: column; gap: .5rem; } /* Les flèches passent en bas : au pouce, les bords latéraux sont hors de portée sur un grand téléphone. */ .photo-dialog-nav { top: auto; bottom: 1.25rem; margin-top: 0; width: 46px; height: 46px; } .photo-dialog-prev { left: calc(50% - 3.75rem); } .photo-dialog-next { right: calc(50% - 3.75rem); } /* La fenêtre passe en pleine hauteur, photo au-dessus du texte. */ .lieu-dialog { width: 100%; max-width: none; max-height: 100dvh; height: 100dvh; margin: 0; border: none; border-radius: 0; } .lieu-dialog-inner { grid-template-columns: 1fr; grid-template-rows: 38vh 1fr; height: 100%; } .lieu-dialog-media img { min-height: 100%; } .form { grid-template-columns: 1fr; } } /* --- Événements : l'affiche au-dessus du texte --- */ @media (max-width: 768px) { .evenement, .evenements.est-multiple .evenement { grid-template-columns: 1fr; } /* Plafonnée : une affiche A4 en pleine largeur repousserait le texte hors de l'écran, et c'est le texte qui porte l'appel à réserver. */ .evenement-affiche, .evenements.est-multiple .evenement-affiche { max-width: 340px; margin-inline: auto; } .evenement + .evenement { margin-top: 2.5rem; } .evenements.est-multiple .evenement + .evenement { margin-top: 0; } } /* --- Menu de la semaine : un jour à la fois --- */ @media (max-width: 768px) { .semaine-selecteur { display: grid; } .semaine-grille { grid-template-columns: 1fr; } .semaine-jour { display: none; } .semaine-jour.est-selectionne { display: flex; } } /* --- Carte des mets : accordéon à la place des deux colonnes --- */ @media (max-width: 768px) { .carte-layout { display: block; } .tabs-wrap { display: none; } .cat-heading { display: block; margin: 0; } .carte-cat { border-bottom: 1px solid var(--line); } .carte-cat:first-child { border-top: 1px solid var(--line); } .cat-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.4rem 0; background: none; border: none; cursor: pointer; font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; line-height: 1.25; color: var(--text); text-align: left; transition: color .25s var(--ease); } .cat-toggle:hover, .cat-toggle.is-open { color: var(--gold); } /* Signe + qui devient − à l'ouverture. */ .cat-toggle-icon { position: relative; flex-shrink: 0; width: 15px; height: 15px; } .cat-toggle-icon::before, .cat-toggle-icon::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 1px; background: var(--gold); transition: transform .3s var(--ease), opacity .3s var(--ease); } .cat-toggle-icon::after { transform: rotate(90deg); } .cat-toggle.is-open .cat-toggle-icon::after { transform: rotate(0deg); opacity: 0; } .menu-panel { padding-bottom: 1.75rem; } .dish:first-of-type { padding-top: .25rem; } } @media (max-width: 560px) { body { font-size: 1.06rem; } .hero { padding-bottom: 8rem; } .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn { width: 100%; } /* Le prix passe sous la description, mais reste aligné à droite : il reste rattaché visuellement à son plat au lieu de flotter à gauche. */ .dish { flex-wrap: wrap; } .dish-dots { display: none; } .dish-text { flex: 1 1 0; min-width: 0; } .dish-price { margin-top: .35rem; margin-left: auto; text-align: right; } /* La vignette reste à gauche du nom ; seuls le prix passe à la ligne. */ .dish-photo { width: 60px; height: 60px; align-self: flex-start; } .dish-price { flex: 1 1 100%; } .dish-mention { display: inline; margin-left: .5rem; } .facts { gap: 1.5rem 2.5rem; } .gallery { gap: .55rem; } .gal img { height: 130px; } .gal figcaption { padding: 1.4rem .75rem .6rem; font-size: .92rem; } .saison-ligne { gap: 1rem; } .saison-ligne dt { font-size: 1rem; } .saison-ligne dd { font-size: .95rem; } .footer-inner { flex-direction: column; align-items: flex-start; } } /* ========================================================= 19. Accessibilité : mouvement réduit ========================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } } /* Barre d'administration : ne pas masquer l'en-tête fixe. */ .admin-bar .site-header { top: 32px; } @media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }