/*
Theme Name: Petit Comité
Theme URI: https://petit-voyageur.fr
Author: Seobooster LTD
Description: Destinations et récits de voyage en petit comité — chaque itinéraire est une ligne d'étapes chiffrée, et la voix du comité qui l'a faite. Registre signalétique ferroviaire, bleu froid.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: petit-comite
*/

/* ==========================================================================
   0. JETONS — 1 neutre (papier/encre), 1 accent (jaune), bleu signal structurel
   ========================================================================== */
:root {
	--papier:        #F3F6F8;
	--encre:         #14263D;
	--veillee:       #1D3A5C;
	--veillee-encre: #E6EDF5;
	--signal:        #2C5188;
	--signal-clair:  #83A8DF;
	--jaune:         #F0B429;
	--jaune-encre:   #14263D;
	--vert:          #1C7A4B;
	--brique:        #A83828;

	--bg:      var(--papier);
	--texte:   var(--encre);
	--lien:    var(--signal);
	--lien-hover: var(--encre);
	--surface: #FFFFFF;
	--filet:   var(--signal);

	--rayon: 2px;
	--colonne: 66ch;
	--base: 8px;

	--police-faits: Archivo, "Arial Narrow", Arial, sans-serif;
	--police-voix:  Piazzolla, Georgia, "Times New Roman", serif;

	--fs-12: 0.75rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem;
	--fs-20: 1.25rem; --fs-25: 1.5625rem; --fs-31: 1.9375rem; --fs-39: 2.4375rem;
	--fs-49: 3.0625rem; --fs-72: 4.5rem;

	color-scheme: light;
}

[data-theme="dark"] {
	--bg: #14263D;
	--texte: #E6EDF5;
	--lien: #83A8DF;
	--lien-hover: #F0B429;
	--surface: #1D3A5C;
	--filet: var(--signal-clair);
	color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #14263D;
		--texte: #E6EDF5;
		--lien: #83A8DF;
		--lien-hover: #F0B429;
		--surface: #1D3A5C;
		--filet: var(--signal-clair);
		color-scheme: dark;
	}
}

/* ==========================================================================
   1. POLICES — self-hosted (P-086). Fichiers attendus dans assets/fonts/ ;
   la pile de repli tient seule tant qu'ils n'y sont pas encore.
   ========================================================================== */
@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Piazzolla"; src: url("assets/fonts/piazzolla-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Piazzolla"; src: url("assets/fonts/piazzolla-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Piazzolla"; src: url("assets/fonts/piazzolla-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

body {
	margin: 0;
	overflow-x: hidden;
	background: var(--bg);
	color: var(--texte);
	font-family: var(--police-voix);
	font-size: var(--fs-18);
	line-height: 1.65;
	padding-bottom: 0;
}
body.pv_mobile_barre { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

img { max-width: 100%; display: block; }
a { color: var(--lien); text-decoration-color: color-mix(in srgb, var(--lien) 45%, transparent); text-underline-offset: .15em; }
a:hover, a:focus { color: var(--lien-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }

h1, h2, h3, h4 { font-family: var(--police-faits); font-weight: 800; line-height: 1.15; margin: 0 0 .6em; color: var(--texte); }
h1 { font-size: clamp(var(--fs-39), 5vw, var(--fs-72)); }
h2 { font-size: var(--fs-39); }
h3 { font-size: var(--fs-25); }
p { margin: 0 0 1.2em; }

.pv_donnee, .pv_chiffre, [class*="pv_tuile"], .pv_billet_talon, .pv_etape_releve {
	font-family: var(--police-faits);
	font-variant-numeric: tabular-nums;
}

.conteneur { max-width: 1240px; margin-inline: auto; padding-inline: max(20px, 4vw); }
.pv_colonne { max-width: var(--colonne); }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--jaune); color: var(--jaune-encre); padding: 10px 16px; z-index: 200; font-family: var(--police-faits); font-weight: 700; }
.skip-link:focus { left: 12px; top: 12px; }

/* ==========================================================================
   3. BANDE DE QUAI — titre de section (§6.5)
   ========================================================================== */
.pv_bande_quai {
	background: var(--jaune);
	color: var(--jaune-encre);
	font-family: var(--police-faits);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: var(--fs-16);
	padding: 14px max(20px, 4vw);
	text-align: left;
	margin: 0;
}
.pv_bande_quai_mini { font-size: var(--fs-12); padding: 8px 14px; }

