/* ==================================================================
   Portail Subotaï — socle de style
   ------------------------------------------------------------------
   Les valeurs ci-dessous sont relevées sur le kit Elementor de
   subotai.fr (couleurs globales, typographies globales, réglages de
   boutons), pas inventées pour le portail. Toute évolution de la
   charte du site doit se répercuter ici, et nulle part ailleurs.
   ================================================================== */

:root {
  /* Couleurs globales du kit */
  --noir:   #000000;   /* Principal · titres · texte · survol de bouton */
  --rouge:  #D21716;   /* Secondaire · accentué · liens · boutons */
  --blanc:  #FFFFFF;
  --beige:  #EFEBE6;   /* fond des sections alternées */
  --gris:   #DDDDDD;   /* bordures */
  --vert:   #1D971F;   /* « vert ok » · états validés */

  /* Déclinaisons de service, absentes du kit mais nécessaires à une
     interface : nuances de gris pour les textes secondaires. */
  --gris-texte:   #5A5A5A;
  --gris-discret: #8A8A8A;
  --gris-fond:    #F7F5F3;
  --rouge-sombre: #B41312;

  /* Typographies globales du kit */
  --titre: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --corps: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Réglages repris du kit */
  --largeur:  1300px;
  --rayon:    6px;
  --interligne-titre: 1.15em;
  --chasse-titre: -0.02em;

  --pas:       8px;
  --bloc:      24px;
  --section:   48px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--corps);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* --- Titres ------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--titre);
  color: var(--noir);
  margin: 0 0 12px;
}
h1 { font-weight: 800; font-size: 44px; line-height: 1.05em; letter-spacing: -0.025em; }
h2 { font-weight: 700; font-size: 32px; line-height: var(--interligne-titre); letter-spacing: var(--chasse-titre); }
h3 { font-weight: 700; font-size: 24px; line-height: var(--interligne-titre); letter-spacing: var(--chasse-titre); }
h4 { font-weight: 700; font-size: 20px; line-height: var(--interligne-titre); letter-spacing: var(--chasse-titre); }

h1 .accent { color: var(--rouge); }

p { margin: 0 0 20px; }          /* paragraph_spacing du kit */
p:last-child { margin-bottom: 0; }

a { color: var(--rouge); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--noir); }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--rouge);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Structure ---------------------------------------------------- */

.page {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--bloc);
}
.page--etroite { max-width: 720px; }
.page--formulaire { max-width: 460px; }

.bandeau {
  border-bottom: 1px solid var(--gris);
  background: var(--blanc);
}
.bandeau__interieur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px var(--bloc);
  padding: 18px var(--bloc);
  max-width: var(--largeur);
  margin: 0 auto;
}
.bandeau__logo { height: 38px; width: auto; display: block; }
.bandeau__identite { flex: 1 1 auto; min-width: 0; }
.bandeau__client {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: var(--chasse-titre);
  line-height: 1.2;
  display: block;
}
.bandeau__role {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris-discret);
}
.bandeau__actions { display: flex; flex-wrap: wrap; gap: var(--pas); }

/* Rappel permanent qu'une session admin regarde un dossier client. */
.bandeau-admin {
  background: var(--noir);
  color: var(--blanc);
  font-size: 13px;
  font-weight: 500;
}
.bandeau-admin__interieur {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 16px;
  max-width: var(--largeur); margin: 0 auto;
  padding: 10px var(--bloc);
}
.bandeau-admin a { color: var(--blanc); }

.contenu { padding: var(--section) 0; }

/* --- Onglets ------------------------------------------------------ */

.onglets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--gris);
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--bloc);
}
.onglet {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: var(--chasse-titre);
  color: var(--gris-texte);
  text-decoration: none;
  padding: 14px 16px;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.onglet:hover { color: var(--noir); }
.onglet[aria-current="page"] { color: var(--rouge); border-bottom-color: var(--rouge); }
.onglet__compte {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--corps);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gris-discret);
}

