/* Brand It — comportements ajoutés lors de la révision (header, FAQ, fond plein écran) */

html, body {
  background: #000;
}

/* ---------- Header type Lonsdale : masqué à la descente, visible à la remontée ---------- */
.site-header {
  transition: transform .5s cubic-bezier(.22, .61, .36, 1),
              background-color .35s ease,
              border-color .35s ease;
  will-change: transform;
}
.site-header.is-hidden {
  transform: translateY(-101%);
}
.site-header.is-solid {
  background: rgba(0, 0, 0, .82) !important;
}

/* Pas d'animation de header si l'utilisateur limite les animations */
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
  .site-header.is-hidden { transform: none; }
}

/* ---------- Bouton « Se connecter » dans la nav (carré) ---------- */
.nav-portal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 26px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 0;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: .04em;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.nav-portal svg { transition: transform .3s cubic-bezier(.22, .61, .36, 1); }
.nav-portal:hover,
.nav-portal:focus-visible {
  background: #fff;
  color: #000;
  border-color: #fff;
}
.nav-portal:hover svg { transform: translateX(3px); }
.nav-portal:hover svg path { fill: #000; }

/* ---------- Sélecteur de langue ---------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: .92em;
  letter-spacing: .05em;
}
.lang-switch a {
  padding: 4px 7px;
  color: rgba(255, 255, 255, .5);
  text-decoration: none;
  transition: color .25s ease;
}
.lang-switch a:hover { color: #fff; }
.lang-switch a[aria-current="true"] { color: #fff; }
.lang-switch .sep { color: rgba(255, 255, 255, .28); }

/* ---------- Section « Notre expertise » : panneaux au survol ---------- */
.xp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;                 /* panneaux collés */
  margin: 62px -22px 0;   /* la bande déborde du retrait de section */
}
.xp-card {
  position: relative;
  min-height: 920px;
  border-radius: 0;       /* pas de bords arrondis */
  overflow: hidden;
  isolation: isolate;
  background: #101010;
  outline: none;
}
.xp-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(.12) brightness(.92);
  transform: scale(1.02);
  transition: filter .75s cubic-bezier(.22, .61, .36, 1),
              transform 1.2s cubic-bezier(.22, .61, .36, 1);
}
.xp-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .04) 22%,
              rgba(0, 0, 0, .10) 52%, rgba(0, 0, 0, .58) 100%);
  transition: background .6s ease;
  z-index: 1;
}
.xp-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: inherit;
  padding: 34px 30px 78px;   /* place réservée pour la flèche en bas */
}
.xp-title {
  font-weight: 300;
  font-size: 30px;
  line-height: 34px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #f2f2f2;
}
.xp-reveal { margin-top: auto; }

/* Flèche : ancrée en bas à droite, visible dès l'arrivée sur la section.
   Au survol elle s'allonge et s'éclaire — puis seulement le texte apparaît. */
.xp-arrow {
  position: absolute;
  right: 26px;
  bottom: 28px;
  z-index: 3;
  opacity: .6;
  transition: opacity .35s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}
.xp-arrow-line {
  stroke-dasharray: 46;
  stroke-dashoffset: 34;          /* seul un moignon de trait est visible */
  transition: stroke-dashoffset .55s cubic-bezier(.22, .61, .36, 1) .05s;
}
.xp-arrow-head {
  transition: transform .5s cubic-bezier(.22, .61, .36, 1) .05s;
  transform-origin: 45px 7px;
}
.xp-p {
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 22.4px;
  color: rgba(255, 255, 255, .88);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}
.xp-p:last-child { margin-bottom: 0; }

/* au survol, le voile du bas se renforce pour garder le texte lisible */
.xp-card:hover::after,
.xp-card:focus-visible::after,
.xp-card.is-open::after {
  background: linear-gradient(180deg,
              rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .04) 16%,
              rgba(0, 0, 0, .64) 44%, rgba(0, 0, 0, .92) 100%);
}

.xp-card:hover .xp-media,
.xp-card:focus-visible .xp-media,
.xp-card.is-open .xp-media {
  filter: grayscale(0) brightness(1);
  transform: scale(1.06);
}
.xp-card:hover .xp-arrow,
.xp-card:focus-visible .xp-arrow,
.xp-card.is-open .xp-arrow { opacity: 1; }

.xp-card:hover .xp-arrow-line,
.xp-card:focus-visible .xp-arrow-line,
.xp-card.is-open .xp-arrow-line { stroke-dashoffset: 0; }

.xp-card:hover .xp-arrow-head,
.xp-card:focus-visible .xp-arrow-head,
.xp-card.is-open .xp-arrow-head { transform: translateX(4px); }

.xp-card:hover .xp-p,
.xp-card:focus-visible .xp-p,
.xp-card.is-open .xp-p { opacity: 1; transform: translateY(0); }

/* décalage en cascade, après l'animation de la flèche */
.xp-card:hover .xp-p:nth-of-type(1),
.xp-card:focus-visible .xp-p:nth-of-type(1),
.xp-card.is-open .xp-p:nth-of-type(1) { transition-delay: .62s; }
.xp-card:hover .xp-p:nth-of-type(2),
.xp-card:focus-visible .xp-p:nth-of-type(2),
.xp-card.is-open .xp-p:nth-of-type(2) { transition-delay: .74s; }
.xp-card:hover .xp-p:nth-of-type(3),
.xp-card:focus-visible .xp-p:nth-of-type(3),
.xp-card.is-open .xp-p:nth-of-type(3) { transition-delay: .86s; }

.xp-card:focus-visible { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }

/* ---------- Expertise : mobile et écrans tactiles ---------- */
.xp-grid--m {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 28px;
}
.xp-card--m { min-height: 430px; }
.xp-card--m .xp-body { padding: 22px 20px 62px; }
.xp-card--m .xp-title { font-size: 20px; line-height: 24px; }
.xp-card--m .xp-p { font-size: 14px; line-height: 20px; margin-bottom: 10px; }
.xp-card--m .xp-arrow { right: 18px; bottom: 20px; }

/* Cartes de la maquette mobile : jamais de survol possible, donc tout est
   affiché d'emblée (elles ne sont rendues qu'en dessous de 820px). */
.xp-card--m .xp-media { filter: grayscale(.05) brightness(.85); transform: scale(1); }
.xp-card--m .xp-arrow { opacity: 1; }
.xp-card--m .xp-arrow-line { stroke-dashoffset: 0; }
.xp-card--m .xp-p { opacity: 1; transform: none; transition-delay: 0s; }
.xp-card--m::after {
  background: linear-gradient(180deg,
              rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .05) 18%,
              rgba(0, 0, 0, .58) 44%, rgba(0, 0, 0, .9) 100%);
}

/* Tablette tactile : la maquette desktop est utilisée mais le survol n'existe pas */
@media (hover: none) {
  .xp-media { filter: grayscale(.05) brightness(.85); transform: scale(1); }
  .xp-arrow { opacity: 1; }
  .xp-arrow-line { stroke-dashoffset: 0; }
  .xp-p { opacity: 1; transform: none; }
  .xp-card { min-height: 560px; }
}

@media (prefers-reduced-motion: reduce) {
  .xp-media, .xp-arrow, .xp-arrow-line, .xp-arrow-head, .xp-p { transition: none; }
}

/* ---------- FAQ ---------- */
.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}
.faq-item .accordion-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding: 28px 0;
  cursor: pointer;
}
.faq-item .acc-arrow {
  flex: none;
  margin-top: 6px;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.faq-item.open .acc-arrow {
  transform: rotate(90deg);
}
.faq-item .acc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.2, .7, .2, 1);
}