/* Marlis — page « Découvrir ».

   Toutes les règles sont portées par `.ms.decouvrir` : elles ne peuvent
   atteindre ni l'application (hors du conteneur .ms), ni les autres pages
   publiques. Les jetons viennent de `accueil.css` (--ac-*) et de `site.css`
   (--display, --sans) : aucune couleur nouvelle, sauf la terre cuite claire
   des étiquettes d'opportunité, reprise de l'état « pré-sélection » de
   l'aperçu du bureau (accueil.css, `.e-select`).

   La page porte aussi `accueil` : c'est ce qui réaccorde les sept jetons de
   site.css (le pied de page se réchauffe avec le reste) et pose les règles de
   focus et de mouvement réduit.

   Sommaire
   1. Primitives : titres, textes, actions
   2. Héros
   3. Écosystème (quatre espaces)
   4. Parcours connecté (la frise)
   5. Bandes manifeste et communauté
   6. Opportunités réelles
   7. Aperçu de l'espace artiste
   8. Respiration : réglages par largeur d'écran
   9. Apparition au défilement
*/

/* ================= 1. PRIMITIVES ================= */
.ms.decouvrir {
  --dc-terre: #a4562b;
  --dc-terre-fond: #f7e6dd;
}
.ms.decouvrir main {
  display: block;
}
.ms.decouvrir .dc-oeil {
  letter-spacing: 0.2em;
  margin-bottom: 18px;
}
.ms.decouvrir .dc-h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(38px, 5.1vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ac-encre);
  text-wrap: balance;
}
.ms.decouvrir .dc-h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 3.3vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--ac-encre);
  text-wrap: balance;
}
.ms.decouvrir .dc-chapo {
  margin-top: 24px;
  max-width: 44ch;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ac-encre-2);
}
.ms.decouvrir .dc-corps {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ac-encre-2);
  max-width: 50ch;
}
.ms.decouvrir .dc-intro {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ac-encre-2);
  max-width: 46ch;
}
.ms.decouvrir .dc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 30px;
}
.ms.decouvrir .dc-actions-col {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
/* Les blocs de texte des sections à deux colonnes : tout s'empile à gauche,
   au même pas ; le surtitre garde alors sa marge dans le pas commun. */
.ms.decouvrir .dc-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
}
.ms.decouvrir .dc-txt .dc-oeil {
  margin-bottom: 0;
}
.ms.decouvrir .dc-txt .dc-actions {
  margin-top: 8px;
}
.ms.decouvrir .dc-section {
  padding: 64px 0;
}
.ms.decouvrir .dc-deux {
  display: grid;
  gap: 40px;
  align-items: center;
}
.ms.decouvrir .dc-deux > * {
  min-width: 0;
}
/* Le contour de focus des liens et boutons de la page. Les règles groupées
   d'accueil.css couvrent `.ac-b` et `.ms.accueil a` ; les cartes-liens ont
   la leur plus bas. */
.ms.decouvrir a:focus-visible,
.ms.decouvrir button:focus-visible {
  outline: 2px solid var(--ac-vert);
  outline-offset: 3px;
}

