/* =====================================================================
   Aquazen — « Apesanteur », feuille cantonnee a .az-page
   Generee par workspace/scripts/aquazen/cantonner_css.py
   Ne pas editer a la main : rejouer le script depuis la source du rendu.
   ===================================================================== */

/* =====================================================================
   Aquazen — feuille de style du design system
   Concept B « Apesanteur ». Version 1.0.0, 06/08/2026.

   Deux couches, strictement séparées :
     - les RAMPES portent les valeurs. Aucun composant ne les consomme.
     - la SÉMANTIQUE est la seule couche que les composants utilisent.
   Chaque surface porte son token de texte associé : la lisibilité est
   garantie par construction, jamais par vigilance.

   Le bloc :root est le seul endroit où une valeur hexadécimale figure.
   ===================================================================== */
:root {
  /* --- RAMPES — ne jamais consommer directement -------------------- */
  --rampe-serenite-04: #1E6F90;   /* pivot, accent de marque */
  --rampe-serenite-05: #185C78;   /* survol */
  --rampe-serenite-06: #134A61;   /* actif */

  --rampe-aqua-04: #6FC2D0;       /* pivot, décor et grands aplats */

  --rampe-ardoise-02: #8A9AA1;    /* désactivé seul */
  --rampe-ardoise-03: #5A6E76;    /* légende, bordure de contrôle */
  --rampe-ardoise-05: #2C4A56;    /* corps */
  --rampe-ardoise-06: #16323F;    /* titre tertiaire */
  --rampe-ardoise-07: #13303C;    /* pivot, titres */

  --rampe-brume-01: #FBFDFE;      /* surface de carte */
  --rampe-brume-02: #F7FBFC;      /* fond de page */
  --rampe-brume-03: #EDF4F6;      /* section alternée */
  --rampe-brume-04: #DCE7EB;      /* filet décoratif */
  --rampe-brume-05: #C8D6DB;      /* fond désactivé */

  /* --- SÉMANTIQUE — surfaces et leur texte associé ------------------ */
  --surface-page: var(--rampe-brume-02);
  --surface-page-texte: var(--rampe-ardoise-05);        /* 9,08:1 AAA */
  --surface-section: var(--rampe-brume-03);
  --surface-section-texte: var(--rampe-ardoise-05);     /* 8,50:1 AAA */
  --surface-carte: var(--rampe-brume-01);
  --surface-carte-texte: var(--rampe-ardoise-05);       /* 9,27:1 AAA */
  --surface-accent: var(--rampe-serenite-04);
  --surface-accent-texte: var(--rampe-brume-01);        /* 5,52:1 AA */
  --surface-decor: var(--rampe-aqua-04);
  --surface-decor-texte: var(--rampe-ardoise-07);       /* 6,80:1 AA */
  --surface-desactive: var(--rampe-brume-05);
  --surface-desactive-texte: var(--rampe-ardoise-02);   /* exempté WCAG */

  /* --- SÉMANTIQUE — texte ------------------------------------------ */
  --texte-titre: var(--rampe-ardoise-07);               /* 13,30:1 AAA */
  --texte-titre-tertiaire: var(--rampe-ardoise-06);
  --texte-corps: var(--rampe-ardoise-05);
  --texte-legende: var(--rampe-ardoise-03);             /* 5,13:1 AA */
  --texte-lien: var(--rampe-serenite-04);               /* 5,40:1 AA */
  --texte-lien-survol: var(--rampe-serenite-05);        /* 7,10:1 AAA */

  /* --- SÉMANTIQUE — bordures --------------------------------------- */
  --bordure-controle: var(--rampe-ardoise-03);          /* 5,13:1, critère 1.4.11 */
  --bordure-filet: var(--rampe-brume-04);               /* décoratif seul */
  --bordure-focus: var(--rampe-serenite-06);            /* 9,25:1 */

  /* --- FLOTTAISON — les jetons propres au Concept B ----------------- */
  --flottaison-milieu-densite: rgba(111, 194, 208, 0.16);
  --flottaison-milieu-profondeur: rgba(19, 48, 60, 0.06);
  --flottaison-elevation-halo: rgba(111, 194, 208, 0.28);
  --flottaison-elevation-course: 6px;
  --flottaison-elevation-duree: 1600ms;
  --flottaison-elevation-courbe: cubic-bezier(0.42, 0, 0.58, 1);  /* A9 — symétrique aux deux bouts */
  --flottaison-portee-decalage: -2px;

  /* --- Typographie -------------------------------------------------- */
  --typo-titre: Fraunces, Georgia, serif;
  --typo-corps: Inter, system-ui, sans-serif;

  --taille-h1: 56px;  --taille-h2: 48px;  --taille-h3: 36px;
  --taille-h4: 32px;  --taille-h5: 24px;  --taille-h6: 20px;
  --taille-corps-large: 20px;   --taille-corps-moyen: 18px;
  --taille-corps: 16px;         --taille-corps-petit: 14px;
  --taille-menu: 12px;          --taille-prix: 18px;

  --interligne-titre: 1.2;      /* jamais en dessous : les capitales accentuées se heurtent */
  --interligne-titre-moyen: 1.25;
  --interligne-titre-petit: 1.3;
  --interligne-corps: 1.6;

  /* --- Espace, forme, mouvement ------------------------------------- */
  --espace-1: 4px;   --espace-2: 8px;   --espace-3: 12px;  --espace-4: 16px;
  --espace-5: 24px;  --espace-6: 32px;  --espace-7: 48px;  --espace-8: 64px;
  --espace-9: 96px;  --espace-10: 128px;

  --rayon-parcours: 8px;
  --rayon-decision: 12px;
  --rayon-controle: 8px;
  --rayon-pastille: 999px;

  --elevation-unique: 0 4px 16px rgba(19, 48, 60, 0.08);

  --duree: 240ms;
  --courbe: cubic-bezier(0.25, 0.1, 0.25, 1);

  --grille-conteneur: 1280px;
  --grille-colonne-texte: 680px;
  --grille-gouttiere: 24px;
  --grille-marge: 48px;

  /* --- Alias de l'ancien système — réversibilité -------------------- */
  --bleu-serenite: var(--rampe-serenite-04);
  --aqua-clair: var(--rampe-aqua-04);
  --bleu-nuit-profond: var(--rampe-ardoise-07);
  --ardoise-bleue: var(--rampe-ardoise-05);
  --gris-brume: var(--rampe-ardoise-03);
  --brume-douce: var(--rampe-ardoise-02);
  --bleu-brume: var(--rampe-brume-03);
  --blanc-brume: var(--rampe-brume-02);
  --blanc-pur-doux: var(--rampe-brume-01);
}
@media (max-width: 768px) {
:root {
    /* Loi L9 — le mobile réduit les titres, jamais le corps. */
    --taille-h1: 40px;  --taille-h2: 32px;  --taille-h3: 28px;
    --taille-h4: 24px;  --taille-h5: 20px;  --taille-h6: 18px;
    --grille-marge: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
:root { --duree: 1ms; --flottaison-elevation-duree: 1ms; }
}
/* =====================================================================
   Socle
   ===================================================================== */
.az-page {
  background: var(--surface-page);
  color: var(--surface-page-texte);
  font-family: var(--typo-corps);
  font-size: var(--taille-corps);
  line-height: var(--interligne-corps);
}
.az-page h1, .az-page h2, .az-page h3, .az-page h4 {
  font-family: var(--typo-titre);
  font-weight: 500;
  color: var(--texte-titre);
  line-height: var(--interligne-titre);
}
.az-page h3 { color: var(--texte-titre-tertiaire); line-height: var(--interligne-titre-moyen); }
.az-page h4 { line-height: var(--interligne-titre-petit); }
.az-page h5, .az-page h6 { font-family: var(--typo-corps); font-weight: 500; color: var(--texte-corps); }
.az-page h1 { font-size: var(--taille-h1); }
.az-page h2 { font-size: var(--taille-h2); }
.az-page h3 { font-size: var(--taille-h3); }
.az-page h4 { font-size: var(--taille-h4); }
.az-page h5 { font-size: var(--taille-h5); }
.az-page h6 { font-size: var(--taille-h6); }
.az-page a { color: var(--texte-lien); text-decoration: none; transition: color var(--duree) var(--courbe); }
.az-page a:hover { color: var(--texte-lien-survol); text-decoration: underline; }
.az-page :focus-visible {
  outline: 3px solid var(--bordure-focus);
  outline-offset: 3px;
}
.az-page .az-legende { color: var(--texte-legende); font-size: var(--taille-corps-petit); }
/* La colonne de texte reste étroite même dans un conteneur large — loi L8. */
.az-page .az-conteneur { max-width: var(--grille-conteneur); margin-inline: auto; padding-inline: var(--grille-marge); }
.az-page .az-colonne-texte { max-width: var(--grille-colonne-texte); }
/* Le rythme entre sections est d'un ordre de grandeur au-dessus du rythme
   interne — loi L12. C'est ce silence qui sépare l'éditorial du catalogue. */
.az-page .az-section { padding-block: var(--espace-10); }
.az-page .az-section--alternee { background: var(--surface-section); color: var(--surface-section-texte); }
@media (max-width: 768px) {
.az-page .az-section { padding-block: var(--espace-8); }
}
/* =====================================================================
   Le milieu — mécanisme « flottaison »
   Une scène Aquazen montre ce qui porte autant que ce qui est porté.
   Un milieu sans épaisseur ne porte rien : l'objet est simplement posé
   sur un fond coloré, et l'apesanteur devient un mot au lieu d'un effet.
   ===================================================================== */

/* A8 — quatre nappes radiales superposées, et AUCUN dégradé linéaire
   vertical. Un dégradé vertical clair-en-haut / sombre-en-bas se lit comme
   un HORIZON, et l'horizon liquide appartient au Concept A archivé. Les
   nappes donnent l'épaisseur sans jamais poser de ligne. */
.az-page .az-milieu {
  position: relative;
  background:
    radial-gradient(90% 70% at 30% 0%, var(--flottaison-elevation-halo) 0%, transparent 60%),
    radial-gradient(160% 110% at 50% 24%, var(--flottaison-milieu-densite) 0%, transparent 70%),
    radial-gradient(120% 90% at 68% 62%, var(--flottaison-milieu-densite) 0%, transparent 78%),
    radial-gradient(140% 100% at 50% 100%, var(--flottaison-milieu-profondeur) 0%, transparent 66%),
    var(--surface-section);
  color: var(--surface-section-texte);
  overflow: hidden;
}
/* Ce qui est porté ne repose sur rien : il se décale vers le haut et
   revient, sur une durée assez longue pour qu'on ne la remarque pas.
   A9 — le sens reste 0 vers le haut : les deux bornes de l'oscillation
   sont les mêmes dans un sens comme dans l'autre, et « élévation » est le
   mot du canon. Seule la courbe change, et elle a désormais son jeton. */
.az-page .az-porte { animation: az-flotter var(--flottaison-elevation-duree) var(--flottaison-elevation-courbe) infinite alternate; }
@keyframes az-flotter {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(var(--flottaison-elevation-course) * -1)); }
}
/* Le halo d'appui — ratifié le 07/08/2026. Il se pose SOUS ce qui est
   porté et rend le support lisible : sans lui, l'objet ne flotte pas, il
   lévite, et le principe 6 est perdu. C'est le troisième terme de la
   flottaison — ce qui est porté, ce qui porte, l'élévation.
   ⚠ La largeur est fixe : à caler sur l'objet porté quand il est plus
   large que 120 px. */
