/* AZURA Climatisation Brignais
   Le design porte son apparence dans ses styles en ligne. Cette feuille ne
   traite que ce qu'un style en ligne ne sait pas faire : les largeurs, les
   états (survol, ouverture), les composants ajoutés (formulaire, pied de page,
   fil d'Ariane) et l'adaptation aux petits écrans.

   Ordre du fichier : base, composants, puis TOUTES les règles d'écran en
   dernier. Une règle de base écrite après une media query l'écraserait.
   ------------------------------------------------------------------------- */

:root {
	/* largeur commune à l'en-tête, aux sections et au pied de page : un seul
	   repère, donc aucun décalage possible entre eux */
	--shell: 1640px;
	--gutter: clamp(18px, 5vw, 40px);

	--nuit: #10243F;
	--nuit-fonce: #0B1B2F;
	--bleu: #1B7BD1;
	--orange: #F5A02F;
	--ambre: #FBC272;
	--creme: #FFF7EE;
	--bleu-clair: #F3F8FD;
	--encre: #1B2430;
	--gris: #4B5C6B;
	--gris-clair: #6B7A88;
	--filet: #EAF0F5;
	--filet-chaud: #F0E6DA;
}

/* -------------------------------------------------------------------- base */
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: 'Nunito Sans', system-ui, sans-serif;
	color: var(--encre);
	background: #FFFFFF;
}

a {
	color: var(--bleu);
}

a:hover {
	color: var(--nuit);
}

img {
	max-width: 100%;
}

/* Le plugin d'images enveloppe chaque visuel dans un <picture> : sans cette
   règle, l'enveloppe casserait les grilles. Le plugin la pose lui-même, on la
   double ici pour que le thème tienne debout sans lui. */
picture {
	display: contents;
}

/* `display:contents` fait remonter TOUS les enfants du <picture> dans la
   grille, les <source> comprises : elles consomment des cases et repoussent
   l'image d'une ligne. Vu sur la carte « pompe à chaleur air-eau », dont la
   photo tombait sous le texte et débordait de la carte. */
picture > source {
	display: none !important;
}

/* Une image dans une piste de grille peut réclamer sa largeur intrinsèque et
   faire déborder la page : on autorise les pistes à rétrécir. */
[style*="display:grid"] > * {
	min-width: 0;
}

.az-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--nuit);
	color: #FFFFFF;
	padding: 14px 22px;
	border-radius: 0 0 12px 0;
	font-weight: 700;
	text-decoration: none;
}

.az-skip:focus {
	left: 0;
}

:focus-visible {
	outline: 3px solid var(--bleu);
	outline-offset: 2px;
}

/* --------------------------------------------------------------- largeurs */
/* Les conteneurs du design ont leur propre gouttière de 28 px en style en
   ligne : `!important` est le seul moyen de la rendre fluide sans toucher au
   balisage. */
[style*="max-width:var(--shell)"] {
	padding-left: var(--gutter) !important;
	padding-right: var(--gutter) !important;
}

