@charset "UTF-8";
/* =============================================================================
   BASE Signalisation — Design System v2
   Direction : sombre + vert néon, animations spectaculaires
   Refonte 2026 — Semcode
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------ */
:root {
  /* ------------------------------------------------------------------
     Palette CLAIRE avec zones sombres d'accent.
     Les ratios de contraste indiqués sont calculés selon WCAG 2.1 ;
     le seuil AA pour du texte est 4,5:1.
     ------------------------------------------------------------------ */

  /* Fonds clairs */
  --blanc:     #FFFFFF;
  --clair-50:  #F8FAF7;
  --clair-100: #F4F6F3;
  --clair-200: #E9EDE7;
  --clair-300: #DCE2D9;
  --clair-400: #C4CDC0;

  /* Zones sombres conservées : hero, appels à l'action, pied de page */
  --nuit-950: #080D0A;
  --nuit-900: #0E1511;
  --nuit-850: #131C17;
  --nuit-800: #1A2620;
  --nuit-700: #24332B;
  --nuit-600: #33453A;
  --nuit-500: #445A4C;

  /* Verts.
     `--neon` ne sert QUE sur fond sombre (14,3:1) et en aplat de bouton.
     `--vert-texte` est la seule teinte autorisée pour du texte vert sur
     fond clair : 5,0:1 sur blanc, 4,6:1 sur gris pâle. */
  --neon:       #7CFF4A;
  --neon-vif:   #9BFF74;
  --base-vert:  #6EC141;
  --vert-vif:   #5FB233;
  --vert-texte: #357F1B;
  --vert-fonce: #24610F;
  --vert-nuit:  #14361B;

  /* Textes sur fond clair */
  --txt:       #101A13;   /* 17,8:1 sur blanc */
  --txt-doux:  #425046;   /*  8,5:1 */
  --txt-tenu:  #5E6B62;   /*  5,6:1 sur blanc, 5,2:1 sur gris pâle */

  /* Textes sur fond sombre */
  --txt-clair:      #F2F5F3;
  --txt-clair-doux: #A8B5AC;
  --txt-clair-tenu: #7A8A80;

  /* Surfaces */
  --verre:      rgba(16,26,19,.03);
  --verre-fort: rgba(16,26,19,.05);
  --bord:       rgba(16,26,19,.10);
  --bord-fort:  rgba(16,26,19,.20);
  --bord-neon:  rgba(53,127,27,.34);

  /* Bordures sur fond sombre */
  --bord-nuit:      rgba(255,255,255,.10);
  --bord-nuit-fort: rgba(255,255,255,.18);
  --bord-nuit-neon: rgba(124,255,74,.35);

  /* Typographie */
  --f-titre: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-texte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Échelle typographique */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   clamp(1.05rem, 0.4vw + 0.95rem, 1.2rem);
  --t-lg:   clamp(1.3rem, 0.8vw + 1.1rem, 1.65rem);
  --t-xl:   clamp(1.75rem, 1.6vw + 1.3rem, 2.5rem);
  --t-2xl:  clamp(2.2rem, 3vw + 1.4rem, 3.75rem);
  --t-3xl:  clamp(2.8rem, 5.5vw + 1.2rem, 6.5rem);
  --t-geant:clamp(3.5rem, 10vw, 11rem);

  /* Rythme */
  --e-1: .25rem; --e-2: .5rem;  --e-3: .75rem; --e-4: 1rem;
  --e-5: 1.5rem; --e-6: 2rem;   --e-7: 3rem;   --e-8: 4rem;
  --e-9: 6rem;   --e-10: 8rem;

  /* Formes */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;

  /* Ombres — sur fond clair, elles portent la profondeur */
  --lueur-neon:   0 0 30px rgba(110,193,65,.35);
  --lueur-forte:  0 12px 32px -10px rgba(53,127,27,.5);
  --ombre-xs:     0 1px 2px rgba(16,26,19,.05);
  --ombre-carte:  0 12px 32px -12px rgba(16,26,19,.18), 0 2px 6px rgba(16,26,19,.05);
  --ombre-flotte: 0 26px 56px -20px rgba(16,26,19,.28), 0 4px 12px rgba(16,26,19,.06);

  /* Divers */
  --largeur: 1280px;
  --tr: 240ms cubic-bezier(.22,1,.36,1);
  --tr-lent: 620ms cubic-bezier(.22,1,.36,1);
  --header-h: 78px;
}

/* ---------------------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 2rem);
  background: var(--blanc);
}

body {
  font-family: var(--f-texte);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--txt);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--f-titre);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: var(--txt);
}

p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--vert-texte);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}

::selection { background: var(--base-vert); color: var(--vert-nuit); }

/* Barre de défilement */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--clair-100); }
::-webkit-scrollbar-thumb {
  background: var(--clair-400);
  border-radius: var(--r-full);
  border: 3px solid var(--clair-100);
}
::-webkit-scrollbar-thumb:hover { background: var(--vert-texte); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   3. UTILITAIRES
   ------------------------------------------------------------------------ */
.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.conteneur--etroit { max-width: 900px; }

.section { position: relative; padding-block: clamp(4.5rem, 10vw, 9rem); }
.section--dense { padding-block: clamp(3rem, 6vw, 5rem); }

/* Fonds de section */
.section--nuit   { background: var(--clair-100); }
.section--fonce  { background: var(--clair-50); }
.section--releve { background: var(--clair-200); }
/* Section volontairement sombre au milieu du site clair */
.section--sombre {
  background: var(--nuit-900);
  color: var(--txt-clair);
}
.section--sombre h1, .section--sombre h2,
.section--sombre h3, .section--sombre h4 { color: var(--txt-clair); }
.section--sombre .chapo,
.section--sombre p { color: var(--txt-clair-doux); }
.section--sombre .surtitre { color: var(--neon); }

/* Halo décoratif vert derrière une section */
.halo { position: relative; isolation: isolate; overflow: hidden; }
.halo::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 60vw; height: 60vw;
  max-width: 780px; max-height: 780px;
  top: -20%; right: -12%;
  background: radial-gradient(circle, rgba(110,193,65,.16) 0%, transparent 68%);
  pointer-events: none;
}
.halo--gauche::before { right: auto; left: -14%; top: auto; bottom: -22%; }

/* Grille technique en fond (rappel du quadrillage de plan) */
.trame { position: relative; isolation: isolate; }
.trame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(16,26,19,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,26,19,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%);
  pointer-events: none;
}