/* --- Boutons ------------------------------------------------------ */
/* Géométrie reprise du kit : radius 6, padding 17/32, Sora 700. */

.bouton {
  display: inline-block;
  font-family: var(--titre);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--chasse-titre);
  padding: 15px 28px;
  border: 1px solid var(--rouge);
  border-radius: var(--rayon);
  background: var(--rouge);
  color: var(--blanc);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.bouton:hover { background: var(--noir); border-color: var(--noir); color: var(--blanc); }

.bouton--noir { background: var(--noir); border-color: var(--noir); }
.bouton--noir:hover { background: var(--rouge-sombre); border-color: var(--rouge-sombre); }

.bouton--discret {
  background: var(--blanc);
  border-color: var(--gris);
  color: var(--gris-texte);
  font-size: 13px;
  padding: 9px 16px;
}
.bouton--discret:hover { background: var(--blanc); border-color: var(--noir); color: var(--noir); }

.bouton--petit { font-size: 13px; padding: 9px 16px; }
.bouton[disabled] { opacity: .45; cursor: not-allowed; }

/* --- Champs ------------------------------------------------------- */

.champ {
  font-family: var(--corps);
  font-size: 15px;
  line-height: 1.5;
  padding: 12px 14px;
  color: var(--noir);
  background: var(--blanc);
  border: 1px solid var(--gris);
  border-radius: var(--rayon);
  width: 100%;
}
.champ:focus { outline: 2px solid var(--rouge); outline-offset: 1px; border-color: transparent; }
.champ::placeholder { color: var(--gris-discret); }

textarea.champ { resize: vertical; min-height: 90px; }

.etiquette {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--gris-texte);
  margin-bottom: 6px;
}

.aide { font-size: 13px; color: var(--gris-discret); margin: 6px 0 0; }

/* --- Messages ----------------------------------------------------- */

.message {
  margin: 0 0 var(--bloc);
  padding: 14px 18px;
  border-left: 3px solid var(--rouge);
  background: var(--gris-fond);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  font-size: 15px;
}
.message--succes { border-left-color: var(--vert); }
.message--erreur { border-left-width: 5px; font-weight: 600; }

/* --- Pastilles d'état --------------------------------------------- */

.pastille {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  padding: 4px 10px;
  border: 1px solid var(--gris);
  border-radius: var(--rayon);
  color: var(--gris-texte);
  background: var(--blanc);
  white-space: nowrap;
}
/* Fond plein, encre choisie pour le contraste. Le vert prend une encre
   NOIRE : sur #1D971F, le blanc ne donne que 3,82 de rapport de
   contraste — sous le seuil de 4,5 — quand le noir monte à 5,50.
   Le rouge, le gris et le noir prennent l'encre blanche.
   Les valeurs sont vérifiées par verifications.php, qui relit cette
   feuille et refait le calcul. */
