/*
Theme Name: Coup de Phare
Template: actu-commun
Description: Habillage de coupdephare.fr (maquette validée le 28/10/2026) : asphalte et ambre, Barlow Condensed et Barlow.
Version: 0.1.0
Text Domain: coupdephare
*/

:root {
	--encre: #121519;
	--accent: #FFB020;
	--doux: #F3F4F6;
	--doux-ligne: #E3E5E8;
	--ligne: #E3E5E8;
	--ligne-forte: #D0D4DA;
	--gris: #5A616B;
	--texte: #1E242C;
	--chapo: #39404A;
	--survol: #B45F00;
	--entete-fond: #121519;
	--entete-texte: #FFFFFF;
	--entete-ligne: #262B33;
	--entete-bouton-bord: #3A414B;
	--pastille-fond: #22272E;
	--pastille-texte: #FFFFFF;
	--pastille-active-fond: var(--accent);
	--pastille-active-texte: #121519;
	--sous-fond: #F3F4F6;
	--pastille-contour: #D0D4DA;
	--rayon-pastille: 8px;
	--rayon-image: 12px;
	--rayon-carte: 14px;
	--police-titre: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--police-ui: Barlow, system-ui, sans-serif;
	--police-lecture: Barlow, system-ui, sans-serif;
	--titre-echelle: 1.2;
	--titre-espacement: -0.005em;
	--titre-interligne: 0.98;
	--section-casse: uppercase;
	--logo-casse: uppercase;
	--logo-espacement: 0.02em;
	--logo-echelle: 1.2;
	--chapo-graisse: 500;
	--essentiel-fond: #121519;
	--essentiel-texte: #FFFFFF;
	--essentiel-ligne: #2C333D;
	--essentiel-titre: var(--accent);
	--initiales-fond: #121519;
	--initiales-texte: var(--accent);
	--pied-fond: #121519;
	--pied-doux: #C9D0D8;
	--image-vide: #DDE0E6;
}

