/* Marlis — page d'accueil.

   Toutes les règles sont portées par `.ms.accueil` : elles ne peuvent
   atteindre ni l'application (hors du conteneur .ms), ni les autres pages
   publiques (qui n'ont pas la classe .accueil). site.css reste inchangé.

   Les jetons de couleur redéfinis en tête du fichier retombent aussi sur le
   pied de page commun, qui se réchauffe avec le reste de la page.

   Sommaire
   1. Jetons, socle et primitives (boutons, liens, titres)
   2. En-tête
   3. Héros
   4. Votre cap du moment
   5. Les quatre portes
   6. Votre espace artiste + aperçu du tableau de bord
   7. L'intelligence de la plateforme
   8. Les chiffres
   9. L'appel final
  10. Respiration : réglages par largeur d'écran
*/

/* ================= 1. JETONS, SOCLE ET PRIMITIVES ================= */
.ms.accueil {
  --ac-fond: #faf8f3;
  --ac-fond-2: #f3eee4;
  --ac-blanc: #fffdfa;
  --ac-sable: #e7d8c5;
  --ac-encre: #1b1917;
  --ac-encre-2: #6b6459;
  --ac-encre-3: #8c8477;
  --ac-vert: #424e3c;
  --ac-vert-2: #4e5b47;
  --ac-bord: #e6ded0;
  --ac-bord-fort: #d9cebb;
  --ac-r-s: 6px;
  --ac-r: 10px;
  --ac-r-l: 14px;
  --ac-ombre: 0 1px 2px rgba(27, 25, 23, 0.03), 0 10px 30px -22px rgba(27, 25, 23, 0.28);
  --ac-ombre-forte: 0 1px 2px rgba(27, 25, 23, 0.04), 0 22px 50px -34px rgba(27, 25, 23, 0.36);

  /* Les jetons de site.css, réaccordés : le pied de page suit la même
     palette sans qu'une seule de ses règles soit touchée. */
  --creme: #faf8f3;
  --sable: #f0e9dd;
  --carte: #fffdfa;
  --encre: #1b1917;
  --bord: #e6ded0;
  --gris: #6b6459;
  --sapin: #424e3c;

  background: var(--ac-fond);
  color: var(--ac-encre);
}

.ms.accueil .ac-in {
  width: 100%;
  max-width: 1288px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Titres — serif éditorial pour la hiérarchie, sans-serif pour l'interface. */
.ms.accueil .ac-serif {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.015em;
}
.ms.accueil .ac-titre-geant {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--ac-encre);
}
.ms.accueil .ac-titre-geant em {
  font-style: italic;
  color: var(--ac-vert);
}
.ms.accueil .ac-titre-grand {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.16;
  letter-spacing: -0.022em;
  color: var(--ac-encre);
}
.ms.accueil .ac-chapo {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ac-encre-2);
}
.ms.accueil .ac-corps {
  font-size: 15px;
  line-height: 1.72;
  color: var(--ac-encre-2);
}
.ms.accueil .ac-oeil {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
  color: var(--ac-encre-3);
}
.ms.accueil .ac-oeil-vert {
  color: var(--ac-vert);
}
.ms.accueil .ac-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Boutons — coins doucement arrondis, jamais de pilule SaaS. */
.ms.accueil .ac-b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--ac-r-s);
  border: 1px solid transparent;
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}
.ms.accueil .ac-b-vert {
  background: var(--ac-vert);
  color: #f6f3ec;
}
.ms.accueil .ac-b-vert:hover {
  background: var(--ac-vert-2);
}
.ms.accueil .ac-b-ligne {
  background: var(--ac-blanc);
  color: var(--ac-encre);
  border-color: var(--ac-bord-fort);
}
.ms.accueil .ac-b-ligne:hover {
  border-color: var(--ac-vert);
  color: var(--ac-vert);
}
.ms.accueil .ac-b-sm {
  min-height: 40px;
  padding: 0 16px;
  font-size: 13.5px;
}
.ms.accueil .ac-b:disabled {
  opacity: 0.6;
  cursor: default;
}
.ms.accueil .ac-b:focus-visible,
.ms.accueil a:focus-visible,
.ms.accueil button:focus-visible,
.ms.accueil input:focus-visible {
  outline: 2px solid var(--ac-vert);
  outline-offset: 2px;
}

