/* =========================================================================
   OURAYA CLOUD · FEUILLE DE L'OUTIL DE DÉPÔT (transfert.ouraya.cloud)
   Charte « La lumière » : le commun vit dans lumiere.css.

   🚨 depot.js ÉCRIT DANS CETTE PAGE. Il masque les étapes par l'attribut
   « hidden », fabrique la liste des fichiers (.fichier, .fichier-tete,
   .fichier-nom, .fichier-poids, .jauge > i dont il pose la largeur,
   .fichier-etat, .fichier-retirer), pose « .survol » sur la zone de dépôt
   et « data-ton » sur les messages. Ces noms sont un contrat : on les
   habille, on ne les renomme pas.

   Ce fichier habille aussi la page de retrait (/f/…), écrite par le Worker
   (pageRetrait dans src/index.js) : même liste de fichiers, même partage
   du lien, mêmes encarts. depot.css n'est plus chargé par aucune page.
   ========================================================================= */

/* ================================================================= HERO == */
.depot-hero{padding-block:clamp(48px,9vh,110px) clamp(64px,10vh,120px)}
.depot-grille{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(36px,5vw,72px);
  align-items:start;
}
.depot-texte .affiche{
  font-size:clamp(2.3rem,4.6vw,4.3rem);
  line-height:1;
  margin-bottom:clamp(20px,3vw,30px);
}
.depot-texte .chapo{margin-bottom:clamp(30px,4vw,44px);max-width:48ch}

/* Les garanties, en registre : un filet d'accent, l'intitulé en Sora. */
.depot-garanties{list-style:none;margin:0;padding:0;border-top:1px solid var(--trait);max-width:56ch}
.depot-garanties li{
  position:relative;
  padding:16px 0 16px 26px;
  border-bottom:1px solid var(--trait);
  font-size:.95rem; line-height:1.55;
  color:var(--texte-doux);
}
.depot-garanties li::before{
  content:""; position:absolute; left:0; top:1.6em;
  width:12px; height:1px;
  background:var(--accent);
}
.depot-garanties strong{
  display:block;
  margin-bottom:2px;
  font-family:var(--f-titre); font-weight:500; font-size:1rem;
  letter-spacing:-.018em;
  color:var(--texte);
}


/* ================================================================ CARTE ==
   La seule surface éclairée de la page : c'est là qu'on agit. */
.depot-carte{
  position:sticky;
  top:calc(var(--barre-compacte) + 24px);
  padding:clamp(24px,3vw,36px);
}
/* Le trait d'accent en tête : la lumière touche le bord haut de l'outil. */
.depot-carte::before{
  content:""; position:absolute; inset:-1px -1px auto -1px; height:2px;
  background:linear-gradient(to right,transparent,var(--accent),transparent);
}
.depot-carte > [data-etape]{display:grid;gap:16px}
.depot-carte .champ{margin:0}

.depot-titre{
  font-weight:300;
  font-size:clamp(1.6rem,2.4vw,2rem);
  line-height:1.1;
  letter-spacing:-.035em;
  margin:0 0 4px;
}
#bonjour{font-weight:500}

/* Le code à six chiffres : une réglette monospace, espacée, centrée. */
.champ .champ-code{
  font:400 1.7rem/1.2 var(--f-technique);
  letter-spacing:.34em;
  text-align:center;
  padding:16px 12px;
}

.depot-bouton{width:100%}

/* Les messages : même traitement que la réponse d'un formulaire. */
.depot-message{
  margin:0;
  padding:13px 16px;
  border-left:2px solid var(--alerte);
  background:var(--alerte-voile);
  border-radius:0 var(--r-net) var(--r-net) 0;
  color:var(--texte);
  font-size:.93rem; line-height:1.5;
}
.depot-message[data-ton="info"]{border-left-color:var(--accent);background:var(--accent-voile)}


