/* ==========================================================================
   MOSAÏCA — BANNIÈRE DE SERVICE (Hero premium)
   Préfixe : .shp-   ·   Pages : /services/*.html

   Feuille commune aux six bannières de services. Les mosaïques livrées sont
   sombres et composées avec une réserve à gauche : le texte s'installe donc
   dans cette réserve, en clair sur la matière, et le motif reste visible à
   droite. Aucun aplat crème, aucun cartouche posé sur l'image.

   PRINCIPES
   · La mosaïque s'installe d'abord, le message émerge ensuite.
   · Une idée par ligne : les retours sont maîtrisés (.shp-l), jamais subis.
   · Les CTA restent discrets — la matière et le titre portent la page.
   · Hauteur donnée par la composition, jamais un 100vh qui rogne l'image.
   ========================================================================== */

/* Le remplissage du CTA est une vraie longueur : déclaré ici, il devient
   animable et le doré balaie le bouton au lieu de s'allumer d'un coup.
   Les moteurs qui ignorent @property gardent un aplat net au survol. */
@property --shp-cta-fill{
  syntax:'<percentage>';
  inherits:false;
  initial-value:0%;
}

.shp{
  /* --- Encres de la bannière --- */
  --shp-ink:#0A1725;          /* fond de sécurité, proche du noir des mosaïques */
  --shp-cream:#F5F0E7;        /* texte principal : 15,6:1 sur l'encre */
  --shp-cream-soft:rgba(245,240,231,.84);
  --shp-gold:#D2AC66;         /* accent : 7,4:1 sur l'encre */
  --shp-gold-warm:#E4C489;
  --shp-rule:rgba(245,240,231,.28);

  /* Réserve de gauche : largeur du couloir de lecture. */
  --shp-col:min(46rem,52vw);
  --shp-focal:50% 50%;

  --shp-ease:cubic-bezier(.22,.61,.36,1);

  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  background:var(--shp-ink);
  color:var(--shp-cream);
  /* La mosaïque est large (≈2,33:1) : une hauteur bornée lui évite d'être
     rognée à l'excès sur les grands écrans tout en gardant sa présence. */
  min-height:clamp(30rem,74svh,47rem);
}

/* ---- Mosaïque -------------------------------------------------------- */

.shp-media{position:absolute;inset:0;z-index:0;background:var(--shp-ink)}
/* <picture> s'intercale entre .shp-media et l'image depuis l'ajout de la
   chaine AVIF. Sans ces trois declarations, le height:100% de l'image se
   resout contre une boite inline de hauteur nulle et la banniere disparait. */
.shp-media picture{display:block;width:100%;height:100%}
.shp-media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:var(--shp-focal);
  display:block;
}

/* ---- Voile de lecture ------------------------------------------------
   Horizontal : ancre le couloir de gauche sans éteindre le motif.
   Vertical : rattrape les mosaïques claires en pied de cadre.
   ---------------------------------------------------------------------- */

.shp-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(8,20,33,.94) 0%,
      rgba(8,20,33,.88) 26%,
      rgba(8,20,33,.62) 44%,
      rgba(8,20,33,.22) 58%,
      rgba(8,20,33,0) 72%),
    linear-gradient(180deg,
      rgba(8,20,33,.34) 0%,
      rgba(8,20,33,0) 34%,
      rgba(8,20,33,0) 62%,
      rgba(8,20,33,.42) 100%);
}

/* ---- Colonne de texte ------------------------------------------------ */

.shp-content{
  position:relative;z-index:2;
  width:100%;
  max-width:88rem;
  margin-inline:auto;
  padding:clamp(3rem,6vw,5.5rem) clamp(1.35rem,4vw,3.25rem);
  box-sizing:border-box;
}
.shp-inner{max-width:var(--shp-col)}

.shp-crumb{
  font-size:.76rem;letter-spacing:.02em;
  color:rgba(245,240,231,.6);
  margin-bottom:clamp(1.1rem,2vw,1.6rem);
}
.shp-crumb a{color:rgba(245,240,231,.78);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.shp-crumb a:hover{color:var(--shp-gold-warm);border-bottom-color:var(--shp-gold)}
.shp-crumb i{font-style:normal;color:rgba(245,240,231,.32);padding:0 .45rem}

/* Petit libellé : capitales espacées, précédées d'un trait doré. */
.shp-kicker{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--shp-gold);
  margin-bottom:clamp(.9rem,1.8vw,1.35rem);
}
.shp-kicker::before{content:"";width:2rem;height:1px;background:var(--shp-gold);flex:none}

