/*
Theme Name: YoD Pizzeria
Theme URI: https://yod-communication.fr
Author: YoD Communication
Author URI: https://yod-communication.fr
Description: Thème sur mesure pour La Pizza du Coin (Saint-Symphorien-de-Lay). Page unique : carte alimentée par les produits WooCommerce, bon de commande, horaires calculés, barre d'appel fixe. Conçu pour le mobile d'abord.
Version: 1.12.1
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: yod-pizzeria
*/

/* ===========================================================================
   Cette feuille reprend la page statique livrée avant le thème. Les couleurs
   sont relevées sur le logo : bleu nuit du médaillon, crème du lettrage,
   cuivre du liseré, tomate et basilic de la part de pizza, lagon du fond.

   Les images référencées ici le sont en chemin relatif depuis le dossier du
   thème (assets/img/...), ce qui fonctionne puisque style.css est à la racine.
   =========================================================================== */

/* ===========================================================================
   Charte reprise du logo, identique à l'application de commande :
   bleu nuit du médaillon, crème du lettrage, cuivre du liseré,
   tomate et basilic de la part de pizza, lagon du fond.
   =========================================================================== */
:root{
  --nuit:#0A1835;
  --nuit-800:#16233F;
  --nuit-700:#1F2F4F;
  --creme:#EADBC0;
  --creme-vif:#F6ECD9;
  --sourdine:#9AA7BF;
  --cuivre:#A2653A;
  --lagon:#3EA1C3;
  --tomate:#CE3520;       /* fond de bouton, blanc dessus : 5,05:1 */
  --tomate-clair:#FF9077; /* texte sur bleu nuit : 7,06:1 */
  --basilic:#6FBF4A;
  --braise:#D2531C;       /* orange du bouton « Commander en ligne » */

  --barre:76px;           /* hauteur de la barre d'appel fixe */
  --marge:20px;
  --largeur:640px;        /* largeur de lecture, reprise par la barre du bas */
  --haut:56px;            /* hauteur de la barre de titre */
}

*{box-sizing:border-box}

/* Le double appui pour zoomer n'a plus lieu d'être sur une page pensée pour
   le téléphone, et il transforme deux clics rapprochés — un « + » de
   quantité, deux pizzas d'affilée — en zoom involontaire. On le retire ;
   le pincement à deux doigts, lui, reste possible, il ne faut jamais
   l'enlever. */
html{-webkit-text-size-adjust:100%;touch-action:manipulation}
a,button,input,select,textarea,label,summary,[role="button"]{touch-action:manipulation}
body{
  margin:0;
  padding-top:38px;
  background:var(--nuit);
  color:var(--creme);
  font:400 17px/1.6 Karla,system-ui,sans-serif;
  padding-bottom:calc(var(--barre) + env(safe-area-inset-bottom));
  overflow-x:hidden;
}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:700;line-height:1.1;margin:0}
a{color:var(--lagon)}
img{max-width:100%;display:block}

.enveloppe{max-width:var(--largeur);margin:0 auto;padding:0 var(--marge)}
section{padding:44px 0 8px;scroll-margin-top:62px}
section h2{font-size:28px;letter-spacing:-.01em}
.chapeau{color:var(--sourdine);margin:10px 0 26px;font-size:16px}

/* --------------------------------------------------------------- en-tête */
.hero{position:relative;text-align:center;padding-bottom:20px}
.hero-photo{position:relative;height:44vw;max-height:220px;min-height:150px;overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:52% 55%}
.hero-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(10,24,53,.15) 0%,rgba(10,24,53,.72) 62%,var(--nuit) 100%);
}
/* Utilisé si l'on retire la photo : une lueur cuivre reprise du liseré. */
.hero-fond{
  height:96px;
  background:
    radial-gradient(125% 165% at 50% -35%,rgba(162,101,58,.60) 0%,rgba(62,161,195,.14) 46%,transparent 74%),
    var(--nuit);
}

/* Le médaillon : cercle crème, liseré cuivre, posé à cheval sur la photo. */
.medaillon{
  position:relative;z-index:2;width:164px;height:164px;margin:-58px auto 0;
  border-radius:50%;background:var(--nuit);
  border:3px solid var(--cuivre);
  box-shadow:0 0 0 7px var(--nuit),0 18px 40px rgba(0,0,0,.55);
  display:grid;place-items:center;overflow:hidden;
}
.medaillon img{width:100%;height:100%}

