/* ═══════════════════════════════════════════════════════════════════
   L'établ'IA — Design System V5 (refonte 2026-05-04)
   « Atelier d'artisan numérique » poussé à fond
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Palette historique V4 — ne pas toucher */
  --chene:    #8A7560;
  --pierre:   #B8AFA6;
  --mousse:   #6B7C5F;
  --lin:      #F2EDE8;
  --ebene:    #2C2825;

  /* Surfaces dérivées */
  --kraft:    #E9DDC8;       /* papier kraft */
  --kraft-2:  #DFD0B6;       /* kraft plus marqué */
  --parchemin:#FAF6EE;       /* fiche d'atelier claire */
  --encre:    #1B1815;       /* noir d'encre profond */

  /* Accents matières premières — UNE famille = UNE matière */
  --bronze:   oklch(62% 0.10 60);    /* automatiser — métal travaillé */
  --lapis:    oklch(45% 0.10 250);   /* piloter — pierre lapis */
  --cuivre:   oklch(58% 0.12 35);    /* vendre — cuivre */
  --argile:   oklch(55% 0.08 25);    /* produire — terre cuite */
  --sauge:    oklch(58% 0.06 140);   /* sécuriser — vert sauge */
  --ciel:     oklch(85% 0.04 230);   /* accent doux */

  /* Alpha */
  --chene-6:  rgba(138,117,96,0.06);
  --chene-10: rgba(138,117,96,0.10);
  --chene-15: rgba(138,117,96,0.15);
  --chene-25: rgba(138,117,96,0.25);
  --pierre-30:rgba(184,175,166,0.30);
  --mousse-10:rgba(107,124,95,0.10);
  --ebene-80: rgba(44,40,37,0.80);
  --ebene-08: rgba(44,40,37,0.08);

  /* Type */
  --ff-display: 'Playfair Display', Georgia, serif;
  --ff-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-mono:    'JetBrains Mono', Consolas, monospace;
  --ff-hand:    'Caveat', 'Playfair Display', cursive;

  /* Géométrie */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 16px;

  /* Container */
  --maxw: 1280px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--ff-body);
  background:var(--lin);
  color:var(--ebene);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Texture papier kraft globale, très subtile, en overlay
   (couches de bruit générées en SVG inline pour éviter assets externes) */
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.35;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.54 0 0 0 0 0.46 0 0 0 0 0.38 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
main, header, footer, section{position:relative;z-index:1}

/* === TYPOGRAPHIE ============================================ */
h1,h2,h3,h4{font-family:var(--ff-display);letter-spacing:-0.02em;color:var(--ebene);margin:0}
h1{font-weight:700;font-size:clamp(2.4rem,5vw,4rem);line-height:1.04}
h2{font-weight:700;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.1}
h3{font-weight:600;font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.25}
.font-mono{font-family:var(--ff-mono)}
.font-hand{font-family:var(--ff-hand);font-weight:500}
.font-display{font-family:var(--ff-display)}
em.editorial{font-family:var(--ff-display);font-style:italic;color:var(--chene)}

a{color:inherit}

/* === ÉTIQUETTES ATELIER ===================================== */
.tag-atelier{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--ff-mono);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--chene);
}
.tag-atelier::before{
  content:"";width:18px;height:1px;background:currentColor;
}
.tag-numero{
  font-family:var(--ff-mono);font-size:11px;font-weight:500;
  letter-spacing:.12em;color:var(--chene);
}

/* Étiquette ficelée — un petit cartouche avec encoches latérales */
.etiquette{
  position:relative;display:inline-flex;align-items:center;
  background:var(--parchemin);
  border:1px solid var(--chene-25);
  padding:6px 14px 6px 22px;
  font-family:var(--ff-mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ebene);
}
.etiquette::before{
  content:"";position:absolute;left:6px;top:50%;
  width:8px;height:8px;border-radius:50%;
  background:var(--lin);
  border:1px solid var(--chene);
  transform:translateY(-50%);
}

