/*
 * PORTFOLIO SERGE-LOÏC — Feuille de style principale
 * Direction artistique « Or forgé sur noir »
 * Le sommaire des blocs est indiqué par les commentaires numérotés.
 */

/* ============================================================
   PORTFOLIO SLA — Feuille de style
   Direction artistique : « Or forgé sur noir »
   ============================================================ */

/* ---------- 1. Variables ---------- */
:root{
  --noir-abyss:#080808;
  --noir-carbone:#101012;
  --noir-graphite:#18181B;
  --ligne:rgba(212,175,55,.14);
  --ligne-forte:rgba(212,175,55,.34);
  --or-clair:#F7E39A;
  --or:#D4AF37;
  --or-sombre:#8C6D1F;
  --blanc:#F5F5F4;
  --gris-clair:#A8A8A5;
  --gris:#6B6B68;
  --vert:#3FB950;
  --rouge:#E5534B;

  --grad-or:linear-gradient(135deg,#8C6D1F 0%,#D4AF37 35%,#F7E39A 50%,#D4AF37 65%,#8C6D1F 100%);
  --grad-or-doux:linear-gradient(135deg,#D4AF37 0%,#F7E39A 100%);
  --ease:cubic-bezier(.22,1,.36,1);
  --r:16px;
  --r-lg:22px;
  --nav-h:76px;

  --f-titre:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-texte:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
}
[data-theme="light"]{
  --noir-abyss:#FAFAF8;
  --noir-carbone:#FFFFFF;
  --noir-graphite:#F2F2EE;
  --ligne:rgba(140,109,31,.18);
  --ligne-forte:rgba(140,109,31,.4);
  --or-clair:#C9A227;
  --or:#A8862B;
  --or-sombre:#7A6220;
  --blanc:#141416;
  --gris-clair:#4A4A47;
  --gris:#7C7C78;
  --grad-or:linear-gradient(135deg,#7A6220 0%,#A8862B 35%,#C9A227 50%,#A8862B 65%,#7A6220 100%);
  --grad-or-doux:linear-gradient(135deg,#8C6D1F 0%,#C9A227 100%);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--noir-abyss);color:var(--gris-clair);
  font-family:var(--f-texte);font-size:1.0625rem;line-height:1.75;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  transition:background .5s var(--ease),color .5s var(--ease);
}
h1,h2,h3,h4,h5,h6,.h-titre{font-family:var(--f-titre);color:var(--blanc);font-weight:700;line-height:1.15;letter-spacing:-.02em}
p{max-width:68ch}
a{color:var(--or);text-decoration:none;transition:color .25s var(--ease)}
a:hover{color:var(--or-clair)}
img{max-width:100%;height:auto}
section{position:relative;padding:clamp(72px,9vw,132px) 0;scroll-margin-top:90px}
.container{max-width:1240px}
::selection{background:var(--or);color:#000}

/* Barre de défilement */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--noir-abyss)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--or-sombre),var(--or));border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--or)}

/* ---------- 3. Utilitaires ---------- */
/* Trois classes Bootstrap absentes du build « grille seule » : on les
   redéclare ici pour ne pas avoir à charger la feuille complète. */
.text-center{text-align:center!important}
.position-relative{position:relative!important}
.gap-2{gap:.5rem!important}

.txt-or{
  background:var(--grad-or);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.txt-or-plein{color:var(--or)}
.mono{font-family:var(--f-mono);font-size:.8em;letter-spacing:.04em}
.bg-carbone{background:var(--noir-carbone)}
.filet{height:1px;background:linear-gradient(90deg,transparent,var(--ligne-forte),transparent);border:0;margin:0}

/* Étiquette de section */
.etiquette{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--or);padding:.42rem 1rem;border:1px solid var(--ligne-forte);border-radius:100px;
  background:rgba(212,175,55,.05);margin-bottom:1.4rem;
}
.etiquette::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--or);box-shadow:0 0 10px var(--or)}

.titre-section{font-size:clamp(2rem,4.2vw,3.15rem);margin:0 0 1.1rem}
.sous-titre-section{font-size:1.075rem;color:var(--gris-clair);max-width:62ch;margin:0 auto}
.tete-section{text-align:center;margin-bottom:clamp(48px,6vw,76px)}
.tete-section p{margin-inline:auto}

/* ---------- 4. Décors ---------- */
.grille-hex{
  position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cpath d='M30 0l26 15v30L30 60 4 45V15z' fill='none' stroke='%23D4AF37' stroke-opacity='.10' stroke-width='1'/%3E%3Cpath d='M30 52l26 15v30L30 112 4 97V67z' fill='none' stroke='%23D4AF37' stroke-opacity='.10' stroke-width='1'/%3E%3C/svg%3E");
  mask-image:radial-gradient(ellipse 90% 65% at 50% 30%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 30%,#000 0%,transparent 78%);
}
.halo{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.halo-1{width:min(620px,80vw);height:min(620px,80vw);background:radial-gradient(circle,rgba(212,175,55,.16),transparent 68%);top:-16%;right:-8%;animation:respire 14s var(--ease) infinite}
.halo-2{width:min(480px,70vw);height:min(480px,70vw);background:radial-gradient(circle,rgba(140,109,31,.14),transparent 68%);bottom:-14%;left:-10%;animation:respire 18s var(--ease) infinite reverse}
@keyframes respire{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.14);opacity:1}}

.watermark{
  position:absolute;font-family:var(--f-mono);font-size:clamp(9rem,24vw,22rem);
  color:var(--or);opacity:.028;line-height:.8;pointer-events:none;user-select:none;z-index:0;
  font-weight:500;
}