/* Liens fléchés. La flèche avance de 3 px, pas davantage. */
.ms.accueil .ac-lien {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ac-vert);
  text-decoration: none;
  border-bottom: 1px solid rgba(66, 78, 60, 0.3);
  padding-bottom: 2px;
  width: fit-content;
}
.ms.accueil .ac-lien svg {
  transition: transform 0.18s ease;
}
.ms.accueil .ac-lien:hover {
  border-bottom-color: var(--ac-vert);
}
.ms.accueil .ac-lien:hover svg {
  transform: translateX(3px);
}
.ms.accueil .ac-lien-gros {
  font-size: 14.5px;
}

.ms.accueil .ac-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ========================= 2. EN-TÊTE ========================= */
.ms.accueil .ac-entete {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 248, 243, 0.93);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ac-bord);
}
.ms.accueil .ac-entete-in {
  max-width: 1288px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.ms.accueil .ac-logo {
  text-decoration: none;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* Sous 1280 px, le logotype occupe 56 des 70 px de la barre. Le fichier
   servi est recadré serré, donc l'encre dessinée fait 50,9 px : c'est elle
   qui compte, pas la boîte. L'en-tête garde ses 71 px — `min-height: 70px`
   sur `.ac-entete-in` reste le plus grand des deux. */
.ms.accueil .ac-logo img {
  display: block;
  height: 56px;
  width: auto;
  object-fit: contain;
}
.ms.accueil .ac-nav {
  display: none;
  align-items: center;
  gap: 22px;
  flex: 1;
}
.ms.accueil .ac-nav-lien {
  font-size: 14px;
  color: var(--ac-encre-2);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition:
    color 0.18s ease,
    border-color 0.18s ease;
  white-space: nowrap;
}
.ms.accueil .ac-nav-lien:hover {
  color: var(--ac-vert);
  border-bottom-color: var(--ac-vert);
}
/* La rubrique en cours. Purement additif : sans `aria-current`, rien ne
   change — la page d'accueil n'en pose aucun. */
.ms.accueil .ac-nav-lien[aria-current="page"] {
  color: var(--ac-vert);
  border-bottom-color: var(--ac-vert);
  font-weight: 500;
}
.ms.accueil .ac-entete-fin {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ms.accueil .ac-cloche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--ac-encre-2);
  text-decoration: none;
  border-radius: var(--ac-r-s);
  transition:
    color 0.18s ease,
    background-color 0.18s ease;
}
.ms.accueil .ac-cloche:hover {
  color: var(--ac-vert);
  background: rgba(66, 78, 60, 0.06);
}
.ms.accueil .ac-profil {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ac-encre);
  padding: 4px 8px 4px 4px;
  border-radius: var(--ac-r-s);
  min-height: 44px;
  transition: background-color 0.18s ease;
}
.ms.accueil .ac-profil:hover {
  background: rgba(27, 25, 23, 0.04);
}
.ms.accueil .ac-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--ac-sable);
  border: 1px solid var(--ac-bord-fort);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ms.accueil .ac-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ms.accueil .ac-initiale {
  font-size: 13px;
  font-weight: 600;
  color: var(--ac-vert);
}
.ms.accueil .ac-profil-txt {
  display: none;
  flex-direction: column;
  line-height: 1.25;
  max-width: 150px;
}
.ms.accueil .ac-profil-txt b {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ms.accueil .ac-profil-txt span {
  font-size: 11.5px;
  color: var(--ac-encre-3);
}
.ms.accueil .ac-chevron {
  color: var(--ac-encre-3);
  flex-shrink: 0;
}
.ms.accueil .ac-connexion {
  display: none;
}
.ms.accueil .ac-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ac-bord-fort);
  border-radius: var(--ac-r-s);
  background: var(--ac-blanc);
  color: var(--ac-encre);
  cursor: pointer;
}
.ms.accueil .ac-menu-mobile {
  border-top: 1px solid var(--ac-bord);
  background: var(--ac-fond);
  padding: 10px 24px 20px;
}
.ms.accueil .ac-menu-mobile nav {
  display: flex;
  flex-direction: column;
}
.ms.accueil .ac-menu-mobile nav a {
  font-size: 15px;
  color: var(--ac-encre);
  text-decoration: none;
  padding: 13px 0;
  border-bottom: 1px solid var(--ac-bord);
}
.ms.accueil .ac-menu-mobile-fin {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.ms.accueil .ac-menu-mobile-fin .ac-b {
  flex: 1 1 auto;
}

/* ========================== 3. HÉROS ========================== */
.ms.accueil .ac-heros {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--ac-fond);
}
.ms.accueil .ac-heros-txt {
  padding: 44px 24px 40px;
  max-width: 1288px;
  width: 100%;
  margin: 0 auto;
}
.ms.accueil .ac-heros-txt .ac-oeil {
  margin-bottom: 22px;
}
.ms.accueil .ac-heros .ac-chapo {
  margin-top: 24px;
  max-width: 44ch;
}
.ms.accueil .ac-heros .ac-actions {
  margin-top: 32px;
}
.ms.accueil .ac-preuve {
  margin-top: 34px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ac-encre-2);
}
.ms.accueil .ac-jetons {
  display: flex;
  margin-top: 14px;
}
/* La bande porte aujourd'hui des portraits, mais la géométrie ne change pas :
   mêmes ronds de 30 px, même chevauchement de 9 px, même liseré couleur du
   fond. Les pastilles unies restent définies et servent de fond sous chaque
   image — si une photo tarde ou échoue, on voit un rond chaud, jamais une
   icône cassée. */
