/* THÈME 06 · CONTRASTO — moderne minimal, noir & blanc franc. Titres en sans (pas de
   serif), coins nets, ombres discrètes. Pour une pizzeria urbaine/design, épurée.
   Accent ajusté (2026-07-04) : jaune néon repris de l'enseigne/néon muraux réels du
   local ("Felicità" + logo pizza néon jaune sur carrelage blanc) — cf. photos client. */
:root{
  --bg:        #ffffff;
  --surface:   #f4f4f4;
  --surface-2: #eaeaea;
  --ink:       #0f0f10;
  --muted:     #5a5a5c;
  --line:      #e0e0e0;
  --accent:    #f4d117;
  /* --accent-2 = couleur de survol de .btn--primary (cf. style.css .btn--primary:hover),
     le texte --on-accent reste le même dans les 2 états → il faut donc rester sur une
     teinte claire ici aussi (pas noir), sinon texte sombre sur fond sombre = invisible
     (retour Florian 2026-07-04, bouton "Commander" illisible au survol). */
  --accent-2:  #d9ad0a;
  --on-accent: #111113;
  --dark:      #0f0f10;
  --on-dark:   #f2f2f2;
  --font:  'Helvetica Neue',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --serif: 'Helvetica Neue',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --radius:      8px;
  --radius-sm:   6px;
  --radius-pill: 999px;
  --shadow:      0 0 0 1px rgba(15,15,16,.06), 0 8px 24px rgba(15,15,16,.08);
  --shadow-lg:   0 20px 48px rgba(15,15,16,.16);
}

/* Numéro de téléphone (bloc "Nous trouver") en badge accent : peu visible sinon
   (retour Florian 2026-07-04, simple lien texte jaune sur fond gris). */
.tel-cta{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:var(--accent);
  color:var(--on-accent);
  padding:.55rem 1rem;
  border-radius:var(--radius-sm);
  text-decoration:none;
}

/* Hero : fondu enchaîné entre les 2 photos fournies par la cliente le 2026-09-11 (gros plan
   de la pizza burrata, puis macro de la burrata coupée). Le template ne gère qu'une image
   statique (photo_slot), donc le 2e plan passe par un calque CSS — pas de JS, pas de HTML. */
.hero__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:url("/image/images-site/hero/pizza-hero-2.jpg") center/cover;
  opacity:0;
  animation:heroCrossfade 14s ease-in-out infinite;
}
@keyframes heroCrossfade{
  0%, 40%   { opacity:0; }
  50%, 90%  { opacity:1; }
  100%      { opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .hero__bg::after{ animation:none; opacity:0; }
}

/* Section "Notre restaurant" (2 photos côte à côte : salle + terrasse de nuit).
   Retour Florian 2026-07-04 : le hack sur la carte "Sur place" rendait mal (photo écrasée
   derrière du texte) → remplacé par une vraie section, cf. app/views/home.php. */
.salle-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.4rem;
}
.salle-grid__item{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  aspect-ratio:4/3;
}
.salle-grid__item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Logo cursive « Felicità » en hero, à la place de la typo texte (retour Florian 2026-07-04) :
   PNG fourni par le client, non retouché. Légère lueur néon pour rappeler l'enseigne réelle. */
.hero__logo-cursive{
  display:block;
  width:100%;
  max-width:clamp(320px, 60vw, 640px);
  height:auto;
  margin:0 auto;
  filter:drop-shadow(0 0 14px rgba(255,190,80,.55)) drop-shadow(0 0 30px rgba(255,170,60,.3));
}

/* Storytelling "Histoire de Felicità" : le reste du site reste sans-serif (identité Contrasto),
   mais ce texte mérite une vraie typo éditoriale plutôt que la stack système Palatino/Georgia,
   jugée encore "pas ouf" (retour Florian 2026-07-04, 2e essai). Fraunces (Google Fonts, licence
   SIL OFL libre) self-hébergée dans /css/fonts/ + fonts.css — zéro requête externe au runtime,
   conforme à la CSP. Scopé à cette section uniquement, le reste du site ne change pas. */
#histoire-titre{
  font-family:'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-style:italic;
  font-weight:600;
  line-height:1.15;
}
.histoire__text p{
  font-family:'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-weight:400;
  font-size:1.15rem;
  line-height:1.75;
  color:var(--ink);
}

/* ------------------------------------------------------------------------
   HERO SANS PHOTO (état temporaire, en attente des photos des nouveaux
   propriétaires — 2026-09-11).
   Par défaut le template passe le hero en clair (.hero--plain). Or notre logo
   est un lettrage doré : illisible sur fond clair. On reprend donc la vraie
   enseigne du restaurant (devanture noire, lettrage doré) le temps qu'il n'y
   ait pas de photo. Tout ce bloc saute de lui-même dès qu'une photo hero est
   déposée : .hero--plain disparaît et le rendu photo reprend la main.
   ------------------------------------------------------------------------ */
