/* =====================================================================
   QaLyZa, site C : conformité (conformite.html). Mise en page propre à
   la page ; les composants viennent de assets/site.css.
     1. Ouverture : le texte et l'avertissement, le bordereau des planches
     2. Référentiels : un bloc par texte, chacun sous son filet
     3. Ce qui reste à votre charge
   Surcharge locale de composants partagés : .avertissement agrandi dans
   l'ouverture.
   « Ce qui reste à votre charge » reste à l'encre du plan : jamais en rouge.
   ===================================================================== */


/* ---------- 1. Ouverture ---------- */
/* À gauche, le texte puis la note générale (l'avertissement) ; à droite, comme sur la
   feuille de garde d'un jeu de plans, le bordereau des planches. */
.conf-tete-grille {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "texte sommaire" "note sommaire";
  grid-template-rows: auto 1fr;
  gap: 34px clamp(36px, 5vw, 88px); align-items: start;
}
.conf-tete-texte { grid-area: texte; }
.sommaire { grid-area: sommaire; }
.conf-avertissement { grid-area: note; }
.conf-tete .titre-1 { max-width: 14ch; }

/* L'avertissement réglementaire, bien visible : un encadré à l'encre, jamais en rouge */
.conf-avertissement {
  margin-top: 0; padding: 18px 20px; max-width: 64ch;
  border: 1px solid color-mix(in srgb, var(--papier-encre) 45%, transparent);
  border-left: 3px solid var(--papier-encre); border-radius: 4px;
  background: var(--papier); color: var(--texte); font-size: 15.5px; line-height: 1.6;
}
.conf-avertissement svg { width: 20px; height: 20px; margin-top: 2px; color: var(--papier-encre); }

/* Bordereau des planches : le sommaire de la page, comme la liste d'un jeu de plans */
.sommaire {
  border: 1px solid color-mix(in srgb, var(--papier-encre) 40%, transparent); border-radius: 4px;
  background: var(--papier); box-shadow: 0 34px 60px -46px var(--ombre);
}
.sommaire-titre {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px;
  padding: 12px 16px; border-bottom: 1px solid color-mix(in srgb, var(--papier-encre) 40%, transparent);
  font-size: 14px; font-weight: 600;
}
.sommaire-titre span + span { font-size: 12.5px; font-weight: 500; color: var(--texte-2); }
.sommaire-liste li + li { border-top: 1px solid var(--trait); }
.sommaire-liste a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center;
  padding: 10px 16px; color: var(--texte); text-decoration: none;
  transition: background-color .2s;
}
.sommaire-liste a:hover { background: var(--accent-doux); }
.sommaire-liste a:focus-visible { outline-offset: -2px; border-radius: 2px; }
.sommaire-nom { grid-column: 1; font-size: 15px; font-weight: 600; line-height: 1.35; }
.sommaire-objet { grid-column: 1; font-size: 13.5px; line-height: 1.4; color: var(--texte-2); }
.sommaire-emetteur {
  grid-column: 2; grid-row: 1 / span 2; max-width: 16ch;
  font-size: 12.5px; line-height: 1.35; color: var(--texte-2); text-align: right;
}
/* À l'ouverture seulement : la feuille se pose, ses lignes se tracent */
@media (prefers-reduced-motion: no-preference) {
  .sommaire { animation: feuille-pose .8s var(--ease-sortie) .1s backwards; }
  .sommaire-liste li { animation: trace-ligne .6s var(--ease-sortie) backwards; }
  .sommaire-liste li:nth-child(1) { animation-delay: .35s; }
  .sommaire-liste li:nth-child(2) { animation-delay: .41s; }
  .sommaire-liste li:nth-child(3) { animation-delay: .47s; }
  .sommaire-liste li:nth-child(4) { animation-delay: .53s; }
  .sommaire-liste li:nth-child(5) { animation-delay: .59s; }
  .sommaire-liste li:nth-child(6) { animation-delay: .65s; }
  .sommaire-liste li:nth-child(7) { animation-delay: .71s; }
  .sommaire-liste li:nth-child(8) { animation-delay: .77s; }
}
@keyframes feuille-pose { from { opacity: 0; transform: translateY(12px) rotate(-.5deg); } to { opacity: 1; transform: none; } }
@keyframes trace-ligne { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (max-width: 1023px) {
  .conf-tete-grille {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    grid-template-areas: "texte" "note" "sommaire"; row-gap: 32px;
  }
  .sommaire, .conf-avertissement { max-width: 620px; }
}


/* ---------- 2. Référentiels ----------
   Un bloc par texte, sous son filet, le trait d'accent en tête ; les BPF ouvrent la
   grille sur toute sa largeur, les six autres textes suivent (trois, puis deux par ligne).
   Les ancres des blocs (#part-11, #annexe-11…) servent aux liens des autres pages. */
.referentiels {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 52px) clamp(28px, 3.5vw, 56px);
}
.referentiel { position: relative; padding-top: 22px; border-top: 1px solid var(--trait-2); }
.referentiel::before {
  content: ''; position: absolute; left: 0; top: -1px; width: 32px; border-top: 2px solid var(--accent);
}
.referentiel-large { grid-column: 1 / -1; }
.referentiel-nom { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.referentiel-emetteur { margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--texte-2); }
.referentiel-texte { margin-top: 12px; max-width: 62ch; font-size: 15.5px; line-height: 1.6; color: var(--texte-2); text-wrap: pretty; }
/* Arrivée par un lien (conformite.html#part-11…) : le nom du texte passe à l'accent */
.referentiel:target .referentiel-nom { color: var(--accent); }
@media (max-width: 1023px) {
  .referentiels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .referentiels { grid-template-columns: minmax(0, 1fr); }
}


/* ---------- 3. Ce qui reste à votre charge ---------- */
.charge-liste { display: grid; gap: 12px; max-width: 62ch; }
.charge-liste li { position: relative; padding-left: 30px; font-size: 17px; line-height: 1.5; }
/* Une case à cocher, chez vous : à l'encre du plan, ni rouge ni ocre */
.charge-liste li::before {
  content: ''; position: absolute; left: 1px; top: .22em; width: 16px; height: 16px;
  border: 1.5px solid var(--papier-encre); border-radius: 3px;
}