.ms.accueil .ac-jetons i,
.ms.accueil .ac-jetons img {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 2px solid var(--ac-fond);
  margin-right: -9px;
}
.ms.accueil .ac-jetons img {
  object-fit: cover;
}
.ms.accueil .ac-jetons > *:nth-child(1) {
  background: #c9b59a;
}
.ms.accueil .ac-jetons > *:nth-child(2) {
  background: #424e3c;
}
.ms.accueil .ac-jetons > *:nth-child(3) {
  background: #e7d8c5;
}
.ms.accueil .ac-jetons > *:nth-child(4) {
  background: #8c8477;
}
.ms.accueil .ac-jetons > *:nth-child(5) {
  background: #5a6138;
}
.ms.accueil .ac-heros-image {
  position: relative;
  min-height: 300px;
  height: 54vw;
  max-height: 420px;
  background: var(--ac-sable);
  overflow: hidden;
  /* 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> :
     appliqué à l'image seule, le fond de remplacement (--ac-sable) garderait
     son bord franc. Un masque rend les pixels transparents — il ne peint
     aucune couleur — donc le fondu révèle le fond réel de la section, quel
     qu'il soit. Les deux propriétés sont nécessaires : Safari ne connaît que
     la version préfixée.
     Ici l'image est empilée sous le texte : le fondu part du haut. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 28%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 28%);
}
.ms.accueil .ac-heros-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 32%;
}

/* ==================== 4. VOTRE CAP DU MOMENT ==================== */
.ms.accueil .ac-in-cap {
  margin-top: 40px;
}
.ms.accueil .ac-cap {
  position: relative;
  background: var(--ac-blanc);
  border: 1px solid var(--ac-bord);
  border-radius: var(--ac-r-l);
  padding: 30px 26px;
  box-shadow: var(--ac-ombre);
}
.ms.accueil .ac-cap-badge {
  position: absolute;
  top: -10px;
  left: 22px;
  background: var(--ac-fond-2);
  border: 1px solid var(--ac-bord);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac-encre-3);
}
.ms.accueil .ac-cap-grille {
  display: grid;
  gap: 26px;
}
.ms.accueil .ac-cap-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.ms.accueil .ac-cap-intro h2 {
  font-size: 25px;
  line-height: 1.2;
}
.ms.accueil .ac-cap-intro p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ac-encre-2);
}
.ms.accueil .ac-cap-fort {
  font-size: 21px;
  line-height: 1.28;
  color: var(--ac-encre);
}
.ms.accueil .ac-cap-date {
  font-size: 13.5px;
  color: var(--ac-encre-2);
  margin-top: -4px;
}
.ms.accueil .ac-cap-boussole {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--ac-fond-2);
  color: var(--ac-vert);
  align-items: center;
  justify-content: center;
}

