/**
 * Fondations de marque — MiDiabeteCooking.
 *
 * Les couleurs sont aussi déclarées dans theme.json (palette de l'éditeur
 * de blocs) — variables CSS lisibles (--mdc-*) ici pour tout le reste du
 * CSS du thème front. Palette/typographie Kadence (Customizer) réglées
 * normalement depuis l'admin, comme un thème neuf classique — seul le menu
 * hamburger mobile est retiré en code (inc/mobile-header-nav.php), parce
 * qu'il est redondant avec la nav basse.
 *
 * Direction retenue : sobre, clinique mais chaleureux — contrastes
 * renforcés AA+, gros boutons, pas d'animation gratuite.
 */

:root {
	--mdc-teal: #6F8F7A;
	--mdc-teal-hover: #3E5F59;
	--mdc-nutrition-green: #8FAF9B;
	--mdc-terracotta: #C9876B;
	--mdc-terracotta-hover: #B8775D;
	--mdc-text: #2F3E3C;
	--mdc-bg: #FFFFFF;

	--mdc-radius: 10px;
	--mdc-radius-pill: 999px;

	/*
	 * Ajustée sur demande explicite (retour utilisateur) : resserrée (1px/3px,
	 * plus opaque) plutôt que diffuse (6px/20px, valeur d'origine), pour un
	 * effet plus net, moins "flou" — appliquée partout où ce token est déjà
	 * utilisé (cartes recette, boutons, visuels hero/offre), pas de token
	 * séparé : l'utilisateur a confirmé que le changement les concerne tous.
	 *
	 * Reprise à 2 couches (retour utilisateur : effet "Apple", ombrage léger)
	 * — une ombre de contact resserrée (1px/2px, la carte "touche" encore sa
	 * surface) superposée à une ombre ambiante plus large et diffuse
	 * (4px/12px), au lieu d'une seule couche plate : donne une impression de
	 * légère élévation/flottement plutôt qu'un simple contour ombré. Même
	 * teinte que --mdc-text (cohérence), opacité réduite au total par
	 * rapport à la version 1 couche pour ne pas alourdir malgré la 2ᵉ ombre.
	 */
	--mdc-shadow-soft: 0 1px 2px rgba(47, 62, 60, 0.12), 0 4px 12px rgba(47, 62, 60, 0.10);

	/*
	 * Liseret fin — utilisé pour délimiter cartes/vignettes ET (nouveau)
	 * boutons, en complément de --mdc-shadow-soft : l'ombre donne la
	 * profondeur, ce trait fin donne le bord net "Apple" (une carte/un
	 * bouton qui semble découpé proprement, pas juste posé). Neutre (dérivé
	 * de --mdc-text) plutôt que teinté : fonctionne pareil sur fond blanc
	 * (cartes) que sur fond teal/terracotta (boutons).
	 */
	--mdc-border-subtle: 1px solid color-mix(in srgb, var(--mdc-text) 15%, transparent);

	--mdc-space-sm: 0.75rem;
	--mdc-space-md: 1.5rem;
	--mdc-space-lg: 2.5rem;

	--mdc-container-width: 640px;
	--mdc-container-width-wide: 1100px;

	/* Teinte crème très légère — alterne avec le blanc entre sections pour
	   rythmer le scroll (brief "direction plus vivante"), plus discrète que
	   le vert de .mdc-offer (12%, reste le point fort visuel de la page). */
	--mdc-bg-alt: color-mix(in srgb, var(--mdc-nutrition-green) 6%, #fff);
}

/* Conteneur générique, indépendant de Kadence/Gutenberg : centré, largeur
   plafonnée, padding latéral qui respecte les zones sûres iOS. */
.mdc-container {
	max-width: var(--mdc-container-width);
	margin-inline: auto;
	padding-inline: max(var(--mdc-space-md), env(safe-area-inset-left, 0px));
}

/*
 * Conteneur large — sections à grille desktop (hero, recettes, outils,
 * offre, onboarding, moments) uniquement. Onboarding l'a rejoint quand ses
 * 3 choix sont passés de texte empilé à des cartes côte à côte (retour
 * utilisateur : occuper l'espace, plus premium) — le conteneur étroit
 * n'avait plus de raison d'être, ce n'est plus un bloc de texte pur.
 * Moments l'a rejoint pour la même raison qu'onboarding, plus un défaut
 * concret constaté : son titre restait sur l'ancien conteneur étroit
 * (640px, centré) alors que les cartes en dessous, elles, sont centrées
 * sur toute la largeur — le titre ne démarrait plus au même bord gauche
 * que les sections voisines (retour utilisateur), rupture dans la ligne
 * verticale commune à toutes les sections de la page. La crédibilité,
 * elle, reste en .mdc-container (640px) : texte + petite photo, longueur
 * de ligne plus confortable, choix éditorial délibéré. Seuil 960px =
 * "desktop", distinct du 700px déjà utilisé pour la nav/les boutons de
 * carrousel ("tablette").
 */
@media (min-width: 960px) {
	.mdc-container--wide {
		max-width: var(--mdc-container-width-wide);
	}
}

/* Fond alterné — posé directement sur la <section>, pas par :nth-child
   (sections hétérogènes, l'alternance doit rester intentionnelle, voir
   chaque template-part). */
.mdc-bg-alt {
	background: var(--mdc-bg-alt);
}

/*
 * Apparition légère au scroll — utilitaire partagé (auparavant dupliqué
 * dans assets/css/hero.css pour le seul hero). CSS natif
 * (animation-timeline: view()), repli silencieux si non supporté, retiré
 * sous prefers-reduced-motion.
 */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.mdc-fade-up {
			animation: mdc-fade-up linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 30%;
		}

		@keyframes mdc-fade-up {
			from {
				opacity: 0;
				transform: translateY(24px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}
	}
}

/*
 * Réaction au survol/focus — cartes cliquables icône + libellé
 * (outil/moment). Retour utilisateur : pas d'ombre/élévation de carte au
 * survol (jugé peu distinctif) — remplacé par l'icône elle-même qui réagit
 * (grossit légèrement dans sa pastille) plutôt que toute la carte qui se
 * soulève. Cible le <svg> directement : générique, fonctionne pour
 * n'importe quelle icône sans dépendre de sa classe spécifique
 * (.mdc-tool-icon, .mdc-moment-icon...). Sous (hover: hover) : ne laisse
 * pas l'état "collé" sur tactile, où il n'y a pas de vrai survol.
 */
@media (hover: hover) {
	.mdc-elevate-hover svg {
		transition: transform 0.2s ease;
	}

	.mdc-elevate-hover:hover svg,
	.mdc-elevate-hover:focus-visible svg {
		transform: scale(1.12);
	}
}

/* Défilement doux pour les liens d'ancrage (ex. choix "ce soir" de
   l'onboarding vers #mdc-moments) — retiré sous prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Marge de défilement générique sur les sections ciblées par une ancre, au
   cas où un header sticky serait activé plus tard depuis le Customizer
   (inc/mobile-header-nav.php ne force plus ce réglage, voir ce fichier). */
[id] {
	scroll-margin-top: var(--mdc-space-md);
}

/*
 * Titre de section + lien "Tout voir"/"Plus de recettes à..." — partagée
 * par les carrousels de recettes (assets/css/recipes.css) et d'outils
 * (assets/css/tools.css). Empilés sur mobile (retour utilisateur : les
 * libellés longs — "Plus de recettes à l'Airfryer" — forçaient le titre à
 * passer sur 2 lignes en essayant de tenir sur la même ligne que le lien) ;
 * côte à côte au-delà de 699px, où il y a assez de place.
 */
.mdc-section-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3em;
}

