/**
 * Components Responsive Styles
 *
 * Adaptations responsive de tous les composants réutilisables.
 * Article Loop, CTAs, Titres, Bandeau Animé.
 *
 * @package     UneAutreVoix
 * @author      Horizon Signature
 * @copyright   2026 Horizon Signature
 * @license     Proprietary
 * @version     0.1.0
 *
 * @changelog
 * 0.1.0 — Passage en preprod
 * 0.0.37 - Carousel-transmission : supprime padding horizontal .main-section (bord-à-bord)
 * 0.0.36 - .product-loop-images-category : padding horizontal calc → var(--spacing-md)
 * 0.0.35 - E3 : suppression règle h1 dans @media (max-width: 1200px)
 *        - Centralisée dans style.css (suppression commentaire justificatif inclus)
 * 0.0.34 - Product Loop mobile : remplacement valeurs 12px hardcodées par calc((--spacing-xs + --spacing-sm) / 2)
 *          - .product-loop-images-category : padding horizontal 12px → calc variable (12px exact)
 *          - .product-loop-texts : padding 12px → calc variable (12px exact)
 * 0.0.33 - Bandeau animé mobile : fix image <picture> couvre le texte animé
 *          - .column-model-bandeau-anime picture img : reset margin-bottom, position, z-index, order
 *          - Bug : la règle .column-model-bandeau-anime img s'appliquait aussi au <img> interne
 *            de la <picture>, causant un double margin-bottom:-50px (page produit)
 * 0.0.32 - Bandeau animé mobile : position relative sur img et picture
 *          - Garantit z-index: 2 correct (position requise pour cross-browser)
 *          - Fix : bandeau couvrait l'avatar sur la page auteur (author-page-intro-section)
 * 0.0.31 - Phase 4 refacto : consolidation des blocs @media fragmentés
 *        - 11 blocs @media → 5 blocs logiques (sans changement de comportement)
 *        - Bloc 1: BASE GLOBALE + PAGE PRODUIT SINGLE
 *        - Bloc 2: ARTICLE LOOP (commun + tailles)
 *        - Bloc 3: CTAs + TITRES H2/H3 + BANDEAU ANIMÉ
 *        - Bloc 4: COLONNES SECTION + IMAGES
 *        - Bloc 5: PRODUCT LOOP (structure + tailles)
 * 0.0.30 - Phase 2 refacto : consolidation complète .section-cta dans ce fichier (source unique)
 *        - font-size var(--text-size-s) → var(--font-cta-size) (valeur correcte)
 *        - padding var(--spacing-xs) → var(--spacing-2xs) (identique desktop)
 *        - Ajout align-self, width, background, border, cursor, appearance
 *        - Ajout .section-cta.is-animating-hover::after (hover state)
 *        - Suppression bloc .section-cta de sections-responsive.css (conflits cascade éliminés)
 * 0.0.29 - Phase 1 refacto : transition 0.6s cubic-bezier → var(--transition-smooth) var(--ease-smooth)
 *        - .section-cta::after : valeur hardcodée remplacée par variables sémantiques
 * 0.0.28 - Bandeau animé : support <picture> (Imagify)
 *           - .column-model-bandeau-anime picture : même ordre/alignement que img
 *           - .column-model-bandeau-anime picture img : width 100%, aspect-ratio 4/3, cover
 * 0.0.27 - Section avis : carousel bord-à-bord (padding horizontal 0)
 *         - .product-avis-section : padding-left/right 0 (comme product-hero-area)
 *         - .uav-avis-liste : display none sur mobile (évite flash avant initialisation carousel JS)
 * 0.0.26 - Suppression scroll-behavior/scroll-padding-top html (géré par mobile-anchor-scroll.js)
 * 0.0.24 - BASE GLOBALE : h1 { font-h1-standard-* } — sections-responsive.css absent des pages produit
 * 0.0.24 - h1 mobile : font-h1-standard-* (sections-responsive.css non chargé sur produit)
 * 0.0.23 - Page produit single : .product-hero-area padding horizontal 0 (fond coloré bord-à-bord)
 *         - .product-hero-infos-produit padding horizontal var(--spacing-md) reporté depuis la section
 * 0.0.22 - Règles de base globales déplacées depuis sections-responsive.css
 *         - html/body overflow : empêche scroll horizontal sur toutes les pages
 *         - .main-section, .main-section-demi, .main-section-variable : padding mobile universel
 *           (nécessaire sur les pages où sections-responsive.css n'est pas chargé, ex. page produit)
 * 0.0.21 - font-weight 500 sur textes auteur
 *        - .article-loop-author-text : font-weight 500
 *        - .product-loop-author-text : font-weight 500
 * 0.0.20 - Product Loop Mobile : structure complète
 *        - Variables --product-color (nécessaires hors media desktop)
 *        - Zone images : position, shadows, margin-top, variations, bandeau (100px), catégorie
 *        - Zone textes : flex column, gap, padding, auteur, séparateur (1px), formats
 *        - archive-products-row : flex column centré, gap 72px, width 80% margin auto
 *        - Reset zigzag : .product-loop-link width 100%, transform none
 *        - Icône plume : 1em, fill --product-color
 * 0.0.19 - Article loop : cohérence variables typographiques
 *        - .article-loop-title : var(--text-size-m) → var(--font-h4-size) (même variable que desktop)
 *        - .article-loop-category : ajout padding-bottom var(--spacing-2xs) (4px)
 * 0.0.18 - Augmentation gap .article-loop-top sur mobile
 *        - gap: var(--spacing-xs) → var(--spacing-sm) (8px → 16px)
 *        - Ajout display: flex + flex-direction: column (requis pour que gap fonctionne)
 *        - Espacement entre image et titre équivalent au padding interne
 *        - Meilleure respiration visuelle
 * 0.0.17 - Fix ratio images articles sur mobile
 *        - .article-loop-image : width 100%, overflow hidden, display flex
 *        - .article-loop-image picture : width/height 100%, display flex
 *        - .article-loop-image img : width/height 100%, object-fit cover, object-position center
 *        - Ratio 16/9 maintenant correctement respecté (cohérence avec desktop)
 * 0.0.16 - Ajout propriétés flex manquantes sur mobile
 *        - .article-loop-item : display: flex + flex-direction: column
 *        - .article-loop-link : display: flex + flex-direction: column + height: 100%
 *        - .article-loop-link : justify-content: space-between (répartition verticale)
 *        - Cohérence complète avec version desktop
 *        - Fix alignement articles dans drawer mobile
 * 0.0.15 - Ajout gap sur .article-loop-link (mobile)
 *        - gap: var(--spacing-xs) = 8px
 *        - Espacement vertical entre image, titre, extrait et bottom section
 *        - Cohérence avec version desktop (1vh)
 *        - Réduction padding horizontal catégorie : var(--spacing-md) → var(--spacing-sm) (24px → 16px)
 *        - Réduction padding-bottom auteur : var(--spacing-sm) → var(--spacing-xs) (16px → 8px)
 * 0.0.14 - BREAKING CHANGE : Suppression breakpoint tablette (768-1200px)
 *        - Fusion tablette + mobile → 1 seul breakpoint ≤1200px pour tous les composants
 *        - Article Loop : valeurs mobiles (padding md, icon 10px au lieu de 12px tablette)
 *        - CTAs : identique pour tous ≤1200px
 *        - Bandeau animé : masqué pour tous ≤1200px (au lieu d'animation simplifiée tablette)
 *        - Colonnes sections : gap sm (au lieu de md tablette)
 *        - Utilisation valeurs mobiles compactes
 *        - Simplification maintenance : ~85 lignes CSS supprimées
 * 0.0.13 - Migration système de transitions unifié
 *        - Transitions : durées et easing remplacés par variables sémantiques
 *        - ~5 transitions migrées
 * 0.0.12 - Migration système de line-height unifié
 *        - 1.3 → var(--line-height-medium)
 *        - 1.4/1.5 → var(--line-height-comfortable)
 *        - Cohérence avec système à 3 valeurs sémantiques
 * 0.0.11 - Migration complète vers variables d'espacement sémantiques
 *        - Articles : padding, margin, gap utilisent var(--spacing-*)
 *        - CTAs : padding bottom utilise var(--spacing-*)
 *        - Standardisation selon puissances de 2
 *        - Amélioration cohérence visuelle et maintenabilité
 * 0.0.10 - Migration vers variables CSS pour tailles de texte responsive
 *        - Création variables :root dans chaque @media (tablette + mobile)
 *        - --responsive-font-menu-primary : 26px (tablette) / 22px (mobile)
 *        - --responsive-font-menu-secondary : 22px (tablette) / 18px (mobile)
 *        - --responsive-font-standard : 16px (tablette + mobile)
 *        - --responsive-font-small : 14px (tablette + mobile)
 *        - --responsive-font-extra-small : 12px (tablette + mobile)
 *        - Remplacement toutes valeurs en dur (articles, CTAs) par variables
 *        - Facilite ajustements globaux des tailles de texte
 * 0.0.9 - Augmentation tailles de police articles et CTAs pour accessibilité
 *        - ARTICLES TABLETTE : Extrait 13px → 14px, Auteur 12px → 14px, Catégorie 11px → 12px
 *        - ARTICLES MOBILE : Titre 14px → 16px, Extrait 12px → 14px, Auteur 11px → 14px, Catégorie 10px → 12px
 *        - CTA MOBILE : 13px → 14px
 *        - Minimum 14px pour small-text, 16px pour texte standard
 *        - Exception : catégorie 12px (acceptable car majuscules)
 *        - Amélioration lisibilité pour public âgé
 * 0.0.8 - REFACTORISATION : optimisation chargement CSS
 *        - Factorisation code commun tablette/mobile dans @media (max-width: 1200px)
 *        - Overrides spécifiques mobile uniquement dans @media (max-width: 767px)
 *        - Réduction ~40% duplication, amélioration parsing CSS
 *        - Structure conservée : aspects visuels et comportements identiques
 *        - ARTICLES : Styles communs factorizés (border, structure, polices, couleurs)
 *        - ARTICLES : Mobile override uniquement tailles (margins, paddings, font-sizes)
 *        - CTAs : Styles communs factorizés (typographie, ::after, couleurs)
 *        - CTAs : Mobile override uniquement tailles et largeurs spécifiques
 * 0.0.7 - Ajout graisses et polices articles (manquaient après refonte)
 *        - Titre : font-family + font-weight (700)
 *        - Extrait : font-family + font-weight (400)
 *        - Auteur : font-family + font-weight (400) + font-style (italic)
 *        - Catégorie : font-family + font-weight (600) + text-transform (uppercase)
 *        - Gap auteur : 8px entre icône et texte
 * 0.0.6 - Refonte complète articles : conservation structure desktop
 *        - Bordure 3px (même épaisseur que CTA)
 *        - Padding = 0 sur .article-loop-item (comme desktop)
 *        - Catégorie en pleine largeur en bas (comme desktop)
 *        - Auteur aligné à droite (justify-content: flex-end)
 *        - Image avec aspect-ratio 16/9 (comme desktop)
 *        - Adaptation uniquement des tailles en px
 * 0.0.5 - Fix couleur et alignement CTAs dans drawer
 *        - Ajout classes couleur (.section-cta-gold, etc.) dans responsive
 *        - CTA drawer aligné à gauche (align-self: flex-start)
 *        - CTA drawer largeur auto au lieu de 100% sur mobile
 * 0.0.4 - Fix mise en forme CTAs sur tablette/mobile
 *        - Conservation du style desktop (ligne animée en dessous)
 *        - Ajout font-family, font-weight, text-transform via variables
 *        - Padding adapté en px : 8px bottom (tablette), 6px bottom (mobile)
 *        - Bordure ::after adaptée : 2px height au lieu de 0.5vh
 *        - Conserve animation et couleurs (gold/green/blue/pink)
 * 0.0.3 - Fix conservation polices et graisses dans articles
 *        - Ajout font-family et font-weight via variables sur tous les éléments
 *        - Titre : var(--font-h4-family), var(--font-h4-weight) [700]
 *        - Extrait : var(--font-small-text-family), var(--font-small-text-weight) [400]
 *        - Auteur : var(--font-small-text-italic-*) [400 italic]
 *        - Catégorie : var(--font-small-text-accent-*) [600 uppercase]
 * 0.0.2 - Fix couleurs articles dans drawer mobile/tablette
 *        - Ajout bordures colorées par catégorie (green, blue, pink, gold)
 *        - Ajout fonds colorés des badges catégorie
 *        - Ajout bordure/margin/padding en px au lieu de vh
 * 0.0.1 - Version initiale complète des composants responsive
 *        - Article Loop : images/textes adaptés
 *        - CTAs : padding/font-size adaptés, possibilité full width
 *        - Titres H2/H3 : largeurs forcées 100% sur mobile
 *        - Bandeau Animé : statique tablette, masqué mobile
 */