/* ========================= 2. HÉROS ========================= */
.ms.decouvrir .dc-heros {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--ac-fond);
}
.ms.decouvrir .dc-heros-txt {
  width: 100%;
  max-width: 1288px;
  margin: 0 auto;
  padding: 40px 24px 36px;
}
.ms.decouvrir .dc-heros-im {
  position: relative;
  /* La hauteur de l'image est celle du héros de Lieux (`lieux.css`,
     `.lx-heros-im`) : 52 vw, entre 260 et 400 px. */
  min-height: 260px;
  height: 52vw;
  max-height: 400px;
  background: var(--ac-sable);
  overflow: hidden;
  /* LE FONDU, comme sur le héros de l'accueil : le visuel se fond dans le
     fond de sa section au lieu de s'arrêter sur une arête nette. Le masque
     porte sur le conteneur, pas sur l'<img>, et rend les pixels transparents
     sans peindre de couleur : c'est le vrai fond de la section qui apparaît.
     Empilé sous le texte, le fondu part du haut. Safari ne connaît que la
     version préfixée. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 26%);
}
.ms.decouvrir .dc-heros-im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

/* ================= 3. ÉCOSYSTÈME : LES QUATRE ESPACES ================= */
.ms.decouvrir .dc-ecosysteme {
  background: var(--ac-blanc);
  border-top: 1px solid var(--ac-bord);
  border-bottom: 1px solid var(--ac-bord);
}
.ms.decouvrir .dc-tete-deux {
  display: grid;
  gap: 22px;
}
.ms.decouvrir .dc-espaces {
  list-style: none;
  display: grid;
  gap: 40px 28px;
  margin-top: 48px;
}
.ms.decouvrir .dc-espace {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  height: 100%;
  text-decoration: none;
  color: inherit;
  border-radius: var(--ac-r-s);
}
.ms.decouvrir .dc-espace-num {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ac-encre);
}
.ms.decouvrir .dc-espace-titre {
  font-family: var(--display);
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ac-encre);
  margin-top: -2px;
}
.ms.decouvrir .dc-espace-txt {
  font-size: 14px;
  line-height: 1.62;
  color: var(--ac-encre-2);
  flex: 1;
}
.ms.decouvrir .dc-espace-im {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ac-sable);
  margin-top: 8px;
  border-radius: var(--ac-r-s);
}
.ms.decouvrir .dc-espace-im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.ms.decouvrir .dc-espace:hover .dc-espace-im img {
  transform: scale(1.03);
}
.ms.decouvrir .dc-espace .ac-lien {
  margin-top: 6px;
}
.ms.decouvrir .dc-espace:hover .ac-lien {
  border-bottom-color: var(--ac-vert);
}
.ms.decouvrir .dc-espace:hover .ac-lien svg {
  transform: translateX(3px);
}

/* ================= 4. PARCOURS CONNECTÉ : LA FRISE ================= */
.ms.decouvrir .dc-frise {
  list-style: none;
  display: grid;
  gap: 12px;
}
.ms.decouvrir .dc-etape {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 3px;
  align-items: center;
  padding: 16px 18px;
  background: var(--ac-blanc);
  border: 1px solid var(--ac-bord);
  border-radius: var(--ac-r-s);
}
.ms.decouvrir .dc-etape-ico {
  grid-row: 1 / 3;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ac-vert);
  border: 1px solid var(--ac-bord);
  border-radius: var(--ac-r-s);
  background: var(--ac-fond);
}
.ms.decouvrir .dc-etape-titre {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ac-encre);
}
.ms.decouvrir .dc-etape-txt {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ac-encre-2);
}
.ms.decouvrir .dc-etape-fleche {
  display: none;
  color: var(--ac-encre-3);
}