.az-page .az-appui {
  width: 120px; height: 20px;
  margin: var(--espace-1) auto 0;
  background: radial-gradient(50% 100% at 50% 0%, var(--flottaison-elevation-halo) 0%, transparent 75%);
  border-radius: var(--rayon-pastille);
}
@media (prefers-reduced-motion: reduce) {
.az-page .az-porte { animation: none; }
}
/* =====================================================================
   Composants
   ===================================================================== */

/* --- Bouton ------------------------------------------------------- */
.az-page .az-bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: var(--espace-3) var(--espace-6);
  background: var(--surface-accent);
  color: var(--surface-accent-texte);
  font-family: var(--typo-corps); font-size: var(--taille-corps); font-weight: 500;
  border: none; border-radius: var(--rayon-controle); cursor: pointer;
  transition: background var(--duree) var(--courbe), transform var(--duree) var(--courbe);
}
/* Au survol le fond fonce ET le libellé reste clair : la combinaison
   inverse tombait à 2,64:1, illisible au moment précis du clic. */
.az-page .az-bouton:hover { background: var(--rampe-serenite-05); transform: translateY(var(--flottaison-portee-decalage)); }
.az-page .az-bouton:active { background: var(--rampe-serenite-06); transform: translateY(0); }
.az-page .az-bouton[disabled] {
  background: var(--surface-desactive); color: var(--surface-desactive-texte);
  cursor: not-allowed; transform: none;
}
.az-page .az-bouton--fantome {
  background: transparent; color: var(--texte-lien);
  border: 1.5px solid var(--bordure-controle);
}
.az-page .az-bouton--fantome:hover { background: var(--surface-section); }
/* --- Champ -------------------------------------------------------- */
.az-page .az-champ {
  min-height: 48px; padding: var(--espace-3) var(--espace-4);
  background: var(--surface-carte); color: var(--surface-carte-texte);
  font-family: var(--typo-corps); font-size: var(--taille-corps);
  border: 1px solid var(--bordure-controle);   /* 5,13:1 — critère 1.4.11 */
  border-radius: var(--rayon-controle);
}
.az-page .az-champ::placeholder { color: var(--texte-legende); }
.az-page .az-champ[aria-invalid="true"] { border-width: 2px; }
/* --- Carte de curation -------------------------------------------- */
.az-page .az-carte {
  background: var(--surface-carte); color: var(--surface-carte-texte);
  border-radius: var(--rayon-parcours); padding: var(--espace-5);
  transition: transform var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}