/* Titre : la voix de la page. */
.shp-title{
  font-family:'Ibarra Real Nova',Georgia,serif;
  font-weight:600;
  font-size:clamp(2.35rem,4.9vw,4.05rem);
  line-height:1.04;
  letter-spacing:-.022em;
  margin:0;
  color:var(--shp-cream);
  max-width:19ch;
  text-wrap:balance;
}

/* Sous-titre : une idée par ligne (voir .shp-l). */
.shp-sub{
  margin:clamp(1.05rem,2vw,1.5rem) 0 0;
  font-size:clamp(1.04rem,1.35vw,1.28rem);
  line-height:1.58;
  color:var(--shp-cream-soft);
  max-width:44ch;
  text-wrap:pretty;
}
/* Chaque idée occupe sa ligne : plus de coupure subie au mauvais endroit.
   Sous 900px, ces blocs redeviennent du texte courant et se recomposent
   naturellement plutôt que de produire des lignes orphelines. */
.shp-l{display:block}

.shp-note{
  margin:clamp(.7rem,1.4vw,1rem) 0 0;
  font-size:.92rem;line-height:1.55;
  color:rgba(245,240,231,.6);
  max-width:42ch;
}

/* ---- Actions ---------------------------------------------------------
   Un CTA principal assumé mais fin (filet doré, aucun aplat lourd) et un
   lien secondaire nettement plus discret. Jamais deux blocs de même poids.
   ---------------------------------------------------------------------- */

.shp-actions{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.75rem clamp(1.4rem,2.6vw,2.25rem);
  margin-top:clamp(1.6rem,3vw,2.4rem);
}