.saut-contenu {
  position: absolute;
  top: -200%; left: var(--e-4);
  z-index: 300;
  padding: var(--e-3) var(--e-5);
  background: var(--vert-texte);
  color: var(--blanc);
  font-weight: 700;
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.saut-contenu:focus { top: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
   4. TITRAGE
   ------------------------------------------------------------------------ */
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vert-texte);
  margin-bottom: var(--e-4);
}
.surtitre::before {
  content: "";
  width: 34px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--vert-texte));
}

.titre-section {
  font-size: var(--t-2xl);
  margin-bottom: var(--e-5);
}
.titre-section em {
  font-style: normal;
  color: var(--vert-texte);
}

.chapo {
  font-size: var(--t-md);
  color: var(--txt-doux);
  max-width: 62ch;
  line-height: 1.75;
}

.entete-section { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.entete-section--centre {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.entete-section--centre .chapo { margin-inline: auto; }

/* ---------------------------------------------------------------------------
   5. BOUTONS
   ------------------------------------------------------------------------ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: 1em 2em;
  font-family: var(--f-texte);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  transition: transform var(--tr), box-shadow var(--tr),
              background-color var(--tr), color var(--tr), border-color var(--tr);
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
}
.btn svg { width: 1.05em; height: 1.05em; flex-shrink: 0; transition: transform var(--tr); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(.97); }

/* Vert plein : le bouton principal.
   Texte très foncé sur le vert vif = 8,4:1, largement lisible. */
.btn--neon {
  background: var(--base-vert);
  color: var(--vert-nuit);
  font-weight: 700;
}
.btn--neon:hover {
  background: var(--vert-vif);
  box-shadow: var(--lueur-forte);
  transform: translateY(-2px);
}
/* Sur une section sombre, le bouton passe au vert néon. */
.hero .btn--neon,
.bloc-cta .btn--neon,
.section--sombre .btn--neon {
  background: var(--neon);
  color: var(--nuit-950);
}
.hero .btn--neon:hover,
.bloc-cta .btn--neon:hover,
.section--sombre .btn--neon:hover {
  background: var(--neon-vif);
  box-shadow: 0 0 42px -10px rgba(124,255,74,.6);
}

/* Balayage lumineux au survol */
.btn--neon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 720ms cubic-bezier(.22,1,.36,1);
}
.btn--neon:hover::after { transform: translateX(120%); }

/* Contour */
.btn--contour {
  background: transparent;
  color: var(--txt);
  border-color: var(--bord-fort);
}
.btn--contour:hover {
  border-color: var(--vert-texte);
  color: var(--vert-texte);
  background: rgba(53,127,27,.05);
  transform: translateY(-2px);
}
/* Variante pour les zones sombres */
.hero .btn--contour,
.bloc-cta .btn--contour,
.section--sombre .btn--contour {
  color: var(--txt-clair);
  border-color: var(--bord-nuit-fort);
}
.hero .btn--contour:hover,
.bloc-cta .btn--contour:hover,
.section--sombre .btn--contour:hover {
  color: var(--neon);
  border-color: var(--neon);
  background: rgba(124,255,74,.08);
}

/* Verre dépoli — utilisé sur le hero sombre */
.btn--verre {
  background: rgba(255,255,255,.1);
  color: var(--txt-clair);
  border-color: rgba(255,255,255,.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn--verre:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.5);
  transform: translateY(-2px);
}

.btn--large { padding: 1.15em 2.4em; font-size: var(--t-base); }
.btn--bloc { width: 100%; }

/* Lien fléché */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--vert-texte);
  transition: gap var(--tr), color var(--tr);
}
.lien-fleche svg { width: 1em; height: 1em; transition: transform var(--tr); }
.lien-fleche:hover { gap: var(--e-4); color: var(--vert-fonce); }
.section--sombre .lien-fleche,
.bloc-cta .lien-fleche { color: var(--neon); }
.lien-fleche:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   6. BARRE DE PROGRESSION DE LECTURE
   ------------------------------------------------------------------------ */
.progression {
  position: fixed;
  top: 0; left: 0;
  z-index: 200;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--vert-texte), var(--base-vert), var(--vert-vif));
  will-change: transform;
}

/* ---------------------------------------------------------------------------
   7. EN-TÊTE
   ------------------------------------------------------------------------ */
.bandeau {
  position: relative;
  z-index: 101;
  background: var(--nuit-900);
  border-bottom: 1px solid var(--bord-nuit);
  font-size: var(--t-xs);
  color: var(--txt-clair-tenu);
}
.bandeau .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 38px;
  flex-wrap: wrap;
}
.bandeau__liens { display: flex; align-items: center; gap: var(--e-5); }
.bandeau a {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--f-mono);
  letter-spacing: .04em;
  transition: color var(--tr);
}
.bandeau a:hover { color: var(--neon); }
.bandeau .bandeau__slogan { color: var(--txt-clair-tenu); }
.bandeau svg { width: 13px; height: 13px; }
.bandeau__slogan { display: none; font-style: italic; letter-spacing: .02em; }
@media (min-width: 960px) { .bandeau__slogan { display: block; } }

.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.entete.est-collee {
  background: rgba(255,255,255,.95);
  border-bottom-color: var(--bord);
  box-shadow: var(--ombre-xs);
}
.entete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  min-height: var(--header-h);
}

.logo { display: flex; align-items: center; gap: var(--e-3); flex-shrink: 0; }
.logo img {
  width: 46px; height: auto;
  border-radius: var(--r-sm);
  transition: box-shadow var(--tr), transform var(--tr);
}
.logo:hover img { box-shadow: var(--lueur-neon); transform: scale(1.04); }
.logo__texte { display: flex; flex-direction: column; line-height: 1.05; }
.logo__nom {
  font-family: var(--f-titre);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--txt);
}
.logo__sous {
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--txt-tenu);
}

/* Navigation */
.nav { display: none; }
@media (min-width: 1040px) {
  .nav { display: block; }
  .nav ul { display: flex; align-items: center; gap: var(--e-1); }
  .nav a {
    position: relative;
    display: block;
    padding: var(--e-2) var(--e-4);
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--txt-doux);
    border-radius: var(--r-full);
    transition: color var(--tr);
  }
  .nav a::before {
    content: "";
    position: absolute;
    left: 50%; bottom: 4px;
    width: 0; height: 2px;
    background: var(--base-vert);
    border-radius: var(--r-full);
    transform: translateX(-50%);
    transition: width var(--tr);
  }
  .nav a:hover { color: var(--txt); }
  .nav a:hover::before { width: 20px; }
  .nav a[aria-current="page"] { color: var(--vert-texte); font-weight: 600; }
  .nav a[aria-current="page"]::before { width: 20px; }
}

