/* ============================================================
   CREAO — COMMUNICATION VISUELLE · SITE MULTI-PAGES
   Charte 2024 — #222323 #404040 #D9D9D9
   #EB452F #62AEE2 #F6CC05 #ADE2BE #F26D3D #1D7363 #BA8FBF
   Typo : Sora · Signature : l'encoche CREAO
   ============================================================ */
:root{
  --noir:#222323; --gris-fonce:#404040; --gris:#D9D9D9; --blanc:#FFFFFF;
  --rouge:#EB452F; --bleu:#62AEE2; --jaune:#F6CC05; --vert-clair:#ADE2BE;
  --orange:#F26D3D; --vert:#1D7363; --mauve:#BA8FBF;
  --police:'Sora','Helvetica Neue',Helvetica,Arial,sans-serif;
  --gout:clamp(20px,5vw,72px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--police);background:var(--blanc);color:var(--noir);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--jaune);color:var(--noir)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--rouge);outline-offset:3px;border-radius:2px}
img,svg{display:block;max-width:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- Curseur signature CREAO ----------
   Le logomark (encoche) remplace le curseur : il s'oriente dans le sens
   du mouvement et s'étire avec la vitesse. Un halo en mode "différence"
   inverse les couleurs qu'il survole. Activé seulement si le JS tourne. */
@media (hover:hover) and (pointer:fine){
  html.curseur-actif,html.curseur-actif a,html.curseur-actif button,
  html.curseur-actif input,html.curseur-actif textarea,html.curseur-actif select,
  html.curseur-actif label,html.curseur-actif .tuile,html.curseur-actif .piece{cursor:none}
}
.curseur{position:fixed;top:0;left:0;width:24px;height:24px;z-index:9999;pointer-events:none;color:var(--rouge);will-change:transform}
.curseur svg{width:100%;height:100%;filter:drop-shadow(0 1px 5px rgba(34,35,35,.25))}
.curseur-suiveur{
  position:fixed;top:0;left:0;width:46px;height:46px;border-radius:50%;
  background:#fff;mix-blend-mode:difference;z-index:9998;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  font-size:0;font-weight:800;letter-spacing:.08em;color:#000;will-change:transform;
  transition:width .3s,height .3s,border-radius .3s,font-size .2s,background .3s;
}
.curseur-suiveur.grossi{width:84px;height:84px}
.curseur-suiveur.voir{
  width:96px;height:96px;font-size:12px;mix-blend-mode:normal;
  background:var(--jaune);color:var(--noir);border-radius:50% 0 50% 50%;
}
.curseur-suiveur.voir::after{content:"VOIR +"}
@media (hover:none),(pointer:coarse){.curseur,.curseur-suiveur{display:none}}

/* ---------- Preloader (accueil) & rideau de transition ---------- */
.preloader{position:fixed;inset:0;z-index:1000;background:var(--noir);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:26px}
.preloader .logo-pre{width:min(380px,64vw);color:var(--blanc);overflow:hidden}
.preloader .logo-pre svg path{transform:translateY(110%)}
.preloader .compteur{font-size:13px;font-weight:700;letter-spacing:.3em;color:var(--jaune)}
.rideau{position:fixed;inset:0;z-index:999;display:flex;pointer-events:none}
.rideau div{flex:1;transform-origin:top;transform:scaleY(0)}
body.page-interne .rideau div{transform:scaleY(1)}
.rideau div:nth-child(1){background:var(--rouge)}
.rideau div:nth-child(2){background:var(--orange)}
.rideau div:nth-child(3){background:var(--jaune)}
.rideau div:nth-child(4){background:var(--vert-clair)}
.rideau div:nth-child(5){background:var(--bleu)}
/* Filet de sécurité : si script.js ne charge pas (html sans .js-ok),
   le voile disparaît tout seul et la page reste lisible */
@keyframes secours{to{visibility:hidden;opacity:0}}
html:not(.js-ok) .preloader,html:not(.js-ok) .rideau{animation:secours .5s ease 2.5s forwards}
html:not(.js-ok) .entete{transform:none}

/* ---------- En-tête ---------- */
.entete{
  position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--gout);background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--gris);transform:translateY(-110%);
}
.marque{display:flex;align-items:center;gap:12px;color:var(--noir)}
.marque svg{height:30px;width:auto;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.marque:hover svg{transform:rotate(-8deg) scale(1.08)}
.marque .bl{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;line-height:1.4;color:var(--gris-fonce)}
.nav{display:flex;gap:30px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.nav a{position:relative;padding:4px 0;overflow:hidden}
.nav a span{display:inline-block;transition:transform .3s ease}
.nav a::before{content:attr(data-txt);position:absolute;left:0;top:100%;color:var(--rouge);transition:transform .3s ease}
.nav a:hover span{transform:translateY(-100%)}
.nav a:hover::before{transform:translateY(-100%)}
.nav a.actif{color:var(--rouge)}
.nav a.actif::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--rouge)}
.burger{display:none;background:none;border:none;cursor:pointer;font-family:var(--police);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--noir)}