/* ---------- 5. Boutons ---------- */
.btn{
  font-family:var(--f-titre);font-weight:600;font-size:.94rem;letter-spacing:.01em;
  padding:.86rem 1.7rem;border-radius:100px;border:1px solid transparent;
  transition:all .3s var(--ease);display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  cursor:pointer;position:relative;
}
.btn:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.btn-or{background:var(--grad-or);color:#0A0A0A;box-shadow:0 6px 26px -8px rgba(212,175,55,.55)}
.btn-or:hover{color:#0A0A0A;transform:translateY(-3px);box-shadow:0 14px 38px -10px rgba(212,175,55,.72)}
.btn-fantome{background:transparent;color:var(--blanc);border-color:var(--ligne-forte)}
.btn-fantome:hover{color:var(--or);border-color:var(--or);background:rgba(212,175,55,.07);transform:translateY(-3px)}
.btn-nu{background:transparent;color:var(--gris-clair);padding-inline:.4rem}
.btn-nu:hover{color:var(--or)}
.btn-lg{padding:1.02rem 2.1rem;font-size:1rem}
.btn svg{flex:0 0 auto;transition:transform .3s var(--ease)}
.btn:hover svg.fleche{transform:translateX(4px)}

/* ---------- 6. Cards ---------- */
.card-lux{
  position:relative;background:var(--noir-carbone);border:1px solid var(--ligne);
  border-radius:var(--r-lg);padding:2rem;overflow:hidden;height:100%;
  transition:transform .45s var(--ease),border-color .45s var(--ease),background .45s var(--ease),box-shadow .45s var(--ease);
}
.card-lux::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--grad-or);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
.card-lux::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(212,175,55,.075),transparent 62%);
  opacity:0;transition:opacity .45s var(--ease);
}
.card-lux:hover{transform:translateY(-7px);border-color:var(--ligne-forte);background:var(--noir-graphite);box-shadow:0 22px 50px -24px rgba(0,0,0,.85)}
.card-lux:hover::before{transform:scaleX(1)}
.card-lux:hover::after{opacity:1}

.icone-carre{
  width:56px;height:56px;border-radius:15px;display:grid;place-items:center;
  background:rgba(212,175,55,.09);border:1px solid var(--ligne-forte);color:var(--or);
  margin-bottom:1.35rem;transition:all .4s var(--ease);flex:0 0 auto;
}
.card-lux:hover .icone-carre{background:var(--grad-or);color:#0A0A0A;border-color:transparent;transform:rotate(-6deg) scale(1.06)}
.card-lux h3{font-size:1.2rem;margin:0 0 .7rem}
.card-lux p{font-size:.965rem;color:var(--gris-clair);margin:0}

/* ---------- 7. Apparitions au scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.vu{opacity:1;transform:none}
.reveal-g{opacity:0;transform:translateX(-30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-d{opacity:0;transform:translateX(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-g.vu,.reveal-d.vu{opacity:1;transform:none}
.reveal-zoom{opacity:0;transform:scale(.94);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal-zoom.vu{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal,.reveal-g,.reveal-d,.reveal-zoom{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}

/* ---------- 8. Navbar ---------- */
.nav-sla{
  position:fixed;top:0;left:0;right:0;z-index:1030;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),height .4s var(--ease),backdrop-filter .4s;
  background:transparent;
}
.nav-sla.compact{
  height:64px;background:color-mix(in srgb,var(--noir-abyss) 82%,transparent);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--ligne);box-shadow:0 8px 34px -18px rgba(0,0,0,.9);
}
.nav-sla .marque{display:flex;align-items:center;gap:.7rem;font-family:var(--f-titre);font-weight:700;color:var(--blanc);font-size:1.06rem;letter-spacing:.01em}
.nav-sla .marque img{height:40px;width:auto;transition:height .4s var(--ease),filter .4s}
.nav-sla.compact .marque img{height:34px}
.nav-sla .marque:hover img{filter:drop-shadow(0 0 12px rgba(212,175,55,.6))}
.nav-sla .marque small{display:block;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.22em;color:var(--gris);font-weight:500;text-transform:uppercase;line-height:1}

.liens-nav{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.liens-nav a{
  color:var(--gris-clair);font-size:.895rem;font-weight:500;padding:.5rem .78rem;border-radius:8px;
  position:relative;transition:color .28s var(--ease);white-space:nowrap;
}
.liens-nav a::after{
  content:'';position:absolute;left:.78rem;right:.78rem;bottom:.24rem;height:1.5px;
  background:var(--grad-or-doux);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.liens-nav a:hover,.liens-nav a.actif{color:var(--blanc)}
.liens-nav a:hover::after,.liens-nav a.actif::after{transform:scaleX(1)}

.bascule-theme{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--ligne-forte);
  background:transparent;color:var(--or);display:grid;place-items:center;cursor:pointer;
  transition:all .3s var(--ease);flex:0 0 auto;
}
.bascule-theme:hover{background:rgba(212,175,55,.1);transform:rotate(22deg)}
.bascule-theme .ico-lune{display:none}
[data-theme="light"] .bascule-theme .ico-lune{display:block}
[data-theme="light"] .bascule-theme .ico-soleil{display:none}

.burger{
  width:44px;height:44px;border:1px solid var(--ligne-forte);background:transparent;
  border-radius:12px;display:none;position:relative;cursor:pointer;padding:0;
}
.burger span{
  position:absolute;top:50%;left:50%;width:20px;height:1.6px;background:var(--or);margin:0;
  transform:translate(-50%,-50%) translateY(var(--dy,0));
  transition:transform .38s var(--ease),opacity .25s var(--ease);
}
.burger span:nth-child(1){--dy:-6.5px}
.burger span:nth-child(3){--dy:6.5px}
.burger.ouvert span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.burger.ouvert span:nth-child(2){opacity:0;transform:translate(-50%,-50%) scaleX(.2)}
.burger.ouvert span:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg)}

.menu-mobile{
  position:fixed;inset:0;z-index:1029;background:var(--noir-abyss);
  padding:calc(var(--nav-h) + 28px) 8vw 40px;
  transform:translateX(100%);transition:transform .5s var(--ease);
  display:flex;flex-direction:column;gap:.2rem;overflow-y:auto;
}
.menu-mobile.ouvert{transform:none}
.menu-mobile a{
  color:var(--blanc);font-family:var(--f-titre);font-size:1.28rem;font-weight:600;
  padding:.82rem 0;border-bottom:1px solid var(--ligne);display:flex;align-items:center;gap:1rem;
}
.menu-mobile a span{font-family:var(--f-mono);font-size:.72rem;color:var(--or);opacity:.7;min-width:2rem}
.menu-mobile .btn{margin-top:1.8rem}

