/* ==========================================================================
   PROSPEE — a-propos.css
   Compositions PROPRES à la page « À propos » (/a-propos). Page-éditorial
   « Noir sur blanc » : raison d'être, qui fait quoi, engagements, ligne rouge,
   honnêteté d'alpha, clause finale. Les composants de base viennent de
   composants.css + marketing.css (chargés partout) ; les tokens de
   brand/tokens.css. Aucun hex en dur, aucune durée en dur. Accent bleu ≤ 3 %.
   ========================================================================== */

/* ---------- Têtes de section (variantes locales, façon spécimen/home) ---------- */
.ap-tete-centre { max-width: 46rem; margin-inline: auto; text-align: center; }
.ap-tete-centre .section-numero { margin-inline: auto; }
.ap-tete-gauche { max-width: 52rem; }
/* Le titre se détache de son chapeau (charte §4.3 : l'air au-dessus ≥ 2× dessous). */
.ap-tete-gauche .t-h2 { margin-bottom: var(--space-6); }
.ap-tete-gauche .t-lead { max-width: var(--largeur-lecture); }

/* Petit badge d'état posé dans le sur-titre (« Alpha ») — neutre, jamais l'accent. */
.ap-tag { margin-left: var(--space-2); vertical-align: middle; }

/* ==========================================================================
   01 · MANIFESTE (hero éditorial) — colonne de lecture, trame d'agenda en fond
   ========================================================================== */
.ap-hero {
  position: relative;
  padding-block: var(--space-16) var(--space-section);
}
/* La trame d'appoint : quelques filets faibles qui traversent + heures dans la
   marge. Le papier de la page (charte §6.2), jamais animée, sous le contenu. */
.ap-hero-trame {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.ap-hero-filet {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: var(--filet-epaisseur) solid var(--color-bordure);
}
/* Ici le texte est calé à GAUCHE du conteneur (registre auteur) : l'heure de
   composants.css (bord gauche de la colonne) tomberait sur le titre. Elle ne
   vit donc que dans la VRAIE marge extérieure, et se retire quand celle-ci
   n'existe pas — les filets, eux, restent (§6.2). */
.ap-hero-filet .trame-heure { display: none; }
@media (min-width: 90rem) {
  .ap-hero-filet .trame-heure {
    display: block;
    left: auto;
    right: calc(50% + var(--largeur-contenu) / 2 + var(--space-4));
  }
}
/* Le conteneur garde sa pleine largeur centrée (alignement page) ; ce sont les
   ENFANTS (titre, chapeau, colonne narrative) qui portent leur largeur de lecture
   et restent calés à gauche — registre « texte d'auteur ». */
.ap-hero-inner { position: relative; z-index: 1; }
/* Le titre du hero ne s'anime jamais (§7.3) ; on évite la coupure des traits
   d'union et on laisse le navigateur équilibrer les lignes. */
.ap-hero-titre { max-width: 18ch; text-wrap: balance; hyphens: none; }
.ap-hero-lede {
  color: var(--color-encre-2);
  max-width: var(--largeur-lecture);
  margin-top: var(--space-6);
}
.ap-hero .ap-edito { margin-top: var(--space-12); }

/* ---------- Colonne narrative réutilisable (manifeste, conviction, alpha) ---------- */
.ap-edito {
  max-width: var(--largeur-lecture);
  display: flex; flex-direction: column; gap: var(--space-6);
}
.ap-edito p { color: var(--color-encre); }
/* La chute d'un bloc éditorial : posée, un cran plus ferme. */
.ap-edito-chute { font-weight: var(--graisse-ui); }

/* ==========================================================================
   02 · CONVICTION — la citation-acte, gravée entre deux filets (registre acte)
   ========================================================================== */
.ap-acte {
  max-width: 46rem; margin: var(--space-24) auto 0;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-8);
}
.ap-acte-filet {
  width: var(--space-12); height: 0; margin: 0; border: 0;
  border-top: var(--filet-epaisseur) solid var(--color-bordure-forte);
}
.ap-acte-mot {
  margin: 0; color: var(--color-encre);
  max-width: 38rem; text-wrap: balance;
}
@media (max-width: 767px) {
  .ap-acte { margin-top: var(--space-16); gap: var(--space-6); }
}

