/* ===========================================================================
   MOBY 2026 — PAGES DE DETAIL (services, partenaire, inscription commercant).
   Reproduit les sections `.detail` de la maquette de reference
   (Codex/2026-10-05/je/outputs/index.html).

   DIFFERENCE AVEC LA MAQUETTE : dans la reference, ces pages sont des <div>
   masques (`display:none`) revelees par le script `showDetail()`. Ici ce sont
   de VRAIES pages Symfony (une route, un gabarit) — un contenu injecte en JS
   est invisible pour les robots d'indexation (regle 4.3). La regle
   `.detail{display:none}` et sa variante `.detail.active` ont donc disparu :
   `.detail` est le conteneur normal d'une page de detail.

   Ce fichier est fourni par le lot "fondation" pour les agents qui construisent
   ces pages. Il se charge page par page :
     {% block stylesheets %}<link rel="stylesheet" href="{{ asset('styles/moby/detail.css') }}">{% endblock %}
   Les classes `.split`, `.split-image` et `.split-copy` utilisees par la page
   Livraison vivent dans `split.css` : cette page charge `split.css` ET `detail.css`.
   `.section`, `.wrap`, `.button`, `.kicker` et `.eyebrow` viennent de `tokens.css`,
   deja chargee par le gabarit de base.
   =========================================================================== */

.detail {
  min-height: 60vh;
  padding: 68px 0 95px;
  background: linear-gradient(180deg, #fff8f2, #fff 44%);
}

.detail-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 45px;
}
/* Les `max-height` de la maquette (470px ici, 390px sous 900px, 760px sur la page
   Livraison) ont ete retirees : avec un ratio reserve, une hauteur maximale ecrase
   le ratio. Aux largeurs reelles du gabarit elles n'etaient jamais atteintes — le
   rendu est donc identique a la maquette. */
.detail-hero > .media {
  border-radius: 26px;
  background: var(--orange-soft);
}
.detail h1 {
  font-size: clamp(42px, 5.4vw, 66px);
  line-height: .99;
  letter-spacing: -.07em;
  margin: var(--sp-4) 0;
}
.detail-copy { font-size: 17px; color: var(--muted); }
.detail .button { margin-top: 14px; }
.detail .section { padding: 65px 0 0; }

.detail-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 30px;
  list-style: none;
}
.detail-points li {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
}
.detail-points strong { display: block; margin-bottom: 5px; }
.detail-points span { color: var(--muted); font-size: 13px; }

/* ---------------------------------------------------------------------------
   PAGE PARTENAIRE
   --------------------------------------------------------------------------- */
.partner-intro { max-width: 760px; margin: 28px 0 42px; }
.partner-intro h1 {
  font-size: clamp(42px, 5.4vw, 66px);
  line-height: .98;
  letter-spacing: -.07em;
  margin: var(--sp-4) 0;
}
.partner-intro p { font-size: 17px; color: var(--muted); max-width: 700px; }

.partner-visual-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: 0 0 34px;
  list-style: none;
}
.partner-visual-tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #21130e;
  box-shadow: 0 18px 42px #54280e20;
}
/* Ratio impose par la maquette (les visuels fournis mesurent 573x608). */
.partner-visual-tile > .media {
  aspect-ratio: 573 / 608;
  flex: none;
  background: #2b1a13;
}
/* Colonne flex : la zone de texte occupe toute la hauteur restante de la tuile
   (flex: 1), ce qui permet de pousser le bouton tout en bas (voir plus loin). */
.partner-tile-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
  color: var(--white);
  background: #21130e;
}
.partner-tile-copy > span {
  display: inline-block;
  margin-bottom: 9px;
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  background: var(--orange);
  font-size: 11px;
  font-weight: 850;
}
/* Titre de tuile en h2 : la maquette utilise h3 directement sous le h1, ce qui saute
   le niveau 2 (regle 9.2 / 10). Le niveau change, la taille et la graisse ne changent pas. */
