/* ============================================================
   DCP — Les principes et les appuis, sur la page Participer

   Cette feuille a servi l'ancienne page Principes, dont les blocs ont
   ete retires du site le 13 septembre 2026 quand Participer a repris ce
   qui restait. Les regles de ces blocs y ont survecu jusqu'au 6 octobre
   2026 : douze classes que plus aucun balisage ne posait (le
   hors-perimetre, l'explication « ce qu'est un standard », la grille
   « contribuer » et ses pistes, la note des socles). Elles sont parties,
   l'historique git les garde.
   ============================================================ */

/* --- Les quatre affirmations ------------------------------------------ */

.affirmations {
  list-style: none;
  counter-reset: affirmation;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}

.affirmation {
  counter-increment: affirmation;
  position: relative;
  padding-left: 3rem;
}

.affirmation::before {
  content: counter(affirmation);
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1.5px solid var(--accent-gold);
  color: var(--accent-gold-text);
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 0.9375rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.affirmation-titre {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
  padding-top: 0.25rem;
}

.affirmation-texte {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0;
}

/* --- Les engagements --------------------------------------------------- */

.engagements {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 980px;
}

.engagement {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.engagement-titre {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.engagement-texte {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

/* --- Ce sur quoi nous nous appuyons ----------------------------------- */

/* Trois colonnes pour trois familles : identite, semantique, droit. La
   carte pose son propre fond, la section etant teintee. */
.socles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.socle {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--bg);
}

.socle-titre {
  font-size: 1.0625rem;
  margin-bottom: 0.5rem;
}

.socle-texte {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}

/* La liste des textes d'appui est un depliant : <details> natif, chevron
   maison en guise de puce, rien en JS. La mecanique vit dans base.css
   sous .depliant-item, partagee avec tout le site ; ne restent ici que
   la mise en colonne et le filet.

   Ces deux declarations etaient groupees avec .hors-perimetre, l'autre
   liste depliable de l'ancienne page Principes. Elle n'existe plus. */
.socle-liste {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0.75rem 0 0;
}

/* Le filet separe la raison d'etre de la famille de la liste des textes
   sur lesquels elle s'appuie. */
.socle-liste {
  margin-top: 1.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

/* Les sources partent a la ligne quand il y en a deux, et gardent
   l'alignement du texte plutot que celui du chevron. */
.socle-source {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.socle-source a {
  color: var(--accent-gold-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.socle-source a:hover { border-bottom-color: var(--accent-gold); }

.socle-source a:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
  border-radius: 3px;
}

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

@media (max-width: 899px) {
  .affirmations,
  .engagements,
  .socles { grid-template-columns: 1fr; }
}

/* Trois colonnes tiennent mal sous 1100px : les libelles de textes
   reglementaires cassent en trop de lignes. On passe a deux avant le
   repli general, la troisieme carte prenant toute la largeur. */
@media (min-width: 900px) and (max-width: 1099px) {
  .socles { grid-template-columns: 1fr 1fr; }
}