/* ====================== 5. LES QUATRE PORTES ====================== */
.ms.accueil .ac-portes {
  list-style: none;
  display: grid;
  gap: 18px;
  margin-top: 44px;
}
.ms.accueil .ac-porte {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ac-blanc);
  border: 1px solid var(--ac-bord);
  border-radius: var(--ac-r);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.ms.accueil .ac-porte:hover {
  border-color: var(--ac-bord-fort);
  box-shadow: var(--ac-ombre);
}
.ms.accueil .ac-porte-im {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ac-sable);
}
.ms.accueil .ac-porte-im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.ms.accueil .ac-porte:hover .ac-porte-im img {
  transform: scale(1.03);
}
.ms.accueil .ac-porte-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  padding: 22px 20px 24px;
  flex: 1;
}
.ms.accueil .ac-porte-txt b {
  font-size: 21px;
  line-height: 1.22;
  font-weight: 400;
}
.ms.accueil .ac-porte-p {
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--ac-encre-2);
  flex: 1;
}

/* ============ 6. VOTRE ESPACE ARTISTE + APERÇU DU BUREAU ============ */
.ms.accueil .ac-espace {
  display: grid;
  gap: 30px;
  margin-top: 72px;
  align-items: start;
}
/* Une cellule de grille prend par défaut la largeur de son contenu : sans
   ce min-width, la maquette du bureau (large de 680 px) élargirait la page
   au lieu de défiler à l'intérieur de son propre cadre. */
.ms.accueil .ac-espace > *,
.ms.accueil .ac-copilote > *,
.ms.accueil .ac-final-in > * {
  min-width: 0;
}
.ms.accueil .ac-espace-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.ms.accueil .ac-espace-txt .ac-corps {
  max-width: 38ch;
}

