/* ==========================================================================
Elevate · pages.css · le calque « multipage » posé sur css/style.css (celle du BIS, inchangée)
Chargé sur TOUTES les pages après style.css. Contenu :
1. En-tête multipage : bouton de langue FR / EN, menu, point d'arrêt du tiroir mobile
2. En-tête de page (.phero) pour les pages intérieures
3. Blocs de contenu réutilisables : .sec, .sec__head, .prose, .split, .cards/.tile, .faq, .gallery,
.btn-row, .link-arrow, .tags, .notice, .pager, .crumbs, .todo
4. Bandeau d'appel avant le pied de page (.cta), pied de page, aperçu des créations (accueil), invite de langue, 404
Les pages intérieures sont plus calmes que l'accueil : blanc, beaucoup d'air, une montagne en tête de page.
Les effets (apparition [data-reveal], parallaxe [data-parallax], brume [data-live]) viennent de js/main.js.
Pages spécifiques : css/work.css, css/offer.css (chargés après ce fichier, ils gagnent à spécificité égale).
========================================================================== */
:root{
--bar-h:0px; /* plus de bandeau « démo » : le site est officiel */
--sec:clamp(64px,8vw,128px);
}
/* ---------- 1. En-tête multipage ---------- */
.nav-row{gap:clamp(14px,2vw,28px)}
.nav-actions{gap:10px}
/* Bouton de langue : un seul lien vers la page jumelle, la langue active est pleine */
.lang{
display:inline-flex;align-items:center;gap:2px;flex:none;height:42px;padding:4px;border-radius:999px;
border:1px solid var(--line-2);background:rgba(255,255,255,.7);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
transition:border-color .5s var(--ease),background-color .5s var(--ease);
}
.lang__opt{display:grid;place-items:center;min-width:32px;height:32px;padding:0 4px 0 calc(4px + .14em);border-radius:999px;transition:background-color .5s var(--ease),color .5s var(--ease)}
.lang__opt.is-on{background:var(--ink);color:#fff}
@media (hover:hover){.lang:hover{border-color:var(--ink);background:#fff}}
html[lang="en"] .sound{font-size:9px;letter-spacing:.06em}
/* Le tiroir mobile prend le relais plus tôt : le menu a quatre entrées, deux boutons et la langue */
@media (max-width:1080px){
.nav{display:none}
.burger{display:inline-block}
.nav-actions{margin-left:auto}
}
@media (max-width:1180px){
.nav-row{gap:14px}
.nav{gap:18px}
.nav a{letter-spacing:.14em}
.nav-actions .btn--sm{padding:0 16px;letter-spacing:.14em}
}
@media (max-width:640px){
.lang{height:40px}
.lang__opt{min-width:28px;height:30px}
.nav-actions{gap:8px}
}
@media (max-width:380px){
.lang__opt{min-width:26px}
.nav-actions{gap:6px}
}
.drawer__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;width:100%}
.drawer__mail{word-break:break-all}
.drawer__links a[aria-current="page"]{font-style:italic}
/* ---------- 2. En-tête de page (pages intérieures) ---------- */
.phero{
position:relative;isolation:isolate;overflow:hidden;background:#fff;
padding:calc(var(--nav-h) + clamp(44px,6vw,96px)) 0 clamp(56px,7vw,110px);
}
.phero__mtn{inset:0;
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 64%,transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 64%,transparent 100%)}
/* Le blanc couvre le texte (à gauche) et laisse la montagne respirer (à droite) */
.phero__mtn::after{content:"";position:absolute;inset:0;z-index:2;
background:linear-gradient(100deg,#fff 0,rgba(255,255,255,.93) 34%,rgba(255,255,255,.56) 64%,rgba(255,255,255,.18) 100%)}
.phero--center .phero__mtn::after{
background:radial-gradient(ellipse 66% 74% at 50% 46%,rgba(255,255,255,.94),rgba(255,255,255,.62) 66%,rgba(255,255,255,.3))}
.phero__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start}
.phero--center .phero__inner{align-items:center;text-align:center}
.phero__title{
margin-top:clamp(14px,2vw,24px);max-width:14em;
font:400 clamp(44px,7vw,112px)/.98 var(--serif);letter-spacing:-.022em;text-wrap:balance;
}
.phero__title em{font-style:italic}
.phero--center .phero__title{margin-inline:auto}
.phero__lead{max-width:54ch;margin-top:clamp(18px,2.2vw,30px);color:#3d4552}
.phero--center .phero__lead{margin-inline:auto}
.phero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3.2vw,44px)}
.phero--center .phero__actions{justify-content:center}
.phero__in{animation:rise 1.3s var(--ease) both;animation-delay:calc(var(--i,0)*110ms + 150ms)}
.phero--compact{padding-bottom:clamp(28px,4vw,56px)}
.phero--compact .phero__title{font-size:clamp(38px,5.4vw,84px)}
.phero--404{min-height:min(100svh,880px);display:grid;align-content:center}
.e404__en{margin-top:clamp(36px,5vw,64px);padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--line-2);display:flex;flex-direction:column;align-items:center;gap:10px}
.e404__title{font:400 clamp(26px,3vw,40px)/1.15 var(--serif);letter-spacing:-.01em}
.e404__text{color:#3d4552;max-width:44ch}
.e404__en .phero__actions{margin-top:14px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px 0;margin-bottom:clamp(20px,2.6vw,34px);font:400 11px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.crumbs li + li::before{content:"/";margin:0 12px;color:var(--gold)}
.crumbs a{background:linear-gradient(var(--ink),var(--ink)) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:background-size .6s var(--ease)}
.crumbs a:hover{background-size:100% 1px}
.crumbs [aria-current]{color:var(--ink)}
/* ---------- 3. Blocs de contenu réutilisables ---------- */
.sec{position:relative;padding-block:var(--sec)}
.sec--tight{padding-block:clamp(40px,5vw,80px)}
.sec--tint{background:linear-gradient(to bottom,#fff 0,var(--cloud) 14%,var(--cloud) 86%,#fff 100%)}
.sec--top0{padding-top:0}
.sec--bot0{padding-bottom:0}
.sec__head{max-width:60rem;margin-bottom:clamp(34px,4.6vw,68px)}
.sec__head--center{margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.sec__head .lead{margin-top:20px}
.sec__head--center .lead{margin-inline:auto}
.h2--md{font-size:clamp(34px,4.6vw,72px);line-height:1.02;margin-top:18px}
.h3{font:400 clamp(26px,3vw,42px)/1.08 var(--serif);letter-spacing:-.012em;text-wrap:balance}
.h3--sm{font-size:clamp(22px,2.2vw,30px)}
.eyebrow-line{font:400 11px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
/* Texte riche : pages légales, paragraphes d'explication */
.prose{max-width:68ch;font-size:clamp(16px,1.2vw,18px);line-height:1.8;color:var(--ink-2)}
.prose > * + *{margin-top:1.1em}
.prose h2{margin-top:2.4em;font:400 clamp(28px,3.2vw,44px)/1.1 var(--serif);letter-spacing:-.014em;color:var(--ink);text-wrap:balance}
.prose h3{margin-top:2em;font:500 12.5px/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.prose h2 + *,.prose h3 + *{margin-top:.8em}
.prose strong{font-weight:500;color:var(--ink)}
.prose a{color:var(--ink);background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% 1px no-repeat;padding-bottom:1px;transition:background-size .5s var(--ease)}
.prose a:hover{background-size:100% 2px}
.prose ul,.prose ol{display:grid;gap:.5em;padding:0;list-style:none}
.prose ul li{position:relative;padding-left:1.6em}
.prose ul li::before{content:"";position:absolute;left:0;top:.9em;width:.9em;height:1px;background:var(--gold)}
.prose ol{counter-reset:p}
.prose ol li{position:relative;padding-left:2.4em;counter-increment:p}
.prose ol li::before{content:counter(p,decimal-leading-zero);position:absolute;left:0;top:.35em;font:400 11px/1.6 var(--mono);letter-spacing:.14em;color:var(--ink)}
.prose blockquote{margin-inline:0;padding:4px 0 4px 22px;border-left:2px solid var(--gold);color:var(--ink);font:italic 400 clamp(22px,2vw,28px)/1.4 var(--serif)}
.prose hr{border:0;height:1px;background:var(--line-2);margin-block:2.4em}
.prose--wide{max-width:84ch}
/* Champs à compléter (mentions légales : SIRET, adresse…) : toujours visibles */
.todo{padding:1px 6px;border-radius:6px;background:#fff1bf;color:#5b4300;font-weight:500}
/* Deux colonnes : texte + image / fenêtre. .split--rev inverse, .split--top aligne en haut */
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:center}
.split__text{grid-column:1/7;min-width:0}
.split__media{grid-column:8/13;min-width:0}
.split--rev .split__text{grid-column:7/13;grid-row:1}
.split--rev .split__media{grid-column:1/6;grid-row:1}
.split--top{align-items:start}
@media (max-width:860px){
.split{display:block}
.split__media{margin-top:clamp(28px,6vw,44px)}
}
/* Cartes : .cards (auto), .cards--2/3/4 (colonnes fixes, repliées sur petit écran) ; .tile = une carte */
.cards{display:grid;gap:clamp(14px,1.8vw,26px);grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));align-items:stretch}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.cards--3,.cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cards--2,.cards--3,.cards--4{grid-template-columns:1fr}}
.tile{
position:relative;display:flex;flex-direction:column;min-width:0;
padding:clamp(22px,2.2vw,34px);background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow-s);
transition:box-shadow .9s var(--ease),transform .9s var(--ease);
}
.tile__no{display:inline-flex;align-items:center;gap:12px;font:400 11.5px/1 var(--mono);letter-spacing:.2em;color:var(--ink-2)}
.tile__no::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}
.tile__title{margin-top:clamp(22px,2.6vw,40px);font:400 clamp(26px,2.3vw,34px)/1.1 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.tile__title:first-child{margin-top:0}
.tile__text{margin-top:12px;font-size:15.5px;line-height:1.7;color:var(--ink-2)}
.tile__text + .tile__text{margin-top:10px}
.tile__more{margin-top:auto;padding-top:22px}
.tile--soft{background:var(--cloud);box-shadow:none}
.tile--glass{background:rgba(255,255,255,.78);border-color:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
/* Carte entièrement cliquable : le lien porte la classe .tile__link (étendue sur toute la carte) */
.tile__link::after{content:"";position:absolute;inset:0;border-radius:26px}
.tile:has(.tile__link):focus-within{box-shadow:var(--shadow-m)}
@media (hover:hover){.tile:has(.tile__link):hover{box-shadow:var(--shadow-m);transform:translateY(-4px)}}
.tile ul.tile__list{margin-top:14px;display:grid;gap:8px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.tile ul.tile__list li{position:relative;padding-left:1.3em}
.tile ul.tile__list li::before{content:"";position:absolute;left:0;top:.8em;width:.7em;height:1px;background:var(--gold)}
/* FAQ : Question