/* ============================================================
   Pizza Par'Tif — feuille de style
   Charte : UN SEUL rouge = RAL 3020 (rouge signalisation) #CC0605
            + crème / blanc cassé
   ============================================================ */

/* Le 900 est chargé depuis le 25/08/2026. Les panneaux blancs le demandaient
   déjà (font-weight:900) sans qu'il soit livré : le navigateur prenait le 800
   et le graissait lui-même. Les métriques de Nunito sont identiques d'un
   graisse à l'autre — la géométrie des panneaux ci-dessous ne change pas,
   seules les lettres sont un peu plus larges. */
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Nunito:wght@400;600;700;800;900&display=swap');

:root{
  --red:#CC0605;          /* RAL 3020 — rouge signalisation, seul rouge de la charte */
  --cream:#F3E7CD;
  --cream-dark:#E6D5B2;
  --white:#FFFBF3;
  --text:#3A3330;

  /* Les trois planches de bois, découpées dans la déco du camion.
     La planche rouge vient du panneau « Saveurs Méditerranéenes », le plus
     vif du camion ; sa moyenne a été recalée sur RAL 3020 pour ne pas
     introduire un second rouge. Une seule planche rouge sert donc à tout :
     les boutons ET le cadre des panneaux blancs.
     Elles se raccordent dans les deux sens et ne doivent JAMAIS être étirées :
     dès qu'on touche à background-size, le grain se brouille. */
  --bois-blanc:url("images/bois-blanc.png");
  --bois-rouge:url("images/bois-rouge.png");

  /* ============================================================
     LA GÉOMÉTRIE DES PANNEAUX BLANCS — une seule source
     ------------------------------------------------------------
     Tout se mesure en hauteur de capitale, notée « c ». Chaque
     panneau déclare son propre --c ; les cinq calculs ci-dessous
     s'appliquent ensuite tels quels, à n'importe quelle taille.

     CE QUI CLOCHAIT AVANT LE 25/08/2026 : les paddings verticaux
     étaient égaux en haut et en bas. Or ce n'est pas la boîte de
     texte qu'il faut centrer, c'est la capitale. Nunito réserve de
     la place pour les jambages (descendante 0,353 em) et fait
     monter les majuscules (ascendante 1,011 em, capitale 0,71 em) :
     à padding égal, la capitale se retrouve trop haut dans le
     panneau. Le texte paraissait collé au filet du haut.

     LES PROPORTIONS DU VRAI PANNEAU (Palaiseau, relevé au pixel) :
         bord haut du panneau  →  haut de la capitale ..... 0,87 c
         hauteur de la capitale ......................... 1,00 c
         pied de la capitale  →  bord bas du panneau ..... 0,80 c
         soit une hauteur totale de 2,67 c.

     CE QUE ÇA DONNE EN CSS. Avec line-height:1, la boîte de texte
     laisse d'elle-même 0,168 c au-dessus de la capitale et 0,241 c
     en dessous (calculé sur les métriques réelles de Nunito). Le
     padding ne pose donc que la différence, filet déduit :
         padding haut = 0,87 − 0,31 − 0,168 = 0,392 c
         padding bas  = 0,80 − 0,31 − 0,241 = 0,249 c
     La hauteur totale du panneau ne bouge pas — seule la capitale
     descend à sa vraie place.

     Les côtés (0,58 c) et le filet (0,31 c, qui donne aussi le
     rayon des coins) sont inchangés, ils étaient déjà justes.
     ============================================================ */
  --pan-cap:.71;    /* capitale ÷ taille de police, propre à Nunito */
  --pan-haut:.392;  /* padding au-dessus de la capitale, en c */
  --pan-bas:.249;   /* padding en dessous, en c */
  --pan-cote:.58;   /* marge filet → lettre sur les côtés, en c */
  --pan-filet:.31;  /* épaisseur du filet rouge ET rayon des coins, en c */

  /* Route sinueuse (variante B) : bande rouge + marquage au sol discontinu crème */
  --road:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 44' preserveAspectRatio='none'%3E%3Cpath d='M0 34 C40 34 60 8 105 10 C150 12 155 36 200 36 C250 36 255 6 305 8 C350 10 355 30 400 26' fill='none' stroke='%23CC0605' stroke-width='13' stroke-linecap='round'/%3E%3Cpath d='M0 34 C40 34 60 8 105 10 C150 12 155 36 200 36 C250 36 255 6 305 8 C350 10 355 30 400 26' fill='none' stroke='%23F3E7CD' stroke-width='2.4' stroke-dasharray='10 12' stroke-linecap='round'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:'Nunito',sans-serif;
  background:var(--cream);
  color:var(--text);
  line-height:1.55;
}

a{color:inherit;text-decoration:none;}

.script{font-family:'Kaushan Script',cursive;}

/* ---------- Route (élément graphique récurrent) ---------- */

.road{
  height:34px;
  background:var(--road) center/100% 100% no-repeat;
  margin:0;
  border:0;
}

.road-sm{
  height:24px;
  width:220px;
  margin:10px auto 0;
  background:var(--road) center/100% 100% no-repeat;
}

/* ---------- En-tête ---------- */

/* Les 5 espacements de l'en-tête, réglables ici un par un */
:root{
  --sp-haut-embleme:56px;    /* haut de page  →  emblème */
  --sp-embleme-lettrage:38px;/* emblème       →  Pizza Par'Tif */
  --sp-lettrage-tagline:32px;/* Pizza Par'Tif →  « La passion… » */
  --sp-tagline-route:44px;   /* « La passion… » →  la route du haut */
  --sp-route-contenu:34px;   /* route du bas  →  le contenu de la page */

  /* Les deux routes encadrent la barre de menu : même valeur en haut
     et en bas, les pastilles restent donc centrées entre les deux. */
  --sp-routes-nav:22px;
}

header.site-header{
  background:var(--cream);
  padding:var(--sp-haut-embleme) 20px var(--sp-tagline-route);
  text-align:center;
}

/* Le logo est un lien vers l'accueil. En block, il ne change rien à la mise
   en page : l'emblème garde son margin:0 auto et le lettrage son centrage.
   Pas de soulignement ni de couleur de lien à neutraliser — il n'y a que des
   images à l'intérieur. */
header.site-header .lien-logo{
  display:block;
  text-decoration:none;
  color:inherit;
}

/* Le contour de focus doit rester visible au clavier : c'est le premier
   élément tabulable après le lien d'évitement. */
header.site-header .lien-logo:focus-visible{
  outline:3px solid var(--red);
  outline-offset:4px;
  border-radius:6px;
}

/* L'emblème est composé de trois calques superposés (médaillon + traits
   de gauche + traits de droite) pour pouvoir les animer séparément.
   Les trois images partagent le même canevas, le calage est donc exact. */
header.site-header .embleme{
  position:relative;
  width:min(300px,68vw);
  aspect-ratio:900/447;
  margin:0 auto var(--sp-embleme-lettrage);
}

header.site-header .embleme img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* Les images du logo sont servies en WebP avec repli PNG, donc enveloppées dans
   <picture>. display:contents efface cette enveloppe du rendu : les <img>
   gardent exactement la même mise en page qu'avant, positionnement et marges
   comprises. Ne pas retirer sans revoir l'espacement de l'en-tête. */
header.site-header picture,
.embleme picture,
.embleme-inline picture{display:contents}

/* Vitesse de l'animation du logo — deux valeurs à régler ici.
   Augmenter les durées ralentit encore, les réduire accélère. */
header.site-header .embleme{
  --duree-medaillon:2.2s;  /* fondu de la mascotte */
  --duree-traits:2.6s;     /* glissement des traits vers le médaillon */
  --retard-traits:.5s;     /* les traits démarrent après la mascotte */
}

header.site-header .embleme .medaillon{
  animation:apparition-medaillon var(--duree-medaillon) ease-out both;
}

header.site-header .embleme .traits-g{
  animation:traits-gauche var(--duree-traits) cubic-bezier(.22,.75,.3,1) var(--retard-traits) both;
}

header.site-header .embleme .traits-d{
  animation:traits-droite var(--duree-traits) cubic-bezier(.22,.75,.3,1) var(--retard-traits) both;
}

@keyframes apparition-medaillon{
  from{opacity:0;transform:scale(.9)}
  to  {opacity:1;transform:scale(1)}
}

@keyframes traits-gauche{
  from{opacity:0;transform:translateX(-14%)}
  to  {opacity:1;transform:translateX(0)}
}

@keyframes traits-droite{
  from{opacity:0;transform:translateX(14%)}
  to  {opacity:1;transform:translateX(0)}
}

/* Pas d'animation pour qui a demandé à en limiter dans son système */
@media (prefers-reduced-motion:reduce){
  header.site-header .embleme img{animation:none !important;opacity:1;transform:none}
}

