/* ════════════════════════════════════════════════════════════════════════════
   mib-accueil.css — l'accueil général et ses deux univers

   Michel : « il faut une première page plateforme générale, deux boutons, un
   formation un entreprise ; intégrer des photos pour rendre les pages plus
   vivantes, on pourrait les mettre sur la gauche ; ajouter une animation à
   l'ouverture et fermeture d'une page comme sur une présentation. »

   Trois choses ici : la mise en page à deux colonnes (visuel à gauche, choix à
   droite), les transitions de page, et le lien de retour entre univers.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── La transition, façon changement de diapositive ──────────────────────────
   Elle est COURTE — 220 ms. Sur un poste de sécurité ouvert douze heures, une
   animation à chaque navigation devient vite une fatigue ; sur une page
   d'accueil que l'on visite une fois, elle donne le ton. La durée est le seul
   réglage qui concilie les deux.

   Le respect de « prefers-reduced-motion » n'est pas une politesse : c'est un
   réglage d'accessibilité que des utilisateurs activent pour des raisons
   médicales — vertiges, migraines vestibulaires. Une animation imposée leur
   coûte plus qu'un écran terne ne coûte aux autres. */
@keyframes mib-entree {
  from { opacity: 0; transform: translateY(14px) scale(.995); }
  to   { opacity: 1; transform: none; }
}
@keyframes mib-sortie {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-10px) scale(.995); }
}

body.page-univers,
body.page-accueil { animation: mib-entree .22s cubic-bezier(.16, 1, .3, 1) both; }
body.mib-part      { animation: mib-sortie .18s ease-in both; }

@media (prefers-reduced-motion: reduce) {
  body.page-univers, body.page-accueil, body.mib-part { animation: none !important; }
  .univers-carte { transition: none !important; }
}

/* ── Le retour d'un univers vers l'accueil ─────────────────────────────────── */
.retour-univers {
  position: fixed; top: 16px; left: 18px; z-index: 60;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .88);
  font: 600 .82rem var(--font-body, Inter, system-ui, sans-serif);
  text-decoration: none; backdrop-filter: blur(6px);
  transition: background .16s ease, border-color .16s ease;
}
.retour-univers:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .32);
  color: #fff;
}

/* ── L'accueil général : le visuel à gauche, le choix à droite ─────────────── */
.accueil-grille {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  padding: clamp(20px, 4vw, 56px);
  max-width: 1360px;
  margin: 0 auto;
}

/* Le visuel. Tant que Michel n'a pas ses photos, la même règle vaut : on ne
   met PAS d'image achetée sur catalogue. Un acheteur la reconnaît en une
   seconde, et elle décrédibilise plus qu'elle n'embellit. À la place, une
   composition de la charte — qui cédera la place à la vraie photo par un simple
   changement de « --visuel ». */
.accueil-visuel {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: 78vh;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(16, 185, 129, .28) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 90% 90%, rgba(37, 99, 235, .30) 0%, transparent 60%),
    linear-gradient(160deg, #064E3B 0%, #0F2E3F 45%, #1E3A8A 100%);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7);
  display: grid; place-items: center;
}
/* La PHOTO couvre le cadre. La marque, elle, se centre : sans « :not », la
   règle attrapait aussi le logo et le collait dans l'angle. */
.accueil-visuel img:not(.marque) {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.accueil-visuel .marque {
  width: min(52%, 260px); height: auto; opacity: .92;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .45));
}
/* Quand la photo est là, la marque s'efface : sinon elle transparaîtrait sous
   une image à fond clair. Si le navigateur ignore « :has », elle reste
   simplement derrière la photo — invisible de toute façon. */
.accueil-visuel:has(.photo) .marque { display: none; }

.accueil-choix { display: flex; flex-direction: column; gap: 18px; }

.accueil-titre {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.8rem, 4.2vw, 2.7rem);
  font-weight: 800; color: #fff; letter-spacing: -.02em;
  margin: 0 0 4px;
}
.accueil-sous {
  color: rgba(255, 255, 255, .72);
  font-size: clamp(.9rem, 1.6vw, 1.02rem);
  line-height: 1.6; margin: 0 0 14px; max-width: 46ch;
}

