/* ==========================================================
   MARQUELAN — style.css (site marquelan.ch, V1)
   Basé sur marquelan-tokens.css, polices auto-hébergées (nLPD).
   ========================================================== */

/* ---------- Polices (fichiers dans assets/fonts/) ---------- */
@font-face {
  font-family: "Anybody";
  src: url("../fonts/anybody.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 50% 150%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Anybody";
  src: url("../fonts/anybody-italic.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 50% 150%; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("../fonts/onest.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
/* General Sans : à ajouter vous-même depuis Fontshare (voir LISEZ-MOI.txt).
   Tant que les fichiers manquent, le navigateur utilise Onest à la place. */
@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- Variables (palette Neon Grid) ---------- */
:root {
  --noir-profond:    #0C120F;
  --noir-releve:     #141C17;   /* cartes sur fond noir */
  --blanc-vert:      #EEF5EA;
  --vert-neon:       #C2FF47;
  --vert-electrique: #6EEB83;
  --gris-vert:       #93A394;
  --gris-texte:      #5E6B60;
  --ligne:           rgb(147 163 148 / .22);

  --font-titre:      "Anybody", "Arial Black", sans-serif;
  --font-sous-titre: "General Sans", "Onest", system-ui, sans-serif;
  --font-texte:      "Onest", system-ui, sans-serif;

  --taille-h1:    clamp(1.75rem, .2rem + 7.8vw, 4rem);
  --taille-h2:    clamp(1.6rem, 1rem + 2.6vw, 3rem);
  --taille-h3:    clamp(1.2rem, 1rem + .8vw, 1.5rem);
  --taille-texte: 1.0625rem;
  --taille-petit: .875rem;

  --rayon: 4px;
  --rayon-bouton: 999px;
  --ease-elan: cubic-bezier(.2, .9, .2, 1);
  --duree: 280ms;

  --largeur: 1200px;
  --gouttiere: clamp(1rem, .5rem + 2.5vw, 2.5rem);
  --section: clamp(4rem, 3rem + 5vw, 8rem);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-texte); font-size: var(--taille-texte); line-height: 1.6;
  background: var(--noir-profond); color: var(--blanc-vert);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; }
h1, h2 {
  font-family: var(--font-titre); font-weight: 800; font-stretch: 150%;
  text-transform: uppercase; line-height: 1.02; letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
h1 { font-size: var(--taille-h1); font-style: italic; }
h2 { font-size: var(--taille-h2); }
h3 { font-family: var(--font-sous-titre); font-weight: 600; font-size: var(--taille-h3); line-height: 1.25; }

::selection { background: var(--vert-neon); color: var(--noir-profond); }
:focus-visible { outline: 3px solid var(--vert-neon); outline-offset: 3px; border-radius: 2px; }

.conteneur { width: min(100% - 2 * var(--gouttiere), var(--largeur)); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }
.surtitre {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-sous-titre); font-weight: 500; font-size: var(--taille-petit);
  letter-spacing: .14em; text-transform: uppercase; color: var(--vert-neon); margin: 0 0 1.25rem;
}
.surtitre::before { content: ""; width: 10px; height: 22px; background: url("../img/fleche-lame.svg") center / contain no-repeat; }
.intro { max-width: 40rem; color: rgb(238 245 234 / .82); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); }
.en-tete-section { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.neon { color: var(--vert-neon); }
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.lien-evitement {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--vert-neon); color: var(--noir-profond); padding: .75rem 1rem; border-radius: var(--rayon);
  font-weight: 600; text-decoration: none;
}
.lien-evitement:focus { top: 1rem; }

.fond-grille {
  background-image:
    linear-gradient(to right, rgb(147 163 148 / .10) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(147 163 148 / .10) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 0 1.6em; border-radius: var(--rayon-bouton);
  background: var(--vert-neon); color: var(--noir-profond); border: 2px solid var(--vert-neon);
  font-family: var(--font-sous-titre); font-weight: 600; font-size: 1rem; text-decoration: none;
  transition: transform var(--duree) var(--ease-elan), background-color var(--duree), color var(--duree);
}
.bouton:hover { transform: translate(2px, -2px); background: var(--vert-electrique); border-color: var(--vert-electrique); }
.bouton .fleche { width: 1em; height: 1em; transition: transform var(--duree) var(--ease-elan); }
.bouton:hover .fleche { transform: translate(2px, -2px); }
.bouton--contour { background: transparent; color: var(--blanc-vert); border-color: rgb(238 245 234 / .35); }
.bouton--contour:hover { background: transparent; color: var(--vert-neon); border-color: var(--vert-neon); }
.bouton--sombre { background: var(--noir-profond); color: var(--blanc-vert); border-color: var(--noir-profond); }
.bouton--sombre:hover { background: var(--noir-releve); border-color: var(--noir-releve); color: var(--vert-neon); }
.bouton--petit { min-height: 44px; padding: 0 1.2em; font-size: .9375rem; }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgb(12 18 15 / .82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ligne);
}
.entete__barre { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 72px; }
.entete__logo { display: block; flex-shrink: 0; }
.entete__logo img { width: auto; height: 22px; }
.nav { display: none; }
.nav ul { display: flex; gap: clamp(1rem, .5rem + 1.5vw, 2rem); }
.nav a {
  font-family: var(--font-sous-titre); font-weight: 500; font-size: .9375rem;
  text-decoration: none; color: rgb(238 245 234 / .8); padding-block: .5rem;
  background: linear-gradient(var(--vert-neon), var(--vert-neon)) left bottom / 0 2px no-repeat;
  transition: background-size var(--duree) var(--ease-elan), color var(--duree);
}
.nav a:hover { color: var(--blanc-vert); background-size: 100% 2px; }
@media (min-width: 900px) { .nav { display: block; } }
@media (max-width: 380px) { .entete__logo img { height: 17px; } .entete .bouton--petit { padding: 0 1em; } }

/* ---------- Héros ---------- */
.heros { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 2rem + 6vw, 7.5rem) clamp(4rem, 3rem + 5vw, 7rem); }
.heros::after { /* fondu de la grille vers le bas */
  content: ""; position: absolute; inset: auto 0 0 0; height: 40%;
  background: linear-gradient(transparent, var(--noir-profond)); pointer-events: none;
}
.heros__grille { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4rem); align-items: center; position: relative; z-index: 1; }
.heros h1 { max-width: 13ch; }
.heros .intro { margin-top: 1.75rem; }
.heros__actions { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 2.25rem; }
.heros__preuves {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 2.5rem;
  font-size: var(--taille-petit); color: var(--gris-vert);
}
.heros__preuves li { display: flex; align-items: center; gap: .5rem; }
.heros__preuves li::before { content: ""; width: 6px; height: 6px; background: var(--vert-electrique); transform: rotate(45deg); }

