/* ==========================================================================
   ClimaSud — 03. SECTIONS
   En-tête, hero, rythme des sections, bandeaux, pied de page,
   barre d'action mobile.
   ========================================================================== */

/* --------------------------------------------------------------------------
   LA GOUTTIÈRE COMMUNE

   Tout ce qui est écrit sur ce site doit commencer sur la même verticale :
   le logo, le titre d'une section, la première carte d'une grille, la
   première colonne du pied de page.

   WordPress obtient ce résultat en posant une marge latérale sur le
   conteneur (« gouttière »), puis en limitant chaque bloc à la largeur du
   contenu avec des marges automatiques. Les blocs écrits à la main doivent
   suivre exactement la même règle, sinon ils se décalent de quelques pixels
   — invisible à l'œil sur une capture, très visible en défilant.

   La règle est donc : la GOUTTIÈRE est portée par le conteneur extérieur,
   la LARGEUR MAXIMALE par le conteneur intérieur, et ce dernier n'a jamais
   de padding horizontal.
   -------------------------------------------------------------------------- */
.cs-hero,
.cs-pied,
.cs-barre,
.cs-entete-haut {
	padding-left: var(--wp--style--root--padding-left, 24px);
	padding-right: var(--wp--style--root--padding-right, 24px);
}

.cs-hero-contenu,
.cs-pied-contenu {
	max-width: var(--wp--style--global--wide-size, 1240px);
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
}

/* --------------------------------------------------------------------------
   L'EN-TÊTE OCCUPE TOUTE LA LARGEUR

   Les deux étages de l'en-tête sont volontairement SORTIS de la règle
   ci-dessus : leur contenu n'est pas ramené à 1240 px, il court d'un bord à
   l'autre de l'écran. Le logo se cale donc à gauche de la fenêtre et les
   actions à droite, quelle que soit la taille de l'écran.

   La gouttière est reprise ici, un peu plus généreuse que celle du corps de
   page : à 24 px seulement, sur un écran large, le logo semblerait tomber du
   bord. Elle reste toutefois plus faible que la gouttière du contenu, ce qui
   fait que l'en-tête « déborde » visiblement du corps de page — c'est
   exactement l'effet recherché.
   -------------------------------------------------------------------------- */
.cs-barre,
.cs-entete-haut {
	padding-left: clamp(18px, 2.6vw, 46px);
	padding-right: clamp(18px, 2.6vw, 46px);
}

.cs-barre-contenu,
.cs-entete-haut-contenu {
	max-width: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

/* --------------------------------------------------------------------------
   EN-TÊTE

   Deux étages :
   • .cs-entete-haut  bandeau d'informations, qui défile hors de l'écran ;
   • .cs-barre        barre principale, qui reste collée en haut.

   POURQUOI LE COLLAGE EST PORTÉ PAR <header> ET NON PAR .cs-barre

   Un élément en position: sticky ne peut pas sortir de la boîte de son parent.
   Poser le collage sur .cs-barre semble naturel, mais son parent .cs-entete ne
   fait que la hauteur de l'en-tête : la barre se décolle donc dès le premier
   demi-écran de défilement. C'est un piège classique, et il ne se voit pas
   dans l'éditeur de blocs, où la page ne défile pas de la même façon.

   Le collage est donc posé sur l'élément <header> lui-même — enfant direct du
   conteneur du site, donc aussi haut que la page — avec un décalage négatif
   égal à la hauteur du bandeau d'informations. Résultat : le bandeau s'en va,
   la barre reste, et la hauteur collée ne change jamais. Aucun décalage de
   mise en page (CLS) n'est possible.
   -------------------------------------------------------------------------- */
.cs-entete-hote {
	position: sticky;
	top: calc(var(--cs-hauteur-annonce, 40px) * -1);
	z-index: 100;
}

.cs-entete {
	position: relative;
}

/* --- Bandeau d'informations ----------------------------------------------
   Le bandeau porte le bleu de la marque en aplat, d'un bord à l'autre de
   l'écran. C'est la couleur du logo floqué sur les camionnettes : elle est
   posée là où le regard arrive en premier.

   Le texte est en nuit et non en blanc. Le blanc sur ce bleu ne donne que
   2,92:1, très en dessous des 4,5:1 exigés pour un texte de cette taille ;
   le nuit donne 6,05:1. C'est contre-intuitif — on écrit blanc sur bleu par
   réflexe — mais ce bleu-là est trop clair pour le supporter. */
.cs-entete-haut {
	background: var(--cs-bleu-marque);
	color: var(--cs-bleu-nuit);
	font-size: var(--wp--preset--font-size--mini);
	font-weight: 500;
}

.cs-entete-haut .cs-entete-haut-contenu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 26px;
	padding-top: 9px;
	padding-bottom: 9px;
}

