/* ==========================================================================
   Sponsors & Partenariats — CE QUI APPARTIENT À CETTE SEULE PAGE
   Complément de css/design-system.css, qui fait foi. Ce fichier ne redéfinit
   RIEN de ce que le système porte déjà : .conteneur, .section, .btn, .pied,
   .lien-nav, .visuel--avatar, .texture-motif et .texture-grain viennent du DS.

   Registre INSTITUTIONNEL : rythme 64 · corps 15 · largeur 800.
   Aucune alternance de fond, aucune ombre, aucun halo.

   RÈGLE TENUE DANS TOUT LE FICHIER : aucune valeur littérale, sauf DEUX,
   signalées en clair là où elles tombent (§ 6 et § 15). Tout le reste nomme
   un token de css/design-system.css.

   Les blocs numérotés sont les TROUS du design system que cette page révèle.
   Chacun est un composant que le DS ne porte pas encore. Si l'un remonte un
   jour dans le DS, son bloc disparaît d'ici.

   Sommaire
     § 1   Bandeau d'identité
     § 2   Étiquette technique
     § 3   Titre de rubrique
     § 4   Bloc à étiquette
     § 5   Chapô
     § 6   Signature (Byline)
     § 7   Ligne d'adresse
     § 8   Tableau d'audience (AudienceTable)
     § 9   Liste de mots en ligne
     § 10  Grille de marques
     § 11  Encadré en relief
     § 12  Liste de formats
     § 13  Listes du processus
     § 14  Étapes numérotées
     § 15  Marqueur « à compléter »
     § 16  Utilitaires
     § 17  Pied sans dégagement
     § 18  Sous la rupture mobile
   ========================================================================== */


/* ==========================================================================
   § 1 · BANDEAU D'IDENTITÉ
   Ce n'est PAS .entete : .entete est collante, avec un état .est-defile et un
   comportement JS. Ici, aucun comportement — un simple filet de séparation.
   Le registre institutionnel n'a aucune action à garder à portée de pouce.
   ========================================================================== */

.bandeau {
  padding-block: var(--esp-lg);
  border-bottom: var(--epaisseur-filet) solid var(--couleur-filet);
}

.bandeau__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--esp-lg);
}

.bandeau__marque {
  display: flex;
  align-items: center;
  gap: var(--esp-sm);
}

/* Le DS pose img { height: auto } comme garde-fou global. Un logo de bandeau
   est l'exception assumée : c'est sa HAUTEUR qui est le gabarit. */
.bandeau__logo {
  height: var(--logo-hauteur-entete);
  width: auto;
}

.bandeau__nom {
  font-family: var(--police-titre);
  font-weight: var(--graisse-forte);
  font-size: var(--taille-titre-xs);
  letter-spacing: var(--approche-titre-fine);
  color: var(--couleur-texte-principal);
}

/* La seconde marque est séparée par un filet vertical, pas par un écart. */
.bandeau__second {
  display: flex;
  align-items: center;
  gap: var(--esp-lg);
  padding-left: var(--esp-lg);
  border-left: var(--epaisseur-filet) solid var(--couleur-filet);
}

.bandeau__contact {
  margin-left: auto;
  font-size: var(--taille-dense);
}


/* ==========================================================================
   § 2 · ÉTIQUETTE TECHNIQUE
   Le DS a .entete-section__etiquette, mais elle est en --couleur-accent, en
   --taille-micro et en --approche-capitales-lg : c'est l'étiquette du registre
   VENTE. Celle-ci est secondaire et discrète, elle nomme une rubrique.
   Les capitales sont posées en CSS, jamais écrites dans le HTML.
   ========================================================================== */

.etiquette {
  font-family: var(--police-technique);
  font-size: var(--taille-mention);
  letter-spacing: var(--approche-capitales-md);
  text-transform: uppercase;
  color: var(--couleur-texte-secondaire);
  margin: 0 0 var(--esp-md);
}

/* Dans une grille ou une ligne flex, c'est le gap qui porte l'écart. */
.bloc > .etiquette,
.format__tete .etiquette,
.ligne-adresse .etiquette {
  margin-bottom: 0;
}


