/* ---------------------------------------------------------------------------
 * 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;
  }
}

/* EN-TÊTE PLEINE LARGEUR, COLLÉ EN HAUT (retour utilisateur 2026-08-17 : « sur
 * mobile la navbar doit être tout en haut, on cherche à optimiser l'espace »).
 *
 * Le prototype pose une carte flottante : 10 px de marge haute et 10 px de
 * gouttière de chaque côté. Sur 375 px de large, cette bordure décorative
 * coûte de la hauteur au-dessus de la ligne de flottaison sans rien apporter.
 * L'en-tête devient une barre d'application : bord haut et bords latéraux
 * retirés, bord bas gardé, coins bas arrondis pour conserver le langage de la
 * carte.
 *
 * Le MÊME écart est posé dans `site_header.css` pour les 209 autres gabarits —
 * l'en-tête est un composant unique, il ne peut pas être collé en haut ici et
 * flottant ailleurs. Deux fichiers parce que `/` ne charge pas la transposition
 * (cf. `partials/site_header.html`), pas parce que la règle diverge. */
@media (max-width: 560px) {
  .d-page .d-header {
    width: 100%;
    margin-top: 0;
    padding: 0 14px 0 16px;
    border-width: 0 0 1px;
    border-radius: 0 0 12px 12px;
  }
}

/* ---------------------------------------------------------------------------
 * MOTEUR COLLANT MOBILE (`.d-mobile-search`) — remplace le `.e-mobile-sticky-cta`
 * du prototype, retiré le 2026-08-17.
 *
 * Trois différences avec la barre livrée, chacune sur un défaut constaté :
 *   1. c'est un CHAMP, pas un lien vers `#d-search` : la barre livrée faisait
 *      remonter la page jusqu'au moteur, où il fallait ensuite taper ;
 *   2. elle est masquée par défaut et révélée par la seule classe `is-visible`
 *      (`home_mobile_search.js`) — la barre livrée était visible dès le
 *      chargement, par-dessus le champ du hero qu'elle dupliquait ;
 *   3. surface claire et non pastille orange pleine : elle doit se lire comme
 *      un champ de saisie, l'orange restant sur l'action.
 *
 * ⚠️ Les tokens `--d-*` sont déclarés sur `.d-page` (04-version-d.css), pas sur
 * `:root` : la barre DOIT rester dans `.d-page`. `position: fixed` y survit,
 * cet ancêtre ne posant ni `transform` ni `filter` (qui en feraient un bloc
 * conteneur et transformeraient le `fixed` en `absolute` silencieusement).
 *
 * ⚠️ Le bandeau cookies (`#tarteaucitronAlertBig`, `z-index` 2147483645) passe
 * devant et le recouvre entièrement tant qu'il n'a pas été traité. Assumé : la
 * barre est alors invisible, jamais tronquée, et retrouve sa place au premier
 * choix de l'utilisateur.
 * ------------------------------------------------------------------------ */
.d-page .d-mobile-search {
  position: fixed;
  z-index: 120;
  left: 10px;
  right: 10px;
  /* `--d-kb-inset` est posée par le JS = hauteur masquée par le clavier
   * virtuel. Repli `0px` : sans `visualViewport`, la barre garde sa place. */
  bottom: calc(var(--d-kb-inset, 0px) + max(10px, env(safe-area-inset-bottom)));
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 0 8px 0 14px;
  border: 1px solid var(--d-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .24), 0 10px 28px rgba(255, 64, 0, .14);
  backdrop-filter: blur(14px);
  font-family: var(--ui);
}

.d-page .d-mobile-search-icon {
  flex: 0 0 auto;
  color: var(--d-blue-deep);
  font-size: 19px;
}

.d-page .d-mobile-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--d-slate);
  font-family: var(--ui);
  /* 16 px est un SEUIL, pas un goût : en dessous, iOS Safari zoome à la prise
   * de focus et ne revient jamais en arrière. */
  font-size: 16px;
  outline: none;
}

.d-page .d-mobile-search input::placeholder {
  color: var(--d-subtle);
}

.d-page .d-mobile-search button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--d-orange), #ff7a45); /* hex-ok — 2e stop du dégradé accent, pas de token autonome */
  color: var(--vefa-text-on-primary);
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 800;
}

@media (max-width: 860px) {
  /* `visibility` plutôt qu'une bascule `display` : une transition ne s'exécute
   * pas depuis `display: none`. La barre est donc posée mais hors de l'arbre
   * d'accessibilité et intactile tant que `is-visible` n'est pas là. */
  .d-page .d-mobile-search {
    display: flex;
    visibility: hidden;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  }

  .d-page .d-mobile-search.is-visible {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .d-page .d-mobile-search {
    transition: none;
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
 * 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;
  }
}