header.site-header img.lettrage{
  display:block;
  width:min(340px,76vw);
  height:auto;
  margin:0 auto var(--sp-lettrage-tagline);
}

header.site-header p.tagline{
  color:var(--red);
  font-weight:700;
  letter-spacing:.4px;
  margin:0;
  font-size:.95rem;
}

header.site-header + .road{margin-bottom:var(--sp-routes-nav);}

/* ---------- Navigation ---------- */

nav.main-nav{
  background:var(--cream);
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:10px;padding:0 10px;
  line-height:1;
}

nav.main-nav a{
  color:var(--red);
  background:var(--white);
  font-weight:800;
  padding:8px 20px;
  border-radius:30px;
  border:2px solid var(--red);
  font-size:.95rem;
  white-space:nowrap;
  transition:background .15s,color .15s;
}

nav.main-nav a:hover,
nav.main-nav a.active{background:var(--red);color:var(--cream);}

nav.main-nav + .road{margin-top:var(--sp-routes-nav);margin-bottom:var(--sp-route-contenu);}

/* ---------- En-tête compacté sur mobile ----------
   Sur un téléphone de 390 px, l'en-tête occupait 625 px : le titre de la page
   et le début du texte tombaient sous la ligne de flottaison, sur les 5 pages.
   Ce bloc reprend les mêmes variables, avec des valeurs plus serrées, et ne
   s'applique qu'en dessous de 720 px : le rendu en desktop est inchangé.

   Pour revenir en arrière, il suffit de supprimer ce bloc entier.
   Gain mesuré : environ 200 px, soit un tiers d'écran de téléphone.        */

@media (max-width:720px){
  :root{
    --sp-haut-embleme:20px;      /* au lieu de 56px */
    --sp-embleme-lettrage:14px;  /* au lieu de 38px */
    --sp-lettrage-tagline:12px;  /* au lieu de 32px */
    --sp-tagline-route:18px;     /* au lieu de 44px */
    --sp-route-contenu:16px;     /* au lieu de 34px */
    --sp-routes-nav:12px;        /* au lieu de 22px */
  }

  header.site-header .embleme{width:min(150px,38vw);}   /* au lieu de min(300px,68vw) */
  header.site-header img.lettrage{width:min(210px,52vw);} /* au lieu de min(340px,76vw) */
  header.site-header p.tagline{font-size:.82rem;}

  /* Les pastilles tiennent toujours sur deux lignes à 390 px — cinq entrées
     ne rentrent pas sur une seule sans menu replié — mais elles passent de
     35 px à 44 px de haut, le minimum recommandé pour une cible tactile. */
  nav.main-nav{gap:8px;}
  nav.main-nav a{padding:13px 14px;font-size:.86rem;}
}

/* ---------- Deuxième palier : les vrais téléphones ----------
   Ajouté le 12/08/2026, après mesure de l'audit v2 sur un viewport de 390 px :
   l'en-tête consommait 388 px, soit 46 % du premier écran, AVANT le moindre
   mot utile.

   ⚠️ CE QUI A CHANGÉ D'APPROCHE LE 12/08 AU SOIR — À LIRE AVANT DE TOUCHER
   À CES VALEURS.

   Une première version de ce bloc réduisait le logo à 100 px et le lettrage à
   170 px. Le client a fait remarquer, à juste titre, que la mesure ne visait
   pas le bon coupable. Décompte de l'en-tête à 390 px, tel qu'il était :

       la marque (emblème + lettrage + marges)   116 px    36 %
       la navigation (2 routes + 5 pastilles
       sur 2 lignes + les 4 espacements)         204 px    64 %

   L'appareillage de navigation occupait donc presque le double de la marque
   qu'il est censé encadrer. Réduire le logo pour faire de la place à un menu
   déjà surdimensionné n'avait pas de sens.

   CE BLOC DÉGRAISSE DONC LA NAVIGATION D'ABORD, ET REND AU LOGO :

     Pris sur la navigation
       · pastilles de 44 à 37 px de haut (padding et police réduits)  -14 px
       · écart entre pastilles de 8 à 6 px                             -2 px
       · routes de 34 à 24 px de haut, les deux                       -20 px
       · espacements autour du menu, de 12 à 6 px                     -12 px
       · route → contenu, de 16 à 12 px                                -4 px
                                                                   ---------
                                                                      -52 px

     Rendu à la marque
       · emblème de 100 à 130 px de large (49,7 → 64,6 px de haut)    +15 px
       · lettrage de 170 à 215 px (28,3 → 35,8 px de haut)             +7 px
       · respiration autour du logo                                    +6 px
                                                                   ---------
                                                                      +28 px

   Bilan : en-tête à ~296 px au lieu de 388 au moment de l'audit, et la marque
   passe de 36 % à 49 % de ce qui reste. Rien ne disparaît, aucune page n'est
   cachée derrière un bouton.

   La tagline reste affichée sous 560 px. Elle était masquée du temps de
   « La passion de la pizza · Fait maison · Produits de qualité », qui
   prenait deux lignes pour ne rien dire. « Passionnément Pizza » tient
   sur une ligne dès 320 px et porte le nom de la marque : on le garde.

   ⚠️ Mesures faites par calcul, pas dans un navigateur. À recontrôler.       */

@media (max-width:560px){
  :root{
    --sp-haut-embleme:16px;      /* au lieu de 20px */
    --sp-embleme-lettrage:12px;  /* au lieu de 14px */
    --sp-lettrage-tagline:8px;   /* la tagline reste affichée */
    --sp-tagline-route:16px;     /* au lieu de 18px */
    --sp-routes-nav:6px;         /* au lieu de 12px — les routes se rapprochent */
    --sp-route-contenu:12px;     /* au lieu de 16px */
  }

  /* La marque récupère de la place. Les bornes en vw évitent qu'elle déborde
     sur un très petit écran : à 320 px, l'emblème fait 128 px et non 130. */
  header.site-header .embleme{width:min(130px,40vw);}
  header.site-header img.lettrage{width:min(215px,62vw);}

  /* Le slogan tient sur une ligne à 320 px : il reste affiché partout. */
  header.site-header p.tagline{font-size:.78rem;}

  /* Les routes s'affinent. Le tracé est un SVG étiré en 100% 100% : il garde
     exactement le même dessin, seulement plus plat. C'est le seul endroit du
     site où la route change de hauteur, et c'est assumé — sur un téléphone
     elle sert de séparateur, pas de décor. */
  .road{height:24px;}

  /* Pastilles : 37 px de haut au lieu de 44. On reste au-dessus du seuil
     confortable pour le pouce parce que la cible utile déborde du cadre
     visible (l'écart de 6 px entre deux pastilles n'est cliquable par
     personne d'autre). Ne pas descendre en dessous de 36. */
  nav.main-nav{gap:6px;}
  nav.main-nav a{padding:10px 13px;font-size:.8rem;}
}

/* ---------- Structure ---------- */

main{max-width:1020px;margin:0 auto;padding:0 18px 60px;}
section{margin-bottom:46px;}

/* Le sélecteur porte sur la classe, pas sur h2 : le premier titre de chaque
   page est désormais un h1 et doit garder exactement le même rendu. */
.section-title{
  font-family:'Kaushan Script',cursive;
  color:var(--red);
  font-size:2rem;
  text-align:center;
  /* Valeur par défaut d'un h2 (.83em). Écrite en clair pour que le h1
     de chaque page se place exactement comme le h2 qu'il remplace :
     un h1 aurait sinon une marge haute de .67em. */
  margin-top:.83em;
  margin-bottom:26px;
}

/* Sous-titre posé juste sous la route qui souligne un titre.
   Il sert à sortir du titre les mots qui comptent pour Google, sans les
   écrire en Kaushan Script à 2rem. Nunito, capitales, discret.
   Utilisé sur la page Tournée : « Jours, lieux et horaires ». */
.section-soustitre{
  text-align:center;
  font-family:'Nunito',sans-serif;
  font-weight:700;
  font-size:1rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text);
  margin:-18px 0 26px;  /* remonte sous la route du titre */
}

@media (max-width:520px){
  .section-soustitre{font-size:.86rem;letter-spacing:.04em;margin-top:-14px;}
}

.section-title:after{
  content:"";
  display:block;
  width:220px;height:24px;
  margin:6px auto 0;
  background:var(--road) center/100% 100% no-repeat;
}

/* ---------- Panneau rouge (façon flanc de camion) ---------- */

