/* =====================================================================
   ALUREA — DIRECTION ARTISTIQUE « PREMIUM » DE L'ACCUEIL (v126)

   Une couche posée APRÈS alurea.css et le style propre à l'accueil : elle
   ne touche à aucun texte. Trois principes :
     • de l'air : des sections plus hautes, des marges plus larges, des
       titres plus grands et plus légers ;
     • la photographie : les visuels d'ALUREA (façade haussmannienne,
       bureau, documents, agence), pleine largeur ou en regard du texte ;
     • la retenue : deux couleurs (encre, laiton), des filets fins, des
       angles presque droits, un mouvement lent et facultatif.
   Les photographies sont décoratives (alt vide, aria-hidden) : elles
   n'ajoutent aucun mot à la page.
   ===================================================================== */

:root { --da-air: clamp(5rem, 11vw, 10rem); --da-air-court: clamp(3.5rem, 7vw, 6rem); }

/* ------------------------------ Typographie ----------------------------- */
.display.t-mega { font-size: clamp(3rem, 7.6vw, 6.6rem); font-weight: 500; letter-spacing: -.045em; line-height: .98; }
.display.t-geant { font-size: clamp(2.3rem, 4.9vw, 4.3rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.03; }
.display.t-grand { font-weight: 500; letter-spacing: -.03em; }
.chapo { font-size: clamp(1.06rem, 1.35vw, 1.24rem); line-height: 1.65; }
.sourcil { letter-spacing: .22em; }

/* Les sections respirent. */
.section { padding-block: var(--da-air); }
.section-serree { padding-block: var(--da-air-court); }

/* ------------------------------- Le hero -------------------------------- */
.hero { min-height: min(100svh, 1040px); padding-block: calc(var(--r9) + 72px) clamp(4rem, 9vw, 7.5rem); }
.hero-fond img { object-position: center 42%; transform-origin: 60% 40%; }
.hero-fond::after {
  background:
    linear-gradient(180deg, rgba(8,19,31,.72) 0%, rgba(8,19,31,.18) 30%, rgba(8,19,31,.42) 62%, rgba(8,19,31,.96) 100%),
    linear-gradient(90deg, rgba(8,19,31,.88) 0%, rgba(8,19,31,.45) 46%, rgba(8,19,31,0) 78%);
}
.hero h1 { max-width: 15ch; }
.hero .chapo { max-width: 44ch; }
.hero .sourcil::before { width: 3rem; }
.da-defiler {
  position: absolute; z-index: 2; left: 50%; bottom: 1.6rem; width: 1px; height: 3.4rem;
  background: linear-gradient(180deg, rgba(210,165,94,0), rgba(210,165,94,.9)); overflow: hidden;
}
.da-defiler::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff; animation: da-goutte 2.6s ease-in-out infinite; }
@keyframes da-goutte { 0% { top: -40%; } 70%, 100% { top: 100%; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-fond img { animation: da-respiration 26s ease-out both; }
  @keyframes da-respiration { from { transform: scale(1.09); } to { transform: scale(1); } }
}
@media (max-width: 720px) { .da-defiler { display: none; } .hero { min-height: 92svh; } }

/* --------------------------- Les chiffres ------------------------------- */
.bandeau { background: var(--fond); }
.bandeau-cell { padding: clamp(2.4rem, 5vw, 4rem) clamp(1.2rem, 2.6vw, 2.4rem); }
.bandeau .chiffre { font-family: var(--display); font-size: clamp(2.8rem, 5.2vw, 4.6rem); font-weight: 300; letter-spacing: -.05em; line-height: 1; }

/* ------------------------- Les photographies ---------------------------- */
.da-photo { margin: 0; position: relative; overflow: hidden; background: var(--encre-800); }
.da-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.da-photo--voile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,19,31,0) 55%, rgba(8,19,31,.28)); pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  .anim .da-cadre img { transform: scale(1.06); transition: transform 2.4s cubic-bezier(.2,.7,.2,1); }
  .anim .da-cadre.vu img { transform: none; }
}

