/**
 * Footer — Click Digital.
 * Remplace le footer générique de GeneratePress (voir footer.php). Même
 * langage graphique que le reste de la home : fond sombre identique aux
 * sections Secteurs/À propos/CTA (--pcd-primary-hover), grille structurée,
 * petits repères techniques, numérotation bleue. Toutes les couleurs,
 * espacements et typographies viennent des tokens globaux (globale.css) —
 * aucune valeur de charte dupliquée ici.
 */

.pcd-footer {
	position: relative;
	z-index: 0;   /* même correctif de z-index déjà utilisé ailleurs (voir .pcd-home-services) : contient le z-index:-1 des décorations ci-dessous */
	background-color: var(--pcd-primary-hover);
	/* CTA et footer partagent le même fond sombre (--pcd-primary-hover) : ce
	   filet marque la limite entre les deux sans casser la continuité de
	   couleur — même token --pcd-border que les séparateurs de colonnes et
	   la barre légale ci-dessous, pas une nouvelle couleur. */
	border-top: 1px solid var(--pcd-border);
	padding-top: var(--pcd-space-9);   /* 80px — dans la fourchette 70-90px demandée */
	--pcd-heading:     var(--pcd-primary-contrast);
	--pcd-text-muted:  color-mix(in srgb, var(--pcd-primary-contrast) 70%, transparent);
	--pcd-border:      color-mix(in srgb, var(--pcd-primary-contrast) 24%, transparent);
	--pcd-link-hover:  var(--pcd-primary-contrast);
}

/* Décoration : même motif générique .pcd-modgroup/.pcd-modblock que le
   reste du site (globale.css) — 2 groupes maximum, discrets, uniquement en
   --blue (jamais --navy, trop proche du fond sombre ici). */
.pcd-footer__modules {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.pcd-footer__modules .pcd-modgroup[data-footer-mod="1"] {
	top: var(--pcd-space-7);
	left: 4%;
}

.pcd-footer__modules .pcd-modgroup[data-footer-mod="2"] {
	bottom: var(--pcd-space-10);
	right: 5%;
}

/* --- Grille des 4 zones (desktop) ---------------------------------------
   A ≈ 35 % (identité) / B, C, D ≈ 21-22 % chacune (Navigation, Contact,
   Informations). Gap généreux : sert aussi de zone d'accueil aux
   séparateurs verticaux (voir .pcd-footer__divider), centrés dans ce gap. */
.pcd-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: var(--pcd-space-8);
	padding-bottom: var(--pcd-space-8);   /* 64px — dans la fourchette 60-80px demandée */
}

/* --- Bloc identité -------------------------------------------------------- */
.pcd-footer__brand {
	display: inline-block;
}

.pcd-footer__logo {
	display: block;
	height: 32px;   /* taille moyenne, proche du logo header (34px) */
	width: auto;
}

.pcd-footer__desc {
	max-width: 34ch;
	margin: var(--pcd-space-5) 0 var(--pcd-space-2);
	color: var(--pcd-text-muted);
	font-size: var(--pcd-text-sm);
}

.pcd-footer__location {
	margin: 0 0 var(--pcd-space-6);
	color: var(--pcd-text-muted);
	font-size: var(--pcd-text-sm);
}

/* France Num : reste secondaire visuellement, intégré au bloc identité (pas
   une colonne à part). Badge officiel (asset du projet, uploads/2026/09/). */
.pcd-footer__france-num {
	display: flex;
	align-items: flex-start;
	gap: var(--pcd-space-3);
	max-width: 30ch;
}

.pcd-footer__france-num-badge {
	flex: none;
	display: block;
	height: 75px;   /* +10 % (était 68px) */
	width: auto;
}

.pcd-footer__france-num-sep {
	flex: none;
	width: 1px;
	align-self: stretch;
	background: var(--pcd-border);
}

.pcd-footer__france-num-text {
	margin: 0;
	color: var(--pcd-text-muted);
	font-size: var(--pcd-text-xs);
	line-height: var(--pcd-leading-normal);
}

/* --- Colonnes Navigation / Contact / Informations ------------------------ */
.pcd-footer__col {
	position: relative;
}

