/* Styles propres à la page de présentation au CA (prototypes/index.html).
   Aucune couleur en dur : jetons --cl-* seulement. */

/* Héros : mention de version */
.presentation__version {
  margin-top: var(--cl-espace-3);
  font-family: var(--cl-police-libelles);
  font-size: var(--cl-taille-note);
  letter-spacing: var(--cl-interlettrage-libelle);
  text-transform: uppercase;
  color: var(--cl-or-clair);
}

/* Objectifs : cartes sur crème */
.presentation__objectifs .cl-infos__carte { background: var(--cl-blanc); box-shadow: var(--cl-ombre-douce); }

/* Direction visuelle */
.presentation__style {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--cl-espace-5);
  max-width: var(--cl-conteneur-etroit);
  margin-inline: auto;
}
.presentation__sous-titre {
  margin-bottom: var(--cl-espace-3);
  font-family: var(--cl-police-libelles);
  font-size: var(--cl-taille-libelle);
  font-weight: 600;
  letter-spacing: var(--cl-interlettrage-attribution);
  text-transform: uppercase;
  color: var(--cl-or-texte);
}
.presentation__couleurs { list-style: none; display: grid; gap: var(--cl-espace-3); }
.presentation__couleur { display: grid; grid-template-columns: 72px 1fr; gap: var(--cl-espace-2b); align-items: center; }
.presentation__pastille { width: 72px; height: 72px; border: 1px solid var(--cl-gris-clair); }
.presentation__pastille--noir { background: var(--cl-noir); }
.presentation__pastille--or { background: var(--cl-or); }
.presentation__pastille--creme { background: var(--cl-creme); }
.presentation__couleur-nom { display: block; font-family: var(--cl-police-libelles); font-size: 1rem; font-weight: 600; }
.presentation__couleur-role { font-size: var(--cl-taille-carte); max-width: none; }
.presentation__typo { border-top: 4px solid var(--cl-or); padding-top: var(--cl-espace-3); }
.presentation__typo-titre {
  font-family: var(--cl-police-titres);
  font-size: var(--cl-taille-h2);
  font-weight: 300;
  line-height: 1.15;
  margin-bottom: var(--cl-espace-1);
}
.presentation__typo-texte { font-size: var(--cl-taille-texte); max-width: none; }
.presentation__typo-nom {
  display: block;
  margin: var(--cl-espace-1) 0 var(--cl-espace-4);
  font-family: var(--cl-police-libelles);
  font-size: var(--cl-taille-note);
  color: var(--cl-gris);
}
.presentation__principes { margin-top: var(--cl-espace-5); }

/* Blocs du site : aperçus 16:10 ancrés en haut */
.presentation__bloc .cl-serie__media img { aspect-ratio: 16 / 10; object-position: top; }
.presentation__bloc .cl-serie__nom { font-size: 1.25rem; }

/* Sur téléphone */
.presentation__telephones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 300px));
  justify-content: center;
  gap: var(--cl-espace-4);
  list-style: none;
}
.presentation__telephone img { width: 100%; border: 1px solid var(--cl-or-30); box-shadow: var(--cl-ombre-profonde); }
.presentation__telephone figcaption {
  margin-top: var(--cl-espace-2);
  text-align: center;
  font-family: var(--cl-police-libelles);
  font-size: var(--cl-taille-libelle);
  letter-spacing: var(--cl-interlettrage-libelle);
  text-transform: uppercase;
  color: var(--cl-or-clair);
}
@media (max-width: 767.98px) {
  .presentation__telephones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cl-espace-3) var(--cl-espace-2); }
}

/* Pages à venir */
.presentation__pages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--cl-espace-3);
  max-width: var(--cl-conteneur-large);
  margin-inline: auto;
  list-style: none;
}
.presentation__pages + .presentation__pages { margin-top: var(--cl-espace-3); }
.presentation__page {
  display: flex;
  flex-direction: column;
  gap: var(--cl-espace-1b);
  height: 100%;
  padding: var(--cl-espace-4) var(--cl-espace-3);
  background: var(--cl-creme);
  border-top: 3px solid var(--cl-or);
}
.presentation__page-nom { font-family: var(--cl-police-texte); font-size: 1.5rem; font-weight: 400; line-height: 1.25; }
.presentation__page-texte { font-size: var(--cl-taille-carte); max-width: none; }
.presentation__page .cl-badge { align-self: flex-start; margin-top: auto; }
/* Page prête : aperçu en tête de carte et bouton à la place de la mention */
.presentation__page-apercu { display: block; margin: calc(-1 * var(--cl-espace-4)) calc(-1 * var(--cl-espace-3)) var(--cl-espace-1b); }
.presentation__page-apercu img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.presentation__page .presentation__page-bouton { align-self: flex-start; margin-top: auto; }
.presentation__pages--accueils .presentation__page-nom { font-family: var(--cl-police-titres); font-size: var(--cl-taille-h2); font-weight: 300; }

/* Phrase sous les deux cartes d'accueil */
.presentation__choix {
  max-width: none;
  margin: var(--cl-espace-3) auto var(--cl-espace-4);
  text-align: center;
  font-style: italic;
  font-size: var(--cl-taille-citation);
}

