/* ==========================================================================
   AU VENT DANS LES BRANCHES — Styles propres à la page d'accueil
   --------------------------------------------------------------------------
   Ce fichier ne contient QUE ce qui est spécifique à l'accueil.
   Tout ce qui est commun (couleurs, header, boutons, footer) est dans
   style.css, qui est chargé avant celui-ci.
   ========================================================================== */


/* ==========================================================================
   HERO — titre, texte de présentation et illustration de l'arbre
   ========================================================================== */

/* Le retrait du haut est plus important que celui du bas : la forme blanche
   remonte au-dessus du texte (voir l'inset de .hero__forme), et sans cette
   réserve son bord venait toucher le logo du header. */
.hero {
  position: relative;
  padding-block: var(--espace-l) var(--espace-m);
}

/* La colonne de gauche est un peu plus large qu'auparavant : elle doit
   maintenant loger les deux boutons côte à côte, et non plus seulement le
   texte. */
.hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--espace-s);
  align-items: center;
}

/* --- Ordre des plans ---
   Trois plans, du fond vers l'avant :

     1. la forme blanche       (z-index -1)
     2. l'arbre                (z-index  1)
     3. le texte et les boutons (z-index 2)

   L'arbre passe donc PAR-DESSUS la forme blanche — c'est ce qui l'intègre au
   bloc au lieu de le poser à côté — mais reste DERRIÈRE le texte, qu'il
   chevauche largement. Sa nouvelle version a un fond transparent, sans quoi
   rien de tout cela ne serait possible : l'ancienne, au fond crème opaque,
   devait obligatoirement passer sous la forme.

   .hero__contenu est en « relative » sans z-index : il sert de repère à la
   forme sans créer de plan isolé, ce qui permet à l'arbre de venir se
   glisser entre elle et le texte. */

.hero__contenu {
  position: relative;
}

.hero__illustration {
  position: relative;
  z-index: 1;
  /* Marges négatives des deux côtés : à gauche l'arbre vient mordre sur la
     forme blanche, à droite il gagne la taille qui lui permet d'équilibrer
     le hero. Le débordement latéral est absorbé par l'overflow-x du body.
     C'est le retrait de gauche qui donne sa taille à l'arbre : on l'agrandit
     par la gauche et non par la droite, sinon la cime sort de l'écran. */
  margin-left: -30%;
  margin-right: -7%;
}

/* Entre 901 et 1150 px, la colonne de texte est trop étroite pour que l'arbre
   agrandi tienne à sa droite : ses branches viendraient passer derrière les
   paragraphes. Sur cette plage seulement, il reprend sa taille d'origine.
   Les deux bornes sont explicites pour ne pas déborder sur la règle mobile
   plus bas, qui remet le retrait à zéro. */
@media (min-width: 901px) and (max-width: 1150px) {
  .hero__illustration {
    margin-left: -17%;
  }
}

/* Le texte et les boutons repassent devant l'arbre. */
.hero__titre,
.hero__trait,
.hero__texte,
.hero__boutons {
  position: relative;
  z-index: 2;
}

/* --- Forme organique décorative ---
   Positionnée par rapport au bloc de texte avec des retraits négatifs
   (inset : haut / droite / bas / gauche). Elle est donc toujours plus grande
   que le texte, quel que soit le nombre de lignes.
   z-index -1 la place derrière le texte et les boutons. */
.hero__forme {
  position: absolute;
  inset: -12% -22% -12% -46%;
  background: url("../images/forme-organique.webp") no-repeat center / 100% 100%;
  z-index: -1;
  pointer-events: none;
}

/* --- Colonne de gauche --- */

.hero__titre {
  max-width: 12ch; /* force le retour à la ligne après « dans », comme la maquette */
  margin-bottom: 0;
}

/* Petit trait jaune sous le titre. */
.hero__trait {
  display: block;
  /* Même largeur que le filet des pages généralistes (.titre-page__filet,
     page-generaliste.css) pour que tous les traits du site soient identiques. */
  width: 58px;
  height: 3px;
  margin-block: var(--espace-s);
  background-color: var(--cta);
  border-radius: 2px;
}

.hero__texte p {
  max-width: 46ch; /* longueur de ligne confortable à lire */
  margin-bottom: var(--espace-s);
}

.hero__texte p:last-child {
  margin-bottom: 0;
}

/* --- Les deux boutons, directement sous le texte ---
   « 1 1 0 » leur donne la même largeur quel que soit leur libellé, et les
   maintient côte à côte tant que la place le permet. */