/* ============================================================================
   BASE GLOBALE — Toutes les pages (remplace sections-responsive.css pour ces règles)
   ========================================================================== */

@media (max-width: 1200px) {

	/* Empêche le scroll horizontal sur toutes les pages */
	html, body {
		overflow-x: hidden;
		overflow-y: auto;
	}

	/* Padding mobile universel des sections */
	.main-section,
	.main-section-demi,
	.main-section-variable {
		width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		padding: var(--spacing-lg) var(--spacing-md);
	}

	/* -----------------------------------------------------------------------
	   PAGE PRODUIT SINGLE — Overrides padding
	   ----------------------------------------------------------------------- */

	/* Hero : fond coloré bord-à-bord → supprime le padding horizontal de .main-section */
	.product-hero-area {
		padding-left: 0;
		padding-right: 0;
	}

	/* Infos produit : reçoit le padding horizontal à la place de la section */
	.product-hero-infos-produit {
		padding-left: var(--spacing-md);
		padding-right: var(--spacing-md);
	}

	/* Section avis : carousel bord-à-bord → supprime le padding horizontal de .main-section */
	.product-avis-section {
		padding-left: 0;
		padding-right: 0;
	}

	/* Carousel produits home : bord-à-bord → supprime le padding horizontal de .main-section */
	.section-model-carousel-produits {
		padding-left: 0;
		padding-right: 0;
	}

	/* Carousel transmission : bord-à-bord → supprime le padding horizontal de .main-section */
	.section-model-carousel-transmission {
		padding-left: 0;
		padding-right: 0;
	}

	/* Liste avis originale cachée sur mobile : remplacée par le carousel JS (évite le flash) */
	.uav-avis-liste {
		display: none;
	}

}