/* ================= 5. BANDES MANIFESTE ET COMMUNAUTÉ ================= */
.ms.decouvrir .dc-bande {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--ac-fond-2);
  border-top: 1px solid var(--ac-bord);
  border-bottom: 1px solid var(--ac-bord);
}
.ms.decouvrir .dc-bande-fin {
  background: var(--ac-fond);
  border-bottom: 0;
}
.ms.decouvrir .dc-bande-txt {
  padding: 56px 24px;
  min-width: 0;
}
.ms.decouvrir .dc-bande-in {
  max-width: 600px;
}
.ms.decouvrir .dc-bande-in .dc-corps {
  margin-top: 20px;
}
.ms.decouvrir .dc-bande-im {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--ac-sable);
  overflow: hidden;
  min-width: 0;
  /* Le même fondu que le héros : empilée sous le texte, l'image se fond
     dans le fond de sa bande par le haut. Le masque porte sur le conteneur
     et ne peint rien : c'est le vrai fond de la section qui apparaît. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 26%);
}
.ms.decouvrir .dc-bande-im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

/* ================= 6. OPPORTUNITÉS RÉELLES ================= */
.ms.decouvrir .dc-tete-lien {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 40px;
}
.ms.decouvrir .dc-tete-lien > div {
  max-width: 640px;
  min-width: 0;
}
.ms.decouvrir .dc-tete-lien .dc-corps {
  margin-top: 18px;
}
.ms.decouvrir .dc-appels {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 44px;
}
.ms.decouvrir .dc-appel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ac-blanc);
  border: 1px solid var(--ac-bord);
  border-radius: var(--ac-r-s);
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.ms.decouvrir .dc-appel:hover {
  border-color: var(--ac-bord-fort);
  box-shadow: var(--ac-ombre);
}
.ms.decouvrir .dc-appel-im {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--ac-sable);
  overflow: hidden;
}
.ms.decouvrir .dc-appel-im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ms.decouvrir .dc-appel-corps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 14px 14px;
  flex: 1;
  min-width: 0;
}
.ms.decouvrir .dc-appel-titre {
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ac-encre);
  /* Un titre long ne fait pas déborder la carte : trois lignes, puis des
     points de suspension. Le titre entier est sur la fiche. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.ms.decouvrir .dc-appel-lien {
  color: inherit;
  text-decoration: none;
}
/* La carte entière est cliquable : le seul lien s'étend sur elle. Le contour
   de focus suit la même surface. */
