/* ============================================================
   DCP — Page d'accueil

   Les sections alternent fond de page et fond teinte, et les
   cartes prennent toujours l'autre des deux : elles se detachent
   ainsi sans avoir besoin d'ombre.
   ============================================================ */

/* --- Titres de section partages --------------------------------------- */

.section-title {
  text-align: center;
  margin-bottom: 1rem;
}

.section-intro {
  text-align: center;
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 60ch;
  margin: 0 auto 3rem;
}

.section-title + .apercu-grille,
.section-title + .reversals-grid,
.section-title + .frise {
  margin-top: 3rem;
}

/* Les sections sont des cibles du menu : l'en-tete est fixe sur cette
   page, un ancrage nu poserait le titre sous lui. */
.section-clin, .section-pratique, .section-etapes, .section-loin {
  scroll-margin-top: 6rem;
}

/* --- En un clin d'oeil : le resume anime embarque -------------------- */

/* Les bandes alternent a partir du hero : hero sur le fond de page, clin
   d'oeil teinte, En pratique sur le fond, cinq etapes teintee, aller plus
   loin sur le fond. Le hero et le clin d'oeil partageaient le fond de page
   et la coupure entre les deux ne se voyait pas, ou mal. */
.section-clin {
  padding-block: 4rem;
  background-color: var(--surface);
}

/* Sans chapo, le titre est directement suivi de l'animation. */
.section-clin .section-title { margin-bottom: 1.5rem; }

/* --- Hero -------------------------------------------------------------- */

.hero {
  padding-block: 8rem 3.5rem;
  background-color: var(--bg);
}

/* Espace pour le header fixe en accueil */
body[data-page="accueil"] .hero {
  padding-top: 14rem;
}

.hero-inner {
  max-width: 760px;
}

.hero-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hero-eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold-text);
  margin: 0;
}

/* La litanie d'exemples : elle doit se lire d'un coup d'oeil, comme une
   liste de griefs, avant que le titre n'annonce le remede. */
.hero-exemples {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--accent-gold);
}

.hero-exemples li {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.45;
}

/* Taille plafonnee pour que « Vos contrats au meme format, » tienne sur
   une seule ligne : a 3.25rem elle depassait de 8px la largeur utile et
   se repliait, ce qui donnait trois lignes au lieu des deux voulues. */
.hero-title {
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  line-height: 1.15;
  color: var(--text-primary);
  margin-top: 0.5rem;
}

.hero-title em {
  font-style: italic;
  color: var(--accent-gold-text);
}

.hero-lead {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  max-width: 66ch;
  margin: 0;
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

/* --- En pratique : la meme offre vue des deux facons, puis les quatre
   renversements, dans une seule bande teintee --------------------------- */

.section-pratique {
  padding-block: 4rem;
  background-color: var(--bg);
}

.apercu-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

/* Les deux volets imitent un extrait de contrat, pas une carte
   marketing : bord franc, hierarchie de document. */
.apercu {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
}

/* Regle du site : sans le protocole, rouge ; avec lui, vert. Ici la couleur
   reste au bord et au filet, sans fond teinte : ces deux volets imitent un
   extrait de contrat, et le volet « avec » porte a l'interieur du rouge
   (« puis 39,99 € ») et du vert (« identite verifiee »). Un fond colore les
   ferait lutter. Voir le bloc « Avant / sans le DCP » de tokens.css. */
.apercu--sans {
  border-color: var(--sans-dcp-accent);
  box-shadow: inset 3px 0 0 var(--sans-dcp-accent);
}

.apercu--avec {
  border-color: var(--avec-dcp-accent);
  box-shadow: inset 3px 0 0 var(--avec-dcp-accent);
}

.apercu-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.apercu--sans .apercu-label { color: var(--sans-dcp-accent); }
.apercu--avec .apercu-label { color: var(--avec-dcp-accent); }

.apercu-produit {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  line-height: 1.25;
}

.apercu-vendeur {
  display: block;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--status-ok-text);
  margin-top: 0.25rem;
}

.apercu-prix {
  font-size: 1.0625rem;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.apercu-prix strong {
  color: var(--status-err-text);
  font-weight: 700;
}

.apercu-liste {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.apercu-liste li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.apercu-liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--border);
}

.apercu--avec .apercu-liste li::before {
  background-color: var(--status-ok-text);
}

/* La case a cocher et la ligne minuscule sont la pour ce qu'elles
   evoquent : le consentement expedie et les petits caracteres. */
