/* =========================================================
   Restaurant Pizzeria Anatole — feuille de style commune
   ========================================================= */

:root{
  --bordeaux:#8E2430;
  --braise:#5F1520;
  --nuit:#3A0D16;
  --mangue:#F4A62A;
  --feuille:#3E8E52;
  --creme:#F7EAD3;
  --creme-2:#EBDAC0;
  --encre:#2A150C;
  --gris:#5d4634;
  --gris-clair:#7a6350;

  --mesure:68rem;
  --mesure-texte:42rem;
  --pas:clamp(3.5rem, 7vw, 6.5rem);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

body{
  font-family:'Karla',system-ui,sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65;
  color:var(--encre);
  background:var(--creme);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Fraunces',Georgia,serif;
  font-variation-settings:'SOFT' 40,'WONK' 1;
  line-height:1.02;
  letter-spacing:-.018em;
  font-weight:900;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--mangue);outline-offset:3px;border-radius:2px}

.enveloppe{width:min(100% - 2.5rem, var(--mesure));margin-inline:auto}

/* ---------- barre ---------- */
.barre{
  position:sticky;top:0;z-index:50;
  background:var(--braise);
  color:var(--creme);
  border-bottom:1px solid rgba(247,234,211,.14);
}
.barre .enveloppe{display:flex;align-items:center;gap:1.25rem;min-height:4.25rem}
.marque{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}
.marque img{width:40px;height:40px;border-radius:9px;display:block}
.marque b{
  font-family:'Fraunces',serif;font-weight:900;font-size:1.12rem;
  font-variation-settings:'SOFT' 40,'WONK' 1;letter-spacing:-.01em;
}
.marque i{display:block;font-style:italic;font-size:.74rem;color:var(--mangue);line-height:1.2}
.nav{display:flex;gap:1.5rem;font-size:.92rem;font-weight:500}
.nav a{text-decoration:none;padding-block:.35rem;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--mangue)}
.nav .nav-promo{
  color:var(--mangue);font-weight:700;
  border:1px solid rgba(244,166,42,.55);border-radius:999px;
  padding:.32rem .85rem;
}
.nav .nav-promo:hover{background:var(--mangue);color:var(--nuit);border-color:var(--mangue)}
.burger{display:none}
@media (max-width:820px){
  .burger{
    display:flex;align-items:center;justify-content:center;
    width:2.8rem;height:2.8rem;border-radius:12px;
    background:rgba(247,234,211,.1);border:1px solid rgba(247,234,211,.22);
    color:var(--creme);cursor:pointer;
  }
  .burger svg{width:1.5rem;height:1.5rem}
  .burger .x{display:none}
  .barre.ouverte .burger .b{display:none}
  .barre.ouverte .burger .x{display:block}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;
    background:var(--braise);
    border-top:1px solid rgba(247,234,211,.14);
    box-shadow:0 18px 30px rgba(0,0,0,.35);
    padding:.4rem 1.25rem 1rem;
  }
  .barre.ouverte .nav{display:flex}
  .nav a{
    padding:.95rem .2rem;font-size:1.05rem;
    border-bottom:1px solid rgba(247,234,211,.1);
  }
  .nav a:last-child{border-bottom:0}
  .nav .nav-promo{
    margin:.6rem 0 .4rem;text-align:center;padding:.75rem;
    border-bottom:1px solid rgba(244,166,42,.55);
  }
}

/* ---------- hero accueil ---------- */
.hero{
  color:var(--creme);
  padding-block:clamp(3rem,7vw,5.5rem) 0;
  position:relative;overflow:hidden;
  background:#1A110D;
}
/* la vidéo remplit le hero, derrière le contenu */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;pointer-events:none;
}
/* voile sombre pour garder l'accroche lisible sur l'image animée */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg, rgba(20,12,9,.82) 0%, rgba(20,12,9,.55) 48%, rgba(20,12,9,.25) 100%),
             linear-gradient(180deg, rgba(20,12,9,.4) 0%, transparent 32%, rgba(20,12,9,.45) 100%);
}
/* Sur les écrans étroits, la photo passe derrière : un fondu sombre
   garde le texte lisible sans teinter l'image. */
