/* ============================================================================
   OUTILS GRATUITS — générateur et scanner de QR code
   ----------------------------------------------------------------------------
   Charte brun/crème du site : aucune couleur inventée ici, tout vient des
   variables de koatcher.css. Le corail #E8552A reste un accent, jamais un fond.
   ========================================================================== */

.outilPage{ background:var(--bpBg); padding:0 24px 88px; }
@media (min-width:980px){ .outilPage{ padding:0 32px 120px; } }
.outilWrap{ max-width:1240px; margin:0 auto; }

/* --- En-tête --- */
.outilHead{ max-width:760px; padding:8px 0 32px; }
.outilHead__eyebrow{
  font-family:'Google Sans', sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bpMuted); margin:0 0 14px;
}
.outilHead__title{
  font-family:'Google Sans', sans-serif;
  font-size:32px; font-weight:600; letter-spacing:-.025em; line-height:1.1;
  color:var(--bpInk); margin:0 0 14px; text-wrap:balance;
}
@media (min-width:720px){ .outilHead__title{ font-size:40px; } }
.outilHead__lead{ font-size:16.5px; line-height:1.6; color:var(--bpSoft); margin:0; }

/* --- Atelier : commandes à gauche, résultat à droite --- */
.outilAtelier{
  display:grid; grid-template-columns:1fr; gap:24px;
  align-items:start;
}
@media (min-width:900px){
  .outilAtelier{ grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:40px; }
}

.outilCarte{
  background:var(--bpCard);
  border:1px solid var(--bpLine-2);
  border-radius:20px;
  padding:22px;
}
@media (min-width:720px){ .outilCarte{ padding:26px; } }

.outilChamp{ display:block; margin-bottom:18px; }
.outilChamp > span{
  display:block; font-size:13px; font-weight:600; color:var(--bpInk);
  margin-bottom:8px; letter-spacing:-.005em;
}
.outilChamp small{ font-weight:400; color:var(--bpMuted); }

.outilPage textarea,
.outilPage input[type=text],
.outilPage select{
  width:100%; font:inherit; font-size:15px; color:var(--bpInk);
  background:#ffffff; border:1px solid var(--bpLine-2); border-radius:12px;
  padding:12px 14px;
}
.outilPage textarea{ min-height:120px; resize:vertical; line-height:1.5; }
.outilPage textarea:focus-visible,
.outilPage input:focus-visible,
.outilPage select:focus-visible,
.outilPage button:focus-visible,
.outilPage a:focus-visible{
  outline:2px solid #E8552A; outline-offset:2px;
}

