/* ═══════════════════════════════════════════════════════════════════
   AIDE V2 — la page d'aide (/welcome-rdv-application-2/) réhabillée
   dans le design de /pros-v2/, en aperçu sur /aide-v2/. Chargée APRÈS
   `pros-v2.css`, le SOCLE (héro `.accroche`, `.modale`, `.bloc-r`,
   `.final`, boutons, révélations) : cette feuille ne porte QUE ce que
   la page d'aide a en propre — les vignettes de formation, la liste
   des tutoriels, le lecteur client, le duo contact / suggestion.
   ⚠️ Avant de créer une classe ici : `grep` son nom dans pros-v2.css,
   coquille.css et accueil-v2.css (collision `.tel` vécue le 02/09).
   ═══════════════════════════════════════════════════════════════════ */

  .visually-hidden{position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}

/* ── Le héro d'une page d'aide n'a pas besoin de tout l'écran : 72 svh,
   la photo, le titre et les deux portes d'entrée (WhatsApp, mail). ── */
  .accroche-aide{min-height:72vh; min-height:72svh}
  .accroche-aide h1{max-width:14ch}
  .accroche-aide .cta .btn-contour{font-size:.98rem; padding:13px 24px}

/* ── LA FORMATION DE DÉMARRAGE — quatre vignettes (les images de la page
   actuelle, 1280×720), chacune ouvre sa vidéo dans la modale du socle
   (`data-demo="ID"`). Un <button> par vignette : clavier, focus, rien à
   réécrire. ── */
  .etapes{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.9rem,1.8vw,1.4rem);
    margin-top:clamp(1.8rem,3.5vw,2.6rem)}
  @media(max-width:900px){.etapes{grid-template-columns:repeat(2,minmax(0,1fr))}}
  .etape{appearance:none; -webkit-appearance:none; font:inherit; color:inherit; text-align:left;
    background:var(--blanc); border:1px solid var(--filet); border-radius:18px; padding:.6rem .6rem 1rem;
    cursor:pointer; display:flex; flex-direction:column; gap:.75rem;
    box-shadow:0 10px 30px rgba(40,30,14,.05); transition:transform .3s var(--mvt), box-shadow .3s var(--mvt)}
  .etape:hover{transform:translateY(-3px); box-shadow:0 18px 40px rgba(40,30,14,.1)}
  .etape .vignette{position:relative; border-radius:12px; overflow:hidden; aspect-ratio:16/9; background:var(--creux)}
  .etape .vignette img{width:100%; height:100%; object-fit:cover; display:block}
  .lecture{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none}
  .lecture span{width:52px; height:52px; border-radius:999px; background:rgba(19,16,9,.72); color:#fff;
    display:grid; place-items:center; backdrop-filter:blur(4px);
    box-shadow:0 8px 24px rgba(0,0,0,.3); transition:transform .3s var(--mvt), background .3s}
  .etape:hover .lecture span,.client-video:hover .lecture span{transform:scale(1.08); background:var(--noir)}
  .etape .n{font:500 .68rem/1 "DM Mono",ui-monospace,monospace; letter-spacing:.18em; text-transform:uppercase;
    color:var(--brun); padding:0 .4rem}
  .etape b{display:block; font-size:1.02rem; font-weight:600; line-height:1.3; padding:0 .4rem; margin-top:-.35rem}
  /* 04/09 — `small` portait « Formation de démarrage · vidéo », une étiquette.
     Il porte maintenant une phrase : le mono de .74rem devenait illisible sur
     deux lignes, on repasse à la police de texte. */
  .etape small{display:block; font:400 .86rem/1.45 "Archivo",sans-serif; color:var(--gris); padding:0 .4rem}