/* ==========================================================================
   03 · DEUX MAISONS — deux cartes jumelles (la plateforme · le partenaire)
   ========================================================================== */
.ap-maisons {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .ap-maisons { grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: stretch; }
}
.ap-maison {
  background: var(--color-surface);
  border: var(--filet-epaisseur) solid var(--color-bordure);
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre-douce);
  padding: var(--space-12);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.ap-maison h3 { color: var(--color-encre); }
.ap-maison > p { color: var(--color-encre-2); }
.ap-maison .liste-coches { margin-top: var(--space-2); gap: var(--space-3); }
.ap-maison .liste-coches .t-body { color: var(--color-encre); }
/* Le pied de carte : registre légal (carte 1) ou badge « En France » (carte 2),
   poussé en bas et détaché par un filet — comme le bas d'un acte. */
.ap-maison-pied {
  margin-top: auto;
  padding-top: var(--space-6);
  border-top: var(--filet-epaisseur) solid var(--color-bordure);
  color: var(--color-encre-2);
}
.ap-maison-pied .badge { /* le badge porte ses propres couleurs */ }
/* Les deux jumelles partagent la même grille de rangées (subgrid) : sur-titre,
   titre, texte, liste et pied tombent à la même hauteur d'une carte à l'autre,
   donc les deux filets de pied forment UNE seule ligne. Avec le pied plaqué en
   bas (margin-top: auto), sa position dépendait de sa propre hauteur : 16,8 px
   d'écart à 768 px (mention légale sur 2 lignes d'un côté, badge de l'autre).
   Sans subgrid, `margin-top: auto` reste le repli. */
@media (min-width: 768px) {
  @supports (grid-template-rows: subgrid) {
    .ap-maisons {
      grid-template-rows: repeat(5, auto);
      column-gap: var(--space-12); row-gap: var(--space-4);
    }
    .ap-maison { display: grid; grid-template-rows: subgrid; grid-row: span 5; }
    .ap-maison-pied { margin-top: 0; }
  }
}
@media (hover: hover) {
  .ap-maison {
    transition: transform var(--duree-ui-retour) var(--ease-sortie),
                box-shadow var(--duree-ui-retour) var(--ease-sortie);
  }
  .ap-maison:hover {
    transform: translateY(-2px); box-shadow: var(--ombre-moyenne);
    transition-duration: var(--duree-ui); transition-timing-function: var(--ease-ui);
  }
}
@media (max-width: 767px) {
  .ap-maison { padding: var(--space-8); }
}

/* ==========================================================================
   04 · LA COUTURE — le parcours d'un rendez-vous, document daté (registre
   notarial §6.3). Relevé vertical : pastille à coche + titre + méta, filets.
   ========================================================================== */
.ap-parcours {
  max-width: 52rem; margin-inline: auto;
  background: var(--color-surface);
  border: var(--filet-epaisseur) solid var(--color-bordure);
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre-douce);
  padding: var(--space-12);
}
.ap-parcours-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.ap-parcours-tete .section-numero { margin-bottom: 0; }
.ap-parcours-liste { display: flex; flex-direction: column; }
/* Marque calée sur la PREMIÈRE ligne du titre, comme le composant jumeau
   .ap-releve-item : centrée sur toute l'étape (align-items: center), la pastille
   descendait au niveau de la légende dès que celle-ci passait sur 2 ou 3 lignes
   (mesuré : 48 px sous la ligne qu'elle marque à 320 px). */
