/* ===========================================================================
   MOBY 2026 — PAGE D'ACCUEIL.
   Reproduit la section `#home` de la maquette de reference
   (Codex/2026-10-05/je/outputs/index.html). Les deux blocs <style> de la
   maquette ont ete fusionnes : seules les valeurs EFFECTIVES (apres cascade)
   figurent ici.
   Chargee par `templates/home/accueil.html.twig` via `{% block stylesheets %}`.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   HEROS — pleine largeur, carte de texte flottante a droite
   --------------------------------------------------------------------------- */
.hero {
  padding: 0;
  background: var(--white);
  overflow: hidden;
}
.hero-grid {
  display: block;
  position: relative;
  width: 100%;
  max-width: none;
}
.hero-visual {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
}
/* Le visuel s'elargit de 94% a 100% quand il entre dans le champ de vision
   (anime via la classe `is-visible`, posee par le controleur Stimulus
   `hero-reveal`). Seule la largeur change : animation sobre, desactivee par
   `prefers-reduced-motion` (tokens.css). */
.hero-photo {
  width: 94%;
  margin-inline: auto;
  border-radius: 0;
  transition: width 900ms cubic-bezier(.2, .7, .2, 1);
}
.hero-visual.is-visible .hero-photo { width: 100%; }

/* CORRECTION D'UN DEFAUT DE LA MAQUETTE, A SIGNALER AU CHEF DE PROJET :
   dans la reference, `.hero-copy` et `.hero-visual` sont tous deux positionnes
   sans `z-index`. L'ordre de peinture suit alors l'ordre du DOM : le visuel,
   place apres, recouvre entierement la carte de texte. Verifie au rendu de la
   maquette : `document.elementFromPoint()` au centre de la carte renvoie
   `hero-photo`. Resultat sur la maquette : le titre H1, les deux boutons et
   l'accroche sont INVISIBLES sur ordinateur.
   Le `z-index` ci-dessous retablit l'intention evidente de la maquette (une
   carte de verre posee sur la photo) sans rien changer d'autre.
   Voir docs/decisions.md, entree du 2026-10-05. */
.hero-copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: max(24px, calc((100vw - 1180px) / 2));
  transform: translateY(-50%);
  width: min(390px, 36vw);
  padding: 25px;
  background: #ffffffed;
  border: 1px solid var(--white);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 50px #30201624;
}
.hero .eyebrow { font-size: 10px; }
.hero h1 {
  font-size: clamp(34px, 4vw, 54px);
  letter-spacing: -.075em;
  line-height: .99;
  margin: 13px 0;
  font-weight: 850;
}
.hero h1 em { color: var(--orange); font-style: normal; }
.hero p {
  font-size: 15px;
  color: var(--ink-70);
  max-width: 460px;
  margin: 0 0 17px;
}
.actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.micro { font-size: 12px; color: var(--ink-50); margin-top: 17px; }

/* ---------------------------------------------------------------------------
   BANDEAU DE CONFIANCE
   --------------------------------------------------------------------------- */
.trust {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 19px 0;
}
.trust-row {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 6vw, 90px);
  flex-wrap: wrap;
  color: var(--ink-60);
  font-size: 13px;
  font-weight: 650;
  list-style: none;
}
.trust-row li { display: flex; align-items: center; gap: 9px; }
.check { color: var(--orange); font-size: 17px; font-weight: 900; }

/* ---------------------------------------------------------------------------
   GRILLE DES SERVICES
   --------------------------------------------------------------------------- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.service-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
  transition: transform .25s, box-shadow .25s, border-color .25s;
  display: flex;
  flex-direction: column;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: #f3c6a7;
}
/* Emplacements visuels : les QUATRE cartes partagent la meme bande de 190px.
   La maquette donnait a la premiere un format 16/9 distinct, cale sur le visuel
   quelle fournissait. Cette regle a ete retiree le 2026-10-06 : elle IMPOSAIT ce
   format a toute photo quon y mettait, et une photo dun autre rapport apparaissait
   alors bordee de bandes claires. Les quatre cartes sont desormais alignees. */
.service-card > .media { height: 190px; aspect-ratio: auto; }

.card-body {
  padding: 20px;
  display: flex;
  flex: 1;
  flex-direction: column;
}
.card-body h3 { font-size: 19px; letter-spacing: -.04em; margin: 0 0 var(--sp-2); }
.card-body p { color: var(--muted); font-size: 13px; line-height: 1.65; margin: 0 0 18px; }
.card-body .button { margin-top: auto; align-self: flex-start; }

/* ---------------------------------------------------------------------------
   BLOC "NOTRE HISTOIRE"
   --------------------------------------------------------------------------- */
