/* Thème « Encre » — ITpulse.
   Couche de personnalisation du thème enfant encre_itpulse (parent :
   fruity_twentythree). Source de vérité de la charte : skill brand.
   IBM Plex Sans est déjà servie localement par LimeSurvey (option
   font ibm-sans) ; on n'embarque que la Serif, pour les titres. */

@font-face {
  font-family: "IBM Plex Serif";
  src: url("../fonts/IBMPlexSerif-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../fonts/IBMPlexSerif-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Tokens Encre */
  --encre-accent: #b5573a;
  --encre-accent-hover: #9a4830;
  --encre-accent-subtle: #8a8577;
  --encre-text-strong: #151a28;
  --encre-text: #3a4154;
  --encre-text-muted: #5a6275;
  --encre-bg: #f4f0e7;
  --encre-bg-pure: #ffffff;
  --encre-bg-elevated: #ebe5d8;

  /* Recâblage Bootstrap 5 (le thème parent est bâti dessus) */
  --bs-primary: var(--encre-accent);
  --bs-primary-rgb: 181, 87, 58;
  --bs-secondary: var(--encre-accent-subtle);
  --bs-body-bg: var(--encre-bg);
  --bs-body-color: var(--encre-text);
  --bs-link-color: var(--encre-accent);
  --bs-link-color-rgb: 181, 87, 58;
  --bs-link-hover-color: var(--encre-accent-hover);
  --bs-link-hover-color-rgb: 154, 72, 48;
}

/* Fond de site crème, jamais blanc pur (règle de la charte) */
body {
  background-color: var(--encre-bg);
  color: var(--encre-text);
  /* Pas de césure automatique : les coupures type « Comp-tez » n'ont
     rien à faire dans un texte adressé à un client */
  hyphens: manual;
}

/* vanilla force hyphens:auto sur ce conteneur : on l'éteint là où il
   est allumé */
#outerframeContainer {
  hyphens: manual !important;
  -webkit-hyphens: manual !important;
}

/* Titres : IBM Plex Serif, encre profonde — signature de la charte */
h1, h2, h3, h4, h5, h6,
.survey-name, .group-title, .group-name, .question-title {
  font-family: "IBM Plex Serif", Georgia, serif;
  color: var(--encre-text-strong);
}
h1, .survey-name { font-weight: 700; }
h2, h3, h4, h5, h6, .group-title, .group-name { font-weight: 600; }

/* Barre supérieure : crème comme la page (le blanc pur reste réservé
   aux cartes), filet discret pour garder la barre lisible au défilé ;
   wordmark variante light, prévue pour fond crème */
.navbar, nav.navbar {
  background-color: var(--encre-bg) !important;
  border-bottom: 1px solid var(--encre-bg-elevated) !important;
}
/* vanilla met un padding de 15 px DANS l'image (la hauteur visible
   fondait à ~18 px) et la variation borne max-height : on neutralise
   les deux et on centre verticalement dans la barre */
.navbar-brand .logo, .logo-container > img {
  height: 44px !important;
  max-height: 44px !important;
  width: auto !important;
  padding: 0 !important;
}
.navbar-brand.logo-container {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding-left: 1rem;
}

/* Colonne de contenu : centrée et bornée. 72 rem de cadre × la
   colonne col-xl-8 du thème ≈ 750 px utiles, soit 60 à 75 caractères
   par ligne à 16 px (règle de mesure de la charte) */
.outerframe {
  max-width: 72rem;
  margin-inline: auto;
}

/* Bandeau de progression : aucun fond propre (le crème de la page
   transparaît), piste fine */
.top-container, .ls-progress-container {
  background-color: transparent !important;
}
.top-container .progress {
  height: 0.375rem;
  margin-bottom: 0;
}

/* Questions : cartes blanches (surfaces élevées) sur fond crème */
.question-container, .card, .list-group-item, .modal-content {
  background-color: var(--encre-bg-pure);
  border-color: var(--encre-bg-elevated);
}

/* Boutons primaires : terracotta, hover terracotta foncé.
   Déclarations littérales avec !important : la variation couleur du
   parent (theme_apple.css) pose des couleurs en dur que les seules
   variables Bootstrap ne suffisent pas à battre. */