/* ---------- 9. Hero ---------- */
.hero{
  min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--nav-h) + 46px) 0 72px;overflow:hidden;
}
.hero-logo{
  width:clamp(96px,13vw,132px);margin-bottom:1.9rem;
  filter:drop-shadow(0 0 34px rgba(212,175,55,.4));
  animation:flottement 6s var(--ease) infinite;
}
@keyframes flottement{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

.hero h1{
  font-size:clamp(2.55rem,6.4vw,4.85rem);font-weight:800;margin:0 0 1.15rem;
  line-height:1.04;letter-spacing:-.035em;
}
.hero .surtitre{
  font-family:var(--f-mono);font-size:.8rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--or);margin-bottom:1.1rem;display:block;
}
.hero .slogan{
  font-family:var(--f-titre);font-size:clamp(1.1rem,2.3vw,1.52rem);font-weight:500;
  color:var(--blanc);margin:0 0 1.15rem;line-height:1.45;max-width:31ch;
  min-height:2.9em;   /* réserve la place pour éviter tout saut de mise en page */
}
.hero .accroche{font-size:1.075rem;color:var(--gris-clair);max-width:52ch;margin:0 0 2.4rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center;margin-bottom:2.6rem}

/* Curseur clignotant */
.curseur{display:inline-block;width:3px;height:1em;background:var(--or);margin-left:4px;vertical-align:-.08em;animation:clign 1s steps(2) infinite}
@keyframes clign{0%,50%{opacity:1}51%,100%{opacity:0}}

/* Badges stack */
.pastilles{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.pastille{
  font-family:var(--f-mono);font-size:.71rem;padding:.34rem .78rem;border-radius:7px;
  background:rgba(212,175,55,.06);border:1px solid var(--ligne);color:var(--gris-clair);
  transition:all .28s var(--ease);letter-spacing:.02em;
}
.pastille:hover{color:var(--or);border-color:var(--ligne-forte);background:rgba(212,175,55,.12);transform:translateY(-2px)}

/* Fenêtre de code du hero — volontairement toujours sombre,
   dans les deux thèmes : c'est l'apparence naturelle d'un éditeur. */
.fenetre-code{
  background:#101012;border:1px solid rgba(212,175,55,.16);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:0 34px 78px -32px rgba(0,0,0,.92);
  transform:perspective(1400px) rotateY(-8deg) rotateX(3deg);
  transition:transform .7s var(--ease);
}
.fenetre-code:hover{transform:perspective(1400px) rotateY(-3deg) rotateX(1deg) translateY(-6px)}
.barre-fenetre{
  display:flex;align-items:center;gap:.44rem;padding:.78rem 1.1rem;
  background:#18181B;border-bottom:1px solid rgba(212,175,55,.16);
}
.barre-fenetre i{width:10px;height:10px;border-radius:50%;display:block}
.barre-fenetre i:nth-child(1){background:#E5534B}
.barre-fenetre i:nth-child(2){background:#E3B341}
.barre-fenetre i:nth-child(3){background:#3FB950}
.barre-fenetre b{
  margin-left:.7rem;font-family:var(--f-mono);font-size:.7rem;color:#8A8A86;font-weight:500;
}
.fenetre-code pre{
  margin:0;padding:1.5rem 1.35rem;font-family:var(--f-mono);font-size:.79rem;line-height:1.95;
  color:#A8A8A5;overflow-x:auto;
}
.k{color:#C792EA}.s{color:#C3E88D}.f{color:#82AAFF}.c{color:#6B7280;font-style:italic}.v{color:#F7E39A}.n{color:#F78C6C}

/* Défilement d'annonce */
.bandeau{
  border-block:1px solid var(--ligne);padding:1.15rem 0;overflow:hidden;
  background:var(--noir-carbone);
}
.piste{display:flex;gap:3.2rem;width:max-content;animation:defile 34s linear infinite}
.bandeau:hover .piste{animation-play-state:paused}
@keyframes defile{to{transform:translateX(-50%)}}
.piste span{
  font-family:var(--f-titre);font-size:.955rem;font-weight:600;color:var(--gris);
  white-space:nowrap;display:flex;align-items:center;gap:3.2rem;letter-spacing:.02em;
  transition:color .3s var(--ease);
}
.piste span:hover{color:var(--or)}
.piste span::after{content:'◆';color:var(--or);opacity:.42;font-size:.6rem}

/* ---------- 10. À propos ---------- */
.cadre-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;isolation:isolate}
.cadre-photo img{display:block;width:100%;border-radius:var(--r-lg);filter:grayscale(.16) contrast(1.04)}
.cadre-photo::after{
  content:'';position:absolute;inset:0;border-radius:var(--r-lg);
  background:linear-gradient(160deg,transparent 42%,rgba(212,175,55,.13));
  pointer-events:none;
}
.cadre-photo::before{
  content:'';position:absolute;inset:0;border-radius:var(--r-lg);
  border:1px solid var(--ligne-forte);z-index:2;pointer-events:none;
}
.deco-photo{
  position:absolute;width:100%;height:100%;border:1px solid var(--ligne-forte);
  border-radius:var(--r-lg);top:20px;left:20px;z-index:-1;
}
.badge-flottant{
  position:absolute;bottom:20px;left:20px;right:20px;z-index:3;
  background:color-mix(in srgb,var(--noir-carbone) 92%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--ligne-forte);border-radius:14px;padding:.95rem 1.15rem;
  display:flex;align-items:center;gap:.85rem;
}
.badge-flottant .point{width:9px;height:9px;border-radius:50%;background:var(--vert);box-shadow:0 0 0 0 rgba(63,185,80,.6);animation:pulse 2.2s infinite;flex:0 0 auto}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(63,185,80,0)}100%{box-shadow:0 0 0 0 rgba(63,185,80,0)}}
.badge-flottant strong{color:var(--blanc);font-family:var(--f-titre);font-size:.9rem;display:block;line-height:1.3}
.badge-flottant small{color:var(--gris);font-size:.775rem}

.pilier{display:flex;gap:1.05rem;padding:1.15rem 0;border-bottom:1px solid var(--ligne)}
.pilier:last-child{border-bottom:0}
.pilier .num{
  font-family:var(--f-mono);font-size:.76rem;color:var(--or);flex:0 0 auto;
  width:34px;height:34px;border:1px solid var(--ligne-forte);border-radius:9px;display:grid;place-items:center;
}
.pilier h4{font-size:1.03rem;margin:.15rem 0 .3rem}
.pilier p{font-size:.925rem;margin:0;color:var(--gris-clair)}

/* ---------- 11. Chiffres clés ---------- */
.chiffre{text-align:center;padding:1.4rem .6rem;position:relative}
.chiffre::after{content:'';position:absolute;right:0;top:22%;bottom:22%;width:1px;background:var(--ligne)}
.chiffre:last-child::after{display:none}
.chiffre .val{
  font-family:var(--f-titre);font-size:clamp(2.3rem,4.6vw,3.5rem);font-weight:800;
  line-height:1;display:block;letter-spacing:-.03em;
  background:var(--grad-or);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.chiffre .lib{
  display:block;margin-top:.65rem;font-size:.815rem;color:var(--gris-clair);
  text-transform:uppercase;letter-spacing:.13em;font-weight:500;font-family:var(--f-titre);
}
@media(max-width:991px){.chiffre::after{display:none}}

/* ---------- 12. Compétences ---------- */
.onglets{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:3rem}
.onglet{
  font-family:var(--f-titre);font-weight:600;font-size:.885rem;padding:.66rem 1.35rem;
  border-radius:100px;border:1px solid var(--ligne);background:transparent;color:var(--gris-clair);
  cursor:pointer;transition:all .32s var(--ease);
}
.onglet:hover{color:var(--blanc);border-color:var(--ligne-forte)}
.onglet.actif{background:var(--grad-or);color:#0A0A0A;border-color:transparent;box-shadow:0 6px 22px -8px rgba(212,175,55,.5)}
.volet{display:none;animation:fondu .5s var(--ease)}
.volet.actif{display:block}
@keyframes fondu{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.jauge{margin-bottom:1.5rem}
.jauge-tete{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}
.jauge-tete b{font-family:var(--f-titre);font-size:.94rem;color:var(--blanc);font-weight:600}
.jauge-tete span{font-family:var(--f-mono);font-size:.76rem;color:var(--or)}
.jauge-piste{height:5px;border-radius:100px;background:var(--noir-graphite);overflow:hidden;border:1px solid var(--ligne)}
.jauge-barre{height:100%;width:0;border-radius:100px;background:var(--grad-or);transition:width 1.5s var(--ease);box-shadow:0 0 12px rgba(212,175,55,.4)}

.tuile-tech{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  padding:1.35rem .7rem;border:1px solid var(--ligne);border-radius:14px;background:var(--noir-carbone);
  transition:all .35s var(--ease);height:100%;text-align:center;
}
.tuile-tech:hover{border-color:var(--ligne-forte);background:var(--noir-graphite);transform:translateY(-5px)}
.tuile-tech .logo-tech{font-family:var(--f-mono);font-size:1.32rem;font-weight:500;color:var(--or);line-height:1}
.tuile-tech b{font-family:var(--f-titre);font-size:.82rem;color:var(--blanc);font-weight:600}
.tuile-tech small{font-size:.71rem;color:var(--gris);line-height:1.35}

/* ---------- 12 bis. Biographie & parcours ---------- */
.recit-ouverture{
  font-family:var(--f-titre);font-size:clamp(1.12rem,1.9vw,1.3rem);font-weight:500;
  color:var(--blanc);line-height:1.6;margin:0 0 1.6rem;padding-left:1.35rem;
  border-left:2px solid transparent;
  border-image:var(--grad-or) 1;max-width:none;
}
.recit p{font-size:1.01rem;margin:0 0 1.15rem;max-width:none}
.recit p:last-of-type{margin-bottom:0}

.citation-bio{
  position:relative;margin:2.2rem 0;padding:1.7rem 1.8rem 1.7rem 3.4rem;
  border:1px solid var(--ligne);border-radius:var(--r-lg);background:var(--noir-graphite);
  overflow:hidden;
}
.citation-bio::before{
  content:'“';position:absolute;left:.85rem;top:.35rem;font-family:var(--f-titre);
  font-size:4.4rem;line-height:1;color:var(--or);opacity:.32;
}
.citation-bio::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--grad-or)}
.citation-bio p{
  margin:0;font-family:var(--f-titre);font-size:1.06rem;font-weight:500;
  color:var(--blanc);line-height:1.6;max-width:none;
}

.signature-bio{display:flex;align-items:center;gap:.95rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--ligne)}
.signature-bio img{height:44px;width:auto;flex:0 0 auto}
.signature-bio b{display:block;font-family:var(--f-titre);font-size:1.02rem;color:var(--blanc);line-height:1.3}
.signature-bio small{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--or)}

/* Carte « en bref » */
.enbref{border:1px solid var(--ligne);border-radius:var(--r-lg);background:var(--noir-carbone);padding:1.6rem 1.7rem;margin-top:2.2rem}
.enbref h4{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--or);margin:0 0 1.15rem;font-weight:500;
}
.enbref dl{display:grid;grid-template-columns:auto 1fr;gap:.68rem 1.4rem;margin:0}
.enbref dt{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);padding-top:.2em}
.enbref dd{margin:0;font-family:var(--f-titre);font-size:.93rem;font-weight:600;color:var(--blanc)}
@media(max-width:420px){.enbref dl{grid-template-columns:1fr;gap:.15rem 0}.enbref dd{margin-bottom:.7rem}}

