/* ==========================================================================
   restaurant.css - affinages du modèle « Point de restauration »
   (chargé via is_page_template('template-restaurant.php'), EN PLUS de
   activite.css - les 2 modèles de fiche détail (activité ET restaurant)
   partagent désormais le même kit visuel « détail » (hero diaporama, barre
   d'actions sticky, intro fil d'Ariane + scène, galerie bandeau...), scope
   CSS commun .fp-detail (classe de body, cf. fp_body_class_detail dans
   functions.php). Ce fichier ne couvre donc QUE les sections PROPRES au
   modèle restaurant : la carte (PDF du menu) et la section finale (contact +
   horaires en direct + autres propositions) - PLUS quelques repères de fond
   (fallback photo du hero) hérités de la fidélité visuelle Raiffeisen Parc.
   Couleurs : tokens var(--fp-*) UNIQUEMENT (verifie par check-zones).
   Scope : .page-template-template-restaurant
   ========================================================================== */

.page-template-template-restaurant {
  /* Photo d'ambiance par défaut (hero de repli, uniquement si AUCUNE image
     n'a ete résolue nulle part par le PHP - post-thumbnail, catalogue,
     galerie liee : cf. fp_render_hero_detail, inc/sections.php). */
  --fp-rp-photo: url('../img/rp-sosushi-1.webp');
}

/* ==========================================================================
   Hero : repli de fond UNIQUEMENT (le reste du hero - dimensions, titre,
   eyebrow, voile - vient de activite.css, .fp-detail .fp-hero-detail,
   partage avec le modèle activité).
   ========================================================================== */
/* Repli de DERNIER recours seulement : la règle ne s'applique plus que si le
   PHP n'a rendu AUCUNE diapositive (.fp-hero-slide). Auparavant elle ciblait
   tout hero sans diaporama, donc TOUS les points de restauration recevaient la
   même photo figée, alors que chacun a désormais la sienne (catalogue
   restauration, cf. fp_render_hero_detail dans inc/sections.php). */
.page-template-template-restaurant .fp-hero .fp-hero-bg:not(:has(.fp-hero-slide)) {
  background-image: var(--fp-rp-photo);
  background-size: cover;
  background-position: center;
}

/* ==========================================================================
   CARTE (menu, PDF) : section id="carte", fp_render_carte_menu.
   Fond dégradé teal foncé + plan du parc en filigrane fondu (MÊME motif que
   .fp-formules-plan, activite.css) : le filigrane utilise volontairement
   em-plan.svg (traits seuls, sans aplat) et non em-topo.svg (qui porte son
   propre aplat teal quasi plein cadre - couvrirait la section d'un
   rectangle plein plutôt que d'un filigrane discret).
   ========================================================================== */
/* FUSION 2026-08 : cette section porte DÉSORMAIS la carte ET la galerie
   (fp_render_carte_menu + fp_render_carte_galerie). Le décor ci-dessus est
   conservé à l'identique ; seule la COULEUR DE FOND change, du dégradé teal
   foncé vers le vert principal var(--fp-primary), demande explicite du client
   (« le vert un peu moins foncé, pas le teal non plus »). Le token vaut
   exactement la valeur demandée.

   CONTRASTES MESURÉS sur ce nouveau fond, plus clair donc moins tolérant :
    - blanc pur : 4,84:1, conforme AA pour du texte courant, mais SANS MARGE.
      C'est le plancher de la section : tout texte y est en blanc pur ;
    - les blancs TRANSPARENTS hérités du fond sombre ne passent plus et ont été
      supprimés : l'accroche à 88 % tombait à 4,16:1 et la mention « Carte
      bientôt disponible » à 78 % à 3,63:1, sous le seuil de 4,5:1 ;
    - crème --fp-cream : 4,77:1, conforme (bouton de la galerie, teal sur
      pastille crème, même rapport lu à l'envers) ;
    - ne JAMAIS écrire --fp-dark ni --fp-secondary sur ce fond : 3,01:1, sous
      le seuil du texte courant. */
.page-template-template-restaurant .fp-carte {
  position: relative;
  overflow: hidden;
  background: var(--fp-primary);
  text-align: center;
}
/* La section porte aussi la classe .fp-etapes-fusion : c'est le CROCHET du
   carrousel côté JavaScript (setupCarousels, assets/js/main.js, ne câble les
   flèches que dans une liste fermée de sections), pas un choix de style. Elle
   traîne cependant avec elle le motif de pattes de la page d'activité
   (activite.css), qui viendrait se superposer au plan du parc déjà posé ici
   par .fp-carte-plan. On le neutralise : un seul filigrane, celui de la carte.
   Le fond var(--fp-primary) et le texte blanc que cette classe apporte par
   ailleurs sont exactement ceux voulus, on les laisse faire. */