.hors-ecran{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.hero .accroche{color:var(--sourdine);margin:20px auto 0;max-width:34ch;font-size:16px}
.hero .accroche .ville{color:var(--cuivre);font-weight:700;white-space:nowrap}

/* --------------------------------------------- pastille ouvert / fermé */
.etat{
  display:inline-flex;align-items:center;gap:12px;margin-top:20px;
  max-width:100%;padding:14px 22px 15px 18px;border-radius:22px;
  background:var(--nuit-800);border:1px solid var(--nuit-700);
  font-size:19px;line-height:1.35;color:var(--creme-vif);text-align:left;
}
.etat .point{width:13px;height:13px;border-radius:50%;background:var(--sourdine);flex:none}
.etat[data-ouvert="oui"] .point{background:var(--basilic);box-shadow:0 0 0 5px rgba(111,191,74,.18)}
.etat[data-ouvert="bientot"] .point{background:#E8A33D}
.etat[data-ouvert="non"] .point{background:var(--tomate-clair)}

/* ------------------------------------------------------------- boutons */
.lien-plan{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  color:var(--lagon);text-decoration:none;border-bottom:1px solid rgba(62,161,195,.4);
  padding-bottom:2px;font-size:16px;
}

/* --------------------------------------------------------------- carte */
.ruban{
  position:fixed;top:0;left:0;right:0;z-index:1120;height:38px;overflow:hidden;
  background:var(--cuivre);color:#fff;
  display:flex;align-items:center;
  transition:transform .3s cubic-bezier(.22,.9,.3,1);
}
.ruban.cachee{transform:translateY(-100%)}
.ruban .piste{display:flex;white-space:nowrap;animation:defile 26s linear infinite}
.ruban span{font-size:14px;font-weight:500;padding-right:2px}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ruban .piste{animation:none;justify-content:center;width:100%}
  .ruban span:nth-child(2){display:none}
}

.barre-haut{
  position:fixed;top:0;left:0;right:0;z-index:1110;
  background:rgba(10,24,53,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(162,101,58,.3);
  transform:translateY(-100%);
  transition:transform .32s cubic-bezier(.22,.9,.3,1);
}
.barre-haut.visible{transform:translateY(0)}
.barre-haut a{
  display:flex;align-items:center;justify-content:center;gap:12px;
  min-height:var(--haut);padding:8px var(--marge);
  max-width:var(--largeur);margin:0 auto;text-decoration:none;color:var(--creme);
}
.barre-haut img{
  width:42px;height:42px;border-radius:50%;flex:none;
  border:1.5px solid var(--cuivre);background:var(--nuit);
  transform:scale(.5);opacity:0;
  transition:transform .42s cubic-bezier(.2,1.3,.4,1) .06s,opacity .3s ease .06s;
}
.barre-haut.visible img{transform:scale(1);opacity:1}

/* Page sans entête : la barre ne se déclenche pas au défilement, elle est
   là dès le premier pixel. Le nom accompagne le logo — seul, un logo de
   42 pixels ne dit pas où l'on est. */
.barre-haut.fixe{transform:none;top:38px}
body.sans-ruban .barre-haut.fixe{top:0}
.barre-haut.fixe img{transform:none;opacity:1}
.barre-haut.fixe a{justify-content:flex-start;gap:12px}
/* Le nom complet, sur une seule ligne : « La Pizza du Coin – Saint
   Sympho… » ne dit pas où l'on est, et deux lignes faisaient grossir la
   barre. La taille suit la largeur de l'écran — 18 px au large, et de quoi
   tenir entier sur un téléphone étroit. */
.barre-haut .nom-site{
  font-family:Fraunces,Georgia,serif;font-weight:600;
  font-size:clamp(10px,3vw,18px);
  line-height:1.15;color:var(--creme);min-width:0;white-space:nowrap;
}

/* La barre occupe 56 pixels qu'il faut rendre au contenu, en plus des 38
   du bandeau quand il est là. */
body.barre-fixe{padding-top:calc(38px + var(--haut))}
body.barre-fixe.sans-ruban{padding-top:var(--haut)}

.nav-carte{
  position:sticky;top:var(--haut);z-index:5;margin:0 calc(var(--marge) * -1) 24px;
  padding:12px var(--marge);
  background:rgba(10,24,53,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--nuit-700);
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
}
.nav-carte::-webkit-scrollbar{display:none}
.nav-carte a{transition:background-color .25s ease,border-color .25s ease,color .25s ease}
.nav-carte a{
  flex:none;padding:9px 15px;border-radius:999px;text-decoration:none;
  background:var(--nuit-800);color:var(--creme);font-size:15px;white-space:nowrap;
  border:1px solid var(--nuit-700);
}
.nav-carte a.actif{background:var(--cuivre);border-color:var(--cuivre);color:#fff}

.famille{margin-bottom:38px;scroll-margin-top:124px}
.famille h3{
  font-size:22px;color:var(--creme-vif);
  padding-bottom:10px;border-bottom:2px solid var(--cuivre);
}
.famille h3+.plat{padding-top:18px}
.famille .base{color:var(--sourdine);font-size:14px;margin:10px 0 4px}
.famille.sous{margin-bottom:34px}
.famille .sous-famille{
  font-family:Karla,sans-serif;font-size:14px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:var(--cuivre);
  margin:0;padding-bottom:9px;
  border-bottom:1px solid rgba(192,133,82,.4);
}
.famille .sous-famille+.plat,.famille .sous-famille+.base+.plat{padding-top:16px}

.plat{display:flex;align-items:baseline;gap:8px;padding:15px 0;border-bottom:1px solid rgba(31,47,79,.8)}
.plat:last-child{border-bottom:0}
.plat .nom{display:block;font-family:Fraunces,serif;font-size:20px;font-weight:600;flex:none;max-width:60%}
.plat .garniture{display:block;font-family:Karla,sans-serif;font-weight:400;color:var(--sourdine);font-size:15.5px;line-height:1.5;margin-top:5px}
.plat .fil{flex:1;border-bottom:1px dotted rgba(154,167,191,.45);transform:translateY(-5px)}
.plat .prix{flex:none;font-variant-numeric:tabular-nums;font-weight:700;font-size:18px}
.plat.vedette .nom{color:var(--creme-vif)}

/* Le lien qui ouvre la fiche : petit, posé juste après le nom, avant le
   trait pointillé qui mène au prix. Le regard y passe de toute façon. */
.plat .plus-infos{
  flex:none;padding:0 0 0 2px;border:0;background:none;cursor:pointer;
  color:var(--cuivre);font:600 13px Karla,sans-serif;white-space:nowrap;
}
.plat .plus-infos:hover{color:var(--tomate-clair);text-decoration:underline}
.plat .plus-infos:focus-visible{outline:2px solid var(--cuivre);outline-offset:3px;border-radius:4px}

/* Le nom devient un bouton quand une fiche existe : meme apparence, mais
   on peut l'atteindre au clavier et il dit qu'il se passe quelque chose. */
.plat .nom > button.ouvre-fiche{
  all:unset;cursor:pointer;font:inherit;color:inherit;
  text-decoration:underline;text-decoration-color:rgba(162,101,58,.55);
  text-underline-offset:4px;
}
.plat .nom > button.ouvre-fiche:hover{text-decoration-color:var(--cuivre)}
.plat .nom > button.ouvre-fiche:focus-visible{outline:2px solid var(--cuivre);outline-offset:3px}


/* Petit « ? » explicatif : un produit local que personne ne connaît hors du
   village mérite une phrase, sans alourdir la ligne pour les autres. */
.quoi-info{
  display:inline-grid;place-items:center;vertical-align:1px;
  width:20px;height:20px;margin:0 2px;padding:0;border-radius:50%;
  border:1px solid var(--cuivre);background:transparent;color:var(--cuivre);
  font:700 12px Karla,sans-serif;cursor:pointer;
}
.quoi-info[aria-expanded="true"]{background:var(--cuivre);color:#fff}

.note-info{
  display:block;width:100%;margin-top:12px;padding:12px 14px;border-radius:10px;
  background:rgba(162,101,58,.12);border-left:2px solid var(--cuivre);
  color:var(--creme);font-size:14.5px;line-height:1.5;
}
.coup-de-coeur{
  display:inline-block;vertical-align:2px;margin-left:8px;
  padding:3px 9px 4px;border-radius:999px;
  font:700 11px/1 Karla,sans-serif;letter-spacing:.02em;
  color:var(--tomate-clair);background:rgba(206,53,32,.16);
  border:1px solid rgba(255,144,119,.45);
}
/* Le nom peut alors dépasser la largeur réservée : on laisse le badge
   passer à la ligne plutôt que de comprimer le nom. */
.plat.vedette .nom{max-width:72%}

.note-carte{
  margin-top:20px;padding:16px 18px;border-radius:12px;
  background:var(--nuit-800);border-left:3px solid var(--cuivre);
  font-size:15px;color:var(--sourdine);
}

/* ------------------------------------------------------------ horaires */
#horaires{padding-top:64px}

table.horaires{width:100%;border-collapse:collapse;font-size:16px}
table.horaires th{text-align:left;font-weight:500;padding:13px 0;color:var(--creme)}
table.horaires td{text-align:right;padding:13px 0;font-variant-numeric:tabular-nums;color:var(--sourdine)}
table.horaires tr{border-bottom:1px solid rgba(31,47,79,.8)}
table.horaires tr:last-child{border-bottom:0}
table.horaires tr.aujourdhui th,table.horaires tr.aujourdhui td{color:var(--creme-vif);font-weight:700}
table.horaires tr.aujourdhui th::after{content:" — aujourd’hui";color:var(--cuivre);font-weight:400;font-size:14px}
table.horaires tr.ferme td{color:var(--tomate-clair)}

/* ------------------------------------------------------------- infos */
.infos{list-style:none;padding:0;margin:0}
.infos li{padding:15px 0;border-bottom:1px solid rgba(31,47,79,.8);display:flex;gap:14px}
.infos li:last-child{border-bottom:0}
.infos .quoi{color:var(--sourdine);flex:none;width:104px;font-size:15px}
.infos .valeur{flex:1}
.infos a{text-decoration:none}

/* ------------------------------------------------------------- Facebook */
#infos{padding-top:60px}
#facebook{padding-top:56px}
.carte-fb{
  position:relative;display:block;overflow:hidden;border-radius:18px;
  border:1px solid rgba(162,101,58,.4);text-decoration:none;color:var(--creme);
  /* La photo est posée en fond plutôt qu en <img> : la hauteur de la carte
     reste dictée par le texte, quelle que soit la taille de l image. */
  background:
    linear-gradient(165deg,rgba(10,24,53,.74) 0%,rgba(10,24,53,.92) 58%,rgba(10,24,53,.97) 100%),
    url("assets/img/pizza-la-pizza-du-coin-saint-symphorien-de-lay.jpg") center 58%/cover no-repeat var(--nuit);
}
.carte-fb .contenu{display:block;padding:28px 22px 26px;text-align:center}
.carte-fb .jeton{
  display:block;width:66px;height:66px;margin:0 auto 16px;border-radius:50%;
  border:2px solid var(--cuivre);background:var(--nuit);overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}
.carte-fb .jeton img{width:100%;height:100%}
.carte-fb .titre{
  display:block;font-family:Fraunces,serif;font-size:25px;font-weight:700;
  line-height:1.15;color:var(--creme-vif);
}
.carte-fb .texte{
  display:block;max-width:34ch;margin:12px auto 0;
  color:var(--sourdine);font-size:16px;line-height:1.55;
}
/* Un bouton par réseau, côte à côte, empilés quand la place manque. */
.carte-fb .boutons{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:20px;
}
.carte-fb .bouton{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 22px;border-radius:12px;text-decoration:none;
  background:#fff;color:var(--nuit);font-weight:700;font-size:16px;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.carte-fb .bouton:active{background:var(--creme-vif)}
.carte-fb .bouton svg{flex:none}

/* ------------------------------------------------- mentions + pied */
details.legal{border-top:1px solid var(--nuit-700);padding:18px 0}
details.legal summary{cursor:pointer;color:var(--sourdine);font-size:15px;list-style:none}
details.legal summary::-webkit-details-marker{display:none}
details.legal summary::before{content:"+ ";color:var(--cuivre)}
details.legal[open] summary::before{content:"− "}
details.legal .corps{font-size:14px;line-height:1.7;color:var(--sourdine);padding-top:14px}
details.legal h4{font-family:Karla,sans-serif;font-size:14px;color:var(--creme);margin:18px 0 4px}
details.legal h4:first-child{margin-top:0}

footer.pied{padding:26px 0 34px;color:var(--sourdine);font-size:13px;line-height:1.7}
footer.pied .signature{margin-top:10px}

/* ------------------------------------------- barre d'appel fixe en bas */
.barre-appel{
  /* Au-dessus du voile de chargement de WooCommerce, qui se pose à 1000 :
     la barre d'appel doit rester lisible et cliquable en toutes
     circonstances. */
  position:fixed;left:0;right:0;bottom:0;z-index:1100;
  background:var(--tomate);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -8px 28px rgba(0,0,0,.45);
}

/* Le bandeau rouge tient toute la largeur de l'écran — c'est ce qui en fait
   un socle. Son contenu, lui, s'aligne sur la colonne de lecture : sur un
   grand écran, le numéro collé à gauche et le bouton collé à droite n'ont
   plus rien à voir l'un avec l'autre. */
.barre-appel{
  padding-left:max(var(--marge),calc((100% - var(--largeur)) / 2));
  padding-right:max(var(--marge),calc((100% - var(--largeur)) / 2));
}
.barre-appel{display:flex;align-items:center;gap:10px}
.barre-appel .appeler{
  display:flex;align-items:center;gap:12px;flex:1;min-width:0;
  height:var(--barre);color:#fff;text-decoration:none;
}
.barre-appel .vers-carte{
  flex:none;color:#fff;text-decoration:none;font-size:15px;font-weight:700;
  padding:12px 16px;border-radius:11px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.34);
}
.barre-appel .vers-carte:active{background:rgba(255,255,255,.3)}

/* Dès qu'il y a une pizza choisie, le raccourci vers la carte laisse la place
   au récapitulatif : on est déjà dans la carte, et c'est le total qui compte. */
.barre-appel .vers-panier{
  display:none;flex:none;cursor:pointer;text-align:left;
  padding:9px 16px;border-radius:11px;border:0;
  background:var(--creme-vif);color:var(--tomate);font-family:Karla,sans-serif;
}
.barre-appel .vers-panier .libelle{display:block;font-size:12px;line-height:1.2;opacity:.85}
.barre-appel .vers-panier .montant{
  display:block;font-family:Fraunces,serif;font-size:19px;font-weight:700;line-height:1.2;
}
body.panier-plein .barre-appel .vers-carte{display:none}
body.panier-plein .barre-appel .vers-panier{display:block}

/* Le panier WooCommerce est posé par PHP : il ne dépend pas du bon de
   commande, donc pas de la classe que le script ajoute. */
.barre-appel .vers-panier.panier-woo{display:block;text-decoration:none}
.barre-appel .libelle{font-size:13px;opacity:.9;display:block;line-height:1.2}
.barre-appel .numero{font-family:Fraunces,serif;font-size:21px;white-space:nowrap;font-weight:700;letter-spacing:.5px;line-height:1.2}
.barre-appel .rond{
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.16);
  display:grid;place-items:center;flex:none;
}


/* ----------------------------------------------- bon de commande */
.plat{flex-wrap:wrap}
.compteur{width:100%;display:flex;justify-content:flex-end;margin-top:10px}
.compteur .ajouter{
  padding:9px 16px;border-radius:10px;font:500 15px Karla,sans-serif;
  background:transparent;color:var(--creme);border:1px solid var(--cuivre);cursor:pointer;
}
.compteur .ajouter:active{background:rgba(162,101,58,.25)}
.compteur .reglage{display:none;align-items:center;gap:4px}
.compteur .reglage button{
  width:44px;height:40px;border:0;border-radius:10px;cursor:pointer;
  background:var(--cuivre);color:#fff;font-size:22px;line-height:1;
}
.compteur .reglage .qte{
  min-width:40px;text-align:center;font-weight:700;font-size:17px;
  font-variant-numeric:tabular-nums;
}
.plat[data-qte]:not([data-qte="0"]) .compteur .ajouter{display:none}
.plat[data-qte]:not([data-qte="0"]) .compteur .reglage{display:flex}
.plat[data-qte]:not([data-qte="0"]) .nom{color:var(--creme-vif)}
.plat[data-qte]:not([data-qte="0"]){
  background:rgba(162,101,58,.10);
  box-shadow:inset 3px 0 0 var(--cuivre);
  padding-left:12px;padding-right:12px;margin:0 -12px;border-radius:0 8px 8px 0;
}

/* feuille de récapitulatif */
.voile{
  position:fixed;inset:0;z-index:1200;background:rgba(5,12,26,.62);
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
body.recap-ouvert .voile{opacity:1;pointer-events:auto}
.recap{
  position:fixed;left:0;right:0;bottom:0;z-index:1210;
  max-height:82vh;overflow-y:auto;
  background:var(--nuit-800);border-top:1px solid var(--cuivre);
  border-radius:18px 18px 0 0;
  padding:8px var(--marge) calc(28px + env(safe-area-inset-bottom));
  pointer-events:auto;-webkit-overflow-scrolling:touch;
  transform:translateY(100%);transition:transform .3s cubic-bezier(.22,.9,.3,1);
}
body.recap-ouvert .recap{transform:translateY(0)}
.recap .poignee{width:44px;height:4px;border-radius:2px;background:var(--nuit-700);margin:8px auto 16px}
.recap h2{font-size:24px;margin-bottom:6px}
.recap .aide{color:var(--sourdine);font-size:14px;margin:0 0 18px;line-height:1.5}
.recap .ligne{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(31,47,79,.9)}
.recap .ligne .titre{flex:1;min-width:0}
.recap .ligne .titre b{display:block;font-family:Fraunces,serif;font-weight:600;font-size:17px}
.recap .ligne .titre span{color:var(--sourdine);font-size:14px}
.recap .ligne .montant{font-variant-numeric:tabular-nums;font-weight:700;min-width:62px;text-align:right}
.recap .ligne .reglage{display:flex;align-items:center;gap:4px}
.recap .ligne .reglage button{
  width:38px;height:36px;border:0;border-radius:9px;background:var(--nuit-700);
  color:var(--creme);font-size:20px;line-height:1;cursor:pointer;
}
.recap .ligne .reglage .qte{min-width:26px;text-align:center;font-weight:700}
.recap .somme{display:flex;align-items:baseline;padding:18px 0 4px;font-size:17px}
.recap .somme .valeur{margin-left:auto;font-family:Fraunces,serif;font-size:30px;font-weight:700}
.recap .actions{display:flex;gap:10px;margin-top:18px}
.recap .actions a,.recap .actions button{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  height:56px;border-radius:12px;text-decoration:none;cursor:pointer;
  font:700 16px Karla,sans-serif;border:1px solid var(--cuivre);
  background:transparent;color:var(--creme);
}
.recap .actions .principal{background:var(--tomate);border-color:var(--tomate);color:#fff}
.recap .pieds-recap{
  display:flex;justify-content:space-between;gap:16px;margin-top:18px;
}
.recap .pieds-recap a,.recap .vider{
  background:none;border:0;cursor:pointer;padding:6px 0;
  color:var(--sourdine);font:400 14px Karla,sans-serif;text-decoration:underline;
}

/* Sous 380 px, le numéro et le raccourci carte doivent tenir côte à côte. */
@media (max-width:380px){
  .barre-appel{gap:8px;padding:0 12px env(safe-area-inset-bottom)}
  .barre-appel .rond{width:38px;height:38px}
  .barre-appel .appeler{gap:9px}
  .barre-appel .numero{font-size:18px}
  .barre-appel .vers-carte{padding:11px 13px;font-size:14px}
  .barre-appel .vers-panier{padding:8px 12px}
  .barre-appel .vers-panier .montant{font-size:17px}
}

:focus-visible{outline:3px solid var(--lagon);outline-offset:3px;border-radius:6px}

/* ------------------------------------------------------------ desktop */
@media (min-width:760px){
  body{font-size:18px}
  .hero-photo{height:260px;max-height:260px}
  .etat{font-size:21px}
  .medaillon{width:190px;height:190px;margin-top:-70px}
  section h2{font-size:34px}
  .plat .nom{font-size:22px}
  .plat .garniture{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .barre-haut img{transform:none;opacity:1}
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* ===========================================================================
   Pages intérieures et pages WooCommerce
   ---------------------------------------------------------------------------
   La page d'accueil est une page unique, mais WordPress et WooCommerce en
   créent d'autres : panier, commande, compte, conditions de vente. Elles
   héritent de la charte plutôt que de l'habillage par défaut.
   =========================================================================== */

body.sans-ruban{padding-top:0}

/* .enveloppe donne la marge latérale, mais cette règle vient après elle et
   la remplaçait entièrement : le titre des pages intérieures touchait le
   bord de l'écran. */
.page-interieure{padding:44px var(--marge) 40px;min-height:52vh}
.page-interieure h1{font-family:Fraunces,Georgia,serif;font-size:32px;line-height:1.15;margin:0 0 22px}
.page-interieure h2{font-size:24px;margin:32px 0 12px}
.page-interieure h3{font-size:20px;margin:26px 0 10px}
.page-interieure p,.page-interieure li{color:var(--creme);line-height:1.65}
.page-interieure a{color:var(--lagon)}
.page-interieure img{border-radius:12px}

/* Formulaires : WooCommerce en pose beaucoup, et ses styles par défaut
   supposent un fond clair. */
.page-interieure input[type="text"],
.page-interieure input[type="email"],
.page-interieure input[type="tel"],
.page-interieure input[type="number"],
.page-interieure input[type="password"],
.page-interieure select,
.page-interieure textarea{
  width:100%;padding:14px 15px;border-radius:11px;
  border:1px solid var(--nuit-700);background:var(--nuit-800);
  color:var(--creme);font:400 16px Karla,sans-serif;
}
.page-interieure label{display:block;margin:16px 0 7px;color:var(--sourdine);font-size:15px}

.page-interieure .button,
.page-interieure button,
.page-interieure input[type="submit"]{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:54px;padding:0 24px;border:0;border-radius:12px;cursor:pointer;
  background:var(--tomate);color:#fff;font:700 16px Karla,sans-serif;
}
.page-interieure .button:active,
.page-interieure button:active{background:#B92E1C}

/* Les écrans de WooCommerce supposent un fond clair et un violet qui
   n'appartient pas à la pizzeria. Tout est repris ici : mêmes couleurs,
   mêmes boutons, mêmes tailles de texte que le reste du site. Les règles
   visent body.woocommerce-page, la classe que WooCommerce pose lui-même,
   pour couvrir aussi bien les pages en code court que la boutique. */

/* La largeur de lecture est la même partout, boutique comprise : une page
   qui s'élargit en changeant de rubrique donne l'impression d'avoir changé
   de site. Les tableaux du panier passent donc en blocs plus tôt, sous
   760 px, pour tenir dans cette colonne sans être à l'étroit. */

/* ------------------------------------------------------ les boutons */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page .button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 22px;border:1px solid var(--cuivre);border-radius:12px;
  background:transparent;color:var(--creme);cursor:pointer;
  font:600 16px Karla,sans-serif;text-decoration:none;line-height:1;
  transition:background-color .2s ease,border-color .2s ease;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{background:rgba(162,101,58,.22);color:var(--creme-vif)}

/* Le bouton qui fait avancer la commande est le seul plein : c'est lui
   qu'on doit trouver sans chercher. */
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .checkout-button,
.woocommerce #place_order{
  background:var(--tomate);border-color:var(--tomate);color:#fff;
}
.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover{background:#B92E1C;border-color:#B92E1C;color:#fff}
.woocommerce .button:disabled,
.woocommerce button.button:disabled[disabled]{opacity:.45;cursor:default}
.woocommerce .checkout-button,
.woocommerce #place_order{width:100%;min-height:56px;font-size:17px}

/* -------------------------------------------------------- les tables */
.woocommerce table.shop_table{
  width:100%;border-collapse:collapse;border:0;border-radius:14px;
  margin:0 0 28px;background:var(--nuit-800);overflow:hidden;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  padding:15px 14px;border:0;border-bottom:1px solid var(--nuit-700);
  text-align:left;color:var(--creme);vertical-align:middle;
}
.woocommerce table.shop_table thead th{
  color:var(--sourdine);font-weight:500;font-size:14px;
  letter-spacing:.04em;text-transform:uppercase;
  background:rgba(10,24,53,.45);
}
.woocommerce table.shop_table tr:last-child td{border-bottom:0}
.woocommerce table.shop_table td.product-name a{color:var(--creme-vif);text-decoration:none;font-weight:600}
.woocommerce table.shop_table td.product-name a:hover{text-decoration:underline}
.woocommerce table.shop_table .product-thumbnail img{
  width:64px;height:64px;object-fit:cover;border-radius:10px;display:block;
  border:1px solid rgba(162,101,58,.3);
}
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal,
.woocommerce table.shop_table td.product-total,
.woocommerce .amount{font-variant-numeric:tabular-nums}
.woocommerce a.remove{
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:rgba(206,53,32,.16);color:var(--tomate-clair)!important;
  font-size:20px;line-height:1;text-decoration:none;
}
.woocommerce a.remove:hover{background:var(--tomate);color:#fff!important}

/* --------------------------------------------------- la quantité */
.woocommerce .quantity input.qty{
  width:74px;height:48px;text-align:center;border-radius:10px;
  border:1px solid var(--nuit-700);background:var(--nuit);color:var(--creme);
  font:600 16px Karla,sans-serif;
}

/* ----------------------------------- code promo et mise à jour */
/* Les deux boutons se partageaient une cellule sans mise en forme : le
   champ était écrasé et le libellé sortait du cadre. */
.woocommerce table.shop_table td.actions{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  padding:18px 14px;background:rgba(10,24,53,.35);
}
.woocommerce table.shop_table td.actions .coupon{
  display:flex;gap:10px;flex:1 1 320px;min-width:0;
}
.woocommerce table.shop_table td.actions .coupon label{display:none}
.woocommerce #coupon_code{flex:1 1 auto;min-width:0;width:auto}
.woocommerce table.shop_table td.actions > .button{margin-left:auto}

/* ------------------------------------------------ totaux du panier */
/* WooCommerce fait flotter ce bloc à droite sur 48 % de la largeur, ce qui
   laisse un grand vide à gauche. Sur une carte de pizzeria, le total se lit
   en pleine largeur, juste au-dessus du bouton. */
.woocommerce .cart-collaterals{width:100%}
.woocommerce .cart-collaterals .cart_totals{float:none;width:100%}
.woocommerce .cart-collaterals .cross-sells{float:none;width:100%}
.woocommerce .cart_totals h2,
.woocommerce-checkout h3{font-family:Fraunces,serif;font-size:24px;margin:0 0 14px}
.woocommerce .cart_totals table.shop_table th{width:45%}
.woocommerce .cart_totals tr.order-total td,
.woocommerce .cart_totals tr.order-total th{font-size:19px;font-weight:700;color:var(--creme-vif)}

/* ---------------------------------------------------- la commande */
.woocommerce-checkout .col2-set{display:grid;gap:26px}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{width:100%;float:none}
.woocommerce-checkout #order_review_heading{margin-top:34px}
.woocommerce-checkout #order_review{
  background:var(--nuit-800);border-radius:14px;padding:18px var(--marge);
}
.woocommerce-checkout #order_review table.shop_table{background:transparent;margin-bottom:18px}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{margin:16px 0}
.woocommerce-checkout #payment{background:transparent}
.woocommerce-checkout #payment ul.payment_methods{
  padding:0;margin:0 0 18px;list-style:none;border:0;
}
.woocommerce-checkout #payment ul.payment_methods li{
  padding:14px 16px;border:1px solid var(--nuit-700);border-radius:12px;margin-bottom:10px;
}
.woocommerce-checkout #payment div.payment_box{
  background:rgba(10,24,53,.5);color:var(--sourdine);font-size:15px;
  border-radius:10px;padding:12px 14px;margin-top:10px;
}
.woocommerce-checkout #payment div.payment_box::before{display:none}

/* ----------------------------------------------------- formulaires */
.woocommerce form .form-row{display:block;margin:0 0 16px;padding:0}
.woocommerce form .form-row label{display:block;margin:0 0 7px;color:var(--sourdine);font-size:15px}
.woocommerce form .form-row .required{color:var(--tomate-clair);text-decoration:none}
.woocommerce .select2-container--default .select2-selection--single,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  width:100%;height:auto;min-height:50px;padding:13px 15px;border-radius:11px;
  border:1px solid var(--nuit-700);background:var(--nuit-800);
  color:var(--creme);font:400 16px Karla,sans-serif;
}
.woocommerce form .form-row textarea{min-height:110px}

/* Remplissage automatique du navigateur.
   Chrome et Safari imposent un fond bleu très clair aux champs qu'ils
   remplissent, et la propriété background ne les atteint pas. On passe par
   une ombre interne de la couleur du champ, seule façon de reprendre la
   main — et la transition très longue empêche le fond clair de revenir
   quelques millisecondes après le rendu. */
.woocommerce input:-webkit-autofill,
.woocommerce input:-webkit-autofill:hover,
.woocommerce input:-webkit-autofill:focus,
.woocommerce input:-webkit-autofill:active,
.woocommerce textarea:-webkit-autofill,
.woocommerce select:-webkit-autofill,
.pdc-entree input:-webkit-autofill,
.pdc-claim input:-webkit-autofill{
  -webkit-text-fill-color:var(--creme-vif);
  -webkit-box-shadow:0 0 0 1000px var(--nuit-800) inset;
  box-shadow:0 0 0 1000px var(--nuit-800) inset;
  caret-color:var(--creme-vif);
  border:1px solid var(--nuit-700);
  transition:background-color 100000s ease 0s;
}

/* Le pays n'est pas un champ mais un simple texte : sans mise en forme il
   héritait du fond clair du navigateur. */
.woocommerce .woocommerce-input-wrapper strong{
  display:inline-block;background:none;color:var(--creme-vif);font-weight:700;
}
.woocommerce input:focus-visible,
.woocommerce textarea:focus-visible,
.woocommerce select:focus-visible{outline:2px solid var(--cuivre);outline-offset:1px}
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon{
  border:1px solid var(--nuit-700);border-radius:14px;padding:20px;margin:0 0 24px;
}

/* -------------------------------------------------------- messages */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  padding:16px 18px;border-radius:12px;margin:0 0 24px;list-style:none;
  background:var(--nuit-800);border:0;border-left:3px solid var(--cuivre);
  color:var(--creme);
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before{display:none}
.woocommerce .woocommerce-error{border-left-color:var(--tomate-clair)}
.woocommerce .woocommerce-message .button{margin-left:auto}

/* ------------------------------------------------------ mon compte */
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 26px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block;padding:9px 15px;border-radius:999px;text-decoration:none;
  border:1px solid var(--nuit-700);color:var(--sourdine);font-size:15px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  background:var(--cuivre);border-color:var(--cuivre);color:#fff;
}
.woocommerce-account .woocommerce-MyAccount-content{width:100%;float:none}

/* --------------------------------------------------- la boutique */
.woocommerce ul.products{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:22px;list-style:none;padding:0;margin:0;
}
.woocommerce ul.products li.product{width:auto;float:none;margin:0;text-align:left}
.woocommerce ul.products li.product img{border-radius:12px;margin-bottom:12px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:Fraunces,serif;font-size:19px;padding:0;margin:0 0 6px;
}
.woocommerce ul.products li.product .price{color:var(--creme);font-weight:700}
.woocommerce .price,.woo .price{font-variant-numeric:tabular-nums;font-weight:700}
.woocommerce span.onsale{
  background:var(--cuivre);color:#fff;border-radius:999px;
  min-height:auto;min-width:auto;padding:6px 14px;line-height:1;font-weight:700;
}

/* ---------------------------------------------------- sur téléphone */
/* Un tableau à cinq colonnes ne rentre pas : chaque ligne devient un bloc,
   avec l'intitulé de la colonne devant la valeur. */
@media (max-width:760px){
  .woocommerce table.shop_table thead{display:none}
  .woocommerce table.shop_table tr{display:block;border-bottom:1px solid var(--nuit-700)}
  .woocommerce table.shop_table tr:last-child{border-bottom:0}
  .woocommerce table.shop_table td{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    border:0;padding:9px 14px;
  }
  .woocommerce table.shop_table td::before{
    content:attr(data-title);color:var(--sourdine);font-size:14px;flex:none;
  }
  .woocommerce table.shop_table td.product-remove::before,
  .woocommerce table.shop_table td.product-thumbnail::before{content:none}
  .woocommerce table.shop_table tr td:first-child{padding-top:14px}
  .woocommerce table.shop_table tr td:last-child{padding-bottom:14px}
  .woocommerce table.shop_table td.actions{display:flex;padding:16px 14px}
  .woocommerce table.shop_table td.actions .coupon{flex:1 1 100%}
  .woocommerce table.shop_table td.actions > .button{margin-left:0;width:100%}
  .woocommerce .cart_totals table.shop_table td{justify-content:flex-end}
}

/* Les tables du thème hors WooCommerce gardent leur mise en forme simple. */
.woo table:not(.shop_table){width:100%;border-collapse:collapse;margin:20px 0}
.woo table:not(.shop_table) th,
.woo table:not(.shop_table) td{padding:13px 10px;border-bottom:1px solid var(--nuit-700);text-align:left}
.woo table:not(.shop_table) th{color:var(--sourdine);font-weight:500}

/* ------------------------------------------------- liens du pied */
.liens-pied{
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;
  padding:26px 0 0;border-top:1px solid rgba(233,226,213,.10);
}
.liens-pied a,
.liens-pied .actif{font-size:15px;text-decoration:none}
.liens-pied a{color:var(--sourdine)}
.liens-pied a:hover{color:var(--creme);text-decoration:underline}
/* La page ouverte : même place dans la ligne, mais lisible comme un repère
   et non comme un lien. */
.liens-pied .actif{color:var(--creme);font-weight:700}

/* Bouton « Commander en ligne » posé par l'extension.
   Orange braise, quand l'appel est rouge tomate : deux gestes différents,
   deux couleurs proches mais distinctes. Le vert d'avant appartenait à une
   autre palette et jurait avec le reste de la page.
   La part de pizza est posée en fond plutôt qu'en balise : le bouton vient
   de l'extension, le thème ne peut pas en changer le contenu. */
.recap .actions #pdc-commander{
  background:var(--braise);border-color:var(--braise);color:#fff;
}
.recap .actions #pdc-commander::before{
  content:"";flex:none;width:22px;height:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 19.2a17 17 0 0 0 16 0Z'/%3E%3Cpath d='M6 15.3a13 13 0 0 1 12 0'/%3E%3Ccircle cx='12' cy='9.5' r='.9' fill='%23fff' stroke='none'/%3E%3Ccircle cx='9.4' cy='13.4' r='.9' fill='%23fff' stroke='none'/%3E%3Ccircle cx='14.6' cy='13.4' r='.9' fill='%23fff' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;
}
.recap .actions #pdc-commander:hover{filter:brightness(1.06)}
.recap .actions #pdc-commander:disabled{opacity:.6;cursor:default}

/* Deux boutons seulement : ils partagent la largeur à parts égales, et
   passent l'un sous l'autre sur les écrans étroits. */
@media (max-width:380px){
  .recap .actions{flex-direction:column}
}

/* --------------------------------------------------- pizza du mois */
/* Un seul produit, présenté comme une affiche plutôt que comme une ligne
   de carte : c'est ce qui le distingue des vingt autres. */
#pizza-du-mois{padding-top:36px;padding-bottom:0}

.mois{
  position:relative;border:1px solid rgba(162,101,58,.42);border-radius:16px;
  background:linear-gradient(180deg,rgba(162,101,58,.14) 0%,rgba(162,101,58,.04) 100%);
  padding:22px;overflow:hidden;
}
/* Format 4/3, comme dans la fiche : une hauteur fixe de 180 px rognait la
   pizza et ne montrait qu'une bande de garniture. */
.mois-photo{margin:-22px -22px 18px;aspect-ratio:4/3;overflow:hidden;position:relative}
.mois-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* La photo ouvre la fiche : le bouton ne doit rien changer à son allure. */
.mois-photo button.ouvre-fiche{all:unset;display:block;width:100%;height:100%;cursor:pointer}
.mois-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 40%,rgba(10,24,53,.55) 100%);
}