.cs-entete-haut p {
	margin: 0;
}

.cs-entete-haut a {
	color: var(--cs-bleu-nuit);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 600;
}

.cs-entete-haut a:hover {
	text-decoration: underline;
}

.cs-entete-liens {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
}

.cs-entete-liens span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.cs-entete-liens svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	/* Pleine opacité : atténuée, l'icône passait sous le seuil de 3:1 exigé
	   pour un élément graphique porteur de sens (WCAG 1.4.11). */
	opacity: 1;
}

/* --- Barre principale ----------------------------------------------------- */
/* Le filet bas est au bleu de la marque, pas au gris neutre : c'est la
   première touche de couleur de l'entreprise que l'on voit en arrivant, et
   elle tient toute la largeur de l'écran. */
.cs-barre {
	position: relative;
	z-index: 2;
	background: var(--cs-blanc);
	border-bottom: 3px solid var(--cs-bleu-marque);
	transition: box-shadow var(--cs-transition);
}

/* Ombre portée dès que la page a défilé : la barre se détache du contenu.
   Le filet bleu, lui, reste : il fait partie de l'identité, pas de l'ombre. */
.cs-defile .cs-barre {
	box-shadow: var(--wp--preset--shadow--entete);
}

.cs-barre-contenu {
	display: flex;
	align-items: center;
	gap: 24px;
	padding-top: 12px;
	padding-bottom: 12px;
}

/* --- Logo ----------------------------------------------------------------- */
.cs-logo {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	flex: 0 0 auto;
	text-decoration: none;
	line-height: 1;
}

.cs-logo:hover {
	text-decoration: none;
}

/* Le logo officiel de l'entreprise. Sa hauteur est fixée, sa largeur suit :
   le fichier livré fait 250 × 109, mais un logo remplacé depuis WordPress peut
   avoir un tout autre rapport, et ne doit pas déformer la barre.

   La hauteur est fluide et non fixe. À 76 px sur grand écran, le logo est la
   première chose que l'œil rencontre — c'est le but. Mais il ne peut pas
   garder cette taille sur un téléphone : il pousserait le bouton du menu hors
   de l'écran. Le clamp fait le travail sans point de rupture supplémentaire.

   ATTENTION : le fichier source ne fait que 250 × 109. Au-delà de 76 px de
   haut il serait affiché au-dessus de sa définition et deviendrait flou sur
   écran Retina. Ne pas augmenter cette valeur tant qu'un fichier vectoriel
   n'a pas été fourni. */
.cs-logo-image {
	display: block;
	height: clamp(46px, 5.2vw, 76px);
	width: auto;
	max-width: 235px;
	object-fit: contain;
	object-position: left center;
}

/* Repli si le fichier du logo venait à manquer. */
.cs-logo-nom {
	font-family: var(--wp--preset--font-family--titres);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--cs-bleu-nuit);
	line-height: 1;
}

.cs-logo-baseline {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cs-brume);
	line-height: 1;
}

/* --- Logo du pied de page ------------------------------------------------- */
.cs-logo--pied {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 18px;
}

.cs-logo--pied .cs-logo-image {
	height: 54px;
	max-width: 200px;
}

.cs-logo--pied .cs-logo-baseline {
	color: var(--cs-clair-doux);
}

.cs-logo--pied .cs-logo-nom {
	color: var(--cs-blanc);
}

/* --- Navigation ----------------------------------------------------------- */
.cs-barre .wp-block-navigation {
	margin-left: auto;
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 500;
}

/* L'écart entre les entrées est posé ici plutôt que laissé à l'attribut
   « blockGap » du bloc : si le menu est reconstruit depuis l'éditeur de site,
   cet attribut se perd, et les entrées se retrouvent collées. */
