/* Ajustements du theme artizy au balisage de WordPress. Les feuilles des maquettes sont copiees a l'octet
   pres et ne changent jamais : tout ecart se corrige ici, une regle par cause, commentee.
   Mesure : build/scripts/check_pages.py --styles (Tache 2, page de controle contre index.html et metier.html). */

/* Nom de tuile : la legende du bloc image (figcaption) recoit la marge de blocks/image/style.css,
   .wp-block-image :where(figcaption) { margin: .5em 0 1em }, que la maquette n'a pas (span sans marge). */
.wp-block-image .az-tile__name { margin: 0; }

/* Telephone du bandeau devis : le bloc paragraphe enveloppe le lien seul dans un <p>, qui prend alors
   .az-contact__text > p (marge haute et couleur adoucie) alors que la maquette pose le lien directement. */
.az-contact__text > p:has(> .az-contact__phone) { margin: 0; color: inherit; }

/* Citation d'article (bloc Citation en exergue) : blocks/pullquote/style.css centre le texte
   (.wp-block-pullquote { text-align: center }), et la figure prend une taille de police et un interligne qui ne
   sont pas ceux du texte. La maquette (blog.css) ne style que le <p> de la citation, a gauche, taille et
   interligne herites. */
.az-prose .wp-block-pullquote { font-size: inherit; line-height: inherit; text-align: start; }

/* Note Google de l'accueil : accueil.md la veut hors du temoignage (la note est celle d'Artizy, pas celle de la
   cliente), donc p.az-quote__score suit la figure au lieu d'etre dans figcaption.az-quote__meta. Elle reprend
   ce que la legende lui donnait : retrait de la figure (8 %, 0 sous 768 px), ecart sous le nom (gap vertical
   --s-1 de la legende) et taille du texte courant. */
.az-quote__figure + .az-quote__score { margin-top: var(--s-1); padding-inline: 8%; font-size: var(--t-body); }
@media (max-width: 767px) {
  .az-quote__figure + .az-quote__score { padding-inline: 0; }
}

/* Pages converties en blocs (build/pages, Tache 5) : les blocs ajoutent des enveloppes la ou la maquette pose
   l'element directement dans un conteneur flex. display: contents rend l'element au conteneur, comme dans la
   maquette (sinon il reste en ligne dans son enveloppe : autre hauteur, autre position) :
   - .az-hero__actions (flex) : div.wp-block-buttons et div.wp-block-button du bouton, p du lien qui suit ;
   - .az-project (flex colonne) : la carte devient un bloc image lie, titre et lieu passent dans sa legende
     (figcaption, marges .5em 0 1em de blocks/image/style.css, spans en ligne) ;
   - .az-quote__meta (flex) : p du nom ; .az-journal__head (flex) : p du lien ; colonne de projets (flex) :
     p du lien « Voir les projets » ;
   - pages métiers et univers : .az-pagehead__actions et .az-cta-band__actions (flex), comme le heros. Le second
     est lui-meme le div.wp-block-buttons quand il n'a que le bouton, un groupe quand un lien suit (chauffage). */
:is(.az-hero__actions, .az-pagehead__actions, .az-cta-band__actions) :is(.wp-block-buttons, .wp-block-button, p),
.az-project > figcaption,
.az-quote__meta > p,
.az-journal__head > p,
p:has(> .az-projects__all) { display: contents; }

/* Bouton : blocks/button/style.css centre le texte du lien et lui donne toute la largeur de son enveloppe
   (.wp-block-button__link { text-align: center; width: 100% }) ; la maquette : texte au debut, largeur du
   contenu (sans quoi, enveloppe effacee ci-dessus, le bouton prend toute la ligne du heros). */
.wp-block-button__link.az-btn { text-align: start; width: auto; }

/* Tuile et carte projet : le lien est a.az-media (bloc image lie), la ou la maquette a span.az-media dans le
   lien ; sans cette regle il prend le soulignement des liens (visible sur l'alt si l'image manque). */
a.az-media { text-decoration: none; }

/* Tuile et carte projet : dans la maquette, toute la carte est un lien (a.az-tile, a.az-project) ; le bloc image
   ne lie que l'image (figure > a.az-media + figcaption), la legende n'est pas cliquable alors que son survol la
   souligne. Le lien de l'image s'etend a la figure (un seul lien, pas de doublon pour les lecteurs d'ecran), et
   le contour de focus passe sur la figure, comme sur la carte de la maquette (:focus-visible de site.css). */
