/* ════════════════════════════════════════════════════════════
   FONTS
════════════════════════════════════════════════════════════ */
@font-face {
	font-family: 'Nocturne Serif';
	src: url('../fonts/NocturneSerif-Regular.woff') format('woff');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Neue Montreal';
	src: url('../fonts/NeueMontreal-Regular.otf') format('opentype');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Neue Montreal';
	src: url('../fonts/NeueMontreal-Medium.otf') format('opentype');
	font-weight: 500; font-style: normal; font-display: swap;
}

/* ════════════════════════════════════════════════════════════
   RESET
════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
	font-size: 16px;
	scroll-padding-top: 0px;
}
body {
	background: #f3f0ec;
	color: #242424;
	font-family: 'Neue Montreal', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
	/* Espace pour la nav pill fixe en bas */
	padding-bottom: 5rem;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ════════════════════════════════════════════════════════════
   TOKENS
   --gray / --mid : valeurs sémantiques distinctes
   --gray  = texte secondaire (corps, paragraphes)  #4a4a4a
   --mid   = meta, labels, eyebrows, liens discrets  #6b6b6b
════════════════════════════════════════════════════════════ */
:root {
	--bg:    #f3f0ec;
	--black: #242424;
	--gray:  #4a4a4a;   /* corps de texte secondaire — contraste ~6.5:1 sur --bg */
	--mid:   #6b6b6b;   /* labels, meta, liens discrets — contraste ~4.6:1 sur --bg */
	--beige: #e8e3db;
	--white: #ffffff;
	--ft:    'Nocturne Serif', Georgia, serif;
	--fb:    'Neue Montreal', Helvetica, sans-serif;
	--pad:   clamp(1.5rem, 5vw, 5rem);
	--maxw:  1280px;
}

/* ════════════════════════════════════════════════════════════
   ACCESSIBILITÉ
════════════════════════════════════════════════════════════ */

/* Visually hidden — lisible par les AT, invisible visuellement */
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* Skip link — accessible au clavier */
.skip-link {
	position: absolute;
	top: -100%;
	left: 1rem;
	z-index: 10000;
	background: var(--black);
	color: var(--white);
	padding: .75rem 1.5rem;
	border-radius: 0 0 8px 8px;
	font-family: var(--fb);
	font-size: .875rem;
	text-decoration: none;
	transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ════════════════════════════════════════════════════════════
   HERO — structure
════════════════════════════════════════════════════════════ */
.hero-outer {
	padding: .5rem .5rem 1.5rem;
	background: var(--bg);
}
/* ════════════════════════════════════════════════════════════
   SECTION HERO — titre immense
════════════════════════════════════════════════════════════ */
.ds-outer {
	scroll-margin-top: 0px;
	padding: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 3vw, 3rem);
	background: var(--bg);
}

.ds-logo {
	position: absolute;
	top: clamp(1.5rem, 3vw, 2.5rem);
	left: clamp(2rem, 5vw, 5rem);
	z-index: 10;
	font-family: var(--ft);
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: -.01em;
	color: var(--black);
	text-decoration: none;
}

/* — textes blancs dans le hero — */
.ds-section .ds-logo,
.ds-section .ds-avail,
.ds-section .ds-title,
.ds-section .ds-body {
	color: #ffffff;
}
.ds-section .ds-avail::before {
	background: #ffffff;
}
.ds-section .btn {
	color: #ffffff;
	border-color: rgba(255,255,255,0.5);
}
.ds-section .ds-title .ds-title--outline {
	color: transparent !important;
	-webkit-text-stroke: 1.5px #ffffff;
}
.blur-char--outline {
	color: transparent !important;
	-webkit-text-stroke: 1.5px #ffffff;
}

.ds-section {
	position: relative;
	width: 100%;
	height: clamp(480px, 82vh, 780px);
	overflow: hidden;
	background: #DFD7C9;
	border-radius: 24px;
}

/* — voile blanc semi-transparent — */
.ds-section > .ds-veil {
	position: absolute;
	inset: 0;
	background: rgba(101,67,33,0.3);
	pointer-events: none;
	z-index: 1;
	border-radius: 24px;
}

