/* ================================================================
   PAGE D'ACCUEIL (vue app/Views/pages/home.php)
   Haut de page sur fond clair : le texte à gauche, le sol en coupe à droite
   (dessin : app/Views/pages/accueil_coupe_sol_view.php).
   Le petit jeu caché a ses propres fichiers : easter_egg_accueil.css (ici, dans assets/css) et assets/js/easter_egg_accueil.js.
   Même mise en page que les accueils de Requaconsult et RequaCarto.
   ================================================================ */
.accueil-intro {
  --fond-intro: #f4f5f2;            /* fond du haut de page : gris très clair */
  --encre: #1f2523;                 /* texte principal */
  --encre-douce: #5d6662;           /* texte secondaire */

  background-color: var(--fond-intro);
  color: var(--encre);
  padding: 4.5rem 0 4rem;
}

/* Texte à gauche | dessin à droite */
.intro-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 2.5rem 4rem;
  align-items: center;
}

.accueil-intro .intro-titre {
  font-size: clamp(2.75rem, 5.5vw, 4.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--encre);
  margin-bottom: 1.25rem;
}

/* L'icône de la carte, en vert REQUASUD */
.intro-titre .bi {
  color: var(--rqs-green-primary);
}

.intro-sous-titre {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.intro-texte {
  font-size: 1.1rem;
  color: var(--encre-douce);
  max-width: 34rem;
  margin-bottom: 2rem;
}

/* Le dessin occupe toute la largeur de sa colonne, sa hauteur suit (viewBox 800 x 560) */
.coupe {
  display: block;
  width: 100%;
  height: auto;
}


/* ----- Le dessin ----- */
.coupe .racines path {
  fill: none;
  stroke: #e3d3b0;
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.6;
}

.coupe .herbes path {
  fill: none;
  stroke: #8fae72;
  stroke-width: 3;
  stroke-linecap: round;
}

.coupe .herbes .herbe-foncee { stroke: #6f9858; }

.coupe .ble-tige {
  fill: none;
  stroke: #c9a64f;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.coupe .ble-epi {
  fill: #e0c271;
  stroke: #c9a64f;
  stroke-width: 1.5;
}

.coupe .trou { fill: #2e2118; }

.coupe .tariere-tige    { fill: #a7aeab; stroke: #6c7470; stroke-width: 1.5; }
.coupe .tariere-poignee { fill: #9b6b43; stroke: #6e4a2c; stroke-width: 1.5; }
.coupe .tariere-gouge   { fill: #7c8580; stroke: #59615d; stroke-width: 1.5; }

/* Les pastilles des paramètres : un rond blanc cerclé d'encre (comme les points de prélèvement de RequaCarto) */
.coupe .pastille circle {
  fill: #ffffff;
  stroke: var(--encre);
  stroke-width: 3;
}

.coupe .pastille text {
  font-size: 21px;
  font-weight: 700;
  fill: var(--encre);
  text-anchor: middle;
}


/* ----- L'animation au chargement (une seule fois) -----
   1. la tarière descend dans le sol, s'arrête un instant et remonte (2,4 s, à partir de 0,4 s) ;
   2. quand elle remonte, la carotte apparaît dans la gouge et le trou dans le sol ;
   3. puis les pastilles sortent de la carotte une à une (--ordre) et vont se poser en arc de cercle.
   « both » : pendant l'attente, l'image 0 % s'applique (tarière en haut, carotte, trou et pastilles invisibles). */
.coupe .tariere {
  animation: tariere-plonge 2.4s ease-in-out 0.4s both;
}

.coupe .carotte,
.coupe .trou {
  animation: apparait-a-la-remontee 2.4s linear 0.4s both;
}

/* transform-box + transform-origin : la pastille grandit depuis son centre (sinon depuis le coin du dessin) */
.coupe .pastille {
  transform-box: fill-box;
  transform-origin: center;
  animation: pastille-sort 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) both;
  animation-delay: calc(2.8s + var(--ordre) * 0.14s);
}

/* 170 : la descente de la tarière, aussi écrite dans accueil_coupe_sol_view.php ($tariere_descente)
   et dans easter_egg_accueil.css (@keyframes tariere-replonge) */
@keyframes tariere-plonge {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(170px); }
  55%  { transform: translateY(170px); }
  100% { transform: translateY(0); }
}

@keyframes apparait-a-la-remontee {
  0%, 55%   { opacity: 0; }
  56%, 100% { opacity: 1; }
}

@keyframes pastille-sort {
  from { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
  to   { transform: none; opacity: 1; }
}


/* ---------- Tablette et téléphone : le dessin passe sous le texte ---------- */
@media (max-width: 992px) {
  .accueil-intro { padding: 3rem 0 2.5rem; }
  .intro-grille { grid-template-columns: 1fr; }
  .intro-texte { max-width: none; }
}

@media (max-width: 576px) {
  .intro-sous-titre { font-size: 1.15rem; }
  .intro-texte { font-size: 1rem; }
}

/* Mouvements réduits (réglage du système) : le dessin est affiché d'emblée dans son état final, sans animation */
@media (prefers-reduced-motion: reduce) {
  .coupe .tariere,
  .coupe .carotte,
  .coupe .trou,
  .coupe .pastille { animation: none; }
}