/* ---------------------------------------------------------------------------
 * Deltas d'intégration VefaConnect — chargé APRÈS les 5 feuilles du prototype.
 *
 * Les fichiers 01→05 sont des COPIES VERBATIM des sources du handoff : ils ne
 * doivent jamais être édités, sinon la comparaison A/B contre le bundle
 * compilé de référence perd sa valeur. Tout écart assumé vit ici, documenté.
 * ------------------------------------------------------------------------ */

/* La navigation hybride a été greffée de la variante E1 sur la variante D.
 * Côté E1, le CTA du header est masqué sous 560 px par une règle scopée
 * `.e-page-editorial` — que D n'hérite pas (sa racine est `.d-page` seule).
 * Sans elle, marque + CTA + burger ne tiennent pas sur la ligne : mesuré à
 * 390 px, le burger sortait du header de 28 px et était rogné par le bord de
 * l'écran, donc INATTEIGNABLE. On reproduit la règle, scopée à `.d-page` pour
 * ne toucher aucune autre page du site. */
@media (max-width: 560px) {
  .d-page .d-header .d-button-small {
    display: none;
  }

  .d-page .e-mobile-menu > summary {
    width: 44px;
    height: 44px;
  }

  .d-page .e-mobile-menu > nav {
    top: calc(100% + 10px);
    right: -1px;
  }
}

/* ---------------------------------------------------------------------------
 * Neutralisation de la fuite de cascade Bootstrap (étape 2 — base.html)
 *
 * base.html charge Bootstrap 5.3 depuis un CDN, HORS du bundle compress. Ses
 * sélecteurs d'ÉLÉMENT (`h2 {font-weight:500}`, `p {margin-bottom:1rem}`,
 * `label {…}`) ne sont dans aucune couche CSS, alors que le préflight du
 * prototype vit dans `@layer base` — la couche la MOINS prioritaire. Bootstrap
 * gagnait donc systématiquement.
 *
 * Mesuré avant correctif sur /home-d/ : 19 éléments sur 385 divergeaient
 * (titres passés en 700, H3 à 28 px, marges de paragraphe réintroduites).
 *
 * `:where()` porte une spécificité NULLE : ces règles pèsent donc exactement
 * (0,1,0) — assez pour battre un sélecteur d'élément nu, jamais assez pour
 * passer devant une règle du prototype (qui descend toujours d'une classe).
 * C'est ce qui rend le correctif sûr : il restaure la ligne de base du
 * préflight sans pouvoir écraser une intention de la maquette.
 * ------------------------------------------------------------------------ */
.d-page :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.d-page :where(p, ul, ol, figure, blockquote, dl, dd) {
  margin: 0;
}

.d-page :where(label) {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* ---------------------------------------------------------------------------
 * FAQ reprise de E1 sur la variante D — raffinements mobiles
 *
 * Les 8 règles `@media (max-width:560px)` qui règlent la FAQ côté E1 sont
 * scopées `.e-page-editorial` : D ne les hérite pas et garderait les tailles
 * desktop sur mobile, avec des `summary` sous la cible tactile de 44 px.
 * Reproduites ici à l'identique, scopées `.d-page`.
 * ------------------------------------------------------------------------ */
@media (max-width: 560px) {
  .d-page .e-faq {
    width: calc(100% - 28px);
    padding: 4px 0 72px;
    gap: 30px;
  }

  .d-page .e-faq-head > span {
    font-size: 11px;
  }

  .d-page .e-faq-head h2 {
    font-size: 38px;
  }

  .d-page .e-faq-head p {
    margin-top: 18px;
    font-size: 16px;
  }

  .d-page .e-faq-head > a {
    min-height: 44px;
    margin-top: 16px;
    font-size: 14px;
  }

  .d-page .e-faq-list summary {
    min-height: 80px;
    padding: 18px 0;
    grid-template-columns: 28px 1fr 32px;
    gap: 10px;
    font-size: 19px;
  }

  .d-page .e-faq-list summary > span {
    font-size: 10px;
  }

  .d-page .e-faq-list details > p {
    margin: -2px 0 0 38px;
    padding: 0 38px 22px 0;
    font-size: 16px;
  }
}

/* ---------------------------------------------------------------------------
 * Schéma de parcours repris de E1 sur la variante D
 *
 * Le markup est identique à E1, mais deux familles de règles ne s'appliquent
 * pas ici :
 *   1. celles qui exigent l'ancêtre `.e-reality` (le cadre blanc du bloc) —
 *      la section de D s'appelle `.d-reality` ;
 *   2. les 33 règles scopées `.e-page-editorial` (typographie, 860 px, 560 px)
 *      qui portent TOUTE la mise en page mobile : sans elles le rail reste
 *      horizontal sur 6 colonnes et déborde de l'écran.
 * Reproduites à l'identique, scopées `.d-page`.
 * ------------------------------------------------------------------------ */
.d-page .d-reality .e-journey {
  margin-top: 24px;
  padding: 30px 30px 27px;
  border-color: rgba(203, 213, 225, .86);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .08);

  /* `.d-reality` est une GRILLE côté D (un bloc côté E1) : le schéma y est donc
   * un élément de grille, dont le `min-width`/`min-height` implicite vaut
   * `auto` = min-content, et non 0. Aucun effet visible aujourd'hui, mais c'est
   * le débordement horizontal classique dès qu'un contenu refuse de rétrécir.
   * Les remettre à 0 aligne D sur les valeurs calculées d'E1. */
  min-width: 0;
  min-height: 0;
}

