/**
 * Footer Responsive Styles
 *
 * Styles complets pour le footer mobile.
 * Inclut tous les styles de base car footer.css est entièrement dans @media (min-width: 1201px).
 * Mobile (≤1200px) : Stack vertical, bandeau masqué, grid hybride
 *
 * @package     UneAutreVoix
 * @author      Horizon Signature
 * @copyright   2026 Horizon Signature
 * @license     Proprietary
 * @version     0.1.0
 *
 * @changelog
 * 0.1.0 — Passage en preprod
 * 0.0.8 - Modale newsletter mobile : width 100%, max-width 96vw, padding 24px 20px, form-name en colonne
 * 0.0.7 - Refonte footer mobile complète
 *        - Fix : ajout de TOUS les styles de base manquants (footer.css = desktop only)
 *        - Green container : background-color, display flex, flex-direction column, align-items center
 *        - Footer title : font-family, font-weight, color, text-align, text-wrap balance
 *        - Newsletter text : font-family, font-weight, color, text-align, text-wrap balance
 *        - Social icons : display flex, align-items/justify-content center, SVG fill
 *        - Info list : list-style none, display flex column, flex-shrink, SVG fill
 *        - Info item : display flex, gap, align-items center
 *        - Articles list : list-style none, display flex column, text-decoration none
 *        - Grid-item h3 : color, margin 0
 *        - CTA white : --cta-border-color
 *        - Typographie : texte info/liens = calc((s+m)/2) = 15px
 *        - Social icons : 28px → 32px (meilleur tap target)
 *        - Icônes info : 14px → 16px
 *        - Grid : display grid avec 2 colonnes pour Navigation/Autres liens
 *        - Séparateur entre coordonnées et articles (border-bottom)
 * 0.0.6 - BREAKING CHANGE : Suppression breakpoint tablette (768-1200px)
 *        - Fusion tablette + mobile → 1 seul breakpoint ≤1200px
 *        - Layout : Stack vertical systématique (plus de 2 colonnes)
 *        - Bandeau animé : masqué pour tous ≤1200px
 *        - Utilisation valeurs mobiles compactes (spacing-xl: 32px, text-size-s: 13px)
 *        - Simplification maintenance : ~144 lignes CSS supprimées
 * 0.0.5 - Migration système de line-height unifié
 * 0.0.4 - Migration système de typographie unifié
 * 0.0.3 - Migration complète vers variables d'espacement sémantiques
 * 0.0.2 - Fix : s'assurer que desktop n'est pas affecté
 * 0.0.1 - Version initiale du footer responsive
 */

/* ============================================================================
   Desktop (≥1201px) - Pas de modifications
   ========================================================================== */

@media (min-width: 1201px) {
	/* Le footer desktop utilise les styles de footer.css */
	/* Rien à surcharger ici */
}

/* ============================================================================
   Footer Mobile (≤1200px) - Styles complets
   footer.css est entièrement dans @media (min-width: 1201px), donc aucun
   style de base ne s'applique sur mobile. Ce fichier définit TOUT.
   ========================================================================== */

