/* ============================================================
   Ardoise - Page publique (celle qu'on ouvre en scannant le QR)
   Les couleurs viennent des variables --bg / --accent injectées
   par p.php d'après les choix du propriétaire de la page.
   ============================================================ */

:root {
    --ink:    #16122A;
    --muted:  #6E6A85;
    --radius: 22px;
    --font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable',
            'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    background: var(--bg);
    background-image: linear-gradient(170deg, var(--bg-top) 0%, var(--bg) 45%, var(--bg-bottom) 100%);
    background-attachment: fixed;
    min-height: 100dvh;
}

img { max-width: 100%; display: block; }

.wrap {
    max-width: 560px;
    margin: 0 auto;
    padding: 34px 18px calc(40px + env(safe-area-inset-bottom, 0px));
}

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

.head {
    text-align: center;
    color: var(--on-bg);
    margin-bottom: 26px;
}
.head-logo {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 28px;
    margin: 0 auto 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
    background: rgba(255, 255, 255, .18);
}
.head h1 {
    margin: 0;
    font-size: clamp(28px, 8vw, 38px);
    font-weight: 800;
    letter-spacing: -.03em;
    text-wrap: balance;
}
.head p {
    margin: 10px auto 0;
    font-size: 16.5px;
    opacity: .82;
    max-width: 420px;
    text-wrap: pretty;
}
.head .rule {
    width: 54px;
    height: 4px;
    border-radius: 999px;
    background: var(--accent);
    margin: 20px auto 0;
}

/* ---------- Blocs ---------- */

.items { display: grid; gap: 16px; }

.item {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(12, 8, 40, .16);
}
.item-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #EFEDF8;
}
.item-body { padding: 17px 18px 19px; }

.item-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.item-body h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
}
.price {
    flex: none;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 800;
    font-size: 15px;
    padding: 6px 13px;
    border-radius: 999px;
    white-space: nowrap;
}
.item-body p {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: 15.5px;
    white-space: pre-line;      /* les retours à la ligne saisis sont conservés */
    text-wrap: pretty;
}

/* Bloc sans photo : plus compact, filet couleur d'accent à gauche */
.item.is-text .item-body { border-left: 5px solid var(--accent); }

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

/* Horaires, adresse, jour de fermeture : c'est l'information qu'on vient
   chercher après avoir regardé la carte. Elle mérite mieux qu'une mention
   légale en bas de page. */
.foot {
    text-align: center;
    color: var(--on-bg);
    margin-top: 34px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.55;
    opacity: .92;
    white-space: pre-line;
    text-wrap: pretty;
}
/* ---------- Page indisponible ---------- */

.gone {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 30px;
    text-align: center;
    color: #fff;
}
.gone .emoji { font-size: 54px; margin-bottom: 14px; }
.gone h1 { font-size: 26px; font-weight: 800; margin: 0 0 8px; }
.gone p  { margin: 0 0 24px; opacity: .8; }
.gone a {
    display: inline-block;
    background: #fff;
    color: #16122A;
    font-weight: 800;
    padding: 13px 24px;
    border-radius: 999px;
    text-decoration: none;
}

/* ============================================================
   Bloc Delisou (tout en bas de la page scannée)
   Carte blanche : les couleurs de fond changent d'une page à
   l'autre, le logo noir a besoin d'un support neutre.
   ============================================================ */

.delisou-card {
    margin-top: 34px;
    background: #fff;
    border-radius: var(--radius);
    border-top: 5px solid #F7941D;
    padding: 24px 20px 22px;
    text-align: center;
    box-shadow: 0 12px 30px rgba(12, 8, 40, .16);
}
.delisou-card-logo { display: inline-block; margin-bottom: 20px; }
/* La hauteur vient de l'attribut posé par delisouLogo() ; ici on garantit
   seulement que le logo ne déborde jamais de la carte sur un petit écran. */