/* === BOUTONS =================================================== */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--ff-body);font-weight:600;font-size:15px;
  padding:14px 22px;border-radius:var(--r-md);
  text-decoration:none;cursor:pointer;border:none;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--ebene);color:var(--lin);box-shadow:0 2px 0 var(--chene)}
.btn-primary:hover{background:var(--encre);box-shadow:0 3px 0 var(--chene)}
.btn-mousse{background:var(--mousse);color:var(--lin);box-shadow:0 2px 0 rgba(0,0,0,.15)}
.btn-mousse:hover{background:#5d6d52}
.btn-ghost{background:transparent;color:var(--ebene);border:1.5px solid var(--ebene)}
.btn-ghost:hover{background:var(--ebene);color:var(--lin)}
.btn-link{
  font-family:var(--ff-body);font-weight:600;color:var(--ebene);
  text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;
  border-bottom:1.5px solid var(--ebene);padding-bottom:2px;
  transition:color .15s, border-color .15s, gap .2s;
}
.btn-link:hover{color:var(--chene);border-color:var(--chene);gap:.7rem}

/* === LIGNES TECHNIQUES (plans cotés) =========================== */
.cote{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--ff-mono);font-size:11px;color:var(--chene);
  letter-spacing:.1em;
}
.cote-line{
  flex:1;height:1px;
  background-image:linear-gradient(to right,var(--chene-25) 60%,transparent 60%);
  background-size:6px 1px;
}
.rule-double{border:none;height:4px;background:
  linear-gradient(var(--chene),var(--chene)) 0 0 / 100% 1px no-repeat,
  linear-gradient(var(--chene),var(--chene)) 0 100% / 100% 1px no-repeat;}