/* Séparateur vertical technique : trait fin + léger débordement haut/bas +
   petit trait horizontal à chaque extrémité — même vocabulaire que les
   cadrages techniques du reste du site (coins ouverts + repères courts),
   ici décliné en séparateur de colonne plutôt qu'en coin de carte. Centré
   dans le gap de la grille. */
.pcd-footer__divider {
	position: absolute;
	top: -10px;
	bottom: -10px;
	left: calc(-1 * var(--pcd-space-8) / 2);
	width: 1px;
	background: var(--pcd-border);
}
/*.pcd-footer__divider::before,
.pcd-footer__divider::after {
	content: "";
	position: absolute;
	left: -4px;
	width: 9px;
	height: 1px;
	background: color-mix(in srgb, var(--pcd-primary-contrast) 30%, transparent);
}
.pcd-footer__divider::before { top: 0; }
.pcd-footer__divider::after  { bottom: 0; }*/

.pcd-footer__col-index {
	display: block;
	margin: 0 0 var(--pcd-space-2);
	font-family: var(--pcd-font-heading);
	font-size: var(--pcd-text-sm);
	font-weight: var(--pcd-weight-semibold);
	color: var(--pcd-primary);
}

.pcd-footer__col-title {
	margin: 0 0 var(--pcd-space-5);
	font-size: var(--pcd-text-lg);   /* plus petit que les H2 de section (--pcd-text-3xl) */
}

.pcd-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--pcd-space-3);
}

.pcd-footer__links a {
	color: var(--pcd-primary-contrast);
	font-size: var(--pcd-text-sm);
	text-decoration: none;
	transition: color var(--pcd-transition-fast);
}

.pcd-footer__links a:hover,
.pcd-footer__links a:focus-visible {
	color: var(--pcd-primary);
}

/* --- Colonne Contact ------------------------------------------------------ */
.pcd-footer__contact-list {
	font-style: normal;   /* <address> est en italique par défaut */
	display: flex;
	flex-direction: column;
	gap: var(--pcd-space-4);
	margin: 0 0 var(--pcd-space-5);
}

.pcd-footer__contact-item {
	margin: 0;
}

.pcd-footer__contact-label {
	display: block;
	margin: 0 0 var(--pcd-space-1);
	font-size: var(--pcd-text-xs);
	font-weight: var(--pcd-weight-semibold);
	letter-spacing: var(--pcd-tracking-wide);
	text-transform: uppercase;
	color: var(--pcd-primary);
}

.pcd-footer__contact-item a,
.pcd-footer__contact-item span:last-child {
	font-size: var(--pcd-text-sm);
	color: var(--pcd-primary-contrast);
}

.pcd-footer__contact-item a {
	text-decoration: none;
	transition: color var(--pcd-transition-fast);
}

.pcd-footer__contact-item a:hover,
.pcd-footer__contact-item a:focus-visible {
	color: var(--pcd-primary);
}

/* Icônes sociales : carrés discrets, fond transparent, bordure claire fine —
   même logique que les petits boutons déjà présents ailleurs sur le site
   (pas de nouveau style de bouton, juste ce composant local). */
.pcd-footer__social {
	display: flex;
	gap: var(--pcd-space-3);
}

.pcd-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--pcd-border);
	border-radius: var(--pcd-radius-sm);
	color: var(--pcd-primary-contrast);
	transition: border-color var(--pcd-transition-fast), color var(--pcd-transition-fast);
}

.pcd-footer__social-link:hover,
.pcd-footer__social-link:focus-visible {
	border-color: var(--pcd-primary);
	color: var(--pcd-primary);
}

/* --- Barre légale ---------------------------------------------------------- */
.pcd-footer__legal {
	border-top: 1px solid var(--pcd-border);
}

.pcd-footer__legal-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--pcd-space-2);
	padding-block: var(--pcd-space-4);   /* ~60-70px de hauteur totale avec le texte, comme demandé */
}

.pcd-footer__legal-copy,
.pcd-footer__legal-rights {
	margin: 0;
	font-size: var(--pcd-text-xs);
	color: var(--pcd-text-muted);
}