.pastille--valide  { background: var(--vert);       color: #000000; border-color: var(--vert); }
.pastille--refuse  { background: var(--rouge);      color: #FFFFFF; border-color: var(--rouge); }
.pastille--attente { background: var(--gris-texte); color: #FFFFFF; border-color: var(--gris-texte); }
.pastille--info    { background: var(--noir);       color: #FFFFFF; border-color: var(--noir); }

/* --- Listes ------------------------------------------------------- */

.liste { list-style: none; margin: 0; padding: 0; }
.liste > li { border-bottom: 1px solid var(--gris); }
.liste > li[hidden] { display: none; }

.carte {
  border: 1px solid var(--gris);
  border-radius: var(--rayon);
  padding: var(--bloc);
  background: var(--blanc);
}
.carte--beige { background: var(--beige); border-color: transparent; }

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--bloc);
}

/* --- Vide et pied ------------------------------------------------- */

.vide {
  padding: var(--section) 0;
  color: var(--gris-texte);
}
.vide strong { color: var(--noir); font-weight: 600; }

.pied {
  margin-top: var(--section);
  padding: var(--bloc) 0 var(--section);
  border-top: 1px solid var(--gris);
  font-size: 13px;
  line-height: 1.7;
  color: var(--gris-discret);
}
.pied a { color: var(--gris-discret); }
.pied a:hover { color: var(--noir); }

/* --- Page de connexion -------------------------------------------- */

.connexion {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--section) 0;
}
.connexion__logo { display: block; height: 42px; width: auto; margin: 0 0 var(--section); }
.connexion__intro { color: var(--gris-texte); margin: 0 0 var(--bloc); }
.connexion__form { display: flex; flex-direction: column; gap: var(--bloc); }

/* --- Listes d'état ------------------------------------------------ */

.etats { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.etats li { padding-left: 22px; position: relative; line-height: 1.5; }
.etats li + li { margin-top: 6px; }
.etats li::before {
  position: absolute; left: 0; top: 0;
  font-weight: 700;
}
.etats .oui { color: var(--gris-texte); }
.etats .oui::before { content: '✓'; color: var(--vert); }
.etats .non { color: var(--noir); }
.etats .non::before { content: '!'; color: var(--rouge); }

.separateur { border: 0; border-top: 1px solid var(--gris); margin: 0; }

code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.88em;
  background: var(--gris-fond);
  border: 1px solid var(--gris);
  border-radius: 3px;
  padding: 1px 5px;
}


/* ==================================================================
   Onglet Maquettes
   ------------------------------------------------------------------
   Reprise de la mise en page de demos.subotai.fr — panneau à deux
   colonnes, remarques à gauche, validation à droite — redessinée
   avec les tokens du kit Elementor.
   ================================================================== */

.outils {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gris);
}
#recherche { flex: 1 1 240px; min-width: 0; width: auto; }

.tri { display: flex; gap: 6px; }
.tri button {
  font-family: var(--titre);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--chasse-titre);
  padding: 9px 14px;
  color: var(--gris-texte);
  background: var(--blanc);
  border: 1px solid var(--gris);
  border-radius: var(--rayon);
  cursor: pointer;
}
.tri button:hover { color: var(--noir); border-color: var(--noir); }
.tri button[aria-pressed="true"] { color: var(--rouge); border-color: var(--rouge); }

.item { border-bottom: 1px solid var(--gris); }
.item[hidden] { display: none; }
.item > form { margin: 0; padding: 22px 0; }

.item__titre {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: var(--chasse-titre);
  color: var(--noir);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.item__titre:hover, .item__titre:focus-visible {
  color: var(--rouge); border-bottom-color: var(--rouge); outline: none;
}
.item__meta { display: block; font-size: 13px; color: var(--gris-discret); margin-top: 4px; }
.item__fichier { font-weight: 600; color: var(--gris-texte); }

.puce {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris-discret);
  border: 1px solid var(--gris);
  border-radius: 3px;
  padding: 1px 5px;
  margin-right: 6px;
  vertical-align: 1px;
}

details { margin-top: 14px; }
summary {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--gris-texte);
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary:not(.sujet__resume)::before { content: '+ '; color: var(--rouge); font-weight: 700; }
details[open] > summary:not(.sujet__resume)::before { content: '– '; }
summary:hover { color: var(--noir); }

.panneau {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 8px 40px;
  padding: 12px 0 4px;
}
.colonne { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.colonne__titre {
  font-family: var(--corps);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gris-discret);
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gris);
}

.historique { list-style: none; margin: 0; padding: 0; }
.historique li {
  padding: 10px 0 10px 14px;
  border-left: 2px solid var(--gris);
  margin-bottom: 8px;
}
.historique li:last-child { margin-bottom: 0; }
.historique p { margin: 0; white-space: pre-wrap; font-size: 15px; }
.qui { font-size: 12px; color: var(--gris-discret); display: block; margin-bottom: 2px; }