/* — photo de fond avec blur — */
.ds-section::before {
	content: '';
	position: absolute;
	inset: -20px;
	background: url('../img/woman.webp') center center / cover no-repeat;
	filter: blur(48px);
	opacity: 0.7;
	pointer-events: none;
	z-index: 0;
}

/* — grain animé par-dessus — */
.ds-section::after {
	content: '';
	position: absolute;
	inset: -10%;
	width: 120%;
	height: 120%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
	background-size: 70px 70px;
	opacity: 0.4;
	mix-blend-mode: overlay;
	border-radius: 24px;
	pointer-events: none;
	z-index: 2;
	animation: grain 0.6s steps(1) infinite;
}

.ds-title-wrap {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 12%;
	pointer-events: none;
	z-index: 1;
}
.ds-avail {
	position: absolute;
	top: clamp(1.5rem, 3vw, 2.5rem);
	right: clamp(2rem, 5vw, 5rem);
	display: flex;
	align-items: center;
	gap: .45rem;
	font-family: var(--fb);
	font-size: .8rem;
	letter-spacing: 0;
	text-transform: none;
	color: #ffffff;
	z-index: 10;
	padding: .4rem .85rem;
	border: 1px solid rgba(255,255,255,0.5);
	border-radius: 999px;
}
.ds-avail::before {
	content: '';
	width: 6px; height: 6px;
	border-radius: 50%;
	background: #5cb85c;
	flex-shrink: 0;
}

.ds-bg-letter {
	position: absolute;
	top: -10%;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--ft);
	font-size: clamp(28rem, 55vw, 64rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.06em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(36,36,36,.07);
	pointer-events: none;
	z-index: 0;
	white-space: nowrap;
	user-select: none;
}

.hero-ring {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.hero-ring canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: auto;
}

.ds-title {
	font-family: var(--ft);
	font-size: clamp(2.8rem, 6vw, 6.5rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -.04em;
	color: var(--black);
	white-space: normal;
	text-align: center;
}


.ds-bottom {
	position: absolute;
	bottom: clamp(2rem, 5vh, 4rem);
	left: clamp(2rem, 5vw, 5rem);
	z-index: 10;
	max-width: 320px;
}
.ds-body {
	font-family: var(--fb);
	font-size: clamp(.9rem, 1.5vw, 1.15rem);
	line-height: 1.4;
	color: var(--gray);
	margin-bottom: 1.5rem;
}

/* ════════════════════════════════════════════════════════════
   BOUTONS
════════════════════════════════════════════════════════════ */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	padding: 14px 36px;
	font-family: var(--fb);
	font-size: .875rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--black);
	background: transparent;
	border: 1px solid rgba(36,36,36,.35);
	border-radius: 8px;
	cursor: pointer;
	transition: background .45s ease, color .45s ease;
	line-height: 1;
}
.btn:not(.btn--wayra):hover {
	background: var(--black);
	color: #fff;
}

/* ── Wayra — animation diagonale en survol ── */
.btn--wayra {
	position: relative;
	overflow: hidden;
	z-index: 0;
	transition: border-color 0.3s, color 0.3s;
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.btn--wayra::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 150%;
	height: 100%;
	background: var(--black);
	z-index: -1;
	transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
	transform-origin: 0% 100%;
	transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.btn--wayra:hover {
	background: transparent;
	color: #fff;
	border-color: var(--black);
}
.btn--wayra:hover::before {
	transform: rotate3d(0, 0, 1, 0deg);
}
.btn svg { flex-shrink: 0; transition: transform .3s ease; }
.btn:hover svg { transform: translateX(4px); }
#copy-btn:hover { background: transparent; color: rgba(36,36,36,.45); }
#copy-btn:hover svg { transform: translateX(0); }

/* — Ovale crayonné autour du bouton copy — */
#copy-btn { position: relative; }
#copy-btn .btn-oval {
	position: absolute;
	inset: -6px -12px;
	width: calc(100% + 24px);
	height: calc(100% + 12px);
	overflow: visible;
	pointer-events: none;
}
#copy-btn .btn-oval path {
	fill: none;
	stroke: #242424;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 480;
	stroke-dashoffset: 480;
	transition: stroke-dashoffset 1s cubic-bezier(.19,1,.22,1);
}
#copy-btn:hover .btn-oval path { stroke-dashoffset: 0; }