/* ---------- Hero accueil ---------- */
.hero{
  min-height:100svh;background:var(--noir);color:var(--blanc);
  display:flex;flex-direction:column;justify-content:center;
  padding:120px var(--gout) 120px;position:relative;overflow:hidden;
}
.hero-logo{width:min(680px,82vw);color:var(--blanc);margin-bottom:38px}
.hero-logo svg{overflow:visible}
.hero-titre{font-weight:800;font-size:clamp(26px,4.4vw,56px);line-height:1.12;max-width:22ch;letter-spacing:-.01em}
.hero-titre em{font-style:normal;color:var(--jaune)}
.hero-titre .mot{display:inline-block;overflow:hidden;vertical-align:bottom}
.hero-titre .mot span{display:inline-block}
.hero-sous{margin-top:26px;max-width:60ch;color:var(--gris);font-size:clamp(15px,1.3vw,18px);font-weight:300}
.hero-sous strong{color:var(--blanc);font-weight:600}
.hero-bas{margin-top:44px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}

/* ---------- Hero des pages internes ---------- */
.page-hero{
  background:var(--noir);color:var(--blanc);padding:150px var(--gout) 64px;
  position:relative;overflow:hidden;
}
.page-hero .fil{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-bottom:18px;display:flex;gap:10px;align-items:center}
.page-hero .fil a:hover{color:var(--jaune)}
.page-hero .fil svg{width:12px;color:var(--rouge)}
.page-hero h1{font-weight:800;font-size:clamp(38px,7vw,92px);letter-spacing:-.015em;text-transform:uppercase;line-height:1;overflow:hidden}
.page-hero h1 .lettre{display:inline-block;white-space:pre}
.page-hero .intro{margin-top:20px;max-width:62ch;color:var(--gris);font-weight:300;font-size:clamp(15px,1.3vw,18px)}
.page-hero .etoile{top:auto;bottom:-30px;right:var(--gout);width:clamp(70px,8vw,120px)}
.page-hero .bande{position:absolute;left:0;right:0;bottom:0;height:8px;background:linear-gradient(90deg,var(--rouge) 0 14.3%,var(--orange) 0 28.6%,var(--jaune) 0 42.9%,var(--vert-clair) 0 57.2%,var(--vert) 0 71.5%,var(--bleu) 0 85.8%,var(--mauve) 0 100%)}