.shp-cta{
  --shp-cta-fill:0%;
  position:relative;display:inline-flex;align-items:center;gap:.65rem;
  padding:.82rem 1.6rem;
  border:1px solid var(--shp-gold);
  background:linear-gradient(90deg,var(--shp-gold) var(--shp-cta-fill),transparent var(--shp-cta-fill));
  color:var(--shp-gold-warm);
  font-family:inherit;font-size:.83rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;line-height:1;
  text-decoration:none;cursor:pointer;
  transition:--shp-cta-fill .42s var(--shp-ease),color .3s var(--shp-ease),border-color .3s;
}
.shp-cta svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .34s var(--shp-ease)}
.shp-cta:hover{--shp-cta-fill:100%;color:#0A1725;border-color:var(--shp-gold-warm)}
.shp-cta:hover svg{transform:translateX(3px)}

/* Repli pour les moteurs sans @property : un simple aplat au survol. */
@supports not (background:linear-gradient(90deg,red 0%,transparent 0%)){
  .shp-cta:hover{background:var(--shp-gold)}
}

.shp-link{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.88rem;font-weight:600;letter-spacing:.01em;
  color:rgba(245,240,231,.72);text-decoration:none;
  padding-bottom:.2rem;
  border-bottom:1px solid rgba(245,240,231,.22);
  transition:color .24s,border-color .24s;
}
.shp-link:hover{color:var(--shp-cream);border-bottom-color:var(--shp-gold)}

.shp a:focus-visible{outline:2px solid var(--shp-gold-warm);outline-offset:4px;border-radius:1px}

/* ---- Focales par page (centre d'intérêt de chaque mosaïque) ---------- */

.shp--competences{--shp-focal:64% 50%}
.shp--diagnostic{--shp-focal:66% 50%}
.shp--conseils{--shp-focal:62% 46%}
.shp--conferences{--shp-focal:66% 50%}
.shp--tables-rondes{--shp-focal:70% 50%}
.shp--recrutement{--shp-focal:66% 52%}
.shp--perspectives{--shp-focal:66% 48%}

/* ==========================================================================
   ENTRÉE — la matière s'installe, puis le message émerge
   Séquence : mosaïque → (stabilisation) → libellé → titre → sous-titre → CTA
   ========================================================================== */

@media (prefers-reduced-motion:no-preference){
  .shp-media img{animation:shpMedia 1.15s var(--shp-ease) both}
  .shp-veil{animation:shpVeil .9s var(--shp-ease) both}

  .shp-crumb  {animation:shpRise .72s var(--shp-ease) both;animation-delay:.40s}
  .shp-kicker {animation:shpRise .72s var(--shp-ease) both;animation-delay:.50s}
  .shp-title  {animation:shpRise .78s var(--shp-ease) both;animation-delay:.60s}
  .shp-sub    {animation:shpRise .78s var(--shp-ease) both;animation-delay:.72s}
  .shp-note   {animation:shpRise .78s var(--shp-ease) both;animation-delay:.80s}
  .shp-actions{animation:shpRise .78s var(--shp-ease) both;animation-delay:.86s}
}

@keyframes shpMedia{
  from{opacity:0;transform:scale(1.045)}
  to{opacity:1;transform:none}
}
@keyframes shpVeil{
  from{opacity:0}
  to{opacity:1}
}
@keyframes shpRise{
  from{opacity:0;transform:translateY(13px)}
  to{opacity:1;transform:none}
}

/* ==========================================================================
   PALIERS
   ========================================================================== */

/* ---- Portable (≤1280px) : couloir de lecture légèrement resserré ------ */
@media (max-width:1280px){
  .shp{--shp-col:min(40rem,58vw)}
  .shp-title{max-width:17ch}
}

/* ---- Sous 1080px : les retours maîtrisés sont relâchés ---------------
   En deçà de cette largeur, le couloir de lecture ne tient plus la plus
   longue des idées sur une seule ligne : la maintenir en bloc produirait
   une ligne veuve. Le texte redevient courant et se recompose, avec
   text-wrap:pretty comme garde-fou. (Même seuil que le plancher de
   lisibilité du système, assets/responsive.css §6.)
   ---------------------------------------------------------------------- */
@media (max-width:1080px){
  .shp-l{display:inline}
  .shp-sub{max-width:46ch}
}

/* ---- Tablette (≤1024px) : le voile s'élargit, le motif recule --------- */
@media (max-width:1024px){
  .shp{--shp-col:min(36rem,68vw);min-height:clamp(28rem,64svh,38rem)}
  .shp-veil{
    background:
      linear-gradient(90deg,
        rgba(8,20,33,.95) 0%,
        rgba(8,20,33,.9) 34%,
        rgba(8,20,33,.7) 54%,
        rgba(8,20,33,.34) 72%,
        rgba(8,20,33,.12) 100%),
      linear-gradient(180deg,
        rgba(8,20,33,.3) 0%,
        rgba(8,20,33,0) 40%,
        rgba(8,20,33,.44) 100%);
  }
  .shp-title{max-width:16ch}
}

@media (max-width:900px){
  .shp-title{max-width:none;text-wrap:balance}
  .shp-sub{max-width:52ch}
}

@media (max-width:760px){
  .shp{
    --shp-col:100%;
    min-height:clamp(26rem,72svh,34rem);
    align-items:flex-end;
  }
  /* La mosaïque devient un fond plein cadre : on cadre sur le motif et on
     renforce le voile vertical pour garder un contraste irréprochable. */
  .shp-media img{object-position:72% 50%}
  .shp-veil{
    background:linear-gradient(180deg,
      rgba(8,20,33,.62) 0%,
      rgba(8,20,33,.72) 34%,
      rgba(8,20,33,.88) 66%,
      rgba(8,20,33,.96) 100%);
  }
  .shp-content{padding:clamp(2.5rem,9vw,3.5rem) 1.35rem clamp(2.25rem,7vw,3rem)}
  .shp-title{font-size:clamp(2.05rem,8.4vw,2.85rem);line-height:1.08}
  .shp-sub{font-size:1.02rem;max-width:none}
  .shp-note{max-width:none}
  .shp-actions{gap:.9rem 1.4rem;margin-top:1.65rem}
  .shp-cta{padding:.85rem 1.45rem;font-size:.8rem}
}

/* ---- Petits téléphones (≤400px) : le CTA prend la largeur ------------- */
@media (max-width:400px){
  .shp-cta{width:100%;justify-content:center}
  .shp-crumb{font-size:.72rem}
}

/* -------------------------------------------------------------------------
   Plancher de lisibilité (assets/responsive.css §6) : sous 1080px, aucun
   libellé en capitales espacées ne descend sous 12,8px.
   ------------------------------------------------------------------------- */
@media (max-width:1080px){
  .shp .shp-kicker,.shp .shp-cta{font-size:var(--text-label,.8rem)}
}

/* ---- Mouvement réduit : tout est visible immédiatement ---------------- */
@media (prefers-reduced-motion:reduce){
  .shp *,.shp *::before,.shp *::after{
    animation:none !important;
    transition-duration:.01ms !important;
  }
}