.mdc-section-viewall {
	font-weight: 700;
}

@media (min-width: 700px) {
	.mdc-section-head {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--mdc-space-sm);
	}

	.mdc-section-viewall {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}

/*
 * Mécanique de carrousel partagée — 100% CSS (overflow-x + scroll-snap) :
 * le swipe tactile natif fonctionne sans JS. Déborde du .mdc-container
 * (pleine largeur viewport sur mobile) ; padding-inline-start réaligne la
 * première carte sur le texte, padding-inline-end volontairement plus
 * court pour laisser dépasser un bout de la carte suivante ("peek") —
 * technique de carrousel "full-bleed" standard. Utilisée par le carrousel
 * "moments" (assets/css/moments.css) et les carrousels de recettes
 * (assets/css/recipes.css).
 *
 * .mdc-carousel-wrap/.mdc-carousel-nav ci-dessous : boutons précédent/
 * suivant, gérés par assets/js/carousel.js — retour utilisateur : sur
 * mobile ils alourdissaient visuellement l'affichage alors que le pouce
 * swipe déjà naturellement ; masqués sous 700px au profit du fondu +
 * "peek" ci-dessus (suffisant pour signaler qu'il y a plus de contenu),
 * gardés pour les pointeurs desktop/tablette où le swipe est moins
 * naturel qu'à la souris.
 */
