/* ============================================================
   DCP — Outil « Le modele »
   Le chassis (entete, barre, cadre defilant) vient d'outils.css ;
   cette feuille ne porte que les deux colonnes et la fiche.
   ============================================================ */

.outil-chapo {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 68ch;
  margin: 0.75rem 0 0;
}

.modele-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* --- Bascule de langue -------------------------------------------------- */

/* Deux boutons plutot qu'un menu : le choix est binaire et doit se voir
   sans etre deploye, comme la bascule de theme. */
.modele-langues {
  display: inline-flex;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.modele-langue {
  padding: 0.5rem 0.75rem;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .modele-langue { transition: none; }
}

.modele-langue + .modele-langue { border-left: 1px solid var(--border); }

.modele-langue:hover { color: var(--text-primary); }

.modele-langue:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: -2px;
}

.modele-langue[aria-pressed="true"] {
  background-color: var(--accent-gold);
  color: #0F1F33;
}

/* --- Les deux colonnes -------------------------------------------------- */

.modele {
  display: grid;
  grid-template-columns: 17rem 1fr;
  gap: 2rem;
  align-items: start;
  margin-top: 1.5rem;
}

.modele-colonne-titre {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

/* --- Colonne de gauche : le dictionnaire -------------------------------- */

.modele-termes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.modele-terme-btn {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .modele-terme-btn { transition: none; }
}

.modele-terme-btn:hover { background-color: var(--surface); }

.modele-terme-btn:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: -2px;
}

/* L'or porte la selection : c'est la seule couleur d'accent de l'ecran. */
.modele-terme-btn--actif {
  background-color: var(--surface);
  border-left-color: var(--accent-gold);
}

.modele-terme-fr {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

.modele-terme-en {
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--text-secondary);
}

/* --- Colonne de droite : le terme --------------------------------------- */

.modele-terme {
  margin-bottom: 1rem;
}

.modele-statut {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

/* Les deux defauts se distinguent : ce ne sont pas des objets du modele. */
.modele-statut[data-statut="defaut"] {
  border-color: var(--status-err-text);
  color: var(--status-err-text);
}

.modele-terme-titre {
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  margin-bottom: 0.5rem;
}

.modele-terme-titre .modele-terme-en {
  font-size: 1rem;
  font-weight: 400;
}

.modele-definition {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 68ch;
  margin: 0;
}

.modele-note {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 68ch;
  margin: 0.75rem 0 0;
  padding-left: 0.875rem;
  border-left: 2px solid var(--border);
}

/* Entrees multiples, quand plusieurs types portent une meme notion */
.modele-entrees {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 1rem;
}

.modele-entrees-titre {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.modele-entrees-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.modele-entree {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  cursor: pointer;
}

.modele-entree:hover { border-color: var(--accent-gold); }

.modele-entree:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

.modele-entree--actif {
  border-color: var(--accent-gold);
  background-color: var(--surface);
}

/* --- Le fil d'Ariane ---------------------------------------------------- */

.modele-fil {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.modele-fil-titre {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.modele-fil ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem;
}

/* Le chevron separe les etapes sans etre lu par les lecteurs d'ecran. */
.modele-fil li + li::before {
  content: '›';
  margin-right: 0.375rem;
  color: var(--text-secondary);
}

.modele-fil-etape {
  border: 0;
  background: none;
  padding: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  color: var(--accent-gold-text);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.modele-fil-etape:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
  border-radius: 3px;
}

.modele-fil-courant {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  color: var(--text-primary);
  font-weight: 600;
}

/* --- La fiche ----------------------------------------------------------- */

.modele-cadre {
  height: clamp(20rem, calc(100vh - 30rem), 46rem);
}

.fiche-entete {
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.fiche-titre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.125rem;
  color: var(--text-primary);
  margin: 0;
}

.fiche-source {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0.25rem 0 0;
}

.fiche-source code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* La description que le schema donne de l'objet : le texte le plus
   important de la fiche, donc en pleine couleur et non en gris. */
.fiche-description {
  font-size: 0.9375rem;
  color: var(--text-primary);
  line-height: 1.75;
  max-width: 74ch;
  margin: 0 0 1.25rem;
}

/* Les regles du schema : longues, donc repliees. */
.fiche-regles {
  margin-bottom: 1.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-gold);
  border-radius: 0 8px 8px 0;
  background-color: var(--surface);
}

.fiche-regles > summary,
.fiche-valeurs > summary {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
}

.fiche-regles > summary::-webkit-details-marker,
.fiche-valeurs > summary::-webkit-details-marker { display: none; }

.fiche-regles > summary::before,
.fiche-valeurs > summary::before {
  content: '▸';
  flex-shrink: 0;
  color: var(--accent-gold);
  font-size: 0.75rem;
  transition: transform 180ms ease;
}

.fiche-regles[open] > summary::before,
.fiche-valeurs[open] > summary::before { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  .fiche-regles > summary::before,
  .fiche-valeurs > summary::before { transition: none; }
}

.fiche-regles > summary:hover,
.fiche-valeurs > summary:hover { color: var(--accent-gold-text); }

.fiche-regles > summary:focus-visible,
.fiche-valeurs > summary:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
  border-radius: 3px;
}

.fiche-regles-intro {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.8;
  max-width: 74ch;
}

/* Les regles se detachent de l'introduction : un libelle a la ligne, puis
   une enumeration numerotee. Le schema les ecrit d'affilee dans un seul
   paragraphe, ce qui les rendait indistinctes. */
.fiche-regles-libelle {
  margin: 1rem 0 0.5rem;
  padding-left: 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.fiche-regles-liste {
  margin: 0;
  padding-left: 2.75rem;
  max-width: 74ch;
}

.fiche-regles-liste li {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 0.5rem;
}

.fiche-regles-liste li:last-child { margin-bottom: 0; }

/* Le numero reprend l'or, comme les puces des listes du site. */
.fiche-regles-liste li::marker {
  color: var(--accent-gold-text);
  font-weight: 600;
}

.fiche-bloc { margin-bottom: 1.75rem; }
.fiche-bloc:last-child { margin-bottom: 0; }

.fiche-bloc h4 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.625rem;
}

.fiche-bloc ul { list-style: none; }

/* Une ligne d'attribut ou de champ : la tete porte le nom et ses
   qualificatifs, la description vient dessous sur toute la largeur. */
.fiche-ligne {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--border);
}