.cs-barre .wp-block-navigation__container {
	gap: 26px;
	/* Le menu ne passe jamais sur deux lignes : il doublerait la hauteur de
	   l'en-tête collante, et donc le décalage de toutes les ancres. Sous
	   900 px, il bascule en panneau plein écran (voir 04-responsive.css). */
	flex-wrap: nowrap;
	white-space: nowrap;
}

.cs-barre .wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding: 10px 2px;
	color: var(--cs-bleu-nuit);
	text-decoration: none;
}

/* Le trait d'activation se déploie depuis le centre. Il est dessiné en
   pseudo-élément et non en border-bottom : une bordure ferait bouger le texte
   d'un pixel à chaque survol.

   Il est au bleu de la marque et non au rouge : le rouge est réservé aux
   actions commerciales (devis, appel). Un menu qui se souligne en rouge fait
   croire à une alerte, et surtout il use la couleur d'action au point qu'elle
   n'attire plus l'œil là où elle compte. C'est d'ailleurs ce bleu que
   ClimaSud utilise déjà comme indicateur de menu sur son site actuel. */
.cs-barre .wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 2px;
	height: 2px;
	background: var(--cs-bleu-marque);
	transition: left var(--cs-transition), right var(--cs-transition);
}

.cs-barre .wp-block-navigation .wp-block-navigation-item__content:hover::after,
.cs-barre .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.cs-barre .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content::after,
.cs-barre .wp-block-navigation .cs-ancre-active::after {
	left: 0;
	right: 0;
}

.cs-barre .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.cs-barre .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content,
.cs-barre .wp-block-navigation .cs-ancre-active {
	color: var(--cs-bleu);
	font-weight: 600;
}

/* Sous-menu déroulant */
.cs-barre .wp-block-navigation .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-container,
.cs-barre .wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--cs-blanc);
	border: 1px solid var(--cs-filet);
	border-radius: 8px;
	box-shadow: var(--wp--preset--shadow--carte-active);
	padding: 8px;
	min-width: 260px;
}

.cs-barre .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 10px 12px;
	border-radius: 5px;
	width: 100%;
}

.cs-barre .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--cs-bleu-clair);
	color: var(--cs-bleu-nuit);
}

/* Le trait d'activation n'a pas de sens dans un menu déroulant. */
.cs-barre .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

/* --- Actions de l'en-tête -------------------------------------------------- */
.cs-barre-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
}

.cs-tel-entete {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	color: var(--cs-bleu-nuit);
	white-space: nowrap;
}

.cs-tel-entete:hover {
	text-decoration: none;
	color: var(--cs-bleu);
}

.cs-tel-entete svg {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	color: var(--cs-bleu);
}

.cs-tel-numero {
	display: block;
	font-family: var(--wp--preset--font-family--titres);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.01em;
}

.cs-tel-mention {
	display: block;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cs-brume);
	line-height: 1.15;
}

/* Bouton « Demander un devis » de l'en-tête : c'est l'action principale du
   site, il porte donc le rouge de la marque, comme partout ailleurs. */
.cs-bouton-devis {
	background-color: var(--cs-action);
	border: 1px solid var(--cs-action);
	color: var(--cs-blanc);
	white-space: nowrap;
}

.cs-bouton-devis:hover,
.cs-bouton-devis:focus {
	background-color: var(--cs-action-fonce);
	border-color: var(--cs-action-fonce);
	color: var(--cs-blanc);
}

/* --- Bouton d'ouverture du menu mobile (rendu par le bloc Navigation) ------ */
.cs-barre .wp-block-navigation__responsive-container-open,
.cs-barre .wp-block-navigation__responsive-container-close {
	color: var(--cs-bleu-nuit);
	padding: 8px;
}

.cs-barre .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--cs-bleu-nuit);
	color: var(--cs-blanc);
	padding: 24px;
}

.cs-barre .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--cs-blanc);
	font-family: var(--wp--preset--font-family--titres);
	font-size: 1.375rem;
	font-weight: 600;
	padding: 12px 0;
}

.cs-barre .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none; /* le trait d'activation n'a pas de place dans le panneau plein écran */
}

.cs-barre .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding-left: 18px;
}

.cs-barre .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 1.0625rem;
	font-weight: 400;
	font-family: var(--wp--preset--font-family--texte);
}

/* --------------------------------------------------------------------------
   RYTHME DES SECTIONS
   -------------------------------------------------------------------------- */
