/* =========================================================
   PROMPT CHALLENGE
   ---------------------------------------------------------
   Tout est sous .pc-app ou préfixé .pc- : ce fichier ne peut
   pas déborder sur le reste du site, et il n'est chargé que
   sur les pages de l'atelier.

   Même univers visuel que Avatar Battle — noir, vert acide,
   touches orange — pour qu'on sente qu'on est au même endroit.
   ========================================================= */

.pc-app{
  --pc-vert:   #9BE34A;
  --pc-orange: #FF7A18;
  --pc-rouge:  #E24B4A;
  --pc-or:     #FFD400;
  --pc-nuit:   #0D0D0D;
  --pc-carte:  #171717;
  --pc-bord:   #2B2B2B;
}

.pc-fond{
  background:
    radial-gradient(1100px 560px at 50% -10%, rgba(155,227,74,.08), transparent 60%),
    radial-gradient(800px 500px at 90% 100%, rgba(255,122,24,.06), transparent 60%),
    var(--pc-nuit);
  min-height:100vh;
}

.pc-titre{
  font-family:var(--ac-titre); font-weight:900; font-style:italic;
  letter-spacing:-1.5px; line-height:.95; text-transform:uppercase; margin:0;
}
.pc-titre .acc{ color:var(--pc-vert); }
.pc-xxl{ font-size:clamp(36px,7.5vw,80px); }
.pc-xl { font-size:clamp(24px,4.4vw,44px); }

.pc-kicker{
  display:inline-block;
  font-family:var(--ac-titre); font-weight:800; font-size:11px;
  letter-spacing:4px; text-transform:uppercase;
  color:var(--pc-nuit); background:var(--pc-vert);
  padding:6px 14px; border-radius:4px; transform:skewX(-8deg);
}

.pc-cache{ display:none !important; }

/* ---------------------------------------------------------
   LES TROIS NIVEAUX
   --------------------------------------------------------- */
.pc-portes{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:30px 0;
}
@media (max-width:900px){ .pc-portes{ grid-template-columns:1fr; } }