/* === HEADER ==================================================== */
.le-header{
  position:sticky;top:0;z-index:40;
  background:var(--lin);
  border-bottom:1px solid var(--chene-25);
  height:76px;
  backdrop-filter:saturate(1.1);
}
.le-header-row{
  max-width:var(--maxw);margin:0 auto;height:100%;
  padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.le-logo{
  font-family:var(--ff-display);font-size:1.55rem;font-weight:700;
  color:var(--encre);text-decoration:none;letter-spacing:-0.01em;
  display:flex;align-items:center;gap:.6rem;
}
.le-logo::before{
  content:"";width:14px;height:14px;
  background:var(--chene);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.le-logo small{font-family:var(--ff-mono);font-size:10px;letter-spacing:.18em;
  color:var(--chene);text-transform:uppercase;font-weight:500;margin-left:.3rem}
.le-nav{display:flex;align-items:center;gap:28px}
.le-nav a{
  font-size:15px;color:var(--ebene);text-decoration:none;
  position:relative;padding:6px 0;
}
.le-nav a:hover{color:var(--chene)}
.le-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--chene);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.le-nav a:hover::after{transform:scaleX(1)}
.le-nav .has-menu{position:relative}
.le-nav .has-menu > a{cursor:pointer;display:flex;align-items:center;gap:.3rem}
.le-dropdown{
  position:absolute;top:calc(100% + 8px);left:-12px;
  background:var(--parchemin);border:1px solid var(--chene-25);
  border-radius:var(--r-md);padding:8px;
  min-width:280px;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  box-shadow:0 12px 24px rgba(44,40,37,.10);
}
.has-menu:hover .le-dropdown,
.has-menu:focus-within .le-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.le-dropdown a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:var(--r-sm);font-size:14px;color:var(--ebene);
  text-decoration:none;
}
.le-dropdown a:hover{background:var(--chene-10)}
.le-dropdown a::after{display:none}
.le-dropdown .fam-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
}
.le-actions{display:flex;align-items:center;gap:14px}
.le-search-btn{
  background:none;border:1px solid var(--chene-25);
  width:38px;height:38px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--chene);transition:background .15s, color .15s;
}
.le-search-btn:hover{background:var(--chene-10);color:var(--ebene)}
.le-burger{
  display:none;background:none;border:none;cursor:pointer;
  width:40px;height:40px;flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.le-burger span{width:22px;height:2px;background:var(--ebene);display:block}

@media (max-width:880px){
  .le-nav,.le-actions .btn,.le-search-btn{display:none}
  .le-burger{display:flex}
  .le-header{height:64px}
}

/* Mobile menu */
.le-mobile{
  position:fixed;inset:0;z-index:50;background:var(--lin);
  display:none;flex-direction:column;padding:80px 32px 40px;
}
.le-mobile.open{display:flex}
.le-mobile-close{
  position:absolute;top:16px;right:16px;background:none;border:none;
  font-size:32px;cursor:pointer;color:var(--ebene);
}
.le-mobile a{
  font-family:var(--ff-display);font-size:24px;color:var(--ebene);
  text-decoration:none;padding:14px 0;border-bottom:1px dashed var(--chene-25);
}

/* === FOOTER ==================================================== */
.le-footer{
  background:var(--encre);color:var(--lin);
  margin-top:80px;
  position:relative;
}
.le-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:repeating-linear-gradient(90deg,
    var(--chene) 0 16px, transparent 16px 32px);
}
.le-footer-grid{
  max-width:var(--maxw);margin:0 auto;padding:64px 24px 24px;
  display:grid;gap:48px;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
}
.le-footer h4{
  font-family:var(--ff-mono);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--chene);margin-bottom:18px;
}
.le-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.le-footer a{color:var(--lin);text-decoration:none;font-size:15px;opacity:.85}
.le-footer a:hover{color:var(--chene);opacity:1}
.le-footer-brand p{color:var(--pierre);font-size:14px;margin:8px 0 0;max-width:34ch;line-height:1.6}
.le-footer-brand .le-logo{color:var(--lin)}
.le-footer-brand .le-logo::before{background:var(--chene)}
.le-footer-bottom{
  max-width:var(--maxw);margin:0 auto;padding:24px;
  border-top:1px solid rgba(184,175,166,.15);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-size:12px;color:var(--pierre);font-family:var(--ff-mono);letter-spacing:.05em;
}
@media (max-width:880px){
  .le-footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:560px){
  .le-footer-grid{grid-template-columns:1fr}
}

/* === UTILITAIRES =============================================== */
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.container-narrow{max-width:880px;margin:0 auto;padding:0 24px}
.section{padding:96px 0}
.section-sm{padding:64px 0}
@media (max-width:880px){.section{padding:64px 0}.section-sm{padding:40px 0}}

.surface-kraft{background:var(--kraft)}
.surface-kraft-2{background:var(--kraft-2)}
.surface-parchemin{background:var(--parchemin)}
.surface-ebene{background:var(--encre);color:var(--lin)}
.surface-ebene h1,.surface-ebene h2,.surface-ebene h3{color:var(--lin)}

/* === GRILLE / RYTHME ============================================ */
.grid-rule{
  background-image:
    linear-gradient(to right,var(--chene-15) 1px,transparent 1px);
  background-size:80px 100%;
}

/* === SCROLL REVEAL =============================================== */
[data-reveal]{
  opacity:0;transform:translateY(24px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].in{opacity:1;transform:translateY(0)}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}

