/* =====================================================================
   Thème « eau » – démonstration de la plateforme (consultation 26S024)
   Seven DEVOS – logiciels libres, polices hébergées sur la plateforme
   ===================================================================== */

@font-face { font-family: "Lexend"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/lexend-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/lexend-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/lexend-latin-700-normal.woff2") format("woff2"); }

:root {
  --ardoise: #1D3446;      /* texte, titres */
  --ardoise-doux: #3F5566; /* texte secondaire (7,4:1 sur blanc) */
  --loire: #0E6A73;        /* actions, liens, choix (6,2:1 sur blanc) */
  --loire-fonce: #0A4F56;
  --martin: #2BA9AA;       /* le fil de l'eau (décor seulement) */
  --galet: #D5DEDD;        /* bordures */
  --brume: #F1F5F5;        /* fond de page */
  --ecume: #E3F1F0;        /* fond d'un choix fait */
  --alerte: #B42318;
  --rayon: 10px;
  --colonne: 46rem;
}

html { font-size: 100%; }
body, body.font-ibm-sans, h1, h2, h3, h4, .large-heading, .group-title, .form-control, .btn, select, input, textarea, button, label {
  font-family: "Lexend", "Segoe UI", Arial, sans-serif !important;
}
em, i, .ls-em-tip, .ls-question-message { font-style: normal !important; }
body {
  background: var(--brume) !important;
  color: var(--ardoise);
  font-size: 1.125rem;
  line-height: 1.55;
  padding-top: 0 !important;
}
a { color: var(--loire); text-underline-offset: .15em; }
a:hover { color: var(--loire-fonce); }

/* ---------- bandeau ---------- */
.eau-entete { background: #fff; border-bottom: 1px solid var(--galet); }
.eau-entete__inner {
  max-width: calc(var(--colonne) + 3rem); margin: 0 auto; padding: .9rem 1.5rem;
  display: flex; align-items: center; gap: .85rem;
}
.eau-entete__signe { flex: none; }
.eau-entete__textes p { margin: 0; }
.eau-entete__titre { font-weight: 700; font-size: 1.1875rem; line-height: 1.2; color: var(--ardoise); }
.eau-entete__sous-titre { font-size: .9375rem; color: var(--ardoise-doux); }
.eau-entete .navbar-toggler { border: 1px solid var(--galet); border-radius: 8px; padding: .35rem .55rem; color: var(--ardoise); }

/* barre de pourcentage d'origine : remplacée par le fil de l'eau */
.top-container .progress, #progress-wrapper, .progress-container { display: none !important; }

/* ---------- colonne de lecture : même bord gauche que le bandeau ---------- */
#outerframeContainer.outerframe { max-width: calc(var(--colonne) + 3rem) !important; margin: 0 auto !important; padding: 0 1.5rem !important; }
#outerframeContainer > .row { margin: 0 !important; }
#outerframeContainer .col-centered, #main-col, #main-row, .survey-form-container {
  width: 100% !important; max-width: none !important; flex: 0 0 100% !important; padding-left: .75rem !important; padding-right: .75rem !important; margin: 0 !important;
}
#main-col, #main-row, .survey-form-container { padding-left: 0 !important; padding-right: 0 !important; }
.group-outer-container { padding: 0 !important; max-width: none !important; }
.question-container.row { margin-left: 0 !important; margin-right: 0 !important; }
.question-container > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
.group-container { padding-top: 1.75rem; }

/* ---------- titres ---------- */
.group-container .group-title, .large-heading, h1.survey-name {
  font-weight: 600; color: var(--ardoise); letter-spacing: -0.015em;
  font-size: 2.125rem; line-height: 1.18; margin: .35rem 0 .9rem;
}
.group-container .group-description { font-size: 1.125rem; line-height: 1.6; color: var(--ardoise-doux); }
.group-container .group-description p { max-width: 38em; }

/* ---------- le fil de l'eau : position dans les 7 thèmes ---------- */
.fil-eau { margin: 0 0 1.25rem; }
.fil-eau ol {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: flex; justify-content: space-between; align-items: center; height: 34px;
}
.fil-eau ol::before {           /* la rivière */
  content: ""; position: absolute; left: 6px; right: 14px; top: 50%; height: 12px; transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12' viewBox='0 0 48 12'%3E%3Cpath d='M0 6c6-5 12-5 18 0s12 5 18 0 9-4 12-3' fill='none' stroke='%232BA9AA' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / 48px 12px;
}
.fil-eau li { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--martin); }
.fil-eau li.passe { background: var(--martin); }
.fil-eau li[aria-current="step"] { width: 24px; height: 24px; background: var(--loire); border: 4px solid #fff;
  box-shadow: 0 0 0 2px var(--loire); }
.fil-eau li.mer { width: 30px; height: 18px; border: 0; border-radius: 0; background: transparent; }
.fil-eau li.mer svg { display: block; }
.fil-eau li.mer[aria-current="step"] { box-shadow: none; }
.fil-eau__legende { display: flex; justify-content: space-between; font-size: .875rem; color: var(--ardoise-doux); margin-top: .25rem; }

