/* ==========================================================================
   Verdié Voyages V2 : styles
   Maquette de référence : Figma, page Mockups, « Accueil · Desktop 1440 ».
   --u = 1 px de maquette, proportionnel à la largeur d'écran (plafonné à 1440 px) :
   les compositions illustrées gardent exactement leurs proportions.
   ========================================================================== */

:root {
	/* Couleurs (variables Semantic du Figma) */
	--page: #f9f6ed;
	--brand: #00404a;
	--brand-hover: #00505c;
	--earth: #a76b53;
	--earth-dark: #975238;
	--line: #e6dfd3;
	--text-body: #435859;
	--white: #fff;

	/* Polices */
	--serif: 'Bona Nova', Georgia, 'Times New Roman', serif;
	--sans: 'Alexandria', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--hand: 'Nothing You Could Do', 'Bradley Hand', cursive;

	/* Grille */
	--u: calc(min(100vw, 1440px) / 1440);
	--margin: max(1.5rem, calc(144 * var(--u)));
	--axis-left: 43.75%;       /* fin de la colonne de gauche : x 630 */
	--axis-gap: 8.889%;        /* gouttière centrale : 128 px */
	--section-gap: clamp(6rem, calc(160 * var(--u)), 160px);  /* respiration entre les sections */

	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-in-out: cubic-bezier(.42, 0, .58, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.has-smooth-scroll { scroll-behavior: auto; }
body {
	margin: 0; background: var(--page); color: var(--brand);
	font-family: var(--sans); font-weight: 300; font-size: 1rem; line-height: 1.6;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}
h1, h2, h3, p, figure, blockquote, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
main { display: block; overflow-x: clip; position: relative; }
/* Voilier : glisse derrière la mosaïque (les losanges passent devant, on le voit dans les vides) */
.voilier {
	position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none;
	width: clamp(135px, calc(165 * var(--u)), 165px); height: auto;
	opacity: 0; will-change: transform;
}
.philo__text, .mosaic { position: relative; z-index: 2; }
@media (max-width: 899px) { .voilier { width: 72px; } }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid var(--earth); outline-offset: 3px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed !important; top: 1rem; left: 1rem; z-index: 100; width: auto; height: auto; clip: auto; padding: .75rem 1rem; background: var(--brand); color: var(--white); }

/* ==========================================================================
   Typographie (styles de texte Figma)
   ========================================================================== */
.h2 {
	font-family: var(--serif); font-weight: 400; text-transform: uppercase;
	font-size: clamp(2.25rem, calc(54 * var(--u)), 3.375rem); line-height: 1.08; letter-spacing: .014em;
}
.h3 {
	font-family: var(--serif); font-weight: 400;
	font-size: clamp(1.25rem, calc(26 * var(--u)), 1.625rem); line-height: 1.12; letter-spacing: .003em;
}
.text { font-family: var(--sans); font-weight: 300; font-size: .875rem; line-height: 1.83; }
.text > p + p { margin-top: 1em; } /* espace entre paragraphes : 1em = la taille du texte (14 px) */
.text--body { color: var(--text-body); }
.hand { font-family: var(--hand); font-weight: 400; font-size: clamp(1rem, calc(19 * var(--u)), 1.1875rem); line-height: 1.05; letter-spacing: .015em; }

/* Bouton contour (composant « Bouton contour ») */
.btn-outline {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: 10px 24px; border: 1.5px solid var(--earth-dark); color: var(--earth-dark);
	font-family: var(--sans); font-weight: 400; font-size: .875rem; line-height: 1.83;
	transition: background-color .35s var(--ease-in-out), color .35s var(--ease-in-out);
}
.btn-outline:hover, .btn-outline:focus-visible { background: var(--earth-dark); color: var(--page); }

/* Photo encadrée (composant « Photo encadrée ») : passe-partout 10 px + ombre légère */
.frame {
	position: relative; display: block; overflow: hidden;
	border: 10px solid var(--line); background: var(--line);
	box-shadow: 0 1px 3px rgb(0 0 0 / .15), 0 1px 2px rgb(0 0 0 / .3);
}
.frame img, .frame video { width: 100%; height: 100%; object-fit: cover; }
/* Format carte postale : l'image elle-même est toujours en 3:2 (paysage) ou 2:3 (portrait).
   box-sizing: content-box → le ratio s'applique à l'image, le passe-partout s'ajoute autour. */
.frame { box-sizing: content-box; }
.frame--landscape, .frame--hero { aspect-ratio: 3 / 2; }
.frame--portrait, .frame--card, .frame--post { aspect-ratio: 2 / 3; }
.frame--portrait { width: calc(419 * var(--u)); }
.frame--card { width: calc(100% - 16px); border-width: 8px; }

/* ==========================================================================
   En-tête
   ========================================================================== */
.site-header {
	--header-h: 64px;
	position: fixed; top: 0; left: 0; right: 0; z-index: 50;
	background: var(--page);
	transition: box-shadow .4s var(--ease-in-out), border-color .4s var(--ease-in-out);
	border-bottom: 1px solid transparent;
}
/* Une fois la page défilée : fin filet sous le bandeau */
.site-header.is-scrolled, .site-header.is-open { border-bottom-color: var(--line); }
:root { --header-top: 171px; }   /* hauteur de l'en-tête en haut de page (logo grand format) */
body { padding-top: var(--header-top); }
/* En haut de page : grand logo. Dès que l'on défile : bandeau étroit, logo réduit. */
.site-header__bar { height: var(--header-top); transition: height .5s var(--ease-out); }
.site-header.is-scrolled .site-header__bar, body.menu-open .site-header__bar { height: var(--header-h); }
.site-nav {
	display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 100%; align-items: center; column-gap: 56px; /* rangée = hauteur du bandeau : le logo réduit reste centré */
	height: 100%; max-width: 1440px; margin-inline: auto;
}
.site-nav__list { display: flex; gap: 48px; }
.site-nav__list--left { justify-content: flex-end; }
.site-nav__list a {
	position: relative; display: inline-block; padding-block: 6px;
	font-family: var(--sans); font-weight: 400; font-size: .75rem; line-height: 1.67; letter-spacing: .04em;
	text-transform: uppercase; color: var(--brand-hover); transition: color .3s var(--ease-in-out);
}
/* Soulignement fin qui se dessine au survol (et reste sur l'entrée active du mega menu) */
.site-nav__list a::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor;
	transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out);
}
.site-nav__list a:hover::after, .site-nav__list a:focus-visible::after, .site-nav__list a[aria-expanded="true"]::after { transform: scaleX(1); }
.site-header__logo { display: block; transition: transform .5s var(--ease-out); }
.site-header__logo img { width: auto; height: 147px; }
/* Logo réduit par un changement d'échelle (147 → 50 px) : plus léger à animer qu'une hauteur */
.site-header.is-scrolled .site-header__logo, body.menu-open .site-header__logo { transform: scale(.34); }

