/*
Theme Name: Azameo
Theme URI: https://azameo.com/
Description: Thème enfant de Twenty Twenty-Five pour Azameo, agence Search (SEO, SEA, GEO). Direction claire et aérée : titres en serif, micro-libellés en monospace capitales, brume bleutée, cartes arrondies et ombres basses.
Author: Azameo
Template: twentytwentyfive
Version: 3.3.1
Requires at least: 6.7
Requires PHP: 7.4
Text Domain: azameo
*/

/* ------------------------------------------------------------------
   Les couleurs, polices et tailles vivent dans theme.json.
   Ce fichier porte la mise en page de document.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Jetons de forme. Le site ne joue plus le rapport austère : angles
   adoucis, ombres portées basses et diffuses, fond en brume bleutée.
   ------------------------------------------------------------------ */
:root {
  --az-r-xs: 6px;
  --az-r-sm: 10px;
  --az-r-md: 16px;
  --az-r-lg: 24px;
  --az-r-pill: 999px;

  --az-ombre-1: 0 1px 2px rgba(13, 24, 60, .04), 0 2px 6px rgba(13, 24, 60, .04);
  --az-ombre-2: 0 4px 14px rgba(13, 24, 60, .06), 0 12px 32px rgba(13, 24, 60, .06);
  --az-ombre-3: 0 18px 48px rgba(13, 24, 60, .10), 0 2px 8px rgba(13, 24, 60, .04);
  --az-ombre-bleue: 0 10px 28px rgba(58, 99, 216, .28);

  --az-mono: var(--wp--preset--font-family--mono);
  --az-grotesk: var(--wp--preset--font-family--grotesk);
}

body {
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  /* La brume bleutée du haut de page se dissout vers le blanc. */
  background:
    radial-gradient(1200px 620px at 50% -180px, #E4ECFE 0%, rgba(228, 236, 254, 0) 70%),
    linear-gradient(180deg, #F4F7FF 0%, #FFFFFF 620px);
  background-attachment: scroll;
  background-repeat: no-repeat;
}

/* Micro-libellés : mono, capitales, très espacé. C'est la signature
   typographique du modèle : elle revient sur les boutons, les
   surtitres, les en-têtes de tableau et les étiquettes. */
.az-eyebrow,
.wp-block-button__link,
.az-cta-header,
.az-form button[type=submit],
.entry-content th,
.az-specs span,
.az-kpi-label,
.az-footer-titre,
.az-globe__tag,
.az-globe__fiche-titre,
.az-figure figcaption,
.az-section > h2::before,
.az-toc a::before {
  font-family: var(--az-mono) !important;
  font-weight: 500;
  letter-spacing: .08em;
}

/* Largeur de lecture 68 caractères, jamais centrée */
.entry-content p,
.entry-content li,
.entry-content dd {
  max-width: 68ch;
}
/* ------------------------------------------------------------------
   ALIGNEMENT. Une seule règle décide, plus rien n'est laissé aux
   valeurs par défaut de WordPress.

   Le problème corrigé ici : la mise en page « contrained » applique
   margin:auto à chaque enfant direct du contenu. Comme le titre, le
   chapô, le bouton et la mention ont chacun leur propre largeur
   maximale, ils se centraient à quatre endroits différents. D'où des
   en-têtes de page en escalier.

   Règle : l'en-tête de page est centré, tout le reste est calé à
   gauche sur une largeur de lecture.
   ------------------------------------------------------------------ */

/* Trois niveaux de spécificité, dans cet ordre strict :
     WordPress            (0,1,0)  margin:auto sur chaque enfant
     notre défaut         (0,1,1)  bord gauche commun
     notre en-tête        (0,2,1)  centrage volontaire
   Le :is() porte la spécificité d'une classe, le :where() n'en porte
   aucune. C'est ce dosage qui fait que chaque règle bat la précédente
   sans jamais écraser la suivante. */
main :is(.entry-content, .az-section) > :where(:not(.alignfull)) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* L'en-tête de page, centré d'un bloc. Enfants directs seulement :
   dans les sections, boutons et mentions restent calés à gauche. */
main .entry-content > :is(.rank-math-breadcrumb, h1, .az-lede, .wp-block-buttons, .az-cta-note) {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}
main .entry-content > h1 {
  max-width: 22ch;
  margin-top: 1.1rem !important;
  margin-bottom: 1.3rem !important;
}
main .entry-content > .az-lede {
  max-width: 56ch;
  font-size: 1.0625rem;
  color: var(--wp--preset--color--ink-soft);
  margin-bottom: 1.8rem !important;
}
main .entry-content > .rank-math-breadcrumb,
main .entry-content > .rank-math-breadcrumb p,
main .entry-content > .az-cta-note {
  max-width: none;
}
main .entry-content > .wp-block-buttons {
  justify-content: center;
  margin-bottom: .8rem !important;
}
/* Le titre de page reprend le carré bleu du titre d'accueil. */
main .entry-content > h1::after {
  content: "";
  display: inline-block;
  width: .14em;
  height: .14em;
  margin-left: .14em;
  background: var(--wp--preset--color--azameo-blue);
}

/* --- Titres de section numérotés, numéro en débord dans la marge --- */
.az-section > h2 {
  position: relative;
  padding-top: 0;
  border-top: 0;
  margin-top: 0;
  font-size: clamp(1.9rem, 1.2rem + 2.3vw, 3rem);
}
.az-section > h2::before {
  content: attr(data-num);
  position: absolute;
  top: .55em;
  left: -4.5rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--wp--preset--color--azameo-blue);
}
@media (max-width: 1180px) {
  .az-section > h2::before {
    position: static;
    display: block;
    margin-bottom: .4rem;
  }
}

/* Pleine largeur réelle. Le gabarit contraint post-content à 74rem,
   donc alignfull s'arrêtait au conteneur au lieu de l'écran.
   100vw inclut la barre de défilement : sans la retrancher, la page
   déborde de sa largeur. --az-sb est mesurée par le script d'en-tête. */
main .entry-content > .alignfull {
  margin-left: calc(50% - 50vw + var(--az-sb, 0px) / 2) !important;
  margin-right: calc(50% - 50vw + var(--az-sb, 0px) / 2) !important;
  width: calc(100vw - var(--az-sb, 0px));
  max-width: calc(100vw - var(--az-sb, 0px));
}
main .entry-content > .az-band.alignfull > .az-section {
  max-width: 74rem;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- Figures de terrain : la photo est traitée comme une pièce du
       dossier, en noir et blanc, jamais comme une décoration. --- */
.az-figure {
  margin: var(--wp--preset--spacing--40) 0 0;
}
.az-figure img {
  display: block;
  width: 100%;
  height: clamp(230px, 32vw, 380px);
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}
.az-figure figcaption {
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-soft);
  max-width: 74rem;
  margin: 0 auto;
  padding: .55rem 1.25rem 0;
}
@media (min-width: 1250px) {
  .az-figure figcaption { padding-inline: 0; }
}

/* ------------------------------------------------------------------
   Le globe : les surfaces où part le budget.
   Dispositif inspiré du benchmark, rhabillé : rien n'est arrondi,
   les étiquettes sont des rectangles nets, la grille est bleue.
   ------------------------------------------------------------------ */
.az-globe {
  background: linear-gradient(180deg, #F2F6FF 0%, #E7EEFD 55%, #F7FAFF 100%);
  border: 0;
  overflow: hidden;
}
.az-globe__intro {
  max-width: 46ch;
  margin: 0 auto var(--wp--preset--spacing--40);
  text-align: center;
}
.az-globe__scene {
  position: relative;
  width: 100%;
  height: clamp(320px, 42vw, 520px);
}
.az-globe__grille {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(18, 64, 171, .24);
}

/* Étiquettes flottantes, posées en pourcentage sur la scène. */
.az-globe__tag {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--wp--preset--font-family--grotesk);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: .45rem .7rem;
  line-height: 1;
}
.az-globe__tag--plein {
  background: var(--wp--preset--color--ink);
  color: #fff;
  border-radius: var(--az-r-xs);
  box-shadow: var(--az-ombre-2);
}
.az-globe__tag--trait {
  background: #fff;
  color: var(--wp--preset--color--azameo-blue);
  border: 1px solid rgba(58, 99, 216, .28);
  border-radius: var(--az-r-xs);
  box-shadow: var(--az-ombre-1);
}

/* La fiche : la structure du rapport, jamais un résultat chiffré. */
.az-globe__fiche {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  width: min(320px, 42%);
  background: #fff;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--az-r-lg);
  box-shadow: var(--az-ombre-3);
  padding: 1.3rem 1.4rem 1.4rem;
}
.az-globe__fiche-titre {
  font-family: var(--wp--preset--font-family--grotesk);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink);
  margin: 0 0 .7rem;
  max-width: none;
}
.az-globe__ligne {
  display: grid;
  grid-template-columns: 1fr 34%;
  align-items: center;
  gap: .6rem;
  font-size: .75rem;
  color: var(--wp--preset--color--ink-soft);
  padding: .3rem 0;
  border-top: 1px solid var(--wp--preset--color--line);
}
.az-globe__jauge {
  display: block;
  height: 5px;
  background: var(--wp--preset--color--line);
}
.az-globe__jauge b {
  display: block;
  height: 100%;
  background: var(--wp--preset--color--azameo-blue);
}
.az-globe__fiche-pied {
  font-size: .6875rem;
  color: var(--wp--preset--color--ink-soft);
  margin: .8rem 0 0;
  padding-top: .6rem;
  border-top: 1px solid var(--wp--preset--color--line);
  max-width: none;
}