/* Une simple mention en capitales plutôt qu'une pastille : le bloc est déjà
   encadré de cuivre, une pastille de plus ferait deux signaux pour une seule
   idée. */
.mois-etiquette{
  margin:0;color:var(--cuivre);font-weight:700;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;
}
/* L'affiche : nom en grand, recette en clair, précision en retrait. C'est
   ce bloc qui donne envie ; les lignes commandables viennent après. */
/* Le bloc porte la classe « famille » pour le bon de commande, et héritait
   donc du titre de famille : 22 px et un filet cuivre en dessous. Le nom de
   l'affiche est repris ici, plus spécifique, sans filet — celui du bloc
   sépare déjà l'affiche des lignes commandables. */
.mois h3.mois-nom{
  font-family:Fraunces,Georgia,serif;font-weight:700;
  font-size:34px;line-height:1.08;margin:8px 0 0;color:var(--creme-vif);
  padding-bottom:0;border-bottom:0;
}
.mois h3.mois-nom button.ouvre-fiche{
  all:unset;cursor:pointer;font:inherit;color:inherit;
  text-decoration:underline;text-decoration-color:rgba(162,101,58,.5);
  text-underline-offset:6px;
}
.mois h3.mois-nom button.ouvre-fiche:hover{text-decoration-color:var(--cuivre)}
.mois h3.mois-nom button.ouvre-fiche:focus-visible{outline:2px solid var(--cuivre);outline-offset:4px}

