/* Theme Name: Tout un Fromage Theme URI: https://tout-un-fromage.fr Author: Tout un Fromage Description: Thème éditorial pour blog alimentation (articles + recettes interactives). Compatible avec les recettes publiées par le pipeline automation.js (grâce au shim de compatibilité dans js/theme.js). Version: 1.0.5 Requires at least: 6.4 Requires PHP: 7.4 Text Domain: tout-un-fromage */ :root{ --color-primary:#9A3412;--color-primary-light:#C2410C; --color-sage:#5B7B5E;--color-sage-light:#EAF0E7; --color-bg:#FFFBF2;--color-fg:#2B2118;--color-muted:#7A6B5E; --color-surface:#FFFFFF;--color-border:#F0E4D6; --color-yellow:#F4A93B;--color-yellow-bg:#FFF4DF; --radius-sm:10px;--radius-md:18px;--radius-lg:28px; --space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-5:48px;--space-6:64px; --shadow-soft:0 8px 24px -8px rgba(70,40,10,0.14); --shadow-card:0 2px 8px rgba(70,40,10,0.06); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --color-bg:#1C1712;--color-fg:#F3E9DD;--color-muted:#B9A996;--color-surface:#241E17; --color-border:#3A2F24;--color-sage-light:#26332A;--color-yellow-bg:#332818; --shadow-soft:0 8px 24px -8px rgba(0,0,0,0.5);--shadow-card:0 2px 8px rgba(0,0,0,0.35); } } :root[data-theme="dark"]{ --color-bg:#1C1712;--color-fg:#F3E9DD;--color-muted:#B9A996;--color-surface:#241E17; --color-border:#3A2F24;--color-sage-light:#26332A;--color-yellow-bg:#332818; } *,*::before,*::after{box-sizing:border-box} body{margin:0;background:var(--color-bg);color:var(--color-fg);font-family:-apple-system,"Segoe UI",Inter,system-ui,sans-serif;line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased} h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;font-weight:700;letter-spacing:-0.01em;margin:0;color:var(--color-fg)} a{color:inherit} img{max-width:100%;height:auto;display:block} .wrap{max-width:1180px;margin:0 auto;padding:0 var(--space-3)} section{padding:var(--space-5) 0} /* ================================================================== REVEAL AU SCROLL (générique, utilisé partout) ================================================================== */ /* Échec ouvert : le contenu .rv est visible par défaut. Ce n'est QUE si theme.js s'exécute réellement (pas bloqué par un bloqueur de pub, pas d'erreur avant ce point) qu'il ajoute lui-même .rv-pre pour activer le fondu, puis .rv-in pour révéler. Si le script ne tourne jamais, le contenu reste simplement visible en permanence — jamais caché sans espoir de révélation. */ .rv.rv-pre{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease} .rv.rv-pre.rv-in,.rv.rv-pre.in{opacity:1;transform:none} .rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s} @media (prefers-reduced-motion: reduce){.rv.rv-pre{opacity:1;transform:none;transition:none}} /* ================================================================== VOILE DE RÉVÉLATION sur les images (désactivable : Personnaliser → Animations) ================================================================== */ .voile{position:relative;overflow:hidden} .voile::after{ content:"";position:absolute;inset:0;z-index:3;background:var(--color-sage); transform:scaleX(1);transform-origin:right;transition:transform .95s cubic-bezier(.7,0,.25,1); } .voile.voile-in::after{transform:scaleX(0)} .voile img{transform:scale(1.14)} .voile.voile-in img{transform:scale(1);transition:transform 1.2s cubic-bezier(.22,.8,.3,1)} [data-plx] img{transition:none !important} @media (prefers-reduced-motion: reduce){ .voile::after{display:none} .voile img{transform:none;transition:none} } /* ================================================================== HEADER / NAV (partagé sur tout le site) ================================================================== */ .site-header{position:sticky;top:0;z-index:70;background:color-mix(in srgb, var(--color-bg) 88%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border)} .site-header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px var(--space-3);max-width:1180px;margin:0 auto} .logo{display:flex;align-items:center;gap:10px;font-family:Georgia,serif;font-weight:700;font-size:18px;text-decoration:none;color:var(--color-fg);--tf-logo-height:40px} .logo .mark{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--color-primary),var(--color-yellow));display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;flex:none} /* Contrainte forte, quelle que soit la taille du fichier téléversé : the_custom_logo() imprime son propre , jamais imbriqué dans un autre (invalide en HTML) — on cible donc ces classes directement, pas ".logo a". */ .logo--custom{display:flex;align-items:center;height:var(--tf-logo-height)} .custom-logo-link{display:flex;align-items:center;height:100%} .custom-logo-link img, img.custom-logo{max-height:var(--tf-logo-height);width:auto;height:auto;display:block} /* menu principal : rendu par wp_nav_menu() (Apparence → Menus),