@media (max-width: 860px) {
  /* La scène s'empile : étiquettes, fiche, puis le globe en pied.
     La grille reste en absolu, donc elle se peindrait par-dessus la
     fiche : on lui réserve sa hauteur et on remonte le reste. */
  .az-globe__scene {
    height: auto;
    padding-bottom: 250px;
    text-align: center;
  }
  .az-globe__grille { height: 240px; inset: auto 0 0 0; z-index: 0; }
  .az-globe__tag {
    position: relative;
    z-index: 1;
    transform: none;
    display: inline-block;
    margin: 0 .25rem .45rem;
    left: auto !important;
    top: auto !important;
  }
  .az-globe__fiche {
    position: relative;
    z-index: 1;
    transform: none;
    inset: auto;
    width: auto;
    max-width: 340px;
    margin: 1.2rem auto 0;
    text-align: left;
  }
}

/* ------------------------------------------------------------------
   Les surfaces de recherche. Texte à gauche, mosaïque à droite.
   ------------------------------------------------------------------ */
.az-visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.az-surfaces { background: linear-gradient(180deg, #FFFFFF 0%, #F3F7FF 100%); }
.az-surfaces__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.az-surfaces__texte h2 { margin-top: 0; }
.az-surfaces__texte p { max-width: 44ch; }
.az-surfaces__lien {
  display: inline-block;
  font-family: var(--az-mono);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--wp--preset--color--ink);
  padding-bottom: .3rem;
  transition: color .16s ease, border-color .16s ease;
}
.az-surfaces__lien:hover {
  color: var(--wp--preset--color--azameo-blue);
  border-bottom-color: var(--wp--preset--color--azameo-blue);
}

.az-surfaces__mosaique {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.az-surface {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: .5rem;
}
/* Quatre teintes de bleu, distribuées pour éviter tout damier régulier. */
.az-surface--t1 { background: #F5F8FF; }
.az-surface--t2 { background: #EAF0FE; }
.az-surface--t3 { background: #DFE9FD; }
.az-surface--t4 { background: #CFDDFB; }
.az-surface__logo {
  width: clamp(22px, 2.6vw, 34px);
  height: clamp(22px, 2.6vw, 34px);
  fill: var(--wp--preset--color--ink);
}
.az-surface__nom {
  font-family: var(--az-mono);
  font-size: clamp(.62rem, .55rem + .25vw, .78rem);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--wp--preset--color--ink-soft);
  text-align: center;
}

@media (max-width: 900px) {
  .az-surfaces__grille { grid-template-columns: 1fr; gap: 2.4rem; }
  .az-surfaces__texte p { max-width: none; }
  .az-surface { aspect-ratio: 1.15; }
}

/* ==================================================================
   SYSTÈME DE CADRE. C'est la signature la plus forte du modèle :
   des filets verticaux qui encadrent le conteneur sur toute la
   hauteur, comme une feuille quadrillée. Rien d'autre ne produit
   cette impression de grille tenue.
   ================================================================== */
:root {
  --esk-filet: #E3E9F5;
  --esk-100: #EEF3FE;
  --esk-200: #DFE9FD;
  --esk-300: #C9D8FB;
  --esk-900: #16255C;
  --esk-encre: #1D2939;
  --esk-cell: 11.5rem;
}

/* Le conteneur cadré : deux filets verticaux qui courent sur toute
   la section, plus le fond quadrillé optionnel. */
.az-cadre {
  position: relative;
}
.az-cadre::before,
.az-cadre::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--esk-filet);
  pointer-events: none;
  z-index: 1;
}
.az-cadre::before { left: max(1.25rem, calc(50% - 37rem)); }
.az-cadre::after  { right: max(1.25rem, calc(50% - 37rem)); }
@media (max-width: 640px) {
  .az-cadre::before, .az-cadre::after { display: none; }
}

/* Le quadrillage de fond du héros, en SVG inline, sans image. */
.az-quadrille {
  background-image:
    linear-gradient(var(--esk-filet) 1px, transparent 1px),
    linear-gradient(90deg, var(--esk-filet) 1px, transparent 1px);
  background-size: var(--esk-cell) var(--esk-cell);
  background-position: center top;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 78%);
}

/* Le carré bleu après chaque titre. Chez eux c'est un span dédié ;
   ici un pseudo-élément, pour ne pas toucher au contenu. */
.az-section > h2::after,
.az-surfaces__texte h2::after {
  content: "";
  display: inline-block;
  width: .13em;
  height: .13em;
  margin-left: .16em;
  vertical-align: baseline;
  background: var(--wp--preset--color--azameo-blue);
}

/* Le lien à étoile coulissante, leur troisième niveau de bouton. */
.az-lien-tiers {
  display: inline-flex;
  align-items: center;
  font-family: var(--az-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}
.az-lien-tiers::before {
  content: "";
  width: 0;
  height: .8em;
  margin-right: 0;
  background: var(--wp--preset--color--azameo-blue);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  transition: width .3s ease, margin .3s ease;
}
.az-lien-tiers:hover { color: var(--wp--preset--color--azameo-blue); }
.az-lien-tiers:hover::before { width: .8em; margin-right: .5em; }

/* Pastilles de catégorie, posées en haut à droite des cartes. */
.az-pastille {
  font-family: var(--az-mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .25rem .5rem;
  border-radius: 3px;
  white-space: nowrap;
}
.az-pastille--bleu  { background: #E4ECFE; color: #2A4EB8; }
.az-pastille--vert  { background: #DDF3E6; color: #0B6B37; }
.az-pastille--jaune { background: #FCF0D8; color: #7A5410; }
.az-pastille--rouge { background: #FCE4E4; color: #A32424; }

/* ==================================================================
   LE DAMIER. Chez eux les cellules sont bordées, carrées, et les
   colonnes défilent lentement en sens inverse. C'est ce mouvement
   discret qui fait vivre le bloc.
   ================================================================== */
.az-surfaces__mosaique {
  display: grid;
  grid-template-columns: repeat(3, var(--esk-cell));
  gap: 0;
  justify-content: end;
  overflow: hidden;
  max-height: 34rem;
}
.az-surfaces__mosaique > .az-colonne {
  display: flex;
  flex-direction: column;
}
.az-surface {
  width: var(--esk-cell);
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
  padding: 1.5rem;
  border: 1px solid var(--esk-filet);
  margin: -1px 0 0 -1px;
  background: transparent;
  transition: background .4s ease;
}
.az-surface--t1, .az-surface--t2, .az-surface--t3, .az-surface--t4 { background: transparent; }
.az-surface:hover { background: rgba(255, 255, 255, .55); }
.az-surface__logo {
  width: 1.6rem;
  height: 1.6rem;
  fill: var(--wp--preset--color--ink);
}
.az-surface__nom {
  font-family: var(--az-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--wp--preset--color--ink);
  text-align: left;
}
@keyframes az-monte { from { transform: translateY(0); } to { transform: translateY(calc(-1 * var(--esk-cell))); } }
@keyframes az-descend { from { transform: translateY(calc(-1 * var(--esk-cell))); } to { transform: translateY(0); } }
.az-colonne--monte  { animation: az-monte 26s linear infinite; }
.az-colonne--descend { animation: az-descend 32s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .az-colonne--monte, .az-colonne--descend { animation: none; }
}

/* La lueur bleue derrière le damier. */
.az-surfaces {
  position: relative;
  background: var(--esk-100);
  overflow: hidden;
}
.az-surfaces::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(45%);
  aspect-ratio: 1;
  height: 100%;
  border-radius: 50%;
  background: var(--esk-300);
  filter: blur(127px);
  pointer-events: none;
  opacity: .75;
}
.az-surfaces__grille { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .az-surfaces__mosaique {
    grid-template-columns: repeat(3, 1fr);
    max-height: none;
    justify-content: stretch;
  }
  .az-surface { width: auto; padding: 1rem; }
  .az-colonne--monte, .az-colonne--descend { animation: none; }
}

/* ------------------------------------------------------------------
   Bandeau de clients. Les logos gardent leurs couleurs de marque : un
   premier essai les ramenait tous à une encre unique, ce qui donnait une
   bande éteinte et effaçait l'identité des quatre entreprises.

   Aucun filtre ici, et c'est volontaire. grayscale() aurait vidé le bleu
   clair de Maxiprotec, et le logo de Printags, dessiné en blanc pour un
   fond sombre, aurait disparu. Le travail est fait à la génération : seuls
   les pixels clairs et désaturés passent en encre, les couleurs de marque
   restent intactes, et les lignes de bas de logo trop fines pour être lues
   à cette taille sont retirées.

   Chaque image porte sa propre hauteur dans --az-logo-h, réglée à la
   génération pour qu'un bloc de deux lignes pèse autant qu'un mot seul.
   ------------------------------------------------------------------ */
.az-clients { text-align: center; }
/* Deux classes, pour passer devant `.entry-content p` qui impose la
   largeur de lecture : sans cela le titre se centre dans une boîte de
   68 caractères calée à gauche, et non sur la bande. */
.az-clients .az-clients__titre {
  font-family: var(--az-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-soft);
  margin: 0 0 2rem !important;
  max-width: none;
}
.az-clients__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vw, 5.5rem);
}
.az-clients__item { margin: 0; max-width: none; }
.az-clients__item img {
  height: calc(var(--az-logo-h, 32px) * var(--az-logo-echelle, 1));
  width: auto;
  max-width: 100%;
  display: block;
  opacity: .88;
  transition: opacity .25s ease;
}
.az-clients__item:hover img { opacity: 1; }
@media (max-width: 640px) {
  .az-clients__liste { --az-logo-echelle: .8; }
}

/* Filet fin entre les blocs internes */
.az-rule {
  border: 0;
  border-top: 1px solid var(--wp--preset--color--line);
  margin: 0;
}

/* --- Sommaire de page, présenté comme une table des matières de rapport --- */
.az-toc { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.az-toc li {
  counter-increment: toc;
  margin: 0;
  max-width: none;
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.az-toc li:first-child { border-top: 1px solid var(--wp--preset--color--line); }
.az-toc a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .7rem 0;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}
.az-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--wp--preset--font-family--grotesk);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--wp--preset--color--ink-soft);
  min-width: 2ch;
}
.az-toc a:hover { color: var(--wp--preset--color--azameo-blue); }
.az-toc a:hover::before { color: var(--wp--preset--color--azameo-blue); }

/* --- Encadrés de terrain --- */
.az-terrain,
.az-bonnepratique {
  padding: 1.1rem 1.4rem;
  background: #fff;
  border-left: 3px solid var(--wp--preset--color--azameo-blue);
}
.az-bonnepratique { border-left-color: var(--wp--preset--color--positive); }
.az-terrain p, .az-bonnepratique p { max-width: none; margin: 0; }
.az-terrain > p > strong { color: var(--wp--preset--color--azameo-blue); }
.az-bonnepratique > p > strong { color: var(--wp--preset--color--positive); }
.az-terrain > p > strong,
.az-bonnepratique > p > strong {
  font-family: var(--wp--preset--font-family--grotesk);
  font-weight: 600;
}

/* --- Le constat signature du hero --- */
.az-these {
  font-family: var(--wp--preset--font-family--grotesk);
  font-weight: 600;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.35;
  max-width: 42ch !important;
  border-left: 3px solid var(--wp--preset--color--azameo-blue);
  padding-left: 1.4rem;
  margin: 0;
}

/* --- Lignes de données. Remplace la grille de cartes. --- */
.az-lignes { border-top: 2px solid var(--wp--preset--color--ink); }
.az-ligne {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 0 2.5rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
}
@media (max-width: 780px) {
  .az-ligne { grid-template-columns: 1fr; gap: .5rem; }
}
.az-ligne__cle {
  font-family: var(--wp--preset--font-family--grotesk);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.25;
  margin: 0;
}
.az-ligne__prix {
  display: block;
  font-family: var(--wp--preset--font-family--grotesk);
  font-weight: 700;
  font-size: 1.5rem;
  /* « Offert » est une bonne nouvelle, pas une alerte : vert, pas orange. */
  color: var(--wp--preset--color--positive);
  margin-top: .3rem;
}
.az-ligne__prix--neutre { color: var(--wp--preset--color--ink); }
.az-ligne__val > *:first-child { margin-top: 0; }
.az-ligne__val p { max-width: 60ch; }

/* --- Chiffre de résultat, posé avant le nom du client --- */
.az-kpi {
  font-family: var(--wp--preset--font-family--grotesk);
  font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0;
}
.az-kpi--positif { color: var(--wp--preset--color--positive); }
.az-kpi--gaspillage { color: var(--wp--preset--color--signal); }
/* Ce libellé sert de légende sous un nom de client. Sans display:block
   il restait en ligne et collait au nom : « PrintagsSaaS B2B · Lyon ». */
.az-kpi-label {
  display: block;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-soft);
  margin: .35rem 0 0;
}

/* --- Tableaux : dispositif principal, pas décoratif --- */
.entry-content table { border-collapse: collapse; width: 100%; font-size: 1rem; }
.entry-content thead th { border-bottom: 2px solid var(--wp--preset--color--ink); }
.entry-content th, .entry-content td {
  text-align: left;
  padding: .72rem .9rem .72rem 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
  vertical-align: top;
}
.entry-content th {
  font-family: var(--wp--preset--font-family--grotesk);
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-soft);
}
.wp-block-table { overflow-x: auto; }
.wp-block-table td:first-child { font-weight: 600; }

/* --- Boutons : pilule bleue, texte mono capitales, ombre colorée --- */
.wp-block-button__link {
  font-size: .8125rem;
  text-transform: uppercase;
  padding: 1.05rem 1.9rem;
  border: 1px solid transparent;
  border-radius: var(--az-r-xs);
  line-height: 1;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
/* Blanc sur ce bleu : 5,31:1, le niveau AA est tenu dans les deux sens. */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: var(--wp--preset--color--azameo-blue);
  color: #fff;
  border-color: var(--wp--preset--color--azameo-blue);
  box-shadow: var(--az-ombre-bleue);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: #2F55C6;
  border-color: #2F55C6;
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(58, 99, 216, .34);
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: #fff;
  color: var(--wp--preset--color--ink);
  border-color: var(--wp--preset--color--line);
  box-shadow: var(--az-ombre-1);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--azameo-blue);
  color: var(--wp--preset--color--azameo-blue);
  transform: translateY(-1px);
}
.az-cta-note {
  font-size: .9375rem;
  color: var(--wp--preset--color--ink-soft);
  margin: .6rem 0 0;
}