.ribbon-panel{
  /* Intérieur crème comme le reste de la page : c'est la route qui délimite
     le bloc. Bande rouge + marquage au sol crème, en vagues irrégulières,
     même esthétique que les routes encadrant le menu.
     C'est exactement la même route que celle qui encadre les 5 pastilles :
     bande de 13 sur 44 de hauteur, marquage 2.4 en pointillés 10/12.
     Seuls les points de raccord ont été ajustés pour refermer la boucle. */
  background:var(--cream);
  color:var(--text);
  padding:18px;
  border:34px solid transparent;
  border-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1252'%20height='1252'%20viewBox='0%200%201252%201252'%3E%3Cpath%20d='M%2044.0%2022%20C%20175.0%2022%20204.1%208%20335.0%209%20C%20480.5%2010%20495.1%2035%20640.6%2036%20C%20794.8%2037%20806.4%207%20946.1%209%20C%201068.3%2011%201085.8%2022%201208.0%2022%20A%2022%2022%200%200%201%201230%2044.0%20C%201230%20175.0%201244%20204.1%201243%20335.0%20C%201242%20480.5%201217%20495.1%201216%20640.6%20C%201215%20794.8%201245%20806.4%201243%20946.1%20C%201241%201068.3%201230%201085.8%201230%201208.0%20A%2022%2022%200%200%201%201208.0%201230%20C%201077.0%201230%201048.0%201244%20917.0%201243%20C%20771.5%201242%20757.0%201217%20611.4%201216%20C%20457.2%201215%20445.6%201245%20305.9%201243%20C%20183.7%201241%20166.2%201230%2044.0%201230%20A%2022%2022%200%200%201%2022%201208.0%20C%2022%201077.0%208%201048.0%209%20917.0%20C%2010%20771.5%2035%20757.0%2036%20611.4%20C%2037%20457.2%207%20445.6%209%20305.9%20C%2011%20183.7%2022%20166.2%2022%2044.0%20A%2022%2022%200%200%201%2044.0%2022%20Z'%20fill='none'%20stroke='%23CC0605'%20stroke-width='13'%20stroke-linejoin='round'/%3E%3Cpath%20d='M%2044.0%2022%20C%20175.0%2022%20204.1%208%20335.0%209%20C%20480.5%2010%20495.1%2035%20640.6%2036%20C%20794.8%2037%20806.4%207%20946.1%209%20C%201068.3%2011%201085.8%2022%201208.0%2022%20A%2022%2022%200%200%201%201230%2044.0%20C%201230%20175.0%201244%20204.1%201243%20335.0%20C%201242%20480.5%201217%20495.1%201216%20640.6%20C%201215%20794.8%201245%20806.4%201243%20946.1%20C%201241%201068.3%201230%201085.8%201230%201208.0%20A%2022%2022%200%200%201%201208.0%201230%20C%201077.0%201230%201048.0%201244%20917.0%201243%20C%20771.5%201242%20757.0%201217%20611.4%201216%20C%20457.2%201215%20445.6%201245%20305.9%201243%20C%20183.7%201241%20166.2%201230%2044.0%201230%20A%2022%2022%200%200%201%2022%201208.0%20C%2022%201077.0%208%201048.0%209%20917.0%20C%2010%20771.5%2035%20757.0%2036%20611.4%20C%2037%20457.2%207%20445.6%209%20305.9%20C%2011%20183.7%2022%20166.2%2022%2044.0%20A%2022%2022%200%200%201%2044.0%2022%20Z'%20fill='none'%20stroke='%23F3E7CD'%20stroke-width='2.4'%20stroke-dasharray='10%2012'%20stroke-linecap='round'/%3E%3C/svg%3E") 44 / 34px / 0 round;
}

@media (max-width:900px){
  .ribbon-panel{border-width:30px;border-image-width:30px;padding:14px;}
}

@media (max-width:640px){
  .ribbon-panel{border-width:22px;border-image-width:22px;padding:8px;}
}

.ribbon-panel h3{color:var(--red);}
/* Ne pas repeindre les liens qui portent déjà leur propre panneau :
   un texte rouge sur planche rouge est illisible, et le noir des panneaux
   blancs ne doit jamais virer au rouge. */
.ribbon-panel a:not(.btn):not(.cta-phone),
.ribbon-panel strong{color:var(--red);}

/* ---------- Boutons : les panneaux de bois ----------
   .btn          planche bordeaux, pour l'action (réserver, appeler)
   .btn-outline  planche à pointe, pour ce qui mène ailleurs (voir la carte)
   Le survol éclaircit la planche au lieu d'inverser les couleurs :
   une planche qui devient blanche ne ressemble plus à rien. */

.btn{
  display:inline-block;
  color:#fff;
  font-weight:800;
  padding:14px 30px;
  border:0;
  border-radius:4px;
  cursor:pointer;
  font-family:inherit;
  font-size:1rem;
  background-color:#70090E;
  background-image:var(--bois-rouge);
  background-repeat:repeat;
  background-size:883px 50px;
  box-shadow:4px 5px 0 rgba(58,51,48,.22);
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}

.btn:hover{filter:brightness(1.18);}
.btn:active{box-shadow:2px 2px 0 rgba(58,51,48,.22);transform:translate(2px,3px);}

.btn-outline{
  border-radius:0;
  padding:14px 44px 14px 28px;
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
  /* clip-path rogne l'ombre portée : on la refait avec un filtre */
  box-shadow:none;
  filter:drop-shadow(4px 5px 0 rgba(58,51,48,.22));
  background-position:-300px -17px;
}
.btn-outline:hover{filter:drop-shadow(4px 5px 0 rgba(58,51,48,.22)) brightness(1.18);}
.btn-outline:active{transform:translate(2px,3px);}

/* Deux panneaux qui se font face, centrés et écartés d'un centimètre.
   RÈGLE : dès qu'on propose DEUX choix, ils prennent chacun une pointe,
   l'une vers la gauche, l'autre vers la droite. Un choix unique reste une
   planche droite. Le carrefour se lit avant même qu'on ait lu les mots.
   38 px = 1 cm à l'écran (96 points par pouce). Le flex est nécessaire :
   en ligne, la pointe découpée fausse le centrage optique. */
.duo-fleches{
  display:grid;
  grid-template-columns:1fr 1fr;   /* deux moitiés égales */
  gap:38px;                        /* l'écart tombe donc pile au centre */
  align-items:center;
  margin-top:22px;
}
/* Chaque panneau se colle à l'écart : celui de gauche pousse vers la droite,
   celui de droite vers la gauche. C'est l'entre-deux qui est centré, et non
   la paire — sinon le panneau le plus long décale tout l'ensemble. */
.duo-fleches > :first-child{justify-self:end;}
.duo-fleches > :last-child {justify-self:start;}

@media (max-width:560px){
  .duo-fleches{grid-template-columns:1fr;gap:20px;}
  .duo-fleches > :first-child,
  .duo-fleches > :last-child{justify-self:center;}
}

/* Pointe à gauche. */
.btn-outline.btn-fleche-g{
  padding:14px 28px 14px 44px;
  clip-path:polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 50%);
}

/* Le numéro de téléphone : panneau blanc.
   Sur le camion, le blanc porte l'information forte — c'est sa fonction.
   Le numéro est l'information la plus forte du site. */
.cta-phone{
  /* 1,95rem × 0,71 — voir le bloc « géométrie des panneaux » en tête. */
  --c:1.3845rem;
  display:inline-block;
  font-family:'Nunito',sans-serif;
  font-weight:900;
  font-size:calc(var(--c) / var(--pan-cap));
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#111;
  padding:calc(var(--c) * var(--pan-haut))
          calc(var(--c) * var(--pan-cote))
          calc(var(--c) * var(--pan-bas));
  border:calc(var(--c) * var(--pan-filet)) solid transparent;
  border-radius:calc(var(--c) * var(--pan-filet));
  background-color:#CC0605;
  background-image:var(--bois-blanc), var(--bois-rouge);
  background-clip:padding-box, border-box;
  background-origin:padding-box, border-box;
  background-repeat:repeat, repeat;
  background-size:578px 95px, 883px 50px;
  /* Même veine barrée que sur .category-title : voir le commentaire détaillé
     à cet endroit. Cadre plus haut, donc décalage différent. */
  background-position:0 -55px, 0 0;
  box-shadow:0 0 0 2px rgba(255,255,255,.92) inset, 5px 6px 0 rgba(58,51,48,.22);
  text-shadow:0 1px 0 #fff;
}
.cta-phone:hover{filter:brightness(1.04);}
.cta-phone:active{box-shadow:0 0 0 3px rgba(255,255,255,.92) inset, 2px 3px 0 rgba(58,51,48,.22);transform:translate(3px,3px);}

@media (max-width:520px){
  .cta-phone{--c:1.065rem;
             background-position:0 -61px, 0 0;}
}

/* ---------- Cartes ---------- */