.journal { list-style: none; margin: 0; padding: 0; }
.journal li { padding: 8px 0 8px 12px; border-left: 2px solid var(--gris); margin-bottom: 6px; }
.journal li:first-child { border-left-color: var(--vert); }
.journal__acte { display: block; font-size: 14px; font-weight: 700; color: var(--noir); }
.journal-vide { margin: 0; font-size: 13px; color: var(--gris-discret); }

.compteur {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: -4px 0 0;
  font-size: 12px;
  color: var(--gris-discret);
}
.compteur__nb { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.compteur__note { flex: 1 1 260px; min-width: 0; }
.compteur.proche .compteur__nb { color: var(--noir); }
.compteur.plein  .compteur__nb { color: var(--rouge); }

.identite { display: flex; flex-direction: column; gap: 0; }
.identite .champ { max-width: 280px; }

.coche {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 15px;
  line-height: 1.45;
  cursor: pointer;
  margin: 0;
}
.coche input { width: 17px; height: 17px; accent-color: var(--vert); cursor: pointer; flex: 0 0 auto; margin-top: 2px; }
.coche--off { color: var(--gris-discret); cursor: not-allowed; }

.ferme {
  margin: 0;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--gris-texte);
  background: var(--gris-fond);
  border-left: 2px solid var(--gris);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}

.aucun-resultat { padding: 32px 0; color: var(--gris-texte); }

/* --- Blocs réservés à l'agence ------------------------------------ */
/* Fond beige : sur une page que le client peut voir par-dessus
   l'épaule de l'agence, mieux vaut que la frontière saute aux yeux. */

.encart-agence {
  background: var(--beige);
  border-radius: var(--rayon);
  padding: 12px 16px;
  margin: 0 0 22px;
}
.encart-agence--element { margin: 0 0 22px; }
.encart-agence > summary { color: var(--noir); font-weight: 700; }
.encart-agence__corps { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; }

.ligne-formulaire { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.ligne-formulaire .champ { flex: 1 1 220px; width: auto; }

.pile-serree { display: flex; flex-direction: column; gap: 10px; margin: 0; align-items: flex-start; }

@media (max-width: 720px) {
  .panneau { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}


/* ==================================================================
   Onglet Sujets
   ================================================================== */

.mois { margin: 0; }
.mois + .mois { margin-top: 8px; }
/* Le mois est le repère de premier niveau : il doit se distinguer au
   premier coup d'œil des titres de sujets et de contenus, qui sont
   plus petits et moins appuyés. */
.mois__titre {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--noir);
  text-transform: capitalize;
  padding: 18px 0 12px;
  border-bottom: 2px solid var(--noir);
  display: block;
}
.mois + .mois { margin-top: 28px; }
.mois__compte {
  display: inline-block;
  font-family: var(--corps);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gris-discret);
  margin-left: 8px;
  vertical-align: 4px;
}

.sujet { margin: 0; }
.sujet__resume {
  display: block;
  padding: 16px 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
/* Le marqueur va sur le titre, pas devant le bloc entier : posé sur le
   résumé, il se retrouverait au-dessus de la ligne au lieu d'être
   devant le texte. Le marqueur générique écarte donc « .sujet__resume »
   par un :not(), plutôt que par une remise à « none » qui aurait perdu
   la bataille de spécificité contre « details[open] > summary ». */
.sujet__titre::before { content: '+ '; color: var(--rouge); font-weight: 800; }
.sujet[open] .sujet__titre::before { content: '– '; }
.sujet__resume .rang { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.sujet__resume .rang__principal { flex: 1 1 320px; min-width: 0; }
.sujet__resume:hover .sujet__titre { color: var(--rouge); }

.sujet__corps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 0 20px;
}

.sujet__titre {
  display: block;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: var(--chasse-titre);
  color: var(--noir);
  margin: 0;
  text-wrap: balance;
}
.sujet__angle {
  margin: 0;
  color: var(--gris-texte);
  font-size: 15px;
  max-width: 68ch;
}

.sujet__delai {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--gris-texte);
  padding: 8px 12px;
  background: var(--gris-fond);
  border-left: 2px solid var(--gris);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}
