/* Le 216 · décors repris des dépliants (plan en 5 temps du 1/11) : porte de la couverture, tampon du titre, piment + plaque + pièce, horloge de Tunis, carte de la Tunisie en filigrane.
   Aucune animation : tout est statique (rien à mesurer sur le Redmi côté fluidité). */

/* 1 et 2) Première image de chaque partie : la porte de la couverture du dépliant (bleue au restaurant, jaune à la street food) avec sa mobylette et le tampon du titre */
.couverture{position:relative;margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:19/21;max-height:660px;width:100%;box-shadow:0 24px 44px -24px rgba(0,0,0,.6)}
.couverture img{width:100%;height:100%;object-fit:cover;object-position:top}   /* cadrée juste sous les roues : plus de bande vide (retour Redmi 5/11) */
.tampon{position:absolute;top:8%;right:6%;padding:10px 16px 8px;rotate:-3deg;text-align:center;font-family:var(--cond);font-weight:700;text-transform:uppercase;font-size:clamp(22px,5.4vw,34px);line-height:1;letter-spacing:.03em;border:3px solid currentColor;border-radius:8px}
.a-table .tampon{background:rgba(23,47,125,.92);color:#fff}
.express .tampon{background:#141010;color:#ffc928}
@media (min-width:900px){.haut .couverture{max-height:620px;justify-self:center;max-width:470px}}

/* 3) Piment, plaque « 216 » et pièce de 100 millimes : mêmes objets et même ordre que sur l'intérieur du dépliant, à 42 % comme là-bas */
.trio{display:flex;justify-content:center;align-items:center;gap:clamp(18px,6vw,56px);padding:30px 20px;pointer-events:none}
.trio img{height:auto;display:block;opacity:.42}
.t-piment{width:clamp(70px,17vw,120px);rotate:8deg}
.t-plaque{width:clamp(130px,34vw,220px)}
.trio .t-piece{width:clamp(64px,15vw,104px);rotate:-6deg;opacity:.78}   /* la pièce, plus pâle que les autres, reprend du contraste */
.express .trio img{opacity:.5}
.express .trio .t-piece{opacity:.85}

/* 4) Horloge de Tunis près des horaires (accueil, rubrique « Venir ») */
.venir{position:relative;overflow:hidden}
.venir .wrap{position:relative;z-index:1}
.horloge{position:absolute;z-index:0;right:clamp(8px,6vw,90px);bottom:0;height:min(88%,300px);width:auto;opacity:.5;pointer-events:none}
@media (max-width:767px){.horloge{height:190px;right:6px;opacity:.38}}

/* 5) Carte de la Tunisie : dans le bandeau final de chaque page, à droite (contour blanc sur le bleu du restaurant, jaune sur le rouge de la street food).
   Remplace l'ancien filigrane du pied de page, et l'étiquette « Harissa 216 » de la street food. */
.appel{position:relative;overflow:hidden}
.appel .wrap{position:relative;z-index:1}
.carte-tunisie{position:absolute;z-index:0;right:clamp(16px,9vw,170px);top:50%;translate:0 -50%;height:min(88%,300px);width:auto;pointer-events:none}
/* téléphone : la carte reste en haut à droite, à côté du titre, pour ne jamais passer derrière les boutons et les liens */
@media (max-width:767px){.carte-tunisie{height:118px;right:14px;top:22px;bottom:auto;translate:none}.appel h2{max-width:calc(100% - 92px)}}

/* Petites photos des plats sur les lignes de la carte (vraies photos de Sami ; desserts, baguette, makloub et chapati : photos générées, comme sur la télé) */
.carte li:has(.vignette){align-items:center}
.vignette{order:0;flex:0 0 auto;width:56px;height:56px;margin-right:4px;border-radius:12px;object-fit:cover;background:var(--chaux-2)}
.express .vignette{background:var(--charbon-2)}
@media (max-width:420px){.vignette{width:48px;height:48px}}

/* Photo du tacos, au-dessus du composeur */
.photo-tacos{max-width:380px;margin:0 0 26px}
@media (min-width:900px){.photo-tacos{max-width:360px}}

/* Icônes dans les boutons Instagram et TikTok */
.reseaux a svg{flex:0 0 auto;margin:0}

/* Page des mentions légales */
.mentions .wrap{max-width:820px}
.mentions h1{font-family:var(--serif);font-weight:600;color:var(--bleu);font-size:clamp(36px,6vw,56px);margin:0 0 10px}
.mentions h2{font-family:var(--serif);font-weight:600;color:var(--bleu);font-size:clamp(24px,4vw,30px);margin:40px 0 12px}
.mentions p{max-width:68ch}
.fiche{margin:0;border-top:1px solid #ddd3c1}
.fiche div{display:grid;grid-template-columns:1fr;gap:2px;padding:12px 0;border-bottom:1px solid #ddd3c1}
.fiche dt{font-size:14px;color:var(--gris);text-transform:uppercase;letter-spacing:.04em}
.fiche dd{margin:0;font-weight:600}
@media (min-width:700px){.fiche div{grid-template-columns:240px 1fr;gap:20px}}
.a-completer{background:#fff1a8;color:#5a3b00;padding:1px 6px;border-radius:6px;font-weight:700}