/* Mega menu : panneau crème sous le bandeau. Un sous-menu par entrée de la barre :
   accroche à gauche, liens au centre, visuel à droite ; « Nos marques » affiche les 5 timbres. */
.mega {
	position: absolute; left: 0; right: 0; top: 100%;
	display: grid; grid-template-rows: 0fr; background: var(--page);
	border-bottom: 1px solid var(--line);
	visibility: hidden; transition: grid-template-rows .55s var(--ease-out), visibility 0s .55s;
}
.mega > .mega__inner { overflow: hidden; min-height: 0; }
.site-header.is-open .mega { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .55s var(--ease-out), visibility 0s; }
.mega__inner { max-width: 1440px; margin-inline: auto; padding-inline: var(--margin); }
/* Les panneaux sont superposés : le menu garde la même hauteur d'une entrée à l'autre, seul le contenu change. */
.mega__panels { display: grid; padding-top: clamp(32px, calc(56 * var(--u)), 56px); }
.mega__panel { grid-area: 1 / 1; display: grid; align-items: start; grid-template-columns: calc(416 * var(--u)) 1fr auto; visibility: hidden; transition: visibility 0s .3s; }
.site-header.is-open .mega__panel.is-active { visibility: visible; transition: visibility 0s; }
/* Dépliement en cascade : accroche, puis chaque lien (ou timbre), puis le visuel (--i = rang) */
.mega__item { opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; }
.site-header.is-open .mega__panel.is-active .mega__item {
	opacity: 1; transform: none;
	transition: opacity .6s ease calc(.12s + var(--i, 0) * 50ms), transform .6s var(--ease-out) calc(.12s + var(--i, 0) * 50ms);
}
.mega__panel--brands { grid-template-columns: calc(396 * var(--u)) 1fr; }
.mega__title { margin-bottom: 12px; font-family: var(--sans); font-weight: 400; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: rgb(67 88 89 / .65); }
.mega__lead { max-width: calc(360 * var(--u)); font-family: var(--serif); font-size: clamp(1.5rem, calc(34 * var(--u)), 2.125rem); line-height: 1.12; color: var(--brand); }
.mega__links { display: flex; flex-direction: column; gap: 12px; padding-top: calc(36 * var(--u)); }
.mega__links a { font-family: var(--sans); font-weight: 300; font-size: 1rem; line-height: 1.5; color: var(--brand); transition: color .3s var(--ease-in-out); }
.mega__links a:hover, .mega__links a:focus-visible, .mega__brand:hover .mega__brand-name, .mega__brand:focus-visible .mega__brand-name { color: var(--earth); }
/* Visuel à droite : illustration (déborde légèrement dans la marge) ou photo encadrée */
.mega__visual { margin-top: calc(-25 * var(--u)); margin-right: calc(-44 * var(--u)); }
.mega__visual img { width: auto; height: calc(250 * var(--u)); min-height: 170px; object-fit: contain; }
.mega__visual-inner--frame { margin-top: calc(13 * var(--u)); margin-right: calc(44 * var(--u)); border: 8px solid var(--line); box-shadow: 0 1px 3px rgb(0 0 0 / .15), 0 1px 2px rgb(0 0 0 / .3); }
.mega__visual-inner--frame img { width: calc(330 * var(--u)); height: calc(220 * var(--u)); min-height: 150px; object-fit: cover; }
/* Sous-menu « Nos marques » : 5 timbres, 1re ligne en petit, nom dessous */
.mega__brands { display: flex; justify-content: space-between; gap: calc(29 * var(--u)); margin-top: calc(-12 * var(--u)); }
.mega__brand { display: flex; flex-direction: column; align-items: center; text-align: center; width: calc(124 * var(--u)); min-width: 88px; }
.mega__brand .stamp { --r: 3px; transition: transform .45s var(--ease-in-out); }
.mega__brand:hover .stamp, .mega__brand:focus-visible .stamp { transform: translateY(-6px); }
.mega__brand-prefix { margin-top: 12px; font-size: .6875rem; font-weight: 300; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--text-body); white-space: nowrap; }
.mega__brand-name { font-size: 1.0625rem; font-weight: 300; line-height: 1.4; color: var(--brand); white-space: nowrap; transition: color .3s var(--ease-in-out); }
.stamp + .mega__brand-name { margin-top: 12px; }
/* Bas du panneau, commun à tous les sous-menus : Talents & Carrières */
.mega__foot { padding-block: 20px 32px; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.site-header.is-open .mega__foot { opacity: 1; transform: none; transition: opacity .6s ease .37s, transform .6s var(--ease-out) .37s; }
.mega__foot .mega__title { margin-bottom: 6px; color: var(--earth-dark); }
.mega__note { font-size: .8125rem; font-weight: 300; }
.mega__note a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mega__note a:hover { color: var(--earth); }
/* Voile léger sur la page quand le mega menu est ouvert */
.mega-veil {
	position: fixed; inset: 0; z-index: 40; opacity: 0; pointer-events: none; transition: opacity .45s ease;
	/* Voile noir léger + flou : le site s'estompe derrière le menu (opacité du noir : .2) */
	background: rgb(0 0 0 / .2);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.mega-veil.is-visible { opacity: 1; }

.menu-toggle { display: none; }
.mobile-menu { display: none; }

@media (max-width: 899px) {
	.site-header__bar { display: flex; align-items: center; justify-content: center; padding-inline: 1.5rem; }
	.site-nav { display: block; height: auto; }
	.site-nav__list { display: none; }
	:root { --header-top: 120px; }
	.site-header__logo img { height: 96px; }
	.site-header.is-scrolled .site-header__logo, body.menu-open .site-header__logo { transform: scale(.48); } /* 96 → 46 px */
	.mega, .mega-veil { display: none; }
	.menu-toggle {
		display: flex; flex-direction: column; justify-content: center; gap: 6px;
		position: absolute; right: 1rem; top: 50%; translate: 0 -50%; width: 44px; height: 44px; padding: 10px;
	}
	.menu-toggle__bar { display: block; width: 24px; height: 2px; background: var(--brand); transition: transform .35s var(--ease-in-out); } /* 2 barres de même largeur, calées sur des pixels entiers (nettes sur tous les écrans) */
	.menu-toggle[aria-expanded="true"] .menu-toggle__bar:first-child { transform: translateY(4px) rotate(45deg); }
	.menu-toggle[aria-expanded="true"] .menu-toggle__bar:last-child { transform: translateY(-4px) rotate(-45deg); }
	.mobile-menu:not([hidden]) {
		display: block; position: fixed; inset: 64px 0 0; z-index: 45; overflow-y: auto;
		background: var(--page); border-top: 1px solid var(--line);
	}
	.mobile-menu__inner { display: flex; flex-direction: column; gap: 32px; padding: 32px 1.5rem 48px; }
	.mobile-menu__group ul { display: flex; flex-direction: column; gap: 10px; }
	.mobile-menu__group a { font-family: var(--sans); font-weight: 300; font-size: 1.0625rem; }
	.mobile-menu .btn-outline { align-self: flex-start; }
	body.menu-open { overflow: hidden; }
}

/* ==========================================================================
   Ouverture + philosophie
   ========================================================================== */
.philo { position: relative; padding: 24px var(--margin) var(--section-gap); text-align: center; }
/* La carte postale d'ouverture tient entièrement au-dessus de la ligne de flottaison :
   sa largeur est limitée par la hauteur d'écran (en-tête 159 px + marges 24 + 24 + passe-partout 20). */
.philo__media {
	position: relative; margin-inline: auto;
	width: min(calc(798 * var(--u) + 20px), 100%, calc((100svh - 250px) * 1.5 + 20px));
}
.frame--hero { width: calc(100% - 20px); background: var(--line); }
.philo__caption {
	position: absolute; right: 5%; bottom: 8%; width: calc(190 * var(--u)); min-width: 120px;
	color: var(--page); text-align: center; transform: rotate(7.7deg); transform-origin: right bottom;
	text-shadow: 0 1px 8px rgb(0 0 0 / .25);
}
.philo__text { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: calc(96 * var(--u) + 24px); }
.philo__title { max-width: 480px; }
.philo__subtitle { max-width: 480px; }
.philo__body { max-width: 448px; }
.philo__text .btn-outline { margin-top: 16px; }

/* Perroquets : planche de 4 images (2400 × 475) → une image = 600 × 475.
   Position et taille de départ reprises de la maquette (en % de la photo encadrée). */
.birds { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.bird {
	position: absolute; aspect-ratio: 600 / 475;
	background: url('../img/perroquets-sprite.webp') no-repeat 0 0 / 400% 100%;
	will-change: transform;
	transform-origin: 50% 50%;
}
.bird[data-frame="1"] { background-position-x: 33.333%; }
.bird[data-frame="2"] { background-position-x: 66.666%; }
.bird[data-frame="3"] { background-position-x: 100%; }
/* Invisibles au chargement : ils entrent à l'écran au premier scroll (main.js) */
.js .bird { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .js .bird { opacity: 1; } }
.bird--1 { left: -18.8%; top: 54.3%; width: 48.4%; }
.bird--2 { left: -27.3%; top: 88.8%; width: 41.8%; z-index: 2; }
.bird--3 { left: -47.4%; top: 84.8%; width: 34.5%; }

/* ==========================================================================
   Mosaïque de losanges (grille 1440 × 732, tuiles 360 × 366)
   ========================================================================== */
.mosaic { overflow: hidden; }
.mosaic__grid {
	position: relative; width: 100%; max-width: 1440px; margin-inline: auto;
	aspect-ratio: 1440 / 732; container-type: inline-size;
}
.mosaic__tile {
	position: absolute; width: 25%; height: 50%;
	left: calc(-12.596% + var(--c) * 25%); top: calc(var(--r) * 50%);
}
.mosaic__tile--photo, .mosaic__tile--solid { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
/* Image plus haute que le losange (130 %) : elle glisse à l'intérieur au scroll (parallaxe, main.js) */
.mosaic__tile--photo img { position: absolute; left: 0; top: -20%; width: 100%; height: 140%; object-fit: cover; }
.mosaic__tile--solid.is-earth { background: var(--earth); }
.mosaic__tile--solid.is-line { background: var(--line); }
.mosaic__tile--mot svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--line); }
.mosaic__tile--mot.is-earth svg { fill: var(--earth); }
.mosaic__word {
	position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 60%;
	font-family: var(--serif); text-transform: uppercase; text-align: center;
	font-size: 1.667cqw; line-height: 1.38; letter-spacing: .0145em; color: var(--earth-dark);
}
.mosaic__tile--mot.is-earth .mosaic__word { color: var(--page); }

/* ==========================================================================
   Blocs en alternance (axe central : gauche jusqu'à x 630, droite dès x 758)
   ========================================================================== */
.duo {
	position: relative; display: grid; align-items: center;
	grid-template-columns: var(--axis-left) 1fr; column-gap: var(--axis-gap);
	width: 100%; max-width: 1440px; margin-inline: auto;
}
.duo__left { grid-column: 1; justify-self: end; }
.duo__right { grid-column: 2; justify-self: start; }
.bloc { width: calc(400 * var(--u)); min-width: 300px; display: flex; flex-direction: column; gap: 24px; }
.edito { width: calc(483 * var(--u)); min-width: 320px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.edito .btn-outline { margin-top: 16px; }

.heritage { display: flex; flex-direction: column; gap: clamp(4.5rem, calc(140 * var(--u)), 140px); padding-top: var(--section-gap); padding-bottom: var(--ribbon-gap); } /* même espace au-dessus et au-dessous de la phrase qui défile */
/* Illustrations débordantes, positionnées comme sur la maquette */
.duo--illu { min-height: calc(529 * var(--u)); }
.duo--illu-sky { min-height: calc(472 * var(--u)); }
.duo__illu { position: absolute; top: 0; }
.duo__illu img { width: 100%; height: auto; }
.duo__illu--bus { left: calc(-110 * var(--u)); width: calc(708 * var(--u)); }
.duo__illu--montgolfieres { left: calc(-50 * var(--u)); width: calc(708 * var(--u)); }
/* Photo « L'humain comme repère » : un peu plus petite que les autres portraits (fondateur, engagements) */
.heritage .frame--portrait { width: calc(370 * var(--u)); }
/* Montgolfières sur calques : paysage + ballons positionnés en % (bougent au scroll, voir main.js) */
.sky { position: relative; aspect-ratio: 1536 / 1024; }
.duo__illu .sky__land { display: block; width: 100%; height: auto; }
.duo__illu .sky__ballon { position: absolute; height: auto; will-change: transform; }
/* Léger flottement propre à chaque ballon, en plus du mouvement au scroll */
.js .sky.is-visible .sky__ballon { animation: vv-float 7s ease-in-out infinite; animation-delay: calc(var(--i) * -0.9s); animation-duration: calc(6s + var(--i) * 0.45s); }
.js .sky:not(.is-onscreen) .sky__ballon { animation-play-state: paused; } /* en pause hors de l'écran */
.duo--illu .duo__right { grid-row: 1; }

.caption { position: absolute; color: var(--earth-dark); }
.caption--bus { left: 38%; top: 98%; width: calc(170 * var(--u)); min-width: 110px; transform: rotate(-3deg); text-align:center; }
.caption--devanture { left: 43%; bottom: -12%; width: calc(200 * var(--u)); min-width: 120px; transform: rotate(2.75deg); text-align: center;}

.duo--edito { padding-bottom: var(--section-gap); }
#engagements { margin-top: clamp(3rem, calc(100 * var(--u)), 100px); } /* respiration après Nos marques */
.duo--illu-right { align-items: center; margin-top: clamp(3rem, calc(100 * var(--u)), 100px); padding-bottom: calc(var(--section-gap) + 70 * var(--u)); } /* même respiration avant et après la section */
/* L'illustration est dans la grille (colonne de droite, débordant à droite) : le texte se centre
   réellement sur elle, quelle que soit la taille d'écran. */
.duo--illu-right .duo__illu { position: relative; top: auto; left: auto; grid-column: 2; grid-row: 1; justify-self: start; align-self: center; }
.duo--illu-right .duo__left { grid-row: 1; }
/* Texte centré verticalement sur l'illustration (522 px) ; la marge basse laisse la place à la légende manuscrite */
.duo__illu--devanture { left: 52.64%; width: calc(783 * var(--u)); }

.fondateur__media { position: relative; }
.duo--fondateur { align-items: start; margin-top: clamp(3rem, calc(100 * var(--u)), 100px); } /* respiration supplémentaire avant le fondateur */
.quote-losange {
	position: absolute; left: calc(-117 * var(--u)); top: calc(360 * var(--u));
	width: calc(361 * var(--u)); min-width: 220px; aspect-ratio: 361 / 363;
	filter: drop-shadow(0 4px 10px rgb(0 40 48 / .08));
}
.quote-losange svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--page); }
.quote-losange p {
	/* centré sur le losange (horizontalement et verticalement) */
	position: absolute; left: 50%; top: 50%; width: 48%; margin: 0; transform: translate(-50%, -50%);
	text-align: center; color: var(--earth-dark); font-size: clamp(.85rem, calc(19 * var(--u)), 1.1875rem);
}
.signature { display: flex; flex-direction: column; gap: 2px; }
.signature__name { color: var(--earth-dark); text-transform: uppercase; }
.signature__role { font-size: .875rem; font-weight: 300; color: var(--brand); }

/* ==========================================================================
   Bandeau défilant
   ========================================================================== */
/* Espace identique au-dessus et au-dessous du bandeau : la phrase est centrée entre l'illustration et « Nos marques » */
:root { --ribbon-gap: clamp(3.5rem, calc(100 * var(--u)), 100px); }
.ribbon { overflow: hidden; padding-block: 10px; }
.ribbon__track { display: flex; width: max-content; will-change: transform; }
.ribbon__item {
	flex: none; padding-right: .6em; white-space: nowrap;
	font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--earth);
	font-size: clamp(2.25rem, calc(60 * var(--u)), 3.75rem); line-height: 1.25;
}