.sujet__delai--depasse { color: var(--rouge); border-left-color: var(--rouge); }

.sujet__actions { margin: 0; }
.sujet__fige { margin: 0; font-size: 14px; color: var(--gris-discret); }
.sujet__lien-fil { margin: 0; font-size: 14px; }

.fil {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: var(--gris-fond);
  border-radius: var(--rayon);
}
.fil .historique li { border-left-color: var(--gris-discret); }
.fil .champ { background: var(--blanc); }


/* ==================================================================
   Onglet Contenus
   ================================================================== */

.envoi-mois {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
}
.envoi-mois .aide { margin: 0; }

.contenu { padding: 22px 0; display: flex; flex-direction: column; gap: 14px; }
.contenu__titre { font-size: 17px; line-height: 1.3; margin: 0; text-wrap: balance; }

.texte {
  border: 1px solid var(--gris);
  border-radius: var(--rayon);
  padding: 14px 16px;
}
.texte__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.texte__entete .colonne__titre { margin: 0; padding: 0; border: 0; }
.texte__corps {
  white-space: pre-wrap;
  font-size: 15px;
  line-height: 1.7;
  max-height: 420px;
  overflow-y: auto;
}
.texte > summary {
  display: inline-block;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: var(--chasse-titre);
  color: var(--gris-texte);
}
.texte > summary:hover { color: var(--noir); }
.texte[open] > summary { margin-bottom: 10px; }
/* Replié, le bloc se réduit à sa seule ligne de titre : ni cadre, ni
   réserve d'espace vide. */
.texte:not([open]) { border-color: transparent; padding-top: 4px; padding-bottom: 4px; }

.texte--long { padding: 0; border: 0; }
.texte--long .texte__entete,
.texte--long .texte__corps {
  border: 1px solid var(--gris);
  border-radius: var(--rayon) var(--rayon) 0 0;
  padding: 12px 16px;
  margin: 0;
}
.texte--long .texte__corps { border-top: 0; border-radius: 0 0 var(--rayon) var(--rayon); }

.bouton--copier { flex: 0 0 auto; }
.bouton--copier.fait { color: var(--vert); border-color: var(--vert); }

.visuel {
  margin: 0;
  font-size: 14px;
  color: var(--gris-texte);
  padding: 10px 14px;
  background: var(--beige);
  border-radius: var(--rayon);
}
.visuel__etiquette {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-discret);
  margin-bottom: 3px;
}


/* --- Bloc contact sous le bandeau --------------------------------- */

.contact { background: var(--gris-fond); border-bottom: 1px solid var(--gris); }
.contact__interieur {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 9px var(--bloc);
  font-size: 13px;
}
.contact__etiquette {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-discret);
}
.contact__nom { font-weight: 600; }
.contact__fonction { font-weight: 400; color: var(--gris-texte); }

.contact-fiche { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.contact-fiche li + li { margin-top: 2px; }


/* --- Logo de canal ------------------------------------------------ */

.canal {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--gris-texte);
  border: 1px solid var(--gris);
  border-radius: var(--rayon);
  padding: 4px 10px 4px 8px;
  background: var(--blanc);
  white-space: nowrap;
}
/* Les logos sont carrés et transparents : une hauteur fixe suffit, et
   les attributs width/height de la balise réservent la place avant
   même le chargement, ce qui évite que la ligne sautille. */
.canal__logo { width: 18px; height: 18px; flex: 0 0 auto; object-fit: contain; }
.canal__nom { color: var(--gris-texte); }

