/* ==========================================================================
   Le mobile. 17 septembre 2026, sur demande : « la responsive mobile du site,
   en UI/UX et fluidité, fais-moi un truc incroyable, on la reprendra après ».

   Chargée en dernier, et bornée : rien ici ne touche un écran de bureau.
   Deux portées seulement :
   - `(hover: none), (pointer: coarse)` pour ce qui tient au doigt, à toutes
     les largeurs (tablette comprise) ;
   - `(max-width: 767px)` pour la mise en page du téléphone.

   Aucune valeur neuve n'entre dans le système : les écarts sont des
   multiples de --spacing, les rayons sont ceux de l'échelle, les couleurs
   sont celles déjà posées ailleurs dans la page.

   ⚠️ **Deux écarts avec CLAUDE.md, et ce sont des décisions à relire.**
   1. **Les six résultats passent en piste horizontale** sur téléphone, au
      lieu de six cartes empilées (2 800 px de défilement). La règle
      « sur mobile, tout passe en une colonne » est donc écartée pour eux.
      Le poids égal tient : même largeur, même carte, une à la fois.
   2. **Une barre d'action apparaît en bas de l'écran** une fois le hero
      passé, et se retire au rendez-vous. Même libellé et même cible que les
      autres, « Voir mon éligibilité » vers #rendez-vous : l'objectif ne
      double pas, mais c'est un mouvement commandé par le défilement.
   Pour revenir en arrière : retirer la ligne de ce fichier et celle de
   mobile.js dans index.html. Une copie des fichiers d'avant est dans
   _sauvegarde-avant-mobile/.
   ========================================================================== */


/* La barre d'action n'existe que sur téléphone. Hors de cette largeur, le
   lien posé par mobile.js dans le dock ne s'affiche pas. */
.mobile-cta,
.mobile-points,
.frise-levier { display: none; }
.mobile-bascule[hidden] { display: none !important; }


/* --------------------------------------------------------------------------
   1. Le doigt : pas de flash au toucher, pas de délai, pas de survol collé
   -------------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
  html {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  a, button, label, summary, select, input, textarea, [role="tab"] {
    touch-action: manipulation;
  }

  /* Un survol n'existe pas au doigt : après un toucher, il reste posé tant
     qu'on ne touche pas ailleurs. Le libellé qui roule restait donc sur sa
     copie, et le bouton principal gardait sa flèche à gauche. Le focus
     clavier garde son effet. */
  .bouton:hover:not(:focus-visible) .lettre,
  .lien-nav:hover:not(:focus-visible) .lettre {
    transform: translateY(0) rotate(.001deg);
  }

  .btn-principal:hover:not(:focus-visible) { padding: 4px 58px 4px 24px; }
  .btn-principal:hover:not(:focus-visible) .btn-principal__icon {
    right: 6px;
    rotate: 0deg;
  }

  /* À la place : une réponse à la pression, courte et franche. Le bouton
     s'enfonce, la flèche part vers la cible. */
  .bouton,
  .btn-principal,
  .onglet,
  .frise-barre,
  .frise-plus,
  .equipe-fleche,
  .prequal-option,
  .faq-item > summary {
    transition-property: color, background-color, border-color, box-shadow, opacity, padding, scale;
    transition-duration: var(--motion-instant);
    transition-timing-function: var(--ease-out);
  }

  .bouton:active,
  .btn-principal:active,
  .onglet:active,
  .frise-barre:active,
  .frise-plus:active,
  .equipe-fleche:active,
  .prequal-option:active {
    scale: .96;
  }

  .faq-item > summary:active { background-color: rgb(28 28 28 / .03); }

  .btn-principal:active .btn-principal__icon { rotate: 45deg; }
}


