/* ==========================================================================
   Taux de satisfaction — reprise de formation/qualiopi/taux-de-satisfaction.php
   de l'ancien site.
   LA MISE EN PAGE EST CELLE DE L'ANCIENNE : un <article> par session qui
   s'enchaînent, titre rouge, dates, taux, avis, filet. Pas une grille de
   cartes — cinq ans de sessions ne sont pas un catalogue qu'on balaie, c'est un
   registre qu'on descend, et la colonne de lecture est ce qui le rend
   descendable.
   Ce qu'elle change, et pourquoi :
   · les styles étaient écrits en dur, avec des rouges et des rayons étrangers
   à la charte. Tout passe par les jetons : rouge #CC0000, Circe,
   the-seasons ;
   · les avis n'étaient lisibles qu'avec JavaScript — le CSS les masquait tous,
   le script en révélait un. Ici la liste est servie ouverte et le script la
   replie ;
   · la hauteur du carrousel était mesurée en JavaScript (avis-height-fix.js)
   pour que la carte ne saute pas d'un avis à l'autre. Elle vient maintenant
   de la grille : les avis sont empilés dans la MÊME cellule, la ligne prend
   donc la hauteur du plus grand, et il n'y a plus rien à calculer ;
   · l'année sépare les exercices — l'ancienne page alignait 132 sessions sans
   le moindre repère ;
   · la feuille Professional est chargée avant celle-ci : surtitre, titre
   didone et lien à filet viennent de là.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Écran 1 — l'annonce et les taux de l'année.
   -------------------------------------------------------------------------- */

.satis-colonne {
  width: min(100% - var(--gutter) * 2, 800px);
  margin-inline: auto;
}

.satis-tete {
  padding: var(--u16) 0 var(--u8);
  background: var(--black);
}

.satis-titre {
  font-size: clamp(1.875rem, 3.6vw, 3rem);
}

.satis-lead {
  max-width: none;
}

.satis-annees {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--u3);
  margin: var(--u8) 0 0;
  padding: 0;
  list-style: none;
}

.satis-annee {
  padding: var(--u4);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius-media);
  background: var(--surface);
}

.satis-annee--passee {
  background: transparent;
  color: var(--muted);
}

.satis-annee__label {
  margin: 0 0 var(--u3);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.satis-annee--passee .satis-annee__label {
  color: rgb(160 160 160 / 0.7);
}

.satis-annee__chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--u3);
}

.satis-annee__chiffre {
  margin: 0;
}

.satis-annee__chiffre strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.1;
  color: var(--white);
}

.satis-annee--passee .satis-annee__chiffre strong {
  color: var(--muted);
}

.satis-annee__chiffre span {
  display: block;
  margin-top: var(--u1);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Écran 2 — le registre des sessions.
   Une colonne de lecture et non toute la largeur du site : les avis sont des
   phrases, et une phrase de 1 200 px ne se lit pas. Les 68ch valent pour tout
   le bloc, filets compris, pour que le registre garde un seul bord gauche.
   -------------------------------------------------------------------------- */

.satis-liste {
  padding: 0 0 var(--u12);
  background: var(--black);
}

.satis-compte {
  margin: 0;
  padding: var(--u4) 0;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  color: var(--muted);
}

.satis-compte strong {
  font-weight: 700;
  color: var(--white);
}

.satis-annee-bloc {
  margin-top: var(--u12);
  scroll-margin-top: calc(var(--header-h) + var(--u4));
}

.satis-annee-bloc__titre {
  margin: 0 0 var(--u8);
  padding-bottom: var(--u2);
  border-bottom: 1px solid var(--red);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--white);
}

/* --------------------------------------------------------------------------
   Une session.
   Le filet en bas remplace le <hr> de l'ancienne page — un séparateur qui ne
   sépare rien de sémantique n'a pas à être un élément. La dernière session de
   l'année n'en porte pas : le titre de l'année suivante fait déjà la coupure.
   -------------------------------------------------------------------------- */

.satis-session {
  padding-bottom: var(--u8);
  margin-bottom: var(--u8);
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
}

.satis-session:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.satis-session__titre {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--red);
}