/* ---------- encart « démonstration » ---------- */
.demo-note { border-left: 4px solid var(--loire); background: #fff; padding: .7rem 1rem; color: var(--ardoise);
  border-radius: 0 var(--rayon) var(--rayon) 0; font-size: 1rem; }

/* ---------- questions ---------- */
.question-container { background: transparent !important; border: 0 !important; padding: 0 !important; margin-top: 1.75rem; }
.question-container .question-title-container .ls-label-question { font-size: 1.3125rem; font-weight: 700; line-height: 1.35; color: var(--ardoise) !important; }
.question-container.input-error .question-title-container .ls-label-question { color: var(--alerte) !important; }
.ls-question-mandatory, .question-container .text-danger.asterisk ~ span, .ls-required-text { color: var(--ardoise-doux) !important; font-size: .9375rem; }
.question-help-container .ls-questionhelp { font-size: 1rem; color: var(--ardoise-doux); }
.asterisk, .ls-required-mark, .text-danger.asterisk { color: var(--alerte) !important; }
.ls-question-mandatory .question-title-container::before { color: var(--alerte); }

/* ---------- principe A : classer 6 propositions ---------- */
.classement table.ls-answers { border-collapse: separate; border-spacing: 0 .6rem; width: 100%; }
.classement table.ls-answers thead { display: none; }
.classement table.ls-answers tr.answers-list {
  background: #fff;
}
.classement table.ls-answers tr.answers-list > th,
.classement table.ls-answers tr.answers-list > td {
  border-top: 1px solid var(--galet); border-bottom: 1px solid var(--galet); background: #fff;
  padding: .85rem 1rem !important; vertical-align: middle;
}
.classement table.ls-answers tr.answers-list > th { border-left: 1px solid var(--galet); border-radius: var(--rayon) 0 0 var(--rayon);
  font-weight: 400; font-size: 1.0625rem; color: var(--ardoise); text-align: left; width: auto; }