/* ======================================================== ZONE DE DÉPÔT == */
.depot-zone{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  min-height:200px;
  padding:28px 24px;
  text-align:center;
  border:1px dashed var(--trait-net);
  border-radius:var(--r-bloc);
  background:var(--fond-creux);
  box-shadow:var(--creux-ombre);
  color:var(--texte);
  cursor:pointer;
  transition:border-color .25s var(--sortie), background-color .25s var(--sortie), box-shadow .25s var(--sortie);
}
.depot-zone:hover,.depot-zone:focus-visible,.depot-zone.survol{
  border-color:var(--accent);
  box-shadow:var(--creux-ombre),0 10px 30px -18px var(--source-halo);
}
.depot-zone.survol{border-style:solid;background:var(--accent-voile)}
.depot-plus{
  display:grid; place-items:center;
  width:54px; height:54px;
  border-radius:50%;
  background:var(--accent-aplat);
  color:var(--sur-accent);
  box-shadow:0 0 24px var(--source-halo);
  transition:transform .4s var(--sortie);
}
.depot-zone:hover .depot-plus,.depot-zone.survol .depot-plus{transform:scale(1.06)}
.depot-plus svg{width:24px;height:24px;display:block}
.depot-libelle{font-family:var(--f-titre);font-weight:500;font-size:1.12rem;letter-spacing:-.02em}
.depot-sous{font-size:.9rem;color:var(--texte-faible);max-width:32ch}


