/* =========================================================================
   CARRIA — A1 (hero) et A2 (bandeau de sources)
   Annexes A1, A2 · charte C2/C3/C5 · responsive D1.

   Aucune valeur hexadécimale en dur : uniquement les variables de tokens.css.
   L'accent est --accent (annexe C1). Le violet clair de la maquette obsolète
   « Carria design maquette/cockpit/design-tokens.css » ne doit apparaître
   nulle part dans le CSS, pas même en commentaire : sa seule présence dans une
   feuille de style est un critère de refus (brief §6).
   Classes préfixées .a1- / .a2- pour éviter toute collision entre sections.
   Points de rupture : 480 / 768 / 1024 / 1440. Aucun défilement horizontal.
   ========================================================================= */

/* =========================================================================
   A1 — HERO
   ========================================================================= */

/* Fond --bg-grad vertical : la signature visuelle doit être là dès le premier
   pixel (annexe A1).

   NOTE D'INTÉGRATION — index.html : l'en-tête A0 est en verre translucide.
   Pour que le dégradé lavande coure réellement sous elle dès le premier pixel,
   elle doit être posée en position: sticky au-dessus de ce bloc, sans fond
   opaque. À défaut, les 68 px du haut de page retombent sur --bg-page
   (#DFE5F5), soit trois unités de la première étape du dégradé (#D5DDF3) :
   le raccord reste invisible, mais la solution propre est l'en-tête sticky. */
.a1 {
  background: var(--bg-grad);
  padding-block: 72px 120px;
}

.a1-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-xxxl);
  align-items: center;
}

/* ≥ 1024 px : texte sur 6 colonnes à gauche, capture sur 6 colonnes à droite.
   En dessous, tout s'empile et la capture passe SOUS le texte — c'est déjà
   l'ordre du DOM, aucune réorganisation n'est nécessaire (annexe D1). */
@media (min-width: 1024px) {
  .a1-grille {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 64px;
    row-gap: var(--gap);
  }
  .a1-texte {
    grid-column: 1 / span 6;
  }
  .a1-visuel {
    grid-column: 7 / span 6;
  }
}

/* Débord à 1560 px, réservé au visuel du hero (annexe C5) : la capture sort
   de la largeur utile de 1120 px vers la droite. Sans lui, la capture tombe à
   480 px de large face à un titre de six lignes, et le visuel produit — qui
   est l'argument du hero — passe au second plan.

   Le débord est progressif, borné par un clamp() à trois valeurs :
     · plancher -268px = calc((1120px - 1560px) / 2 - 48px), soit la moitié du
       débord moins le padding latéral de .enveloppe : au-delà, on dépasserait
       la largeur de 1560 px autorisée par la charte ;
     · valeur courante 544px - 50vw : ce qu'il reste entre le bord droit de la
       zone utile et le bord de la fenêtre, gouttière de sécurité de 32 px
       réservée (elle absorbe la barre de défilement, incluse dans vw) ;
     · plafond 0 : sous ~1120 px il n'y a plus rien à déborder, la marge ne
       doit jamais devenir positive et rogner la capture.
   Conséquence vérifiée de 320 à 1920 px : aucun défilement horizontal, qui
   est un critère de refus (brief §6). */
.a1-visuel {
  margin-right: clamp(calc((1120px - 1560px) / 2 - 48px), calc(544px - 50vw), 0px);
}

/* Sous 1024 px la capture est empilée et occupe toute la largeur : pas de
   débord possible. */
@media (max-width: 1023px) {
  .a1-visuel {
    margin-right: 0;
  }
}

/* --- Colonne de texte --- */

.a1-surtitre {
  margin-bottom: var(--sp-lg);
}

.a1-titre {
  /* Le seul <h1> de la page. Échelle imposée par .h1 (annexe C4). */
  margin-bottom: var(--sp-xl);
}

.a1-chapo {
  color: var(--muted);
  margin-bottom: var(--sp-xxl);
}

.a1-boutons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-xl);
}

/* Le lien secondaire ne doit jamais lire comme un second appel à l'action
   (brief §2) : pas de fond, pas de bordure pleine, simple filet bas. */
.a1-lien {
  white-space: nowrap;
}