.az-page .az-carte:hover { transform: translateY(var(--flottaison-portee-decalage)); box-shadow: var(--elevation-unique); }
/* La graisse est explicite : Fraunces est fixée à 500 par le canon, et cette
   règle ne dérive d'aucun sélecteur de titre. Sans elle, le composant hérite de
   400 — invisible tant que Fraunces est chargée, puisque l'instance appelée est
   figée à 500, mais nettement plus maigre dès que le repli Georgia prend la
   main. Défaut relevé à l'audit du 07/08/2026. */
.az-page .az-carte__titre { font-family: var(--typo-titre); font-size: var(--taille-h5); font-weight: 500; color: var(--texte-titre); }
/* Loi L4 — le prix ne se distingue ni par la taille ni par la graisse.
   Deux points au-dessus du corps, même graisse. En Park, la place existe
   et reste vide : aucun montant ne s'affiche avant l'ouverture du catalogue. */
.az-page .az-carte__prix { font-size: var(--taille-prix); font-weight: 400; color: var(--texte-corps); }
.az-page .az-carte__raison { color: var(--texte-legende); font-size: var(--taille-corps-petit); }
/* La place du prix quand le catalogue est fermé — ratifiée le 07/08/2026.
   Le canon disait « l'emplacement reste vide » sans dire à quoi cela
   ressemble. Un cadre tireté, à la hauteur d'une cible tactile, et RIEN
   dedans : ni « à partir de », ni « bientôt », ni tiret. Le filet est
   décoratif et ne porte aucune information — la légende qui l'accompagne
   s'en charge, comme l'exige la règle de non-dépendance à la couleur. */
.az-page .az-prix-vide {
  min-height: 48px;
  border: 1px dashed var(--bordure-filet);
  border-radius: var(--rayon-parcours);
}
/* --- Badge de curation -------------------------------------------- */
.az-page .az-badge {
  display: inline-flex; align-items: center; gap: var(--espace-2);
  padding: var(--espace-1) var(--espace-3);
  background: var(--surface-decor); color: var(--surface-decor-texte);  /* 6,80:1 */
  border-radius: var(--rayon-pastille);
  font-size: var(--taille-corps-petit); font-weight: 500;
}
/* --- Filet et séparateur ------------------------------------------ */
.az-page .az-filet { border: none; border-top: 1px solid var(--bordure-filet); }
/* --- Rituel — les trois moments ----------------------------------- */
.az-page .az-rituel { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grille-gouttiere); }
.az-page .az-rituel__moment { text-align: center; padding: var(--espace-6) var(--espace-4); }
.az-page .az-rituel__icone { width: 48px; height: 48px; margin-inline: auto; color: var(--texte-lien); }
/* L'information n'est jamais portée par la seule couleur : chaque moment
   porte son libellé. */
.az-page .az-rituel__libelle { font-family: var(--typo-titre); font-size: var(--taille-h5); font-weight: 500; color: var(--texte-titre); }
@media (max-width: 768px) {
.az-page .az-rituel { grid-template-columns: 1fr; }
}
/* --- Glossaire au point de décision -------------------------------- */
/* Le terme s'explique dans le flux, jamais au survol : le survol n'existe
   pas sur mobile, et la pédagogie doit rester atteignable. */
.az-page .az-glossaire { border-left: 2px solid var(--bordure-controle); padding-left: var(--espace-4); }
.az-page .az-glossaire__terme { font-weight: 500; color: var(--texte-titre); }
.az-page .az-glossaire__definition { color: var(--texte-corps); font-size: var(--taille-corps-petit); }
/* --- Mention non contractuelle — page éducative -------------------- */
/* Obligatoire tant que le catalogue est fermé. Elle ne se masque pas,
   ne se réduit pas sous la taille du corps, et ne dépend pas d'un survol. */
.az-page .az-mention-preparation {
  background: var(--surface-section); color: var(--surface-section-texte);
  border-radius: var(--rayon-parcours); padding: var(--espace-4);
  font-size: var(--taille-corps);
}
/* =====================================================================
   Aquazen — composants de site du canvas (21/08/2026).
   Construit EXCLUSIVEMENT sur les jetons de tokens.css (copie verbatim de
   design_system/04_styles.css v1.1.0). Aucune valeur hexadécimale ici.

   Reprend la couche du rendu validé le 07/08 (_portage/apesanteur.css,
   « couche du livrable ») et les compléments de la passe éditoriale du
   20/08 (complements.css, arbitrage A10) ; ajoute l'en-tête de site, le
   pied, les grilles de hub, la fiche, la FAQ, le formulaire et le journal.
   Mobile 360 px d'abord ; 768 et 1024 sont des déclinaisons.
   ===================================================================== */
.az-page * { box-sizing: border-box; }
.az-page { -webkit-text-size-adjust: 100%; }
.az-page { margin: 0; min-width: 0; }
.az-page h1, .az-page h2, .az-page h3, .az-page h4, .az-page h5, .az-page h6, .az-page p, .az-page ul, .az-page ol, .az-page figure { margin: 0; }
.az-page h1, .az-page h2, .az-page h3 { text-wrap: pretty; }
.az-page h5, .az-page h6 { line-height: 1.4; }
.az-page p + p { margin-top: var(--espace-4); }
.az-page img { max-width: 100%; height: auto; display: block; }
/* l'attribut height ne gagne jamais */
.az-page ul, .az-page ol { padding-left: 1.2em; }
.az-page button { font: inherit; }
.az-page /* --- A15 — le libellé du bouton reste clair au survol, .az-page MÊME quand le bouton est un lien.
   tokens.css pose `a:hover { color: lien-survol }
.az-page ` (0, .az-page 1, .az-page 1) qui bat `.az-bouton` (0, .az-page 1, .az-page 0) :
   `.az-bouton:hover` ne redéclarant pas la couleur, .az-page le libellé prenait la couleur du fond
   (mesuré au navigateur le 21/08/2026 : texte et fond rgb(24, .az-page 92, .az-page 120)). L'arbitrage A2 exige le
   libellé clair : on le redéclare sur l'état survolé et actif. ------------------------------- */