/* ---------- Boutons ---------- */
.btn{
  display:inline-block;font-weight:700;font-size:14px;letter-spacing:.05em;text-transform:uppercase;
  padding:16px 30px;border-radius:14px 0 14px 0;background:var(--rouge);color:var(--blanc);
  position:relative;overflow:hidden;transition:color .3s;cursor:pointer;border:none;font-family:var(--police);
}
.btn i{position:absolute;inset:0;background:var(--jaune);border-radius:inherit;transform:translateY(101%);transition:transform .35s cubic-bezier(.65,0,.35,1);z-index:0}
.btn b{position:relative;z-index:1;font-weight:inherit;font-style:normal}
.btn:hover{color:var(--noir)}
.btn:hover i{transform:none}
.btn.contour{background:transparent;border:2px solid var(--gris-fonce);color:var(--blanc)}
.btn.contour:hover{color:var(--noir)}
.btn.contour-noir{background:transparent;border:2px solid var(--noir);color:var(--noir)}
.dispo{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--vert-clair)}
.dispo::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--vert-clair);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- Formes flottantes & étoile ---------- */
.etoile{position:absolute;right:calc(var(--gout) - 10px);top:16vh;width:clamp(70px,9vw,130px);color:var(--jaune)}
.forme-flottante{position:absolute;pointer-events:none;opacity:.9}
.f-pilule{left:6%;bottom:26%;width:90px;height:38px;border-radius:999px;background:var(--mauve)}
.f-quart{right:14%;bottom:18%;width:84px;height:84px;background:var(--bleu);border-radius:100% 0 0 0}
.f-tri{left:38%;top:14%;width:0;height:0;border-left:34px solid transparent;border-right:34px solid transparent;border-bottom:58px solid var(--vert)}

/* ---------- Marquee ---------- */
.marquee{position:absolute;left:0;right:0;bottom:0;background:var(--jaune);color:var(--noir);overflow:hidden;padding:14px 0}
.marquee .defile{display:flex;width:max-content;animation:defiler 22s linear infinite}
.marquee span{font-weight:800;font-size:clamp(15px,1.7vw,22px);text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:26px;padding-right:26px;white-space:nowrap}
.marquee svg{height:.85em;width:auto}
@keyframes defiler{to{transform:translateX(-50%)}}
.marquee.sombre{position:relative;background:var(--noir);color:var(--blanc);padding:20px 0}
.marquee.sombre span{-webkit-text-stroke:1.5px var(--blanc);color:transparent}
.marquee.sombre b{color:var(--jaune);-webkit-text-stroke:0;font-weight:800}

/* ---------- Sections ---------- */
section{padding:clamp(70px,9vw,130px) var(--gout);position:relative}
.titre-section{display:flex;align-items:center;gap:18px;margin-bottom:clamp(36px,5vw,64px);flex-wrap:wrap}
.titre-section .puce{width:34px;height:34px;flex:none;color:var(--rouge)}
.titre-section h2{font-weight:800;font-size:clamp(30px,4.6vw,58px);letter-spacing:-.01em;text-transform:uppercase;overflow:hidden}
.titre-section h2 .lettre{display:inline-block;white-space:pre}
.titre-section .note{font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--gris-fonce);text-transform:uppercase}
.cta-section{display:flex;justify-content:center;margin-top:clamp(40px,5vw,64px)}