/* Frise verticale du parcours */
.frise-bio{position:relative;padding-left:2.6rem}
.frise-bio::before{
  content:'';position:absolute;left:10px;top:12px;bottom:12px;width:1px;
  background:linear-gradient(180deg,transparent,var(--ligne-forte) 5%,var(--ligne-forte) 95%,transparent);
}
.jalon-bio{position:relative;padding-bottom:2.15rem}
.jalon-bio:last-child{padding-bottom:0}
/* Repère hexagonal — rappel de la géométrie du logo */
.jalon-bio::before,.jalon-bio::after{
  content:'';position:absolute;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  transition:background .55s var(--ease),filter .55s var(--ease),opacity .55s var(--ease);
}
.jalon-bio::before{left:-2.6rem;top:.34rem;width:21px;height:23px;background:var(--ligne-forte)}
.jalon-bio::after{left:calc(-2.6rem + 3.5px);top:calc(.34rem + 3.8px);width:14px;height:15.4px;background:var(--noir-carbone)}
.jalon-bio.vu::before{background:var(--grad-or);filter:drop-shadow(0 0 9px rgba(212,175,55,.55))}
.jalon-bio.vu::after{opacity:0}
.jalon-bio.actuel::before{animation:battement 2.8s var(--ease) infinite}
@keyframes battement{0%,100%{filter:drop-shadow(0 0 8px rgba(212,175,55,.5))}50%{filter:drop-shadow(0 0 18px rgba(212,175,55,.95))}}