.ds-cta__dot { display: none; }

/* CTA row dans le hero — desktop: flex horizontal */
.ds-cta-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}


/* Ticker mobile métiers — caché sur desktop */
.metiers__ticker-mobile,
.metiers__ticker-belt { display: none; }

/* ════════════════════════════════════════════════════════════
   SECTION PROJETS — liste avec image au curseur
════════════════════════════════════════════════════════════ */
.projets-list { width: 100%; }
.projet-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.75rem 0;
	border-top: 1px solid rgba(36,36,36,.12);
	text-decoration: none;
	color: var(--black);
	cursor: pointer;
	position: relative;
	transition: opacity .4s cubic-bezier(0.32, 0.72, 0, 1);
}
.projet-item:last-child { border-bottom: 1px solid rgba(36,36,36,.12); }

.projets-list:has(.projet-item:hover) .projet-item:not(:hover) { opacity: .35; }

.projet-item__left {
	display: flex;
	align-items: center;
	gap: 2rem;
}
.projet-item__num {
	font-family: var(--fb);
	font-size: .75rem;
	color: rgba(36,36,36,.4);
	letter-spacing: .08em;
	width: 1.5rem;
	flex-shrink: 0;
}
.projet-item__name {
	font-family: var(--fb);
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1;
	color: var(--black);
	transition: transform .4s cubic-bezier(0.32, 0.72, 0, 1);
}
.projet-item:hover .projet-item__name { transform: translateX(8px); }
.projet-item__right {
	display: flex;
	align-items: center;
	gap: 2rem;
}
.projet-item__tag {
	font-family: var(--fb);
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(36,36,36,.45);
}
.projet-item__arrow {
	width: 2rem; height: 2rem;
	border-radius: 50%;
	border: 1px solid rgba(36,36,36,.2);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	transition: transform .4s cubic-bezier(0.32, 0.72, 0, 1),
	            background .3s ease, border-color .3s ease;
}
.projet-item:hover .projet-item__arrow {
	transform: rotate(45deg);
	background: var(--black);
	border-color: var(--black);
}
.projet-item:hover .projet-item__arrow svg path { stroke: #fff; }

.projet-cursor-img {
	position: fixed;
	width: 320px;
	aspect-ratio: 4/3;
	border-radius: 8px;
	overflow: hidden;
	pointer-events: none;
	z-index: 500;
	opacity: 0;
	transform: scale(.92) rotate(-2deg);
	transition: opacity .4s cubic-bezier(0.32, 0.72, 0, 1),
	            transform .4s cubic-bezier(0.32, 0.72, 0, 1);
	will-change: transform;
}
.projet-cursor-img.is-visible {
	opacity: 1;
	transform: scale(1) rotate(-2deg);
}
.projet-cursor-img img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}

/* ════════════════════════════════════════════════════════════
   MÉTIERS — colonnes défilantes verticalement
════════════════════════════════════════════════════════════ */
.metiers {
	scroll-margin-top: 0px;
	position: relative;
	height: 100vh;
	overflow: hidden;
	background: var(--bg);
	display: flex;
	align-items: center;
	justify-content: center;
}

.metiers::before,
.metiers::after {
	content: '';
	position: absolute;
	left: 0; right: 0;
	height: 30%;
	z-index: 5;
	pointer-events: none;
}
.metiers::before {
	top: 0;
	background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
}
.metiers::after {
	bottom: 0;
	background: linear-gradient(to top, var(--bg) 0%, transparent 100%);
}

.metiers__grid {
	position: absolute;
	inset: 0;
	display: flex;
	gap: 1.2rem;
	padding: 0 3rem;
	pointer-events: none;
	z-index: 1;
}