.ms.accueil .ac-bureau {
  position: relative;
}
.ms.accueil .ac-bureau-badge {
  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.accueil .ac-bureau-defile {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--ac-r-l);
}
.ms.accueil .ac-bureau-cadre {
  min-width: 680px;
  display: grid;
  grid-template-columns: 152px 1fr;
  background: var(--ac-blanc);
  border: 1px solid var(--ac-bord);
  border-radius: var(--ac-r-l);
  box-shadow: var(--ac-ombre-forte);
  overflow: hidden;
}
.ms.accueil .ac-bureau-rail {
  background: var(--ac-fond);
  border-right: 1px solid var(--ac-bord);
  padding: 16px 10px;
}
.ms.accueil .ac-bureau-marque {
  display: block;
  height: 15px;
  width: auto;
  object-fit: contain;
  padding: 0 8px 14px;
  box-sizing: content-box;
}
.ms.accueil .ac-bureau-rail ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ms.accueil .ac-bureau-rail li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: var(--ac-encre-2);
  padding: 7px 8px;
  border-radius: var(--ac-r-s);
}
.ms.accueil .ac-bureau-rail li.on {
  background: var(--ac-blanc);
  border: 1px solid var(--ac-bord);
  color: var(--ac-vert);
  font-weight: 500;
}
.ms.accueil .ac-bureau-rail li svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.ms.accueil .ac-bureau-corps {
  padding: 16px 16px 18px;
}
.ms.accueil .ac-bureau-titre {
  font-family: var(--display);
  font-size: 15px;
  color: var(--ac-encre);
  margin-bottom: 12px;
}
.ms.accueil .ac-bureau-grille {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 10px;
}
.ms.accueil .ac-bureau-bloc {
  background: var(--ac-blanc);
  border: 1px solid var(--ac-bord);
  border-radius: var(--ac-r-s);
  padding: 11px 12px 12px;
}
.ms.accueil .ac-bureau-sur {
  font-size: 10px;
  font-weight: 500;
  color: var(--ac-encre-2);
  margin-bottom: 9px;
}
.ms.accueil .ac-bureau-oeuvres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ms.accueil .ac-bureau-oeuvres > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ms.accueil .ac-bureau-vignette {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  overflow: hidden;
  background: var(--ac-sable);
  margin-bottom: 4px;
}
.ms.accueil .ac-bureau-vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ms.accueil .ac-bureau-oeuvres b {
  font-size: 9.5px;
  font-weight: 500;
  color: var(--ac-encre);
}
.ms.accueil .ac-bureau-oeuvres i {
  font-style: normal;
  font-size: 8.5px;
  color: var(--ac-encre-3);
  line-height: 1.35;
}
.ms.accueil .ac-bureau-echeances,
.ms.accueil .ac-bureau-cands,
.ms.accueil .ac-bureau-contacts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ms.accueil .ac-bureau-echeances li,
.ms.accueil .ac-bureau-cands li,
.ms.accueil .ac-bureau-contacts li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ms.accueil .ac-bureau-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 26px;
  flex-shrink: 0;
  line-height: 1.1;
}
.ms.accueil .ac-bureau-date b {
  font-size: 11px;
  font-weight: 600;
  color: var(--ac-vert);
}
.ms.accueil .ac-bureau-date i {
  font-style: normal;
  font-size: 7.5px;
  letter-spacing: 0.06em;
  color: var(--ac-encre-3);
}
.ms.accueil .ac-bureau-quoi {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  line-height: 1.3;
}
.ms.accueil .ac-bureau-quoi b {
  font-size: 9.5px;
  font-weight: 500;
  color: var(--ac-encre);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ms.accueil .ac-bureau-quoi i {
  font-style: normal;
  font-size: 8.5px;
  color: var(--ac-encre-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ms.accueil .ac-bureau-pastille {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  flex-shrink: 0;
  border: 1px solid var(--ac-bord-fort);
}
.ms.accueil .ac-bureau-pastille.p-cours {
  background: #e7d8c5;
}
.ms.accueil .ac-bureau-pastille.p-select {
  background: #c9603a;
}
.ms.accueil .ac-bureau-pastille.p-soumis {
  background: #cfd6cd;
}
.ms.accueil .ac-bureau-etat {
  font-size: 8px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--ac-bord);
  color: var(--ac-encre-2);
  white-space: nowrap;
  flex-shrink: 0;
}
.ms.accueil .ac-bureau-etat.e-cours {
  color: #2b5f8a;
  border-color: rgba(43, 95, 138, 0.3);
}
.ms.accueil .ac-bureau-etat.e-select {
  color: #a4562b;
  border-color: rgba(164, 86, 43, 0.3);
}
.ms.accueil .ac-bureau-etat.e-soumis {
  color: var(--ac-vert);
  border-color: rgba(66, 78, 60, 0.32);
}
.ms.accueil .ac-bureau-rond {
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: var(--ac-fond-2);
  border: 1px solid var(--ac-bord);
  color: var(--ac-encre-2);
  font-size: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ms.accueil .ac-bureau-lien {
  margin-top: 10px;
  font-size: 9px;
  color: var(--ac-vert);
}

/* ============ 7. L'INTELLIGENCE DE LA PLATEFORME ============ */
.ms.accueil .ac-copilote {
  display: grid;
  gap: 30px;
  margin-top: 72px;
  align-items: center;
}
.ms.accueil .ac-copilote-im {
  border-radius: var(--ac-r);
  overflow: hidden;
  background: var(--ac-sable);
  aspect-ratio: 4 / 3;
}
.ms.accueil .ac-copilote-im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ms.accueil .ac-copilote-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.ms.accueil .ac-copilote-txt .ac-corps {
  max-width: 56ch;
}
.ms.accueil .ac-atouts {
  list-style: none;
  display: grid;
  gap: 24px;
  margin-top: 8px;
  width: 100%;
}
.ms.accueil .ac-atouts li {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ms.accueil .ac-atouts b {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ac-encre);
}
.ms.accueil .ac-atouts li > span:last-child {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ac-encre-2);
}
.ms.accueil .ac-rond {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--ac-bord-fort);
  color: var(--ac-vert);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

/* ========================= 8. LES CHIFFRES ========================= */
.ms.accueil .ac-chiffres {
  margin-top: 72px;
}
.ms.accueil .ac-chiffres ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 0;
  border-top: 1px solid var(--ac-bord);
  padding-top: 34px;
}
.ms.accueil .ac-chiffres li {
  text-align: center;
  padding: 0 14px;
}
.ms.accueil .ac-chiffres li + li {
  border-left: 1px solid var(--ac-bord);
}
.ms.accueil .ac-chiffres li:nth-child(3) {
  border-left: none;
}
.ms.accueil .ac-chiffres b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  color: var(--ac-vert);
  letter-spacing: -0.02em;
  margin-bottom: 7px;
}
.ms.accueil .ac-chiffre-nombre b {
  font-size: clamp(28px, 3vw, 34px);
  line-height: 1.1;
}
.ms.accueil .ac-chiffre-texte b {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.25;
}
.ms.accueil .ac-chiffres li > span {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ac-encre-2);
}