/* ---------- Tuiles & grille projets ---------- */
.grille-projets{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,3vw,40px)}
.projet{display:flex;flex-direction:column;gap:16px}
.projet:nth-child(even){transform:translateY(clamp(0px,4vw,56px))}
.tuile{
  position:relative;aspect-ratio:4/3;border-radius:34px 0 0 0;overflow:hidden;
  display:flex;align-items:flex-end;padding:26px;will-change:transform;
  transform-style:preserve-3d;perspective:800px;
}
.tuile::after{
  content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  border-top:16px solid transparent;border-bottom:16px solid transparent;
  border-right-style:solid;border-right-color:var(--blanc);
  border-right-width:clamp(120px,18vw,260px);
  transition:border-right-width .45s cubic-bezier(.65,0,.35,1);
}
.projet:hover .tuile::after,a:hover>.tuile::after{border-right-width:clamp(60px,9vw,130px)}
.tuile .filigrane{position:absolute;inset:auto -6% -14% auto;width:55%;opacity:.18;color:#fff;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.projet:hover .filigrane{transform:rotate(-10deg) scale(1.12)}
.tuile .nom-tuile{
  position:relative;z-index:2;font-weight:800;text-transform:uppercase;
  font-size:clamp(20px,2.4vw,30px);line-height:1.1;letter-spacing:-.01em;color:var(--blanc);
  text-shadow:0 1px 14px rgba(0,0,0,.18);
}
.tuile.sombre .nom-tuile{color:var(--noir);text-shadow:none}
.tuile.sombre .filigrane{color:var(--noir)}
.projet-meta{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.projet-meta h3{font-size:16px;font-weight:700}
.projet-meta .annee{font-size:13px;font-weight:700;color:var(--rouge)}
.projet p{font-size:14.5px;color:var(--gris-fonce);max-width:52ch}
.etiquettes{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.etiquettes span{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;border:1.5px solid var(--gris);border-radius:999px;padding:5px 12px;transition:background .25s,border-color .25s}
.projet:hover .etiquettes span{border-color:var(--noir)}

/* ---------- Page projets : fiches détaillées ---------- */
.fiche-projet{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,70px);align-items:start;padding:clamp(50px,6vw,90px) 0;border-bottom:1px solid var(--gris)}
.fiche-projet:last-of-type{border-bottom:none}
.fiche-projet.inverse .colonne-visuel{order:2}
.colonne-visuel{position:sticky;top:110px}
.fiche-projet .tuile{aspect-ratio:4/3.4}
.fiche-projet h2{font-weight:800;font-size:clamp(26px,3.2vw,42px);text-transform:uppercase;letter-spacing:-.01em;line-height:1.08}
.fiche-projet .sous-titre{font-size:15px;font-weight:600;color:var(--gris-fonce);margin-top:8px}
.fiche-projet .annee{display:inline-block;font-size:13px;font-weight:700;color:var(--rouge);letter-spacing:.1em;margin-bottom:14px}
.fiche-projet .mission{margin:20px 0;font-size:15.5px}
.fiche-bloc{margin-top:22px}
.fiche-bloc h3{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rouge);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.fiche-bloc h3 svg{width:14px;flex:none}
.fiche-bloc ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.fiche-bloc li{font-size:13px;font-weight:600;border:1.5px solid var(--gris);border-radius:12px 0 12px 0;padding:7px 14px;transition:background .25s,border-color .25s,color .25s}
.fiche-bloc li:hover{background:var(--noir);border-color:var(--noir);color:var(--blanc)}

/* ---------- Expertise ---------- */
.expertise-fond{background:var(--noir);color:var(--blanc)}
.expertise-fond .titre-section .note{color:var(--gris)}
.grille-expertise{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--gris-fonce);border:1px solid var(--gris-fonce)}
.carte-exp{background:var(--noir);padding:32px 26px;position:relative;overflow:hidden;transition:background .35s}
.carte-exp::before{content:"";position:absolute;inset:0;background:var(--accent,var(--rouge));transform:translateY(101%);transition:transform .4s cubic-bezier(.65,0,.35,1)}
.carte-exp:hover::before{transform:none}
.carte-exp>*{position:relative;z-index:1;transition:color .35s}
.carte-exp:hover h3,.carte-exp:hover p,.carte-exp:hover li{color:var(--noir)}
.carte-exp:hover .picto{color:var(--noir)!important}
.carte-exp .picto{width:30px;height:30px;margin-bottom:18px;transition:transform .45s cubic-bezier(.34,1.56,.64,1),color .35s}
.carte-exp:hover .picto{transform:rotate(-12deg) scale(1.15)}
.carte-exp h3{font-size:18px;font-weight:700;margin-bottom:10px;text-transform:uppercase;letter-spacing:.02em}
.carte-exp p{font-size:14.5px;font-weight:300;color:var(--gris);line-height:1.65}
.carte-exp ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--gris);font-weight:300}
.carte-exp ul li::before{content:"— ";color:var(--accent,var(--rouge))}
.carte-exp:hover ul li::before{color:var(--noir)}
.outils{margin-top:54px;display:grid;grid-template-columns:1fr 1fr;gap:36px}
.outils h3{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--jaune);margin-bottom:16px}
.outils ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.outils li{font-size:13.5px;font-weight:600;border:1.5px solid var(--gris-fonce);border-radius:12px 0 12px 0;padding:9px 16px;transition:border-color .25s,background .25s,color .25s}
.outils li:hover{background:var(--jaune);border-color:var(--jaune);color:var(--noir)}