.cs-section {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

.cs-section--serree {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}

.cs-fond-nuage {
	background: var(--cs-nuage);
}

.cs-fond-nuit {
	background: var(--cs-bleu-nuit);
}

/* Sur fond sombre, tout le texte s'éclaircit d'un coup, sans avoir à
   recolorer chaque bloc depuis l'éditeur. */
.cs-sur-sombre,
.cs-sur-sombre p,
.cs-sur-sombre li {
	color: var(--cs-clair-doux);
}

.cs-sur-sombre h1,
.cs-sur-sombre h2,
.cs-sur-sombre h3,
.cs-sur-sombre h4,
.cs-sur-sombre h5,
.cs-sur-sombre h6,
.cs-sur-sombre strong {
	color: var(--cs-blanc);
}

.cs-sur-sombre a:not(.wp-element-button) {
	color: var(--cs-blanc);
}

/* --------------------------------------------------------------------------
   TITRE DE SECTION : surtitre, titre, chapeau
   -------------------------------------------------------------------------- */
.cs-surtitre {
	display: flex;
	align-items: center;
	gap: 12px;
	/* Marges verticales seulement. Un raccourci « margin: 0 0 14px » fixerait
	   aussi les marges latérales à zéro et annulerait le centrage que la mise
	   en page contrainte de WordPress applique par marges automatiques : le
	   surtitre se retrouverait collé au bord pendant que le titre et la grille
	   resteraient centrés. Même précaution partout ailleurs dans ce thème. */
	margin-top: 0;
	margin-bottom: 14px;
	font-size: var(--wp--preset--font-size--mini);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cs-bleu);
}

.cs-surtitre::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--cs-action);
	flex: 0 0 auto;
}

.has-text-align-center .cs-surtitre,
.cs-surtitre--centre {
	justify-content: center;
}

.cs-sur-sombre .cs-surtitre {
	color: var(--cs-clair-doux);
}

.cs-chapeau {
	font-size: var(--wp--preset--font-size--intro);
	line-height: 1.6;
	color: var(--cs-ardoise);
	max-width: 62ch;
	/* Un bloc plus étroit que la colonne est centré d'office par la mise en
	   page contrainte de WordPress, via des marges automatiques. Le chapeau se
	   retrouverait alors décalé vers la droite, seul de sa section. On le
	   raccroche au bord gauche, sur la verticale du surtitre et du titre. */
	margin-left: 0;
	margin-right: auto;
}

.cs-sur-sombre .cs-chapeau {
	color: var(--cs-clair-doux);
}

.cs-chapeau--centre {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* --------------------------------------------------------------------------
   HERO

   Conçu pour tenir debout SANS photographie : fond bleu nuit, trame
   technique discrète, halo froid. Une image de fond peut être ajoutée
   depuis l'éditeur (classe .cs-hero--photo) sans rien casser.
   -------------------------------------------------------------------------- */
.cs-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--cs-bleu-nuit);
	padding-top: clamp(56px, 8vw, 104px);
	padding-bottom: clamp(48px, 7vw, 88px);
	isolation: isolate;
}

/* Trame de plan technique : deux jeux de lignes à 1 px, très pâles. */
.cs-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 64px),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 64px);
	/* La trame s'efface vers le bas pour ne pas concurrencer le texte. */
	-webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 72%);
	mask-image: linear-gradient(160deg, #000 0%, transparent 72%);
}

