/*
Theme Name: CPC Cœur de ville
Template: twentytwentyfour
Description: Habillage du jeu concours « Le quiz du cœur de ville » de Commerce Pontarlier Centre (octobre 2026), aux couleurs de la carte cadeau : noir, or, crème. Thème enfant de Twenty Twenty-Four, polices auto-hébergées, aucune requête externe. Réalisation Agence PTL, theo@agenceptl.fr, 06 33 58 83 87, agence-ptl.fr.
Author: Agence PTL
Author URI: https://agence-ptl.fr
Version: 1.1.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: cpc-coeur-de-ville
*/

/* En-tête */
.cdv-entete-site { border-bottom: 1px solid rgba(212, 170, 102, .22); }
.cdv-entete-site .cdv-marque { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.cdv-entete-site .cdv-marque img { width: 56px; height: auto; display: block; }
.cdv-entete-site .cdv-nom { font-family: var(--wp--preset--font-family--body); font-weight: 800; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--wp--preset--color--accent-2); line-height: 1.5; }
.cdv-entete-site .cdv-nom small { display: block; font-weight: 400; letter-spacing: .08em; text-transform: none; font-size: .78rem; color: var(--wp--preset--color--contrast-2); }
.cdv-entete-site .cdv-lien { font-size: .82rem; color: var(--wp--preset--color--contrast-2); text-decoration: none; border-bottom: 1px solid rgba(212, 170, 102, .4); }
.cdv-entete-site .cdv-lien:hover, .cdv-entete-site .cdv-lien:focus-visible { color: var(--wp--preset--color--accent-2); }

/* Pied de page */
.cdv-pied { border-top: 1px solid rgba(212, 170, 102, .22); font-size: .82rem; color: var(--wp--preset--color--contrast-2); }
.cdv-pied a { color: var(--wp--preset--color--contrast); text-decoration: none; border-bottom: 1px solid rgba(212, 170, 102, .4); }
.cdv-pied a:hover, .cdv-pied a:focus-visible { color: var(--wp--preset--color--accent-2); }
.cdv-pied .cdv-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }

/* Pages de texte (règlement, mentions, données personnelles) */
.cdv-texte { font-size: 1rem; line-height: 1.7; }
.cdv-texte > h2 { font-family: var(--wp--preset--font-family--body); font-weight: 800; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--accent); margin-top: 2.2em; }
.cdv-texte > p { text-wrap: pretty; }
.cdv-texte .cdv-chapo { color: var(--wp--preset--color--contrast-2); }

@media (max-width: 600px) {
	.cdv-entete-site .cdv-lien { display: none; }
	.cdv-entete-site .cdv-marque img { width: 46px; }
}

/* Crédit agence : pastille « Agence PTL » qui attire l’œil sans crier.
   Bordure or en dégradé conique qui tourne au survol, pastille menthe (signature PTL)
   qui pulse doucement, nom en or qui brille par balayage, flèche qui glisse. */