/* Message réservé à l'équipe : il ne doit pas ressembler au reste du bloc. */
.mois-alerte{
  margin:18px 0 0;padding:12px 14px;border-radius:10px;
  background:rgba(206,53,32,.14);border-left:3px solid var(--tomate-clair);
  color:var(--tomate-clair);font-size:14px;line-height:1.5;
}
.mois-recette{color:var(--creme);font-size:16.5px;line-height:1.55;margin:14px 0 0}
.mois-texte{color:var(--sourdine);font-size:15px;line-height:1.5;margin:12px 0 0}

/* Les lignes commandables reprennent exactement la mise en forme de la
   carte — même nom, même trait pointillé, même prix à droite : on commande
   ici comme on commande partout ailleurs. La recette n'y est pas répétée,
   elle est déjà lue en haut du bloc. */
.mois-lignes{margin-top:20px;padding-top:4px;border-top:1px solid rgba(162,101,58,.3)}
.mois .plat{border-bottom:0;padding:14px 0 0}
.mois .plat .garniture{display:none}
.mois .plat .nom{font-family:Fraunces,serif;font-size:22px;max-width:70%}
.mois .plat .nom > button.ouvre-fiche{text-underline-offset:5px}
.mois .plat .prix{font-size:20px}
.mois .plat .compteur{margin-top:12px}