.delisou-logo      { width: auto; max-width: 100%; margin: 0 auto; }

.delisou-card-lead {
    margin: 0 0 12px;
    font-size: 15.5px;
    color: var(--ink);
    text-wrap: pretty;
    white-space: normal;        /* le pied de page hérite d'un pre-line */
}
.delisou-card-ask { color: var(--muted); margin-bottom: 18px; }

.delisou-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    background: #16122A;
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    text-decoration: none;
}

.delisou-card-sep { height: 1px; background: #EFEDF8; margin: 22px 0 16px; }

.delisou-card-note {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--muted);
    text-wrap: pretty;
    white-space: normal;
}
.delisou-card-note b { color: var(--ink); }

.delisou-card-link {
    font-weight: 800;
    font-size: 14.5px;
    color: #E07800;
    text-decoration: none;
}

/* Page indisponible : la carte Delisou reste lisible, mais bornée. */
.gone .delisou-card { max-width: 420px; margin: 34px auto 0; text-align: center; }

/* ============================================================
   Survol — page publique
   ============================================================
   Ici, presque rien ne se clique : les blocs de la carte sont là pour
   être lus, pas ouverts. Seuls les liens du bloc Delisou réagissent,
   et l'écran « page indisponible ».
   ============================================================ */

.delisou-card-logo,
.delisou-card-btn,
.delisou-card-link,
.gone a {
    transition: transform .2s ease, box-shadow .2s ease,
                background .2s ease, opacity .2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .delisou-card-logo:hover { transform: scale(1.04); opacity: .9; }

    .delisou-card-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(22, 18, 42, .30);
        background: #241E44;
    }

    .delisou-card-link:hover { text-decoration: underline; }

    .gone a:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 26px rgba(0, 0, 0, .30);
    }
}

.delisou-card-btn:active,
.gone a:active { transform: translateY(0) scale(.97); }

a:focus-visible {
    outline: 3px solid var(--accent, #6C5CE7);
    outline-offset: 3px;
    border-radius: 12px;
}

/* Certains règlent leur système sur « animations réduites » — pour cause de
   vertiges, de migraines, ou simplement pour alléger une vieille machine.
   Ce qui les gêne, c'est le MOUVEMENT, pas la couleur.

   On supprime donc les déplacements et les agrandissements, et on garde les
   fondus de couleur : le survol continue de dire « ceci se clique », sans
   rien faire bouger à l'écran. Couper les deux reviendrait à priver ces
   personnes de l'information en même temps que de l'animation. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
    /* Aucun déplacement, où qu'il vienne. */
    *:hover, *:active, *:focus-visible {
        transform: none !important;
    }
}

/* Retour à l'éditeur — affiché au seul propriétaire (voir p.php).
   Il arrive ici par « Voir », dans le même onglet : sans ce lien, l'appli
   installée n'offrirait aucune sortie, faute de barre de navigateur.
   Couleurs autonomes : le fond est celui que le patron a choisi, on ne peut
   pas parier sur son contraste. */
.retour-appli {
    position: fixed;
    top:  calc(10px + env(safe-area-inset-top, 0px));
    left: calc(10px + env(safe-area-inset-left, 0px));
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 999px;
    background: rgba(22, 18, 42, .82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}
@media (hover: hover) and (pointer: fine) {
    .retour-appli { transition: background .18s ease, transform .18s ease; }
    .retour-appli:hover {
        background: rgba(22, 18, 42, .95);
        transform: translateY(-1px);
    }
}
/* Sur le papier, le lien n'a plus de sens. */
@media print { .retour-appli { display: none; } }

/* Signalement : présent, mais à sa place — c'est la page d'un commerçant. */
.report-link {
    text-align: center;
    margin: 16px 0 0;
    font-size: 12.5px;
}
.report-link a {
    color: var(--on-bg);
    opacity: .5;
    text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
    .report-link a:hover { opacity: .85; }
}