.jalon-bio .annee{
  font-family:var(--f-mono);font-size:.73rem;letter-spacing:.14em;color:var(--or);
  display:inline-flex;align-items:center;gap:.55rem;margin-bottom:.3rem;
}
.jalon-bio .annee em{font-style:normal;color:var(--gris);letter-spacing:.06em;font-size:.68rem}
.jalon-bio h4{font-size:1.075rem;margin:0 0 .42rem}
.jalon-bio p{font-size:.935rem;margin:0;color:var(--gris-clair);max-width:none}
.jalon-bio.actuel h4{color:var(--or)}
@media(max-width:575px){
  .frise-bio{padding-left:2.2rem}
  .frise-bio::before{left:8px}
  .jalon-bio::before{left:-2.2rem;width:18px;height:20px}
  .jalon-bio::after{left:calc(-2.2rem + 3px);top:calc(.34rem + 3.3px);width:12px;height:13.2px}
  .recit-ouverture{padding-left:1rem}
  .citation-bio{padding:1.4rem 1.3rem 1.4rem 2.9rem}
}


/* ---------- 13. Services ---------- */
.card-service{padding:2.15rem 1.9rem}
.card-service .liste{list-style:none;padding:0;margin:1.15rem 0 0;font-size:.885rem}
.card-service .liste li{padding:.32rem 0 .32rem 1.35rem;position:relative;color:var(--gris)}
.card-service .liste li::before{content:'';position:absolute;left:0;top:.92em;width:7px;height:1px;background:var(--or)}
.card-service.vedette{border-color:var(--ligne-forte);background:linear-gradient(160deg,var(--noir-graphite),var(--noir-carbone))}
.card-service.vedette::before{transform:scaleX(1)}
.ruban{
  position:absolute;top:1.3rem;right:1.3rem;font-family:var(--f-mono);font-size:.63rem;
  letter-spacing:.14em;text-transform:uppercase;color:#0A0A0A;background:var(--grad-or);
  padding:.24rem .6rem;border-radius:5px;font-weight:600;
}

/* ---------- 14. Portfolio ---------- */
.filtres{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:2.9rem}
.filtre{
  font-family:var(--f-titre);font-weight:600;font-size:.855rem;padding:.6rem 1.24rem;
  border-radius:100px;border:1px solid var(--ligne);background:transparent;color:var(--gris-clair);
  cursor:pointer;transition:all .32s var(--ease);
}
.filtre:hover{color:var(--blanc);border-color:var(--ligne-forte)}
.filtre.actif{background:var(--grad-or);color:#0A0A0A;border-color:transparent}
.filtre b{font-family:var(--f-mono);font-size:.7rem;opacity:.65;margin-left:.34rem;font-weight:500}

.grille-projets{display:grid;grid-template-columns:repeat(auto-fill,minmax(325px,1fr));gap:1.6rem}
.projet{
  position:relative;background:var(--noir-carbone);border:1px solid var(--ligne);
  border-radius:var(--r-lg);overflow:hidden;transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease),opacity .4s var(--ease);
  display:flex;flex-direction:column;
}
.projet:hover{transform:translateY(-9px);border-color:var(--ligne-forte);box-shadow:0 30px 62px -30px rgba(0,0,0,.92)}
.projet.masque{display:none}
.projet.entre{animation:entreProjet .55s var(--ease) both}
@keyframes entreProjet{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}

