/* home.css — PROPRIÉTAIRE : dev « accueil ». Mise en page de l'accueil (DESIGN.md § 7, sections 00 à 05).
   Les composants (boutons, cadres, étiquettes, offres, étapes, formulaire) viennent de components.css ;
   ici seulement la composition propre à la page : hero, stages de captures, colonnes des sections.
   .stage (navigateur + téléphone), .proj__frame, .parcours et .contact__* sont dans components.css. */

/* ---------- 00. Hero (typographique) ---------- */
/* Décision du 8 septembre : plus d'illustration au paragraphe 0. Sans capture, le hero ne doit pas se replier
   sur une colonne et laisser une demi-page vide à 1440 px — c'était le pire défaut de la page.
   Quatre blocs, une grille :
     .dim          la cote « 00 — JRS COMPUTING · MONTÉLIMAR », d'un bord à l'autre ;
     .hero__title  le titre à l'échelle display, les trois lignes posées à la main ;
     .hero__say    le sous-titre, le bouton principal, le téléphone, le renvoi vers les projets ;
     .hero__prices les deux montants — la première question d'un commerçant.
   Sous 900 px : tout s'empile. De 900 à 1200 px : titre pleine largeur, puis [ ce qu'on dit | les tarifs ].
   À partir de 1200 px (largeur utile plafonnée à 1 104 px) : les tarifs remontent à hauteur du titre, qui
   n'occupe plus que la colonne de gauche — 693 px de titre + 64 px de gouttière + 336 px de tarifs = 99 %
   de la largeur utile dès la première ligne, et le bouton principal reste au-dessus de la ligne de flottaison.
   Écarté : un titre de 112 px pleine largeur (il tenait 80 % de la largeur mais poussait l'appel à l'action
   à 824 px, sous la ligne de flottaison d'un portable) ; une colonne droite portant un sommaire de la page
   (elle doublerait la navigation de l'en-tête) ; un titre centré (tout le site est aligné à gauche). */
.hero {
  position: relative;
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) clamp(3.5rem, 2.5rem + 4vw, 6rem);
  overflow: hidden;
}

/* Trame de points : bas-droite du hero, là où la composition laisse du papier (sous le pavé des tarifs).
   Fondue vers le haut et vers la gauche pour ne jamais courir sous le texte. */
.hero__dots {
  inset: auto 0 0 auto;
  width: min(34rem, 55%);
  height: min(20rem, 55%);
  -webkit-mask-image: linear-gradient(to top, #000, transparent), linear-gradient(to right, transparent, #000 45%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to top, #000, transparent), linear-gradient(to right, transparent, #000 45%);
  mask-composite: intersect;
}

.hero__inner {
  position: relative;
}

.hero__title {
  margin-top: var(--s-6);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
  font-weight: var(--fw-display);
}

.hero__say {
  margin-top: var(--s-7);
}

.hero__lead {
  max-width: var(--measure);
}

.hero__actions {
  margin-top: var(--s-6);
}

.hero__secondary {
  margin-top: var(--s-4);
}

/* Les deux montants : le nom de l'offre en étiquette mono, le montant en mono plus grande, sur le fond
   d'accent — le pavé de la maquette validée, en lisible (accent sur accent-tint : 5,0:1). */
.hero__prices {
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-3);
  align-self: start;
}

/* Les montants et la ligne de coût complet (OFF-1) forment un seul bloc. Empilé sous les boutons, on le
   borne : une étiquette de 750 px de large pour huit mots ne se lit pas comme un tarif. */
.hero__aside {
  margin-top: var(--s-6);
  max-width: 26rem;
}

.hero__cost {
  margin-top: var(--s-3);
  color: var(--ink-2);
}

/* Réassurance sous les boutons (ACC-4) : une ligne de texte, pas un bandeau de piliers. */
.hero__assure {
  margin-top: var(--s-5);
  max-width: var(--measure);
  color: var(--ink-2);
}

.hero__price {
  display: block;
  padding: var(--s-3) var(--s-4);
}

.hero__price-name {
  display: block;
  color: var(--accent);
}

.hero__price-value {
  display: block;
  margin-top: var(--s-1);
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: var(--fw-ui);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (min-width: 56.25rem) {
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
    column-gap: var(--s-8);
    align-items: start;
  }
  .hero__inner > .dim,
  .hero__title {
    grid-column: 1 / -1;
  }
  .hero__say {
    grid-column: 1;
    /* Un filet sépare le titre de ce qui se lit ensuite, comme sous les titres de section. */
    padding-top: var(--s-6);
    border-top: 1px solid var(--line);
  }
  .hero__aside {
    grid-column: 2;
    grid-row: 3;
    margin-top: var(--s-7);
    max-width: none;
  }
}

@media (min-width: 75rem) {
  .hero__title {
    grid-column: 1;
  }
  .hero__aside {
    grid-row: 2 / span 2;
    /* Aligné sur la hauteur de capitale du titre, pas sur le haut de sa boîte. */
    margin-top: calc(var(--s-6) + 0.75rem);
  }
}

/* ---------- Têtes de section ---------- */
.section__head .lead {
  margin-top: var(--s-4);
}

/* ---------- 01. Offres ---------- */
.offer__head > div > .label {
  margin-bottom: var(--s-2);
}

.offer__title {
  max-width: 22em;
}

.price {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-1);
  background: var(--accent-tint);
}

.price .label {
  color: var(--accent);
}

.offer__body {
  margin-top: var(--s-6);
  row-gap: var(--s-6);
}

.offer__list h4 {
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-4);
}

.offer__list-note {
  margin: calc(-1 * var(--s-2)) 0 var(--s-4);
}

