/* PRIMOE — héros « 15c » (validé le 12/11/2026) : image ou vidéo plein cadre en couleurs réelles, titre à gauche,
   et à droite un panneau marine translucide portant les rangées (les trois métiers sur l'accueil, les missions sur un parcours).
   Chargé après lpas-home.css et parcours.css. Sans JS et en mouvement réduit : tout est visible, rien ne bouge. */

.h15{--c:#fff;list-style:none;margin:0;padding:0}
.h15-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* une rangée = un lien entier */
.h15-row{position:relative;display:grid;align-items:center;color:#fff;text-decoration:none;
  border-top:1px solid rgba(255,255,255,.28);transition:background-color .35s ease,color .35s ease}
.h15-row:first-of-type{border-top:0}
.h15-row::before{content:"";position:absolute;left:-1px;top:50%;width:6px;height:52%;translate:0 -50%;background:var(--c);transition:background-color .35s ease}
.h15-row.d{--c:#E9D8C2}.h15-row.i{--c:#CADDF2}.h15-row.v{--c:#F1D2CF}
.h15-n{display:block;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;opacity:.82}
.h15-nm{display:block;margin-top:.3rem;font-weight:500;letter-spacing:-.028em;line-height:1.06;color:var(--c);
  font-size:clamp(1.55rem,2.2vw,2.35rem);transition:color .35s ease}
.h15-vb{display:block;margin-top:.4rem;font-size:1rem;font-weight:500}
.h15-li{display:block;margin:0;padding:0;list-style:none}
.h15-li span{display:block;font-size:.875rem;line-height:1.3;padding:.42rem 0;border-top:1px solid rgba(255,255,255,.22);transition:border-color .35s ease}
.h15-li span:first-child{border-top:0}
.h15-go{font-size:1.25rem;line-height:1;transition:translate .35s cubic-bezier(.16,1,.3,1)}
.h15-row:hover,.h15-row:focus-visible{background:var(--c);color:#0F2438;outline:0}
.h15-row:hover::before,.h15-row:focus-visible::before{background:#0F2438}
.h15-row:hover .h15-nm,.h15-row:focus-visible .h15-nm{color:#0F2438}
.h15-row:hover .h15-li span,.h15-row:focus-visible .h15-li span{border-color:rgba(15,36,56,.28)}
.h15-row:hover .h15-go,.h15-row:focus-visible .h15-go{translate:6px 0}
.h15-row:focus-visible{box-shadow:inset 0 0 0 3px #0F2438}

/* texte de gauche */
.hero-lead{position:relative;margin:clamp(18px,2.6vh,26px) 0 0;max-width:34em;font-size:1.0625rem;line-height:1.5;color:rgba(255,255,255,.9)}
.hero.h15h .hero-act{gap:14px 26px}
.hero.h15h .hero-tel{position:relative;display:inline-flex;align-items:center;min-height:44px;color:#fff;font-weight:500;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.55);text-underline-offset:6px}
.hero.h15h .hero-tel:hover{text-decoration-color:#fff}

/* images des métiers, montrées au survol d'une rangée (au-dessus de la vidéo, sous le voile) */
.h15-shots{position:absolute;inset:0;z-index:-2;pointer-events:none}
.h15-shots img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.h15-shots img.on{opacity:1}

/* ---------- bureau : panneau à droite ---------- */
@media (min-width:1100px){
  .h15{position:absolute;top:0;right:0;bottom:0;width:41.5%;z-index:1;display:grid;grid-auto-rows:1fr;padding-top:92px;
    background:rgba(15,36,56,.5);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);
    border-left:1px solid rgba(255,255,255,.3)}
  .h15::before{content:"";position:absolute;left:0;right:0;top:91px;border-top:1px solid rgba(255,255,255,.28)}
  .h15-row{grid-template-columns:minmax(0,11fr) minmax(0,10fr) 24px;column-gap:clamp(16px,1.8vw,30px);padding:0 clamp(18px,2.2vw,36px) 0 clamp(26px,2.8vw,44px)}
  .h15.mis .h15-row{grid-template-columns:minmax(0,12fr) minmax(0,10fr) 24px}
  .h15-p{font-size:.9375rem;line-height:1.4;opacity:.92;margin:0}
  /* le texte reste dans la partie gauche */
  html .hero.h15h h1{grid-column:1/span 7;grid-row:2;max-width:min(13.6em,52vw);font-size:clamp(2.3rem,3.75vw,3.9rem);line-height:1.02}
  html .hero.h15h .hero-in{grid-template-rows:1fr auto auto auto}
  html .hero.h15h .hero-lead{grid-column:1/span 6;grid-row:3;max-width:min(34em,40vw)}
  html .hero.h15h .hero-act{grid-column:1/span 7;grid-row:4;margin-top:clamp(24px,3.6vh,38px)}
  html .hero.h15h .hero-in::after{display:none}
  html .hero.h15h .hero-tag{display:none}
  html .hero.h15h .hero-shade{background:
    linear-gradient(90deg,rgba(11,28,44,.9) 0,rgba(11,28,44,.72) 34%,rgba(11,28,44,.3) 58%,rgba(11,28,44,.3)),
    linear-gradient(0deg,rgba(11,28,44,.5) 0,rgba(11,28,44,0) 40%)}
}
@media (min-width:1100px) and (max-height:720px){
  .h15-li span{padding:.26rem 0;font-size:.8125rem}
  .h15-vb{font-size:.9375rem}
}

/* ---------- téléphone et tablette : le titre sur l'image, puis les rangées empilées sur marine ---------- */
@media (max-width:1099.98px){
  .hero.h15h{display:block}
  .hero.h15h .hero-in{min-height:max(560px,100svh)}
  .hero.h15h .hero-camera,.hero.h15h .hero-shade,.hero.h15h .h15-shots{bottom:auto;height:max(560px,100svh)}
  .hero.h15h .hero-in::after,.hero.h15h .hero-tag{display:none}
  .hero.h15h .hero-lead{grid-column:1/-1;grid-row:3;font-size:1rem}
  .hero.h15h .hero-act{grid-row:4}
  .hero.h15h .hero-in{grid-template-rows:1fr auto auto auto}
  .h15{position:relative;display:block;background:#0F2438}
  .h15-row{grid-template-columns:minmax(0,1fr) 24px;row-gap:14px;padding:26px var(--gut,20px) 26px calc(var(--gut,20px) + 14px);align-items:start}
  .h15-row::before{left:var(--gut,20px);top:26px;bottom:26px;height:auto;width:4px;translate:none}
  .h15-row .h15-li,.h15-row .h15-p{grid-column:1;grid-row:2}
  .h15-row .h15-go{grid-column:2;grid-row:1;align-self:center}
  .h15-nm{font-size:1.9rem}
  .h15-p{font-size:.9375rem;line-height:1.45;opacity:.92;margin:0}
}

/* ---------- entrée : le panneau puis les rangées, une seule fois ---------- */
@media (prefers-reduced-motion:no-preference) and (min-width:1100px){
  html.js .h15{animation:h15pan .9s cubic-bezier(.16,1,.3,1) .55s both}
  html.js .h15-row>*{animation:h15row .8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(1s + var(--i,0) * .12s)}
  @keyframes h15pan{from{opacity:0;translate:36px 0}to{opacity:1;translate:0 0}}
  @keyframes h15row{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
}

/* ---------- pages parcours : les rangées portent les missions ---------- */
.h3-15 .h15-row{--c:var(--sb)}
.h15.mis .h15-nm{font-size:clamp(1.25rem,1.6vw,1.65rem);color:#fff}
.h15.mis .h15-n{color:var(--c);opacity:1}
.h15.mis .h15-row:hover .h15-n,.h15.mis .h15-row:focus-visible .h15-n,
.h15.mis .h15-row:hover .h15-nm,.h15.mis .h15-row:focus-visible .h15-nm{color:#0F2438}
.h15-cyc{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:.8125rem;letter-spacing:.03em}
.h15-cyc a{color:rgba(255,255,255,.62);text-decoration:none;padding-bottom:5px;border-bottom:2px solid transparent;transition:color .3s}
.h15-cyc a:hover{color:#fff}
.h15-cyc a.on{color:var(--sb);font-weight:600;border-bottom-color:var(--sb)}
@media (min-width:1100px){
  .h3.h3-15{grid-template-rows:1fr}
  .h3-15 .h15{z-index:4}
  .h3-15 .h3-t{bottom:clamp(40px,7vh,72px);width:min(45vw,680px)}
  .h3-15 h1{font-size:clamp(2.4rem,3.9vw,4.4rem);line-height:.98}
  .h3-15 .h3-cap{display:none}
  /* Ingénierie : les deux personnages restent à droite du titre (image agrandie depuis le bord gauche, titre sur trois lignes) */
  .h3-15[data-p="ing"] .h3-ph img{width:128%;height:128%;top:-16%;left:0;max-width:none}
  .h3-15[data-p="ing"] .h3-t{width:min(33vw,520px)}
  .h3-15 .h3-ph::after{background:linear-gradient(90deg,rgba(15,36,56,.9) 0,rgba(15,36,56,.72) 34%,rgba(15,36,56,.3) 58%,rgba(15,36,56,.3))}
}
@media (min-width:900px) and (max-width:1099.98px){
  /* tablette paysage : le héros garde sa hauteur d'écran, les rangées passent dessous */
  .h3.h3-15{height:auto;grid-template-rows:minmax(640px,100svh) auto}
  .h3-15 .h3-ph{grid-row:1;grid-column:1}
  .h3-15 .h3-t{position:relative;grid-row:1;grid-column:1;align-self:end;left:auto;bottom:auto;margin:0 var(--g) 48px;width:min(70vw,700px)}
}