/* ── LES TUTORIELS — 21 vidéos en 7 familles. Aujourd'hui : sept lecteurs
   YouTube chargés d'entrée (sept iframes). Ici : une liste, et l'iframe
   n'existe que dans la modale, montée au clic, démontée à la fermeture. ── */
  .tuto-tete{max-width:34em}
  .tuto-tete h2,.etapes-tete h2,.client-tete h2{font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:1.06; letter-spacing:-.028em}
  .tuto-tete p,.etapes-tete p,.client-tete p{margin:.9rem 0 0; font-size:clamp(1.05rem,1.4vw,1.2rem); color:var(--encre2); max-width:44ch}
  /* 04/09 — 23 rem et non 17 : chaque tutoriel porte maintenant une phrase.
     À quatre colonnes, les titres se cassaient en deux et la description
     tombait sur trois lignes ; à trois, tout tient sur deux. */
  .familles{display:grid; grid-template-columns:repeat(auto-fit,minmax(23rem,1fr)); gap:clamp(.9rem,1.8vw,1.3rem);
    margin-top:clamp(1.8rem,3.5vw,2.6rem)}
  .famille{background:var(--blanc); border:1px solid var(--filet); border-radius:18px; padding:1.1rem 1rem 1rem;
    box-shadow:0 10px 30px rgba(40,30,14,.05)}
  .famille h3{font:500 .72rem/1.4 "DM Mono",ui-monospace,monospace; letter-spacing:.18em; text-transform:uppercase;
    color:var(--brun); margin:0 0 .5rem .5rem}
  .famille ul{list-style:none; margin:0; padding:0; display:grid; gap:.15rem}
  .tuto{appearance:none; -webkit-appearance:none; font:inherit; color:var(--encre); background:transparent; border:0;
    width:100%; text-align:left; cursor:pointer; border-radius:12px; padding:.6rem .55rem;
    display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.7rem;
    transition:background .2s}
  .tuto:hover,.tuto:focus-visible{background:var(--creux)}
  /* la pastille se cale sur le TITRE, pas sur le milieu des trois lignes */
  .tuto .p{width:30px; height:30px; border-radius:999px; background:var(--noir); color:#fff;
    display:grid; place-items:center; flex:none; transition:background .2s;
    align-self:start; margin-top:.1rem}
  .tuto:hover .p{background:var(--brun)}
  /* 04/09 — le titre ne suffisait pas : « Profil 2:18 » ne dit pas ce qu'on va
     apprendre. Titre et phrase empilés dans la colonne du milieu ; la pastille
     de lecture et la durée restent centrées sur l'ensemble. */
  .tuto{align-items:center}
  .tuto .tx{display:grid; gap:.12rem; min-width:0}
  .tuto .t{font-size:.98rem; line-height:1.3; font-weight:500}
  .tuto .tt{font-size:.83rem; line-height:1.4; color:var(--gris)}
  .tuto .d{font:400 .72rem/1 "DM Mono",ui-monospace,monospace; color:var(--gris); font-variant-numeric:tabular-nums;
    align-self:start; margin-top:.35rem}
  /* les tutoriels respirent : trois lignes de texte par entrée, pas une */
  .famille ul{gap:.35rem}
  /* ⛔ Ne PAS masquer .tt sous 420 px (essayé le 04/09, retiré aussitôt) :
     c'est sur téléphone que la description sert le plus, et la carte y est
     pleine largeur — deux lignes tiennent sans forcer. */

/* ── LA VIDÉO CLIENT — un seul lecteur, sur une photo du socle (un client
   qui réserve depuis son canapé), le film s'ouvre dans la modale. ── */
  .client{background:var(--lin); border-top:1px solid var(--filet); border-bottom:1px solid var(--filet)}
  .client .contenu{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(1.8rem,4vw,4rem); align-items:center}
  @media(max-width:900px){.client .contenu{grid-template-columns:1fr}}
  .client-video{appearance:none; -webkit-appearance:none; border:0; padding:0; cursor:pointer; display:block; width:100%;
    position:relative; border-radius:22px; overflow:hidden; aspect-ratio:4/3; background:var(--creux);
    box-shadow:0 20px 50px rgba(40,30,14,.12)}
  .client-video img{width:100%; height:100%; object-fit:cover; display:block}
  .client-video .lecture span{width:68px; height:68px}
  .client-video .legende{position:absolute; left:1rem; bottom:1rem; z-index:1; background:rgba(19,16,9,.78); color:#fff;
    backdrop-filter:blur(6px); border-radius:999px; padding:.5rem .9rem; font-size:.84rem; font-weight:500}