.card{
  background:var(--white);
  border:2px solid var(--cream-dark);
  border-radius:20px;
  padding:20px 22px;
  box-shadow:0 3px 10px rgba(0,0,0,.06);
}

.news-box{
  background:var(--cream-dark);
  border-left:6px solid var(--red);
  border-radius:10px;
  padding:16px 20px;
}

/* ---------- Carte des pizzas ---------- */

.menu-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:18px;
}

.menu-item h3{
  margin:0 0 6px;
  color:var(--red);
  font-size:1.1rem;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
}

.menu-item h3 .name{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;}
.menu-item h3 .price{white-space:nowrap;}

.menu-item p{margin:0;font-size:.92rem;}
/* Les ingrédients ajoutés après cuisson sont des ingrédients comme les
   autres : même police, même corps, même couleur que la ligne du dessus
   (client, 25/08/2026). Avant, ils étaient en italique, plus petits et
   grisés — ils se lisaient comme une note de bas de page alors que c'est
   souvent ce qui fait la pizza.
   Seule la mention « Après cuisson » se distingue, et elle se distingue
   comme sur le menu papier : soulignée. */
.menu-item p.cuisson{margin-top:5px;}
.cuisson-mention{text-decoration:underline;text-underline-offset:.18em;}

/* Titre de catégorie : panneau blanc, cadre RAL 3020.
   Deux fonds sur un seul élément — le bois blanc s'arrête à l'intérieur du
   cadre (padding-box), le bois rouge occupe tout, cadre compris (border-box).
   La bordure est transparente pour laisser voir la couche du dessous. */
/* ============================================================
   LES PANNEAUX BLANCS — proportions relevées sur un vrai
   panneau d'agglomération (celui de Palaiseau, mesuré au pixel).
   Tout est exprimé en hauteur de capitale, notée « c » :

       hauteur du cadre .... 2,67 c   → capitales = 37 % du panneau
       filet rouge ......... 0,31 c
       rayon des coins ..... 0,31 c   (autant que le filet)
       marge filet→lettre .. 0,56 c en haut, 0,58 c sur les côtés
       chasse par lettre ... 0,94 c   → interlettrage large

   Avec Nunito 900, capitale = 0,71 x taille de police.
   Le filet rouge est un aplat RAL 3020 posé EN RETRAIT : sur un vrai
   panneau, la plaque blanche déborde du cadre. C'est ce liseré blanc
   extérieur qui fait qu'on reconnaît un panneau de ville et pas un
   simple encadré.
   ============================================================ */
.category-title{
  /* Hauteur de capitale : 1,75rem × 0,71. Exprimée en rem pour que le
     panneau suive la taille de texte choisie par le visiteur. */
  --c:1.2425rem;
  display:inline-block;
  /* Le panneau est centré entre ce qui le précède et ce qui le suit.
     Avant : 56 px au-dessus (la marge de .category-block) et 30 px en
     dessous — le panneau penchait vers le bas de son intervalle. Les deux
     valeurs passent à 46 px, qui est déjà le rythme général des sections
     du site (section{margin-bottom:46px}), donc le premier panneau de la
     page se centre lui aussi sans traitement à part. */
  margin:0 0 46px;
  font-weight:900;
  font-size:calc(var(--c) / var(--pan-cap));
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#111;
  padding:calc(var(--c) * var(--pan-haut))
          calc(var(--c) * var(--pan-cote))
          calc(var(--c) * var(--pan-bas));
  border:calc(var(--c) * var(--pan-filet)) solid transparent;
  border-radius:calc(var(--c) * var(--pan-filet));
  background-color:#CC0605;
  background-image:var(--bois-blanc), var(--bois-rouge);
  background-clip:padding-box, border-box;
  background-origin:padding-box, border-box;
  background-repeat:repeat, repeat;
  background-size:578px 95px, 883px 50px;
  /* ---- Correction de la planche barrée ----
     bois-blanc.png fait 95 px de haut et porte des veines sombres aux lignes
     12-13, 19, 38, 58, 64 et 86. Un cadre de 41 px n'en montrait que le haut :
     la veine des lignes 12-13 tombait pile au milieu des lettres et le mot
     paraissait BARRÉ — soit, en signalisation routière, un panneau de SORTIE
     d'agglomération.

     Le décalage vertical amène sous les lettres la zone la plus claire de la
     planche. La planche N'EST PAS étirée : background-size est inchangé,
     conformément à la règle posée en tête de fichier.
     Seule la couche blanche est décalée ; le filet rouge reste à 0 0.

     Chaque cadre a sa propre hauteur, donc son propre décalage : une valeur
     unique remettrait une veine au milieu de l'un ou de l'autre. */
  background-position:0 -58px, 0 0;
  box-shadow:0 0 0 2px rgba(255,255,255,.92) inset, 5px 6px 0 rgba(58,51,48,.22);
  text-shadow:0 1px 0 #fff;
}

/* Débordement horizontal : à 1.75rem, « INCONTOURNABLES » mesure 372 px de
   large. Sur un écran de 360 ou 320 px, la page se met à défiler
   latéralement. Même seuil que .panneau-ville, qui a le même problème. */
@media (max-width:560px){
  .category-title{
    /* Seul --c change : les paddings, le filet et le rayon suivent. */
    --c:.8875rem;
    letter-spacing:.03em;
    max-width:100%;
    /* Le cadre devient plus bas : la fenêtre visible sur la planche change,
       le décalage aussi. */
    background-position:0 -62px, 0 0;
  }
}

/* Même valeur que la marge basse du panneau : voir .category-title. */
.category-block{margin-bottom:46px;}

/* Tag Végé — inchangé, seule la position a bougé (à droite du nom) */
.tag-vege{
  display:inline-block;
  background:#4c8c46;
  color:#fff;
  font-size:.7rem;
  font-weight:800;
  padding:1px 8px;
  border-radius:10px;
  vertical-align:middle;
}

/* Piments */
.pizza-icon{color:var(--red);}
.hot{display:inline-flex;gap:1px;align-items:center;}

/* ---------- Tournée ---------- */

.tournee-list{list-style:none;margin:0;padding:0;}

.tournee-item{
  display:flex;align-items:center;gap:16px;
  background:var(--white);
  border:2px solid var(--cream-dark);
  border-radius:16px;
  padding:14px 18px;
  margin-bottom:12px;
  flex-wrap:wrap;
}

.day-badge{
  background:var(--white);
  color:var(--red);
  border:3px solid var(--red);
  border-radius:30px;
  font-weight:800;
  padding:6px 18px;
  min-width:118px;
  text-align:center;
  flex-shrink:0;
  line-height:1.2;
}

/* ============================================================
   PANNEAU DE VILLE
   Le nom de la commune est écrit comme sur le panneau qu'on croise
   en voiture en arrivant chez soi. Même construction que les autres
   panneaux blancs, en plus petit — le rapport capitales / hauteur
   reste autour de 45 %, c'est lui qui fait la ressemblance.
   ============================================================ */
.panneau-ville{
  /* 1,15rem × 0,71. Voir le bloc « géométrie des panneaux » en tête de
     fichier : c'est la capitale qu'on centre, pas la boîte de texte. */
  --c:.8165rem;
  display:inline-block;
  font-weight:900;
  font-size:calc(var(--c) / var(--pan-cap));
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#111;
  padding:calc(var(--c) * var(--pan-haut))
          calc(var(--c) * var(--pan-cote))
          calc(var(--c) * var(--pan-bas));
  border:calc(var(--c) * var(--pan-filet)) solid transparent;
  border-radius:calc(var(--c) * var(--pan-filet));
  background-color:#CC0605;
  background-image:var(--bois-blanc), var(--bois-rouge);
  background-clip:padding-box, border-box;
  background-origin:padding-box, border-box;
  background-repeat:repeat, repeat;
  /* Même correction que sur .category-title, voir le commentaire là-haut :
     sans elle, la veine sombre traversait le nom de la commune et affichait
     « GIF s/ YVETTE » barré — le panneau de SORTIE de ville. Le site annonçait
     ainsi ses six arrêts tous barrés. */
  background-size:578px 95px, 883px 50px;
  background-position:0 -83px, 0 0;
  box-shadow:0 0 0 2px rgba(255,255,255,.92) inset, 3px 4px 0 rgba(58,51,48,.20);
  text-shadow:0 1px 0 #fff;
}

/* Les noms longs — Saint-Rémy-lès-Chevreuse — ne doivent pas déborder. */
@media (max-width:520px){
  .panneau-ville{
    --c:.6745rem;
    /* Panneau plus bas : autre fenêtre visible sur la planche, autre décalage. */
    background-position:0 -41px, 0 0;
  }
}

.tournee-item .place{flex:1;min-width:220px;}
.tournee-item .place .panneau-ville{margin-bottom:5px;}