/* === MARQUEE ======================================================= */
.marquee{
  overflow:hidden;
  border-top:1px solid var(--chene-25);border-bottom:1px solid var(--chene-25);
  background:var(--parchemin);
}
.marquee-track{
  display:flex;gap:48px;padding:14px 0;
  animation:marquee 50s linear infinite;
  width:max-content;
}
.marquee-item{
  font-family:var(--ff-mono);font-size:13px;letter-spacing:.1em;
  color:var(--chene);display:inline-flex;align-items:center;gap:14px;white-space:nowrap;
}
.marquee-item::after{content:"✦";color:var(--chene-25);margin-left:48px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* === FAMILLES couleurs ============================================== */
.fam-automatiser{--fam:var(--bronze)}
.fam-vendre{--fam:var(--cuivre)}
.fam-piloter{--fam:var(--lapis)}
.fam-produire{--fam:var(--argile)}
.fam-securiser{--fam:var(--sauge)}
.fam-dot.fam-automatiser{background:var(--bronze)}
.fam-dot.fam-vendre{background:var(--cuivre)}
.fam-dot.fam-piloter{background:var(--lapis)}
.fam-dot.fam-produire{background:var(--argile)}
.fam-dot.fam-securiser{background:var(--sauge)}

/* === CARDS PRODUIT ================================================= */
.card-produit{
  background:var(--parchemin);
  border:1px solid var(--chene-25);
  border-radius:var(--r-md);
  padding:24px;
  display:flex;flex-direction:column;gap:14px;
  text-decoration:none;color:inherit;
  position:relative;overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), border-color .2s, box-shadow .25s;
}
.card-produit:hover{
  transform:translateY(-3px);
  border-color:var(--chene);
  box-shadow:0 16px 32px -16px rgba(44,40,37,.18);
}
.card-produit::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--fam,var(--chene));
}
.card-produit .num{
  font-family:var(--ff-mono);font-size:11px;color:var(--chene);
  letter-spacing:.12em;
}
.card-produit h3{font-size:1.4rem}
.card-produit .blurb{
  color:var(--ebene-80);font-size:14px;line-height:1.55;flex:1;
}
.card-produit .meta{
  display:flex;justify-content:space-between;align-items:flex-end;gap:14px;
  padding-top:14px;border-top:1px dashed var(--chene-25);
}
.card-produit .price{
  font-family:var(--ff-mono);font-weight:600;font-size:1.25rem;color:var(--ebene);
}
.card-produit .arrow{
  width:32px;height:32px;border-radius:50%;
  background:var(--chene-10);display:flex;align-items:center;justify-content:center;
  transition:background .2s, transform .25s;
  color:var(--chene);
}
.card-produit:hover .arrow{background:var(--chene);color:var(--lin);transform:translateX(3px)}
.card-produit .tools{
  display:flex;gap:6px;flex-wrap:wrap;
}
.card-produit .tool{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.06em;
  color:var(--chene);background:var(--chene-10);
  padding:2px 8px;border-radius:99px;
}

/* === BREADCRUMB ==================================================== */
.breadcrumb{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;
  color:var(--chene);text-transform:uppercase;display:flex;gap:10px;align-items:center;
  padding:14px 0;border-bottom:1px dashed var(--chene-25);
}
.breadcrumb a{color:var(--chene);text-decoration:none}
.breadcrumb a:hover{color:var(--ebene)}
.breadcrumb .sep::before{content:"/";color:var(--chene-25)}
.breadcrumb .current{color:var(--ebene)}

/* === FORM ========================================================== */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.field label{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chene);
}
.field input,.field textarea,.field select{
  font-family:var(--ff-body);font-size:15px;
  padding:12px 14px;background:var(--parchemin);
  border:1px solid var(--chene-25);border-radius:var(--r-sm);
  color:var(--ebene);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:2px solid var(--mousse);outline-offset:1px;border-color:var(--mousse);
}

/* === SELECTION =================================================== */
::selection{background:var(--chene);color:var(--lin)}