.heros__visuel { position: relative; width: min(62%, 280px); justify-self: center; aspect-ratio: 1; }
.heros__visuel svg { width: 100%; height: 100%; overflow: visible; }
.eclat { opacity: 0; animation: eclat-entree .8s var(--ease-elan) forwards; }
.eclat--1 { animation-delay: .15s; } .eclat--2 { animation-delay: .32s; } .eclat--3 { animation-delay: .49s; }
@keyframes eclat-entree { from { opacity: 0; transform: translate(-36px, 54px); } to { opacity: 1; transform: none; } }
.elan { stroke-dasharray: 800; stroke-dashoffset: 800; animation: elan-trace 1.1s var(--ease-elan) forwards; }
.elan:nth-of-type(2) { animation-delay: .7s; } .elan:nth-of-type(3) { animation-delay: .82s; }
.elan:nth-of-type(4) { animation-delay: .94s; } .elan:nth-of-type(5) { animation-delay: 1.06s; }
@keyframes elan-trace { to { stroke-dashoffset: 0; } }

@media (min-width: 1100px) {
  .heros__grille { grid-template-columns: minmax(0, 1fr) clamp(300px, 30vw, 440px); }
  .heros__visuel { width: 100%; justify-self: end; }
  .heros h1 { font-size: clamp(3.5rem, .6rem + 4.4vw, 4.25rem); }
}