/* ==========================================================================
   Savoir-faire
   ========================================================================== */
.savoir { padding: var(--section-gap) var(--margin); }
.savoir__grid { display: flex; justify-content: space-between; gap: 2rem; max-width: 1152px; margin-inline: auto; }
.savoir__card { will-change: transform; width: calc(341 * var(--u)); min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.savoir__card .frame { margin-bottom: 40px; }
.savoir__card .h3 { margin-bottom: 16px; }

/* ==========================================================================
   Nos marques (timbres)
   ========================================================================== */
.section-head { display: flex; flex-direction: column; gap: 24px; }
.marques { max-width: calc(1152px + 2 * var(--margin)); margin-inline: auto; padding: 0 var(--margin) var(--section-gap); }
.marques .section-head { margin-bottom: 64px; }
/* Sans le bloc savoir-faire, les marques suivent directement le bandeau : on rétablit l'espacement */
.ribbon + .marques { padding-top: var(--ribbon-gap); }
.marques__list { display: flex; justify-content: space-between; gap: 1rem; }
.marque { width: calc(200 * var(--u)); min-width: 0; } /* 200 : environ 38 px entre les marques (212 = 23 px) */
.marque__link { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* Timbre : bord dentelé obtenu par un masque (demi-cercles réguliers) */
.stamp {
	--r: 4px;
	display: block; width: 100%; aspect-ratio: 212 / 289; padding: calc(3 * var(--r));
	background: var(--line);
	-webkit-mask: radial-gradient(var(--r) at var(--r) var(--r), #0000 97%, #000) calc(-1 * var(--r)) calc(-1 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)) round,
		linear-gradient(#000 0 0) 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r)) no-repeat;
	        mask: radial-gradient(var(--r) at var(--r) var(--r), #0000 97%, #000) calc(-1 * var(--r)) calc(-1 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)) round,
		linear-gradient(#000 0 0) 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r)) no-repeat;
}
.stamp__inner { display: block; width: 100%; height: 100%; background: var(--page); overflow: hidden; }
.stamp__inner img { width: 100%; height: 100%; object-fit: cover; }
/* Survol : toute la carte monte, en même temps que le lien « Découvrir » apparaît dessous */
.marque__link { transition: transform .45s var(--ease-in-out); }
.marque__link:hover, .marque__link:focus-visible { transform: translateY(-30px); }
@media (hover: none) { .marque__link:hover { transform: none; } }
.stamp + .marque__name { margin-top: 16px; } /* marque sans 1re ligne */
.marque__prefix { margin-top: 16px; font-family: var(--serif); text-transform: uppercase; font-size: clamp(1.1rem, calc(24 * var(--u)), 1.5rem); line-height: 1.3; letter-spacing: .019em; }
.marque__name { font-family: var(--serif); font-size: clamp(1.25rem, calc(36 * var(--u)), 2.25rem); line-height: .95; letter-spacing: .001em; white-space: nowrap; } /* taille réduite : chaque nom tient sur une ligne */
.marque__desc { margin-top: 8px; font-size: .875rem; font-weight: 300; line-height: 1.43; }

/* ==========================================================================
   Actualité (LinkedIn)
   ========================================================================== */
.news { max-width: calc(1152px + 2 * var(--margin)); margin-inline: auto; padding: 0 var(--margin) var(--section-gap); display: flex; flex-direction: column; align-items: center; gap: 64px; }
.section-head--split { width: 100%; flex-direction: row; justify-content: space-between; align-items: flex-end; }
.section-head--split > div { display: flex; flex-direction: column; gap: 24px; }
/* Icône alignée sur la hauteur du titre « L'actualité » (en haut de l'en-tête) */
.news__follow { align-self: flex-start; margin-top: 5px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--earth-dark); transition: opacity .3s; }
.news__follow .hand { color: var(--earth); text-align: center; white-space: nowrap; transform: rotate(-3.5deg); }
.news__follow:hover { opacity: .75; }
.news__grid { width: 100%; display: flex; justify-content: space-between; gap: 2rem; }
.post { width: calc(350 * var(--u)); min-width: 0; } /* 350 : environ 50 px entre les posts (365 = 28 px) */
.post__link { display: flex; flex-direction: column; }
.frame--post { width: calc(100% - 20px); }
/* Traitement commun des visuels LinkedIn : légèrement désaturés et réchauffés,
   pour qu'ils s'intègrent à la palette crème du site, quelles que soient les photos publiées.
   Réglages : saturate (1 = couleurs d'origine) et sepia (chaleur, 0 = neutre). */
.frame--post .post__img {
	position: absolute; inset: 0;
	filter: saturate(.72) sepia(.14) contrast(.97) brightness(1.02);
	transition: transform .9s var(--ease-out);
}
.post__link:hover .frame--post .post__img { transform: scale(1.04); }
.post__play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; translate: -50% -50%; border-radius: 50%; background: rgb(255 255 255 / .9); }
.post__play::after { content: ''; position: absolute; left: 23px; top: 20px; border: 8px solid transparent; border-left: 13px solid var(--brand); border-right: 0; }
.post__meta { margin-top: 20px; font-weight: 400; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--earth); }
.post__text {
	margin-top: 12px; font-size: .875rem; font-weight: 300; line-height: 1.43; color: var(--brand);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post__more { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; font-weight: 400; font-size: .875rem; transition: color .3s; }
.post__link:hover .post__more { color: var(--earth-dark); }

/* Flèche des liens « Découvrir » / « Lire sur LinkedIn » : glisse vers la droite au survol */
.link-arrow { flex: none; transition: transform .4s var(--ease-out); }
.post__link:hover .link-arrow, .post__link:focus-visible .link-arrow,
.marque__link:hover .link-arrow, .marque__link:focus-visible .link-arrow { transform: translateX(4px); }

/* Lien « Découvrir » des marques : placé sous la carte, hors du flux (aucun décalage du contenu).
   Au survol, la carte monte de 30 px et le lien apparaît dans l'espace libéré. */
.marque__link { position: relative; }
.marque__cta { position: absolute; left: 0; right: 0; top: 100%; display: flex; justify-content: center; }
.marque__cta-label {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; white-space: nowrap;
	font-weight: 400; font-size: .875rem; line-height: 1.83; color: var(--earth-dark);
	opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease-in-out), transform .45s var(--ease-in-out);
}
.marque__link:hover .marque__cta-label, .marque__link:focus-visible .marque__cta-label { opacity: 1; transform: none; }
@media (hover: none) { .marque__cta { position: static; } .marque__cta-label { opacity: 1; transform: none; } }

/* ==========================================================================
   Pied de page : épuré, sur le fond du site ; filets sur toute la largeur
   ========================================================================== */
.site-footer { border-top: 1px solid var(--line); }
.site-footer__inner { max-width: calc(1152px + 2 * var(--margin)); margin-inline: auto; padding-inline: var(--margin); }
.site-footer__grid { display: grid; grid-template-columns: 1.2fr repeat(4, 1fr) 1.3fr; gap: 48px 32px; padding-block: 72px 64px; }
.site-footer__logo { display: inline-block; margin-bottom: 28px; }
.site-footer__logo img { width: 72px; height: auto; }
.site-footer__title { margin-bottom: 20px; font-family: var(--sans); font-weight: 400; font-size: .75rem; line-height: 1.67; letter-spacing: .06em; text-transform: uppercase; color: var(--earth); }
.site-footer__contact { font-style: normal; display: flex; flex-direction: column; gap: 8px; font-size: .875rem; font-weight: 300; line-height: 1.6; }
.site-footer__contact a { font-weight: 400; }
.site-footer__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-weight: 400; font-size: .875rem; color: var(--earth-dark); }
.site-footer__cta:hover .link-arrow, .site-footer__cta:focus-visible .link-arrow { transform: translateX(4px); }
.site-footer__links { display: flex; flex-direction: column; gap: 10px; font-size: .875rem; font-weight: 300; }
.site-footer__brands { display: flex; flex-direction: column; gap: 14px; }
.site-footer__brands li { display: flex; flex-direction: column; gap: 2px; }
.site-footer__brand { font-family: var(--serif); font-size: .9375rem; letter-spacing: .05em; text-transform: uppercase; }
.site-footer__phone { font-size: .8125rem; font-weight: 300; color: var(--text-body); }
.site-footer__bottom { border-top: 1px solid var(--line); }
.site-footer__bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 24px 32px; font-size: .75rem; font-weight: 300; color: var(--text-body); }
.site-footer__bottom ul { display: flex; gap: 24px; }
.site-footer a { transition: color .3s var(--ease-in-out); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--earth); }
@media (max-width: 1100px) { .site-footer__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
	.site-footer__inner { padding-inline: 1.5rem; }
	.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; padding-block: 56px 48px; }
	.site-footer__col--siege { grid-column: 1 / -1; }
}