.satis-session__precision {
  display: block;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.satis-session__date {
  margin: var(--u2) 0 0;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.5;
  color: var(--white);
}

.satis-session__taux {
  display: flex;
  flex-wrap: wrap;
  gap: var(--u2) var(--u6);
  margin: var(--u3) 0 0;
}

.satis-taux {
  display: block;
}

.satis-taux__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--muted);
}

.satis-taux__valeur {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--white);
}

.satis-taux--effectif .satis-taux__valeur {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Les avis — un à la fois, chevrons de part et d'autre.
   Servis ouverts ; le script pose .is-carrousel et n'en laisse alors qu'un
   visible. L'ordre des règles compte : sans .is-carrousel, rien n'est masqué et
   la liste se lit entière.
   -------------------------------------------------------------------------- */

.satis-avis {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "prec liste suiv"
    ".    compte .";
  align-items: center;
  gap: var(--u2) var(--u3);
  margin-top: var(--u4);
  padding: var(--u4);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--radius-media);
  background: var(--surface);
}

.satis-avis__liste {
  grid-area: liste;
  display: grid;
  gap: var(--u6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.satis-avis.is-carrousel .satis-avis__liste {
  gap: 0;
}

.satis-avis.is-carrousel .satis-avis__item {
  grid-area: 1 / 1;
  visibility: hidden;
}

.satis-avis.is-carrousel .satis-avis__item.is-courant {
  visibility: visible;
}

.satis-avis__note {
  display: flex;
  gap: 2px;
  margin: 0 0 var(--u2);
  color: var(--red);
}

.satis-avis__etoile--eteinte {
  color: rgb(255 255 255 / 0.18);
}

.satis-avis__scan {
  display: block;
  width: 100%;
  height: auto;
  padding: var(--u1);
  border-radius: 6px;
  background: var(--white);
}

.satis-avis__texte {
  margin: 0;
}

.satis-avis__texte p {
  margin: 0;
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.7;
  color: var(--white);
}

.satis-avis__texte p::before { content: "« "; }
.satis-avis__texte p::after { content: " »"; }

.satis-avis__texte .satis-avis__amelioration {
  margin-top: var(--u2);
  padding-left: var(--u2);
  border-left: 2px solid rgb(255 255 255 / 0.18);
  color: var(--muted);
}

.satis-avis__auteur {
  margin: var(--u3) 0 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

.satis-avis__auteur strong {
  font-weight: 700;
  color: var(--white);
}

.satis-avis__fleche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--white);
  cursor: var(--cursor-pointer);
  transition: border-color var(--ease), background var(--ease);
}

.satis-avis__fleche--prec { grid-area: prec; }
.satis-avis__fleche--suiv { grid-area: suiv; }

.satis-avis__fleche[hidden] {
  display: none;
}

.satis-avis__fleche:hover,
.satis-avis__fleche:focus-visible {
  border-color: var(--red);
  background: var(--red);
}

.satis-avis__compte {
  grid-area: compte;
  justify-self: center;
  margin: 0;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   « Voir plus » — le registre se déplie par paquets de trente.
   Trois points, comme sur les commandes qui promettent une suite. Ils sont
   décoratifs (aria-hidden dans le gabarit) : c'est le libellé à côté qui dit
   ce que fait le bouton, jamais la ponctuation seule.
   -------------------------------------------------------------------------- */

.satis-plus {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--u2);
  margin-top: var(--u8);
  padding-top: var(--u6);
  border-top: 1px solid rgb(255 255 255 / 0.12);
}

.satis-plus[hidden] {
  display: none;
}

.satis-plus__bouton {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--u2);
  padding: var(--u3) var(--u8);
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: var(--radius-btn);
  background: transparent;
  font-family: inherit;
  font-size: clamp(0.875rem, 1.05vw, 0.9375rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  cursor: var(--cursor-pointer);
  transition: border-color var(--ease), background var(--ease);
}

.satis-plus__bouton[hidden] {
  display: none;
}

.satis-plus__bouton:hover,
.satis-plus__bouton:focus-visible {
  border-color: var(--red);
  background: var(--red);
}

.satis-plus__points {
  display: flex;
  gap: 6px;
}

.satis-plus__points span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  transition: background var(--ease), transform var(--ease);
}

.satis-plus__bouton:hover .satis-plus__points span,
.satis-plus__bouton:focus-visible .satis-plus__points span {
  background: var(--white);
}