.apercu-case {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.apercu-case-marque {
  font-size: 1rem;
  color: var(--text-secondary);
}

.apercu-petit {
  font-size: 0.6875rem;
  color: var(--text-secondary);
  opacity: 0.65;
  margin: 0;
}

.apercu-chute {
  text-align: center;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.25rem;
  color: var(--text-primary);
  margin: 2.5rem auto 0;
  max-width: 56ch;
}

.apercu-chute--suite {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 64ch;
  margin-top: 1rem;
}

/* La phrase de transition annonce les quatre cartes : elles suivent sans
   sous-titre, a un pas mesure. */
.apercu-chute--suite + .reversals-grid { margin-top: 2.5rem; }

/* --- Les quatre renversements ------------------------------------------ */

.reversals-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

/* En pratique est sur le fond de page : les cartes prennent la teinte
   pour s'en detacher, comme les volets de l'apercu. */
.reversal-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.reversal-choc {
  font-size: clamp(1.25rem, 2.25vw, 1.625rem);
  line-height: 1.2;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.reversal-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reversal-label--before { color: var(--sans-dcp-accent); }

/* La fleche est produite par le libelle lui-meme. Le <div> d'origine,
   etant un bloc, occupait sa propre ligne et rejetait « Demain, avec le
   DCP » en dessous. On le masque plutot que de le retirer du balisage :
   le rendu reste juste quelle que soit la version du contenu livree, et
   la fleche etait de toute facon aria-hidden. */
.reversal-arrow { display: none; }

.reversal-label--after {
  color: var(--avec-dcp-accent);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1rem;
}

.reversal-label--after::before {
  content: '→';
  color: var(--accent-gold);
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

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

/* --- Points depliables ------------------------------------------------ */

/* <details> natif : le depliage, le clavier et l'etat annonce aux
   lecteurs d'ecran sont acquis sans une ligne de JavaScript. */
.points {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0.375rem 0 0;
}

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

.point-titre {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.625rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
}

/* Le chevron natif est remplace par le notre, oriente par l'etat ouvert. */
.point-titre::-webkit-details-marker { display: none; }

.point-titre::before {
  content: '▸';
  flex-shrink: 0;
  color: var(--accent-gold);
  font-size: 0.8125rem;
  line-height: 1.5;
  transition: transform 180ms ease;
}

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

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

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

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

/* Le texte s'aligne sur le titre, pas sur le chevron. */
.point-texte {
  margin: 0 0 0.75rem;
  padding-left: 1.3125rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* L'emphase doit ressortir du gris du paragraphe, sinon le gras seul
   passe inapercu sur une couleur deja attenuee. */
.point-texte strong { color: var(--text-primary); }

/* --- Les deux causes, dans le hero ------------------------------------ */

.points--hero {
  margin: 0.25rem 0 0.5rem;
}

/* Le resume passe en bloc : en flex, les deux membres de la phrase
   deviendraient deux elements flexibles poses cote a cote, alors qu'ils
   doivent s'enchainer comme un texte continu qui se replie tout seul.
   Le chevron est donc detache du flux plutot que d'etre un frere. */
.points--hero .point-titre {
  display: block;
  position: relative;
  padding: 0.75rem 0 0.75rem 1.5rem;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
}

.points--hero .point-titre::before {
  position: absolute;
  left: 0;
  top: 1.05rem;
  font-size: 0.875rem;
  line-height: 1;
}

.points--hero .point-texte {
  padding-left: 1.5rem;
  font-size: 0.9375rem;
  margin-bottom: 1rem;
}

/* Le constat prend le rouge des irregularites, la reponse le vert du
   DCP : les deux couleurs de statut du site, opposees terme a terme. La
   lecture separe les deux membres sans qu'aucun mot ait a l'annoncer. */
.point-probleme {
  color: var(--status-err-text);
}

.point-reponse {
  color: var(--status-ok-text);
  font-weight: 600;
}

.points--hero .point-titre:hover .point-probleme,
.points--hero .point-titre:hover .point-reponse {
  color: var(--accent-gold-text);
}

/* L'exemple ferme la carte : meme offre de box a chaque fois, ce qui
   fait le lien d'un renversement au suivant. */
.reversal-example {
  margin-top: auto;
  padding: 1rem 1.125rem;
  background-color: var(--bg);
  border-left: 3px solid var(--accent-gold);
  border-radius: 0 8px 8px 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.reversal-example-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold-text);
  margin-bottom: 0.375rem;
}

/* --- La frise en cinq etapes ------------------------------------------- */

.section-etapes {
  padding-block: 4rem;
  background-color: var(--surface);
}

.frise {
  list-style: none;
  position: relative;
  max-width: 720px;
  margin-inline: auto;
}

/* Le fil continu qui relie les pastilles. Il s'arrete au centre de la
   premiere et de la derniere, pour ne pas depasser dans le vide. */
.frise::before {
  content: '';
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 2px;
  transform: translateX(-1px);
  background-color: var(--border);
}

.etape {
  position: relative;
  padding-left: 4.5rem;
  padding-bottom: 2.5rem;
}

.etape:last-child { padding-bottom: 0; }

/* Pastille numerotee, posee sur le fond de section pour masquer le fil */
.etape-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1.5px solid var(--accent-gold);
  background-color: var(--surface);
  color: var(--accent-gold-text);
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.etape-titre {
  font-size: 1.1875rem;
  margin-bottom: 0.5rem;
  padding-top: 0.625rem;
}

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

/* L'exemple, en retrait et en italique : on entend la difference entre
   la regle et le cas. */
.etape-exemple {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0;
  padding-left: 1rem;
  border-left: 2px solid var(--accent-blue);
}

.etapes-coda {
  max-width: 720px;
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.0625rem;
  color: var(--text-primary);
  line-height: 1.7;
  text-align: center;
}

/* La derniere section porte les limites, l'invitation et le fil. */
.section-loin {
  padding-block: 4rem;
  background-color: var(--bg);
}

.section-loin .limites { margin-top: 2.5rem; }
.section-loin .cta-block { margin-top: 2.5rem; }

/* --- Le perimetre : ce que le DCP n'est pas ---------------------------- */

/* Marges resserrees par rapport aux autres sections : celle-ci ne contient
   qu'une carte encadree, dont la bordure ferme deja le propos. Les 4rem
   habituels s'ajoutaient aux 5rem de la section suivante et laissaient
   144px de vide, tres visibles sous un bord net. */
.section-limites {
  padding-block: 2rem;
  background-color: var(--bg);
}

/* Bandeau plein et bordure epaisse : c'est la premiere question d'un
   professionnel du secteur, elle ne peut pas se lire comme une note de
   bas de page. L'or plutot que le rouge : ce sont des frontieres
   assumees, pas des avertissements. */
.limites {
  max-width: 1000px;
  margin-inline: auto;
  border: 2px solid var(--accent-gold);
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--bg);
}

.limites-bandeau {
  margin: 0;
  padding: 0.875rem 1.5rem;
  background-color: var(--accent-gold);
  color: #0F1F33;
  font-family: 'Source Serif Pro', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.01em;
}

/* Empilees et non en colonnes : cote a cote, la grille etirait les trois
   a la hauteur de la plus haute, et le texte le plus court laissait
   jusqu'a cinq lignes vides sous lui, d'autant plus visibles que la
   largeur augmentait. En rangees, chacune epouse son contenu. */
.limites-corps {
  display: flex;
  flex-direction: column;
}

.limite {
  padding: 1.375rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.limite:last-child { border-bottom: none; }

.limite-titre {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}

/* Puce doree : elle rythme la lecture des trois refus et remplace la
   separation verticale qu'assuraient les colonnes. */
.limite-titre::before {
  content: '✕';
  flex-shrink: 0;
  color: var(--accent-gold);
  font-size: 0.875rem;
}

.limite-titre {
  font-size: 1.0625rem;
  margin-bottom: 0.625rem;
  color: var(--text-primary);
}

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

.limites-chute {
  margin: 0;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--border);
  background-color: var(--surface);
  font-size: 0.9375rem;
  color: var(--text-primary);
  line-height: 1.7;
  text-align: center;
}

/* --- Appel a l'action final ---------------------------------------------- */

.section-cta {
  padding-block: 5rem;
  background-color: var(--surface);
}

.cta-block {
  background-color: var(--text-primary);
  color: var(--bg);
  border-radius: 12px;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  max-width: 700px;
  margin-inline: auto;
}

.cta-title {
  color: var(--sur-inverse);
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.cta-body {
  font-size: 1rem;
  color: var(--sur-inverse-doux);
  margin: 0;
  line-height: 1.75;
}

/* --- Participer : le collectif, apres l'invitation personnelle --------- */

.participer {
  max-width: 900px;
  margin: 3.5rem auto 0;
  padding-top: 3rem;
  border-top: 1px solid var(--border);
}

.participer-titre {
  font-size: clamp(1.375rem, 2.75vw, 1.75rem);
  text-align: center;
  margin-bottom: 0.75rem;
}

.participer-intro {
  text-align: center;
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 52ch;
  margin: 0 auto 2.5rem;
}

/* Le fil : un role par ligne, motif partage .depliant-item de base.css ;
   les outils qui servent a ce role suivent le texte, en ligne. */
.participer-liste {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  max-width: 720px;
}

.participer-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.25rem;
  margin-top: -0.25rem;
}

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

.participer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

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

@media (max-width: 899px) {
  .apercu-grille,
  .reversals-grid { grid-template-columns: 1fr; }

}

@media (max-width: 767px) {
  .hero { padding-block: 3rem; }
  body[data-page="accueil"] .hero { padding-top: 12rem; }

  .section-clin,
  .section-pratique,
  .section-etapes,
  .section-loin { padding-block: 3rem; }

  .section-limites { padding-block: 1.5rem; }

  .reversal-card { padding: 1.25rem; }

  .etape { padding-left: 3.5rem; }
  .etape-num { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
  .frise::before { left: 1.25rem; top: 1.25rem; bottom: 1.25rem; }

  .limite { padding: 1.25rem; }
  .limites-bandeau { font-size: 1.0625rem; }

  .cta-block { padding: 2rem; }

  .participer { margin-top: 2.5rem; padding-top: 2rem; }
  .participer-actions { flex-direction: column; align-items: stretch; }
  .participer-actions .btn { justify-content: center; }
}