/* Page d'accueil de la maison — hérite des jetons et des boutons de style.css.
   Signature de la page : les trois premières lignes, une par occasion. */

.accueil-hero { padding: 8rem 0 5rem; }
.accueil-hero h1 {
  font-size: clamp(2.4rem, 6.2vw, 4.4rem); font-weight: 600; line-height: 1.04;
  letter-spacing: -0.028em; margin-bottom: 1.6rem; text-wrap: balance; max-width: 15em;
}
.accueil-hero h1 em { font-style: italic; font-weight: 400; color: var(--filet); }
.accueil-hero .sous { font-size: clamp(1.06rem, 1.6vw, 1.24rem); color: var(--texte-doux); max-width: 34em; margin-bottom: 2.4rem; }
.accueil-hero .note-hero { margin-top: 1.2rem; font-size: 0.88rem; color: var(--texte-doux); }

/* Le double filet rouge : la signature de la maison, jamais un aplat. */
.filet-double { border-top: 3px double var(--filet); width: 4.5rem; margin-bottom: 1.6rem; }

/* Les portes ne tiennent pas dans la colonne de lecture : elles ont leur propre largeur. */
/* padding-inline, jamais le raccourci : `padding: 0 1.6rem` sur une <section> ecrase le
   `padding: 7rem 0` de style.css et colle les sections les unes aux autres. */
.ample { max-width: 1100px; margin: 0 auto; padding-inline: 1.6rem; }

/* L'en-tête est en .contenu (680 px) : sans ça la marque démarre 210 px à droite du h1. */
.site .contenu { max-width: 1100px; }

/* ————— Les trois portes ————— */
.portes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(6, auto); gap: 2.4rem; margin-top: 3rem;
}
.porte {
  display: grid; grid-row: span 6; grid-template-rows: subgrid; gap: 1rem;
  padding-top: 1.4rem; border-top: 3px solid var(--porte);
}
@supports not (grid-template-rows: subgrid) {
  .porte { display: flex; flex-direction: column; }
  .porte .entrer { margin-top: auto; }
  .porte .attente:empty { display: none; }
}
.porte .occasion { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.015em; }
.porte .etiquette {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--texte-doux); margin-bottom: -0.5rem;
}
.porte .attente { font-size: 0.86rem; color: var(--texte-doux); font-style: italic; }
.reprise { font-size: 0.94rem; color: var(--texte-doux); margin-top: 2.8rem; }
.porte .promesse { color: var(--texte-doux); font-size: 1rem; }
/* La première ligne : le produit lui-même, montré plutôt que promis. */
.porte .ligne {
  font-style: italic; font-size: 1.12rem; line-height: 1.62; color: var(--encre);
  padding-left: 1.1rem; border-left: 2px solid var(--porte); margin: 0.2rem 0 0.4rem;
}
.porte .entrer {
  align-self: start; font-size: 1rem; font-weight: 600;
  color: var(--porte); text-decoration: none; border-bottom: 1px solid transparent;
  transition: border-color 200ms cubic-bezier(0.25, 0.6, 0.3, 1);
}
.porte .entrer:hover { border-bottom-color: currentColor; }
.porte .entrer:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }

/* ————— La méthode : .etapes fournit la grille, on n'ajoute que la numérotation ————— */
.numerotee > div { display: flex; gap: 1.4rem; align-items: baseline; }
.numerotee .num { color: var(--filet); font-size: 1.9rem; font-style: italic; min-width: 2rem; }
.numerotee p { font-size: 1.06rem; max-width: 42em; }

/* Le bas de page ouvre les portes au lieu de renvoyer le visiteur vers le haut. */
.liens-occasions { display: flex; flex-wrap: wrap; gap: 0.9rem 2rem; margin-top: 0.6rem; }
.liens-occasions a {
  font-size: 1.06rem; font-weight: 600; color: var(--action); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color 200ms cubic-bezier(0.25, 0.6, 0.3, 1);
}
.liens-occasions a:hover { border-bottom-color: currentColor; }
.liens-occasions a:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }

/* ————— Ce qui rassure ————— */
.garanties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem; margin-top: 2.2rem; }
.garanties p { font-size: 0.98rem; color: var(--texte-doux); padding-top: 1rem; border-top: 1px solid var(--ligne); }
.garanties strong { display: block; color: var(--encre); font-size: 1.04rem; margin-bottom: 0.3rem; }

@media (max-width: 860px) {
  .portes, .garanties { grid-template-columns: 1fr; gap: 2.6rem; }
  /* Une porte par ligne : plus de rangées communes, donc plus de vide à réserver. */
  .porte .attente:empty { display: none; }
  .accueil-hero { padding: 6rem 0 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .porte .entrer, .liens-occasions a { transition: none; }
}