figure:is(.az-tile, .az-project) { position: relative; }
figure:is(.az-tile, .az-project) > .az-media::after { content: ""; position: absolute; inset: 0; }
figure:is(.az-tile, .az-project) > .az-media:focus-visible { outline: none; }
figure:is(.az-tile, .az-project):has(> .az-media:focus-visible) { outline: 2px solid var(--c-ink); outline-offset: 3px; }

/* Note Google de l'accueil : son texte (accueil.md) est plus long que celui de la maquette ; a 390 px, « Lire les
   avis » se coupait apres « Lire ». */
.az-quote__score .az-link { white-space: nowrap; }

/* Landings (Tache 7) : formulaire. Le plan sable, le rayon, la grille a 6 colonnes et le titre viennent de
   .az-leadform (energie.css), pose sur le groupe qui entoure le shortcode (comme le form de la maquette).
   Le <form> de Forminator, habille par forms.css comme un plan sable a lui seul, s'y fond : toute la largeur,
   ni second fond ni second remplissage. */
.az-leadform > .forminator-custom-form {
  grid-column: 1 / -1;
  padding: 0;
  background: none;
  border-radius: 0;
}

/* Landings : la boite de message de Forminator est dans la grille meme vide, elle y ouvre une ligne et son
   ecart, d'ou le vide au-dessus du formulaire puis du message de succes. Vide, elle disparait (verifie en
   capture : son innerHTML est vide, display none). */
.az-leadform .forminator-response-message:empty { display: none; }

/* Points forts des landings : la maquette met une coche SVG dans chaque puce ; le bloc liste n'en garde pas,
   la coche est donc dessinee ici, aux memes dimensions et couleur que `.az-proofs__item svg` (energie.css). */
.az-proofs__item::before {
  content: "";
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  background: var(--c-sage-deep);
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center / contain no-repeat;
}

/* Titre de page sous 768 px : a 390 px, un mot de 16 lettres ou plus ne tient pas sur la ligne en --t-4xl
   (« imperméabilisation », page étanchéité : 400 px pour 350, la page défilait de côté). La maquette n'a pas de
   mot aussi long. Coupure avec trait d'union (lang fr-CH), limitée à ces mots-là, seulement si le navigateur
   connaît hyphenate-limit-chars (sans elle, hyphens: auto couperait aussi des mots qui tiennent). Repli dans tous
   les cas, sans trait d'union : overflow-wrap ne coupe qu'un mot plus large que la ligne. */
@media (max-width: 767px) {
  .az-pagehead__title { overflow-wrap: break-word; }
  @supports (hyphenate-limit-chars: 16 6 6) {
    .az-pagehead__title { hyphens: auto; hyphenate-limit-chars: 16 6 6; }
  }
}

/* Collage à deux photos (pages métiers dont la petite photo est « à trouver » ; metiers.py pose az-collage--two).
   metier.css place trois photos. Sans la petite, le plan sable restait nu en haut à droite à 1440 px et la cellule
   de droite de la deuxième ligne restait vide à 390 px. La photo portrait prend une colonne de plus et le plan
   s'arrête à son bord droit ; sous 768 px, elle passe en pleine largeur, recadrée en 3:2 comme la grande. */
.az-collage--two .az-collage__photo--tall { grid-column: 9 / 13; }
.az-collage--two .az-collage__plane { grid-column: 7 / 13; }
@media (max-width: 767px) {
  .az-collage--two .az-collage__photo--tall { grid-column: 1 / -1; }
  .az-collage--two .az-collage__photo--tall img { aspect-ratio: 3 / 2; }
}

/* Pages univers : metier.html separe les realisations et la FAQ par le bandeau rose, qui porte l'air. Ici elles se
   suivent sur le meme fond (de meme les reperes de cout puis la FAQ de l'univers cuisine, sans realisations) : le bas
   de la section (--s-7) et le haut de la FAQ (--s-7) s'ajoutaient, 288 px contre 192 entre les autres sections. */
/* La liste des projets sans photo (az-others) se place entre les realisations et la FAQ : meme regle. Sous les
   cartes, elle en est la suite : 96 px seulement entre les cartes et son titre. */
.az-projects:has(+ .az-faq),
.az-projects:has(+ .az-others),
.az-others:has(+ .az-faq) { padding-bottom: var(--s-6); }
.az-projects + .az-faq,
.az-benefits + .az-faq,
.az-others + .az-faq { padding-top: var(--s-6); }