/* « Ce qui est compris » : bloc repliable natif (<details>/<summary>).
   Ouvert dans le HTML — donc entier pour un lecteur d'écran, pour un moteur de recherche et sans
   JavaScript ; motion.js le replie au chargement sous 640 px seulement, pour que la section 02
   (les projets) arrive plus tôt sur un téléphone. Le filet et l'entête restent ceux de .offer__list h4 :
   ils passent simplement sur le <summary>, qui devient la cible cliquable (48 px de haut). */
.offer__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  list-style: none;
  cursor: pointer;
  padding-block: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-4);
}

/* Replié, le filet du <summary> est le dernier trait du bloc : sa marge basse ouvrirait un vide. */
.offer__included:not([open]) > .offer__summary {
  margin-bottom: 0;
}

.offer__summary::-webkit-details-marker {
  display: none;
}

/* Le filet est porté par le <summary> : le h4 le perd, sinon il y en aurait deux. */
.offer__list .offer__summary h4 {
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: 0;
}

/* L'état plié/déplié est déjà porté par <summary> pour les technologies d'assistance ; ce repère est
   la redondance visuelle, en mono comme le reste des détails du site. */
.offer__summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-text);
  font-weight: var(--fw-ui);
  color: var(--accent);
}

.offer__included[open] > .offer__summary::after {
  content: "−";
}

@media (hover: hover) and (pointer: fine) {
  .offer__summary:hover h4 {
    color: var(--accent);
  }
}

.offer__list li {
  text-wrap: pretty;
}

.offer__foot {
  padding-top: var(--s-7);
  border-top: 1px solid var(--line);
}

.offer__tva {
  margin-top: var(--s-4);
  color: var(--ink-3);
  max-width: var(--measure);
}

/* ---------- 02. Projets ---------- */
.projets {
  margin: 0;
}

.proj__side {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.proj__meta {
  max-width: 11rem;
  line-height: 1.5;
}

.proj__title {
  margin-top: 0;
}

.proj__sentence {
  margin-top: var(--s-3);
  color: var(--ink-2);
  max-width: 34rem;
}

.proj__more {
  margin-top: var(--s-5);
}

.proj__visual {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  min-width: 0;
}

.proj__visual > * {
  width: 100%;
}

/* Cadre tablette du bloc « écrans simples » : plus étroit que les cadres navigateur, sinon il écrase les autres cartes. */
@media (min-width: 40rem) {
  .proj__frame--wide .frame--tablet {
    max-width: 27rem;
    margin-left: auto;
  }
}

@media (max-width: 56.24rem) {
  .proj__grid {
    row-gap: var(--s-5);
  }
  .proj__side {
    flex-direction: row;
    align-items: baseline;
    gap: var(--s-4);
  }
  .proj__index {
    font-size: 2rem;
  }
  .proj__visual {
    justify-content: flex-start;
    margin-top: var(--s-2);
  }
}

@media (min-width: 40rem) and (max-width: 56.24rem) {
  .proj__visual > * {
    max-width: 36rem;
  }
}

/* Vignettes des cartes : à partir de 640 px la capture desktop dans son cadre ; en dessous, la capture NATIVE
   mobile du même produit dans un cadre téléphone de 220 px. Une capture de 1440 px réduite à 350 px n'est pas
   une preuve, c'est une texture (même raisonnement que le hero, DESIGN.md § 7). La variante masquée est en
   `display: none` : elle sort de l'arbre d'accessibilité et, en chargement paresseux, n'est jamais téléchargée. */
.proj__frame--narrow {
  display: none;
}

@media (max-width: 39.99rem) {
  .proj__frame--wide {
    display: none;
  }
  .proj__frame--narrow {
    display: block;
  }
  .proj__visual {
    justify-content: center;
  }
  .proj__frame--narrow,
  .proj__frame {
    width: auto;
  }
}

.figures-block {
  margin-top: var(--s-9);
}

.figures__title {
  margin-bottom: var(--s-3);
}

/* ---------- 03. Comment ça se passe ---------- */
/* La tête de section est désormais pleine largeur (`.section__head`) et les étapes occupent les douze colonnes :
   la colonne gauche collante ne portait qu'un h2 et un chapeau, et restait vide sur près de 1 500 px à 1440 px.
   La mise en page interne d'une étape est dans components.css (.step). */
.parcours__grid {
  row-gap: var(--s-7);
}

.step h3 {
  margin-top: var(--s-1);
}

.step__lead {
  margin-top: var(--s-2);
  color: var(--ink-2);
}

.step__cols > div > p {
  text-wrap: pretty;
}

/* ---------- Ce qui vous prend du temps aujourd'hui (v2.1.0) : prose et puces carrées, comme le reste du site ---------- */
.situations__list {
  margin-top: var(--s-6);
}

.situations__end,
.situations__auto {
  margin-top: var(--s-5);
}

.steps__free {
  margin-top: var(--s-4);
  font-weight: var(--fw-ui);
}

/* ---------- Coût complet et objections, au pied des offres ---------- */
.offer__foot-title {
  margin-bottom: var(--s-3);
}

.faq {
  margin-top: var(--s-8);
  padding-top: var(--s-7);
  border-top: 1px solid var(--line);
}

.faq__grid {
  margin-top: var(--s-6);
  row-gap: var(--s-6);
}

.faq__item p {
  margin-top: var(--s-3);
  max-width: var(--measure);
  text-wrap: pretty;
}

.faq__cta {
  margin-top: var(--s-6);
}

/* Légende de la capture du bloc « Des écrans que tout le monde ouvre ». */
.proj__legend {
  margin-top: var(--s-4);
  color: var(--ink-2);
  max-width: 34rem;
}