/* ==========================================================================
   Prestations — la suite du film
   Le hero, le bandeau partenaires et le protocole sont sombres. Cette section
   reste dans le même noir : le passage au crème à cartes cassait la tension
   du hero. Le crème reprend plus bas, quand on entre dans l'offre et le prix.
   Aucune marge négative, aucun débordement calculé : chaque bande occupe la
   largeur de la fenêtre, l'image touche le bord parce qu'elle est dans la
   moitié qui touche le bord.
   ========================================================================== */

.presta {
  --noir: #101010;
  --noir-creuse: #161616;
  --blanc: #fafafa;
  --blanc-mut: rgba(250, 250, 250, 0.7);
  --blanc-fnt: rgba(250, 250, 250, 0.45);
  --or: #c9a34a;
  --or-voile: rgba(201, 163, 74, 0.1);
  --filet: rgba(250, 250, 250, 0.12);
  --filet-fort: rgba(250, 250, 250, 0.26);
  --gut: clamp(22px, 5vw, 76px);
  --ez: cubic-bezier(.4, 0, .2, 1);

  position: relative;
  z-index: 2;
  background: var(--noir);
  color: var(--blanc);
  padding-top: clamp(72px, 11vh, 150px);
}

/* ---- Ouverture : alignée à gauche, comme la signature du hero ----------- */

.presta-head {
  width: min(1220px, 100%);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.presta-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-b);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--or);
}

.presta-eyebrow::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--or);
}

.presta-h2 {
  max-width: 16ch;
  margin-top: 26px;
  font-family: var(--font-h);
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--blanc);
}

.presta-h2 em {
  font-style: italic;
  color: var(--or);
}

.presta-lead {
  max-width: 46ch;
  margin-top: 26px;
  font-family: var(--font-b);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--blanc-mut);
}

/* ---- Bandes ------------------------------------------------------------- */

.presta-bande {
  display: grid;
  margin-top: clamp(56px, 8vh, 110px);
}

.presta-media {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--noir-creuse);
}

.presta-media img {
  display: block;
  width: 100%;
  height: clamp(300px, 46vh, 420px);
  object-fit: cover;
  transform: scale(1);
  transition: transform .8s var(--ez);
}

/* Le noir revient dans l'image par le bord intérieur : la bande se fond dans
   le fond au lieu de poser un rectangle photo. */
.presta-fondu {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(16,16,16,0.55), rgba(16,16,16,0.1) 45%, rgba(16,16,16,0.75));
}

.presta-bande:hover .presta-media img { transform: scale(1.04); }

.presta-cap {
  position: absolute;
  z-index: 2;
  left: var(--gut);
  right: var(--gut);
  bottom: 18px;
  font-family: var(--font-b);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 250, 250, 0.72);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
}

.presta-txt {
  max-width: 46ch;
  padding: clamp(32px, 5vh, 56px) var(--gut) 0;
}

.presta-num {
  display: block;
  font-family: var(--font-b);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--or);
}

.presta-txt h3 {
  margin-top: 16px;
  font-family: var(--font-h);
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--blanc);
}

.presta-txt > p {
  margin-top: 18px;
  font-family: var(--font-b);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--blanc-mut);
}

.presta-check {
  margin-top: 28px;
  padding: 0;
  display: grid;
  gap: 12px;
  list-style: none;
  border-top: 1px solid var(--filet);
  padding-top: 24px;
}

.presta-check li {
  /* Puce posee en absolu et non en grille : le contenu d'un li melange un
     <strong> et un noeud texte, et une grille en ferait deux cellules
     separees, un mot par ligne. */
  position: relative;
  padding-left: 23px;
  font-family: var(--font-b);
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--blanc-mut);
}

/* Alvéole : puce de liste de contrôle, et rien d'autre dans la page. */
.presta-check li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 10px;
  background: var(--or);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.presta-check strong { font-weight: 600; color: var(--blanc); }

/* Le libelle nomme la destination et la fleche avance au survol : c'est le
   meme signal que dans la ruche et le repertoire, un seul vocabulaire pour
   dire « ceci mene ailleurs ». */
.presta-lnk {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 30px;
  padding-bottom: 5px;
  font-family: var(--font-b);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or);
}

.presta-lnk::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--or);
  transform: scaleX(0.28);
  transform-origin: left center;
  transition: transform .5s var(--ez);
}

.presta-fleche {
  font-size: 0.95em;
  transform: translateX(0);
  transition: transform .35s var(--ez);
}

.presta-lnk:hover::after,
.presta-lnk:focus-visible::after { transform: scaleX(1); }

.presta-lnk:hover .presta-fleche,
.presta-lnk:focus-visible .presta-fleche { transform: translateX(5px); }

/* Sur telephone, l'image est immense et le lien minuscule : le lien s'etire
   en calque invisible sur toute la bande. Sur grand ecran on ne le fait pas,
   une photo pleine largeur entierement cliquable est plus genante qu'utile. */
@media (max-width: 767px) {
  .presta-bande { position: relative; }
  .presta-lnk::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
  }
}

/* ---- Les quatre autres interventions ------------------------------------ */

.presta-rep {
  margin-top: clamp(64px, 10vh, 130px);
  border-top: 1px solid var(--filet);
}

