/* ====================================================================
   CADIXEL — responsive.css
   > 1024px  : mise en page d'origine, deux colonnes plein écran.
   ≤ 1024px  : version dédiée (mobile ET fenêtre desktop réduite de
   moitié) — carte d'envoi en premier, texte en dessous, scroll libre,
   carte allégée (sans effet verre) pour rester sobre et lisible.
   ==================================================================== */

@media (max-width: 1024px){

  body{ overflow-x:hidden; overflow-y:auto; }
  .scene{ height:auto; min-height:100vh; overflow-x:hidden; overflow-y:visible; }

  /* -- Fond : dégradé simple et net (vert dominant → bleu, touche de
     violet en fin de dégradé seulement), au lieu des tâches radiales
     superposées d'origine, plus difficiles à lire sur petit écran -- */
  .scene-fond{
    background:linear-gradient(150deg, #2FA278 0%, #3EB489 30%, #4FA9C6 58%, #66A8FF 82%, #8B93E8 100%);
  }
  .scene-fond::before,
  .scene-fond::after{ display:none; }
  .halo-violet{ opacity:0.35; }

  .grille-technique{ animation:none; }
  .forme-3{ display:none; }
  .fond-motif{ display:none; }
  .forme-1{ width:300px; height:300px; animation:none; }
  .forme-2{ width:340px; height:340px; animation:none; }

  /* -- En-tête compact -- */
  .scene-entete{ padding:18px 20px; justify-content:space-between; }
  .marque{ position:static; left:auto; top:auto; transform:none; display:flex; align-items:center; }
  .repere-marque-pc{ display:none; }
  .repere-marque-mobile{ display:block; height:52px; width:auto; }
  .lien-connexion{ padding:7px 14px; font-size:12.5px; }

  /* -- Corps : carte en premier, argumentaire en dessous -- */
  .scene-corps{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:20px 20px 12px;
  }

  /* Sur desktop, la carte du dessous dépasse légèrement pour inviter au
     clic. En pleine largeur mobile il n'y a plus de place pour ça — on
     la masque complètement et on bascule via le bouton ci-dessous. */
  .pile-cartes .carte-arriere{ display:none; }

  /* L'étiquette "→ QR code" devient un vrai bouton, sous la carte. */
  .repere-qr{
    position:static;
    grid-column:1;
    grid-row:2;
    display:block;
    width:fit-content;
    margin:14px auto 0;
    font-size:13px;
    font-weight:600;
    color:var(--menthe-700);
    background:#ffffff;
    border:1px solid var(--gris-200);
    border-radius:20px;
    padding:8px 16px;
  }

  /* -- Carte d'envoi : sobre, opaque, ombre légère (pas de flou) -- */
  .carte-envoi{
    width:100%;
    background:#ffffff;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border:1px solid rgba(255,255,255,0.6);
    box-shadow:0 18px 40px -22px rgba(20,30,26,0.35);
    padding:24px 20px 20px;
  }

  .zone-depot{ flex-direction:column; padding:14px; }
  .champ-duo{ flex-direction:column; gap:0; }

  .onglet-lateral{
    position:static;
    display:inline-block;
    margin-top:12px;
    border-radius:9px;
    border-left:1px solid var(--gris-200);
    box-shadow:none;
  }

  .zone-qr-resultat #qr-code-cible svg,
  .zone-qr-resultat #qr-code-cible canvas{
    max-width:100%;
    height:auto;
  }

  /* -- Argumentaire : accroche + intro AU-DESSUS de la carte, le reste
     (CTA, liste) EN DESSOUS. Comme les deux morceaux doivent encadrer la
     carte, .scene-texte doit "disparaître" (display:contents) pour que
     ses enfants deviennent des items directs de .scene-corps, chacun
     réordonnable indépendamment — sans toucher au HTML ni au desktop. -- */
  .scene-texte{
    display:contents;
  }
  /* Rythme différencié : très serré entre éléments liés (titre+sous-titre,
     accroche du CTA+bouton), plus large entre sections distinctes. */
  .scene-texte h1{ order:1; font-size:26px; text-align:center; margin-top:0; }
  .scene-texte-intro{ order:2; text-align:center; margin-top:8px; }
  .colonne-carte{ order:3; margin-top:28px; }
  .scene-texte-tagline{ order:4; justify-content:center; margin-top:36px; }
  .btn-compte-gratuit{ order:5; width:100%; max-width:300px; text-align:center; margin:10px auto 0; }
  .liste-avantages{ order:6; text-align:left; max-width:420px; width:100%; margin:30px auto 0; }

  /* -- Badges de confiance -- */
  .scene-bas{ gap:8px; padding:20px 16px 28px; }
  .badge-confiance{ font-size:10px; padding:6px 10px; }
  .badge-confiance svg{ width:11px; height:11px; }
  .badge-statut{ font-size:9.5px; padding:6px 10px; }
}

/* ====================================================================
   ≤ 640px : vrai mobile — version radicale inspirée de WeTransfer/Smash.
   La carte devient LE produit : seule la zone de dépôt est visible au
   départ, le reste des champs apparaît une fois un fichier choisi.
   Fond de marque inchangé (conservé tel quel à la demande).
   ==================================================================== */
@media (max-width: 640px){

  /* Pas de bouton mort visible tant que les comptes n'existent pas */
  .lien-connexion{ display:none; }

  /* Header sobre et distinct, propre au mobile : logo centré sur une
     large forme courbe (voile clair, pas de ligne dure) qui délimite une
     vraie zone d'en-tête sans changer le fond de marque existant. */
  .scene-entete{
    justify-content:center;
    padding:65px 20px 38px;
    position:relative;
    overflow:visible;
  }
  .scene-entete::before{
    content:"";
    position:absolute;
    top:-140px;
    left:50%;
    transform:translateX(-50%);
    width:160%;
    height:220px;
    background:rgba(255,255,255,0.10);
    border-radius:50%;
    z-index:-1;
    pointer-events:none;
  }
  .repere-marque-mobile{ height:46px; margin-top:-40px; }
  .scene-corps{ padding-top:90px; }

  /* Liste d'avantages centrée, comme le reste du bloc texte */
  .liste-avantages{ text-align:center; }
  .liste-avantages li{ justify-content:center; }

  /* Formulaire progressif — script.js ajoute .a-des-fichiers dès qu'un
     fichier est déposé/sélectionné, sur le <form> concerné */
  .champ-progressif{ display:none; }

  #form-envoi.a-des-fichiers .champ-progressif,
  #form-envoi-qr.a-des-fichiers .champ-progressif{ display:block; }

  #form-envoi.a-des-fichiers .champ-duo.champ-progressif{ display:flex; }
  #form-envoi-qr.a-des-fichiers .champ-case.champ-progressif{ display:flex; }
  #form-envoi.a-des-fichiers .btn-envoyer.champ-progressif,
  #form-envoi-qr.a-des-fichiers .btn-envoyer.champ-progressif{ display:flex; }

  /* Fenêtre d'aperçu (image/PDF/3D) : moins de marge perdue autour du
     contenu sur un écran étroit. */
  .popup-apercu{ padding:12px; }
  .popup-apercu-contenu.popup-apercu-grand{ padding:14px; }
}

/* -- Petits téléphones : encore un peu de marge en moins -- */
@media (max-width: 480px){
  .scene-texte h1{ font-size:23px; }
  .carte-envoi{ padding:22px 16px 18px; }
  .scene-corps{ padding:16px 16px 10px; }
}