/* Halo froid en haut à droite : rappelle le souffle d'air. */
.cs-hero::after {
	content: "";
	position: absolute;
	top: -220px;
	right: -160px;
	width: 720px;
	height: 720px;
	z-index: -2;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(28, 161, 220, 0.5) 0%, rgba(28, 161, 220, 0) 68%);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   HERO AVEC PHOTOGRAPHIE

   La photographie des véhicules de l'entreprise, en fond de premier écran.

   CE QUI COMMANDE TOUTE LA COMPOSITION

   Le sujet de cette photo n'est pas décoratif : c'est le logo ClimaSud floqué
   sur le capot de la camionnette de tête. Or il tombe au centre exact du
   cadrage — environ 45 % en largeur, 58 % en hauteur. La photo est en portrait
   à l'origine (1920 × 2560) et le recadrage 16/9 utilise déjà toute sa
   largeur : on ne peut donc pas décaler le sujet horizontalement, il n'y a
   rien à ajouter sur les côtés.

   Conséquence : le texte ne peut pas se placer à gauche « comme d'habitude »,
   il recouvrirait le logo. Il est donc ancré EN HAUT, et le voile descend du
   haut vers le bas en s'effaçant. Le tiers inférieur du cadre reste presque
   nu : on y voit le capot blanc, le logo et la calandre, nets.

   POURQUOI IL N'Y A PLUS DE FLOU

   Le flou de 2 px servait à faire ressortir le texte. Il n'a plus lieu d'être
   maintenant que le texte a sa propre zone sombre, et il rendait les véhicules
   moins reconnaissables — exactement le contraire du but recherché. La
   variable est conservée : elle permet de le réintroduire depuis une seule
   ligne si une autre photo, plus chargée, l'exigeait.

   Trois calques, du fond vers l'avant :
     ::before   la photo, nette
     ::after    le voile, dense en haut, transparent en bas
     contenu    le titre et les boutons
   -------------------------------------------------------------------------- */
.cs-hero--photo {
	--cs-hero-flou: 0px;
	background-color: var(--cs-bleu-nuit);
	/* La hauteur se règle sur la LARGEUR de l'écran, pas sur sa hauteur.
	   Avec « vh », la même page changeait de composition entre un portable et
	   un grand écran : le cadrage de la photo dépend du rapport largeur/hauteur
	   du bloc, donc la position du capot dans le cadre se mettait à bouger
	   d'une machine à l'autre. En « vw », la géométrie est prévisible et le
	   réglage vaut partout. */
	min-height: clamp(560px, 48vw, 760px);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-top: clamp(44px, 6vw, 78px);
	padding-bottom: clamp(56px, 9vw, 130px);
}

.cs-hero--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	/* DEUX CADRAGES, PAS TROIS TAILLES DU MÊME

	   Sur téléphone, le bloc est plus haut que large alors que la photo est
	   large : « cover » rogne alors si fort sur les côtés qu'il ne reste
	   qu'une colonne centrale, et le capot se retrouve en plein milieu, sous
	   les boutons. Le recadrage vertical, lui, ne sert plus à rien puisqu'il
	   n'y a plus rien à rogner en hauteur.

	   La version portrait est donc découpée dans l'original — qui est
	   lui-même en portrait — en gardant tout le ciel et en coupant le bitume :
	   le capot et son logo descendent ainsi aux trois quarts de l'image, sous
	   le texte, quelle que soit la largeur du téléphone. */
	background-image: url("../img/hero-camionnettes-portrait.jpg");
	background-size: cover;
	/* Calé en haut, et non centré. Le bloc est plus large que la photo n'est
	   haute : « cover » rogne donc en hauteur. Rogner par le bas fait descendre
	   le capot dans le cadre — c'est précisément ce qu'on veut, puisque le
	   texte occupe le haut. Centrer le cadrage ramenait le logo du capot en
	   plein milieu, sous le chapeau. */
	background-position: center top;
	filter: blur(var(--cs-hero-flou));
	-webkit-mask-image: none;
	mask-image: none;
}

@media (min-width: 901px) {
	.cs-hero--photo::before {
		background-image: url("../img/hero-camionnettes-1280.jpg");
	}
}

@media (min-width: 1281px) {
	.cs-hero--photo::before {
		background-image: url("../img/hero-camionnettes-1920.jpg");
	}
}

/* LE VOILE, ET POURQUOI CES VALEURS-LÀ

   Elles ne sont pas choisies à l'œil. Le seuil est calculé : pour que du texte
   blanc tienne les 4,5:1 exigés, le pixel composité doit rester sous 118 sur
   255. Le point le plus clair de la photo monte à 250 (le capot en plein
   soleil). Avec un voile de couleur 11,26,35, il faut donc une opacité d'au
   moins 0,57 partout où du texte peut se poser.

   D'où le palier à 0,74 jusqu'à 48 % de la hauteur : c'est la zone du texte,
   et la marge est confortable même sur le pixel le plus clair. En dessous,
   l'opacité tombe vite — 0,26 à 62 %, 0,06 en bas — et la photo se découvre.
   Aucun texte ne descend jusque-là. */