.presta-rep-inner {
  width: min(1220px, 100%);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.presta-row {
  display: grid;
  gap: 8px;
  padding: 26px 0;
  border-bottom: 1px solid var(--filet);
  transition: background-color .35s var(--ez);
}

.presta-row h3 {
  font-family: var(--font-h);
  font-size: 1.24rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--blanc);
  transition: color .35s var(--ez);
}

.presta-row p {
  font-family: var(--font-b);
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--blanc-fnt);
}

.presta-arrow {
  justify-self: start;
  font-family: var(--font-b);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or);
  transform: translateX(0);
  transition: transform .35s var(--ez);
}

.presta-row:hover h3 { color: var(--or); }
.presta-row:hover .presta-arrow { transform: translateX(6px); }

/* ---- Palier d'engagement faible ----------------------------------------- */

.presta-diag {
  margin-top: clamp(56px, 8vh, 100px);
  padding: clamp(48px, 7vh, 90px) var(--gut);
  background: var(--noir-creuse);
  text-align: center;
}

.presta-diag-lbl {
  font-family: var(--font-b);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--blanc-fnt);
}

.presta-diag p {
  max-width: 52ch;
  margin: 18px auto 0;
  font-family: var(--font-h);
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--blanc);
}

/* Bouton fantôme : le doré plein reste réservé au devis. */
.presta-diag-btn {
  display: inline-block;
  margin-top: 30px;
  padding: 16px 32px;
  border: 1px solid var(--filet-fort);
  border-radius: 2px;
  font-family: var(--font-b);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blanc);
  transition: border-color .35s var(--ez), color .35s var(--ez);
}

.presta-diag-btn:hover {
  border-color: var(--or);
  color: var(--or);
}

/* ==========================================================================
   768 px
   ========================================================================== */

@media (min-width: 768px) {
  .presta-media img { height: clamp(360px, 52vh, 520px); }

  .presta-row {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) auto;
    align-items: baseline;
    gap: 40px;
    padding: 32px 0;
  }

  .presta-arrow { justify-self: end; }
}

/* ==========================================================================
   1024 px : l'image prend la moitié qui touche le bord de la fenêtre
   ========================================================================== */

@media (min-width: 1024px) {
  /* L'image prend toute la hauteur de la bande : un rectangle photo pose au
     milieu du noir ferait vignette, c'est ce qu'on veut eviter. */
  .presta-bande {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(40px, 5vw, 80px);
  }

  .presta-media { min-height: clamp(460px, 68vh, 760px); }
  .presta-media img { height: 100%; position: absolute; inset: 0; }
  .presta-txt { align-self: center; }

  /* Le fondu part du côté du texte : la photo se dissout vers le noir. */
  .presta-fondu {
    background: linear-gradient(to right, rgba(16,16,16,0) 55%, rgba(16,16,16,0.85));
  }

  .presta-txt {
    padding: 0;
    margin-right: var(--gut);
  }

  /* Bande inversée : le texte à gauche, l'image colle au bord droit. */
  .presta-bande--droite .presta-media { grid-column: 2; grid-row: 1; }
  .presta-bande--droite .presta-txt {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    padding: 0;
    margin-left: var(--gut);
  }
  .presta-bande--droite .presta-fondu {
    background: linear-gradient(to left, rgba(16,16,16,0) 55%, rgba(16,16,16,0.85));
  }
  .presta-bande--droite .presta-cap { text-align: right; }

  /* Troisième bande : le zigzag s'arrête, l'image tient toute la largeur et
     le texte se pose dessus, comme le titre se pose sur la vidéo du hero. */
  .presta-bande--plein { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .presta-bande--plein .presta-media img {
    height: clamp(620px, 94vh, 960px);
    /* On remonte le cadrage : l'abeille passe dans le tiers haut et le sol
       de l'image se libere pour le texte. */
    object-position: center 12%;
  }
  /* Degrade du bas vers le haut, comme un sous-titrage de film : le texte
     se pose sur le sol de l'image et la moitie haute reste libre. C'est le
     sujet de la photo qu'on protege, pas la lisibilite du texte. */
  .presta-bande--plein .presta-fondu {
    background:
      linear-gradient(to top, rgba(16,16,16,0.94) 0%, rgba(16,16,16,0.75) 28%,
                      rgba(16,16,16,0.25) 58%, rgba(16,16,16,0) 80%),
      linear-gradient(to right, rgba(16,16,16,0.45), rgba(16,16,16,0) 60%);
  }
  /* Image et texte dans la meme cellule de grille plutot qu'un texte en
     absolu : la rangee prend la hauteur du plus grand des deux, le texte ne
     peut plus deborder au-dessus de l'image. */
  .presta-bande--plein .presta-media { grid-area: 1 / 1; }
  /* Le decalage se fait en marge et jamais en padding : en padding il se
     soustrait de la largeur du bloc, et sur un grand ecran il ne reste plus
     que quelques pixels de texte. */
  .presta-bande--plein .presta-txt {
    grid-area: 1 / 1;
    z-index: 2;
    align-self: end;
    width: min(46ch, 80vw);
    max-width: none;
    margin-left: max(var(--gut), calc(50vw - 610px + var(--gut)));
    padding: clamp(40px, 6vh, 80px) var(--gut) clamp(40px, 6vh, 80px) 0;
  }
  .presta-bande--plein .presta-cap { text-align: right; }
}

/* ==========================================================================
   Mouvement
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .presta-media img,
  .presta-lnk::after,
  .presta-arrow { transition: none; }
  .presta-bande:hover .presta-media img { transform: none; }
}