/* Matinale (/matinales/ et /matinales/merci/), refondue le 30/09/2026 sur le
   modèle validé par Jean-Marc. Feuille de la famille matinales (DESIGN.md §12),
   importée après la mise en page et après contact.css, dont viennent les
   classes des formulaires et de la page d'état. Jetons seulement, seuils de
   l'accueil seulement, classes préfixées.

   Une section, un squelette (DESIGN.md §14) : l'ouverture en 7/5 avec la photo
   à la hauteur du texte, le concept en 5/7 photo à gauche, le programme en
   étapes, le déroulé en frise à côté d'une photo carrée, l'intervenant en 5/7
   portrait collé, la légitimité en chiffres d'affichage sur l'ardoise, le
   bandeau en photo pleine largeur chevauchée, l'inscription
   en formulaire et encart collé, l'invitation en titre collé et formulaire. */

/* ============================================================== commun */
/* Un libellé posé à même la crème reprend la brume, comme sur le contact ;
   posé sur la brume, il prend la crème. Sans ça, sa boîte disparaît dans le
   fond et le mot paraît décalé du titre. */
.matinales__ouverture .libelle,
.matinales__programme .libelle,
.matinales__intervenant .libelle,
.matinales__inscription .libelle { background: var(--fond-alterne); }
.matinales__concept .libelle,
.matinales__deroule .libelle,
.matinales__invitation .libelle { background: var(--fond-page); }

/* L'étiquette Chivo : terme d'une fiche, titre d'un encart, des références. */
.matinales__terme {
  margin: 0;
  font-family: var(--police-mono);
  font-size: var(--t-etiquette);
  font-weight: var(--graisse-normale);
  line-height: var(--lh-etiquette);
  letter-spacing: var(--ls-etiquette);
  text-transform: uppercase;
  color: var(--texte-attenue);
}

/* La ligne de la date : « Vendredi 20 novembre 2026 • 8h30 • … ». */
.matinales__ligne {
  font-size: var(--t-interface);
  line-height: var(--lh-petit);
  font-weight: var(--graisse-moyenne);
}

/* ============================================================ ouverture */
/* L'entête du site est fixe et hors du flux : l'ouverture réserve sa hauteur,
   comme EnTetePage. */
.matinales__ouverture { padding-top: calc(var(--h-entete) + var(--e7)); }

.matinales__heros {
  display: grid;
  gap: var(--e7);
  margin-top: var(--e7);
}

.matinales__heros-texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e5);
  min-width: 0;
}

/* Le libellé porte une date : il passe à la ligne au lieu de pousser la page
   (47 signes en Chivo ne tiennent pas dans 320 px). */
.matinales__heros .libelle {
  width: auto;
  max-width: 100%;
  height: auto;
  min-height: 32px;
  white-space: normal;
}
.matinales__heros .h1 { max-width: 18ch; }

.matinales__chapo {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}
.matinales__chapo .corps { max-width: 54ch; }

/* Date, lieu, gratuité : entre deux filets, lisibles d'un coup d'œil. */
.matinales__infos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e6);
  width: 100%;
  padding-block: var(--e4);
  border-block: 1px solid var(--filet);
  font-size: var(--t-corps);
  line-height: var(--lh-compact);
}
.matinales__heros .cta { margin-top: var(--e2); }

.matinales__heros-photo { aspect-ratio: 4 / 3; }
.matinales__heros-photo > img { object-position: 62% 40%; }

/* Les ancres de la page, sous un filet : des liens fléchés, joignables sans
   JavaScript. */
.matinales__ancres {
  margin-top: var(--e7);
  padding-top: var(--e5);
  border-top: 1px solid var(--filet);
}
.matinales__ancres ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e6);
}

/* À partir de 1024 : le texte sur sept douzièmes, la photo sur cinq, à la
   hauteur du texte. L'image est posée en absolu : seule la colonne de texte
   donne sa hauteur à la rangée. */