.partner-tile-copy h2 {
  font-size: clamp(18px, 1.65vw, 25px);
  letter-spacing: -.045em;
  line-height: 1.05;
  margin: 0 0 var(--sp-2);
}
.partner-tile-copy p {
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.4;
  color: var(--white);
  margin: 0;
}
.partner-tile-copy ol {
  list-style: none;
  padding: 0;
  margin: 18px 0;
  display: grid;
  gap: 11px;
  counter-reset: partner-step;
}
.partner-tile-copy li {
  counter-increment: partner-step;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--sp-2);
  color: #eee4dc;
  font-size: 12px;
  line-height: 1.45;
}
.partner-tile-copy li::before {
  content: counter(partner-step, decimal-leading-zero);
  color: #ff9a62;
  font-weight: 850;
}
/* Les trois listes d'etapes n'ont pas la meme longueur : sans cette regle, les trois
   boutons flottaient a trois hauteurs differentes. La grille etire deja les tuiles a la
   meme hauteur (align-items: stretch, valeur par defaut d'une grille CSS, non surchargee
   ici), et `margin-top: auto` absorbe l'espace restant pour poser les trois boutons sur
   la meme ligne. AUCUNE hauteur fixe en pixels : le texte reel doit pouvoir grandir sans
   etre coupe. En une seule colonne (<= 620px) chaque tuile forme sa propre rangee : il n'y
   a alors aucun espace restant a absorber, donc aucun vide sous le texte.
   `align-self: flex-start` conserve la largeur naturelle du bouton, qu'un conteneur flex
   etirerait sinon sur toute la largeur de la tuile. */
.partner-tile-copy .button { margin-top: auto; align-self: flex-start; }

/* ---------------------------------------------------------------------------
   INSCRIPTION COMMERCANT
   --------------------------------------------------------------------------- */
.detail.signup { padding: 0 0 95px; }
.detail.signup > .wrap { padding-top: 54px; }

/* Visuel de couverture pleine largeur. Le ratio suit les dimensions REELLES du fichier
   (1672x941, soit environ 16/9) : c'est l'emplacement qui epouse l'image, pas l'inverse.
   Indispensable ici — le visuel est un triptyque, et un cadre plus haut que large laisserait
   des bandes vides au-dessus et en dessous (les images de ce site sont affichees en entier,
   object-fit: contain, jamais recadrees : voir styles/moby/media.css).
   L'emplacement occupe toute la largeur de l'ecran et sa hauteur se deduit du ratio : rien de
   plus a prevoir pour les petits ecrans, il reste proportionne (et moins haut qu'avant). */
.signup-cover { --ratio: 1672/941; }

.signup-layout { display: block; max-width: 900px; margin: 0 auto; }

.signup-card {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 25px;
  background: var(--white);
  box-shadow: var(--shadow);
}
.signup-card h2 { font-size: 25px; letter-spacing: -.05em; margin: 0 0 5px; }
.signup-card > p,
.signup-card form > p { font-size: 13px; color: var(--muted); }

.signup-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin: var(--sp-5) 0;
}
.signup-fields label {
  display: grid;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: #4f4943;
}
.signup-fields input,
.signup-fields select {
  width: 100%;
  height: 48px;
  border: 1px solid #e9dfd6;
  border-radius: var(--sp-3);
  background: var(--white);
  padding: 0 13px;
  font: 500 14px Inter, Arial, sans-serif;
  color: var(--ink);
}
/* La maquette ecrit `outline:none` sur ces champs. Repris tel quel, il annulait le contour
   de focus de `tokens.css` (meme specificite, feuille chargee apres) : au clavier, les cinq
   champs n'avaient plus qu'une bordure orange et une ombre a 10 % d'opacite pour signaler le
   focus. Regle 10 / WCAG 2.4.7 : on ne supprime jamais le contour sans equivalent. La
   bordure et l'ombre de la maquette restent, le contour revient par-dessus. */
.signup-fields input:focus,
.signup-fields select:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px #f36b211a;
}
.signup-wide { grid-column: 1 / -1; }

.signup-status { min-height: 38px; margin-top: 15px; line-height: 1.55; }

/* ---------------------------------------------------------------------------
   ADAPTATIONS D'ECRAN
   --------------------------------------------------------------------------- */
@media (min-width: 901px) {
  /* Page Livraison : visuel plus large que le texte (regle de la maquette). */
  .detail-livraison .detail-hero,
  .detail-livraison .split { grid-template-columns: .78fr 1.22fr; gap: 34px; }
}

@media (max-width: 900px) {
  .detail-hero { grid-template-columns: 1fr; gap: 35px; }
  .partner-visual-grid { grid-template-columns: 1fr 1fr; }
  .partner-tile-copy { padding: 18px; }
}

@media (max-width: 620px) {
  .detail { padding: 45px 0 70px; }
  .detail-hero { gap: 23px; }
  .detail h1 { font-size: 46px; }
  .detail-points { grid-template-columns: 1fr; }
  .partner-visual-grid { grid-template-columns: 1fr; }
  .partner-tile-copy { padding: 22px; }
  .signup-card { padding: 22px; }
  .signup-fields { grid-template-columns: 1fr; }
  .signup-wide { grid-column: auto; }
}