/* ========================= 9. L'APPEL FINAL ========================= */
.ms.accueil .ac-final {
  position: relative;
  margin-top: 72px;
  background: var(--ac-fond-2);
  border-top: 1px solid var(--ac-bord);
  overflow: hidden;
}
.ms.accueil .ac-final-in {
  position: relative;
  z-index: 1;
  max-width: 1288px;
  margin: 0 auto;
  padding: 42px 24px 46px;
  display: grid;
  gap: 26px;
  align-items: center;
}
.ms.accueil .ac-final-txt .ac-corps {
  margin-top: 12px;
  max-width: 42ch;
}
.ms.accueil .ac-final-form form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 460px) {
  .ms.accueil .ac-final-form form {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
.ms.accueil .ac-final-form input {
  min-width: 0;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--ac-bord-fort);
  border-radius: var(--ac-r-s);
  background: var(--ac-blanc);
  color: var(--ac-encre);
  font: inherit;
  font-size: 14.5px;
}
.ms.accueil .ac-final-form input::placeholder {
  color: var(--ac-encre-3);
}
.ms.accueil .ac-final-mentions {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ac-encre-2);
}
.ms.accueil .ac-final-ok,
.ms.accueil .ac-final-err {
  margin-top: 12px;
  font-size: 13.5px;
}
.ms.accueil .ac-final-ok {
  color: var(--ac-vert);
}
.ms.accueil .ac-final-err {
  color: #8f2f2f;
}
.ms.accueil .ac-final-im {
  display: none;
}

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

/* Téléphone large : les portes se mettent par deux. */
@media (min-width: 560px) {
  .ms.accueil .ac-portes {
    grid-template-columns: repeat(2, 1fr);
  }
  .ms.accueil .ac-heros-image {
    max-height: 480px;
  }
}

/* Sur petit écran, les retours à la ligne écrits pour la maquette de bureau
   coupent le texte au mauvais endroit : on laisse la phrase couler. */
@media (max-width: 999px) {
  .ms.accueil .ac-chapo br,
  .ms.accueil .ac-corps br,
  .ms.accueil .ac-cap-fort br,
  .ms.accueil .ac-cap-intro p br,
  .ms.accueil .ac-porte-txt b br,
  .ms.accueil .ac-atouts b br {
    display: none;
  }
}

/* Tablette : menu compact, cap sur deux colonnes. */
@media (min-width: 768px) {
  .ms.accueil .ac-in,
  .ms.accueil .ac-entete-in,
  .ms.accueil .ac-heros-txt,
  .ms.accueil .ac-final-in {
    padding-left: 32px;
    padding-right: 32px;
  }
  .ms.accueil .ac-menu-mobile {
    padding-left: 32px;
    padding-right: 32px;
  }
  .ms.accueil .ac-cap {
    padding: 34px 32px;
  }
  .ms.accueil .ac-cap-grille {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 36px;
  }
  .ms.accueil .ac-chiffres li:nth-child(3) {
    border-left: 1px solid var(--ac-bord);
  }
  .ms.accueil .ac-chiffres ul {
    grid-template-columns: repeat(4, 1fr);
  }
  .ms.accueil .ac-atouts {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
  .ms.accueil .ac-final-in {
    grid-template-columns: 1fr 1fr;
    padding-top: 52px;
    padding-bottom: 56px;
  }
  .ms.accueil .ac-connexion {
    display: inline-flex;
  }
}

@media (min-width: 768px) and (max-width: 999px) {
  .ms.accueil .ac-cap-intro {
    grid-column: 1 / -1;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--ac-bord);
  }
}