.entete__actions { display: flex; align-items: center; gap: var(--e-3); }
.entete__cta { display: none; }
@media (min-width: 800px) { .entete__cta { display: inline-flex; } }

/* Burger */
.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  padding: 0 11px;
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  transition: border-color var(--tr), background-color var(--tr);
}
.burger:hover { border-color: var(--vert-texte); background: var(--clair-100); }
@media (min-width: 1040px) { .burger { display: none; } }
  .burger span {
  display: block;
  height: 1.5px;
  background: var(--txt);
  border-radius: var(--r-full);
  transition: transform var(--tr), opacity var(--tr), background-color var(--tr);
}
.burger[aria-expanded="true"] span { background: var(--vert-texte); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Menu mobile */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 3rem) clamp(1.25rem,5vw,2.5rem) var(--e-7);
  background: var(--blanc);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tr), visibility var(--tr);
}
.menu-mobile.est-ouvert { opacity: 1; visibility: visible; }
@media (min-width: 1040px) { .menu-mobile { display: none; } }

.menu-mobile nav ul { display: flex; flex-direction: column; }
.menu-mobile nav li {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 420ms cubic-bezier(.22,1,.36,1), transform 420ms cubic-bezier(.22,1,.36,1);
}
.menu-mobile.est-ouvert nav li { opacity: 1; transform: none; }
.menu-mobile.est-ouvert nav li:nth-child(1) { transition-delay: 60ms; }
.menu-mobile.est-ouvert nav li:nth-child(2) { transition-delay: 110ms; }
.menu-mobile.est-ouvert nav li:nth-child(3) { transition-delay: 160ms; }
.menu-mobile.est-ouvert nav li:nth-child(4) { transition-delay: 210ms; }
.menu-mobile.est-ouvert nav li:nth-child(5) { transition-delay: 260ms; }
.menu-mobile.est-ouvert nav li:nth-child(6) { transition-delay: 310ms; }

.menu-mobile nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--e-4) 0;
  font-family: var(--f-titre);
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--txt);
  border-bottom: 1px solid var(--bord);
  transition: color var(--tr), padding-left var(--tr);
}
.menu-mobile nav a:hover { color: var(--vert-texte); padding-left: var(--e-3); }
.menu-mobile nav a svg { width: 20px; height: 20px; color: var(--vert-texte); }
.menu-mobile nav a[aria-current="page"] { color: var(--vert-texte); }
.menu-mobile__pied { margin-top: auto; padding-top: var(--e-7); display: grid; gap: var(--e-3); }

body.menu-actif { overflow: hidden; }

/* ---------------------------------------------------------------------------
   8. HERO
   ------------------------------------------------------------------------ */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(620px, 92vh, 1000px);
  padding-block: clamp(4rem, 9vw, 7rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--nuit-950);
}

.hero__media { position: absolute; inset: 0; z-index: -3; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  filter: grayscale(.55) contrast(1.1) brightness(.62);
  will-change: transform;
}

/* Voile sombre + teinte verte */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(100deg, rgba(6,10,7,.97) 0%, rgba(6,10,7,.88) 38%, rgba(6,10,7,.5) 72%, rgba(6,10,7,.7) 100%),
    radial-gradient(ellipse 65% 60% at 78% 42%, rgba(124,255,74,.2), transparent 62%);
}
/* Trame technique par-dessus */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(124,255,74,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,255,74,.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(105deg, #000 0%, transparent 62%);
  -webkit-mask-image: linear-gradient(105deg, #000 0%, transparent 62%);
  pointer-events: none;
}

.hero__contenu { max-width: 940px; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-4) var(--e-2) var(--e-3);
  margin-bottom: var(--e-6);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--neon);
  background: rgba(124,255,74,.07);
  border: 1px solid var(--bord-neon);
  border-radius: var(--r-full);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hero__badge::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--neon);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(124,255,74,.65);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(124,255,74,.6); }
  70%  { box-shadow: 0 0 0 11px rgba(124,255,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(124,255,74,0); }
}

.hero__titre {
  color: var(--txt-clair);
  font-size: var(--t-3xl);
  line-height: .96;
  letter-spacing: -.045em;
  margin-bottom: var(--e-6);
}
.hero__titre .ligne {
  display: block;
  overflow: hidden;
}
.hero__titre .ligne > span {
  display: block;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(.16,1,.3,1);
}
.est-charge .hero__titre .ligne > span { transform: none; }
.hero__titre .ligne:nth-child(2) > span { transition-delay: .1s; }
.hero__titre .ligne:nth-child(3) > span { transition-delay: .2s; }

.hero__titre em {
  font-style: normal;
  color: var(--neon);
  text-shadow: 0 0 42px rgba(124,255,74,.5);
}

.hero__texte {
  font-size: var(--t-md);
  color: var(--txt-clair-doux);
  max-width: 56ch;
  margin-bottom: var(--e-7);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s ease .45s, transform .9s cubic-bezier(.22,1,.36,1) .45s;
}
.est-charge .hero__texte { opacity: 1; transform: none; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s ease .6s, transform .9s cubic-bezier(.22,1,.36,1) .6s;
}
.est-charge .hero__actions { opacity: 1; transform: none; }

/* Bandeau de chiffres */
.hero__chiffres {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: var(--e-6);
  border-top: 1px solid var(--bord-nuit);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-6) var(--e-5);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s ease .78s, transform .9s cubic-bezier(.22,1,.36,1) .78s;
}
.est-charge .hero__chiffres { opacity: 1; transform: none; }
@media (min-width: 780px) { .hero__chiffres { grid-template-columns: repeat(4, 1fr); } }

.chiffre strong {
  display: block;
  font-family: var(--f-titre);
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--neon);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--e-2);
}
.chiffre span {
  font-size: var(--t-sm);
  color: var(--txt-clair-doux);
  line-height: 1.4;
  display: block;
}

/* Indicateur de défilement */
.defiler {
  position: absolute;
  left: 50%; bottom: var(--e-6);
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--txt-clair-tenu);
  opacity: 0;
  transition: opacity .8s ease 1.1s;
}
.est-charge .defiler { opacity: 1; }
@media (min-width: 900px) { .defiler { display: flex; } }
.defiler__rail {
  width: 1px; height: 46px;
  background: linear-gradient(var(--neon), transparent);
  position: relative;
  overflow: hidden;
}
.defiler__rail::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 40%;
  background: var(--neon);
  box-shadow: 0 0 10px var(--neon);
  animation: descend 2s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes descend {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(260%); }
}