/* ============================================================================
   ARTICLE LOOP - Commun Tablette + Mobile
   ========================================================================== */

@media (max-width: 1200px) {

	/* Item - Conservation structure desktop */
	.article-loop-item {
		display: flex;
		flex-direction: column;
		border: 3px solid var(--color-text);
		padding: 0;
		gap: 0;
	}

	/* Image - Conservation aspect-ratio desktop */
	.article-loop-image {
		width: 100%;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		display: flex;
	}

	/* Support des balises <picture> d'Imagify */
	.article-loop-image picture {
		width: 100%;
		height: 100%;
		display: flex;
	}

	.article-loop-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
	}

	/* Titre - Polices communes */
	.article-loop-title {
		font-family: var(--font-h4-family);
		font-weight: var(--font-h4-weight);
		line-height: var(--line-height-medium);
	}

	/* Extrait - Polices communes */
	.article-loop-excerpt p {
		font-family: var(--font-small-text-family);
		font-weight: var(--font-small-text-weight);
		line-height: var(--line-height-comfortable);
	}

	/* Bottom section - Conservation structure desktop */
	.article-loop-bottom {
		padding: 0;
		gap: 0;
	}

	/* Auteur - Conservation structure desktop */
	.article-loop-author {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		gap: var(--spacing-xs);
		font-family: var(--font-small-text-italic-family);
		font-weight: var(--font-small-text-italic-weight);
		font-style: var(--font-small-text-italic-style);
	}

	.article-loop-author-text {
		font-weight: 500;
	}

	/* Catégorie - Polices communes */
	.article-loop-category {
		font-family: var(--font-small-text-accent-family);
		font-weight: var(--font-small-text-accent-weight);
		text-transform: var(--font-small-text-accent-text-transform);
		line-height: var(--line-height-comfortable);
	}

	.article-loop-category-child {
		font-style: italic;
		text-transform: none;
	}

	/* Bordures colorées par catégorie */
	.article-loop-item.article-loop-color-green {
		border-color: var(--color-green);
	}

	.article-loop-item.article-loop-color-blue {
		border-color: var(--color-blue);
	}

	.article-loop-item.article-loop-color-pink {
		border-color: var(--color-pink);
	}

	.article-loop-item.article-loop-color-gold {
		border-color: var(--color-gold);
	}

	/* Fonds colorés des catégories */
	.article-loop-color-green .article-loop-category {
		background-color: var(--color-green);
	}

	.article-loop-color-blue .article-loop-category {
		background-color: var(--color-blue);
	}

	.article-loop-color-pink .article-loop-category {
		background-color: var(--color-pink);
	}

	.article-loop-color-gold .article-loop-category {
		background-color: var(--color-gold);
	}

	/* -----------------------------------------------------------------------
	   ARTICLE LOOP - Tailles mobiles (marges, padding, font-sizes)
	   ----------------------------------------------------------------------- */

	.article-loop-item {
		margin: calc(var(--spacing-xs) * 1.5) 0;
	}

	.article-loop-link {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-xs);
		justify-content: space-between;
		height: 100%;
	}

	.article-loop-top {
		display: flex;
		flex-direction: column;
		padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-xs) var(--spacing-sm);
		gap: var(--spacing-sm);
	}

	.article-loop-title {
		font-size: var(--font-h4-size);
	}

	.article-loop-excerpt p {
		font-size: var(--text-size-s);
	}

	.article-loop-author {
		padding: 0 var(--spacing-md) var(--spacing-xs) var(--spacing-md);
		font-size: var(--text-size-s);
	}

	.article-loop-author-icon {
		width: 1em;
		height: 1em;
	}

	.article-loop-category {
		padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-2xs) var(--spacing-sm);
		font-size: var(--text-size-xs);
	}
}