.ap-parcours-etape {
  display: grid; grid-template-columns: var(--space-6) 1fr;
  gap: var(--space-6); align-items: start;
  padding-block: var(--space-6);
}
.ap-parcours-etape + .ap-parcours-etape {
  border-top: var(--filet-epaisseur) solid var(--color-bordure);
}
.ap-parcours-pastille {
  /* même décalage optique que .ap-releve-marque : la pastille s'assoit sur la
     hauteur de la 1re ligne du titre. */
  margin-top: calc(var(--space-1) / 2);
  width: var(--space-6); height: var(--space-6); flex: none;
  border-radius: 50%;
  background: var(--color-surface);
  border: var(--filet-epaisseur) solid var(--color-bordure-forte);
  display: inline-flex; align-items: center; justify-content: center;
}
.ap-parcours-pastille .coche-svg { width: var(--space-4); height: var(--space-4); color: var(--color-accent); }
.ap-parcours-etape--final .ap-parcours-pastille {
  background: var(--color-succes-surface); border-color: var(--color-accent);
}
.ap-parcours-corps { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ap-parcours-titre { color: var(--color-encre); font-weight: var(--graisse-ui); }
.ap-parcours-meta { display: block; }
.ap-parcours-meta--accent { color: var(--color-accent); }
.ap-parcours-note {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--filet-epaisseur) solid var(--color-bordure);
}
@media (max-width: 767px) {
  .ap-parcours { padding: var(--space-8); }
}

/* ==========================================================================
   05 · ENGAGEMENTS + 06 · LIGNE ROUGE — le relevé et son jumeau (la contre-liste)
   Même grille, mêmes filets : la symétrie « ce qu'on tient / ce qu'on refuse »
   est évidente. Engagements : coche bleue (l'accent). Ligne rouge : trait d'encre.
   ========================================================================== */
.ap-releve {
  max-width: 52rem; margin-inline: auto;
  display: flex; flex-direction: column;
}
.ap-releve-item {
  display: grid; grid-template-columns: var(--space-6) 1fr;
  gap: var(--space-2) var(--space-6); align-items: start;
  padding-block: var(--space-6);
}
.ap-releve-item + .ap-releve-item {
  border-top: var(--filet-epaisseur) solid var(--color-bordure);
}
/* La coche (engagements) : le seul bleu de la section. */
.ap-releve-marque {
  width: var(--space-6); height: var(--space-6); flex: none;
  color: var(--color-accent);
  margin-top: calc(var(--space-1) / 2);
}
/* La marque d'encre (ligne rouge) : une « porte fermée », jamais une croix
   rouge ni un picto criard — la fermeté se dit en encre (charte : rouge réservé
   aux états d'erreur). Centrée sur la même gouttière de 24 px que la coche. */
.ap-contre-marque {
  width: var(--space-6); height: var(--space-6); flex: none;
  display: inline-flex; align-items: center; justify-content: flex-start;
  margin-top: calc(var(--space-1) / 2);
}
.ap-contre-marque::before {
  content: ""; width: var(--space-4); height: 2px;
  background: var(--color-encre); border-radius: 1px;
}
.ap-releve-corps { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ap-releve-titre {
  color: var(--color-encre);
  font-family: var(--font-titres); font-weight: var(--graisse-titre-doux);
  font-size: var(--text-h3); line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3); text-wrap: balance;
}
.ap-releve-glose { color: var(--color-encre-2); }
.ap-releve-mention { color: var(--color-encre-2); margin-top: var(--space-1); }

/* Intro / chute encadrant la contre-liste (la ligne rouge) — posées, centrées. */
.ap-intro {
  max-width: 44rem; margin-inline: auto; margin-bottom: var(--space-12);
  text-align: center; color: var(--color-encre);
  font-weight: var(--graisse-ui);
}
.ap-chute {
  max-width: 44rem; margin: var(--space-12) auto 0;
  text-align: center; color: var(--color-encre);
}

/* ==========================================================================
   07 · ALPHA — feuille de route honnête (3 jalons), reliés par un filet faible
   ========================================================================== */
