/*
Theme Name:   Glucia (Elementor)
Theme URI:    https://glucia.fr
Description:  Thème enfant de Hello Elementor pour Glucia : charte Paprika, polices hébergées localement, rubrique Recettes, raccourcis pour Elementor.
Author:       Nathalie Erb
Template:     hello-elementor
Version:      1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain:  glucia
*/

/* =====================================================================
   1. POLICES (hébergées sur le site, rien n'est chargé depuis Google)
   ===================================================================== */
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-style: italic; font-display: swap; src: url("assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("assets/fonts/manrope-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 500; font-display: swap; src: url("assets/fonts/manrope-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url("assets/fonts/manrope-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-display: swap; src: url("assets/fonts/manrope-latin-700-normal.woff2") format("woff2"); }

/* =====================================================================
   2. CHARTE
   Paprika = marque, photo, Premium · Abricot = Recettes
   Pétrole = Carnet · Indigo = Actus & droits
   ===================================================================== */
:root {
	--g-brand: #CC4031; --g-brand-dark: #A8321F; --g-brand-tint: #F8E3DD;
	--g-recettes: #E4822E; --g-recettes-text: #A5541A; --g-recettes-tint: #FCE7D6;
	--g-carnet: #1E6B73; --g-carnet-tint: #DDEDEE;
	--g-info: #526295; --g-info-text: #43588F; --g-info-tint: #E3E7F1;
	--g-info-grad: linear-gradient(180deg, #616D9A, #43588F);
	--g-ink: #2B1A1F; --g-muted: #76686A; --g-rule: #EEDFDA; --g-bg: #FBF7F5;
	--g-serif: "Instrument Serif", Georgia, serif;
	--g-sans: "Manrope", system-ui, -apple-system, sans-serif;
}
body { background: var(--g-bg); color: var(--g-ink); font-family: var(--g-sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--g-serif); font-weight: 400; }
a { color: inherit; }
/* Un mot en italique dans un titre prend la couleur de la marque */
h1 em, h2 em, h3 em, .elementor-heading-title em { color: var(--g-brand); font-style: italic; }

/* =====================================================================
   3. CLASSES À UTILISER DANS ELEMENTOR
   (Avancé › Classes CSS d'un widget ou d'un conteneur)
   ===================================================================== */

/* Petit sur-titre en capitales */
.glucia-eyebrow, .glucia-eyebrow p { font-family: var(--g-sans); font-size: 10.5px !important; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--g-muted); margin: 0; }
.glucia-eyebrow.is-light, .glucia-eyebrow.is-light p { color: rgba(255,255,255,.78); }

/* Titre de section avec pastille de couleur : glucia-sec + is-recettes / is-carnet / is-info */
.glucia-sec .elementor-heading-title { display: flex; align-items: center; gap: 10px; }
.glucia-sec .elementor-heading-title::before { content: ""; flex: 0 0 10px; height: 10px; border-radius: 50%; background: var(--dot, var(--g-ink)); }
.glucia-sec.is-recettes, .glucia-link.is-recettes { --dot: var(--g-recettes); }
.glucia-sec.is-carnet, .glucia-link.is-carnet { --dot: var(--g-carnet); }
.glucia-sec.is-info, .glucia-link.is-info { --dot: var(--g-info); }

/* Lien « Tout voir » souligné de la couleur de la rubrique */
.glucia-link a, a.glucia-link { font-size: 12.5px; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--dot, var(--g-ink)); padding-bottom: 1px; }
.glucia-link p { margin: 0; }

/* Encart photo : fin cadre intérieur */
.glucia-scan { position: relative; }
.glucia-scan::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 13px; pointer-events: none; z-index: 0; }
.glucia-scan > * { position: relative; z-index: 1; }
.glucia-scan h1 em, .glucia-scan h2 em, .glucia-scan .elementor-heading-title em { color: #FFD9CE; }
.glucia-btn-arrow .elementor-button-text::after { content: "→"; margin-left: auto; padding-left: 12px; }
.glucia-btn-arrow .elementor-button-content-wrapper { width: 100%; }

/* Carte carnet (pétrole) */
.glucia-carnet .elementor-heading-title em { color: #BFE3E6; }
.glucia-go { border-top: 1px solid rgba(255,255,255,.25); padding-top: 12px; }
.glucia-go p { margin: 0; display: flex; justify-content: space-between; font-weight: 600; font-size: 14px; }
.glucia-go a { color: #fff; text-decoration: none; }

/* Liste « Repères » */
.glucia-tools { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--g-info); }
.glucia-tools li { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--g-rule); }
.glucia-tools a { font-family: var(--g-serif); font-size: 22px; line-height: 1.1; text-decoration: none; color: var(--g-ink); }
.glucia-tools a::after { content: ""; position: absolute; inset: 0; }
.glucia-tools small { display: block; font-size: 12.5px; color: var(--g-muted); margin-top: 3px; }
.glucia-tools li::after { content: "→"; color: var(--g-info); font-size: 18px; }

/* Carte « Vos droits » */
.glucia-rights-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--g-info-grad); color: #fff; display: grid; place-items: center; }
.glucia-rights-ic svg { width: 20px; height: 20px; }

