/*
 * Pizzalove Styles 1.0.0
 * Palette et polices viennent de Pizzalove WOW (variables sur :root). Les valeurs
 * de repli ci-dessous ne servent que si WOW est absent. Deux registres :
 * « fiche » (clair, papier) pour lire, « laboratoire » (sombre, quadrillé) pour
 * jouer avec le calculateur.
 */
.pzls, .pzls-sec {
	/* Valeurs littérales, pas var(--ink) : la feuille du calculateur Fornello
	   redéfinit --ink, --paper et d'autres sur :root, ce qui rendait les titres
	   de cette page noirs sur fond noir. Ces valeurs sont celles de Pizzalove WOW. */
	--z-soot: #14110F;
	--z-soot2: #1D1815;
	--z-flour: #F4EFE6;
	--z-flour2: #EAE2D5;
	--z-ink: #F7F3EC;
	--z-ash: #BCB0A2;
	--z-pink: #241C16;
	--z-pdim: #574C41;
	--z-ember: #F26224;
	--z-flame: #FF9D3A;
	--z-crust: #8A4A20;
	--z-disp: var(--disp, Georgia, 'Times New Roman', serif);
	--z-ui: var(--ui, system-ui, -apple-system, 'Segoe UI', sans-serif);
	--z-mono: var(--mono, ui-monospace, 'SFMono-Regular', Menlo, monospace);
	--z-line: rgba(255, 255, 255, .14);
	--z-lined: rgba(36, 28, 22, .18);
}