/* ---------- Méthode (3 temps) ---------- */
.grille-methode{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px)}
.temps{background:var(--gris);border-radius:28px 0 0 0;padding:32px 28px;position:relative;overflow:hidden}
.temps::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:80px solid var(--blanc)}
.temps .num{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--rouge);text-transform:uppercase}
.temps h3{font-size:22px;font-weight:800;text-transform:uppercase;margin:12px 0 10px}
.temps p{font-size:14.5px;color:var(--gris-fonce)}

/* ---------- Parcours ---------- */
.parcours-grille{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(40px,6vw,90px);align-items:start}
.ligne-temps{list-style:none;position:relative;padding-left:28px;display:flex;flex-direction:column;gap:26px}
.ligne-temps::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gris)}
.ligne-temps .trait{position:absolute;left:0;top:0;width:3px;height:100%;background:var(--rouge);transform-origin:top;transform:scaleY(0)}
.ligne-temps li{position:relative}
.ligne-temps li::before{content:"";position:absolute;left:-37px;top:6px;width:13px;height:13px;border-radius:50%;background:var(--rouge);border:3px solid var(--blanc);box-shadow:0 0 0 2px var(--rouge)}
.ligne-temps .quand{font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--rouge)}
.ligne-temps h3{font-size:16.5px;font-weight:700;margin:2px 0}
.ligne-temps p{font-size:14px;color:var(--gris-fonce)}
.ligne-temps .detail{font-size:13.5px;color:var(--gris-fonce);margin-top:6px;max-width:56ch}
.bloc-cote{display:flex;flex-direction:column;gap:34px;position:sticky;top:110px}
.encart{background:var(--gris);border-radius:28px 0 0 0;padding:30px 28px;position:relative;overflow:hidden}
.encart::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:90px solid var(--blanc)}
.encart h3{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.encart ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.encart li strong{font-weight:700}
.encart.jaune{background:var(--jaune)}
.encart.vertc{background:var(--vert-clair)}

/* ---------- À propos ---------- */
.apropos-fond{background:var(--gris);overflow:hidden}
.apropos-grille{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(36px,5vw,80px);align-items:center}
.cadre-photo{position:relative;border-radius:40px 0 0 0;overflow:hidden;background:var(--bleu);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center}
.cadre-photo svg{width:60%;color:rgba(255,255,255,.55)}
.cadre-photo figcaption{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-size:12.5px;color:var(--noir);font-weight:600}
.apropos-texte p{margin-bottom:18px;font-size:clamp(15.5px,1.25vw,18px)}
.apropos-texte p:first-of-type{font-weight:700;font-size:clamp(20px,2vw,26px);line-height:1.4}
.apropos-texte .accent{color:var(--rouge)}
.stats{display:flex;gap:clamp(24px,4vw,60px);margin-top:30px;flex-wrap:wrap}
.stat .nombre{font-size:clamp(34px,4vw,54px);font-weight:800;color:var(--rouge);line-height:1}
.stat .legende{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-fonce)}
.grille-valeurs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(16px,2vw,26px)}
.valeur{border:2px solid var(--noir);border-radius:24px 0 0 0;padding:26px 22px;transition:background .3s,color .3s,transform .3s}
.valeur:hover{background:var(--noir);color:var(--blanc);transform:translateY(-6px)}
.valeur .picto{width:26px;height:26px;margin-bottom:14px;color:var(--rouge)}
.valeur h3{font-size:16px;font-weight:800;text-transform:uppercase;margin-bottom:6px}
.valeur p{font-size:13.5px;color:var(--gris-fonce)}
.valeur:hover p{color:var(--gris)}
.citation{
  text-align:center;font-weight:800;font-size:clamp(24px,4vw,52px);text-transform:uppercase;
  line-height:1.15;letter-spacing:-.01em;max-width:20ch;margin:0 auto;
}
.citation em{font-style:normal;color:var(--rouge)}