.az-shell {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/* ------------------------------------------------------- bandeau du haut */
/* Ce que le visiteur cherche avant tout : la garantie, l'adresse, le numéro. */
.az-bandeau {
	background: var(--nuit);
	color: #CBDCEA;
	font-size: 14px;
	line-height: 1.5;
}

.az-bandeau-in {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 10px var(--gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 28px;
}

.az-bandeau p {
	margin: 0;
}

.az-bandeau-nom strong {
	color: #FFFFFF;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
}

.az-bandeau-tel a {
	color: var(--ambre);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.az-bandeau-tel a:hover {
	color: #FFFFFF;
}

/* --------------------------------------------------------------- en-tête */
.az-header {
	position: sticky;
	top: 0;
	z-index: 80;
}

.az-logo-lien {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

/* Le logo est un bloc large : sans ces deux lignes, une colonne flex l'étire. */
/* Le logo est un bloc empilé (emblème, nom, ligne de ville) : à 56 px de haut
   la ligne de ville n'était plus lisible. On lui donne la hauteur qu'il faut,
   et on la fait redescendre sur les petits écrans. */
.az-logo {
	height: clamp(52px, 5.4vw, 76px) !important;
	width: auto !important;
	max-width: min(300px, 46vw);
	object-fit: contain;
	object-position: left center;
}

.az-drop {
	position: relative;
}

/* Le panneau porte `display:grid` en style en ligne : sans `!important`, le
   style en ligne l'emporte sur l'attribut `hidden` et le menu reste ouvert. */
.az-drop-panneau[hidden] {
	display: none !important;
}

/* Survols traduits depuis le design : les états vivent ici, pas dans le
   balisage, où ils étaient portés par un attribut inerte. */
.az-hv-doux:hover,
.az-hv-doux:focus-visible {
	background: var(--bleu-clair);
}

.az-hv-blanc:hover,
.az-hv-blanc:focus-visible {
	background: #FFFFFF;
}

/* ------------------------------------------- bandeaux d'appel a l'action */
/* Glisses entre deux sections : le visiteur retrouve un bouton la ou il vient
   de lire une prestation, un tarif ou le mot du fondateur. */
.az-appel {
	width: 100%;
	background: var(--nuit);
	color: #FFFFFF;
}

.az-appel--ambre {
	background: var(--orange);
	color: var(--nuit);
}

.az-appel__bloc {
	max-width: var(--shell);
	margin: 0 auto;
	padding: clamp(42px, 4.4vw, 72px) var(--gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px clamp(28px, 3vw, 56px);
}

.az-appel__mots {
	flex: 1 1 min(520px, 100%);
	min-width: 0;
}

.az-appel__titre {
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: clamp(26px, 2.6vw, 40px);
	line-height: 1.08;
	letter-spacing: -.03em;
	color: inherit;
}

.az-appel__texte {
	margin: 14px 0 0;
	font-size: 17px;
	line-height: 1.65;
	max-width: 62ch;
	color: #CBDCEA;
}

.az-appel--ambre .az-appel__texte {
	color: #3A2A0E;
}

.az-appel__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.az-appel__bouton,
.az-appel__tel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 62px;
	padding: 19px 34px;
	border-radius: 16px;
	border: 2px solid transparent;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.az-appel__bouton {
	background: var(--orange);
	color: var(--nuit);
}

.az-appel__bouton:hover,
.az-appel__bouton:focus-visible {
	background: #FFFFFF;
	color: var(--nuit);
}

.az-appel--ambre .az-appel__bouton {
	background: var(--nuit);
	color: #FFFFFF;
}

.az-appel--ambre .az-appel__bouton:hover,
.az-appel--ambre .az-appel__bouton:focus-visible {
	background: #FFFFFF;
	color: var(--nuit);
}

.az-appel__tel {
	border-color: currentColor;
	color: inherit;
	background: transparent;
}

.az-appel__tel:hover,
.az-appel__tel:focus-visible {
	background: #FFFFFF;
	color: var(--nuit);
	border-color: #FFFFFF;
}

.az-hv-ambre-fond:hover,
.az-hv-ambre-fond:focus-visible {
	background: var(--orange) !important;
}

.az-hv-ambre:hover,
.az-hv-ambre:focus-visible {
	color: var(--ambre);
}

.az-hv-orange:hover,
.az-hv-orange:focus-visible {
	background: var(--orange);
	color: var(--nuit);
}

.az-hv-nuit:hover,
.az-hv-nuit:focus-visible {
	background: var(--nuit);
	color: #FFFFFF;
}

/* Panneau du menu mobile : posé sous l'en-tête, il ne pousse pas le contenu et
   ne gonfle pas l'en-tête collant. */
[data-mobile-panel] {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-height: calc(100vh - 100%);
	overflow-y: auto;
}

[data-mobile-panel][hidden] {
	display: none !important;
}

/* Cibles tactiles : un padding ne suffit pas, on impose une hauteur. */
[data-mobile-panel] a,
[data-mobile-panel] summary {
	min-height: 52px;
	display: flex;
	align-items: center;
}

[data-mobile-btn] {
	min-height: 48px;
}

/* --------------------------------------------- accordéons et chevrons */
details > summary {
	list-style: none;
	cursor: pointer;
	min-width: 0;
}

details > summary::-webkit-details-marker {
	display: none;
}

details[open] > summary [data-chev] {
	transform: rotate(-135deg);
}

/* Le trait sombre qui apparaît sous un accordéon ouvert n'est pas une bordure,
   c'est le contour de focus du résumé. */
summary {
	outline: none !important;
	border: 0 !important;
}

summary:focus,
summary:focus-visible {
	outline: none !important;
}

summary:focus-visible > :first-child {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ------------------------------------------------------------------ NAP */
/* Nom, adresse et téléphone sous le titre : la première chose que lit un
   moteur, et elle doit être identique sur toutes les pages. */
/* ----------------------------------------------------------- formulaire */
.az-form {
	background: #FFFFFF;
	border: 1px solid var(--filet);
	border-radius: 26px;
	padding: clamp(22px, 3vw, 36px);
	display: grid;
	gap: 18px;
}

.az-form-titre {
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: clamp(22px, 2.4vw, 26px);
	letter-spacing: -.02em;
	color: var(--nuit);
}

.az-form-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.az-form label {
	display: grid;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--gris);
}

.az-form input,
.az-form select,
.az-form textarea {
	font-family: 'Nunito Sans', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: var(--encre);
	padding: 14px 16px;
	border: 1px solid #DCE6EE;
	border-radius: 12px;
	background: #F7FAFC;
	width: 100%;
	min-width: 0;
}

.az-form textarea {
	resize: vertical;
}

.az-form input:focus,
.az-form select:focus,
.az-form textarea:focus {
	border-color: var(--bleu);
	background: #FFFFFF;
}

.az-form .az-erreur {
	border-color: #C0392B;
	background: #FDF3F2;
}

.az-form button[type="submit"] {
	justify-self: start;
	background: var(--orange);
	color: var(--nuit);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 18px;
	padding: 18px 32px;
	border: none;
	border-radius: 14px;
	cursor: pointer;
	min-height: 52px;
}

.az-form button[type="submit"]:hover:not(:disabled) {
	background: var(--nuit);
	color: #FFFFFF;
}

.az-form button[type="submit"]:disabled {
	opacity: .6;
	cursor: progress;
}

.az-form-aide {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--gris-clair);
	font-weight: 400;
}

.az-form-aide a {
	color: var(--nuit);
	font-weight: 700;
	border-bottom: 2px solid var(--orange);
	text-decoration: none;
}

/* Le pot de miel doit rester invisible sans être retiré du document : un
   `display:none` est repéré par les robots qui lisent la feuille. */
.az-form-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.az-form-msg {
	margin: 0;
	padding: 14px 18px;
	border-radius: 12px;
	font-size: 15px;
	line-height: 1.6;
	font-weight: 700;
}

.az-form-msg.ok {
	background: #E8F6EE;
	color: #1B6B41;
}

.az-form-msg.ko {
	background: #FDF3F2;
	color: #A5281B;
}

/* -------------------------------------------------------- pied de page */
.az-footer-cols {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: clamp(24px, 3vw, 48px);
}

.az-footer p,
.az-footer li {
	font-size: 15px;
	line-height: 1.7;
}

.az-footer-marque p {
	margin: 16px 0 0;
	color: #A9C1D6;
	max-width: 38ch;
}

/* Le lockup est bleu nuit : sur un fond bleu nuit il disparaîtrait. Faute de
   version claire fournie, on le passe en blanc. */
.az-logo-pied {
	height: 54px;
	width: auto;
	display: block;
	filter: brightness(0) invert(1);
}

.az-footer-nap strong {
	color: #FFFFFF;
}

.az-footer-nap a {
	color: var(--ambre);
	text-decoration: none;
	font-weight: 700;
}

.az-footer-titre {
	margin: 0 0 14px;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #8FA7BC;
}

.az-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.az-footer-liens a {
	color: #CBDCEA;
	text-decoration: none;
}

.az-footer-liens a:hover {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.az-footer-contact li {
	display: grid;
	gap: 2px;
	color: #CBDCEA;
}

.az-footer-contact li span {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #8FA7BC;
}

.az-footer-contact a {
	color: #FFFFFF;
	text-decoration: none;
	word-break: break-word;
}

.az-footer-contact a:hover {
	color: var(--ambre);
}

.az-footer-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
	min-height: 52px;
	padding: 14px 24px;
	background: var(--orange);
	color: var(--nuit);
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 16px;
	border-radius: 14px;
	text-decoration: none;
}

.az-footer-cta:hover {
	background: #FFFFFF;
	color: var(--nuit);
}

.az-footer-zone,
.az-footer-qualifs {
	margin: 34px 0 0;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	color: #8FA7BC;
	font-size: 14px;
}

.az-footer-qualifs {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 0;
}

.az-footer-qualifs span {
	padding: 0 6px;
}

.az-carte {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 0 var(--gutter) 28px;
}

.az-carte iframe {
	display: block;
	width: 100%;
	height: 320px;
	border: 0;
	border-radius: 18px;
	filter: grayscale(.2);
}

.az-bas {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 22px var(--gutter) 34px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 28px;
}

.az-bas p {
	margin: 0;
	font-size: 13px;
	color: #8FA7BC;
}

.az-bas-liens {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.az-bas-liens a {
	color: #8FA7BC;
	text-decoration: none;
	font-size: 13px;
}

.az-bas-liens a:hover {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------- fil d'Ariane et pages internes */
.az-ariane {
	background: var(--bleu-clair);
	border-bottom: 1px solid var(--filet);
	font-size: 14px;
}

.az-ariane .az-shell {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding-top: 14px;
	padding-bottom: 14px;
}

.az-ariane a {
	color: var(--bleu);
	text-decoration: none;
}

.az-ariane a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.az-ariane span:last-child {
	color: var(--gris-clair);
}

.az-page-simple {
	padding: clamp(48px, 6vw, 84px) 0 clamp(56px, 7vw, 96px);
}

.az-page-simple h1 {
	margin: 0 0 28px;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: clamp(34px, 5vw, 54px);
	line-height: 1.06;
	letter-spacing: -.03em;
	color: var(--nuit);
}

.az-prose {
	max-width: 78ch;
	font-size: 17px;
	line-height: 1.8;
	color: var(--gris);
}

.az-prose h2 {
	margin: 44px 0 14px;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--nuit);
}

.az-prose h3 {
	margin: 30px 0 10px;
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: clamp(19px, 2.2vw, 22px);
	color: var(--nuit);
}

.az-prose p,
.az-prose ul,
.az-prose ol {
	margin: 0 0 18px;
}

.az-prose li {
	margin-bottom: 8px;
}

.az-prose strong {
	color: var(--encre);
}

/* -------------------------------------------------- apparition des blocs */
/* Une transition, jamais une animation : si le script ne s'exécute pas, le
   contenu reste visible parce que le masquage n'est posé que par lui. */
.az-anim .az-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .5s ease, transform .5s ease;
}

.az-anim .az-reveal.az-vu {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.az-anim .az-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------- photo qui remplit
   Conteneur d'une photo qui doit monter à la hauteur de la colonne de texte.
   Il s'étire à la hauteur décidée par le texte ; la photo s'y pose en absolu,
   donc elle ne pèse plus rien dans le calcul. Sans cela, `height:100%` sur
   l'image ne contraint rien (la ligne de grille est en hauteur automatique,
   le pourcentage n'a pas de référence) et c'est la taille naturelle de la
   photo qui fixe la hauteur de la section. */
.az-photo {
	position: relative;
	overflow: hidden;
	min-height: clamp(200px, 17vw, 260px);
	align-self: stretch;
}

.az-photo > img,
.az-photo > picture > img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	aspect-ratio: auto !important;
	object-fit: cover;
}

/* --------------------------------------------- grille des six solutions
   Les six appareils sont presentés sur le même gabarit : une photo au même
   format, un titre, un paragraphe, et pour deux d'entre eux les encarts
   « avantage » et « limite ». Les colonnes tombent de trois à deux puis à une,
   sur des seuils propres à cette grille (les règles générales de `data-cols`
   passaient de trois à une d'un coup, ce qui donnait des cartes énormes sur
   une tablette). */
.az-sol-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(min(300px, 100%), 1fr));
	gap: 24px;
}

/* Ombre portée demandée le 2026-08-25, par exception à la règle « design plat »
   du réseau : sur un fond blanc, le filet seul ne détachait pas assez les
   cartes. Très diffuse et très décalée vers le bas, pour rester discrète. */
.az-sol-grid > article,
.az-sol-fluides {
	box-shadow: 0 22px 46px -30px rgba(16, 36, 63, .55);
}

.az-sol-grid > article {
	transition: box-shadow .22s ease, transform .22s ease;
}

.az-sol-grid > article:hover {
	box-shadow: 0 26px 54px -26px rgba(16, 36, 63, .6);
	transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.az-sol-grid > article {
		transition: none;
	}

	.az-sol-grid > article:hover {
		transform: none;
	}
}

/* ------------------------------------------------- échelle de titrage
   Montserrat est nettement plus large que la fonte du design : gardées à leur
   taille en ligne, les titres passaient de trois à cinq lignes et poussaient le
   visuel de la bannière hors de l'écran. On reprend la main sur l'échelle, en
   valeurs fluides pour qu'aucune taille fixe ne bloque la réduction. */
.az-main h1 {
	font-size: clamp(36px, 5.2vw, 70px) !important;
	line-height: 1.02 !important;
	letter-spacing: -.032em !important;
}

.az-main h2 {
	font-size: clamp(27px, 3.2vw, 42px) !important;
	line-height: 1.08 !important;
	letter-spacing: -.025em !important;
}

.az-main h3 {
	font-size: clamp(20px, 2.1vw, 27px) !important;
	line-height: 1.2 !important;
}

.az-main summary {
	font-size: clamp(17px, 1.6vw, 20px) !important;
}

/* ==========================================================================
   ÉCRANS — tout ce qui suit dépend de la largeur, et rien ne doit être écrit
   après, sinon les règles de base reprendraient le dessus.
   ========================================================================== */

/* Le visuel de la section « Le mot du fondateur » repasse à droite pour que
   l'alternance gauche/droite tienne sur toute la page. Les deux pistes
   échangent aussi leur largeur, sinon la photo hériterait de la large. */
@media (min-width: 1081px) {
	/* Colonnes visuelles à la hauteur de la colonne de texte : une photo qui
	   s'arrête à mi-course laisse la section inachevée. */
	.az-hero,
	.az-zone {
		align-items: stretch !important;
	}

	/* Une seule photo dans la colonne : le gabarit à deux rangées laissait une
	   rangée vide qui consommait quand même la gouttière de 18 px, et la photo
	   s'arrêtait donc 18 px avant le bas du texte. */
	.az-hero-visuels {
		grid-template-rows: 1fr !important;
		gap: 0 !important;
	}

	.az-hero-visuels > .az-photo,
	.az-zone > .az-photo,
	.az-prix > .az-photo,
	.az-inverse > .az-photo {
		height: 100%;
	}

	/* La colonne de questions est longue : plutôt que d'étirer la photo sur
	   toute sa hauteur, on la laisse suivre le défilement. */
	.az-faq > img,
	.az-faq > picture > img {
		position: sticky;
		top: 116px;
		height: clamp(420px, 62vh, 660px) !important;
	}
}

@media (min-width: 1081px) {
	.az-inverse {
		grid-template-columns: 1.15fr .85fr !important;
	}

	.az-inverse > img,
	.az-inverse > picture > img,
	.az-inverse > .az-photo,
	.az-inverse > div:has(img) {
		order: 2;
	}
}

@media (max-width: 1180px) {
	.az-sol-grid {
		grid-template-columns: repeat(2, minmax(min(280px, 100%), 1fr));
	}
}

@media (max-width: 720px) {
	.az-sol-grid {
		grid-template-columns: 1fr;
	}
}

/* Trois cartes deviennent deux avant de devenir une : passer de trois à une
   d'un coup laisse une colonne trop large sur les tablettes. */
@media (max-width: 1180px) and (min-width: 761px) {
	[data-cols][style*="repeat(3,1fr)"],
	[data-cols][style*="repeat(3, 1fr)"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 1080px) {
	/* Le design compose plusieurs intitulés de section en <span> plutôt qu'en
	   balise de titre : les règles h1/h2/h3 ne les atteignent pas et ils
	   restaient à leur taille de bureau. On les rattrape par leur taille en
	   ligne, seule prise disponible sans toucher au balisage. */
	.az-main span[style*="font-size:44px"],
	.az-main span[style*="font-size:40px"] {
		font-size: clamp(27px, 3.2vw, 42px) !important;
		line-height: 1.14 !important;
	}

	.az-main span[style*="font-size:30px"] {
		font-size: clamp(20px, 2.6vw, 26px) !important;
	}

	.az-main span[style*="font-size:26px"] {
		font-size: clamp(19px, 2.4vw, 24px) !important;
	}

	/* la navigation de bureau laisse la place au bouton et à son panneau */
	[data-desktop-nav] {
		display: none !important;
	}

	[data-mobile-btn] {
		display: inline-flex !important;
	}

	[data-cols] {
		grid-template-columns: 1fr !important;
	}

	/* Sur une seule colonne, le visuel passe toujours au-dessus du texte,
	   quelle que soit sa place sur grand écran. */
	[data-cols] > img,
	[data-cols] > picture > img,
	[data-cols] > .az-photo,
	[data-cols] > div:has(img) {
		order: -1;
	}

	.az-footer-cols {
		grid-template-columns: 1fr 1fr;
	}

	/* Logo, numéro et bouton de menu ne tiennent pas côte à côte à leur taille
	   de bureau : la rangée débordait de 24 px sur un écran de 375 px. On
	   réduit le numéro et le bouton, et on autorise le retour à la ligne. */
	.az-header > div:first-child {
		flex-wrap: wrap;
		row-gap: 10px;
	}

	.az-header a[href^="tel"] {
		font-size: 15px !important;
		padding: 11px 16px !important;
	}

	[data-mobile-btn] {
		padding: 11px 13px !important;
		font-size: 15px !important;
	}
}

@media (max-width: 430px) {
	.az-logo {
		height: 46px !important;
	}

	.az-header a[href^="tel"] {
		font-size: 14px !important;
		padding: 10px 13px !important;
	}

	[data-mobile-btn] {
		padding: 10px 11px !important;
		font-size: 14px !important;
	}

	.az-header > div:first-child {
		gap: 10px !important;
	}
}

@media (max-width: 900px) {
	/* Le design fige ses tailles en style en ligne : sans échelle explicite,
	   les H3 restent à leur taille de bureau et dépassent les H2. */
	/* Échelle explicite : 30 / 24 / 20 / 17 sur un écran de 375 px, avec un
	   écart net entre chaque niveau. Sans elle, les tailles figées en ligne par
	   le design gardent leur valeur de bureau et un H3 finit plus gros qu'un H2. */
	.az-main h1 {
		font-size: clamp(30px, 7.6vw, 44px) !important;
		line-height: 1.06 !important;
	}

	.az-main h2 {
		font-size: clamp(24px, 5.6vw, 34px) !important;
		line-height: 1.14 !important;
	}

	.az-main h3 {
		font-size: clamp(19px, 3.8vw, 23px) !important;
		line-height: 1.24 !important;
	}

	.az-main summary {
		font-size: clamp(17px, 3.4vw, 20px) !important;
	}

	/* les intitulés composés en <span> reprennent la taille des H2 */
	.az-main span[style*="font-size:44px"],
	.az-main span[style*="font-size:40px"] {
		font-size: clamp(24px, 5.6vw, 34px) !important;
	}

	/* les surtitres en petites capitales suivent, sinon ils frôlent les titres */
	.az-main span[style*="font-size:13px"] {
		font-size: 12px !important;
	}

	/* les gros paddings verticaux du design mangent l'écran d'un téléphone */
	.az-main section > div[style*="max-width:var(--shell)"] {
		padding-top: clamp(44px, 9vw, 72px) !important;
		padding-bottom: clamp(44px, 9vw, 72px) !important;
	}
}

@media (max-width: 900px) {
	/* Les trois informations restent affichees sur telephone : le nom et le
	   numero sur la premiere ligne, l'adresse postale juste en dessous. */
	.az-bandeau-in {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 3px 14px;
		font-size: 13px;
	}

	.az-bandeau-nom {
		grid-column: 1;
		grid-row: 1;
		min-width: 0;
	}

	.az-bandeau-tel {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		white-space: nowrap;
	}

	.az-bandeau-adresse {
		grid-column: 1 / -1;
		grid-row: 2;
		min-width: 0;
	}
}

@media (max-width: 760px) {
	[data-cols-2] {
		grid-template-columns: 1fr !important;
	}

	.az-form-duo {
		grid-template-columns: 1fr;
	}

	.az-carte iframe {
		height: 240px;
	}
}

@media (max-width: 620px) {
	.az-appel__actions {
		width: 100%;
	}

	.az-appel__bouton,
	.az-appel__tel {
		flex: 1 1 100%;
		width: 100%;
		min-height: 56px;
		padding: 17px 24px;
	}

	.az-footer-cols {
		grid-template-columns: 1fr;
	}

	.az-bas {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ------------------------------------------ en-tête mobile sur une ligne (2026-10-01) */
/* Avec le retour à la ligne autorisé, le numéro passait sous le logo tant que la police
   Montserrat n'était pas arrivée (police de secours plus large), puis remontait : toute la page
   sautait de 56 px (CLS 0,15, navigation agentique en échec). La rangée reste sur une ligne ;
   si la place manque, c'est le logo qui se réduit, jamais le numéro ni le bouton. */
@media (max-width: 1080px) {
	.az-header > div:first-child {
		flex-wrap: nowrap !important;
	}
	.az-logo-lien {
		flex: 0 1 auto;
		min-width: 0;
	}
	.az-logo {
		max-width: 100% !important;
	}
	.az-header a[href^="tel"],
	[data-mobile-btn] {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}