.univers-carte {
  display: block; text-decoration: none;
  padding: clamp(18px, 2.6vw, 26px);
  border-radius: 20px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  transition: transform .18s cubic-bezier(.16, 1, .3, 1),
              background .18s ease, border-color .18s ease;
}
.univers-carte:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .12);
  border-color: rgba(110, 231, 183, .55);
}
.univers-carte .ico {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; font-size: 1.5rem;
  background: linear-gradient(135deg, #10B981, #2563EB);
  margin-bottom: 12px;
}
.univers-carte h2 {
  font-family: var(--font-display, inherit);
  font-size: 1.18rem; font-weight: 800; color: #fff; margin: 0 0 4px;
}
.univers-carte p {
  color: rgba(255, 255, 255, .70);
  font-size: .88rem; line-height: 1.55; margin: 0 0 10px;
}
.univers-carte .liste {
  color: rgba(255, 255, 255, .55);
  font-size: .78rem; line-height: 1.5;
}
.univers-carte .aller {
  display: inline-block; margin-top: 12px;
  color: #6EE7B7; font-weight: 700; font-size: .85rem;
}

/* Grand écran mais COURT — 1280 × 720, c'est-à-dire la résolution de presque
   tous les vidéoprojecteurs, donc celle des démonstrations en clientèle.
   Mesuré, la seconde carte y tombait 51 px sous le bord. La page tenait sur le
   portable du développeur et manquait sa cible dans la salle du client : c'est
   exactement la forme de défaut qu'on ne voit jamais chez soi.

   On ne change pas la mise en page, on lui coûte moins cher en hauteur : le
   pictogramme se met en ligne avec le titre au lieu de s'empiler dessus. */
@media (min-width: 901px) and (max-height: 820px) {
  .accueil-grille { padding-top: clamp(16px, 2vh, 32px); padding-bottom: clamp(16px, 2vh, 32px); }
  .accueil-sous   { margin-bottom: 6px; }
  .accueil-choix  { gap: 14px; }
  .univers-carte  { padding: 16px 20px; }
  .univers-carte .ico {
    width: 40px; height: 40px; border-radius: 12px;
    font-size: 1.2rem; margin: 0 12px 0 0; float: left;
  }
  .univers-carte h2 { padding-top: 5px; }
  .univers-carte p  { clear: left; padding-top: 6px; margin-bottom: 6px; }
  .univers-carte .aller { margin-top: 8px; }
}
/* Plus court encore — un vieux portable 1024 × 600, ou un navigateur dont les
   barres d'outils mangent deux cents pixels. La liste des rôles répète ce que
   dit déjà le paragraphe : c'est la première chose à sacrifier, avant le
   bouton. */
@media (min-width: 901px) and (max-height: 660px) {
  .univers-carte .liste { display: none; }
  .accueil-sous { display: none; }
}

/* Sur un téléphone, le visuel passe AU-DESSUS et se réduit : il donne le ton
   sans repousser le choix sous la ligne de flottaison. C'est la leçon des
   écrans de code — un bouton qu'il faut aller chercher n'est pas un bouton.

   Ce n'est pas une préférence d'esthétique. Une page d'accueil n'a qu'une
   fonction : faire choisir. Mesuré, le premier jet montrait la carte
   « Entreprise » à 989 px sur un écran de 844, et AUCUNE des deux cartes sur
   un Android 360×640 — la moitié du choix, invisible, sur la page dont c'est
   l'unique raison d'être. La correction n'embellit pas, elle rend la page
   utilisable.

   Le budget vertical, sur le pire cas (360×640) :
     marge 18 + visuel 141 (22vh) + titre 66 + sous-titre 54
     + deux cartes compactes 2×136 + espacements 40  ≈ 591 px.
   Il reste de la marge pour la barre d'adresse du navigateur, qui mange
   souvent 60 à 100 px de plus que ce que « vh » annonce. */
@media (max-width: 900px) {
  .accueil-grille {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 18px 24px;
    min-height: 100svh;              /* « svh » : la hauteur SANS la barre
                                        d'adresse rétractable. « vh » ment sur
                                        iOS et Android, de 60 à 100 px. */
  }
  /* Un univers porte un lien de retour en haut à gauche : il lui faut sa place.
     L'accueil général n'en a pas, et ne doit pas payer une marge pour rien. */
  body.page-univers .accueil-grille { padding-top: 62px; }

  .accueil-visuel { aspect-ratio: 16 / 9; max-height: 22vh; order: -1; }
  .accueil-titre  { font-size: clamp(1.35rem, 6vw, 1.7rem); }
  .accueil-sous   { font-size: .86rem; line-height: 1.5; margin-bottom: 2px; }
  .accueil-choix  { gap: 12px; }

  /* La carte compacte : le pictogramme se met EN LIGNE avec le titre au lieu
     de s'empiler au-dessus — c'est la ligne qui coûtait le plus cher. */
  .univers-carte { padding: 14px 16px; border-radius: 16px; }
  .univers-carte .ico {
    width: 38px; height: 38px; border-radius: 11px;
    font-size: 1.15rem; margin: 0 10px 0 0;
    float: left;
  }
  .univers-carte h2 { font-size: 1.05rem; padding-top: 3px; }
  .univers-carte p  { font-size: .82rem; line-height: 1.45; margin-bottom: 0; clear: left; padding-top: 6px; }
  /* La liste des rôles répète ce que dit déjà le paragraphe. Sur un grand
     écran elle rassure ; sur un téléphone elle repousse le bouton. */
  .univers-carte .liste { display: none; }
  .univers-carte .aller { margin-top: 8px; font-size: .82rem; }
}

/* Écran court en portrait — un Android d'entrée de gamme.
   En dessous de 700 px de haut, le visuel devient un bandeau : il reste
   présent, il ne décide plus de rien. */
@media (max-width: 900px) and (max-height: 700px) and (orientation: portrait) {
  .accueil-visuel { max-height: 16vh; }
  .accueil-sous   { display: none; }
  .accueil-grille { gap: 10px; }
}

/* Téléphone EN PAYSAGE — 844 × 390. Un point de rupture sur la seule largeur
   ne connaît que deux mondes ; il rangeait ce cas parmi les téléphones et
   empilait tout, ce qui jetait la seconde carte 51 px sous l'écran.
   Or un écran large et court ne veut pas d'un empilement : il veut ses deux
   colonnes. On les rétablit, avec un visuel étroit qui ne prend que ce qu'il
   faut pour rappeler la marque. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .accueil-grille {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
    gap: 16px; padding: 12px 16px;
    align-items: center;
  }
  body.page-univers .accueil-grille { padding-top: 12px; padding-left: 150px; }
  .accueil-visuel { order: 0; aspect-ratio: 3 / 4; max-height: 84vh; }
  .accueil-sous   { display: none; }
  .accueil-titre  { font-size: 1.25rem; margin-bottom: 0; }
  .accueil-choix  { gap: 10px; }
  .univers-carte  { padding: 10px 14px; }
  .univers-carte p { font-size: .78rem; }
  .univers-carte .aller { margin-top: 4px; }
  .retour-univers { top: 12px; left: 12px; padding: 6px 12px; font-size: .76rem; }
}

/* ── L'univers Formation : cinq portes, pas deux ─────────────────────────────
   Michel : « on cale toutes les pages accueil pareil ». Même mise en page —
   visuel à gauche, choix à droite — mais cette page-ci compte CINQ rôles
   d'entrée là où les autres n'ont que deux applications. Cinq grandes cartes
   dans une colonne dépasseraient l'écran ; elles tiennent donc en deux
   colonnes, et disent l'essentiel. */
.accueil-roles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.role-min {
  display: flex; align-items: flex-start; gap: 11px;
  text-decoration: none;
  padding: 12px 13px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  transition: transform .18s cubic-bezier(.16, 1, .3, 1),
              background .18s ease, border-color .18s ease;
}
.role-min:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .12);
  border-color: rgba(110, 231, 183, .55);
}
.role-min-ico {
  flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; color: #fff;
}
.role-min-txt { display: block; min-width: 0; }
.role-min-txt strong { display: block; color: #fff; font-size: .95rem; font-weight: 700; }
.role-min-txt small  { display: block; color: rgba(255, 255, 255, .62); font-size: .74rem; margin-top: 1px; }
/* La phrase d'explication : utile, mais c'est elle qu'on peut perdre — jamais
   la porte d'entrée. Deux lignes au plus, et elle s'efface avant tout le
   reste quand l'écran manque de hauteur. */
.role-min-txt em {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgba(255, 255, 255, .52);
  font-size: .73rem; font-style: normal; line-height: 1.4; margin-top: 5px;
}

.accueil-faq { margin: 16px 0 0; }
.accueil-faq a { color: #6EE7B7; font-weight: 600; font-size: .84rem; text-decoration: none; }
.accueil-faq a:hover { text-decoration: underline; }

/* Le pied de page passe SOUS les deux colonnes, discret : il n'entre pas dans
   le choix, il ne doit pas lui prendre de place. */
body.page-univers .footer {
  max-width: 1360px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px) 26px;
  text-align: center; color: rgba(255, 255, 255, .42); font-size: .74rem;
}
body.page-univers .footer a { color: rgba(110, 231, 183, .8); text-decoration: none; margin: 0 5px; }
body.page-univers .footer a:hover { text-decoration: underline; }

/* Écran court : l'explication s'efface, puis les cartes se resserrent. */
@media (max-height: 820px) {
  .role-min-txt em { display: none; }
  .role-min { padding: 10px 12px; }
}
@media (max-width: 900px) {
  .accueil-roles { gap: 8px; }
  .role-min-txt em { display: none; }
  .role-min-ico { width: 32px; height: 32px; border-radius: 9px; }
}
/* Sous 520 px, deux colonnes rendraient les titres illisibles : une seule. */
@media (max-width: 520px) {
  .accueil-roles { grid-template-columns: 1fr; }
}

/* Le lien vers les tarifs, en pied d'accueil.
   Un visiteur qui vient de comprendre ce qu'on vend doit pouvoir demander
   combien cela coûte, sans repartir en chercher la page. */
.vers-tarifs { margin: 18px 0 0; text-align: center; }
.vers-tarifs a {
  display: inline-block; padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px;
  color: rgba(255, 255, 255, .92); text-decoration: none;
  font-size: .9rem; font-weight: 600;
}
.vers-tarifs a:hover { background: rgba(255, 255, 255, .12); }
@media (max-width: 900px) { .vers-tarifs { margin-top: 12px; } }