/* ---------- Services ---------- */
.services { display: grid; gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; }
.service { background: var(--noir-profond); padding: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); display: flex; flex-direction: column; gap: 1rem; transition: background-color var(--duree); }
.service:hover { background: var(--noir-releve); }
.service__num { font-family: var(--font-titre); font-weight: 800; font-stretch: 150%; font-size: 2.75rem; line-height: 1; color: var(--vert-neon); }
.service p { color: rgb(238 245 234 / .8); margin: 0; }
.service ul { display: grid; gap: .55rem; margin-top: .5rem; padding-top: 1.25rem; border-top: 1px solid var(--ligne); font-size: .9688rem; }
.service li { display: flex; gap: .75rem; align-items: baseline; }
.service li::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; background: var(--vert-electrique); transform: translateY(-2px) rotate(45deg); }
.services__option { margin-top: 1.5rem; color: var(--gris-vert); font-size: .9688rem; }
.services__option strong { color: var(--blanc-vert); font-weight: 500; }
@media (min-width: 860px) { .services { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Engagements (fond néon) ---------- */
.engagements { background: var(--vert-neon); color: var(--noir-profond); }
.engagements .surtitre { color: var(--noir-profond); }
.engagements .surtitre::before { filter: brightness(0); }
.engagements__liste { display: grid; gap: 2.25rem 2rem; }
.engagement { border-top: 3px solid var(--noir-profond); padding-top: 1.25rem; }
.engagement h3 { margin-bottom: .5rem; }
.engagement p { margin: 0; color: rgb(12 18 15 / .82); }
@media (min-width: 700px) { .engagements__liste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .engagements__liste { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Méthode ---------- */
.etapes { display: grid; gap: 1rem; counter-reset: etape; }
.etape {
  position: relative; border: 1px solid var(--ligne); border-radius: var(--rayon);
  padding: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); padding-top: 4.75rem; background: var(--noir-releve);
}
.etape::before {
  counter-increment: etape; content: "0" counter(etape);
  position: absolute; top: 1.4rem; left: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  font-family: var(--font-titre); font-weight: 800; font-stretch: 150%; font-size: 1.5rem; color: var(--vert-neon);
}
.etape h3 { margin-bottom: .6rem; }
.etape p { margin: 0; color: rgb(238 245 234 / .8); }
.methode__note { margin-top: 1.5rem; color: var(--gris-vert); font-size: .9375rem; }
@media (min-width: 860px) {
  .etapes { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Étude de cas ---------- */
.cas__entete { display: grid; gap: 2rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.cas__mention {
  display: inline-flex; align-items: flex-start; gap: .6rem; padding: .75rem 1rem; margin-top: 1.25rem;
  border: 1px dashed rgb(110 235 131 / .55); border-radius: var(--rayon);
  font-size: var(--taille-petit); color: var(--vert-electrique); max-width: 40rem;
}
.etiquettes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.etiquettes li {
  font-family: var(--font-sous-titre); font-weight: 500; font-size: .8125rem;
  padding: .35rem .8rem; border: 1px solid var(--ligne); border-radius: var(--rayon-bouton); color: rgb(238 245 234 / .85);
}
.cas__details { display: grid; gap: 1.5rem; align-content: start; }
.cas__details div { border-left: 2px solid var(--vert-neon); padding-left: 1.1rem; }
.cas__details h3 { font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--vert-neon); margin-bottom: .35rem; }
.cas__details p { margin: 0; color: rgb(238 245 234 / .82); }
@media (min-width: 900px) { .cas__entete { grid-template-columns: 1.2fr 1fr; gap: 4rem; } }

.galerie { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; }
.galerie figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--rayon); background: var(--noir-releve); }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-elan); }
.galerie figure:hover img { transform: scale(1.03); }
.galerie figcaption {
  position: absolute; left: .6rem; bottom: .6rem; padding: .3rem .65rem; border-radius: var(--rayon);
  background: rgb(12 18 15 / .78); font-size: .75rem; font-family: var(--font-sous-titre); font-weight: 500; letter-spacing: .02em;
}
.g-large    { grid-column: span 2; aspect-ratio: 16 / 9; }
.g-paysage  { grid-column: span 2; aspect-ratio: 3 / 2; }
.g-carre    { aspect-ratio: 1; }
.g-logo { grid-column: span 2; display: grid; grid-template-columns: 1fr; background: #3B3C36 !important; }
.g-logo .logo-zone { display: grid; place-items: center; padding: 2.5rem 1.5rem; }
.g-logo .logo-zone img { width: min(70%, 300px); height: auto; object-fit: contain; }
.palette-oliban { display: grid; grid-template-columns: 1fr 1fr; }
.palette-oliban div { padding: 1rem; font-family: var(--font-sous-titre); font-size: .8125rem; line-height: 1.35; }
.palette-oliban strong { display: block; font-weight: 600; font-size: .9375rem; }
.pastille-ash { background: #3B3C36; color: #D8892B; border-top: 1px solid rgb(216 137 43 / .35); }
.pastille-amber { background: #D8892B; color: #3B3C36; }
.g-objet { background: #fff !important; }
.g-objet img, .g-fond-blanc img { object-fit: contain; padding: 1.25rem; }
.g-fond-blanc { background: #fff !important; }

@media (min-width: 760px) {
  .galerie { grid-template-columns: repeat(6, 1fr); gap: 1rem; }
  .g-large    { grid-column: span 4; aspect-ratio: auto; }
  .g-logo     { grid-column: span 2; grid-template-rows: 1fr auto; }
  .g-paysage  { grid-column: span 3; }
  .g-portrait, .g-objet, .g-carre, .g-appel { grid-column: span 2; }
}
.g-portrait, .g-objet { aspect-ratio: 3 / 4; }
.g-appel {
  aspect-ratio: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
  padding: clamp(1.1rem, .8rem + 1.2vw, 2rem); border-radius: var(--rayon);
  background: var(--vert-neon); color: var(--noir-profond); text-decoration: none;
  transition: background-color var(--duree);
}
.g-appel:hover { background: var(--vert-electrique); }
.g-appel strong { font-family: var(--font-titre); font-weight: 800; font-stretch: 150%; text-transform: uppercase; font-size: clamp(1rem, .7rem + 1.3vw, 1.6rem); line-height: 1.05; }
.g-appel span { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-sous-titre); font-weight: 600; font-size: .9375rem; }
.g-appel svg { width: 1.1em; height: 1.1em; transition: transform var(--duree) var(--ease-elan); }
.g-appel:hover svg { transform: translate(3px, -3px); }

/* ---------- À propos ---------- */
.apropos__grille { display: grid; gap: 3rem; align-items: start; }
.apropos__texte p { color: rgb(238 245 234 / .85); max-width: 38rem; }
.apropos__texte .apropos__accroche { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); color: var(--blanc-vert); }
.valeurs { display: grid; gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; }
.valeur { background: var(--noir-profond); padding: 1.5rem 1.6rem; display: grid; grid-template-columns: 1fr; gap: .5rem; }
.valeur strong {
  font-family: var(--font-titre); font-weight: 800; font-stretch: 150%; text-transform: uppercase;
  font-size: 1.25rem; color: var(--vert-neon);
}
.valeur span { color: rgb(238 245 234 / .8); font-size: .9688rem; }
@media (min-width: 900px) { .apropos__grille { grid-template-columns: 1.3fr 1fr; gap: 5rem; } }

/* ---------- Contact ---------- */
.contact { overflow: hidden; }
.contact__lignes { position: absolute; right: -40px; top: 2rem; width: min(45vw, 460px); opacity: .35; pointer-events: none; }
.contact h2 { font-size: clamp(2rem, 1rem + 5vw, 5rem); font-style: italic; max-width: 12ch; }
.contact .intro { margin-top: 1.5rem; }
.canaux { display: grid; gap: 1rem; margin-top: 2.75rem; position: relative; z-index: 1; }
.canal {
  display: flex; align-items: center; gap: 1.1rem; padding: 1.35rem 1.5rem; min-height: 88px;
  border: 1px solid var(--ligne); border-radius: var(--rayon); background: var(--noir-releve);
  text-decoration: none; transition: border-color var(--duree), transform var(--duree) var(--ease-elan);
}
.canal:hover { border-color: var(--vert-neon); transform: translate(2px, -2px); }
.canal__icone { flex-shrink: 0; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--vert-neon); color: var(--noir-profond); }
.canal__icone svg { width: 22px; height: 22px; }
.canal small { display: block; font-size: .8125rem; color: var(--gris-vert); letter-spacing: .06em; text-transform: uppercase; }
.canal span { font-family: var(--font-sous-titre); font-weight: 600; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); overflow-wrap: anywhere; }
.canal--principal { background: var(--vert-neon); color: var(--noir-profond); border-color: var(--vert-neon); }
.canal--principal small { color: rgb(12 18 15 / .7); }
.canal--principal .canal__icone { background: var(--noir-profond); color: var(--vert-neon); }
.contact__zone { margin-top: 1.75rem; color: var(--gris-vert); font-size: .9375rem; position: relative; z-index: 1; }
@media (max-width: 759px) { .contact__lignes { display: none; } }
@media (min-width: 760px) { .canaux { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Pied de page ---------- */
.pied { border-top: 1px solid var(--ligne); padding-block: 3rem 2.5rem; font-size: .9375rem; color: var(--gris-vert); }
.pied__haut { display: grid; gap: 2rem; }
.pied__marque img { height: 20px; width: auto; }
.pied__marque p { margin: .9rem 0 0; }
.pied nav ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--vert-neon); text-decoration: underline; text-underline-offset: 3px; }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ligne); font-size: .8438rem; }
.pied__bas p { margin: 0; }
@media (min-width: 760px) { .pied__haut { grid-template-columns: 1fr auto; align-items: end; } }