.a1-mention {
  margin-top: var(--sp-lg);
  max-width: 56ch;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

/* --- Emplacement de la capture ---
   La capture du hero n'existe pas encore : elle est produite par un
   développeur de l'équipe Carria (annexe B1). L'emplacement reste vide.
   La même classe .a1-capture s'appliquera à la future <img>, pour que le
   traitement (rayon, bordure, ombre) et la boîte réservée soient identiques
   avant et après livraison — donc zéro saut de mise en page (CLS, annexe D2). */
.a1-capture {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 900;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
}

/* Fond neutre tant que la capture manque. Aucun contenu, aucun texte, aucun
   dessin : ce n'est pas une maquette, c'est une réservation. */
.a1-capture-reserve {
  background: var(--bg-2);
}

/* Repli pour les moteurs sans aspect-ratio : 900 / 1440 = 62,5 %. */
@supports not (aspect-ratio: 1 / 1) {
  .a1-capture-reserve {
    height: 0;
    padding-top: 62.5%;
  }
}

/* --- Entrée du hero (annexe A1) ---
   Fondu montant 700 ms, décalage 60 ms : surtitre → titre → chapô → boutons
   → capture. Le bloc « boutons » porte aussi la mention qui le suit : elle
   entre avec eux, l'annexe ne lui donne pas d'étape propre.

   Le hero est au-dessus de la ligne de flottaison : son entrée est déclenchée
   au chargement, en CSS pur, et non par l'IntersectionObserver de base.css.
   Deux raisons : rien à observer pour un bloc déjà visible, et surtout le hero
   ne doit pas dépendre d'un script pour s'afficher (il porte le LCP).
   Sous prefers-reduced-motion: reduce, la règle entière ne s'applique pas et
   les éléments sont à leur état final. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes a1-fondu-montant {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .a1-anime {
    animation: a1-fondu-montant var(--t-slow) var(--ease) both;
  }

  .a1-surtitre {
    animation-delay: 0ms;
  }
  .a1-titre {
    animation-delay: 60ms;
  }
  .a1-chapo {
    animation-delay: 120ms;
  }
  .a1-action {
    animation-delay: 180ms;
  }
  .a1-visuel {
    animation-delay: 240ms;
  }
}

/* --- A1 responsive --- */

@media (max-width: 1023px) {
  .a1-grille {
    gap: var(--sp-xxxl);
  }
}

@media (max-width: 768px) {
  .a1 {
    padding-block: 40px 72px;
  }
  .a1-titre {
    margin-bottom: var(--sp-lg);
  }
  .a1-chapo {
    margin-bottom: var(--sp-xl);
  }
  .a1-boutons {
    gap: var(--sp-base);
  }
}

@media (max-width: 479px) {
  /* Sous 480 px, le lien secondaire passe sous le bouton plutôt que de forcer
     une ligne trop étroite. Zone tapable de 44 px conservée (annexe D1). */
  .a1-boutons {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-md);
  }
  .a1-lien {
    white-space: normal;
  }
}

/* =========================================================================
   A2 — BANDEAU DE SOURCES
   ========================================================================= */

/* Bande pleine largeur, --surface-frosted, filets haut et bas --rule-25,
   SANS RAYON : elle traverse la page (annexe A2). */
.a2 {
  background: var(--surface-frosted);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  border-top: 1px solid var(--rule-25);
  border-bottom: 1px solid var(--rule-25);
  border-radius: 0;
  padding-block: var(--sp-xxxl);
}

/* Repli obligatoire (annexe C3) : sans lui le texte devient illisible sur le
   dégradé quand backdrop-filter n'est pas supporté. */
@supports not (backdrop-filter: blur(1px)) {
  .a2 {
    background: var(--surface-elev);
  }
}

.a2-enveloppe {
  text-align: center;
}

.a2-surtitre {
  margin-bottom: var(--sp-xl);
}

/* --- Les sept libellés ---
   Séparés par un filet vertical --rule-25 (annexe A2). Le filet est décoratif,
   il ne porte aucune information : l'usage d'alpha y est le seul autorisé (C2).
   flex-wrap reste actif : même si une police de repli rendait la ligne plus
   large que prévu, elle se replie au lieu de provoquer un défilement
   horizontal (critère de refus, brief §6). */
.a2-liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.a2-libelle {
  padding: var(--sp-xs) var(--sp-base);
  border-left: 1px solid var(--rule-25);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-2);
}

.a2-libelle:first-child {
  border-left: 0;
}

/* Phrase de clôture : 16 px, --muted, centrée, max 700 px (annexe A2). */
.a2-cloture {
  margin: var(--sp-xl) auto 0;
  max-width: 700px;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--muted);
}

/* --- A2 responsive ---
   Grille 2 × 4 sous 1024 px : l'annexe A2 impose 2 × 4 sous 768 px, et
   l'annexe D1 impose deux colonnes pour les grilles entre 768 et 1024 px.
   Les deux règles se rejoignent sur la même bascule.
   Au-delà, les sept libellés tiennent sur une seule ligne. */
@media (max-width: 1023px) {
  .a2-liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .a2-libelle {
    padding: var(--sp-md) var(--sp-base);
    border-left: 0;
  }
  .a2-libelle:nth-child(even) {
    border-left: 1px solid var(--rule-25);
  }
  .a2-libelle:nth-child(n + 3) {
    border-top: 1px solid var(--rule-25);
  }
}

@media (max-width: 768px) {
  .a2 {
    padding-block: var(--sp-xxl);
  }
}

/* Une colonne sous 480 px (annexe A2). */
@media (max-width: 479px) {
  .a2-liste {
    grid-template-columns: minmax(0, 1fr);
  }
  .a2-libelle {
    border-left: 0;
  }
  .a2-libelle:nth-child(even) {
    border-left: 0;
  }
  .a2-libelle:nth-child(n + 2) {
    border-top: 1px solid var(--rule-25);
  }
}

/* Décalage de 60 ms entre les trois rangées de A2, sur le mécanisme partagé
   de base.css (.js-anime + .est-visible, IntersectionObserver à 15 %). */
@media (prefers-reduced-motion: no-preference) {
  .a2-surtitre {
    transition-delay: 0ms;
  }
  .a2-liste {
    transition-delay: 60ms;
  }
  .a2-cloture {
    transition-delay: 120ms;
  }
}