.hero--plain{
  background:var(--dark);
  color:#fff;
  border-bottom:0;
}
.hero--plain .hero__sub{ color:rgba(255,255,255,.82); text-shadow:none; }
/* Cartouche « PHOTO HERO » : utile en interne, jamais devant un client. */
.hero--plain .photo-slot{ display:none; }
/* Le CTA secondaire repasse en contour clair (il est en contour sombre par défaut). */
.hero--plain .btn--outline-dark{ background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.hero--plain .btn--outline-dark:hover{ background:rgba(255,255,255,.12); color:#fff; }
/* La nav transparente était forcée en texte sombre (elle supposait un hero clair). */
body:has(.hero--plain) .nav:not(.scrolled) .nav__links a,
body:has(.hero--plain) .nav:not(.scrolled) .nav__socials a,
body:has(.hero--plain) .nav:not(.scrolled) .logo-text{ color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.35); }
body:has(.hero--plain) .nav:not(.scrolled) .lang-selector a{ color:rgba(255,255,255,.7); }
body:has(.hero--plain) .nav:not(.scrolled) .lang-selector a.active{ color:#fff; }
body:has(.hero--plain) .nav:not(.scrolled) .nav__burger span{ background:#fff; }
body:has(.hero--plain) .nav:not(.scrolled) .status-pill{ background:rgba(255,255,255,.14); color:rgba(255,255,255,.85); }
body:has(.hero--plain) .nav:not(.scrolled) .status-pill.is-open{ color:#7ee2a8; background:rgba(126,226,168,.16); }
body:has(.hero--plain) .nav:not(.scrolled) .status-pill.is-closed{ color:#ff9b9b; background:rgba(255,155,155,.16); }

/* Aperçu pizzas de l'accueil avec peu de photos (2026-09-11 : une seule pizza photographiée
   pour l'instant). La grille est en auto-fill : avec 1 ou 2 cartes elle laisse des colonnes
   vides et la carte se retrouve isolée à gauche, ça fait bancal. On centre tant qu'il y en a
   peu. Dès qu'il y a 3 photos ou plus, la grille normale reprend la main toute seule. */
.pizza-grid:has(.pizza-card:only-child){
  grid-template-columns:minmax(240px,340px);
  justify-content:center;
}
.pizza-grid:has(.pizza-card:nth-child(2):last-child){
  grid-template-columns:repeat(2,minmax(240px,340px));
  justify-content:center;
}

/* Bandeau de titre de la carte : photo en fond plutôt qu'un aplat noir (demande Florian
   2026-09-11). Le voile sombre est indispensable, le titre est en blanc par-dessus. Photo
   décorative dédiée (indépendante des photos de plats, qui elles portent un nom). */
.carte-header{
  background-image:
    linear-gradient(rgba(12,12,13,.74), rgba(12,12,13,.86)),
    url("/image/images-site/carte/carte-header.jpg");
  background-size:cover;
  background-position:center 60%;
  background-repeat:no-repeat;
}

/* =========================================================================
   PAGE CARTE
   1re version (photo floue en fond + carte étroite au milieu) rejetée par
   Florian le 2026-09-11 : une photo floutée ne fait pas une texture, ça fait
   une tache, et la colonne étroite laissait un écran vide autour.
   2e version : on traite la page comme une vraie carte de restaurant.
   Fond crème, contenu large, DEUX COLONNES sur grand écran, titres typés.
   ========================================================================= */
body:has(.carte-header){ background:#f6f3ec; }

/* Sections posées à plat sur le fond crème, sans alternance de gris. */
body:has(.carte-header) .cat-section{
  background:transparent;
  padding:2rem 0;
}

/* Chaque section = un panneau blanc net. Bordure fine plutôt qu'une grosse
   ombre : on veut du propre, pas du relief. */
body:has(.carte-header) .cat-section > .container{
  background:#fff;
  border:1px solid #e8e2d6;
  border-radius:14px;
  padding:2.6rem 2.6rem 2rem;
  box-shadow:0 2px 10px rgba(60,45,20,.05);
  max-width:1220px;   /* plus large que container--narrow : on remplit l'écran */
}

/* Titre de section : Fraunces (déjà self-hébergée pour le storytelling). */
body:has(.carte-header) .cat-section__title{
  font-family:'Fraunces','Iowan Old Style',Georgia,serif;
  font-weight:600;
  font-size:clamp(1.7rem, 3vw, 2.3rem);
  letter-spacing:-.01em;
  padding-bottom:.45rem;
  border-bottom:3px solid var(--accent);
  display:inline-block;
  margin-bottom:.2rem;
}

/* LE POINT CLÉ : deux colonnes dès qu'il y a de la place. Une liste d'items
   sur toute la largeur laissait le prix seul à 900 px du nom, d'où l'impression
   de vide. En colonnes, ça se lit comme une carte imprimée. */
/* Grille plutôt que column-count : avec des lignes en flex, le multi-colonnes
   ne répartit pas (tout restait dans la colonne de gauche). La grille, elle,
   place les items gauche-droite de façon prévisible. */
@media (min-width:1100px){
  body:has(.carte-header) .menu-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:3.2rem;
  }
}

/* Respiration et lisibilité des lignes. */
body:has(.carte-header) .menu-item{
  padding:.75rem 0;
  border-bottom:1px dashed #e3ddd0;
}
body:has(.carte-header) .menu-item__name{ font-size:1.02rem; }
body:has(.carte-header) .menu-item__desc{ font-size:.86rem; line-height:1.45; }
body:has(.carte-header) .menu-item__price{ font-size:1.02rem; white-space:nowrap; }
body:has(.carte-header) .menu-item__prices{ padding-left:1.2rem; }

@media (max-width:600px){
  body:has(.carte-header) .cat-section{ padding:1.1rem 0; }
  body:has(.carte-header) .cat-section > .container{ padding:1.5rem 1.2rem 1.2rem; border-radius:10px; }
}