/* ---------- Pages légales ---------- */
.legal { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.legal h1 { font-size: clamp(1.35rem, .3rem + 5.2vw, 3.75rem); margin-bottom: 1rem; }
.legal .maj { color: var(--gris-vert); font-size: var(--taille-petit); margin-bottom: 3rem; }
.legal__corps { max-width: 46rem; }
.legal h2 { font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); margin: 3rem 0 1rem; font-style: normal; }
.legal p, .legal li { color: rgb(238 245 234 / .86); }
.legal ul { display: grid; gap: .5rem; margin: 0 0 1em; }
.legal li { padding-left: 1.25rem; position: relative; }
.legal li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--vert-electrique); transform: rotate(45deg); }
.legal a { color: var(--vert-neon); text-underline-offset: 3px; }
.legal address { font-style: normal; padding: 1.25rem 1.5rem; border-left: 2px solid var(--vert-neon); background: var(--noir-releve); margin-bottom: 1.25rem; line-height: 1.7; }
.retour { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 2.5rem; color: var(--gris-vert); text-decoration: none; font-size: .9375rem; }
.retour:hover { color: var(--vert-neon); }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .eclat { opacity: 1; }
  .elan { stroke-dashoffset: 0; }
}

/* ---------- Comparateur avant / après (projet CVT) ---------- */
.aa { position: relative; overflow: hidden; border-radius: var(--rayon); border: 1px solid var(--ligne); --pos: 50%; background: #fff; touch-action: pan-y; }
.aa img { display: block; width: 100%; height: auto; }
.aa__avant { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.aa__avant img { width: 100%; height: 100%; object-fit: cover; }
.aa__ligne { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--vert-neon); pointer-events: none; }
.aa__poignee { position: absolute; top: 50%; left: var(--pos); width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: var(--vert-neon); color: var(--noir-profond); display: grid; place-items: center; pointer-events: none; box-shadow: 0 6px 20px rgb(0 0 0 / .35); }
.aa__poignee svg { width: 26px; height: 26px; }
.aa input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.aa input:focus-visible ~ .aa__poignee { outline: 3px solid var(--blanc-vert); outline-offset: 3px; }
.aa__tag { position: absolute; top: .75rem; padding: .3rem .65rem; border-radius: var(--rayon); font-family: var(--font-sous-titre); font-weight: 600; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.aa__tag--avant { left: .75rem; background: rgb(12 18 15 / .82); color: var(--blanc-vert); }
.aa__tag--apres { right: .75rem; background: var(--vert-neon); color: var(--noir-profond); }
.aa-onglets { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.aa-onglets button { font: inherit; font-family: var(--font-sous-titre); font-weight: 600; font-size: .9rem; min-height: 44px; padding: 0 1.1rem; border-radius: var(--rayon-bouton); border: 1px solid var(--ligne); background: transparent; color: var(--blanc-vert); cursor: pointer; }
.aa-onglets button[aria-selected="true"] { background: var(--blanc-vert); color: var(--noir-profond); border-color: var(--blanc-vert); }
.aa-legende { margin-top: .75rem; color: var(--gris-vert); font-size: .875rem; }
.cas__actions { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 2.5rem; }
.g-sombre { background: #111311 !important; }
.g-sombre img { object-fit: contain; }

.aa--portrait { max-width: 380px; margin-inline: auto; }