.page-template-template-restaurant .fp-carte.fp-etapes-fusion::before {
  content: none;
}
.page-template-template-restaurant .fp-carte-plan {
  position: absolute;
  inset: -6% -10%;
  z-index: 0;
  background-image: url('../img/em-plan.svg');
  background-size: min(1300px, 140%);
  background-position: center;
  background-repeat: no-repeat;
  /* Filigrane adouci : les traits d'em-plan.svg sont d'un teal clair, très
     lisible sur l'ancien fond foncé, trop présent sur le vert principal. */
  opacity: .22;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
/* Filets géométriques de part et d'autre du contenu (remplacent les 2
   étincelles fp-tarif-spark, retour client : « ça fait un peu enfantin »).
   Un liseré vertical d'un pixel, dégradé pour s'éteindre à ses extrémités,
   ponctué en son milieu d'un losange plein (carré pivoté). Aucun fichier,
   aucune icône : deux pseudo-éléments suffisent. Purement décoratif
   (aria-hidden côté PHP), donc jamais annoncé aux lecteurs d'écran.
   Masqués sous 980px : la section y devient trop étroite pour les accueillir
   sans serrer le texte. */
.page-template-template-restaurant .fp-carte-rule {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 1px;
  height: clamp(120px, 22vh, 210px);
  transform: translateY(-50%);
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--fp-white) 42%, transparent) 50%,
    transparent 100%
  );
  pointer-events: none;
}
.page-template-template-restaurant .fp-carte-rule.is-a { left: clamp(20px, 7vw, 96px); }
.page-template-template-restaurant .fp-carte-rule.is-b { right: clamp(20px, 7vw, 96px); }
.page-template-template-restaurant .fp-carte-rule::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  background: var(--fp-white);
  opacity: .5;
  transform: rotate(45deg);
}
/* Second losange, plus petit et décalé : rythme le filet sans l'alourdir. */
.page-template-template-restaurant .fp-carte-rule::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: 24px 0 0 -2.5px;
  background: var(--fp-white);
  opacity: .28;
  transform: rotate(45deg);
}
@media (max-width: 980px) {
  .page-template-template-restaurant .fp-carte-rule { display: none; }
}
/* MISE EN PAGE DE LA MOITIÉ CARTE, en deux temps (mobile d'abord).

   POURQUOI ELLE A ÉTÉ REFAITE (retour du client, 2026-08) : « la carte prend
   bien toute la largeur, mais ce n'est pas spécialement esthétique puisqu'on a
   un énorme espace entre la colonne de la carte et la colonne textuelle », et
   « le bouton est immense ». Mesuré sur le banc avant correctif, à 1440 px :
   384 px de vide entre le bas du texte et l'aperçu (388 px à 1920 px), et un
   bouton de 264 x 63 px là où tous les autres boutons du site en font 46 de
   haut. Les deux causes étaient dans ce bloc : la moitié carte s'étalait sur
   tout le cadre du site (var(--fp-wrap), 1300 px) avec un texte borné à 62ch
   d'un côté et une colonne de 264 px de l'autre, séparés par un
   justify-content: space-between ; et le bouton portait une surcharge de
   rembourrage propre à cette section.

   NOUVEAU PARTI PRIS : la moitié carte devient un CHAPEAU RESSERRÉ ET CENTRÉ
   (940 px au plus), dont les deux colonnes se touchent presque, tandis que la
   moitié galerie garde toute la largeur. Le contraste de largeur n'est pas un
   accident de mise en page : le chapeau est symétrique par rapport à l'axe de
   la section, comme les deux filets géométriques du décor, et la scène galerie
   qui suit s'ouvre d'un bord à l'autre. Un objet aussi étroit qu'une page A4 ne
   peut de toute façon pas remplir une piste de 600 px : le resserrer est la
   seule façon d'obtenir une composition dense.

   Petits écrans (règles de base) : une seule colonne centrée, dans l'ordre du
   document, texte puis aperçu puis bouton. On dit d'abord CE QU'EST la carte,
   on montre le document, on propose l'action. Aucun réordonnancement CSS n'est
   employé nulle part : l'ordre visuel et l'ordre au clavier restent identiques.

   Au-dessus de 980 px : grille de deux colonnes et deux rangées, texte et
   bouton empilés à gauche, aperçu à droite sur toute la hauteur. 980 px est le
   point de rupture DÉJÀ en vigueur dans cette section (les filets géométriques
   y disparaissent, la moitié galerie s'y empile) : la section entière bascule
   d'un seul tenant, jamais en deux temps. */
.page-template-template-restaurant .fp-carte-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 620px;
  margin-inline: auto;
}
.page-template-template-restaurant .fp-carte-texte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.page-template-template-restaurant .fp-carte-title {
  margin: 0;
  font-family: var(--fp-font-heading);
  text-transform: uppercase;
  line-height: 1.05;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  color: var(--fp-white);
}
/* Blanc PUR (et non plus 88 % transparent) : voir le relevé de contrastes en
   tête de bloc, le blanc atténué tombait à 4,16:1 sur le nouveau fond. */
.page-template-template-restaurant .fp-carte-lead {
  margin: 0;
  max-width: 56ch;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--fp-white);
}
/* Colonne de l'aperçu et bloc du bouton : deux boîtes nues qui ne servent qu'à
   donner à la grille des enfants manipulables. Aucun style décoratif ici, tout
   l'habillage vit sur .fp-carte-doc et sur .fp-btn. */
.page-template-template-restaurant .fp-carte-doc-col,
.page-template-template-restaurant .fp-carte-action {
  display: flex;
  justify-content: center;
}
/* Le bouton reprend EXACTEMENT le gabarit .fp-btn de main.css (14px/28px de
   rembourrage, 1rem, soit 46 px de haut) : plus aucune surcharge de taille
   propre à cette section, c'est la demande du client. 46 px passe largement le
   plancher de 44 px des cibles tactiles.
   Seul garde-fou conservé : le libellé est modifiable par la cliente et .fp-btn
   interdit le retour à la ligne. Un libellé long (« Télécharger la carte des
   boissons ») dépasserait la largeur d'un téléphone et pousserait la page à
   défiler latéralement. On l'autorise donc à passer à la ligne. Rien d'autre
   n'est touché : sur une ligne, la hauteur reste celle du gabarit. */
.page-template-template-restaurant .fp-carte-cta.fp-btn {
  white-space: normal;
  text-align: center;
}
/* Blanc PUR ici aussi : à 78 % la mention tombait à 3,63:1. */
.page-template-template-restaurant .fp-carte-soon {
  margin: 0;
  font-size: .9rem;
  color: var(--fp-white);
}

/* --- Aperçu du PDF ---------------------------------------------------------
   Vignette de la PREMIÈRE PAGE du document (WordPress la génère à l'envoi si
   Imagick et Ghostscript sont installés, cf. fp_carte_pdf_preview_url dans
   inc/sections.php, qui documente aussi comment le vérifier en production).
   Sans aperçu disponible, le PHP émet à la place .fp-carte-doc-vide, une
   vignette dessinée ici même : même silhouette, même comportement, jamais
   d'image cassée.
   Le bloc est CLIQUABLE et doit se lire comme tel : cadre blanc façon tirage,
   coins arrondis, léger soulèvement au survol et pastille « ouvre dans un
   nouvel onglet » en coin. Il double le bouton : c'est pour cela qu'il est
   retiré du parcours clavier et des lecteurs d'écran côté PHP (tabindex -1 +
   aria-hidden), le bouton portant déjà le libellé. */