/* Les pastilles de rubrique, en sombre dans l'en-tête */
.entete .rubriques .pastille { font-weight: 600; }
.entete .rubriques .pastille.est-active { font-weight: 700; }
.pastilles-sous .pastille { color: var(--encre); }
.pastilles-sous .pastille.est-active { background: var(--encre); color: #FFFFFF; }
.logo__nom { font-size: 24px; }
@media (min-width: 768px) { .logo__nom { font-size: 28px; } }

/* Titres condensés */
.carte__titre, .titre-section, .titre-encart { letter-spacing: 0.005em; }
.carte--liste .carte__titre, .carte--colonne .carte__titre { font-family: var(--police-ui); }
.titre-section { font-size: 28px; }
@media (min-width: 768px) { .titre-section { font-size: 34px; } }
.article__texte h2 { line-height: 1.05; }
.article__surtitre { background: var(--accent); color: var(--encre); padding: 3px 8px; border-radius: 5px; }
.surtitre { font-size: 12px; letter-spacing: 0.06em; }
.bouton, .bouton--contour { border-width: 2px; }

/* Zone sombre de l'accueil */
.zone-sombre { background: #121519; color: #FFFFFF; }
.zone-sombre a { color: #FFFFFF; }
.zone-sombre a:hover { color: #FFD27A; }
.zone-sombre__contenu { display: flex; flex-direction: column; gap: 24px; padding-top: 16px; padding-bottom: 28px; }
.zone-sombre .pub { --pub-fond: #1C2128; --pub-bord: #4A525D; --pub-texte: #A9B1BB; }
.zone-sombre .meta { color: #A9B1BB; }
.zone-sombre .vide { color: #C9D0D8; }
.une-sombre { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; }
.une-sombre__image { flex: 3 1 560px; min-width: 0; }
.une-sombre__image .image-169 { background: #2C333D; }
.une-sombre__texte { flex: 2 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.etiquette { align-self: flex-start; display: inline-flex; padding: 4px 10px; border-radius: 6px; background: var(--accent); color: #121519; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.une-sombre__titre { margin: 0; font-size: 34px; line-height: 1; font-weight: 800; }
.une-sombre__chapo { margin: 0; font-size: 17px; line-height: 1.5; color: #C9D0D8; }
@media (min-width: 768px) {
	.zone-sombre__contenu { gap: 32px; padding-top: 24px; padding-bottom: 40px; }
	.une-sombre__titre { font-size: 52px; }
	.une-sombre__chapo { font-size: 19px; }
}

/* Prix à la pompe */
.pompe { border-top: 1px solid #2C333D; padding-top: 20px; }
.pompe__tete { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.pompe__tete h2 { margin: 0; font-size: 26px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; }
.pompe__source { font-size: 13px; color: #A9B1BB; }
.pompe__espace { flex: 1; }
.pompe__tete a { font-weight: 600; font-size: 15px; }
.pompe__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pompe__carte { background: #1C2128; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.pompe__nom { font-size: 14px; font-weight: 600; color: #C9D0D8; }
.pompe__prix { font-family: var(--police-titre); font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pompe__ecart { font-size: 12px; color: #A9B1BB; }
@media (min-width: 768px) {
	.pompe { padding-top: 24px; }
	.pompe__tete { margin-bottom: 16px; }
	.pompe__tete h2 { font-size: 30px; }
	.pompe__source { font-size: 14px; }
	.pompe__grille { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
	.pompe__carte { padding: 16px; gap: 6px; }
	.pompe__nom { font-size: 15px; }
	.pompe__prix { font-size: 40px; }
	.pompe__ecart { font-size: 13px; }
}
/* Version colonne (rubrique Carburant), sur fond sombre aussi */
.pompe--compact { background: #121519; color: #FFFFFF; border: 0; border-radius: 16px; padding: 20px; }
.pompe--compact a { color: #FFFFFF; }
.pompe--compact .pompe__tete h2 { font-size: 24px; }
.pompe--compact .pompe__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pompe--compact .pompe__prix { font-size: 28px; }
.pub-apres-service { padding-top: 20px; }

/* Accueil : trois infos, rappels */
.accueil--cdp { padding-top: 24px; }
.trois { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px 24px; margin-bottom: 40px; }
.trois .carte__titre { font-size: 19px; line-height: 1.25; }
.cdp-colonne-pub { display: none; }
.pub-colonne--longue { flex: 1; height: auto; min-height: 1200px; }
@media (min-width: 768px) {
	.accueil--cdp { padding-top: 40px; }
	.cdp-colonne-pub { display: flex; }
	.trois .carte__titre { font-size: 20px; }
}
.rappels { background: var(--doux); border-radius: 16px; padding: 20px 16px; display: flex; flex-wrap: wrap; gap: 20px 32px; margin-bottom: 40px; }
.rappels__intro { flex: 1 1 250px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rappels__intro h2 { margin: 0; font-size: 28px; line-height: 1.05; font-weight: 800; text-transform: uppercase; }
.rappels__intro p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--chapo); }
.rappels__intro label { font-size: 14px; font-weight: 700; }
.rappels__intro input { min-height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--ligne-forte); background: #FFFFFF; font-size: 16px; }
.rappels__liste { flex: 3 1 340px; min-width: 0; display: flex; flex-direction: column; }
.rappels__titre-liste { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); margin-bottom: 4px; }
.rappels__ligne { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--ligne-forte); text-decoration: none; color: var(--encre); }
.rappels__ligne[hidden] { display: none; }
.rappels__ligne:hover .rappels__texte { text-decoration: underline; text-underline-offset: 3px; }
.rappels__date { flex: none; width: 56px; font-weight: 700; font-size: 14px; }
.rappels__texte { font-size: 15px; line-height: 1.4; }
.rappels__aucun { font-size: 14px; }
@media (min-width: 768px) {
	.rappels { padding: 28px; gap: 32px; margin-bottom: 48px; }
	.rappels__intro h2 { font-size: 34px; }
}
.rappels--compact { padding: 20px; margin-bottom: 0; }
.rappels--compact .rappels__intro h2 { font-size: 24px; }
.sujets { margin-top: 40px; }