.d-page .e-journey-head span,
.d-page .e-simple-phases,
.d-page .e-simple-track b,
.d-page .e-simple-lanes span b {
  font-size: 12px;
}

.d-page .e-simple-track small,
.d-page .e-simple-lanes span small,
.d-page .e-simple-lane-vefa > i > b {
  font-size: 11px;
}

@media (max-width: 860px) {
  .d-page .d-reality .e-journey {
    overflow: visible;
  }

  .d-page .e-simple-journey {
    min-width: 0;
  }
}

@media (max-width: 560px) {
  .d-page .d-reality .e-journey {
    margin-top: 18px;
    padding: 22px 18px;
    overflow: visible;
  }

  .d-page .e-journey-head {
    margin-bottom: 26px;
  }

  .d-page .e-journey-head span {
    font-size: 11px;
  }

  .d-page .e-journey-head h3 {
    font-size: 26px;
    line-height: 1.05;
  }

  .d-page .e-journey-head > p {
    font-size: 15px;
  }

  .d-page .e-simple-phases {
    display: none;
  }

  .d-page .e-simple-track {
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
  }

  .d-page .e-simple-track::before {
    width: 4px;
    height: auto;
    left: 25px;
    right: auto;
    top: 27px;
    bottom: 27px;
    background: linear-gradient(180deg, #93c5fd 0%, #3498db 38%, #ff7a45 58%, #ff4000 100%);
  }

  .d-page .e-simple-track > span {
    min-height: 82px;
    display: grid;
    grid-template-columns: 54px 1fr;
    grid-template-rows: auto auto;
    justify-items: start;
    align-content: center;
    column-gap: 14px;
    text-align: left;
  }

  .d-page .e-simple-track i {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }

  .d-page .e-simple-track b {
    grid-column: 2;
    margin-top: 7px;
    font-size: 14px;
  }

  .d-page .e-simple-track small {
    grid-column: 2;
    margin-top: 2px;
    font-size: 12px;
  }

  .d-page .e-simple-lanes {
    margin-top: 20px;
    padding: 14px;
  }

  .d-page .e-simple-lanes > div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .d-page .e-simple-lanes span b {
    font-size: 13px;
  }

  .d-page .e-simple-lanes span small {
    font-size: 12px;
  }

  .d-page .e-simple-lanes > div > i {
    height: 22px;
  }

  .d-page .e-simple-lane-vefa > i > b {
    overflow: hidden;
    font-size: 10px;
    white-space: nowrap;
  }

  .d-page .e-journey-warning {
    margin-top: 20px;
    padding: 17px;
    grid-template-columns: 40px 1fr;
    align-items: start;
    gap: 12px;
    border-radius: 12px;
  }

  .d-page .e-journey-warning > span {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 18px;
  }

  .d-page .e-journey-warning small {
    font-size: 10px;
    line-height: 1.35;
  }

  .d-page .e-journey-warning strong {
    margin-top: 7px;
    font-size: 19px;
  }

  .d-page .e-journey-warning p {
    grid-column: 1 / -1;
    font-size: 15px;
  }
}

/* ---------------------------------------------------------------------------
 * FAQ — contenu riche venu de l'admin
 *
 * Le prototype livrait des réponses en dur : un paragraphe, jamais autre chose.
 * Elles viennent maintenant de `FAQItem.answer` (CKEditor), donc un éditeur
 * peut légitimement poser une liste, un lien ou du gras — que le CSS d'origine
 * ne prévoit pas et qui sortirait sans style. On aligne ces cas sur la mise en
 * forme du paragraphe existant (`.e-faq-list details > p`) plutôt que d'ouvrir
 * un nouveau langage visuel.
 * ------------------------------------------------------------------------ */
.d-page .e-faq-list details > ul,
.d-page .e-faq-list details > ol {
  max-width: 650px;
  margin: -6px 54px 0;
  padding: 0 0 26px 20px;
  color: var(--d-muted);
  font-size: 17px;
  line-height: 1.58;
}

.d-page .e-faq-list details > ul > li,
.d-page .e-faq-list details > ol > li {
  margin-bottom: 6px;
}

/* Deux paragraphes de suite : la marge négative du premier (qui le recolle au
 * summary) creuserait un chevauchement sur les suivants. */
.d-page .e-faq-list details > p ~ p {
  margin-top: 0;
  padding-top: 0;
}

.d-page .e-faq-list details a {
  color: var(--d-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/---------------------------------------------------------------------------
 * Visuel de tête « photo cadrée » — transposition de scope
 *
 * La composition livrée (source/page.tsx, route /version-e1) est stylée
 * sous `.e-page-editorial`, la racine du prototype E1. Notre page a pour
 * racine `.d-page` : sans ces copies, le hero sortirait NON STYLÉ.
 * C'est le même piège que pour le CTA du header, le burger, la FAQ et le
 * schéma de parcours — cinquième occurrence.
 *
 * Copies conformes des règles d'origine, seul le scope change. Ne pas les
 * modifier ici : corriger la source puis retransposer.
 ---------------------------------------------------------------------------*/
.d-page .e-hero {
  background:
    radial-gradient(circle at 78% 55%, rgba(255, 64, 0, .09), transparent 23%),
    linear-gradient(90deg, rgba(52, 152, 219, .07) 0%, rgba(52, 152, 219, .025) 47%, transparent 47%),
    linear-gradient(135deg, #eff6ff 0%, #fff 55%, #fff7ed 100%);
}
.d-page .e-hero-copy, .d-page .e-editorial-media {
  transform: translateY(clamp(-72px, -7vh, -42px));
}

@media (max-width: 860px) {
  .d-page .e-hero-copy, .d-page .e-editorial-media {
    transform: none;
  }
  .d-page .e-hero, .d-page .d-hero {
    height: auto;
    min-height: 0;
  }
  .d-page .e-editorial-inner {
    height: auto;
    min-height: 0;
    padding-bottom: 48px;
    gap: 30px;
  }
}

@media (max-width: 560px) {
  .d-page .e-editorial-inner {
    width: calc(100% - 28px);
    padding: 44px 0 32px;
    gap: 22px;
  }
  .d-page .e-hero h1 {
    margin: 20px 0 18px;
    font-size: 42px;
    line-height: .98;
  }
  .d-page .e-hero-copy > p {
    margin-bottom: 22px;
    font-size: 17px;
    line-height: 1.5;
  }
  .d-page .e-editorial-media {
    width: 100%;
    height: 300px;
    min-height: 0;
  }
  .d-page .e-photo-frame {
    width: 92%;
    padding: 7px;
    border-radius: 9px 20px 9px 20px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, .14);
  }
  .d-page .e-photo-frame img {
    aspect-ratio: 4 / 3;
    border-radius: 5px 15px 5px 15px;
  }
  .d-page .e-conversation-card {
    width: 84%;
    left: 1%;
    bottom: -2px;
    padding: 12px;
    transform: rotate(-1deg);
  }
  .d-page .e-conversation-card > small, .d-page .e-neighbor-summary span, .d-page .e-message-preview p > span, .d-page .e-message-preview > a {
    font-size: 11px;
  }
  .d-page .e-neighbor-summary strong, .d-page .e-message-preview strong {
    font-size: 13px;
  }
  .d-page .e-editorial-inner {
    padding-bottom: 42px;
  }
  .d-page .e-editorial-media {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid rgba(203, 213, 225, .92);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 22px 52px rgba(15, 23, 42, .14);
  }
  .d-page .e-photo-frame {
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }
  .d-page .e-photo-frame img {
    width: 100%;
    height: 218px;
    aspect-ratio: auto;
    border-radius: 0;
    object-position: 68% 42%;
  }
  .d-page .e-conversation-card {
    position: relative;
    width: 100%;
    left: auto;
    bottom: auto;
    padding: 16px;
    border: 0;
    border-top: 1px solid var(--d-border);
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }
  .d-page .e-neighbor-summary {
    padding-block: 12px;
  }
}

/* ---------------------------------------------------------------------------
 * « Qui est derrière VefaConnect » — section ajoutée hors livrable
 *
 * Le prototype n'a pas de bloc « à propos ». Ces classes sont donc PROPRES au
 * site (elles n'existent dans aucune feuille du handoff) et vivent ici, jamais
 * dans 04/05 dont le contenu est comparé octet à octet avec la livraison.
 *
 * Aucun langage visuel nouveau : mêmes tokens, même serif éditoriale pour le
 * titre, même ombre teintée slate que les cartes de la page (jamais de noir
 * pur, cf. les règles de marque du message de livraison).
 * ------------------------------------------------------------------------ */
.d-page .d-about {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding: 78px 0 4px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 54px;
}

.d-page .d-about-copy h2 {
  margin: 14px 0 18px;
  font-family: Charter, "Bitstream Charter", "PT Serif", Georgia, serif;
  font-size: 38px;
  line-height: 1.12;
  letter-spacing: -.04em;
  color: var(--d-slate);
}

.d-page .d-about-copy h2 em {
  font-style: italic;
  color: var(--d-blue-deep);
}

.d-page .d-about-copy p {
  max-width: 620px;
  margin: 0 0 12px;
  color: var(--d-muted);
  font-size: 17px;
  line-height: 1.62;
}

.d-page .d-about-copy strong {
  color: var(--d-slate);
  font-weight: 750;
}

/* Carte auteur : le visage est le signal de confiance, il porte donc la carte. */
.d-page .d-about-card {
  width: 300px;
  padding: 26px;
  display: grid;
  justify-items: center;
  gap: 16px;
  border: 1px solid var(--d-border);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .08);
  text-align: center;
}

.d-page .d-about-card img {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}

.d-page .d-about-card strong {
  display: block;
  font-family: var(--ui);
  font-size: 17px;
  font-weight: 850;
  letter-spacing: -.02em;
  color: var(--d-slate);
}

.d-page .d-about-card small {
  display: block;
  margin-top: 5px;
  color: var(--d-muted);
  font-family: var(--ui);
  font-size: 12px;
  line-height: 1.45;
}

.d-page .d-about-card a {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--d-orange);
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.d-page .d-about-card a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 860px) {
  .d-page .d-about {
    padding-top: 58px;
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 32px;
  }

  .d-page .d-about-copy h2 { font-size: 32px; }
}

@media (max-width: 560px) {
  .d-page .d-about {
    width: calc(100% - 28px);
    padding-top: 44px;
    gap: 26px;
  }

  .d-page .d-about-copy h2 { font-size: 27px; }
  .d-page .d-about-copy p { font-size: 15px; }

  /* La carte prend toute la largeur : à 300 px fixes elle laissait une
   * gouttière asymétrique une fois la grille passée en colonne. */
  .d-page .d-about-card {
    width: 100%;
    padding: 22px;
  }
}

/* Cible tactile du lien de la carte auteur : 21 px de haut en texte inline,
 * sous le minimum de 44 px. On élargit la zone cliquable au doigt sans toucher
 * au rendu à la souris — inutile de reproduire dans du code neuf le défaut
 * relevé sur la navbar mobile du site. */
@media (pointer: coarse) {
  .d-page .d-about-card a {
    min-height: 44px;
    padding: 0 8px;
  }
}