.metiers__col {
	flex: 1;
	display: flex;
	flex-direction: column;
	will-change: transform;
}

.metiers__card {
	position: relative;
	flex-shrink: 0;
	width: 75%;
	height: 260px;
	background: rgba(255,255,255,.72);
	border-radius: 14px;
	padding: 1.2rem 1.4rem 1.4rem;
	display: flex;
	flex-direction: column;
	filter: blur(1.5px);
}

.metiers__card::before {
	content: '';
	position: absolute;
	top: 1.1rem;
	left: 1.2rem;
	width: 14px;
	height: 14px;
	background: var(--black);
	clip-path: polygon(50% 0%, 56% 44%, 100% 50%, 56% 56%, 50% 100%, 44% 56%, 0% 50%, 44% 44%);
	opacity: .75;
}

.metiers__card-label {
	font-family: var(--fb);
	font-size: clamp(1.275rem, 1.87vw, 1.53rem);
	font-weight: 500;
	color: var(--black);
	line-height: 1.3;
	opacity: .7;
	margin-top: auto;
	align-self: flex-start;
}

.metiers__center {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5rem;
	text-align: center;
	pointer-events: none;
}

.metiers__title {
	font-family: var(--ft);
	font-size: clamp(2rem, 4.8vw, 5.5rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--black);
}

/* ════════════════════════════════════════════════════════════
   PAGE TRANSITION — rideau vertical
════════════════════════════════════════════════════════════ */
.transition-wrap {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	flex-direction: column;
	pointer-events: none;
}
.transition-column {
	flex: 1;
	width: 100%;
	background: #faf8f5;
}
.transition-column.top    { transform-origin: bottom; }
.transition-column.bottom { transform-origin: top; }

/* ════════════════════════════════════════════════════════════
   SERVICES STACK
════════════════════════════════════════════════════════════ */
.svc-section {
	padding: clamp(4rem, 8vw, 8rem) var(--pad);
	background: var(--bg);
	scroll-margin-top: -40px;
}
.svc-header {
	max-width: var(--maxw);
	margin: 0 auto clamp(3rem, 6vw, 5rem);
}
.svc-eyebrow {
	display: block;
	font-family: var(--fb);
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--black);
	margin-bottom: 1rem;
}
.svc-heading {
	font-family: var(--fb);
	font-size: clamp(1.75rem, 3.5vw, 3rem);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--black);
	max-width: 44ch;
}
.svc-heading em { font-style: italic; }

.svc-items-wrapper {
	position: relative;
	max-width: var(--maxw);
	margin: 0 auto;
	aspect-ratio: 16 / 7.5;
	overflow: visible;
}
.svc-item {
	position: absolute;
	inset: 0;
	background: var(--card-bg);
	border-radius: 3rem;
	padding: clamp(2rem, 4vw, 3.5rem);
	display: flex;
	overflow: hidden;
	flex-direction: column;
	justify-content: space-between;
	transform-origin: top center;
	will-change: transform;
}
.svc-item::after {
	content: '';
	position: absolute;
	inset: -10%;
	width: 120%;
	height: 120%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
	background-size: 80px 80px;
	opacity: .25;
	mix-blend-mode: overlay;
	pointer-events: none;
	z-index: 0;
	animation: grain 0.8s steps(1) infinite;
}
.svc-item__top, .svc-item__bottom { position: relative; z-index: 1; }
#svcItem0 { z-index: 1; }
#svcItem1 { z-index: 2; }
#svcItem2 { z-index: 3; }
#svcItem3 { z-index: 4; }