@media (max-width:900px){
  .hero::before{
    background:linear-gradient(180deg, rgba(20,12,9,.88) 0%, rgba(20,12,9,.74) 55%, rgba(20,12,9,.9) 100%);
  }
}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:8px;
  background:linear-gradient(90deg,var(--bordeaux) 0 33%,var(--mangue) 33% 66%,var(--feuille) 66%);
}
.accroche{font-size:clamp(2.6rem,7.2vw,5rem);max-width:16ch;margin-bottom:.9rem}
.accroche em{
  font-style:italic;font-weight:400;color:var(--mangue);
  font-variation-settings:'SOFT' 60,'WONK' 1;
}
.sous{
  font-size:clamp(1.02rem,.98rem + .35vw,1.2rem);
  max-width:46ch;color:var(--creme-2);
  margin-bottom:clamp(2.5rem,5vw,3.5rem);
}
.temps{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(247,234,211,.2);
  /* fond propre : sans lui les trois temps passent sur la pizza */
  background:rgba(20,12,9,.62);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.temps > div{padding:1.6rem 1.4rem 2.6rem;border-right:1px solid rgba(247,234,211,.2)}
.temps > div:last-child{border-right:0}
.heure{
  font-family:'Fraunces',serif;font-weight:900;
  font-size:clamp(1.5rem,3.6vw,2.3rem);
  color:var(--mangue);line-height:1;
  font-variation-settings:'SOFT' 40,'WONK' 1;
}
.quoi{margin-top:.55rem;font-weight:700;font-size:clamp(.95rem,2.2vw,1.1rem)}
.detail{margin-top:.2rem;font-size:clamp(.8rem,1.8vw,.92rem);color:var(--creme-2);line-height:1.45}
@media (max-width:620px){
  .temps{grid-template-columns:1fr}
  .temps > div{border-right:0;border-bottom:1px solid rgba(247,234,211,.2);padding-block:1.15rem 1.35rem}
  .temps > div:last-child{border-bottom:0;padding-bottom:2.4rem}
  .heure{font-size:1.45rem}
}

/* ---------- promo ---------- */
.promo{background:var(--mangue);color:var(--nuit);padding-block:clamp(3.5rem,7vw,5.5rem);overflow:hidden}
.promo .enveloppe{display:flex;flex-direction:column;align-items:center;text-align:center}
.promo-quand{
  display:inline-block;font-weight:700;font-size:.78rem;letter-spacing:.11em;
  text-transform:uppercase;background:var(--nuit);color:var(--mangue);
  padding:.34rem .8rem;border-radius:3px;margin-bottom:1.6rem;
}
.promo-cadre{
  transform:rotate(-6.5deg);
  box-shadow:0 26px 54px rgba(58,13,22,.42);
  line-height:0;max-width:26rem;width:100%;
  margin-block:1.2rem 2rem;
}
.promo-affiche{display:block;width:100%;height:auto}
.promo-titre{
  font-family:'Fraunces',serif;font-weight:900;
  font-variation-settings:'SOFT' 40,'WONK' 1;
  font-size:clamp(1.8rem,4.4vw,2.7rem);
  line-height:1.04;letter-spacing:-.022em;margin-top:2.8rem;
}
.promo-titre .offert{color:var(--bordeaux)}
.promo-regles{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:.5rem 2rem;margin-top:1.3rem;padding-top:1.3rem;
  border-top:2px solid rgba(58,13,22,.28);
  font-size:.95rem;max-width:56rem;
}
.promo-regles b{font-weight:700}

/* ---------- barre d'appel ---------- */
.appels{background:var(--nuit);color:var(--creme);padding-block:1.5rem}
.appels .enveloppe{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.1rem}
.appels p{font-size:.95rem;color:var(--creme-2);margin-right:auto}
.tel{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:'Fraunces',serif;font-weight:900;font-size:1.18rem;
  font-variation-settings:'SOFT' 40;
  background:var(--mangue);color:var(--nuit);
  padding:.72rem 1.3rem;border-radius:999px;text-decoration:none;
  transition:background .16s;
}
.tel:hover{background:#ffbe4d}
.tel span{font-family:'Karla',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.06em;opacity:.72}

/* ---------- sections ---------- */
section{padding-block:var(--pas)}
.titre{font-size:clamp(2rem,4.6vw,3.1rem);margin-bottom:.6rem}
.chapeau{max-width:54ch;color:var(--gris);margin-bottom:2.5rem}

/* ---------- carte pizzas ---------- */
.base-titre{
  font-family:'Fraunces',serif;font-weight:600;font-style:italic;
  font-size:clamp(1.35rem,3vw,1.75rem);color:var(--bordeaux);
  display:flex;align-items:baseline;gap:1rem;margin:3rem 0 .3rem;
}
.base-titre:first-of-type{margin-top:0}
.base-titre::after{content:"";flex:1;height:1px;background:var(--creme-2)}
.base-note{font-size:.88rem;color:var(--gris-clair);margin-bottom:1.2rem}

table{width:100%;border-collapse:collapse}
tbody tr{border-bottom:1px solid var(--creme-2)}
tbody tr:last-child{border-bottom:0}
tbody th{
  text-align:left;font-weight:400;padding:.95rem 1rem .95rem 0;
  display:flex;align-items:center;gap:1rem;
}
.p-photo{
  flex:none;width:72px;height:72px;
  border-radius:50%;object-fit:cover;
  border:3px solid #fff;
  box-shadow:0 4px 12px rgba(42,21,12,.2);
}
.p-photo.vide{
  display:block;
  background:
    repeating-linear-gradient(-45deg, var(--creme-2) 0 6px, transparent 6px 12px);
  box-shadow:none;border-color:var(--creme);
}
.p-texte{display:block;min-width:0}
.p-nom{
  display:block;font-family:'Fraunces',serif;font-weight:600;
  font-size:1.15rem;font-variation-settings:'SOFT' 40;letter-spacing:-.01em;
}
.p-ing{display:block;font-size:.88rem;color:var(--gris-clair);line-height:1.45;margin-top:.1rem}
tbody td{
  text-align:right;padding:.95rem 0 .95rem 1.4rem;
  font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;width:1%;
}
.p-lbl{display:none;font-weight:700;font-size:.68rem;color:#9b8877;margin-right:.3rem;letter-spacing:.04em}
tr[data-maison] .p-nom::after{
  content:"la maison";
  font-family:'Karla',sans-serif;font-weight:700;font-size:.62rem;
  letter-spacing:.09em;text-transform:uppercase;
  background:var(--feuille);color:#fff;
  padding:.2rem .5rem;border-radius:3px;margin-left:.6rem;vertical-align:.18em;
}
.tailles{
  display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1.8rem;padding-top:1.2rem;
  border-top:2px solid var(--encre);font-size:.9rem;
}
.tailles b{font-family:'Fraunces',serif;font-weight:900;margin-right:.3rem}
@media (max-width:640px){
  tbody th{padding-bottom:.5rem;padding-right:0;gap:.85rem}
  .p-photo{width:60px;height:60px;border-width:2px}
  tbody td{display:inline-block;width:auto;padding:0 1.5rem .95rem 0;text-align:left;font-size:.98rem}
  .p-lbl{display:inline}
  tbody tr{display:block;padding-block:.35rem}
}

/* ---------- kréyol ---------- */
#kreyol{
  color:var(--creme);
  background:
    linear-gradient(90deg, rgba(61,14,23,.94) 0%, rgba(61,14,23,.6) 40%, rgba(61,14,23,.12) 75%, rgba(61,14,23,.05) 100%),
    url("kreyol-fond.jpg") right center/cover fixed no-repeat,
    var(--bordeaux);
}
/* le fixed ne tient pas sur iOS : on retombe sur un fond simple */
@supports (-webkit-touch-callout: none){
  #kreyol{background:
    linear-gradient(90deg, rgba(61,14,23,.94) 0%, rgba(61,14,23,.6) 40%, rgba(61,14,23,.12) 75%, rgba(61,14,23,.05) 100%),
    url("kreyol-fond.jpg") right center/cover no-repeat, var(--bordeaux);}
}
#kreyol .chapeau{color:var(--creme-2)}
.kgrille{
  display:grid;gap:1px;background:rgba(247,234,211,.22);
  grid-template-columns:repeat(3,1fr);
  border:1px solid rgba(247,234,211,.22);
}
@media (max-width:920px){.kgrille{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.kgrille{grid-template-columns:1fr}}
.kgrille > div{background:var(--bordeaux);padding:1.5rem 1.35rem}
.kgrille h3{font-size:1.2rem;margin-bottom:.55rem;font-weight:600}
.kgrille p{font-size:.92rem;color:var(--creme-2);line-height:1.55}
.kjour{
  margin-top:2rem;padding:1.5rem 1.6rem;background:var(--braise);
  border-left:5px solid var(--mangue);
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;
}
.kjour p{margin-right:auto;max-width:44ch;font-size:.96rem;color:var(--creme-2)}
.kjour b{display:block;color:var(--creme);font-family:'Fraunces',serif;font-size:1.25rem;font-weight:900;margin-bottom:.2rem}
.lien-jour{
  display:inline-block;font-weight:700;font-size:.95rem;
  padding:.7rem 1.3rem;border-radius:999px;text-decoration:none;
  background:var(--mangue);color:var(--nuit);
}

/* ---------- flyer du jour ---------- */
.flyer{
  margin-top:2.5rem;
  display:grid;gap:clamp(1.5rem,4vw,3.4rem);
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  align-items:center;
}
/* la colonne de l'affiche est inclinée : on lui laisse la place de pivoter */
.flyer > a{
  display:block;
  width:84%;
  margin-inline:auto;
  transform:rotate(-3.5deg);
  transition:transform .25s;
}
.flyer > a:hover{transform:rotate(-1.5deg) scale(1.02)}
@media (max-width:860px){
  .flyer{grid-template-columns:1fr}
  .flyer > a{width:74%;max-width:20rem}
}
.flyer-image{
  display:block;width:100%;height:auto;
  box-shadow:0 22px 46px rgba(58,13,22,.5);
}
.flyer-date{
  display:inline-block;font-weight:700;font-size:.78rem;
  letter-spacing:.11em;text-transform:uppercase;
  background:var(--mangue);color:var(--nuit);
  padding:.34rem .8rem;border-radius:3px;margin-bottom:1rem;
}
.flyer h3{
  font-size:clamp(1.6rem,3.6vw,2.2rem);font-weight:900;
  color:var(--creme);margin-bottom:.7rem;
}
.flyer > div > p{color:var(--creme-2);line-height:1.7;margin-bottom:1rem;max-width:40ch}


/* ---------- infos ---------- */
#infos{background:var(--creme-2)}
.infogrille{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.infogrille h3{font-size:1.3rem;font-weight:600;margin-bottom:.7rem}
.infogrille p{color:var(--gris);line-height:1.7}
.infogrille a{color:var(--bordeaux);font-weight:700}
.infogrille a:hover{background:rgba(142,36,48,.1)}
.horaires{list-style:none;font-size:.96rem}
.horaires li{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.45rem 0;border-bottom:1px solid rgba(42,21,12,.13);
}
.horaires li:last-child{border-bottom:0}
.horaires span{color:var(--gris)}
.horaires b{font-weight:700;font-variant-numeric:tabular-nums}

/* =========================================================
   Pages intérieures
   ========================================================= */

.entete-page{
  background:var(--braise);color:var(--creme);
  padding-block:clamp(2.8rem,6vw,4.5rem);
  border-bottom:8px solid var(--mangue);
}
.entete-page h1{font-size:clamp(2.1rem,5.4vw,3.4rem);max-width:18ch}
.entete-page p{margin-top:.8rem;color:var(--creme-2);max-width:52ch}
.fil{font-size:.86rem;color:var(--mangue);margin-bottom:.9rem;font-weight:500}
.fil a:hover{color:var(--creme)}

.page{padding-block:clamp(2.8rem,6vw,4.5rem)}
.texte{width:min(100% - 2.5rem, var(--mesure-texte));margin-inline:auto}
.texte h2{
  font-size:clamp(1.35rem,3vw,1.7rem);font-weight:600;
  margin-top:2.8rem;margin-bottom:.7rem;color:var(--bordeaux);
}
.texte h2:first-child{margin-top:0}
.texte h3{
  font-family:'Karla',sans-serif;font-weight:700;font-size:1rem;
  letter-spacing:0;margin-top:1.6rem;margin-bottom:.3rem;
}
.texte p{margin-bottom:1rem;color:var(--gris);line-height:1.75}
.texte strong{color:var(--encre)}
.texte ul{margin:0 0 1.2rem 1.15rem;color:var(--gris)}
.texte li{margin-bottom:.45rem;line-height:1.7}
.texte a{color:var(--bordeaux);font-weight:700}
.texte a:hover{background:var(--creme-2)}
.maj{
  font-size:.86rem;color:var(--gris-clair);
  padding-top:1.2rem;margin-top:2.5rem;
  border-top:1px solid var(--creme-2);
}

/* fiche d'identité (mentions légales) */
.fiche{
  list-style:none;margin:0 0 1.5rem;
  border-top:1px solid var(--creme-2);
}
.fiche li{
  display:grid;grid-template-columns:12rem 1fr;gap:1rem;
  padding:.7rem 0;border-bottom:1px solid var(--creme-2);
  margin:0;
}
.fiche dt,.fiche .cle{color:var(--gris-clair);font-size:.92rem}
.fiche .val{font-weight:500;color:var(--encre)}
@media (max-width:560px){
  .fiche li{grid-template-columns:1fr;gap:.1rem}
}

/* champ à compléter */
.acompleter{
  background:#FFF0B8;color:#7a5200;
  padding:.1rem .45rem;border-radius:3px;
  font-weight:700;font-size:.92em;
}

/* ---------- contact ---------- */
.contact-grille{
  display:grid;gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  align-items:start;
}
@media (max-width:860px){.contact-grille{grid-template-columns:1fr}}

.canal{
  border:1px solid var(--creme-2);background:#fff;
  padding:1.5rem 1.6rem;margin-bottom:1rem;
}
.canal h2{
  font-family:'Fraunces',serif;font-weight:600;font-size:1.3rem;
  color:var(--bordeaux);margin-bottom:.15rem;
}
.canal p{font-size:.93rem;color:var(--gris);margin-bottom:1rem}
.canal .tel{font-size:1.28rem}
.canal address{font-style:normal;line-height:1.75;color:var(--gris)}
.canal address b{color:var(--encre);font-weight:700}

.plan{
  width:100%;height:24rem;border:0;display:block;
  border:1px solid var(--creme-2);border-radius:4px;
  margin-top:clamp(2rem,5vw,3.5rem);
}
@media (max-width:600px){.plan{height:18rem}}

form{border:1px solid var(--creme-2);background:#fff;padding:1.7rem 1.7rem 1.9rem}
form h2{
  font-family:'Fraunces',serif;font-weight:600;font-size:1.3rem;
  color:var(--bordeaux);margin-bottom:.15rem;
}
form > p{font-size:.93rem;color:var(--gris);margin-bottom:1.4rem}
.champ{margin-bottom:1.1rem}
.champ label{display:block;font-weight:700;font-size:.88rem;margin-bottom:.3rem}
.champ input,.champ textarea,.champ select{
  width:100%;font:inherit;font-size:.98rem;color:var(--encre);
  background:var(--creme);border:1px solid var(--creme-2);
  padding:.7rem .85rem;border-radius:3px;
}
.champ input:focus,.champ textarea:focus,.champ select:focus{
  border-color:var(--bordeaux);background:#fff;
}
.champ textarea{min-height:8rem;resize:vertical}
.envoyer{
  font:inherit;font-weight:700;font-size:.92rem;cursor:pointer;
  background:transparent;color:var(--bordeaux);
  border:1.5px solid var(--bordeaux);
  padding:.55rem 1.3rem;border-radius:999px;
  transition:background .16s, color .16s;
}
.envoyer:hover{background:var(--bordeaux);color:var(--creme)}
.form-note{font-size:.84rem;color:var(--gris-clair);margin-top:1rem;line-height:1.6}

/* =========================================================
   Photos dispersées — rondes, cerclées, penchées
   ========================================================= */

.hero, .promo, .appels, #pizzas, #kreyol, #infos, footer { position:relative; overflow:hidden }
.hero .enveloppe, .promo .enveloppe, .appels .enveloppe,
#pizzas .enveloppe, #kreyol .enveloppe, #infos .enveloppe,
footer .enveloppe { position:relative; z-index:3 }

.plat-decor{
  position:absolute;
  width:var(--t,150px); height:var(--t,150px);
  border-radius:50%;
  /* anneau proportionnel : 6 px sur une petite, 10 px sur une grande */
  padding:calc(var(--t,150px) * .042);
  background:conic-gradient(from var(--a,0deg),
             var(--mangue), var(--hib) 30%, var(--feuille) 62%, var(--mangue));
  box-shadow:0 16px 34px rgba(58,13,22,.45);
  pointer-events:none; z-index:1;
}
.plat-decor img{
  display:block;width:100%;height:100%;
  border-radius:50%;object-fit:cover;
}
/* quelques-unes cerclées d'une seule couleur, pour varier */
.plat-decor.uni-or   { background:var(--mangue) }
.plat-decor.uni-vert { background:var(--feuille) }
.plat-decor.uni-rouge{ background:var(--hib) }
.plat-decor.uni-creme{ background:var(--creme) }

/* --- emplacements --- */
.d-1 { top:-34px;    right:-44px;   --t:248px; --a:40deg;  transform:rotate(9deg) }
.d-2 { top:21%;      left:-62px;    --t:198px; --a:200deg; transform:rotate(-13deg) }
.d-3 { bottom:-46px; right:13%;     --t:175px; --a:120deg; transform:rotate(-6deg) }
.d-4 { top:4px;      left:33%;      --t:127px; --a:310deg; transform:rotate(16deg) }

.d-5 { top:-38px;    left:-46px;    --t:210px; --a:70deg;  transform:rotate(11deg) }
.d-6 { bottom:5%;    right:-50px;   --t:222px; --a:250deg; transform:rotate(-9deg) }
.d-7 { top:11%;      right:8%;      --t:137px; --a:15deg;  transform:rotate(15deg) }
.d-8 { bottom:-34px; left:11%;      --t:153px; --a:160deg; transform:rotate(-15deg) }

.d-9 { top:-32px;    right:5%;      --t:156px; --a:90deg;  transform:rotate(-8deg) }
.d-10{ bottom:-36px; left:3%;       --t:146px; --a:270deg; transform:rotate(12deg) }

.d-11{ top:50px;     right:-52px;   --t:222px; --a:30deg;  transform:rotate(-8deg) }
.d-12{ top:25%;      left:-58px;    --t:194px; --a:210deg; transform:rotate(12deg) }
.d-13{ top:51%;      right:-44px;   --t:172px; --a:130deg; transform:rotate(14deg) }
.d-14{ bottom:12%;   left:-50px;    --t:184px; --a:340deg; transform:rotate(-11deg) }
.d-15{ bottom:-40px; right:15%;     --t:163px; --a:60deg;  transform:rotate(7deg) }
.d-16{ top:2px;      left:5%;       --t:123px; --a:180deg; transform:rotate(-17deg) }

.d-17{ top:-38px;    left:4%;       --t:186px; --a:100deg; transform:rotate(-9deg) }
.d-18{ bottom:-42px; right:-38px;   --t:229px; --a:230deg; transform:rotate(7deg) }
.d-19{ top:37%;      left:-54px;    --t:170px; --a:20deg;  transform:rotate(13deg) }
.d-20{ top:15%;      right:-48px;   --t:184px; --a:290deg; transform:rotate(-12deg) }
.d-21{ bottom:13%;   left:7%;       --t:127px; --a:140deg; transform:rotate(18deg) }

.d-22{ top:-32px;    right:9%;      --t:191px; --a:50deg;  transform:rotate(-11deg) }
.d-23{ bottom:-38px; left:-48px;    --t:205px; --a:240deg; transform:rotate(8deg) }
.d-24{ top:39%;      right:-46px;   --t:160px; --a:110deg; transform:rotate(15deg) }

.d-25{ top:-34px;    left:15%;      --t:151px; --a:80deg;  transform:rotate(-10deg) }
.d-26{ bottom:-40px; right:5%;      --t:172px; --a:260deg; transform:rotate(9deg) }

@media (max-width:1280px){ .d-4,.d-7,.d-16,.d-21{display:none} }
@media (max-width:1080px){
  .d-3,.d-8,.d-9,.d-10,.d-15,.d-22,.d-25{display:none}
  .plat-decor{--t:153px}
}
@media (max-width:820px){
  .d-2,.d-12,.d-14,.d-17,.d-19,.d-26{display:none}
  .plat-decor{--t:127px}
}
@media (max-width:560px){ .plat-decor{display:none} }

/* =========================================================
   Bords déchirés entre les sections
   ========================================================= */
.promo::before, #kreyol::before, #infos::before{
  content:"";position:absolute;inset:0 0 auto 0;height:26px;z-index:4;
  background:var(--bord-haut,var(--creme));
  -webkit-mask:var(--vague); mask:var(--vague);
  -webkit-mask-size:120px 26px; mask-size:120px 26px;
  -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
}
:root{
  --vague:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='26'%3E%3Cpath d='M0 0h120v10c-15 10-25 2-40 9S45 8 30 15 10 6 0 12Z' fill='%23000'/%3E%3C/svg%3E");
}
.promo{ --bord-haut:var(--braise) }
#kreyol{ --bord-haut:var(--creme) }
#infos{ --bord-haut:var(--bordeaux) }

/* ---------- pied ---------- */

/* =========================================================
   Habillage — titres, carte, badges
   ========================================================= */

/* Titres de section : trait de pinceau doré derrière le mot */
.titre{position:relative;display:inline-block}
.titre::after{
  content:"";position:absolute;left:-.25em;right:-.25em;bottom:.06em;height:.34em;
  background:var(--mangue);opacity:.9;z-index:-1;
  border-radius:4px 14px 6px 12px;
  transform:rotate(-1.2deg);
}
#kreyol .titre::after{background:var(--mangue);opacity:.85}

/* L'accroche du hero : ombre portée épaisse, comme sur les flyers */
.accroche{
  text-shadow:
     3px 3px 0 rgba(58,13,22,.55),
     6px 7px 18px rgba(0,0,0,.35);
}
.accroche em{ text-shadow:3px 3px 0 rgba(58,13,22,.6) }

/* Carte : la ligne s'allume au survol, le prix devient une pastille */
tbody tr{transition:background .18s}
tbody tr:hover{background:rgba(244,166,42,.14)}
tbody tr:hover .p-photo{transform:scale(1.06) rotate(-4deg)}
.p-photo{transition:transform .2s}

tbody td{
  padding:.95rem 0 .95rem 1rem;
}
tbody td span.prix{
  display:inline-block;min-width:3.4em;text-align:center;
  padding:.3rem .6rem;border-radius:999px;
  background:var(--creme-2);color:var(--encre);
  font-variant-numeric:tabular-nums;
}
tbody tr:hover td span.prix{background:var(--mangue)}
/* la familiale, la plus grosse, ressort */
tbody td:last-child span.prix{background:var(--bordeaux);color:var(--creme)}
tbody tr:hover td:last-child span.prix{background:var(--braise)}

/* Titre de base : ruban plutôt que filet */
.base-titre{
  background:var(--bordeaux);color:var(--creme);
  padding:.55rem 1.3rem;border-radius:4px 16px 4px 16px;
  transform:rotate(-.8deg);
  box-shadow:0 8px 20px rgba(142,36,48,.28);
  display:inline-flex;
}
.base-titre::after{display:none}

/* La maison : badge plus affirmé */
tr[data-maison] .p-nom::after{
  background:var(--hib);
  box-shadow:0 3px 8px rgba(232,81,31,.4);
}

/* Rubriques kréyol : coins irréguliers, pas des cases */
.kgrille{border:0;background:transparent;gap:1rem}
.kgrille > div{
  background:rgba(58,13,22,.82);
  backdrop-filter:blur(2px);
  border:2px solid rgba(244,166,42,.35);
  border-radius:18px 4px 18px 4px;
}
.kgrille > div:nth-child(even){border-radius:4px 18px 4px 18px}
.kgrille h3{color:var(--mangue)}

/* Bande téléphone : liseré tricolore en haut */
.appels{border-top:6px solid transparent;
  border-image:linear-gradient(90deg,var(--feuille),var(--mangue),var(--hib)) 1}

/* =========================================================
   Habillage — titres, carte, badges
   ========================================================= */

/* Titres de section : trait de pinceau doré derrière le mot */
.titre{position:relative;display:inline-block}
.titre::after{
  content:"";position:absolute;left:-.25em;right:-.25em;bottom:.06em;height:.34em;
  background:var(--mangue);opacity:.9;z-index:-1;
  border-radius:4px 14px 6px 12px;
  transform:rotate(-1.2deg);
}
#kreyol .titre::after{background:var(--mangue);opacity:.85}

/* L'accroche du hero : ombre portée épaisse, comme sur les flyers */
.accroche{
  text-shadow:
     3px 3px 0 rgba(58,13,22,.55),
     6px 7px 18px rgba(0,0,0,.35);
}
.accroche em{ text-shadow:3px 3px 0 rgba(58,13,22,.6) }

/* Carte : la ligne s'allume au survol, le prix devient une pastille */
tbody tr{transition:background .18s}
tbody tr:hover{background:rgba(244,166,42,.14)}
tbody tr:hover .p-photo{transform:scale(1.06) rotate(-4deg)}
.p-photo{transition:transform .2s}

tbody td{
  padding:.95rem 0 .95rem 1rem;
}
tbody td span.prix{
  display:inline-block;min-width:3.4em;text-align:center;
  padding:.3rem .6rem;border-radius:999px;
  background:var(--creme-2);color:var(--encre);
  font-variant-numeric:tabular-nums;
}
tbody tr:hover td span.prix{background:var(--mangue)}
/* la familiale, la plus grosse, ressort */
tbody td:last-child span.prix{background:var(--bordeaux);color:var(--creme)}
tbody tr:hover td:last-child span.prix{background:var(--braise)}

/* Titre de base : ruban plutôt que filet */
.base-titre{
  background:var(--bordeaux);color:var(--creme);
  padding:.55rem 1.3rem;border-radius:4px 16px 4px 16px;
  transform:rotate(-.8deg);
  box-shadow:0 8px 20px rgba(142,36,48,.28);
  display:inline-flex;
}
.base-titre::after{display:none}

/* La maison : badge plus affirmé */
tr[data-maison] .p-nom::after{
  background:var(--hib);
  box-shadow:0 3px 8px rgba(232,81,31,.4);
}

/* Rubriques kréyol : coins irréguliers, pas des cases */
.kgrille{border:0;background:transparent;gap:1rem}
.kgrille > div{
  background:var(--braise);
  border:2px solid rgba(244,166,42,.35);
  border-radius:18px 4px 18px 4px;
}
.kgrille > div:nth-child(even){border-radius:4px 18px 4px 18px}
.kgrille h3{color:var(--mangue)}

/* Bande téléphone : liseré tricolore en haut */
.appels{border-top:6px solid transparent;
  border-image:linear-gradient(90deg,var(--feuille),var(--mangue),var(--hib)) 1}

/* =========================================================
   La pelle du pizzaïolo — entre dans le hero, pizza posée dessus
   ========================================================= */
.pelle{
  position:absolute;
  right:-190px; bottom:-72px;
  width:clamp(420px, 42vw, 620px);
  z-index:1;pointer-events:none;
  transform:rotate(-8deg);
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.48));
}
.pelle > img{display:block;width:100%;height:auto}

/* la pizza posée sur la partie plate de la pelle */
.pelle .dessus{
  position:absolute;
  left:6%; top:46%;
  width:52%;
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  transform:rotate(6deg) scaleY(.62);
  box-shadow:0 10px 22px rgba(0,0,0,.4);
}
.pelle .dessus img{width:100%;height:100%;object-fit:cover;display:block}

/* Le texte du hero se décale pour ne pas passer dessous. */
@media (min-width:1080px){
  .hero .accroche, .hero .sous{max-width:min(42ch,58%)}
}
@media (max-width:1079px){
  .pelle{right:-240px;bottom:-110px;width:440px;opacity:.55}
}
@media (max-width:760px){ .pelle{display:none} }

/* =========================================================
   Boutons flottants — WhatsApp à gauche, retour en haut à droite
   ========================================================= */
.flottant{
  position:fixed;bottom:1.4rem;z-index:60;
  width:3.4rem;height:3.4rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.34);
  border:0;cursor:pointer;
  transition:transform .16s, box-shadow .16s, opacity .25s, visibility .25s;
}
.flottant:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.42)}
.flottant:active{transform:translateY(0)}
.flottant svg{width:1.75rem;height:1.75rem;display:block}