.cs-hero--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	top: auto;
	right: auto;
	width: 100%;
	height: 100%;
	z-index: -1;
	border-radius: 0;
	background: linear-gradient(
		180deg,
		rgba(var(--cs-nuit-rvb), 0.9) 0%,
		rgba(var(--cs-nuit-rvb), 0.86) 32%,
		rgba(var(--cs-nuit-rvb), 0.8) 52%,
		rgba(var(--cs-nuit-rvb), 0.42) 66%,
		rgba(var(--cs-nuit-rvb), 0.1) 82%,
		rgba(var(--cs-nuit-rvb), 0.24) 100%
	);
}

/* Sous 900 px, la photo est bien plus haute que large une fois recadrée par
   « cover » : le sujet se resserre et le texte occupe davantage de hauteur. Le
   voile reste donc dense plus longtemps. Le bas se dégage quand même, sans
   quoi la photo ne servirait plus à rien sur téléphone. */
@media (max-width: 900px) {
	.cs-hero--photo::after {
		background: linear-gradient(
			180deg,
			rgba(var(--cs-nuit-rvb), 0.92) 0%,
			rgba(var(--cs-nuit-rvb), 0.88) 46%,
			rgba(var(--cs-nuit-rvb), 0.78) 62%,
			rgba(var(--cs-nuit-rvb), 0.34) 78%,
			rgba(var(--cs-nuit-rvb), 0.18) 100%
		);
	}

	/* Le cadrage portrait a besoin de hauteur : c'est elle qui laisse la place
	   au ciel au-dessus du texte et au capot en dessous. Trop bas, le rognage
	   latéral reprend le dessus et on perd le logo. */
	.cs-hero--photo {
		min-height: 640px;
	}

	.cs-hero--photo::before {
		background-position: center 55%;
	}
}

.cs-hero-contenu {
	position: relative;
	z-index: 1;
}

.cs-hero-texte {
	max-width: 700px;
}

.cs-hero h1 {
	font-size: var(--wp--preset--font-size--hero);
	color: var(--cs-blanc);
	margin: 0 0 20px;
	letter-spacing: -0.02em;
}

/* Le bleu vif de la marque, celui des boutons du site actuel de ClimaSud.
   Sur le voile du hero il donne 7,6:1 : très au-dessus du seuil. */
.cs-hero h1 em {
	font-style: normal;
	color: var(--cs-bleu-vif);
}

.cs-hero-chapeau {
	font-size: var(--wp--preset--font-size--intro);
	line-height: 1.6;
	color: var(--cs-clair-doux);
	margin: 0 0 32px;
	max-width: 58ch;
}

/* DÉFAUT CORRIGÉ ICI — mesuré, pas estimé.

   Le chapeau est en « clair doux », un bleu très pâle qui convient sur un
   aplat sombre. Sur la photographie, non : il tombe dans la zone où le voile
   commence à s'ouvrir, et le pare-brise ensoleillé passe juste dessous. En
   recomposant le pixel réel (photo + voile) et en appliquant la formule des
   WCAG, le contraste descend à 3,88:1 — sous le seuil de 4,5:1.

   Un ton plus clair le ramène à 4,95:1 dans le pire pixel de toute la bande.
   La couleur est écrite ici et non ajoutée à la palette : elle ne sert qu'à
   ce cas précis et n'aurait aucun sens dans le sélecteur de l'éditeur. */
.cs-hero--photo .cs-hero-chapeau {
	color: #D7E6F0;
}

.cs-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   BANDE DE CHIFFRES

   Elle était posée au pied du hero, sur la photo. Deux raisons de l'en avoir
   sortie :

   1. Elle traversait toute la largeur et sa dernière colonne tombait sur le
      capot blanc — contraste mesuré à 1,8:1. Il avait fallu lui donner un
      fond opaque pour rattraper le coup, ce qui revenait à masquer la photo
      juste à l'endroit où on voulait la montrer.
   2. Sa place au pied du hero l'obligeait à recouvrir le tiers inférieur du
      cadre, précisément là où se trouve le logo sur le capot.

   Elle occupe donc maintenant sa propre bande, sur fond clair, juste sous le
   hero. Le contraste n'est plus une question d'opacité mais de couleur de
   texte, et la photo reste entière.
   -------------------------------------------------------------------------- */
