/* =========================================================================
   READY RELEASE — FEUILLE MOBILE DEDIEE                            (v142)

   CE FICHIER NE CONTIENT QUE DES REGLES SOUS MEDIA QUERY.
   Deux seuils, et deux seulement :

     <= 860px  ordre des sections, hero, release map, livrables, process,
               temoignages video, recent work, WhatsApp, barre d'achat.
     <= 720px  tout ce qui touche #packages. Ce seuil n'est pas choisi :
               c'est celui que main.v115.js code en dur pour sortir la carte
               du tableau, replier les categories et construire le resume.
               S'en ecarter produirait deux interfaces contradictoires entre
               721 et 860px.

   A 861px et au-dessus, ce fichier est INERTE. Aucune regle hors media
   query, aucune declaration globale, aucune variable redefinie. Le desktop
   V141 ne peut pas etre atteint par ce fichier.

   Il est charge APRES main.v135.css, home-cro.v132.css, alacarte.v118.css
   et release-plan.v123.css : a specificite egale, il gagne par position.
   Aucune regle !important n'est necessaire, et il n'y en a aucune.

   /!\ REGLE DU FLEX-ORDER — A LIRE AVANT TOUTE MODIFICATION.
   main.v135.css passe deja `main` en flex a <= 860px. Un enfant sans
   `order` recoit order:0 et passe DEVANT order:1. C'est la cause du bug
   V141 ou #work s'affichait avant le hero. Chaque conteneur passe en flex
   ici enumere donc TOUS ses enfants, y compris ceux qu'un script injecte
   apres coup (.rrpm-card, .dlv__more, .rrcur).
   ========================================================================= */