/* --------------------------------------------------- fiche produit */
/* Même mécanique que le bon de commande : un voile, puis une feuille qui
   monte du bas sur téléphone et se centre sur grand écran. */
body.fiche-ouverte .voile#voile-fiche{opacity:1;pointer-events:auto}

.fiche{
  position:fixed;left:0;right:0;bottom:0;z-index:1210;
  max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--nuit-800);border-top:1px solid var(--cuivre);
  border-radius:18px 18px 0 0;
  transform:translateY(100%);transition:transform .3s cubic-bezier(.22,.9,.3,1);
}
body.fiche-ouverte .fiche{transform:translateY(0)}

.fiche-fermer{
  position:absolute;top:12px;right:12px;z-index:2;
  width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(10,24,53,.72);color:var(--creme);font-size:26px;line-height:1;
  backdrop-filter:blur(6px);
}

/* Format 4/3 : c'est celui des photos de pizzas, et il laisse voir la garniture
   jusqu'au bord de la pâte. Une hauteur fixe rognait le dessus et le dessous. */
.fiche-photo{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  border-radius:18px 18px 0 0;background:var(--nuit);
}
.fiche-diapos{
  display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.fiche-diapos::-webkit-scrollbar{display:none}
.fiche-diapos img{
  flex:0 0 100%;width:100%;height:100%;object-fit:cover;display:block;
  scroll-snap-align:center;
}

/* Les puces ne servent qu'à dire combien de photos existent : sans elles,
   rien n'indique qu'on peut faire glisser. */
.fiche-puces{
  position:absolute;left:0;right:0;bottom:12px;
  display:flex;gap:7px;justify-content:center;
}
.fiche-puces button{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.45);box-shadow:0 1px 3px rgba(0,0,0,.5);
  transition:background-color .2s ease,transform .2s ease;
}
.fiche-puces button.actif{background:#fff;transform:scale(1.25)}

.fiche-corps{padding:20px var(--marge) calc(26px + env(safe-area-inset-bottom))}
.fiche h2{font-family:Fraunces,serif;font-size:28px;line-height:1.15;margin:0}
.fiche-garniture{color:var(--creme);font-size:16.5px;line-height:1.55;margin:12px 0 0}
.fiche-texte{color:var(--sourdine);font-size:15.5px;line-height:1.65;margin-top:14px}
.fiche-texte p{margin:0 0 10px}
.fiche-texte p:last-child{margin-bottom:0}

.fiche-allergenes{
  margin-top:18px;padding:14px 16px;border-radius:12px;
  background:rgba(10,24,53,.55);border-left:3px solid var(--cuivre);
}
.fiche-allergenes h3{
  font-family:Karla,sans-serif;font-size:13px;margin:0 0 6px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--cuivre);
  padding-bottom:0;border-bottom:0;
}
.fiche-allergenes p{margin:0;color:var(--creme);font-size:15px;line-height:1.5}