.wa{left:1.4rem;background:var(--feuille)}
.wa svg{fill:var(--creme)}
.wa:hover{background:#4aa866}

.haut{
  right:1.4rem;background:var(--bordeaux);color:var(--creme);
  opacity:0;visibility:hidden;              /* n'apparaît qu'une fois la page défilée */
}
.haut.visible{opacity:1;visibility:visible}
.haut svg{fill:currentColor}

@media (max-width:560px){
  .flottant{width:3.1rem;height:3.1rem;bottom:1rem}
  .wa{left:1rem}
  .haut{right:1rem}
  .flottant svg{width:1.6rem;height:1.6rem}
}

/* ---------- protection contre la copie ---------- */
body{
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;          /* iPhone : pas de menu « Enregistrer l image » sur appui long */
}
input, textarea, select, [contenteditable]{
  -webkit-user-select:text;user-select:text;
}
img{-webkit-user-drag:none;user-drag:none}
@media print{ body{display:none} }

/* =========================================================
   Les trois moments de la journée — effet au survol et au toucher
   ========================================================= */
.temps > a.moment{
  position:relative;display:block;color:inherit;
  padding:1.6rem 1.4rem 2.6rem;
  border-right:1px solid rgba(247,234,211,.2);
  transition:background .25s, transform .25s, box-shadow .25s;
  overflow:hidden;
}
.temps > a.moment:last-child{border-right:0}
/* barre dorée qui se déploie en haut du rectangle */
.temps > a.moment::before{
  content:"";position:absolute;left:0;top:0;height:4px;width:0;
  background:var(--mangue);transition:width .35s ease;
}
/* flèche qui apparaît en bas à droite */
.temps > a.moment::after{
  content:"→";position:absolute;right:1.3rem;bottom:1rem;
  font-size:1.3rem;font-weight:700;color:var(--mangue);
  opacity:0;transform:translateX(-10px);transition:opacity .25s, transform .25s;
}
.temps > a.moment .heure{transition:transform .25s, color .25s;transform-origin:left center}

.temps > a.moment:hover,
.temps > a.moment:focus-visible{
  background:rgba(244,166,42,.14);
  box-shadow:inset 0 -1px 0 rgba(244,166,42,.4);
}
.temps > a.moment:hover::before,
.temps > a.moment:focus-visible::before{width:100%}
.temps > a.moment:hover::after,
.temps > a.moment:focus-visible::after{opacity:1;transform:translateX(0)}
.temps > a.moment:hover .heure,
.temps > a.moment:focus-visible .heure{transform:scale(1.08);color:#FFC35C}

/* au toucher, sur téléphone */
.temps > a.moment:active{background:rgba(244,166,42,.24);transform:scale(.985)}

@media (max-width:620px){
  .temps > a.moment{border-right:0;border-bottom:1px solid rgba(247,234,211,.2);padding-block:1.15rem 1.35rem}
  .temps > a.moment:last-child{border-bottom:0;padding-bottom:2.4rem}
  .temps > a.moment::after{opacity:.7;transform:none}   /* sur mobile la flèche reste visible : pas de survol */
}
@media (prefers-reduced-motion:reduce){
  .temps > a.moment, .temps > a.moment::before, .temps > a.moment::after, .temps > a.moment .heure{transition:none}
}

/* =========================================================
   Boutons téléphone à largeur égale, étiquette + numéro alignés
   ========================================================= */
.deux-tels{display:flex;flex-direction:column;gap:.45rem;width:100%;max-width:19rem}
.deux-tels .tel{
  display:grid;grid-template-columns:4.6rem 1fr;align-items:center;
  gap:.3rem .8rem;width:100%;justify-content:start;
  padding:.5rem .95rem;
  background:transparent;
  border:1.5px solid var(--mangue);
  color:var(--creme);
}
.deux-tels .tel:hover{background:var(--mangue);color:var(--nuit)}
.deux-tels .tel span{
  font-family:'Karla',sans-serif;font-weight:700;font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;opacity:.7;
  text-align:left;
}
.deux-tels .tel .num{
  font-family:'Karla',sans-serif;font-weight:700;font-size:1rem;
  letter-spacing:.01em;white-space:nowrap;
}
@media (max-width:560px){
  .deux-tels{max-width:100%}
}

/* sur la page contact, fond clair : les boutons passent en bordeaux */
.canal .deux-tels .tel{border-color:var(--bordeaux);color:var(--bordeaux)}
.canal .deux-tels .tel:hover{background:var(--bordeaux);color:var(--creme)}

/* =========================================================
   Pied de page
   ========================================================= */
footer{
  background:var(--braise);color:var(--creme-2);
  padding-block:clamp(2.5rem,5vw,3.5rem) 1.6rem;
  border-top:6px solid transparent;
  border-image:linear-gradient(90deg,var(--bordeaux),var(--mangue),var(--feuille)) 1;
}
footer .enveloppe{
  display:grid;gap:2rem clamp(2rem,5vw,4rem);
  grid-template-columns:1.4fr 1fr 1fr;
  align-items:start;
}
@media (max-width:720px){footer .enveloppe{grid-template-columns:1fr 1fr}}
@media (max-width:460px){footer .enveloppe{grid-template-columns:1fr}}

footer .sig{
  font-size:.92rem;line-height:1.6;color:var(--creme-2);
}
footer .sig b{
  display:block;font-family:'Fraunces',serif;font-weight:900;
  font-size:1.15rem;color:var(--creme);margin-bottom:.5rem;line-height:1.2;
}

footer nav{display:flex;flex-direction:column;gap:.55rem}
footer nav::before{
  content:attr(aria-label);
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mangue);margin-bottom:.35rem;
}
footer nav a{
  color:var(--creme-2);font-size:.92rem;
  display:inline-flex;align-items:center;gap:.4rem;width:fit-content;
  transition:color .16s, transform .16s;
}
footer nav a:hover{color:var(--mangue);transform:translateX(3px)}

footer .bas{
  border-top:1px solid rgba(247,234,211,.15);
  margin-top:2.2rem;padding-top:1.3rem;
}
footer .bas .enveloppe{display:block}
.legal{font-size:.8rem;color:rgba(247,234,211,.55);line-height:1.5}

/* signature Appznet dans le pied de page */
.legal-bas{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem;
}
.legal-bas > span{font-size:.8rem;color:rgba(247,234,211,.55);line-height:1.5}
.par-appznet{
  display:inline-flex;align-items:center;gap:.7rem;
  transition:opacity .16s, transform .16s;
}
.par-appznet:hover{opacity:.8;transform:translateY(-1px)}
.par-appznet small{font-family:'Fraunces',serif;font-style:italic;font-size:.82rem;color:var(--creme-2)}
.par-appznet img{width:118px;height:auto;display:block}
/* le pied est toujours bordeaux : on montre la version crème, lisible dessus */
.par-appznet .clair{display:none}
.par-appznet .sombre{display:block}

.hero .enveloppe{position:relative;z-index:2}
.hero .temps{position:relative;z-index:2}

@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .hero{background:#1A110D url("hero-video.jpg") center/cover no-repeat}
}


/* retour discret dans le fil d'Ariane */
.retour-fil{font-weight:600}
.retour-fil span{display:inline-block;transition:transform .16s}
.retour-fil:hover span{transform:translateX(-3px)}

/* sélecteur de langue dans la barre */
.barre .langues{display:flex;gap:.35rem;margin-left:auto;margin-right:.6rem}
.barre .langues button{
  min-width:2.4rem;padding:.3rem .3rem;border-radius:8px;
  border:1.5px solid rgba(247,234,211,.35);background:transparent;
  font-weight:700;font-size:.8rem;color:var(--creme);cursor:pointer;
}
.barre .langues button[aria-pressed="true"]{border-color:var(--mangue);color:var(--mangue);background:rgba(244,166,42,.14)}
@media (max-width:820px){.barre .langues{margin-right:.4rem}}

/* bases de pizza dépliables (site) */
.base-pizza{margin:0}
.base-pizza + .base-pizza{margin-top:1.4rem}
summary.base-titre{
  list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:.7rem;
  /* garde l'aspect ruban bordeaux incliné */
}
summary.base-titre::-webkit-details-marker{display:none}
summary.base-titre .fleche{font-size:1.25rem;line-height:1;transition:transform .2s;color:var(--mangue)}
.base-pizza[open] summary.base-titre .fleche{transform:rotate(90deg)}
summary.base-titre .compte{
  font-family:'Karla',sans-serif;font-weight:700;font-size:.8rem;
  background:rgba(247,234,211,.9);color:var(--bordeaux);
  min-width:1.6rem;height:1.6rem;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
}

summary.base-titre .etat{
  font-family:'Karla',sans-serif;font-weight:700;font-size:.78rem;
  color:var(--creme);opacity:.85;margin-left:.2rem;
}

/* =========================================================
   Bannière d'événements (gérée depuis l'admin)
   ========================================================= */
.evenements{padding-block:clamp(2.5rem,6vw,4rem);background:var(--nuit);position:relative;overflow:hidden}
.evenements .eyebrow{color:var(--mangue);margin-bottom:1.6rem}
.evt-grille{
  display:grid;gap:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
  justify-items:center;align-items:start;
}
.evt-carte{
  display:block;width:100%;max-width:26rem;border-radius:16px;overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.45);
  transition:transform .2s, box-shadow .2s;
}
.evt-carte:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(0,0,0,.55)}
.evt-carte img{display:block;width:100%;height:auto}

/* texte d'annonce au-dessus de l'affiche d'un événement */
.evt-titre{
  margin:0;padding:.85rem 1rem;text-align:center;
  background:var(--braise);color:#fff;font-weight:800;
  font-size:1.05rem;line-height:1.3;
}

/* localisation à côté de l'affiche d'un événement */
.evt-ligne{display:flex;flex-wrap:wrap;gap:1.1rem;justify-content:center;align-items:stretch;width:100%;grid-column:1/-1}
.evt-ligne .evt-carte{flex:1 1 20rem;max-width:26rem}
.evt-map{flex:1 1 18rem;max-width:26rem;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.45);background:#fff}
.evt-map iframe{width:100%;flex:1;min-height:240px;border:0;display:block}
.evt-itineraire{display:block;text-align:center;padding:.8rem;background:var(--braise);color:#fff;font-weight:700;text-decoration:none}