/* Fondations globales — pas de layout final à cette étape. */

html {
  background: var(--color-bg);
}

body {
  min-inline-size: 320px;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  letter-spacing: var(--type-body-tracking);
  line-height: var(--type-body-line);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--color-accent-soft);
  color: var(--color-text-primary);
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  box-shadow: var(--focus-shadow);
}
/* Scrollbar complètement cachée, scroll conservé */
html {
  scrollbar-width: none; /* Firefox */
}

html::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}

svg {
  flex-shrink: 0;
}

.skip-link {
  position: fixed;
  inset-block-start: var(--space-md);
  inset-inline-start: var(--space-md);
  z-index: 100;
  transform: translateY(calc(-100% - var(--space-md)));
  border-radius: var(--button-radius);
  background: var(--color-button-dark);
  color: var(--color-text-inverse);
  font-family: var(--font-ui);
  font-size: var(--type-small-size);
  font-weight: 700;
  padding: var(--space-sm) var(--space-lg);
  transition: transform var(--motion-duration) var(--motion-ease);
}

.video-desktop{
	position: absolute; top: 0; left: 33.333%; width: 66.667%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none;
}

/* =========================================================
   TÉLÉPHONE — portrait standard
   Ex : 360×740, 390×844, 414×896
========================================================= */
@media (max-width: 1199px) and (orientation: portrait) {
	
	.video-desktop{
		width: 100%;
	  height: auto;
	  left:0;
	  margin-top: 22%;
	}
	.hero__eyebrow{
		color: #FFF !important;
	}
	.hero__copy{
		  display: flex !important;
		 flex-direction: column !important;
		 margin-top:70%;
	}
	.hero__eyebrow{
		order: 1;
		text-align: right;
		margin-block-end: -10px !important;
	}
	.hero__actions {
		order:2;
		margin-top: -2%;
		margin-bottom:5%;
	}
	.hero__title{
		order:3;
		text-align:center;
	}
	.hero__text{
		order:4;
	}
		 .a{
		 border: 1px solid rgba(17, 17, 17, 0.25) !important;
	 }
	 .trust-item[data-trust="groups"] .trust-item__icon svg {
		 filter: invert(1);
	 }
}


/* =========================================================
   TÉLÉPHONE — paysage
   Ex : 740×360, 844×390, 896×414
========================================================= */
@media (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {

}


/* =========================================================
   TABLETTE — portrait
   Ex : 768×1024, 820×1180, 834×1194
========================================================= */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {

}


/* =========================================================
   TABLETTE — paysage
   Ex : 1024×768, 1180×820, 1194×834
========================================================= */
@media (min-width: 1024px) and (max-width: 1259px) and (min-height: 700px) and (max-height: 900px) and (orientation: landscape) {

}

.skip-link:focus-visible {
  transform: translateY(0);
}

.page-shell {
  min-block-size: 100vh;
  background: var(--color-bg);
}

.site-main {
  min-block-size: 100vh;
}

.foundation-state {
  display: grid;
  min-block-size: 100vh;
  place-content: center;
  padding: var(--space-4xl) var(--section-pad-x-desktop);
  text-align: center;
}

.foundation-state__kicker {
  color: var(--color-accent-bronze-dark);
  font-family: var(--font-kicker);
  font-size: var(--type-kicker-size);
  font-weight: var(--type-kicker-weight);
  letter-spacing: var(--type-kicker-tracking);
  line-height: var(--type-kicker-line);
  margin-block-end: var(--space-md);
  text-transform: uppercase;
}

.foundation-state__title {
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: var(--type-section-title-size);
  font-weight: var(--type-display-weight);
  letter-spacing: var(--type-section-title-tracking);
  line-height: var(--type-section-title-line);
}

.foundation-state__text {
  color: var(--color-text-secondary);
  margin-block-start: var(--space-md);
}

.visually-hidden {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* Étape 5 — état global quand un overlay est ouvert. */
html.is-scroll-locked,
body.is-scroll-locked {
  overflow: hidden;
}