/* ---------------------------------------------------------------------------
   9. HERO DE PAGE INTÉRIEURE
   ------------------------------------------------------------------------ */
.hero-page {
  position: relative;
  padding-block: clamp(4rem, 9vw, 7.5rem) clamp(3rem, 6vw, 5rem);
  background: var(--nuit-950);
  overflow: hidden;
  isolation: isolate;
}
.hero-page__media { position: absolute; inset: 0; z-index: -3; opacity: .3; }
.hero-page__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.7) brightness(.55);
}
.hero-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(6,10,7,.9) 0%, rgba(6,10,7,.96) 100%),
    radial-gradient(ellipse 70% 70% at 82% 20%, rgba(124,255,74,.16), transparent 60%);
}
.hero-page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(124,255,74,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,255,74,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, #000, transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 78%);
}

.hero-page h1 {
  color: var(--txt-clair);
  font-size: var(--t-2xl);
  max-width: 18ch;
  margin-bottom: var(--e-5);
  letter-spacing: -.04em;
}
.hero-page h1 em { font-style: normal; color: var(--neon); }
.hero-page > .conteneur > p {
  font-size: var(--t-md);
  color: var(--txt-clair-doux);
  max-width: 64ch;
}

/* Fil d'Ariane */
.fil {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-bottom: var(--e-6);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--txt-clair-tenu);
}
.fil a { transition: color var(--tr); }
.fil a:hover { color: var(--neon); }
.fil svg { width: 12px; height: 12px; opacity: .5; }
.fil [aria-current] { color: var(--neon); }

/* ---------------------------------------------------------------------------
   10. CARTES DE RUBRIQUE
   ------------------------------------------------------------------------ */
.grille-rubriques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: clamp(1.25rem, 2vw, 1.75rem);
}

.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.carte:hover {
  transform: translateY(-5px);
  border-color: var(--bord-neon);
  box-shadow: var(--ombre-carte);
}

/* Lueur qui suit le curseur */
.carte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%),
              rgba(110,193,65,.14), transparent 42%);
  opacity: 0;
  transition: opacity var(--tr);
  pointer-events: none;
}
.carte:hover::before { opacity: 1; }

.carte__media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--clair-200);
}
.carte__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.2);
  transition: transform var(--tr-lent), filter var(--tr-lent);
}
.carte:hover .carte__media img {
  transform: scale(1.05);
  filter: grayscale(0);
}
/* Dégradé de liaison vers le corps de la carte */
.carte__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(255,255,255,.85) 92%, var(--blanc) 100%);
}

.carte__numero {
  position: absolute;
  top: var(--e-4); left: var(--e-4);
  z-index: 2;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: var(--vert-nuit);
  padding: .3em .7em;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-full);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.carte__corps {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--e-3);
  padding: var(--e-5) var(--e-5) var(--e-6);
}
.carte__corps h3 {
  font-size: var(--t-lg);
  transition: color var(--tr);
}
.carte:hover .carte__corps h3 { color: var(--vert-texte); }
.carte__corps p {
  font-size: var(--t-sm);
  color: var(--txt-doux);
  flex: 1;
}
.carte__lien { margin-top: var(--e-2); }
.carte__lien::after { content: ""; position: absolute; inset: 0; }

/* ---------------------------------------------------------------------------
   11. PILIERS
   ------------------------------------------------------------------------ */
.grille-piliers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(1.25rem, 2vw, 1.75rem);
}

.pilier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--tr), border-color var(--tr), background-color var(--tr);
}
.pilier:hover {
  transform: translateY(-4px);
  border-color: var(--bord-neon);
  box-shadow: var(--ombre-carte);
}
/* Trait néon supérieur qui se déploie */
.pilier::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 1px; width: 0;
  background: linear-gradient(90deg, var(--base-vert), transparent);
  transition: width var(--tr-lent);
}
.pilier:hover::before { width: 100%; }

.pilier__icone {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  color: var(--vert-texte);
  background: rgba(110,193,65,.12);
  border: 1px solid var(--bord-neon);
  border-radius: var(--r-md);
  transition: box-shadow var(--tr), transform var(--tr);
}
.pilier:hover .pilier__icone {
  box-shadow: var(--lueur-neon);
}
.pilier__icone svg { width: 25px; height: 25px; }
.pilier h3 { font-size: var(--t-lg); }
.pilier p { font-size: var(--t-sm); color: var(--txt-doux); }

.pilier ul { display: grid; gap: var(--e-3); margin-top: var(--e-2); }
.pilier li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--t-sm);
  color: var(--txt-doux);
}
.pilier li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 6px; height: 6px;
  background: var(--base-vert);
  border-radius: 50%;
}

/* ---------------------------------------------------------------------------
   12. CATALOGUE PRODUITS
   ------------------------------------------------------------------------ */
.famille { scroll-margin-top: calc(var(--header-h) + 3rem); }
.famille + .famille { margin-top: clamp(4rem, 8vw, 6.5rem); }

.famille__entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-5);
  flex-wrap: wrap;
  padding-bottom: var(--e-4);
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
  border-bottom: 1px solid var(--bord);
}
.famille__entete h2 {
  font-size: var(--t-xl);
  display: flex;
  align-items: center;
  gap: var(--e-4);
}
.famille__entete h2::before {
  content: "";
  width: 4px; height: 1.1em;
  background: var(--base-vert);
  border-radius: var(--r-full);
  flex-shrink: 0;
}
.famille__compte {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-tenu);
}

.grille-produits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
  gap: clamp(1.25rem, 2vw, 1.75rem);
}

.produit {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.produit:hover {
  transform: translateY(-4px);
  border-color: var(--bord-neon);
  box-shadow: var(--ombre-carte);
}
.produit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
              rgba(110,193,65,.12), transparent 45%);
  opacity: 0;
  transition: opacity var(--tr);
  pointer-events: none;
}
.produit:hover::before { opacity: 1; }

.produit__media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: var(--e-6);
  background:
    radial-gradient(ellipse 70% 70% at 50% 100%, rgba(110,193,65,.1), transparent 62%),
    var(--clair-100);
  overflow: hidden;
}
.produit__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  transition: transform var(--tr-lent), filter var(--tr);
  filter: drop-shadow(0 14px 24px rgba(16,26,19,.22));
}

/* Photo de contexte (non détourée) : sur fond clair, son fond blanc se fond
   dans la carte. On la cadre discrètement pour qu'elle se lise comme une photo. */