/* ---------- Contact ---------- */
.contact-fond{background:var(--noir);color:var(--blanc)}
.contact-fond .accroche{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--jaune);margin-bottom:24px}
.contact-mail{display:inline-block;font-weight:800;font-size:clamp(18px,4.2vw,56px);letter-spacing:-.01em;line-height:1.15;border-bottom:4px solid var(--rouge);padding-bottom:8px}
.contact-mail .lettre{display:inline-block;transition:transform .25s cubic-bezier(.34,1.56,.64,1),color .25s}
.contact-mail:hover .lettre{color:var(--jaune)}
.coordonnees{margin-top:38px;display:flex;gap:14px 36px;flex-wrap:wrap;font-size:15px}
.coordonnees.centre{justify-content:center}
.coordonnees a,.coordonnees span{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.coordonnees a{border-bottom:1px solid var(--gris-fonce);padding-bottom:2px;transition:border-color .25s,color .25s}
.coordonnees a:hover{border-color:var(--jaune);color:var(--jaune)}
.contact-grille{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:start}
.formulaire{display:flex;flex-direction:column;gap:18px}
.champ label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-bottom:8px}
.champ input,.champ textarea,.champ select{
  width:100%;background:transparent;border:none;border-bottom:2px solid var(--gris-fonce);
  color:var(--blanc);font-family:var(--police);font-size:16px;padding:10px 2px;
  transition:border-color .3s;border-radius:0;
}
.champ select option{color:var(--noir)}
.champ input:focus,.champ textarea:focus,.champ select:focus{outline:none;border-color:var(--jaune)}
.champ textarea{min-height:120px;resize:vertical}
.note-form{font-size:12.5px;color:var(--gris)}

/* ---------- Pied de page global ---------- */
.pied-global{background:var(--noir);color:var(--gris);padding:26px var(--gout)}
.pied-global .interieur{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:12.5px;border-top:1px solid var(--gris-fonce);padding-top:22px}
.pied-global svg{height:20px;color:var(--blanc)}
.pied-global nav{display:flex;gap:18px;flex-wrap:wrap;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:11.5px}
.pied-global nav a:hover{color:var(--jaune)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .grille-projets{grid-template-columns:1fr}
  .projet:nth-child(even){transform:none}
  .grille-expertise,.grille-methode{grid-template-columns:1fr}
  .parcours-grille,.apropos-grille,.contact-grille,.fiche-projet{grid-template-columns:1fr}
  .fiche-projet.inverse .colonne-visuel{order:0}
  .colonne-visuel,.bloc-cote{position:static}
  .outils{grid-template-columns:1fr}
  .cadre-photo{max-width:420px}
}
@media (max-width:760px){
  .nav{
    position:fixed;inset:0;background:var(--noir);color:var(--blanc);
    flex-direction:column;justify-content:center;align-items:center;gap:34px;
    font-size:20px;transform:translateY(-100%);transition:transform .35s ease;
  }
  .nav.ouvert{transform:none}
  .burger{display:block;position:relative;z-index:60}
  .burger[aria-expanded="true"]{color:var(--blanc)}
  .etoile,.forme-flottante{display:none}
}

/* ============================================================
   DA RENFORCÉE — grain papier, scrollbar de marque,
   pages projet, mosaïque de livrables, navigation projet
   ============================================================ */

/* ---------- Grain papier sur tout le site ---------- */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:90;
  opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:280px 280px;
}

/* ---------- Scrollbar aux couleurs de la charte ---------- */
html{scrollbar-color:var(--rouge) var(--noir);scrollbar-width:thin}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:var(--noir)}
::-webkit-scrollbar-thumb{background:var(--rouge);border:3px solid var(--noir);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--jaune)}