/* Pages internes (gabarit de secours) */
.page-default { padding: 6rem var(--margin); max-width: 52rem; margin-inline: auto; }
.page-default__title { margin-bottom: 2rem; }
.page-default__content { line-height: 1.8; }
.page-default__content > * + * { margin-top: 1rem; }

/* ==========================================================================
   Apparitions au scroll (seulement si le JS tourne)
   ========================================================================== */
.js [data-reveal] { transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); }
.js [data-reveal="fade"] { opacity: 0; }
.js [data-reveal="scale"] { opacity: 0; transform: scale(1.06); }
.js [data-reveal="from-right"] { opacity: 0; transform: translateX(40px); }
.js [data-reveal="from-left"] { opacity: 0; transform: translateX(-40px); }
/* Illustrations : l'autocar « entre en scène » (dévoilé de gauche à droite en avançant),
   les montgolfières s'élèvent (dévoilées du bas vers le haut) puis flottent doucement. */
/* Illustrations : elles glissent depuis la gauche, vite au départ puis en ralentissant
   longuement à l'arrivée (courbe « expo out »). */
.js [data-reveal="drive"], .js [data-reveal="rise"] {
	opacity: 0; transform: translateX(-22%);
	transition: transform 2.2s cubic-bezier(.16, 1, .3, 1), opacity 1s ease;
}
/* Devanture : même glissement, mais depuis la droite (miroir du bus) */
.js [data-reveal="drive-right"] {
	opacity: 0; transform: translateX(22%);
	transition: transform 2.2s cubic-bezier(.16, 1, .3, 1), opacity 1s ease;
}
@keyframes vv-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
/* Cartes et en-têtes : montée douce, en cascade (--i = rang de la carte) */
.js [data-reveal="up"] { opacity: 0; transform: translateY(40px); transition-delay: calc(var(--i, 0) * 120ms); }
.js [data-reveal="tile"] { opacity: 0; transform: scale(.92); transition-delay: calc((var(--c) + var(--r)) * 80ms); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
[data-parallax] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
	.js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; transition: none !important; }
	.btn-outline, .stamp, .frame--post img { transition: none; }
}