/* ================================================================ Tablette
   Grille 2×2 (identité pleine largeur, puis Navigation/Contact côte à côte,
   puis Informations pleine largeur) plutôt qu'une 4e colonne trop étroite. */
@media (max-width: 980px) {
	.pcd-footer__grid {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"identity identity"
			"nav contact"
			"info info";
		gap: var(--pcd-space-7);
	}

	.pcd-footer__identity  { grid-area: identity; }
	.pcd-footer__col--nav      { grid-area: nav; }
	.pcd-footer__col--contact  { grid-area: contact; }
	.pcd-footer__col--info {
		grid-area: info;
		border-top: 1px solid var(--pcd-border);
		padding-top: var(--pcd-space-6);
	}

	/* Nav n'a plus de colonne à sa gauche (elle est sous "identity" qui
	   occupe toute la largeur) : son séparateur n'a plus lieu d'être.
	   Contact reste à droite de Nav : son séparateur est conservé mais
	   recalé sur le nouveau gap (--pcd-space-7, pas --pcd-space-8). Info
	   utilise un filet horizontal (border-top ci-dessus) à la place. */
	.pcd-footer__col--nav .pcd-footer__divider,
	.pcd-footer__col--info .pcd-footer__divider {
		display: none;
	}

	.pcd-footer__col--contact .pcd-footer__divider {
		left: calc(-1 * var(--pcd-space-7) / 2);
	}
}

/* Tablette UNIQUEMENT (pas mobile, voir borne basse 561px) : bloc identité
   (logo + description + localisation) et badge France Num côte à côte au
   lieu d'empilés — l'un ne doit pas être une chose "sous" l'autre à cette
   largeur, ils partagent la même ligne. Plage volontairement distincte du
   bloc ≤980px ci-dessus (qui gère la grille 2×2 des 4 zones) pour ne
   toucher ni le desktop (>980px, empilement d'origine conservé) ni le
   mobile (≤560px, empilement d'origine conservé, colonne unique). */
@media (min-width: 561px) and (max-width: 980px) {
	.pcd-footer__identity {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0;
	}

	.pcd-footer__identity-main {
		min-width: 0;
	}

	.pcd-footer__france-num {
		flex: none;
	}
}

/* =================================================================== Mobile
   Une seule colonne, ordre : identité, navigation, contact, informations,
   barre légale (déjà l'ordre du DOM, voir footer.php). Séparateurs
   verticaux remplacés par de fines lignes horizontales, plus simples à lire
   en pile. */
@media (max-width: 560px) {
	.pcd-footer {
		padding-top: var(--pcd-space-7);
	}

	.pcd-footer__grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"identity"
			"nav"
			"contact"
			"info";
		gap: var(--pcd-space-6);
		padding-bottom: var(--pcd-space-6);
	}

	.pcd-footer__col {
		border-top: 1px solid var(--pcd-border);
		padding-top: var(--pcd-space-5);
	}

	.pcd-footer__col .pcd-footer__divider {
		display: none;
	}

	/* Bloc identité centré (logo, description, localisation, badge France
	   Num) plutôt que collé à gauche — plus naturel une fois la colonne
	   unique, pleine largeur, du mobile. Le texte du badge France Num reste
	   lisible en alignement naturel (gauche) : seul le GROUPE [badge + texte]
	   est centré dans sa largeur, via justify-content sur le flex existant. */
	.pcd-footer__identity-main {
		text-align: center;
	}

	/* text-align:center (ci-dessus) ne centre que le TEXTE à l'intérieur de
	   cette boîte — la boîte elle-même (max-width:34ch, règle de base) reste
	   collée à gauche sans marge automatique. Même correctif que pour
	   .pcd-footer__france-num juste en dessous. */
	.pcd-footer__desc {
		margin-inline: auto;
	}

	.pcd-footer__france-num {
		/* justify-content seul ne suffit pas : max-width:30ch (règle de base)
		   empêche déjà la boîte de remplir toute la largeur — c'est donc la
		   boîte elle-même, pas seulement son contenu, qu'il faut centrer. */
		justify-content: center;
		margin-inline: auto;
	}

	.pcd-footer__legal-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--pcd-space-1);
	}
}