@media (max-width: 1200px) {

	/* --- FONT WEIGHT --- */
	.site-footer {
		font-weight: 500;
	}

	/* --- LAYOUT STACK VERTICAL --- */
	.site-footer .footer-columns {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: auto;
		gap: var(--spacing-xl);
		padding: var(--spacing-xl) var(--spacing-md);
	}

	.site-footer .footer-col {
		width: 100%;
	}

	/* --- COLONNE GAUCHE --- */
	.site-footer .footer-col-left {
		position: relative;
	}

	/* Colonne gauche : position relative pour le bandeau */
	.site-footer .footer-col-left {
		position: relative;
	}

	/* Bandeau horizontal derrière la case verte (mobile) */
	.site-footer .footer-bandeau {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%);
		width: 100vw;
		height: 15vw;
		background-color: var(--color-text);
		z-index: 0;
		margin-left: -50vw;
	}

	/* Rail d'animation horizontal sur mobile */
	.site-footer .footer-bandeau .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;
		transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}

	.site-footer .footer-bandeau .bandeau-anime-track .bandeau-anime-text {
		margin: 0;
	}

	.site-footer .footer-bandeau .bandeau-anime-text {
		white-space: nowrap;
		writing-mode: horizontal-tb;
		transform: none;
		display: flex;
		align-items: center;
		gap: var(--spacing-lg);
	}

	/* Container vert - styles complets */
	.site-footer .footer-green-container {
		background-color: var(--color-green);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 1;
		padding: var(--spacing-xl) var(--spacing-md);
		gap: var(--spacing-md);
	}

	/* Titre H2 du footer */
	.site-footer .footer-title {
		font-family: var(--font-h3-family);
		font-size: var(--text-size-xl);
		font-weight: var(--font-h3-weight);
		line-height: var(--line-height-medium);
		color: var(--color-text);
		margin: 0;
		text-align: center;
		text-wrap: balance;
	}

	/* CTA Newsletter avec bordure blanche */
	.site-footer .section-cta-white {
		--cta-border-color: var(--color-white);
		width: 100%;
		text-align: center;
	}

	/* Texte confidentialité newsletter */
	.site-footer .footer-newsletter-text {
		font-family: var(--font-small-text-family);
		font-size: var(--text-size-s);
		font-weight: var(--font-small-text-weight);
		line-height: var(--line-height-comfortable);
		color: var(--color-text);
		margin: 0;
		text-align: center;
		text-wrap: balance;
	}

	/* Icônes réseaux sociaux */
	.site-footer .footer-social-icons {
		display: flex;
		gap: var(--spacing-md);
		align-items: center;
		justify-content: center;
	}

	.site-footer .footer-social-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
	}

	.site-footer .footer-social-icon svg {
		width: 100%;
		height: 100%;
		fill: var(--color-white);
	}

	/* --- COLONNE DROITE --- */
	.site-footer .footer-col-right {
		padding-left: 0;
	}

	/* Grid : une seule colonne, tout empilé */
	.site-footer .footer-grid {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.site-footer .footer-grid-item {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-sm);
		align-items: flex-start;
		padding: var(--spacing-md) 0;
		border-bottom: 1px solid color-mix(in srgb, var(--color-text) 15%, transparent);
	}

	/* Dernier item : pas de bordure en bas */
	.site-footer .footer-grid-item:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	/* Premier item : pas de padding en haut */
	.site-footer .footer-grid-item:first-child {
		padding-top: 0;
	}

	/* Titres H3 des grid items */
	.site-footer .footer-grid-item h3 {
		font-family: var(--font-h3-family);
		font-size: var(--text-size-xl);
		font-weight: var(--font-h3-weight);
		line-height: var(--line-height-medium);
		color: var(--color-text);
		margin: 0;
	}

	/* Liste d'informations avec icônes */
	.site-footer .footer-info-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--spacing-xs);
	}

	.site-footer .footer-info-item {
		display: flex;
		gap: var(--spacing-sm);
		align-items: center;
	}

	.site-footer .footer-info-icon {
		flex-shrink: 0;
		width: 16px;
		height: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.site-footer .footer-info-icon svg {
		width: 100%;
		height: 100%;
		fill: var(--color-text);
	}

	.site-footer .footer-info-text {
		font-family: var(--font-body-family);
		font-size: calc((var(--text-size-s) + var(--text-size-m)) / 2);
		line-height: var(--line-height-comfortable);
		color: var(--color-text);
	}

	/* Liste des articles / liens de navigation */
	.site-footer .footer-articles-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--spacing-xs);
	}

	.site-footer .footer-articles-list a {
		font-family: var(--font-body-family);
		font-size: calc((var(--text-size-s) + var(--text-size-m)) / 2);
		line-height: var(--line-height-comfortable);
		color: var(--color-text);
		text-decoration: none;
	}

	/* CTA "Tous les articles" */
	.site-footer .footer-grid-item .section-cta {
		width: auto;
		text-align: left;
		margin-top: var(--spacing-sm);
	}

	/* Modale newsletter — overrides mobile (identique à .uav-avis-modal-content mobile) */
	.uav-newsletter-modal-content {
		padding: 24px 20px;
		width: 100%;
		max-width: 96vw;
		max-height: 94vh;
	}

	.uav-newsletter-form-name {
		flex-direction: column;
	}
}