.story {
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 55px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 55px;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.story::after {
  content: 'M';
  position: absolute;
  font-weight: 900;
  font-size: 330px;
  line-height: 1;
  color: #ffffff08;
  right: -5px;
  bottom: -122px;
}
.story > div { position: relative; z-index: 1; }
.story h2 {
  font-size: clamp(35px, 4vw, 52px);
  letter-spacing: -.07em;
  line-height: 1.02;
  margin: 13px 0;
}
.story p { color: #d2ccc6; position: relative; z-index: 1; }
.story .media {
  border-radius: 20px;
  position: relative;
  z-index: 1;
  background: #2b2724;
}
.story .kicker { color: #ffab76; }

/* ---------------------------------------------------------------------------
   TROIS ETAPES
   --------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; list-style: none; }
.step {
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
}
.num {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--orange);
  background: var(--orange-soft);
  font-weight: 850;
}
.step h3 { margin: 17px 0 7px; font-size: 18px; }
.step p { margin: 0; color: var(--muted); font-size: 14px; }

/* ---------------------------------------------------------------------------
   BLOC DE TELECHARGEMENT + QR
   --------------------------------------------------------------------------- */
.download {
  display: grid;
  grid-template-columns: 1fr;
  text-align: center;
  gap: var(--sp-5);
  align-items: center;
  background: linear-gradient(120deg, #f36b21, #f58c3f);
  border-radius: 32px;
  color: var(--white);
  padding: 42px 52px;
  position: relative;
  overflow: hidden;
}
.download > div:first-child { max-width: 640px; margin: auto; }
.download h2 {
  font-size: clamp(33px, 4vw, 48px);
  letter-spacing: -.065em;
  line-height: 1.03;
  margin: 0 0 var(--sp-3);
}
.download p { color: #fff4ec; margin: 0 0 20px; }
.download .kicker { color: #fff3e8; }
.download .actions { justify-content: center; }
.download .button { background: var(--white); color: #241b16; box-shadow: none; }
.download .button:hover { background: var(--cream); }

.qr-box {
  background: var(--white);
  padding: var(--sp-3);
  border-radius: 19px;
  text-align: center;
  color: #554c45;
  box-shadow: 0 15px 35px #59270030;
  position: relative;
  z-index: 1;
  justify-self: center;
}
.qr-box .media { width: 145px; height: 145px; aspect-ratio: 1 / 1; margin: auto; }
.qr-box small { display: block; font-weight: 700; font-size: 11px; margin-top: 6px; }

/* Bouton « Télécharger l'application », sous le QR code (2026-10-22).
   Il se place DANS la carte blanche, directement sous le QR : sur ordinateur il accompagne le
   code à scanner, sur téléphone il devient l'action principale — un QR affiché sur l'appareil
   qui devrait le scanner ne sert à rien. */
.qr-get {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  min-width: 186px;
}
/* `.qr-box ...` et pas `.qr-get-...` seul : `.download p` (texte blanc, pensé pour l'aplat
   orange) est plus spécifique et rendrait ces deux lignes blanc sur blanc dans la carte. */
.qr-box .qr-get-title { margin: 0; font-size: 13px; font-weight: 750; color: var(--ink); }
/* Ecrase `.download .button` (fond blanc), qui vise les boutons posés sur l'aplat orange :
   dans la carte blanche, c'est le bouton orange habituel du site qui doit ressortir. */
.qr-box .qr-get-cta {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--sp-4);
  font-size: 14px;
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 8px 22px #f36b2133;
}
.qr-box .qr-get-cta:hover { background: #df5915; }
/* Etat indisponible : la fiche du store n'est pas encore publiée. Le bouton garde sa place et
   sa taille, mais il n'est ni cliquable ni focusable, et la phrase en dessous dit pourquoi
   (règle 10 : un état désactivé doit rester lisible ET explicable). */
.qr-box .qr-get-cta[disabled] {
  background: var(--white);
  color: var(--ink-50);
  border: 1px solid var(--line);
  box-shadow: none;
  cursor: not-allowed;
}
.qr-box .qr-get-cta[disabled]:hover { background: var(--white); transform: none; }
.qr-box .qr-get-note { margin: 0; font-size: 12px; line-height: 1.35; color: var(--muted); }

/* ---------------------------------------------------------------------------
   ADAPTATIONS D'ECRAN
   --------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .story { grid-template-columns: .65fr 1.35fr; }
}

@media (max-width: 900px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .story { grid-template-columns: 1fr; gap: 25px; }
  .download { padding: 35px; }
  .hero h1 { font-size: clamp(32px, 5vw, 45px); }

  /* SECOND DEFAUT DE LA MAQUETTE CORRIGE (voir docs/decisions.md) : entre 621px et
     ~810px, la carte de texte flottante est plus haute que la photo du heros et
     deborde sur le bandeau de confiance (jusqu'a 52px mesures). La maquette ne le
     montrait pas, la carte y etant cachee derriere la photo. La carte passe donc
     sous la photo des 900px, exactement comme elle le fait deja sous 620px dans la
     maquette, au lieu de flotter a 42vw. */
  .hero-grid { display: flex; flex-direction: column-reverse; gap: 0; }
  .hero-copy {
    position: relative;
    inset: auto;
    transform: none;
    width: auto;
    padding: 27px 21px 32px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .hero-visual { width: 100%; }
}

@media (max-width: 620px) {
  .hero h1 { font-size: 43px; }
  .hero p { font-size: 15px; }
  .trust-row { justify-content: flex-start; gap: 13px 24px; font-size: 12px; }
  .service-grid { gap: 11px; }
  .service-card { border-radius: var(--radius-sm); }
  .service-card > .media { height: 135px; }
  .card-body { padding: 14px; }
  .card-body h3 { font-size: 16px; }
  .card-body p { font-size: 12px; }
  .card-body .button { min-height: 39px; padding: 0 13px; font-size: 12px; }
  .story { padding: 29px 23px; border-radius: 25px; }
  .steps { grid-template-columns: 1fr; }
  .download { grid-template-columns: 1fr; padding: 29px 23px; gap: 23px; }
  .qr-box .media { width: 125px; height: 125px; }
  /* Sur téléphone, la carte s'élargit pour que le bouton « Télécharger l'application »
     offre une vraie cible tactile (demande du chef de projet du 2026-10-22). Plafonnée à
     360px : sur un grand téléphone, un bouton large comme l'écran se tape mal d'une main. */
  .qr-box { width: min(100%, 360px); padding: var(--sp-4); }
}