a.az-bouton:hover, .az-page a.az-bouton:focus-visible, .az-page a.az-bouton:active, .az-page .az-bouton:hover { color: var(--surface-accent-texte); text-decoration: none; }
.az-page a.az-bouton--fantome:hover, .az-page a.az-bouton--fantome:active, .az-page .az-bouton--fantome:hover { color: var(--texte-lien-survol); }
/* --- Cibles et liens de contenu ----------------------------------------- */
.az-page .az-cible { display: inline-flex; align-items: center; min-height: 48px; }
.az-page .az-lien-objet {
  display: inline-flex; align-items: center; min-height: 48px; padding: var(--espace-3) 0;
  color: var(--texte-lien); font-family: var(--typo-corps); font-weight: 500;
  border-bottom: 1px solid var(--bordure-filet);
  transition: color var(--duree) var(--courbe), border-color var(--duree) var(--courbe);
}
.az-page .az-lien-objet:hover, .az-page .az-lien-objet:focus-visible { color: var(--texte-lien-survol); border-bottom-color: var(--texte-lien-survol); text-decoration: none; }
.az-page .az-lien-suite { display: inline-flex; align-items: center; min-height: 48px; font-weight: 500; }
/* Un lien posé dans une phrase garde sa ligne, mais sa zone de toucher monte à 48 px : le
   rembourrage vertical est compensé par une marge négative égale, la mise en page ne bouge pas.
   (DS §6 : 48 × 48 px pour tout élément interactif — mesuré à 20 px au tour 1.) */
.az-page .az-colonne-texte p a:not(.az-lien-suite):not(.az-lien-objet):not(.az-cible):not(.az-bouton), .az-page .az-faq__reponse a, .az-page .az-region p a {
  display: inline-block; padding-block: 12px; margin-block: -12px; line-height: var(--interligne-corps);
}
/* --- En-tête ------------------------------------------------------------- */
.az-page .az-entete { background: var(--surface-page); border-bottom: 1px solid var(--bordure-filet); }
.az-page .az-entete__barre { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-4); min-height: 72px; }
.az-page .az-lockup { display: inline-flex; align-items: center; min-height: 48px; }
.az-page .az-lockup svg { height: 40px; width: auto; display: block; }
.az-page .az-lockup__mot { font-family: var(--typo-titre); font-weight: 500; font-size: 38px; fill: var(--texte-titre); }
.az-page .az-nav--bureau { display: none; }
.az-page .az-nav-lien {
  display: inline-flex; align-items: center; min-height: 48px; padding-inline: var(--espace-3);
  color: var(--texte-titre); font-weight: 500;
}
.az-page .az-nav-lien:hover, .az-page .az-nav-lien:focus-visible { color: var(--texte-lien-survol); }
.az-page .az-nav-lien[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--surface-accent); }
.az-page .az-entete__droite { display: flex; align-items: center; gap: var(--espace-2); }
.az-page .az-menu { position: relative; }
.az-page .az-menu summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 48px;
  padding-inline: var(--espace-3); font-weight: 500; color: var(--texte-titre);
  border: 1.5px solid var(--bordure-controle); border-radius: var(--rayon-controle);
}
.az-page .az-menu summary::-webkit-details-marker { display: none; }
.az-page .az-menu__liste {
  position: absolute; right: 0; top: calc(100% + var(--espace-2)); z-index: 10; min-width: 220px;
  display: flex; flex-direction: column; padding: var(--espace-2);
  background: var(--surface-carte); border: 1px solid var(--bordure-filet);
  border-radius: var(--rayon-parcours); box-shadow: var(--elevation-unique);
}
.az-page .az-menu__liste .az-nav-lien { width: 100%; }
/* --- Corps, sections, colonnes ------------------------------------------- */
.az-page .az-corps { padding-bottom: var(--espace-10); }
.az-page .az-corps > * + * { margin-top: var(--espace-8); }
.az-page .az-section--alternee { padding-block: var(--espace-8); }
.az-page .az-intro { font-size: var(--taille-corps-large); margin-top: var(--espace-5); }
.az-page .az-colonne-texte > h2 + p, .az-page .az-colonne-texte > h3 + p { margin-top: var(--espace-5); }
.az-page .az-colonne-texte > p + h3, .az-page .az-colonne-texte > div + h3 { margin-top: var(--espace-6); }
.az-page .az-bloc { margin-top: var(--espace-5); }
.az-page .az-fil { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2); color: var(--texte-legende); font-size: var(--taille-corps-petit); padding-block: var(--espace-2); }
.az-page .az-fil a { display: inline-flex; align-items: center; min-height: 48px; }
/* --- Scène du milieu et flottaison --------------------------------------- */
.az-page .az-hero { padding-block: var(--espace-9); text-align: center; border-radius: var(--rayon-parcours); }
.az-page .az-hero .az-colonne-texte { margin-inline: auto; }
.az-page .az-portee { display: inline-block; border-radius: var(--rayon-parcours); }
.az-page .az-portee svg { width: 96px; height: 96px; display: block; }
/* --- Le média porté — trois couches (D1 du rendu du 07/08) ---------------- */
.az-page .az-media-cadre { margin: var(--espace-5) 0 0; }
.az-page .az-media-panneau { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 260px; padding: var(--espace-6) 0; border-radius: var(--rayon-parcours); }
.az-page .az-media-porte { width: 62%; }
/* arbitrage A11, non modifié */
.az-page .az-media-image { width: 100%; height: auto; border-radius: var(--rayon-decision); position: relative; z-index: 1; }
.az-page .az-media-appui { width: 70%; height: 16px; margin: var(--espace-1) auto 0; background: radial-gradient(50% 100% at 50% 0%, var(--flottaison-elevation-halo) 0%, transparent 75%); border-radius: var(--rayon-pastille); }
.az-page .az-media-panneau--fiche { min-height: 320px; }
.az-page .az-media__legende { color: var(--texte-legende); font-size: var(--taille-corps-petit); margin-top: var(--espace-3); max-width: var(--grille-colonne-texte); }
/* --- Rituel --------------------------------------------------------------- */
.az-page .az-rituel__moment { display: block; color: inherit; border-radius: var(--rayon-parcours); transition: transform var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe); }
.az-page a.az-rituel__moment:hover, .az-page a.az-rituel__moment:focus-visible { transform: translateY(var(--flottaison-portee-decalage)); box-shadow: var(--elevation-unique); text-decoration: none; background: var(--surface-carte); }
.az-page .az-rituel__libelle { margin: var(--espace-3) 0 0; line-height: 1.4; }
.az-page .az-rituel__sensation { margin: var(--espace-2) 0 0; color: var(--texte-corps); }
.az-page .az-rituel__icone svg { width: 48px; height: 48px; display: block; margin-inline: auto; }
/* --- Glossaire, encart de hub --------------------------------------------- */
.az-page .az-glossaire { margin-block: var(--espace-5); }
.az-page .az-glossaire__definition { margin-top: var(--espace-1); }
.az-page .az-hub-note {
  margin-block: var(--espace-5); padding: var(--espace-4) var(--espace-4) var(--espace-4) var(--espace-5);
  background: var(--surface-section); color: var(--surface-section-texte);
  border-left: 2px solid var(--bordure-controle); border-radius: var(--rayon-parcours);
}
.az-page .az-hub-note strong { color: var(--texte-titre); }
/* --- Cartes de curation ---------------------------------------------------- */
.az-page .az-cartes { display: grid; grid-template-columns: 1fr; gap: var(--grille-gouttiere); margin-top: var(--espace-6); }
.az-page .az-curation__carte { display: flex; flex-direction: column; }
.az-page .az-curation__carte .az-legende { margin-bottom: var(--espace-2); }
.az-page .az-curation__carte .az-carte__titre { font-weight: 500; }
.az-page .az-curation__carte .az-carte__badge { margin-top: var(--espace-3); }
.az-page .az-curation__carte .az-carte__raison { flex: 1 1 auto; margin-top: var(--espace-3); }
/* Loi L4 (tokens.css .az-carte__prix) : le prix ne se distingue ni par la taille ni par la graisse —
   deux points au-dessus du corps, même graisse, couleur du corps. Direction /acd tour 1, point 1 :
   .az-prix est un alias strict de .az-carte__prix ; A10 tel que proposé par le rendu est retiré. */