/* ---------- Hero des pages projet ---------- */
.page-hero .meta-projet{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.page-hero .meta-projet span{
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border:1.5px solid var(--gris-fonce);border-radius:999px;padding:7px 16px;
}
.page-hero .meta-projet span.annee-chip{background:var(--proj,var(--rouge));border-color:var(--proj,var(--rouge));color:var(--noir)}
.page-hero .numero{
  position:absolute;right:var(--gout);bottom:-12px;z-index:0;pointer-events:none;
  font-weight:800;font-size:clamp(110px,18vw,260px);line-height:.8;
  color:transparent;-webkit-text-stroke:2px var(--proj,var(--rouge));opacity:.7;
}
.page-hero .fil a{transition:color .25s}

/* ---------- Bloc mission de la page projet ---------- */
.mission-projet{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.mission-projet .texte p{font-size:clamp(16px,1.4vw,19px);margin-bottom:16px}
.mission-projet .texte p:first-of-type{font-weight:700;font-size:clamp(19px,1.8vw,24px);line-height:1.45}
.infos-projet{background:var(--gris);border-radius:28px 0 0 0;padding:28px;position:relative;overflow:hidden}
.infos-projet::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);border-top:9px solid transparent;border-bottom:9px solid transparent;border-right:70px solid var(--blanc)}
.infos-projet dl{display:flex;flex-direction:column;gap:14px}
.infos-projet dt{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rouge)}
.infos-projet dd{font-size:14.5px;font-weight:600}

/* ---------- Mosaïque des livrables ---------- */
.mosaique{
  display:grid;grid-template-columns:repeat(6,1fr);
  grid-auto-rows:88px;grid-auto-flow:dense;gap:clamp(10px,1.4vw,18px);
}
.piece{
  position:relative;border-radius:22px 0 0 0;overflow:hidden;
  display:flex;align-items:flex-end;padding:18px;
  background:var(--noir);color:var(--blanc);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.piece:hover{transform:translateY(-5px)}
.piece img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.piece:hover img{transform:scale(1.05)}
.piece .etiquette{
  position:relative;z-index:2;font-size:12px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;line-height:1.35;
  text-shadow:0 1px 10px rgba(0,0,0,.3);
}
.piece.clair{color:var(--noir)}
.piece.clair .etiquette{text-shadow:none}
.piece .filigrane{position:absolute;right:-8%;bottom:-12%;width:52%;opacity:.15;color:#fff;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.piece.clair .filigrane{color:#000}
.piece:hover .filigrane{transform:rotate(-10deg) scale(1.15)}
/* Tailles de pièces (la grille "dense" comble les trous automatiquement) */
.p-a{grid-column:span 4;grid-row:span 4}
.p-b{grid-column:span 2;grid-row:span 2}
.p-c{grid-column:span 3;grid-row:span 3}
.p-d{grid-column:span 2;grid-row:span 3}
.p-e{grid-column:span 3;grid-row:span 2}
.p-f{grid-column:span 2;grid-row:span 4}
@media (max-width:700px){
  .mosaique{grid-template-columns:repeat(2,1fr);grid-auto-rows:120px}
  .p-a,.p-b,.p-c,.p-d,.p-e,.p-f{grid-column:span 2;grid-row:span 2}
}

/* ---------- Navigation projet précédent / suivant ---------- */
.nav-projet{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--gris);border-top:1px solid var(--gris)}
.nav-projet a{
  background:var(--blanc);padding:clamp(28px,4vw,52px) var(--gout);
  display:flex;flex-direction:column;gap:8px;transition:background .3s,color .3s;
}
.nav-projet a:hover{background:var(--noir);color:var(--blanc)}
.nav-projet .sens{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rouge)}
.nav-projet .nom{font-weight:800;font-size:clamp(17px,2.2vw,28px);text-transform:uppercase;line-height:1.1}
.nav-projet a:last-child{text-align:right;align-items:flex-end}
@media (max-width:700px){.nav-projet{grid-template-columns:1fr}.nav-projet a:last-child{text-align:left;align-items:flex-start}}
/* Liseré discret pour les pièces sombres sur fond sombre */
.expertise-fond .piece{box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)}