/* === BADGE DURÉE INSTALLATION ===================================== */
.badge-duree {
  display: inline-block;
  background: var(--couleur-mousse, #6B7C5C);
  color: var(--couleur-lin, #F2EDE4);
  padding: 4px 10px;
  border-radius: 12px;
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   MODE LUMIÈRE DE L'ÉTABLI — THEME TOGGLE jour/nuit
   AMELIO-SITE-L3-5-MODE-LUMIERE-NUIT
   ═══════════════════════════════════════════════════════════════════ */

/* --- Bouton toggle ------------------------------------------------ */
.le-theme-btn{
  background:none;border:1px solid var(--chene-25);
  width:38px;height:38px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--chene);flex-shrink:0;
}
.le-theme-btn:hover{background:var(--chene-10);color:var(--ebene)}
.le-theme-btn:focus-visible{outline:2px solid var(--mousse);outline-offset:2px}
/* Soleil visible par défaut, lune cachée */
.le-theme-btn .icon-moon{display:none}
.le-theme-btn .icon-sun{display:block}
/* Mode nuit : inverser */
[data-theme="dark"] .le-theme-btn .icon-moon{display:block}
[data-theme="dark"] .le-theme-btn .icon-sun{display:none}

/* --- Transitions : activées UNIQUEMENT après init JS (anti-FOUC) - */
.theme-ready,
.theme-ready body{
  transition:background .3s ease, color .3s ease;
}
.theme-ready .le-header,
.theme-ready .le-mobile,
.theme-ready .le-dropdown,
.theme-ready .card-produit,
.theme-ready .le-footer,
.theme-ready .marquee,
.theme-ready .field input,
.theme-ready .field textarea,
.theme-ready .field select{
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.theme-ready .btn-primary,
.theme-ready .btn-ghost,
.theme-ready .btn-mousse{
  transition:background .3s ease, color .3s ease, box-shadow .3s ease, transform .15s ease;
}

/* --- Mode nuit : variables overrides ------------------------------ */
[data-theme="dark"]{
  /* Surfaces : ébène comme fond, lin atténué comme texte */
  --lin:       #2C2825;   /* fond principal = ébène */
  --ebene:     #E8DFC9;   /* texte principal = lin atténué */
  --parchemin: #352E29;   /* cartes, surfaces légères */
  --kraft:     #3A3229;   /* kraft sombre */
  --kraft-2:   #302820;   /* kraft-2 sombre */

  /* Alpha recalculés pour fond sombre */
  --chene-6:   rgba(138,117,96,0.08);
  --chene-10:  rgba(138,117,96,0.16);
  --chene-15:  rgba(138,117,96,0.22);
  --chene-25:  rgba(138,117,96,0.32);
  --pierre-30: rgba(184,175,166,0.12);
  --mousse-10: rgba(107,124,95,0.18);
  --ebene-80:  rgba(232,223,201,0.80);
  --ebene-08:  rgba(232,223,201,0.08);
}

/* Logo : le code couleur encre (#1B1815) devient illisible sur fond sombre */
[data-theme="dark"] .le-logo{color:var(--ebene)}
[data-theme="dark"] .le-logo::before{background:var(--chene)}

/* Footer : déjà sombre, restaurer les couleurs claires */
[data-theme="dark"] .le-footer{
  --lin:    #E8DFC9;
  --ebene:  #E8DFC9;
  --pierre: #B8AFA6;
}
[data-theme="dark"] .le-footer-brand .le-logo{color:#E8DFC9}

/* surface-ebene (sections sur fond ébène) : déjà sombres, conserver */
[data-theme="dark"] .surface-ebene{
  --lin: #E8DFC9;
}

/* Texture fond : légèrement réduite en mode nuit */
[data-theme="dark"] body::before{opacity:.15}

/* Bouton primary en mode nuit */
[data-theme="dark"] .btn-primary{
  background:var(--chene);color:#FAF6EE;
  box-shadow:0 2px 0 rgba(0,0,0,.35);
}
[data-theme="dark"] .btn-primary:hover{
  background:#9d8870;box-shadow:0 3px 0 rgba(0,0,0,.35);
}

/* Bouton ghost en mode nuit */
[data-theme="dark"] .btn-ghost{color:var(--ebene);border-color:var(--ebene)}
[data-theme="dark"] .btn-ghost:hover{background:var(--ebene);color:#2C2825}

/* Sélection de texte */
[data-theme="dark"] ::selection{background:var(--chene);color:#FAF6EE}

/* Formulaires */
[data-theme="dark"] .field input,
[data-theme="dark"] .field textarea,
[data-theme="dark"] .field select{
  background:var(--parchemin);color:var(--ebene);
  border-color:var(--chene-25);
}

/* ═══════════════════════════════════════════════════════════════════
   MICRO-ANIMATIONS CSS SUBTILES — L3-4-MICRO-ANIMATIONS-CSS
   Animations légères et imperceptibles pour meilleure UX
   ═══════════════════════════════════════════════════════════════════ */

/* --- KEYFRAMES ---------------------------------------------------- */

/* Underline qui "tire" du left vers le right */
@keyframes tire-trait {
  from {
    width: 0;
    left: 0;
  }
  to {
    width: 100%;
    left: 0;
  }
}

/* --- 1. CTA PRIMARY BUTTON HOVER ---------------------------------- */
/* Rotation 0.5deg + lift (translateY -1px) */
.btn-primary,
button.primary,
a.btn-primary {
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover,
button.primary:hover,
a.btn-primary:hover {
  transform: translateY(-1px) rotate(0.5deg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-primary:active,
button.primary:active,
a.btn-primary:active {
  transform: translateY(0) rotate(0deg);
}

/* --- 2. PRODUCT CARDS HOVER --------------------------------------- */
/* Shadow légère + lift (translateY -4px) */
.product-card,
.card-product,
.card-produit,
[class*="card"][class*="product"] {
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.product-card:hover,
.card-product:hover,
.card-produit:hover,
[class*="card"][class*="product"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* --- 3. SECTION TITLES H2 - TIRE-TRAIT ANIMATION ------------------- */
/* Underline qui "tire" au viewport entry (Intersection Observer) */
h2,
.h2,
[class*="title"] h2 {
  position: relative;
  padding-bottom: 0.5em;
}

h2::after,
.h2::after,
[class*="title"] h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.3s ease;
}

/* État activé: l'underline apparaît complètement */
h2.animated::after,
.h2.animated::after,
[class*="title"] h2.animated::after {
  animation: tire-trait 0.3s ease forwards;
}

/* --- 4. LOGO HOVER - 3D TILT -------------------------------------- */
/* Tilt 3D subtil (rotateX 5deg + rotateY -2deg) */
.logo,
.site-logo,
[class*="logo"] {
  position: relative;
  transition: transform 0.25s ease;
  transform-style: preserve-3d;
}

.logo:hover,
.site-logo:hover,
[class*="logo"]:hover {
  transform: rotateX(5deg) rotateY(-2deg);
}

/* ═══════════════════════════════════════════════════════════════════
   ACCESSIBILITY — prefers-reduced-motion: reduce
   Désactiver toutes les animations pour utilisateurs préférant moins
   de mouvement
   ═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  /* Désactiver animations CTA Button */
  .btn-primary,
  button.primary,
  a.btn-primary {
    transition: none;
  }

  .btn-primary:hover,
  button.primary:hover,
  a.btn-primary:hover {
    transform: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  /* Désactiver animations Product Cards */
  .product-card,
  .card-product,
  .card-produit,
  [class*="card"][class*="product"] {
    transition: none;
  }

  .product-card:hover,
  .card-product:hover,
  .card-produit:hover,
  [class*="card"][class*="product"]:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  /* Désactiver animations H2 tire-trait */
  h2::after,
  .h2::after,
  [class*="title"] h2::after {
    transition: none;
  }

  h2.animated::after,
  .h2.animated::after,
  [class*="title"] h2.animated::after {
    animation: none;
    width: 100%;
  }

  /* Désactiver animations Logo */
  .logo,
  .site-logo,
  [class*="logo"] {
    transition: none;
  }

  .logo:hover,
  .site-logo:hover,
  [class*="logo"]:hover {
    transform: none;
  }
}