/* ============================================================
   LE PANNEAU DE VILLE EST UN LIEN VERS L'ITINÉRAIRE
   Ajouté le 12/08/2026, à la demande du client. Sur la page Tournée comme
   dans les prochains arrêts de l'accueil, cliquer le nom de la commune
   ouvre Google Maps sur le point exact du stationnement.

   Pourquoi c'est juste : un panneau de ville, dans la vraie vie, c'est ce
   qu'on suit pour arriver quelque part. Le geste est deviné avant d'être
   expliqué. Et sur l'accueil, c'était jusqu'ici le seul bloc du site qui
   parlait de lieux sans offrir un seul moyen d'y aller.

   Le bouton « Itinéraire » de la page Tournée est conservé : tout le monde
   ne devine pas qu'une image est cliquable, et il porte le mot en clair.
   Les deux mènent au même endroit, ce n'est pas un problème.

   Le lien n'apporte AUCUNE décoration : ni soulignement, ni changement de
   couleur. Le panneau doit rester un panneau. Le seul signal est
   l'enfoncement au toucher, comme un vrai bouton-poussoir.
   ============================================================ */
.lien-panneau{
  display:inline-block;
  text-decoration:none;
  color:inherit;
  /* Le panneau porte déjà une ombre portée ; on l'anime légèrement. */
  transition:transform .12s ease, filter .12s ease;
}

.lien-panneau:hover{filter:brightness(1.04);}

/* Au clic, le panneau s'enfonce de 2 px vers son ombre — même geste que
   les boutons en planche du site. */
.lien-panneau:active{transform:translate(2px,2px);}

/* Contour de focus au clavier : sans lui, un utilisateur au clavier ne
   saurait pas où il est, puisque le lien n'a aucune autre marque. */
.lien-panneau:focus-visible{
  outline:3px solid var(--red);
  outline-offset:3px;
  border-radius:5px;
}

/* Les vrais panneaux traitent les particules de deux façons — relevé sur les
   photos de Gif, Gometz et Saint-Rémy :

   .exposant   plus petit ET surélevé, en bas de casse : GIF s/ YVETTE, St RÉMY
   .particule  plus petit seulement, sur la ligne, en petites capitales :
               GOMETZ le CHATEL, St RÉMY lès CHEVREUSE

   Cernay-la-Ville n'a ni l'un ni l'autre : traits d'union, tout de la même
   taille. On suit le panneau de chaque commune, pas une règle unique. */
.panneau-ville .exposant{
  font-size:.60em;
  vertical-align:.42em;
  text-transform:none;
  letter-spacing:0;
}
.panneau-ville .particule{
  font-size:.72em;
  letter-spacing:.03em;
}
.tournee-item .hours{font-weight:800;color:var(--red);white-space:nowrap;}

.tournee-item .map-link{
  font-size:.85rem;font-weight:800;
  color:var(--red);
  border:2px solid var(--red);
  border-radius:20px;
  padding:4px 12px;white-space:nowrap;
}

.tournee-item .map-link:hover{background:var(--red);color:var(--white);}

/* ---------- Contact / formulaires ---------- */

.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;}
@media (max-width:720px){.contact-grid{grid-template-columns:1fr;}}

form.contact-form label{
  display:block;font-weight:800;margin:14px 0 6px;color:var(--red);
}

form.contact-form input,
form.contact-form textarea,
form.contact-form select{
  width:100%;padding:10px 12px;
  border:2px solid var(--cream-dark);
  border-radius:10px;
  font-family:inherit;font-size:1rem;
  background:var(--white);color:var(--text);
}

form.contact-form input:focus,
form.contact-form textarea:focus,
form.contact-form select:focus{outline:2px solid var(--red);border-color:var(--red);}

form.contact-form textarea{min-height:120px;resize:vertical;}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:560px){.form-row{grid-template-columns:1fr;}}

.social-row{display:flex;gap:12px;margin-top:14px;}

.social-row a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  background:var(--white);color:var(--red);
  border:2px solid var(--red);border-radius:50%;font-weight:800;
}

.social-row a:hover{background:var(--red);color:var(--white);}

/* ---------- Étapes (page Événements) ---------- */

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;}

.step{
  background:var(--white);
  border:2px solid var(--cream-dark);
  border-radius:20px;
  padding:20px;text-align:center;
}

.step .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--red);color:var(--white);
  font-weight:800;font-size:1.2rem;margin-bottom:10px;
}

.step h3{margin:0 0 6px;color:var(--red);font-size:1.05rem;}
.step p{margin:0;font-size:.92rem;}

/* ---------- Pied de page ---------- */

body > footer{
  background:var(--red);
  color:var(--cream);
  text-align:center;
  padding:24px 18px;
  font-size:.9rem;
}

body > footer a{font-weight:800;color:var(--white);}

/* ============================================================
   PIED DE PAGE — trois colonnes
   Avant : trois lignes de signature, aucun lien interne, aucune
   commune. C'est pourtant le seul bloc présent sur les six pages :
   l'endroit le moins cher pour dire où le camion s'arrête et pour
   relier les pages entre elles.
   Sur mobile, les colonnes se mettent d'elles-mêmes les unes sous
   les autres — pas de media query à tenir à jour.
   ============================================================ */
.footer-cols{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px 48px;
  max-width:1000px;
  margin:0 auto 22px;
  text-align:left;
}

.footer-col{flex:1 1 220px;max-width:300px;}

.footer-col h2{
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin:0 0 8px;
  color:var(--cream);
  opacity:.85;
  font-weight:800;
}

.footer-col ul{list-style:none;margin:0;padding:0;}

/* 34 px de haut : les liens du pied de page se touchent au pouce sans
   se marcher dessus. */
.footer-col li{margin:0;line-height:1.45;}
.footer-col li a{display:inline-block;padding:5px 0;}

/* Le jour, devant la commune, en crème plus discret : c'est un repère,
   pas un lien. */
.footer-jour{opacity:.8;font-weight:400;}

.footer-bas{
  border-top:1px solid rgba(243,231,205,.35);
  padding-top:16px;
  margin-top:4px;
}

/* ============================================================
   COMMANDE — barre fixe mobile, bloc en flux, règle horaire
   Charte : un seul rouge #CC0605, aucune couleur nouvelle.
   ============================================================ */

.order-rule{
  font-size:.95rem;
  margin:0 0 14px;
}
.order-rule strong{color:var(--red);}
.order-rule-center{text-align:center;margin:0 0 18px;}

.order-inline{
  background:var(--white);
  border:2px solid var(--cream-dark);
  border-radius:20px;
  padding:20px 22px;
  text-align:center;
  box-shadow:0 3px 10px rgba(0,0,0,.06);
}

.order-inline-title{
  font-family:'Kaushan Script',cursive;
  font-size:1.7rem;
  color:var(--red);
  margin:0 0 8px;
}


/* ---------- Barre fixe : mobile uniquement ---------- */

.order-bar{display:none;}

@media (max-width:720px){
  .order-bar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:10px;
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:900;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:var(--cream);
    border-top:4px solid var(--red);
    box-shadow:0 -4px 14px rgba(0,0,0,.12);
  }

  /* Les deux boutons font au moins 48 px de haut, seuil recommandé pour une
     cible tactile (44 px Apple, 48 px Google). Le bouton Messenger les
     atteignait déjà ; le bouton d'appel, lui, ne faisait que 34 px — c'était
     la plus petite cible du site pour l'action la plus rentable. */
  .order-bar-btn{
    flex:1 1 0;
    min-width:120px;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
    font-weight:800;
    padding:13px 10px;
    border-radius:4px;
    border:0;
    background-color:#70090E;
    background-image:var(--bois-rouge);
    background-repeat:repeat;
    background-size:883px 50px;
    text-shadow:0 1px 2px rgba(0,0,0,.45);
  }

  /* Le bouton d'appel de la barre fixe est un panneau blanc : mêmes
     proportions que les autres, calées sur le panneau de Palaiseau. */
  /* Pour atteindre 48 px sans casser les proportions relevées sur le panneau
     de Palaiseau, tout se déduit d'un seul --c : un panneau mesure 2,67 c de
     haut, donc c = 48 ÷ 2,67. La police, les paddings, le filet et le rayon
     suivent. Le panneau grandit, ses proportions ne bougent pas.

     CORRIGÉ LE 25/08/2026 : les valeurs précédentes (1.34rem / 6.6px) ne
     donnaient en réalité que 40,6 px. C'est min-height:48px qui rattrapait
     la différence, en étirant le panneau sans étirer ses proportions —
     la capitale ne faisait plus que 32 % du panneau au lieu de 37 %, et
     align-items:center recentrait la boîte de texte, ce qui annulait le
     rattrapage du bas. Le panneau fait maintenant ses 48 px tout seul. */
  .order-bar-btn-alt{
    --c:calc(48px / 2.67);
    color:#111;
    text-transform:uppercase;
    letter-spacing:.05em;
    font-size:calc(var(--c) / var(--pan-cap));
    line-height:1;
    padding:calc(var(--c) * var(--pan-haut))
            calc(var(--c) * var(--pan-cote))
            calc(var(--c) * var(--pan-bas));
    border:calc(var(--c) * var(--pan-filet)) solid transparent;
    border-radius:calc(var(--c) * var(--pan-filet));
    background-color:#CC0605;
    background-image:var(--bois-blanc), var(--bois-rouge);
    background-clip:padding-box, border-box;
    background-origin:padding-box, border-box;
    background-size:578px 95px, 883px 50px;
    /* Même veine barrée que sur .category-title. « APPELER » est le dernier
       mot que voit un mobile : il ne peut pas être rayé. */
    background-position:0 -61px, 0 0;
    box-shadow:0 0 0 2px rgba(255,255,255,.92) inset;
    text-shadow:0 1px 0 #fff;
  }

  .order-bar-note{
    flex:1 1 100%;
    margin:0;
    text-align:center;
    font-size:.78rem;
    line-height:1.3;
  }

  /* Réserve la hauteur de la barre pour ne rien masquer en bas de page. */
  body{padding-bottom:112px;}

  /* Les liens du pied de page faisaient 20 px de haut à viser. Le padding est
     posé sur des éléments restés « inline » : la zone tactile grandit, la
     mise en page du pied de page ne bouge pas d'un pixel. */
  body > footer a{padding:10px 4px;}
}