.outilReglages{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .outilReglages{ grid-template-columns:1fr; } }
.outilPage input[type=color]{
  width:100%; height:44px; padding:4px; background:#fff;
  border:1px solid var(--bpLine-2); border-radius:12px; cursor:pointer;
}
.outilPage input[type=range]{ width:100%; accent-color:#E8552A; }

.outilExemples{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.outilExemple{
  height:32px; padding:0 13px; border-radius:999px;
  background:#ffffff; border:1px solid var(--bpLine-2);
  font-family:'Google Sans', sans-serif; font-size:13px; color:var(--bpInk);
  cursor:pointer; -webkit-appearance:none; appearance:none;
}

/* --- Résultat --- */
.outilRendu{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:1; width:100%;
  background:#ffffff; border:1px solid var(--bpLine-2); border-radius:20px;
  padding:18px; overflow:hidden;
}
.outilRendu svg{ width:100%; height:100%; display:block; }
.outilRendu.is-vide::before{
  content:attr(data-vide);
  color:var(--bpMuted); font-size:14px; text-align:center; padding:0 24px;
}

.outilEtat{ font-size:13px; color:var(--bpMuted); margin:12px 0 0; min-height:19px; }
.outilEtat--ok{ color:var(--bpSoft); }
.outilEtat--ko{ color:#b03a2e; }

.outilActions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.outilBtn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 20px; border-radius:12px; border:0;
  background:var(--bpAccent); color:var(--bpOnAccent);
  font-family:'Google Sans', sans-serif; font-size:14.5px; font-weight:500;
  cursor:pointer; text-decoration:none; -webkit-appearance:none; appearance:none;
}
.outilBtn--ghost{ background:#ffffff; color:var(--bpInk); border:1px solid var(--bpLine-2); }
.outilBtn[disabled]{ opacity:.45; cursor:default; }
/* Même piège que .btn : inline-flex masquait l'effet de [hidden]. Sans ça, le
   bouton « Arrêter » et le lien du résultat s'affichaient avant l'heure. */
.outilBtn[hidden]{ display:none; }
@media (hover:hover) and (pointer:fine){
  .outilBtn:hover{ background:var(--bpAccentDeep); }
  .outilBtn--ghost:hover{ background:var(--bpCardSoft); }
  .outilExemple:hover{ background:var(--bpCardSoft); }
}

/* --- Scanner --- */
.scanZone{
  position:relative; width:100%; aspect-ratio:4/3;
  background:var(--bpForest); border-radius:20px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.scanZone video{ width:100%; height:100%; object-fit:cover; display:none; }
.scanZone.is-actif video{ display:block; }
.scanZone__repos{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; padding:24px;
  color:rgba(246,246,247,.72); text-align:center; font-size:14px;
}
.scanZone.is-actif .scanZone__repos{ display:none; }
/* Cadre de visée : purement indicatif, il ne contraint pas la détection. */
.scanZone.is-actif::after{
  content:''; position:absolute;
  top:50%; left:50%; width:58%; aspect-ratio:1; transform:translate(-50%,-50%);
  border:2px solid rgba(246,246,247,.85); border-radius:16px;
  box-shadow:0 0 0 100vmax rgba(36,29,27,.35);
}

.scanDepot{
  margin-top:14px; padding:18px; border-radius:16px; text-align:center;
  border:1.5px dashed var(--bpLineStrong); color:var(--bpSoft); font-size:14px;
}
.scanDepot.is-survol{ border-color:#E8552A; background:rgba(232,85,42,.05); }
.scanDepot input[type=file]{ display:block; margin:10px auto 0; font-size:13px; }

.scanResultat{
  margin-top:18px; padding:18px 20px; border-radius:16px;
  background:rgba(232,85,42,.06); border:1px solid rgba(232,85,42,.18);
  border-left:3px solid #E8552A;
}
.scanResultat__label{
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bpMuted); margin:0 0 8px;
}
.scanResultat__texte{
  font-size:15px; line-height:1.55; color:var(--bpInk); margin:0 0 12px;
  word-break:break-all;
}
.scanResultat a{ color:var(--bpInk); }

/* --- Cartes du hub --- */
.outilGrille{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:820px){ .outilGrille{ grid-template-columns:1fr 1fr; gap:20px; } }
.outilTuile{
  display:flex; flex-direction:column; gap:10px;
  padding:26px; border-radius:20px; text-decoration:none;
  background:var(--bpCard); border:1px solid var(--bpLine-2); color:inherit;
  transition:border-color .16s ease, transform .16s ease;
}
@media (hover:hover) and (pointer:fine){
  .outilTuile:hover{ border-color:var(--bpInk); transform:translateY(-2px); }
}
.outilTuile__icone{
  width:44px; height:44px; border-radius:12px; display:flex;
  align-items:center; justify-content:center;
  background:rgba(232,85,42,.10); color:#E8552A;
}
.outilTuile__icone svg{ width:22px; height:22px; }
.outilTuile__titre{
  font-family:'Google Sans', sans-serif; font-size:19px; font-weight:600;
  letter-spacing:-.02em; color:var(--bpInk); margin:0;
}
.outilTuile__texte{ font-size:14.5px; line-height:1.55; color:var(--bpSoft); margin:0; }
.outilTuile__fleche{ margin-top:auto; padding-top:8px; font-size:14px; color:#E8552A; }

/* --- Notes sous l'outil --- */
.outilNote{
  margin-top:22px; font-size:13.5px; line-height:1.6; color:var(--bpMuted);
}
.outilNote strong{ color:var(--bpSoft); }

@media (prefers-reduced-motion: reduce){
  .outilTuile{ transition:none; }
}

/* --- Rendu d'un code-barres : paysage, pas carré ------------------------- */
.outilRendu--large{
  aspect-ratio:auto;
  min-height:220px;
  padding:24px 18px;
}
.outilRendu--large svg{ width:100%; height:auto; max-height:260px; }