/* Aperçu « navigateur » généré en CSS */
.apercu{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--noir-graphite);border-bottom:1px solid var(--ligne)}
.apercu-chrome{display:flex;align-items:center;gap:.34rem;padding:.5rem .7rem;background:rgba(0,0,0,.42);border-bottom:1px solid var(--ligne)}
.apercu-chrome i{width:7px;height:7px;border-radius:50%;background:var(--gris);opacity:.5}
[data-theme="light"] .apercu-chrome{background:rgba(0,0,0,.06)}
[data-theme="light"] .apercu-chrome i{background:#B9B9B3;opacity:.9}
.apercu-chrome u{
  flex:1;margin-left:.4rem;height:15px;border-radius:4px;background:rgba(255,255,255,.05);
  font-family:var(--f-mono);font-size:.56rem;color:var(--gris);display:flex;align-items:center;
  padding-inline:.45rem;text-decoration:none;overflow:hidden;white-space:nowrap;
}
.apercu-toile{
  position:absolute;inset:29px 0 0;display:grid;place-items:center;
  transition:transform .7s var(--ease);
}
.projet:hover .apercu-toile{transform:scale(1.06)}
.apercu-toile .sigle{
  font-family:var(--f-titre);font-weight:800;font-size:clamp(2.1rem,5.4vw,3rem);letter-spacing:-.04em;
  background:var(--grad-or);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  opacity:.92;
}
.apercu-toile::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background-image:
    radial-gradient(circle at 24% 22%,rgba(212,175,55,.18),transparent 55%),
    radial-gradient(circle at 78% 82%,rgba(140,109,31,.16),transparent 55%),
    linear-gradient(135deg,#0E0E10,#16161A);
}
[data-theme="light"] .apercu-toile::before{background-image:radial-gradient(circle at 24% 22%,rgba(168,134,43,.16),transparent 55%),radial-gradient(circle at 78% 82%,rgba(168,134,43,.1),transparent 55%),linear-gradient(135deg,#F4F4F0,#E9E9E3)}
.apercu-toile::after{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(var(--ligne) 1px,transparent 1px),linear-gradient(90deg,var(--ligne) 1px,transparent 1px);
  background-size:34px 34px;opacity:.5;
}
.remplacer-image{
  position:absolute;bottom:8px;left:0;right:0;text-align:center;
  font-family:var(--f-mono);font-size:.56rem;letter-spacing:.1em;color:var(--gris);opacity:.55;text-transform:uppercase;
}
.categorie-badge{
  position:absolute;top:38px;left:12px;z-index:2;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  background:color-mix(in srgb,var(--noir-abyss) 84%,transparent);backdrop-filter:blur(8px);
  border:1px solid var(--ligne-forte);color:var(--or);padding:.24rem .58rem;border-radius:5px;
}
.projet-corps{padding:1.5rem 1.45rem 1.6rem;display:flex;flex-direction:column;flex:1}
.projet-corps h3{font-size:1.115rem;margin:0 0 .2rem;display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.projet-corps h3 em{font-family:var(--f-mono);font-size:.68rem;font-style:normal;color:var(--gris);font-weight:400}
.projet-corps .client{font-size:.79rem;color:var(--or);margin:0 0 .7rem;font-family:var(--f-mono);letter-spacing:.03em}
.projet-corps p{font-size:.9rem;color:var(--gris-clair);margin:0 0 1.15rem;flex:1}
.stack{display:flex;flex-wrap:wrap;gap:.32rem;margin-bottom:1.25rem}
.stack span{font-family:var(--f-mono);font-size:.655rem;padding:.2rem .52rem;border-radius:5px;background:rgba(212,175,55,.07);border:1px solid var(--ligne);color:var(--gris-clair)}
.lien-projet{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-titre);font-weight:600;
  font-size:.875rem;color:var(--or);align-self:flex-start;
}
.lien-projet:hover{gap:.78rem}
.lien-projet svg{transition:transform .3s var(--ease)}
.vide-filtre{text-align:center;padding:3.5rem 1rem;color:var(--gris);display:none}

/* ---------- 15. Processus ---------- */
.frise{position:relative;max-width:960px;margin-inline:auto}
.frise::before{
  content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--ligne-forte) 8%,var(--ligne-forte) 92%,transparent);
  transform:translateX(-50%);
}
.etape{position:relative;width:50%;padding:0 3.2rem 3rem 0;text-align:right}
.etape:nth-child(even){margin-left:50%;padding:0 0 3rem 3.2rem;text-align:left}
.etape .pastille-num{
  position:absolute;right:-19px;top:2px;width:38px;height:38px;border-radius:50%;
  background:var(--noir-abyss);border:1px solid var(--ligne-forte);color:var(--or);
  display:grid;place-items:center;font-family:var(--f-mono);font-size:.83rem;font-weight:500;
  transition:all .45s var(--ease);z-index:2;
}
.etape:nth-child(even) .pastille-num{right:auto;left:-19px}
.etape.vu .pastille-num{background:var(--grad-or);color:#0A0A0A;border-color:transparent;box-shadow:0 0 0 6px rgba(212,175,55,.1),0 6px 20px -6px rgba(212,175,55,.6)}
.etape h4{font-size:1.16rem;margin:0 0 .45rem}
.etape p{font-size:.93rem;margin:0 0 .5rem;color:var(--gris-clair);max-width:none}
.etape .duree{font-family:var(--f-mono);font-size:.68rem;color:var(--gris);letter-spacing:.06em;text-transform:uppercase}
@media(max-width:767px){
  .frise::before{left:19px}
  .etape,.etape:nth-child(even){width:100%;margin-left:0;padding:0 0 2.5rem 3.4rem;text-align:left}
  .etape .pastille-num,.etape:nth-child(even) .pastille-num{left:0;right:auto}
}

/* ---------- 16. Tarifs ---------- */
.card-tarif{padding:2.3rem 2rem;display:flex;flex-direction:column}
.card-tarif.vedette{
  border-color:var(--ligne-forte);
  background:linear-gradient(165deg,color-mix(in srgb,var(--or) 7%,var(--noir-carbone)),var(--noir-carbone));
  box-shadow:0 26px 60px -30px rgba(212,175,55,.34);
}
.card-tarif.vedette::before{transform:scaleX(1)}
.card-tarif .offre{font-family:var(--f-mono);font-size:.71rem;letter-spacing:.16em;text-transform:uppercase;color:var(--or);margin-bottom:.9rem}
.card-tarif h3{font-size:1.42rem;margin:0 0 .55rem}
.card-tarif .desc{font-size:.895rem;color:var(--gris);margin:0 0 1.5rem;min-height:2.9em}
.prix{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;margin-bottom:.3rem}
.prix .apd{font-size:.775rem;color:var(--gris);font-family:var(--f-mono);letter-spacing:.06em}
.prix .montant{font-family:var(--f-titre);font-size:clamp(1.95rem,3.4vw,2.5rem);font-weight:800;letter-spacing:-.03em;background:var(--grad-or);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.prix .devise{font-family:var(--f-titre);font-size:1rem;color:var(--gris-clair);font-weight:600}
.fourchette{font-size:.79rem;color:var(--gris);margin-bottom:1.65rem;font-family:var(--f-mono);min-height:2.9em}
.inclus{list-style:none;padding:0;margin:0 0 1.9rem;flex:1}
.inclus li{display:flex;gap:.68rem;padding:.42rem 0;font-size:.91rem;color:var(--gris-clair);align-items:flex-start}
.inclus li svg{flex:0 0 auto;margin-top:.34em;color:var(--or)}
.inclus li.non{color:var(--gris);opacity:.62}
.inclus li.non svg{color:var(--gris)}
.avis-tarif{
  border:1px dashed var(--ligne-forte);border-radius:14px;padding:1.35rem 1.5rem;
  background:rgba(212,175,55,.035);text-align:center;margin-top:2.6rem;
}
.avis-tarif p{margin:0;font-size:.915rem;color:var(--gris-clair);max-width:none}
.avis-tarif strong{color:var(--blanc)}

/* ---------- 17. Pourquoi moi ---------- */
.atout{display:flex;gap:1.1rem;align-items:flex-start}
.atout .coche{
  width:40px;height:40px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(212,175,55,.09);border:1px solid var(--ligne-forte);color:var(--or);
  transition:all .35s var(--ease);
}
.atout:hover .coche{background:var(--grad-or);color:#0A0A0A;border-color:transparent}
.atout h4{font-size:1.03rem;margin:.35rem 0 .38rem}
.atout p{font-size:.915rem;margin:0;color:var(--gris-clair)}

/* ---------- 18. Témoignages ---------- */
.card-avis{padding:2.1rem 1.95rem;display:flex;flex-direction:column;height:100%}
.etoiles{display:flex;gap:.2rem;margin-bottom:1.15rem;color:var(--or)}
.card-avis blockquote{margin:0 0 1.6rem;font-size:.985rem;color:var(--gris-clair);flex:1;position:relative;padding-top:.3rem;font-style:normal}
.card-avis blockquote::before{content:'“';position:absolute;top:-1.5rem;left:-.35rem;font-family:var(--f-titre);font-size:4.2rem;color:var(--or);opacity:.16;line-height:1}
.auteur{display:flex;align-items:center;gap:.9rem;padding-top:1.2rem;border-top:1px solid var(--ligne)}
.auteur .initiales{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(212,175,55,.1);border:1px solid var(--ligne-forte);
  font-family:var(--f-titre);font-weight:700;font-size:.9rem;color:var(--or);
}
.auteur b{display:block;font-family:var(--f-titre);font-size:.925rem;color:var(--blanc);line-height:1.35}
.auteur small{font-size:.79rem;color:var(--gris)}

/* ---------- 19. FAQ ---------- */
.faq{max-width:860px;margin-inline:auto}
.q{border:1px solid var(--ligne);border-radius:14px;margin-bottom:.8rem;background:var(--noir-carbone);overflow:hidden;transition:border-color .35s var(--ease)}
.q.ouverte{border-color:var(--ligne-forte)}
.q > button{
  width:100%;text-align:left;background:transparent;border:0;padding:1.28rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;cursor:pointer;
  font-family:var(--f-titre);font-weight:600;font-size:1.005rem;color:var(--blanc);line-height:1.4;
}
.q > button:hover{color:var(--or)}
.q .chev{flex:0 0 auto;color:var(--or);transition:transform .4s var(--ease)}
.q.ouverte .chev{transform:rotate(180deg)}
.q .rep{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.q .rep p{margin:0;padding:0 1.5rem 1.45rem;font-size:.945rem;color:var(--gris-clair);max-width:none}

/* ---------- 20. Formulaire ---------- */
.bloc-form{
  background:var(--noir-carbone);border:1px solid var(--ligne);border-radius:26px;
  padding:clamp(1.7rem,3.6vw,3rem);position:relative;overflow:hidden;
}
.bloc-form::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--grad-or)}
.progression{display:flex;align-items:center;gap:.7rem;margin-bottom:2.4rem}
.jalon{display:flex;align-items:center;gap:.65rem;flex:0 0 auto}
.jalon .rond{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  border:1px solid var(--ligne-forte);color:var(--gris);font-family:var(--f-mono);font-size:.78rem;
  transition:all .4s var(--ease);background:transparent;
}
.jalon.actif .rond{background:var(--grad-or);color:#0A0A0A;border-color:transparent;box-shadow:0 0 0 5px rgba(212,175,55,.11)}
.jalon.fait .rond{background:rgba(212,175,55,.16);color:var(--or)}
.jalon b{font-family:var(--f-titre);font-size:.83rem;color:var(--gris);font-weight:600;white-space:nowrap;transition:color .35s}
.jalon.actif b{color:var(--blanc)}
.trait{flex:1;height:1px;background:var(--ligne)}
@media(max-width:575px){.jalon b{display:none}}

.etape-form{display:none;animation:fondu .45s var(--ease)}
.etape-form.actif{display:block}
label{display:block;font-family:var(--f-titre);font-size:.83rem;font-weight:600;color:var(--gris-clair);margin-bottom:.45rem;letter-spacing:.01em}
label .req{color:var(--or)}
.form-control,.form-select,textarea{
  width:100%;background:var(--noir-abyss);border:1px solid var(--ligne);border-radius:12px;
  padding:.82rem 1.05rem;color:var(--blanc);font-family:var(--f-texte);font-size:.955rem;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s;
}
.form-control::placeholder,textarea::placeholder{color:var(--gris);opacity:.75}
.form-control:focus,.form-select:focus,textarea:focus{
  outline:0;border-color:var(--or);background:var(--noir-abyss);color:var(--blanc);
  box-shadow:0 0 0 3.5px rgba(212,175,55,.13);
}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23D4AF37' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1.05rem center;padding-right:2.6rem}
.form-select option{background:var(--noir-carbone);color:var(--blanc)}
textarea{resize:vertical;min-height:132px;line-height:1.65}
.champ{margin-bottom:1.35rem}
.aide{font-size:.775rem;color:var(--gris);margin-top:.4rem}
.erreur-champ{font-size:.78rem;color:var(--rouge);margin-top:.35rem;display:none}
.champ.invalide .form-control,.champ.invalide .form-select,.champ.invalide textarea{border-color:var(--rouge)}
.champ.invalide .erreur-champ{display:block}

/* Choix en cartes radio */
.choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:.62rem}
.choix input{position:absolute;opacity:0;pointer-events:none}
.choix label{
  border:1px solid var(--ligne);border-radius:12px;padding:.86rem .95rem;cursor:pointer;
  background:var(--noir-abyss);transition:all .3s var(--ease);margin:0;
  font-family:var(--f-titre);font-size:.86rem;color:var(--gris-clair);font-weight:500;
  display:flex;align-items:center;gap:.6rem;
}
.choix label:hover{border-color:var(--ligne-forte);color:var(--blanc)}
.choix input:checked + label{border-color:var(--or);background:rgba(212,175,55,.09);color:var(--blanc)}
.choix input:focus-visible + label{outline:2px solid var(--or);outline-offset:2px}
.choix label i{width:8px;height:8px;border-radius:50%;border:1px solid var(--ligne-forte);flex:0 0 auto;transition:all .3s}
.choix input:checked + label i{background:var(--or);border-color:var(--or);box-shadow:0 0 8px var(--or)}

.rgpd{display:flex;gap:.75rem;align-items:flex-start;font-size:.855rem;color:var(--gris-clair);margin-bottom:1.7rem}
.rgpd input{margin-top:.3rem;width:17px;height:17px;accent-color:var(--or);flex:0 0 auto;cursor:pointer}
.rgpd label{margin:0;font-family:var(--f-texte);font-weight:400;font-size:.855rem;color:var(--gris-clair);text-transform:none;letter-spacing:0}

.actions-form{display:flex;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap}
.succes{
  display:none;text-align:center;padding:2.6rem 1.4rem;
}
.succes.visible{display:block;animation:fondu .55s var(--ease)}
.succes .coche-ok{
  width:74px;height:74px;border-radius:50%;margin:0 auto 1.5rem;display:grid;place-items:center;
  background:rgba(63,185,80,.1);border:1px solid rgba(63,185,80,.42);color:var(--vert);
}
.succes h3{font-size:1.5rem;margin:0 0 .7rem}
.succes p{margin:0 auto 1.9rem}

/* ---------- 21. Contact ---------- */
.ligne-contact{
  display:flex;align-items:center;gap:1.05rem;padding:1.15rem 1.3rem;
  border:1px solid var(--ligne);border-radius:15px;background:var(--noir-carbone);
  transition:all .35s var(--ease);margin-bottom:.8rem;
}
.ligne-contact:hover{border-color:var(--ligne-forte);background:var(--noir-graphite);transform:translateX(5px)}
.ligne-contact .ico{
  width:44px;height:44px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(212,175,55,.09);border:1px solid var(--ligne-forte);color:var(--or);
}
.ligne-contact small{display:block;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.ligne-contact b{font-family:var(--f-titre);font-size:.985rem;color:var(--blanc);font-weight:600}
.reseaux{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.6rem}
.reseau{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  border:1px solid var(--ligne);background:var(--noir-carbone);color:var(--gris-clair);
  transition:all .35s var(--ease);
}
.reseau:hover{color:#0A0A0A;background:var(--grad-or);border-color:transparent;transform:translateY(-4px) rotate(-6deg)}

.carte-zone{
  border:1px solid var(--ligne);border-radius:var(--r-lg);overflow:hidden;height:100%;min-height:340px;
  position:relative;background:var(--noir-graphite);display:grid;place-items:center;text-align:center;padding:2rem;
}
.carte-zone::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(var(--ligne) 1px,transparent 1px),linear-gradient(90deg,var(--ligne) 1px,transparent 1px);
  background-size:44px 44px;
}
.carte-zone::after{
  content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(212,175,55,.13),transparent 60%);
}
.epingle{position:relative;z-index:2}
.epingle .rond-pulse{
  width:70px;height:70px;border-radius:50%;margin:0 auto 1.2rem;display:grid;place-items:center;
  background:rgba(212,175,55,.11);border:1px solid var(--ligne-forte);color:var(--or);
  box-shadow:0 0 0 0 rgba(212,175,55,.4);animation:pulse-or 2.6s infinite;
}
@keyframes pulse-or{70%{box-shadow:0 0 0 26px rgba(212,175,55,0)}100%{box-shadow:0 0 0 0 rgba(212,175,55,0)}}
.epingle h4{font-size:1.2rem;margin:0 0 .4rem}
.epingle p{font-size:.93rem;margin:0;color:var(--gris-clair)}

/* ---------- 22. Footer ---------- */
footer{border-top:1px solid var(--ligne);background:var(--noir-carbone);padding-top:clamp(52px,6vw,80px)}
footer h5{font-family:var(--f-titre);font-size:.79rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blanc);margin-bottom:1.25rem;font-weight:700}
footer ul{list-style:none;padding:0;margin:0}
footer ul li{margin-bottom:.6rem}
footer ul a{color:var(--gris-clair);font-size:.915rem}
footer ul a:hover{color:var(--or);padding-left:5px}
footer ul a{transition:color .28s var(--ease),padding-left .28s var(--ease);display:inline-block}
.footer-marque{display:flex;align-items:center;gap:.8rem;margin-bottom:1.15rem}
.footer-marque img{height:46px;width:auto}
.footer-marque b{font-family:var(--f-titre);font-size:1.14rem;color:var(--blanc);display:block;line-height:1.2}
.footer-marque small{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.2em;color:var(--gris);text-transform:uppercase}
.bas-footer{
  border-top:1px solid var(--ligne);margin-top:3rem;padding:1.7rem 0;
  display:flex;justify-content:space-between;align-items:center;gap:1.2rem;flex-wrap:wrap;
  font-size:.85rem;color:var(--gris);
}
.bas-footer nav{display:flex;gap:1.5rem;flex-wrap:wrap}
.bas-footer a{color:var(--gris)}
.bas-footer a:hover{color:var(--or)}

/* ---------- 23. Éléments flottants ---------- */
.wa{
  position:fixed;right:20px;bottom:20px;z-index:1040;width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 30px -8px rgba(37,211,102,.6);transition:all .35s var(--ease);
}
.wa:hover{color:#fff;transform:scale(1.09) translateY(-3px);box-shadow:0 16px 40px -8px rgba(37,211,102,.75)}
.wa::after{
  content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:onde 2.6s var(--ease) infinite;
}
@keyframes onde{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.75);opacity:0}}
.wa-bulle{
  position:fixed;right:86px;bottom:32px;z-index:1040;
  background:var(--noir-carbone);border:1px solid var(--ligne-forte);border-radius:10px;
  padding:.5rem .85rem;font-size:.8rem;color:var(--blanc);white-space:nowrap;
  opacity:0;transform:translateX(10px);transition:all .35s var(--ease);pointer-events:none;
  font-family:var(--f-titre);font-weight:600;
}
.wa:hover ~ .wa-bulle,.wa-bulle.montre{opacity:1;transform:none}
@media(max-width:575px){.wa-bulle{display:none}}

.haut{
  position:fixed;right:20px;bottom:88px;z-index:1039;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--ligne-forte);background:color-mix(in srgb,var(--noir-carbone) 88%,transparent);
  backdrop-filter:blur(10px);color:var(--or);display:grid;place-items:center;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(12px);transition:all .4s var(--ease);
}
.haut.visible{opacity:1;visibility:visible;transform:none}
.haut:hover{background:var(--grad-or);color:#0A0A0A;border-color:transparent}

/* Barre de progression de lecture */
.jauge-lecture{position:fixed;top:0;left:0;height:2px;background:var(--grad-or);z-index:1050;width:0;transition:width .1s linear}


/* ---------- 24. Adaptations ---------- */
/* Entre 992 et 1199 px : la barre de navigation doit se resserrer
   pour que les 7 liens, le logo et le bouton tiennent sur une ligne. */
@media(min-width:992px) and (max-width:1199px){
  .nav-sla .marque span{display:none}
  .liens-nav a{padding:.5rem .52rem;font-size:.83rem}
  .nav-sla .btn.actions-desktop{padding:.7rem 1.1rem;font-size:.855rem}
}
.nav-sla .btn{white-space:nowrap}

@media(max-width:991px){
  .liens-nav,.nav-sla .actions-desktop{display:none!important}
  .burger{display:block}
  .fenetre-code{transform:none;margin-top:3rem}
  .fenetre-code:hover{transform:translateY(-4px)}
  .deco-photo{display:none}
  p{max-width:none}
}
@media(max-width:575px){
  body{font-size:1rem}
  section{padding:60px 0}
  .card-lux{padding:1.6rem 1.4rem}
  .grille-projets{grid-template-columns:1fr}
  .hero-actions .btn{width:100%}
  .bloc-form{border-radius:20px}
}
@media print{
  .nav-sla,.wa,.haut,.wa-bulle,.jauge-lecture{display:none!important}
}