body { background: #14110F; }

/* ---- sections ---- */
.pzls-sec { background: var(--z-soot); color: var(--z-ink); font-family: var(--z-ui); font-size: 17px; line-height: 1.6; padding: 64px 22px; position: relative; }
.pzls-sec > .elementor-widget, .pzls-sec > .e-con-inner > .elementor-widget { max-width: 820px; margin-left: auto; margin-right: auto; width: 100%; }
.pzls-sec .elementor-widget-shortcode { max-width: 1060px; }
.pzls-hero .elementor-widget-shortcode { max-width: 820px; }
.pzls-paper { background: var(--z-flour); color: var(--z-pink); }
.pzls-lab { background-color: var(--z-soot2); background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 28px 28px; }
.pzls-chrome { padding: 0; background: transparent; }
.pzls-chrome > .elementor-widget { max-width: none; }

/* La touche italienne : un filet tricolore sous l'en-tête de page, rien de plus. */
.pzls-hero { padding-top: 48px; padding-bottom: 64px; }
.pzls-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #009246 0 33.33%, #F4EFE6 33.33% 66.66%, #CE2B37 66.66% 100%); }

/* ---- typographie ---- */
.pzls-h1 .elementor-heading-title, h1.pzls-h1 { font-family: var(--z-disp); font-size: clamp(38px, 7vw, 76px); line-height: .98; letter-spacing: -.03em; font-weight: 600; margin: 8px 0 22px; color: var(--z-ink); }
.pzls-h2 .elementor-heading-title { font-family: var(--z-disp); font-size: clamp(28px, 4.2vw, 44px); line-height: 1.05; letter-spacing: -.02em; font-weight: 600; margin: 0 0 14px; color: inherit; }
.pzls-paper .pzls-h2 .elementor-heading-title { color: var(--z-pink); }
.pzls-eyebrow p { font-family: var(--z-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--z-flame); margin: 0 0 8px; }
.pzls-paper .pzls-eyebrow p { color: var(--z-crust); }
.pzls-lead p { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.5; color: var(--z-ink); max-width: 62ch; margin: 0; }
.pzls-prose p, .pzls-prose li { color: var(--z-ash); max-width: 66ch; }
.pzls-prose p { margin: 0 0 15px; }
.pzls-prose h3 { font-family: var(--z-disp); font-size: 22px; line-height: 1.2; margin: 26px 0 6px; color: var(--z-ink); font-weight: 600; }
.pzls-prose ul, .pzls-prose ol { padding-left: 1.3em; margin: 0 0 15px; }
.pzls-prose li { margin: 0 0 8px; }
.pzls-prose a, .pzls-small a { color: var(--z-flame); text-underline-offset: 3px; }
.pzls-small p { font-size: 14px; }
.pzls-paper .pzls-prose p, .pzls-paper .pzls-prose li { color: var(--z-pdim); }
.pzls-paper .pzls-prose h3 { color: var(--z-pink); }
.pzls-paper .pzls-prose a { color: #B93A0C; }
.pzls-cta { display: inline-block; font-family: var(--z-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--z-soot) !important; background: var(--z-flame); padding: 13px 20px; border-radius: 4px; }

/* ---- fil d'Ariane et langues ---- */
.pzls-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 12px; padding: 0; font-family: var(--z-mono); font-size: 12px; letter-spacing: .04em; color: var(--z-ash); }
.pzls-crumbs li + li::before { content: '/'; margin-right: 10px; opacity: .5; }
.pzls-crumbs a { color: var(--z-ash); text-underline-offset: 3px; }
.pzls-langs { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-family: var(--z-mono); font-size: 12px; margin: 0 0 18px; color: var(--z-ash); }
.pzls-lang { padding: 3px 9px; border: 1px solid var(--z-line); border-radius: 3px; color: var(--z-ink); text-decoration: none; }
.pzls-lang.is-cur { background: var(--z-ink); color: var(--z-soot); border-color: var(--z-ink); }
.pzls-lang:hover { border-color: var(--z-flame); }

/* ---- fiche technique ---- */
.pzls-spec { background: #fff; border: 1px solid var(--z-lined); border-radius: 8px; padding: 6px 22px 18px; color: var(--z-pink); }
.pzls-dl { margin: 0; }
.pzls-row { display: grid; grid-template-columns: minmax(130px, 38%) 1fr; gap: 6px 16px; padding: 11px 0; border-bottom: 1px solid var(--z-lined); align-items: center; }
.pzls-row dt { font-family: var(--z-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--z-pdim); }
.pzls-row dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.pzls-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.pzls-bar { position: relative; flex: 1 1 90px; min-width: 90px; max-width: 220px; height: 6px; background: linear-gradient(90deg, var(--z-flour2), #E0D3BF); border-radius: 3px; }
.pzls-bar i { position: absolute; top: -4px; width: 3px; height: 14px; background: var(--z-ember); border-radius: 2px; transform: translateX(-50%); }
.pzls-meta { margin-top: 14px; }
.pzls-meta p { margin: 8px 0 0; }
.pzls-src { font-size: 14px; color: var(--z-pdim); }
.pzls-badge { display: inline-block; font-family: var(--z-mono); font-size: 12px; letter-spacing: .04em; padding: 4px 10px; border-radius: 3px; border: 1px solid currentColor; }
.pzls-conf-a { color: #0F6B3A; }
.pzls-conf-b { color: #8A4A20; }
.pzls-conf-c { color: #8C2F1B; }

/* ---- calculateur ---- */
.pzls-calcbox { position: relative; background: var(--z-flour); color: var(--z-pink); border-radius: 12px; padding: 14px; max-width: 920px; margin: 8px auto 0; }
.pzls-calcbox h2.fh { margin: 0 0 8px; }

/* ---- variantes ---- */
.pzls-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.pzls-card { background: var(--z-soot); border: 1px solid var(--z-line); border-radius: 8px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.pzls-card.is-ref { border-color: var(--z-flame); }
.pzls-card-h { font-family: var(--z-disp); font-size: 22px; margin: 0; color: var(--z-ink); font-weight: 600; }
.pzls-card-p { margin: 0; font-size: 15px; color: var(--z-ash); }
.pzls-facts { margin: 4px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.pzls-facts div { border-top: 1px solid var(--z-line); padding-top: 6px; }
.pzls-facts dt { font-family: var(--z-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--z-ash); }
.pzls-facts dd { margin: 2px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--z-ink); }
.pzls-card-s { margin: 0; font-size: 13px; color: var(--z-ash); }
.pzls-load { margin-top: auto; cursor: pointer; font-family: var(--z-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 12px 14px; border-radius: 4px; border: 1px solid var(--z-flame); background: transparent; color: var(--z-flame); }
.pzls-load:hover, .pzls-load.is-done { background: var(--z-flame); color: var(--z-soot); }
.pzls-load:focus-visible, .pzls-lang:focus-visible, .pzls-hub a:focus-visible { outline: 3px solid var(--z-flame); outline-offset: 2px; }

/* ---- apparentés, répertoire, affiliation ---- */
.pzls-rel { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pzls-rel a { display: block; padding: 16px; border: 1px solid var(--z-line); border-radius: 8px; color: var(--z-ink); text-decoration: none; font-family: var(--z-disp); font-size: 20px; }
.pzls-rel a:hover { border-color: var(--z-flame); }
.pzls-hub { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pzls-hub li { display: flex; }
.pzls-hub a { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 18px; background: #fff; border: 1px solid var(--z-lined); border-radius: 8px; color: var(--z-pink); text-decoration: none; }
.pzls-hub-d { font-size: 14px; line-height: 1.45; color: var(--z-pdim); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pzls-hub a:hover { border-color: var(--z-ember); }
.pzls-hub-t { font-family: var(--z-disp); font-size: 22px; line-height: 1.15; font-weight: 600; }
.pzls-hub-m { font-family: var(--z-mono); font-size: 12px; color: var(--z-pdim); }
.pzls-aff-sec:empty, .pzls-aff-sec .pzls-affbox:empty { display: none; }
.pzls-aff-note { font-size: 14px; color: var(--z-pdim); }
.pzls-aff a { color: #B93A0C; }
.pzls-h2 { font-family: var(--z-disp); }

@media (max-width: 640px) {
	.pzls-sec { padding: 44px 16px; }
	.pzls-row { grid-template-columns: 1fr; }
	.pzls-bar { max-width: none; }
}
@media (prefers-reduced-motion: no-preference) {
	.pzls-load, .pzls-lang, .pzls-hub a, .pzls-rel a { transition: background .15s, color .15s, border-color .15s; }
}

/* Les boutons FR / EN / IT du calculateur sont posés en haut à droite : on leur laisse la place. */