.az-page .az-prix { font-family: var(--typo-corps); font-size: var(--taille-prix); font-weight: 400; color: var(--texte-corps); margin-top: var(--espace-4); }
/* A17 — l'objet est PORTÉ : l'image de catalogue se pose dans un milieu, sur son halo d'appui,
   jamais à cru (direction /acd tour 1, point 2). Limite, précisée au tour 2 : l'objet porté suppose
   une image détourée ou un fond qui se confond avec le milieu ; un rendu fournisseur à sol opaque est
   porté en tant que rectangle, pas en tant qu'objet — état transitoire jusqu'aux flat-lay de la
   charte §5. `object-fit: contain` : on ne tronque plus un objet carré dans un cadre 4:3. */
.az-page .az-carte__scene { padding: var(--espace-5) 0; border-radius: var(--rayon-parcours); margin-bottom: var(--espace-4); display: flex; flex-direction: column; align-items: center; }
.az-page .az-carte__scene .az-media-porte { width: 72%; }
.az-page .az-carte__image { border-radius: var(--rayon-parcours); aspect-ratio: 4 / 3; object-fit: contain; width: 100%; position: relative; z-index: 1; }
/* --- Fiche produit --------------------------------------------------------- */
.az-page .az-fiche { display: grid; grid-template-columns: 1fr; gap: var(--espace-7); align-items: start; }
.az-page .az-fiche > * { min-width: 0; }
.az-page .az-fiche__visuel { padding: var(--espace-6) 0; border-radius: var(--rayon-parcours); display: flex; flex-direction: column; align-items: center; }
.az-page .az-fiche__visuel .az-media-porte { width: 76%; }
.az-page .az-fiche__image { border-radius: var(--rayon-decision); width: 100%; height: auto; position: relative; z-index: 1; }
.az-page .az-fiche__nom { margin-top: var(--espace-2); }
.az-page .az-fiche__action { margin-top: var(--espace-5); display: flex; flex-direction: column; gap: var(--espace-2); align-items: flex-start; }
.az-page .az-fiche__action .az-bouton { width: 100%; }
.az-page .az-fiche__raison { margin-top: var(--espace-3); }
.az-page .az-fiche__scene { margin-top: var(--espace-6); }
/* --- FAQ ------------------------------------------------------------------- */
.az-page .az-faq { margin-top: var(--espace-5); border-top: 1px solid var(--bordure-filet); }
.az-page .az-faq details { border-bottom: 1px solid var(--bordure-filet); }
.az-page .az-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--espace-4); min-height: 56px; padding-block: var(--espace-3); font-weight: 500; color: var(--texte-titre); }
.az-page .az-faq summary::-webkit-details-marker { display: none; }
.az-page .az-faq summary::after { content: "+"; color: var(--texte-lien); font-size: var(--taille-h5); flex: none; }
.az-page .az-faq details[open] summary::after { content: "−"; }
.az-page .az-faq summary:hover { color: var(--texte-lien-survol); }
.az-page .az-faq__reponse { padding: 0 0 var(--espace-4); color: var(--texte-corps); }
/* --- Formulaire ------------------------------------------------------------ */
.az-page .az-form { display: flex; flex-direction: column; gap: var(--espace-4); margin-top: var(--espace-5); }
.az-page .az-form label { display: flex; flex-direction: column; gap: var(--espace-2); font-weight: 500; color: var(--texte-titre); }
.az-page .az-form .az-champ { width: 100%; }
.az-page .az-form textarea.az-champ { min-height: 144px; resize: vertical; }
.az-page .az-form .az-legende { font-weight: 400; }
.az-page .az-case { display: flex; align-items: center; gap: var(--espace-3); min-height: 48px; cursor: pointer; }
.az-page .az-case input { width: 24px; height: 24px; accent-color: var(--surface-accent); color: var(--texte-corps); margin: 0; flex: none; }
/* La cible tactile de la case est son étiquette (.az-case, 48 px) : la case elle-même reste à 24 px. */

/* --- Journal --------------------------------------------------------------- */
.az-page .az-journal { list-style: none; padding: 0; margin-top: var(--espace-6); border-top: 1px solid var(--bordure-filet); }
.az-page .az-journal li { display: grid; grid-template-columns: 1fr; gap: var(--espace-2); padding-block: var(--espace-4); border-bottom: 1px solid var(--bordure-filet); }
.az-page .az-journal__titre { font-family: var(--typo-titre); font-size: var(--taille-h6); font-weight: 500; color: var(--texte-titre); line-height: 1.3; }
.az-page .az-journal__meta { display: flex; gap: var(--espace-3); flex-wrap: wrap; align-items: center; }
.az-page .az-statut { display: inline-flex; align-items: center; min-height: 24px; padding-inline: var(--espace-2); border: 1px solid var(--bordure-controle); border-radius: var(--rayon-pastille); color: var(--texte-legende); font-size: var(--taille-menu); }
/* --- Région ------------------------------------------------------------------ */
.az-page .az-region { background: var(--surface-section); color: var(--surface-section-texte); padding-block: var(--espace-8); }
.az-page .az-region__grille { display: grid; grid-template-columns: 1fr; gap: var(--grille-gouttiere); margin-top: var(--espace-6); }
.az-page .az-region__titre { font-weight: 500; color: var(--texte-titre); margin: 0 0 var(--espace-2); }
/* --- Pied de page ------------------------------------------------------------ */
/* Le pied est CLAIR (principe 8 : Aquazen est une marque claire, jamais un nocturne) et ne consomme
   que la couche sémantique — direction /acd tour 1, point 6. Un pied sombre serait l'amendement A16
   avec ses jetons propres, jamais une rampe consommée. */