.cs-bande-preuves {
	background: var(--cs-blanc);
	border-bottom: 1px solid var(--cs-filet);
	padding-top: clamp(26px, 3.4vw, 38px);
	padding-bottom: clamp(26px, 3.4vw, 38px);
}

/* Les chiffres portent le bleu de la marque. C'est la première couleur forte
   que l'on rencontre après la photographie, et elle tombe sur ce que
   l'entreprise a de plus solide à montrer. */
.cs-bande-preuves .cs-preuve-nombre {
	color: var(--cs-bleu);
}

.cs-hero-preuves {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px 20px;
	/* Marges verticales seulement : voir la note sur .cs-surtitre. */
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	border-top: 0;
}

/* La variante sur fond sombre reste disponible : elle sert dans le pied de
   page et resterait valable si une future page reposait la bande sur une
   photographie. */
.cs-hero-preuves.cs-sur-sombre {
	padding-top: 30px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* --------------------------------------------------------------------------
   BANDEAU PARTENAIRE
   -------------------------------------------------------------------------- */
.cs-partenaire {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 26px 30px;
	background: var(--cs-blanc);
	border: 1px solid var(--cs-filet);
	border-left: 4px solid var(--cs-bleu);
	border-radius: var(--cs-rayon-carte);
}

.cs-partenaire-sceau {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: var(--cs-bleu-clair);
	color: var(--cs-bleu-nuit);
}

.cs-partenaire-sceau svg {
	width: 40px;
	height: 40px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cs-partenaire h3 {
	margin: 0 0 6px;
}

.cs-partenaire p {
	margin: 0;
	color: var(--cs-ardoise);
}

/* --------------------------------------------------------------------------
   BLOC URGENCE — page Dépannage
   -------------------------------------------------------------------------- */
.cs-urgence {
	background: var(--cs-bleu-nuit);
	border-radius: var(--cs-rayon-carte);
	padding: 40px 44px;
	text-align: center;
}

.cs-urgence-numero {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 14px 0 10px;
	font-family: var(--wp--preset--font-family--titres);
	font-size: clamp(1.875rem, 5vw, 2.75rem);
	font-weight: 700;
	color: var(--cs-blanc);
	text-decoration: none;
	letter-spacing: 0.01em;
	line-height: 1.1;
}

.cs-urgence-numero:hover,
.cs-urgence-numero:focus {
	color: var(--cs-blanc);
	text-decoration: underline;
	text-underline-offset: 0.14em;
}

.cs-urgence-numero svg {
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   EMPLACEMENT PHOTO À FOURNIR

   Tant que l'entreprise n'a pas transmis ses visuels, l'emplacement est
   matérialisé plutôt que rempli par une image d'illustration achetée qui
   ne montrerait pas ses chantiers.
   -------------------------------------------------------------------------- */
.cs-photo-attente {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	aspect-ratio: 4 / 3;
	padding: 24px;
	text-align: center;
	background: var(--cs-nuage);
	border: 1px dashed var(--cs-bord-champ);
	border-radius: var(--cs-rayon-carte);
	color: var(--cs-brume);
	font-size: var(--wp--preset--font-size--mini);
}

.cs-photo-attente svg {
	width: 34px;
	height: 34px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.7;
}

.cs-photo-attente strong {
	font-family: var(--wp--preset--font-family--titres);
	font-size: 0.9375rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cs-ardoise);
}

.cs-photo-attente--large {
	aspect-ratio: 16 / 9;
}

/* --------------------------------------------------------------------------
   PIED DE PAGE
   -------------------------------------------------------------------------- */
.cs-pied {
	background: var(--cs-bleu-nuit);
	color: var(--cs-clair-doux);
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--petit);
}

.cs-pied-contenu {
	/* Gouttière et largeur : voir « LA GOUTTIÈRE COMMUNE » en tête de fichier. */
	width: 100%;
}

.cs-pied-colonnes {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.15fr;
	gap: 40px;
	padding-bottom: var(--wp--preset--spacing--40);
}

.cs-pied h2,
.cs-pied h3,
.cs-pied .cs-pied-titre {
	margin: 0 0 18px;
	font-family: var(--wp--preset--font-family--titres);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cs-blanc);
}

/* Colonne de marque : la baseline reprend sa place sous le nom, et le texte
   de présentation ne s'étale pas sur toute la colonne. */
