/*
 * Feuille de style applicative.
 *
 * Nettoyage : le `background-color: rgba(0,0,0,.1)` posé sur <body> voilait
 * l'ensemble de l'interface, et les règles `details` / `summary` /
 * `.control-icon` (dont `width: 200%`, source de débordement horizontal)
 * étaient des restes de tutoriel sans aucun élément correspondant dans les
 * vues. Les sélecteurs par #id ont été remplacés par des classes : ces id
 * étaient dupliqués à chaque itération de boucle, donc invalides en HTML.
 */

body {
  font-family: "IBM Plex Sans", sans-serif;
}

/* --- Accordéons de la checklist --- */

.cust-accordion {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}

.cust-accordion.show {
  /* `100%` se résout en `none` quand le parent est en hauteur auto : la valeur
     était donc sans effet réel. Une borne haute explicite est plus fiable. */
  max-height: 1000vh;
}

.cust-accordion-header.open > svg {
  transform: rotate(-180deg);
  transition: transform 0.25s ease-out;
}

/* --- Titre de page --- */

h2 {
  margin: 20px auto;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 1px;
  line-height: 1.4;
}

/*
 * Rendu compact.
 *
 * Le point de rupture était à 600px alors que la bascule desktop/mobile des
 * vues se fait à 768px (préfixe `md:` de Tailwind) : entre les deux, le rendu
 * mobile s'affichait totalement dépouillé de sa mise en forme.
 */
@media screen and (max-width: 767px) {

  h2 {
    font-size: 1.1rem;
    font-weight: 700;
  }

  #btndeconnexion {
    font-size: 60%;
  }

  .cust-accordion-titre {
    font-size: 80%;
  }

  .cust-accordion-header {
    padding: 0.5rem;
  }

  .cust-bloc-titre {
    font-size: 80%;
  }

  .cust-bloc {
    padding: 0.8rem;
  }

  .cust-form-entete {
    padding: 0.8rem;
  }

  .cust-info {
    font-size: 70%;
    padding: 0.8rem;
  }

  .cust-table-compacte {
    font-size: 70%;
  }

  .select {
    font-size: 80%;
  }

  .containermd001 {
    width: 100%;
    border-radius: 10px;
  }

  .form-group {
    margin-bottom: 20px;
  }

  .form-group label {
    display: block;
    font-weight: 500;
    padding-top: 7px;
  }

  .radio-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 5px;
    margin-bottom: 10px;
    padding-top: 7px;
  }

  .radio-group input[type="radio"] {
    margin-right: 5px;
  }

  .radio-group label {
    margin-right: 0;
    font-size: 0.7rem;
  }

  .textareamd001 {
    font-size: 14px;
    width: 100%;
    min-height: 2.5rem;
    padding: 9px;
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 5px;
    resize: vertical;
  }
}



/* --------------------------------------------------------------------------
   Contenu des documents légaux
   --------------------------------------------------------------------------
   Le HTML de ces documents est rédigé dans l'éditeur : ses balises ne portent
   aucune classe utilitaire, et la réinitialisation de Tailwind retire par
   défaut les puces des listes et les tailles de titre. Sans ces règles, un
   document s'affiche comme un bloc de texte indifférencié.

   Écrites ici plutôt qu'en classes Tailwind parce que le CSS du gabarit est
   précompilé, sans étape de build : une classe absente du fichier n'aurait
   aucun effet, et « prose-sm » en fait partie.
   -------------------------------------------------------------------------- */
.contenu-legal h1,
.contenu-legal h2,
.contenu-legal h3,
.contenu-legal h4 {
    font-weight: 600;
    line-height: 1.3;
    margin: 1.25em 0 .5em;
}

.contenu-legal h1 { font-size: 1.25rem; }
.contenu-legal h2 { font-size: 1.125rem; }
.contenu-legal h3 { font-size: 1rem; }
.contenu-legal h4 { font-size: .9375rem; }

.contenu-legal > :first-child { margin-top: 0; }

.contenu-legal p { margin: 0 0 .75em; }

.contenu-legal ul,
.contenu-legal ol {
    margin: 0 0 .75em;
    padding-left: 1.5rem;
}

.contenu-legal ul { list-style: disc; }
.contenu-legal ol { list-style: decimal; }
.contenu-legal li { margin-bottom: .25em; }

.contenu-legal a {
    color: rgb(var(--tw-custom-500, 99 102 241));
    text-decoration: underline;
}

.contenu-legal blockquote {
    margin: 0 0 .75em;
    padding-left: 1rem;
    border-left: 3px solid #e2e8f0;
    color: #64748b;
}

.contenu-legal table {
    width: 100%;
    margin-bottom: .75em;
    border-collapse: collapse;
}

.contenu-legal th,
.contenu-legal td {
    padding: .375rem .5rem;
    border: 1px solid #e2e8f0;
    text-align: left;
}

.contenu-legal th { font-weight: 600; }