.page-template-template-restaurant .fp-carte-doc {
  position: relative;
  display: block;
  width: min(280px, 62vw);
  aspect-ratio: 1 / 1.414; /* proportion d'une page A4 */
  overflow: hidden;
  border: 6px solid var(--fp-white);
  border-radius: var(--fp-radius);
  background: var(--fp-white);
  box-shadow: 8px 10px 0 0 color-mix(in srgb, var(--fp-secondary-dark) 32%, transparent), var(--fp-shadow-lg);
  transition: transform .35s cubic-bezier(.22, .85, .3, 1), box-shadow .35s ease;
}
.page-template-template-restaurant .fp-carte-doc:hover {
  transform: translateY(-4px);
}
/* Filet de sécurité : l'aperçu est aujourd'hui hors du parcours clavier
   (aria-hidden + tabindex -1, il double le grand bouton). Si un jour il
   redevient atteignable, son focus reste visible. */
.page-template-template-restaurant .fp-carte-doc:focus-visible {
  outline: 3px solid var(--fp-white);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .page-template-template-restaurant .fp-carte-doc { transition: none; }
  .page-template-template-restaurant .fp-carte-doc:hover { transform: none; }
}
.page-template-template-restaurant .fp-carte-doc-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
/* Repli sans aperçu : page blanche stylisée, icône de carte du menu au centre,
   quelques lignes de texte suggérées par un dégradé répété. */
.page-template-template-restaurant .fp-carte-doc-vide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(180deg, transparent 0 62%, color-mix(in srgb, var(--fp-primary) 12%, transparent) 62% 63%, transparent 63% 70%, color-mix(in srgb, var(--fp-primary) 12%, transparent) 70% 71%, transparent 71% 78%, color-mix(in srgb, var(--fp-primary) 12%, transparent) 78% 79%, transparent 79%),
    color-mix(in srgb, var(--fp-primary) 6%, var(--fp-white));
}
.page-template-template-restaurant .fp-carte-doc-vide svg {
  width: 64px;
  height: 64px;
  color: var(--fp-primary);
}
.page-template-template-restaurant .fp-carte-doc-loupe {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--fp-primary);
  color: var(--fp-white);
  box-shadow: var(--fp-shadow);
}
.page-template-template-restaurant .fp-carte-doc-loupe svg {
  width: 18px;
  height: 18px;
}

/* --- Chapeau en deux colonnes au-dessus de 980 px --------------------------
   Ce bloc vient APRÈS les règles de l'aperçu, et pas plus haut avec le reste
   de la mise en page : à spécificité égale, c'est la dernière règle écrite qui
   l'emporte, et .fp-carte-doc pose une largeur de min(280px, 62vw) qu'il faut
   pouvoir relâcher ici.

   LA GRILLE, et pourquoi elle est faite comme ça :

     grid-template-areas: "texte  doc"
                          "action doc"

   Trois blocs frères, à plat dans le document (texte, aperçu, bouton), et
   aucun `order` : sur téléphone ils s'empilent dans cet ordre, ici la grille
   les replace sans jamais désaccorder l'ordre visuel et l'ordre au clavier.
   L'aperçu tient les deux rangées.

   align-self: end sur le texte et align-self: start sur le bouton : l'aperçu,
   plus haut que la colonne de gauche, étire les deux rangées. Sans ces deux
   déclarations, l'excédent de hauteur se glisserait ENTRE l'accroche et le
   bouton (mesuré : une bonne centaine de pixels). En collant le texte au bas
   de sa rangée et le bouton en haut de la sienne, les deux se rejoignent et le
   couple se retrouve centré face à l'aperçu, sans hauteur codée en dur.

   La piste de droite est en `auto` : elle vaut la largeur de l'aperçu quand il
   est là, et ZÉRO quand le PHP ne l'émet pas. C'est le repli des navigateurs
   sans :has() (la règle du cas sans document est alors ignorée) : il ne reste
   qu'une gouttière à droite, jamais une colonne vide.
   L'aperçu plafonne à 300 px, la valeur annoncée dans l'attribut sizes de
   l'image (fp_render_carte_menu). Ces deux valeurs vont de pair : changer
   l'une sans l'autre remet un aperçu flou sur les écrans à forte densité.
   Le texte est borné à 56ch, la longueur de ligne confortable : sur les très
   grands écrans, c'est le titre qui occupe la piste, pas l'accroche étirée. */
@media (min-width: 981px) {
  .page-template-template-restaurant .fp-carte-inner {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "texte  doc"
      "action doc";
    justify-content: center;
    column-gap: clamp(40px, 4.5vw, 72px);
    row-gap: 22px;
    align-items: center;
    /* Deux pistes en `auto` plus justify-content: center : chaque colonne fait
       la largeur de son contenu et le couple est centré dans la section. C'est
       CE réglage qui supprime le vide dont le client se plaignait : il ne reste
       entre les deux colonnes que la gouttière, 72 px au plus (384 px mesurés
       avant correctif). Le plafond de 940 px n'est là que comme garde-fou de
       longueur de ligne. */
    max-width: min(100%, 940px);
    text-align: left;
  }
  .page-template-template-restaurant .fp-carte-texte {
    grid-area: texte;
    align-self: end;
    align-items: flex-start;
    max-width: 56ch;
  }
  .page-template-template-restaurant .fp-carte-action {
    grid-area: action;
    align-self: start;
    justify-content: flex-start;
  }
  .page-template-template-restaurant .fp-carte-doc-col {
    grid-area: doc;
    align-self: center;
  }
  .page-template-template-restaurant .fp-carte-doc {
    width: clamp(240px, 24vw, 300px);
  }
  /* AUCUN DOCUMENT CONFIGURÉ (l'état réel de plusieurs points de restauration
     aujourd'hui) : le PHP n'émet ni l'aperçu ni le bouton, il n'y a donc plus
     de seconde colonne. Le texte reprend sa composition centrée, au lieu de se
     coller à gauche en laissant toute la moitié droite vide. */
  .page-template-template-restaurant .fp-carte-inner:not(:has(.fp-carte-doc-col)) {
    display: flex;
    flex-direction: column;
    max-width: 660px;
    text-align: center;
  }
  .page-template-template-restaurant .fp-carte-inner:not(:has(.fp-carte-doc-col)) .fp-carte-texte {
    max-width: none;
    align-items: center;
  }
}