/* Petit ordinateur : le héros passe en deux colonnes, la nav apparaît. */
@media (min-width: 1000px) {
  .ms.accueil .ac-nav {
    display: flex;
    gap: 18px;
    margin-left: 14px;
  }
  .ms.accueil .ac-nav-lien {
    font-size: 12.5px;
  }
  .ms.accueil .ac-burger {
    display: none;
  }
  .ms.accueil .ac-menu-mobile {
    display: none;
  }
  .ms.accueil .ac-heros {
    /* Le visuel démarre un cran plus tôt, sans étrangler la colonne de
       texte : la marge perdue est reprise sur la gouttière, pas sur le
       texte, qui gagne au contraire quelques pixels (voir padding ci-dessous). */
    grid-template-columns: 46% 54%;
    align-items: stretch;
  }
  .ms.accueil .ac-heros-txt {
    padding: 64px 32px 68px;
    margin: 0 0 0 auto;
    max-width: 644px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  .ms.accueil .ac-heros-image {
    height: auto;
    max-height: none;
    min-height: 520px;
    /* Deux colonnes : le visuel borde le texte à gauche, le fondu s'y porte.
       Les bornes sont en pixels et non en pourcentages : exprimé en
       pourcentage, le fondu s'étirait avec la fenêtre (231 px de voile à
       1280 px, 311 px à 1728 px) et creusait une bande vide entre le titre et
       l'image sur les grands écrans. À longueur fixe, le fondu garde le même
       velouté partout et l'image entre dans le champ au même endroit. */
    -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.accueil .ac-cap-grille {
    grid-template-columns: 0.95fr 1.05fr 1.1fr;
    gap: 0;
  }
  .ms.accueil .ac-cap-zone + .ac-cap-zone {
    border-left: 1px solid var(--ac-bord);
    padding-left: 34px;
  }
  .ms.accueil .ac-cap-zone:not(:last-child) {
    padding-right: 34px;
  }
  .ms.accueil .ac-cap-boussole {
    display: inline-flex;
    position: absolute;
    right: -22px;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid var(--ac-bord);
    background: var(--ac-blanc);
    z-index: 1;
  }
  .ms.accueil .ac-cap-intro .ac-cap-boussole,
  .ms.accueil .ac-cap-zone:last-child .ac-cap-boussole {
    display: none;
  }
  .ms.accueil .ac-portes {
    grid-template-columns: repeat(4, 1fr);
  }
  .ms.accueil .ac-espace {
    grid-template-columns: 31% 1fr;
    gap: 44px;
  }
  .ms.accueil .ac-bureau-cadre {
    min-width: 0;
  }
  .ms.accueil .ac-copilote {
    grid-template-columns: 41% 1fr;
    gap: 48px;
  }
  .ms.accueil .ac-profil-txt {
    display: flex;
  }
  .ms.accueil .ac-final-in {
    grid-template-columns: 0.9fr 1.05fr;
    gap: 44px;
    padding-right: 260px;
  }
  .ms.accueil .ac-final-im {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 240px;
    /* Même principe que le héros : le bord gauche se fond dans le sable de la
       bande. Ce visuel est masqué (display:none) en dessous de 1000 px — il ne
       passe donc jamais sous le contenu du CTA, et n'a pas besoin d'un fondu
       vertical. Il est décoratif (aria-hidden) et posé en absolu derrière le
       formulaire, qui garde sa propre zone : le masque ne touche ni le texte,
       ni le champ, ni le bouton. */
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(0, 0, 0, 0.35) 12%,
      #000 34%
    );
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.35) 12%, #000 34%);
  }
  .ms.accueil .ac-final-im img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 45% 50%;
  }
}

/* Menu compact : la nav complète est là, mais « Se connecter » attend
   d'avoir la place — sinon l'en-tête déborde de la fenêtre. */
@media (min-width: 1000px) and (max-width: 1179px) {
  .ms.accueil .ac-connexion {
    display: none;
  }
  .ms.accueil .ac-nav {
    gap: 15px;
  }
}