.fiche-pied{
  display:flex;align-items:center;gap:16px;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--nuit-700);
}
.fiche-prix{
  font-family:Fraunces,serif;font-size:24px;font-weight:700;
  font-variant-numeric:tabular-nums;margin-right:auto;
}
.fiche-ajouter{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 26px;border:0;border-radius:12px;cursor:pointer;
  background:var(--cuivre);color:#fff;font:700 16px Karla,sans-serif;
}
.fiche-ajouter:active{filter:brightness(1.08)}

/* Sur téléphone la fiche prend tout l'écran. Une feuille à 88 % laissait
   une bande de page derrière elle, qui invitait à défiler la page plutôt
   que la fiche, et amputait la photo de la moitié de sa hauteur. Ici la
   photo tient son 4/3 en pleine largeur, le texte défile seul, et le prix
   avec son bouton restent collés en bas, toujours atteignables au pouce. */
@media (max-width:719px){
  .fiche{
    top:0;bottom:0;left:0;right:0;height:100dvh;max-height:none;
    display:flex;flex-direction:column;overflow:hidden;
    border-radius:0;border-top:0;background:var(--nuit);
  }

  /* La page derrière ne doit plus défiler : deux zones de défilement
     superposées rendent le geste imprévisible. */
  body.fiche-ouverte{overflow:hidden}

  .fiche-photo{flex:none;border-radius:0}

  .fiche-corps{
    flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:22px var(--marge) 0;
  }

  .fiche-fermer{
    position:fixed;top:calc(12px + env(safe-area-inset-top));right:12px;
    width:44px;height:44px;
  }

  .fiche-pied{
    position:sticky;bottom:0;margin:22px calc(var(--marge) * -1) 0;
    padding:14px var(--marge) calc(14px + env(safe-area-inset-bottom));
    background:var(--nuit);border-top:1px solid var(--nuit-700);
  }
  .fiche-ajouter{min-height:52px;flex:1;max-width:60%;justify-content:center}
}

