/* BYBEN — solution évènementielle · feuille de style du site public
   Direction : « Élégance éditoriale rose poudré ». Deux couleurs de marque
   (rose #fbe6e1, marine #1c3e7f), Cormorant Garamond pour les titres, DM Sans
   pour le texte. Aucun cadre externe : tout est ici. */

@import url("/site/fonts/polices.css");

:root {
  --rose: #fbe6e1;
  --rose-2: #f6d5cd;
  --rose-3: #e8b4ad;
  --creme: #fff8f5;
  --marine: #1c3e7f;
  --marine-2: #142d5e;
  --encre: #1b2540;
  --muted: #5b6784;
  --blanc: #ffffff;
  --display: "Cormorant Garamond", "Didot", Georgia, serif;
  --texte: "DM Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --ombre: 0 18px 50px rgba(28, 62, 127, .12);
  --rapide: 200ms cubic-bezier(.4, 0, .2, 1);
  --moyen: 300ms cubic-bezier(.4, 0, .2, 1);
  --hauteur-entete: 6rem;
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--rose); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: hidden; background: var(--rose); color: var(--encre);
  font-family: var(--texte); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; color: var(--marine); text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--rose-3); color: var(--marine); }
:focus-visible { outline: 2px solid var(--marine); outline-offset: 3px; border-radius: 2px; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.conteneur { width: min(100% - 2rem, 1280px); margin-inline: auto; }
.section { padding-block: 4rem; }
.surtitre {
  color: var(--marine); font-size: .75rem; font-weight: 500; letter-spacing: .18em;
  line-height: 1.4; text-transform: uppercase;
}
.surtitre--rose { color: var(--rose); }
.titre-section {
  margin-top: 1.25rem; font-size: clamp(2.25rem, 4.5vw, 3.75rem); line-height: .95;
  letter-spacing: -.01em;
}
.titre-section--rose { color: var(--rose); }
.texte-section { margin-top: 1.5rem; max-width: 42rem; font-size: 1.125rem; line-height: 1.65; color: var(--muted); }
.texte-section--rose { color: var(--rose); }
.en-tete-section { max-width: 48rem; }
.arche { border-radius: 999px 999px 24px 24px; overflow: hidden; }
.filet { border: 0; border-top: 1px solid var(--rose-3); margin: 0; }
em, .italique { font-style: italic; }

/* Boutons pilule */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3rem; padding: .85rem 1.75rem; border-radius: 999px;
  background: var(--marine); color: var(--blanc); font-weight: 500; font-size: .95rem;
  border: 1px solid var(--marine); transition: background var(--rapide), color var(--rapide), border-color var(--rapide), transform var(--rapide);
}
.bouton:hover { background: var(--marine-2); border-color: var(--marine-2); }
.bouton:active { transform: translateY(1px); }
.bouton svg { width: 1rem; height: 1rem; transition: transform var(--rapide); }
.bouton:hover svg { transform: translateX(4px); }
.bouton--contour { background: transparent; color: var(--marine); }
.bouton--contour:hover { background: var(--marine); color: var(--blanc); }
.bouton--rose {
  position: relative; overflow: hidden; background: var(--rose); color: var(--marine); border-color: var(--rose);
}
.bouton--rose::before {
  content: ""; position: absolute; inset: 0; background: var(--creme);
  transform: scaleX(0); transform-origin: left; transition: transform var(--moyen);
}
.bouton--rose:hover { background: var(--rose); border-color: var(--creme); }
.bouton--rose:hover::before { transform: scaleX(1); }
.bouton--rose > * { position: relative; }
.bouton--large { width: 100%; }
@media (min-width: 640px) { .bouton--large { width: auto; } }

/* Lien souligné animé */
.lien-anime { position: relative; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-weight: 500; color: var(--marine); }
.lien-anime::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .35rem; height: 1px; background: var(--marine);
  transform: scaleX(0); transform-origin: right; transition: transform 250ms ease;
}
.lien-anime:hover::after { transform: scaleX(1); transform-origin: left; }
.lien-anime svg { width: 1rem; height: 1rem; transition: transform var(--rapide); }
.lien-anime:hover svg { transform: translateX(4px); }

/* Étoile à 4 branches (motif signature) */
.etoile { width: 1rem; height: 1rem; flex-shrink: 0; }