/* ==========================================================================
   4. EN-TÊTE — panneau à deux étages (§7)
   ========================================================================== */
.pv_entete { position: sticky; top: 0; z-index: 100; }
.pv_cartouche {
	background: var(--encre);
	color: #fff;
}
.pv_cartouche_int {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	min-height: 36px; padding-block: 6px;
}
.pv_logo { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
.pv_logo_texte { font-family: var(--police-faits); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.05; font-size: var(--fs-14); }
.pv_promesse { font-family: var(--police-faits); font-size: var(--fs-12); letter-spacing: .05em; text-transform: uppercase; color: var(--jaune); display: none; }
@media (min-width: 620px) { .pv_promesse { display: inline; } }
.pv_bouton {
	background: var(--jaune); color: var(--jaune-encre); font-family: var(--police-faits);
	font-weight: 700; font-size: var(--fs-14); text-decoration: none; padding: 8px 14px;
	border-radius: var(--rayon); white-space: nowrap; border: none; cursor: pointer;
}
.pv_bouton:hover, .pv_bouton:focus { color: var(--jaune-encre); background: #ffcf66; }

.pv_panneau { background: var(--veillee); border-top: 3px solid var(--jaune); }
.pv_panneau_int { display: none; }
@media (min-width: 900px) {
	.pv_panneau_int { display: grid; grid-template-columns: repeat(4, 1fr); }
	.pv_cellule {
		padding: 8px 16px; border-left: 1px solid var(--signal);
		color: var(--veillee-encre); text-decoration: none; transition: background .15s;
	}
	.pv_cellule:first-child { border-left: none; }
	.pv_cellule_label { display: block; font-family: var(--police-faits); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: var(--fs-14); color: #fff; }
	.pv_cellule_micro { display: block; font-size: var(--fs-12); color: #C9D6E6; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.pv_cellule:hover, .pv_cellule.est_actif { background: rgba(240,180,41,.08); box-shadow: inset 0 -3px 0 var(--jaune); }
}
.pv_entete.est_compact .pv_cellule_micro { max-height: 0; opacity: 0; margin: 0; }

/* barre basse mobile — imposée par la doctrine (§50, P-254), pas un différenciateur */
.pv_barre_mobile {
	display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
	background: var(--encre); border-top: 1px solid var(--signal);
	padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 900px) { .pv_barre_mobile { display: none; } }
.pv_barre_mobile a {
	flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 2px; min-height: 44px; color: #C9D6E6; text-decoration: none; font-family: var(--police-faits);
	font-size: var(--fs-12); font-weight: 600;
}
.pv_barre_mobile a.est_actif { color: var(--jaune); }
.pv_barre_mobile svg { width: 20px; height: 20px; }

/* ==========================================================================
   5. HERO
   ========================================================================== */
.pv_hero { position: relative; color: #fff; }
.pv_hero_media { aspect-ratio: 16/9; overflow: hidden; background: linear-gradient(160deg, var(--encre), var(--veillee)); }
.pv_hero_media img { width: 100%; height: 100%; object-fit: cover; }
.pv_hero_cartouche {
	background: var(--encre); padding: 28px max(20px, 4vw); margin-top: -1px;
}
.pv_hero_cartouche h1 { color: #fff; margin-bottom: .3em; }
.pv_hero_phrase { color: var(--veillee-encre); font-family: var(--police-voix); font-style: italic; font-size: var(--fs-20); max-width: 60ch; margin-bottom: 1em; }

/* ==========================================================================
   6. TUILES DE CHIFFRES
   ========================================================================== */
.pv_tuiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--signal); }
@media (min-width: 800px) { .pv_tuiles { grid-template-columns: repeat(4, 1fr); } }
.pv_tuile { background: var(--bg); padding: 28px 16px; text-align: left; }
.pv_tuile_chiffre { display: block; font-family: var(--police-faits); font-weight: 800; font-size: clamp(var(--fs-39), 5vw, var(--fs-49)); font-variant-numeric: tabular-nums; line-height: 1; }
.pv_tuile_libelle { font-family: var(--police-faits); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .06em; color: var(--signal); }

/* ==========================================================================
   7. CARTES — une photo dans CHAQUE carte (P-206)
   ========================================================================== */
.pv_grille { display: grid; gap: 24px; }
.pv_grille_3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pv_carte {
	display: flex; flex-direction: column; background: var(--surface); border-radius: var(--rayon);
	overflow: hidden; text-decoration: none; color: var(--texte); border: 1px solid color-mix(in srgb, var(--signal) 25%, transparent);
}
.pv_carte_media { position: relative; aspect-ratio: 4/3; background: linear-gradient(160deg, var(--encre), var(--veillee)); overflow: hidden; }
@media (max-width: 480px) { .pv_carte_media { aspect-ratio: 4/5; } }
.pv_carte_media img { width: 100%; height: 100%; object-fit: cover; border-bottom: 4px solid var(--jaune); }
.pv_legende {
	position: absolute; left: 0; right: 0; bottom: 4px; padding: 4px 10px;
	font-family: var(--police-faits); font-variant: small-caps; font-weight: 500; font-size: var(--fs-12);
	letter-spacing: .03em; color: #fff; background: linear-gradient(0deg, rgba(20,38,61,.75), transparent);
}
.pv_carte_comite { position: absolute; left: 8px; bottom: 8px; background: var(--encre); border-radius: var(--rayon); padding: 4px 8px; }
.pv_carte_corps { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pv_carte_titre { font-size: var(--fs-20); margin: 0; }
.pv_carte_meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: var(--fs-14); color: var(--signal); }
.pv_vide { padding: 24px; font-style: italic; color: var(--signal); }

/* jetons du comité (§6.2) */
.pv_comite { display: inline-flex; align-items: center; gap: 3px; }
.pv_jeton { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--jaune); background: transparent; }
.pv_jeton.est_plein { background: var(--jaune); }
.pv_comite_texte { font-family: var(--police-faits); font-size: var(--fs-12); margin-left: 4px; text-transform: uppercase; letter-spacing: .04em; }

/* ==========================================================================
   8. LA LIGNE D'ÉTAPES — objet central (§6.1)
   ========================================================================== */
.pv_rail { list-style: none; margin: 2rem 0; padding: 0; border-left: 2px solid var(--signal); }
.pv_rail_mini { display: flex; gap: 8px; border: none; padding: 8px 16px 0; }
.pv_rail_mini .pv_pastille { position: static; width: 10px; height: 10px; border-radius: 50%; background: var(--jaune); }
.pv_etape { position: relative; padding: 0 0 1.6rem 28px; margin-left: -1px; }
.pv_etape:last-child { padding-bottom: 0; }
.pv_pastille {
	position: absolute; left: -13px; top: 0; width: 26px; height: 26px; border-radius: 50%;
	background: var(--jaune); color: var(--jaune-encre); font-family: var(--police-faits); font-weight: 800;
	display: flex; align-items: center; justify-content: center; font-size: var(--fs-14);
}
.pv_etape_releve { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; padding-top: 2px; }
.pv_lieu { font-family: var(--police-faits); font-weight: 700; }
.pv_donnee { font-size: var(--fs-14); color: var(--signal); }
.pv_cout { color: var(--texte); font-weight: 600; }
.pv_note_etape {
	margin: 10px 0 0; padding-left: 14px; border-left: 2px solid var(--jaune);
	font-family: var(--police-voix); font-style: italic; color: var(--texte);
}
.pv_note_etape p { margin: 0; }

/* ==========================================================================
   9. BILLET À ENCOCHES (§6.4)
   ========================================================================== */
.pv_billet {
	position: relative; display: grid; grid-template-columns: 1fr 1.6fr; border: 1px solid var(--signal);
	border-radius: var(--rayon); overflow: hidden; margin: 1.6rem 0; background: var(--surface);
}
@media (max-width: 560px) { .pv_billet { grid-template-columns: 1fr; } }
.pv_billet_talon {
	background: var(--encre); color: #fff; padding: 18px; display: flex; flex-direction: column; gap: 10px;
	border-right: 2px dashed var(--jaune); position: relative;
}
@media (max-width: 560px) { .pv_billet_talon { border-right: none; border-bottom: 2px dashed var(--jaune); } }
.pv_billet_talon::before, .pv_billet_talon::after {
	content: ""; position: absolute; right: -12px; width: 24px; height: 24px; border-radius: 50%;
	background: var(--bg);
}
.pv_billet_talon::before { top: -12px; }
.pv_billet_talon::after { bottom: -12px; }
@media (max-width: 560px) {
	.pv_billet_talon::before, .pv_billet_talon::after { right: auto; top: auto; }
	.pv_billet_talon::before { left: -12px; bottom: -12px; }
	.pv_billet_talon::after { right: -12px; bottom: -12px; }
}
.pv_billet_stat { font-family: var(--police-faits); font-size: var(--fs-14); font-weight: 600; }
.pv_billet_corps { padding: 18px; }
.pv_billet_ligne { margin: 0 0 8px; font-size: var(--fs-16); }
.pv_donnee_label { font-family: var(--police-faits); font-weight: 700; text-transform: uppercase; font-size: var(--fs-12); letter-spacing: .04em; color: var(--signal); }
.pv_billet_essentiel { margin: 0 0 4px; font-family: var(--police-faits); font-size: var(--fs-14); }

/* ==========================================================================
   10. TUILE PRIX PAR TÊTE (§6.3)
   ========================================================================== */
.pv_tuile_prix { background: var(--encre); color: #fff; border-radius: var(--rayon); padding: 20px; margin: 1.6rem 0; }
.pv_tuile_titre { font-family: var(--police-faits); text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-14); color: var(--veillee-encre); margin-bottom: 12px; }
.pv_tuile_rangee { display: flex; gap: 24px; flex-wrap: wrap; }
.pv_tuile_col { display: flex; flex-direction: column; }
.pv_tuile_label { font-family: var(--police-faits); font-size: var(--fs-14); color: var(--veillee-encre); text-transform: uppercase; }
.pv_tuile_chiffre { font-size: clamp(var(--fs-31), 4vw, var(--fs-49)); }
.pv_tuile_ecart { color: var(--jaune); font-family: var(--police-faits); font-weight: 700; }

/* ==========================================================================
   11. BANDES DE LA HOME (§5)
   ========================================================================== */
.pv_bande { padding-block: 48px; }
.pv_bande_claire { background: var(--papier); color: var(--encre); }
[data-theme="dark"] .pv_bande_claire, html[data-theme="dark"] .pv_bande_claire { background: var(--bg); color: var(--texte); }
.pv_bande_veillee { background: var(--veillee); color: var(--veillee-encre); }
.pv_bande_nuit { background: var(--encre); color: #fff; }
.pv_bande_titre { margin-bottom: 24px; }

/* récits — bande de veillée, deux colonnes, photo + note */
.pv_recits { display: grid; gap: 32px; }
@media (min-width: 800px) { .pv_recits { grid-template-columns: 1fr 1fr; } }
.pv_recit { display: grid; gap: 16px; }
@media (min-width: 620px) { .pv_recit { grid-template-columns: 1fr 1fr; align-items: start; } }
.pv_recit_media { aspect-ratio: 4/5; overflow: hidden; border-radius: var(--rayon); }
.pv_recit_media img { width: 100%; height: 100%; object-fit: cover; border-bottom: 4px solid var(--jaune); }
.pv_recit_texte { font-family: var(--police-voix); }
.pv_recit_titre { font-family: var(--police-faits); font-size: var(--fs-25); }
.pv_recit_extrait { font-style: italic; }

/* pratique */
.pv_pratique { display: grid; gap: 4px; max-width: var(--colonne); }
.pv_pratique_ligne { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--signal); font-family: var(--police-faits); }
.pv_pratique_ligne dt { text-transform: uppercase; letter-spacing: .05em; font-size: var(--fs-14); color: var(--signal-clair); }
.pv_pratique_ligne dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

/* capture de leads */
.pv_capture { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.pv_capture form { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; min-width: 260px; }
.pv_capture input[type="email"], .pv_capture input[type="text"] {
	flex: 1; min-width: 180px; padding: 10px 12px; border: 1px solid var(--encre); border-radius: var(--rayon);
	font-family: var(--police-faits); background: #fff; color: var(--encre);
}
.pv_piege { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   12. MISE EN PAGE ARTICLE / RUBRIQUE — colonne + colonne « Le journal »
   ========================================================================== */
.pv_mise_en_page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 32px; }
@media (min-width: 1024px) { .pv_mise_en_page { grid-template-columns: minmax(0, var(--colonne)) 300px; align-items: start; } }
.pv_journal { position: sticky; top: 84px; border: 1px solid var(--signal); border-radius: var(--rayon); overflow: hidden; background: var(--surface); }
.pv_journal_liste { list-style: none; margin: 0; padding: 12px; display: grid; gap: 12px; }
.pv_journal_item { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: start; }
.pv_journal_vignette { display: block; width: 56px; height: 56px; border-radius: var(--rayon); overflow: hidden; background: var(--encre); }
.pv_journal_vignette img { width: 100%; height: 100%; object-fit: cover; }
.pv_journal_item time { display: block; font-family: var(--police-faits); font-size: var(--fs-12); color: var(--signal); }
.pv_journal_item a { font-size: var(--fs-14); }

.pv_article_tete { padding-top: 32px; }
.pv_article_media { aspect-ratio: 16/9; border-radius: var(--rayon); overflow: hidden; position: relative; margin-bottom: 8px; }
.pv_article_media img { width: 100%; height: 100%; object-fit: cover; border-bottom: 4px solid var(--jaune); }
.pv_contenu { font-size: var(--fs-18); }
.pv_contenu img { border-radius: var(--rayon); border-bottom: 4px solid var(--jaune); margin-block: 1.4em; }
.pv_contenu h2, .pv_contenu h3 { margin-top: 1.6em; }
.sbs_tableau { overflow-x: auto; margin: 1.6em 0; }
.sbs_tableau table { border-collapse: collapse; width: 100%; min-width: 480px; }
.sbs_tableau th, .sbs_tableau td { border: 1px solid var(--signal); padding: 8px 12px; text-align: left; font-size: var(--fs-14); }
.sbs_tableau th { font-family: var(--police-faits); background: color-mix(in srgb, var(--signal) 12%, transparent); }

/* bloc auteur (§ le gabarit paie 50 fois) */
.pv_bloc_auteur {
	display: flex; gap: 16px; align-items: flex-start; margin-top: 40px; padding: 20px;
	border: 1px solid var(--signal); border-radius: var(--rayon); background: var(--surface);
}
.pv_avatar { flex-shrink: 0; border-radius: var(--rayon); }
.pv_bloc_auteur_nom { font-family: var(--police-faits); font-weight: 800; margin: 0; }
.pv_bloc_auteur_role { font-family: var(--police-faits); font-size: var(--fs-14); color: var(--signal); margin: 2px 0 8px; }
.pv_bloc_auteur_bio { margin: 0; font-size: var(--fs-16); }

/* auteur — page archive */
.pv_auteur_entete { display: flex; gap: 24px; align-items: center; padding-block: 32px; }

/* fil d'ariane */
.pv_fil { font-family: var(--police-faits); font-size: var(--fs-14); padding-block: 16px; color: var(--signal); }
.pv_fil a { color: var(--signal); }
.pv_fil_sep { margin: 0 6px; }

/* pied de page */
.pv_pied { background: var(--encre); color: var(--veillee-encre); }
.pv_pied_grille { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); padding-block: 40px; }
.pv_pied_colonne h4 { color: #fff; font-size: var(--fs-16); }
.pv_pied_colonne ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pv_pied_colonne a { color: var(--veillee-encre); font-size: var(--fs-14); }
.pv_pied_bas { border-top: 1px solid var(--signal); padding-block: 16px; font-size: var(--fs-12); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.pv_pied_bas a { color: var(--veillee-encre); }

/* bascule de thème */
.pv_bascule { background: none; border: 1px solid currentColor; color: inherit; border-radius: var(--rayon); padding: 6px 10px; font-family: var(--police-faits); font-size: var(--fs-12); cursor: pointer; }

/* exit-intent */
.pv_exit { position: fixed; inset: 0; background: rgba(20,38,61,.7); display: none; align-items: center; justify-content: center; z-index: 300; padding: 20px; }
.pv_exit.est_visible { display: flex; }
.pv_exit_boite { background: var(--bg); color: var(--texte); border-radius: var(--rayon); padding: 28px; max-width: 420px; position: relative; border: 1px solid var(--signal); }
.pv_exit_fermer { position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: var(--fs-20); cursor: pointer; color: inherit; }

@media (max-width: 480px) { .pv_bande { padding-block: 32px; } h1 { font-size: var(--fs-39); } }