.hero__boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-m);
  /* Un cran de plus que --espace-m : collés au texte, les boutons donnaient
     l'impression d'appartenir au dernier paragraphe. */
  margin-top: calc(var(--espace-m) + var(--espace-s));
}

.hero__boutons .bouton {
  flex: 1 1 0;
  min-width: 220px;
}

/* Le second libellé est deux fois plus long que le premier : on lui donne un
   peu plus de largeur, sinon il partait sur trois lignes pendant que le
   premier n'en occupait qu'une. */
.hero__boutons .bouton:last-child {
  flex-grow: 1.3;
}

/* --- Colonne de droite --- */

.hero__illustration img {
  width: 100%;
}


/* ==========================================================================
   CITATION
   ========================================================================== */

/* Retrait resserré : la citation et la photo qui la suit remontent vers le
   hero, qui est lui-même plus compact. Le retrait du haut reste un peu plus
   généreux pour détacher la citation des boutons. */
.citation {
  padding-block: calc(var(--espace-m) + var(--espace-s)) var(--espace-m);
}

.citation__contenu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-m);
}

.citation__texte {
  margin: 0;
  font-family: var(--titres);
  /* 500 et non 600 : penché, le semi-gras alourdissait la ligne. Reste une
     graisse autorisée par la charte. */
  font-weight: var(--moyen);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  /* Italique : c'est une citation, pas un titre de section. Quicksand n'ayant
     pas de fonte italique dessinée, le navigateur la penche lui-même — sur
     cette police géométrique le résultat reste propre. */
  font-style: italic;
  text-align: center;
}

/* Petites fleurs de part et d'autre de la citation : les mêmes que celles
   qui précèdent les sous-titres du site, et à la même taille. Les feuilles
   utilisées auparavant, bien plus grandes, chargeaient trop la ligne. */
.citation__fleur {
  width: 34px;
  flex-shrink: 0;
}


/* ==========================================================================
   LA SALLE — grande photo panoramique
   ========================================================================== */

/* Dernière section de la page : c'est son retrait qui sépare la photo du
   trait du footer, celui-ci n'ayant plus de marge au-dessus. */
.salle {
  padding-bottom: var(--espace-xl);
}

.salle img {
  width: 100%;
  border-radius: var(--rayon-image);
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* --- Tablette : le hero passe sur une seule colonne --- */
@media (max-width: 900px) {

  .hero {
    padding-top: var(--espace-m);
  }

  .hero__grille {
    grid-template-columns: 1fr;
    gap: var(--espace-s);
  }

  /* On remonte l'illustration entre le titre et le texte : l'arbre reste
     l'élément d'accroche visuel, comme sur desktop.
     Sur une seule colonne, il n'a plus à mordre vers la gauche. */
  .hero__illustration {
    order: -1;
    margin-left: 0;
  }

  .hero__illustration img {
    max-width: 460px;
    margin-inline: auto;
  }

  /* La forme suit toujours le bloc de texte : on élargit simplement les
     débordements latéraux pour qu'elle atteigne les bords de l'écran. */
  .hero__forme {
    inset: -10% -26% -10% -26%;
  }

  .hero__titre {
    max-width: none;
  }

  /* Ligne plus longue que sur desktop, mais pas libre pour autant : le blanc
     dessiné dans la forme s'arrête avant le bord de sa boîte, et les fins de
     lignes sortaient du blanc sur le crème de la page. */
  .hero__texte p {
    max-width: 58ch;
  }

  /* Les boutons s'arrêtent où s'arrête le texte : sur toute la largeur du
     conteneur, le bouton jaune, opaque, débordait du blanc sur le crème. */
  .hero__boutons {
    max-width: 64ch;
  }
}

/* --- Mobile --- */
@media (max-width: 600px) {

  .hero__trait {
    margin-block: var(--espace-s);
  }

  /* Les deux boutons passent l'un sous l'autre : côte à côte, aucun des deux
     libellés ne tenait sur une largeur de 375 px. Empilés, ils ont besoin de
     plus d'air entre eux qu'ils n'en avaient côte à côte. */
  .hero__boutons {
    gap: calc(var(--espace-s) + var(--espace-xs));
  }

  .hero__boutons .bouton {
    flex-basis: 100%;
  }

  .citation__contenu {
    gap: var(--espace-s);
  }

  .citation__fleur {
    width: 28px;
  }

  .salle img {
    border-radius: var(--rayon);
  }
}