/* --- FAQ --- */
.az-faq { margin: 0; }
.az-faq > div {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.az-faq > div:first-child { border-top: 1px solid var(--wp--preset--color--line); }
.az-faq dt {
  font-family: var(--wp--preset--font-family--grotesk);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.35;
  max-width: 60ch;
}
.az-faq dd { margin: .55rem 0 0; color: var(--wp--preset--color--ink-soft); }

/* --- Fiche client, six champs --- */
.az-fiche { border-top: 2px solid var(--wp--preset--color--ink); margin: 0; }
.az-fiche > div {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 0 1.5rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
}
@media (max-width: 640px) { .az-fiche > div { grid-template-columns: 1fr; gap: .1rem; } }
.az-fiche dt {
  font-size: .8125rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-soft);
  padding-top: .15rem;
}
.az-fiche dd { margin: 0; font-weight: 600; }

/* --- Formulaire --- */
.az-form label {
  display: block;
  font-family: var(--wp--preset--font-family--grotesk);
  font-weight: 600;
  font-size: .9375rem;
  margin-bottom: .35rem;
}
.az-form input[type=text], .az-form input[type=email], .az-form input[type=url],
.az-form input[type=tel], .az-form select, .az-form textarea {
  width: 100%;
  max-width: 34rem;
  padding: .7rem .8rem;
  border: 1px solid var(--wp--preset--color--line);
  background: #fff;
  color: var(--wp--preset--color--ink);
  font: inherit;
}
.az-form input:focus, .az-form select:focus, .az-form textarea:focus {
  border-color: var(--wp--preset--color--azameo-blue);
  outline: 2px solid var(--wp--preset--color--azameo-blue);
  outline-offset: 1px;
}
.az-form .az-champ { margin-bottom: 1.1rem; }
.az-form fieldset {
  border: 1px solid var(--wp--preset--color--line);
  padding: 1rem 1.2rem;
  margin: 0 0 1.4rem;
  background: #fff;
}
.az-form legend {
  font-family: var(--wp--preset--font-family--grotesk);
  font-weight: 600;
  font-size: .9375rem;
  padding: 0 .4rem;
}
.az-form .az-radio { display: flex; align-items: flex-start; gap: .5rem; margin: .4rem 0; }
.az-form .az-radio label { font-weight: 400; font-family: var(--wp--preset--font-family--body); margin: 0; }
.az-form button[type=submit] {
  font-family: var(--wp--preset--font-family--grotesk);
  font-weight: 600;
  font-size: 1.0625rem;
  padding: .95rem 1.6rem;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--ink);
  border: 2px solid var(--wp--preset--color--accent);
  cursor: pointer;
}
.az-form button[type=submit]:hover { background: #F7DA82; border-color: #F7DA82; }
.az-note-form {
  font-size: .9375rem;
  color: var(--wp--preset--color--ink-soft);
  border-left: 3px solid var(--wp--preset--color--line);
  padding-left: 1rem;
  margin-bottom: 1.4rem;
}

/* --- Fil d'Ariane --- */
.rank-math-breadcrumb {
  font-size: .8125rem;
  letter-spacing: .02em;
  color: var(--wp--preset--color--ink-soft);
  margin-bottom: 1.25rem;
}
.rank-math-breadcrumb a { color: var(--wp--preset--color--ink-soft); }
.rank-math-breadcrumb a:hover { color: var(--wp--preset--color--azameo-blue); }

/* --- Divers --- */
.az-eyebrow {
  font-family: var(--wp--preset--font-family--grotesk);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-soft);
  margin: 0 0 .6rem;
}
.az-lede { font-size: 1.25rem; line-height: 1.5; color: var(--wp--preset--color--ink-soft); max-width: 54ch !important; }
.az-maj { font-size: .875rem; color: var(--wp--preset--color--ink-soft); }

