/* ============================================================
LEGAL.CSS — Habillage commun des pages légales
------------------------------------------------------------
Une seule feuille pour les trois documents d'un site :
mentions légales (générée par legal.js), politique de
confidentialité et CGV (pages du dépôt client).
Elle vit dans le bundle, pas dans pizzatti / mamma_pizza /
pazza_pizza : une correction de mise en forme se déploie
une fois et vaut pour les 10 établissements.
La couleur, elle, vient de la base. `legal.js` et `entity.js`
écrasent au chargement les variables ci-dessous avec
primary_color / primary_dark_color / accent_color de
l'établissement, exactement comme js/11-render.js le fait
pour l'application de commande. Les valeurs écrites ici ne
sont donc que le repli affiché le temps de la requête, ou si
la base ne répond pas.
Usage dans une page du dépôt client :
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=DM+Sans:wght@300;400;500;700&display=swap');
:root {
/* Les deux seules variables qu'un site a vocation à redéfinir. La
typographie n'est pas en base et ne se déduit d'aucune couleur :
pizzatti, mamma_pizza et pazza_pizza composent en Playfair Display et
DM Sans, food_corner en Cormorant Garamond et Outfit. Un site qui
s'écarte du couple par défaut déclare deux lignes dans son —
ce qui reste sans commune mesure avec les 70 lignes de mise en forme
qu'il dupliquait avant. */
--legal-font-title: 'Playfair Display', Georgia, serif;
--legal-font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
--legal-accent: #C9A84C;
--legal-accent-deep: #AB8F41;
--legal-gold: #C9A84C;
/* Couleur du texte cliquable. Distincte de --legal-accent : une marque
peut être très sombre (food_corner, #1C1E3A) ou très claire, et sa
couleur d'aplat devient alors illisible en texte sur le fond de la
page. legal.js et entity.js recalculent celle-ci pour garder un
contraste suffisant, en clair comme en sombre. */
--legal-link: #AB8F41;
--legal-link-deep: #8C7434;
--legal-bg: #FAF8F5;
--legal-ink: #1A1A1A;
--legal-body: #555555;
--legal-mute: #999999;
--legal-rule: rgba(0, 0, 0, .06);
/* Pas de variante sombre, volontairement : ni l'application de commande
(client.css) ni les vitrines n'en ont. Une page légale qui bascule en
sombre pendant que le reste du site reste clair n'est pas une page du
même site.
Le correctif du 5 août 2026, qui avait ajouté un mode sombre à
legal.js, répondait à un autre problème : la page générée ne posait
AUCUN fond, si bien qu'en mode sombre le navigateur éclaircissait le
texte sur un fond resté blanc. legal.css peint toujours le fond, la
panne ne peut plus se produire.
`color-scheme: light` est nécessaire : sans lui, un visiteur dont le
système est en sombre verrait les ascenseurs et les widgets natifs
rendus en sombre au milieu d'une page claire. */
color-scheme: light;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--legal-font-body);
background: var(--legal-bg);
color: var(--legal-ink);
min-height: 100vh;
}
/* Bandeau de tête. Par défaut il reprend les deux couleurs de la marque ;
`class="tricolore it"` conserve le drapeau italien des enseignes qui
l'affichaient (pizzatti), sans faire vivre de CSS dans leur dépôt. */
.tricolore { display: flex; height: 6px; }
.tricolore span { flex: 1; }
.tricolore span:nth-child(1) { background: var(--legal-accent); }
.tricolore span:nth-child(2) { background: var(--legal-gold); }
.tricolore span:nth-child(3) { background: var(--legal-accent-deep); }
.tricolore.it span:nth-child(1) { background: #2E7D32; }
.tricolore.it span:nth-child(2) { background: #FFFDF8; }
.tricolore.it span:nth-child(3) { background: #C0392B; }
.legal-page { max-width: 720px; margin: 0 auto; padding: 40px 24px 80px; }
.back-link {
display: inline-flex; align-items: center; gap: 8px;
color: var(--legal-link); text-decoration: none;
font-size: .9rem; font-weight: 600;
margin-bottom: 2rem; transition: gap .3s;
}
.back-link:hover { gap: 12px; color: var(--legal-link-deep); }
.legal-page h1 {
font-family: var(--legal-font-title);
font-size: clamp(2rem, 5vw, 2.8rem);
font-weight: 900; color: var(--legal-ink);
margin-bottom: 8px;
}
/* Les mentions légales enchaînent deux titres de premier niveau : le second
ouvre un document distinct et doit respirer. */
.legal-page h1 + h2, .legal-page h1 + .date { margin-top: 0; }
.legal-page h1:not(:first-of-type) { margin-top: 3.5rem; }
.date { font-size: .85rem; color: var(--legal-mute); margin-bottom: 2.5rem; display: block; }
.legal-page h2 {
font-family: var(--legal-font-title);
font-size: 1.2rem; font-weight: 700;
color: var(--legal-ink); margin: 2rem 0 .75rem;
padding-top: 1.25rem;
border-top: 1px solid var(--legal-rule);
}
.legal-page h2:first-of-type { border-top: none; padding-top: 0; }
/* Nom d'un établissement, sur l'apex d'une enseigne : la rubrique « Éditeur
du site » y énumère autant de sociétés qu'il y a d'exploitants. */
.legal-page h3 {
font-family: var(--legal-font-body);
font-size: .8rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .06em;
color: var(--legal-link);
margin: 1.75rem 0 .4rem;
}
.legal-page p { font-size: .92rem; color: var(--legal-body); line-height: 1.8; margin-bottom: .75rem; font-weight: 300; }
.legal-page ul { padding-left: 1.5rem; margin-bottom: .75rem; }
.legal-page li { font-size: .92rem; color: var(--legal-body); line-height: 1.8; margin-bottom: .25rem; font-weight: 300; }
.legal-page strong { font-weight: 700; color: var(--legal-ink); }
.legal-page a { color: var(--legal-link); text-decoration: none; font-weight: 500; }
.legal-page a:hover { color: var(--legal-link-deep); text-decoration: underline; }
/* Renvoi vers un document tenu ailleurs (la politique de confidentialité
propre au site, appelée depuis les mentions légales). */
/* Le fond du bouton n'est pas la couleur de marque brute mais une version
assombrie juste ce qu'il faut pour que le texte blanc atteigne 4,5:1.
Sur un doré clair, l'aplat de marque avec du blanc dessus tombait a 2:1.
La variable est calculee par legal.js / entity.js ; le repli reste la
couleur de marque. */
.legal-cta {
display: inline-block; margin: .5rem 0 1rem;
padding: .7rem 1.4rem; border-radius: 100px;
background: var(--legal-cta-bg, var(--legal-accent)); color: #fff !important;
font-weight: 600; font-size: .9rem; text-decoration: none;
transition: filter .2s, transform .2s;
}
.legal-cta:hover { filter: brightness(.9); transform: translateY(-2px); text-decoration: none; }
/* Encadré d'avertissement. Un document de vente en a besoin pour ce qui ne
doit pas passer inaperçu — exclusion du droit de rétractation, interdiction
de vente d'alcool aux mineurs. Repris de food_corner, qui l'avait défini
chez lui. */
.legal-notice {
background: #F1EDE6; /* repli si color-mix n'est pas supporté */
background: color-mix(in srgb, var(--legal-accent) 8%, var(--legal-bg));
border-left: 3px solid var(--legal-accent);
padding: 14px 18px; margin: 0 0 1rem;
}
.legal-notice p:last-child { margin-bottom: 0; }
.footer { margin-top: 40px; padding: 30px 24px; text-align: center; }
.footer-divider {
width: 60px; height: 2px;
background: linear-gradient(90deg, var(--legal-gold), var(--legal-accent));
margin: 0 auto 20px; border-radius: 1px;
}
.footer p { font-size: .8rem; color: var(--legal-mute); line-height: 1.8; }
.footer a { color: var(--legal-link); text-decoration: none; font-weight: 500; }
.footer a:hover { color: var(--legal-link-deep); }
/* Le message de repli de legal.js, quand la base ne répond pas. */
.legal-fallback { color: var(--legal-body); }