@media (max-width:860px) {

  /* ---------------------------------------------------------------- ORDRE
     Les dix enfants de <main>, dans l'ordre valide :
     Hero > Packages > What > Deliverables/Process > Recent Work >
     Social proof > Coh > Founder > Release map.
     .press--hero (order:2) et #compare (order:5) sont declares dans
     main.v135.css mais n'existent pas dans index.html : orders orphelins,
     sans effet, laisses en place (fichier gele). */
  #hero          { order:1 }
  #packages      { order:2 }
  #what          { order:3 }
  .dlv           { order:4 }
  #work          { order:5 }
  .tst           { order:6 }
  .coh           { order:7 }
  .fsig          { order:8 }
  #release-map   { order:9 }

  /* .ben — cinq cartes d'icones sans information que #what, .fsig et la
     garantie ne portent deja. Masquee, pas supprimee : le desktop la garde
     entiere et le retour arriere tient en une ligne. */
  .ben           { display:none }

  /* ----------------------------------------------------------------- HERO
     Priorite mobile : H1 > promesse > prix/delai > CTA > logos.
     .hero__sub--type est masquee a 720px (voir plus bas) parce qu'elle
     enumere une troisieme fois ce que le titre et le lead disent deja.
     .bnd--flow est masquee ici : 47 portraits sans legende repoussent le
     CTA d'environ 300px. Les images portent loading="lazy" : masquees,
     elles ne coutent aucun octet. Rien n'est retire du DOM. */
  .bnd--flow                { display:none }
  .hero                     { min-height:auto; padding-top:7.5rem; padding-bottom:2.25rem }
  .hero__lead               { margin-top:0.9rem }
  .hero__eta                { margin-top:0.65rem }
  .hero__actions--cta       { margin-top:1.4rem }
  .hero__cta--strong        { min-height:48px }
  .trust                    { margin-top:1.4rem }

  /* --------------------------------------------------------- RELEASE MAP
     Quatre entrees texte cliquables. Les URLs ne changent pas. Les fonds
     video sont masques ici ET neutralises dans mobile.v142.js (pose de
     data-loaded, voir le fichier) pour qu'ils ne soient pas telecharges. */
  .map-grid                 { grid-template-columns:1fr }
  .map-card__media,
  .map-card__media--vis     { display:none }
  .map-card__desc           { display:none }
  .map-card                 { min-height:0; padding-block:1.15rem }
  .map-card--live           { padding-bottom:1.15rem }
  /* Sans fond video, l'etat d'introduction n'a plus rien a reveler : le
     texte doit rester visible meme si le sequenceur ne tourne pas. */
  .map-card--live.is-intro > :not(.map-card__media),
  .map-card--vis.is-intro  > :not(.map-card__media) { opacity:1 }
  .map-card--live .map-card__title,
  .map-card--live .map-card__kicker,
  .map-card--live .map-card__num { text-shadow:none }

  /* --------------------------------------------------------- RECENT WORK
     Mastering seul. Les huit autres panneaux gardent leur attribut [hidden]
     natif ; la barre d'onglets disparait pour qu'aucun emplacement vide ne
     soit atteignable. La liste <dl class="sr-only"> est masquee elle aussi :
     sans elle, un lecteur d'ecran annoncerait huit categories qu'aucun
     lien mobile ne permet d'ouvrir. */
  #work .rw__tabs           { display:none }
  #work .rw__rail > dl.sr-only { display:none }

  /* -------------------------------------------------- DELIVERABLES + DLV
     .dlv passe en flex : ses six enfants recoivent un order, y compris le
     bouton .dlv__more injecte par main.v115.js qui serait sinon order:0,
     donc affiche AVANT la grille. */
  .dlv                      { display:flex; flex-direction:column }
  .dlv__head                { order:1 }
  .dlv__grid                { order:2 }
  .dlv__more                { order:3 }
  .pkbtn-wrap               { order:4 }
  .hproc                    { order:5 }
  .tvid                     { order:6 }

  /* Quatre visibles au lieu de trois : « Source files & full ownership »
     est le livrable 04 et doit etre lisible sans interaction.
     main.v135.css masque a partir du 4e ; on re-affiche le 4e et on masque
     a partir du 5e. Le libelle du bouton est corrige en JS (main.v115.js
     ecrit « Show 4 more », il reste 3 elements caches). */
  .dlv--fold .dlv__i:nth-child(4)               { display:block }
  .dlv--fold:not(.is-open) .dlv__i:nth-child(n+5) { display:none }
  .dlv__head                { margin-bottom:1.75rem }
  .dlv__grid                { row-gap:2rem }

  /* -------------------------------------------------------------- PROCESS
     Reste imbrique dans .dlv. Les trois etapes et leurs textes sont
     conserves ; seules les illustrations partent (environ 260px chacune,
     soit plus de la moitie de la hauteur de la section). */
  .hproc                    { margin-top:2.25rem }
  .hproc__head              { margin-bottom:1.75rem }
  .hproc__fig               { display:none }
  .hproc__list              { row-gap:1.5rem }
  .hproc__step:not(:last-child) { padding-bottom:1.5rem }
  .hproc__st                { margin-top:0.85rem }
  .hproc__d                 { margin-top:0.6rem }

  /* ------------------------------------------------ TEMOIGNAGES VIDEO
     Trois videos 9:16 ecrasees a environ 66px de haut en V141. Rail
     horizontal a la place. preload="none", controls, poster : inchanges,
     aucun autoplay, aucune legende ajoutee. */
  .tvid__grid               { display:flex; grid-template-columns:none; max-width:none;
                              overflow-x:auto; scroll-snap-type:x mandatory;
                              gap:0.75rem; scrollbar-width:none;
                              margin-inline:calc(var(--gutter) * -1);
                              padding-inline:var(--gutter) }
  .tvid__grid::-webkit-scrollbar { display:none }
  .tvid__i                  { flex:0 0 78%; scroll-snap-align:start }

  /* ------------------------------------------------------------ WHATSAPP
     whatsapp.v124.js n'est pas modifie. Il mesure deja ['.cc','.rbar'] et
     se releve : nommer la barre d'achat .rbar suffit a le faire monter.
     Reste le chevauchement du CTA en flux, que sa mesure ne peut pas voir
     par construction : le bouton s'efface tant que la barre d'achat est
     affichee. C'est la hierarchie que revendique son propre en-tete —
     « ce bouton ne doit jamais disputer l'ecran a une action commerciale ». */
  .wa                       { width:44px; height:44px }
  body.has-rbar .wa         { opacity:0; visibility:hidden; pointer-events:none }

  /* -------------------------------------------------- BARRE D'ACHAT (JS)
     Construite par mobile.v142.js, avec les classes .rbar deja definies
     dans main.v135.css (position, fond, hauteur, z-index 90, et
     body.has-rbar qui compense la hauteur en bas de page). Rien n'est
     redefini ici : uniquement la mise en page interne. */
  .rbar--home .rbar__inner  { gap:0.75rem }
  .rbar--home .rbar__pack   { display:flex; flex-direction:column; line-height:1.2;
                              min-width:0; color:var(--bone) }
  .rbar--home .rbar__name   { font-family:var(--display); font-weight:700;
                              font-size:0.9375rem; letter-spacing:-0.01em;
                              white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .rbar--home .rbar__price  { font-family:var(--display); font-weight:700;
                              font-size:1.0625rem; letter-spacing:-0.02em;
                              color:var(--bone); font-variant-numeric:tabular-nums;
                              white-space:nowrap }
  .rbar--home .rbar__cta    { margin-left:auto; min-height:48px;
                              display:inline-flex; align-items:center }

  /* ------------------------------------------------------ PROXY DEVISE
     Trois boutons EUR / USD / GBP, les trois devises de RR_CURRENCIES.
     Ils n'ont AUCUNE logique de prix : ils ecrivent la valeur du selecteur
     du pied de page et declenchent son evenement change. Le moteur qui
     repeint la page reste home-pricing.v115.js, non modifie.
     Injecte a <= 860px ; son `order` dans #packages est defini a <= 720px,
     seul intervalle ou #packages est en flex. */
  .rrcur                    { display:flex; justify-content:center; gap:2px;
                              width:max-content; margin:0 auto 1.25rem;
                              padding:3px; border:1px solid var(--line);
                              border-radius:999px; background:var(--surface) }
  .rrcur__b                 { min-height:44px; padding:0.5rem 1.05rem;
                              border:0; border-radius:999px; background:transparent;
                              font-family:var(--mono); font-size:0.6875rem;
                              letter-spacing:0.12em; color:var(--ash);
                              cursor:pointer; transition:color 0.25s var(--ease),
                              background 0.25s var(--ease) }
  .rrcur__b[aria-pressed="true"] { color:var(--void); background:var(--signal-fill) }
  .rrcur__b:focus-visible   { outline:2px solid var(--signal); outline-offset:2px }

  /* -------------------------------------------------------------- FOOTER */
  .site-foot                { padding-block:2.5rem 2rem }
  .foot-bottom              { margin-top:2rem; padding-top:1.5rem }
}

/* =========================================================================
   <= 720px — ZONE #PACKAGES

   Ce seuil est celui de main.v115.js (bloc v114). En dessous, la carte du
   pack est SORTIE du tableau par ce script et posee dans .rrpm-card, les
   categories sont repliees, et un resume est construit. Toutes les regles
   ci-dessous supposent cet etat.

   Entre 721 et 860px la matrice s'affiche en trois colonnes, comme sur
   desktop. C'est assume : combler cet intervalle demanderait de
   reimplementer la logique de main.v115.js, donc d'en creer une seconde.
   ========================================================================= */

@media (max-width:720px) {

  /* Le sous-titre du hero enumere une troisieme fois ce que le titre et le
     lead disent deja. Il reste dans le DOM : [data-hero-type] est cible par
     main.v115.js. */
  .hero__sub--type          { display:none }

  /* ------------------------------------------------------------- ORDRE
     #packages passe en flex. .rrpm est neutralise en display:contents pour
     que ses enfants (selecteur de pack, tableau, garantie) participent au
     meme ordre que la carte, qui est posee HORS de .rrpm par main.v115.js.
     Verifie : .rrpm n'a ni fond, ni bordure, ni padding — display:contents
     ne supprime donc aucun rendu. L'element reste dans l'arbre, ses
     selecteurs [data-pack] et ses combinateurs ~ continuent de fonctionner.

     Sans cette bascule, la carte d'un pack s'affiche AVANT le selecteur
     qui permet de le choisir : c'est l'ordre de V141. */
  #packages                 { display:flex; flex-direction:column }
  .rrpm                     { display:contents }

  .rrp__head                { order:1 }
  .rrp__lead                { order:2 }
  .rrcur                    { order:3 }   /* proxy devise, injecte par le JS */
  .rrpm__pick               { order:4 }
  .rrpm-card                { order:5 }   /* injecte par main.v115.js */
  .rrpm__cals               { order:6 }
  .rrpm__t                  { order:7 }
  .rrpm__guarantee          { order:8 }
  .rrpm__scarce             { order:9 }
  .rrpm__plat               { order:10 }
  .rrp__two                 { order:11 }
  .rrp__proof-col           { order:12 }
  .rrac                     { order:13 }
  .rrp__end                 { order:14 }
  .rrp__foot                { order:15 }
  .rrp__toggle              { order:16 }  /* deja [hidden], order par securite */

  /* --------------------------------------------------- CALENDRIER RELEASE
     Le calendrier du pack Release annonce « Short video #1 » et
     « Social visual + short video #2 » ; RR_PACKS.release ne contient ni
     shorts ni social. Masque sur mobile uniquement. Aucun texte de
     index.html n'est touche, le desktop garde le calendrier intact. */
  .rrpm__cal--release       { display:none }

  /* ------------------------------------------------------------- RESUME
     main.v115.js continue de construire .rrpm__sum : on ne le supprime pas
     en JS (course avec son MutationObserver), on le masque. Le resume
     affiche est .rrsum, construit par mobile.v142.js depuis la MEME source
     — les cellules de la matrice. */
  .rrpm__sum                { display:none }

  .rrsum                    { margin:1.1rem 0 0; text-align:left }
  .rrsum__t                 { display:block; font-family:var(--mono);
                              font-size:0.625rem; letter-spacing:0.14em;
                              text-transform:uppercase; color:var(--ash-dim) }
  .rrsum__t--diff           { color:var(--signal); margin-top:1rem }
  .rrsum__l                 { list-style:none; margin:0.55rem 0 0; padding:0;
                              display:grid; gap:0.4rem }
  .rrsum__i                 { position:relative; padding-left:1.15rem;
                              font-size:0.875rem; line-height:1.35; color:var(--bone) }
  .rrsum__i::before         { content:'\2713'; position:absolute; left:0; top:0;
                              color:var(--signal); font-size:0.8125rem }
  .rrsum__l--diff .rrsum__i { font-weight:600 }
  .rrsum__q                 { color:var(--signal); font-weight:700 }
  .rrsum__more              { margin:0.75rem 0 0; font-size:0.8125rem;
                              color:var(--ash-dim) }

  /* --------------------------------------------------------- A-LA-CARTE
     Ferme par defaut, moteur alacarte.v138.js inchange, aucun prix
     d'appel ajoute. Seul l'interligne des cartes est resserre. */
  .rrac                     { margin-top:2rem }
}