/* Gestion by Belentia, DA v3.3 : styles de la page « accueil, après affine et v32 », repris tels quels de la maquette A.html (24/09/2026). */
/* ==================================================================
     v3.3 — kit « appareils » (../_assets/device.css, device.js).
     Réglages propres à l'accueil, chargés APRÈS v32.css. Les appareils
     sont montrés entiers : aucun masque, aucun recadrage, aucune rotation,
     aucune marge négative autour d'eux. Sous 720 px, l'écran d'ordinateur
     cède la place au téléphone (vraie capture mobile du même écran).
     ================================================================== */
  /* .dv-only-desktop / .dv-only-mobile : définis par le kit (bascule à 720 px). */

  /* Le reflet de sol reste visible sur les bandes #F7F8FA : isolation posée
     par le kit sur chaque .dv (boucle 4 : doublon de la page retiré). */


  /* Révélation : duo ordinateur + téléphone, largeur du kit (1 080 px). */
  .prod__stage { max-width: 1080px; }
  .prod .perks { margin-top: var(--space-8); }

  /* Ce que vous voyez : l'ordinateur centré, puis la carte à taille réelle. */
  .screen--kit { display: grid; justify-items: center; gap: var(--space-5); }
  .screen--kit > .dv--laptop { --dv-w: 960px; }
  .screen--kit .screen__cap { text-align: center; }
  .screen-row {
    display: grid;
    grid-template-columns: minmax(0, 543px) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: center;
    max-width: 960px;
    margin: var(--space-8) auto 0;
  }
  .screen-row__media img { width: 100%; height: auto; }
  .screen-row__text .screen__cap { display: block; max-width: 34ch; }
  .screen-row__text .screen__cap > span { margin-top: var(--space-1); line-height: 1.55; }

  /* Finitions v3.3 */
  #ecrans .section-head { margin-inline: auto; text-align: center; }
  #ecrans .section-head .eyebrow { justify-content: center; }
  .final { border-radius: var(--r-media, 24px); }
  .final .eyebrow + .h2 { margin-top: var(--space-2); }   /* même écart que les en-têtes de section */

  @media (max-width: 900px) {
    .screen-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); max-width: 543px; }
    /* Vos données : la nature morte (fond blanc pur) recentrée sur les
       tickets et les pièces, au lieu d'un zoom qui les laissait à droite. */
    .trust__media { position: relative; }
    .trust__media img {
      position: absolute;
      left: -41.9%;
      top: -26.4%;
      width: 133.5%;
      max-width: none;
      height: auto;
      object-fit: fill;
      transform: none;
    }
  }
  @media (max-width: 720px) {
    .shot figcaption { margin-top: var(--space-4); text-align: center; }
    /* Révélation : plus de pleine largeur, le téléphone seul, centré. */
    .prod__stage { margin-inline: 0; margin-top: var(--space-5); }
    .prod .dv-duo > .dv--laptop { display: none; }
    .prod .dv-duo > .dv--phone {
      --dv-w: min(74vw, 290px);
      position: relative;
      right: auto;
      bottom: auto;
      width: min(var(--dv-w), 100%);
      margin-inline: auto;
    }
    .prod .perks { margin-top: var(--space-6); }
    .screen--kit { gap: var(--space-4); }
    .screen-row { margin-top: var(--space-6); max-width: none; }
    .screen-row__text .screen__cap { max-width: none; }
    /* Onglets : trois colonnes égales, sur une seule ligne. */
    [data-autocycle] { flex-wrap: nowrap; gap: 0; }
    [data-autocycle] [role="tab"] { flex: 1 1 0; min-width: 0; padding-inline: 6px; text-align: center; }
  }

  /* ==================================================================
     Reprise du 23/09 — corrections après la critique (DA, 6,5/10).
     ================================================================== */
  .nw { white-space: nowrap; }                    /* « week-end » ne se coupe plus au trait d'union */
  /* Titres des guides : pretty (et espaces insécables après « d’un », « les ») plutôt que
     le balance de base.css, qui laissait « d’un » ou « les » en fin de ligne. */
  .h3, .guide-card__title, .steps__title { text-wrap: pretty; }

  /* Hero : visuel élargi (≈ 604 px à 1440), l'ordinateur du kit à la place de
     la fenêtre de navigateur, et les trois chiffres en rangée SOUS l'appareil :
     plus rien ne recouvre l'écran ni la légende, aucun parallaxe. */
  @media (min-width: 901px) {
    .hero__grid { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); gap: var(--space-6); }
  }
  /* Entre 901 et 1100 px : colonne de texte un peu plus étroite, pour que les
     trois étiquettes tiennent chacune sur une ligne sous l'ordinateur. */
  @media (min-width: 901px) and (max-width: 1100px) {
    .hero__grid { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: var(--space-5); }
    .hero .h1 { font-size: 46px; }
    .shot__tags { gap: 8px; }
    .shot__tags .tag { padding: 10px 12px; }
    .shot__tags .tag__label { font-size: 11px; letter-spacing: .02em; }
  }
  .shot__laptop { --dv-w: 100%; }
  .shot__tags {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: var(--space-4);
  }
  .shot__tags .tag { align-content: space-between; }
  .shot__tags .tag__value.accent { color: var(--accent); }   /* le collecté, en émeraude comme dans l'app */
  .shot figcaption { margin-top: var(--space-2); }

  /* Réassurance (coches) et cartes de guide (lien calé en bas) : règles
     communes dans v32.css et base.css ; les doublons de la page sont retirés
     (boucle 4). */
  /* Boucle 3, correction : de 721 à 1 024 px, les trois colonnes de 228 px
     coupaient deux titres en quatre lignes (un mot seul par ligne) et
     donnaient trois cartes de hauteurs différentes ; jusqu'à 1 199 px, elles
     en gardaient trois (« d’un week-end / entre amis »). Liste d'une colonne,
     comme sous 720 px : vignette carrée entière de 160 px à gauche, texte à
     droite (titres sur une ou deux lignes). Trois colonnes dès 1 200 px. */
  @media (min-width: 721px) and (max-width: 1199px) {
    #guides .grid-3 { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
    #guides .guide-card--row {
      display: grid;
      grid-template-columns: 160px minmax(0, 1fr);
      align-items: stretch;
      gap: var(--space-3);
      padding: var(--space-2);
    }
    #guides .guide-card--row > .guide-card__cover {
      width: 160px;
      height: 160px;
      border: 0;
      border-radius: 12px;
    }
    #guides .guide-card__body { padding: var(--space-1) 0; }
    #guides .guide-card__title { font-size: 20px; display: block; -webkit-line-clamp: unset; overflow: visible; }
  }

  @media (max-width: 900px) {
    /* Ce que vous voyez : une seule colonne centrée, comme l'appareil au-dessus. */
    .screen-row { justify-items: center; text-align: center; }
    .screen-row__text .screen__cap { margin-inline: auto; max-width: 34ch; }
    /* Tarifs : les trois mentions, une par ligne. */
    .plans-inc { flex-direction: column; gap: 4px; }
  }
  @media (max-width: 720px) {
    .hero { padding-top: var(--space-4); }
    .hero__grid { gap: var(--space-4); }
    .screen-row__media { width: 100%; max-width: min(74vw, 290px); margin-inline: auto; }
    .screen-row__text .screen__cap { max-width: 34ch; }
  }

  /* ==================================================================
     Boucle 2 (23/09) — corrections après la contre-critique (8/10).
     ================================================================== */
  /* Démonstration : la note et Pause / Rejouer sur l'axe de la carte.
     .tour--controls-flow (kit) pose les boutons dans le flux, sous la note ;
     en mouvement réduit, le kit n'affiche ni curseur, ni bulle, ni boutons
     (l'ancien masquage propre à la page est retiré, il faisait doublon). */
  #depense .demo-note { max-width: 620px; margin: var(--space-3) auto 0; padding-right: 0; text-align: center; }
  #depense .tour--controls-flow .tour__controls { justify-content: center; margin-top: 12px; }

  /* Téléphones qui défilent : la marge de fin (kit, --dv-scroll-end) prend la
     couleur du fond de l'app (#FCFBFC), pas le blanc de la barre d'état. */
  .dv--phone { --dv-scroll-end-bg: #FCFBFC; }

  /* Hero entre 901 et 1 100 px. Jusqu'à 1 023 px : une colonne, comme à 768
     (plus d'étiquettes ni de bouton qui passent à la ligne). De 1 024 à 1 100 px :
     deux colonnes, texte 464 px et boutons resserrés, sur une seule ligne
     (jusqu'à 1 120 px : entre 1 101 et 1 115 px, « Budget des projets » passait
     encore sur deux lignes). */
  @media (min-width: 901px) and (max-width: 1023px) {
    .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  }
  @media (min-width: 1024px) and (max-width: 1120px) {
    .hero__grid { grid-template-columns: minmax(0, 464px) minmax(0, 1fr); gap: var(--space-5); }
    .hero .h1 { font-size: 46px; }
    .hero .actions { gap: 12px; }
    .hero .actions .btn { padding-inline: 18px; }
  }

  @media (max-width: 720px) {
    /* Dans l'application : le texte prend la largeur du téléphone et de la carte. */
    .screen-row__text .screen__cap { max-width: min(74vw, 290px); }
    .screen-row__text .screen__cap > span { text-wrap: balance; }
    /* Révélation : trois atouts sur une ligne chacun, colonnes à leur largeur. */
    .prod .perks { grid-template-columns: auto auto auto; justify-content: space-evenly; }
    .prod .perks li { white-space: nowrap; }
  }

  /* ==================================================================
     Boucle 3 (23/09) — section ambiance, puis corrections après la
     2e contre-critique (8,5/10).
     ================================================================== */
  /* Ambiance (kit ../_assets/ambiance.css) : émeraude de l'outil, fond relevé
     du feuillage. En haut, l'espace de section de la démonstration suffit ;
     en bas, la section porte le sien : le panneau n'est jamais collé à la
     bande grise « Dans l'application ». */
  .amb--gestion {
    --amb-bg: #174F14;
    --amb-ink: #059669;
    --amb-pos: 66% 50%;
    --amb-pos-m: 74% 50%;
    --amb-y: 0 var(--section-y);
  }

  /* Téléphones. Boucle 4 : pause haute et repos réglés en px d'app par le
     kit (data-dv-top / data-dv-rest sur chaque appareil, identiques en
     mouvement normal et réduit) ; les anciennes fractions --dv-scroll-top /
     --dv-scroll-rest de la page sont retirées. Vue ≈ 794 px d'app, barre
     d'accueil de 780 à 785 px depuis le haut de la vue.
     - Hero (tableau de bord) : +7 px, la barre tombe dans le blanc de 12 px
       entre « Reste à collecter » (bord à 782) et « Mon solde personnel »
       (794), au moins 2 px d'air de chaque côté à 360 comme à 390, sous
       Chromium et WebKit (vue de 791,9 à 794,6 px selon l'arrondi) ; pause
       basse au bout de la capture.
     - Groupe (révélation) : capture de 1 722 px d'app ; en-tête non collant
       (pas de .dv__appbar). Pause haute +244 : la vue part du blanc au-dessus
       des boutons du groupe (233 à 260), montre Membres, Projets actifs,
       Budget actif et Collecté entiers ; la barre (1 024 à 1 029) tombe au
       milieu du blanc de 26 px entre « Collecté » (bord à 1 013) et
       « Projets » (1 039), où la vue s'arrête. Repos en mouvement réduit
       +712,5, à toutes les largeurs : la vue part du bas arrondi de la carte
       « Projets actifs » (texte fini à 703, bord à 730), montre Budget actif,
       Collecté, l'en-tête « Projets » et les deux premiers projets entiers,
       et s'arrête sur le filet qui sépare « Week-end à la mer » de
       « Peinture du salon » (1 505) ; barre sous le statut « Actif »
       (1 489 à 1 498 selon l'arrondi de la vue). À +734, la vue laissait
       voir le haut des lettres de « Peinture du salon » (1 526).
       Pause basse : marge de fin de 97,6 px d'app (22,7cqi, fond de l'app
       #FCFBFC), la vue part du blanc entre « Collecté » et « Projets ».
     - Projet (« Dans l'application ») : +19,5 px, la barre sous le nom de
       Noé ; pause basse +215 (data-dv-stop) : la vue part du blanc entre
       « Payé (validé) » et « Reste » d'Alice (207 à 223). En bout de course
       (+222 à +225 selon l'arrondi), elle frôlait le haut de « RESTE ». */
  .prod .dv--phone { --dv-scroll-end: 22.7cqi; }
  .screen__phone { --dv-status-bg: #FCFBFC; }
  .depense-carte { width: 100%; max-width: 543px; height: auto; }

  /* Comment ça marche, en quatre colonnes. Dès 1 188 px, les quatre titres
     tiennent sur une ligne (« Ajoutez membres et projets » faisait 272 px pour
     270 à 1 440). De 901 à 1 199 px, deux titres passent sur deux lignes : les
     quatre titres réservent alors deux lignes, et les textes partent tous à la
     même hauteur. Plus de « pourcentages. » seul sur sa ligne. */
  @media (min-width: 901px) {
    #etape-2-detail { text-wrap: balance; }
  }
  @media (min-width: 1025px) {
    #fonctionnement .steps__title { letter-spacing: -.01em; }
  }
  @media (min-width: 901px) and (max-width: 1199px) {
    #fonctionnement .steps__title { line-height: 1.25; min-height: 2.5em; }
  }

  /* Vos données, en deux colonnes : la nature morte prend la hauteur du texte
     (image posée en absolu, elle ne pousse plus la grille). Plus de 210 px de
     blanc au-dessus de « Vos données » ni sous « Rien n'est revendu ». */
  @media (min-width: 901px) {
    #donnees .trust { align-items: stretch; }
    #donnees .trust__media { position: relative; aspect-ratio: auto; min-height: 360px; }
    #donnees .trust__media img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 100% 52%;
    }
  }

  @media (max-width: 720px) {
    /* Démonstration : le nom du fichier sous le bouton dès le départ ; la
       carte ne grandit plus quand « recu-courses.jpg » est saisi. L'équilibre
       garde ses deux lignes pendant qu'il s'écrit (plus de saut de 28 px). */
    #depense .demo-file { flex-direction: column; align-items: flex-start; gap: 6px; }
    #depense .demo-balance > span { min-height: 3.2em; min-height: 2lh; }
  }
  /* Ambiance : la phrase se coupe après la virgule (« …ce qu'il a payé, /
     Gestion dit qui doit combien. »), pas au milieu de « qui / doit ». */
  .amb--gestion .amb__lead { text-wrap: balance; }

  /* ==================================================================
     Boucle 3, correction (23/09) — après la 3e critique (8,6/10).
     ================================================================== */

  /* Démonstration sur téléphone : 854 px de haut (898 avec Pause / Rejouer),
     elle ne tenait jamais entière dans un écran de 390 × 844. Libellés et
     valeurs sur une ligne, marges internes de 12 et 16 px, note et boutons
     resserrés : moins de 700 px en tout, la première étape et l'équilibre
     sont visibles ensemble sous la barre de navigation. */
  @media (max-width: 720px) {
    #depense .demo-stage { padding: 12px; }
    #depense .demo-app { padding: 16px; }
    #depense .demo-app__head { gap: 10px; padding-bottom: 20px; }   /* la bulle « Le montant payé » passe sous le bouton, sans le toucher */
    #depense .demo-row {
      grid-template-columns: 88px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      padding-block: 10px;
    }
    #depense #g-valider { margin-top: 16px; }
    #depense .demo-balance { padding: 12px 16px; }
    #depense .demo-note { margin-top: 8px; }
    #depense .tour--controls-flow .tour__controls { margin-top: 8px; }
  }

  /* Démonstration, à toutes les largeurs : 44 px entre « Valider la dépense »
     et l'équilibre. Les bulles « Le responsable valide » (sous le bouton) et
     « L’équilibre est à jour » (au-dessus de l'équilibre) tombent dans ce
     blanc, au lieu de couvrir « en attente de validation » ou le bouton. */
  #depense .demo-balance { margin-top: 44px; }

  /* Vos données, de 721 à 900 px : la nature morte (blanc sur blanc) faisait
     720 × 450 px entre deux bandes grises. Ramenée à 440 px et centrée,
     comme la même image à 390 (358 px). */
  @media (min-width: 721px) and (max-width: 900px) {
    #donnees .trust__media { width: 100%; max-width: 440px; margin-inline: auto; }
  }

  /* ==================================================================
     Boucle 4 (23/09) — après la 3e contre-critique (8,6/10).
     ================================================================== */

  /* Au quotidien : les trois panneaux dans une même cellule de grille. Le kit
     bascule toujours l'attribut hidden ; ici, un panneau masqué garde sa
     place (visibility, donc hors de l'arbre d'accessibilité et du focus) :
     la section a la hauteur du plus grand panneau et rien ne saute dessous
     quand le cycle change d'onglet (avant : +26, +189, −215 px à 390). */
  #quotidien .scen-stack { display: grid; }
  #quotidien .scen-stack > .scen { grid-area: 1 / 1; min-width: 0; }
  #quotidien .scen-stack > .scen[hidden] { display: block !important; visibility: hidden; }

  /* Révélation à 360 : les trois atouts (340 px) sortaient de 12 px de la
     gouttière. Jusqu'à 380 px : 14 px et 8 px d'écart, ~310 px pour 328. */
  @media (max-width: 380px) {
    .prod .perks { column-gap: 8px; }
    .prod .perks li { font-size: 14px; }
  }

  /* Démonstration sur téléphone : « Équilibre : » sur sa ligne, la phrase
     entière dessous (« Chloé doit 30 € à Alice. » ne se coupe plus entre la
     somme et la personne). Les deux lignes restent réservées. */
  @media (max-width: 720px) {
    #depense .demo-balance__label { display: block; }
  }

  /* ==================================================================
     Boucle 5 (24/09) — hero vivant : parcours sur les vraies captures.
     ================================================================== */
  .hero-tour { position: relative; }
  .hero-tour .tour-hit { position: absolute; display: block; z-index: 1; pointer-events: none; }
  .hero-tour__ctrls { margin-top: 12px; }
  .hero-tour__ctrls:empty { display: none; }
  .hero-tour .tour__btn { min-height: 30px; }
  /* la vue de l'ordinateur prend l'écran entier ; celle du téléphone, le fond de l'app */
  .shot__phone .dv__view { background: #FCFBFC; }