@media (prefers-reduced-motion: no-preference) {
  .satis-plus__bouton:hover .satis-plus__points span:nth-child(1) { transform: translateY(2px); }
  .satis-plus__bouton:hover .satis-plus__points span:nth-child(2) { transform: translateY(3px); }
  .satis-plus__bouton:hover .satis-plus__points span:nth-child(3) { transform: translateY(2px); }
}

.satis-plus__reste {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

.satis-plus__reste:focus {
  outline: none;
}

.satis-plus__reste:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   États vides et note de méthode.
   Ces deux blocs sont les seuls de la page qui se LISENT en continu — le reste
   se parcourt. Ils sont donc composés au corps de lecture du site et non au
   petit corps des légendes : un texte qu'on lit d'un bout à l'autre ne se pose
   pas à 14 px, même quand il est secondaire.
   -------------------------------------------------------------------------- */

.satis-vide {
  margin: var(--u8) 0 0;
  max-width: 56ch;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.7;
  color: var(--muted);
}

.satis-vide--note {
  margin: var(--u6) 0 var(--u6);
  padding: var(--u4);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius-media);
  background: var(--surface);
}

.satis-vide__titre {
  display: block;
  margin-bottom: var(--u3);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.2;
  color: var(--white);
}

.satis-vide a {
  color: var(--white);
  text-decoration: underline;
}

.satis-methode {
  margin-top: var(--u12);
  padding-top: var(--u6);
  border-top: 1px solid rgb(255 255 255 / 0.12);
}

.satis-methode__titre {
  margin: 0 0 var(--u3);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--white);
}

.satis-methode p {
  margin: 0 0 var(--u3);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.7;
  color: var(--muted);
}

@media (max-width: 640px) {
  .satis-tete {
    padding-top: var(--u12);
  }
  .satis-avis {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "liste"
      "commande";
    justify-items: center;
    padding: var(--u3);
  }
  .satis-avis__fleche--prec,
  .satis-avis__fleche--suiv,
  .satis-avis__compte {
    grid-area: commande;
  }
  .satis-avis__fleche--prec { justify-self: start; }
  .satis-avis__fleche--suiv { justify-self: end; }
  .satis-avis__liste {
    justify-self: stretch;
  }
}

/* --------------------------------------------------------------------------
   IMPRESSION
   La page se glisse dans un dossier d'audit : sur papier, elle doit se tenir
   seule et montrer TOUT — le repli des avis est levé par le script
   (beforeprint), et rien ne doit se couper au milieu d'une session.
   -------------------------------------------------------------------------- */
@media print {
  @page {
    size: A4;
    margin: 15mm;
  }
  body,
  .page-satisfaction,
  .satis-tete,
  .satis-liste {
    padding: 0;
    color: #000;
    background: #fff;
  }
  .container,
  .satis-colonne {
    width: auto;
    max-width: none;
  }
  .satis-avis__fleche,
  .satis-avis__compte,
  .satis-plus {
    display: none;
  }
  .satis-titre,
  .satis-annee-bloc__titre,
  .satis-annee__chiffre strong,
  .satis-taux__valeur,
  .satis-avis__texte p,
  .satis-avis__auteur strong,
  .satis-vide__titre,
  .satis-methode__titre {
    color: #000;
  }
  .satis-session__titre {
    color: #8f0000;
  }
  .satis-lead,
  .satis-compte,
  .satis-annee__label,
  .satis-annee__chiffre span,
  .satis-session__date,
  .satis-session__precision,
  .satis-taux__label,
  .satis-taux--effectif .satis-taux__valeur,
  .satis-avis__auteur,
  .satis-avis__amelioration,
  .satis-methode p {
    color: #333;
  }
  .satis-annee,
  .satis-avis,
  .satis-vide--note {
    border: 1px solid #ccc;
    background: #fff;
  }
  .satis-avis__scan {
    padding: 0;
  }
  .satis-session,
  .satis-avis__item {
    break-inside: avoid;
  }
  .satis-annee-bloc__titre,
  .satis-session__titre {
    break-after: avoid;
  }
  .satis-annees {
    display: block;
  }
  .satis-annee {
    margin-bottom: 6mm;
  }
}