@media (min-width: 1024px) {
  .matinales__heros {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--e8);
  }
  .matinales__heros-photo { aspect-ratio: auto; }
  .matinales__heros-photo > img {
    position: absolute;
    inset: 0;
    object-position: 64% 50%;
  }
}

/* ============================================================== concept */
.matinales__concept-grille {
  display: grid;
  gap: var(--e7);
}
.matinales__concept-texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e5);
  min-width: 0;
}
.matinales__concept-texte .h2 { max-width: 16ch; }

/* L'encart de l'invitation permanente : blanc cassé sur la brume, sans ombre. */
.matinales__encart {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e3);
  margin-top: var(--e3);
  padding: var(--e5);
  border-radius: var(--rayon-carte);
  background: var(--fond-carte);
}
.matinales__encart .matinales__terme { color: var(--accent); }

.matinales__concept-photo { aspect-ratio: 3 / 2; }

@media (min-width: 1024px) {
  .matinales__concept-grille {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--e8);
    align-items: center;
  }
  .matinales__concept-photo { order: -1; }
}

/* ============================================================ programme */
.matinales__programme .etapes { margin-top: var(--e7); }
/* Les titres des thèmes sont longs : ils prennent cinq douzièmes au lieu des
   300 px des étapes de l'accueil. */
@media (min-width: 941px) {
  .matinales__programme .etape { grid-template-columns: 56px minmax(0, 5fr) minmax(0, 7fr); }
}

/* ============================================================== déroulé */
.matinales__deroule-grille {
  display: grid;
  gap: var(--e7);
}
.matinales__deroule-texte {
  display: flex;
  flex-direction: column;
  gap: var(--e7);
  min-width: 0;
}

/* La frise : l'heure au calibre d'un H3, en cuivre, puis le créneau. */
.matinales__creneaux { border-top: 1px solid var(--filet); }
.matinales__creneau {
  display: grid;
  gap: var(--e3);
  padding-block: var(--e5);
  border-bottom: 1px solid var(--filet);
}
.matinales__heure {
  font-size: var(--t-titre-bloc);
  line-height: var(--lh-titre-section);
  letter-spacing: var(--ls-titre-bloc);
  font-weight: var(--graisse-normale);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--accent);
}
.matinales__creneau-corps {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}

.matinales__deroule-photo { aspect-ratio: 1 / 1; }

@media (min-width: 768px) {
  .matinales__creneau {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--e6);
    align-items: baseline;
  }
}
@media (min-width: 1024px) {
  .matinales__deroule-grille {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--e8);
    align-items: end;
  }
}

/* ========================================================== intervenant */
.matinales__intervenant-grille {
  display: grid;
  gap: var(--e7);
}
.matinales__portrait { aspect-ratio: 1 / 1; }
.matinales__portrait > img {
  object-position: 72% 30%;
  filter: grayscale(var(--photo-portrait-gris)) saturate(var(--photo-portrait-satur)) contrast(var(--photo-portrait-contraste));
}

.matinales__intervenant-texte {
  display: flex;
  flex-direction: column;
  gap: var(--e6);
  min-width: 0;
}
.matinales__intervenant-sous { color: var(--texte-attenue); }

/* Les trois repères de Jean-Marc en fiche : le terme en étiquette, le texte
   à sa droite dès 641 px. */
.matinales__jalons { margin: 0; border-top: 1px solid var(--filet); }
.matinales__jalon {
  display: grid;
  gap: var(--e2);
  padding-block: var(--e4);
  border-bottom: 1px solid var(--filet);
}
.matinales__jalon dd { margin: 0; }

.matinales__references {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}
.matinales__noms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e5);
  font-size: var(--t-titre-bloc);
  line-height: var(--lh-titre-section);
  letter-spacing: var(--ls-titre-bloc);
}

