/* === Coloritext emergency responsive overrides (2025-11-11) === */
html, body { max-width:100%; overflow-x:hidden; -webkit-text-size-adjust: 100%; }

img, svg, canvas, video { max-width:100%; height:auto; }

/* Base fluid widths */
.text-input, .select-input, .textarea-input, textarea, input, select { width:100%; max-width:100%; }

/* Keep grid but stack on small screens */
@media (max-width: 992px) {
  .app-container { display:block; padding:12px; margin:10px auto; }
  .top-header, .title-container { display:block; text-align:center; }
  .header-left { flex-direction: column; align-items: center; gap: 10px; }
  .title-container { width: 100%; }
  .title-container { align-items: center; }

  .input-header-row { display:flex; flex-wrap:wrap; gap:10px; }
  .input-group { flex:1 1 240px; min-width:200px; }
  .btn-colorize, .btn-export, .btn-reset { width:100%; }
  .bottom-legend { display:flex; flex-wrap:wrap; gap:10px; padding:10px; justify-content:center; }
  .main-title { font-size: clamp(34px, 8.5vw, 48px); line-height: 1.05; }
  .logo-small { width: min(240px, 60vw); height:auto; }
  .card { padding:12px; }
}

/* Ultra small phones */
@media (max-width: 420px) {
  body { font-size: 15px; }
  .legend-item { font-size: 12px; }
  .legend-dot { width:12px; height:12px; }
}

/* Prevent long colored tokens from overflowing */
.output, .preview-box, .card, .app-main { overflow-wrap: anywhere; word-break: break-word; }


/* === Mobile hotfix: prevent 'Majuscules' checkbox from being cut on small screens === */
@media (max-width: 576px) {
  .checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .checkbox-item {
    flex: 1 1 100%;
    min-width: 0; /* allow shrinking */
  }
  .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    white-space: normal;       /* allow label text to wrap */
    overflow: visible;
  }
  .checkbox-label span {
    display: inline-block;
    line-height: 1.2;
  }
  /* Make checkbox touch-friendly but not oversized */
  .checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }
}



/* Header: ensure no overflow on small screens (buttons stay in the top-right without covering the title) */
@media (max-width: 768px) {
  .top-header { padding: 60px 12px 14px; }
  .logo-small { width: min(210px, 72vw); }
  .main-title { font-size: clamp(40px, 12vw, 58px); line-height: 1.0; }
  .main-slogan { font-size: clamp(18px, 5.4vw, 24px) !important; line-height: 1.15 !important; }
  .premium-header-subtitle { font-size: 12px; }
}

/* === Sidebar guide/modes/resources : version "compacte" sur mobile/tablette === */
details.sidebar-section.ct-collapsible > summary.sidebar-title {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0; /* évite l'espace quand c'est replié */
}

/* Quand c'est replié, on rend TOUT le bloc cliquable (pas seulement le titre) */
details.sidebar-section.ct-collapsible:not([open]) { padding: 0; }
details.sidebar-section.ct-collapsible:not([open]) > summary.sidebar-title { padding: 20px; }

/* Sur ordinateur (souris) : afficher clairement la "main" sur TOUT le bloc replié */
@media (hover:hover) and (pointer:fine) {
  details.sidebar-section.ct-collapsible:not([open]) { cursor: pointer; }
}
details.sidebar-section.ct-collapsible > summary.sidebar-title::-webkit-details-marker { display: none; }
details.sidebar-section.ct-collapsible > summary.sidebar-title::after {
  content: "▾";
  font-size: 18px;
  opacity: .65;
  transform: rotate(-90deg);
  transition: transform .2s ease;
}
details.sidebar-section.ct-collapsible[open] > summary.sidebar-title {
  margin-bottom: 15px;
}
details.sidebar-section.ct-collapsible[open] > summary.sidebar-title::after {
  transform: rotate(0deg);
}

/* Desktop : on conserve le comportement repliable (clic pour ouvrir/fermer) */


/* --- Media responsive (vidéos, iframes, PDF) : anti-débordement --- */
video, iframe, embed, object{
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display:block !important;
}

video{ height:auto !important; }

iframe, embed, object{
  height: min(560px, 70vh) !important;
}

@media (max-width: 720px){
  iframe, embed, object{
    height: 320px !important;
  }
}


/* --- FIX TAILLE VIDEOS TUTORIELS (anti-débordement) --- */
.card{
  overflow: hidden; /* empêche les médias de dépasser le cadre */
}

.card video{
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: min(520px, 70vh) !important;
  display: block;
  border-radius: calc(var(--radius) - 6px);
  background: rgba(0,0,0,.04);
  object-fit: contain;
}

@media (max-width: 720px){
  .card video{
    max-height: 320px !important;
  }
}


/* --- FIX TAILLE MEDIAS TUTORIELS (anti-débordement) --- */
.card{
  overflow: hidden;
}

.card video,
.card iframe,
.card embed,
.card object{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block;
  border-radius: calc(var(--radius) - 6px);
  background: rgba(0,0,0,.04);
}

.card video{
  height: auto !important;
  max-height: min(520px, 70vh) !important;
  object-fit: contain;
}

.card iframe,
.card embed,
.card object{
  aspect-ratio: 16 / 9;
  height: auto !important;
  max-height: min(520px, 70vh) !important;
}

@media (max-width: 720px){
  .card video,
  .card iframe,
  .card embed,
  .card object{
    max-height: 320px !important;
  }
}