/* Pages d'article sans suite (legal, credits ; body.page, pas les articles de blog) : article.html est suivi du bandeau et des articles lies, qui portent
   l'air avant le pied de page. Ici le texte est le dernier element : on rend l'air sous la colonne. */
body.page .az-article > .az-article__grid:last-child { padding-bottom: var(--s-6); }

/* Projets sans photo seuls sur une page univers ou metier ([artizy_autres_chantiers titre="..."]) : la liste
   az-others de projets.html y devient une section de la page, titree en az-h2 comme ses voisines. La maquette n'a
   pas ce cas : marge sous le titre de .az-options__heading (energie.css), et 96 px en haut pour garder 192 px entre
   deux sections de meme fond (regle des pages univers plus haut). */
.az-others > .az-container > .az-h2 { margin-bottom: var(--s-5); }
.az-others:has(> .az-container > .az-h2) { padding-top: var(--s-6); }
@media (max-width: 767px) {
  .az-others:has(> .az-container > .az-h2) { padding-top: var(--s-5); }
}

/* Reperes de cout des univers : trois paliers dans .az-options__grid, faite pour deux options (auto-fit, colonnes
   de 24 rem au moins). Sous 1280 px environ, le troisieme palier passait seul a la ligne avec le filet gauche de
   .az-options__col + .az-options__col. Trois colonnes fixes des 1024 px ; plus etroit, les montants se coupaient :
   la pile a filets hauts que la maquette pose sous 767 px. */
@media (min-width: 1024px) {
  .az-benefits .az-options__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .az-benefits .az-options__grid { grid-template-columns: minmax(0, 1fr); }
  .az-benefits .az-options__col,
  .az-benefits .az-options__col + .az-options__col { padding: 0; border-left: 0; }
  .az-benefits .az-options__col + .az-options__col { padding-top: var(--s-4); border-top: 1px solid var(--c-line); }
}

/* En-tete colle en haut pendant le defilement (retour de recette du 2026-11-06 : naviguer sans remonter). La
   maquette le laisse dans le flux (position: relative). Fond de la page pour masquer le contenu qui passe dessous ;
   le panneau mobile (position: absolute, top: 100%) reste accroche sous l'en-tete. Les ancres (/#metiers)
   s'arretent sous l'en-tete, pas dessous. La barre d'admin (connecte) decale l'en-tete. */
.az-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--c-linen);
}
.admin-bar .az-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .az-header { top: 46px; } }
/* Hauteur de l'en-tete mesuree : 96 px, 148 px entre 901 et 1100 px (site.css passe le menu sur une seconde
   ligne), 92 px en dessous. Sert aux ancres, au sommaire colle des articles et au panneau du menu mobile. */
:root { --header-h: 6rem; }
@media (min-width: 901px) and (max-width: 1100px) { :root { --header-h: 9.25rem; } }
html { scroll-padding-top: var(--header-h); }
/* Sommaire des articles (blog.css, colle a --s-4 du haut) : sous l'en-tete, pas dessous. */
.az-toc { top: calc(var(--header-h) + var(--s-4)); }
/* Panneau du menu mobile accroche a l'en-tete colle : plus haut que l'ecran, son bas serait hors d'atteinte. Il
   defile seul, dans la hauteur visible sous l'en-tete. */
.az-menu__panel { max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; }

/* Bouton du menu mobile : burger (trois traits) au lieu du mot « Menu » et du « + » de la maquette ; le mot
   reste lu par les lecteurs d'ecran. Ouvert, les traits forment une croix. */
.az-menu__toggle { padding-inline: var(--s-1); }
.az-menu__toggle::after { content: none; }
.az-menu__toggle svg { width: 1.5rem; height: 1.5rem; overflow: visible; }
.az-menu__toggle line { transform-origin: 12px 12px; transition: transform var(--ease), opacity var(--ease); }
.az-menu[open] > .az-menu__toggle line:nth-child(1) { transform: rotate(45deg) translateY(5px); }
.az-menu[open] > .az-menu__toggle line:nth-child(2) { opacity: 0; }
.az-menu[open] > .az-menu__toggle line:nth-child(3) { transform: rotate(-45deg) translateY(-5px); }

/* Accueil plus court (recette du 2026-11-06) : les tuiles des univers passent du portrait 4/5 au paysage 4/3, la
   grande tuile de 16/10 a 16/9. Environ 200 px de moins a 1440 px, meme grille. */
.az-universes .az-tile__img { aspect-ratio: 4 / 3; }
.az-universes .az-tile--wide .az-tile__img { aspect-ratio: 16 / 9; }