/* ============================================================
   ACCUEIL — héros photo, ouvrages, étapes, vue drone
   ------------------------------------------------------------
   Épuré le 29/07/2026. Le mur de béton dessiné au canevas, la
   grue au scroll et les silos-compteurs ont été retirés : à leur
   place, une vraie photo de chantier et des listes à filets.
   Il ne reste qu'une seule scène animée sur toute la page — la
   descente en drone, en bas.
   ============================================================ */

/* ---------- Ouverture de l'accueil (refaite le 29/07/2026, 2ᵉ passe) ----------
   Première version : titre en capitales très serrées, puis une photo de
   structure brute en 16/9 sous le texte. Jugée trop dure.
   Ici : deux colonnes. À gauche le texte, aligné EXACTEMENT sur la grille
   du reste du site ; à droite la photo, pleine hauteur, jusqu'au bord de
   l'écran — c'est ce débord qui ouvre la page au lieu de l'encadrer.
   Aucun texte posé sur l'image, aucun voile : rien à compenser.

   ⚠️ L'alignement à gauche se fait avec un padding en POURCENTAGE sur la
      section, dont le parent est <main> : 100 % = largeur du document.
      En `vw` on récupérerait la largeur de la fenêtre, barre de défilement
      comprise, et le texte serait décalé de ~7 px par rapport aux sections
      du dessous. Le pourcentage évite ce piège. */
.ouverture-accueil{
  padding-left:max(var(--marge), calc((100% - 1240px) / 2));
}
.ouverture-accueil__grille{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,4.5rem);
  align-items:stretch;
}
.ouverture-accueil__texte{
  align-self:center;
  max-width:34rem;
  padding-block:clamp(3.5rem,7vw,5.5rem);
}
.ouverture-accueil__texte .chapo{ margin-top:1.5rem; max-width:46ch; }
.ouverture-accueil h1{ max-width:16ch; }

.ouverture-accueil__image{ margin:0; }
.ouverture-accueil__image img{
  width:100%; height:100%;
  min-height:min(74vh, 720px);
  object-fit:cover;
}

/* La provenance de la photo, discrète, sous le texte : c'est un vrai
   chantier, autant le dire et y renvoyer. */
.ouverture-accueil__source{
  margin:clamp(2rem,4vw,2.75rem) 0 0;
  padding-top:1.1rem;
  border-top:1px solid var(--trait);
}
.ouverture-accueil__source a{
  font-family:var(--f-cote); font-size:.68rem; letter-spacing:.08em;
  color:var(--beton); text-decoration:none;
  transition:color .2s;
}
.ouverture-accueil__source a:hover{ color:var(--graphite); }

@media (max-width:860px){
  /* en portrait, la photo passe sous le texte et reprend toute la largeur */
  .ouverture-accueil{ padding-left:0; }
  .ouverture-accueil__grille{ grid-template-columns:1fr; gap:clamp(2rem,6vw,2.75rem); }
  .ouverture-accueil__texte{
    max-width:none;
    padding:clamp(2.5rem,8vw,3.5rem) var(--marge) 0;
  }
  .ouverture-accueil__image img{ min-height:0; aspect-ratio:4/3; }
}

/* ---------- Les cinq étapes ----------
   Cinq colonnes qui se lisent de gauche à droite : la séquence est
   dans la mise en page, il n'y a rien à décorer pour la dire.
   Les numéros sont légitimes ici — c'est un ordre, pas une liste. */
.etapes{
  list-style:none; margin:0; padding:0;
  display:grid; gap:0 var(--gouttiere);
  grid-template-columns:repeat(5, minmax(0,1fr));
}
.etapes > li{
  padding-top:1.1rem;
  border-top:1px solid var(--graphite);
}
.etapes .num{
  display:block; margin-bottom:.7rem;
  font-family:var(--f-cote); font-size:.68rem; letter-spacing:.12em;
  color:var(--beton);
}
.etapes h3{ margin-bottom:.5rem; }
.etapes p{ margin:0; font-size:.94rem; line-height:1.6; }
@media (max-width:1000px){
  .etapes{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem var(--gouttiere); }
}
@media (max-width:520px){
  .etapes{ grid-template-columns:1fr; gap:1.6rem; }
}

/* ---------- La descente en drone — signature du site ----------
   Scène collante pilotée au scroll. 320vh → 260vh : la course a
   été raccourcie avec le reste de la page, l'amorti de la caméra
   (drone3d.js) absorbe la différence. */
.drone{ background:var(--blanc); }
.drone__piste{ height:220vh; position:relative; }
.drone__fixe{
  position:sticky; top:var(--entete-h);
  height:calc(100dvh - var(--entete-h));
  overflow:hidden; background:var(--blanc);
}
.drone__ciel{ position:absolute; inset:0; overflow:hidden; }
.drone__svg, .drone__toile{ width:100%; height:100%; display:block; }

/* Un seul voile, à gauche, là où le texte se pose. Ni ombre portée sur
   les lettres, ni cadre flouté derrière le paragraphe : le dégradé fait
   tout le travail de lisibilité. */
.drone__fixe::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(96deg,
    rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 24%,
    rgba(255,255,255,.35) 46%, transparent 62%);
}
.drone__hud{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:space-between;
  padding-block:clamp(2rem,5vh,3.5rem);
  pointer-events:none;
}
.drone__texte{ max-width:min(100%, 34rem); pointer-events:auto; }
.drone__texte .chapo{ margin-top:1.4rem; max-width:40ch; }

/* Trois valeurs réelles de la caméra, en ligne, séparées par un filet */
.drone__instruments{
  display:flex; flex-wrap:wrap; margin:0;
  align-self:flex-start;
  border-left:1px solid var(--trait-fort);
}
.drone__instruments > div{ padding:.15rem 1.15rem; border-right:1px solid var(--trait-fort); }
.drone__instruments dt{
  font-family:var(--f-cote); font-size:.6rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--beton);
}
.drone__instruments dd{
  margin:.15rem 0 0; font-family:var(--f-cote); font-weight:500;
  font-size:.98rem; color:var(--graphite);
}

@media (max-width:860px){
  .drone__piste{ height:220vh; }
  .drone__texte .chapo{ display:none; }
  .drone__hud{ justify-content:flex-start; gap:1.2rem; }
  .drone__instruments{ margin-top:auto; }
}
@media (prefers-reduced-motion: reduce){
  .drone__piste{ height:auto; }
  .drone__fixe{ position:static; height:auto; padding-block:3.5rem; }
  .drone__ciel{ position:relative; height:44vh; margin-bottom:2rem; }
  .drone__fixe::before{ display:none; }
}