.produit__media img:not([src*="/d-"]) {
  border-radius: var(--r-md);
  border: 1px solid var(--bord);
}
.produit:hover .produit__media img {
  transform: scale(1.05);
}

.produit__etiquette {
  position: absolute;
  top: var(--e-4); left: var(--e-4);
  z-index: 2;
  padding: .3em .8em;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vert-nuit);
  background: var(--base-vert);
  border-radius: var(--r-full);
  box-shadow: var(--ombre-xs);
}

.produit__corps {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--e-3);
  padding: var(--e-5);
}
.produit__corps h3 {
  font-family: var(--f-texte);
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--txt);
  transition: color var(--tr);
}
.produit:hover .produit__corps h3 { color: var(--vert-texte); }
.produit__desc { font-size: var(--t-sm); color: var(--txt-doux); flex: 1; }

.produit__specs {
  display: grid;
  gap: var(--e-2);
  padding-top: var(--e-4);
  margin-top: auto;
  border-top: 1px solid var(--bord);
}
.produit__spec { display: flex; gap: var(--e-3); align-items: baseline; font-size: var(--t-sm); }
.produit__spec dt {
  flex-shrink: 0;
  min-width: 5.6rem;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--txt-tenu);
}
.produit__spec dd { color: var(--txt-doux); margin: 0; }

.produit__pied {
  position: relative;
  z-index: 1;
  padding: var(--e-4) var(--e-5);
  border-top: 1px solid var(--bord);
  background: var(--clair-50);
}

.produit__vues {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: var(--e-2);
  padding: 0 var(--e-5) var(--e-2);
}
.produit__vues img {
  aspect-ratio: 1;
  object-fit: contain;
  padding: var(--e-2);
  background: var(--clair-100);
  border: 1px solid var(--bord);
  border-radius: var(--r-sm);
  cursor: zoom-in;
  transition: border-color var(--tr), transform var(--tr);
}
.produit__vues img:hover {
  border-color: var(--vert-texte);
  transform: scale(1.07);
}

/* --- Panneaux réglementaires --- */
.grille-panneaux {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: var(--e-4);
}
.panneau {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-5) var(--e-3);
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  text-align: center;
  transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr), background-color var(--tr);
}
.panneau:hover {
  transform: translateY(-4px);
  border-color: var(--bord-neon);
  box-shadow: var(--ombre-carte);
}
.panneau img {
  width: 66px; height: 66px;
  object-fit: contain;
  transition: transform var(--tr);
  filter: drop-shadow(0 4px 10px rgba(16,26,19,.18));
}
.panneau:hover img { transform: scale(1.09); }
.panneau__code {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--vert-texte);
  letter-spacing: .04em;
}
.panneau__libelle { font-size: var(--t-xs); color: var(--txt-tenu); line-height: 1.35; }

.sous-famille { margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.sous-famille__titre {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  margin-bottom: var(--e-5);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vert-texte);
}
.sous-famille__titre::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--bord-fort), transparent);
}

/* ---------------------------------------------------------------------------
   13. SOMMAIRE LATÉRAL
   ------------------------------------------------------------------------ */
.page-catalogue { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 1080px) {
  .page-catalogue { grid-template-columns: 240px 1fr; align-items: start; }
}

.sommaire {
  display: none;
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  padding: var(--e-5);
  background: var(--clair-50);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
}
@media (min-width: 1080px) { .sommaire { display: block; } }

.sommaire__titre {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--txt-tenu);
  margin-bottom: var(--e-4);
}
.sommaire ul { display: grid; gap: 2px; }
.sommaire a {
  position: relative;
  display: block;
  padding: var(--e-2) var(--e-3);
  font-size: var(--t-sm);
  color: var(--txt-doux);
  border-left: 2px solid var(--bord);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  transition: color var(--tr), background-color var(--tr), border-color var(--tr), padding-left var(--tr);
}
.sommaire a:hover {
  color: var(--txt);
  background: var(--clair-200);
  padding-left: var(--e-4);
}
.sommaire a.est-active {
  color: var(--vert-texte);
  font-weight: 600;
  border-left-color: var(--base-vert);
  background: rgba(110,193,65,.1);
}

/* ---------------------------------------------------------------------------
   14. BLOCS ÉDITORIAUX
   ------------------------------------------------------------------------ */
.duo { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 940px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--inverse .duo__media { order: -1; }
}

.duo__media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--bord);
  box-shadow: var(--ombre-flotte);
}
.duo__media img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  filter: grayscale(.25);
  transition: filter var(--tr-lent), transform var(--tr-lent);
}
.duo__media:hover img { filter: grayscale(0); transform: scale(1.03); }
/* Cadre néon d'angle */
.duo__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-xl);
  background:
    linear-gradient(135deg, rgba(110,193,65,.6), transparent 30%, transparent 70%, rgba(110,193,65,.35));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;   /* syntaxe Safari */
  mask-composite: exclude;        /* syntaxe standard */
  padding: 1px;
  pointer-events: none;
}

.duo__contenu p + p { margin-top: var(--e-4); }
.duo__contenu .chapo { margin-bottom: var(--e-6); }

.liste-atouts { display: grid; gap: var(--e-5); margin-top: var(--e-6); }
.liste-atouts li { display: flex; gap: var(--e-4); align-items: flex-start; }
.liste-atouts__puce {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px; height: 28px;
  margin-top: 2px;
  color: var(--blanc);
  background: var(--vert-texte);
  border-radius: 50%;
}
.liste-atouts__puce svg { width: 14px; height: 14px; }
.liste-atouts strong {
  display: block;
  color: var(--txt);
  font-weight: 600;
  margin-bottom: 3px;
}
.liste-atouts span { font-size: var(--t-sm); color: var(--txt-doux); }

/* ---------------------------------------------------------------------------
   15. RUBAN DÉFILANT
   ------------------------------------------------------------------------ */
.ruban {
  position: relative;
  padding-block: var(--e-5);
  border-block: 1px solid var(--bord);
  background: var(--clair-100);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ruban__piste {
  display: flex;
  width: max-content;
  gap: var(--e-7);
  animation: defile 42s linear infinite;
}
.ruban:hover .ruban__piste { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-50%); } }

.ruban__item {
  display: inline-flex;
  align-items: center;
  gap: var(--e-4);
  font-family: var(--f-titre);
  font-size: clamp(1.1rem, 2vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--txt-tenu);
  white-space: nowrap;
  transition: color var(--tr);
}
.ruban__item::after {
  content: "";
  width: 7px; height: 7px;
  background: var(--base-vert);
  border-radius: 50%;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .ruban__piste { animation: none; }
}