.az-page .az-pied { background: var(--surface-section); color: var(--surface-section-texte); padding-block: var(--espace-8); margin-top: var(--espace-10); border-top: 1px solid var(--bordure-filet); }
.az-page .az-pied__marque { display: flex; align-items: center; gap: var(--espace-4); }
.az-page .az-pied__marque svg { width: 40px; height: 40px; }
.az-page .az-pied__nom { font-family: var(--typo-titre); font-weight: 500; font-size: var(--taille-h4); line-height: var(--interligne-titre-petit); color: var(--texte-titre); }
.az-page .az-pied__phrase { color: var(--texte-corps); margin: var(--espace-2) 0 0; }
.az-page .az-pied__grille { display: grid; grid-template-columns: 1fr; gap: var(--grille-gouttiere); margin-top: var(--espace-7); }
.az-page .az-pied__titre { font-family: var(--typo-titre); font-weight: 500; font-size: var(--taille-h6); line-height: 1.4; color: var(--texte-titre); margin: 0 0 var(--espace-2); }
.az-page .az-pied ul { list-style: none; margin: 0; padding: 0; }
.az-page .az-pied a { color: var(--texte-lien); display: inline-flex; align-items: center; min-height: 48px; }
.az-page .az-pied a:hover, .az-page .az-pied a:focus-visible { color: var(--texte-lien-survol); }
.az-page .az-pied__bas { margin-top: var(--espace-7); border-top: 1px solid var(--bordure-filet); padding-top: var(--espace-4); font-size: var(--taille-corps-petit); color: var(--texte-legende); }
/* Espacements en jetons — plus aucun style="margin-top" dans le HTML (direction /acd tour 1, point 8). */
.az-page .az-mt-2 { margin-top: var(--espace-2); }
.az-page .az-mt-3 { margin-top: var(--espace-3); }
.az-page .az-mt-4 { margin-top: var(--espace-4); }
.az-page .az-mt-5 { margin-top: var(--espace-5); }
.az-page .az-mt-6 { margin-top: var(--espace-6); }
.az-page .az-mt-0 { margin-top: 0; }
.az-page .az-sommaire { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espace-1); }
/* =====================================================================
   Révision du tunnel de conversion — 22/08/2026 (RESULTS.md §3-§5, A18, A19).
   Tout sur les jetons ; le seul composant neuf est la barre de progression.
   Le milieu (.az-milieu) ne se prolonge QUE sur la vignette d'objet d'une
   ligne de panier — jamais sur un champ, jamais sur le bouton de paiement (§7.1).
   ===================================================================== */

/* --- Icône au trait + réassurance (fiche §3.2, commander §5.7) ------------- */
.az-page .az-icone-trait { display: inline-flex; flex: none; }
.az-page .az-icone-trait svg { width: 24px; height: 24px; display: block; }
.az-page .az-reassurance { list-style: none; margin: var(--espace-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--espace-2); width: 100%; }
.az-page .az-reassurance li { display: flex; align-items: flex-start; gap: var(--espace-3); color: var(--texte-corps); font-size: var(--taille-corps-petit); line-height: var(--interligne-corps); }
.az-page .az-reassurance .az-icone-trait { margin-top: 1px; }
.az-page .az-region__livraison { margin-top: var(--espace-6); max-width: var(--grille-colonne-texte); color: var(--surface-section-texte); }
/* --- Fiche : galerie avec vignette A19, bouton collant A18 -------------------- */
.az-page .az-fiche__galerie { display: flex; flex-direction: column; gap: var(--espace-3); }
.az-page .az-vignette { display: inline-flex; align-items: center; gap: var(--espace-3); min-height: 48px; color: var(--texte-lien); text-decoration: none; align-self: flex-start; }
.az-page .az-vignette__image { width: 96px; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--rayon-decision); flex: none; }
.az-page .az-vignette:hover .az-legende, .az-page .az-vignette:focus-visible .az-legende { color: var(--texte-lien-survol); }
/* A18 — compact : jamais pleine largeur, calé à droite, entouré de vide ; 360 px seulement. */
.az-page .az-collant { position: fixed; right: var(--grille-marge); bottom: var(--espace-4); z-index: 20; max-width: 50%;
  display: flex; align-items: center; padding: var(--espace-1);
  background: var(--surface-carte); border: 1px solid var(--bordure-filet); border-radius: var(--rayon-parcours); box-shadow: var(--elevation-unique); }
.az-page .az-collant[hidden] { display: none; }
/* Le seul bouton, à la taille du canon (taille.corps) : le prix est déjà dans le flux, juste au-dessus —
   tour 1 : prix + bouton dépassaient la moitié de la largeur et le libellé se tronquait (« Ajouter au ») ;
   tour 2 : direction /acd — la dérogation à 14 px n'achetait rien, 16 px tient sous la moitié (test §12.6). */
