/* ==========================================================================
restauration.css - page /restauration/ (chargée via is_page_template).
UNE SEULE PAGE, ET DES ANCRES (décision client du 2026-08-11). Composition :
bannière, présentation, séparateur de réservation, QUATRE SECTIONS DE LIEU
ancrées (restaurant, Starbucks Coffee Point, bar, Espace Lounge), un bloc
« Menu du jour » (.fp-rmenu) entre le Restaurant et le lieu suivant depuis
le 2026-09-06, horaires, carte de clôture, plus le rail latéral. L'ORDRE
RÉEL DES LIEUX EST CELUI DU DOCUMENT (fp_restauration_ordre_document(),
inc/restauration.php, depuis le 2026-09-06 : le rail latéral et les
raccourcis de la présentation le suivent désormais), pas un ordre fixe
écrit dans cette feuille. NI RIDEAU D'OUVERTURE NI BANDEAU DÉFILANT
(retirés le 2026-08-12, retour client : « il faut gicler les loaders » et
« remplace le bandeau... par cet outil [le séparateur de réservation] »).
LA MAQUETTE FAIT FOI (validée par le client, refonte du 2026-08-12, revue
ensuite au fil des retours). Elle est reprise section par section :
proportions, rythme vertical, alternance des atmosphères, mosaïques, points
forts numérotés, carte de clôture qui grandit à l'approche.
CE QUI RESTE AU THÈME, et rien d'autre : la barre de navigation, le pied de
page, la LARGEUR DE COLONNE (var(--fp-wrap) via .fp-wrap, jamais les 1352 px
de la maquette), les boutons (.fp-btn), les icônes (fp_icon) et les jetons de
couleur. Les proportions internes de la maquette sont donc converties en
fractions : sa colonne média de 640 px sur 1352 px utiles vaut une demie,
c'est une demie qui est écrite ici.
LE FOND DE PAGE EST ANIMÉ AU DÉFILEMENT (mécanisme de la maquette). Les fonds
pleins écrits ci-dessous sont l'état de REPLI : ils s'appliquent tant que
restauration.js n'a pas pris la main. Dès qu'il l'a prise, il pose
.fp-r-fond-anime sur le corps de page, les sections deviennent transparentes
et c'est le fond du corps qui se teinte en fondu d'une section à l'autre.
Sans JavaScript, on garde donc une page correcte, jamais une page blanche.
Couleurs : tokens var(--fp-*) UNIQUEMENT (vérifié par check-zones, cette
feuille doit rester à zéro alerte).
Portée : .page-template-template-restauration
========================================================================== */
.page-template-template-restauration {
/* Motif du thème (assets/img/em-plan.svg : le plan du parc, traits clairs
sans aplat). Il remplace la texture que la maquette servait depuis le site
du parc modèle. em-topo.svg n'est PAS utilisé tel quel : il porte son
propre aplat vert (le même rectangle plein que le fichier envoyé par le
client pour ce motif, https://magic-parc.ch/.../Plan-de-travail-1.svg,
octet pour octet), ce qui l'empêcherait de se poser en filigrane sur un
fond choisi.
Sur CE motif-là, précisément, une seconde variable ci-dessous fournit une
variante EN TRAITS SEULS (le même dessin topographique, rect de fond
retiré) : voir --fp-r-motif-topo. */
--fp-r-motif: url('../img/em-plan.svg');
/* Motif « Topo » du client, EN TRAITS SEULS (retour client du 2026-08-12,
restauration point 4 : « quand on change le fond et qu'on passe sur du
vert, mettre le SVG que je t'envoie, soit le SVG de Topo, en fond »). Le
fichier envoyé est déjà celui que le thème héberge sous em-topo.svg :
seule sa variante SANS aplat de fond manquait, dérivée une fois dans
assets/img/em-topo-traits.svg (mêmes lignes, même viewBox, juste son
rectangle de fond plein retiré). Utilisé uniquement pendant les PHASES SOMBRES
du défilement (voir plus bas, "MOTIF TOPO EN FOND"). */
--fp-r-motif-topo: url('../img/em-topo-traits.svg');
/* Encre claire des fonds sombres. Un gris sur fond coloré est un défaut de
lisibilité : on éclaircit vers le blanc en gardant une pointe de teal, ce
qui reste dans la famille de la marque. */
--fp-r-clair: color-mix(in srgb, var(--fp-white) 84%, var(--fp-accent));
--fp-r-clair-doux: color-mix(in srgb, var(--fp-white) 68%, var(--fp-accent));
/* Filets. */
--fp-r-filet: color-mix(in srgb, var(--fp-primary) 22%, transparent);
--fp-r-filet-clair: color-mix(in srgb, var(--fp-white) 22%, transparent);
/* Gouttière de la maquette entre les deux colonnes d'une section. */
--fp-r-gouttiere: clamp(28px, 4.4vw, 60px);
}
/* ==========================================================================
FOND DE PAGE ANIMÉ
Posée par restauration.js seulement. Les sections deviennent transparentes
et laissent voir le fond du corps de page, que le script teinte en fondu.
La COULEUR DU TEXTE n'est pas touchée : une section sombre garde son encre
claire, sinon le texte du bar deviendrait illisible pendant la transition.
========================================================================== */
.page-template-template-restauration.fp-r-fond-anime [data-fp-sect] {
background-color: transparent;
}
/* ==========================================================================
MOTIF TOPO EN FOND, PENDANT LES PHASES SOMBRES (retour client du
2026-08-12, restauration point 4).
AVEC restauration.js (.fp-r-fond-anime) : le fond est un aplat GLOBAL porté
par le corps de page (voir le script), le motif l'est donc aussi. Un
pseudo-élément fixe, plein écran, sous tout le contenu réel (z-index -1 :
au-dessus du fond propre de , sous tout enfant non positionné en
négatif, cf. ordre de peinture CSS), suit la même classe .is-fond-sombre
que la bascule d'encre : opacité nulle sur les phases claires, dosée sur
les phases sombres. TRANSITION EN FONDU (jamais un surgissement sec,
demande explicite du client) : contrairement à l'encre, qui bascule NETTE
au milieu du fondu du fond (contrainte de contraste, voir plus bas), un
motif décoratif à faible opacité n'a aucun risque de contraste à traverser
pendant sa propre transition ; il peut donc s'estomper en douceur sur la
même durée que le fondu de fond (voir DUREE_FOND, restauration.js) plutôt
que de sauter d'un état à l'autre.
pointer-events: none : ce calque ne capte jamais un clic. Aucune animation
propre en dehors du fondu d'opacité : un simple background-image fixe.
SANS restauration.js (fonds pleins de repli) : pas de calque global, le
motif est simplement posé EN STATIQUE sur les deux sections dont le fond
est réellement sombre (.fp-rlieu.fp-s-dark, Starbucks et Bar), en lavis
sur leur aplat --fp-dark existant, jamais un second aplat qui le
remplacerait. Sous .fp-r-fond-anime, ce fond local est neutralisé (règle
plus bas) : c'est alors la seule couche globale qui porte le motif.
COVER, PAS DE TAILLE FIXE (retour client du 2026-08-12, troisième passage,
point 3 : « il faut forcer le fond topo en pleine largeur, faire un cover,
sinon ça ne marche pas »). Une taille fixe (1400 px) laissait le motif plus
étroit que certains écrans, ou coupé de façon incohérente d'une section à
l'autre puisque chaque section a sa propre hauteur : cover le fait toujours
couvrir tout le cadre (section ou fenêtre), quelle que soit sa taille, au
prix d'un motif parfois rogné sur les bords, jamais répété en mosaïque.
OPACITÉ DOSÉE AVEC LE MOTIF EN PLACE, PAS SANS LUI, RÉDUITE D'UN CRAN
(retour client, même point 3) : le lavis (92 %, un peu plus couvrant
qu'avant) et l'opacité du calque global (.06, contre .09) restent un
filigrane qui ne mord jamais sur le contraste du texte clair des sections
sombres (déjà élevé, voir la mesure de contraste des états stables plus bas
dans ce fichier) ; toute nouvelle valeur doit être re-mesurée AVEC le motif
visible, pas seulement sur l'aplat nu. ================================= */
.page-template-template-restauration .fp-rlieu.fp-s-dark {
background-image:
linear-gradient(color-mix(in srgb, var(--fp-dark) 92%, transparent), color-mix(in srgb, var(--fp-dark) 92%, transparent)),
var(--fp-r-motif-topo);
background-repeat: no-repeat, no-repeat;
background-position: center, center;
background-size: cover, cover;
}
.page-template-template-restauration.fp-r-fond-anime .fp-rlieu.fp-s-dark {
/* Neutralisé sous le fond animé : le calque global ci-dessous prend le
relais, synchronisé au reste de la page plutôt qu'à cette seule section. */
background-image: none;
}
.page-template-template-restauration.fp-r-fond-anime::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background-image: var(--fp-r-motif-topo);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
opacity: 0;
/* Même durée que le fondu du fond (DUREE_FOND = .34s dans restauration.js) :
un calque qui suit le rythme du reste plutôt qu'un tempo à lui. */
transition: opacity .34s ease;
}
.page-template-template-restauration.fp-r-fond-anime.is-fond-sombre::before {
opacity: .06;
}
/* ==========================================================================
CASCADE LETTRE PAR LETTRE DES TITRES : RÉTABLIE (retour client du
2026-08-12 : « les titres ne s'affichent pas avec la même animation que
d'habitude... peut-être juste remettre ceci »).
CE QUI SE PASSAIT AVANT. Chaque h1/h2/h3 de #fp-content, donc aussi ceux de
cette page, recevait automatiquement .fp-anim-h de main.js (setupHeadingReveal),
opacité nulle en CSS (main.css) jusqu'à son entrée en vue. Mais les h2 de
cette page (lieux, présentation, horaires, CTA) portaient AUSSI data-fp-rise,
piloté par restauration.js/GSAP, avec SA PROPRE opacité nulle posée par
[data-fp-rise] sous html.fp-r-anim plus bas dans ce fichier. Ce sélecteur est
PLUS SPÉCIFIQUE que .fp-anim-h (un attribut de plus) : il gagnait donc la
cascade CSS et gardait le titre à opacité nulle jusqu'à ce que GSAP le
révèle en un seul bloc plein, jamais lettre par lettre (double pilotage,
même famille de piège que fp_render_intro_detail, inc/sections.php). La
neutralisation ci-dessous forçait ensuite .fp-anim-h à opacité 1 en
permanence, ce qui ne changeait rien à ce blocage (le sélecteur data-fp-rise
restait plus spécifique) et achevait de couper la cascade caractère par
caractère pour de bon.
LA CORRECTION, EN DEUX TEMPS. 1) inc/restauration.php ne pose plus
data-fp-rise sur AUCUN titre de section (h2 des lieux/présentation/horaires/
CTA, h3 « Menu du jour ») : setupHeadingReveal (.fp-anim-h) les pilote donc
seul, sans concurrent, exactement comme les autres h2 du site. Les AUTRES
éléments qui portaient data-fp-rise (sur-titres, texte, listes, boutons,
photo d'ambiance...) le gardent : leur apparition GSAP est inchangée. 2) Le
h1 de la bannière, LUI, GARDE SON EXCLUSION ci-dessous : il porte déjà sa
propre animation de lignes (montée depuis un masque, data-fp-ligne,
restauration.js), qui EST son équivalent de la cascade de titre pour cette
page. La cascade générique de main.js et cette animation de ligne ciblent
la MÊME zone de l'écran à des instants différents (l'une posée par un
IntersectionObserver au défilement, l'autre par une timeline GSAP jouée dès
le chargement) : les superposer aurait recréé exactement le même double
pilotage que ci-dessus, cette fois sur la bannière. Le h1 est donc la SEULE
exception : il continue de recevoir .fp-anim-h de main.js (rien ne l'en
empêche), mais cette règle fige son propre état à « déjà visible » pour ne
laisser jouer que l'animation de ligne, comme avant ce correctif.
========================================================================== */
.page-template-template-restauration .fp-rhero-titre.fp-anim-h,
.page-template-template-restauration .fp-rhero-titre.fp-anim-h.fp-anim-armed,
.page-template-template-restauration .fp-rhero-titre.fp-anim-h.fp-anim-split,
.page-template-template-restauration .fp-rhero-titre .fp-anim-char {
opacity: 1;
transform: none;
transition: none;
}
/* ==========================================================================
ANTI-CLIGNOTEMENT : ÉTAT INITIAL MASQUÉ SOUS MARQUEUR SYNCHRONE
Retour client du 2026-08-12 : « les éléments sont visibles, puis ils
passent en invisible, avant de réapparaître avec l'animation ». La classe
html.fp-r-anim est posée de façon SYNCHRONE, avant la première peinture, par
un tout petit script imprimé dans wp_head (fp_restauration_anti_flash_marqueur,
inc/restauration.php) : rien à observer, rien à attendre, juste une classe.
SOUS CETTE CLASSE SEULEMENT, les éléments que restauration.js anime naissent
déjà dans leur état de départ (opacité nulle, léger décalage) : le premier
pixel peint les montre déjà masqués, jamais pleins puis masqués. GSAP n'a
donc plus qu'à les amener vers leur état visible (gsap.to), il ne les fait
plus jamais disparaître puisqu'ils ne sont jamais vus pleins avant lui.
SANS JAVASCRIPT, LA CLASSE N'EXISTE JAMAIS (seul le script de tête la pose) :
ces règles ne s'appliquent alors à rien, et la page reste entière, comme
avant. Si GSAP ne charge jamais ou échoue en cours de route, restauration.js
retire lui-même la classe : plus rien de cette feuille ne reste caché. Sous
« animations réduites », le script de tête refuse déjà de poser la classe ;
la règle du bloc de fin de fichier est un second filet, au cas où.
Les valeurs reprennent EXACTEMENT les états de départ que restauration.js
posait jusqu'ici par GSAP (from), pour ne rien changer au mouvement lui-même,
seulement à sa gestion de l'état initial. */
html.fp-r-anim .page-template-template-restauration [data-fp-hero-sur] {
opacity: 0;
transform: translateY(16px);
}
/* PIXELS, PAS POURCENTAGE, et c'est délibéré : restauration.js utilisait
yPercent (relatif à la hauteur de la ligne, donc capable de suivre le
clamp() du titre à toute largeur). Mais GSAP ne peut PAS relire un
pourcentage dans un transform déjà posé par CSS : getComputedStyle ne
renvoie qu'une matrice en pixels, jamais l'unité d'origine. Demander
ensuite yPercent:0 anime donc une propriété que GSAP n'a jamais vue partir
d'ailleurs que de zéro, et la ligne restait invisible pour de bon (mesuré
au banc). Un pixel fixe, assez grand pour dépasser la plus haute ligne du
titre à sa plus grande taille (clamp jusqu'à 4.6rem), se relit sans
ambiguïté : restauration.js anime maintenant y, pas yPercent. */
html.fp-r-anim .page-template-template-restauration [data-fp-ligne] {
transform: translateY(100px);
}
html.fp-r-anim .page-template-template-restauration [data-fp-hero-suite] {
opacity: 0;
transform: translateY(22px);
}
html.fp-r-anim .page-template-template-restauration [data-fp-media] {
opacity: 0;
transform: translateY(60px);
}
html.fp-r-anim .page-template-template-restauration [data-fp-rise] {
opacity: 0;
transform: translateY(26px);
}
html.fp-r-anim .page-template-template-restauration [data-fp-carte] {
transform: scale(.84);
border-radius: 56px;
}
/* ==========================================================================
BANNIÈRE (.fp-rhero)
Maquette : bloc de 880 px de haut, photo sombre en diaporama, voile en biais,
texte calé en haut, pied de bannière avec les deux chiffres séparés d'un
filet vertical, les repères du diaporama et l'invitation à défiler.
========================================================================== */
.page-template-template-restauration .fp-rhero {
position: relative;
display: flex;
flex-direction: column;
/* Mobile d'abord : une bannière ne fait pas une hauteur d'écran sur un
téléphone, sinon le texte flotte au milieu d'un grand aplat. Elle reprend
les 880 px de la maquette dès qu'il y a la place (voir plus bas). */
min-height: min(84vh, 620px);
padding: calc(var(--fp-nav-h) + 40px) 0 clamp(28px, 6vw, 56px);
background: var(--fp-dark);
color: var(--fp-white);
/* overflow:hidden RETIRÉ D'ICI (retour client du 2026-08-12, troisième
passage, point 2) : le séparateur de réservation redevient un ENFANT du
héro en position absolue, débordant volontairement sur le bas de cette
section. Un overflow:hidden posé ICI le tranchait net à la ligne de
jonction (même piège déjà rencontré et corrigé sur l'accueil, voir
home.css). La découpe de la photo est rendue au cadre dédié juste en
dessous (.fp-rhero-cadre). */
}
/* TÉLÉPHONE : BANNIÈRE PLUS HAUTE, CONTENU CENTRÉ (Marino, 2026-09-11 :
« sur mobile héro restauration 90vh avec contenu plus centré verticalement »).
La règle de base plus haut plafonnait la hauteur à min(84vh, 620px), et son
commentaire disait pourquoi : sans centrage, un texte calé en haut d'un
grand aplat flotte. Le centrage demandé ici lève précisément cette réserve,
le plafond de 620px peut donc sauter.
justify-content ne déplace QUE le contenu de flux (titre, accroche,
boutons) : le module de réservation, lui, est en position absolue et
continue de mordre sur le bas de la bannière, exactement comme avant.
C'est pour lui que la réserve du bas reste nettement plus grande que celle
du haut : sans elle, les boutons passeraient derrière la carte. Le
centrage est donc optique, calculé sur l'espace réellement libre, et non
un centrage géométrique qui aurait poussé le texte sous le module. */
@media (max-width: 720px) {
.page-template-template-restauration .fp-rhero {
min-height: 90vh;
justify-content: center;
padding-top: calc(var(--fp-nav-h) + 20px);
padding-bottom: clamp(96px, 26vw, 170px);
}
}
/* CADRE DE DÉCOUPE DE LA PHOTO (retour client du 2026-08-12 : « l'overlay
doit faire la même hauteur que l'image, point »). Le calque photo est
translaté vers le bas par la parallaxe (restauration.js) et le héro ne
clippe plus rien (voir ci-dessus) : sans ce cadre, la photo sortait du
héro par le bas et flottait, nue, sous la section suivante (transparente,
le fond animé du body est derrière), hors de portée du voile borné au
héro. Le cadre a l'emprise exacte du héro et découpe tout ce qui bouge à
l'intérieur (parallaxe, zoom Ken Burns) ; le voile, en frère à la même
emprise (inset: 0 lui aussi), couvre donc toujours exactement ce qui se
voit de l'image, quelle que soit la position du calque. Le module de
réservation, lui, reste HORS du cadre : il continue de déborder. */
.page-template-template-restauration .fp-rhero-cadre {
position: absolute;
inset: 0;
overflow: hidden;
z-index: 0;
}
.page-template-template-restauration .fp-rhero-bg { overflow: hidden; }
/* AUCUNE PHOTO DÉPOSÉE (classe posée par le rendu) : plutôt qu'un aplat nu, le
plan du parc en filigrane donne de la matière à la bannière, et le voile
s'allège pour le laisser voir. C'est l'état de livraison, il doit tenir. */
.page-template-template-restauration .fp-rhero-bg--nu {
background-color: color-mix(in srgb, var(--fp-primary) 70%, var(--fp-dark));
background-image: var(--fp-r-motif);
background-size: 130%;
background-position: center 28%;
}
/* Voile en biais de la maquette : opaque à gauche sous le texte, presque
transparent à droite pour laisser vivre la photo.
NEUTRE ET PLUS SOMBRE, PAS TEAL (retour client du 2026-08-12, sur la photo
mise en avant qu'il dépose désormais en fond) : --fp-ink est l'encre neutre
du site, sans la pointe verte de --fp-dark. Les paliers montent aussi un peu
(94/74/32 -> 96/80/40) pour l'assombrir, comme demandé, en gardant le même
biais et la même lecture du titre sur la gauche.
SECOND CALQUE, ANCRÉ EN BAS (retour client du 2026-08-12, quatrième
passage, point 1 : « on commence à voir l'image sous l'overlay tout au
fond de la section »). CAUSE, VÉRIFIÉE DANS LE CSS AVANT DE CORRIGER :
.fp-rhero-voile est bien en position: absolute; inset: 0 directement dans
.fp-rhero (position: relative), donc il couvre déjà toute la hauteur de la
section, y compris le padding-bottom agrandi pour la carte de réservation
(le module n'« étire » aucun conteneur, il est position: absolute, donc
hors du flux). Le vrai coupable est le dégradé DIAGONAL lui-même : pour un
angle proche de l'horizontale (105deg) appliqué à une boîte devenue
nettement plus HAUTE (940px, plus ce même padding-bottom), la composante
VERTICALE de sa projection pèse proportionnellement plus lourd, et le bas
de la section (quel que soit le côté, gauche ou droit) tombe plus tôt dans
la portion la plus transparente du dégradé qu'avant ce rehaussement, là où
la carte du module vient justement chevaucher la photo nue. Ce second
calque, PUREMENT VERTICAL, ne dépend d'aucun angle ni d'aucune hauteur de
boîte : ancré sur le bas, il garantit un fond sombre à cet endroit quelle
que soit la hauteur réelle de la section, en plus du dégradé diagonal
existant (les deux calques se superposent, le second peint en dessous). */
.page-template-template-restauration .fp-rhero-voile {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(
105deg,
color-mix(in srgb, var(--fp-ink) 96%, transparent) 0%,
color-mix(in srgb, var(--fp-ink) 80%, transparent) 44%,
color-mix(in srgb, var(--fp-ink) 40%, transparent) 100%
),
linear-gradient(
to top,
color-mix(in srgb, var(--fp-ink) 88%, transparent) 0%,
transparent 38%
);
pointer-events: none;
}
.page-template-template-restauration .fp-rhero:has(.fp-rhero-bg--nu) .fp-rhero-voile {
background:
linear-gradient(
105deg,
color-mix(in srgb, var(--fp-ink) 90%, transparent) 0%,
color-mix(in srgb, var(--fp-ink) 62%, transparent) 52%,
color-mix(in srgb, var(--fp-ink) 26%, transparent) 100%
),
linear-gradient(
to top,
color-mix(in srgb, var(--fp-ink) 82%, transparent) 0%,
transparent 38%
);
}
.page-template-template-restauration .fp-rhero-inner {
width: 100%;
display: flex;
flex-direction: column;
gap: clamp(16px, 2.4vw, 24px);
}
.page-template-template-restauration .fp-rhero-sur {
margin: 0;
font-family: var(--fp-font-heading);
font-weight: 700;
font-size: 1rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--fp-accent);
}
/* TITRE EN POLICE DE CORPS, et c'est un choix de la maquette, pas un oubli :
toutes les autres têtes de section y sont en capitales d'affichage, celle-ci
est en casse normale et en graisse forte. C'est ce qui distingue la bannière
du reste de la page. Aeonik Bold (700) tient le rôle du semi-gras de la
maquette : c'est la graisse réelle la plus proche dont dispose le thème,
jamais un faux gras. */
.page-template-template-restauration .fp-rhero-titre {
margin: 0;
/* 15ch tenait déjà les deux lignes du titre courant à toutes les largeurs
mesurées (banc, 320 à 1920 px) : la marge est volontairement plus large
pour rester fiable si la cliente retouche le titre dans Gutenberg (un mot
de plus ne doit pas faire déborder une des deux lignes forcées, voir
fp_restauration_titre_lignes). N'a pas d'effet sur un texte plus court :
un max-width ne fait qu'autoriser une ligne plus longue avant de la
rompre, il n'étire jamais un texte qui n'a pas besoin de la place. */
max-width: 20ch;
/* TYPO DE TITRE DU SITE, en majuscules : la maquette met sa bannière en
police de corps, mais l'identité du site prime sur les titres (arbitrage
du client). Le découpage en deux lignes et leur montée sous masque, eux,
restent ceux de la maquette. */
font-family: var(--fp-font-heading);
font-weight: 700;
font-size: clamp(2.4rem, 6.4vw, 4.6rem);
line-height: .96;
letter-spacing: .01em;
text-transform: uppercase;
text-wrap: pretty;
}
/* Chaque ligne monte de derrière son masque. Le masque n'a d'effet que pendant
l'animation : au repos, la ligne est simplement à sa place. */
.page-template-template-restauration .fp-rhero-masque {
display: block;
overflow: hidden;
padding-bottom: 2px;
}
.page-template-template-restauration .fp-rhero-ligne { display: block; }
.page-template-template-restauration .fp-rhero-ligne--accent { color: var(--fp-accent); }
.page-template-template-restauration .fp-rhero-lead {
margin: 0;
max-width: 34ch;
font-size: clamp(1rem, 1.6vw, 1.25rem);
line-height: 1.6;
color: var(--fp-r-clair);
}
.page-template-template-restauration .fp-rhero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 10px;
}
.page-template-template-restauration .fp-rhero-actions .fp-btn { min-height: 52px; }
/* --- Pied de bannière ---------------------------------------------------- */
.page-template-template-restauration .fp-rhero-pied {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(18px, 2.6vw, 34px);
margin-top: clamp(30px, 7vw, 96px);
}
.page-template-template-restauration .fp-rhero-chiffres {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(18px, 2.6vw, 34px);
}
.page-template-template-restauration .fp-rhero-chiffre {
display: flex;
align-items: baseline;
gap: 10px;
max-width: 22ch;
}
/* Filet vertical entre les deux chiffres, comme la maquette. Décoratif, donc
dessiné et non écrit dans le document. */
.page-template-template-restauration .fp-rhero-chiffre + .fp-rhero-chiffre::before {
content: "";
align-self: center;
width: 1px;
height: 36px;
margin-right: clamp(18px, 2.6vw, 34px);
background: color-mix(in srgb, var(--fp-white) 24%, transparent);
}
.page-template-template-restauration .fp-rhero-nombre {
display: inline-block;
font-family: var(--fp-font-heading);
font-weight: 700;
font-size: clamp(2.1rem, 4.2vw, 3.25rem);
line-height: .9;
/* Chiffres de même chasse : le compteur ne fait pas sautiller la légende. */
font-variant-numeric: tabular-nums;
}
.page-template-template-restauration .fp-rhero-legende {
font-size: .875rem;
line-height: 1.35;
color: var(--fp-r-clair-doux);
}
.page-template-template-restauration .fp-rhero-points {
list-style: none;
margin: 0 0 0 auto;
padding: 0;
display: flex;
gap: 7px;
}
.page-template-template-restauration .fp-rhero-point {
width: 26px;
height: 3px;
border-radius: 999px;
background: color-mix(in srgb, var(--fp-white) 30%, transparent);
transition: background-color .4s ease;
}
.page-template-template-restauration .fp-rhero-point.is-actif { background: var(--fp-accent); }
.page-template-template-restauration .fp-rhero-defile {
display: none;
align-items: center;
gap: 8px;
margin: 0;
font-family: var(--fp-font-heading);
font-weight: 700;
font-size: .875rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--fp-white);
}
/* Sans repères de diaporama, l'invitation prend la place libre à droite. */
.page-template-template-restauration .fp-rhero-pied:not(:has(.fp-rhero-points)) .fp-rhero-defile {
margin-left: auto;
}
.page-template-template-restauration .fp-rhero-fleche {
display: inline-flex;
animation: fp-r-defile 1.8s ease-in-out infinite;
}
.page-template-template-restauration .fp-rhero-fleche svg { width: 16px; height: 16px; }
@keyframes fp-r-defile {
0%, 100% { transform: translateY(0); opacity: .5; }
50% { transform: translateY(9px); opacity: 1; }
}
@media (min-width: 900px) {
.page-template-template-restauration .fp-rhero {
/* Légèrement plus haut qu'avant (880 -> 940 px, demande client du
2026-08-12, troisième passage, point 2 : « quitte à augmenter un peu
la hauteur de la section héros pour que ça rende sympa ») : la carte
de réservation qui mord sur son bas a besoin d'un peu plus d'air. */
min-height: min(98vh, 940px);
padding-top: calc(var(--fp-nav-h) + 96px);
}
.page-template-template-restauration .fp-rhero-defile { display: flex; }
}
/* ==========================================================================
SÉPARATEUR DE RÉSERVATION (.fp-resbar-wrap, partagé avec l'accueil)
REPRISE DE LA POSTURE DE L'ACCUEIL (retour client du 2026-08-12, troisième
passage, point 2 : « il est au fond de la deuxième section [avant]. J'aime
rais qu'il soit vraiment entre les deux, qu'il fasse la transition entre
les deux sections... c'est exactement la posture du composant sur
l'accueil »). ABANDON du divider en flux normal posé au second passage : la
carte redevient un ENFANT du héro (fp_render_restauration_banniere
l'imprime avant la fermeture de .fp-rhero, comme fp_render_hero le fait
pour l'accueil), en position ABSOLUE, bottom:0 + translateY, MÊME RECETTE
que .fp-resbar-wrap sur home.css : elle mord mécaniquement sur le bas du
héro et le haut de la section suivante, quelle que soit sa hauteur réelle,
sans le moindre calcul en dur.
Markup et classes REPRIS À L'IDENTIQUE de l'accueil (inc/sections.php,
fp_render_resbar) : mêmes onglets, mêmes champs, même JS générique
(main.js, setupTabs/setupResBar, déjà chargé sur toute page, aucune ligne
ajoutée ici). Les classes .fp-resbar-wrap/.fp-resbar/etc. n'étant définies
que dans home.css (chargée sur l'accueil seulement), cette page redéclare
l'habillage dont elle a besoin, comme le fait déjà chaque feuille de page
pour ses propres composants partagés.
========================================================================== */
.page-template-template-restauration .fp-resbar-wrap {
position: absolute;
left: 50%;
bottom: 0;
z-index: 6;
/* translateY(50%) : le MILIEU de la carte pile sur la séparation, sans
aucun biais. Cinquième passage du client (2026-08-12) : « il faut le
tirer un peu plus bas, j'aimerais vraiment qu'il soit à l'intersection
entre les deux sections ». Les résidus successifs (-60px puis -15px)
gardaient un biais vers le héro : abandonnés, la demande est le
chevauchement exact. */
transform: translate(-50%, 50%);
pointer-events: none; /* seul le contenu (carte) reçoit les interactions */
width: var(--fp-wrap);
padding: 0 var(--fp-gutter);
box-sizing: border-box;
}
@media (max-width: 720px) {
.page-template-template-restauration .fp-resbar-wrap { padding: 0 var(--fp-gutter-mobile); }
}
.page-template-template-restauration .fp-resbar-wrap * { pointer-events: auto; }
.page-template-template-restauration .fp-resbar {
position: relative;
isolation: isolate;
overflow: hidden;
background: var(--fp-primary);
border-radius: var(--fp-radius-lg);
box-shadow: var(--fp-shadow-lg);
}
/* Même recette de motif que le panneau sans photo des sections de lieu plus
bas (var(--fp-r-motif)) : lignes seules, posées sur l'aplat vert de la
carte, jamais un second aplat qui masquerait le premier. */
.page-template-template-restauration .fp-resbar::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: var(--fp-r-motif);
background-size: 760px;
background-repeat: repeat;
opacity: .34;
}
.page-template-template-restauration .fp-resbar > * { position: relative; z-index: 1; }
.page-template-template-restauration .fp-resbar-tabs {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
border-bottom: 1px solid color-mix(in srgb, var(--fp-white) 28%, transparent);
padding: 0 12px;
scrollbar-width: thin;
}
.page-template-template-restauration .fp-resbar-tab {
flex: 0 0 auto;
font-family: var(--fp-font-body);
font-weight: 600;
font-size: .92rem;
color: color-mix(in srgb, var(--fp-white) 78%, transparent);
background: transparent;
border: 0;
padding: 16px 14px 14px;
margin: 0;
cursor: pointer;
border-bottom: 3px solid transparent;
transition: color .18s ease, border-color .18s ease;
white-space: nowrap;
}
.page-template-template-restauration .fp-resbar-tab:hover { color: var(--fp-white); }
.page-template-template-restauration .fp-resbar-tab.is-active { color: var(--fp-white); border-bottom-color: var(--fp-accent); }
.page-template-template-restauration .fp-resbar-tab:focus-visible { outline: 2px solid var(--fp-white); outline-offset: -2px; }
.page-template-template-restauration .fp-resbar-panel { display: none; padding: 26px 28px 28px; min-height: 118px; box-sizing: border-box; }
.page-template-template-restauration .fp-resbar-panel.is-active { display: flex; flex-direction: column; justify-content: center; }
.page-template-template-restauration .fp-resbar-soon {
margin: 0;
font-family: var(--fp-font-body);
color: color-mix(in srgb, var(--fp-white) 82%, transparent);
font-size: .95rem;
}
.page-template-template-restauration .fp-resbar-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px; }
.page-template-template-restauration .fp-resbar-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 180px; min-width: 150px; }
.page-template-template-restauration .fp-resbar-field label {
font-family: var(--fp-font-body);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
font-size: .68rem;
color: color-mix(in srgb, var(--fp-white) 85%, transparent);
}
.page-template-template-restauration .fp-resbar-select,
.page-template-template-restauration .fp-resbar-input {
font-family: var(--fp-font-body);
font-size: .92rem;
color: var(--fp-ink);
background: var(--fp-white);
border: 0;
border-radius: var(--fp-pill);
padding: 12px 18px;
width: 100%;
appearance: none;
-webkit-appearance: none;
}
.page-template-template-restauration .fp-resbar-input::placeholder { color: var(--fp-ink-soft); opacity: 1; }
.page-template-template-restauration .fp-resbar-select-wrap { position: relative; }
.page-template-template-restauration .fp-resbar-select { padding-right: 34px; }
.page-template-template-restauration .fp-resbar-select-wrap::after {
content: '';
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 8px;
pointer-events: none;
background-color: var(--fp-secondary);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.page-template-template-restauration .fp-resbar-select:focus-visible,
.page-template-template-restauration .fp-resbar-input:focus-visible {
outline: 2px solid var(--fp-primary);
outline-offset: 1px;
}
.page-template-template-restauration .fp-resbar-submit { flex: 0 0 auto; align-self: flex-end; }
/* FORMULE IMPOSÉE : reprise de la règle de home.css (.fp-resbar-formule-fixe),
qui n'est pas chargée sur ce gabarit, comme tout le reste du module de
réservation ci-dessus. Quand l'activité choisie n'offre QU'UNE formule,
main.js (setupResBar) masque la liste déroulante et affiche la formule en
clair ici, un champ caché transmettant sa valeur. */
.page-template-template-restauration .fp-resbar-formule-fixe {
display: flex; align-items: center; box-sizing: border-box;
width: 100%; min-height: 44px; padding: 12px 18px;
font-family: var(--fp-font-body); font-size: .92rem; font-weight: 600;
color: var(--fp-secondary); background: var(--fp-white);
border-radius: var(--fp-pill);
}
@media (prefers-reduced-motion: reduce) {
.page-template-template-restauration .fp-resbar-tab { transition: none; }
}
@media (max-width: 720px) {
.page-template-template-restauration .fp-resbar-row { gap: 12px; }
.page-template-template-restauration .fp-resbar-field { flex: 1 1 45%; }
}
@media (max-width: 640px) {
.page-template-template-restauration .fp-resbar-tabs { padding: 0 8px; }
.page-template-template-restauration .fp-resbar-tab { font-size: .82rem; padding: 14px 10px 12px; }
.page-template-template-restauration .fp-resbar-panel { padding: 20px 18px 22px; }
.page-template-template-restauration .fp-resbar-row { flex-direction: column; align-items: stretch; }
.page-template-template-restauration .fp-resbar-field { flex-basis: auto; }
.page-template-template-restauration .fp-resbar-formule-fixe { justify-content: center; text-align: center; font-size: 1rem; }
.page-template-template-restauration .fp-resbar-submit { width: 100%; justify-content: center; }
/* Le chevauchement DÉGÉNÈRE EN EMPILEMENT PROPRE sur petit écran (retour
client du 2026-08-12, troisième passage, point 2 : « vérifie le
mobile »). La carte reste en position absolue (même mécanique qu'au-
dessus, aucune bascule vers le flux normal, comme sur l'accueil), mais
remonte moins haut sur le héro : ses champs empilés (voir juste au-
dessus, flex-direction: column) la rendent bien plus haute, la faire
mordre autant sur le héro la ferait déborder sur le texte du haut. */
.page-template-template-restauration .fp-resbar-wrap { transform: translate(-50%, 46%); }
}
/* Un peu plus de hauteur en bas du héro et en haut de la présentation, pour
accueillir la carte qui mord sur les deux (retour client du 2026-08-12,
troisième passage, point 2). Trois paliers : la carte est nettement plus
haute une fois ses champs empilés (<720 px), un peu moins avec la rangée de
champs sur une ligne (720 à 899 px), stable au-delà (>=900 px, héro déjà
agrandi plus haut).
PADDING-TOP DE L'INTRO ENCORE AUGMENTÉ (retour client du 2026-08-12,
quatrième passage, point 1 : « mets un peu plus d'espace en haut de la
première section blanche, pour que le module descende dessus »), en
accord avec le translateY resserré de .fp-resbar-wrap juste au-dessus : la
carte mord désormais un peu plus sur la présentation, elle a donc besoin
d'un peu plus d'air avant le titre qui suit. Le padding-bottom du héro,
lui, ne bouge pas : rien ne demandait de réduire l'espace réservé de son
côté. */
.page-template-template-restauration .fp-rhero { padding-bottom: clamp(210px, 40vw, 240px); }
.page-template-template-restauration .fp-rintro { padding-top: clamp(260px, 46vw, 290px); }
@media (min-width: 720px) {
.page-template-template-restauration .fp-rhero { padding-bottom: 170px; }
.page-template-template-restauration .fp-rintro { padding-top: 230px; }
}
@media (min-width: 900px) {
.page-template-template-restauration .fp-rhero { padding-bottom: 150px; }
.page-template-template-restauration .fp-rintro { padding-top: 200px; }
}
/* ==========================================================================
PRÉSENTATION (.fp-rintro)
========================================================================== */
.page-template-template-restauration .fp-rintro {
padding-left: 0;
padding-right: 0;
padding-bottom: clamp(52px, 7.4vw, 96px);
}
.page-template-template-restauration .fp-rintro-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(20px, 4vw, 72px);
align-items: start;
}
.page-template-template-restauration .fp-rintro-titre {
margin: 0;
max-width: 13ch;
font-family: var(--fp-font-heading);
font-weight: 700;
line-height: .9;
text-transform: uppercase;
font-size: clamp(2.3rem, 5.8vw, 4.75rem);
/* Vert nuit, comme la maquette : ses titres ne sont jamais dans le noir du
corps de texte. */
color: var(--fp-dark);
text-wrap: balance;
}
.page-template-template-restauration .fp-rintro-prose { max-width: 56ch; }
.page-template-template-restauration .fp-rintro-prose p { margin: 0 0 1.1em; }
.page-template-template-restauration .fp-rintro-prose p:first-child {
font-size: clamp(1.05rem, 1.5vw, 1.28rem);
line-height: 1.62;
color: var(--fp-ink);
}
.page-template-template-restauration .fp-rintro-prose p:last-child { margin-bottom: 0; }
.page-template-template-restauration .fp-rintro-liens {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 22px;
}
/* Raccourcis vers les quatre ancres. Cible tactile de 44 px de haut : ce sont
aussi la navigation de la page sur mobile, là où le rail n'existe pas. La
maquette les dessine à 40 px, l'accessibilité tranche. */
.page-template-template-restauration .fp-rintro-lien {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 18px;
border-radius: 999px;
background: color-mix(in srgb, var(--fp-primary) 10%, var(--fp-white));
color: var(--fp-secondary);
font-weight: 600;
font-size: .95rem;
text-decoration: none;
transition: background-color .2s ease, color .2s ease;
}
.page-template-template-restauration .fp-rintro-lien:hover {
background: var(--fp-secondary);
color: var(--fp-white);
}
/* Même principe que les liens de renvoi de section plus bas dans cette
feuille (retour client du 2026-08-12, troisième passage, point 5) : ces
pilules suivent le mode
GLOBAL is-fond-sombre, pas seulement le fond local de l'intro (toujours
clair par défaut, mais le mode partagé peut rester sombre un instant lors
d'un défilement rapide ou d'un retour en arrière). */
.page-template-template-restauration.fp-r-fond-anime.is-fond-sombre .fp-rintro-lien {
background: color-mix(in srgb, var(--fp-white) 16%, transparent);
color: var(--fp-white);
}
.page-template-template-restauration.fp-r-fond-anime.is-fond-sombre .fp-rintro-lien:hover {
background: var(--fp-white);
color: var(--fp-primary);
}
@media (min-width: 860px) {
.page-template-template-restauration .fp-rintro-grid { grid-template-columns: 1fr 1fr; }
.page-template-template-restauration .fp-rintro-corps { padding-top: 14px; }
}
/* ==========================================================================
SECTIONS DE LIEU (fp-rlieu : Restauration, Lieu).
Maquette : deux colonnes de largeur égale (640 px de média contre 652 px de
texte sur 1352 px utiles), gouttière de 60 px, alignement centré. La
colonne média affiche une seule photo dans son cadre habituel, ou un
carrousel à flèches dès la deuxième (retouche du 2026-09-10, qui remplace
l'ancienne mosaïque de trois cadres à hauteur fixe, jamais vue en
production).
Mobile d'abord : une seule colonne, le TEXTE EN PREMIER, ce qui est aussi
l'ordre du document. Le côté de la photo ne change qu'à partir de 900 px, là
où les deux colonnes existent réellement : la lecture au clavier et au
lecteur d'écran reste identique dans les quatre sections.
========================================================================== */
/* Ces ancres sont la cible des liens du menu : le titre visé ne doit pas se
retrouver sous la barre de navigation, qui est collante. */
.page-template-template-restauration .fp-rlieu {
position: relative;
padding: clamp(52px, 7vw, 90px) 0;
scroll-margin-top: calc(var(--fp-nav-h) + 16px);
}
/* LE PREMIER LIEU RESPIRE PLUS EN HAUT (Marino, 2026-09-09, valeur augmentee
le meme jour : « augmente l'espace entre Le restaurant et la zone verte
au-dessus »). L'intro qui separait le module de reservation du premier lieu
a ete retiree ce jour-la : sans elle, la section arrivait collee dessous. On
rend cet air par le haut du premier lieu, pas en gonflant les quatre.
SELECTEUR : le lieu qui SUIT LE HERO, et non :first-of-type. Cette
pseudo-classe regarde le premier element du meme TYPE parmi ses freres,
donc la premiere de la page, qui est le hero : la regle ne
s'appliquait jamais. */
.page-template-template-restauration .fp-rhero + .fp-rlieu {
padding-top: clamp(120px, 12vw, 180px);
}
.page-template-template-restauration .fp-rlieu-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(28px, 5vw, 60px);
}
/* --- Colonne de texte ----------------------------------------------------- */
.page-template-template-restauration .fp-rlieu-corps {
display: flex;
flex-direction: column;
gap: 22px;
}
.page-template-template-restauration .fp-rlieu-titre {
margin: 0;
max-width: 15ch;
font-family: var(--fp-font-heading);
font-weight: 700;
line-height: .9;
text-transform: uppercase;
font-size: clamp(2.1rem, 5.2vw, 4.5rem);
color: var(--fp-dark);
text-wrap: balance;
}
.page-template-template-restauration .fp-rlieu-prose { max-width: 56ch; }
.page-template-template-restauration .fp-rlieu-prose p {
margin: 0 0 1em;
font-size: clamp(.98rem, 1.15vw, 1.03rem);
line-height: 1.65;
color: var(--fp-ink-soft);
}
.page-template-template-restauration .fp-rlieu-prose p:first-child {
font-size: clamp(1.02rem, 1.3vw, 1.16rem);
line-height: 1.62;
color: var(--fp-ink);
}
.page-template-template-restauration .fp-rlieu-prose p:last-child { margin-bottom: 0; }
/* Points forts : filets pleine largeur et numéro en tête, comme la maquette.
La numérotation dessinée est décorative, c'est la liste ordonnée qui la
porte réellement pour un lecteur d'écran. */
.page-template-template-restauration .fp-rlieu-liste {
list-style: none;
margin: 8px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
max-width: 56ch;
}
.page-template-template-restauration .fp-rlieu-item {
display: grid;
grid-template-columns: 26px 1fr;
gap: 14px;
align-items: baseline;
padding: 14px 0;
border-top: 1px solid var(--fp-r-filet);
color: var(--fp-ink);
font-size: clamp(.98rem, 1.15vw, 1.03rem);
line-height: 1.45;
}
.page-template-template-restauration .fp-rlieu-item:last-child { border-bottom: 1px solid var(--fp-r-filet); }
.page-template-template-restauration .fp-rlieu-rang {
font-family: var(--fp-font-heading);
font-weight: 700;
font-size: .94rem;
letter-spacing: .04em;
color: var(--fp-primary);
}
/* Dernier point du restaurant : « bientôt disponible ». La maquette l'estompe,
c'est une promesse et non une prestation ouverte. */
.page-template-template-restauration .fp-rlieu-item:last-child .fp-rlieu-item-txt {
color: var(--fp-ink-soft);
}
/* display: flex + wrap (retour client du 2026-08-12, point 7a) : le second
bouton (carte PDF du restaurant) rejoint le premier sur la même ligne tant
qu'il y a la place, passe dessous sinon, jamais l'un collé à l'autre. */
.page-template-template-restauration .fp-rlieu-action {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 12px 0 0;
}
.page-template-template-restauration .fp-rlieu-action .fp-btn { min-height: 50px; }
/* Icône « nouvel onglet » du bouton de carte : le SVG sort en 24px, trop gros
à côté d'un libellé en capitales. On l'aligne sur la hauteur du texte et on
le détache du mot, sinon il colle à la dernière lettre.
flex-shrink pour qu'il ne s'écrase jamais si le libellé passe sur deux
lignes, et currentColor est déjà porté par le SVG du thème. */
.page-template-template-restauration .fp-rlieu-action .fp-btn .fp-i {
width: 16px;
height: 16px;
margin-left: 8px;
flex: 0 0 auto;
vertical-align: -2px;
}
/* ÉTAT D'ATTENTE DU BOUTON CARTE (retour client du 2026-08-12, point 7a) :
« il me faut un bouton qui indique simplement qu'elle n'est pas encore
prête, mais que je voie quand même où il sera. » Même gabarit que
.fp-btn.fp-btn-primary (padding, rayon, taille : hérités tels quels), mais
non cliquable et atténué, dans l'esprit des entrées « Bientôt » du menu
(main.css, .fp-mega-item.is-soon > span[aria-disabled] : couleur ink-soft,
curseur par défaut, pointer-events none). Élément , pas :
rien à activer ; aria-disabled porte l'information aux lecteurs d'écran.
Le remplissage au survol (.fp-btn::before) est désactivé : un élément non
cliquable n'a pas de survol à animer. */
.page-template-template-restauration .fp-btn-attente {
background: color-mix(in srgb, var(--fp-ink-soft) 14%, var(--fp-white));
color: var(--fp-ink-soft);
border-color: transparent;
box-shadow: none;
cursor: default;
pointer-events: none;
}
.page-template-template-restauration .fp-btn-attente::before {
content: none;
}
.page-template-template-restauration .fp-btn-attente:hover,
.page-template-template-restauration .fp-btn-attente:focus-visible {
background: color-mix(in srgb, var(--fp-ink-soft) 14%, var(--fp-white));
color: var(--fp-ink-soft);
transform: none;
box-shadow: none;
}
/* Sur fond sombre (aucun lieu concerné aujourd'hui, resto-restaurant est
toujours fp-s-light, mais la règle reste générale plutôt que scopée en dur
au restaurant) : lavis clair au lieu du lavis d'encre, contraste conservé. */
.page-template-template-restauration .fp-rlieu.fp-s-dark .fp-btn-attente,
.page-template-template-restauration .fp-rlieu.fp-s-dark .fp-btn-attente:hover {
background: color-mix(in srgb, var(--fp-white) 20%, transparent);
color: var(--fp-r-clair-doux);
}
/* --- Cases à icône, section Restaurant seule (rendez-vous client du
08.09.2026) : remplace ici la rangée de boutons ET l'ancien renvoi discret
vers le menu du jour (fp-rlieu-menu-jour, retiré du gabarit PHP), par une
grille de cases plus hautes, une icône chacune, « même survol qu'un
bouton » (transform + ombre au survol, comme .fp-rmenu-action un peu plus
bas dans cette feuille, patron réutilisé à l'identique).
AUTO-FIT PRÊT POUR LES CASES À VENIR (commander à l'emporter, se faire
livrer) : la grille n'a besoin d'AUCUNE retouche le jour où elles
rejoignent réserver / carte / menu du jour / horaires, seul le nombre de
lignes grandit. Deux colonnes par défaut (la colonne de texte fait environ
640 px sur bureau, deux cases y tiennent large), une seule sous 480 px, où
« elles s'empilent » comme demandé. ------------------------------------- */
.page-template-template-restauration .fp-rlieu-cases {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin: 16px 0 0;
}
/* ICONE A GAUCHE, TEXTE A DROITE, et non plus l'un au-dessus de l'autre
(Marino, 2026-09-09 : « icone avec texte a droite, pas l'un sur l'autre »).
La case devient une ligne, donc plus basse, et la rangee se lit d'un coup.
L'icone est SECONDE dans le balisage : on la ramene a gauche par order,
plutot que par row-reverse, pour que le sens de lecture reste evident a
quiconque relira cette feuille. */
.page-template-template-restauration .fp-rlieu-case {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 14px;
min-height: 0;
padding: 14px 18px;
border-radius: var(--fp-radius);
/* Fond teal legerement teinte plutot qu'un aplat plein : la case se detache
du blanc de la section, et le texte reste en encre pleine, donc lisible.
Un teal plein aurait impose du texte blanc et fait quatre pavees sombres
au milieu d'une section claire. */
background: color-mix(in srgb, var(--fp-primary) 8%, var(--fp-white));
border: 1px solid color-mix(in srgb, var(--fp-primary) 18%, transparent);
box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--fp-secondary-dark) 85%, transparent);
text-decoration: none;
transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.page-template-template-restauration .fp-rlieu-case .fp-rlieu-case-ic {
order: -1;
}
.page-template-template-restauration .fp-rlieu-case-txt {
font-family: var(--fp-font-body);
font-weight: 600;
font-size: .94rem;
line-height: 1.3;
color: var(--fp-ink);
}
.page-template-template-restauration .fp-rlieu-case-ic {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--fp-primary);
color: var(--fp-white);
}
.page-template-template-restauration .fp-rlieu-case-ic svg { width: 22px; height: 22px; }
.page-template-template-restauration .fp-rlieu-case:hover,
.page-template-template-restauration .fp-rlieu-case:focus-visible {
transform: translateY(-3px);
background: color-mix(in srgb, var(--fp-primary) 14%, var(--fp-white));
box-shadow: var(--fp-shadow);
}
@media (prefers-reduced-motion: reduce) {
.page-template-template-restauration .fp-rlieu-case { transition: none; }
.page-template-template-restauration .fp-rlieu-case:hover,
.page-template-template-restauration .fp-rlieu-case:focus-visible { transform: none; }
}
.page-template-template-restauration .fp-rlieu-case:focus-visible {
outline: 3px solid var(--fp-primary);
outline-offset: 3px;
}
/* État d'attente de la case « Voir la carte » (même règle que l'ancien
.fp-btn-attente : élément non cliquable, atténué, aucun survol à animer),
reprise ici pour la case plutôt que pour un bouton. */
.page-template-template-restauration .fp-rlieu-case--attente {
cursor: default;
pointer-events: none;
}
.page-template-template-restauration .fp-rlieu-case--attente .fp-rlieu-case-txt {
color: var(--fp-ink-soft);
}
.page-template-template-restauration .fp-rlieu-case--attente .fp-rlieu-case-ic {
background: color-mix(in srgb, var(--fp-ink-soft) 14%, var(--fp-white));
color: var(--fp-ink-soft);
}
@media (max-width: 480px) {
.page-template-template-restauration .fp-rlieu-cases {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.page-template-template-restauration .fp-rlieu-case {
transition: none;
}
.page-template-template-restauration .fp-rlieu-case:hover,
.page-template-template-restauration .fp-rlieu-case:focus-visible {
transform: none;
}
}
/* --- Colonne visuelle : la photo unique (le carrousel a son propre bloc,
plus bas dans ce fichier) --------------------------------------------- */
.page-template-template-restauration .fp-rlieu-media {
display: grid;
gap: 12px;
align-content: start;
}
.page-template-template-restauration .fp-rlieu-photo {
position: relative;
margin: 0;
overflow: hidden;
border-radius: var(--fp-radius-lg);
background: color-mix(in srgb, var(--fp-primary) 8%, var(--fp-white));
}
/* FOND DU CADRE ALIGNÉ SUR LA PHASE, SUR FOND SOMBRE (retour client du
2026-08-12 : « quand je suis sur le fond vert, il y a des bordures qui
clignotent sur les images, celle du bar et celle du Starbucks, une petite
bordure blanche qui clignote un peu »).
CAUSE RETENUE, RAISONNÉE À PARTIR DU CSS. Ce cadre (.fp-rlieu-photo) CUMULE
trois rôles sur le MÊME élément : il découpe l'image aux coins arrondis
(overflow: hidden + border-radius), il est le seul des deux lieux sombres à
porter une couleur de fond CLAIRE par défaut (color-mix ci-dessus, un lavis
quasi blanc), et il est SIMULTANÉMENT celui qui flotte (transform animé en
boucle, .fp-r-flotte plus bas). Un élément arrondi et coupé au ciseau qui
anime SON PROPRE transform est un cas connu de couture sous-pixel au bord
du masque : à certaines valeurs interpolées de l'animation (ease-in-out,
donc non entières la plupart du temps), le navigateur recalcule le masque
arrondi sur une grille de sous-pixels légèrement différente de celle de
l'image qu'il découpe, et laisse filtrer un liseré d'un demi-pixel du fond
RÉEL du cadre. Sur les deux lieux clairs (restaurant, lounge), ce liseré
est du blanc sur du blanc : invisible. Sur les deux lieux sombres (bar,
Starbucks Coffee Point, seuls lieux fp-s-dark), le même liseré blanc
tranche sur l'aplat --fp-dark environnant à chaque battement du
flottement (6,4 s, décalé par photo) : exactement la bordure blanche
intermittente signalée, et exactement pourquoi elle ne touche que ces deux
lieux.
CORRECTION À LA CAUSE, PAS AU SYMPTÔME AFFICHÉ SEULEMENT : le fond du cadre
suit désormais la même phase que la plaque et le panneau de marque juste en
dessous dans ce fichier (teinte dérivée de --fp-dark, jamais de blanc pur),
de sorte qu'une couture qui subsisterait malgré la stabilisation ci-dessous
ne pourrait plus jamais réveiller du blanc sur ce fond. Complétée par une
promotion de calque stable (voir .fp-rlieu-photo{animation}, plus bas) qui
réduit la couture elle-même. Le flottement validé et la lueur au survol
restent inchangés : rien ne les éteint. */
.page-template-template-restauration .fp-rlieu.fp-s-dark .fp-rlieu-photo {
background: color-mix(in srgb, var(--fp-primary) 10%, var(--fp-dark));
}
/* VISIONNEUSE AU CLIC (retour client du 2026-08-12, point 1) : le lien de la
vignette (main.js, setupLightbox) remplit tout le cadre, exactement comme
l'image qu'il contient. Anneau de focus en négatif (offset négatif) : le
cadre garde son overflow: hidden, un anneau qui déborderait serait tronqué. */
.page-template-template-restauration .fp-rlieu-photo-lien {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
}
.page-template-template-restauration .fp-rlieu-photo-lien:focus-visible {
outline: 3px solid var(--fp-accent);
outline-offset: -4px;
}
.page-template-template-restauration .fp-rlieu-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/* Même mécanique et même courbe que les cartes d'activité (activite.css) :
un seul geste de survol sur tout le site. Porté par l'IMAGE et non par le
cadre, pour ne pas entrer en conflit avec le calque de parallaxe, qui
occupe déjà le transform du grand cadre. */
transition: transform .6s ease;
}
.page-template-template-restauration .fp-rlieu-photo:hover img {
transform: scale(1.07);
}
/* CADRAGE PAR LIEU (retour client du 2026-08-12, troisième passage, point 4) :
« je vois juste tout en bas le début des tables alors que j'aimerais que ce
soit central... c'est le bas qu'il faut montrer. » object-position, PAS
object-fit (déjà cover ci-dessus, inchangé) : seul le point d'ancrage du
recadrage bouge, l'image continue de remplir tout le cadre sans déformation.
Modificateur posé par le renderer sur .fp-rlieu-media (fp_render_restauration_lieu,
champ 'focus' de fp_restauration_lieux_table), donc par lieu et extensible :
un futur lieu avec le même besoin porte le même champ, aucune classe câblée
en dur au restaurant ici. Vaut pour la photo unique (.fp-rlieu-photo) ;
l'équivalent pour le carrousel (deux photos ou plus) est
.fp-rlieu-media--focus-bas .fp-rlieu-carousel-slide, plus bas dans ce
fichier. */
.page-template-template-restauration .fp-rlieu-media--focus-bas .fp-rlieu-photo img {
object-position: center bottom;
}
/* LUEUR AU SURVOL (retour client du 2026-08-12 : « la petite lueur qui
traverse de gauche à droite comme une petite lumière, tu peux la remettre
aussi »), reprise À L'IDENTIQUE de la carte d'activité de l'accueil
(home.css, .fp-actcard-media::before / .fp-actcard:hover ::before : même
dégradé, mêmes arrêts, même durée .7s, même courbe ease). Seul le
sélecteur change pour viser le cadre de la mosaïque de lieu.
Portée par le CADRE (.fp-rlieu-photo), PAS par l'image (qui porte déjà le
zoom juste au-dessus) ni par le calque de parallaxe .fp-rlieu-par (qui
porte déjà le transform de GSAP) : aucun conflit de propriété transform,
les trois cohabitent. Le cadre garde son overflow: hidden et ses coins
arrondis (posés plus haut), donc le balayage reste dans le contour, sans
déborder. Pseudo-élément inséré en premier dans le cadre : la plaque
numérotée (.fp-rlieu-plaque, plus bas, même z-index) reste au-dessus par
simple ordre de peinture, aucun z-index à forcer ici. */
.page-template-template-restauration .fp-rlieu-photo::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(115deg, transparent 42%, color-mix(in srgb, var(--fp-white) 55%, transparent) 50%, transparent 58%);
transform: translateX(-130%);
transition: transform .7s ease;
pointer-events: none;
}
.page-template-template-restauration .fp-rlieu-photo:hover::before {
transform: translateX(130%);
}
/* FLOTTEMENT LÉGER de chaque photo de la mosaïque (retour client du
2026-08-12 : « un petit effet de flottement, assez léger, au bas »).
Porté par le CADRE (.fp-rlieu-photo), PAS par l'image ni par le calque de
parallaxe : l'image porte déjà le transform du survol (juste au-dessus), le
calque .fp-rlieu-par porte déjà celui de GSAP (juste en dessous). Le cadre,
lui, n'est piloté par rien d'autre : aucun conflit de propriété. Le cadre
garde son overflow: hidden, donc ce qu'il contient (image, plaque, calque)
voyage avec lui SANS jamais déborder du contour arrondi ni se décaler par
rapport au cadre. Amplitude volontairement faible (quelques pixels).
Transform seul, jamais de propriété de mise en page.
CALQUE DE COMPOSITING STABLE (retour client du 2026-08-12 : bordure blanche
qui clignote sur le bar et le Starbucks, voir la note complète sur le fond
du cadre plus haut dans ce fichier). will-change: transform et
backface-visibility: hidden promeuvent ce cadre arrondi et coupé au ciseau
sur son propre calque de composition, stable d'une image à l'autre de
l'animation : c'est la parade standard à la couture sous-pixel d'un
overflow: hidden animé. translateZ(0) est répété DANS les images-clés
elles-mêmes (et non posé une seule fois en dehors) : une déclaration
statique de transform ici serait simplement écrasée par celle, animée, des
images-clés. Complément de la correction de fond ci-dessus, jamais un
remplacement : le fond aligné garantit qu'une couture résiduelle ne peut
plus jamais montrer du blanc, cette promotion de calque réduit la couture
elle-même. */
/* Un seul .fp-rlieu-photo par lieu depuis le carrousel (retouche du
2026-09-10) : la déclinaison de durée/délai par tuile de l'ancienne
mosaïque (:nth-of-type(2) et (3)) est retirée, il n'existe plus qu'une
seule photo à flotter ainsi. */
.page-template-template-restauration .fp-rlieu-photo {
animation: fp-r-flotte 6.4s ease-in-out infinite;
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
@keyframes fp-r-flotte {
0%, 100% { transform: translateY(0) translateZ(0); }
50% { transform: translateY(-6px) translateZ(0); }
}
/* Calque de parallaxe : plus haut que son cadre, pour que le déplacement ne
découvre jamais un bord. Immobile tant que GSAP ne l'a pas déplacé.
C'EST AUSSI CE QUI « MANGE LE BAS » DE LA PHOTO DU RESTAURANT (retour
client du 2026-08-12, quatrième passage, point 7 : « tu peux encore
descendre, le zoom sur la partie basse encore plus bas »). Ce calque
démarre décalé vers le HAUT (restauration.js anime yPercent de -6 à +6,
« from » -6 tant que le défilement n'a pas atteint la section) : au repos,
la fenêtre du cadre montre donc une tranche plus HAUTE de ce calque
surdimensionné que si le calque restait à yPercent:0, ce qui retranche
justement une part de la bande basse que object-position: center bottom
cherche à révéler (voir .fp-rlieu-media--focus-bas plus bas). */
.page-template-template-restauration .fp-rlieu-par {
position: absolute;
inset: -10% 0;
display: block;
}
/* CADRAGE « FOCUS BAS » : PLUS DE PARALLAXE DU TOUT (cinquième passage du
client, 2026-08-12 : « il n'y a pas besoin qu'il y ait un parallaxe...
il faut qu'elle affiche vraiment plus bas encore, pratiquement tout en
bas »). restauration.js n'anime plus ces calques, et le surdimensionnement
ci-dessus perd alors sa raison d'être : il coûtait à lui seul 10 % de la
bande basse (le calque dépasse du cadre par le bas, l'image ancrée en bas
remplit le calque, donc son bas réel restait HORS du cadre même au repos).
Ramené aux dimensions exactes du cadre : le bas de l'image est le bas du
cadre, et le zoom ancré en bas (plus bas) grossit cette bande. */
.page-template-template-restauration .fp-rlieu-media--focus-bas .fp-rlieu-par {
inset: 0;
}
/* ZOOM ANCRÉ EN BAS, SUR LE LIEN DE LA GRANDE PHOTO SEULEMENT (même retour
client, point 7). Corrige la cause ci-dessus sans toucher aux deux AUTRES
transforms déjà posés sur cette figure : ni le calque de parallaxe
(.fp-rlieu-par, piloté par GSAP), ni l'image elle-même (déjà transformée
au survol, .fp-rlieu-photo:hover img). .fp-rlieu-photo-lien est un
troisième élément, entre les deux : un scale ancré en bas y agrandit la
bande basse de l'image sans rien retirer aux deux autres mouvements, qui
restent chacun sur leur propre élément. UNIQUEMENT SOUS --focus-bas (donc
aujourd'hui, seulement le restaurant) : les trois autres lieux ne portent
pas ce champ et ne sont pas concernés. */
.page-template-template-restauration .fp-rlieu-media--focus-bas .fp-rlieu-photo--grande .fp-rlieu-photo-lien {
transform: scale(1.16);
transform-origin: center bottom;
}
.page-template-template-restauration .fp-rlieu-photo--grande { aspect-ratio: 4 / 3; }
.page-template-template-restauration .fp-rlieu-media.is-solo .fp-rlieu-photo--grande { aspect-ratio: 5 / 4; }
/* PHOTO PLUS HAUTE, UNE SEULE PHOTO (retour client du 2026-08-12, sixième
passage : « un peu plus haute, un peu plus du format carré, ça doit rester
horizontal, mais un peu moins horizontal »). Starbucks seul
(fp_render_restauration_lieu, champ 'photo_haute' de
fp_restauration_lieux_table).
CAUSE DE « ELLE EST TOUJOURS TROP PETITE/HORIZONTALE » VÉRIFIÉE AU BANC :
le réglage précédent (carré, 1/1) ne visait QUE .is-solo (une seule photo
dans la galerie de la zone). Le carré (1/1) lui-même n'aurait de toute
façon plus été « horizontal » comme elle le redemande cette fois : d'où le
ratio choisi ci-dessous, nettement moins large qu'un cadre standard, mais
jamais carré.
NE VISE PLUS QUE .is-solo (retouche du 2026-09-10) : depuis que le
carrousel remplace la mosaïque (voir plus bas), .fp-rlieu-photo--grande
n'existe plus QUE dans le cas d'une photo unique ; le carrousel porte sa
propre règle --photo-haute, sur .fp-rlieu-carousel-frame. */
.page-template-template-restauration .fp-rlieu-media--photo-haute.is-solo .fp-rlieu-photo--grande {
aspect-ratio: 4 / 3.3;
}
/* --------------------------------------------------------------------------
COLONNE VISUELLE : LE CARROUSEL (deux photos ou plus, retour de Marino du
2026-09-10). Remplace l'ancienne mosaïque (is-duo / is-trio, retirée le
même jour), jamais vue en production : aucun lieu n'avait encore reçu de
deuxième photo. Même patron que le carrousel de l'intro des fiches
d'activité (.fp-intro-figure-galerie, activite.css) : cadre à coins
arrondis en overflow masqué, piste qui défile en scroll-snap, deux
flèches rondes communes (.fp-carousel-arrow, main.css), chaque photo en
lien plein cadre vers son fichier. Branché par setupCarousels()
(assets/js/main.js), qui doit connaître la section .fp-rlieu dans sa
liste, branche non bouclée (comportement historique des carrousels de
galerie, jamais [data-fp-loop]).
-------------------------------------------------------------------------- */
.page-template-template-restauration .fp-rlieu-carousel-frame {
position: relative;
overflow: hidden;
border-radius: var(--fp-radius-lg);
aspect-ratio: 4 / 3;
background: color-mix(in srgb, var(--fp-primary) 8%, var(--fp-white));
}
/* Même correctif de fond que .fp-rlieu-photo sur fond sombre (voir la note
complète plus haut dans ce fichier) : une teinte dérivée de --fp-dark,
jamais de blanc, pour qu'aucune couture ne puisse révéler du blanc sur le
bar ou le Starbucks Coffee Point. */
.page-template-template-restauration .fp-rlieu.fp-s-dark .fp-rlieu-carousel-frame {
background: color-mix(in srgb, var(--fp-primary) 10%, var(--fp-dark));
}
/* PHOTO PLUS HAUTE (voir la note sur .is-solo un peu plus haut), version
carrousel : le cadre suit le même ratio dès que le lieu porte le champ
'photo_haute', quel que soit le nombre de photos qu'il contient. */
.page-template-template-restauration .fp-rlieu-media--photo-haute .fp-rlieu-carousel-frame {
aspect-ratio: 4 / 3.3;
}
/* Piste défilante : une colonne de grille par photo, chacune large comme le
cadre entier. scroll-snap-type + scroll-behavior: smooth, neutralisé sous
« animations réduites » plus bas dans ce fichier (même garde que
.fp-rcta-menu-slider). */
.page-template-template-restauration .fp-rlieu-carousel {
position: absolute;
inset: 0;
z-index: 0;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.page-template-template-restauration .fp-rlieu-carousel::-webkit-scrollbar { display: none; }
/* Chaque photo est un LIEN vers son fichier (visionneuse existante,
setupLightbox dans main.js ; sans JavaScript la photo reste consultable) :
habillage natif retiré, fond en cover, anneau de focus à l'intérieur du
cadre (le carrousel est en overflow: hidden et couperait un anneau qui
déborderait). */
.page-template-template-restauration .fp-rlieu-carousel-slide {
display: block;
scroll-snap-align: start;
width: 100%;
height: 100%;
margin: 0;
border: 0;
background-color: transparent;
background-size: cover;
background-position: center;
cursor: zoom-in;
transition: transform .6s ease;
}
/* CADRAGE « FOCUS BAS », version carrousel : même besoin que .fp-rlieu-photo
img (voir la règle .fp-rlieu-media--focus-bas plus haut), porté ici par
background-position puisque la photo est un calque de fond. */
.page-template-template-restauration .fp-rlieu-media--focus-bas .fp-rlieu-carousel-slide {
background-position: center bottom;
}
.page-template-template-restauration .fp-rlieu-carousel-slide:hover {
transform: scale(1.04);
}
.page-template-template-restauration .fp-rlieu-carousel-slide:focus-visible {
outline: 3px solid var(--fp-accent);
outline-offset: -4px;
}
/* Flèches : display:contents, chaque bouton se positionne directement par
rapport au cadre (position: relative). Même idiome que
.fp-intro-carousel-nav (activite.css) : centrage vertical qui doit
survivre au survol, .fp-carousel-arrow appliquant déjà scale(1.06)
(main.css, les transform ne s'additionnent pas entre règles). */
.page-template-template-restauration .fp-rlieu-carousel-nav {
display: contents;
}
.page-template-template-restauration .fp-rlieu-carousel-nav .fp-carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
background: var(--fp-white);
color: var(--fp-primary);
}
.page-template-template-restauration .fp-rlieu-carousel-nav .fp-carousel-arrow:first-child { left: 10px; }
.page-template-template-restauration .fp-rlieu-carousel-nav .fp-carousel-arrow:last-child { right: 10px; }
.page-template-template-restauration .fp-rlieu-carousel-nav .fp-carousel-arrow:hover {
background: var(--fp-dark);
color: var(--fp-white);
transform: translateY(-50%) scale(1.06);
}
/* Plaque numérotée posée sur la grande photo (« 01 · Le restaurant »).
GRAISSE 400 UNIQUEMENT (retour client du 2026-08-12, quatrième passage,
point 4 : « le texte sur les images... ne rend pas très bien, police pas
installée ou trop de gras, je n'arrive pas à lire le titre »). CAUSE
VÉRIFIÉE : --fp-font-heading pointe sur Bebas Neue, chargée sur ce thème
dans une seule graisse (400, cf. fun_planet_fonts_url) ; un font-weight de
700 sur cette police n'existe tout simplement pas et force le navigateur à
SYNTHÉTISER un faux gras (traits épaissis, contreformes fermées), déjà
signalé et corrigé ailleurs sur le site pour la même raison (voir
.fp-ibox-title, main.css). La plaque n'a pas de police display de
remplacement à charger (Thoge n'existe pas non plus dans ce thème, piège
déjà connu) : la correction est donc la graisse réelle de Bebas Neue (400),
avec un espacement de lettres un peu plus généreux pour compenser
l'absence de graisse et garder le texte affirmé sur une photo. Le fond en
plaque (dégradé sombre/clair selon la section, flou d'arrière-plan) reste
inchangé : c'était déjà lui qui garantissait le contraste, indépendamment
de la graisse du texte. */
.page-template-template-restauration .fp-rlieu-plaque {
position: absolute;
left: 18px;
top: 18px;
z-index: 1;
margin: 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 18px;
border-radius: 999px;
/* 88 % et non 82 % : la plaque se pose sur une photo inconnue. Au pire des
cas (photo blanche derrière), le blanc du texte garde un rapport de
contraste supérieur à 5 pour 1 sur ce fond. */
background: color-mix(in srgb, var(--fp-dark) 88%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--fp-white);
font-family: var(--fp-font-heading);
font-weight: 400;
font-size: 1.05rem;
letter-spacing: .13em;
text-transform: uppercase;
pointer-events: none;
}
/* Sur fond sombre, la plaque s'inverse : c'est le contraste qui commande, et
c'est aussi ce que fait la maquette pour la section du bar. */
.page-template-template-restauration .fp-rlieu.fp-s-dark .fp-rlieu-plaque {
background: color-mix(in srgb, var(--fp-white) 92%, transparent);
color: var(--fp-dark);
}
.page-template-template-restauration .fp-rlieu-plaque-num { color: var(--fp-accent); }
.page-template-template-restauration .fp-rlieu.fp-s-dark .fp-rlieu-plaque-num { color: var(--fp-primary); }
/* --- Colonne visuelle : le panneau, quand aucune photo n'existe ----------
C'EST L'ÉTAT DE LIVRAISON. Le grand numéro en filigrane, le plan du parc en
texture et l'icône du lieu font une composition qui tient debout seule : la
page est complète à zéro photo, meilleure à une, pleinement elle-même à
trois. ---------------------------------------------------------------- */
.page-template-template-restauration .fp-rlieu-panneau {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 5 / 4;
overflow: hidden;
border-radius: var(--fp-radius-lg);
background-color: var(--fp-primary);
/* Le plan du parc en texture ton sur ton, adouci par un voile de la couleur
du fond : sans lui, les traits du motif prenaient le pas sur l'icône et le
nom du lieu, qui sont le sujet du panneau. */
background-image:
linear-gradient(160deg, color-mix(in srgb, var(--fp-primary) 62%, transparent), color-mix(in srgb, var(--fp-primary) 86%, transparent)),
var(--fp-r-motif);
background-size: auto, 150%;
background-position: center, center 34%;
color: var(--fp-white);
box-shadow: inset 0 -60px 90px -60px color-mix(in srgb, var(--fp-dark) 90%, transparent);
}
.page-template-template-restauration .fp-rlieu.fp-s-dark .fp-rlieu-panneau {
background-color: color-mix(in srgb, var(--fp-primary) 70%, var(--fp-dark));
}
.page-template-template-restauration .fp-rlieu-panneau-num {
position: absolute;
right: clamp(10px, 3vw, 30px);
bottom: clamp(-16px, -2vw, -6px);
font-family: var(--fp-font-heading);
font-weight: 700;
font-size: clamp(7rem, 20vw, 14rem);
line-height: .8;
color: color-mix(in srgb, var(--fp-white) 14%, transparent);
pointer-events: none;
}
.page-template-template-restauration .fp-rlieu-panneau-ic {
grid-area: 1 / 1;
display: grid;
place-items: center;
width: clamp(78px, 12vw, 108px);
height: clamp(78px, 12vw, 108px);
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--fp-white) 34%, transparent);
background: color-mix(in srgb, var(--fp-white) 12%, transparent);
transform: translateY(-22px);
}
.page-template-template-restauration .fp-rlieu-panneau-ic svg {
width: 46%;
height: 46%;
color: var(--fp-white);
}
.page-template-template-restauration .fp-rlieu-panneau-nom {
grid-area: 1 / 1;
align-self: center;
margin-top: clamp(66px, 10vw, 92px);
font-family: var(--fp-font-heading);
font-weight: 700;
font-size: clamp(1rem, 2vw, 1.35rem);
letter-spacing: .14em;
text-transform: uppercase;
text-align: center;
}
/* --- Sections sombres : encre et filets ---------------------------------- */
.page-template-template-restauration .fp-rlieu.fp-s-dark .fp-rlieu-titre { color: var(--fp-white); }
.page-template-template-restauration .fp-rlieu.fp-s-dark .fp-rlieu-prose p:first-child,
.page-template-template-restauration .fp-rlieu.fp-s-dark .fp-rlieu-item { color: var(--fp-r-clair); }
.page-template-template-restauration .fp-rlieu.fp-s-dark .fp-rlieu-prose p,
.page-template-template-restauration .fp-rlieu.fp-s-dark .fp-rlieu-item:last-child .fp-rlieu-item-txt { color: var(--fp-r-clair-doux); }
.page-template-template-restauration .fp-rlieu.fp-s-dark .fp-rlieu-item,
.page-template-template-restauration .fp-rlieu.fp-s-dark .fp-rlieu-item:last-child { border-color: var(--fp-r-filet-clair); }
.page-template-template-restauration .fp-rlieu.fp-s-dark .fp-rlieu-rang { color: var(--fp-accent); }
@media (min-width: 900px) {
/* Deux colonnes de largeur égale, comme la maquette (640 contre 652 px). */
.page-template-template-restauration .fp-rlieu-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--fp-r-gouttiere);
/* start, et non plus center (retour client du 2026-08-12, point 3) : la
colonne média s'aligne désormais sur le HAUT du titre, jamais un
centrage vertical qui rendrait ce calage imprévisible d'un lieu à
l'autre (mesuré au banc : centré, l'écart variait de -22px à -105px
selon la hauteur relative des deux colonnes). Les deux colonnes
démarrent donc au même niveau ; le décalage vers le titre reste le
rôle du margin-top de .fp-rlieu-media, juste plus bas. */
align-items: start;
}
/* Photo à gauche sur une section sur deux : le regard alterne d'un lieu au
suivant au lieu de descendre une colonne unique. L'ordre du DOM ne bouge
pas (texte d'abord). */
.page-template-template-restauration .fp-rlieu--media-gauche .fp-rlieu-corps { order: 2; }
.page-template-template-restauration .fp-rlieu--media-gauche .fp-rlieu-media { order: 1; }
/* ------------------------------------------------------------------------
COLONNE MÉDIA COLLANTE (retour client du 2026-08-12, point 3).
ALIGNEMENT DE DÉPART : le haut de la colonne média au niveau du haut du
TITRE, pas de la pastille sur-titre. Écart mesuré au banc (pas un calcul
théorique sur le gap flex seul, qui aurait sous-estimé la vraie valeur) :
73px du haut de .fp-rlieu-corps au haut de .fp-rlieu-titre, constant sur
les quatre lieux. .fp-rlieu-grid passe donc en align-items: start
juste au-dessus (au lieu de center) : les deux colonnes démarrent au même
niveau, condition nécessaire pour que ce décalage fixe vaille pour les
quatre lieux quelle que soit la hauteur relative de leurs deux colonnes.
POSITION COLLANTE : top = hauteur de la navigation REPLIÉE (--fp-nav-h-stuck,
posé par main.css) + 32px de marge, comme demandé. La navigation est FIXE
en haut de l'écran : sans ce décalage, la photo viendrait se glisser SOUS
elle plutôt que de s'arrêter à bonne distance.
JUSQU'AU BAS DE LA SECTION, PUIS EMPORTÉE : comportement natif de
position: sticky, sans code supplémentaire. Le conteneur englobant qui
borne le collage est .fp-rlieu-grid (une ligne de grille, haute comme le
contenu de la section) : la colonne média cesse de coller exactement
quand cette ligne se termine, c'est-à-dire au bas de LA section de ce
lieu, jamais avant, jamais après.
AUCUN TRANSFORM SUR UN ANCÊTRE (vérifié au banc) : .fp-rlieu-grid,
.fp-wrap.fp-inner et la elle-même ne portent ni le calque de
parallaxe GSAP (posé sur .fp-rlieu-par, un DESCENDANT de la colonne
média, jamais un ancêtre), ni le flottement des photos (.fp-rlieu-photo,
également descendant), ni l'état masqué anti-clignotement (html.fp-r-anim
... [data-fp-media] pose son transform SUR la colonne média elle-même,
pas sur un ancêtre : un transform sur l'élément collant ne casse pas son
propre position: sticky, seul un transform sur un ANCÊTRE le casserait). */
.page-template-template-restauration .fp-rlieu-media {
position: sticky;
top: calc(var(--fp-nav-h-stuck) + 32px);
margin-top: 73px;
}
/* Barre d'administration : les DEUX classes sont sur le même
(WordPress les pose côte à côte), d'où le sélecteur composé, sans espace
entre elles, comme le fait déjà main.css pour .fp-nav. */
.admin-bar.page-template-template-restauration .fp-rlieu-media {
top: calc(var(--fp-nav-h-stuck) + var(--fp-admin-bar-h) + 32px);
}
}
/* ==========================================================================
BLOC « MENU DU JOUR » (.fp-rmenu, zone fp-blk-resto-menu), entre le
Restaurant et le lieu suivant (demande de Marino du 2026-09-06, point 2 de
la spec : « le menu du jour n'est pas assez visible sur la page »).
Retouché le 2026-09-07 sur retours du site en ligne.
PLUS DE CARTE BLANCHE ENGLOBANTE : le fond de la SECTION elle-même est
désormais teal moyen (fp-s-primary, posé par inc/restauration.php), pour
que le bloc pèse davantage dans la page. La colonne de gauche (menu) se
pose directement sur ce fond, en encre claire (--fp-white / --fp-r-clair /
--fp-r-clair-doux), même famille que les sections sombres de lieu plus
haut dans ce fichier. SEULES les cases d'action de droite restent des
cartes blanches opaques : elles échappent par construction à la mécanique
de fond animé (restauration.js rend [data-fp-sect] transparent sous
.fp-r-fond-anime), même raisonnement qu'avant pour .fp-rmenu-carte.
Colonne gauche = le menu détaillé (désormais un LIEN entier vers la page
Menus du jour, .fp-rmenu-menu-lien), colonne droite = quatre cases
d'action, icône à droite du texte. Une seule colonne jusqu'à 900px ; les
cases restent en grille 2x2 jusqu'à 480px, puis passent à une colonne.
========================================================================== */
/* SECTION TRANSPARENTE, CARTE VERTE À LA LARGEUR DU CONTENU (Marino,
2026-09-07, second retour : « un truc de la largeur du contenu, pas full
width, avec des border radius »). La section ne peint plus rien, ni avec ni
sans fond de page animé (le fond de la page, animé ou non, passe autour de
la carte) ; c'est la grille intérieure, calée sur les gouttières du wrap
donc exactement à la largeur du contenu des autres sections, qui porte le
fond teal FIXE, les coins arrondis et son propre rembourrage. Le texte
blanc ne dépend donc jamais du défilement. */
.page-template-template-restauration .fp-rmenu {
position: relative;
scroll-margin-top: calc(var(--fp-nav-h) + 16px);
background-color: transparent;
}
.page-template-template-restauration .fp-rmenu-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(32px, 5vw, 56px);
padding: clamp(28px, 4vw, 52px) clamp(22px, 4vw, 52px);
background-color: var(--fp-primary);
border-radius: var(--fp-radius-lg);
}
@media (min-width: 900px) {
.page-template-template-restauration .fp-rmenu-grid {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
align-items: start;
}
}
/* --- Colonne menu, directement sur le fond teal de la section -------------- */
/* POSITION RELATIVE + PADDING RÉSERVÉ EN PERMANENCE (relecture Opus du
2026-09-07, patron du LIEN ÉTENDU) : le ::after du lien court
.fp-rmenu-menu-lien (position absolue, inset 0) se cale sur CETTE boîte
pour étendre la zone cliquable à toute la colonne. Le padding, constant
qu'il y ait survol ou non (compensé par une marge négative égale), laisse
de la place au fond de survol/focus SANS jamais décaler la mise en page :
seule sa couleur change. */
.page-template-template-restauration .fp-rmenu-menu {
position: relative;
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
padding: 14px;
margin: -14px;
border-radius: var(--fp-radius);
transition: background-color .25s ease;
}
/* Plus de fond de survol : la colonne n'est plus un lien depuis le retrait
de « Voir ce menu du jour » (2026-09-07), elle ne doit plus le suggérer. */
@media (prefers-reduced-motion: reduce) {
.page-template-template-restauration .fp-rmenu-menu {
transition: none;
}
}
.page-template-template-restauration .fp-rmenu-titre {
margin: 0;
font-family: var(--fp-font-heading);
font-weight: 700;
text-transform: uppercase;
line-height: .95;
font-size: clamp(1.7rem, 3.4vw, 2.6rem);
color: var(--fp-white);
}
/* BLANC PLEIN, PAS --fp-r-clair (mesure de contraste AA, relecture Opus du
2026-09-07) : ce jeton ne tient que 4,33:1 sur le teal --fp-primary de
cette section, sous le seuil AA de 4,5:1. Le plafond réel sur ce fond
précis est 4,84:1, obtenu seulement en blanc plein (même mesure que le
reste de l'encre claire de cette page). */
.page-template-template-restauration .fp-rmenu-texte {
margin: 0;
max-width: 46ch;
font-size: .98rem;
line-height: 1.6;
color: var(--fp-white);
}
/* Mini séparateur sous le titre (Marino, 2026-09-07), à la place de la phrase
d'accroche retirée : un trait fin, court, en blanc atténué. */
.page-template-template-restauration .fp-rmenu-sep {
display: block;
width: 44px;
height: 2px;
margin: -4px 0 0;
border-radius: 2px;
background: color-mix(in srgb, var(--fp-white) 55%, transparent);
}
/* LIEN COURT, PATRON DU LIEN ÉTENDU (relecture Opus du 2026-09-07). Date et
plats (plus bas) sont désormais du contenu NORMAL, hors de tout lien :
l'ancienne version les enveloppait dans un , dont le nom accessible
(tout le texte du lien) atteignait 269 caractères. CE lien-ci porte seul
l'adresse, avec un texte COURT et VISIBLE (« Voir ce menu du jour »,
fp_render_restauration_menu) ; son ::after (position absolue, inset 0,
calé sur .fp-rmenu-menu en position relative ci-dessus) étend la zone
cliquable à toute la colonne sans jamais toucher au nom accessible. */
.page-template-template-restauration .fp-rmenu-menu-lien {
display: inline-flex;
align-items: center;
margin-top: 2px;
font-family: var(--fp-font-body);
font-weight: 600;
font-size: .92rem;
color: var(--fp-white);
text-decoration: underline;
text-underline-offset: 3px;
}
.page-template-template-restauration .fp-rmenu-menu-lien::after {
content: '';
position: absolute;
inset: 0;
}
/* Anneau de focus sur le lien réel (petit, garanti visible au clavier),
EN PLUS du fond de survol/focus posé sur toute la colonne ci-dessus
(:focus-within) : les deux indices se complètent, jamais l'un sans
l'autre. */
.page-template-template-restauration .fp-rmenu-menu-lien:focus-visible {
outline: 2px solid var(--fp-white);
outline-offset: 2px;
}
/* BADGE DE DATE, AGRANDI (retour Marino du 2026-09-07). Blanc plein, jamais
--fp-accent : mesuré à seulement 2,2:1 sur ce fond teal, très en dessous
du seuil AA, quand le blanc y tient 4,84:1 comme le reste de l'encre
claire de cette page. */
.page-template-template-restauration .fp-rmenu-date {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 4px 0 0;
font-family: var(--fp-font-heading);
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
font-size: clamp(1.3rem, 2.4vw, 1.7rem);
color: var(--fp-white);
}
/* Pilule DE FOND BLANC ET TEXTE TEAL (et non l'inverse) : sur ce fond teal,
un lavis clair ne tenait que 3,2:1 pour ce texte à .74rem/600, sous le
seuil AA de 4,5:1 ; blanc plein plus texte --fp-primary reprend la paire
déjà mesurée à 4,84:1 ailleurs sur cette carte. */
.page-template-template-restauration .fp-rmenu-date-service {
padding: 3px 12px;
border-radius: 999px;
background: var(--fp-white);
font-family: var(--fp-font-body);
font-weight: 600;
font-size: .74rem;
letter-spacing: .04em;
text-transform: none;
color: var(--fp-primary);
}
.page-template-template-restauration .fp-rmenu-plats {
display: flex;
flex-direction: column;
gap: 14px;
margin: -6px 0 0; /* resserré sous la date (Marino, 2026-09-07), la colonne a déjà son gap de 16px */
padding: 0;
list-style: none;
}
.page-template-template-restauration .fp-rmenu-plat {
display: flex;
align-items: center;
gap: 14px;
padding-bottom: 14px;
border-bottom: 1px solid var(--fp-r-filet-clair);
}
.page-template-template-restauration .fp-rmenu-plat:last-child {
padding-bottom: 0;
border-bottom: none;
}
.page-template-template-restauration .fp-rmenu-plat-vignette {
flex: 0 0 auto;
display: block;
width: 64px;
height: 64px;
overflow: hidden;
border-radius: var(--fp-radius-sm);
background: color-mix(in srgb, var(--fp-white) 14%, transparent);
}
.page-template-template-restauration .fp-rmenu-plat-vignette img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.page-template-template-restauration .fp-rmenu-plat-corps {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.page-template-template-restauration .fp-rmenu-plat-titre {
display: block;
font-family: var(--fp-font-body);
font-weight: 600;
font-size: .98rem;
line-height: 1.35;
color: var(--fp-white);
}
/* BLANC PLEIN, PAS --fp-r-clair-doux (mesure de contraste AA, relecture
Opus du 2026-09-07) : ce jeton ne tient que 3,85:1 sur le teal
--fp-primary de cette section, sous le seuil AA de 4,5:1 (même correctif
que .fp-rmenu-texte plus haut : le plafond réel sur ce fond est 4,84:1,
obtenu seulement en blanc plein). */
.page-template-template-restauration .fp-rmenu-plat-desc {
display: block;
font-family: var(--fp-font-body);
font-weight: 400;
font-size: .82rem;
line-height: 1.4;
color: var(--fp-white);
}
/* PRIX EN GRANDE ÉVIDENCE (retour Marino du 2026-09-07) : police de titre
(Bebas), gras, taille nettement plus grande que le reste de la ligne.
Aligné à droite PAR LA MÉCANIQUE FLEX (dernier enfant d'une ligne dont le
corps voisin prend flex:1 1 auto), aucune règle de position à ajouter. */
.page-template-template-restauration .fp-rmenu-plat-prix {
flex: 0 0 auto;
font-family: var(--fp-font-heading);
font-weight: 700;
letter-spacing: .02em;
font-size: clamp(1.15rem, 2vw, 1.5rem);
color: var(--fp-white);
white-space: nowrap;
}
/* --- Colonne actions : cases BLANCHES, icône à droite du texte -------------
Quatre cases au plus, une par libellé de la zone (fp_render_restauration_menu,
inc/restauration.php). Retour Marino du 2026-09-07 : texte à gauche, rond
d'icône teal à droite (justify-content: space-between), jamais empilés,
plus de petite flèche (elle ne trouvait plus sa place sur une seule
ligne). Grille 2x2 dès le départ (la colonne actions se réduit déjà à sa
moitié de largeur dès 900px), une seule colonne sous 480px. ------------- */
.page-template-template-restauration .fp-rmenu-actions {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
align-content: start;
}
/* DÉGAGEMENT SOUS LE RAIL LATÉRAL DÉPLIÉ (relecture Opus du 2026-09-07) : à
partir de 1200px, .fp-rrail (position fixed, right: 18px) peut afficher
son étiquette de lieu (.fp-rrail-nom, texte le plus long « Starbucks
Coffee Point ») par-dessus les cases, jusqu'à 64px de recouvrement mesuré
à 1280px. Un padding-right sur la grille des cases lui laisse la place,
sans toucher aux cases elles-mêmes ni à leur mise en page en dessous de
ce seuil. */
@media (min-width: 1200px) {
.page-template-template-restauration .fp-rmenu-actions {
padding-right: 64px;
}
}
.page-template-template-restauration .fp-rmenu-action {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 16px 16px 20px;
border-radius: var(--fp-radius);
background: var(--fp-white);
text-decoration: none;
transition: transform .25s ease, box-shadow .25s ease;
}
.page-template-template-restauration .fp-rmenu-action-txt {
font-family: var(--fp-font-body);
font-weight: 600;
font-size: .92rem;
line-height: 1.3;
color: var(--fp-ink);
}
.page-template-template-restauration .fp-rmenu-action-ic {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--fp-primary);
color: var(--fp-white);
}
.page-template-template-restauration .fp-rmenu-action-ic svg { width: 20px; height: 20px; }
.page-template-template-restauration .fp-rmenu-action:hover,
.page-template-template-restauration .fp-rmenu-action:focus-visible {
transform: translateY(-3px);
box-shadow: var(--fp-shadow);
}
.page-template-template-restauration .fp-rmenu-action:focus-visible {
outline: 3px solid var(--fp-primary);
outline-offset: 3px;
}
@media (max-width: 480px) {
.page-template-template-restauration .fp-rmenu-actions {
grid-template-columns: 1fr;
}
}
/* « Animations réduites » : élévation coupée, comme le reste de cette page
(voir le filet de fin de fichier pour les autres composants). */
@media (prefers-reduced-motion: reduce) {
.page-template-template-restauration .fp-rmenu-action {
transition: none;
}
.page-template-template-restauration .fp-rmenu-action:hover,
.page-template-template-restauration .fp-rmenu-action:focus-visible {
transform: none;
}
}
/* ==========================================================================
HORAIRES (.fp-rhoraires)
Maquette : titre, pastille et photo d'ambiance à gauche, panneau clair à
droite. Le PANNEAU reste le composant du module fp-horaires-manager, avec sa
pastille « ouvert maintenant » en direct et ses onglets ; seul son habillage
est repris ici, pour qu'il ait l'allure du panneau clair de la maquette. Le
redessiner en aurait fait une copie vouée à diverger du reste du site.
========================================================================== */
.page-template-template-restauration .fp-rhoraires {
padding: clamp(56px, 8vw, 104px) 0 clamp(52px, 7.4vw, 96px);
}
.page-template-template-restauration .fp-rhoraires-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(26px, 4vw, 60px);
align-items: stretch;
}
.page-template-template-restauration .fp-rhoraires-tete {
display: flex;
flex-direction: column;
gap: 22px;
}
.page-template-template-restauration .fp-rhoraires-titre {
margin: 0;
max-width: 22ch;
font-family: var(--fp-font-heading);
font-weight: 700;
line-height: .9;
text-transform: uppercase;
font-size: clamp(2.1rem, 5.2vw, 4.5rem);
color: var(--fp-dark);
}
/* Petit texte d'accompagnement (fixup n85, retour client du 2026-08-12) :
sous le titre, avant la photo. */
.page-template-template-restauration .fp-rhoraires-texte {
margin: 0;
max-width: 42ch;
font-size: 1rem;
line-height: 1.6;
color: var(--fp-ink-soft);
}
/* FORMAT VERTICAL (retour client du 2026-08-12) : ratio 3/4 posé en base,
mais la hauteur continue de suivre le panneau d'horaires (flex: 1, la
grille est en align-items: stretch) : dès que la colonne grandit au-delà
de ce que 3/4 donnerait pour sa largeur, flex l'emporte sur l'aspect-ratio
(la spec le prevoit : un flex-item a une taille principale definie ET un
aspect-ratio calcule sa taille secondaire depuis elle, seulement tant que
rien d'autre ne la contraint). Résultat mesuré au banc : une vignette
portrait qui reste calée sur la hauteur du panneau, jamais un bandeau plat
ni une tour qui le dépasse. */
.page-template-template-restauration .fp-rhoraires-photo {
position: relative;
flex: 1;
aspect-ratio: 3 / 4;
min-height: 240px;
max-width: 100%;
margin: 6px 0 0;
overflow: hidden;
border-radius: var(--fp-radius-lg);
background: color-mix(in srgb, var(--fp-primary) 8%, var(--fp-white));
}
.page-template-template-restauration .fp-rhoraires-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* --- Habillage du panneau, bascule MAISON (.fp-tabs/setupTabs) -----------
Retour client du 2026-08-12, sixième passage : « toujours le même toggle
pour switcher les deux [horaires standards et vacances], comme pour
Informations pratiques, comme partout ailleurs ». Le panneau lisait
jusqu'ici le shortcode [fp_horaires], qui embarque sa PROPRE bascule
(.ht-tabs, script en ligne autonome du module) : une mécanique DIFFÉRENTE
de celle utilisée ailleurs sur le site. fp_render_restauration_horaires()
(inc/restauration.php) construit désormais lui-même la bascule avec les
classes génériques du thème (.fp-tabs/.fp-tab/.fp-tab-panel, pilotées par
setupTabs, assets/js/main.js, INCHANGÉ) : même mécanique, même ARIA que la
carte d'Informations pratiques (.fp-ip-horaires-carte, informations.css),
seul l'habillage ci-dessous reprend l'apparence déjà validée de cette page
(mêmes teintes, mêmes proportions que l'ancien habillage .ht-*, porté sur
les nouvelles classes). */
.page-template-template-restauration .fp-rhoraires-panneau {
padding: clamp(24px, 3vw, 36px);
border-radius: 26px;
background-color: color-mix(in srgb, var(--fp-primary) 6%, var(--fp-white));
box-shadow: none;
color: var(--fp-ink);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 18px;
}
.page-template-template-restauration .fp-rhoraires-panneau > .fp-rhoraires-panel,
.page-template-template-restauration .fp-rhoraires-panneau > .fp-rhoraires-note,
.page-template-template-restauration .fp-rhoraires-panneau > .fp-rhoraires-repli {
flex: 1 1 100%;
}
/* Bascule à gauche, pilule d'état poussée au bord droit (même ordre visuel
que la recette d'Informations pratiques) : la pastille est imprimée après
la bascule dans le DOM, cette marge automatique l'envoie à droite sur la
même ligne ; le flex-wrap de la carte les empile proprement si la place
manque. */
.page-template-template-restauration .fp-rhoraires-panneau > .fp-horaires-status {
margin-left: auto;
/* Arbitrage client du 2026-08-13 : pastille légèrement réduite (la version
de main.css fait 1rem / 8px 18px) pour tenir sur la ligne de la bascule.
Toujours au-dessus des 24 px de cible tactile WCAG 2.5.8 (environ 31 px). */
padding: 7px 14px;
font-size: .9rem;
}
/* PISTE À DEUX POSITIONS, PAS DEUX PILULES LIBRES (retour client du
2026-08-12, huitième passage : « je ne vois toujours pas le toggle... il
faudrait qu'il soit sur la même ligne que le Fermé actuellement : rendre
les éléments un peu plus petits pour qu'ils passent sur la même ligne »).
REPREND LA RECETTE D'INFORMATIONS PRATIQUES (.fp-ip-tabs, informations.css)
telle que demandée : une piste teintée qui contient les deux positions
(gain de place réel par rapport à deux pilules séparées, chacune avec sa
propre marge), adaptée aux teintes déjà en usage sur CETTE carte (piste et
position active reprennent les couleurs de l'ancien habillage .ht-tab,
inchangées : seule la TAILLE change, pas la palette déjà validée ici).
Mécanique setupTabs INCHANGÉE, seul l'habillage change.
CIBLE TACTILE : 32 px de haut (arbitrage client du 2026-08-13, neuvième
passage : « le toggle et la pastille sur la même ligne, élargir un peu la
colonne, réduire un peu le texte »), alignée sur la hauteur réelle de la
pilule .fp-horaires-status réduite juste à côté (padding 7px + texte .9rem,
environ 31 px) : toujours nettement au-dessus des 24 px minimum de la cible
tactile WCAG 2.5.8 (AA). Combiné à la colonne de panneau élargie (grille
1fr / 1.18fr plus bas), les deux libellés et la pilule tiennent sur une
seule ligne aux largeurs courantes de bureau. */
.page-template-template-restauration .fp-rhoraires-tabs {
display: flex;
flex-wrap: wrap;
gap: 3px;
padding: 3px;
background: color-mix(in srgb, var(--fp-primary) 12%, var(--fp-white));
border: 1px solid color-mix(in srgb, var(--fp-primary) 30%, transparent);
border-radius: 999px;
}
.page-template-template-restauration .fp-rhoraires-tabs .fp-tab {
flex: 0 1 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
text-align: center;
white-space: nowrap;
padding: 5px 12px;
border: 0;
cursor: pointer;
border-radius: 999px;
font: inherit;
font-family: var(--fp-font-body);
font-size: .8rem;
font-weight: 600;
line-height: 1.15;
letter-spacing: 0;
text-transform: none;
background: transparent;
color: var(--fp-ink-soft);
transition: background-color .25s ease, color .25s ease;
}
.page-template-template-restauration .fp-rhoraires-tabs .fp-tab:hover {
background: color-mix(in srgb, var(--fp-white) 70%, transparent);
color: var(--fp-secondary);
}
.page-template-template-restauration .fp-rhoraires-tabs .fp-tab.is-active {
background: var(--fp-dark);
color: var(--fp-white);
box-shadow: 0 2px 8px color-mix(in srgb, var(--fp-dark) 25%, transparent);
}
.page-template-template-restauration .fp-rhoraires-tabs .fp-tab:focus-visible {
outline: 2px solid var(--fp-primary);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.page-template-template-restauration .fp-rhoraires-tabs .fp-tab { transition: none; }
}
/* PANNEAUX : VISIBLES TOUS LES DEUX PAR DÉFAUT (amélioration progressive,
pas une condition d'accès). SANS le marqueur posé par un tout petit script
synchrone (fp_restauration_horaires_js_marqueur, inc/restauration.php,
html.fp-r-horaires-js), les deux panneaux restent empilés l'un sous
l'autre, intégralement lisibles : aucun clic n'est nécessaire pour
atteindre les vacances et jours fériés si JavaScript n'a pas pu s'exécuter.
AVEC le marqueur, setupTabs (assets/js/main.js) prend le relais et seul le
panneau actif reste affiché, comme sur Informations pratiques. */
html.fp-r-horaires-js .page-template-template-restauration .fp-rhoraires-panel:not(.is-active) {
display: none;
}
.page-template-template-restauration .fp-rhoraires-panel:focus-visible {
outline: 2px solid var(--fp-primary);
outline-offset: 4px;
border-radius: var(--fp-radius-sm);
}
/* Liste des horaires : lignes à filet, sans tableau (la maquette n'a pas de
tableau visible, juste des lignes qui séparent les jours). Mêmes classes
partagées que le contrat de setupHorairesLive (.fp-horaires-row-jour,
assets/js/main.js) : le marqueur « Aujourd'hui » et la pastille d'état
fonctionnent donc ici exactement comme sur Informations pratiques. */
.page-template-template-restauration .fp-rhoraires-liste {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.page-template-template-restauration .fp-rhoraires-ligne {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 15px 0;
border-bottom: 1px solid color-mix(in srgb, var(--fp-primary) 16%, transparent);
font-size: 1rem;
}
.page-template-template-restauration .fp-rhoraires-ligne:last-child { border-bottom: 0; }
.page-template-template-restauration .fp-rhoraires-ligne .fp-horaires-row-jour {
color: var(--fp-ink-soft);
}
.page-template-template-restauration .fp-rhoraires-ligne .fp-horaires-row-heures {
font-weight: 700;
color: var(--fp-ink);
}
/* UNE PLAGE NE SE COUPE JAMAIS EN DEUX. Chaque plage est un fragment à part
(fp_restauration_heures_html, inc/restauration.php) : sans cette règle, un
jour à deux services (« 11:00 - 14:00, 18:00 - 21:00 ») pouvait se rompre au
milieu d'une plage, sur l'un des espaces qui entourent son tiret, et laisser
« 11:00 - » seul en fin de ligne. Vraie sur toutes les largeurs, y compris
sur ordinateur où la colonne est large : elle n'y change rien tant que la
ligne tient, elle empêche seulement une coupure absurde si elle ne tient
pas. La mise en pile d'une plage par ligne, elle, ne concerne que le
téléphone (bloc de fin de feuille). */
.page-template-template-restauration .fp-rhoraires-plage { white-space: nowrap; }
.page-template-template-restauration .fp-rhoraires-ligne.is-today .fp-horaires-row-jour {
color: var(--fp-primary);
font-weight: 700;
}
/* Pastille « Aujourd'hui », posée par le navigateur (setupHorairesLive,
assets/js/main.js) : jamais rendue côté serveur, pour ne pas être figée par
le cache de pages. */
.page-template-template-restauration .fp-rhoraires-ligne .fp-horaires-today-tag {
display: inline-block;
margin-left: 10px;
padding: 3px 10px;
border-radius: 999px;
background: color-mix(in srgb, var(--fp-primary) 14%, var(--fp-white));
color: var(--fp-secondary);
font-size: .72rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.page-template-template-restauration .fp-rhoraires-ligne .fp-horaires-tag-ferme {
color: var(--fp-ink-soft);
font-weight: 700;
}
.page-template-template-restauration .fp-rhoraires-vide,
.page-template-template-restauration .fp-rhoraires-note {
width: 100%;
margin: 0;
color: var(--fp-ink-soft);
line-height: 1.6;
}
.page-template-template-restauration .fp-rhoraires-repli { color: var(--fp-ink); width: 100%; }
/* VACANCES À VENIR, AU PLUS DEUX LIGNES (retour Marino du 2026-09-06).
Le tri « à venir » est fait par le navigateur (main.js, setupHorairesLive
/ traiterFuturs, contrat fp-horaires-futurs, INCHANGÉ) : il pose [hidden]
sur les lignes écartées puis sur .fp-rhoraires-prochain entier quand plus
rien ne vient. Les règles de pose ci-dessus (display: flex) l'emportant
sur l'attribut [hidden] du navigateur, il faut les neutraliser ici, même
patron que .fp-horaires-panel-exceptions de main.css. La bordure quitte
:last-child (qui compterait des lignes masquées, non affichées) pour se
poser sur toute ligne visible précédée d'une autre ligne visible : la
hauteur de la carte ne dépend ainsi plus du nombre de dates en base. */
.page-template-template-restauration .fp-rhoraires-panel-exceptions .fp-rhoraires-ligne[hidden] {
display: none;
}
.page-template-template-restauration .fp-rhoraires-panel-exceptions .fp-rhoraires-ligne {
border-bottom: 0;
}
.page-template-template-restauration .fp-rhoraires-panel-exceptions .fp-rhoraires-ligne:not([hidden]) ~ .fp-rhoraires-ligne:not([hidden]) {
border-top: 1px solid color-mix(in srgb, var(--fp-primary) 16%, transparent);
}
/* GROUPES PAR CAMPAGNE (Marino, 2026-09-10 : « affiche aussi le nom, avec un
slider en 2 par 2 pour une période prolongée »). Le libellé de l'exception,
jusqu'ici recollé à la date sur chaque ligne (« 10.10.2026 - Vacances
d'automne », répété autant de fois que de dates), devient l'entête d'un
groupe (fp_horaires_grouper_exceptions(), inc/template-tags.php) qui
enveloppe désormais les .fp-rhoraires-ligne d'une même campagne. Le
groupe est un QUI NE PORTE PAS la classe
.fp-rhoraires-ligne : les règles ci-dessus (filet, [hidden]) continuent
donc de ne viser QUE les lignes de date, à l'intérieur de chaque groupe,
sans réglage supplémentaire. */
.page-template-template-restauration .fp-rhoraires-groupe {
display: block;
}
.page-template-template-restauration .fp-rhoraires-groupe[hidden] {
display: none;
}
.page-template-template-restauration .fp-rhoraires-groupe:not([hidden]) ~ .fp-rhoraires-groupe:not([hidden]) {
margin-top: 8px;
padding-top: 10px;
border-top: 1px solid color-mix(in srgb, var(--fp-primary) 16%, transparent);
}
/* JOURS EN GRAISSE NORMALE ET TÊTE RESSERRÉE (Marino, 10.09.2026 : « que les
jours ne soient plus en gras si le titre l'est, et moins d'espace entre un
titre et ses jours liés »). Le nom de la campagne porte déjà le gras : deux
niveaux en gras se disputaient l'oeil. Les dates redescendent à la graisse
courante, et l'air entre la tête du groupe et sa première date se réduit. */
.page-template-template-restauration .fp-rhoraires-groupe-tete {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 10px;
padding-bottom: 1px;
}
.page-template-template-restauration .fp-rhoraires-groupe .fp-horaires-row-jour {
font-weight: 400;
}
.page-template-template-restauration .fp-rhoraires-groupe-dates > li:first-child {
padding-top: 4px;
}
.page-template-template-restauration .fp-rhoraires-groupe-nom {
font-weight: 700;
color: var(--fp-ink);
}
.page-template-template-restauration .fp-rhoraires-groupe-periode {
color: var(--fp-ink-soft);
font-size: .85rem;
}
.page-template-template-restauration .fp-rhoraires-groupe-dates {
list-style: none;
margin: 0;
padding: 0;
}
.page-template-template-restauration .fp-rhoraires-groupe-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding-top: 6px;
}
.page-template-template-restauration .fp-rhoraires-groupe-nav[hidden] { display: none; }
.page-template-template-restauration .fp-rhoraires-groupe-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--fp-primary) 40%, transparent);
background: var(--fp-white);
color: var(--fp-primary);
font-size: .95rem;
line-height: 1;
cursor: pointer;
transition: background-color .2s ease, color .2s ease;
}
.page-template-template-restauration .fp-rhoraires-groupe-arrow:hover:not(:disabled) {
background: var(--fp-primary);
color: var(--fp-white);
}
.page-template-template-restauration .fp-rhoraires-groupe-arrow:disabled {
opacity: .35;
cursor: default;
}
.page-template-template-restauration .fp-rhoraires-groupe-statut {
min-width: 4.5em;
text-align: center;
color: var(--fp-ink-soft);
font-size: .78rem;
font-variant-numeric: tabular-nums;
}
/* Pas de défilement animé : la pagination bascule par [hidden], un
changement instantané à toutes les préférences de mouvement. Seule la
micro-transition de survol des flèches est coupée ici. */
@media (prefers-reduced-motion: reduce) {
.page-template-template-restauration .fp-rhoraires-groupe-arrow { transition: none; }
}
/* Mention « seules les deux prochaines dates sont affichées », remplie par
traiterFuturs() : la règle de départ ([hidden] -> display:none) vient de
main.css (.fp-horaires-futurs-note, non scopée à .fp-horaires-module). Un
léger espace la sépare de la liste sur cette page dense.
ESPACE RÉSERVÉ MÊME MASQUÉE, ICI SEULEMENT (spécificité supérieure à la
règle de main.css) : sans texte à couper (deux dates ou moins en base), la
note ne s'affiche jamais et la carte redevenait plus courte que lorsqu'une
longue liste est réduite à deux lignes. La demande explicite du 2026-09-06
est une hauteur de carte STABLE, quel que soit le nombre de dates en base :
on garde donc la ligne, invisible mais présente, plutôt que de la retirer
du flux. Le texte, lui, reste entièrement piloté par traiterFuturs()
(assets/js/main.js, INCHANGÉ) : une carte qui n'a jamais rien coupé garde
une ligne vide, jamais un texte inventé ici. */
.page-template-template-restauration .fp-rhoraires-prochain .fp-horaires-futurs-note {
margin-top: 10px;
min-height: calc(.82rem * 1.5);
}
.page-template-template-restauration .fp-rhoraires-prochain .fp-horaires-futurs-note[hidden] {
display: block;
visibility: hidden;
}
@media (min-width: 900px) {
/* Maquette : deux moitiés (652 px de texte contre 640 px de panneau).
Arbitrage client du 2026-08-13 : le panneau prend un peu plus que la
moitié (environ 54 %) pour que la bascule et la pastille « ouvert
maintenant » tiennent sur la même ligne aux largeurs courantes. */
.page-template-template-restauration .fp-rhoraires-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
gap: var(--fp-r-gouttiere);
}
/* Sans photo d'ambiance, la colonne de gauche n'a que son titre : on la
recentre plutôt que de la laisser flotter en haut d'un grand panneau. */
.page-template-template-restauration .fp-rhoraires--sans-photo .fp-rhoraires-tete {
justify-content: center;
}
}
/* ==========================================================================
CARTE DE CLÔTURE (.fp-rcta)
La carte claire de la maquette, posée sur le fond de la page, qui grandit à
l'approche (restauration.js). Au repos elle est à sa taille définitive :
sans JavaScript, on voit une carte, jamais une carte rétrécie.
========================================================================== */
.page-template-template-restauration .fp-rcta {
position: relative;
isolation: isolate;
padding: clamp(36px, 5vw, 60px) 0 clamp(72px, 10vw, 130px);
}
/* MOTIF EM-PLAN TRÈS LÉGER (retour client du 2026-08-12, troisième passage,
point 7 : « il est en blanc sur blanc. Peut-être un très léger fond
em-plan, ça pourrait donner sympa »). Même famille que les panneaux de
marque des sections de lieu (var(--fp-r-motif), traits seuls) mais posé
BEAUCOUP plus léger (.08 contre .34/.62 là-bas), sur un pseudo-élément
dédié (opacité isolée du reste, la carte et son texte ne s'atténuent
jamais). LE MOTIF NE PASSE JAMAIS SOUS LE TEXTE DE LA CARTE PAR
CONSTRUCTION : la carte (.fp-rcta-carte) est un aplat --fp-paper opaque, un
enfant normal de la section qui peint APRÈS ce pseudo-élément (z-index 0
contre z-index 1 sur les enfants réels ci-dessous) ; le motif ne peut donc
apparaître que dans la marge de la section, autour de la carte, jamais en
dessous. */
.page-template-template-restauration .fp-rcta::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: var(--fp-r-motif);
background-repeat: repeat;
background-size: 520px;
background-position: center;
opacity: .08;
}
/* PANNEAU TEAL AVEC MOTIF TOPO (retour client du 2026-08-12, quatrième
passage, point 5 : « il mériterait une petite couleur de fond, peut-être
poser la classe em-topo en fond, que ça ressorte un peu plus »). Défaut de
la zone désormais fp-s-primary (fp_render_restauration_cta,
fp_zone_bg_class) : la couleur vient de .fp-s-primary (main.css), CE
pseudo-élément n'ajoute que le MOTIF, même recette que les sections
sombres de lieu plus haut (dégradé de teinte à la même couleur, presque
opaque, PLUS le motif topographique en traits en dessous, cover, centré) :
un filigrane discret, jamais un aplat qui masquerait la couleur du
panneau. Si la cliente choisit fp-zone-fond-sombre à la place, la même
recette s'applique avec --fp-dark. Sur fp-s-light (ou tout autre fond),
c'est la règle générale ci-dessus (em-plan très léger) qui continue de
s'appliquer, inchangée. */
.page-template-template-restauration .fp-rcta.fp-s-primary::before {
background-image:
linear-gradient(color-mix(in srgb, var(--fp-primary) 90%, transparent), color-mix(in srgb, var(--fp-primary) 90%, transparent)),
var(--fp-r-motif-topo);
background-repeat: no-repeat, no-repeat;
background-position: center, center;
background-size: cover, cover;
opacity: 1;
}
.page-template-template-restauration .fp-rcta.fp-s-dark::before {
background-image:
linear-gradient(color-mix(in srgb, var(--fp-dark) 92%, transparent), color-mix(in srgb, var(--fp-dark) 92%, transparent)),
var(--fp-r-motif-topo);
background-repeat: no-repeat, no-repeat;
background-position: center, center;
background-size: cover, cover;
opacity: 1;
}
/* Sous le fond de page animé (restauration.js), c'est le calque global fixe
(.fp-r-fond-anime.is-fond-sombre::before, plus haut dans ce fichier) qui
porte le motif topo pour TOUTE section sombre, la carte de clôture
comprise : ce calque LOCAL se neutralise pour éviter un motif doublé,
exactement comme .fp-rlieu.fp-s-dark le fait déjà pour les sections de
lieu. Le panneau garde sa couleur pleine (fp-s-primary / fp-s-dark),
seule la variable JS pour la couleur de fond du corps de page. */
.page-template-template-restauration.fp-r-fond-anime .fp-rcta.fp-s-primary::before,
.page-template-template-restauration.fp-r-fond-anime .fp-rcta.fp-s-dark::before {
background-image: none;
}
.page-template-template-restauration .fp-rcta > * {
position: relative;
z-index: 1;
}
.page-template-template-restauration .fp-rcta-carte {
display: flex;
flex-direction: column;
padding: clamp(56px, 9vw, 110px) clamp(24px, 5vw, 60px) clamp(60px, 9.5vw, 116px);
border-radius: 44px;
background: var(--fp-paper);
box-shadow: 0 34px 90px color-mix(in srgb, var(--fp-dark) 13%, transparent);
transform-origin: center top;
}
/* ==========================================================================
DEUX COLONNES DANS LA MÊME CARTE (retour client du 2026-08-12 : « tu le
coupes en deux »). La carte elle-même (padding, rayon, ombre, animation de
scale au défilement) ne bouge pas ; seul son intérieur se réorganise.
Empilées par défaut (mobile d'abord), réservation en premier dans le
document donc en premier à l'écran ; deux colonnes séparées par un filet
vertical à partir de 720px, là où la carte a la place de les tenir côte à
côte sans les tasser.
========================================================================== */
.page-template-template-restauration .fp-rcta-grid {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(36px, 6vw, 56px);
width: 100%;
text-align: center;
}
/* LARGEUR EXPLICITE DÈS LE MOBILE, et c'est ce qui évite un vrai débordement
mesuré au banc : dans un flex-column à align-items:center, un enfant bloc
non contraint se réduit à la largeur MAXIMALE de son contenu (shrink-to-fit)
plutôt que de remplir la colonne. Le slider (.fp-rcta-menu-slider), qui
n'écrit pas de coupure de ligne (overflow-x:auto, pas de wrap), réclamait
alors la largeur de ses trois cartes mises bout à bout, et débordait le
cadre arrondi des deux côtés. Une largeur à 100% donne à la colonne, donc au
slider qui en hérite (width:100%), une base de calcul réelle : c'est ELLE
qui scrolle, plus son parent. */
.page-template-template-restauration .fp-rcta-col {
width: 100%;
}
@media (min-width: 720px) {
.page-template-template-restauration .fp-rcta-grid {
flex-direction: row;
align-items: stretch;
justify-content: center;
gap: clamp(48px, 6vw, 84px);
}
.page-template-template-restauration .fp-rcta-col {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Filet vertical entre les deux colonnes, même langage que celui du pied de
bannière (.fp-rhero-chiffre + .fp-rhero-chiffre::before) : décoratif, donc
dessiné et non écrit dans le document. */
.page-template-template-restauration .fp-rcta-col-menu {
position: relative;
}
.page-template-template-restauration .fp-rcta-col-menu::before {
content: "";
position: absolute;
top: 6px;
bottom: 6px;
left: calc(-1 * clamp(24px, 3vw, 42px));
width: 1px;
background: color-mix(in srgb, var(--fp-dark) 12%, transparent);
}
}
.page-template-template-restauration .fp-rcta-sur {
margin: 0;
font-family: var(--fp-font-heading);
font-weight: 700;
font-size: 1rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--fp-primary);
}
.page-template-template-restauration .fp-rcta-titre {
margin: 0;
font-family: var(--fp-font-heading);
font-weight: 700;
line-height: .9;
text-transform: uppercase;
font-size: clamp(2.1rem, 5.6vw, 4.6rem);
color: var(--fp-dark);
text-wrap: balance;
}
/* Titre de la colonne « Menu du jour » : rang inférieur au grand titre de
réservation à côté (un intitulé de colonne, pas un second grand titre qui
ferait doublon), mais agrandi (retour client du 2026-08-12 : « un peu plus
grand ») pour peser davantage face à ce grand titre. */
.page-template-template-restauration .fp-rcta-menu-titre {
margin: 0;
font-family: var(--fp-font-heading);
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
font-size: clamp(1.6rem, 3.4vw, 2.5rem);
color: var(--fp-dark);
}
/* Petits textes d'accompagnement des deux colonnes (fixup n85, retour client
du 2026-08-12) : même style des deux côtés, sous leur titre respectif. */
.page-template-template-restauration .fp-rcta-texte {
margin: 10px 0 0;
max-width: 38ch;
font-size: .95rem;
line-height: 1.55;
color: var(--fp-ink-soft);
}
.page-template-template-restauration .fp-rcta-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 14px;
margin-top: 14px;
}
.page-template-template-restauration .fp-rcta-actions .fp-btn {
min-height: 54px;
padding-inline: 30px;
}
/* --- Slider des prochains menus ------------------------------------------
Deux ou trois cartes au plus (fp_restauration_prochains_menus) : un simple
défilement horizontal au doigt/à la molette suffit largement, pas besoin
d'une bibliothèque ni d'un pilotage JS. Le navigateur gère nativement le
défilement et l'accroche (scroll-snap), le clavier via le focus des liens
qu'il contient : rien de plus léger, rien qui dépende d'un script pour
fonctionner. Neutre pour « animations réduites » puisqu'il n'y a la aucun
mouvement automatique, seulement un défilement voulu par la visiteuse. */
.page-template-template-restauration .fp-rcta-menu-slider {
display: flex;
gap: 14px;
width: 100%;
margin: 18px 0 0;
padding: 4px 4px 8px;
list-style: none;
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--fp-primary) 40%, transparent) transparent;
}
.page-template-template-restauration .fp-rcta-menu-carte {
flex: 0 0 auto;
width: clamp(126px, 26vw, 156px);
scroll-snap-align: start;
}
.page-template-template-restauration .fp-rcta-menu-lien {
display: flex;
flex-direction: column;
gap: 8px;
text-decoration: none;
border-radius: 18px;
}
.page-template-template-restauration .fp-rcta-menu-vignette {
display: block;
overflow: hidden;
aspect-ratio: 4 / 3;
border-radius: 16px;
background: color-mix(in srgb, var(--fp-primary) 8%, var(--fp-white));
}
.page-template-template-restauration .fp-rcta-menu-vignette img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/* Même geste de survol que les mosaïques de lieu (.fp-rlieu-photo img) :
un seul vocabulaire de survol sur toute la page. */
transition: transform .6s ease;
}
.page-template-template-restauration .fp-rcta-menu-lien:hover .fp-rcta-menu-vignette img {
transform: scale(1.07);
}
.page-template-template-restauration .fp-rcta-menu-nom {
display: block;
font-family: var(--fp-font-body);
font-weight: 600;
font-size: .85rem;
line-height: 1.3;
color: var(--fp-ink);
}
/* Plat du jour (retour client du 2026-08-12, point 6d) : sous la date, plus
discret qu'elle (poids normal, encre atténuée), tronqué proprement en PHP
déjà (fp_restauration_tronque), une seule ligne ici pour ne jamais étirer
la carte. */
.page-template-template-restauration .fp-rcta-menu-plat {
display: block;
margin-top: 2px;
font-family: var(--fp-font-body);
font-weight: 400;
font-size: .78rem;
line-height: 1.3;
color: var(--fp-ink-soft);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Focus visible sur le verre blanc de la carte : un anneau teal, seul jeton
qui ressorte franchement sur var(--fp-paper). */
.page-template-template-restauration .fp-rcta-menu-lien:focus-visible {
outline: 3px solid var(--fp-primary);
outline-offset: 4px;
border-radius: 18px;
}
/* ==========================================================================
RAIL LATÉRAL
Navigation par ancres des quatre lieux. Elle n'apparaît qu'à partir de
1200 px, là où les marges de la page peuvent l'accueillir sans mordre sur le
texte ; en dessous, ce sont les raccourcis de la présentation qui tiennent ce
rôle. Volontairement « display: none » et pas une simple transparence : un
repère invisible mais tabulable est un piège au clavier.
========================================================================== */
.page-template-template-restauration .fp-rrail { display: none; }
@media (min-width: 1200px) {
.page-template-template-restauration .fp-rrail {
display: block;
position: fixed;
right: 18px;
top: 50%;
transform: translateY(-50%);
z-index: 40;
transition: opacity .35s ease;
/* AU REPOS, LE RAIL N'EST PAS LÀ, et c'est le comportement de la maquette :
il n'apparaît qu'en entrant dans les quatre lieux, et repart après. Il
n'est donc pas non plus affiché quand aucun script ne tourne, ce qui est
préférable : ses repères, dessinés pour un fond clair, se perdraient sur
la bannière sombre, et personne ne serait là pour les repeindre. Aucune
information n'est perdue au passage, les quatre mêmes ancres sont dans le
flux de la présentation, tout en haut de la page.
visibility, et pas seulement l'opacité : un lien invisible mais tabulable
est un piège au clavier. */
opacity: 0;
visibility: hidden;
}
.page-template-template-restauration .fp-rrail.is-en-champ {
visibility: visible;
}
.page-template-template-restauration .fp-rrail-liste {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 6px;
justify-items: end;
}
.page-template-template-restauration .fp-rrail-lien {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
/* Cible tactile de 44 px, même si le repère visible n'en fait que 10. */
min-height: 44px;
padding: 0 4px 0 12px;
border-radius: 999px;
text-decoration: none;
color: var(--fp-secondary);
}
.page-template-template-restauration .fp-rrail-nom {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 6px 13px;
border-radius: 999px;
background: color-mix(in srgb, var(--fp-white) 82%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
font-family: var(--fp-font-heading);
font-weight: 700;
font-size: .875rem;
letter-spacing: .12em;
text-transform: uppercase;
white-space: nowrap;
opacity: 0;
transform: translateX(8px);
/* Relief doux sur fond clair (retour du 2026-09-06, meme demande et meme
valeur que .fp-e-rail-nom, assets/css/evenements.css : « sur fond
blanc, la pilule manque de relief »). Laissee identique en mode sombre
(fond deja fonce ici, .fp-rrail[data-fp-mode="sombre"] .fp-rrail-nom un
peu plus bas) : cette ombre neutre y reste invisible, aucun besoin de
la neutraliser explicitement. */
box-shadow: 0 6px 18px color-mix(in srgb, var(--fp-ink) 12%, transparent);
transition: opacity .35s ease, transform .35s ease;
}
.page-template-template-restauration .fp-rrail-point {
width: 10px;
height: 10px;
border-radius: 999px;
background: color-mix(in srgb, var(--fp-secondary) 30%, transparent);
transition: height .35s ease, background-color .35s ease;
}
.page-template-template-restauration .fp-rrail-lien.is-actif .fp-rrail-point,
.page-template-template-restauration .fp-rrail-lien:hover .fp-rrail-point,
.page-template-template-restauration .fp-rrail-lien:focus-visible .fp-rrail-point {
height: 28px;
background: var(--fp-secondary);
}
/* Le nom apparaît au survol, au clavier, et pour le lieu en cours de
lecture. Il est TOUJOURS dans le document : un lecteur d'écran lit les
quatre libellés, jamais quatre liens muets. */
.page-template-template-restauration .fp-rrail-lien.is-actif .fp-rrail-nom,
.page-template-template-restauration .fp-rrail-lien:hover .fp-rrail-nom,
.page-template-template-restauration .fp-rrail-lien:focus-visible .fp-rrail-nom {
opacity: 1;
transform: none;
}
/* MODE SOMBRE DU RAIL : posé par restauration.js quand la section survolée
est sombre. Sans lui, des points vert foncé disparaîtraient sur la section
du bar. */
.page-template-template-restauration .fp-rrail[data-fp-mode="sombre"] .fp-rrail-point {
background: color-mix(in srgb, var(--fp-white) 38%, transparent);
}
.page-template-template-restauration .fp-rrail[data-fp-mode="sombre"] .fp-rrail-lien.is-actif .fp-rrail-point,
.page-template-template-restauration .fp-rrail[data-fp-mode="sombre"] .fp-rrail-lien:hover .fp-rrail-point,
.page-template-template-restauration .fp-rrail[data-fp-mode="sombre"] .fp-rrail-lien:focus-visible .fp-rrail-point {
background: var(--fp-accent);
}
.page-template-template-restauration .fp-rrail[data-fp-mode="sombre"] .fp-rrail-nom {
background: color-mix(in srgb, var(--fp-dark) 72%, transparent);
color: var(--fp-white);
}
}
/* ==========================================================================
REPÈRE DE FOCUS SUR FOND SOMBRE
Le repère global du thème est un trait --fp-secondary : parfait sur fond
clair, invisible sur la bannière et sur la section du bar. On l'éclaircit là,
et seulement là.
========================================================================== */
.page-template-template-restauration .fp-rhero :focus-visible,
.page-template-template-restauration .fp-rlieu.fp-s-dark :focus-visible {
outline: 3px solid var(--fp-accent);
outline-offset: 3px;
}
/* Le rail est fixe : il passe successivement au-dessus de sections claires et
de la section sombre du bar. Le trait de focus du thème seul y serait
invisible une fois sur deux, on lui ajoute donc un halo clair qui le détache
de n'importe quel fond. */
.page-template-template-restauration .fp-rrail-lien:focus-visible {
outline: 3px solid var(--fp-secondary);
outline-offset: 2px;
box-shadow: 0 0 0 6px color-mix(in srgb, var(--fp-white) 85%, transparent);
}
/* ==========================================================================
GRILLE DES POINTS DE RESTAURATION
La grille a quitté cette page avec les pages enfants qu'elle listait. Ses
règles restent ici : la zone est toujours insérable depuis le kit Magic Parc,
et le dessin de la carte, lui, vit dans restaurant.css (chargée par
fun_planet_enqueue_per_template) pour les trois endroits qui l'affichent.
========================================================================== */
.page-template-template-restauration .fp-restauration {
background-color: var(--fp-cream);
background-image: linear-gradient(180deg, color-mix(in srgb, var(--fp-cream) 92%, transparent), var(--fp-cream)), var(--fp-r-motif);
background-size: auto, 1024px auto;
background-position: center, center top;
background-repeat: no-repeat, repeat-x;
}
.page-template-template-restauration .fp-restauration > .fp-wrap { text-align: center; }
.page-template-template-restauration .fp-restauration .fp-lead { margin-inline: auto; max-width: 22ch; }
/* Nombre de colonnes EXPLICITE, et c'est voulu : un repeat(auto-fit, minmax())
donnait trois colonnes plus une carte orpheline à 1024 px (mesure au banc).
Rennaz compte quatre points de restauration : deux fois deux jusqu'à 1199 px,
puis quatre de front. Spécificité volontairement supérieure à celle de
restaurant.css : l'ordre de chargement des deux feuilles ne peut donc pas
changer le résultat. */
.page-template-template-restauration .fp-resto-listing .fp-resto-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-top: 44px;
text-align: left;
}
@media (min-width: 600px) {
.page-template-template-restauration .fp-resto-listing .fp-resto-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (min-width: 1200px) {
.page-template-template-restauration .fp-resto-listing .fp-resto-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.page-template-template-restauration .fp-resto-listing .fp-resto-card { min-height: 320px; }
/* Titre : même police et même graisse que la carte d'origine (Thoge n'existe
qu'en 400, jamais de faux gras), borne haute abaissée parce que la carte du
hub est deux fois moins large que celle de la colonne. */
.page-template-template-restauration .fp-resto-listing .fp-resto-title {
font-size: clamp(1.9rem, 2.6vw, 2.5rem);
}
@media (max-width: 720px) {
/* restaurant.css raccourcit ses cartes à 200 px sous ce palier, parce
qu'elles y sont empilées à trois dans une colonne. Ici elles sont plus
larges : on leur rend de la hauteur pour que la photo reste lisible. */
.page-template-template-restauration .fp-resto-listing .fp-resto-card { min-height: 260px; }
}
/* ==========================================================================
L'ENCRE SUIT LE FOND
LE DÉFAUT QUE CECI CORRIGE. Le fond de page se teinte d'une section à
l'autre, mais les couleurs de texte, elles, appartenaient à chaque section :
pendant le fondu, un texte prévu pour un fond clair se retrouvait sur du
sombre, et devenait presque illisible. La maquette a exactement le même
défaut, à un détail près : elle fait basculer DEUX titres (data-adapt) en
même temps que le fond. On généralise ce principe à toute la page.
PRINCIPE : le fond est global, donc l'encre l'est aussi. Le script pose
.is-fond-sombre sur le corps de page en même temps qu'il lance le fondu du
fond, et toutes les encres basculent avec, sur la MÊME durée. À aucun instant
du fondu un texte ne peut se retrouver du mauvais côté du contraste, y
compris pour une section encore visible en haut ou en bas de l'écran.
Ces règles ne s'appliquent QUE sous .fp-r-fond-anime, c'est-à-dire seulement
quand le script a pris la main. Sans lui, chaque section garde son fond plein
et ses propres couleurs, définies plus haut.
AUDIT COMPLET, .fp-rhoraires-texte AJOUTÉ (retour client du 2026-08-12,
septième passage : « le fond vert est devenu vert plus vite, et le texte
ne s'est pas adapté, le texte en dessous du titre »). CAUSE : ce petit
texte (fixup n85) sous le titre des horaires n'était PAS dans cette liste,
contrairement à son titre juste au-dessus (déjà couvert) : sur un fond de
page redevenu sombre pendant que la section horaires reste à l'écran, son
encre --fp-ink-soft fixe se retrouvait illisible sur le fond animé. TOUT
texte qui repose DIRECTEMENT sur le fond d'une section (donc transparent
sous .fp-r-fond-anime, [data-fp-sect] plus haut dans ce fichier) doit
passer par --fp-r-titre-vif/--fp-r-encre-vive/--fp-r-encre-douce : vérifié
zone par zone, ce texte était le seul oubli. Les textes du panneau
d'horaires, de la carte de clôture et des cartes de menu du jour n'ont
PAS besoin de cette liste : ils vivent dans une carte à fond opaque propre
(.fp-rhoraires-panneau, .fp-rcta-carte), jamais rendue transparente, donc
jamais exposée au fond de page animé.
========================================================================== */
.page-template-template-restauration.fp-r-fond-anime {
--fp-r-titre-vif: var(--fp-dark);
--fp-r-encre-vive: var(--fp-ink);
--fp-r-encre-douce: var(--fp-ink-soft);
--fp-r-trait-vif: var(--fp-r-filet);
--fp-r-rang-vif: var(--fp-primary);
}
.page-template-template-restauration.fp-r-fond-anime.is-fond-sombre {
--fp-r-titre-vif: var(--fp-white);
--fp-r-encre-vive: var(--fp-r-clair);
--fp-r-encre-douce: var(--fp-r-clair-doux);
--fp-r-trait-vif: var(--fp-r-filet-clair);
--fp-r-rang-vif: var(--fp-accent);
}
/* Pas de transition de couleur ici : le script bascule l'encre d'un coup, au
milieu du fondu du fond, seul instant où les deux encres sont acceptables.
Une transition CSS déclenchée par un changement de variable héritée n'est pas
fiable d'un navigateur à l'autre. */
.page-template-template-restauration.fp-r-fond-anime .fp-rlieu .fp-rlieu-titre,
.page-template-template-restauration.fp-r-fond-anime .fp-rintro .fp-rintro-titre,
.page-template-template-restauration.fp-r-fond-anime .fp-rhoraires .fp-rhoraires-titre {
color: var(--fp-r-titre-vif);
}
.page-template-template-restauration.fp-r-fond-anime .fp-rlieu .fp-rlieu-prose p:first-child,
.page-template-template-restauration.fp-r-fond-anime .fp-rlieu .fp-rlieu-item,
.page-template-template-restauration.fp-r-fond-anime .fp-rintro .fp-rintro-prose p:first-child {
color: var(--fp-r-encre-vive);
}
.page-template-template-restauration.fp-r-fond-anime .fp-rlieu .fp-rlieu-prose p,
.page-template-template-restauration.fp-r-fond-anime .fp-rlieu .fp-rlieu-item:last-child .fp-rlieu-item-txt,
.page-template-template-restauration.fp-r-fond-anime .fp-rintro .fp-rintro-prose p,
.page-template-template-restauration.fp-r-fond-anime .fp-rhoraires .fp-rhoraires-texte {
color: var(--fp-r-encre-douce);
}
.page-template-template-restauration.fp-r-fond-anime .fp-rlieu .fp-rlieu-item,
.page-template-template-restauration.fp-r-fond-anime .fp-rlieu .fp-rlieu-item:last-child {
border-color: var(--fp-r-trait-vif);
}
.page-template-template-restauration.fp-r-fond-anime .fp-rlieu .fp-rlieu-rang {
color: var(--fp-r-rang-vif);
}
/* Les sur-titres en pilule suivent par la classe utilitaire du thème
(.fp-fond-sombre, main.css), posée et retirée par le script sur chaque
section : aucune variable du composant n'est redéfinie ici, la règle
d'architecture de l'icon-box est respectée. */
.page-template-template-restauration.fp-r-fond-anime .fp-ibox {
transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
/* ==========================================================================
TÉLÉPHONE : RETOURS CLIENT DU 2026-08-17
Un seul bloc, en fin de feuille, pour tout ce qui ne concerne QUE les
petits écrans. Deux raisons de le tenir groupé ici plutôt que d'éparpiller
les règles dans les sections plus haut :
1. l'ordre de la cascade. Une requête de média n'ajoute AUCUNE
spécificité : pour l'emporter sur une règle de même poids écrite plus
haut (par exemple .fp-rhero-actions .fp-btn), il faut simplement être
écrit APRÈS. Ce bloc l'est, donc rien n'a besoin d'être renforcé
artificiellement (pas de !important, pas de sélecteur gonflé) ;
2. la réversibilité. Tout ce qui suit se retire d'un seul geste sans
toucher au reste de la page.
L'AFFICHAGE SUR ORDINATEUR NE BOUGE PAS : aucune de ces règles ne sort de
ses requêtes de média (le seul changement qui vaut aussi pour l'ordinateur,
le seuil de fond de la section de clôture, vit dans restauration.js).
========================================================================== */
/* --- 1. BANNIÈRE : tout centré, titre plus grand, actions côte à côte ----- */
@media (max-width: 720px) {
/* Sur téléphone, la bannière n'a qu'une colonne : le fer à gauche hérité de
la maquette large y laisse une marge droite morte sous chaque ligne de
titre. Tout se recentre sur l'axe de l'écran, comme la bannière de
l'accueil (retour du même jour). */
.page-template-template-restauration .fp-rhero-inner {
align-items: center;
text-align: center;
}
.page-template-template-restauration .fp-rhero-titre {
/* NETTEMENT PLUS GRAND, mais toujours borné par la largeur réelle du
texte : le titre est découpé en deux lignes par le rendu
(fp_restauration_titre_lignes), et la plus longue tient dans la colonne
tant que la taille suit la largeur de l'écran. D'où une taille fluide
(12,5vw) plutôt qu'une valeur fixe : 40 px sur un écran de 320 px, 47 px
sur 375 px, 54 px dès 435 px, contre 38 px partout auparavant. */
max-width: none;
font-size: clamp(2.4rem, 12.5vw, 3.4rem);
}
.page-template-template-restauration .fp-rhero-lead { margin-inline: auto; }
/* LES DEUX ACTIONS RESTENT SUR UNE SEULE LIGNE (demande client). Elles
s'empilaient parce que leurs deux libellés, à la taille de bureau,
dépassent la largeur d'un téléphone : on ne touche pas aux LIBELLÉS, on
réduit la taille du texte et les marges internes, et les deux boutons se
partagent la ligne à parts égales (flex: 1 1 0).
AUCUN RISQUE DE TEXTE TRONQUÉ : .fp-btn est en overflow: hidden et en
white-space: nowrap, donc un libellé trop long y serait coupé net. Le
retour à la ligne est rétabli ici : sur un écran vraiment étroit, le
libellé passe sur deux lignes dans sa pilule au lieu de disparaître.
Cible tactile 48 px, au-dessus du minimum de 44 px. */
.page-template-template-restauration .fp-rhero-actions {
flex-wrap: nowrap;
justify-content: center;
gap: 10px;
width: 100%;
}
.page-template-template-restauration .fp-rhero-actions .fp-btn {
flex: 1 1 0;
min-width: 0;
min-height: 48px;
justify-content: center;
padding: 12px 14px;
font-size: .92rem;
letter-spacing: .4px;
line-height: 1.05;
white-space: normal;
text-align: center;
}
/* CONTOUR DU SECOND BOUTON RENFORCÉ (retour client du 2026-08-17 : la
bordure de « Voir les horaires » est trop discrète).
CAUSE. .fp-btn-ghost-light (main.css) dessine son contour avec
--fp-line-light, un blanc à 20 pour cent, sur 1 px : posé sur une photo de
bannière déjà voilée de sombre, ce filet tombe autour de 1,4:1 contre son
fond, c'est à dire en dessous des 3:1 exigés d'un repère d'interface
(WCAG 1.4.11), et le bouton se lit comme un simple libellé flottant à côté
du bouton plein.
CORRECTION, EN DEUX SIGNAUX NON COLORÉS : le trait passe à 2 px et son
blanc à 72 pour cent, soit environ 6,5:1 contre le voile de la bannière
(--fp-ink à 80 pour cent au droit des boutons), très au-delà du seuil. Le
libellé, lui, reste blanc plein : son contraste ne bouge pas. Aucune
couleur en dur, --fp-white et color-mix comme partout ailleurs sur cette
page, et l'état de survol (remplissage blanc, texte teal, .fp-btn::before)
reste celui du thème.
LARGEUR DE BOUTON INCHANGÉE : .fp-btn porte déjà une bordure de 1 px sur
ses quatre côtés, le pixel supplémentaire est absorbé par les marges
internes, la ligne des deux actions ne bouge pas. */
.page-template-template-restauration .fp-rhero-actions .fp-btn-ghost-light {
border-width: 2px;
border-color: color-mix(in srgb, var(--fp-white) 72%, transparent);
}
/* --- 2. CHIFFRES CLÉS : deux de front, en colonne, un cran plus petits --
À l'horizontale (grand chiffre puis légende sur la même ligne), les deux
blocs demandaient plus que la largeur d'un téléphone et se retrouvaient
l'un sous l'autre. En colonne (chiffre au-dessus, légende dessous), ils
tiennent à deux de front sur toutes les largeurs mesurées, sans réduire
la légende au point de la rendre illisible. */
.page-template-template-restauration .fp-rhero-pied {
width: 100%;
justify-content: center;
gap: 18px;
}
.page-template-template-restauration .fp-rhero-chiffres {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
width: 100%;
}
.page-template-template-restauration .fp-rhero-chiffre {
flex-direction: column;
align-items: center;
gap: 4px;
max-width: none;
text-align: center;
}
/* Le filet vertical séparait deux blocs posés côte à côte SUR UNE LIGNE :
en colonne, il se retrouverait au-dessus du chiffre. La grille sépare
déjà les deux blocs, il n'a plus rien à faire ici. */
.page-template-template-restauration .fp-rhero-chiffre + .fp-rhero-chiffre::before {
display: none;
}
.page-template-template-restauration .fp-rhero-nombre { font-size: clamp(1.8rem, 8vw, 2.4rem); }
.page-template-template-restauration .fp-rhero-legende { font-size: .8rem; }
/* Repères du diaporama : recentrés eux aussi (leur marge automatique les
collait à droite, seule chose non centrée du pied de bannière). */
.page-template-template-restauration .fp-rhero-points { margin-inline: auto; }
}
/* --- 3. MODULE DE RÉSERVATION : les quatre onglets visibles d'un coup -----
L'onglet ouvert au chargement est « Réserver une table » sur cette page
(fp_render_resbar( 'table' ), inc/restauration.php) : encore faut-il qu'on
le VOIE. Les quatre onglets défilaient jusqu'ici dans une bande horizontale
(flex-wrap: nowrap + overflow-x: auto, plus haut dans cette feuille), sans
le moindre indice de ce défilement : sur un téléphone, l'onglet actif, en
troisième position, était purement et simplement hors champ, et la personne
voyait deux onglets inactifs au-dessus d'un panneau dont elle ne comprenait
pas la provenance. Les quatre tiennent désormais sur deux rangées de deux,
exactement comme sur l'accueil (home.css, même retour client, même palier).
PALIER À 70.625em (1130px à racine 16px, remonté depuis 860px le
2026-09-07, décision de Marino en question native, identique côté
accueil) : les quatre onglets doivent rester TOUJOURS visibles d'un coup,
y compris aux résolutions d'ordinateur portable les plus courantes,
plutôt que de rester calés sur le seuil de débordement mesuré de la
rangée en une ligne. Aucun geste caché, l'onglet actif est toujours
visible. Cible tactile 44 px, libellé qui passe à la ligne plutôt que
d'être tronqué, puisque plus rien ne défile.
EM, PAS PX (même jour) : raisonnement et limite identiques à home.css
(même bloc de commentaire, lire là-bas), le palier étant volontairement
la même valeur sur les deux pages. */
/* ONGLET ACTIF NETTEMENT DISTINGUÉ (retour client du 2026-08-17 : « on ne voit
pas quel onglet est ouvert »).
VALEURS REPRISES TELLES QUELLES DE L'ACCUEIL (assets/css/home.css, bloc
« ONGLET ACTIF NETTEMENT DISTINGUÉ », même retour client, même jour) : c'est
la MÊME barre (fp_render_resbar, inc/sections.php), affichée sur deux pages,
elle ne doit pas se dessiner de deux façons. Le raisonnement complet
(pourquoi l'atténuation ne passe pas par l'opacité du libellé, contrastes
mesurés au droit du motif em-plan de la carte) est écrit là-bas, à la source,
et n'est pas recopié ici pour ne pas en créer une seconde version qui
divergerait. En résumé : onglet au repos en pastille creusée à libellé blanc
plein, onglet actif en pastille blanche pleine à encre vert foncé, trois
signaux dont deux non colorés (surface, encre, graisse), aria-selected
inchangé côté setupTabs. */
@media (max-width: 70.625em) {
.page-template-template-restauration .fp-resbar-tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
/* Gouttière ouverte de 2 à 6px : des pastilles distinctes ont besoin de se
détacher les unes des autres, sans quoi les quatre se lisent comme un
seul pavé découpé. */
gap: 6px;
overflow-x: visible;
padding: 8px 8px 10px;
}
.page-template-template-restauration .fp-resbar-tab {
flex: none;
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 10px 8px;
font-size: .82rem;
line-height: 1.2;
white-space: normal;
text-align: center;
hyphens: none;
/* Repos : pastille creusée dans la carte, libellé blanc plein. */
border-radius: var(--fp-radius-sm);
border-bottom-color: transparent;
background: color-mix(in srgb, var(--fp-secondary-dark) 26%, transparent);
color: var(--fp-white);
transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.page-template-template-restauration .fp-resbar-tab:hover {
background: color-mix(in srgb, var(--fp-secondary-dark) 34%, transparent);
color: var(--fp-white);
}
/* Actif : PLUS DE PASTILLE BLANCHE (Marino, 2026-09-11). Valeurs reprises
telles quelles de home.css, qui reste la référence de ce module : les deux
pages affichent la même barre, elles ne doivent pas diverger.
L'onglet courant reste identifiable, et il doit l'être : les onglets
partagent un seul panneau, sans repère personne ne sait lequel est ouvert.
Le strict nécessaire, donc : même fond que les autres, à peine plus dense,
et un filet d'accent sous le libellé. Aucun aplat clair, aucune ombre. */
.page-template-template-restauration .fp-resbar-tab.is-active {
background: color-mix(in srgb, var(--fp-secondary-dark) 42%, transparent);
color: var(--fp-white);
font-weight: 600;
border-bottom-color: transparent;
box-shadow: inset 0 -2px 0 0 var(--fp-accent);
}
/* Le liseré de focus reste à l'EXTÉRIEUR de la pastille : un contour posé au
ras d'un fond sombre se lit mieux dehors qu'en retrait intérieur. */
.page-template-template-restauration .fp-resbar-tab:focus-visible {
outline: 2px solid var(--fp-white);
outline-offset: 2px;
}
}
@media (max-width: 640px) {
/* Un cran plus serré : chaque onglet ne dispose plus que de la moitié d'un
écran de téléphone. Marge interne redevenue SYMÉTRIQUE (le retrait bas plus
court datait du filet accent, remplacé au palier 1130px par une pastille
pleine) : dans une pastille, un libellé de deux lignes doit être centré,
sinon il paraît collé au bas. */
.page-template-template-restauration .fp-resbar-tab { font-size: .78rem; padding: 10px 6px; }
}
/* --- 4. HORAIRES : tête centrée, widget élargi, bascule des activités -----
Palier à 899 px et non 720 px : c'est à 900 px que la section passe à deux
colonnes (règle plus haut). En dessous, le titre et le panneau sont l'un
sous l'autre sur toute la largeur, et c'est cette disposition-là que le
client a sous les yeux. L'affichage à deux colonnes n'est donc pas touché,
bascule et pastille d'état y restent sur la même ligne comme arbitré le
2026-08-13. */
@media (max-width: 899px) {
.page-template-template-restauration .fp-rhoraires-tete {
align-items: center;
text-align: center;
}
.page-template-template-restauration .fp-rhoraires-texte { margin-inline: auto; }
/* La photo d'ambiance doit garder toute la largeur de la colonne : sans
cela, align-items: center la ramènerait à la largeur de son contenu. */
.page-template-template-restauration .fp-rhoraires-photo { align-self: stretch; }
/* WIDGET UN PEU ÉLARGI : il mord une part de la gouttière de chaque côté,
ce qui rend des pixels utiles à la liste des jours, et sa marge interne se
resserre d'autant. Il reste un peu d'air entre le panneau et le bord de la
colonne : jamais un bloc collé au bord de l'écran.
SECOND ÉLARGISSEMENT (retour client du 2026-08-17 : « le conteneur encore
un peu élargi »). Le débord passe de la moitié à 0,65 de la gouttière
(13 px au lieu de 10, il reste donc 7 px jusqu'au bord de l'écran) et la
marge interne descend de 20 à 15 px : environ 8 px utiles gagnés de chaque
côté, sans jamais coller le panneau au bord. Le rapport à la gouttière est
écrit en jeton, pas en pixels : si --fp-gutter-mobile change, ce calcul
suit. */
.page-template-template-restauration .fp-rhoraires-panneau {
margin-inline: calc(var(--fp-gutter-mobile) * -0.65);
padding: 20px 15px;
/* AUCUN CENTRAGE N'ENTRE DANS LE WIDGET (demande explicite) : la tête de
section est centrée juste au-dessus, le panneau garde sa lecture en
colonnes, jour à gauche et heures à droite. Seule la pastille d'état,
qui n'appartient à aucune des deux colonnes, est centrée sur sa propre
ligne, plus bas dans ce bloc. */
text-align: left;
}
/* BASCULE REPRISE DU WIDGET DES PAGES D'ACTIVITÉ (.fp-popup-tabs /
.fp-popup-tab, assets/css/activite.css) : une piste teintée et bordée qui
contient DEUX positions de largeur égale, la position choisie remplie en
teal avec un léger relief, la position libre lisible comme un emplacement
où l'on peut aller. Mêmes proportions, mêmes jetons, même police
d'affichage que là-bas : c'est le même objet, pas une imitation.
Mécanique inchangée (setupTabs, assets/js/main.js) : seul l'habillage
change, aria-selected et le pilotage au clavier restent ceux du thème. */
.page-template-template-restauration .fp-rhoraires-tabs {
flex: 1 1 100%;
gap: 4px;
padding: 4px;
background: color-mix(in srgb, var(--fp-primary) 14%, var(--fp-white));
border: 1px solid color-mix(in srgb, var(--fp-primary) 38%, transparent);
border-radius: var(--fp-pill);
}
.page-template-template-restauration .fp-rhoraires-tabs .fp-tab {
flex: 1 1 0;
min-width: 0;
/* 44 px : cible tactile confortable, contre 32 px sur la version de
bureau où la bascule partage sa ligne avec la pastille d'état. */
min-height: 44px;
padding: 8px 10px;
border-radius: var(--fp-pill);
/* Police d'affichage en graisse 400 : Bebas Neue n'existe qu'en 400, un
600 fabriquerait un faux gras (même note que dans activite.css). */
font-family: var(--fp-font-heading);
font-weight: 400;
font-size: clamp(.9rem, 3.2vw, 1.02rem);
letter-spacing: .02em;
line-height: 1.15;
white-space: normal;
color: var(--fp-secondary);
}
.page-template-template-restauration .fp-rhoraires-tabs .fp-tab:hover {
background: color-mix(in srgb, var(--fp-white) 70%, transparent);
color: var(--fp-secondary);
}
.page-template-template-restauration .fp-rhoraires-tabs .fp-tab.is-active {
background: var(--fp-primary);
color: var(--fp-white);
box-shadow: 0 2px 8px color-mix(in srgb, var(--fp-secondary-dark) 25%, transparent);
}
/* PASTILLE D'ÉTAT SOUS LA BASCULE, CENTRÉE (retour client du 2026-08-17).
La bascule prend toute la largeur : la pastille est déjà rejetée sur la
ligne suivante par le flex-wrap du panneau (elle est imprimée après la
bascule dans le document, fp_render_restauration_horaires). Restait sa
marge automatique, héritée de la version de bureau où elle était poussée
au bord droit de la ligne de la bascule : elle la laissait collée à gauche
de sa propre ligne. Deux marges automatiques la centrent, sans étirer la
pilule elle-même (elle reste inline-flex, à la largeur de son libellé,
jamais un bandeau blanc pleine largeur). */
.page-template-template-restauration .fp-rhoraires-panneau > .fp-horaires-status {
margin-left: auto;
margin-right: auto;
}
/* MOINS « TABLEAU » : les filets sous chaque jour dessinaient des lignes de
tableau sur toute la largeur du panneau. Ils disparaissent au profit d'un
simple rythme vertical ; les heures, elles, sont poussées au bord droit et
alignées à droite, chiffres de même chasse pour que les colonnes de
l'heure restent d'aplomb d'une ligne à l'autre. */
.page-template-template-restauration .fp-rhoraires-ligne {
gap: 12px;
padding: 9px 0;
border-bottom: 0;
}
/* ------------------------------------------------------------------------
RAFFINEMENT DE LA LISTE DES JOURS (retour client du 2026-08-17, qui
désigne le widget des pages d'activité comme la lecture à viser).
QUATRE RÉGLAGES, TOUS DE PRÉSENTATION : aucun libellé, aucune heure,
aucune donnée du module fp-horaires-manager n'est touchée.
1. LA PUCE « AUJOURD'HUI » DISPARAÎT DE L'ŒIL, PAS DU DOCUMENT. Elle est
posée par setupHorairesLive (assets/js/main.js), script PARTAGÉ par
toutes les pages qui affichent des horaires : il n'est pas modifié, le
masquage est ici, scopé à cette page. Et il est fait au patron du
masquage accessible (boîte d'un pixel, découpée), jamais en
display: none : le jour courant reste annoncé « Aujourd'hui » par un
lecteur d'écran, alors que le gras qui le signale à l'œil, lui, ne dit
rien à personne d'autre.
2. LE JOUR COURANT, SIMPLEMENT EN GRAS. Il portait EN PLUS l'encre teal de
la marque (règle générale plus haut dans ce fichier) : deux signaux
pour une même information, dont un coloré, sur une liste qui n'en
demande qu'un.
3. LES AUTRES JOURS, UN CRAN PLUS PETITS ET SANS MAJUSCULES. La casse est
remise à plat explicitement (text-transform: none, police de corps) :
rien ne la met en capitales aujourd'hui sur cette page, mais les deux
autres widgets d'horaires du site le font (.fp-horaires-row-jour de
restaurant.css, .fp-horaires-popup-jour de main.css) sur les MÊMES
classes partagées, et cette liste ne doit pas se mettre à les suivre
au premier remaniement de l'une de ces feuilles.
4. LES HEURES PERDENT LEUR GRAS. Avec le jour courant en gras, le gras des
heures était le troisième niveau d'emphase d'une même ligne.
---------------------------------------------------------------------- */
.page-template-template-restauration .fp-rhoraires-ligne .fp-horaires-today-tag {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.page-template-template-restauration .fp-rhoraires-ligne .fp-horaires-row-jour {
font-family: var(--fp-font-body);
font-size: .92rem;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: var(--fp-ink-soft);
}
.page-template-template-restauration .fp-rhoraires-ligne.is-today .fp-horaires-row-jour {
font-size: 1rem;
font-weight: 700;
color: var(--fp-ink);
}
/* DOUBLES PLAGES LISIBLES, SANS SERRAGE (retour client du 2026-08-17 :
« 11:00 - 14:00, 18:00 - 21:00 » se tassait sur la fin de ligne). Le
rendu enveloppe désormais chaque plage dans son propre fragment
insécable et le séparateur dans le sien (fp_restauration_heures_html,
inc/restauration.php) : ici, la colonne des heures passe simplement en
pile alignée à droite, une plage par ligne, et la virgule de liaison
s'efface puisque le retour à la ligne dit la même chose. Un jour à une
seule plage ne change pas d'aspect : une pile d'un seul élément. */
.page-template-template-restauration .fp-rhoraires-ligne .fp-horaires-row-heures {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
margin-left: auto;
text-align: right;
font-weight: 400;
line-height: 1.35;
font-variant-numeric: tabular-nums;
}
.page-template-template-restauration .fp-rhoraires-ligne .fp-rhoraires-sep {
display: none;
}
}
/* --- 5. CLÔTURE : carte pleine largeur, hiérarchie renforcée -------------- */
@media (max-width: 720px) {
/* (a) LA CARTE PREND TOUTE LA LARGEUR À SA TAILLE MAXIMALE.
La carte vit dans un .fp-wrap centré (largeur et gouttière portées par des
jetons) : plutôt que de soustraire ces valeurs une à une, on utilise la
formule pleine largeur générique. Le pourcentage se résout sur la largeur
du conteneur, donc chaque marge vaut « moitié du conteneur moins moitié de
l'écran », et la largeur automatique de la carte redevient exactement
celle de l'écran. Aucune valeur de jeton n'est supposée ici : si la
largeur de cadre ou la gouttière changent un jour, la carte reste pleine
largeur sans retouche.
La carte est mise à l'échelle par restauration.js (0,84 puis 1) : à
l'arrivée du défilement, donc à l'échelle 1, elle occupe la largeur
entière, et elle reste rentrée pendant sa croissance. Une transformation
ne modifiant jamais la place occupée dans la page, aucun débordement
latéral n'est possible pendant l'animation ; le verrou horizontal de
main.css (overflow-x: clip sur html et body) couvre de toute façon
l'arrondi au pixel près. */
.page-template-template-restauration .fp-rcta-carte {
margin-inline: calc(50% - 50vw);
}
/* (c) HIÉRARCHIE. Le titre de clôture domine franchement, et le bloc du
menu du jour devient ce qu'il est : une proposition complémentaire. */
.page-template-template-restauration .fp-rcta-grid { gap: 26px; }
.page-template-template-restauration .fp-rcta-titre {
font-size: clamp(2.6rem, 11vw, 3.4rem);
}
/* Le menu du jour passe en encart, façon carte d'application : un panneau
teinté, resserré, aux textes d'un rang inférieur. Rien n'est retiré ni
réécrit, ni titre, ni texte, ni bouton, ni vignettes : seul le poids
visuel change. */
.page-template-template-restauration .fp-rcta-col-menu {
padding: 18px 16px 20px;
border-radius: 24px;
border: 1px solid color-mix(in srgb, var(--fp-primary) 14%, transparent);
background: color-mix(in srgb, var(--fp-primary) 6%, var(--fp-white));
}
.page-template-template-restauration .fp-rcta-menu-titre {
font-size: clamp(1.15rem, 4.4vw, 1.4rem);
letter-spacing: .06em;
color: var(--fp-secondary);
}
.page-template-template-restauration .fp-rcta-col-menu .fp-rcta-texte {
margin-top: 6px;
font-size: .85rem;
}
/* PLUS DE DÉFILEMENT POUR LES MENUS DU JOUR (retour client du 2026-08-17 :
« plus de slider »).
DÉFAUT CORRIGÉ. La liste était une bande à défilement horizontal
(overflow-x: auto + scroll-snap, règle générale plus haut dans cette
feuille) : sur un téléphone, la troisième vignette, et souvent une partie
de la deuxième, n'existaient tout simplement pas pour qui ne devinait pas
le geste, exactement le même défaut que celui déjà corrigé sur les onglets
du module de réservation. Aucun indice de défilement n'était donné, et
l'encart est déjà court : rien ne justifiait de cacher son contenu.
CORRECTION SANS RIEN RETIRER : la bande devient une grille qui passe à la
ligne. Deux vignettes de front (la moitié de la largeur de l'encart, moins
la moitié de la gouttière), les suivantes en dessous, l'ensemble centré
comme le reste de la carte de clôture. Le renderer en prépare trois au
plus (fp_restauration_prochains_menus) : à trois, on lit donc deux
vignettes puis une troisième centrée, toutes visibles d'un coup, sans
geste caché et sans qu'aucun menu ne soit masqué. Un plafond de largeur
évite qu'à 720 px les deux vignettes ne deviennent deux grandes cartes.
Le listing reste DYNAMIQUE et lu à la source : cette règle ne fait que le
mettre en page, elle ne borne ni ne masque aucune donnée. */
.page-template-template-restauration .fp-rcta-col-menu .fp-rcta-menu-slider {
margin-top: 14px;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
overflow-x: visible;
scroll-snap-type: none;
padding: 0;
}
.page-template-template-restauration .fp-rcta-col-menu .fp-rcta-menu-carte {
width: calc(50% - 5px);
max-width: 150px;
scroll-snap-align: none;
}
.page-template-template-restauration .fp-rcta-col-menu .fp-rcta-menu-nom { font-size: .8rem; }
.page-template-template-restauration .fp-rcta-col-menu .fp-rcta-menu-plat { font-size: .72rem; }
.page-template-template-restauration .fp-rcta-col-menu .fp-rcta-actions { margin-top: 12px; }
/* Le bouton du menu du jour repasse à la cible tactile minimale (44 px), là
où l'action principale de la colonne de gauche garde ses 54 px : c'est ce
rapport de taille qui dit lequel des deux est le geste attendu. */
.page-template-template-restauration .fp-rcta-col-menu .fp-rcta-actions .fp-btn {
min-height: 44px;
padding-inline: 20px;
font-size: .9rem;
}
}
/* --- 6. PRÉSENTATION : tout centré ----------------------------------------
Retour client du 2026-08-17 : sur téléphone, tout se centre, à commencer par
les pastilles à icône (icon-box) qui ouvrent chaque section.
PALIER À 899 px, comme la section des horaires juste au-dessus et pour la
même raison : c'est à 900 px que cette section passe à deux colonnes (règle
plus haut dans cette feuille). En dessous, elle est empilée sur toute la
largeur, et c'est cette disposition-là qui est en cause.
Le sur-titre suit sans règle propre : la pastille icon-box est un inline-flex
dans un conteneur de niveau bloc, un simple text-align la centre. Les deux
colonnes de prose gardent leur mesure (56ch) : ce sont leurs marges
automatiques qui les recentrent, jamais une largeur réduite. -------------- */
@media (max-width: 899px) {
.page-template-template-restauration .fp-rintro-tete,
.page-template-template-restauration .fp-rintro-corps {
text-align: center;
}
/* La mesure du titre (13ch) est calée sur la colonne étroite du bureau :
sur une pleine largeur de téléphone, elle imposerait une coupure de ligne
prématurée au milieu de l'écran. */
.page-template-template-restauration .fp-rintro-titre {
max-width: none;
}
.page-template-template-restauration .fp-rintro-prose { margin-inline: auto; }
.page-template-template-restauration .fp-rintro-liens { justify-content: center; }
}
/* --- 7. LIEUX : photo d'abord, tout centré, badge masqué, survol automatique
Quatre retours du client du 2026-08-17 sur les quatre sections de lieu, tous
réunis ici parce qu'ils portent sur la même disposition empilée.
PALIER À 899 px : même raison qu'aux deux blocs précédents, c'est à 900 px
que la section passe à deux colonnes et retrouve son alternance
gauche/droite. Rien de ce qui suit ne peut donc atteindre l'affichage à deux
colonnes.
(a) LA PHOTO PASSE AVANT LE TEXTE, PAR L'ORDRE VISUEL SEULEMENT. Le document
n'est pas touché (ni le contenu en base, ni le rendu) : c'est la
propriété order de la grille qui inverse les deux colonnes, exactement
comme le fait déjà .fp-rlieu--media-gauche à partir de 900 px. Le
parcours au clavier et la lecture d'écran continuent donc de suivre
l'ordre du document (texte puis photos) ; les photos sont décoratives
(alt vide) et ne portent aucune information que le texte ne dise pas.
(b) LE BADGE DU LIEU EST MASQUÉ À L'ŒIL, PAS AU DOCUMENT. Le client le juge
redondant sur téléphone : le nom du lieu est déjà écrit sur la photo qui
le précède maintenant (plaque numérotée) ou sur son panneau de marque.
Masquage au patron accessible (boîte d'un pixel, découpée) plutôt que
display: none : la section garde son sur-titre pour un lecteur d'écran,
qui n'a lui aucune photo à regarder. Un enfant en position absolue sort
du flux de la colonne : ni sa place, ni la gouttière de 22 px de la
colonne ne subsistent, la photo touche donc bien le titre.
LE BADGE DE LA PRÉSENTATION ET CELUI DES HORAIRES RESTENT VISIBLES : la
demande porte sur les sections de lieu seules, où l'information est
doublée.
(c) TOUT LE TEXTE EST CENTRÉ, jusqu'aux points forts numérotés : leur grille
à deux colonnes (numéro puis texte) devient une ligne centrée, le numéro
restant calé sur la première ligne de son point (baseline héritée de la
règle de base).
(d) LE GESTE DE SURVOL SE JOUE TOUT SEUL AU CENTRE DE L'ÉCRAN. Sur
ordinateur, une photo de lieu zoome légèrement et une lueur la traverse
au survol ; sur téléphone, il n'y a pas de survol, et ce geste n'existait
tout simplement pas. restauration.js pose donc deux classes quand le
cadre traverse la bande centrale de l'écran (voir sa section 10) :
.is-au-centre, posée ET retirée, porte le zoom : la photo reprend sa
taille en quittant le centre, comme un survol qu'on relâche ;
.is-lueur, posée UNE SEULE FOIS et jamais retirée, lance le balayage :
retirer cette classe ferait retraverser la lueur en sens inverse, un
mouvement que personne n'a demandé et qui ne correspond à rien.
Sous « animations réduites », le script ne pose aucune de ces classes et
le bloc de fin de feuille neutralise les deux règles, par sécurité. ---- */
@media (max-width: 899px) {
/* (a) */
.page-template-template-restauration .fp-rlieu-media { order: 1; }
.page-template-template-restauration .fp-rlieu-corps { order: 2; }
/* (b) */
.page-template-template-restauration .fp-rlieu-corps > .fp-section-eyebrow {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* (c) */
.page-template-template-restauration .fp-rlieu-corps { text-align: center; }
/* Même raison qu'au titre de la présentation : la mesure de 15ch est celle
de la colonne de bureau. */
.page-template-template-restauration .fp-rlieu-titre { max-width: none; }
.page-template-template-restauration .fp-rlieu-prose,
.page-template-template-restauration .fp-rlieu-liste { margin-inline: auto; }
.page-template-template-restauration .fp-rlieu-item {
display: flex;
justify-content: center;
gap: 10px;
}
.page-template-template-restauration .fp-rlieu-action { justify-content: center; }
/* Cases à icône de la section Restaurant (voir plus haut dans cette
feuille) : texte et icône centrés eux aussi, dans le même esprit que le
reste de cette colonne sous ce palier. */
.page-template-template-restauration .fp-rlieu-case {
align-items: center;
text-align: center;
}
/* (d) */
.page-template-template-restauration .fp-rlieu-photo.is-au-centre img {
transform: scale(1.07);
}
.page-template-template-restauration .fp-rlieu-photo.is-lueur::before {
transform: translateX(130%);
}
}
/* --- 8. BANNIÈRE : LE CENTRAGE VA JUSQU'AU MÊME PALIER QUE LE RESTE --------
Le centrage de la bannière (bloc n1) s'arrête à 720 px, celui de la
présentation, des horaires et des lieux va jusqu'à 899 px : entre les deux,
sur une tablette en portrait (768 px, largeur très courante), la page
affichait une bannière au fer à gauche suivie de sections entièrement
centrées. Le centrage demandé s'entend pour toute la disposition empilée, pas
pour une plage de largeurs.
CE BLOC N'ÉTEND QUE LE CENTRAGE, rien d'autre. Les réglages du bloc n1 qui
dépendent vraiment d'un écran de téléphone (titre en 12,5vw, deux actions
forcées sur une ligne, chiffres en grille de deux colonnes, tailles réduites)
gardent leur palier de 720 px : ils n'ont rien à faire sur une tablette, où
la place ne manque pas. À 899 px comme en dessous, le résultat est donc une
bannière centrée ; c'est seulement la façon d'y tenir qui diffère.
Au-delà de 900 px, rien ne change : la bannière retrouve son fer à gauche de
maquette, sa hauteur pleine et son invitation à faire défiler. ------------ */
@media (max-width: 899px) {
.page-template-template-restauration .fp-rhero-inner {
align-items: center;
text-align: center;
}
.page-template-template-restauration .fp-rhero-lead { margin-inline: auto; }
.page-template-template-restauration .fp-rhero-actions { justify-content: center; }
.page-template-template-restauration .fp-rhero-pied { justify-content: center; }
/* Les repères du diaporama sont poussés au bord droit par une marge
automatique (règle générale) : c'est la seule chose qui ne se centrerait
pas d'elle-même dans le pied de bannière. */
.page-template-template-restauration .fp-rhero-points { margin-inline: auto; }
}
/* ==========================================================================
ANIMATIONS RÉDUITES
Tout ce que cette feuille anime s'arrête ici, et restauration.js se coupe
entièrement dès sa première ligne sous la même préférence : plus AUCUN
mouvement sur la page, et rien qui reste caché. Le rideau d'ouverture a
disparu de la page (retour client du 2026-08-12) : rien à neutraliser ici
de son côté, la page s'ouvre directement sur sa bannière dans tous les cas.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.page-template-template-restauration .fp-rhero-fleche { animation: none; }
.page-template-template-restauration .fp-rlieu-photo img { transition: none; }
.page-template-template-restauration .fp-rlieu-photo:hover img { transform: none; }
/* Survol automatique au centre de l'écran (bloc téléphone n7) : le script ne
pose déjà aucune de ces deux classes sous cette préférence (restauration.js
s'arrête avant), ces deux lignes sont le second filet si la préférence
bascule après le premier rendu. Écrites APRÈS le bloc qui les pose, à
spécificité égale : une requête de média n'ajoute aucune spécificité, seul
l'ordre d'écriture tranche. La lueur, elle, est déjà couverte par la règle
::before ci-dessous, qui vaut pour tous les états du cadre. */
.page-template-template-restauration .fp-rlieu-photo.is-au-centre img { transform: none; }
.page-template-template-restauration .fp-rlieu-photo::before { display: none; }
/* Onglets du module de réservation : la version téléphone (bloc n3) leur
redonne une transition propre, plus spécifique que rien mais surtout
écrite plus bas dans la feuille que la neutralisation d'origine. Elle est
donc reposée ici, en toute fin de feuille, pour que « animations réduites »
reste le dernier mot. */
.page-template-template-restauration .fp-resbar-tab { transition: none; }
.page-template-template-restauration .fp-rlieu-photo { animation: none; will-change: auto; }
.page-template-template-restauration .fp-rcta-menu-vignette img { transition: none; }
.page-template-template-restauration .fp-rcta-menu-lien:hover .fp-rcta-menu-vignette img { transform: none; }
/* Le slider reste défilable (geste voulu par la visiteuse, pas une
animation automatique) : seul l'éventuel lissage du navigateur au
défilement est coupé, les menus restent visibles et statiques au repos. */
.page-template-template-restauration .fp-rcta-menu-slider { scroll-behavior: auto; }
/* Carrousel des photos de lieu (deux photos ou plus) : même garde que le
slider de menus ci-dessus, la piste reste défilable au doigt ou aux
flèches, seul le lissage automatique et les gestes de survol s'arrêtent. */
.page-template-template-restauration .fp-rlieu-carousel { scroll-behavior: auto; }
.page-template-template-restauration .fp-rlieu-carousel-slide { transition: none; }
.page-template-template-restauration .fp-rlieu-carousel-slide:hover { transform: none; }
.page-template-template-restauration .fp-rlieu-carousel-nav .fp-carousel-arrow:hover { transform: translateY(-50%); }
.page-template-template-restauration.fp-r-fond-anime::before { transition: none; }
.page-template-template-restauration .fp-rintro-lien,
.page-template-template-restauration .fp-rrail,
.page-template-template-restauration .fp-rrail-nom,
.page-template-template-restauration .fp-rrail-point,
.page-template-template-restauration .fp-rhero-point {
transition: none;
}
/* Second filet : le script de tête ne pose déjà pas html.fp-r-anim sous
« animations réduites », mais si la préférence changeait après coup
(bascule système entre le premier rendu et l'exécution du script), rien
ne doit rester masqué. */
html.fp-r-anim .page-template-template-restauration [data-fp-hero-sur],
html.fp-r-anim .page-template-template-restauration [data-fp-ligne],
html.fp-r-anim .page-template-template-restauration [data-fp-hero-suite],
html.fp-r-anim .page-template-template-restauration [data-fp-media],
html.fp-r-anim .page-template-template-restauration [data-fp-rise],
html.fp-r-anim .page-template-template-restauration [data-fp-carte] {
opacity: 1;
transform: none;
}
}
/* BOUTONS DES LIEUX EMPILES SUR TELEPHONE (Marino, 2026-09-10) : « pour
chacune des sections sur mobile, les deux boutons l'un sur l'autre, un
plein, un contour ». Pleine largeur pour une cible confortable. */
@media (max-width: 720px) {
.page-template-template-restauration .fp-rlieu-action { flex-direction: column; align-items: stretch; }
.page-template-template-restauration .fp-rlieu-action .fp-btn { width: 100%; justify-content: center; }
}
/* RÉSERVES DU MODULE DE RÉSERVATION RENDUES (2026-09-10). Le module de
réservation n'est plus imprimé sur cette page (inc/restauration.php, filtre
fp_restauration_resbar, demande de Marino) : le padding-bottom du héro et
le padding-top de l'intro, qui lui faisaient de la place de part et d'autre
de la jonction (bloc ci-dessus), laissaient un vide de 256px sous le texte
du héro sur téléphone et de 128px en bureau. Ils reviennent à des marges
normales. Ce bloc est écrit APRÈS les réserves pour les surcharger à
spécificité égale ; il s'efface d'un coup le jour où le module revient. */
.page-template-template-restauration .fp-rhero { padding-bottom: clamp(56px, 10vw, 80px); }
.page-template-template-restauration .fp-rintro { padding-top: clamp(56px, 10vw, 96px); }
@media (min-width: 720px) {
.page-template-template-restauration .fp-rhero { padding-bottom: 88px; }
.page-template-template-restauration .fp-rintro { padding-top: 96px; }
}
@media (min-width: 900px) {
.page-template-template-restauration .fp-rhero { padding-bottom: 96px; }
.page-template-template-restauration .fp-rintro { padding-top: 104px; }
}
/* TITRE DE LIEU QUI SAUTAIT AU CHARGEMENT (Marino, 2026-09-10, titre du bar
« Un verre entre deux parties » : « deux lignes réservées, puis une ligne
dès que l'animation est finie »). Même cause que sur le hub des activités
(commit 2fa9e59) : le REPLI MÉTRIQUE de Bebas Neue, un peu plus large que
la vraie police, compose ce titre sur une ligne de plus tant qu'elle n'est
pas chargée, puis Bebas arrive et le texte se rabat. Le seuil de bascule
tombait pile entre 390 et 430 px d'écran, les deux largeurs d'iPhone les
plus courantes. Taille réduite de 33.6 à 31px sous 720px : les deux polices
composent alors sur le même nombre de lignes à 360, 390 et 430 px. */
@media (max-width: 720px) {
.page-template-template-restauration .fp-rlieu-titre { font-size: 31px; }
}