.fiche-ligne:last-child { border-bottom: 0; }

.fiche-ligne-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.fiche-ligne-tete code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875rem;
  color: var(--text-primary);
  flex: 0 1 auto;
}

/* Le texte s'aligne sur le nom du champ, pas sur le bord du cadre. */
.fiche-ligne-texte {
  margin: 0.3125rem 0 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 74ch;
}

/* --- Les valeurs d'un champ enumere -------------------------------------- */

.fiche-valeurs { margin-top: 0.5rem; }

.fiche-valeurs-nb {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  color: var(--text-secondary);
  padding: 0.0625rem 0.3125rem;
  border: 1px solid var(--border);
  border-radius: 999px;
}

.fiche-valeurs ul {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.fiche-valeurs li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.fiche-valeurs code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  color: var(--accent-gold-text);
  flex-shrink: 0;
}

.fiche-valeur-texte {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.fiche-type {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.fiche-cardinalite {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--text-secondary);
  padding: 0.0625rem 0.375rem;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.fiche-requis {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-gold-text);
}

/* Le bouton de bascule : c'est lui qui porte l'exploration. */
.fiche-lien {
  padding: 0.1875rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  color: var(--accent-gold-text);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .fiche-lien { transition: none; }
}

.fiche-lien:hover {
  border-color: var(--accent-gold);
  background-color: var(--surface);
}

.fiche-lien:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

.fiche-bloc--retour .fiche-retours {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.fiche-lien--retour { color: var(--text-secondary); }

.fiche-vide {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.75;
  font-style: italic;
}

/* --- Réagir, contribuer -------------------------------------------------- */

.contrib {
  margin-top: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--bg);
}

.contrib-titre {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
}

.contrib-titre::-webkit-details-marker { display: none; }

.contrib-titre::before {
  content: '▸';
  color: var(--accent-gold);
  font-size: 0.8125rem;
  transition: transform 180ms ease;
}

.contrib[open] .contrib-titre::before { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  .contrib-titre::before { transition: none; }
}

.contrib-titre:hover { color: var(--accent-gold-text); }

.contrib-titre:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: -2px;
  border-radius: 10px;
}

.contrib-corps {
  padding: 0 1.25rem 1.25rem;
  max-width: 42rem;
}

.contrib-intro,
.contrib-aide {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0 0 1rem;
}

.contrib-objet {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0 0 1.25rem;
}

.contrib-objet code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text-primary);
}

.contrib-champ { margin-bottom: 1rem; }

.contrib-champ label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.375rem;
}

.contrib-champ input,
.contrib-champ select,
.contrib-champ textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background-color: var(--bg);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.contrib-champ textarea {
  resize: vertical;
  min-height: 6rem;
}

.contrib-champ input:hover,
.contrib-champ select:hover,
.contrib-champ textarea:hover { border-color: var(--accent-gold); }

.contrib-champ input:focus-visible,
.contrib-champ select:focus-visible,
.contrib-champ textarea:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

.contrib-compteur {
  margin: 0.3125rem 0 0;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Le champ du defi n'a pas besoin de toute la largeur. */
.contrib-defi input { max-width: 8rem; }

.contrib-defi .contrib-aide { margin: 0.5rem 0 0; }

.contrib-actions { margin-top: 1.25rem; }

.contrib-etat {
  margin: 1rem 0 0;
  padding: 0.875rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.7;
}

.contrib-etat--erreur {
  background-color: var(--status-err-bg);
  color: var(--status-err-text);
}

.contrib-etat--ok {
  background-color: var(--status-ok-bg);
  color: var(--status-ok-text);
}

/* --- Responsive ---------------------------------------------------------- */

/* La colonne du dictionnaire devient une liste au-dessus de la fiche ;
   en dessous de 700px c'est le selecteur de la barre qui prend le relais,
   la liste des quatorze termes prendrait tout l'ecran. */
@media (max-width: 1023px) {
  .modele { grid-template-columns: 1fr; gap: 1.5rem; }
  .modele-termes {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.375rem;
  }
  .modele-terme-btn {
    width: auto;
    border-left: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
  }
  .modele-terme-btn--actif { border-color: var(--accent-gold); }
}

@media (max-width: 699px) {
  .modele-dictionnaire { display: none; }
  .modele-cadre { height: clamp(18rem, calc(100vh - 22rem), 40rem); }
}

/* Le selecteur ne sert que quand la liste est masquee. */
@media (min-width: 700px) {
  .modele-choix { display: none; }
}

@media (max-width: 599px) {
  .modele-actions { width: 100%; }
  .modele-actions .btn { flex: 1 1 100%; justify-content: center; }
}