@media (min-width: 769px) {
	#svcItem1 { transform: translateY(120%); }
	#svcItem2 { transform: translateY(120%); }
	#svcItem3 { transform: translateY(120%); }
}
.svc-item__title {
	display: flex;
	flex-direction: column;
	font-family: var(--ft);
	font-size: clamp(2.5rem, 7vw, 6rem);
	font-weight: 400;
	line-height: .95;
	letter-spacing: -.02em;
}
.svc-item__title-white { color: #ffffff; }
.svc-item__title-grey  { color: #888888; }
.svc-item__title-dark    { color: #242424; }
.svc-item__title-outline {
	color: transparent;
	-webkit-text-stroke: 1.5px #242424;
}
.svc-item__bottom {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.svc-item__tags {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.svc-tag {
	font-family: var(--fb);
	font-size: .8125rem;
	font-weight: 400;
	color: #242424;
	background: var(--tag-bg);
	padding: .4rem 1rem;
	border-radius: 999px;
	letter-spacing: .03em;
}
.svc-item__desc-row {
	display: flex;
	align-items: flex-start;
	gap: 2rem;
}

/* Formes géométriques dans les cards service */
.svc-item__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}
.svc-shape {
	width: clamp(80px, 12vw, 140px);
	height: clamp(80px, 12vw, 140px);
	flex-shrink: 0;
	animation: svc-shape-breathe 6s ease-in-out infinite;
}
.svc-shape--spin-slow {
	animation: svc-shape-spin 18s linear infinite;
}
@keyframes svc-shape-breathe {
	0%, 100% { transform: scale(1);     opacity: 0.9; }
	50%       { transform: scale(1.06); opacity: 1;   }
}
@keyframes svc-shape-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* SVG astérisque — réutilisé via <use> */
.svc-asterisk {
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
	color: #242424;
	animation: svc-spin 4s linear infinite;
}
@keyframes svc-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* Blob liquid */
.svc-blob {
	width: 1.75rem;
	height: 1.75rem;
	flex-shrink: 0;
	background: transparent;
	border: 1.5px solid #242424;
	border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
	animation: liquid 7s ease-in-out infinite;
}
@keyframes liquid {
	0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
	50%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
	100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}
.svc-item__desc {
	font-family: var(--fb);
	font-size: clamp(.9rem, 1.5vw, 1.15rem);
	line-height: 1.6;
	color: #242424;
	max-width: 50%;
}

/* ════════════════════════════════════════════════════════════
   MARQUES — 2 rangées marquee
════════════════════════════════════════════════════════════ */
.marques {
	background: var(--bg);
	overflow: hidden;
	position: relative;
	isolation: isolate;
	min-height: 380px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.marques__rows {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent);
	mask-image: linear-gradient(90deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent);
}

.marques__row {
	display: flex;
	width: max-content;
}
.marques__row--left  { animation: ticker-scroll       120s linear infinite; }
.marques__row--right { animation: ticker-scroll-right 120s linear infinite; }

@keyframes ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@keyframes ticker-scroll-right {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

.marques__logo {
	flex-shrink: 0;
	width: 190px;
	height: 100px;
	border-radius: 12px;
	background: #f5f5f0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	color: #2a2a2a;
	margin: 0 10px;
}
.mlogo {
	width: 100%;
	height: 44px;
	max-width: 160px;
	color: #2a2a2a;
	overflow: visible;
}
.mlogo--file {
	width: auto;
	height: 36px;
	max-width: 150px;
	object-fit: contain;
	filter: grayscale(1) contrast(0.8) brightness(0.3);
}

.marques__header {
	position: relative;
	z-index: 10;
	text-align: center;
	padding: clamp(4rem, 8vw, 7rem) var(--pad);
	max-width: 740px;
	width: 100%;
}
.marques__header::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--bg);
	filter: blur(28px);
	border-radius: 1000px;
	z-index: -1;
	transform: scaleX(1.3) scaleY(1.6);
	opacity: .85;
}
.marques__eyebrow {
	display: block;
	font-family: var(--fb);
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--black);
	margin-bottom: 1rem;
}
.marques__heading {
	font-family: var(--fb);
	font-size: clamp(1.75rem, 3.5vw, 3rem);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--black);
	margin-bottom: .875rem;
}
.marques__sub {
	font-family: var(--fb);
	font-size: clamp(.8rem, 1.1vw, .9375rem);
	line-height: 1.65;
	color: var(--black);
	opacity: .55;
}

/* ════════════════════════════════════════════════════════════
   MOBILE — tablettes ≤ 768px
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

	/* Hero */
	.ds-section { height: clamp(520px, 90vh, 700px); }
	.ds-bg-letter { font-size: clamp(18rem, 45vw, 36rem); }
	.ds-logo { left: 1.5rem; top: 1.25rem; }
	.ds-avail { right: 1.5rem; top: 1.25rem; }
	.ds-title { font-size: clamp(2.2rem, 5.5vw, 5rem); }
	.ds-bottom { bottom: clamp(1.5rem, 4vh, 3rem); left: 1.5rem; max-width: 280px; }

	/* Services */
	.svc-section { padding: clamp(3rem, 6vw, 6rem) var(--pad); }
	.svc-header { margin-bottom: clamp(2rem, 4vw, 3rem); }
	.svc-items-wrapper { aspect-ratio: auto !important; min-height: 0 !important; height: auto !important; }
	.svc-item { position: relative; inset: auto; aspect-ratio: auto; border-radius: 2rem; margin-bottom: 1.5rem; transform: none !important; }
	#svcItem1, #svcItem2, #svcItem3 { transform: none !important; }
	.svc-item__title { font-size: clamp(1.75rem, 5.5vw, 3.5rem); }
	.svc-item__desc { max-width: 75%; }
	.svc-item__desc-row { flex-wrap: wrap; gap: 1rem; }
	.svc-shape { width: clamp(48px, 12vw, 100px); height: clamp(48px, 12vw, 100px); }

	/* Métiers */
	.metiers { height: 100svh; }
	.metiers__grid { padding: 0 1rem; gap: 0.75rem; }
	.metiers__card { padding: 1rem 1.2rem; height: 200px; }
	.metiers__card-label { font-size: clamp(1rem, 1.5vw, 1.25rem); }

	/* Marques */
	.marques { min-height: 320px; }
	.marques__header { padding: clamp(2.5rem, 6vw, 4rem) var(--pad); }

	/* WebGL canvas — désactivé sur tablette pour les performances */
	#gl-canvas { display: none; }
	/* Rendre les images à nouveau visibles sans WebGL */
	.about__img img { opacity: 1; }
	/* Scroll blur typography — forcer les chars visibles sur tablette/mobile */
	.blur-char { filter: none !important; }

	/* Textes outlined — stroke 1px sur mobile */
	.ds-title--outline,
	.blur-char--outline {
		-webkit-text-stroke: 1px #ffffff !important;
	}
	.svc-item__title-outline {
		-webkit-text-stroke: 1px #242424 !important;
	}
}