:focus-visible { outline: 3px solid var(--wp--preset--color--azameo-blue); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------
   En-tête et pied de page
   ------------------------------------------------------------------ */

/* Le logo : un signe puis le mot, comme une signature de rapport.
   Le signe est un viseur, parce que la promesse du site est de montrer
   où part l'argent. Il porte le bleu ; le mot reste à l'encre pour ne
   pas concurrencer le signe. */
.az-marque {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--wp--preset--font-family--grotesk);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -.035em;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  line-height: 1;
}
.az-marque__signe {
  width: 1.02em;
  height: 1.02em;
  flex: none;
  color: var(--wp--preset--color--azameo-blue);
  overflow: visible;
}

.az-header__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.az-header__actions { display: flex; align-items: center; gap: .75rem; order: 2; }

.az-nav { display: flex; flex-wrap: wrap; gap: 1.35rem; font-size: 1rem; margin-left: auto; }
.az-nav a {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.az-nav a:hover,
.az-nav a[aria-current="page"] { border-bottom-color: var(--wp--preset--color--azameo-blue); }

/* Le CTA est un lien stylé en bouton, hors bloc bouton : il échappe
   ainsi à la règle pleine largeur des boutons sous 560 px. */
.az-cta-header {
  font-size: .75rem;
  text-transform: uppercase;
  line-height: 1;
  padding: .85rem 1.3rem;
  border-radius: var(--az-r-xs);
  background: var(--wp--preset--color--azameo-blue);
  color: #fff;
  border: 1px solid var(--wp--preset--color--azameo-blue);
  box-shadow: var(--az-ombre-bleue);
  text-decoration: none;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.az-cta-header:hover {
  background: #2F55C6;
  border-color: #2F55C6;
  transform: translateY(-1px);
}
.az-cta-header__court { display: none; }

/* Le bouton menu n'apparaît que sur petit écran, et seulement si le
   script s'est exécuté. Sans script, la navigation reste affichée. */
.az-burger { display: none; }

@media (max-width: 980px) {
  .js .az-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 2px solid var(--wp--preset--color--ink);
    cursor: pointer;
  }
  .js .az-burger span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 0 auto;
    background: var(--wp--preset--color--ink);
  }
  .js .az-header--ouvert .az-burger span:nth-child(2) { opacity: 0; }
  .js .az-header--ouvert .az-burger span:first-child { transform: translateY(6px) rotate(45deg); }
  .js .az-header--ouvert .az-burger span:last-child  { transform: translateY(-6px) rotate(-45deg); }

  /* La navigation devient un panneau pleine largeur sous la barre. */
  .js .az-nav {
    order: 3;
    flex: 1 0 100%;
    display: none;
    flex-direction: column;
    gap: 0;
    margin: .75rem 0 0;
    border-top: 1px solid var(--wp--preset--color--line);
  }
  .js .az-header--ouvert .az-nav { display: flex; }
  .js .az-nav a {
    padding: .9rem 0;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--wp--preset--color--line);
  }
  .js .az-nav a:hover,
  .js .az-nav a[aria-current="page"] {
    color: var(--wp--preset--color--azameo-blue);
    border-bottom-color: var(--wp--preset--color--line);
  }
}