.pc-porte{
  display:flex; flex-direction:column; text-align:left;
  min-height:210px; padding:24px 22px;
  border-radius:18px; background:var(--pc-carte);
  border:2px solid var(--pc-bord); color:#F7F7F7;
  cursor:pointer; font-family:var(--ac-texte);
  transition:transform .18s ease, border-color .18s ease;
}
.pc-porte:hover{ transform:translateY(-5px); border-color:var(--pc-vert); }
.pc-porte .ico{ font-size:40px; line-height:1; margin-bottom:auto; }
.pc-porte h3{
  font-family:var(--ac-titre); font-weight:900; font-style:italic;
  text-transform:uppercase; font-size:22px; margin:14px 0 6px;
}
.pc-porte p{ font-size:14px; color:#A8A8A8; margin:0; }
.pc-porte .go{
  margin-top:14px; font-weight:800; font-size:12px;
  letter-spacing:2px; color:var(--pc-vert);
}

/* ---------------------------------------------------------
   L'EXERCICE
   --------------------------------------------------------- */
.pc-entete-ex{
  display:flex; align-items:flex-end; gap:20px;
  flex-wrap:wrap; padding:26px 0 4px;
}
.pc-compteur{
  margin-left:auto; font-size:14px; color:#8A8A8A;
  font-family:var(--ac-titre); letter-spacing:1px;
}
.pc-compteur b{ color:var(--pc-vert); font-size:20px; }

.pc-travail{
  display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:18px;
}
@media (max-width:880px){ .pc-travail{ grid-template-columns:1fr; } }

.pc-image-zone img{
  width:100%; border-radius:16px; display:block;
  border:2px solid var(--pc-bord); background:#0A0A0A;
}

.pc-ecriture{
  background:var(--pc-carte); border:1px solid var(--pc-bord);
  border-radius:16px; padding:20px;
}
.pc-label{
  display:block; font-family:var(--ac-titre); font-weight:800;
  font-size:12px; letter-spacing:2px; text-transform:uppercase;
  color:var(--pc-vert); margin-bottom:10px;
}
.pc-app textarea{
  width:100%; background:#101010; color:#F7F7F7;
  border:2px solid var(--pc-bord); border-radius:12px;
  padding:16px; font-family:var(--ac-texte); font-size:16px;
  line-height:1.6; resize:vertical; outline:none;
}
.pc-app textarea:focus{ border-color:var(--pc-vert); }
.pc-app ::placeholder{ color:#5A5A5A; }

.pc-outils{
  display:flex; align-items:center; gap:14px;
  margin-top:14px; flex-wrap:wrap;
}
.pc-outils .ac-btn{ margin-left:auto; }
@media (max-width:520px){
  .pc-outils .ac-btn{ margin-left:0; width:100%; }
}

/* L'aide, variable selon le niveau */
.pc-aide{
  background:rgba(155,227,74,.07);
  border:1px dashed var(--pc-vert);
  border-radius:12px; padding:14px 16px; margin-bottom:16px;
  font-size:13px; line-height:1.9;
}
.pc-aide b{
  display:block; font-family:var(--ac-titre); font-size:11px;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--pc-vert); margin-bottom:6px;
}
.pc-aide span{
  display:inline-block; margin-right:14px; color:#C8C8C8;
}
.pc-aide.leger{
  background:transparent; border-style:solid; border-color:var(--pc-bord);
  color:#8A8A8A; font-size:13px; line-height:1.5;
}

/* ---------------------------------------------------------
   LE RÉSULTAT
   --------------------------------------------------------- */
.pc-score-bloc{
  text-align:center; padding:28px 20px; margin-top:24px;
  border-radius:18px;
  background:linear-gradient(160deg,rgba(155,227,74,.10),transparent);
  border:2px solid var(--pc-vert);
}
.pc-score-lbl{
  font-family:var(--ac-titre); font-weight:800; font-size:11px;
  letter-spacing:3px; text-transform:uppercase; color:#8A8A8A;
}
.pc-score{
  font-family:var(--ac-titre); font-weight:900; font-style:italic;
  font-size:clamp(48px,11vw,88px); line-height:1;
  color:var(--pc-vert); margin:6px 0;
}
.pc-score small{ font-size:.28em; color:#8A8A8A; font-style:normal; }
.pc-etoiles{ font-size:26px; color:var(--pc-or); letter-spacing:4px; }
.pc-essai{ font-size:13px; color:#8A8A8A; margin-top:8px; }

.pc-grille-cat{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px; margin-top:18px;
}
.pc-cat{
  display:flex; align-items:center; gap:12px;
  padding:13px 15px; border-radius:12px;
  background:var(--pc-carte); border:1px solid var(--pc-bord);
}
.pc-cat.ok{       border-color:rgba(155,227,74,.45); }
.pc-cat.partiel{  border-color:rgba(255,122,24,.45); }
.pc-cat.manquant{ border-color:rgba(226,75,74,.35); }
.pc-cat .ic{
  font-size:19px; font-weight:900; width:26px; text-align:center; flex:0 0 auto;
}
.pc-cat .ic.ok{    color:var(--pc-vert); }
.pc-cat .ic.moyen{ color:var(--pc-orange); }
.pc-cat .ic.rate{  color:var(--pc-rouge); }
.pc-cat .txt b{ display:block; font-size:14px; }
.pc-cat .txt span{ font-size:12px; color:#8A8A8A; }

.pc-ligne{
  padding:9px 0; border-bottom:1px solid var(--pc-bord);
  font-size:14px; line-height:1.6;
}
.pc-ligne:last-child{ border-bottom:none; }
.pc-ligne.ok{ color:#C8E6A0; }
.pc-ligne.haute b{ color:var(--pc-orange); }
.pc-ligne b{ color:#F7F7F7; }

.pc-actions{
  display:flex; gap:12px; flex-wrap:wrap; margin-top:20px;
}
.pc-actions .ac-btn{ flex:1; min-width:180px; }

.pc-nav-bas{
  display:flex; gap:12px; flex-wrap:wrap;
  margin-top:28px; padding-top:22px;
  border-top:1px solid var(--pc-bord);
}
.pc-nav-bas .ac-btn{ flex:1; min-width:150px; }

.pc-err{  color:#FFB4B3; font-size:14px; }
.pc-info{ color:var(--pc-vert); font-size:14px; }
.pc-spin{
  display:inline-block; width:14px; height:14px;
  border:2px solid rgba(255,255,255,.15);
  border-top-color:var(--pc-vert); border-radius:50%;
  animation:pcSpin .8s linear infinite; vertical-align:-2px; margin-right:6px;
}
@keyframes pcSpin{ to{ transform:rotate(360deg); } }

/* ---------------------------------------------------------
   LA MÉTHODE — fenêtre
   --------------------------------------------------------- */
.pc-modale{
  display:none; position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,.92); padding:20px;
  overflow-y:auto;
}
.pc-modale.ouverte{ display:block; }
.pc-modale-boite{
  position:relative;
  max-width:760px; margin:30px auto;
  background:var(--pc-carte);
  border:2px solid var(--pc-bord); border-radius:20px;
  padding:clamp(24px,5vw,44px);
}
.pc-modale-fermer{
  position:absolute; top:16px; right:16px;
  width:44px; height:44px; border-radius:50%;
  background:none; border:2px solid var(--pc-bord);
  color:#fff; font-size:20px; cursor:pointer;
}

.pc-methode{ display:grid; gap:10px; }
.pc-m{
  display:grid; grid-template-columns:120px 1fr; gap:14px;
  align-items:baseline;
  padding:12px 0; border-bottom:1px solid var(--pc-bord);
}
.pc-m:last-child{ border-bottom:none; }
.pc-m b{
  font-family:var(--ac-titre); font-weight:900; font-size:13px;
  letter-spacing:2px; color:var(--pc-vert);
}
.pc-m span{ font-size:14px; color:#C8C8C8; line-height:1.5; }
.pc-methode.pc-secondaire .pc-m b{ color:#8A8A8A; font-size:12px; }
@media (max-width:560px){
  .pc-m{ grid-template-columns:1fr; gap:2px; }
}

.pc-exemple{
  border-radius:12px; padding:16px 18px; margin-top:10px;
  font-size:15px; line-height:1.65;
  border-left:4px solid var(--pc-bord); background:rgba(255,255,255,.03);
}
.pc-exemple.faible{ border-left-color:var(--pc-rouge); color:#C8C8C8; }
.pc-exemple.fort{   border-left-color:var(--pc-vert); }

.pc-decoupe{ margin-top:18px; }
.pc-decoupe div{
  padding:9px 0; border-bottom:1px dashed var(--pc-bord);
  font-size:14px; color:#C8C8C8;
}
.pc-decoupe div:last-child{ border-bottom:none; }
.pc-decoupe .t{
  display:inline-block; min-width:110px;
  font-family:var(--ac-titre); font-weight:800; font-size:11px;
  letter-spacing:2px; color:var(--pc-vert);
}

@media (prefers-reduced-motion:reduce){
  .pc-porte, .pc-spin{ transition:none; animation:none; }
}