.cs-pied-marque .cs-logo-texte {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 18px;
}

.cs-pied-marque p {
	max-width: 44ch;
}

.cs-pied .cs-logo-nom {
	color: var(--cs-blanc);
}

.cs-pied .cs-logo-nom em {
	color: #6FC3EE;
}

.cs-pied .cs-logo-baseline {
	color: var(--cs-clair-doux);
}

.cs-pied p {
	margin: 0 0 14px;
	line-height: 1.65;
}

.cs-pied ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cs-pied li {
	margin-bottom: 10px;
}

.cs-pied a {
	color: var(--cs-clair-doux);
	text-decoration: none;
}

.cs-pied a:hover,
.cs-pied a:focus-visible {
	color: var(--cs-blanc);
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

/* Les liens de liste du pied de page et du bandeau d'informations ne sont pas
   « au fil du texte » : la règle de taille minimale de cible leur est donc
   applicable (WCAG 2.2, critère 2.5.8, 24 × 24 px). Quelques pixels de
   remplissage vertical suffisent à les y amener, sans changer la mise en page. */
.cs-pied a,
.cs-entete-liens a {
	display: inline-block;
	padding-top: 3px;
	padding-bottom: 3px;
}

.cs-pied address {
	font-style: normal;
	line-height: 1.65;
}

.cs-pied-fort {
	font-family: var(--wp--preset--font-family--titres);
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--cs-blanc);
}

/* --- Réseaux sociaux ------------------------------------------------------ */
.cs-social {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

/* Les icônes sociales sont déjà des cibles de 40 px : elles ressortent de la
   règle générale de remplissage posée plus haut sur les liens du pied. */
.cs-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: var(--cs-blanc);
	transition: background-color var(--cs-transition), border-color var(--cs-transition);
}

.cs-social a:hover {
	background: var(--cs-bleu);
	border-color: var(--cs-bleu);
}

.cs-social svg {
	width: 19px;
	height: 19px;
	fill: currentColor;
}

/* --- Bas de pied ---------------------------------------------------------- */
.cs-pied-bas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 30px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: var(--wp--preset--font-size--mini);
}

.cs-pied-bas p {
	margin: 0;
}

.cs-pied-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-pied-legal li {
	margin: 0;
}

/* --------------------------------------------------------------------------
   BARRE D'ACTION FIXE — téléphone uniquement

   Deux gestes, toujours à portée de pouce : appeler, ou demander un devis.
   Affichée sous 782 px (voir 04-responsive.css).
   -------------------------------------------------------------------------- */
.cs-barre-mobile {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 95;
	background: var(--cs-blanc);
	border-top: 1px solid var(--cs-filet);
	box-shadow: 0 -4px 20px rgba(12, 28, 42, 0.1);
	/* Respecte la zone réservée au bas des iPhone récents. */
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.cs-barre-mobile-contenu {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--cs-filet);
}

.cs-barre-mobile a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 56px;
	padding: 10px 12px;
	background: var(--cs-blanc);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--cs-bleu-nuit);
}

.cs-barre-mobile a.cs-barre-mobile-devis {
	background: var(--cs-action);
	color: var(--cs-blanc);
}

.cs-barre-mobile svg {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   GABARITS DE CONTENU
   -------------------------------------------------------------------------- */

/* En-tête de page interne : fil d'Ariane + titre. */
.cs-entete-page {
	background: var(--cs-nuage);
	border-bottom: 1px solid var(--cs-filet);
	padding-bottom: var(--wp--preset--spacing--40);
}

.cs-entete-page h1 {
	margin: 14px 0 0;
}

.cs-entete-page .cs-chapeau {
	margin-top: 16px;
	margin-bottom: 0;
}

/* Colonne de contenu rédactionnel + colonne latérale collante. */
.cs-avec-aside {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

.cs-aside {
	position: sticky;
	top: calc(var(--cs-hauteur-entete) + 24px);
}

.cs-encadre {
	background: var(--cs-nuage);
	border: 1px solid var(--cs-filet);
	border-radius: var(--cs-rayon-carte);
	padding: 28px 26px;
}

.cs-encadre h2,
.cs-encadre h3 {
	margin-top: 0;
	margin-bottom: 12px;
	font-size: 1.25rem;
}

.cs-encadre p:last-child {
	margin-bottom: 0;
}