/* ------------------------------------------------------------------ *
 * LA PAGE DE RECRUTEMENT ET LA PAGE DE PREUVE. Par-dessus `guilde.css`  *
 * (couleurs, bandeau, blocs, boutons) : ici seulement ce qui n'existe  *
 * pas sur la page des membres — le fil des étapes, un formulaire, les  *
 * tuiles de captures, le message à copier.                             *
 *                                                                     *
 * TÉLÉPHONE D'ABORD. Un candidat postule depuis le jeu, donc depuis    *
 * son téléphone : une colonne, des cibles de quarante-quatre pixels,   *
 * des champs à seize pixels (en dessous, iOS zoome à la mise au point).*
 * Sur grand écran la colonne reste étroite : un formulaire de mille    *
 * pixels de large ne se lit pas mieux, il se lit moins bien.           *
 * ------------------------------------------------------------------ */
.rejoindre{max-width:760px;margin:0 auto;padding:22px 20px 90px}
.rejoindre .bloc{padding:22px 22px 24px}
.rejoindre .bloc h2{font-size:1.2rem;margin-bottom:8px}
.rejoindre .bloc p.quoi{max-width:none;line-height:1.6}
.rejoindre .regles{margin-top:10px}
.rejoindre .regles li b{font-size:.98rem}
.rejoindre .regles li span{font-size:.9rem;color:var(--doux)}

/* LE FIL DES ÉTAPES. Trois pastilles reliées : le candidat sait où il est et
   combien il lui reste. L'étape faite passe au vert, la courante à l'accent. */
.etapes{list-style:none;margin:0 0 20px;padding:0;display:flex;gap:6px;align-items:stretch}
.etape{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 6px 12px;border-radius:12px;background:var(--panneau);border:1px solid var(--bord);
  color:var(--faible);text-align:center}
.etape b{width:30px;height:30px;border-radius:999px;display:grid;place-items:center;
  font:900 .92rem/1 inherit;background:rgb(255 255 255/.06);border:1px solid var(--bord)}
.etape span{font-size:.76rem;font-weight:800;letter-spacing:.02em;line-height:1.2}
.etape.courante{color:var(--texte);border-color:rgb(238 166 46/.55)}
.etape.courante b{background:var(--accent);color:#17130a;border-color:transparent}
.etape.faite{color:var(--doux)}
.etape.faite b{background:rgb(104 217 138/.16);color:var(--vert);border-color:rgb(104 217 138/.4)}

/* LE GROS BOUTON : une seule action principale par écran, et on la voit. */
.gros{display:block;width:100%;margin-top:16px;font:800 1rem/1.2 inherit;padding:16px 18px;
  border-radius:12px;border:0;cursor:pointer;background:var(--accent);color:#17130a;
  text-align:center;text-decoration:none;min-height:52px}
.gros:hover{filter:brightness(1.06)}
.gros[disabled]{opacity:.55;cursor:default;filter:none}

/* UN BLOC FAIT se replie : la page ne s'allonge pas à chaque étape franchie,
   et ce qui compte — l'étape en cours — reste sous le pouce. */
.bloc.fait{border-color:rgb(104 217 138/.35)}
.bloc.fait h2{font-size:1.02rem}
.bloc.fait details{margin-top:10px}
.bloc.fait summary{cursor:pointer;color:var(--doux);font-size:.88rem;font-weight:700;min-height:44px;
  display:flex;align-items:center}
.bloc.fait .regles{margin-top:10px}

/* L'ENCART G1 / G2 : une information, pas une règle de plus. */
.note{margin:16px 0 4px;padding:14px 16px;border-radius:12px;background:var(--carte);
  border:1px solid var(--bord);border-left:3px solid var(--bleu)}
.note b{display:block;font-size:.92rem;margin-bottom:4px}
.note p{margin:0;font-size:.88rem;color:var(--doux);line-height:1.55}

/* LE FORMULAIRE. Une étiquette AU-DESSUS de chaque champ, jamais à côté : sur
   320 px il n'y a pas de côté. */
.champ{display:block;margin:0 0 16px}
.champ>span{display:block;font-size:.8rem;font-weight:800;letter-spacing:.04em;color:var(--doux);
  margin:0 0 6px}
.champ .aide{display:block;font-size:.8rem;color:var(--faible);line-height:1.45;margin:-2px 0 8px}
.champ input,.champ select,.champ textarea{width:100%;font:400 16px/1.35 inherit;padding:13px 14px;
  border-radius:11px;border:1px solid rgb(255 255 255/.16);background:rgb(255 255 255/.05);
  color:inherit;min-height:48px}
.champ textarea{resize:vertical;min-height:110px}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:2px solid var(--accent);
  outline-offset:1px;border-color:transparent}