/* Grand écran : la nav respire, le héros gagne en hauteur. */
@media (min-width: 1280px) {
  .ms.accueil .ac-nav {
    gap: 24px;
    margin-left: 28px;
  }
  /* Le logotype vertical passe à 60 px de haut. Le fichier fait 2000 × 1645 :
     à cette taille il reste vingt-sept fois suréchantillonné, aucun risque de
     flou. `width: auto` rend la main au ratio de 1,2158 — l'image se dessine
     en 60 × 73, contre 26,3 × 32 auparavant, où un `style` inline carré la
     mettait en boîte à lettres. La zone cliquable du lien suit la hauteur de
     l'image et dépasse largement le plancher de 44 px de `.ac-logo`. */
  .ms.accueil .ac-logo img {
    height: 76px;
    width: auto;
  }
  /* La nav cessait d'être lisible : 13.5 px en graisse 400 était le texte le
     plus fin de la page, face à un logotype et à un titre bien plus affirmés.
     14 px en 500 la remettent à niveau sans l'alourdir. Le padding vertical
     passe à 18 px pour occuper l'en-tête devenu plus haut : la cible cliquable
     monte à 59,7 px. La couleur, l'écart de 24 px entre liens et toute la
     plage sous 1280 px sont inchangés ; les sept liens occupent 680,9 px et
     il reste 230 px libres à 1280 px, la largeur la plus contrainte. */
  .ms.accueil .ac-nav-lien {
    font-size: 14px;
    font-weight: 500;
    padding: 18px 0;
  }
  /* L'en-tête passe de 71 à 101 px, pour que le logotype vertical y tienne à
     60 px de haut sans étrangler la nav. Borné à 1280 px : sous ce palier, le
     logo se dessine toujours en 32 × 26,3 et l'en-tête garde ses 71 px. */
  .ms.accueil .ac-entete-in {
    min-height: 100px;
  }
  .ms.accueil .ac-heros-image {
    min-height: 600px;
  }
  /* Le titre monte à 68 px ici : « Votre prochaine étape. » réclame alors
     590 px en Fraunces italique. Le bord gauche du texte reste calé sur le
     conteneur de 1288 px (comme toutes les sections en dessous), donc la
     largeur ne peut venir que de la colonne : 52 % laissent 614 à 630 px
     utiles selon la fenêtre, soit une quarantaine de pixels de marge, et
     l'image garde 48 % — au-delà de 800 px de large sur un grand écran.
     Volontairement borné à 1280 px : en dessous, la composition ne bouge pas. */
  .ms.accueil .ac-heros {
    grid-template-columns: 52% 48%;
  }
  /* Le visuel se rapproche du texte de deux façons, sans jamais le recouvrir.
     D'abord une marge négative : le bloc déborde de 45 px sur la gauche de sa
     colonne, dans la bande que la colonne de texte laisse vide sous le titre.
     Il reste dans le flux de la grille, donc la hauteur du héros ne bouge pas,
     et il ne s'élargit que vers la gauche — son bord droit ne bouge pas non
     plus, aucun débordement horizontal.
     Ensuite un fondu plus court, 90 px au lieu de 120, palier maintenu au
     tiers du parcours : même velouté, aucune arête verticale, mais l'image
     devient franche plus tôt.
     La troisième ligne du titre s'arrête toujours à gauche du bord du visuel —
     il reste au minimum 17 px d'air entre les deux sur toute la plage. Le
     fondu vertical des mises en page empilées, la plage 1000-1279 px et le
     masque du CTA final ne sont pas concernés. */
  .ms.accueil .ac-heros-image {
    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);
  }
  /* Le bloc éditorial se rapproche du bord de fenêtre de 64 px. Le plancher
     de 32 px retient la marge sur les fenêtres étroites : le décalage monte
     progressivement entre 1288 et 1416 px, puis se stabilise — aucun saut, et
     rien ne sort de l'écran à 1280 px. Seul le bord gauche recule : le bord
     droit du bloc ne bouge pas, la largeur utile augmente donc, jamais
     l'inverse. Le héros cesse ainsi d'être aligné sur le conteneur des
     sections en dessous ; c'est voulu. */
  .ms.accueil .ac-heros-txt {
    padding: 76px 20px 80px 0;
    padding-left: max(32px, calc((100vw - 1288px) / 2 + 32px - 64px));
    max-width: none;
  }
  .ms.accueil .ac-final-in {
    padding-right: 320px;
  }
  .ms.accueil .ac-final-im {
    width: 300px;
  }
}

/* Très grand écran : le contenu cesse de s'étirer. */
@media (min-width: 1700px) {
  .ms.accueil .ac-heros-image {
    min-height: 660px;
  }
}

/* Les mouvements sont facultatifs. */
@media (prefers-reduced-motion: reduce) {
  .ms.accueil *,
  .ms.accueil *::before,
  .ms.accueil *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}