@property --cdv-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.cdv-pied .cdv-credit { margin: 4px 0 0; text-align: center; font-size: .82rem; }
.cdv-pied .cdv-credit-pre { color: var(--wp--preset--color--contrast-3); margin-right: 6px; transition: color .4s; }
.cdv-pied .cdv-ptl {
	--cdv-angle: 0deg;
	--cdv-menthe: #12f1cd;
	position: relative; isolation: isolate;
	display: inline-flex; align-items: center; gap: 9px; vertical-align: middle;
	padding: 8px 13px 8px 11px; border: 1px solid transparent; border-radius: 999px;
	background:
		linear-gradient(var(--wp--preset--color--base-2), var(--wp--preset--color--base-2)) padding-box,
		conic-gradient(from var(--cdv-angle), rgba(212, 170, 102, .18), rgba(233, 203, 142, .95) 22%, rgba(184, 134, 59, .35) 48%, rgba(212, 170, 102, .18) 70%, rgba(233, 203, 142, .85) 88%, rgba(212, 170, 102, .18)) border-box;
	color: var(--wp--preset--color--accent-2); text-decoration: none; line-height: 1;
	box-shadow: 0 0 0 0 rgba(212, 170, 102, 0);
	transition: transform .45s cubic-bezier(.2, .9, .25, 1.2), box-shadow .45s ease, color .3s ease;
	animation: cdv-tour 9s linear infinite;
}
.cdv-pied .cdv-ptl-point {
	width: 7px; height: 7px; border-radius: 50%; flex: none;
	background: var(--cdv-menthe);
	box-shadow: 0 0 0 0 rgba(18, 241, 205, .55), 0 0 10px rgba(18, 241, 205, .55);
	animation: cdv-pouls 2.6s cubic-bezier(.4, 0, .2, 1) infinite;
}
.cdv-pied .cdv-ptl-nom {
	font-family: var(--wp--preset--font-family--body); font-weight: 800; font-size: .68rem;
	letter-spacing: .2em; text-transform: uppercase; padding-left: .2em;
	background: linear-gradient(100deg, var(--wp--preset--color--accent-3) 0%, var(--wp--preset--color--accent) 30%, #fff3d6 50%, var(--wp--preset--color--accent) 70%, var(--wp--preset--color--accent-3) 100%);
	background-size: 250% 100%; background-position: 100% 0;
	-webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
	animation: cdv-brillance 6s ease-in-out infinite;
}
.cdv-pied .cdv-ptl-fleche {
	flex: none; color: var(--wp--preset--color--accent); opacity: .55;
	transform: translateX(-2px);
	transition: transform .45s cubic-bezier(.2, .9, .25, 1.2), opacity .3s ease, color .3s ease;
}
.cdv-pied .cdv-ptl:hover, .cdv-pied .cdv-ptl:focus-visible {
	color: var(--wp--preset--color--accent-4);
	transform: translateY(-2px) scale(1.03);
	box-shadow: 0 14px 34px -14px rgba(212, 170, 102, .75), 0 0 0 4px rgba(212, 170, 102, .08);
	animation-duration: 1.4s;
}
.cdv-pied .cdv-ptl:hover .cdv-ptl-nom, .cdv-pied .cdv-ptl:focus-visible .cdv-ptl-nom { animation-duration: 1.2s; }
.cdv-pied .cdv-ptl:hover .cdv-ptl-fleche, .cdv-pied .cdv-ptl:focus-visible .cdv-ptl-fleche { transform: translateX(3px); opacity: 1; color: var(--wp--preset--color--accent-2); }
.cdv-pied .cdv-ptl:hover .cdv-ptl-point, .cdv-pied .cdv-ptl:focus-visible .cdv-ptl-point { animation-duration: 1.1s; }
.cdv-pied .cdv-credit:hover .cdv-credit-pre { color: var(--wp--preset--color--contrast-2); }
.cdv-pied .cdv-ptl:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 4px; }
@keyframes cdv-tour { to { --cdv-angle: 360deg; } }
@keyframes cdv-pouls {
	0%   { box-shadow: 0 0 0 0 rgba(18, 241, 205, .55), 0 0 10px rgba(18, 241, 205, .55); }
	70%  { box-shadow: 0 0 0 7px rgba(18, 241, 205, 0), 0 0 10px rgba(18, 241, 205, .35); }
	100% { box-shadow: 0 0 0 0 rgba(18, 241, 205, 0), 0 0 10px rgba(18, 241, 205, .55); }
}
@keyframes cdv-brillance {
	0%, 55% { background-position: 100% 0; }
	85%, 100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.cdv-pied .cdv-ptl, .cdv-pied .cdv-ptl-point, .cdv-pied .cdv-ptl-nom { animation: none; }
	.cdv-pied .cdv-ptl, .cdv-pied .cdv-ptl-fleche { transition: color .2s ease, opacity .2s ease; }
	.cdv-pied .cdv-ptl:hover, .cdv-pied .cdv-ptl:focus-visible { transform: none; }
	.cdv-pied .cdv-ptl-nom { background-position: 50% 0; }
}