/* ═══ DOSSIERS — éléments communs aux 4 pages (branding, communication, event, merchandising)
       En haut de chaque page : le bandeau bleu nuit de l'accueil, le logo, et les
       4 intercalaires. L'onglet du dossier ouvert prend la couleur de la page :
       il en fait partie, comme un intercalaire tiré du classeur.
       Clic sur un autre onglet : son panneau de couleur monte, puis le dossier s'ouvre. ═══ */

.dz{
  position:relative;z-index:40;display:flex;align-items:flex-end;gap:clamp(16px,3vw,48px);
  padding:14px clamp(16px,3vw,40px) 0;background:#0D0F1E;font-family:'Goodly',sans-serif;
}
/* logo blanc (le fichier est carré : on n'en garde que la bande utile) */
.dz-home{flex:none;align-self:center;display:block;width:clamp(86px,7.4vw,118px);aspect-ratio:118/64;overflow:hidden;margin-bottom:10px;opacity:.92;transition:opacity .3s;}
.dz-home:hover{opacity:1;}
.dz-home img{display:block;width:100%;height:auto;margin-top:-26%;}

.dz-tabs{flex:1;min-width:0;display:flex;align-items:flex-end;}
.dz-tab{
  --rest:9px;
  position:relative;flex:1 1 0;max-width:260px;min-width:0;height:54px;margin-left:-14px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 18px 9px;
  border-radius:14px 14px 0 0;background:var(--tc);color:var(--ttx);text-decoration:none;overflow:hidden;
  box-shadow:0 -10px 24px -14px rgba(0,0,0,.6);
  transform:translateY(var(--rest));transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.dz-tab:first-child{margin-left:0;}
.dz-tab::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:url('images/close-up-texture-papier-blanc-ordinaire-details-subtils_525160-16199.avif') 0 0/340px 340px;
  mix-blend-mode:overlay;opacity:.4;}
.dz-tab:nth-child(1){z-index:4;}.dz-tab:nth-child(2){z-index:3;}.dz-tab:nth-child(3){z-index:2;}.dz-tab:nth-child(4){z-index:1;}
.dz-tab:hover:not(.is-current){--rest:2px;}
.dz-tab:focus-visible{outline:2px solid #E11D48;outline-offset:-4px;}
.dz-num{position:relative;font-size:.62rem;letter-spacing:.15em;opacity:.55;}
.dz-name{position:relative;font-weight:700;font-size:clamp(.66rem,.9vw,.84rem);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* le dossier ouvert : même couleur que la page, il se confond avec elle */
.dz-tab.is-current{--rest:0px;z-index:10;background:var(--fc);color:var(--ftx);box-shadow:none;padding-bottom:0;cursor:default;}
/* changement de dossier : le nouvel onglet devient celui de la page, l'ancien rentre dans le rang */
.dz-tab.is-going{--rest:0px;z-index:11;box-shadow:none;}
.dz-tab.is-current.is-leaving{--rest:9px;z-index:1;background:var(--tc);color:var(--ttx);padding-bottom:9px;}

/* Départ vers un autre dossier : son panneau de couleur couvre la page */
.dz-cover{
  position:fixed;left:0;right:0;bottom:0;top:0;z-index:45;background:var(--tc);pointer-events:none;   /* au-dessus de la page, posé sous le bandeau (top calculé en JS) */
  transform:translateY(100%);transition:transform .7s cubic-bezier(.65,0,.35,1);
}
.dz-cover::before{content:'';position:absolute;inset:0;
  background:url('images/close-up-texture-papier-blanc-ordinaire-details-subtils_525160-16199.avif') 0 0/340px 340px;
  mix-blend-mode:overlay;opacity:.4;}
.dz-cover.is-on{transform:none;}

/* Le bandeau prend la place de l'ancienne barre : l'intro remonte d'autant */
.dz ~ main > .bp-row:first-child{padding-top:calc(var(--u,1vw) * 6)!important;}

@media(max-width:760px){
  .dz{padding:10px 12px 0;gap:12px;}
  .dz-home{width:64px;margin-bottom:6px;}
  .dz-tab{height:44px;margin-left:-8px;padding:0 8px 9px;justify-content:center;border-radius:10px 10px 0 0;}
  .dz-tab.is-current{padding-bottom:0;}
  .dz-num{display:none;}
  .dz-name{font-size:.58rem;}
  .dz ~ main > .bp-row:first-child{padding-top:36px!important;}
}
@media(prefers-reduced-motion:reduce){
  .dz-tab,.dz-cover{transition:none!important;}
}

/* l'ancienne barre fixe ne garde que la navigation verticale des sections : elle ne doit pas capter les clics du bandeau */
.bp-bar{pointer-events:none;}
.bp-bar .bp-steps{pointer-events:auto;}

/* La page passe DEVANT les intercalaires : leur bas se glisse derrière le haut de la page,
   comme des onglets de classeur. L'onglet du dossier ouvert a la couleur de la page : il s'y raccorde. */
.dz ~ main{position:relative;z-index:41;background:var(--fc);}
.dz-tab{box-shadow:0 -8px 20px -14px rgba(0,0,0,.55);}

/* Couleurs strictement identiques partout : pas de texture papier sur les intercalaires
   ni sur le panneau de transition (elle éclaircissait la teinte par rapport au fond des pages) */
.dz-tab::before,.dz-cover::before{display:none!important;}

/* Logo : exactement à la même place et à la même taille que le logo rangé de l'accueil
   (script.js de l'accueil : top 10px, left 44px, largeur 128px — 20px / 84px sous 768px).
   Le fichier est carré, comme le logo animé de l'accueil : on l'affiche entier. */
.dz{min-height:116px;padding-left:calc(44px + 128px + 32px);}
.dz-home{position:absolute;top:10px;left:44px;width:128px!important;aspect-ratio:1!important;margin:0!important;overflow:visible!important;align-self:auto;}
.dz-home img{width:100%;height:auto;margin-top:0!important;}
@media(max-width:767px){
  .dz{min-height:80px;padding-left:calc(20px + 84px + 12px);}
  .dz-home{left:20px;width:84px!important;}
}

/* place pour le bouton « Nous contacter » en haut à droite */
.dz{padding-right:120px;}
@media(max-width:767px){ .dz{padding-right:76px;} }