.ms.decouvrir .dc-appel-lien::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--ac-r-s);
}
.ms.decouvrir .dc-appel-lien:focus-visible {
  outline: none;
}
.ms.decouvrir .dc-appel-lien:focus-visible::after {
  outline: 2px solid var(--ac-vert);
  outline-offset: 2px;
}
.ms.decouvrir .dc-appel-ou {
  font-size: 13.5px;
  color: var(--ac-encre-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ms.decouvrir .dc-appel-quand {
  font-size: 12px;
  color: var(--ac-encre-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ms.decouvrir .dc-appel-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}
.ms.decouvrir .dc-badge {
  display: inline-block;
  max-width: 100%;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--dc-terre);
  background: var(--dc-terre-fond);
  padding: 4px 8px;
  border-radius: 3px;
  text-align: left;
}
.ms.decouvrir .dc-appel-fleche {
  flex-shrink: 0;
  color: var(--ac-encre-2);
  transition: transform 0.18s ease;
}
.ms.decouvrir .dc-appel:hover .dc-appel-fleche {
  transform: translateX(3px);
  color: var(--ac-vert);
}
/* Les cartes fantômes du chargement. */
.ms.decouvrir .dc-appel-fantome {
  animation: dc-pulse 1.4s ease-in-out infinite;
}
.ms.decouvrir .dc-fant {
  display: block;
  height: 12px;
  border-radius: 3px;
  background: var(--ac-fond-2);
}
.ms.decouvrir .dc-fant-titre {
  height: 18px;
  width: 78%;
}
.ms.decouvrir .dc-fant-ligne {
  width: 46%;
}
.ms.decouvrir .dc-fant-badge {
  height: 20px;
  width: 84px;
  margin-top: 14px;
}
@keyframes dc-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}
.ms.decouvrir .dc-vide {
  margin-top: 40px;
  padding: 26px 28px;
  border: 1px dashed var(--ac-bord-fort);
  border-radius: var(--ac-r-s);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ac-encre-2);
  max-width: 62ch;
}
.ms.decouvrir .dc-vide a {
  color: var(--ac-vert);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ================= 7. APERÇU DE L'ESPACE ARTISTE ================= */
.ms.decouvrir .dc-espace-section {
  background: var(--ac-blanc);
  border-top: 1px solid var(--ac-bord);
  border-bottom: 1px solid var(--ac-bord);
}
.ms.decouvrir .dc-bureau {
  position: relative;
  min-width: 0;
}
.ms.decouvrir .dc-bureau-legende {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac-encre-3);
  background: var(--ac-fond-2);
  border: 1px solid var(--ac-bord);
  border-radius: 999px;
  padding: 3px 12px;
}
.ms.decouvrir .dc-bureau-defile {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--ac-r);
  border: 1px solid var(--ac-bord);
  box-shadow: var(--ac-ombre-forte);
  background: var(--ac-blanc);
}
.ms.decouvrir .dc-bureau-cadre {
  min-width: 680px;
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  border-radius: var(--ac-r);
  overflow: hidden;
}
.ms.decouvrir .dc-rail {
  background: var(--ac-vert);
  color: rgba(246, 243, 236, 0.82);
  padding: 16px 10px 18px;
}
.ms.decouvrir .dc-rail-logo {
  display: block;
  height: 24px;
  width: auto;
  object-fit: contain;
  margin: 0 6px 18px;
}
.ms.decouvrir .dc-rail ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ms.decouvrir .dc-rail li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  line-height: 1.2;
  padding: 6px 8px;
  border-radius: 4px;
}
.ms.decouvrir .dc-rail li.on {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  font-weight: 500;
}
.ms.decouvrir .dc-rail li svg {
  flex-shrink: 0;
  opacity: 0.85;
}
.ms.decouvrir .dc-ecran {
  min-width: 0;
  background: #fbf9f5;
}
.ms.decouvrir .dc-ecran-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--ac-blanc);
  border-bottom: 1px solid var(--ac-bord);
}
.ms.decouvrir .dc-ecran-recherche {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 42%;
  min-width: 0;
  font-size: 10px;
  color: var(--ac-encre-3);
  border: 1px solid var(--ac-bord);
  border-radius: 999px;
  padding: 5px 10px;
  white-space: nowrap;
  overflow: hidden;
}
.ms.decouvrir .dc-ecran-fin {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--ac-encre-2);
}
.ms.decouvrir .dc-ecran-compte {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ac-encre-3);
}
.ms.decouvrir .dc-ecran-compte b {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--ac-encre);
  line-height: 1.2;
}
.ms.decouvrir .dc-ecran-compte i {
  display: block;
  font-style: normal;
  font-size: 8.5px;
  color: var(--ac-encre-3);
  line-height: 1.2;
}
.ms.decouvrir .dc-ecran-avatar {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--ac-sable);
  color: var(--ac-vert);
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ms.decouvrir .dc-ecran-corps {
  padding: 18px 18px 20px;
}
.ms.decouvrir .dc-ecran-bonjour {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ac-encre);
}
.ms.decouvrir .dc-ecran-sous {
  font-size: 10.5px;
  color: var(--ac-encre-2);
  margin: 4px 0 14px;
}
.ms.decouvrir .dc-ecran-grille {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 12px;
}
.ms.decouvrir .dc-ecran-bloc {
  background: var(--ac-blanc);
  border: 1px solid var(--ac-bord);
  border-radius: 6px;
  padding: 12px;
  min-width: 0;
}
.ms.decouvrir .dc-ecran-sur {
  font-size: 10px;
  font-weight: 500;
  color: var(--ac-encre-2);
  margin-bottom: 10px;
}
.ms.decouvrir .dc-ecran-cap-in {
  display: grid;
  grid-template-columns: 42% minmax(0, 1fr);
  gap: 12px;
}
.ms.decouvrir .dc-ecran-cap-im {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ac-sable);
}
.ms.decouvrir .dc-ecran-cap-im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ms.decouvrir .dc-ecran-etiquette {
  display: inline-block;
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ac-vert);
  background: var(--ac-fond-2);
  border-radius: 3px;
  padding: 2px 6px;
}
.ms.decouvrir .dc-ecran-cap-titre {
  font-family: var(--display);
  font-size: 13px;
  line-height: 1.25;
  color: var(--ac-encre);
  margin: 6px 0 3px;
}
.ms.decouvrir .dc-ecran-cap-sous {
  font-size: 9px;
  color: var(--ac-encre-3);
}
.ms.decouvrir .dc-ecran-barre-prog {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--ac-fond-2);
  margin: 6px 0 8px;
  overflow: hidden;
}
.ms.decouvrir .dc-ecran-barre-prog i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ac-vert);
}
.ms.decouvrir .dc-ecran-etapes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ms.decouvrir .dc-ecran-etapes li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  line-height: 1.3;
  color: var(--ac-encre-2);
}
.ms.decouvrir .dc-ecran-coche {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  border: 1px solid var(--ac-bord-fort);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.ms.decouvrir .dc-ecran-etapes li.faite .dc-ecran-coche {
  background: var(--ac-vert);
  border-color: var(--ac-vert);
}
.ms.decouvrir .dc-ecran-bouton {
  display: inline-block;
  margin-top: 9px;
  font-size: 8.5px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  background: var(--ac-vert);
  padding: 6px 9px;
  border-radius: 3px;
}
.ms.decouvrir .dc-ecran-bouton-ligne {
  background: transparent;
  color: var(--ac-vert);
  border: 1px solid var(--ac-vert);
}
.ms.decouvrir .dc-ecran-cote {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.ms.decouvrir .dc-ecran-echeance {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ms.decouvrir .dc-ecran-date {
  width: 36px;
  flex-shrink: 0;
  text-align: center;
  border: 1px solid var(--ac-bord);
  border-radius: 4px;
  padding: 4px 0;
}
.ms.decouvrir .dc-ecran-date b {
  display: block;
  font-family: var(--display);
  font-size: 15px;
  line-height: 1;
  color: var(--ac-vert);
}
.ms.decouvrir .dc-ecran-date i {
  display: block;
  font-style: normal;
  font-size: 7.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ac-encre-3);
  margin-top: 2px;
}
.ms.decouvrir .dc-ecran-echeance > span:last-child {
  min-width: 0;
}
.ms.decouvrir .dc-ecran-echeance > span:last-child b {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--ac-encre);
  line-height: 1.3;
}
.ms.decouvrir .dc-ecran-echeance > span:last-child i {
  display: block;
  font-style: normal;
  font-size: 9px;
  color: var(--ac-encre-3);
}
.ms.decouvrir .dc-ecran-echeance em {
  display: inline-block;
  margin-top: 5px;
  font-style: normal;
  font-size: 8px;
  font-weight: 600;
  color: var(--dc-terre);
  background: var(--dc-terre-fond);
  padding: 2px 6px;
  border-radius: 3px;
}
.ms.decouvrir .dc-ecran-semaine {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ms.decouvrir .dc-ecran-semaine li {
  font-size: 9.5px;
  color: var(--ac-encre-2);
}
.ms.decouvrir .dc-ecran-semaine b {
  font-size: 11px;
  font-weight: 600;
  color: var(--ac-encre);
  margin-right: 2px;
}
.ms.decouvrir .dc-ecran-axes {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.ms.decouvrir .dc-ecran-axes li {
  background: var(--ac-blanc);
  border: 1px solid var(--ac-bord);
  border-radius: 6px;
  padding: 9px 10px;
  min-width: 0;
}
.ms.decouvrir .dc-ecran-axes b {
  display: block;
  font-size: 9px;
  font-weight: 500;
  color: var(--ac-encre);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms.decouvrir .dc-ecran-axes .dc-ecran-barre-prog {
  margin: 7px 0 5px;
}
.ms.decouvrir .dc-ecran-axes i {
  font-style: normal;
  font-size: 8.5px;
  color: var(--ac-encre-3);
}

/* ============ 8. RESPIRATION : RÉGLAGES PAR LARGEUR D'ÉCRAN ============ */

/* Sous 560 px, les retours à la ligne écrits pour la maquette de bureau
   couperaient les titres au mauvais endroit : la phrase coule. */
@media (max-width: 559px) {
  .ms.decouvrir .dc-h1 br,
  .ms.decouvrir .dc-h2 br {
    display: none;
  }
}

/* Téléphone large : deux cartes par ligne. */
@media (min-width: 460px) {
  .ms.decouvrir .dc-appels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 560px) {
  .ms.decouvrir .dc-espaces {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tablette. */
@media (min-width: 768px) {
  .ms.decouvrir .dc-section {
    padding: 88px 0;
  }
  .ms.decouvrir .dc-heros-txt {
    padding: 48px 32px 44px 24px;
  }
  .ms.decouvrir .dc-appels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ms.decouvrir .dc-bande-txt {
    padding: 64px 32px 64px 24px;
  }
  .ms.decouvrir .dc-frise {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

/* Petit ordinateur : tout passe en deux colonnes, la frise s'étire. */
@media (min-width: 1000px) {
  .ms.decouvrir .dc-heros {
    grid-template-columns: minmax(0, 47%) minmax(0, 53%);
    align-items: stretch;
  }
  .ms.decouvrir .dc-heros-txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    max-width: 644px;
    margin: 0 0 0 auto;
    /* Le texte part plus haut et le bloc est moins haut : ce sont les
       mesures du héros de Lieux (`.lx-heros-txt`, 58 px en haut, 62 px en
       bas, bloc de 470 px). Le titre sur quatre lignes fait la hauteur
       réelle ; l'image suit, jamais plus. */
    padding: 58px 40px 62px 24px;
  }
  .ms.decouvrir .dc-heros-im {
    aspect-ratio: auto;
    min-height: 470px;
    max-height: none;
    height: 100%;
  }
  /* L'image sort du flux de sa colonne : sinon, sur une fenêtre large, sa
     hauteur naturelle (1086 px pour 1448 de large) repoussait le texte vers
     le bas. Posée en absolu, elle prend la hauteur que le texte donne au
     héros, jamais plus — c'est ce que fait Lieux avec sa colonne absolue. */
  .ms.decouvrir .dc-heros-im img {
    position: absolute;
    inset: 0;
    /* Deux colonnes : le visuel borde le texte à gauche, le fondu s'y porte.
       Bornes en pixels, comme sur l'accueil, pour que le velouté reste le
       même à toutes les largeurs. */
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      rgba(0, 0, 0, 0.35) 56px,
      #000 168px
    );
    mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.35) 56px, #000 168px);
  }
  .ms.decouvrir .dc-tete-deux {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: end;
    gap: 56px;
  }
  .ms.decouvrir .dc-tete-deux .dc-intro {
    padding-bottom: 6px;
  }
  .ms.decouvrir .dc-espaces {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
  }
  .ms.decouvrir .dc-deux {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 64px;
  }
  .ms.decouvrir .dc-deux-espace {
    grid-template-columns: minmax(0, 31%) minmax(0, 1fr);
    gap: 48px;
  }
  .ms.decouvrir .dc-frise {
    gap: 16px;
  }
  .ms.decouvrir .dc-etape {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 26px 14px 22px;
    min-height: 170px;
  }
  .ms.decouvrir .dc-etape-ico {
    margin-bottom: 6px;
  }
  .ms.decouvrir .dc-etape-titre {
    font-size: 14.5px;
  }
  .ms.decouvrir .dc-etape-txt {
    font-size: 12.5px;
  }
  .ms.decouvrir .dc-bande {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .ms.decouvrir .dc-bande-txt {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 80px 56px 80px 24px;
  }
  .ms.decouvrir .dc-bande-in {
    width: 100%;
    max-width: 596px;
  }
  /* Le manifeste pose sa photo à gauche : le rythme de la page alterne. */
  .ms.decouvrir .dc-bande-gauche .dc-bande-im {
    order: -1;
  }
  .ms.decouvrir .dc-bande-gauche .dc-bande-txt {
    justify-content: flex-start;
    padding: 80px 24px 80px 56px;
  }
  .ms.decouvrir .dc-bande-im {
    aspect-ratio: auto;
    min-height: 480px;
    /* Deux colonnes : l'image borde le texte, le fondu se porte sur ce
       bord. Photo à droite (communauté) : le fondu part de la gauche ;
       photo à gauche (manifeste) : il part de la droite. Bornes en pixels,
       comme sur le héros, pour le même velouté à toutes les largeurs. */
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      rgba(0, 0, 0, 0.35) 56px,
      #000 168px
    );
    mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.35) 56px, #000 168px);
  }
  .ms.decouvrir .dc-bande-gauche .dc-bande-im {
    -webkit-mask-image: linear-gradient(
      to left,
      transparent 0,
      rgba(0, 0, 0, 0.35) 56px,
      #000 168px
    );
    mask-image: linear-gradient(to left, transparent 0, rgba(0, 0, 0, 0.35) 56px, #000 168px);
  }
  .ms.decouvrir .dc-bureau-cadre {
    min-width: 640px;
  }
}

/* Grand écran : six cartes sur une ligne, le héros se cale à 48 px du bord
   comme sur l'accueil, l'aperçu du bureau tient sans défiler. */
@media (min-width: 1180px) {
  .ms.decouvrir .dc-appels {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
  }
  .ms.decouvrir .dc-bureau-cadre {
    min-width: 0;
  }
}
/* Entre deux colonnes et le grand écran, la colonne des bandes est étroite :
   les retours à la ligne des titres se lèvent. */
@media (min-width: 1000px) and (max-width: 1279px) {
  .ms.decouvrir .dc-bande .dc-h2 br {
    display: none;
  }
}
@media (min-width: 1280px) {
  /* La frise s'étire sur quatre pas, les flèches apparaissent entre eux. */
  .ms.decouvrir .dc-frise {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
  }
  .ms.decouvrir .dc-etape-fleche {
    display: inline-flex;
    position: absolute;
    top: 50%;
    right: -24px;
    transform: translate(0, -50%);
  }
  .ms.decouvrir .dc-heros {
    grid-template-columns: min(50%, 700px) minmax(0, 1fr);
  }
  .ms.decouvrir .dc-heros-txt {
    max-width: none;
    padding: 58px 40px 62px clamp(24px, calc((100vw - 1288px) / 2 + 24px), 48px);
  }
  /* Le titre plafonne à 58 px au lieu de 64 : sur quatre lignes, il fait
     la hauteur du héros, et c'est lui qui le retient près des 470 px de
     Lieux. */
  .ms.decouvrir .dc-h1 {
    font-size: clamp(38px, 4.6vw, 58px);
  }
  .ms.decouvrir .dc-heros-im {
    min-height: 470px;
    /* Le visuel se rapproche du titre : il déborde de 45 px dans la gouttière
       de la colonne de texte, et son fondu se raccourcit d'autant — même
       réglage que l'accueil, aucun débordement horizontal. */
    margin-left: -45px;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      rgba(0, 0, 0, 0.35) 30px,
      #000 90px
    );
    mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.35) 30px, #000 90px);
  }
  .ms.decouvrir .dc-bande-txt {
    padding-right: 72px;
  }
  .ms.decouvrir .dc-bande-gauche .dc-bande-txt {
    padding-left: 72px;
  }
}
/* ================= 9. APPARITION AU DÉFILEMENT ================= */
/* `useApparition` pose `anim` sur les sections et `vu` quand elles entrent
   dans la fenêtre. Le mouvement est court et ne se joue pas si la personne a
   demandé moins d'animations (le script ne pose alors aucune classe). */
@media (prefers-reduced-motion: no-preference) {
  .ms.decouvrir.anims .dc-section.anim,
  .ms.decouvrir.anims .dc-bande.anim {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1),
      transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
  }
  .ms.decouvrir.anims .dc-section.anim.vu,
  .ms.decouvrir.anims .dc-bande.anim.vu {
    opacity: 1;
    transform: none;
  }
}