/* Sur grand écran la feuille devient une fenêtre : monter du bas n'a de
   sens que là où le pouce est en bas. */
@media (min-width:720px){
  .fiche{
    left:50%;right:auto;bottom:auto;top:50%;width:min(560px,92vw);
    border-radius:18px;border:1px solid var(--cuivre);
    transform:translate(-50%,-46%) scale(.98);opacity:0;
    transition:transform .26s cubic-bezier(.22,.9,.3,1),opacity .2s ease;
  }
  body.fiche-ouverte .fiche{transform:translate(-50%,-50%);opacity:1}
  .fiche-photo{border-radius:17px 17px 0 0}
}

/* ------------------------- entrée de la validation (extension) */
/* Deux portes côte à côte, hautes et lisibles : le client se reconnaît dans
   l'une ou dans l'autre avant de lire quoi que ce soit.
   Les sélecteurs partent de .pdc-entree : sans cela les règles génériques
   des boutons de page intérieure l'emportaient, et les deux portes
   ressortaient rouges avec leur texte sur une seule ligne. */
.pdc-entree{margin:0 0 30px}
.pdc-entree .pdc-entree-choix{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.pdc-entree .pdc-choix{
  display:flex;align-items:center;gap:16px;text-align:left;cursor:pointer;
  width:100%;min-height:104px;padding:20px 22px;border-radius:16px;
  border:1px solid var(--cuivre);background:transparent;color:var(--creme);
  font:inherit;
  transition:filter .2s ease,background-color .2s ease,box-shadow .2s ease;
}
.pdc-entree .pdc-choix:hover{filter:brightness(1.08)}
.pdc-entree .pdc-choix.actif{box-shadow:0 0 0 2px var(--creme-vif) inset}

/* La connexion est le cas courant : elle est pleine. La récupération de
   fiche est une reprise, plus rare : elle reste en contour. */
.pdc-entree .pdc-choix-connexion{background:var(--cuivre);border-color:var(--cuivre)}
.pdc-entree .pdc-choix-connexion .pdc-choix-titre{color:#fff}
.pdc-entree .pdc-choix-connexion .pdc-choix-detail{color:rgba(255,255,255,.85)}
.pdc-entree .pdc-choix-connexion .pdc-choix-icone{color:#fff}
.pdc-entree .pdc-choix-fiche{color:var(--creme)}
.pdc-entree .pdc-choix-fiche:hover{background:rgba(162,101,58,.18)}
.pdc-entree .pdc-choix-fiche .pdc-choix-icone{color:var(--cuivre)}

.pdc-entree .pdc-choix-icone{flex:none;width:42px;height:42px;display:block}
.pdc-entree .pdc-choix-icone svg{width:100%;height:100%;display:block}
.pdc-entree .pdc-choix-texte{display:block;min-width:0}
.pdc-entree .pdc-choix-titre{
  display:block;font-family:Fraunces,serif;font-size:20px;font-weight:700;
  line-height:1.15;color:var(--creme-vif);
}
.pdc-entree .pdc-choix-detail{
  display:block;margin-top:6px;color:var(--sourdine);
  font:400 14.5px/1.45 Karla,sans-serif;
}

/* Le choix fait, les autres portes sortent de l'écran : les laisser
   rendrait la page à nouveau indécise. La grille repasse sur une colonne
   pour que la porte retenue occupe toute la largeur. */
.pdc-entree.connexion-ouverte .pdc-entree-choix{grid-template-columns:1fr}
.pdc-entree.connexion-ouverte .pdc-choix-fiche,
.pdc-entree.connexion-ouverte .pdc-entree-nouveau{display:none}

/* Le lien de récupération est un lien, pas un bouton : il mène à une page. */
.pdc-entree a.pdc-choix{text-decoration:none}

.pdc-entree-panneau{
  margin-top:14px;padding:20px;border-radius:14px;
  border:1px solid var(--nuit-700);background:rgba(10,24,53,.45);
}
.pdc-entree-panneau form.login{border:0;padding:0;margin:0}
.pdc-entree-panneau p:first-child{margin-top:0}
.pdc-entree-panneau p:last-child{margin-bottom:0}

/* Le troisième cas, le plus fréquent, n'est pas un bouton : il n'y a rien
   à cliquer, juste à descendre. Mais il doit se voir autant que les deux
   autres, sinon on cherche sa porte parmi celles qui ne sont pas la sienne. */
.pdc-entree-nouveau{
  margin-top:16px;padding:18px 20px;border-radius:14px;
  background:var(--nuit-800);border-left:3px solid var(--cuivre);
}
.pdc-entree-nouveau-titre{
  margin:0;font-family:Fraunces,serif;font-size:19px;font-weight:700;
  color:var(--creme-vif);
}
.pdc-entree-nouveau-texte{
  margin:7px 0 0;color:var(--sourdine);font-size:15px;line-height:1.55;
}

/* Sous 620 px les deux portes s'empilent : côte à côte, les titres se
   couperaient au milieu d'un mot. */
@media (max-width:620px){
  .pdc-entree .pdc-entree-choix{grid-template-columns:1fr}
  .pdc-entree .pdc-choix{min-height:0}
}

/* ------------------------------------------------- petits écrans */
@media (max-width:620px){
  /* Les titres de page centrés : sur une colonne étroite, un titre long
     aligné à gauche laisse un vide à droite qui déséquilibre la page. */
  .page-interieure > article > h1,
  .pdc-entree-titre{text-align:center}
}

/* ------------------------------- attente de validation (extension) */
/* Une commande déposée n'est pas une commande acceptée. Le message doit
   arrêter l'œil avant le récapitulatif : c'est la seule chose à retenir
   de cette page. */
.pdc-avis-validation{
  margin:0 0 26px;padding:16px 18px;border-radius:12px;
  background:rgba(206,53,32,.14);border-left:3px solid var(--tomate-clair);
  color:var(--creme);font-size:16px;line-height:1.6;font-weight:500;
}

/* ------------------------------------------- créneaux de retrait (extension) */
/* Le créneau choisi doit se voir de loin : c'est la seule décision de cette
   page qui ne se corrige pas au comptoir. Fond cuivre, texte blanc, et une
   coche — la couleur seule ne suffit pas à qui la distingue mal. */
/* Les sélecteurs partent de .pdc-creneaux : sinon la règle générique des
   boutons de page intérieure l'emporte et tous les créneaux ressortent
   rouges, y compris ceux qui ne sont pas choisis. */
.pdc-creneaux{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 0}
.pdc-creneaux .pdc-creneau{
  min-width:96px;min-height:52px;padding:0 18px;cursor:pointer;
  border:1px solid var(--nuit-700);border-radius:12px;
  background:var(--nuit-800);color:var(--creme);
  font:700 16px Fraunces,serif;font-variant-numeric:tabular-nums;
  transition:border-color .18s ease,background-color .18s ease;
}
.pdc-creneaux .pdc-creneau:hover{border-color:var(--cuivre);background:var(--nuit-700)}
.pdc-creneaux .pdc-creneau.actif{
  background:var(--tomate);border-color:var(--tomate);color:#fff;
  box-shadow:0 6px 18px rgba(206,53,32,.35);
}
.pdc-creneaux .pdc-creneau.actif:hover{background:#B92E1C;border-color:#B92E1C}
.pdc-creneaux .pdc-creneau.actif::before{content:"✓";margin-right:7px;font-weight:700}
.pdc-creneaux .pdc-creneau:focus-visible{outline:2px solid var(--creme-vif);outline-offset:2px}

/* Fermeture du jour : le message doit arrêter l'œil avant le choix de
   l'heure, sinon on commande pour demain sans l'avoir compris. */
.pdc-retrait-ferme{
  margin:14px 0 18px;padding:14px 16px;border-radius:12px;
  background:rgba(206,53,32,.14);border-left:3px solid var(--tomate-clair);
  color:var(--creme);font-size:15.5px;line-height:1.55;
}
.pdc-retrait-ferme strong{display:block;color:var(--tomate-clair);margin-bottom:3px}

.pdc-creneaux-message{
  margin:14px 0 0;color:var(--creme);font-size:15.5px;line-height:1.5;
}

/* Commandes en ligne coupées : ce n'est pas une absence de place, c'est
   une décision. Le message doit se lire comme telle, et donner la suite. */
.pdc-creneaux-message.ferme{
  padding:14px 16px;border-radius:12px;
  background:rgba(206,53,32,.14);border-left:3px solid var(--tomate-clair);
  color:var(--creme);font-weight:600;
}

/* --------------------------------------------- code promo (extension) */
/* Ouvert, pas replié : un champ et un bouton tiennent sur une ligne. */
.pdc-promo{
  margin:0 0 22px;padding:18px 20px;border-radius:14px;
  background:var(--nuit-800);border:1px solid var(--nuit-700);
}
.pdc-promo .woocommerce-form-coupon-toggle{display:none}
.pdc-promo-actifs{
  flex:1 1 100%;margin:12px 0 0;color:var(--basilic);font-size:15px;font-weight:600;
}
.pdc-promo form.pdc-promo-form{
  display:flex!important;flex-wrap:wrap;align-items:center;gap:10px;
  border:0;padding:0;margin:0;
}
.pdc-promo form.pdc-promo-form > p{margin:0}
.pdc-promo form.pdc-promo-form > p:not(.form-row){display:none}
.pdc-promo-titre{flex:1 1 100%}
.pdc-promo-titre{
  display:block;margin:0 0 12px;font-family:Fraunces,serif;font-size:17px;
  font-weight:700;color:var(--creme-vif);
}
.pdc-promo .form-row-first{flex:1 1 200px;min-width:0}
.pdc-promo .form-row-last{flex:none}
.pdc-promo .clear{display:none}
.pdc-promo input#coupon_code{
  width:100%;min-height:52px;padding:14px 16px;border-radius:11px;
  border:1px solid var(--cuivre);background:var(--nuit);color:var(--creme-vif);
  font:600 16px Karla,sans-serif;letter-spacing:.06em;text-transform:uppercase;
}
.pdc-promo input#coupon_code::placeholder{
  color:var(--sourdine);font-weight:400;letter-spacing:0;text-transform:none;
}
.pdc-promo form.pdc-promo-form button{min-height:52px;white-space:nowrap}

/* Le voile de chargement de WooCommerce est blanc par défaut, posé en
   style en ligne : il recouvrait le récapitulatif d'un rectangle gris. */
.blockUI.blockOverlay{background:var(--nuit)!important;opacity:.6!important}

/* ------------------------------ récupération de compte (extension) */
/* Le formulaire vit sur une page ordinaire, sans l'enveloppe .woocommerce :
   ses messages échappaient donc aux règles de la boutique et ressortaient
   en blanc sur fond bleu nuit. */
.pdc-claim .woocommerce-message,
.pdc-claim .woocommerce-error{
  display:block;padding:15px 18px;border-radius:12px;margin:0 0 22px;
  list-style:none;background:var(--nuit-800);color:var(--creme);
  border:0;border-left:3px solid var(--cuivre);font-size:15.5px;line-height:1.55;
}
.pdc-claim .woocommerce-error{border-left-color:var(--tomate-clair)}
.pdc-claim .woocommerce-message::before,
.pdc-claim .woocommerce-error::before{display:none}

/* Une fois la demande envoyée, l'écran ne dit plus qu'une chose : allez voir
   vos mails. Un encart centré, court, avec une enveloppe en tête — le titre
   en pleine largeur sur trois lignes écrasait la page et rivalisait avec
   son propre H1. */
.pdc-claim-fait{
  max-width:34rem;margin:8px auto 44px;padding:32px 26px 28px;
  text-align:center;border-radius:18px;
  border:1px solid rgba(162,101,58,.38);
  background:linear-gradient(180deg,rgba(162,101,58,.13) 0%,rgba(162,101,58,.03) 100%);
}

/* L'enveloppe dit en un coup d'œil où il faut aller : ce qui reste à faire
   se passe ailleurs que sur cette page. */
.pdc-claim-fait::before{
  content:"";display:block;width:62px;height:62px;margin:0 auto 20px;
  border-radius:50%;background-color:var(--cuivre);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:30px 30px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}

.pdc-claim-titre{
  font-family:Fraunces,Georgia,serif;font-size:26px;line-height:1.25;
  color:#fff;margin:0 auto;max-width:24ch;
}
.pdc-claim-suite{
  color:#fff;font-size:17px;line-height:1.6;font-weight:500;
  margin:14px auto 0;max-width:38ch;
}
/* Le repli par téléphone n'est pas une note de bas de page : c'est la
   solution de celui dont l'email n'arrivera pas. Il se lit en clair. */
.pdc-claim-note{
  color:var(--creme);font-size:15.5px;line-height:1.6;
  margin:22px auto 0;padding-top:18px;max-width:42ch;
  border-top:1px solid rgba(233,226,213,.18);
}
.pdc-claim-note a{color:var(--lagon)}

/* Page composée avec les codes courts : les sections gèrent elles-mêmes
   leur enveloppe, la page ne doit donc rien contraindre autour d'elles. */
.page-composee{display:block;width:100%}
.page-composee > article{margin:0}
.page-composee .contenu{margin:0}

/* WordPress enveloppe le code court dans un paragraphe avant de le
   remplacer. Le navigateur referme ce paragraphe devant la première
   balise de bloc et laisse un <p> vide, dont la marge écartait la photo
   du bandeau. Les sections gèrent leur propre espacement : ici aucun
   paragraphe direct n'a de marge à donner. */
.page-composee .contenu > p{margin:0}
.page-composee .contenu > p:empty{display:none}

/* ------------------------------------------ barre d'administration */
/* Connecté, WordPress pose une barre fixe de 32 px en haut de page —
   46 px sous 783 px de large, et elle n'est plus fixe sous 601 px.
   Sans ce décalage, elle recouvre le ruban et la barre de titre. */
.admin-bar .ruban{top:32px}
.admin-bar .barre-haut{top:32px}
.admin-bar .barre-haut.fixe{top:70px}
.admin-bar.sans-ruban .barre-haut.fixe{top:32px}
.admin-bar .nav-carte{top:calc(32px + var(--haut))}

@media (max-width:782px){
  .admin-bar .ruban{top:46px}
  .admin-bar .barre-haut{top:46px}
  .admin-bar .barre-haut.fixe{top:84px}
  .admin-bar.sans-ruban .barre-haut.fixe{top:46px}
  .admin-bar .nav-carte{top:calc(46px + var(--haut))}
}

/* Sous 601 px la barre défile avec la page : plus rien à décaler. */
@media (max-width:600px){
  .admin-bar .ruban{top:0}
  .admin-bar .barre-haut{top:0}
  .admin-bar .barre-haut.fixe{top:38px}
  .admin-bar.sans-ruban .barre-haut.fixe{top:0}
  .admin-bar .nav-carte{top:var(--haut)}
}