@media (max-width: 600px) {
  .az-cta-header__long { display: none; }
  .az-cta-header__court { display: inline; }
}

.az-footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 2.5rem 3rem;
}
.az-footer-titre {
  font-family: var(--wp--preset--font-family--grotesk);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-soft);
  margin: 0 0 .9rem;
}
.az-footer-cols ul { list-style: none; padding: 0; margin: 0; }
.az-footer-cols li { margin: 0 0 .55rem; max-width: none; }
.az-footer-cols a { color: var(--wp--preset--color--ink); text-decoration: none; }
.az-footer-cols a:hover { text-decoration: underline; }
.az-footer-note {
  font-size: .9375rem;
  color: var(--wp--preset--color--ink-soft);
  margin: 0 0 .7rem;
  max-width: 40ch;
}
.az-footer-note a { color: var(--wp--preset--color--azameo-blue); }

.az-footer-bas {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  justify-content: space-between;
  margin-top: 3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--wp--preset--color--line);
  font-size: .875rem;
  color: var(--wp--preset--color--ink-soft);
}
.az-footer-bas p { margin: 0; max-width: none; }
.az-footer-bas a { color: var(--wp--preset--color--ink-soft); }

/* ==================================================================
   HABILLAGE
   Le document gagne du rythme par l'alternance de fonds et par
   l'échelle typographique, jamais par de l'ornement.
   ================================================================== */