/* ----------------------- L'organisme, en regard ------------------------- */
#organisme.da-regard { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding: 0; align-items: start; }
/* La photo reste à l'écran pendant que le texte défile à côté. */
#organisme.da-regard .da-cadre { position: sticky; top: 64px; height: calc(100vh - 64px); }
#organisme.da-regard .da-cadre img { object-position: 58% 50%; }
#organisme.da-regard > .conteneur { padding-block: var(--da-air); max-width: 820px; margin-inline: 0; padding-inline: clamp(1.5rem, 6vw, 6rem); }
#organisme.da-regard .g-asym { grid-template-columns: 1fr; gap: 3rem; }
@media (max-width: 900px) {
  #organisme.da-regard { grid-template-columns: 1fr; }
  #organisme.da-regard .da-cadre { position: relative; top: 0; height: auto; aspect-ratio: 4 / 3; }
  #organisme.da-regard > .conteneur { padding-block: var(--da-air-court); padding-inline: var(--gouttiere); }
}

/* ------------------------------ Les tarifs ------------------------------- */
#tarifs .grille.g3 { gap: clamp(1rem, 2.2vw, 2rem); align-items: stretch; }
#tarifs .carte.tarif { padding: clamp(1.8rem, 3vw, 2.6rem); border-radius: 2px; border-color: transparent; box-shadow: 0 1px 0 var(--filet), 0 24px 60px -32px rgba(8,19,31,.28); }
#tarifs .tarif-prix b { font-family: var(--display); font-weight: 300; font-size: clamp(3rem, 4.6vw, 4.2rem); letter-spacing: -.05em; }
#tarifs .carte.tarif.vedette { background: var(--encre-900); color: #fff; box-shadow: 0 30px 80px -30px rgba(8,19,31,.6); transform: translateY(-14px); }
#tarifs .carte.tarif.vedette .sourcil, #tarifs .carte.tarif.vedette .tarif-prix b { color: #fff; }
#tarifs .carte.tarif.vedette .doux, #tarifs .carte.tarif.vedette .tarif-ref, #tarifs .carte.tarif.vedette li { color: #C4D4E2; }
#tarifs .carte.tarif.vedette .btn-laiton { --btn-fond: var(--laiton-clair); --btn-texte: var(--encre-900); }
@media (max-width: 900px) { #tarifs .carte.tarif.vedette { transform: none; } }

/* ---------------------------- Le catalogue ------------------------------ */
.parcours-item { padding: clamp(1.1rem, 2vw, 1.6rem) 0; }

/* ----------------------------- Les étapes ------------------------------- */
.da-etapes > .conteneur { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.da-etapes > .conteneur > .da-cadre { grid-row: 1 / span 4; position: sticky; top: 96px; aspect-ratio: 4 / 5; }
.da-etapes > .conteneur > :not(.da-cadre) { grid-column: 2; }
.da-etapes .etapes-grille { grid-template-columns: 1fr !important; gap: 0 !important; }
.da-etapes .etape { padding: 1.6rem 0 1.6rem 4.2rem; border-top: 1px solid var(--filet); }
.da-etapes .etape-num { top: 1.5rem; }
@media (max-width: 900px) {
  .da-etapes > .conteneur { grid-template-columns: 1fr; }
  .da-etapes > .conteneur > .da-cadre { grid-row: auto; position: relative; top: 0; aspect-ratio: 16 / 10; margin-bottom: 2rem; }
  .da-etapes > .conteneur > :not(.da-cadre) { grid-column: 1; }
}

/* ---------------------------- L'attestation ----------------------------- */
#attestation .media { aspect-ratio: 4 / 5 !important; border-radius: 2px; box-shadow: 0 40px 90px -40px rgba(0,0,0,.7); }
@media (max-width: 900px) { #attestation .media { aspect-ratio: 4 / 3 !important; } }

/* ------------------------- Le renouvellement ---------------------------- */
.face-a-face { border-radius: 2px; }
.face-col { padding: clamp(1.8rem, 3.4vw, 3rem); }

/* ------------------------------ Le coach -------------------------------- */
.da-scene { position: relative; padding: clamp(2rem, 5vw, 4.5rem) 0 clamp(2rem, 5vw, 4.5rem) clamp(2rem, 9vw, 7rem); }
.da-scene > .da-cadre { position: absolute; inset: 0 32% 0 0; z-index: 0; }
.da-scene > .carte { position: relative; z-index: 1; box-shadow: 0 30px 70px -30px rgba(8,19,31,.45); }
@media (max-width: 900px) { .da-scene { padding: 0 0 0 0; } .da-scene > .da-cadre { position: relative; inset: auto; aspect-ratio: 16 / 9; margin-bottom: -3rem; } .da-scene > .carte { margin: 0 .8rem; } }

/* ------------------------------ Les agences ----------------------------- */
#agences .media { margin-inline: calc(50% - 50vw); max-height: none !important; aspect-ratio: 21 / 9 !important; border-radius: 0; margin-top: var(--da-air-court) !important; }
@media (max-width: 720px) { #agences .media { aspect-ratio: 4 / 3 !important; } }

/* ------------------------------- La FAQ --------------------------------- */
.faq details { padding-block: .4rem; }
.faq summary { font-family: var(--display); font-size: clamp(1.02rem, 1.4vw, 1.18rem); letter-spacing: -.01em; }

/* ------------------------------ Le final -------------------------------- */
.da-final { overflow: hidden; }
.da-final > .da-fond { position: absolute; inset: 0; z-index: 0; }
.da-final > .da-fond img { opacity: .38; }
.da-final > .da-fond::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, rgba(8,19,31,.35), rgba(8,19,31,.92)); }
.da-final > .conteneur { position: relative; z-index: 1; }

/* Le coach : la scène et le texte se partagent la largeur à parts égales. */
.g-asym:has(> .da-scene) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .g-asym:has(> .da-scene) { grid-template-columns: 1fr; } }
/* Le numéro du parcours tient sur une ligne (« 01 · 14 h »). */
@media (min-width: 641px) { .parcours-item { grid-template-columns: 5.5rem 1fr auto; } }

/* =====================================================================
   PAGES INTÉRIEURES (v127) — catalogue et organisme, même langage :
   de l'air, une ou deux photographies, aucun mot ajouté.
   ===================================================================== */
.da-photo.da-arrondi { border-radius: 2px; }

/* --------------------------- Le catalogue ------------------------------ */
.da-entete > .conteneur { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 6vw, 5.5rem); align-items: start; }
.da-entete > .conteneur > * { grid-column: 1; }
.da-entete > .conteneur > .da-cadre { grid-column: 2; grid-row: 1 / span 4; aspect-ratio: 4 / 5; max-height: 560px; align-self: end; }
.da-entete > .conteneur > .filtres { grid-column: 1 / -1; margin-top: clamp(1.5rem, 4vw, 3rem); }
.da-entete { padding-top: clamp(3rem, 7vw, 6rem) !important; }
.da-entete h1 { font-size: clamp(2.6rem, 5.6vw, 4.8rem); }
.da-entete .chapo { max-width: 46ch; }
@media (max-width: 900px) {
  .da-entete > .conteneur { grid-template-columns: 1fr; }
  .da-entete > .conteneur > .da-cadre { grid-column: 1; grid-row: auto; aspect-ratio: 16 / 9; max-height: none; margin: 1.5rem 0 0; }
}
.da-fin { max-width: var(--largeur); margin: 0 auto var(--da-air); padding-inline: var(--gouttiere); }
.da-fin .da-photo { height: clamp(240px, 36vw, 460px); }
.da-fin .da-photo img { object-position: center 45%; }

/* ---------------------------- L'organisme ------------------------------- */
.da-banniere { height: clamp(240px, 40vw, 560px); }
.da-banniere img { object-position: center 50%; }
.da-org { padding-top: clamp(3rem, 7vw, 6rem) !important; }
.da-org .texte { max-width: 760px; margin-inline: auto; }
.da-org .texte h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.02; }
.da-org .texte h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 500; letter-spacing: -.03em; margin-top: clamp(3rem, 6vw, 4.5rem); }
.da-org .identite-liste { padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--fond-creux); border-left: 2px solid var(--accent); }
.da-org .da-inserer { margin: clamp(3rem, 6vw, 4.5rem) calc(-1 * clamp(0rem, 8vw, 7rem)) 0; height: clamp(220px, 34vw, 440px); }
@media (max-width: 900px) { .da-org .da-inserer { margin-inline: 0; } }
.da-org .texte p, .da-org .texte li { font-size: 1.04rem; }
.da-fin { margin-top: calc(-1 * var(--r7)); }