/* --- Moitié GALERIE de la section (fp_render_carte_galerie) -----------------
   Deux colonnes DANS la même surface : photo à gauche (composant de la page
   d'activité repris tel quel, .fp-etapes-carousel-col et ses enfants, stylés
   par activite.css sous le scope .fp-detail que ce modèle porte aussi - son
   défilement, ses flèches et son bouton ne sont PAS redéfinis ici, seule la
   largeur que la grille lui alloue change), colonne éditoriale à droite.

   RETOUR DU CLIENT : « pour la partie galerie, il n'y a pas beaucoup de choses
   et ça ne remplit pas nécessairement tout l'espace ». Mesuré avant correctif,
   à 1440 px : la photo occupait 44 % du cadre et la colonne de texte 45 %, en
   disposition flex sans répartition, donc 11 % de la largeur (une centaine de
   pixels) restaient perdus tout à droite, et le bloc éditorial paraissait
   étriqué. Corrigé par une GRILLE de deux pistes égales, qui consomme toute la
   largeur par construction, et par un bloc éditorial plus généreux (titre plus
   grand, texte plus large, respiration verticale augmentée).

   Le contraste de largeur avec le chapeau de la carte, plus resserré, est
   voulu : chapeau centré, puis scène ouverte d'un bord à l'autre. */
.page-template-template-restaurant .fp-carte-galerie {
  position: relative;
  z-index: 1;
  display: grid;
  /* 52 px et pas moins : le bouton « Voir la galerie complète » du composant
     photo déborde de 22 px SOUS son cadre (activite.css). Une gouttière plus
     serrée le collerait au sur titre de la colonne éditoriale, juste dessous,
     quand la section est empilée. */
  gap: 52px;
  margin-top: clamp(52px, 6vw, 96px);
  text-align: center;
}
.page-template-template-restaurant .fp-carte-galerie-texte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.page-template-template-restaurant .fp-carte-galerie-titre {
  margin: 0;
  font-family: var(--fp-font-heading);
  text-transform: uppercase;
  line-height: 1.05;
  font-size: clamp(1.9rem, 3.4vw, 3.1rem);
  color: var(--fp-white);
}
.page-template-template-restaurant .fp-carte-galerie-texte-p {
  margin: 0;
  max-width: 52ch;
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--fp-white);
}
.page-template-template-restaurant .fp-carte-galerie-cta {
  margin-top: 4px;
}
@media (min-width: 981px) {
  .page-template-template-restaurant .fp-carte-galerie {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(48px, 5vw, 80px);
    align-items: start;
    text-align: left;
  }
  /* La colonne photo est bornée à 44 % du conteneur par activite.css, une
     valeur pensée pour la page d'activité où elle cohabite avec trois étapes.
     Ici c'est la piste de grille qui décide de sa largeur : on relâche le
     plafond pour qu'elle la remplisse exactement, sans rien changer d'autre au
     composant. */
  .page-template-template-restaurant .fp-carte-galerie .fp-etapes-carousel-col {
    max-width: none;
  }
  /* LA COLONNE ÉDITORIALE TIENT TOUTE LA HAUTEUR DE LA PHOTO, et c'est la
     réponse au « ça ne remplit pas tout l'espace ». Un bloc de quatre éléments
     fait environ 250 px de haut quand la photo, au format 4/3, en fait 430 :
     l'écart est structurel, aucun réglage de typographie ne le comble. Plutôt
     que de laisser le texte flotter au milieu du vide, la colonne s'étire, son
     contenu se centre, et un FILET VERTICAL en marque le bord gauche sur toute
     la hauteur.
     Ce filet est le même objet que les deux filets du décor de la section
     (.fp-carte-rule) : un liseré d'un pixel qui s'éteint à ses extrémités.
     Purement décoratif, donc jamais annoncé aux lecteurs d'écran (pseudo
     élément sans contenu), et jamais porteur de texte : aucun enjeu de
     contraste. */
  .page-template-template-restaurant .fp-carte-galerie-texte {
    position: relative;
    align-self: stretch;
    justify-content: center;
    align-items: flex-start;
    padding-left: clamp(24px, 2.6vw, 36px);
  }
  .page-template-template-restaurant .fp-carte-galerie-texte::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 1px;
    background: linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--fp-white) 55%, transparent) 20%,
      color-mix(in srgb, var(--fp-white) 55%, transparent) 80%,
      transparent 100%
    );
  }
  /* Losange à mi hauteur, comme sur les filets du décor : c'est ce repère qui
     fait lire le trait comme un élément de composition et non comme une
     bordure oubliée. */
  .page-template-template-restaurant .fp-carte-galerie-texte::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    background: var(--fp-white);
    opacity: .5;
    transform: rotate(45deg);
  }
}

/* ==========================================================================
   SECTION FINALE (zone fp-blk-horaires, fp_render_horaires_restaurant) :
   2 colonnes - contact + horaires en direct (gauche) / autres propositions
   de restauration (droite).
   ========================================================================== */
.page-template-template-restaurant .fp-final-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

/* --- Colonne gauche : contact --------------------------------------------- */
.page-template-template-restaurant .fp-final-contact {
  position: relative;
  overflow: hidden;
  border-radius: 40px;
  padding: clamp(32px, 4vw, 52px);
  background: var(--fp-accent);
  color: var(--fp-white);
}
/* Motif topographique discret : MÊME filigrane que .fp-carte-plan (em-plan.svg,
   traits seuls), assombri par un blend multiply pour rester lisible sur ce
   fond plus clair (teal clair accent) sans devenir une texture criarde. */