/* ==========================================================================
   Tablette et mobile
   ========================================================================== */
@media (max-width: 899px) {
	:root { --u: calc(100vw / 900); --margin: 1.5rem; } /* même marge latérale pour toutes les sections */
	.philo { padding: 24px var(--margin) var(--section-gap); }
	.philo__media { width: 100%; }
	/* Carte postale d'ouverture en portrait 2:3 (légende sur la vidéo, en bas à droite, comme sur ordinateur) */
	.frame--hero { aspect-ratio: 2 / 3; }
	.philo__text { margin-top: 3.5rem; text-align: center; }

	.duo { display: flex; flex-direction: column; align-items: stretch; gap: 2.5rem; padding-inline: 1.5rem; }
	.duo__left, .duo__right { justify-self: auto; align-self: auto; }
	.bloc, .edito { width: 100%; min-width: 0; }
	.duo--illu, .duo--illu-sky, .duo--illu-right { min-height: 0; }
	.duo__illu { position: relative; left: auto; top: auto; width: calc(100% + 3rem) !important; margin-left: -1.5rem; }
	.duo--illu-right .duo__illu { order: 2; }
	/* Légendes manuscrites sous les illustrations (et non plus dessus) */
	.caption--bus, .caption--devanture { position: relative; left: auto; top: auto; bottom: auto; width: auto; margin: .75rem auto 0; }
	.frame--portrait, .heritage .frame--portrait { width: min(100% - 20px, 400px); margin-inline: auto; }
	.heritage { gap: 5.5rem; padding-top: 3.5rem; padding-bottom: 3.5rem; } /* bus remonté sous la mosaïque */
	/* « L'humain comme repère » suit « L'héritage du temps » comme un seul bloc de texte (simple saut de ligne) */
	.heritage .duo--photo-right { margin-top: calc(2rem - 5.5rem); }
	.ribbon + .marques { padding-top: 3.5rem; } /* Nos marques remonté sous la phrase qui défile */
	.duo--edito { gap: 3rem; }
	/* Citation du fondateur : losange superposé au bas de la photo, comme sur ordinateur */
	.quote-losange { left: -2.5rem; top: auto; bottom: -3rem; width: 270px; min-width: 0; } /* plus grand, peut être coupé par le bord de l'écran */
	.quote-losange p { font-size: .95rem; }
	.duo--fondateur .duo__left { order: 2; margin-bottom: 5rem; } /* mobile : texte d'abord, puis la photo (et sa citation) */

	/* Mosaïque : 3 losanges entiers par rangée (les colonnes du bord sortent de l'écran) */
	.mosaic__grid { width: 133.334%; margin-left: -16.667%; }
	.mosaic__word { width: 80%; font-size: 2.1cqw; }
	.savoir__grid { flex-direction: column; align-items: center; gap: 3.5rem; }
	.savoir__card { will-change: transform; width: min(100%, 360px); }

	/* Espace réduit entre « Le voyage responsable » et « Un héritage qui voyage » */
	#engagements { padding-bottom: 3.5rem; margin-top: 1rem; } /* resserré après Nos marques */
	.marques { padding-bottom: 2rem; }
	.duo--illu-right { margin-top: 0; padding-bottom: 3.5rem; } /* resserré avant le fondateur */
	.duo--fondateur { margin-top: 0; padding-bottom: 2.5rem; } /* Actualité remontée */

	/* Marques et actualité : défilement horizontal au doigt (carrousel), la carte suivante dépasse */
	.marques__list, .news__grid {
		flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 1.25rem;
		overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; touch-action: pan-x pan-y;
		margin-inline: calc(-1 * var(--margin)); padding: 0 var(--margin) 1rem; scroll-padding-inline: var(--margin);
		scrollbar-width: none; -webkit-overflow-scrolling: touch;
	}
	.marques__list::-webkit-scrollbar, .news__grid::-webkit-scrollbar { display: none; }
	.marque { flex: 0 0 58%; width: auto; max-width: 240px; scroll-snap-align: start; }
	.post { flex: 0 0 82%; width: auto; max-width: 340px; scroll-snap-align: start; }
	.marques__list { padding-bottom: 2.5rem; } /* place pour « Découvrir » */
	.news__grid { width: auto; align-self: stretch; }

	/* Actualité : bouton LinkedIn à droite du titre, en plus petit */
	.section-head--split { flex-direction: row; align-items: flex-start; gap: 1rem; }
	.news__follow { flex: none; margin-top: 4px; gap: 6px; }
	.news__follow svg { width: 30px; height: 30px; }
	.news__follow .hand { font-size: .8rem; }
	.news { gap: 2.5rem; }
}