/* ==========================================================================
   § 3 · TITRE DE RUBRIQUE
   Le filet de marque est ce qui sépare les rubriques dans un registre qui
   n'a droit ni à l'alternance de fond, ni à la carte.
   ========================================================================== */

.titre-rubrique {
  border-top: var(--epaisseur-filet-marque) solid var(--couleur-filet-marque);
  padding-top: var(--esp-lg);
}

/* Les rubriques s'enchaînent sur le seul filet de marque : le rythme de
   section ne joue qu'une fois, en haut de page. */
.section--suite { padding-top: 0; }


/* ==========================================================================
   § 4 · BLOC À ÉTIQUETTE
   Étiquette au-dessus, contenu en dessous, séparés par un filet. C'est la
   maille de toute la page hors formats.
   ========================================================================== */

.bloc {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-sm);
  align-items: start;
}

.bloc--filet-haut {
  padding-top: var(--esp-xl);
  border-top: var(--epaisseur-filet) solid var(--couleur-filet);
}

.bloc--filet-bas {
  padding-bottom: var(--esp-xl);
  border-bottom: var(--epaisseur-filet) solid var(--couleur-filet);
}


/* ==========================================================================
   § 5 · CHAPÔ
   Le seul paragraphe de la page en texte principal plutôt qu'en secondaire.
   ========================================================================== */

.chapo { color: var(--couleur-texte-principal); }


/* ==========================================================================
   § 6 · SIGNATURE — le composant Byline du DS distant.
   ⚠ SEULE VALEUR LITTÉRALE de ce fichier avec § 15 : 48px pour l'avatar.
   Le DS n'a pas de token de gabarit d'avatar — .visuel--avatar donne le
   rayon, le ratio et le recadrage, jamais la taille. Le composant Byline
   distant écrit 48 en dur lui aussi. C'est un trou du DS, pas un écart.
   ========================================================================== */

.signature {
  display: flex;
  align-items: center;
  gap: var(--esp-md);
  padding-top: var(--esp-lg);
  border-top: var(--epaisseur-filet) solid var(--couleur-filet);
}

.signature__photo {
  width: 48px;   /* ⚠ littéral · pas de token de gabarit d'avatar dans le DS */
  height: 48px;  /* ⚠ littéral · idem                                        */
  flex: none;
}

.signature__nom {
  font-size: var(--taille-dense);
  font-weight: var(--graisse-semi);
  line-height: var(--interligne-ui);
  color: var(--couleur-texte-principal);
}

.signature__role {
  font-size: var(--taille-mention);
  line-height: var(--interligne-ui);
  color: var(--couleur-texte-secondaire);
}


/* ==========================================================================
   § 7 · LIGNE D'ADRESSE
   L'adresse de contact, en corps de titre, sur la même ligne que son
   étiquette. C'est le seul endroit de la présentation qui porte l'accent —
   et c'est un lien, donc conforme à la règle du registre.
   ========================================================================== */

.ligne-adresse {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--esp-sm) var(--esp-xl);
  margin-top: var(--esp-xl);
  padding-top: var(--esp-xl);
  border-top: var(--epaisseur-filet) solid var(--couleur-filet);
}

.ligne-adresse__valeur {
  font-family: var(--police-titre);
  font-weight: var(--graisse-forte);
  font-size: var(--taille-titre-xs);
  letter-spacing: var(--approche-titre-fine);
}


/* ==========================================================================
   § 8 · TABLEAU D'AUDIENCE — le composant AudienceTable du DS distant.
   Relief 1 sans bordure : le DS interdit de cumuler bordure ET relief.
   AUCUNE barre de proportion, AUCUNE ligne de total — toutes les lignes ont
   le même poids typographique, c'est la règle du composant.
   La date de relevé est dans la note, jamais implicite.
   ========================================================================== */

.audience {
  background: var(--surface-relief-1);
  border-radius: var(--rayon-carte);
  overflow: hidden;
  margin-bottom: var(--esp-xl);
}

.audience__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-xl);
  padding: var(--esp-md) var(--esp-2xl);
  border-bottom: var(--epaisseur-filet) solid var(--couleur-filet);
}

.audience__libelle {
  font-family: var(--police-technique);
  font-size: var(--taille-micro);
  letter-spacing: var(--approche-capitales-md);
  text-transform: uppercase;
  color: var(--couleur-accent);
}