/* ---------- Bouton Réserver sur la page Tournée ---------- */

/* Petite planche : même famille que les boutons, en plus discret. */
.tournee-item .resa-link{
  font-size:.85rem;font-weight:800;
  color:#fff;
  border:0;
  border-radius:3px;
  padding:6px 14px;white-space:nowrap;
  background-color:#70090E;
  background-image:var(--bois-rouge);
  background-repeat:repeat;
  background-size:883px 50px;
  box-shadow:3px 3px 0 rgba(58,51,48,.20);
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.tournee-item .resa-link:hover{filter:brightness(1.18);}

/* ---------- Cibles tactiles de la page Tournée ----------
   « Itinéraire » et « Réserver » mesuraient 33 px de haut : sous le seuil de
   44 px (Apple) et de 48 px (Google). Ce sont les deux liens les plus utiles
   de la page — celui qui lance le GPS et celui qui déclenche la commande.
   Le reste du site était déjà au bon gabarit ; ces douze-là avaient été
   oubliés. La largeur ne bouge pas, seule la hauteur de la zone touchable. */
@media (max-width:720px){
  .tournee-item .map-link,
  .tournee-item .resa-link{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
  }
}

/* ============================================================
   AVIS GOOGLE
   ============================================================ */

.avis-box{
  background:var(--white);
  border:2px solid var(--cream-dark);
  border-left:6px solid var(--red);
  border-radius:20px;
  padding:20px 24px;
  text-align:center;
}

/* ============================================================
   LES PIZZAS DU MOMENT
   Contenu injecté depuis data/pizzas-du-moment.js.
   ============================================================ */

.pdm-une{
  display:flex;
  gap:22px;
  align-items:center;
  flex-wrap:wrap;
}

.pdm-photo{
  width:280px;
  max-width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:16px;
  border:3px solid var(--red);
  flex:0 0 auto;
}

.pdm-texte{flex:1 1 260px;min-width:0;}


.pdm-nom{
  margin:2px 0 10px;
  font-size:2rem;
  color:var(--red);
  font-weight:400;
}

.pdm-description{margin:0 0 12px;}

.pdm-prix{
  margin:0 0 16px;
  font-weight:800;
  font-size:1.25rem;
  color:var(--red);
}

/* Toutes les pizzas du moment sont présentées à l'identique : une liste de
   cartes .pdm-une empilées. Les anciennes règles .pdm-autres / .pdm-autre,
   qui affichaient une pizza en grand et les autres en petit, ont été
   retirées le 25/08/2026. */
.pdm-liste{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:22px;
}

@media (max-width:640px){
  .pdm-une{gap:16px;}
  .pdm-nom{font-size:1.7rem;}
}

/* ============================================================
   PHOTO ENCADRÉE PAR LA ROUTE
   Reprise du prospectus 2022 : la photo est découpée dans un
   contour organique et la route en fait le tour.
   Contour et tracé partagent exactement le même chemin, défini
   une fois dans le <svg> masqué en tête de page (#route-blob).
   ============================================================ */

.photo-route{
  position:relative;
  margin:0;
  line-height:0;
  flex:0 0 auto;
}

.photo-route img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  clip-path:url(#route-blob);
}

.photo-route-trace{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;
  overflow:visible;
}

.photo-route-trace path{fill:none;vector-effect:non-scaling-stroke;}
.photo-route-bande{stroke:var(--red);stroke-width:12;stroke-linejoin:round;}
.photo-route-marquage{stroke:var(--cream);stroke-width:3;stroke-dasharray:9 11;stroke-linecap:round;}

/* Photo à gauche, texte à droite — s'empile sur mobile. */
.duo-route{
  display:flex;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
}

/* Chaque photo garde le format de son original : rien n'est recadré par le
   navigateur, on voit tout ce que montrait le prospectus. */
.duo-route .photo-route{width:480px;max-width:100%;aspect-ratio:4/3;}
.duo-route .photo-labo{aspect-ratio:745/460;}
.duo-route .photo-patons{aspect-ratio:597/522;}
.duo-route .duo-texte{flex:1 1 280px;min-width:0;}
.duo-route .duo-texte h3{
  font-family:'Kaushan Script',cursive;
  font-size:1.8rem;
  color:var(--red);
  margin:0 0 10px;
  font-weight:400;
}
.duo-route.duo-inverse{flex-direction:row-reverse;}

@media (max-width:760px){
  .duo-route,.duo-route.duo-inverse{flex-direction:column;text-align:center;gap:18px;}
  .duo-route .photo-route{width:100%;max-width:480px;}
}

/* La photo de la pizza du moment reprend le même cadre. */
.pdm-une .photo-route{width:300px;max-width:100%;aspect-ratio:1/1;}

/* ============================================================
   LE MOT DE L'ÉQUIPE
   Le logo y figure en entier : médaillon ET les deux traits
   horizontaux, qui en font partie intégrante. Jamais dissociés,
   jamais recadrés.
   ============================================================ */

.mot-equipe{
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  background:var(--white);
  border:2px solid var(--cream-dark);
  border-radius:20px;
  padding:26px 28px;
  box-shadow:0 3px 10px rgba(0,0,0,.06);
}

/* Le logo hors en-tête : mêmes proportions, sans l'animation d'entrée. */
.embleme-inline{
  position:relative;
  width:min(240px,60vw);
  aspect-ratio:900/447;
  flex:0 0 auto;
}

.embleme-inline img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.mot-equipe-corps{flex:1 1 280px;min-width:0;}

.mot-equipe-titre{
  font-family:'Kaushan Script',cursive;
  font-size:1.8rem;
  color:var(--red);
  margin:0 0 10px;
  font-weight:400;
}

.mot-equipe-texte{
  margin:0;
  padding:0 0 0 16px;
  border-left:4px solid var(--red);
}

.mot-equipe-texte p{margin:0;font-size:1.05rem;}

.mot-equipe-signature{
  margin:10px 0 0 16px;
  font-size:1.4rem;
  color:var(--red);
}

@media (max-width:700px){
  .mot-equipe{flex-direction:column;text-align:center;gap:16px;}
  .mot-equipe-texte{border-left:0;border-top:4px solid var(--red);padding:14px 0 0;}
  .mot-equipe-signature{margin:10px 0 0;}
}

/* ============================================================
   ACCESSIBILITÉ CLAVIER
   Ajouté le 10/08/2026. Rien de visible à la souris : ces règles
   n'apparaissent qu'au moment où quelqu'un navigue au clavier.
   ============================================================ */

/* Avant, seuls les champs de formulaire montraient où se trouvait le
   curseur. Les liens, les boutons-panneaux, le numéro de téléphone et la
   barre fixe n'avaient aucun repère : leur contour par défaut est effacé
   par les clip-path et les filter de la charte.
   :focus-visible ne se déclenche qu'au clavier, jamais au clic. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--text);
  outline-offset:3px;
  border-radius:3px;
}

/* Lien d'évitement : première chose que rencontre la tabulation, il permet
   de sauter l'en-tête et la navigation, qui se répètent sur les 5 pages.
   Invisible tant qu'il n'a pas le focus. */
.skip-link{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}

.skip-link:focus{
  position:fixed;
  left:12px;top:12px;
  width:auto;height:auto;
  z-index:1000;
  background:var(--white);
  color:var(--red);
  font-weight:800;
  padding:12px 18px;
  border:3px solid var(--red);
  border-radius:6px;
  box-shadow:0 3px 10px rgba(0,0,0,.25);
}

main:focus{outline:none;}

/* ============================================================
   PAGES LÉGALES — mentions légales et confidentialité
   Ajouté le 10/08/2026. Aucune couleur nouvelle, aucune police
   nouvelle : le rouge RAL 3020 et Nunito, comme partout ailleurs.
   ============================================================ */

.texte-legal{max-width:760px;margin:0 auto;}

.texte-legal h2{
  font-family:'Kaushan Script',cursive;
  color:var(--red);
  font-size:1.5rem;
  margin:38px 0 12px;
}

.texte-legal p{margin:0 0 12px;}
.texte-legal ul{margin:0 0 12px;padding-left:22px;}
.texte-legal li{margin-bottom:6px;}
.texte-legal a{color:var(--red);font-weight:700;text-decoration:underline;}

/* La fiche d'identité de l'entreprise : deux colonnes en desktop,
   l'étiquette puis la valeur en dessous sur téléphone. */
.fiche-legale{
  display:grid;
  grid-template-columns:minmax(160px,auto) 1fr;
  gap:8px 20px;
  margin:0;
  background:var(--white);
  border:2px solid var(--cream-dark);
  border-radius:20px;
  padding:20px 22px;
}
.fiche-legale dt{font-weight:800;color:var(--red);}
.fiche-legale dd{margin:0;}

@media (max-width:560px){
  .fiche-legale{grid-template-columns:1fr;gap:2px;}
  .fiche-legale dd{margin-bottom:12px;}
}

.bloc-adresse{
  background:var(--white);
  border-left:4px solid var(--red);
  border-radius:0 12px 12px 0;
  padding:14px 18px;
  line-height:1.5;
}

.table-legale{
  width:100%;
  border-collapse:collapse;
  background:var(--white);
  border:2px solid var(--cream-dark);
  border-radius:20px;
  overflow:hidden;
  margin:0 0 12px;
  font-size:.94rem;
}
.table-legale th{
  background:var(--cream-dark);
  text-align:left;
  padding:10px 14px;
  font-weight:800;
}
.table-legale td{
  padding:10px 14px;
  border-top:1px solid var(--cream-dark);
  vertical-align:top;
}

/* Sur téléphone, un tableau à quatre colonnes devient illisible :
   on le fait défiler horizontalement plutôt que de l'écraser. */
@media (max-width:600px){
  .table-legale{display:block;overflow-x:auto;white-space:normal;}
}

.date-maj{margin-top:34px;font-size:.88rem;font-style:italic;opacity:.75;}

/* Liens légaux du pied de page — discrets, mais présents partout */
.footer-legal{font-size:.82rem;opacity:.9;margin-top:10px;}

/* ---------- Case de consentement des formulaires ---------- */

.consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:18px;
  font-size:.9rem;
  line-height:1.4;
  cursor:pointer;
}