/* --------------------------------------------------------------------------
   2. Le téléphone
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

  /* Le défilement vers une ancre s'arrête sous la barre, pas derrière. */
  html { scroll-padding-top: calc(var(--spacing) * 88); }

  /* Les encoches et la barre des gestes. */
  .entete { padding-top: env(safe-area-inset-top, 0px); }
  .chat-dock { inset-block-end: calc(var(--spacing) * 12 + env(safe-area-inset-bottom, 0px)); }

  /* La barre du bas ne doit jamais couvrir la fin de la page. */
  .pied { padding-block-end: calc(var(--spacing) * 88 + env(safe-area-inset-bottom, 0px)); }


  /* ---- 2.1 Le menu ------------------------------------------------------
     Il se déplie en feuille sous la pilule, avec des cibles de 48 px, et ses
     liens arrivent l'un après l'autre (le geste « data-menu-reveal » de
     Pulsor déjà relevé en section 5.7). Un voile derrière lui dit qu'il
     suffit de toucher à côté pour le fermer. */
  .entete-nav {
    padding: calc(var(--spacing) * 12);
    gap: 0;
    border-radius: var(--r-xl);
    transform-origin: top center;
  }

  .entete-nav[data-ouvert="oui"] {
    animation: mobile-feuille var(--motion-quick) var(--ease-out) both;
  }

  .entete-nav .lien-nav {
    display: flex;
    align-items: center;
    min-block-size: calc(var(--spacing) * 48);
    padding: 0 calc(var(--spacing) * 12);
    border-radius: var(--r-md);
    font-size: var(--corps);
  }

  .entete-nav .lien-nav + .lien-nav { border-block-start: 1px solid var(--gris-grille); }
  .entete-nav .lien-nav:active { background: var(--gris-clair); }

  .entete-nav[data-ouvert="oui"] > * {
    animation: mobile-lien 450ms cubic-bezier(.66, .01, .17, .97) both;
  }
  .entete-nav[data-ouvert="oui"] > :nth-child(1) { animation-delay: 40ms; }
  .entete-nav[data-ouvert="oui"] > :nth-child(2) { animation-delay: 80ms; }
  .entete-nav[data-ouvert="oui"] > :nth-child(3) { animation-delay: 120ms; }
  .entete-nav[data-ouvert="oui"] > :nth-child(4) { animation-delay: 160ms; }
  .entete-nav[data-ouvert="oui"] > :nth-child(5) { animation-delay: 200ms; }
  .entete-nav[data-ouvert="oui"] > :nth-child(6) { animation-delay: 240ms; }

  .entete-nav .entete-nav-cta {
    justify-content: center;
    margin-block-start: calc(var(--spacing) * 12);
  }

  .mobile-voile {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgb(28 28 28 / .16);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-quick) var(--ease-out);
  }
  .mobile-voile[data-ouvert] { opacity: 1; pointer-events: auto; }


  /* ---- 2.2 Le hero ------------------------------------------------------
     Refait le 17 septembre 2026, sur demande, dans cet ordre : le titre
     centré, l'animation, les deux boutons, le prix, puis les engagements.
     L'entonnoir est hors de la colonne de texte dans le balisage : les
     enveloppes s'effacent (display: contents) pour que tout devienne un
     élément de la même colonne, et `order` fait le reste. Le balisage et
     l'ordre de lecture à la voix ne changent pas. */
  /* Le premier écran doit montrer les deux boutons, même sur 620 px de
     haut : le haut du hero, l'écart sous le titre et le corps du sous-titre
     se resserrent. */
  .s-hero {
    row-gap: 0;
    min-height: 0;
    padding-top: calc(var(--spacing) * 108 + env(safe-area-inset-top, 0px));
  }
  .s-hero .hero-sous {
    margin-block-start: calc(var(--spacing) * 14);
    font-size: 15px;
    line-height: 1.45;
  }

  .s-hero .hero-grille,
  .s-hero .hero-grille > .pile-bloc,
  .s-hero .hero-actions { display: contents; }

  .s-hero .pile-intra,
  .s-hero .boutons,
  .s-hero .hero-prix,
  .s-hero .preuve-ligne {
    position: relative;
    z-index: 1;
    margin-inline: var(--marge-laterale);
  }

  .s-hero .pile-intra {
    order: 0;
    align-items: center;
    text-align: center;
  }
  .s-hero h1,
  .s-hero .hero-sous {
    margin-inline: auto;
    text-align: center;
    text-wrap: balance;
  }

  /* La hauteur de l'entonnoir est calculée par mobile.js pour que les deux
     boutons tiennent dans le premier écran, quelle que soit sa hauteur
     (17 septembre 2026, sur demande : « on voit aucun CTA »). Le repli est
     borné par la hauteur de la fenêtre. Le canal est centré sur la largeur :
     il était placé depuis le bord droit sur la largeur nominale du bureau,
     28 px à droite du milieu. site.js lit sa position réelle et y pose la
     pointe du cône, qui se centre avec lui. La course du cône se resserre
     pour rester au milieu. */
  .hero-entonnoir {
    --facteur-angle: .4;
    order: 1;
    height: var(--hauteur-entonnoir-mobile, clamp(calc(var(--spacing) * 130), calc(100svh - var(--spacing) * 470), calc(var(--spacing) * 320)));
    margin-block: 0;
  }
  .hero-entonnoir .entonnoir-canal { inset-inline-end: 50%; }

  .s-hero .boutons {
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--spacing) * 12);
    inline-size: auto;
    max-inline-size: none;
  }
  .s-hero .boutons > * { justify-content: center; inline-size: auto; }

  .s-hero .hero-prix {
    order: 3;
    align-self: center;
    margin-block-start: calc(var(--spacing) * 20);
  }

  .s-hero .preuve-ligne {
    order: 4;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--spacing) * 10);
    margin-block-start: calc(var(--spacing) * 24);
  }

  .hero-prix {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: calc(var(--spacing) * 2);
    column-gap: calc(var(--spacing) * 10);
    white-space: normal;
    padding: calc(var(--spacing) * 10) calc(var(--spacing) * 16);
    font-size: var(--corps-sm);
    text-align: center;
  }

  /* « Démarrage octobre » prend sa ligne : le point médian qui le précède
     restait sinon seul au bout de la première. */
  .hero-prix > .hero-prix-sep ~ .hero-prix-sep { display: none; }
  .hero-prix > :last-child { flex-basis: 100%; }

  .s-hero { padding-block-end: 0; }


  /* ---- 2.3 Les onglets : la barre de la méthode --------------------------
     Le même système qu'aux quatre leviers (§ 2.6 ter), sur demande, pour
     Signal puis pour la FAQ : la barre reste à sa place dans la page, tous les
     onglets sont visibles d'un coup et se partagent la largeur à poids égal,
     l'icône au-dessus du libellé, et une seule vue est affichée. Rien à faire
     glisser pour savoir ce qu'il y a.

     ⚠️ **Ce qui est remplacé, et pourquoi.** Les deux barres étaient une piste
     qui glissait au doigt, avec un fondu au bord. Relevé à 375 px : elle
     montrait un onglet et demi sur les six de Signal. **Une barre qui cache ce
     qu'elle contient ne dit pas combien il y en a**, et le nombre de vues est
     justement ce que la section démontre.

     ⚠️ **Signal tient deux rangées de trois, la FAQ une rangée de trois.**
     Relevé à 375 px : la barre de Signal a 271 px de large dans son panneau ;
     six colonnes en laisseraient 42 à chaque onglet, et « concurrents » en
     demande 62 au corps des onglets de téléphone. Les deux seules sorties
     étaient de descendre le corps sous 11 px, ou de réécrire les six libellés,
     qui sont du copy. **Le poids égal, lui, tient : les cellules sont
     identiques dans les deux barres.**

     ⚠️ **Et la barre n'est plus une pilule, parce qu'une barre à deux rangées
     n'en est pas une.** Le rayon plein aurait rogné les onglets de coin. Les
     deux rayons restent concentriques, comme au bouton à double coque : 16 à
     l'onglet, 8 de gouttière, 24 à la barre. **C'est déjà le rayon de la barre
     de la FAQ au bureau**, et aucune valeur neuve n'entre.

     ⚠️ **La barre de la FAQ perd son collant.** Au bureau elle suit le
     défilement le long des questions ; posée au-dessus d'elles sur téléphone,
     elle se serait collée sous l'en-tête et aurait mangé un cinquième de
     l'écran. C'est le même arbitrage qu'aux leviers, dont la barre est posée
     ici aussi. */
  .signal-vues .onglets,
  .faq-vues .onglets.onglets-vertical {
    position: static;
    display: grid;
    /* Trois colonnes des deux côtés : Signal en fait deux rangées de trois,
       la FAQ une seule rangée de trois. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Les rangées font la même hauteur : « Vos concurrents » passe sur deux
       lignes, et sans ça sa rangée était dix pixels plus haute que l'autre.
       Des cellules identiques, c'est la loi du poids égal. */
    grid-auto-rows: 1fr;
    align-self: stretch;
    max-inline-size: none;
    gap: calc(var(--spacing) * 8);
    padding: calc(var(--spacing) * 8);
    border-radius: var(--r-xl);
  }

  .signal-vues .onglet,
  .faq-vues .onglets-vertical .onglet {
    flex-direction: column;
    /* Rangés en haut et non centrés, contrairement aux quatre leviers : un
       libellé passe sur deux lignes, et centré il faisait monter son icône
       plus haut que ses voisines. En haut, les icônes et les premières lignes
       tombent à la même hauteur. */
    justify-content: flex-start;
    align-items: center;
    gap: calc(var(--spacing) * 4);
    min-block-size: calc(var(--spacing) * 56);
    padding: calc(var(--spacing) * 8) calc(var(--spacing) * 4);
    border-radius: var(--r-lg);
    font-size: var(--text-xs);
    line-height: 1.2;
    text-align: center;
  }

  /* L'enveloppe du libellé de la FAQ est une colonne au bureau, où elle porte
     un sous-titre. Ici elle n'a plus qu'à laisser passer le titre. */
  .faq-vues .onglets-vertical .onglet-texte { align-items: center; }

  .signal-vues { gap: calc(var(--spacing) * 20); }

  /* Les vues ne se superposent plus : seule la vue tenue prend de la place.
     Superposées, la scène prenait la hauteur de la plus haute, et la FAQ
     laissait 200 px de vide sous le groupe le plus court. */
  .faq-vues[data-arme] .faq-vue:not([data-actif]),
  .signal-vue:not([data-actif]) { display: none; }

  .faq-vues[data-arme] .faq-vue[data-actif],
  .signal-vue[data-actif] {
    animation: mobile-vue var(--motion-quick) var(--ease-out) both;
  }

  .signal-vue { padding: calc(var(--spacing) * 20); gap: calc(var(--spacing) * 20); }


  /* ---- 2.4 La FAQ -------------------------------------------------------
     La question entière est la cible, avec un appui visible. */
  .faq-vue .faq-item > summary {
    min-block-size: calc(var(--spacing) * 56);
    padding-block: calc(var(--spacing) * 16);
    -webkit-user-select: none;
    user-select: none;
  }


  /* ---- 2.5 Les six résultats en piste -----------------------------------
     Une carte par écran, la suivante qui dépasse de 14 %, l'ancrage du
     navigateur. Les points dessous disent où l'on est et combien il en reste
     (posés par mobile.js). Les cartes gardent un seul ordre, l'animation en
     haut : une sur deux la mettait en bas, ce qui se lit mal à la suite. */
  #resultats .card-grid-anim {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 76%;
    gap: calc(var(--spacing) * 12);
    margin-inline: calc(var(--marge-laterale) * -1);
    padding: calc(var(--spacing) * 8) var(--marge-laterale) calc(var(--spacing) * 20);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--marge-laterale);
    scrollbar-width: none;
  }
  #resultats .card-grid-anim::-webkit-scrollbar { display: none; }

  #resultats .res-carte {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Le cadre de texte est posé sur le haut de la carte, et mord sur
     l'animation qui suit, pour les six (17 septembre 2026, sur demande). */
  #resultats .res-carte .res-cadre {
    order: -1;
    margin-block: calc(var(--spacing) * 4) calc(var(--res-morsure) * -1);
  }
  #resultats .res-carte .carte-anim.carte-anim {
    padding-block: calc(var(--spacing) * 20 + var(--res-morsure)) calc(var(--spacing) * 20);
  }

  /* Les cadres de texte d'une même piste ont la même hauteur : la carte la
     plus courte ne flotte pas au-dessus du vide. */
  #resultats .res-carte { display: flex; flex-direction: column; }
  #resultats .res-carte .carte-anim.carte-anim { flex: 1 0 auto; }

  /* Des cartes plus petites (17 septembre 2026, sur demande) : la scène
     descend de 272 à 190 px, le cadre de texte se resserre. */
  #resultats .res-carte .carte-anim.carte-anim {
    min-block-size: calc(var(--spacing) * 190);
    aspect-ratio: auto;
  }
  #resultats .res-cadre {
    flex: none;
    gap: calc(var(--spacing) * 4);
    padding: calc(var(--spacing) * 14) calc(var(--spacing) * 16) calc(var(--spacing) * 16);
  }
  #resultats .res-cadre .carte-titre { font-size: var(--text-l); line-height: 1.2; }
  #resultats .res-cadre .carte-texte { font-size: var(--text-s); line-height: 1.45; }
  #resultats .res-stat-valeur { font-size: var(--titre-sm); }

  /* Les points à gauche, les flèches à droite, sous la piste. */
  .mobile-piste-nav:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 12);
  }
  .mobile-piste-nav .mobile-points { justify-content: flex-start; }
  .mobile-piste-nav .equipe-fleches { display: flex; }
  .mobile-piste-nav .equipe-fleche {
    inline-size: calc(var(--spacing) * 44);
    block-size: calc(var(--spacing) * 44);
  }

  .mobile-points:not([hidden]) {
    display: flex;
    justify-content: center;
    gap: calc(var(--spacing) * 8);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mobile-points button {
    display: grid;
    place-items: center;
    inline-size: calc(var(--spacing) * 24);
    block-size: calc(var(--spacing) * 24);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .mobile-points button::before {
    content: "";
    inline-size: calc(var(--spacing) * 8);
    block-size: calc(var(--spacing) * 8);
    border-radius: var(--r-full);
    background: rgb(28 28 28 / .18);
    transition:
      inline-size var(--motion-quick) var(--ease-out),
      background-color var(--motion-quick) var(--ease-out);
  }

  .mobile-points button[aria-current="true"]::before {
    inline-size: calc(var(--spacing) * 24);
    background: var(--noir);
  }


  /* ---- 2.6 L'offre ------------------------------------------------------
     Refaite le 17 septembre 2026, sur demande (« en UX c'est affreux »).
     Les quatre pilules et les quatre dates empilées se lisaient comme deux
     listes sans rapport. Sur téléphone, il n'en reste qu'une : une
     chronologie verticale, un point par jalon sur un rail, la date en gros,
     et le levier du même rang en étiquette (posée par mobile.js, puisque
     ouvrir une date tient déjà ce levier). Toute la ligne ouvre le détail. */
  .frise {
    position: relative;
    row-gap: 0;
    padding: 0;
  }
  .frise .frise-barre { display: none; }

  .frise::before {
    content: "";
    position: absolute;
    inset-block: calc(var(--spacing) * 34);
    inset-inline-start: calc(var(--spacing) * 11);
    inline-size: 2px;
    border-radius: var(--r-full);
    background: linear-gradient(180deg, var(--bleu), var(--gris-grille) 60%);
  }

  .frise .frise-temp,
  [data-repli] .frise-temp {
    margin: 0;
    padding: calc(var(--spacing) * 16) 0 calc(var(--spacing) * 16) calc(var(--spacing) * 40);
    border-radius: 0;
  }
  .frise-temp + .frise-temp { border-block-start: 1px solid var(--gris-grille); }
  .frise .frise-temp::before { display: none; }

  /* Le point du jalon. Plein et cerclé quand la date est tenue. */
  .frise .frise-temp::after {
    content: "";
    position: absolute;
    inset-block-start: calc(var(--spacing) * 26);
    inset-inline-start: calc(var(--spacing) * 5);
    inline-size: calc(var(--spacing) * 14);
    block-size: calc(var(--spacing) * 14);
    border: 2px solid var(--gris-grille);
    border-radius: var(--r-full);
    background: var(--fond-page);
    transition:
      background-color var(--motion-quick) var(--ease-out),
      border-color var(--motion-quick) var(--ease-out),
      box-shadow var(--motion-quick) var(--ease-out);
  }
  .frise .frise-temp[data-actif="oui"]::after {
    border-color: var(--bleu);
    background: var(--bleu);
    box-shadow: 0 0 0 4px rgb(0 145 255 / .16);
  }

  .frise .frise-mois,
  [data-repli] .frise .frise-mois {
    padding-block-end: 0;
    border-block-end: 0;
  }

  .frise-quand {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: calc(var(--spacing) * 8);
    row-gap: calc(var(--spacing) * 6);
  }
  .frise-quand .frise-date { grid-column: 1 / -1; }

  .frise-levier {
    display: inline-block;
    justify-self: start;
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 8);
    border-radius: var(--r-full);
    background: #E8F4FF;
    color: #006BBF;
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
  }

  .frise-plus {
    inline-size: calc(var(--spacing) * 40);
    block-size: calc(var(--spacing) * 40);
  }

  /* Toute la ligne de la date ouvre le détail : le « + » seul était une
     cible de 32 px au bout d'une ligne de 300. */
  [data-repli] .frise-mois { position: relative; }
  [data-repli] .frise-plus::after {
    content: "";
    position: absolute;
    inset: calc(var(--spacing) * -16) 0 calc(var(--spacing) * -16) calc(var(--spacing) * -40);
  }

  /* Le détail ouvert : une carte blanche sous la date. */
  [data-repli] .frise-detail[data-ouvert] .frise-detail-in {
    padding-block-start: calc(var(--spacing) * 14);
  }
  .frise .frise-liste {
    padding: calc(var(--spacing) * 16);
    border: 1px solid rgb(28 28 28 / .06);
    border-radius: var(--r-lg);
    background: var(--blanc);
    box-shadow: var(--ombre-carte);
    font-size: var(--corps-sm);
  }

  /* L'éligibilité, resserrée. */
  .cond-grille { gap: calc(var(--spacing) * 12); }
  .eligi-action { align-self: stretch; justify-content: center; }

  /* Les deux verdicts, un à la fois derrière une bascule (mobile.js). Le
     titre de la carte est dit par l'onglet : il reste à la voix. */
  .mobile-bascule {
    display: flex;
    margin-block-end: calc(var(--spacing) * 12);
  }
  .mobile-bascule .onglet {
    flex: 1 1 0;
    justify-content: center;
    min-block-size: calc(var(--spacing) * 44);
    padding-inline: calc(var(--spacing) * 10);
    font-size: var(--text-s);
    line-height: 1.2;
    text-align: center;
  }
  .verdicts[data-bascule] { grid-template-columns: minmax(0, 1fr); }
  .verdicts[data-bascule] > .verdict:not([data-actif]) { display: none; }
  .verdicts[data-bascule] > .verdict[data-actif] { animation: mobile-vue var(--motion-quick) var(--ease-out) both; }
  .verdicts[data-bascule] .cond-tete {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }


  /* ---- 2.6 bis Le prix : Percer d'abord (sur demande) ------------------- */
  .pc-trio .carte-offre-percer { order: -1; }


  /* ---- 2.6 ter La méthode : la barre d'onglets reste ----------------------
     Sur téléphone, les quatre leviers ne s'empilent plus : la barre revient,
     à sa place dans la page (elle ne suit pas le défilement, sur demande),
     et un seul levier est affiché
     (mobile.js). Les animations de survol des illustrations jouent seules,
     en boucle, puisqu'un doigt ne survole pas. */
  .piliers[data-onglets-mobile] .onglets[data-barre] {
    position: static;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-self: stretch;
    margin-block-end: calc(var(--spacing) * 20);
    background: rgb(250 250 250 / .82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .piliers[data-onglets-mobile] .onglet {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    min-block-size: calc(var(--spacing) * 52);
    padding: calc(var(--spacing) * 6) calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: 1.2;
  }
  .piliers[data-onglets-mobile] .piliers-scene { gap: 0; }
  .piliers[data-onglets-mobile] [data-panneau]:not([data-actif]) { display: none; }
  .piliers[data-onglets-mobile] [data-panneau][data-actif] {
    animation: mobile-vue var(--motion-quick) var(--ease-out) both;
  }

  .pilier-illu[data-survol] .ill-curseur { translate: var(--hx, 0) var(--hy, 0); }
  .pilier-illu[data-survol] .ill-leve { translate: 0 -4px; transition-duration: var(--motion-slow); }
  .pilier-illu[data-survol] .ill-apparait { opacity: 1; transition-delay: 500ms; }
  .pilier-illu[data-survol] .ill-marque-fond { fill-opacity: .18; }
  .pilier-illu[data-survol] .ill-trace-forte { stroke-width: 3.5; }


  /* ---- 2.6 quater L'opportunité en bento 2 × 2 ---------------------------
     Les quatre atouts en quatre tuiles : l'icône en haut, le titre, le
     texte. Le tapis dessous est moins haut, le plan plus grand : il restait
     un tiers de vide sous la fenêtre de discussion. Le bouton est centré. */
  .opp-atouts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 10);
  }
  .opp-atout {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    row-gap: calc(var(--spacing) * 8);
    padding: calc(var(--spacing) * 16) calc(var(--spacing) * 14);
    border-radius: var(--r-lg);
  }
  .opp-atout-icone { order: -1; grid-row: auto; grid-column: 1; justify-self: start; }
  .opp-atout-titre {
    grid-row: auto;
    font-size: var(--text-m);
    line-height: 1.2;
    hyphens: auto;
  }
  .opp-atout-texte {
    font-size: var(--text-xs);
    line-height: 1.45;
    hyphens: auto;
  }

  .tapis { aspect-ratio: 1 / 1.1; }
  .tapis-plan {
    width: 170%;
    transform: translateY(-7%) rotateX(46deg) rotateZ(-9deg) scale(.8);
  }

  #opportunite .boutons {
    justify-content: center;
    align-items: center;
  }
  #opportunite .boutons .btn-principal { text-align: center; }


  /* ---- 2.7 L'équipe -----------------------------------------------------
     La piste pleine largeur, sans marge coupée à gauche. */
  .equipe-piste {
    margin-inline: calc(var(--marge-laterale) * -1);
    padding-inline: var(--marge-laterale);
    scroll-padding-inline: var(--marge-laterale);
    overscroll-behavior-x: contain;
  }
  .equipe-tete .equipe-fleches { display: none; }


  /* ---- 2.8 Le formulaire ------------------------------------------------
     Les huit tuiles faisaient 115 px de haut chacune, soit un écran de
     tuiles. L'icône passe à gauche du nom, et la tuile tient dans 56 px. */
  .prequal-option.prequal-tuile {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: calc(var(--spacing) * 8);
    min-block-size: calc(var(--spacing) * 56);
    padding: calc(var(--spacing) * 8) calc(var(--spacing) * 10);
    text-align: start;
    hyphens: auto;
    overflow-wrap: anywhere;
  }
  .prequal-option.prequal-tuile > span { min-inline-size: 0; }
  .prequal-tuile-icone {
    inline-size: calc(var(--spacing) * 20);
    block-size: calc(var(--spacing) * 20);
  }
  .prequal-secteurs { grid-auto-rows: auto; }

  /* Pendant la saisie, le bas de l'écran appartient au clavier et au champ :
     le dock se retire (mobile.js pose data-saisie). */
  .chat-dock[data-saisie]:not([data-ouvert]) { display: none; }

  /* Les champs à 16 px : en dessous, Safari zoome à la mise au point. */
  .prequal input,
  .prequal select,
  .prequal textarea { font-size: 16px; }

  .prequal .btn-principal { inline-size: 100%; }


  /* ---- 2.9 Le pied de page ----------------------------------------------
     Des liens de 18 px de haut, les uns sur les autres : chaque ligne passe
     à 40 px. */
  .pied-liste a,
  .pied-legal a,
  .pied-bouton-lien {
    display: inline-flex;
    align-items: center;
    min-block-size: calc(var(--spacing) * 40);
  }
  .pied-liste { gap: 0; }
  .pied-legal { gap: 0; }

  /* Empilée sous la mention de propriété, l'origine n'a plus de voisine à
     séparer : son point médian pendait seul en début de ligne. */
  .pied-origine::before { display: none; }


  /* ---- 2.10 La barre d'action du bas ------------------------------------
     La pilule de Charly et l'appel à l'action partagent le bas de l'écran.
     Quand l'appel est là, la pilule se réduit à Charly seul. */
  .chat-dock { gap: calc(var(--spacing) * 8); align-items: center; }

  .mobile-cta {
    display: inline-flex;
    pointer-events: auto;
    flex: 1 1 auto;
    max-inline-size: calc(var(--spacing) * 280);
    justify-content: center;
    min-block-size: calc(var(--spacing) * 52);
    box-shadow:
      0 calc(var(--spacing) * 8) calc(var(--spacing) * 24) rgb(0 145 255 / .28),
      0 calc(var(--spacing) * 2) calc(var(--spacing) * 6) rgb(28 28 28 / .12);
    transition:
      opacity var(--motion-quick) var(--ease-out),
      translate var(--motion-slow) var(--ease-out),
      padding 500ms var(--ease-inout),
      scale var(--motion-instant) var(--ease-out);
  }

  .chat-dock:not([data-cta]) .mobile-cta,
  .chat-dock[data-ouvert] .mobile-cta {
    position: absolute;
    opacity: 0;
    translate: 0 calc(var(--spacing) * 24);
    pointer-events: none;
    visibility: hidden;
  }

  .chat-dock[data-cta]:not([data-ouvert]) .chat-pilule .chat-cta {
    display: none;
  }
  .chat-dock[data-cta]:not([data-ouvert]) .chat-pilule .bouton-noyau {
    padding-inline: calc(var(--spacing) * 8);
  }
  .chat-dock[data-cta]:not([data-ouvert]) .chat-pilule {
    flex: none;
    animation: mobile-pastille var(--motion-slow) var(--ease-out) both;
  }
  .chat-dock[data-cta]:not([data-ouvert]) .mobile-cta {
    animation: mobile-monte var(--motion-slow) var(--ease-out) both;
  }

  /* Tout en haut de la page, le bas de l'écran appartient au hero : la
     pilule y couvrait la capsule du prix. Charly arrive au premier
     défilement. */
  .chat-dock[data-haut]:not([data-ouvert]) > * {
    opacity: 0;
    translate: 0 calc(var(--spacing) * 24);
    pointer-events: none;
    visibility: hidden;
    transition:
      opacity var(--motion-quick) var(--ease-out),
      translate var(--motion-quick) var(--ease-out),
      visibility 0s linear var(--motion-quick);
  }

  /* Le panneau ouvert prend l'écran entier, moins les bords. */
  .chat-dock[data-ouvert] .chat-panneau {
    max-block-size: calc(100svh - var(--spacing) * 96 - env(safe-area-inset-top, 0px));
  }
}