.audience__valeur {
  font-family: var(--police-titre);
  font-weight: var(--graisse-forte);
  font-size: var(--taille-titre-sm);
  line-height: var(--interligne-titre);
  letter-spacing: var(--approche-titre);
  color: var(--couleur-texte-principal);
}

/* LA LIGNE DE TOTAL — c'est le chiffre qu'on retient, il doit se détacher des
   cinq lignes de ventilation sans les écraser : un pas de fond en plus, le
   libellé qui passe au blanc, et la valeur qui monte de 24 à 40 px. Pas de
   filet bas, c'est la dernière ligne du tableau. */
.audience__ligne--total {
  background: var(--surface-relief-2);
  border-bottom: 0;
}

.audience__ligne--total .audience__libelle {
  color: var(--couleur-texte-principal);
}

.audience__ligne--total .audience__valeur {
  font-size: var(--taille-titre-xl);
  line-height: var(--interligne-titre-xl);
}

/* La note de format — même rôle que .marqueur, mais ce n'est PAS un manque à
   combler : c'est une précision de montage qui restera. */
.format__note {
  margin: 0;
  font-size: var(--taille-dense);
  color: var(--couleur-texte-secondaire);
}

.audience__note {
  padding: var(--esp-sm) var(--esp-2xl);
  margin: 0;
  font-family: var(--police-technique);
  font-size: var(--taille-micro);
  letter-spacing: var(--approche-capitales-md);
  text-transform: uppercase;
  color: var(--couleur-texte-secondaire);
}

.note-methode { margin-top: var(--esp-xl); }


/* ==========================================================================
   § 9 · LISTE DE MOTS EN LIGNE
   Des noms qui se lisent d'un coup d'œil, pas une énumération à puces.
   Le corps est --taille-corps (17px) et non le corps institutionnel (15px) :
   ces listes SONT le contenu de leur bloc, pas son commentaire.
   ========================================================================== */

.liste-mots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-sm) var(--esp-xl);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--police-texte);
  font-weight: var(--graisse-semi);
  font-size: var(--taille-corps);
  line-height: var(--interligne-ui);
  color: var(--couleur-texte-principal);
}

.liste-mots--marge { margin-bottom: var(--esp-md); }


/* ==========================================================================
   § 10 · GRILLE DE MARQUES
   Des noms nus, en texte secondaire : une liste de références, pas un mur de
   logos. Aucun logo tiers n'est hébergé, aucune requête réseau ajoutée.
   ========================================================================== */

.grille-marques {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--esp-sm) var(--esp-xl);
  margin: 0;
  padding: var(--esp-xl) 0 0;
  border-top: var(--epaisseur-filet) solid var(--couleur-filet);
  list-style: none;
  font-size: var(--taille-dense);
  line-height: var(--interligne-ui);
  color: var(--couleur-texte-secondaire);
}


/* ==========================================================================
   § 11 · ENCADRÉ EN RELIEF
   Le seul paragraphe de la page qui sort du flux. Relief seul, sans bordure.
   ========================================================================== */

.encadre {
  background: var(--surface-relief-1);
  border-radius: var(--rayon-carte);
  padding: var(--role-padding-carte);
  font-weight: var(--graisse-moyenne);
  color: var(--couleur-texte-principal);
}


/* ==========================================================================
   § 12 · LISTE DE FORMATS
   Six entrées séparées par un filet. Le titre reste en texte principal : le
   registre institutionnel réserve l'accent aux liens.
   ========================================================================== */

.formats { border-top: var(--epaisseur-filet) solid var(--couleur-filet); }

.format {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-sm);
  align-items: start;
  padding-block: var(--esp-3xl);
  border-bottom: var(--epaisseur-filet) solid var(--couleur-filet);
}

.format__tete {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--esp-sm) var(--esp-md);
}

.format__titre {
  flex: 1 1 var(--largeur-element);
  margin-bottom: 0;
  font-size: var(--taille-titre-xs);
  letter-spacing: var(--approche-titre-fine);
  color: var(--couleur-texte-principal);
}

.format__livrable {
  margin-bottom: 0;
  padding-top: var(--esp-sm);
  border-top: var(--epaisseur-filet) solid var(--couleur-filet);
}