.page-template-template-restaurant .fp-final-topo {
  position: absolute;
  inset: -8%;
  z-index: 0;
  background-image: url('../img/em-plan.svg');
  background-size: min(1100px, 160%);
  background-position: center;
  background-repeat: no-repeat;
  opacity: .35;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.page-template-template-restaurant .fp-final-contact-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.page-template-template-restaurant .fp-final-title {
  margin: 0;
  font-family: var(--fp-font-heading);
  text-transform: uppercase;
  line-height: 1.05;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  color: var(--fp-white);
}
.page-template-template-restaurant .fp-final-lead {
  margin: 0;
  max-width: 46ch;
  color: color-mix(in srgb, var(--fp-white) 92%, transparent);
  line-height: 1.6;
}
/* « Horaires d'ouverture » : c'est un sous-titre de section, pas une legende.
   Il etait a 1.05rem, a peine plus gros que le corps de texte, et se perdait
   entre la carte de contact et celle des horaires (retour client). Remonte a
   1.35rem et un peu plus d'air au-dessus, pour qu'il separe visiblement les
   deux blocs. */
.page-template-template-restaurant .fp-final-subtitle {
  margin: 18px 0 0;
  font-family: var(--fp-font-heading);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 1.35rem;
  color: var(--fp-white);
}
/* Encarts blancs arrondis (courriel / horaires), mêmes codes visuels. */
.page-template-template-restaurant .fp-final-card {
  background: var(--fp-white);
  border-radius: var(--fp-radius);
  box-shadow: var(--fp-shadow);
  color: var(--fp-ink);
  padding: 20px 22px;
}
/* Carte de contact : courriel et telephone partagent la meme composition.
   Le telephone est propre a l'etablissement (metabox « Contact de
   l'etablissement »), il n'apparait que s'il est saisi. */
.page-template-template-restaurant .fp-final-email,
.page-template-template-restaurant .fp-final-tel {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Deux cartes a la suite : on les espace, sinon elles se touchent. */
.page-template-template-restaurant .fp-final-email + .fp-final-tel { margin-top: 12px; }
.page-template-template-restaurant .fp-final-card-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fp-primary) 12%, transparent);
  color: var(--fp-primary);
}
.page-template-template-restaurant .fp-final-card-icon svg { width: 22px; height: 22px; }
.page-template-template-restaurant .fp-final-card-body { min-width: 0; }
.page-template-template-restaurant .fp-final-card-label {
  margin: 0 0 2px;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fp-ink-soft);
}
.page-template-template-restaurant .fp-final-card-body a {
  font-family: var(--fp-font-heading);
  font-size: 1.1rem;
  color: var(--fp-ink);
  text-decoration: none;
  word-break: break-word;
}
.page-template-template-restaurant .fp-final-card-body a:hover { color: var(--fp-primary); }

/* Encart horaires : pastille d'état direct + onglets + tableau.
   L'espacement n'est plus porté par un « gap » global : l'onglet actif doit
   toucher son panneau, sans le moindre interstice (voir plus bas). */
.page-template-template-restaurant .fp-final-horaires {
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* PASTILLE D'ÉTAT « Ouvert / Fermé actuellement ».

   L'HABILLAGE N'EST PLUS ICI. La pilule blanche en relief, son libellé en
   police de titre et sa pastille ronde verte ou rouge sont désormais le
   composant partagé .fp-horaires-status de main.css, commun à cette page, à
   la carte horaires de l'accueil et à la petite fenêtre des horaires d'une
   activité. Ne reste ci-dessous que ce qui est propre à cet encart : la POSE
   (calée à gauche de la colonne, avec sa marge basse).

   L'attribut [hidden] n'a plus besoin d'être neutralisé ici : cette règle ne
   redéclare pas display, celle du composant partagé fait autorité. */
.page-template-template-restaurant .fp-horaires-status {
  margin: 0 0 14px;
  align-self: flex-start;
}

/* ONGLETS (système générique .fp-tabs/.fp-tab/.fp-tab-panel, main.js setupTabs).
   Retour client : « on dirait juste deux boutons, ça serait plus logique
   vraiment sous forme d'onglets ». Les anciennes pilules teal (actif plein /
   inactif contour) flottaient au-dessus du contenu, sans lien visuel avec lui.
   Vraie métaphore d'onglets désormais :
    - la rangée porte un filet continu en bas, ligne de flottaison des onglets ;
    - l'onglet ACTIF garde son bord inférieur blanc, comme son panneau, et
      descend d'un pixel pour RECOUVRIR le filet : plus aucune séparation entre
      lui et le contenu qu'il ouvre, ils forment une seule surface ;
    - l'onglet INACTIF reste en retrait (fond crème, texte adouci, sous le
      filet) et se soulève légèrement au survol.
   Les 2 onglets se partagent la largeur et leur libellé peut passer à la
   ligne : cette colonne est étroite, ils ne doivent jamais déborder.
   Retour client suivant : « la bordure n'est pas hyper claire ». Le filet de
   la rangée passe donc du gris neutre (--fp-line) au filet teal du thème
   (--fp-line-strong, token existant) : la ligne de flottaison se lit enfin, et
   elle est de la MÊME couleur que le contour de l'onglet actif, si bien que
   les deux se prolongent sans rupture. L'onglet inactif, lui, ne bouge pas
   (fond, texte, taille et survol strictement inchangés : il convient au
   client). */
.page-template-template-restaurant .fp-final-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  border-bottom: 1px solid var(--fp-line-strong);
}
.page-template-template-restaurant .fp-final-tabs .fp-tab {
  position: relative;
  bottom: -1px;
  flex: 1 1 0;
  min-width: 0;
  /* Cible tactile : sur un écran large, le libellé tient sur une ligne et
     l'onglet ne faisait plus que 38 px de haut. Le plancher de 44 px vaut à
     toutes les largeurs (mesuré : 54 px sur téléphone, où le libellé passe
     déjà sur deux lignes, donc rien n'y change). Le centrage en flex remplace
     le simple text-align, sans quoi le libellé se collerait en haut de la
     boîte agrandie. */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: color-mix(in srgb, var(--fp-ink) 5%, transparent);
  color: var(--fp-ink-soft);
  padding: 10px 12px;
  font-family: var(--fp-font-heading);
  /* Bebas Neue n'existe qu'en graisse 400 : jamais de gras synthétique ici. */
  font-weight: 400;
  font-size: .9rem;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.page-template-template-restaurant .fp-final-tabs .fp-tab:hover {
  background: color-mix(in srgb, var(--fp-primary) 10%, transparent);
  color: var(--fp-ink);
}
/* ONGLET ACTIF SUR FOND TEAL (demande du client). Le lavis dégradé qui
   s'éteignait sur du blanc laisse la place à un aplat plein var(--fp-primary),
   libellé en blanc pur.

   CONTRASTE : blanc sur --fp-primary = 4,84:1, conforme AA pour du texte
   courant (le libellé fait .9rem, il ne relève pas du « grand texte » et doit
   donc tenir 4,5:1). Ne pas repasser le libellé en --fp-secondary comme
   auparavant : sur cet aplat, il tomberait à 3,01:1.

   PLUS AUCUNE COIFFE BLANCHE (retour client : « je ne sais pas pourquoi tu as
   mis une bordure blanche sur l'onglet actif, tu peux l'enlever, tu peux
   vraiment mettre entièrement vert »). L'ombre interne de 4px qui dessinait un
   liseré clair en haut de l'onglet a donc été retirée : l'onglet actif est un
   aplat vert plein, sans rupture.

   REPÈRE VISUEL NON COLORÉ, exigé pour qui distingue mal les couleurs (le
   motif ARIA est déjà complet côté markup, aria-selected compris : c'est bien
   l'indice VISUEL qui devait rester lisible). Deux repères survivent au
   retrait de la coiffe, tous deux perceptibles en niveaux de gris :
    - l'INVERSION de valeur : l'onglet actif est un bloc SOMBRE à libellé
      clair, l'onglet inactif un bloc TRÈS CLAIR à libellé sombre. Les deux ne
      peuvent pas être confondus sans la couleur ;
    - la SOUDURE au panneau : l'onglet actif descend d'un pixel (bottom: -1px)
      et recouvre le filet de la rangée, il ne fait qu'une seule surface avec
      le contenu qu'il ouvre, tandis que l'onglet inactif reste séparé de ce
      contenu par le filet. C'est une différence de FORME, pas de couleur. */
.page-template-template-restaurant .fp-final-tabs .fp-tab.is-active {
  background: var(--fp-primary);
  border-color: var(--fp-primary);
  color: var(--fp-white);
  padding-bottom: 11px;
  cursor: default;
}
.page-template-template-restaurant .fp-final-tabs .fp-tab:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .page-template-template-restaurant .fp-final-tabs .fp-tab { transition: none; }
}
.page-template-template-restaurant .fp-tab-panel[data-panel] { display: none; }
.page-template-template-restaurant .fp-tab-panel.is-active { display: block; }
/* Le panneau prolonge l'onglet actif : il commence juste sous le filet, sans
   marge, et ne reçoit pas de contour propre (l'onglet suffit à le rattacher). */
