/*
Theme Name: Margo
Theme URI: https://margoresto.com
Author: Margo
Description: Le site de Margo, « La marge de ton resto, enfin maîtrisée. » Page d'accueil complète (vidéo, fonctions, prix, questions fréquentes) aux couleurs de l'appli.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: Tous droits réservés
Text Domain: margo
*/

/* ---------- Base ---------- */
body { -webkit-font-smoothing: antialiased; }
strong, b { font-weight: 800; }
.wp-site-blocks { overflow-x: clip; }

/* Boutons : secondaire (contour marine) et « sur fond sombre » */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
	background: transparent;
	color: var(--wp--preset--color--marine);
	border: 2px solid var(--wp--preset--color--marine);
}
.wp-block-button__link { box-shadow: 0 6px 18px rgba(242, 84, 45, .25); transition: transform .15s ease, box-shadow .15s ease; }
.wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(242, 84, 45, .3); }
.wp-block-button.is-style-outline > .wp-block-button__link { box-shadow: none; }

/* ---------- En-tête ---------- */
.margo-header { position: sticky; top: 0; z-index: 50; background: rgba(248, 241, 231, .92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(47, 59, 76, .08); }
.margo-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.margo-brand img { width: 44px; height: 44px; border-radius: 22%; display: block; }
.margo-brand span { font-family: var(--wp--preset--font-family--fredoka); font-weight: 600; font-size: 1.75rem; color: var(--wp--preset--color--tomate); line-height: 1; }
.margo-nav { display: flex; align-items: center; gap: 1.4rem; font-weight: 700; }
.margo-nav a { color: var(--wp--preset--color--marine); text-decoration: none; }
.margo-nav a:hover { color: var(--wp--preset--color--tomate); }
.margo-nav .margo-nav__cta { background: var(--wp--preset--color--tomate); color: #fff; padding: .6rem 1.1rem; border-radius: 14px; }
.margo-nav .margo-nav__cta:hover { color: #fff; opacity: .92; }
@media (max-width: 820px) {
	.margo-nav .margo-nav__link { display: none; }
}

/* ---------- Sections ---------- */
.margo-section { padding-top: clamp(3rem, 6vw, 4.5rem) !important; padding-bottom: clamp(3rem, 6vw, 4.5rem) !important; }
.margo-kicker { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: var(--wp--preset--color--tomate); margin-bottom: .5rem !important; }
.margo-lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: #3d4757; }
.margo-small { font-size: .95rem; color: var(--wp--preset--color--gris); }
.margo-center { text-align: center; }
.margo-accent { color: var(--wp--preset--color--tomate); }

/* Hero */
.margo-hero h1 { letter-spacing: -.01em; }
.margo-hero h1 .margo-accent { display: block; }
.margo-proof { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font-weight: 700; color: var(--wp--preset--color--marine); font-size: .95rem; }
.margo-proof span::before { content: "✓ "; color: var(--wp--preset--color--vert); font-weight: 900; }

/* Téléphone (captures d'écran de l'appli) */
.margo-phone { margin: 0 auto !important; max-width: 300px; }
.margo-phone img { border-radius: 34px; border: 9px solid var(--wp--preset--color--marine); box-shadow: 0 30px 60px -20px rgba(31, 39, 51, .45), 0 8px 20px rgba(31, 39, 51, .15); background: #fff; }
.margo-phone.is-tilted-left { transform: rotate(-3deg); }
.margo-phone.is-tilted-right { transform: rotate(3deg); }
.margo-phone figcaption { margin-top: 1rem; text-align: center; font-size: .9rem; color: var(--wp--preset--color--gris); }
.margo-phones { gap: 2rem !important; }

/* Vidéo */
.margo-video { max-width: 420px; margin: 0 auto; }
.margo-video video, .margo-video img { width: 100%; border-radius: 28px; box-shadow: 0 30px 60px -20px rgba(31, 39, 51, .5); background: var(--wp--preset--color--marine); display: block; }
.margo-video__soon { text-align: center; color: var(--wp--preset--color--gris); font-size: .95rem; margin-top: .75rem; }

/* Cartes */
.margo-card { background: #fff; border-radius: 24px; padding: clamp(1.4rem, 3vw, 2rem) !important; box-shadow: 0 1px 2px rgba(31, 39, 51, .06), 0 10px 30px -12px rgba(31, 39, 51, .15); height: 100%; }
.margo-card h3 { margin-top: 0; }
.margo-step-number { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: var(--wp--preset--color--tomate); color: #fff; font-family: var(--wp--preset--font-family--fredoka); font-size: 1.4rem; margin: 0 0 .75rem !important; }
.margo-icon { font-size: 2rem; line-height: 1; margin: 0 0 .5rem !important; }

/* Chiffres du problème */
.margo-stat { background: #fff; border-radius: 24px; padding: 1.6rem !important; text-align: center; box-shadow: 0 10px 30px -12px rgba(31, 39, 51, .15); }
.margo-stat__num { font-family: var(--wp--preset--font-family--fredoka); font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; color: var(--wp--preset--color--rouge); margin: 0 0 .4rem !important; }
.margo-stat p:last-child { margin-bottom: 0; }

/* Bande marine (promesse) */
.margo-dark { background: var(--wp--preset--color--marine); color: #fff; }
.margo-dark h2, .margo-dark h3 { color: #fff; }
.margo-dark .margo-card { background: rgba(255, 255, 255, .07); box-shadow: none; color: rgba(255, 255, 255, .88); }
.margo-dark .margo-small { color: rgba(255, 255, 255, .7); }

/* Pastilles food cost */
.margo-pill { display: inline-block; padding: .15rem .7rem; border-radius: 999px; color: #fff; font-weight: 800; }
.margo-pill.is-vert { background: var(--wp--preset--color--vert); }
.margo-pill.is-rouge { background: var(--wp--preset--color--rouge); }
.margo-pill.is-orange { background: var(--wp--preset--color--orange); }

/* Fonctions */
.margo-features .wp-block-column { min-width: 0; }
.margo-list { list-style: none; padding-left: 0 !important; margin: 0; }
.margo-list li { padding: .35rem 0 .35rem 1.9rem; position: relative; }
.margo-list li::before { content: ""; position: absolute; left: 0; top: .72rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--wp--preset--color--tomate-clair); box-shadow: inset 0 0 0 5px var(--wp--preset--color--tomate); }

/* Prix */
.margo-price { background: #fff; border-radius: 32px; padding: clamp(1.8rem, 4vw, 3rem) !important; box-shadow: 0 30px 60px -25px rgba(31, 39, 51, .35); border: 3px solid var(--wp--preset--color--tomate); }
.margo-price__amount { font-family: var(--wp--preset--font-family--fredoka); font-size: clamp(3.2rem, 7vw, 4.5rem); line-height: 1; color: var(--wp--preset--color--marine); margin: 0 !important; }
.margo-price__amount small { font-size: .35em; color: var(--wp--preset--color--gris); font-family: var(--wp--preset--font-family--nunito); font-weight: 700; }
.margo-price .margo-list li::before { background: #dcfce7; box-shadow: inset 0 0 0 5px var(--wp--preset--color--vert); }

/* Questions fréquentes */
.margo-faq .wp-block-details { background: #fff; border-radius: 18px; padding: 1.1rem 1.4rem; box-shadow: 0 1px 2px rgba(31, 39, 51, .06); }
.margo-faq .wp-block-details + .wp-block-details { margin-top: .75rem; }
.margo-faq summary { font-weight: 800; cursor: pointer; color: var(--wp--preset--color--marine); }
.margo-faq summary::marker { color: var(--wp--preset--color--tomate); }
.margo-faq .wp-block-details p { margin-top: .75rem; margin-bottom: 0; }

/* Appel final */
.margo-final { background: var(--wp--preset--color--tomate); color: #fff; border-radius: 36px; }
.margo-final h2, .margo-final .margo-lead { color: #fff; }
.margo-final .wp-block-button__link { background: #fff !important; color: var(--wp--preset--color--tomate) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .15); }

/* Pied de page */
.margo-footer { background: var(--wp--preset--color--marine); color: rgba(255, 255, 255, .8); }
.margo-footer a { color: #fff; text-decoration: none; }
.margo-footer a:hover { text-decoration: underline; }
.margo-footer .margo-brand span { color: #fff; }
.margo-footer .margo-small { color: rgba(255, 255, 255, .55); }
.margo-footer-links { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: .45rem; }

/* Pages simples (mentions légales…) */
.margo-page-title { margin-top: 3rem !important; }

@media (max-width: 781px) {
	.margo-phone.is-tilted-left, .margo-phone.is-tilted-right { transform: none; }
	.margo-hide-mobile { display: none !important; }
}

/* Ce que Margo te fait gagner */
.margo-gain { border-top: 6px solid var(--wp--preset--color--vert); }
.margo-gain__num { font-family: var(--wp--preset--font-family--fredoka); font-size: clamp(2.6rem, 5vw, 3.4rem); line-height: 1; color: var(--wp--preset--color--vert); margin: 0 0 .3rem !important; }
.margo-gain h3 { margin-top: 0 !important; font-size: 1.2rem; }
.margo-gain-total { margin-top: 2rem !important; font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--wp--preset--color--marine); }

/* V2 : points forts du haut */
.margo-checks { list-style: none; padding-left: 0 !important; margin: 1.2rem 0 1.6rem; }
.margo-checks li { position: relative; padding: .3rem 0 .3rem 2rem; }
.margo-checks li::before { content: "✓"; position: absolute; left: 0; top: .3rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--wp--preset--color--vert); color: #fff; font-weight: 900; font-size: .85rem; display: flex; align-items: center; justify-content: center; }

/* Sans Margo / avec Margo */
.margo-without { background: #fdf3f1 !important; box-shadow: none !important; }
.margo-without h3 { color: var(--wp--preset--color--rouge); }
.margo-with { border: 3px solid var(--wp--preset--color--vert); }
.margo-with h3 { color: var(--wp--preset--color--vert); }
.margo-list.is-no li::before { content: "✕"; background: none; box-shadow: none; color: var(--wp--preset--color--rouge); font-weight: 900; top: .35rem; }
.margo-list.is-no li { color: #5b6472; }
.margo-list.is-yes li::before { content: "✓"; background: var(--wp--preset--color--vert); box-shadow: none; color: #fff; font-size: .75rem; font-weight: 900; display: flex; align-items: center; justify-content: center; }

/* Les 6 fonctions qui rapportent */
.margo-top { margin-top: clamp(2.5rem, 6vw, 4.5rem) !important; }
.margo-top__title { font-size: var(--wp--preset--font-size--x-large) !important; margin-top: 0 !important; }
.margo-top__gain { font-weight: 800; color: var(--wp--preset--color--vert); padding-left: 1.8rem; position: relative; }
.margo-top__gain::before { content: "€"; position: absolute; left: 0; top: .05rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--wp--preset--color--vert); color: #fff; font-size: .8rem; display: flex; align-items: center; justify-content: center; }
.margo-phone.is-small { max-width: 270px; }
@media (min-width: 782px) {
	.margo-top.is-reversed { flex-direction: row-reverse; }
}
.margo-all { margin-top: clamp(3rem, 6vw, 4.5rem) !important; background: #fff; border-radius: 24px; padding: 1.4rem 1.6rem; box-shadow: 0 1px 2px rgba(31, 39, 51, .06); }
.margo-all > summary { font-weight: 800; color: var(--wp--preset--color--marine); cursor: pointer; font-size: 1.15rem; }
.margo-all .margo-card { box-shadow: none; background: var(--wp--preset--color--creme); }
.margo-all h4 { margin: 0 0 .5rem; font-size: 1.1rem; }

/* Garantie */
.margo-guarantee { background: #dcfce7; color: #14532d; border-radius: 18px; padding: 1rem 1.2rem; }