/* ---------------------------------------------------------------------------
   15b. DIAPORAMA
   ------------------------------------------------------------------------ */
.diaporama {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--bord);
  box-shadow: var(--ombre-carte);
  background: var(--clair-100);
}
.diaporama__piste {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.diaporama__piste::-webkit-scrollbar { display: none; }

.diaporama__vue {
  flex: 0 0 100%;
  scroll-snap-align: center;
  position: relative;
}
.diaporama__vue img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.diaporama__nav {
  position: absolute;
  bottom: var(--e-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  background: rgba(8,13,10,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--r-full);
}
.diaporama__point {
  width: 8px; height: 8px;
  padding: 0;
  background: rgba(255,255,255,.45);
  border: 0;
  border-radius: var(--r-full);
  transition: background-color var(--tr), width var(--tr);
}
.diaporama__point.est-active { background: var(--neon); width: 26px; }

.diaporama__fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  color: var(--txt);
  background: rgba(255,255,255,.92);
  border-radius: var(--r-full);
  box-shadow: var(--ombre-carte);
  transition: background-color var(--tr);
}
.diaporama__fleche:hover { background: var(--blanc); }
.diaporama__fleche--prec { left: var(--e-4); }
.diaporama__fleche--suiv { right: var(--e-4); }
.diaporama__fleche svg { width: 20px; height: 20px; }
@media (max-width: 640px) { .diaporama__fleche { display: none; } }

/* ---------------------------------------------------------------------------
   16. APPEL À L'ACTION
   ------------------------------------------------------------------------ */
.bloc-cta {
  position: relative;
  padding: clamp(2.5rem, 6vw, 5rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--bord-nuit);
  background:
    radial-gradient(ellipse 90% 120% at 80% 10%, rgba(124,255,74,.18), transparent 58%),
    var(--nuit-900);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.bloc-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(124,255,74,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,255,74,.05) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, #000, transparent 72%);
}
.bloc-cta h2 {
  color: var(--txt-clair);
  font-size: var(--t-2xl);
  margin-bottom: var(--e-5);
  max-width: 22ch;
  margin-inline: auto;
}
.bloc-cta h2 em { font-style: normal; color: var(--neon); }
.bloc-cta p {
  color: var(--txt-clair-doux);
  font-size: var(--t-md);
  max-width: 58ch;
  margin: 0 auto var(--e-7);
}
.bloc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  justify-content: center;
}

/* Partenaires */
.partenaires {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.partenaires img {
  height: 54px;
  width: auto;
  object-fit: contain;
  padding: var(--e-3) var(--e-4);
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  transition: border-color var(--tr), box-shadow var(--tr), transform var(--tr);
}
.partenaires a:hover img {
  border-color: var(--bord-neon);
  box-shadow: var(--ombre-carte);
  transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
   17. FORMULAIRE
   ------------------------------------------------------------------------ */
.form-contact {
  display: grid;
  gap: var(--e-7);
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--clair-50);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
}

.form-groupe { display: grid; gap: var(--e-4); border: 0; padding: 0; margin: 0; }
.form-groupe__titre {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--bord);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vert-texte);
}
.form-groupe__numero {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  font-size: .68rem;
  font-weight: 700;
  color: var(--blanc);
  background: var(--vert-texte);
  border-radius: 50%;
}

.form-lignes { display: grid; gap: var(--e-4); }
@media (min-width: 660px) {
  .form-lignes--2 { grid-template-columns: 1fr 1fr; }
  .form-lignes--3 { grid-template-columns: 1fr 1fr 1fr; }
  .form-lignes--cp { grid-template-columns: 170px 1fr; }
}

.champ { display: grid; gap: var(--e-2); }
.champ label { font-size: var(--t-sm); font-weight: 500; color: var(--txt-doux); }
.champ label .requis { color: #C0392B; margin-left: 3px; }
.champ__aide { font-size: var(--t-xs); color: var(--txt-tenu); }

.champ input[type="text"],
.champ input[type="email"],
.champ input[type="tel"],
.champ select,
.champ textarea {
  width: 100%;
  padding: .85em 1em;
  font-size: var(--t-sm);
  color: var(--txt);
  background: var(--blanc);
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-md);
  transition: border-color var(--tr), box-shadow var(--tr), background-color var(--tr);
}
.champ textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--txt-tenu); }

.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--bord-fort); }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  background: var(--blanc);
  border-color: var(--vert-texte);
  box-shadow: 0 0 0 3px rgba(53,127,27,.15);
}
.champ input[aria-invalid="true"],
.champ textarea[aria-invalid="true"],
.champ select[aria-invalid="true"] {
  border-color: #C0392B;
  box-shadow: 0 0 0 3px rgba(192,57,43,.12);
}
.champ__erreur { font-size: var(--t-xs); font-weight: 600; color: #A93226; }
.champ__erreur:empty { display: none; }

.champ select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23357F1B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 15px;
  padding-right: 2.8rem;
}
.champ select option { background: var(--blanc); color: var(--txt); }

/* Sélecteur de statut */
.segments { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
.segments input { position: absolute; opacity: 0; pointer-events: none; }
.segments label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-4) var(--e-3);
  line-height: 1.3;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--txt-doux);
  background: var(--blanc);
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: center;
  transition: all var(--tr);
}
.segments label svg { width: 20px; height: 20px; flex-shrink: 0; }
@media (min-width: 480px) {
  .segments label { flex-direction: row; padding: var(--e-4); }
  .segments label svg { width: 18px; height: 18px; }
}
.segments label:hover { border-color: var(--bord-fort); color: var(--txt); }
.segments input:checked + label {
  color: var(--vert-fonce);
  background: rgba(110,193,65,.13);
  border-color: var(--vert-texte);
  font-weight: 600;
}
.segments input:focus-visible + label { outline: 2px solid var(--vert-texte); outline-offset: 3px; }

.choix { display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-3) 0; cursor: pointer; }
.choix input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--vert-texte); flex-shrink: 0; }
.choix span { font-size: var(--t-sm); color: var(--txt-doux); }

.si-entreprise { display: grid; gap: var(--e-4); }
.form-contact[data-statut="particulier"] .si-entreprise { display: none; }

.pot-de-miel {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0; height: 0; overflow: hidden;
}

.form-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  padding-top: var(--e-5);
  border-top: 1px solid var(--bord);
}
.form-pied__mention { font-size: var(--t-xs); color: var(--txt-tenu); max-width: 46ch; }