.consent input[type="checkbox"]{
  /* 20 px et non la taille par défaut : la case doit être visible et
     confortable à cocher au doigt. */
  width:20px;height:20px;
  margin:2px 0 0;
  flex:0 0 auto;
  accent-color:var(--red);
  cursor:pointer;
}

.consent a{color:var(--red);font-weight:800;text-decoration:underline;}

/* ============================================================
   LOT 2 — 10 août 2026
   Agencement de l'accueil, bandeau d'avis, grande commande.
   Ces règles venaient des fichiers d'aperçu, validées par le client.
   ============================================================ */
.hero-titre-champion{
  display:block;text-align:center;margin:0 0 22px;
}
.hero-champion-annee{
  display:inline-block;font-family:'Kaushan Script',cursive;
  color:var(--red);font-size:1.45rem;line-height:1.2;
}
.hero-champion-detail{
  display:block;font-size:.95rem;margin-top:2px;
}

/* --- Les prochains arrêts (aperçu de la tournée, pas la tournée entière) --- */
.arrets-teaser{list-style:none;margin:0;padding:0;}
.arrets-teaser .tournee-item{margin-bottom:10px;}
.arrets-teaser .tournee-item[hidden]{display:none;}

/* La pastille « Aujourd'hui » / « Demain » (.arret-quand) a été supprimée le
   11/08 : le nom du jour figure déjà dans la pastille de gauche. */

/* ------------------------------------------------------------------
   ALIGNEMENT SUR GRAND ÉCRAN — demandé le 11/08, étendu le 12/08.

   Par défaut, .tournee-item centre verticalement ses colonnes. Or celle du
   milieu tient sur deux lignes (le panneau de ville, puis l'adresse) : le
   panneau se retrouvait plus haut que la pastille du jour, et l'œil voyait
   deux lignes décalées.

   On aligne par le haut et on donne la même hauteur à la pastille du jour,
   au panneau de ville et à l'horaire. Cette hauteur est celle du panneau,
   qu'on ne touche pas : ses proportions sont relevées au pixel sur un vrai
   panneau d'agglomération (voir CONTEXTE.md). C'est la pastille du jour qui
   vient s'y conformer, pas l'inverse.

   S'applique aux DEUX listes — les prochains arrêts de l'accueil et la
   tournée complète — puisqu'elles partagent la classe .tournee-item.

   Uniquement au-dessus de 720 px : sur mobile les colonnes passent à la
   ligne et l'alignement n'a plus de sens.
   ------------------------------------------------------------------ */
:root{
  /* Hauteur commune de la ligne « jour · panneau · horaire · boutons ». */
  --h-ligne-arret:35px;
  /* Écart entre le jour et le panneau, EN PLUS du gap de 16 px de
     .tournee-item. Total : 16 + 34 = 50 px. Porté de 18 à 34 px le 12/08,
     à la demande du client : le jour et la commune se touchaient. */
  --ecart-jour-panneau:34px;
  /* Largeur fixe de la colonne horaire. C'est elle qui aligne les boutons
     d'une ligne à l'autre — voir l'explication ci-dessous. */
  --l-horaire:130px;
}

/* ------------------------------------------------------------------
   RÉVISION DU 12/08/2026 — les lignes paraissaient décalées sur ordinateur.

   DEUX CAUSES, toutes les deux corrigées ici.

   1. LES BOUTONS FLOTTAIENT À UNE HAUTEUR DIFFÉRENTE À CHAQUE LIGNE.
      « Itinéraire » et « Réserver » étaient en align-self:center, donc
      centrés sur la HAUTEUR DE LEUR LIGNE. Or cette hauteur change d'une
      ligne à l'autre : l'adresse de Palaiseau — « Plateau de Saclay,
      quartier École polytechnique et Thales » — tient sur deux lignes là
      où « Parking rue des Moulins » en occupe une. Les boutons de cette
      ligne descendaient donc de 12 px par rapport aux autres. C'est ça
      qu'on voyait.

   2. LA COLONNE HORAIRE N'AVAIT PAS DE LARGEUR FIXE.
      « 11h30 – 14h » est plus large que « 18h – 21h ». Comme l'horaire
      pousse les deux boutons vers la droite, ceux-ci se décalaient de
      quelques pixels selon la ligne. Une largeur fixe de 130 px les
      remet en colonne.

   LE PRINCIPE RETENU : UNE SEULE LIGNE D'ARRÊT.
   Les cinq éléments — jour, commune, horaire, itinéraire, réserver —
   partagent désormais la même hauteur de 35 px et le même bord haut. Seule
   l'adresse déborde en dessous, ce qui est sa place. Quelle que soit la
   longueur de l'adresse, la ligne du haut est identique partout.

   L'horaire passe de 1 rem à 1,1 rem : c'est, avec le jour, l'information
   qu'on vient chercher sur cette page.

   Uniquement au-dessus de 720 px : sur mobile les colonnes passent à la
   ligne et l'alignement n'a plus de sens.
   ------------------------------------------------------------------ */