/* Liste Premium */
.glucia-list ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid #EFCFC6; }
.glucia-list li { padding: 11px 0; border-bottom: 1px solid #EFCFC6; font-size: 14.5px; }
.glucia-list li::before { content: "— "; color: var(--g-brand); }

/* =====================================================================
   4. RACCOURCI [glucia_recettes]
   Carrousel sur mobile, grille sur ordinateur
   ===================================================================== */
.glucia-recettes { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -20px; padding: 0 20px 4px; scroll-padding-inline: 20px; }
.glucia-recettes::-webkit-scrollbar { display: none; }
.glucia-rc { flex: 0 0 72%; scroll-snap-align: start; }
.glucia-rc-img { position: relative; display: block; aspect-ratio: 4/5; border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, #F3D9B8, #F8E3DD); }
.glucia-rc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.glucia-rc:hover .glucia-rc-img img { transform: scale(1.03); }
.glucia-carb { position: absolute; left: 12px; bottom: 12px; background: var(--g-recettes); color: var(--g-ink); border-radius: 10px; padding: 7px 10px 6px; display: flex; align-items: baseline; gap: 5px; }
.glucia-carb b { font-family: var(--g-serif); font-weight: 400; font-size: 22px; line-height: 1; }
.glucia-carb span { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.glucia-rc .glucia-eyebrow { display: block; margin-top: 12px; color: var(--g-recettes-text); }
.glucia-rc h3 { font-family: var(--g-serif); font-size: 22px; line-height: 1.12; margin: 5px 0 0; }
.glucia-rc h3 a { text-decoration: none; color: var(--g-ink); }
.glucia-meta { font-size: 12.5px; color: var(--g-muted); margin: 6px 0 0; }

/* =====================================================================
   5. RACCOURCI [glucia_actus]
   ===================================================================== */
.glucia-actus { list-style: none; margin: 0; padding: 0; }
.glucia-actus li { display: grid; grid-template-columns: 34px 1fr; gap: 0 10px; padding: 16px 0; border-top: 1px solid var(--g-rule); }
.glucia-actus li:first-child { border-top: 1.5px solid var(--g-info); }
.glucia-num { font-family: var(--g-serif); font-style: italic; font-size: 22px; line-height: 1.1; color: var(--g-info-text); }
.glucia-actus .glucia-eyebrow { color: var(--g-info-text); }
.glucia-actus h3 { font-family: var(--g-serif); font-size: 22px; line-height: 1.15; margin: 4px 0 0; }
.glucia-actus h3 a { text-decoration: none; color: var(--g-ink); }
.glucia-actus time { display: block; font-size: 12px; color: var(--g-muted); margin-top: 6px; }

/* =====================================================================
   6. RACCOURCI [glucia_barre_mobile] : barre d'onglets en bas (mobile seulement)
   ===================================================================== */
.glucia-tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; background: rgba(251,247,245,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--g-rule); display: flex; justify-content: space-around; align-items: center; padding: 10px 8px calc(14px + env(safe-area-inset-bottom)); }
.glucia-tabbar a { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: #9A8C8E; text-decoration: none; }
.glucia-tabbar svg { width: 21px; height: 21px; }
.glucia-tabbar a.is-active { color: var(--g-ink); }
.glucia-tabbar a.is-active::after { content: ""; position: absolute; bottom: -8px; width: 4px; height: 4px; border-radius: 50%; background: var(--g-brand); }
.glucia-tabbar .ring { width: 50px; height: 50px; border-radius: 50%; background: var(--g-brand); color: #fff; display: grid; place-items: center; }
.glucia-tabbar .is-photo.is-active::after { display: none; }
body.has-glucia-tabbar { padding-bottom: 88px; }

/* En-tête collant : fond légèrement translucide */
.glucia-top { backdrop-filter: blur(10px); }

/* Pied de page */
.glucia-ft-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.glucia-ft-list a { text-decoration: none; color: #E9DEDC; }
.glucia-ft-list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Articles : liens soulignés dans le texte */
.elementor-widget-theme-post-content a, .entry-content a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--g-brand); }

/* =====================================================================
   7. ORDINATEUR (≥ 1025 px, comme Elementor)
   ===================================================================== */
@media (min-width: 1025px) {
	.glucia-tabbar { display: none; }
	body.has-glucia-tabbar { padding-bottom: 0; }
	.glucia-recettes { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 36px 28px; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
	.glucia-rc-img { aspect-ratio: 4/3; }
	.glucia-rc h3 { font-size: 25px; }
	.glucia-actus h3, .glucia-tools a { font-size: 24px; }
}