.form-message {
  display: none;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.form-message.est-visible { display: flex; }
.form-message svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.form-message--succes {
  color: var(--vert-fonce);
  background: rgba(110,193,65,.12);
  border: 1px solid var(--bord-neon);
}
.form-message--erreur {
  color: #A93226;
  background: rgba(192,57,43,.07);
  border: 1px solid rgba(192,57,43,.28);
}

/* ---------------------------------------------------------------------------
   18. COORDONNÉES
   ------------------------------------------------------------------------ */
.bloc-coordonnees {
  display: grid;
  gap: var(--e-5);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  background:
    radial-gradient(ellipse 100% 80% at 90% 0%, rgba(124,255,74,.14), transparent 60%),
    var(--nuit-900);
  border: 1px solid var(--bord-nuit);
  border-radius: var(--r-lg);
  align-content: start;
}
.bloc-coordonnees h2 { font-size: var(--t-lg); color: var(--txt-clair); }

.coordonnee { display: flex; gap: var(--e-4); align-items: flex-start; }
.coordonnee__icone {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px; height: 42px;
  color: var(--neon);
  background: rgba(124,255,74,.09);
  border: 1px solid var(--bord-nuit-neon);
  border-radius: var(--r-md);
}
.coordonnee__icone svg { width: 18px; height: 18px; }
.coordonnee__label {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-clair-tenu);
  margin-bottom: 3px;
}
.coordonnee__valeur { font-size: var(--t-sm); color: var(--txt-clair); line-height: 1.5; }
.coordonnee__valeur a { transition: color var(--tr); }
.coordonnee__valeur a:hover { color: var(--neon); }

.carte-plan {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--bord);
  background: var(--clair-100);
}
.carte-plan iframe {
  display: block;
  width: 100%; height: 330px;
  border: 0;
}

/* ---------------------------------------------------------------------------
   19. PIED DE PAGE
   ------------------------------------------------------------------------ */
.pied {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6rem) var(--e-6);
  background: var(--nuit-900);
  border-top: 1px solid var(--bord-nuit);
  color: var(--txt-clair-doux);
  font-size: var(--t-sm);
  overflow: hidden;
}
.pied::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon), transparent);
  opacity: .5;
}

.pied__grille {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: var(--e-7);
  border-bottom: 1px solid var(--bord-nuit);
}
@media (min-width: 780px)  { .pied__grille { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 1080px) { .pied__grille { grid-template-columns: 2fr 1fr 1fr 1.3fr; } }

.pied__marque { display: grid; gap: var(--e-4); align-content: start; }
.pied__marque img { width: 54px; border-radius: var(--r-sm); }
.pied__marque p { max-width: 40ch; line-height: 1.7; color: var(--txt-clair-tenu); }

.pied h3 {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: var(--e-4);
}

.pied__liens { display: grid; gap: var(--e-3); }
.pied__liens a { transition: color var(--tr), padding-left var(--tr); }
.pied__liens a:hover { color: var(--neon); padding-left: 5px; }

.pied__contact { display: grid; gap: var(--e-4); }
.pied__contact a { display: flex; gap: var(--e-3); align-items: flex-start; transition: color var(--tr); }
.pied__contact a:hover { color: var(--neon); }
.pied__contact svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 4px; color: var(--neon); }

.pied__bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  padding-top: var(--e-5);
  border-top: 1px solid var(--bord-nuit);
  font-size: var(--t-xs);
  color: var(--txt-clair-tenu);
}
.pied__bas a:hover { color: var(--neon); }
.pied__bas nav { display: flex; gap: var(--e-5); flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   20. VISIONNEUSE
   ------------------------------------------------------------------------ */
.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 5vw, 3rem);
  background: rgba(8,13,10,.93);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tr), visibility var(--tr);
}
.visionneuse.est-ouverte { opacity: 1; visibility: visible; }
.visionneuse img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: var(--r-md);
  background: var(--blanc);
  transform: scale(.94);
  transition: transform var(--tr);
}
.visionneuse.est-ouverte img { transform: scale(1); }
.visionneuse__legende {
  margin-top: var(--e-4);
  color: var(--txt-clair-doux);
  font-size: var(--t-sm);
  text-align: center;
}
.visionneuse__fermer {
  position: absolute;
  top: var(--e-5); right: var(--e-5);
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  color: var(--txt-clair);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  transition: background-color var(--tr), border-color var(--tr), color var(--tr);
}
.visionneuse__fermer:hover { color: var(--neon); border-color: var(--neon); }
.visionneuse__fermer svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------------------
   21. RETOUR EN HAUT
   ------------------------------------------------------------------------ */
.retour-haut {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  color: var(--blanc);
  background: var(--vert-texte);
  border: 1px solid transparent;
  border-radius: 50%;
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--tr), visibility var(--tr), transform var(--tr), box-shadow var(--tr);
}
.retour-haut.est-visible { opacity: 1; visibility: visible; transform: none; }
.retour-haut:hover { box-shadow: var(--lueur-neon); }
.retour-haut svg { width: 19px; height: 19px; }

/* ---------------------------------------------------------------------------
   22. RÉVÉLATIONS AU DÉFILEMENT
   ------------------------------------------------------------------------ */
/* Visible par défaut : si le JS ne tourne pas, la page reste lisible.
   L'animation n'est armée que par la classe js-anim posée par le script. */
.anim { opacity: 1; transform: none; }

.js-anim .anim {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .85s cubic-bezier(.22,1,.36,1),
              transform .85s cubic-bezier(.22,1,.36,1);
}
.js-anim .anim.est-visible { opacity: 1; transform: none; }

.anim-2 { transition-delay: .09s; }
.anim-3 { transition-delay: .18s; }
.anim-4 { transition-delay: .27s; }
.anim-5 { transition-delay: .36s; }