@media (min-width:721px){
  .tournee-item{align-items:flex-start;}

  /* Les cinq éléments de la ligne d'arrêt, à la même hauteur et au même
     bord haut. Les boutons sont dans la liste depuis le 12/08 — c'était
     leur absence qui créait le décalage. */
  .tournee-item > .day-badge,
  .tournee-item > .place .panneau-ville,
  .tournee-item > .hours,
  .tournee-item > .map-link,
  .tournee-item > .resa-link{
    min-height:var(--h-ligne-arret);
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    align-self:flex-start;
  }

  /* Espace demandé entre le jour de la semaine et le panneau de ville. */
  .tournee-item > .day-badge{margin-right:var(--ecart-jour-panneau);}

  /* Le panneau est déjà à sa hauteur naturelle : on réduit seulement la
     marge qui le séparait de l'adresse en dessous. */
  .tournee-item > .place .panneau-ville{margin-bottom:2px;}

  /* min-height et non height : deux pastilles tiennent sur deux lignes —
     « Vendredi / midi » et « Vendredi / soir ». Une hauteur fixe les ferait
     déborder. Leur bord haut reste aligné sur le panneau. */

  /* La colonne horaire : largeur fixe, texte centré, un cran plus gros. */
  .tournee-item > .hours{
    min-width:var(--l-horaire);
    font-size:1.1rem;
  }
}

/* --- Repli du lien e-mail (page Événements et page Contact) ---
   Le lien mailto: n'ouvre rien sur un ordinateur sans logiciel de messagerie.
   Ce paragraphe doit donc se lire AVANT le clic, sans crier non plus : il
   s'adresse à une minorité de visiteurs. Fond crème, filet rouge à gauche. */
.repli-mail{
  margin-top:20px;
  padding:12px 16px;
  background:var(--cream);
  border-left:4px solid var(--red);
  border-radius:0 8px 8px 0;
  font-size:.92rem;
  line-height:1.5;
}

/* ============================================================
   CARTE — pleine largeur sur mobile
   Ajouté le 12/08/2026. Le client a constaté qu'à l'ouverture, la carte
   montrait Nanterre et Dourdan pour six arrêts distants de 20 km.

   CE N'EST PAS UN RÉGLAGE DE ZOOM, C'EST UN PROBLÈME DE LARGEUR.
   Leaflet ne choisit pas un zoom : il prend le plus grand qui fasse tenir
   tous les marqueurs dans le conteneur. Les chiffres, à la latitude 48,7° :

     étendue réelle des six arrêts        16,72 km d'est en ouest
     zoom 12 →  25,2 m par pixel     il faudrait 663 px
     zoom 11 →  50,4 m par pixel     il faudrait 331 px
     zoom 10 → 100,9 m par pixel     il suffit de 166 px  ← ce qu'on voyait

   Et la place disponible, à 390 px d'écran :

     viewport                                     390 px
     − padding de main (18 px de chaque côté)   =  354 px
     − encadré .card (8 px) et son filet (2 px) =  334 px
     − marge de sécurité de fitBounds (2 × 20)  =  294 px

   294 < 331 : le zoom 11 était impossible, Leaflet tombait au 10. Aucun
   réglage de `maxZoom` n'y changeait quoi que ce soit — la contrainte est
   la largeur du conteneur, pas le plafond de zoom.

   LA CORRECTION : sortir la carte de la colonne de texte sous 720 px. La
   carte occupe alors toute la largeur de l'écran, l'encadré et ses marges
   disparaissent, et il reste 374 px utiles à 390 px d'écran — le zoom 11
   passe. La marge de fitBounds est descendue à 8 px dans tournee.html.

   Ça tient jusqu'à environ 345 px de large. En dessous (iPhone SE de
   première génération, 320 px), la carte repassera au zoom 10 : 17 km ne
   tiennent pas sur 5 cm, il n'y a pas de solution honnête à cela.

   Effet de bord assumé : sur mobile la carte touche les deux bords de
   l'écran, sans coins arrondis. C'est la convention des cartes sur
   téléphone, et elle se lit mieux ainsi.
   ============================================================ */
/* Dimensions de base de la carte. Elles étaient écrites en style="" dans
   tournee.html : un style en ligne l'emporte sur toute règle de feuille, y
   compris celles du bloc mobile ci-dessous — les coins restaient arrondis et
   la hauteur bloquée à 460 px sur téléphone, malgré les règles prévues pour.
   Sorties ici le 22/08/2026 pour que le bloc mobile puisse enfin s'appliquer. */
#carte-tournee{
  width:100%;
  height:460px;
  border-radius:14px;
}

@media (max-width:720px){
  .carte-pleine-largeur{
    /* Annule la largeur de main sans avoir à connaître son padding :
       le bloc s'étend jusqu'aux bords de la fenêtre. */
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:0 !important;
    border-left:0;
    border-right:0;
    border-radius:0;
  }
  .carte-pleine-largeur #carte-tournee{
    border-radius:0;
    /* Un peu moins haute : la page Tournée fait déjà 8 écrans. */
    height:380px;
  }
}

/* --- Actualité datée --- */
.actu-date{
  display:block;text-transform:uppercase;letter-spacing:.12em;
  font-size:.78rem;font-weight:800;color:var(--red);margin:0 0 6px;
}

/* --- Avis --- */
.avis-note{text-align:center;margin:0 0 26px;}
.avis-chiffre{font-family:'Kaushan Script',cursive;font-size:3rem;color:var(--red);
  line-height:1;vertical-align:middle;}
.avis-etoiles{color:var(--red);font-size:1.5rem;letter-spacing:.08em;
  margin:0 10px;vertical-align:middle;}
.avis-detail{vertical-align:middle;}
.avis-liste{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;}
.avis-carte{background:var(--white);border:2px solid var(--cream-dark);
  border-radius:20px;padding:20px 22px;box-shadow:0 3px 10px rgba(0,0,0,.06);
  display:flex;flex-direction:column;justify-content:space-between;}
.avis-carte blockquote{margin:0;}
.avis-carte blockquote p{margin:0;font-size:1rem;}
.avis-carte blockquote p:before{content:"« ";color:var(--red);font-weight:800;}
.avis-carte blockquote p:after{content:" »";color:var(--red);font-weight:800;}
.avis-signature{margin:14px 0 0;font-weight:800;color:var(--red);font-size:.88rem;}
.avis-source{text-align:center;margin:20px 0 0;}
.avis-source a{color:var(--red);font-weight:800;text-decoration:underline;}

/* --- Pizza du moment --- */
/* Les pizzas du moment sur l'accueil. Depuis le 25/08/2026 elles y sont
   TOUTES, une colonne chacune, qui repassent l'une sous l'autre quand la
   largeur ne suffit plus. Les accroches (.pdm-accroche, .pdm-teaser-accroche)
   ont été retirées le même jour — les pizzas se présentent par leur nom et
   leurs ingrédients, sans slogan. */
.pdm-teaser-liste{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:26px;text-align:center;
}
.pdm-teaser-item{min-width:0;}
.pdm-teaser-nom{font-size:2rem;color:var(--red);margin:0 0 10px;}
.pdm-teaser-prix{font-weight:800;color:var(--red);font-size:1.2rem;margin:10px 0 0;}

/* --- Séparateur avant la partie « maison », plus lente --- */
.charniere{
  text-align:center;margin:14px 0 30px;
  font-family:'Kaushan Script',cursive;color:var(--red);font-size:1.6rem;
}

/* --- Bandeau d'avis événements --- */
.avis-evt{
  background:var(--white);border:2px solid var(--cream-dark);border-radius:20px;
  padding:26px 24px;box-shadow:0 3px 10px rgba(0,0,0,.06);
}
.avis-evt-note{text-align:center;margin:0 0 22px;}
.avis-evt-chiffre{font-family:'Kaushan Script',cursive;font-size:2.4rem;
  color:var(--red);line-height:1;vertical-align:middle;}
.avis-evt-etoiles{color:var(--red);font-size:1.25rem;letter-spacing:.08em;
  margin:0 8px;vertical-align:middle;}
.avis-evt-liste{list-style:none;margin:0;padding:0;display:grid;gap:20px;}
.avis-evt-carte{border-left:4px solid var(--red);padding-left:18px;}
.avis-evt-carte blockquote{margin:0;}
.avis-evt-carte blockquote p{margin:0 0 8px;}
.avis-evt-carte blockquote p:first-of-type:before{content:"« ";color:var(--red);font-weight:800;}
.avis-evt-carte blockquote p:last-of-type:after{content:" »";color:var(--red);font-weight:800;}
.avis-evt-signature{margin:6px 0 0;font-weight:800;color:var(--red);font-size:.88rem;}
.avis-evt-source{text-align:center;margin:22px 0 0;}
.avis-evt-source a{color:var(--red);font-weight:800;text-decoration:underline;}

/* --- Bloc grande commande --- */
.gc-chiffres{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;margin:20px 0 0;list-style:none;padding:0;
}
.gc-chiffre{background:var(--cream);border-radius:14px;padding:14px 12px;text-align:center;}
.gc-chiffre strong{display:block;font-family:'Kaushan Script',cursive;
  font-size:1.8rem;color:var(--red);line-height:1.1;}
.gc-chiffre span{font-size:.88rem;}