/* ============================================================
   DCP — Pour les pros

   Une page courte et directe : trois avantages en liste, une chute, un
   etat des lieux, trois ressources depliables (motif partage
   .depliant-item) dont un modele de message. Titres et intros viennent
   de page.css et tiennent la laisse ; tout ici la tient aussi.
   ============================================================ */

/* Les trois avantages : un point dore, le mot-cle en gras, une ligne. */
.avantages {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  max-width: var(--laisse-texte);
  margin-left: max(0px, calc((100% - var(--laisse-texte)) / 2));
}

.avantages li {
  position: relative;
  padding: 0.625rem 0 0.625rem 1.5rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.avantages li + li { border-top: 1px solid var(--border); }

.avantages li::before {
  content: '◆';
  position: absolute;
  left: 0;
  top: 0.85rem;
  font-size: 0.625rem;
  color: var(--accent-gold);
}

.avantages strong {
  display: block;
  color: var(--text-primary);
  font-weight: 600;
}

.use-resume { margin-bottom: 1rem; }

/* La chute, une phrase en serif. */
.use-chute {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  margin-left: max(0px, calc((100% - var(--laisse-texte)) / 2));
}

/* Les trois ressources : la laisse, comme les textes courants. */
.use-points {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--laisse-texte);
  margin-left: max(0px, calc((100% - var(--laisse-texte)) / 2));
}

.use-points summary { font-size: 1rem; padding-block: 0.75rem; }

.use-liens a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-gold-text);
}

.use-liens a:hover { text-decoration: underline; }

/* Le modele de message a envoyer a son editeur : un bloc a part, aligne
   sur le texte, qu'on peut copier tel quel. */
.use-modele {
  margin: 0.25rem 0 0.75rem 1.3125rem;
  padding: 0.875rem 1.125rem;
  border-left: 3px solid var(--accent-gold);
  border-radius: 0 8px 8px 0;
  background-color: var(--bg);
}

.use-modele p {
  padding-left: 0;
  margin: 0 0 0.625rem;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.use-modele p:last-child { margin-bottom: 0; }

/* Un sous-titre a l'interieur d'une section, quand un public enchaine deux
   blocs sous le meme titre (les avantages puis « ce que le DCP n'est pas »).
   Meme calibre que .participer-sous-titre, et la meme laisse que les titres
   de page.css. */
.use-sous-titre {
  font-size: clamp(1.1875rem, 2.25vw, 1.5rem);
  margin: 3rem 0 0.75rem;
  margin-left: max(0px, calc((100% - var(--laisse-texte)) / 2));
}

/* Les chantiers ouverts, listes a l'interieur d'un depliant : elle
   s'aligne sur le texte du depliant (1.3125rem de .depliant-item p), pas
   sur son chevron, et reprend le point dore des avantages. */
.use-chantiers {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0 0 0 1.3125rem;
}

.use-chantiers li {
  position: relative;
  margin-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.use-chantiers li:last-child { margin-bottom: 0; }

.use-chantiers li::before {
  content: '\25c6';
  position: absolute;
  left: 0;
  top: 0.4rem;
  font-size: 0.5rem;
  color: var(--accent-gold);
}

.use-chantiers strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Un lien seul sous une intro de section, hors liste depliable : il tient
   la laisse comme elle, et respire un peu au-dessus du bloc suivant. */
.use-liens--seul {
  margin: -0.5rem 0 0;
  margin-left: max(0px, calc((100% - var(--laisse-texte)) / 2));
}

/* La feuille de route ferme la page, sous l'intro de l'etat des lieux. */
#etat .roadmap-block { margin-top: 2rem; }

/* --- La bascule de public ------------------------------------------------ */

/* Un libelle et les boutons dans un groupe, sur la laisse comme le titre
   en dessous. Elle ouvre la page : l'ecart est donc sous elle, pas dessus. */
.client-choix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
  margin-bottom: 2rem;
  margin-left: max(0px, calc((100% - var(--laisse-texte)) / 2));
}

/* Le libelle prend sa ligne : sinon il pousse la grille vers la droite et
   elle depasse le bord droit de la laisse, alors que tout le reste de la
   page s'aligne sur son bord gauche. */
.client-choix-label {
  flex: 0 0 100%;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Le groupe est une GRILLE, pas un galet. Il a suivi le motif de la posture
   du jeu tant qu'il n'y avait que deux publics ; a six, une ligne de 843px
   n'est plus une bascule mais une barre de navigation, et un galet a 999px
   de rayon coupe en deux lignes se lit mal. Le seuil du passage en colonne
   a ete releve deux fois (640, 780, 900px) avant d'admettre que la course
   etait sans fin.
   La grille se remplit d'elle-meme : trois colonnes sur la laisse a 680px,
   deux vers 400px, une seule en dessous, sans media query et sans seuil a
   relever en ajoutant un public. C'est le groupe qui prend toute la largeur
   restante (flex-basis 100% quand le libelle ne tient plus a cote). */
.client-groupe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2px;
  flex: 1 1 100%;
  /* min-width: 0 est indispensable : sans lui, la taille minimale
     automatique d'un element flex empeche la grille de descendre sous sa
     largeur intrinseque, auto-fit garde ses trois colonnes de 190px et la
     bascule deborde de 232px a 375px de large. Mesure a l'appui. */
  min-width: 0;
  max-width: var(--laisse-texte);
  padding: 3px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.client-btn {
  border: 0;
  padding: 0.625rem 0.875rem;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}

.client-btn[aria-pressed="true"] {
  background: var(--text-primary);
  color: var(--sur-inverse);
}

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

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

/* Sous 768px, le bouton devient une cible tactile de 45px de haut. */
@media (max-width: 768px) {
  .client-btn { padding-block: 0.75rem; }
}