.classement table.ls-answers tr.answers-list > td { border-right: 1px solid var(--galet); border-radius: 0 var(--rayon) var(--rayon) 0; width: 17rem; }
.classement select.form-select, .classement select {
  min-height: 3rem; font-size: 1.0625rem; color: var(--ardoise); border: 2px solid #7C8E99; border-radius: 8px;
  background-color: #fff; padding-left: .85rem;
}
.classement tr.est-classe > th, .classement tr.est-classe > td { background: var(--ecume); border-color: #A9D3D0; }
.classement tr.est-classe select { border-color: var(--loire); font-weight: 700; }
.classement tr.est-doublon > th, .classement tr.est-doublon > td { border-color: var(--alerte); }
.classement tr.est-doublon select { border-color: var(--alerte); }

.rangs-suivi { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: 1rem 0 .25rem; font-size: 1rem; color: var(--ardoise-doux); }
.rangs-suivi__pastille { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center;
  border-radius: 50%; border: 2px solid var(--galet); color: var(--ardoise); font-weight: 700; background: #fff; }
.rangs-suivi__pastille.pris { background: var(--loire); border-color: var(--loire); color: #fff; }
.rangs-suivi__pastille.double { background: var(--alerte); border-color: var(--alerte); color: #fff; }
.rangs-message { min-height: 1.5rem; font-size: 1rem; color: var(--ardoise-doux); margin: .2rem 0 0; }
.rangs-message.alerte { color: var(--alerte); font-weight: 700; }

@media (max-width: 640px) {
  .classement table.ls-answers, .classement table.ls-answers tbody { display: block; }
  .classement table.ls-answers tr.answers-list { display: block; border: 1px solid var(--galet); border-radius: var(--rayon); margin-bottom: .7rem; overflow: hidden; }
  .classement table.ls-answers tr.answers-list > th, .classement table.ls-answers tr.answers-list > td {
    display: block; width: 100%; border: 0 !important; border-radius: 0 !important; }
  .classement table.ls-answers tr.answers-list > th { padding-bottom: .4rem !important; }
  .classement table.ls-answers tr.answers-list > td { padding-top: 0 !important; }
  .classement tr.est-classe { border-color: #A9D3D0 !important; }
  .classement tr.est-doublon { border-color: var(--alerte) !important; }
}

/* ---------- principe B et listes : des choix en tuiles ---------- */
.radio-list.answers-list, .checkbox-list.answers-list { display: flex; flex-wrap: wrap; gap: .55rem; padding: 0; margin-top: .6rem; }
.radio-list .answer-item, .checkbox-list .answer-item {
  position: relative; background: #fff; border: 1.5px solid var(--galet); border-radius: var(--rayon);
  padding: .7rem 1rem .7rem .8rem; margin: 0 !important; flex: 0 1 auto; min-height: 3rem; display: flex; align-items: center;
}
.radio-list .answer-item:has(input:checked), .checkbox-list .answer-item:has(input:checked) {
  background: var(--ecume); border-color: var(--loire);
}
.radio-list .answer-item:has(input:focus-visible), .checkbox-list .answer-item:has(input:focus-visible) {
  outline: 3px solid var(--loire); outline-offset: 2px;
}
.radio-list .answer-item label, .checkbox-list .answer-item label { color: var(--ardoise) !important; font-size: 1.0625rem; }
.checkbox-list.answers-list { flex-direction: column; }
.checkbox-list .answer-item { width: 100%; }
.echelle4 .radio-list.answers-list .answer-item { flex: 1 1 0; min-width: 9rem; }
.ls-label-question .theme-label { display: block; font-size: .9375rem; font-weight: 700; color: var(--loire); margin-bottom: .2rem; }
.ls-label-question .proposition { display: block; font-weight: 700; }
.ls-label-question .demande { display: block; font-weight: 400; font-size: 1.0625rem; color: var(--ardoise-doux); margin-top: .3rem; }
.echelle4 + .echelle4 { border-top: 1px solid var(--galet); padding-top: 1.5rem !important; }
@media (max-width: 640px) {
  .echelle4 .radio-list.answers-list { flex-direction: column; }
  .echelle4 .radio-list.answers-list .answer-item { width: 100%; }
}

/* ---------- textes libres ---------- */
textarea.form-control, input.form-control[type="text"] {
  border: 2px solid #7C8E99; border-radius: 8px; font-size: 1.125rem; color: var(--ardoise); background: #fff;
}
textarea.form-control { min-height: 12rem; line-height: 1.5; }

/* ---------- navigation ---------- */
#ls-button-submit {
  background: var(--loire) !important; border-color: var(--loire) !important; color: #fff !important;
  border-radius: 8px; font-weight: 700; font-size: 1.125rem; padding: .8rem 1.6rem; min-height: 3.25rem;
}
#ls-button-submit:hover { background: var(--loire-fonce) !important; }
#ls-button-previous {
  background: transparent !important; border: 0 !important; color: var(--loire) !important;
  text-decoration: underline; text-underline-offset: .2em; font-size: 1.0625rem; padding-left: 0; box-shadow: none;
}
.navigator { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--galet); }

/* ---------- pages d'accueil et de fin ---------- */
.survey-welcome, .welcome-container, .completed-text { font-size: 1.125rem; }
.survey-welcome h2, .welcome-container h2, .h4 { font-size: 1.25rem; font-weight: 700; color: var(--ardoise); margin-top: 1.5rem; }
.completed-wrapper { background: #fff; border: 1px solid var(--galet); border-radius: var(--rayon); padding: 1.75rem; margin-top: 2rem; }
.completed-text { border: 0 !important; padding: 0 !important; background: transparent !important; }

/* ---------- messages d'erreur ---------- */
.ls-em-error, .text-danger, .ls-question-message.ls-em-error { color: var(--alerte) !important; }

/* ---------- pied de page ---------- */
.eau-pied { margin-top: 3rem; border-top: 1px solid var(--galet); background: #fff; }
.eau-pied__inner { max-width: calc(var(--colonne) + 3rem); margin: 0 auto; padding: 1.25rem 1.5rem 2rem; font-size: .9375rem; color: var(--ardoise-doux); }
.eau-pied__inner p { margin: 0 0 .35rem; }

/* ---------- focus clavier ---------- */
a:focus-visible, button:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible {
  outline: 3px solid var(--loire) !important; outline-offset: 2px; box-shadow: none !important;
}

@media (max-width: 576px) {
  body { font-size: 1.0625rem; }
  .group-container .group-title, .large-heading, h1.survey-name { font-size: 1.625rem; }
  .eau-entete__inner { padding: .75rem 1rem; }
  #outerframeContainer.outerframe { padding: 0 1rem !important; }
  .eau-pied__inner { padding: 1rem 1rem 1.5rem; }
  .fil-eau__legende { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* alignement fin : titre, questions et boutons sur le même bord que le bandeau */
#outerframeContainer .col-centered { padding-left: 0 !important; padding-right: 0 !important; }
.navigator { margin-left: 0 !important; margin-right: 0 !important; }
.navigator > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }

/* tuiles : la case à cocher ou le bouton radio reste à l'intérieur */
.radio-list .answer-item > .row, .checkbox-list .answer-item > .row { margin: 0 !important; width: 100%; }
.radio-list .answer-item .col-auto, .checkbox-list .answer-item .col-auto { padding: 0 !important; }
.answer-item label.checkbox-label, .answer-item label.radio-label { position: relative; padding-left: 2.1rem !important; margin: 0 !important; line-height: 1.4; display: block; }
.answer-item label.checkbox-label::before, .answer-item label.radio-label::before { margin-left: 0 !important; left: 0 !important; }
.answer-item label.checkbox-label::after, .answer-item label.radio-label::after { margin-left: 0 !important; }
.radio-list .answer-item, .checkbox-list .answer-item { padding: .75rem 1rem !important; }
.answer-item label.checkbox-label::after { top: 0 !important; left: 0 !important; width: 24px !important; height: 24px !important;
  line-height: 24px !important; text-align: center; font-size: 18px !important; }
.classement tr.est-doublon > th, .classement tr.est-doublon > td { background: #FDF1F0 !important; border-color: var(--alerte) !important; }