.az-page .az-collant__bouton { min-height: 48px; padding-inline: var(--espace-4); white-space: nowrap; }
/* --- Panier (§4.3) ------------------------------------------------------------ */
.az-page .az-panier { display: grid; grid-template-columns: 1fr; gap: var(--espace-7); align-items: start; }
.az-page .az-panier > * { min-width: 0; }
.az-page .az-lignes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bordure-filet); }
.az-page .az-ligne { display: grid; grid-template-columns: 96px 1fr; gap: var(--espace-3) var(--espace-4); padding-block: var(--espace-4); border-bottom: 1px solid var(--bordure-filet); align-items: start; }
.az-page .az-ligne__scene { padding: var(--espace-2) 0; border-radius: var(--rayon-decision); display: flex; flex-direction: column; align-items: center; }
.az-page .az-ligne__scene .az-media-porte { width: 80%; }
.az-page .az-ligne__image { border-radius: var(--rayon-decision); aspect-ratio: 4 / 3; object-fit: contain; width: 100%; position: relative; z-index: 1; }
.az-page .az-ligne__texte { display: flex; flex-direction: column; gap: var(--espace-1); }
.az-page .az-ligne__titre { font-weight: 500; }
.az-page .az-ligne__titre a { color: var(--texte-titre); display: inline-flex; align-items: center; min-height: 48px; margin-block: -12px; }
.az-page .az-ligne__controles { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); flex-wrap: wrap; }
.az-page .az-qte { display: flex; align-items: center; gap: var(--espace-2); }
.az-page .az-qte__champ { width: 72px; text-align: center; }
.az-page .az-ligne__sous-total { margin: 0; }
.az-page .az-lien-retirer { display: inline-flex; align-items: center; min-height: 48px; padding: 0; background: none; border: none; cursor: pointer; color: var(--texte-legende); font-size: var(--taille-corps-petit); text-decoration: underline; }
.az-page .az-lien-retirer:hover, .az-page .az-lien-retirer:focus-visible { color: var(--texte-lien-survol); }
/* La barre de progression — le composant neuf. Sobre, sans animation, sans urgence (§4.2 point 3). */
.az-page .az-gratuite { margin-top: var(--espace-5); padding: var(--espace-4) var(--espace-5); background: var(--surface-section); color: var(--surface-section-texte); border-radius: var(--rayon-parcours); }
.az-page .az-gratuite__texte { font-weight: 500; color: var(--texte-titre); }
.az-page .az-gratuite__piste { margin-top: var(--espace-3); height: 8px; background: var(--surface-carte); border: 1px solid var(--bordure-filet); border-radius: var(--rayon-pastille); overflow: hidden; }
.az-page .az-gratuite__avancee { height: 100%; background: var(--surface-accent); border-radius: var(--rayon-pastille); }
.az-page .az-gratuite__avancee--0 { width: 0; }
.az-page .az-gratuite__avancee--5 { width: 5%; }
.az-page .az-gratuite__avancee--10 { width: 10%; }
.az-page .az-gratuite__avancee--15 { width: 15%; }
.az-page .az-gratuite__avancee--20 { width: 20%; }
.az-page .az-gratuite__avancee--25 { width: 25%; }
.az-page .az-gratuite__avancee--30 { width: 30%; }
.az-page .az-gratuite__avancee--35 { width: 35%; }
.az-page .az-gratuite__avancee--40 { width: 40%; }
.az-page .az-gratuite__avancee--45 { width: 45%; }
.az-page .az-gratuite__avancee--50 { width: 50%; }
.az-page .az-gratuite__avancee--55 { width: 55%; }
.az-page .az-gratuite__avancee--60 { width: 60%; }
.az-page .az-gratuite__avancee--65 { width: 65%; }
.az-page .az-gratuite__avancee--70 { width: 70%; }
.az-page .az-gratuite__avancee--75 { width: 75%; }
.az-page .az-gratuite__avancee--80 { width: 80%; }
.az-page .az-gratuite__avancee--85 { width: 85%; }
.az-page .az-gratuite__avancee--90 { width: 90%; }
.az-page .az-gratuite__avancee--95 { width: 95%; }
.az-page .az-gratuite__avancee--100 { width: 100%; }
.az-page .az-gratuite .az-legende { margin-top: var(--espace-2); }
/* Le code promo, replié (§4.2 point 4). */
.az-page .az-code { margin-top: var(--espace-4); }
.az-page .az-code summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 48px; color: var(--texte-lien); font-weight: 500; }
.az-page .az-code summary::-webkit-details-marker { display: none; }
.az-page .az-code summary:hover { color: var(--texte-lien-survol); }
.az-page .az-code__corps { display: flex; flex-direction: column; gap: var(--espace-3); padding-top: var(--espace-2); }
.az-page .az-code__corps label { display: flex; flex-direction: column; gap: var(--espace-2); font-weight: 500; color: var(--texte-titre); }
/* Le récapitulatif. */
.az-page .az-recap { padding: var(--espace-5); background: var(--surface-carte); color: var(--surface-carte-texte); border: 1px solid var(--bordure-filet); border-radius: var(--rayon-parcours); }
.az-page .az-recap__titre { font-family: var(--typo-titre); font-weight: 500; font-size: var(--taille-h5); line-height: var(--interligne-titre-petit); color: var(--texte-titre); }
.az-page .az-recap__lignes { list-style: none; margin: var(--espace-4) 0 0; padding: 0; border-top: 1px solid var(--bordure-filet); }
.az-page .az-recap__lignes li { display: flex; justify-content: space-between; gap: var(--espace-4); padding-block: var(--espace-2); color: var(--texte-corps); font-size: var(--taille-corps-petit); }
.az-page .az-recap__totaux { margin: var(--espace-3) 0 0; border-top: 1px solid var(--bordure-filet); }
.az-page .az-recap__totaux div { display: flex; justify-content: space-between; gap: var(--espace-4); padding-block: var(--espace-2); }
.az-page .az-recap__totaux dt { color: var(--texte-corps); }
.az-page .az-recap__totaux dd { margin: 0; color: var(--texte-corps); }
.az-page .az-recap__total { border-top: 1px solid var(--bordure-filet); margin-top: var(--espace-2); padding-top: var(--espace-3); }
.az-page .az-recap__total dt, .az-page .az-recap__total dd { font-weight: 500; color: var(--texte-titre); font-size: var(--taille-prix); }
.az-page .az-recap__action { margin-top: var(--espace-5); }
.az-page .az-recap__action .az-bouton { width: 100%; }
/* La barre d'action fixe en bas d'écran (§4.2 point 7) — un bouton d'étape dans une page transactionnelle. */
.az-page .az-corps--barre { padding-bottom: calc(var(--espace-10) + 80px); }
.az-page .az-barre-action { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--espace-4);
  padding: var(--espace-3) var(--grille-marge); background: var(--surface-carte); border-top: 1px solid var(--bordure-filet); }
.az-page .az-barre-action[hidden] { display: none; }
.az-page .az-barre-action__total { margin: 0; }
.az-page .az-barre-action__bouton { flex: 0 1 auto; max-width: 60%; white-space: nowrap; padding-inline: var(--espace-5); }
/* --- Commander (§5.10) ---------------------------------------------------------- */
/* Sans fil d'Ariane, le H1 touchait le filet de l'en-tête (8 px — réserve R1 du /acd, tour 2) : le même
   espace que le fil donne aux autres pages. */
.az-page .az-corps--tete { margin-top: 0; padding-top: var(--espace-8); }
/* mesuré : 64 px, comme le panier */
.az-page .az-entete__mention { display: inline-flex; align-items: center; gap: var(--espace-2); color: var(--texte-corps); font-size: var(--taille-corps-petit); margin: 0; white-space: nowrap; }
/* Sous 400 px, lockup + mention ne tiennent pas sur la barre (mesuré : débordement à 360, tour 2) : l'icône
   seule, le texte reste lu par les aides techniques (direction /acd tour 1, D4 : « ou icône seule sous 400 px »). */