.page-template-template-restaurant .fp-final-horaires .fp-tab-panel {
  padding-top: 6px;
}
.page-template-template-restaurant .fp-final-horaires .fp-tab-panel:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 2px;
}

.page-template-template-restaurant .fp-horaires-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-template-template-restaurant .fp-horaires-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--fp-line);
  font-size: .95rem;
}
.page-template-template-restaurant .fp-horaires-row:last-child { border-bottom: 0; }
.page-template-template-restaurant .fp-horaires-row.is-today { color: var(--fp-primary); }
/* Nom du jour : agrandi (retour client, « c'est difficile à lire »). SEUL le
   nom du jour grandit - les heures, la pastille « Fermé » et la note gardent
   leur taille. L'interligne est resserré à 1,25 pour que la ligne du jour
   (18,4px x 1,25 = 23px) reste SOUS la ligne des heures (15,2px x 1,6 =
   24,3px, interligne du corps de page) : la hauteur des rangées, leur
   alignement vertical et la hauteur du panneau ne bougent donc pas d'un pixel. */
.page-template-template-restaurant .fp-horaires-row-jour {
  font-family: var(--fp-font-heading);
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: 1.15rem;
  line-height: 1.25;
}
.page-template-template-restaurant .fp-horaires-row-heures { color: var(--fp-ink-soft); font-variant-numeric: tabular-nums; text-align: right; }
.page-template-template-restaurant .fp-horaires-tag-ferme {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--fp-pill);
  background: color-mix(in srgb, var(--fp-ink) 8%, transparent);
  color: var(--fp-ink-soft);
  font-size: .8rem;
}
/* Pastille « Aujourd'hui » (posée dans la ligne du jour par main.js,
   setupHorairesLive) : agrandie avec le nom du jour, même demande client. Sa
   hauteur totale (13,6px x 1,2 + 4px de rembourrage = 20,3px) reste inférieure
   à la ligne des heures : la rangée ne s'épaissit pas. Blanc sur --fp-primary :
   4,85:1, conforme AA. */
.page-template-template-restaurant .fp-horaires-today-tag {
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: var(--fp-pill);
  background: var(--fp-primary);
  color: var(--fp-white);
  font-size: .85rem;
  line-height: 1.2;
  text-transform: uppercase;
  vertical-align: middle;
}
.page-template-template-restaurant .fp-horaires-note,
.page-template-template-restaurant .fp-final-noexception {
  margin: 10px 0 0;
  font-size: .9rem;
  color: var(--fp-ink-soft);
}

/* --- Colonne droite : autres propositions --------------------------------- */
.page-template-template-restaurant .fp-final-related {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
/* Titre du listing : c'est le MAUVAIS titre qui avait été agrandi (retour
   client : « ce n'est pas ce titre-là ; celui-ci, tu peux le réduire, il est
   beaucoup trop grand maintenant »). Il redevient donc un simple intitulé de
   section, volontairement plus discret que les titres des cartes qu'il
   annonce : ce sont « Restaurant », « So Sushi »... qui doivent porter le
   regard, pas leur étiquette de rubrique. Échelle fluide conservée pour le
   mobile. font-weight 400 EXPLICITE : Bebas Neue n'existe qu'en graisse 400 et
   la règle globale des titres (h1..h4 { font-weight: 700 }, main.css) ferait
   sinon synthétiser un faux gras par le navigateur. */
.page-template-template-restaurant .fp-final-related-title {
  margin: 0;
  font-family: var(--fp-font-heading);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.3vw, 1.9rem);
  color: var(--fp-primary);
}
/* Cartes empilées (contrat PHP partagé avec l'accueil, fp_render_resto_cards :
   .fp-resto-grid > .fp-resto-card, image de fond + dégradé bas + pastille
   .fp-resto-pill haut-gauche + .fp-resto-title + .fp-resto-more ; carte
   verrouillée = .fp-resto-ribbon). Aucun style partagé ailleurs pour ces
   classes hors accueil (home.css) : mise en page DÉDIÉE ici, simple colonne
   de 2 cartes (pas la mosaïque asymétrique de l'accueil, non pertinente pour
   2 éléments). */