/* Révélation par volet coloré */
.js-anim .revele { position: relative; overflow: hidden; }
.js-anim .revele > * { opacity: 0; transition: opacity .5s ease .45s; }
.js-anim .revele.est-visible > * { opacity: 1; }
.js-anim .revele::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--neon);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
.js-anim .revele.est-visible::after {
  animation: volet 1.1s cubic-bezier(.76,0,.24,1) forwards;
}
@keyframes volet {
  0%   { transform: scaleX(0); transform-origin: 0 50%; }
  48%  { transform: scaleX(1); transform-origin: 0 50%; }
  52%  { transform: scaleX(1); transform-origin: 100% 50%; }
  100% { transform: scaleX(0); transform-origin: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .js-anim .anim { opacity: 1; transform: none; }
  .js-anim .revele > * { opacity: 1; }
  .js-anim .revele::after { display: none; }
  .hero__titre .ligne > span,
  .hero__texte, .hero__actions, .hero__chiffres { transform: none; opacity: 1; }
}

/* ---------------------------------------------------------------------------
   24. CONFORT TACTILE (mobile / iPhone)
   ------------------------------------------------------------------------
   Apple recommande une cible d'au moins 44x44 pt. Plutôt que de grossir les
   éléments — ce qui déformerait la mise en page — on ÉTEND leur zone
   sensible avec un pseudo-élément invisible centré. L'apparence ne change
   pas, la zone cliquable oui.
   Appliqué uniquement aux pointeurs grossiers (doigt) : à la souris, les
   petites cibles ne posent aucun problème et des zones étendues qui se
   chevauchent seraient contre-productives.
   ------------------------------------------------------------------------ */
@media (pointer: coarse) {

  /* Points du diaporama : 8x8 px à l'écran, impossibles à viser au doigt.
     On étend la zone sensible autour de chacun, et on les espace pour que
     ces zones ne se recouvrent pas. */
  .diaporama__nav { gap: var(--e-4); padding: var(--e-3) var(--e-4); }
  .diaporama__point { position: relative; }
  .diaporama__point::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
  }

  /* Liens en ligne dont la hauteur de texte est inférieure au seuil */
  .lien-fleche,
  .pied__liens a,
  .pied__contact a,
  .pied__bas a,
  .bandeau a,
  .fil a,
  .coordonnee__valeur a,
  .pilier a[href^="tel:"],
  .pilier a[href^="mailto:"] {
    position: relative;
  }
  .lien-fleche::before,
  .pied__liens a::before,
  .pied__contact a::before,
  .pied__bas a::before,
  .bandeau a::before,
  .fil a::before,
  .coordonnee__valeur a::before,
  .pilier a[href^="tel:"]::before,
  .pilier a[href^="mailto:"]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 44px;
    transform: translateY(-50%);
    /* Ne capte que le toucher : n'altère ni le fond ni la sélection de texte */
    pointer-events: auto;
  }

  /* Le lien de carte couvre déjà toute la carte via ::after :
     inutile d'y superposer une seconde zone. */
  .carte__lien::before { display: none; }

  /* Espacement vertical des listes de liens du pied : sans quoi les zones
     de 44 px se chevaucheraient et le doigt activerait le mauvais lien. */
  .pied__liens { gap: var(--e-4); }
  .pied__bas nav { gap: var(--e-6); row-gap: var(--e-4); }
  .bandeau__liens { gap: var(--e-6); }

  /* Le logo doit rester confortablement atteignable */
  .logo { min-height: 44px; }

  /* Champs de formulaire : 16px minimum empêche iOS de zoomer au focus.
     C'est LE réflexe iPhone : sous 16px, Safari agrandit la page à chaque
     entrée dans un champ et l'utilisateur doit dézoomer à la main. */
  .champ input[type="text"],
  .champ input[type="email"],
  .champ input[type="tel"],
  .champ select,
  .champ textarea {
    font-size: 16px;
  }

  /* Cases à cocher et boutons radio : cible confortable */
  .choix { min-height: 44px; align-items: center; }
  .choix input { width: 22px; height: 22px; }
}

/* ---------------------------------------------------------------------------
   25. ZONES SÛRES (iPhone à encoche / Dynamic Island)
   ------------------------------------------------------------------------
   En paysage, l'encoche mange le bord gauche ou droit de l'écran. Sans ces
   marges, le texte du bandeau et le premier caractère des titres passent
   dessous. `env()` vaut 0 sur les appareils sans encoche : aucune incidence.
   ------------------------------------------------------------------------ */
.conteneur {
  padding-left: max(clamp(1.25rem, 4vw, 3rem), env(safe-area-inset-left));
  padding-right: max(clamp(1.25rem, 4vw, 3rem), env(safe-area-inset-right));
}
.menu-mobile {
  padding-left: max(clamp(1.25rem, 5vw, 2.5rem), env(safe-area-inset-left));
  padding-right: max(clamp(1.25rem, 5vw, 2.5rem), env(safe-area-inset-right));
  padding-bottom: max(var(--e-7), env(safe-area-inset-bottom));
}
/* Le bouton flottant ne doit pas chevaucher la barre d'accueil iOS */
.retour-haut {
  bottom: max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-bottom));
  right: max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-right));
}

/* ---------------------------------------------------------------------------
   26. LISIBILITÉ SUR PETIT ÉCRAN
   ------------------------------------------------------------------------
   Certains libellés secondaires descendent à ~10,9 px, ce qui passe sur un
   écran de bureau mais devient pénible à lire sur un téléphone tenu à bout
   de bras. On les remonte à 12 px minimum sous 480 px de large.
   ------------------------------------------------------------------------ */
@media (max-width: 480px) {
  .produit__spec dt {
    font-size: 0.75rem;      /* 12px au lieu de 10,88 */
    letter-spacing: .06em;   /* on resserre pour compenser la largeur gagnée */
    min-width: 5rem;
  }
  .logo__sous {
    font-size: 0.68rem;      /* ~11px au lieu de 9,6 */
    letter-spacing: .2em;
  }
  .panneau__libelle,
  .champ__aide,
  .form-pied__mention,
  .pied__bas {
    font-size: 0.8rem;
  }
  /* Les spécifications passent en pile : sur 375px, un libellé de 5rem plus
     sa valeur laissait trop peu de place à cette dernière. */
  .produit__spec {
    flex-direction: column;
    gap: 2px;
  }
}

/* ---------------------------------------------------------------------------
   27. IMPRESSION
   ------------------------------------------------------------------------ */
@media print {
  .bandeau, .entete, .menu-mobile, .retour-haut, .burger, .progression,
  .ruban, .defiler, .bloc-cta { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  h1,h2,h3,h4 { color: #000 !important; }
  .hero, .hero-page, .bloc-coordonnees, .pied {
    background: #fff !important;
    color: #000 !important;
    padding-block: 1rem;
  }
  .hero__titre, .hero-page h1, .bloc-coordonnees h2,
  .coordonnee__valeur, .coordonnee__label { color: #000 !important; }
  .produit, .carte, .pilier, .panneau {
    background: #fff !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }
  .produit__desc, .chapo, p, .hero__texte { color: #222 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}