/* Note sous la carte Appuyez-nous */
.presentation__don-note { max-width: var(--cl-conteneur-texte); margin: var(--cl-espace-4) auto 0; text-align: center; }
.presentation__don-note p { margin: 0 auto var(--cl-espace-1); font-size: var(--cl-taille-carte); }

/* Faisabilité */
.presentation__faisable p { font-size: var(--cl-taille-citation); }

/* Appel en fin de section */
.presentation__suite { margin-top: var(--cl-espace-5); justify-content: center; }

/* Texte propre à l'écran ou au papier */
.presentation__papier { display: none; }

/* ------------------------------------------------------------------
   Impression et PDF (format Letter) : fonds conservés,
   une section par page, chaque section remplit sa page
   ------------------------------------------------------------------ */
@media print {
  @page { size: letter; margin: 0; }
  html, body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    background: var(--cl-noir-profond);
  }
  .cl-bandeau-demo, .cl-annonce, .cl-nav, .cl-evitement,
  .cl-hero__boutons, .presentation__suite, .presentation__ecran { display: none !important; }
  .presentation__papier { display: inline; }
  html.js .cl-apparition { opacity: 1 !important; transform: none !important; }

  /* Une section par page, pleine hauteur */
  main > .cl-section {
    break-before: page;
    break-inside: avoid;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 11in;
    padding: 14mm 14mm;
  }
  main > .cl-section:first-child { break-before: auto; }
  main > .cl-section > * { width: 100%; }
  .cl-hero, .cl-hero--page { min-height: 11in; padding: 0 16mm; }
  .cl-hero__texte { max-width: 80%; }
  .cl-titre-section { margin-bottom: var(--cl-espace-4); }
  .cl-titre-section__intro { margin-bottom: var(--cl-espace-4); }

  /* Grilles plus denses sur papier */
  .cl-infos { grid-template-columns: repeat(3, 1fr); gap: var(--cl-espace-3); }
  .cl-etapes { grid-template-columns: repeat(3, 1fr); gap: var(--cl-espace-3); }
  #etapes .cl-etapes { grid-template-columns: repeat(4, 1fr); }
  .cl-series { grid-template-columns: repeat(4, 1fr); gap: var(--cl-espace-2); }
  .presentation__bloc .cl-serie__corps { padding: var(--cl-espace-2); gap: var(--cl-espace-1); }
  .presentation__bloc .cl-serie__nom { font-size: 1rem; }
  .presentation__bloc .cl-serie__nom::after { margin-top: var(--cl-espace-1); }
  .presentation__bloc .cl-serie__texte { font-size: 0.8125rem; line-height: 1.45; }
  .presentation__bloc .cl-serie__pied { display: none; }
  .presentation__pages { grid-template-columns: repeat(3, 1fr); }
  .presentation__pages--accueils { grid-template-columns: repeat(2, 1fr); }
  .presentation__page { padding: var(--cl-espace-3) var(--cl-espace-2b); }
  .presentation__page-apercu { margin: calc(-1 * var(--cl-espace-3)) calc(-1 * var(--cl-espace-2b)) var(--cl-espace-1); }
  .presentation__page-bouton { display: none !important; }
  /* Les pages à venir : la carte de l'accueil A et ses quatre voisines tiennent sur une page */
  main > #pages.cl-section { padding-block: 10mm; }
  #pages .cl-titre-section { margin-bottom: var(--cl-espace-3); }
  #pages .cl-titre-section__intro { margin-top: 0; margin-bottom: var(--cl-espace-3); }
  #pages .presentation__page { padding: var(--cl-espace-2) var(--cl-espace-2b); gap: var(--cl-espace-1); }
  #pages .presentation__page-apercu { margin: calc(-1 * var(--cl-espace-2)) calc(-1 * var(--cl-espace-2b)) var(--cl-espace-1); }
  #pages .presentation__page-apercu img { height: 130px; aspect-ratio: auto; }
  #pages .presentation__pages--accueils .presentation__page-nom { font-size: 1.75rem; }
  #pages .presentation__choix { margin: var(--cl-espace-2) auto; font-size: 1rem; }
  #pages .presentation__page--prete .presentation__page-texte { font-size: 0.9375rem; }
  .presentation__telephone img { box-shadow: none; }

  .cl-infos__carte, .cl-serie, .cl-etapes__item, .presentation__page,
  .presentation__telephone, .presentation__couleur, .presentation__typo { break-inside: avoid; }
  .cl-serie:focus-within { outline: none; }

  /* Adresses web complètes écrites en clair */
  main a[href^="http"]:not(.cl-btn)::after {
    content: " (" attr(href) ")";
    font-family: var(--cl-police-libelles);
    font-size: 0.75em;
    word-break: break-all;
  }

  /* Pied de page sur la dernière page, à la suite des étapes */
  .cl-pied { break-before: avoid; padding: 10mm 14mm 8mm; }
  .cl-pied__colonnes { grid-template-columns: repeat(3, 1fr); max-width: none; }
  .cl-pied__colonne:has(.cl-pied__form) { display: none; }
  .cl-pied__bas { margin-top: var(--cl-espace-4); }
  .cl-pied a:not(.cl-btn) { min-height: 0; padding: 3px 0; }
  main > .cl-section:last-child { min-height: 0; padding-top: 16mm; padding-bottom: 12mm; }
}