.page-template-template-restaurant .fp-resto-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.page-template-template-restaurant .fp-resto-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 240px;
  border-radius: var(--fp-radius-lg);
  overflow: hidden;
  padding: 20px;
  background-size: cover;
  background-position: center;
  color: var(--fp-white);
  text-decoration: none;
  text-align: left;
  box-shadow: var(--fp-shadow);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
}
.page-template-template-restaurant .fp-resto-card:hover { transform: translateY(-6px); box-shadow: var(--fp-shadow-lg); }
@media (prefers-reduced-motion: reduce) {
  .page-template-template-restaurant .fp-resto-card { transition: none; }
  .page-template-template-restaurant .fp-resto-card:hover { transform: none; }
}
.page-template-template-restaurant .fp-resto-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: inherit;
  transition: transform .6s ease;
}
.page-template-template-restaurant .fp-resto-card:hover::before { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .page-template-template-restaurant .fp-resto-card:hover::before { transform: none; }
}
.page-template-template-restaurant .fp-resto-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--fp-ink) 78%, transparent) 100%);
  pointer-events: none;
}
.page-template-template-restaurant .fp-resto-card > * { position: relative; z-index: 2; }
/* Chip pilule SOMBRE (distinct du chip « glass » de l'accueil, demande
   explicite : le contexte de cette colonne, plus etroite, appelle un chip
   plus lisible/contraste). */
.page-template-template-restaurant .fp-resto-pill {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: var(--fp-pill);
  background: color-mix(in srgb, var(--fp-ink) 62%, transparent);
  color: var(--fp-white);
  font-family: var(--fp-font-heading);
  /* Légèrement agrandie (retour client) : la pastille d'accroche se lisait mal
     à côté du titre de carte, lui-même agrandi ci-dessous. */
  font-size: .84rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.page-template-template-restaurant .fp-resto-pill svg { width: 16px; height: 16px; }
/* Titre d'une proposition (« Restaurant », « So Sushi », « Starbucks »,
   « Gaufres et crêpes ») : c'est CELUI-LÀ que le client voulait voir grandir.
   TAILLE uniquement (environ +45 %), jamais la graisse : Thoge, comme Bebas,
   n'existe qu'en graisse 400, et tout font-weight supérieur ferait synthétiser
   un faux gras pâteux par le navigateur (défaut déjà signalé plusieurs fois).
   Échelle fluide conservée : la borne basse reste compatible avec la carte
   raccourcie du mobile (min-height 200px sous 720px), la borne haute avec la
   colonne la plus étroite, où « Gaufres et crêpes » peut passer sur deux
   lignes sans déborder. */
/* Agrandissement 2026-08 (nouveau retour client : le titre de CHAQUE CARTE,
   pas celui de la section « Nos autres propositions », déjà agrandi). Environ
   +14 % sur les trois bornes, toujours en TAILLE seule, jamais en graisse.
   Les bornes restent calées sur les mêmes contraintes qu'avant : la basse sur
   la carte raccourcie du mobile (min-height 200px sous 720px), la haute sur la
   colonne la plus étroite, où « Gaufres et crêpes » doit pouvoir passer sur
   deux lignes sans déborder. */
.page-template-template-restaurant .fp-resto-title {
  margin: 0;
  font-family: var(--fp-font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.02;
  font-size: clamp(2.45rem, 4.1vw, 3.4rem);
  color: var(--fp-white);
}
/* « Plus d'informations » : au survol de la CARTE, un trait se forme sous le
   libellé, de gauche à droite. Le soulignement permanent (text-decoration)
   disparaît donc au profit de ce trait animé - c'est bien un état de survol
   qui apparaît, comme demandé.
   TECHNIQUE : mise à l'échelle horizontale d'un pseudo-élément (scaleX depuis
   transform-origin: left), JAMAIS sa largeur. Une largeur animée forcerait un
   recalcul de mise en page à chaque image ; scaleX est composé par le GPU. Le
   site emploie déjà exactement cette technique sur ses liens de contenu
   éditorial (.fp-prose a::after, main.css), on la reprend telle quelle.
   (Note : la variante de l'accueil, home.css, anime encore une largeur ; elle
   est hors du périmètre de cette retouche.)
   Neutralisé sous prefers-reduced-motion : le trait apparaît alors d'un coup,
   sans transition, et le libellé ne se décale plus. */
.page-template-template-restaurant .fp-resto-more {
  position: relative;
  display: inline-block;
  width: fit-content;
  margin-top: 6px;
  font-size: .85rem;
  color: var(--fp-white);
  text-decoration: none;
  transition: transform .3s ease;
}
.page-template-template-restaurant .fp-resto-more::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--fp-white);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s ease;
}
.page-template-template-restaurant .fp-resto-card:hover .fp-resto-more {
  transform: translateX(3px);
}
.page-template-template-restaurant .fp-resto-card:hover .fp-resto-more::after,
.page-template-template-restaurant .fp-resto-card:focus-visible .fp-resto-more::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .page-template-template-restaurant .fp-resto-more,
  .page-template-template-restaurant .fp-resto-more::after { transition: none; }
  .page-template-template-restaurant .fp-resto-card:hover .fp-resto-more { transform: none; }
}
.page-template-template-restaurant .fp-resto-card:has(.fp-resto-ribbon)::before {
  background: linear-gradient(200deg, var(--fp-primary) 57%, color-mix(in srgb, var(--fp-ink) 45%, transparent) 66%);
}
.page-template-template-restaurant .fp-resto-ribbon {
  position: absolute;
  top: 20px;
  right: -30px;
  z-index: 3;
  width: 150px;
  padding: 8px 0;
  background: var(--fp-white);
  color: var(--fp-ink);
  text-align: center;
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  transform: rotate(45deg);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--fp-ink) 12%, transparent);
}
.page-template-template-restaurant .fp-final-more { margin-top: 4px; }