.mdc-carousel-wrap {
	position: relative;
}

.mdc-carousel {
	display: flex;
	gap: var(--mdc-space-sm);
	margin-top: var(--mdc-space-sm);
	padding-inline: var(--mdc-space-md) var(--mdc-space-sm);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--mdc-space-md);
	scrollbar-width: none; /* Firefox — la piste native casse le style "carrousel app". */

	/* Fondu sur les deux bords, plus marqué que la première version (retour
	   utilisateur : sert maintenant seul d'indice sur mobile, sans les
	   boutons) — signal visuel qu'il reste du contenu, indépendant du JS et
	   de la position de scroll. */
	mask-image: linear-gradient(to right, transparent 0, #000 3.5rem, #000 calc(100% - 3.5rem), transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 3.5rem, #000 calc(100% - 3.5rem), transparent 100%);
}

.mdc-carousel::-webkit-scrollbar {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.mdc-carousel {
		scroll-behavior: smooth;
	}
}

/*
 * Boutons précédent/suivant — positionnés en dehors de la rangée qui
 * défile (siblings de .mdc-carousel dans .mdc-carousel-wrap), jamais
 * superposés au contenu cliquable d'une carte. Masqués par défaut
 * (attribut HTML `hidden`) : amélioration progressive, gérés par
 * assets/js/carousel.js — sans JS, le carrousel reste utilisable au swipe/
 * scroll natif, simplement sans ces boutons. Masqués aussi sur mobile,
 * quel que soit l'état JS (voir @media 699px plus bas) : fondu + "peek"
 * suffisent là où on swipe au pouce.
 */
.mdc-carousel-nav {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	z-index: 2;
	/* Mobile-first : masqués par défaut (voir la note plus bas — le pouce
	   swipe déjà naturellement), réaffichés à partir de 700px. */
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem; /* ≥44px, brief explicite */
	height: 2.75rem;
	border: none;
	border-radius: var(--mdc-radius-pill);
	background: var(--mdc-teal);
	color: #fff;
	box-shadow: var(--mdc-shadow-soft);
	cursor: pointer;
}

.mdc-carousel-nav:hover,
.mdc-carousel-nav:focus-visible {
	background: var(--mdc-teal-hover);
}

.mdc-carousel-nav svg {
	width: 1.2em;
	height: 1.2em;
}

.mdc-carousel-nav--prev {
	left: 0.4rem;
}

.mdc-carousel-nav--next {
	right: 0.4rem;
}

/* Desktop/tablette : réaffichés, le swipe est moins naturel qu'à la souris
   — voir la note sur .mdc-carousel-wrap plus haut. Seuil de 700px, même
   convention que le reste du site (nav basse, cf. bottom-nav.css). */
@media (min-width: 700px) {
	.mdc-carousel-nav {
		display: flex;
	}
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 1.0625rem; /* 17px plancher du brief — jamais moins */
	line-height: 1.6;
	color: var(--mdc-text);
	background: var(--mdc-bg);
}

/* Échelle typographique mobile-first : planchers 28/22/18px, qui montent en
   douceur jusqu'à un plafond desktop raisonnable via clamp(). */