.ap-roadmap {
  margin-top: var(--space-16);
  display: grid; grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 52rem;
}
@media (min-width: 640px) {
  .ap-roadmap { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); position: relative; }
  /* Le filet de continuité reliant les 3 jalons (registre trame d'agenda) :
     du centre de la 1re pastille au centre de la 3e. Les pastilles sont collées
     au bord GAUCHE de leur colonne (.ap-jalon est en align-items: flex-start),
     pas centrées dedans : leur centre vaut donc « bord gauche de colonne + la
     moitié de la pastille », jamais 1/6 de la largeur. Pour N=3 colonnes de gap g
     et une pastille p : left = p/2 · right = 100%/3 − 2g/3 − p/2. */
  .ap-roadmap::before {
    content: ""; position: absolute;
    top: calc(var(--space-6) / 2);
    left: calc(var(--space-6) / 2);
    right: calc((100% - 2 * var(--space-8)) / 3 - var(--space-6) / 2);
    height: var(--filet-epaisseur); background: var(--color-bordure);
    z-index: 0;
  }
}
.ap-jalon {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-2); position: relative; z-index: 1;
}
.ap-jalon-pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--space-6); height: var(--space-6); flex: none;
  border-radius: 50%;
  background: var(--color-fond);
  border: var(--filet-epaisseur) solid var(--color-bordure-forte);
}
.ap-jalon-pastille .coche-svg { width: var(--space-4); height: var(--space-4); color: var(--color-accent); }
.ap-jalon--actif .ap-jalon-pastille {
  background: var(--color-succes-surface); border-color: var(--color-accent);
}
.ap-jalon-titre { color: var(--color-encre); font-weight: var(--graisse-ui); margin-top: var(--space-1); }
.ap-jalon-etat { display: block; }
.ap-jalon--actif .ap-jalon-etat { color: var(--color-accent); }
/* Mobile : le filet devient VERTICAL, du centre de chaque pastille vers la
   suivante (hauteur du jalon + l'écart de grille) — les jalons ne flottent plus. */
@media (max-width: 639px) {
  .ap-jalon:not(:last-child)::before {
    content: ""; position: absolute; z-index: 0;
    left: calc(var(--space-6) / 2);
    top: calc(var(--space-6) / 2);
    width: var(--filet-epaisseur);
    height: calc(100% - var(--space-6) / 2 + var(--space-6));
    background: var(--color-bordure);
  }
}

/* ==========================================================================
   08 · SECTION NUIT — clause de garantie canonique datée + SEUL CTA de la page
   (réemploi du gabarit clause de composants.css : .garantie-inner / .clause /
   .clause-filet / .clause-date). Une seule section nuit ; le footer la prolonge.
   ========================================================================== */
.ap-garantie-sur { display: block; }
.ap-garantie-acte { text-align: center; }
.ap-garantie-acte .clause { max-width: none; text-wrap: balance; }
/* Sur petit écran, on borne la clause display-l pour qu'aucun mot (ni le guillemet
   fermant « » ») ne dépasse la colonne : la clause de garantie de livraison, plus
   longue, sinon force un scroll latéral (même garde-fou que la home §garantie). */
@media (max-width: 479px) {
  .ap-garantie-acte .clause { font-size: clamp(1.5rem, 0.85rem + 3.4vw, 2.125rem); }
}
.ap-garantie-appel {
  margin-top: var(--space-16);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-6);
}
.ap-garantie-promesse {
  color: var(--color-encre-nuit-2);
  max-width: 42rem; margin: 0 auto;
}
.ap-garantie-titre { color: var(--color-encre-nuit); max-width: 32rem; }
/* Le flux gère l'espacement : on neutralise le margin-top du bouton hérité
   du gabarit clause (composants.css .garantie-inner .btn). */
.ap-garantie .garantie-inner .btn { margin-top: 0; }
.ap-garantie-rea { color: var(--color-encre-nuit-2); }
.ap-garantie-rea--2 { margin-top: calc(-1 * var(--space-3)); }