.champ.manque>span{color:var(--rouge)}
.champ.manque input,.champ.manque select{border-color:var(--rouge)}
fieldset.captures{border:0;padding:0;margin:4px 0 16px}
fieldset.captures legend{padding:0;font-size:.8rem;font-weight:800;letter-spacing:.04em;color:var(--doux);
  margin:0 0 6px}
fieldset.captures p.quoi{margin-bottom:12px}

/* LES TUILES DE CAPTURES. Une tuile est un `<label>` qui porte son `<input
   type=file>` : appuyer n'importe où dedans ouvre la galerie du téléphone.
   L'aperçu remplace le pointillé : on voit ce qu'on va envoyer. */
.tuiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:600px){.tuiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tuile{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:4px;min-height:132px;padding:14px 10px;border-radius:12px;cursor:pointer;text-align:center;
  border:2px dashed rgb(255 255 255/.2);background:rgb(255 255 255/.03);overflow:hidden}
.tuile:hover{border-color:rgb(255 255 255/.4)}
.tuile input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.tuile .tuileTitre{font-size:.84rem;font-weight:800;line-height:1.25}
.tuile .tuileAide{font-size:.72rem;color:var(--faible)}
.tuile.obligatoire .tuileAide{color:var(--accent)}
.tuile.pleine{border-style:solid;border-color:rgb(104 217 138/.5)}
.tuile.pleine .tuileTitre,.tuile.pleine .tuileAide{position:relative;z-index:1;
  text-shadow:0 1px 3px rgb(0 0 0/.9)}
.tuile.manque{border-color:var(--rouge)}
.tuile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.tuile .retirer{position:absolute;top:6px;right:6px;z-index:2;width:34px;height:34px;border-radius:999px;
  border:0;background:rgb(0 0 0/.65);color:#fff;font:900 1rem/1 inherit;cursor:pointer}

/* LE PIÈGE À ROBOTS : hors écran, hors tabulation, hors lecteur d'écran. */
.piege{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.mal{color:var(--rouge);font-size:.88rem;margin:10px 0 0;min-height:1.2em}
.progression{margin-top:10px;font-variant-numeric:tabular-nums}

/* LA RÉFÉRENCE ET LE LIEN DE PREUVE : gros, copiables, impossibles à rater. */
.ref{font-style:normal;color:var(--accent);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.04em}
.preuve{margin:14px 0 6px;padding:14px 16px;border-radius:12px;background:var(--carte);border:1px solid var(--bord)}
.preuve span{display:block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faible)}
.preuve b.ref{display:block;font-size:1.6rem;margin:2px 0 8px}
.preuve code{display:block;font-size:.86rem;overflow-wrap:anywhere;color:var(--doux);margin:0 0 10px}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.actions .mini{min-height:44px;padding:10px 14px;font-size:.84rem}

/* LA MARCHE À SUIVRE SUR DISCORD, en trois pas numérotés, puis le message. */
.marche{margin:8px 0 6px;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.marche li{font-size:.92rem;line-height:1.5}
.message{margin:14px 0 0;padding:14px 16px;border-radius:12px;background:var(--carte);
  border:1px solid var(--bord);font:500 .88rem/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre-wrap;word-break:break-word;color:var(--texte)}

/* LA FICHE DE LA PAGE DE PREUVE : quatre paires étiquette / valeur. */
.fiche{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 14px}
.fiche div{background:var(--carte);border:1px solid var(--bord);border-radius:12px;padding:10px 13px;min-width:0}
.fiche span{display:block;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faible)}
.fiche b{display:block;font-size:1.02rem;margin-top:2px;overflow-wrap:anywhere}

@media (max-width:480px){
  .rejoindre{padding:14px 13px 80px}
  .rejoindre .bloc{padding:18px 15px 20px}
  .etape{padding:8px 4px 10px}
  .etape span{font-size:.7rem}
}

/* ------------------------------------------------------------------ *
 * LA THÉMATIQUE. Le jeu a son art : on s'en sert. Le bandeau porte les  *
 * personnages que la guilde aligne vraiment (détourés, servis en webp   *
 * par le CDN), fondus dans un dégradé d'or sombre ; l'étape Discord a   *
 * sa figure de garde. Rien n'est dessiné à la main, rien n'est stocké.  *
 * ------------------------------------------------------------------ */
.heros{position:relative;overflow:hidden;border-radius:var(--rayon);margin:0 0 18px;
  min-height:300px;display:flex;align-items:center;isolation:isolate;
  background:
    radial-gradient(120% 90% at 85% 15%,rgb(238 166 46/.30),transparent 60%),
    linear-gradient(160deg,#2a2114 0%,#1c1a1f 45%,#141416 100%);
  border:1px solid rgb(238 166 46/.35);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.06),0 18px 40px -28px rgb(238 166 46/.55)}
/* Les rayures « menaçantes » : fines, dorées, en fond, comme une planche. */
.heros::before{content:'';position:absolute;inset:0;z-index:0;opacity:.14;
  background:repeating-linear-gradient(115deg,transparent 0 22px,rgb(238 166 46/.55) 22px 23px)}
.heros-texte{position:relative;z-index:2;padding:24px 22px;max-width:52%}
.heros-sur{display:block;font-size:.64rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin:0 0 8px}
.heros h2{margin:0 0 8px;font-size:1.55rem;font-weight:900;letter-spacing:-.02em;line-height:1.1;
  background:linear-gradient(90deg,#fff 0%,#f5d58a 70%,var(--accent) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.heros p{margin:0;font-size:.9rem;color:var(--doux);line-height:1.55;max-width:44ch}
.heros-noms{display:block;margin:12px 0 0;font-size:.72rem;color:var(--faible);line-height:1.5}
.heros-noms span{font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgb(238 166 46/.8);margin-right:4px}
/* LES FIGURES : ENTIÈRES, JAMAIS COUPÉES. Chaque illustration est un carré
   (1280 × 1280) avec le personnage dedans : on lui donne la HAUTEUR du bandeau
   et la largeur suit, donc la tête et les pieds sont toujours dans le cadre.
   Elles se recouvrent en éventail depuis la droite, la plus jouée devant et la
   plus grande, les suivantes un cran derrière et un cran plus petites. */
.heros-figures{position:absolute;top:0;right:0;bottom:0;width:64%;z-index:1;pointer-events:none;
  display:flex;flex-direction:row-reverse;align-items:flex-end;justify-content:flex-start;
  padding-right:1%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);
  mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
/* LE FILIGRANE « JOJOGS.DEV » EST DANS L'IMAGE ELLE-MÊME (le CDN protège l'art
   du site contre la copie, aucun paramètre ne l'ôte). Il se voit surtout sur
   les marges transparentes du carré, autour du personnage : on ne garde donc
   que la colonne centrale (`object-fit:cover` dans une boîte étroite), toute la
   hauteur, pieds au sol — le personnage entier, et le moins de marge possible. */
.heros-figures .figure{flex:none;height:100%;aspect-ratio:11/20;display:block;
  filter:drop-shadow(0 10px 18px rgb(0 0 0/.65))}
.heros-figures .figure img{height:100%;width:100%;display:block;object-fit:cover;object-position:center bottom}
/* PAR POSITION, PAS PAR CLASSE : une figure dont l'illustration manque est
   retirée du DOM et les suivantes remontent d'un rang toutes seules. */
.heros-figures .figure:nth-child(1){z-index:5}
.heros-figures .figure:nth-child(2){z-index:4;height:91%;margin-right:-17%}
.heros-figures .figure:nth-child(3){z-index:3;height:82%;margin-right:-17%;opacity:.92}
.heros-figures .figure:nth-child(4){z-index:2;height:73%;margin-right:-17%;opacity:.8}
.heros-figures .figure:nth-child(5){z-index:1;height:64%;margin-right:-17%;opacity:.65}
.heros-figures .figure:nth-child(n+6){display:none}
@media (max-width:600px){
  .heros{min-height:0;flex-direction:column;align-items:stretch}
  .heros-texte{max-width:100%;padding:18px 16px 0}
  .heros h2{font-size:1.32rem}
  .heros p{font-size:.86rem}
  .heros-noms{margin-top:10px}
  /* Sous le texte, une rangée de trois figures centrées, pleines elles aussi. */
  .heros-figures{position:relative;width:100%;height:200px;margin-top:8px;
    justify-content:center;padding-right:0;
    -webkit-mask-image:none;mask-image:none}
  .heros-figures .figure:nth-child(2),.heros-figures .figure:nth-child(3){margin-right:-12%}
  .heros-figures .figure:nth-child(n+4){display:none}
}

/* LA FIGURE DE GARDE de l'étape Discord : à droite, derrière le contenu, grand
   écran seulement (sur téléphone elle prendrait la place du message). */
#s3{position:relative;overflow:hidden}
#s3 .deco{position:absolute;right:-30px;bottom:-30px;width:260px;height:260px;z-index:0;opacity:.28;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40%);
  mask-image:linear-gradient(180deg,transparent 0,#000 40%)}
#s3 .deco img{width:100%;height:100%;object-fit:contain;object-position:bottom right}
#s3>*:not(.deco){position:relative;z-index:1}
@media (max-width:720px){#s3 .deco{display:none}}

/* Les étapes et les blocs prennent un liseré d'or discret, dans le même esprit. */
.rejoindre .bloc h2{background:linear-gradient(90deg,#fff 0%,#f5d58a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.bloc.fait h2{background:none;color:var(--vert)}