/* Homepage only. Normal document flow is the baseline, including without JavaScript. */
.accueil { --marge:clamp(24px,6vw,100px); }
.accueil .nav { padding-block:24px; }
.accueil .nav-logo { min-height:44px; display:flex; align-items:center; }
.accueil .nav nav a { display:inline-flex; align-items:center; min-height:44px; }
.accueil .nav-logo img { height:32px; }
.accueil .fond { opacity:.75; }
.accueil .grain { opacity:.035; }
.parcours { position:relative; z-index:1; }
.chapitre { position:relative; min-height:92svh; display:flex; align-items:center; padding:110px var(--marge); scroll-margin-top:80px; }
.cadre { width:100%; max-width:1320px; margin-inline:auto; }
.chapitre h1,.chapitre h2,.chapitre h3 { font-family:var(--serif); font-weight:700; letter-spacing:-.035em; text-wrap:balance; margin:0; }
.chapitre h1 { font-size:clamp(57px,8.4vw,131px); line-height:.93; }
.chapitre h2 { font-size:clamp(41px,5.8vw,89px); line-height:1.02; }
.chapitre h3 { font-size:clamp(29px,3vw,46px); line-height:1.12; }
.chapitre .intro { font-size:clamp(16px,1.25vw,19px); line-height:1.6; color:var(--brume); max-width:49ch; }
.ouverture { min-height:100svh; text-align:center; padding-bottom:120px; }
.ouverture .label { margin-bottom:35px; }
.ouverture .intro { margin:30px auto 0; max-width:52ch; }
.ouverture h1 { text-shadow:0 2px 50px var(--nuit); }
.invitation { display:inline-flex; gap:13px; align-items:center; margin-top:35px; color:var(--craie); font-size:13px; min-height:44px; }
.fleche { width:34px; height:44px; border:1px solid #514456; border-radius:24px; display:grid; place-items:center; transition:transform .25s; color:var(--peche); }
.invitation:hover .fleche { transform:translateY(4px); }
.bas-ouverture { position:absolute; inset:auto var(--marge) 44px; display:flex; justify-content:space-between; font:11px/1.6 var(--mono); text-transform:uppercase; letter-spacing:.15em; color:var(--brume); }
.bas-ouverture i { font-style:normal; margin-left:18px; color:var(--peche); }
.repere { display:flex; justify-content:space-between; gap:24px; border-top:1px solid var(--ligne); padding-top:18px; margin-bottom:55px; font:11px/1.6 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--brume); }
.repere span:first-child { color:var(--peche); }
.manifeste { min-height:100svh; }
.manifeste .repere { max-width:100%; }
.manifeste h2 { max-width:15ch; font-size:clamp(46px,5.6vw,86px); }
.manifeste h2 em { white-space:nowrap; }
.manifeste .intro { margin-top:30px; }
.suite { margin-top:45px; display:flex; align-items:center; gap:32px; color:var(--brume); font:11px/1.6 var(--mono); text-transform:uppercase; letter-spacing:.12em; }
.suite a { color:var(--peche); display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--ligne); border-radius:50%; }
.expertise { min-height:90svh; background:transparent; }
.expertise > .cadre > .label { margin-bottom:55px; }
.expertise-contenu { display:grid; grid-template-columns:1fr 1.05fr; gap:9%; align-items:start; }
.expertise h2 { font-size:clamp(45px,4.7vw,72px); }
.expertise-intro .lien { margin-top:36px; }
.expertises li { display:grid; grid-template-columns:30px 1fr 20px; gap:16px; padding:23px 0 27px; border-top:1px solid var(--trait); }
.expertises li:last-child { border-bottom:1px solid var(--trait); }
.expertises .num { color:var(--peche); padding-top:9px; }
.expertises p { color:var(--brume); font-size:15px; max-width:34ch; margin-top:9px; }
.signe { color:var(--brume); padding-top:10px; }
.philosophie { text-align:center; min-height:90svh; padding-top:220px; }
.philosophie .label { margin-bottom:35px; }
.philosophie h2 { font-size:clamp(41px,5.2vw,79px); }
.philosophie .intro { margin:28px auto 25px; }
.signature-finale { min-height:90svh; text-align:center; padding-top:clamp(110px,14vh,160px); }
.signature-finale .label { margin-bottom:35px; }
.signature-finale .intro { margin:24px auto 32px; }
.signature-finale .bouton { display:inline-flex; align-items:center; gap:32px; min-height:54px; }
.signature-statique { width:240px; display:block; margin:0 auto 64px; }
.objet-scene { display:none; }
.objet-pret .objet-scene { display:block; position:fixed; inset:0; pointer-events:none; z-index:0; }
.objet-scene canvas { display:block; }
.objet-scene #logotype { position:absolute; top:0; left:0; opacity:0; max-width:none; }
.objet-pret .signature-statique { visibility:hidden; width:min(50vw,720px); }
.signature-prete .signature-statique { visibility:visible; }
.signature-prete .objet-scene { visibility:hidden; }
.progression { display:none; }
.objet-pret .progression { position:fixed; z-index:4; right:20px; top:50%; display:flex; gap:16px; align-items:center; flex-direction:column; color:var(--brume); font:11px/1.5 var(--mono); pointer-events:none; transform:translateY(-50%); }
.progression>div { width:1px; height:110px; background:var(--ligne); }
.progression i { display:block; width:1px; height:100%; background:var(--peche); transform:scaleY(0); transform-origin:top; }
.progression>span:last-child { writing-mode:vertical-rl; letter-spacing:.1em; }
.accueil .pied { font-size:11px; padding-right:var(--marge); }
.accueil .lien { min-height:44px; align-items:center; }
@media (min-width:1600px) { .manifeste h2 { max-width:none; } }
@media (max-width:899px) {
 .accueil .nav { padding-block:14px; }
 .accueil .nav nav { gap:16px; font-size:13px; }
 .accueil .nav-logo img { width:92px; height:auto; }
 .chapitre { padding:85px var(--marge); min-height:auto; }
 .ouverture { min-height:100svh; padding-top:150px; padding-bottom:150px; }
 .chapitre h1 { font-size:clamp(52px,10.3vw,86px); }
 .bas-ouverture { bottom:35px; font-size:11px; }
 .manifeste { min-height:90svh; }
 .manifeste h2 { font-size:clamp(37px,7.3vw,65px); }
 .manifeste h2 em { white-space:normal; }
 .repere { margin-bottom:40px; font-size:11px; }
 .repere span:last-child { display:none; }
 .expertise-contenu { grid-template-columns:1fr; gap:45px; }
 .expertise h2 br { display:none; }
 .expertise h2 { font-size:45px; max-width:11ch; }
 .expertise > .cadre > .label { margin-bottom:32px; }
 
 .philosophie { min-height:85svh; padding-top:210px; }
 .signature-finale { min-height:85svh; padding-top:110px; }
 .objet-pret .signature-statique { width:min(86vw,520px); }
 .objet-pret .progression { display:none; }
 .desktop { display:none; }
 .accueil .pied ul { gap:15px 22px; }
}
@media (max-width:374px) {
 .accueil { --marge:18px; }
 .accueil .nav nav { gap:10px; }
 .accueil .bouton-ligne { padding-inline:12px; }
 .accueil .nav-logo img { width:78px; }
 .chapitre h1 { font-size:46px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* One continuous atmosphere; only the object fades while entering the project gallery. */
.expertise-intro h2 { text-shadow:0 2px 24px var(--nuit); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

/* Bandeau « Ils nous ont fait confiance » : défilement continu en CSS, sans script. */
.confiance { min-height:auto; padding-block:clamp(70px,10vh,120px); }
.confiance .repere { margin-bottom:clamp(34px,5vw,60px); }
.defile { display:flex; overflow:hidden; width:100vw; margin-left:calc(50% - 50vw); border-block:1px solid var(--ligne); padding-block:clamp(30px,4vw,48px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.defile-piste { flex:none; display:flex; align-items:center; gap:clamp(56px,8vw,120px); padding-right:clamp(56px,8vw,120px); margin:0; padding-left:0; list-style:none; min-width:100%; justify-content:space-around; animation:defile 48s linear infinite; }
.defile-piste li { flex:none; display:flex; align-items:center; }
.defile-piste img { display:block; height:var(--h); width:auto; opacity:.78; transition:opacity .3s; }
.defile:hover .defile-piste, .defile:focus-within .defile-piste { animation-play-state:paused; }
.defile-piste img:hover { opacity:1; }
@keyframes defile { to { transform:translateX(-100%); } }
@media (max-width:899px) { .defile-piste img { height:calc(var(--h) * .75); } .defile-piste { animation-duration:36s; } }
@media (prefers-reduced-motion:reduce) {
  .defile { overflow-x:auto; width:auto; margin-left:0; -webkit-mask-image:none; mask-image:none; }
  .defile-piste { animation:none; }
  .defile-piste[aria-hidden="true"] { display:none; }
}

/* Logos : couleurs d'origine au survol (quand une version couleur existe). */
.defile-piste li { position:relative; }
.defile-piste img.couleur { position:absolute; inset:0; margin:auto; opacity:0; }
.defile-piste li:hover img.couleur, .defile-piste li:focus-within img.couleur { opacity:1; }
/* Au survol : si une version couleur existe elle apparaît ; sinon le logo passe en blanc pur. */
.defile-piste li:has(img.couleur):hover img:not(.couleur):not(.clair) { opacity:0; }
.defile-piste li:not(:has(img.couleur)):hover img:not(.clair) { opacity:1; filter:brightness(0) invert(1); }
.defile-piste img:not(.clair) { transition:opacity .3s, filter .3s; }

/* Hero : bouton d'action principal et lien de défilement. */
.actions { display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:38px; }
.actions .bouton { display:inline-flex; align-items:center; gap:32px; min-height:54px; padding-inline:28px; }
.actions .invitation { margin-top:6px; }

.etudes { margin:clamp(32px,4vw,52px) 0 0; text-align:center; }
.etudes .lien { font-size:clamp(17px,1.5vw,21px); }

/* ---------- Hero clair : dégradé aux couleurs de Webizy qui suit la souris ---------- */
.ouverture { color: #17121f; }
.hero-fond { position: absolute; top: 0; left: 0; right: 0; height: calc(var(--hero-h, 100svh) + 280px); z-index: 0; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, #faf7fc 0%, #f5eff8 40%, #f8f0ee 62%, #f0e4ee 100%);
  /* fondu long et progressif vers le fond nuit : aucune arête */
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 640px), rgba(0,0,0,.86) calc(100% - 540px), rgba(0,0,0,.66) calc(100% - 430px), rgba(0,0,0,.44) calc(100% - 320px), rgba(0,0,0,.24) calc(100% - 210px), rgba(0,0,0,.09) calc(100% - 110px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 640px), rgba(0,0,0,.86) calc(100% - 540px), rgba(0,0,0,.66) calc(100% - 430px), rgba(0,0,0,.44) calc(100% - 320px), rgba(0,0,0,.24) calc(100% - 210px), rgba(0,0,0,.09) calc(100% - 110px), transparent 100%); }
/* halo violet dans la zone de fondu : évite le gris sale entre clair et sombre */
.hero-fond::after { content: ""; position: absolute; inset: 0; z-index: 5; background: linear-gradient(180deg, transparent calc(100% - 720px), rgba(78, 60, 144, .32) calc(100% - 420px), rgba(60, 44, 112, .22) calc(100% - 200px), transparent 100%); }
.hero-blob { position: absolute; width: 0; height: 0; will-change: transform; }
.hero-blob i { position: absolute; display: block; border-radius: 50%; }
.b1 { left: 28%; top: 34%; } .b1 i { width: 82vmax; height: 82vmax; margin: -41vmax 0 0 -41vmax; background: radial-gradient(closest-side, rgba(98, 74, 196, .38), rgba(98, 74, 196, .12) 52%, transparent 76%); }
.b2 { left: 74%; top: 62%; } .b2 i { width: 70vmax; height: 70vmax; margin: -35vmax 0 0 -35vmax; background: radial-gradient(closest-side, rgba(244, 162, 151, .62), rgba(244, 162, 151, .2) 55%, transparent 76%); }
.b3 { left: 58%; top: 16%; } .b3 i { width: 56vmax; height: 56vmax; margin: -28vmax 0 0 -28vmax; background: radial-gradient(closest-side, rgba(138, 97, 146, .3), rgba(138, 97, 146, .09) 55%, transparent 76%); }
.b4 { left: 50%; top: 50%; } .b4 i { width: 34vmax; height: 34vmax; margin: -17vmax 0 0 -17vmax; background: radial-gradient(closest-side, rgba(255, 255, 255, .7), rgba(255, 255, 255, .2) 55%, transparent 76%); }
@media (prefers-reduced-motion: no-preference) {
  .b1 i { animation: hero-derive 17s ease-in-out infinite alternate; }
  .b2 i { animation: hero-derive 21s ease-in-out -7s infinite alternate-reverse; }
  .b3 i { animation: hero-derive 25s ease-in-out -3s infinite alternate; }
}
@keyframes hero-derive { from { transform: translate3d(-2.5vmax, -1.5vmax, 0) scale(1); } to { transform: translate3d(3vmax, 2vmax, 0) scale(1.07); } }

.ouverture h1 { color: #17121f; text-shadow: none; }
.ouverture h1 em { background: linear-gradient(95deg, #4e3c90 0%, #8a6192 46%, #f4a297 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #7a4f9a; }
.ouverture .label { display: inline-block; padding: 9px 18px; border: 1px solid rgba(255, 255, 255, .85); border-radius: 999px; background: rgba(255, 255, 255, .5); color: #4a3f66; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: 0 8px 28px rgba(78, 60, 144, .12), inset 0 1px 0 rgba(255, 255, 255, .95); }
.ouverture .intro { color: #3d3550; }
.ouverture .actions .bouton { background: #17121f; color: #fff; box-shadow: 0 12px 34px rgba(23, 18, 31, .28); }
.ouverture .actions .bouton:hover { background: #4e3c90; }
.ouverture .invitation { padding: 0 20px 0 6px; border: 1px solid rgba(255, 255, 255, .85); border-radius: 999px; background: rgba(255, 255, 255, .42); color: #17121f; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ouverture .fleche { border-color: rgba(23, 18, 31, .25); color: #a8507f; }
.ouverture .bas-ouverture { color: var(--brume); }
html.hero-clair .progression { color: #4a4258; }
html.hero-clair .progression > div { background: rgba(23, 18, 31, .2); }
@media (prefers-reduced-transparency: reduce) { .ouverture .label, .ouverture .invitation { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; } }
/* Logos : bandeau en verre. */
.defile { background: var(--verre); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* Bouton rond « défiler » en bas du hero */
.invitation, .ouverture .invitation { display: none; }
.defiler { position: absolute; left: 50%; bottom: 34px; z-index: 2; display: grid; place-items: center; width: 54px; height: 54px; margin-left: -27px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); color: var(--craie); font-size: 20px; line-height: 1; box-shadow: 0 8px 30px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .2); transition: background .3s, border-color .3s, transform .3s; }
.defiler:hover { background: rgba(255, 255, 255, .16); border-color: rgba(243, 163, 149, .6); transform: translateY(3px); }
.defiler span { display: block; color: var(--peche); }
@media (prefers-reduced-motion: no-preference) { .defiler span { animation: defiler-rebond 2.2s ease-in-out infinite; } }
@keyframes defiler-rebond { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
@media (max-width: 899px) { .defiler { bottom: 28px; } .bas-ouverture { display: none; } }