@media (min-width: 641px) {
  .matinales__jalon {
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
    column-gap: var(--e6);
    align-items: baseline;
  }
}
@media (min-width: 1024px) {
  .matinales__intervenant-grille {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--e8);
    align-items: start;
  }
  .matinales__portrait {
    position: sticky;
    top: var(--haut-colle);
    aspect-ratio: 4 / 5;
  }
}

/* =========================================================== légitimité */
/* La seule section foncée de la page (DESIGN.md §1) : trois chiffres en
   taille d'affichage, une fois et demie le chiffre clé, qui roulent comme les
   repères de l'accueil. Le chiffre avant sa légende, à l'œil ; la légende
   avant le chiffre, à la lecture. */
.matinales__legitimite-grille {
  display: grid;
  gap: var(--e7);
}
.matinales__legitimite .h2 { max-width: 18ch; }

.matinales__chiffres { margin: 0; border-top: 1px solid var(--filet); }
.matinales__chiffre {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--e2);
  padding-block: var(--e5);
  border-bottom: 1px solid var(--filet);
}
.matinales__chiffre-legende {
  font-family: var(--police-mono);
  font-size: var(--t-etiquette);
  font-weight: var(--graisse-normale);
  line-height: var(--lh-etiquette);
  letter-spacing: var(--ls-etiquette);
  text-transform: uppercase;
  color: var(--texte-attenue);
}
/* `flex-end` et non `baseline` : une colonne du rouleau rogne, elle n'a pas
   la ligne de base d'un texte (même remède que les repères de l'accueil). */
.matinales__chiffre-valeur {
  margin: 0;
  display: flex;
  align-items: flex-end;
  font-size: calc(var(--t-chiffre-cle) * 1.5);
  line-height: var(--lh-plein);
  letter-spacing: var(--ls-affiche);
  font-weight: var(--graisse-normale);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-wrap: wrap;
  column-gap: var(--e3);
}
.matinales__chiffre-nombre {
  display: flex;
  align-items: flex-end;
}
.matinales__chiffre-signe {
  letter-spacing: var(--ls-signe);
  color: var(--accent);
}
/* L'unité (ans, clients, accords, / an / manager), ajoutée le 05/10 : en
   corps d'énoncé au pied du chiffre. Sur téléphone, « / an / manager » passe
   sous les 80 000 € au lieu de déborder, calé sur le bord du chiffre. */
.matinales__chiffre-unite {
  padding-bottom: var(--e2);
  font-size: var(--t-enonce);
  line-height: var(--lh-enonce);
  letter-spacing: normal;
  font-variant-numeric: normal;
}

@media (min-width: 768px) {
  .matinales__chiffre {
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: baseline;
    column-gap: var(--e6);
  }
  /* Le chiffre et son unité tiennent sur une ligne, la légende prend le reste. */
  .matinales__chiffre-valeur { flex: none; flex-wrap: nowrap; }
}
@media (min-width: 1024px) {
  .matinales__legitimite-grille {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--e8);
    align-items: start;
  }
}

/* ============================================================== bandeau */
/* La photo en pleine largeur, le panneau qui la chevauche dès 768 px. Sous
   768, le panneau passe dessous, à fond perdu comme tout panneau. */
.matinales__bandeau-photo { aspect-ratio: 4 / 3; }
.matinales__bandeau-panneau {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e5);
}
.matinales__bandeau-panneau .h2 { max-width: 20ch; }
.matinales__bandeau-panneau .cta { margin-top: var(--e2); }

@media (min-width: 768px) {
  .matinales__bandeau-photo { aspect-ratio: 1400 / 594; }
  .matinales__bandeau-panneau {
    margin: calc(var(--e8) * -1) var(--e6) 0;
  }
}
@media (min-width: 1024px) {
  .matinales__bandeau-panneau {
    width: calc(100% * 7 / 12);
    margin: calc(var(--e9) * -1) var(--e7) 0 auto;
  }
}