/* ====================================================== LISTE ET JAUGES == */
.liste-fichiers{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.liste-fichiers:empty{display:none}
.fichier{
  position:relative;
  display:grid; gap:8px;
  padding:12px 40px 12px 14px;
  background:var(--fond-creux);
  border:1px solid var(--trait);
  border-radius:var(--r-net);
}
.fichier-tete{display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-width:0}
.fichier-nom{
  font-size:.92rem; font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  min-width:0;
}
.fichier-poids,.fichier-etat{
  font:400 11.5px/1.3 var(--f-technique);
  letter-spacing:.04em;
  color:var(--texte-faible);
  white-space:nowrap;
}
/* La jauge : un filet qui se remplit d'ambre. depot.js pose la largeur. */
.jauge{height:2px;background:var(--trait);overflow:hidden;border-radius:1px}
.jauge i{
  display:block; height:100%;
  background:linear-gradient(to right,var(--accent),var(--accent-clair));
  box-shadow:0 0 8px var(--source-halo);
  transition:width .25s var(--sortie);
}
.fichier-retirer{
  position:absolute; top:8px; right:8px;
  width:24px; height:24px;
  display:grid; place-items:center;
  padding:0;
  border:1px solid var(--trait);
  border-radius:50%;
  background:var(--surface);
  color:var(--texte-faible);
  font:400 15px/1 var(--f-texte);
  cursor:pointer;
  transition:border-color .25s, color .25s;
}
.fichier-retirer:hover{border-color:var(--accent-trait);color:var(--texte)}


/* ================================================================== FIN == */
.depot-fin{justify-items:center;text-align:center}
.depot-coche{
  display:grid; place-items:center;
  width:64px; height:64px;
  border-radius:50%;
  background:var(--accent-aplat);
  color:var(--sur-accent);
  box-shadow:0 0 34px var(--source-halo);
}
.depot-coche svg{width:30px;height:30px;display:block}
.retrait-partage{display:grid;gap:12px;width:100%;text-align:left}
.retrait-actions{display:flex;flex-wrap:wrap;gap:10px}
.retrait-actions .btn{flex:1 1 auto}


/* ============================================================== ENCARTS ==
   L'outil gratuit est la porte du coffre. Trois encarts, du plus discret au
   plus appuyé : à côté de l'outil (il ne doit jamais gêner l'envoi), sur
   l'écran de succès (l'envoi est fait, l'attention est libre), et sur la
   page de retrait, pour qui découvre le service. */
.encart-coffre{
  margin-top:clamp(30px,4vw,44px);
  padding:clamp(22px,2.6vw,30px);
  max-width:56ch;
  border-left:2px solid var(--accent);
}
.encart-coffre .sur-titre{margin-bottom:14px}
.encart-coffre h2{
  font-weight:400;
  font-size:clamp(1.25rem,1.9vw,1.5rem);
  line-height:1.2;
  letter-spacing:-.025em;
  margin:0 0 12px;
}
.encart-coffre p{font-size:.93rem;line-height:1.58;color:var(--texte-doux);margin:0 0 12px}
.encart-coffre .encart-offre{color:var(--texte)}
.encart-coffre .encart-offre strong{font-family:var(--f-titre);font-weight:500;letter-spacing:-.015em}
.encart-coffre .lien{margin-top:4px}

/* L'encart du succès et de la page de retrait : une surface éclairée, les
   formules en relevé d'instrument, un seul bouton. */
.encart-succes{
  width:100%;
  margin-top:10px;
  padding:clamp(20px,2.4vw,28px);
  text-align:left;
  background:var(--fond-creux);
  border:1px solid var(--trait);
  border-left:2px solid var(--accent);
  border-radius:var(--r-bloc);
  box-shadow:inset 0 1px 0 var(--arete-lumiere-faible), inset 0 0 60px -34px var(--halo);
}
.encart-succes .fanion{margin-bottom:14px}
.encart-succes h2,.encart-succes h3{
  font-weight:400;
  font-size:clamp(1.3rem,2vw,1.6rem);
  line-height:1.18;
  letter-spacing:-.028em;
  margin:0 0 12px;
}
.encart-succes > p{font-size:.93rem;line-height:1.58;color:var(--texte-doux);margin:0 0 14px}
.encart-succes .encart-decouverte{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px;
  padding:14px 0;
  margin:0;
  border-top:1px solid var(--trait);
  color:var(--texte-faible);
}
.encart-decouverte strong{
  font-family:var(--f-titre); font-weight:500; font-size:1.08rem;
  letter-spacing:-.02em;
  color:var(--accent);
}
.encart-decouverte span{font-size:.86rem}
.encart-formules{
  list-style:none; margin:0 0 14px; padding:0;
  border-top:1px solid var(--trait);
  display:grid; grid-template-columns:1fr 1fr; column-gap:22px;
}
.encart-formules li{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:9px 0;
  border-bottom:1px solid var(--trait);
  font:400 12px/1.3 var(--f-technique);
  letter-spacing:.03em;
  color:var(--texte-doux);
}
.encart-formules span{min-width:0;white-space:nowrap}
.encart-formules i{font-style:normal;color:var(--texte-faible);margin-left:4px}
.encart-formules b{
  font-family:var(--f-titre); font-weight:500; font-size:.98rem;
  letter-spacing:-.02em;
  color:var(--texte);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.encart-succes .mention{margin:0 0 18px}
.encart-succes .btn{width:100%}
@media (max-width:420px){
  .encart-formules{grid-template-columns:1fr}
}


/* ======================================================== PAGE DE RETRAIT ==
   /f/<jeton> : ce que voit la personne qui reçoit les fichiers. */
.retrait-hero{padding-block:clamp(40px,8vh,96px) clamp(64px,10vh,120px)}
.retrait-w{max-width:calc(820px + 2 * var(--marge))}
.retrait-w .affiche{font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.04;margin-bottom:18px}
.retrait-mot{
  margin:24px 0 0;
  padding:4px 0 4px 20px;
  border-left:2px solid var(--accent);
  font:300 1.1rem/1.6 var(--f-texte);
  color:var(--texte-doux);
}
.retrait-carte{margin-top:clamp(28px,4vw,40px);display:grid;gap:22px}
.retrait-carte .fichier{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:12px 16px;
  padding:13px 16px;
}
.retrait-carte .fichier-tete{flex:1 1 240px;display:grid;gap:2px}
.retrait-carte .fichier-nom{white-space:normal;overflow-wrap:anywhere}
.retrait-un{flex:none;padding:10px 18px}
.retrait-partage .champ{margin:0}
.retrait-suite{
  margin-top:clamp(28px,4vw,40px);
  display:grid; gap:clamp(16px,2vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  align-items:start;
}
.retrait-suite .encart-succes{margin:0}
.invite-depot{
  padding:clamp(22px,2.6vw,30px);
  border-radius:var(--r-bloc);
  border:1px solid var(--panneau-trait);
}
.invite-depot h2{
  font-weight:400;
  font-size:clamp(1.25rem,1.9vw,1.5rem);
  line-height:1.2;
  letter-spacing:-.025em;
  margin:0 0 12px;
}
.invite-depot p{font-size:.93rem;line-height:1.58;margin:0 0 18px}


/* ============================================================ TÉLÉPHONE == */
@media (max-width:900px){
  .depot-grille{grid-template-columns:1fr}
  /* L'outil passe avant l'argumentaire : on vient ici pour déposer. */
  .depot-carte{order:-1;position:relative;top:auto}
}