/* ==========================================================================
   FAQ (zone fp-blk-faq, composant PARTAGÉ fp_render_faq_markup) : fond teinté
   PROPRE À CE MODÈLE.
   --------------------------------------------------------------------------
   Retour client : « je trouve que ça fait beaucoup de blanc, ce n'est pas
   hyper cohérent ». Sur une page de restauration, l'enchaînement des fonds
   finit en effet sur trois surfaces quasi blanches à la suite (FAQ, contact
   crème, listing d'activités). La FAQ, désormais placée juste avant le
   contact, prend donc un lavis teal très clair : elle sépare le bandeau teal
   de la galerie du bloc de contact, et les cartes de questions repassent en
   blanc pur pour se détacher nettement de ce fond.

   POURQUOI ICI ET PAS DANS LE COMPOSANT : la même section FAQ sert aussi les
   modèles activité, tarification et location, où elle suit IMMÉDIATEMENT la
   section tarifs, déjà en .fp-s-cream. Un fond teinté posé dans le composant y
   collerait donc deux sections teintées l'une contre l'autre. Le fond de cette
   section est pour cette raison choisi modèle par modèle - mécanisme prévu et
   documenté dans main.css (la classe .fp-faq reste posée sur la section
   justement pour porter les surcharges de fond par modèle), déjà utilisé par
   informations.css, evenements.css et activite.css (.fp-detail .fp-faq, que la
   règle ci-dessous surcharge : restaurant.css est chargé APRÈS activite.css,
   cf. fun_planet_enqueue_per_template).

   CONTRASTES sur ce lavis (teal clair du thème à 10 %) : texte --fp-ink
   16,0:1, texte --fp-ink-soft (questions et réponses) 6,4:1, teal
   --fp-primary du bouton et des pastilles d'icône 4,5:1. Le lavis est
   volontairement calé juste au-dessus du seuil où le teal principal
   tomberait sous 4,5:1 : tout ce qui est écrit en --fp-primary dans cette
   section, sur-titre compris, reste conforme AA sans avoir à être retouché.
   ========================================================================== */
.page-template-template-restaurant .fp-faq {
  background: color-mix(in srgb, var(--fp-accent) 10%, var(--fp-white));
}
/* Cartes de questions en blanc pur : leur fond d'origine (teal 5 %) était trop
   proche du lavis de la section pour que la pile de cartes reste lisible. La
   carte OUVERTE, elle, est déjà blanche dans le composant : son filet teal et
   son ombre portée continuent donc de la distinguer des cartes fermées. */
.page-template-template-restaurant .fp-faq2-item {
  background: var(--fp-white);
}
.page-template-template-restaurant .fp-faq2-item:not([open]):hover {
  background: color-mix(in srgb, var(--fp-primary) 7%, var(--fp-white));
}

/* ==========================================================================
   CTA final (zone fp-blk-cta encore présente sur une page existante, ou
   ajoutee manuellement depuis le kit Magic Parc) : bandeau « Reservez votre
   table » pleine largeur.
   ========================================================================== */
.page-template-template-restaurant .fp-cta-photo:not([style*="background-image"]) {
  background-image: var(--fp-rp-photo);
  opacity: .3;
}

/* ==========================================================================
   Reactif
   ========================================================================== */
@media (max-width: 980px) {
  .page-template-template-restaurant .fp-final-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .page-template-template-restaurant .fp-final-related { align-items: stretch; text-align: center; }
  /* La galerie fusionnée n'a plus rien à faire ici : sa pile d'une seule
     colonne centrée est désormais l'état de BASE (mobile d'abord), et c'est le
     palier 981 px qui la met en deux colonnes. La colonne photo, elle,
     retrouve toute la largeur par la règle .fp-detail .fp-etapes-carousel-col
     d'activite.css, au même point de rupture. */
}

@media (max-width: 720px) {
  .page-template-template-restaurant .fp-final-contact { padding: 28px 22px; border-radius: 28px; }
  .page-template-template-restaurant .fp-final-card { padding: 16px 18px; }
  .page-template-template-restaurant .fp-resto-card { min-height: 200px; }
  /* Aperçu du PDF : la vignette reste dimensionnée par rapport à l'écran
     (min() plus haut), on réduit juste le liseré et l'ombre décalée pour ne
     pas manger la largeur utile. */
  .page-template-template-restaurant .fp-carte-doc {
    border-width: 4px;
    box-shadow: var(--fp-shadow);
  }
  .page-template-template-restaurant .fp-carte-doc-vide svg { width: 48px; height: 48px; }
}

/* ==========================================================================
   PASSE TABLETTE (2026-08-24) : bande 721 px à 980 px, et rien d'autre.

   Règle bornée des deux côtés. Le palier mobile de cette feuille est
   max-width: 720px : sous 721 px, rien de ce bloc n'est évalué. Le plafond de
   980 px est celui du bloc « Reactif » plus haut : à partir de 981 px, la
   mise en page à deux colonnes reprend la main et n'est pas touchée.
   ========================================================================== */

/* « NOS AUTRES PROPOSITIONS » : LES CARTES SE METTENT DE FRONT.

   Défaut mesuré au banc à 768 px : .fp-resto-grid est une pile en colonne, et
   comme la section finale est passée sur une seule colonne sous 980 px,
   chaque carte s'étale sur 611 px de large pour 240 px de haut. Elle est donc
   PLUS LARGE sur tablette (611 px) que sur un poste de travail (464 px), où
   elle vit dans la colonne de droite : c'est le signe que la mise en page n'a
   pas dégradé, pas une intention de dessin. Deux cartes ainsi étirées
   consomment un demi écran de tablette pour deux vignettes.

   On les met de front dans la bande tablette, en grille souple : deux cartes
   d'environ 295 px à 768 px, soit à peine moins que les 350 px qu'elles
   occupent sur un téléphone de 390 px, largeur déjà validée. Le nombre de
   cartes varie (deux ou trois selon les points de restauration publiés) :
   auto-fit s'en charge, la troisième passant à la ligne. */
@media (min-width: 721px) and (max-width: 980px) {
  .page-template-template-restaurant .fp-resto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: stretch;
  }
}