/* ════════════════════════════════════════════════════════════
   MOBILE — téléphones ≤ 480px
════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

	/* Sections */
	.section {
		padding-top: clamp(3rem, 8vh, 5rem);
		padding-bottom: clamp(3rem, 8vh, 5rem);
	}

	/* Hero ds-section */
	.ds-section { height: calc(100svh - 1rem); border-radius: 16px; }
	.ds-title { font-size: clamp(2rem, 9vw, 3rem); }
	.ds-bg-letter { font-size: clamp(14rem, 100vw, 22rem); }
	.ds-logo { font-size: 1.25rem; left: 1rem; top: 1rem; }
	.ds-avail { right: 1rem; top: 1rem; font-size: 0.75rem; padding: 0.3rem 0.65rem; }
	.ds-bottom { left: 1rem; right: 1rem; bottom: 5rem; max-width: none; }
	.ds-body { font-size: 1.125rem; margin-bottom: 1rem; line-height: 1.55; }
	.btn.ds-cta { padding: 11px 24px; font-size: 0.875rem; }
	.ds-cta-row { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
	/* Email visible sur mobile */
	.ds-email-btn {
		color: rgba(255,255,255,0.75);
		border-color: rgba(255,255,255,0.25);
		font-size: 0.8125rem;
		padding: 9px 16px;
		gap: 0.5rem;
	}
	.ds-email-btn svg { opacity: 0.7; }

	/* Hero classique (case-study) */
	.hero__logo { width: min(280px, 80vw); }
	.hero__name { white-space: normal; font-size: clamp(1.5rem, 6vw, 3.5rem); width: 90%; text-align: center; }
	.hero__status, .hero__availability { top: 4.5rem; font-size: 0.75rem; }
	.hero__baseline, .hero__location { bottom: 5rem; font-size: 0.75rem; }

	/* Services */
	.svc-section { padding: clamp(2.5rem, 6vw, 4rem) var(--pad); }
	.svc-items-wrapper { aspect-ratio: auto !important; overflow: visible !important; height: auto !important; }
	.svc-item {
		position: relative;
		inset: auto;
		aspect-ratio: auto;
		border-radius: 1.5rem;
		padding: 1.5rem;
		justify-content: flex-start;
		gap: 1.5rem;
		margin-bottom: 2.5rem;
		transform: none !important;
	}
	#svcItem1, #svcItem2, #svcItem3 { transform: none !important; }
	.svc-item__title { font-size: clamp(1.5rem, 7vw, 2.5rem); }
	.svc-item__title-dark { color: #242424; -webkit-text-stroke: 0; }
	.svc-item__title-outline { color: #242424; -webkit-text-stroke: 0 !important; }
	.svc-item__top { margin-bottom: 0; }
	.svc-item__bottom { gap: 2.5rem; }
	.svc-item__tags { gap: 0.5rem; }
	.svc-item__desc { max-width: 100%; font-size: 1.0625rem; }
	.svc-item__desc-row { flex-direction: column; gap: 0.75rem; }
	/* Supprimer les étoiles/formes dans les cards sur mobile */
	.svc-shape { display: none; }
	.svc-asterisk { display: none; }

	/* Métiers — colonnes défilantes cachées, ticker horizontal affiché */
	.metiers__grid { display: none; }
	.metiers__ticker-mobile {
		display: flex;
		overflow: hidden;
		width: 100%;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent);
		mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent);
	}
	.metiers__ticker-belt {
		display: flex;
		gap: 0.75rem;
		animation: metiers-ticker 20s linear infinite;
		flex-shrink: 0;
		white-space: nowrap;
	}
	@keyframes metiers-ticker {
		from { transform: translateX(0); }
		to   { transform: translateX(-50%); }
	}
	.metiers__ticker-tag {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		padding: 0.5rem 1rem;
		border: 1px solid rgba(36,36,36,.15);
		border-radius: 999px;
		font-family: var(--fb);
		font-size: 0.875rem;
		color: var(--black);
		background: rgba(255,255,255,0.7);
		white-space: nowrap;
		flex-shrink: 0;
	}
	.metiers__ticker-tag::before {
		content: '';
		width: 5px; height: 5px;
		border-radius: 50%;
		background: var(--black);
		opacity: 0.4;
		flex-shrink: 0;
	}
	.metiers__center {
		position: relative;
		left: auto;
		top: auto;
		transform: none;
		width: 100%;
		max-width: 100%;
		flex: 1 1 100%;
		pointer-events: all;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.5rem;
	}
	.metiers__title {
		font-size: clamp(1.75rem, 9vw, 3.5rem);
		text-align: center;
		width: 100%;
	}
	/* Réduire la hauteur de la section "Travaillons ensemble" */
	.metiers {
		height: auto;
		min-height: 0;
		flex-direction: column;
		padding: clamp(3rem, 8vw, 5rem) var(--pad);
	}

	/* Marques — logos sous le texte, plus en arrière-plan */
	.marques {
		flex-direction: column;
		min-height: auto;
		padding-bottom: 1.5rem;
	}
	.marques__header {
		position: relative;
		padding: 2rem var(--pad) 1.5rem;
	}
	.marques__header::before { display: none; }
	.marques__rows {
		position: relative;
		inset: auto;
		z-index: 1;
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		padding: 1rem 0;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent);
		mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent);
	}

}

/* ════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION
════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.marques__row--left,
	.marques__row--right { animation: none; }
	.svc-asterisk        { animation: none; }
	.svc-shape           { animation: none; }
}