/* --------------------------------------------------------------------------
   3. Les gestes
   -------------------------------------------------------------------------- */
@keyframes mobile-feuille {
  from { opacity: 0; transform: translateY(calc(var(--spacing) * -8)) scale(.98); }
  to   { opacity: 1; transform: none; }
}

@keyframes mobile-lien {
  from { opacity: 0; transform: translateY(-1em); }
  to   { opacity: 1; transform: none; }
}

@keyframes mobile-vue {
  from { opacity: 0; transform: translateY(calc(var(--spacing) * 8)); }
  to   { opacity: 1; transform: none; }
}

@keyframes mobile-monte {
  from { opacity: 0; transform: translateY(calc(var(--spacing) * 24)); }
  to   { opacity: 1; transform: none; }
}

@keyframes mobile-pastille {
  from { opacity: .4; transform: scale(.9); }
  to   { opacity: 1; transform: none; }
}

/* On retire le mouvement, on ne le raccourcit pas. */
@media (prefers-reduced-motion: reduce) {
  .entete-nav[data-ouvert="oui"],
  .entete-nav[data-ouvert="oui"] > *,
  .faq-vues[data-arme] .faq-vue[data-actif],
  .signal-vue[data-actif],
  .chat-dock[data-cta] .chat-pilule,
  .chat-dock[data-cta] .mobile-cta { animation: none !important; }

  .bouton:active,
  .btn-principal:active,
  .onglet:active,
  .frise-barre:active,
  .frise-plus:active,
  .equipe-fleche:active,
  .prequal-option:active { scale: 1; }

  .mobile-voile,
  .mobile-points button::before { transition: none; }
}