/* --- Bascule Visuel / Code --------------------------------------- */

.vues { display: flex; gap: 2px; }
.vues__onglet {
  font-family: var(--titre);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--chasse-titre);
  color: var(--gris-discret);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  padding: 5px 12px;
  cursor: pointer;
}
.vues__onglet:hover { color: var(--noir); }
.vues__onglet[aria-selected="true"] {
  color: var(--noir);
  background: var(--blanc);
  border-color: var(--gris);
}

/* --- Article rendu ------------------------------------------------ */
/* Mise en forme volontairement sobre : c'est un aperçu du texte, pas
   une reproduction du thème WordPress du client. */

.article { white-space: normal; }
.article > *:first-child { margin-top: 0; }
.article > *:last-child { margin-bottom: 0; }
.article p { margin: 0 0 16px; }
.article h2 { font-size: 22px; margin: 26px 0 10px; }
.article h3 { font-size: 18px; margin: 22px 0 8px; }
.article h4 { font-size: 16px; margin: 18px 0 6px; }
.article ul, .article ol { margin: 0 0 16px; padding-left: 22px; }
.article li { margin-bottom: 5px; }
.article blockquote {
  margin: 0 0 16px;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--gris);
  color: var(--gris-texte);
}
.article code {
  font-size: 0.9em;
  background: var(--gris-fond);
  border: 1px solid var(--gris);
  border-radius: 3px;
  padding: 1px 4px;
}
.article pre { background: var(--gris-fond); padding: 12px; border-radius: var(--rayon); overflow-x: auto; }
.article hr { border: 0; border-top: 1px solid var(--gris); margin: 24px 0; }

.texte__corps--code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gris-texte);
}


/* --- Va-et-vient sujet ↔ contenus --------------------------------- */

.lies {
  margin: 0;
  padding: 12px 14px;
  background: var(--gris-fond);
  border-radius: var(--rayon);
  font-size: 14px;
}
.lies--ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.lies__titre {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-discret);
}
.lies--ligne .lies__titre { display: inline; }

.lies__liste { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lies__liste a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--noir);
}
.lies__liste a:hover .lies__nom { color: var(--rouge); text-decoration: underline; }
.lies__nom { font-size: 14px; }

/* L'élément visé par un lien entrant se signale, sinon on arrive au
   milieu d'une liste sans savoir lequel on cherchait. */
.item:target {
  background: var(--beige);
  border-radius: var(--rayon);
  box-shadow: 0 0 0 12px var(--beige);
}


/* --- Offre du client, dans l'administration ----------------------- */

.offre {
  background: var(--beige);
  border-radius: var(--rayon);
  padding: 12px 14px;
}
.offre__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}
.offre__nom {
  font-family: var(--titre);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: var(--chasse-titre);
  color: var(--noir);
}
.offre__prix {
  font-size: 13px;
  font-weight: 600;
  color: var(--gris-texte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.offre__details { margin: 5px 0 0; font-size: 13px; color: var(--gris-texte); }
.offre__description { margin: 6px 0 0; font-size: 13px; color: var(--gris-discret); }

/* --- Utilitaires -------------------------------------------------- */

.discret { color: var(--gris-discret); font-size: 13px; }
.rang { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.rang__principal { flex: 1 1 320px; min-width: 0; }
.pile > * + * { margin-top: var(--bloc); }

.invisible {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Adaptations -------------------------------------------------- */

@media (max-width: 1025px) {
  h1 { font-size: 38px; }
  h2 { font-size: 26px; }
}
@media (max-width: 768px) {
  :root { --section: 32px; --bloc: 18px; }
  h1 { font-size: 30px; }
  .bouton { width: 100%; text-align: center; }
  .bouton--discret, .bouton--petit { width: auto; }
  .onglets { padding: 0 var(--bloc); overflow-x: auto; flex-wrap: nowrap; }
  .onglet { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}