.btn-primary,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active, .btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--encre-accent) !important;
  border-color: var(--encre-accent) !important;
  color: #ffffff !important;
}
.btn-primary:hover {
  background-color: var(--encre-accent-hover) !important;
  border-color: var(--encre-accent-hover) !important;
}
.btn-primary:focus, .btn-primary:focus-visible,
.btn-check:focus + .btn-primary {
  box-shadow: 0 0 0 0.25rem rgba(181, 87, 58, 0.25) !important;
}
.btn-primary:disabled, .btn-primary.disabled {
  background-color: var(--encre-accent-subtle) !important;
  border-color: var(--encre-accent-subtle) !important;
}
.btn-outline-secondary {
  --bs-btn-color: var(--encre-text);
  --bs-btn-border-color: var(--encre-accent-subtle);
  --bs-btn-hover-bg: var(--encre-bg-elevated);
  --bs-btn-hover-border-color: var(--encre-accent-subtle);
  --bs-btn-hover-color: var(--encre-text-strong);
}

/* Progression */
.progress { background-color: var(--encre-bg-elevated); }
.progress-bar { background-color: var(--encre-accent); }

/* Cases et boutons radio */
input[type="radio"], input[type="checkbox"] { accent-color: var(--encre-accent); }
.form-check-input:checked {
  background-color: var(--encre-accent);
  border-color: var(--encre-accent);
}

/* Focus : anneau terracotta doux */
.form-control:focus, .form-select:focus, .form-check-input:focus,
.btn:focus-visible {
  border-color: var(--encre-accent);
  box-shadow: 0 0 0 0.25rem rgba(181, 87, 58, 0.2);
}

/* Astérisque des questions obligatoires en terracotta ; les messages
   d'erreur de validation gardent le rouge Bootstrap (sémantique
   d'urgence, volontairement hors palette) */
.asterisk { color: var(--encre-accent) !important; }

/* Aides et métadonnées */
.help-block, .form-text, .question-help-container { color: var(--encre-text-muted); }

/* Alertes informatives adoucies sur la palette */
.alert-info {
  --bs-alert-bg: var(--encre-bg-elevated);
  --bs-alert-color: var(--encre-text);
  --bs-alert-border-color: var(--encre-accent-subtle);
}

/* Page d'accueil : le bloc de bienvenue devient une surface élevée,
   mesure de lecture bornée (60 à 75 caractères, règle de la charte) */
.survey-welcome {
  background-color: var(--encre-bg-pure);
  border: 1px solid var(--encre-bg-elevated);
  border-radius: 4px;
  padding: 2rem;
  max-width: 46rem;
}
.survey-welcome p, .survey-welcome .welcome-text { max-width: 65ch; }

/* Pavé de confidentialité (questionnaires anonymes) : lisible et
   posé, pas un bas de page en petites capitales. C'est une .row : ses
   marges négatives Bootstrap feraient déborder la carte de 12 px à
   gauche du rail des autres blocs */
.privacy {
  background-color: var(--encre-bg-pure);
  border: 1px solid var(--encre-bg-elevated);
  border-radius: 4px;
  padding: 1.5rem 2rem;
  margin-top: 1.5rem;
  margin-left: 0;
  margin-right: 0;
  max-width: 46rem;
}
/* Le gabarit rend le conteneur même sans texte configuré (texte
   d'information des personnes : avec la première mission, ADR 0003
   d'itpulse-methode) — pas de carte vide en attendant */
.privacy:not(:has(.col-centered > *)) {
  display: none;
}
.ls-privacy-head {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--encre-text-strong) !important;
  text-transform: none;
  letter-spacing: normal;
}
.ls-privacy-body {
  font-size: 0.9375rem;
  color: var(--encre-text-muted);
  max-width: 65ch;
}

/* Libellés de question : 16 px (corps de texte de la charte) contre
   les 24 px de la variation parente — la hiérarchie vient du poids et
   de la couleur, pas de la taille. Même spécificité que le parent,
   chargé après */
.question-container .ls-label-question,
.question-container .question-text {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--encre-text-strong);
}

/* Options et champs : 16 px aussi — en dessous, iOS zoome sur les
   champs de saisie ; aides à 14 px */
.question-container .answer-container,
.question-container .form-control,
.question-container .form-check-label,
.question-container .answer-text {
  font-size: 1rem;
}
.question-container .ls-questionhelp,
.question-container .question-help-container {
  font-size: 0.875rem;
}