/* --- Bandeaux pleine largeur --- */
.az-band { position: relative; padding-block: var(--wp--preset--spacing--50); }
.az-band::before {
  content: "";
  position: absolute;
  inset: 0 -50vw;
  z-index: -1;
}
.az-band--ink::before { background: var(--wp--preset--color--ink); }
.az-band--white::before { background: #fff; border-block: 1px solid var(--wp--preset--color--line); }

.az-band--ink,
.az-band--ink p,
.az-band--ink li,
.az-band--ink h2,
.az-band--ink h3,
.az-band--ink dt,
.az-band--ink dd { color: #F2F4F6; }
.az-band--ink h2 { border-top-color: #F2F4F6 !important; }
.az-band--ink h2::before { color: #8FA8DC; }
.az-band--ink a { color: #9FB8E8; }
.az-band--ink .az-ligne { border-bottom-color: rgba(255,255,255,.16); }
.az-band--ink .az-lignes { border-top-color: #F2F4F6; }
.az-band--ink .az-terrain { background: rgba(255,255,255,.05); border-left-color: #9FB8E8; }
.az-band--ink .az-terrain > p > strong { color: #9FB8E8; }

/* --- Hero centré : surtitre, titre serif monumental, un seul appel --- */
.az-hero { padding-top: clamp(1.5rem, 4vw, 4rem); text-align: center; }
.az-hero__grid { display: block !important; }

.az-hero h1 {
  font-family: var(--wp--preset--font-family--display) !important;
  font-weight: 400 !important;
  font-size: clamp(2.4rem, 1rem + 5.1vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  max-width: 23ch;
  margin: 1.2rem auto 1.4rem !important;
}
/* Le point final se change en carré bleu : la ponctuation devient
   un signe de marque, comme sur le modèle. */
.az-hero h1::after {
  content: "";
  display: inline-block;
  width: .14em;
  height: .14em;
  margin-left: .14em;
  background: var(--wp--preset--color--azameo-blue);
}

.az-eyebrow {
  color: var(--wp--preset--color--azameo-blue);
  border: 0 !important;
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: none;
  font-size: .8125rem;
  text-transform: uppercase;
}

.az-hero .az-lede {
  margin: 0 auto 1.8rem !important;
  max-width: 58ch;
  font-size: 1.0625rem;
  color: var(--wp--preset--color--ink-soft);
}
.az-hero__cta {
  display: flex;
  justify-content: center;
  margin: 0 0 .8rem !important;
}
/* Le lien est un élément de flex : sans cette contrainte il s'étire
   sur toute la ligne au lieu de se dimensionner sur son texte. */
.az-hero__cta .wp-block-button__link {
  flex: 0 0 auto;
  width: auto !important;
}
.az-hero .az-cta-note { margin: 0 auto !important; max-width: none; }

/* ---------- Cartes, encadrés, formulaires : tout s'arrondit ---------- */
.az-terrain,
.az-bonnepratique {
  border-radius: var(--az-r-md);
  border-left-width: 4px;
  box-shadow: var(--az-ombre-1);
}
.az-form {
  border-radius: var(--az-r-lg);
  box-shadow: var(--az-ombre-2);
  border: 1px solid var(--wp--preset--color--line);
  background: #fff;
}
.az-form input,
.az-form select,
.az-form textarea {
  border-radius: var(--az-r-sm) !important;
  border: 1px solid var(--wp--preset--color--line);
  background: #FBFCFF;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.az-form input:focus,
.az-form select:focus,
.az-form textarea:focus {
  border-color: var(--wp--preset--color--azameo-blue);
  box-shadow: 0 0 0 3px rgba(58, 99, 216, .16);
  outline: none;
}
.az-form button[type=submit] {
  border-radius: var(--az-r-xs) !important;
  background: var(--wp--preset--color--azameo-blue);
  color: #fff;
  border: 1px solid var(--wp--preset--color--azameo-blue);
  box-shadow: var(--az-ombre-bleue);
  text-transform: uppercase;
  font-size: .8125rem;
}
.az-form button[type=submit]:hover { background: #2F55C6; border-color: #2F55C6; }
.wp-block-image img,
.az-figure img { border-radius: var(--az-r-md); }
.az-figure img { filter: none; }

/* Les lignes d'offre deviennent des cartes blanches posées sur la brume. */
.az-lignes { border-top: 0; display: grid; gap: 1rem; }
.az-ligne {
  background: #fff;
  border: 1px solid var(--wp--preset--color--line);
  border-bottom: 1px solid var(--wp--preset--color--line);
  border-radius: var(--az-r-md);
  box-shadow: var(--az-ombre-1);
  padding: 1.5rem 1.6rem;
}

/* La bande de caractéristiques devient une rangée de tuiles. */
.az-specs {
  border: 0 !important;
  gap: 1rem;
  background: transparent;
}
.az-specs > div {
  background: #fff;
  border: 1px solid var(--wp--preset--color--line) !important;
  border-radius: var(--az-r-md);
  box-shadow: var(--az-ombre-1);
  padding: 1.1rem 1.2rem !important;
  text-align: left;
}
.az-specs b { font-family: var(--az-grotesk); letter-spacing: -.02em; }

/* Le sommaire et la FAQ se posent aussi sur des cartes. */
.az-toc li { border: 0 !important; }
.az-toc a {
  background: #fff;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--az-r-sm);
  padding: .85rem 1.1rem;
  margin-bottom: .5rem;
  box-shadow: var(--az-ombre-1);
  transition: transform .16s ease, box-shadow .16s ease;
}
.az-toc a:hover { transform: translateY(-1px); box-shadow: var(--az-ombre-2); }
.az-faq > div {
  background: #fff;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--az-r-md);
  box-shadow: var(--az-ombre-1);
  padding: 1.2rem 1.4rem;
  margin-bottom: .7rem;
}
.az-faq > div:first-child { border-top: 1px solid var(--wp--preset--color--line); }
.entry-content table { border-radius: var(--az-r-md); overflow: hidden; background: #fff; }
.wp-block-table { box-shadow: var(--az-ombre-1); border-radius: var(--az-r-md); }

/* Bande de caractéristiques, comme l'en-tête chiffré d'une fiche technique */
.az-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 0;
  border-top: 2px solid var(--wp--preset--color--ink);
  border-bottom: 1px solid var(--wp--preset--color--line);
  margin: 2.5rem 0 0;
}
.az-specs > div {
  padding: 1.1rem 1.4rem 1.1rem 0;
  border-right: 1px solid var(--wp--preset--color--line);
}
.az-specs > div:last-child { border-right: 0; }
@media (max-width: 720px) {
  .az-specs > div { border-right: 0; border-bottom: 1px solid var(--wp--preset--color--line); padding-right: 0; }
  .az-specs > div:last-child { border-bottom: 0; }
}
.az-specs b {
  display: block;
  font-family: var(--wp--preset--font-family--grotesk);
  font-weight: 700;
  font-size: 1.85rem;
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: .35rem;
}
.az-specs span {
  display: block;
  font-size: .8125rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-soft);
  max-width: 22ch;
}
/* « Offert » et les valeurs mises en avant sont des bonnes nouvelles :
   vert. L'orange signal reste réservé au gaspillage. */
.az-specs .az-specs__signal { color: var(--wp--preset--color--positive); }

/* --- Le moment fort : la thèse, composée grand --- */
.az-these {
  font-family: var(--wp--preset--font-family--display) !important;
  font-size: clamp(1.35rem, 1rem + 1.5vw, 1.9rem) !important;
  font-weight: 400 !important;
  line-height: 1.28 !important;
  letter-spacing: -.01em;
  color: var(--wp--preset--color--ink-soft);
  border-left: 0 !important;
  padding: 0 !important;
  margin: 0 auto 2rem !important;
  text-align: center;
  max-width: 36ch !important;
}

/* --- Titres de section : le numéro passe en bleu et gagne du corps --- */
.az-section > h2 {
  padding-top: 2.1rem;
  font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.3rem);
}
.az-section > h2::before {
  top: 2.35rem;
  font-size: 1rem;
  color: var(--wp--preset--color--azameo-blue);
}
.az-section { margin-top: var(--wp--preset--spacing--50); }
.az-band .az-section { margin-top: 0; }

/* ------------------------------------------------------------------
   Trois formats de liste au lieu d'un seul. Toutes les sections
   employaient la même rangée pleine largeur, ce qui donnait une page
   monotone : titre, paragraphe, trois cartes, et ainsi de suite.
   ------------------------------------------------------------------ */

/* Étapes : colonnes numérotées, pour un déroulé dans le temps. */
.az-lignes--etapes {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  counter-reset: etape;
}
.az-lignes--etapes .az-ligne {
  grid-template-columns: 1fr;
  gap: .55rem;
  counter-increment: etape;
  padding-top: 3.1rem;
}
.az-lignes--etapes .az-ligne::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  top: 1.3rem;
  left: 1.6rem;
  font-family: var(--az-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--wp--preset--color--azameo-blue);
}
.az-lignes--etapes .az-ligne { position: relative; }
.az-lignes--etapes .az-ligne__val p { max-width: none; font-size: .9375rem; }

/* Duo : deux fiches côte à côte, pour les cas clients. */
.az-lignes--duo { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.az-lignes--duo .az-ligne { grid-template-columns: 1fr; gap: .7rem; }
.az-lignes--duo .az-ligne__cle { font-size: 1.25rem; }
.az-lignes--duo .az-ligne__val p { max-width: none; }

/* La première ligne d'offre était mise en avant par un débord de
   1,4 rem de chaque côté. Depuis que toutes les lignes sont des cartes
   bordées, ce débord la faisait dépasser ses voisines de 45 px.
   L'accent passe par la couleur, plus par la largeur. */
.az-lignes .az-ligne:first-child { border-color: rgba(58, 99, 216, .35); }
.az-band--ink .az-lignes .az-ligne:first-child { background: rgba(255,255,255,.06); }
.az-ligne__prix { font-size: 1.7rem; letter-spacing: -.02em; }

/* --- En-tête : plus de présence, et collant --- */
.az-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: rgba(13, 24, 60, .07) !important;
}
.az-marque { font-size: 1.6rem; }
.az-nav a { font-weight: 500; }

/* --- Pied de page sur fond encre --- */
/* Le pied de page sur fond encre jurait avec la palette claire de la
   refonte : une dalle noire sous un site en brume bleutée. Il reprend
   la teinte la plus profonde du dégradé, et les contrastes sont
   recalculés pour rester lisibles sur ce fond clair. */
.az-footer {
  background: linear-gradient(180deg, #EEF3FE 0%, #E3EBFC 100%);
  border-top: 1px solid var(--wp--preset--color--line) !important;
  color: var(--wp--preset--color--ink-soft);
  margin-top: 0;
}
/* Le grand vide avant le pied de page venait de trois espaces cumulés :
   la marge du pied, le rembourrage bas du gabarit et celui du dernier
   bandeau. Un bandeau qui termine la page colle désormais au pied. */
main .entry-content > .alignfull:last-child {
  margin-bottom: calc(-1 * var(--wp--preset--spacing--60)) !important;
}
main .entry-content > :not(.alignfull):last-child {
  margin-bottom: 0 !important;
}
/* Contrastes vérifiés sur le fond #E3EBFC, le plus sombre du dégradé :
   encre 15,8:1, encre atténuée 5,6:1, bleu 4,9:1. Tous au niveau AA. */
.az-footer .az-footer-titre { color: var(--wp--preset--color--ink); }
.az-footer-cols a { color: var(--wp--preset--color--ink); text-decoration: none; }
/* Le bleu de marque tombe à 4,44:1 sur ce fond, juste sous le seuil.
   Un cran plus sombre le remonte à 5,09:1. */
.az-footer-cols a:hover { color: #3159CE; text-decoration: underline; }
.az-footer-note { color: var(--wp--preset--color--ink-soft); }
.az-footer-note a { color: #3159CE; }
.az-footer-bas { border-top-color: rgba(13, 24, 60, .12); color: var(--wp--preset--color--ink-soft); }
.az-footer-bas a { color: var(--wp--preset--color--ink-soft); }
.az-footer-bas a { color: #A9B4BF; }

/* --- Sommaire : plus lisible --- */
.az-toc a { padding: .85rem 0; font-family: var(--wp--preset--font-family--grotesk); font-weight: 600; }
.az-toc a::before { color: var(--wp--preset--color--azameo-blue); }

/* --- FAQ : la question gagne du corps --- */
.az-faq dt { font-size: 1.1875rem; }
.az-faq > div { padding: 1.6rem 0; }

/* --- Formulaire : encadré, comme un bordereau --- */
.az-form {
  background: #fff;
  border: 1px solid var(--wp--preset--color--line);
  border-top: 3px solid var(--wp--preset--color--azameo-blue);
  padding: 1.8rem;
}
@media (max-width: 640px) { .az-form { padding: 1.2rem; } }

/* --- Rythme vertical général --- */
.entry-content > .wp-block-group + .wp-block-group { margin-top: 0; }
.az-lede { font-size: 1.3rem; }

/* ==================================================================
   PLEINE LARGEUR ET ADAPTATION MOBILE
   Les bandeaux passent par l'alignement pleine largeur natif de
   WordPress. L'astuce en -50vw provoquait un défilement horizontal
   sur mobile dès qu'une barre de défilement était présente.
   ================================================================== */

.az-band::before { content: none !important; }
.az-band { padding-inline: 0; }
.az-band.alignfull { padding-block: var(--wp--preset--spacing--50); }
.az-band--ink { background: var(--wp--preset--color--ink); }
.az-band--white {
  background: #fff;
  border-top: 1px solid var(--wp--preset--color--line);
  border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Rien ne dépasse jamais horizontalement. */
html { overflow-x: hidden; }
img, svg, video, table, pre { max-width: 100%; }

/* --- Mesure de lecture, maintenant que le conteneur est large --- */
.entry-content h1 { max-width: 19ch; }
.entry-content h2 { max-width: 30ch; }
.entry-content h3 { max-width: 38ch; }
.az-lede { max-width: 58ch !important; }

/* --- Hero en deux colonnes sur ordinateur --- */
@media (min-width: 1024px) {
  .az-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
    gap: 1rem 4rem;
    align-items: start;
  }
  .az-hero__grid > .az-hero__col--droite { padding-top: .6rem; }
  .az-these { margin-block: 0 1.6rem !important; max-width: none !important; }
}
.az-hero__col--droite > *:first-child { margin-top: 0; }

/* --- Lignes de données : colonne de clé plus large sur grand écran --- */
@media (min-width: 1100px) {
  .az-ligne { grid-template-columns: 18rem 1fr; gap: 0 4rem; }
  .az-ligne__val p { max-width: 70ch; }
}

/* --- Bande de caractéristiques --- */
.az-specs b { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.15rem); }

/* --- Tableaux : défilement interne plutôt que débordement de page --- */
.az-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.az-scroll table { min-width: 34rem; }

/* --- Affinages mobile --- */
@media (max-width: 782px) {
  .az-band.alignfull { padding-block: var(--wp--preset--spacing--40); }
  .az-section { margin-top: var(--wp--preset--spacing--40); }
  .az-section > h2 { padding-top: 1.5rem; }
  .az-section > h2::before { font-size: .8125rem; }
  .az-these { padding-left: 1.1rem !important; border-left-width: 3px !important; }
  .az-hero h1 { max-width: none; }
  .entry-content h2, .entry-content h3 { max-width: none; }
  .az-footer-bas { flex-direction: column; gap: .4rem; }
  .az-form { padding: 1.1rem; }
  .az-form input, .az-form select, .az-form textarea { max-width: 100%; }
}

@media (max-width: 560px) {
  .az-marque { font-size: 1.35rem; }
  .az-ligne { padding: 1.2rem 1.1rem; }
  .az-specs > div { padding-block: .9rem; }
  .wp-block-button__link { width: 100%; text-align: center; }
}

/* L'en-tête collant ne doit pas manger l'écran sur petit mobile. */
@media (max-height: 520px) { .az-header { position: static; } }

/* Les ancres ne doivent pas passer sous l'en-tête collant. */
:target { scroll-margin-top: 6rem; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Le CTA du hero est un lien stylé en bouton, hors bloc bouton. */
.az-hero__cta { margin: 0 0 .5rem; max-width: none !important; }
.az-hero__cta .wp-block-button__link {
  display: inline-block;
  background-color: var(--wp--preset--color--azameo-blue);
  color: #fff;
  border: 1px solid var(--wp--preset--color--azameo-blue);
  border-radius: var(--az-r-xs);
  box-shadow: var(--az-ombre-bleue);
  text-decoration: none;
}
.az-hero__cta .wp-block-button__link:hover { background-color: #2F55C6; border-color: #2F55C6; }

/* La flèche de conclusion remplace le numéro de section. */
.az-band--ink .az-section > h2[data-num="→"]::before { font-size: 1.25rem; }