/* ========================================================== inscription */
.matinales__inscription-grille {
  display: grid;
  gap: var(--e6);
  margin-top: var(--e7);
}

/* Ce que la matinée apporte : brume sur la crème, le losange du libellé en
   puce, la date sous un filet. */
.matinales__gains {
  display: flex;
  flex-direction: column;
  gap: var(--e5);
}
.matinales__gains-liste {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}
.matinales__gains-liste li {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  font-size: var(--t-corps);
  line-height: var(--lh-compact);
}
.matinales__gains-picto {
  flex: 0 0 auto;
  display: inline-flex;
  width: var(--e4);
  height: var(--e4);
  margin-top: var(--e1);
  color: var(--accent);
}
.matinales__gains-picto svg { width: 100%; height: 100%; }
.matinales__gains .matinales__ligne {
  padding-top: var(--e4);
  border-top: 1px solid var(--filet);
}

@media (min-width: 1024px) {
  .matinales__inscription-grille {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--e7);
    align-items: start;
  }
  .matinales__gains { position: sticky; top: var(--haut-colle); }
}

/* =========================================================== invitation */
.matinales__invitation-grille {
  display: grid;
  gap: var(--e7);
}
.matinales__invitation-tete .h2 { max-width: 16ch; }

@media (min-width: 1024px) {
  .matinales__invitation-grille {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--e8);
    align-items: start;
  }
  .matinales__invitation-tete { position: sticky; top: var(--haut-colle); }
}

/* ========================================================= formulaires */
/* Les classes du formulaire de /contact/ (contact.css) ; ici, ce qu'il n'a
   pas : les champs pleine largeur, la mention « (facultatif) », la case de
   consentement et le bouton au libellé long. */
@media (min-width: 641px) {
  .matinales__champ--large { grid-column: 1 / -1; }
}
.matinales__facultatif {
  text-transform: none;
  color: var(--texte-attenue);
}

.matinales__case {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  font-size: var(--t-interface);
  line-height: var(--lh-petit);
  cursor: pointer;
}
.matinales__case-choix {
  flex: 0 0 auto;
  width: calc(var(--e4) + var(--e1));
  height: calc(var(--e4) + var(--e1));
  margin: calc(var(--e1) / 2) 0 0;
  accent-color: var(--action);
  cursor: pointer;
}
.matinales__case-choix:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.matinales__case-choix[aria-invalid="true"] {
  outline: 1px solid var(--texte);
  outline-offset: 2px;
}
.matinales__mention {
  font-size: var(--t-interface);
  line-height: var(--lh-petit);
  color: var(--texte-attenue);
}
.matinales__mention a { color: var(--accent); }

/* Le bouton sans roulement de lettres, comme la réassurance de /solutions/,
   pour les deux libellés longs de la page (le héros et l'invitation
   permanente) : il passe à la ligne entre deux mots quand la place manque
   (mesuré : « Réserver ma place gratuitement » est rogné à 360 px sur une
   ligne), et change de couleur au survol comme .cta__mot. */
.matinales__bouton-long { height: auto; min-height: 60px; }
.matinales__bouton-mot {
  flex: 1 1 auto;
  min-width: 0;
  padding-block: var(--e2);
  line-height: var(--lh-compact);
  text-align: left;
  transition: color var(--duree-nappe) var(--courbe-geste);
}
.cta:hover .matinales__bouton-mot,
.cta:focus-visible .matinales__bouton-mot { color: var(--mot-survol); }

/* ========================================================= page d'état */
/* L'invitation permanente, envoyée sans JavaScript : la fonction renvoie à
   l'ancre #invitation, qui montre son bloc et masque celui de l'inscription,
   comme #refus (contact.css). */
.matinales__etat-invitation { display: none; scroll-margin-top: var(--decalage-ancre); }
.matinales__etat-invitation:target { display: flex; }
.contact__etat-blocs:has(.matinales__etat-invitation:target) .contact__etat-bloc--ok { display: none; }