/* ============================================================================
   CTAs - Commun Tablette + Mobile
   ========================================================================== */

@media (max-width: 1200px) {

	.section-cta {
		font-family: var(--font-cta-family);
		font-size: var(--font-cta-size);
		font-weight: var(--font-cta-weight);
		line-height: var(--line-height-medium);
		text-transform: var(--font-cta-text-transform);
		display: inline-block;
		text-decoration: none;
		color: inherit;
		position: relative;
		padding: 0 0 var(--spacing-2xs) 0;
		align-self: flex-start;
		width: fit-content;
		background: none;
		border: none;
		cursor: pointer;
		appearance: none;
	}

	/* Bordure animée commune */
	.section-cta::after {
		content: '';
		position: absolute;
		left: 0;
		width: 100%;
		bottom: 0;
		height: 3px;
		background-color: var(--cta-border-color, var(--color-text));
		transform: scaleX(1);
		transform-origin: left;
		transition: transform var(--transition-smooth) var(--ease-smooth);
	}

	/* Hover : recul de la ligne vers la droite */
	.section-cta.is-animating-hover::after {
		transform: scaleX(0);
		transform-origin: right;
	}

	/* Classes de couleur communes */
	.section-cta-gold {
		--cta-border-color: var(--color-gold);
	}

	.section-cta-green {
		--cta-border-color: var(--color-green);
	}

	.section-cta-blue {
		--cta-border-color: var(--color-blue);
	}

	.section-cta-pink {
		--cta-border-color: var(--color-pink);
	}

	.section-cta-text {
		--cta-border-color: var(--color-text);
	}

	/* CTAs full width dans stack vertical */
	.megamenu-cta .section-cta {
		width: 100%;
		text-align: center;
	}

	/* CTA dans drawer : aligné à gauche, largeur auto */
	.header-drawer-cta .section-cta {
		width: auto;
		align-self: flex-start;
	}

	/* CTA dans carousel peut rester auto */
	.carousel-text .section-cta {
		width: auto;
	}

	/* -----------------------------------------------------------------------
	   TITRES H2/H3 avec largeur custom
	   ----------------------------------------------------------------------- */

	/* Forcer largeurs 100% sur mobile (ignore config admin vh) */
	.section-column h2[style*="width"],
	.section-column h3[style*="width"] {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Titres : text-wrap balance pour meilleure lisibilité */
	.section-column h2,
	.section-column h3 {
		text-wrap: balance;
	}

	/* -----------------------------------------------------------------------
	   BANDEAU ANIMÉ - Version horizontale mobile
	   ----------------------------------------------------------------------- */

	/* Version horizontale pour mobile */
	.column-model-bandeau-anime {
		display: flex;
		flex-direction: column;
		gap: 0;
		height: auto;
		padding: 0;
		position: relative;
	}

	/* Image 2/3 largeur alignée à droite, au-dessus du bandeau */
	.column-model-bandeau-anime img {
		width: 66.66%;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		margin-left: auto;
		margin-right: 0;
		position: relative; /* Garantit que z-index s'applique (position: relative requise) */
		z-index: 2;
		order: -1;
		margin-bottom: -50px;
	}

	/* Support Imagify : <picture> est l'item flex, pas <img> */
	.column-model-bandeau-anime picture {
		width: 66.66%;
		margin-left: auto;
		margin-right: 0;
		position: relative; /* Garantit que z-index s'applique (position: relative requise) */
		z-index: 2;
		order: -1;
		margin-bottom: -50px;
		display: block;
	}

	.column-model-bandeau-anime picture img {
		width: 100%;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		object-position: center center;
		display: block;
		/* Reset des propriétés de layout appliquées par .column-model-bandeau-anime img
		   qui ciblerait aussi ce <img> interne à <picture>, causant un double margin-bottom */
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 0;
		position: static;
		z-index: auto;
		order: 0;
	}

	/* Bandeau horizontal sous l'image - pleine largeur écran, hauteur doublée */
	.bandeau-anime-color-bg {
		position: relative;
		width: 100vw;
		left: 50%;
		right: 50%;
		margin-left: -50vw;
		margin-right: -50vw;
		height: 120px;
		top: auto;
		bottom: auto;
		overflow: hidden;
		display: flex;
		align-items: flex-end;
		justify-content: flex-start;
		z-index: 1;
	}

	/* Rail d'animation horizontal aligné en bas */
	.bandeau-anime-track {
		position: absolute;
		left: 0;
		bottom: var(--spacing-md);
		width: auto;
		height: auto;
		display: flex;
		flex-direction: row;
		gap: 0;
		will-change: transform;
	}

	/* Texte horizontal (pas de writing-mode) */
	.bandeau-anime-text {
		font-family: var(--font-texte-bandeau-family);
		font-size: var(--font-texte-bandeau-size);
		font-weight: var(--font-texte-bandeau-weight);
		text-transform: var(--font-texte-bandeau-text-transform);
		color: var(--color-white);
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--spacing-md);
		white-space: nowrap;
		writing-mode: horizontal-tb;
		text-orientation: initial;
		padding: 0 var(--spacing-md) 0 0;
	}

	/* Icône à droite du texte */
	.bandeau-anime-text .bandeau-anime-icon {
		width: 20px;
		height: 20px;
		fill: currentColor;
		flex-shrink: 0;
	}

	/* Couleurs de fond (nécessaires sur mobile) */
	.bandeau-anime-color-green {
		background-color: var(--color-green);
	}

	.bandeau-anime-color-blue {
		background-color: var(--color-blue);
	}

	.bandeau-anime-color-pink {
		background-color: var(--color-pink);
	}

	.bandeau-anime-color-gold {
		background-color: var(--color-gold);
	}
}