/* ==========================================================================
   § 13 · LISTES DU PROCESSUS
   ========================================================================== */

.liste-lignes {
  display: flex;
  flex-direction: column;
  gap: var(--esp-sm);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--couleur-texte-secondaire);
}

.grille-delais {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-sm) var(--esp-xl);
  margin: 0 0 var(--esp-md);
  padding: 0;
  list-style: none;
  color: var(--couleur-texte-secondaire);
}


/* ==========================================================================
   § 14 · ÉTAPES NUMÉROTÉES
   Le numéro est un compteur CSS, pas un texte saisi : la liste reste un <ol>
   pour les technologies d'assistance, et renuméroter ne touche pas au HTML.

   ⚠ Le contenu de chaque <li> DOIT être enveloppé dans un <span>. Un <a> ou
   tout autre élément en ligne posé nu dans le <li> devient un élément de
   grille de plus : il retombe sur une ligne implicite et étire la colonne du
   numéro à sa propre largeur. Mesuré ici le 23/08/2026 sur l'étape 01 —
   195,5 px de colonne au lieu de 14,3 px. Le <span> garantit deux éléments.
   ========================================================================== */

.etapes {
  display: flex;
  flex-direction: column;
  gap: var(--esp-sm);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}

.etapes > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--esp-md);
  counter-increment: etape;
  color: var(--couleur-texte-secondaire);
}

.etapes > li::before {
  content: counter(etape, decimal-leading-zero);
  font-family: var(--police-technique);
  font-size: var(--taille-mention);
  color: var(--couleur-texte-secondaire);
}


/* ==========================================================================
   § 15 · MARQUEUR « À COMPLÉTER »
   Une information ABSENTE de stats-audience.md se signale, elle ne se comble
   pas par un nombre plausible. Le trait interrompu dit « inachevé » sans
   introduire de couleur : le registre réserve vert et rouge aux états de
   formulaire, il n'y a donc pas de rouge d'alerte disponible.
   ⚠ SECONDE VALEUR LITTÉRALE du fichier : le style de trait « dashed » n'a
   pas de token — le DS ne connaît que des filets pleins.
   CE BLOC EST PROVISOIRE. Il disparaît le jour où le chiffre existe.
   ========================================================================== */

.marqueur {
  margin: var(--esp-md) 0 0;
  padding: var(--esp-sm) var(--esp-md);
  border: var(--epaisseur-filet) dashed var(--couleur-accent);
  border-radius: var(--rayon-interne);
  font-family: var(--police-technique);
  font-size: var(--taille-micro);
  letter-spacing: var(--approche-capitales-md);
  text-transform: uppercase;
  color: var(--couleur-accent);
}


/* ==========================================================================
   § 16 · UTILITAIRES
   ========================================================================== */

/* Dernier paragraphe d'un bloc : le padding du bloc porte déjà l'écart. */
.sans-marge { margin-bottom: 0; }


/* ==========================================================================
   § 17 · PIED SANS DÉGAGEMENT
   Le DS réserve --rythme-pied-degagement (120px) au bandeau collant du
   registre vente. Cette page n'en a pas.
   ⚠ MÊME TROU que la page IAka Daily (§ 5 de css/iaka-daily.css) : deux pages
   sur deux ont eu besoin de cette variante. Elle a sa place dans le DS.
   ========================================================================== */

.pied--sans-degagement { padding-bottom: var(--esp-4xl); }


/* ==========================================================================
   § 18 · SOUS LA RUPTURE MOBILE — 768px, la valeur de --rupture-mobile.
   Le DS écrit ses @media en dur pour la même raison : une media query
   n'accepte pas var().
   ========================================================================== */

@media (max-width: 768px) {

  /* Le filet vertical n'a plus de sens quand les marques passent l'une sous
     l'autre : il deviendrait un trait pendu à gauche. */
  .bandeau__second {
    padding-left: 0;
    border-left: 0;
  }

  .bandeau__contact { margin-left: 0; }

  /* 20 noms sur 4 colonnes deviennent illisibles sous 768px. */
  .grille-marques { grid-template-columns: repeat(2, 1fr); }

  .grille-delais { grid-template-columns: 1fr; }
}