/* ---------- Barre de progression + en-tête ---------- */
.progression {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: 2px; background: var(--marine);
  transform: scaleX(0); transform-origin: left; pointer-events: none;
}
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  background: rgba(251, 230, 225, .9); border-bottom: 1px solid transparent;
  transition: border-color var(--moyen), backdrop-filter var(--moyen);
}
.entete__barre {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  min-height: var(--hauteur-entete); transition: min-height var(--moyen);
}
.entete.compact { border-color: rgba(232, 180, 173, .7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.entete.compact .entete__barre { min-height: 4.5rem; }
.marque { display: inline-flex; flex-direction: column; line-height: 1; color: var(--marine); width: fit-content; }
.marque__nom { font-family: var(--display); font-size: 2rem; font-weight: 600; letter-spacing: .01em; }
.marque__ligne { margin-top: .3rem; font-size: .7rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.nav-principale { display: none; }
.entete__action { display: none; }
.bouton-menu {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; color: var(--marine);
}
.bouton-menu svg { width: 1.5rem; height: 1.5rem; }
@media (min-width: 1024px) {
  .entete__barre { grid-template-columns: auto 1fr auto; }
  .nav-principale { display: flex; justify-content: center; gap: .25rem; }
  .entete__action { display: block; }
  .bouton-menu { display: none; }
}
.nav-principale a {
  position: relative; display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: 0 .75rem; font-size: .95rem; font-weight: 500; color: var(--encre);
}
.nav-principale a::after {
  content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .45rem; height: 1px; background: var(--marine);
  transform: scaleX(0); transform-origin: right; transition: transform 250ms ease;
}
.nav-principale a:hover::after, .nav-principale a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* Menu mobile plein écran */
.menu-mobile {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column;
  background: var(--marine); color: var(--rose);
  opacity: 0; visibility: hidden; transition: opacity 250ms ease, visibility 0s linear 250ms;
}
.menu-mobile.ouvert { opacity: 1; visibility: visible; transition: opacity 250ms ease; }
.menu-mobile__barre { display: flex; align-items: center; justify-content: space-between; min-height: var(--hauteur-entete); }
.menu-mobile .marque { color: var(--rose); }
.menu-mobile .bouton-menu { color: var(--rose); display: inline-grid; }
.menu-mobile nav { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: 2rem; }
.menu-mobile nav a {
  display: flex; align-items: center; min-height: 3.5rem; border-bottom: 1px solid rgba(251, 230, 225, .3);
  font-family: var(--display); font-size: 2.25rem; font-weight: 500;
  opacity: 0; transform: translateY(16px); transition: opacity 300ms ease, transform 300ms ease;
}
.menu-mobile.ouvert nav a { opacity: 1; transform: none; }
.menu-mobile.ouvert nav a:nth-child(2) { transition-delay: 60ms; }
.menu-mobile.ouvert nav a:nth-child(3) { transition-delay: 120ms; }
.menu-mobile.ouvert nav a:nth-child(4) { transition-delay: 180ms; }
.menu-mobile.ouvert nav a:nth-child(5) { transition-delay: 240ms; }
.menu-mobile.ouvert nav a:nth-child(6) { transition-delay: 300ms; }
.menu-mobile__pied { padding-bottom: 2rem; }
body.menu-ouvert { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 9rem 0 5rem; }
.hero__grille { display: grid; gap: 3.5rem; align-items: center; }
.hero__texte { position: relative; z-index: 2; }
.hero__titre {
  margin-top: 1.5rem; max-width: 56rem;
  font-size: clamp(3.2rem, 6vw, 5.5rem); line-height: .9; letter-spacing: -.02em;
}
.ligne { display: block; overflow: hidden; padding-bottom: .08em; }
.ligne > span { display: block; transform: translateY(110%); animation: monter 500ms cubic-bezier(.2, .7, .2, 1) forwards; }
.ligne:nth-child(2) > span { animation-delay: 90ms; }
.ligne:nth-child(3) > span { animation-delay: 180ms; }
.hero__intro { margin-top: 2rem; max-width: 34rem; font-size: 1.125rem; line-height: 1.65; opacity: 0; animation: apparaitre 400ms ease 260ms forwards; }
.hero__actions { display: flex; flex-direction: column; gap: .75rem; margin-top: 2.5rem; opacity: 0; animation: apparaitre 400ms ease 340ms forwards; }
@media (min-width: 640px) { .hero__actions { flex-direction: row; } }
.hero__visuel { position: relative; margin-inline: auto; width: 100%; max-width: 520px; will-change: transform; }
.hero__photo { aspect-ratio: 3 / 4; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; animation: zoomLent 1200ms cubic-bezier(.2, .7, .2, 1) forwards; }
.hero__carte {
  position: absolute; left: -.75rem; bottom: -1.25rem; display: flex; align-items: center; gap: .75rem;
  max-width: 220px; padding: 1rem 1.25rem; background: var(--creme); border: 1px solid var(--rose-3);
  box-shadow: var(--ombre); color: var(--marine); font-size: .875rem; font-weight: 500;
  animation: flotter 6s ease-in-out infinite;
}
@media (min-width: 640px) { .hero__carte { left: -2rem; } }
.decor { position: absolute; border-radius: 50%; background: var(--rose-3); opacity: .22; pointer-events: none; animation: deriver 9s ease-in-out infinite; }
.decor--un { width: 180px; height: 180px; left: -80px; top: 28%; }
.decor--deux { width: 90px; height: 90px; right: 42%; bottom: 8%; animation-delay: -3s; }
.decor--trois { width: 260px; height: 260px; right: -120px; top: 6%; opacity: .14; animation-delay: -5s; }
@media (min-width: 1024px) {
  .hero { min-height: min(900px, 100vh); padding: 11rem 0 6rem; display: flex; align-items: center; }
  .hero > .conteneur { width: min(100% - 4rem, 1280px); }
  .hero__grille { grid-template-columns: 1.05fr .75fr; gap: 5rem; }
}

/* ---------- Bandeau défilant ---------- */
.bandeau { overflow: hidden; border-block: 1px solid var(--rose-3); padding-block: 1.5rem; background: var(--rose); }
.bandeau__piste { display: flex; width: max-content; align-items: center; animation: defiler 30s linear infinite; }
.bandeau:hover .bandeau__piste { animation-play-state: paused; }
.bandeau__item { display: flex; align-items: center; color: var(--marine); }
.bandeau__item span { margin-inline: 1.75rem; font-size: .75rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
@media (min-width: 640px) { .bandeau__item span { margin-inline: 3rem; } }

/* ---------- Manifeste (section marine) ---------- */
.manifeste { background: var(--marine); color: var(--rose); padding-block: 5rem; }
.manifeste__citation {
  margin: 2rem 0 0; max-width: 60rem; font-family: var(--display); font-weight: 500;
  font-size: clamp(2.75rem, 6.5vw, 6rem); line-height: .95; color: var(--rose); letter-spacing: -.01em;
}
.chiffres { display: grid; margin-top: 4rem; border-top: 1px solid rgba(251, 230, 225, .3); }
.chiffre { padding-block: 2rem; border-bottom: 1px solid rgba(251, 230, 225, .3); }
.chiffre__valeur { font-family: var(--display); font-size: 3rem; line-height: 1; color: var(--rose); font-variant-numeric: tabular-nums; }
.chiffre__libelle { margin-top: .5rem; color: var(--rose); }
@media (min-width: 640px) {
  .manifeste { padding-block: 7rem; }
  .chiffres { grid-template-columns: repeat(3, 1fr); }
  .chiffre { border-bottom: 0; border-right: 1px solid rgba(251, 230, 225, .3); padding-inline: 2rem; }
  .chiffre:first-child { padding-left: 0; }
  .chiffre:last-child { border-right: 0; }
}

/* ---------- Expertises ---------- */
.grille-expertises { display: grid; gap: 1rem; margin-top: 3.5rem; }
@media (min-width: 768px) { .grille-expertises { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grille-expertises { grid-template-columns: repeat(3, 1fr); } }
.carte-expertise {
  position: relative; overflow: hidden; height: 100%; padding: 1.75rem; background: var(--creme);
  border: 1px solid var(--rose-3); transition: transform var(--moyen), box-shadow var(--moyen);
}
.carte-expertise::before {
  content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: var(--rose-3);
  left: calc(var(--gx, 50%) - 90px); top: calc(var(--gy, 50%) - 90px);
  opacity: 0; filter: blur(30px); transition: opacity 250ms; pointer-events: none;
}
.carte-expertise:hover::before { opacity: .45; }
.carte-expertise:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.carte-expertise > * { position: relative; }
.carte-expertise__haut { display: flex; align-items: flex-start; justify-content: space-between; }
.numero { font-family: var(--display); font-style: italic; font-size: 1.5rem; color: var(--marine); }
.icone { width: 1.5rem; height: 1.5rem; color: var(--marine); }
.carte-expertise h3 { margin-top: 3.5rem; font-size: 1.85rem; line-height: 1.1; }
.carte-expertise p { margin-top: 1rem; color: var(--muted); line-height: 1.6; }
@media (min-width: 640px) { .carte-expertise { padding: 2rem; } }
.suite-section { margin-top: 2.5rem; }

/* ---------- Méthode ---------- */
.fond-creme { background: var(--creme); }
.fond-rose-2 { background: var(--rose-2); }
.etapes { position: relative; display: grid; gap: 2.5rem; margin-top: 4rem; }
.etapes__ligne { position: absolute; left: 0; right: 0; top: 1.5rem; display: none; height: 1px; background: var(--rose-3); }
.etapes__ligne i { display: block; height: 100%; background: var(--marine); transform: scaleX(0); transform-origin: left; transition: transform 900ms cubic-bezier(.2, .7, .2, 1); }
.etapes.visible .etapes__ligne i { transform: scaleX(1); }
.etape { position: relative; padding-left: 1.75rem; border-left: 1px solid var(--rose-3); }
.etape__numero {
  position: relative; z-index: 1; display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid var(--marine); background: var(--creme); font-family: var(--display); font-style: italic; font-size: 1.25rem; color: var(--marine);
}
.etape h3 { margin-top: 1.5rem; font-size: 1.5rem; }
.etape p { margin-top: .75rem; color: var(--muted); }
@media (min-width: 768px) {
  .etapes { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
  .etapes__ligne { display: block; }
  .etape { padding-left: 0; border-left: 0; }
}

/* ---------- Réalisations ---------- */
.grille-projets { display: grid; gap: 3.5rem 1.5rem; margin-top: 3.5rem; }
@media (min-width: 768px) { .grille-projets { grid-template-columns: repeat(2, 1fr); } }
.carte-projet { display: block; }
.carte-projet__photo {
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; transition: transform var(--moyen), box-shadow var(--moyen);
}
.carte-projet__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.carte-projet:hover .carte-projet__photo { transform: translateY(-4px); box-shadow: var(--ombre); }
.carte-projet:hover .carte-projet__photo img { transform: scale(1.05); }
.carte-projet__bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; }
.carte-projet h3 { margin-top: .5rem; font-size: 1.85rem; line-height: 1.05; }
.carte-projet__meta { margin-top: .25rem; color: var(--muted); }
.carte-projet__voir { display: inline-flex; align-items: center; gap: .25rem; font-size: .875rem; font-weight: 500; color: var(--marine); white-space: nowrap; }
.carte-projet__voir svg { width: 1rem; height: 1rem; transition: transform var(--rapide); }
.carte-projet:hover .carte-projet__voir svg { transform: translateX(4px); }
.carte-projet.masquee { display: none; }
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 3rem; }
.filtre {
  min-height: 2.75rem; padding: .5rem 1.25rem; border-radius: 999px; border: 1px solid var(--marine);
  color: var(--marine); font-weight: 500; font-size: .9rem; transition: background var(--rapide), color var(--rapide);
}
.filtre[aria-pressed="true"], .filtre:hover { background: var(--marine); color: var(--blanc); }

/* ---------- Témoignages ---------- */
.carrousel { margin-top: 3rem; }
.carrousel__piste {
  display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
}
.carrousel__piste::-webkit-scrollbar { display: none; }
.temoignage { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.temoignage blockquote {
  margin: 0; max-width: 60rem; font-family: var(--display); font-weight: 500;
  font-size: clamp(1.9rem, 4.2vw, 3.75rem); line-height: 1.12; color: var(--marine);
}
.temoignage__qui { margin-top: 2rem; font-weight: 500; }
.temoignage__ou { color: var(--muted); }
.carrousel__points { display: flex; gap: .5rem; margin-top: 2rem; }
.carrousel__point { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; }
.carrousel__point i { display: block; width: .55rem; height: .55rem; border-radius: 50%; border: 1px solid var(--marine); transition: background var(--rapide), transform var(--rapide); }
.carrousel__point[aria-current="true"] i { background: var(--marine); transform: scale(1.2); }

/* ---------- À propos ---------- */
.apropos { display: grid; gap: 3.5rem; align-items: center; }
.apropos__photo { margin-inline: auto; width: 100%; max-width: 28rem; aspect-ratio: 4 / 5; }
.apropos__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.apropos__photo:hover img { transform: scale(1.04); }
.apropos__nom { margin-top: 2rem; font-size: .875rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--marine); }
.apropos__signature { margin-top: .75rem; font-family: var(--display); font-style: italic; font-size: 2.5rem; color: var(--marine); line-height: 1; }
@media (min-width: 1024px) { .apropos { grid-template-columns: .75fr 1fr; gap: 6rem; } .apropos--inverse { grid-template-columns: .72fr 1fr; } }

/* ---------- Appel à l'action ---------- */
.cta { background: var(--marine); color: var(--rose); padding-block: 5rem; }
.cta__grille { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .cta { padding-block: 7rem; } .cta__grille { grid-template-columns: 1fr auto; align-items: end; } }

/* ---------- Pied de page ---------- */
.pied { background: var(--marine-2); color: var(--rose); padding-block: 4rem; }
.pied__grille { display: grid; gap: 3rem; padding-bottom: 3.5rem; border-bottom: 1px solid rgba(251, 230, 225, .25); }
@media (min-width: 768px) { .pied__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pied__grille { grid-template-columns: repeat(4, 1fr); } }
.pied .marque { color: var(--rose); }
.pied__phrase { margin-top: 1.5rem; max-width: 20rem; }
.pied__titre { font-size: .75rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.pied__liens { display: flex; flex-direction: column; margin-top: 1.25rem; }
.pied__liens a, .pied__liens span { display: inline-flex; align-items: center; min-height: 2.25rem; width: fit-content; transition: opacity var(--rapide); }
.pied__liens a:hover { opacity: .7; }
.reseaux { display: flex; gap: .75rem; margin-top: 1.25rem; }
.reseau { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid rgba(251, 230, 225, .35); color: var(--rose); transition: background var(--rapide), color var(--rapide); }
.reseau:hover { background: var(--rose); color: var(--marine); }
.reseau svg { width: 1.125rem; height: 1.125rem; }
.pied__bas { display: flex; flex-direction: column; gap: 1rem; padding-top: 2rem; font-size: .875rem; }
.pied__bas nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.pied__bas a:hover { text-decoration: underline; }
@media (min-width: 640px) { .pied__bas { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ---------- Pages intérieures ---------- */
.entete-page { background: var(--rose-2); padding: 9rem 0 4rem; }
@media (min-width: 640px) { .entete-page { padding: 11rem 0 5rem; } }
.fil { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--muted); }
.fil a:hover { color: var(--marine); }
.fil [aria-current] { color: var(--marine); }
.entete-page .surtitre { margin-top: 3rem; }
.titre-page { margin-top: 1.25rem; max-width: 60rem; font-size: clamp(2.75rem, 7vw, 5.5rem); line-height: .92; letter-spacing: -.02em; }
.intro-page { margin-top: 1.75rem; max-width: 42rem; font-size: 1.125rem; line-height: 1.65; }

/* Expertises détaillées */
.expertise-detail { display: grid; gap: 1.5rem; padding-block: 3rem; border-top: 1px solid var(--rose-3); }
.expertise-detail h2 { font-size: 2.25rem; line-height: 1.05; }
.expertise-detail p { margin-top: 1rem; line-height: 1.65; }
.puces { display: grid; gap: .75rem; }
.puces li { display: flex; gap: .75rem; color: var(--muted); }
.puces li::before { content: ""; flex-shrink: 0; margin-top: .7rem; width: .375rem; height: .375rem; background: var(--marine); transform: rotate(45deg); }
@media (min-width: 768px) { .expertise-detail { grid-template-columns: 100px 1fr 1fr; gap: 2.5rem; } .puces { padding-top: .5rem; } }

/* Méthode détaillée */
.etape-detail { display: grid; gap: 2rem; }
.etape-detail h2 { margin-top: 1rem; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; }
.etape-detail__texte { border-top: 1px solid var(--rose-3); padding-top: 1.5rem; }
.etape-detail__texte .accroche { font-size: 1.25rem; font-weight: 500; }
.etape-detail__texte p + p { margin-top: 1.25rem; max-width: 42rem; color: var(--muted); line-height: 1.65; }
.etapes-detail { display: grid; gap: 5rem; }
@media (min-width: 1024px) { .etape-detail { grid-template-columns: .8fr 1.2fr; } }
.faq-grille { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .faq-grille { grid-template-columns: .75fr 1fr; } }
.faq details { border-bottom: 1px solid var(--rose-3); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; padding-block: 1rem;
  list-style: none; cursor: pointer; font-size: 1.125rem; font-weight: 500; color: var(--marine);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; transition: transform var(--moyen); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq__reponse { overflow: hidden; }
.faq__reponse p { padding-bottom: 1.5rem; color: var(--muted); line-height: 1.65; max-width: 44rem; }

/* Fiche réalisation */
.fiche__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 3rem; color: var(--marine); font-size: .875rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.fiche__photo { margin-top: -3rem; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; box-shadow: var(--ombre); }
.fiche__photo img { width: 100%; height: 100%; object-fit: cover; }
.fiche__corps { display: grid; gap: 3rem; margin-top: 4rem; }
@media (min-width: 1024px) { .fiche__corps { grid-template-columns: .7fr 1.3fr; gap: 5rem; } }
.fiche__bloc + .fiche__bloc { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--rose-3); }
.fiche__bloc h2 { font-size: 2rem; line-height: 1.05; }
.fiche__bloc p { margin-top: 1rem; line-height: 1.7; max-width: 42rem; }
.fiche__bloc .puces { margin-top: 1.25rem; }
.fiche__aside { display: grid; gap: 1.5rem; align-content: start; }
.fiche__cle { padding: 1.5rem; background: var(--creme); border: 1px solid var(--rose-3); }
.fiche__cle .surtitre { font-size: .7rem; }
.fiche__cle p { margin-top: .5rem; font-family: var(--display); font-size: 1.75rem; line-height: 1.1; color: var(--marine); }
.galerie { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 640px) { .galerie { grid-template-columns: repeat(2, 1fr); } }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }

/* À propos — valeurs */
.valeurs { display: grid; gap: 1px; margin-top: 3.5rem; background: rgba(251, 230, 225, .3); }
@media (min-width: 768px) { .valeurs { grid-template-columns: repeat(3, 1fr); } }
.valeur { height: 100%; padding: 2rem; background: var(--marine); }
.valeur .numero { color: var(--rose); }
.valeur h3 { margin-top: 3rem; font-size: 2.25rem; color: var(--rose); font-weight: 500; }
.valeur p { margin-top: 1rem; color: var(--rose); line-height: 1.65; }
.parcours { display: grid; gap: 1.5rem; margin-top: 1.75rem; }
.parcours p { font-size: 1.125rem; line-height: 1.65; }
.travail { display: grid; gap: 2.5rem; }
.travail h2 { margin-top: 1.25rem; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; }
.travail p { font-size: 1.25rem; line-height: 1.65; }
@media (min-width: 1024px) { .travail { grid-template-columns: 1fr 1fr; } }

/* Contact */
.contact { display: grid; gap: 3.5rem; }
@media (min-width: 1024px) { .contact { grid-template-columns: .7fr 1.2fr; gap: 6rem; } }
.contact__aside h2 { font-size: 2.25rem; line-height: 1.05; }
.contact__aside > p { margin-top: 1.25rem; color: var(--muted); line-height: 1.65; }
.contact__aside .surtitre { margin-top: 3rem; }
.coordonnees { display: grid; gap: .25rem; margin-top: 1.25rem; }
.coordonnees a, .coordonnees p { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; color: var(--marine); }
.coordonnees svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.coordonnees a:hover { text-decoration: underline; }
.coordonnees small { display: block; margin-top: .5rem; color: var(--muted); font-size: .875rem; }
.formulaire-cadre { padding: 1.5rem; background: var(--creme); border: 1px solid var(--rose-3); }
@media (min-width: 640px) { .formulaire-cadre { padding: 2.5rem; } }
.formulaire-cadre h2 { font-size: 2.25rem; }
.champs { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 640px) { .champs { grid-template-columns: repeat(2, 1fr); } .champ--large { grid-column: span 2; } }
.champ label { display: block; margin-bottom: .5rem; font-size: .875rem; font-weight: 500; color: var(--marine); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 3rem; padding: .5rem 0; border: 0; border-bottom: 1px solid var(--rose-3); border-radius: 0;
  background: transparent; font: inherit; font-size: 1rem; color: var(--encre); transition: border-color var(--rapide);
}
.champ textarea { min-height: 9rem; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-bottom-color: var(--marine); box-shadow: 0 1px 0 var(--marine); }
.champ input::placeholder, .champ textarea::placeholder { color: #9aa3b8; }
.champ select { appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231c3e7f' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center; padding-right: 1.5rem; }
.champ .erreur { margin-top: .5rem; font-size: .875rem; color: #a33a3a; }
.champ.invalide input, .champ.invalide select, .champ.invalide textarea { border-bottom-color: #a33a3a; }
.consentement { display: flex; align-items: flex-start; gap: .75rem; font-size: .875rem; line-height: 1.6; }
.consentement input { flex-shrink: 0; margin-top: .25rem; width: 1.25rem; height: 1.25rem; accent-color: var(--marine); }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.formulaire-cadre .bouton { margin-top: 2rem; }
.merci { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 28rem; text-align: center; }
.merci__coche { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--marine); color: var(--blanc); animation: surgir 450ms cubic-bezier(.2, .8, .2, 1.2) forwards; }
.merci__coche svg { width: 2rem; height: 2rem; }
.merci__coche path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: tracer 500ms ease 250ms forwards; }
.merci h2 { margin-top: 1.75rem; font-size: 2.25rem; }
.merci p { margin-top: 1rem; color: var(--muted); }
.alerte { margin-top: 1.5rem; padding: 1rem 1.25rem; border: 1px solid #d8a5a0; background: #fff1ee; color: #7a2d2d; font-size: .95rem; }

/* Mentions légales */
.legal { display: grid; gap: 3rem; max-width: 56rem; }
.legal article { padding-top: 2rem; border-top: 1px solid var(--rose-3); }
.legal h2 { font-size: 2.25rem; line-height: 1.05; }
.legal p { margin-top: 1.25rem; line-height: 1.7; white-space: pre-line; }

/* Page introuvable */
.introuvable { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 10rem 0 6rem; }
.introuvable h1 { font-size: clamp(3rem, 8vw, 6rem); line-height: .9; }
.introuvable p { margin-top: 1.5rem; color: var(--muted); }
.introuvable .bouton { margin-top: 2.5rem; }

/* ---------- Apparition au défilement ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 500ms ease, transform 500ms cubic-bezier(.2, .7, .2, 1); transition-delay: var(--delai, 0ms); }
.reveal.visible { opacity: 1; transform: none; }
.reveal--immediat { transition-delay: 0ms; }

/* ---------- Transitions entre les pages (navigation classique) ---------- */
@view-transition { navigation: auto; }
@keyframes sortirPage { to { opacity: 0; transform: translateY(-16px); } }
@keyframes entrerPage { from { opacity: 0; transform: translateY(16px); } }
::view-transition-old(root) { animation: sortirPage 220ms ease-in forwards; }
::view-transition-new(root) { animation: entrerPage 280ms ease-out; }

/* ---------- Animations ---------- */
@keyframes monter { to { transform: translateY(0); } }
@keyframes apparaitre { to { opacity: 1; } }
@keyframes zoomLent { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes flotter { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes deriver { 50% { transform: translate3d(12px, -10px, 0); } }
@keyframes defiler { to { transform: translateX(-50%); } }
@keyframes surgir { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes tracer { to { stroke-dashoffset: 0; } }

@media (min-width: 640px) {
  .conteneur { width: min(100% - 4rem, 1280px); }
  .section { padding-block: 6rem; }
}
@media (min-width: 1024px) { .section { padding-block: 8rem; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .ligne > span { transform: none; }
  .hero__intro, .hero__actions { opacity: 1; }
  .reveal { opacity: 1; transform: none; }
  .bandeau__piste, .decor, .hero__carte { animation: none; }
  .etapes__ligne i { transform: scaleX(1); }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}