/* ============================================================================
   COLONNES SECTION - Adaptation générale (≤1200px)
   ========================================================================== */

@media (max-width: 1200px) {

	/* Gap entre éléments dans colonnes (valeurs mobiles) */
	.section-column {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-sm);
	}

	.section-column > * + * {
		margin-top: 0;
	}

	/* -----------------------------------------------------------------------
	   IMAGES - Responsive général
	   ----------------------------------------------------------------------- */

	/* Images full width par défaut */
	.section-column img {
		max-width: 100%;
		height: auto;
	}

	/* Images avec ratio 4/3 */
	.section-column .image-4-3 {
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}
}

/* ============================================================================
   PRODUCT LOOP - Structure commune (≤1200px)
   ========================================================================== */

@media (max-width: 1200px) {

	/* Variables couleur (nécessaires sur mobile) */
	.product-loop-color-green { --product-color: var(--color-green); }
	.product-loop-color-blue  { --product-color: var(--color-blue); }
	.product-loop-color-pink  { --product-color: var(--color-pink); }
	.product-loop-color-gold  { --product-color: var(--color-gold); }
	.product-loop-color-text  { --product-color: var(--color-text); }

	/* Lien - Couvre toute la carte */
	.product-loop-link {
		display: block;
		text-decoration: none;
		color: inherit;
	}

	/* Carte - Structure verticale */
	.product-loop-item {
		display: flex;
		flex-direction: column;
		border: 6px solid var(--color-background);
		box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.125);
		max-width: 325px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Zone images */
	.product-loop-images {
		position: relative;
		box-shadow: inset 2px 2px 12px rgba(0, 0, 0, 0.125);
	}

	.product-loop-images-content {
		margin-top: -12px;
		position: relative;
		z-index: 2;
	}

	.product-variations-images {
		position: relative;
		width: 100%;
	}

	.product-variations-images .variation-image img {
		width: 100%;
		height: auto;
		display: block;
	}

	.product-variations-images.count-1 .single-image {
		width: 80%;
		margin: 0 auto;
		transform: translateY(-15px);
	}

	.product-variations-images.count-2 {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}

	.product-variations-images.count-2 .main-variation {
		width: 80%;
		z-index: 1;
		transform: translateY(-15px);
	}

	.product-variations-images.count-2 .secondary-variation {
		width: 65%;
		z-index: 2;
		margin-left: -45%;
		transform: translateY(6px);
	}

	/* Bandeau */
	.product-loop-images-bandeau {
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 100px;
		transform: translateY(-50%);
		background-color: var(--product-color);
		z-index: 1;
	}

	/* Catégorie */
	.product-loop-images-category {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 3;
		background-color: var(--color-text);
		color: var(--color-background);
		padding: var(--spacing-xs) var(--spacing-md);
		font-family: var(--font-small-text-accent-family);
		font-size: var(--font-small-text-accent-size);
		font-weight: var(--font-small-text-accent-weight);
		text-transform: var(--font-small-text-accent-text-transform);
		line-height: var(--font-small-text-accent-line-height);
	}

	/* Zone textes */
	.product-loop-texts {
		display: flex;
		flex-direction: column;
	}

	/* Auteur */
	.product-loop-author {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: var(--spacing-xs);
		font-family: var(--font-small-text-italic-family);
		font-weight: var(--font-small-text-italic-weight);
		font-style: var(--font-small-text-italic-style);
		color: var(--color-text);
	}

	.product-loop-author-text {
		font-weight: 500;
	}

	/* Séparateur */
	.product-loop-separator {
		width: 100%;
		height: 1px;
		background-color: var(--product-color);
		flex-shrink: 0;
	}

	/* Formats */
	.product-loop-formats {
		font-family: var(--font-small-text-family);
		font-weight: var(--font-small-text-weight);
		line-height: var(--line-height-comfortable);
		color: var(--color-text);
		text-align: center;
	}

	.product-loop-formats-name {
		font-weight: 500;
	}

	/* -----------------------------------------------------------------------
	   PRODUCT LOOP - Tailles mobiles (marges, padding, font-sizes)
	   ----------------------------------------------------------------------- */

	/* Rangée : stack vertical centré */
	.archive-products-row {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: calc(var(--spacing-xl) * 1.5);
		padding: var(--spacing-lg) 0;
	}

	/* Reset zigzag */
	.archive-products-row > .product-loop-link {
		width: 100%;
		transform: none !important;
	}

	/* Textes */
	.product-loop-texts {
		gap: 6px;
		padding: calc((var(--spacing-xs) + var(--spacing-sm)) / 2) calc((var(--spacing-xs) + var(--spacing-sm)) / 2) 6px calc((var(--spacing-xs) + var(--spacing-sm)) / 2);
	}

	.product-loop-excerpt {
		font-size: var(--text-size-s);
	}

	.product-loop-author {
		font-size: var(--text-size-s);
	}

	.product-loop-author-icon {
		width: 1em;
		height: 1em;
		fill: var(--product-color);
	}

	.product-loop-formats {
		font-size: var(--text-size-s);
	}

	/* Variant Transmission — design arrondi + pas de décalage vertical */
	.archive-products-row .product-loop-item.product-loop-variant-transmission {
		border-radius: 36px;
	}
	.product-loop-variant-transmission .product-loop-images {
		border-radius: 30px;
		overflow: hidden;
	}
	.product-loop-variant-transmission .product-loop-images-category {
		border-radius: 12px;
	}
	.product-loop-variant-transmission .product-loop-images-content {
		margin-top: 0;
	}
	.product-loop-variant-transmission .product-variations-images.count-1 .single-image {
		transform: none;
	}
}