/* =========================================================
   Terminales — custom theme overrides for hugo-theme-relearn
   Ported from assets/scss/_styles_project.scss + _variables_project.scss
   in the former Docsy setup.
   =========================================================

   How it's loaded:
   - layouts/partials/custom-header.html injects this file on every page.
   - If you want to bundle/minify, move it to assets/ and use
     resources.Get | toCSS | minify in the partial instead.
   ========================================================= */

/* ---------- Brand colours (were SCSS variables in Docsy) ---------- */
:root {
  --TERM-primary:   #725CAD;
  --TERM-secondary: #592796;
  --TERM-danger:    #DCA06D;
  --TERM-info:      #A55B4B;
  --TERM-warning:   #4F1C51;
  --TERM-success:   #210F37;
}

/* Override Relearn's main accent colour with our brand primary. */
:root,
:root[data-r-output-format],
:root.r-auto,
:root.relearn-light,
:root.relearn-dark {
  --INTERNAL-MAIN-COLOR: var(--TERM-primary);
  --INTERNAL-MAIN-TEXT-COLOR: var(--TERM-primary);
  --INTERNAL-MAIN-LINK-COLOR: var(--TERM-primary);
  --INTERNAL-MAIN-anchor-COLOR: var(--TERM-primary);
}

/* ---------- Media alignment helpers ----------
   Used by the fullscreen-image / pdf / local-video shortcodes so that
   align="left|center|right" gives a consistent placement across all
   three, independently of Bootstrap (Relearn doesn't ship Bootstrap).
*/
/* `!important` nécessaire pour battre les règles par défaut de Relearn
   sur `img`, `object`, etc. (Relearn applique un `margin: auto` implicite
   sur les images via son reset). */
.media-align-left   { display: block !important; margin-left: 0    !important; margin-right: auto !important; }
.media-align-center { display: block !important; margin-left: auto !important; margin-right: auto !important; }
.media-align-right  { display: block !important; margin-left: auto !important; margin-right: 0    !important; }

/* ---------- Spacer utility (used by {{< spacer >}}) ---------- */
.spacer {
  height: 2rem;
}

/* ---------- Gallery shortcode ---------- */
.gallery-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 0;
  margin-bottom: 1.5rem;
}
.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
}
.gallery-item img:hover { transform: scale(1.03); }

@media (max-width: 767px) {
  .gallery-container { padding: 1rem; }
  .gallery-item img { max-width: 100%; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .gallery-item img { max-width: 48%; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .gallery-item img { max-width: 30%; }
}
@media (min-width: 1280px) {
  .gallery-item img { max-width: 23%; }
}

/* ---------- Audio player ---------- */
.audio-player-wrapper {
  margin-bottom: 1rem;
  max-width: 100%;
}
.audio-player-wrapper audio { vertical-align: middle; }
.audio-left   { margin-right: auto; margin-left: 0; }
.audio-center { margin-left: auto;  margin-right: auto; }
.audio-right  { margin-left: auto;  margin-right: 0; }

.audio-player-wrapper.audio-rounded {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.audio-player-wrapper.audio-rounded audio {
  width: 100%;
  border-radius: 0;
}

/* ---------- Justified text helper ---------- */
.text-justify { text-align: justify !important; }

/* ---------- Quote card ---------- */
.quote-card blockquote {
  position: relative;
  font-size: 1.25rem;
  line-height: 1.5;
  color: #555;
}
.quote-card blockquote::before {
  content: "\201C"; font-size: 4rem; color: #ccc;
  position: absolute; left: -0.25em; top: -0.25em;
  font-family: serif; user-select: none;
}
.quote-card blockquote::after {
  content: "\201D"; font-size: 4rem; color: #ccc;
  position: absolute; right: -0.25em; bottom: -0.5em;
  font-family: serif; user-select: none;
}

/* ---------- Lexicon list (used by layouts/_default/vocab.html) ---------- */
.lexicon-list dt {
  font-weight: bold;
  margin-top: 1em;
}
.lexicon-list dd {
  margin-left: 2em;
  margin-bottom: 1em;
}
.lexicon-list dt .stressed-vowel,
.stressed-vowel {
  color: red;
  font-weight: bold;
}

/* ---------- Small-screen cleanup (same as Docsy override) ---------- */
@media (max-width: 768px) {
  .td-page-meta .td-page-meta__link,
  .anchor,
  .td-heading-self-link {
    display: none !important;
  }
}

/* =========================================================
   Bootstrap compatibility shim
   ---------------------------------------------------------
   Relearn ne fournit pas Bootstrap. Nos shortcodes et les
   anciens contenus Docsy utilisent quelques utilitaires
   Bootstrap (mb-*, d-flex, gap-*, card…). On redéfinit ici
   le strict minimum utilisé dans le site, pour éviter
   d'avoir à réécrire tous les `_index.md` existants.
   ========================================================= */

/* Margin helpers (bottom) */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

/* Horizontal centering helper (legacy) */
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Flex utilities */
.d-flex      { display: flex !important; }
.d-block     { display: block !important; }
.d-inline    { display: inline !important; }
.d-none      { display: none !important; }
.flex-wrap   { flex-wrap: wrap !important; }
.flex-column { flex-direction: column !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

/* Rounded corners */
.rounded { border-radius: 0.375rem !important; }

/* Minimal Bootstrap-like card */
.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.375rem;
  margin-bottom: 1rem;
}
.card-body  { flex: 1 1 auto; padding: 1rem; }
.card-text  { margin-bottom: 0; }

/* Video + caption wrapper (legacy Docsy class).
   On le laisse se comporter comme un bloc flush-left par défaut, pour
   s'aligner avec les PDFs et images en `align="left"`. Si vous voulez
   un autre alignement, ajoutez `media-align-center` ou `media-align-right`
   directement sur le div. */
.video-plus-card-wrapper {
  display: block;
  margin-left: 0;
  margin-right: auto;
  /* max-width vient de l'inline style="max-width: 80%" dans le contenu */
}

/* Dark-mode card tweak */
:root.relearn-dark .card,
[data-r-output-format] :root.relearn-dark .card {
  background-color: #1e1e1e;
  border-color: rgba(255, 255, 255, 0.15);
  color: inherit;
}