/* ── CONTACT + SUGGESTION — deux cartes du socle (`.bloc-r`), côte à côte.
   Le QR WhatsApp de la page actuelle vit dans la première. ── */
  .contact-duo{display:grid; grid-template-columns:1fr 1fr; gap:1rem; max-width:62rem; margin-inline:auto}
  @media(max-width:820px){.contact-duo{grid-template-columns:1fr}}
  /* Le QR est SORTI du flux (absolu, centré verticalement) : en cellule de
     grille étalée sur trois rangées, il faisait grandir les rangées et
     écartait titre, texte et boutons de 40 px chacun — mesuré deux fois. */
  .contact-duo .bloc-r{justify-content:center; gap:.6rem}
  /* les <p> gardaient leur marge navigateur (16-19 px) en plus du gap : 40 px entre chaque ligne */
  .contact-duo .bloc-r p{margin:0}
  /* 04/09 — QR trop petit pour scanner (retour Nicolas). Taille en clamp() plutot
     qu'un px fixe : entre 820px et ~1090px la carte est en DEUX colonnes et l'espace
     resserre vite (mesure faite a 821px) ; le clamp grandit avec la largeur dispo au
     lieu d'imposer une taille fixe qui deborderait juste apres le passage a 2 colonnes.
     Jamais plus petit qu'avant (112px), jusqu'a 190px sur desktop confortable. */
  .contact-duo .bloc-r.avec-qr{position:relative; --qr:clamp(112px, 16vw, 190px); padding-right:calc(var(--qr) + 3rem)}
  .contact-duo .bloc-r .qr-contact{position:absolute; right:1.4rem; top:50%; transform:translateY(-50%);
    width:var(--qr); height:auto; border-radius:10px; border:1px solid var(--filet); background:#fff}
  @media(max-width:600px){
    .contact-duo .bloc-r.avec-qr{padding-right:clamp(1.2rem,2.5vw,1.7rem)}
    .contact-duo .bloc-r .qr-contact{display:none}
  }
  .contact-duo .actions{grid-column:1; display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.4rem}
  .contact-duo .actions .btn{padding:.7rem 1.2rem; font-size:.88rem}
  .contact-duo .actions .btn-noir{padding:10px 20px; font-size:.88rem}

/* ── LA MODALE VERTICALE — toutes les vidéos de cette page sont filmées en
   9/16 (tutoriels, formation, vidéo client). Le cadre 16/9 du socle les
   réduisait à un timbre-poste au milieu du noir. Ici le cadre prend le
   format de la vidéo, borné à la hauteur de l'écran, et le titre s'écrit
   dessous. La classe `vertical` est posée par pros-v2.js d'après
   `data-format="vertical"` sur le bouton. Le cadre vertical lui-même vit dans
   demo.css depuis le 23/09 (la démo servie par le site s'en sert aussi). ── */
  /* Les fichiers YouTube sont des 16/9 avec la vidéo verticale AU MILIEU,
     entre deux bandes noires (mesuré sur la page actuelle : la bande utile
     fait exactement 9/16 de la hauteur, centrée). Dans un cadre 9/16 le
     lecteur se calait en haut, tout petit. On lui donne la LARGEUR qui fait
     tenir sa hauteur dans le cadre (largeur du cadre × 16/9 × 16/9) et on le
     centre : les bandes noires sortent du cadre, la vidéo le remplit. */
  .modale.vertical .modale-cadre iframe{position:absolute; top:0; left:50%; height:100%;
    width:calc(100% * 256 / 81); transform:translateX(-50%)}
  .modale-titre{margin:.9rem auto 0; text-align:center; color:rgba(255,255,255,.85);
    font-size:.95rem; font-weight:500; max-width:60ch}
  .modale-titre:empty{display:none}
  .modale-titre a{display:inline-block; margin-left:.6rem; color:rgba(255,255,255,.6); font-weight:400;
    text-decoration:underline; text-underline-offset:.2em}
  .modale-titre a:hover{color:#fff}

/* ── LES QUESTIONS (04/09) — la FAQ vient du socle (`.faq` de pros-v2.css) ;
   on ne redéfinit ici que la largeur de lecture, la page étant plus étroite
   que /tarif-v2/ sur ce bloc. ── */
  #questions .faq{max-width:60rem; margin-inline:auto}
  #questions .tuto-tete{margin-inline:auto; text-align:center}
  #questions .tuto-tete h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}

/* ══ LA CARTE D'ESSAI (#telecharger) — 08/09 ═══════════════════════════
   Même famille que la carte d'offre de /tarif/, mais l'ordre est inversé :
   sur une page d'aide, ce qui décide c'est le temps de prise en main, pas
   le prix. Ruban d'abord, nom en titre, prix en une ligne sous les magasins.
   ⛔ Le bloc `.qr` garde ses propres règles (socle `pros-v2.css`, l. 308) :
      elles portent le comportement téléphone de « parcours-client ». ── */
  .carte-essai{max-width:52rem; margin-inline:auto; background:var(--blanc);
    border:1px solid var(--filet); border-radius:28px; overflow:hidden;
    box-shadow:0 26px 60px rgba(40,30,14,.13)}

  .ce-haut{background:linear-gradient(180deg,#F7EADA 0%, #FDF9F3 80%, var(--blanc) 100%);
    padding:clamp(1.7rem,3.2vw,2.3rem) clamp(1.2rem,3vw,2.2rem) clamp(1.5rem,2.8vw,2rem);
    display:grid; justify-items:center; text-align:center}
  .ce-ruban{display:inline-flex; align-items:center; gap:.55rem; background:var(--noir); color:#fff;
    border-radius:999px; padding:.55rem 1.1rem .55rem .7rem; font-size:.97rem; font-weight:600;
    box-shadow:0 10px 24px rgba(19,16,9,.22)}
  .ce-ruban .j{background:var(--champagne); color:#241C10; border-radius:999px; padding:.2rem .6rem;
    font-size:1.02rem; font-weight:700; letter-spacing:-.02em}
  .ce-titre{margin:1.05rem 0 0; font:700 clamp(2.6rem,5.8vw,3.6rem)/1 "Archivo",sans-serif;
    letter-spacing:-.045em; color:var(--encre)}
  .ce-pitch{margin:.5rem 0 0; font-size:1.05rem; color:var(--encre2); max-width:34ch}
  .ce-haut .qr{margin-top:1.5rem}
  .ce-prix{margin:1.1rem 0 0; font-size:.95rem; color:var(--encre2)}
  .ce-prix b{font-weight:600; color:var(--encre)}

  .ce-bas{padding:clamp(1.6rem,3vw,2.2rem) clamp(1.2rem,3vw,2.2rem);
    border-top:1px solid var(--filet)}
  .ce-bas h3{margin:0; font-size:1.2rem; font-weight:600; letter-spacing:-.012em; text-align:center}
  .ce-sous{margin:.3rem auto 0; max-width:46ch; color:var(--encre2); font-size:.96rem; text-align:center}
  .ce-tuiles{margin-top:1.3rem; display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem}
  @media(max-width:820px){.ce-tuiles{grid-template-columns:1fr 1fr}}
  @media(max-width:440px){.ce-tuiles{grid-template-columns:1fr}}
  .ce-tuile{background:var(--lin); border-radius:14px; padding:1rem .8rem;
    display:grid; gap:.25rem; justify-items:center; text-align:center}
  .ce-tuile .v{font:700 1.5rem/1 "Archivo",sans-serif; letter-spacing:-.03em; color:var(--encre)}
  .ce-tuile .l{font-size:.88rem; line-height:1.35; color:var(--encre2)}
  .ce-note{margin:1rem auto 0; max-width:52ch; font-size:.94rem; color:var(--encre2); text-align:center}