@media (max-width: 399px) {
.az-page .az-entete__mention span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* La confirmation : le récapitulatif à gauche, étroit ; le texte à droite, large (tour 2 : l'inverse à 1280). */
.az-page .az-commander--recap-gauche .az-recap { order: 0; }
.az-page .az-commander { display: grid; grid-template-columns: 1fr; gap: var(--espace-6); align-items: start; }
.az-page .az-commander > * { min-width: 0; }
.az-page .az-commander__form { margin-top: 0; max-width: var(--grille-colonne-texte); }
.az-page .az-recap-replie { border: 1px solid var(--bordure-filet); border-radius: var(--rayon-parcours); background: var(--surface-carte); }
.az-page .az-recap-replie summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--espace-4); min-height: 56px; padding: var(--espace-3) var(--espace-5); font-weight: 500; color: var(--texte-titre); }
.az-page .az-recap-replie summary::-webkit-details-marker { display: none; }
.az-page .az-recap-replie summary .az-prix { margin: 0; }
/* L'affordance d'ouverture, comme la FAQ (direction /acd tour 1, D3) : le « + » devient « − » déplié. */
.az-page .az-recap-replie summary::after { content: "+"; color: var(--texte-lien); font-size: var(--taille-h5); flex: none; margin-left: var(--espace-3); }
.az-page .az-recap-replie[open] summary::after { content: "−"; }
.az-page .az-recap-replie .az-recap { border: none; border-top: 1px solid var(--bordure-filet); border-radius: 0; }
.az-page .az-commander__cote { display: none; }
.az-page .az-etape { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--espace-4); }
.az-page .az-etape legend { font-family: var(--typo-titre); font-weight: 500; font-size: var(--taille-h5); line-height: var(--interligne-titre-petit); color: var(--texte-titre); padding: 0; margin-bottom: var(--espace-2); }
.az-page .az-etape + .az-etape { margin-top: var(--espace-4); padding-top: var(--espace-5); border-top: 1px solid var(--bordure-filet); }
.az-page .az-champ--court { max-width: 160px; }
.az-page .az-form select.az-champ { appearance: auto; }
.az-page .az-option { display: flex; align-items: flex-start; gap: var(--espace-3); min-height: 48px; padding: var(--espace-3) var(--espace-4); border: 1px solid var(--bordure-controle); border-radius: var(--rayon-controle); cursor: pointer; font-weight: 400; color: var(--texte-corps); }
.az-page .az-option input { width: 24px; height: 24px; accent-color: var(--surface-accent); margin: 0; flex: none; }
.az-page .az-option strong { color: var(--texte-titre); }
.az-page .az-carte-champs { display: flex; flex-direction: column; gap: var(--espace-3); }
.az-page .az-commander__retour { display: flex; align-items: flex-start; gap: var(--espace-3); color: var(--texte-corps); font-size: var(--taille-corps-petit); }
.az-page .az-commander__action { display: flex; flex-direction: column; gap: var(--espace-3); }
.az-page .az-commander__action .az-bouton { width: 100%; }
/* --- Planches (index, tablette, bureau) -------------------------------------- */
.az-page .pl-tete { padding: var(--espace-6) var(--espace-5) var(--espace-4); }
.az-page .pl-tete h1 { font-family: var(--typo-titre); font-weight: 500; font-size: var(--taille-h4); line-height: var(--interligne-titre-petit); color: var(--texte-titre); margin: 0 0 var(--espace-2); }
.az-page .pl-tete p { margin: 0; max-width: 72ch; color: var(--texte-corps); }
.az-page .pl-planche { display: flex; flex-wrap: wrap; gap: var(--espace-5); padding: var(--espace-5); align-items: flex-start; }
.az-page .pl-cadre { background: var(--surface-carte); padding: var(--espace-3); border: 1px solid var(--bordure-filet); border-radius: var(--rayon-parcours); }
.az-page .pl-cadre h2 { font-family: var(--typo-corps); font-size: var(--taille-corps-petit); font-weight: 500; margin: 0 0 var(--espace-2); color: var(--texte-legende); }
.az-page .pl-cadre iframe { display: block; border: 1px solid var(--bordure-filet); background: var(--surface-page); max-width: 100%; }
/* =====================================================================
   Déclinaisons — 768 px puis 1024 px
   ===================================================================== */
@media (min-width: 768px) {
.az-page .az-corps > * + * { margin-top: var(--espace-10); }
.az-page .az-cartes { grid-template-columns: repeat(2, 1fr); }
.az-page .az-fiche { grid-template-columns: 1fr 1fr; }
.az-page .az-fiche__action .az-bouton { width: auto; }
.az-page .az-region__grille { grid-template-columns: repeat(3, 1fr); }
.az-page .az-pied__grille { grid-template-columns: repeat(2, 1fr); }
.az-page .az-journal li { grid-template-columns: 1fr auto; align-items: center; }
/* Tunnel : à partir de 768 le bouton collant et la barre fixe disparaissent (A18 : 360 px seulement ;
     §4.2 : la barre fixe est mobile), le bouton du flux et le récapitulatif font le travail. */
.az-page .az-collant, .az-page .az-barre-action { display: none; }
.az-page .az-corps--barre { padding-bottom: var(--espace-10); }
.az-page .az-ligne { grid-template-columns: 96px 1fr auto; }
.az-page .az-ligne__controles { grid-column: auto; flex-direction: column; align-items: flex-end; }
.az-page .az-recap__action .az-bouton { width: auto; }
.az-page .az-commander__action .az-bouton { width: auto; }
}
@media (min-width: 1280px) {
/* Panier et commander : colonne gauche ≈ 62 %, récapitulatif à droite, collant au défilement (§4.3, §5.10). */
.az-page .az-panier { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); }
.az-page .az-panier .az-recap { position: sticky; top: var(--espace-5); }
.az-page .az-commander { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); }
.az-page .az-commander--recap-gauche { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); }
.az-page .az-recap-replie { display: none; }
.az-page .az-commander__cote { display: block; position: sticky; top: var(--espace-5); }
}
@media (min-width: 1024px) {
.az-page .az-nav--bureau { display: flex; gap: var(--espace-1); }
.az-page .az-menu { display: none; }
.az-page .az-cartes { grid-template-columns: repeat(3, 1fr); }
.az-page .az-cartes--quatre { grid-template-columns: repeat(4, 1fr); }
.az-page .az-pied__grille { grid-template-columns: repeat(4, 1fr); }
}