h1, .wp-block-post-title,
.entry-title {
	font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); /* 28px → 40px */
}

h2 {
	font-size: clamp(1.375rem, 2.5vw + 1rem, 1.75rem); /* 22px → 28px */
}

h3 {
	font-size: clamp(1.125rem, 1.5vw + 0.8rem, 1.375rem); /* 18px → 22px */
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.wp-block-post-title {
	color: var(--mdc-text);
	line-height: 1.25;
	font-weight: 700;
}

/*
 * Liens : couleur texte principal plutôt que teal — #6F8F7A sur blanc
 * n'atteint pas le seuil AA 4.5:1 pour du texte de taille normale (même
 * calcul que sur cookingandcakes.fr pour une teinte de luminance quasi
 * identique). Le teal reste la couleur d'action (fond de bouton, état
 * actif), jamais en petit texte de lien.
 */
a {
	color: var(--mdc-text);
	text-decoration-color: var(--mdc-nutrition-green);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.15em;
}

a:hover,
a:focus-visible {
	color: var(--mdc-teal-hover);
}

:focus-visible {
	outline: 2px solid var(--mdc-teal);
	outline-offset: 2px;
}

/*
 * Boutons — zones tactiles ≥44px (brief explicite), texte gras sur fond de
 * couleur pleine (seuil AA "texte large" 3:1, teal/terracotta sur blanc ne
 * passant pas le seuil "texte normal" 4.5:1).
 *
 * font-size 1.2rem (19.2px) et pas 1.125rem (18px, valeur d'origine) : le
 * seuil WCAG "texte large" en gras est 14pt/18.66px, pas 18px — un bug
 * d'accessibilité réel (Lighthouse) mesurait #fff sur --mdc-teal à 3.56:1,
 * sous les 4.5:1 exigés puisque 18px gras rate le seuil de justesse et
 * retombe sur l'exigence "texte normal". 19.2px passe la marge en sécurité.
 */
.mdc-btn-primary,
.mdc-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 44px;
	padding: 0.85em 1.6em;
	font-size: 1.2rem; /* 19.2px — voir commentaire ci-dessus */
	font-weight: 700;
	color: #fff;
	/* Liseret (retour utilisateur, effet "Apple") — sans couleur propre,
	   --mdc-border-subtle se fond dans le fond de couleur pleine du bouton
	   (background-clip par défaut : le fond passe sous la bordure) pour un
	   léger rebord "gravé" plutôt qu'un contour qui tranche. */
	border: var(--mdc-border-subtle);
	border-radius: var(--mdc-radius);
	box-shadow: var(--mdc-shadow-soft);
	text-decoration: none;
	cursor: pointer;
}

.mdc-btn-primary {
	background: var(--mdc-teal);
}

.mdc-btn-primary:hover,
.mdc-btn-primary:focus-visible {
	background: var(--mdc-teal-hover);
	color: #fff;
}

.mdc-btn-secondary {
	background: var(--mdc-terracotta);
}

.mdc-btn-secondary:hover,
.mdc-btn-secondary:focus-visible {
	background: var(--mdc-terracotta-hover);
	color: #fff;
}

/*
 * Retour utilisateur : sur les pages uniques (articles), retirer les
 * métadonnées auteur/date — sortie native de Kadence (.entry-meta,
 * "Par {auteur}" + dates publication/mise à jour), jamais générée par ce
 * thème (pas de single.php dans mdc-child, gabarit par défaut du thème
 * parent). Nos propres cartes carrousel/catalogue masquaient déjà
 * .entry-meta (recipes.css), mais uniquement dans ce contexte précis — la
 * page article elle-même (son propre en-tête, ET les éventuelles cartes
 * "articles liés" ajoutées par Kadence après le contenu, même markup
 * .entry-meta) restait visible. .single-post plutôt que .single ou
 * .singular : cible précisément les articles (post_type=post), pas les
 * pages statiques ni les fiches recette WPRM autonomes, qui n'affichent de
 * toute façon pas ces métadonnées.
 */
.single-post .entry-meta {
	display: none;
}