/* ═══════════════════════════════════════════════
   CHORBANE v18 — v18.css
   Animations reconstruites · GPU-only · Premium
   Source unique — écrase tous les conflits
   ═══════════════════════════════════════════════ */

:root {
  --ease-spring: cubic-bezier(.16, 1, .3, 1);
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-gpu:    cubic-bezier(.2, .6, .4, 1);
  --anim-dur:    .9s;
  --anim-dur-sm: .65s;
}

/* ═══════════════════════════════════════════════
   RESET — Annuler TOUS les conflits d'animation
   provenant de depth.css / premium.css / v1x.css
   ═══════════════════════════════════════════════ */

/* Tuer l'héritage de "transition: all" partout */
*, *::before, *::after {
  box-sizing: border-box;
  /* Aucune transition par défaut — on déclare explicitement */
  transition-property: opacity, transform, background-color, color,
                       border-color, box-shadow !important;
}

/* Désactiver les particules canvas hero (trop lourdes) */
#accueil > canvas { display: none !important; }

/* ═══════════════════════════════════════════════
   ÉLÉMENTS CACHÉS AVANT REVEAL
   Propriétés initiales — GPU-only
   ═══════════════════════════════════════════════ */

/* Montée verticale (la plus courante) */
.ai, .fu {
  opacity: 0;
  transform: translateY(16px) translateZ(0);
}

/* Entrée gauche */
.fl {
  opacity: 0;
  transform: translateX(-16px) translateZ(0);
}

/* Entrée droite */
.fr {
  opacity: 0;
  transform: translateX(16px) translateZ(0);
}

/* Trust band items */
.trust-item {
  opacity: 0;
  transform: translateY(8px) translateZ(0);
}

/* ═══════════════════════════════════════════════
   TRANSITIONS — déclenchées par .in
   Spécifiques, rapides, naturelles
   ═══════════════════════════════════════════════ */

.ai, .fu,
.fl,
.fr {
  transition:
    opacity  var(--anim-dur) var(--ease-spring),
    transform var(--anim-dur) var(--ease-spring) !important;
  transition-delay: var(--d, 0s) !important;
}

.trust-item {
  transition:
    opacity  .6s var(--ease-spring),
    transform .6s var(--ease-spring) !important;
  transition-delay: var(--d, 0s) !important;
}

/* État final — visible, en place */
.ai.in, .fu.in,
.fl.in,
.fr.in,
.trust-item.in {
  opacity: 1;
  transform: translateY(0) translateZ(0);
}

/* ═══════════════════════════════════════════════
   HERO ELEMENTS — fade + montée staggerée
   Les delays sont définis en HTML via style="--d:Xs"
   ═══════════════════════════════════════════════ */

[class*="-eyebrow"],
[class*="-title"],
[class*="-sub"],
.hero-origin,
[class*="-bottle-zone"],
[class*="-btns"],
[class*="-stats"] {
  opacity: 0;
  transform: translateY(14px) translateZ(0);
  transition:
    opacity  1s var(--ease-spring),
    transform 1s var(--ease-spring) !important;
}

/* Delays intégrés dans la cascade CSS */
[class*="-eyebrow"]    { transition-delay: .08s !important; }
[class*="-title"]      { transition-delay: .26s !important; }
[class*="-sub"]        { transition-delay: .44s !important; }
.hero-origin           { transition-delay: .58s !important; }
[class*="-bottle-zone"] { transition-delay: .68s !important; }
[class*="-btns"]       { transition-delay: .84s !important; }
[class*="-stats"]      { transition-delay: 1.00s !important; }

/* État final hero */
[class*="-eyebrow"].in,
[class*="-title"].in,
[class*="-sub"].in,
.hero-origin.in,
[class*="-bottle-zone"].in,
[class*="-btns"].in,
[class*="-stats"].in {
  opacity: 1;
  transform: translateY(0) translateZ(0);
}

/* ═══════════════════════════════════════════════
   ANIMATIONS CONTINUES — GPU-only keyframes
   translateZ(0) forcé sur chaque frame
   ═══════════════════════════════════════════════ */

@keyframes bottleFloat {
  0%, 100% { transform: translateY(0)    translateZ(0); }
  50%       { transform: translateY(-9px) translateZ(0); }
}
@keyframes haloBreath {
  0%, 100% { opacity: .56; transform: scale(1)    translateZ(0); }
  50%       { opacity: .9;  transform: scale(1.08) translateZ(0); }
}
@keyframes gpulse {
  0%, 100% { opacity: .28; transform: scale(1)   translateZ(0); }
  50%       { opacity: .72; transform: scale(1.1) translateZ(0); }
}
@keyframes hdcAmberDrift {
  0%, 100% { transform: translate(0,0)       scale(1)    translateZ(0); }
  33%       { transform: translate(-16px,20px) scale(1.05) translateZ(0); }
  66%       { transform: translate(12px,-14px) scale(.96)  translateZ(0); }
}
@keyframes hdcBeamSweep {
  0%, 100% { opacity: 1;  transform: rotate(0deg)                translateZ(0); }
  50%       { opacity: .6; transform: rotate(1.4deg) translateX(18px) translateZ(0); }
}
@keyframes scrollPulse {
  0%, 100% { opacity: .24; transform: translateX(-50%) translateY(0); }
  50%       { opacity: .50; transform: translateX(-50%) translateY(4px); }
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(5px) translateZ(0); }
  to   { opacity: 1; transform: translateY(0)   translateZ(0); }
}
@keyframes wowDividerIn {
  from { transform: scaleX(0) translateZ(0); }
  to   { transform: scaleX(1) translateZ(0); }
}
@keyframes skeletonShimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Page fade-in ─────────────────────────────── */
body.page-leaving {
  opacity: 0;
  transition: opacity .22s ease !important;
}
.page-wrap {
  animation: pageFadeIn .55s var(--ease-spring) both;
}

/* ── Wow dividers ─────────────────────────────── */
.wow-divider {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--bd-card) 18%,
    var(--bd-card) 82%,
    transparent 100%
  );
  transform: scaleX(0) translateZ(0);
  transform-origin: left;
}
.wow-divider.wow-divider--in {
  transform: scaleX(1) translateZ(0);
  transition: transform .85s var(--ease-spring) !important;
}

/* ═══════════════════════════════════════════════
   MICRO-INTERACTIONS — hover premium
   Transitions courtes, naturelles, GPU-safe
   ═══════════════════════════════════════════════ */

/* Nav links — underline scale */
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -.12rem; left: 0;
  width: 100%; height: 1px;
  background: var(--g-300);
  transform: scaleX(0) translateZ(0);
  transform-origin: left;
  transition: transform .3s var(--ease-spring) !important;
}
.nav-links a { position: relative; }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1) translateZ(0); }

/* Btn primary — lift + shimmer */
.btn-primary {
  position: relative;
  overflow: hidden;
  transition:
    background-color .3s var(--ease-gpu),
    transform .3s var(--ease-spring),
    box-shadow .3s var(--ease-gpu) !important;
  will-change: auto;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,.06) 50%,
    transparent 70%
  );
  transform: translateX(-100%) translateZ(0);
  transition: transform .55s var(--ease-out) !important;
}
.btn-primary:hover {
  transform: translateY(-3px) translateZ(0);
  box-shadow: 0 10px 28px rgba(32,58,22,.42);
}
.btn-primary:hover::after { transform: translateX(100%) translateZ(0); }
.btn-primary:active { transform: translateY(-1px) translateZ(0); }

/* Btn ghost */
.btn-ghost {
  transition:
    color .25s var(--ease-gpu),
    border-color .25s var(--ease-gpu),
    transform .28s var(--ease-spring) !important;
}
.btn-ghost:hover { transform: translateY(-2px) translateZ(0); }

/* Cards — lift doux */
.pi, .medal, .medal-card {
  transition:
    transform .38s var(--ease-spring),
    box-shadow .38s var(--ease-gpu),
    border-color .28s var(--ease-gpu) !important;
}
.pi:hover, .medal:hover, .medal-card:hover {
  transform: translateY(-5px) translateZ(0);
  box-shadow: var(--sh-md);
  border-color: var(--bd-card-h);
}

/* Hi links */
.hi-link {
  transition: padding-left .3s var(--ease-spring) !important;
}
.hi-link:hover { padding-left: .5rem; }
.hil-arrow {
  opacity: 0;
  transform: translateX(-5px) translateZ(0);
  transition:
    opacity .2s var(--ease-gpu),
    transform .2s var(--ease-spring) !important;
}
.hi-link:hover .hil-arrow {
  opacity: 1;
  transform: translateX(0) translateZ(0);
}

/* Size opts */
.size-opt {
  transition:
    background-color .22s var(--ease-gpu),
    border-color .22s var(--ease-gpu),
    color .22s var(--ease-gpu),
    transform .22s var(--ease-spring) !important;
}
.size-opt:hover:not(.active) { transform: translateY(-2px) translateZ(0); }

/* Images zoom */
.hist-img-slot img,
.pei-image img, .pei-image .pei-photo,
.sf-image-slot img.sf-terrain-photo,
.smart-img-wrap img.smart-img,
.img-slot img {
  transition: transform .85s var(--ease-out) !important;
  transform: translateZ(0);
  will-change: auto;
}
.hist-img-slot:hover img,
.pei-image:hover img,
.sf-image-slot:hover img.sf-terrain-photo,
.smart-img-wrap:hover img.smart-img,
.img-slot:hover img {
  transform: scale(1.025) translateZ(0);
}

/* Bouteille SVG prod — lift */
.bottle-prod-wrap {
  transition: transform .42s var(--ease-spring), filter .42s var(--ease-gpu) !important;
}
.prod-visual:hover .bottle-prod-wrap {
  transform: translateY(-8px) translateZ(0);
  filter: drop-shadow(0 20px 36px rgba(0,0,0,.55));
}

/* Pei image */
.pei-image {
  transition: filter .5s var(--ease-gpu) !important;
}
.pei-image img, .pei-image .pei-photo {
  transition: transform .88s var(--ease-out) !important;
}
.pei-image:hover img,
.pei-image:hover .pei-photo { transform: scale(1.03) translateZ(0); }

/* ═══════════════════════════════════════════════
   BOTTLE ANIMATIONS — will-change ciblé
   ═══════════════════════════════════════════════ */

.chorbane-bottle-svg,
.bottle-prod-wrap { will-change: transform; }

.bottle-prod-wrap {
  animation: bottleFloat 6s var(--ease-out) infinite;
  transform-origin: center bottom;
}
.prod-bottle-glow { animation: gpulse 4.5s ease-in-out infinite; }
.bottle-halo       { animation: haloBreath 5s ease-in-out infinite; }
.hdc-amber         { animation: hdcAmberDrift 12s ease-in-out infinite; }
.hdc-beam          { animation: hdcBeamSweep 18s ease-in-out infinite; }

/* ═══════════════════════════════════════════════
   SKELETON LOADING — CLS prevention
   ═══════════════════════════════════════════════ */

.hist-img-slot:not(:has(img)),
.pei-image:not(:has(img)),
.img-slot:not(:has(img)) {
  background:
    linear-gradient(110deg, var(--bg-alt) 25%, var(--bg-page) 50%, var(--bg-alt) 75%)
    0 0 / 200% 100%;
  animation: skeletonShimmer 1.6s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════
   REDUCED MOTION — remplacé par .in direct
   ═══════════════════════════════════════════════ */

.reduced-motion * {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ai, .fu, .fl, .fr, .trust-item,
  [class*="-eyebrow"], [class*="-title"], [class*="-sub"],
  .hero-origin, [class*="-bottle-zone"], [class*="-btns"], [class*="-stats"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════
   MOBILE — animations allégées
   ═══════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Désactiver les canvas particles et effets lourds */
  #accueil > canvas { display: none !important; }

  /* Animations plus courtes */
  :root {
    --anim-dur: var(--anim-dur-sm);
  }

  /* Pas de parallax sur touch */
  .hero-depth-canvas { transform: none !important; }

  /* Désactiver tilt 3D */
  .medal-card, .pi, .pei-content, .impact-item {
    transform: none !important;
  }

  /* Bouteille animation plus simple */
  .bottle-prod-wrap { animation: bottleFloat 7s var(--ease-out) infinite; }
  .hdc-amber, .hdc-beam { display: none; }
  .bottle-halo { display: none; }

  /* Transitions plus courtes */
  .ai, .fu, .fl, .fr {
    transition-duration: var(--anim-dur-sm) !important;
  }

  /* Cards — pas de lift */
  .pi:hover, .medal:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ═══════════════════════════════════════════════
   TOUCH DEVICES — classe injectée par perf.js
   ═══════════════════════════════════════════════ */

.is-touch .hdc-amber,
.is-touch .hdc-beam { display: none; }
.is-touch .bottle-halo { display: none; }
.is-touch .pi:hover,
.is-touch .medal:hover { transform: none; box-shadow: none; }

/* ═══════════════════════════════════════════════
   BAKGROUND SCROLL HINT
   ═══════════════════════════════════════════════ */

.scroll-hint {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  animation: scrollPulse 3s ease-in-out infinite;
}
.sh-line {
  width: 1px; height: 30px;
  background: linear-gradient(to bottom, var(--g-300), transparent);
}

/* ══════════════════════════════════════════════════
   SF IMAGE SLOT — Photo terrain réelle 4:3
   Adapte le slot aux proportions naturelles de l'image
   ══════════════════════════════════════════════════ */

/* Conteneur principal — s'étend sur toute la largeur, hors container */
.sf-image-slot {
  position: relative;
  width: 100%;
  margin: 5rem 0 0;
  overflow: hidden;
  background: var(--bg-page);
}

/* Wrapper interne — ratio 4:3 adapté à la photo (3:2 cinématique) */
.sf-image-inner {
  position: relative;
  width: 100%;
  /* Ratio 3:2 — valorise la largeur du paysage sans écraser le ciel */
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

/* Photo — couvre le wrapper, centrage sur le coucher de soleil */
.sf-image-slot .sf-terrain-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Centrage vertical : ciel + lumière dorée bien visible */
  object-position: center 42%;
  display: block;
  transform: translateZ(0);
  will-change: transform;
  transition: transform 1.1s cubic-bezier(.0,.0,.2,1) !important;
}

.sf-image-slot:hover .sf-terrain-photo {
  transform: scale(1.022) translateZ(0);
}

/* Voile bas — dégradé pour la légende */
.sf-image-veil {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(
    to top,
    rgba(6, 12, 6, .88) 0%,
    rgba(6, 12, 6, .42) 38%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Voile haut — fondu subtil avec la page */
.sf-image-inner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 18%;
  background: linear-gradient(to bottom, var(--bg-page) 0%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* Accent ambre — halo soleil gauche */
.sf-image-accent {
  position: absolute;
  top: 0; left: 0;
  width: 38%;
  height: 65%;
  background: radial-gradient(
    ellipse at 18% 52%,
    rgba(201, 134, 42, .10) 0%,
    transparent 68%
  );
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
}

/* Légende — fond du slot (positionnement absolu par rapport à .sf-image-slot) */
.sf-image-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2.4rem 3.2rem 1.8rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  z-index: 4;
}

.sf-image-caption-text span {
  display: block;
  font-family: var(--f-sans);
  font-size: .53rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(181, 200, 178, .5);
  margin-bottom: .32rem;
}

.sf-image-caption-text p {
  font-family: var(--f-elegant);
  font-size: 1rem;
  font-style: italic;
  color: rgba(234, 228, 216, .82);
  line-height: 1.52;
  max-width: 400px;
}

.sf-image-caption-coords {
  font-family: var(--f-sans);
  font-size: .52rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(181, 200, 178, .38);
  text-align: right;
  line-height: 1.7;
  flex-shrink: 0;
}

/* Mode clair — voile adapté */
[data-theme="light"] .sf-image-veil {
  background: linear-gradient(
    to top,
    rgba(20, 14, 6, .72) 0%,
    rgba(20, 14, 6, .30) 40%,
    transparent 100%
  );
}
[data-theme="light"] .sf-image-inner::before {
  background: linear-gradient(to bottom, var(--bg-page) 0%, transparent 100%);
}

/* Responsive */
@media (max-width: 1024px) {
  .sf-image-inner { aspect-ratio: 16 / 10; }
  .sf-image-caption { padding: 2rem 2.4rem 1.5rem; }
}

@media (max-width: 680px) {
  .sf-image-inner { aspect-ratio: 4 / 3; object-position: center 38%; }
  .sf-image-slot .sf-terrain-photo { object-position: 32% 42%; }
  .sf-image-caption {
    padding: 1.6rem 1.4rem 1.3rem;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }
  .sf-image-caption-coords { display: none; }
  .sf-image-caption-text p { font-size: .9rem; max-width: 100%; }
}



/* ══════════════════════════════════════════════════
   REC PHOTO COMPO — Photo portrait agrandie + texte
   Composition éditoriale identique à eng-photo-compo
   ══════════════════════════════════════════════════ */

.rec-photo-compo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin: 4rem 0;
}

.rec-compo-img {
  position: relative;
  /* Photo agrandie : ratio portrait 3/4 conservé */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--bd-card);
}

.rec-compo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
  transform: translateZ(0);
  transition: transform 1.2s cubic-bezier(.0,.0,.2,1) !important;
}

.rec-photo-compo:hover .rec-compo-img img {
  transform: scale(1.03) translateZ(0);
}

/* Halo subtil — clin d'œil à la mer/ciel de la photo */
.rec-compo-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 70% 30%,
    rgba(122, 158, 200, .08) 0%,
    transparent 60%
  );
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;
}

.rec-compo-text {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding-right: 1rem;
}

.rct-line {
  width: 48px;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--amber-lt, #E0A848) 0%,
    rgba(224, 168, 72, 0) 100%
  );
  display: block;
  margin-bottom: .3rem;
}

.rct-eyebrow {
  font-family: var(--f-sans);
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--tx-accent);
}

.rct-title {
  font-family: var(--f-serif);
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--tx-head);
  letter-spacing: -.012em;
  margin: .3rem 0 .6rem;
}

.rct-title em {
  font-style: italic;
  color: var(--g-300);
}

.rct-body {
  font-family: var(--f-elegant);
  font-size: 1.02rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.65;
  color: var(--tx-body);
  margin: 0;
}

.rct-body + .rct-body {
  margin-top: .4rem;
}

.rct-coords {
  font-family: var(--f-sans);
  font-size: .54rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--tx-faint);
  margin-top: .8rem;
}

/* Mode clair */
[data-theme="light"] .rec-compo-img::after {
  background: radial-gradient(
    ellipse at 70% 30%,
    rgba(60, 90, 130, .07) 0%,
    transparent 60%
  );
}

/* Responsive */
@media (max-width: 900px) {
  .rec-photo-compo {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .rec-compo-img {
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
  }
  .rec-compo-text {
    padding-right: 0;
    text-align: left;
  }
}

@media (max-width: 580px) {
  .rec-photo-compo { gap: 1.6rem; margin: 2.5rem 0; }
  .rct-body { font-size: .95rem; }
}

/* ══════════════════════════════════════════════════
   ENG PHOTO COMPOSITION — Photo agrandie + texte
   Composition éditoriale : photo portrait + bloc texte
   ══════════════════════════════════════════════════ */

.eng-photo-section { padding: 0 0 5rem !important; }

.eng-photo-compo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.eng-compo-img {
  position: relative;
  /* Photo agrandie : ratio portrait 3/4 conservé */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--bd-card);
  /* Largeur libre - prend tout l'espace alloué de la grille */
}

.eng-compo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
  transform: translateZ(0);
  transition: transform 1.2s cubic-bezier(.0,.0,.2,1) !important;
}

.eng-photo-compo:hover .eng-compo-img img {
  transform: scale(1.03) translateZ(0);
}

/* Halo doré subtil — clin d'œil à la lumière de la photo */
.eng-compo-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 30% 70%,
    rgba(201, 134, 42, .12) 0%,
    transparent 55%
  );
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;
}

.eng-compo-text {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding-right: 1rem;
}

.ect-line {
  width: 48px;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--amber-lt, #E0A848) 0%,
    rgba(224, 168, 72, 0) 100%
  );
  display: block;
  margin-bottom: .3rem;
}

.ect-eyebrow {
  font-family: var(--f-sans);
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--tx-accent);
}

.ect-title {
  font-family: var(--f-serif);
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--tx-head);
  letter-spacing: -.012em;
  margin: .3rem 0 .6rem;
}

.ect-title em {
  font-style: italic;
  color: var(--g-300);
}

.ect-body {
  font-family: var(--f-elegant);
  font-size: 1.02rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.65;
  color: var(--tx-body);
  margin: 0;
}

.ect-body + .ect-body {
  margin-top: .4rem;
}

.ect-coords {
  font-family: var(--f-sans);
  font-size: .54rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--tx-faint);
  margin-top: .8rem;
}

/* Mode clair */
[data-theme="light"] .eng-compo-img::after {
  background: radial-gradient(
    ellipse at 30% 70%,
    rgba(160, 96, 16, .10) 0%,
    transparent 55%
  );
}

/* Responsive */
@media (max-width: 900px) {
  .eng-photo-compo {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .eng-compo-img {
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
  }
  .eng-compo-text {
    padding-right: 0;
    text-align: left;
  }
}

@media (max-width: 580px) {
  .eng-photo-compo { gap: 1.6rem; }
  .ect-body { font-size: .95rem; }
}

/* ══════════════════════════════════════════════════
   ANIMATIONS DE TRANSITION SUBTILES
   Désactivées si prefers-reduced-motion + sur mobile <600px
   ══════════════════════════════════════════════════ */

/* Boutons primaires : léger lift au survol (desktop only) */
@media (hover: hover) and (min-width: 768px) {
  .btn-primary, .btn-ghost, .btn-checkout, .btn-order-send {
    transition: transform .35s cubic-bezier(.2,.7,.2,1),
                box-shadow .35s cubic-bezier(.2,.7,.2,1),
                background-color .25s ease,
                border-color .25s ease,
                color .25s ease !important;
    will-change: transform;
  }
  .btn-primary:hover, .btn-ghost:hover, .btn-checkout:hover, .btn-order-send:hover {
    transform: translateY(-2px);
  }
  .btn-primary:active, .btn-ghost:active, .btn-checkout:active, .btn-order-send:active {
    transform: translateY(0);
    transition-duration: .12s !important;
  }
}

/* Liens nav : underline animé subtil */
@media (hover: hover) {
  .nav-links a:not(.nav-cta) {
    position: relative;
  }
  .nav-links a:not(.nav-cta)::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: -4px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .42s cubic-bezier(.2,.7,.2,1);
    opacity: .6;
  }
  .nav-links a:not(.nav-cta):hover::after {
    transform: scaleX(1);
  }
}

/* Cartes médailles : élévation douce au survol */
@media (hover: hover) and (min-width: 768px) {
  .medal {
    transition: transform .5s cubic-bezier(.2,.7,.2,1),
                border-color .35s ease,
                background-color .35s ease !important;
  }
  .medal:hover {
    transform: translateY(-3px);
  }
}

/* Liens éditoriaux home (hi-link) : flèche qui glisse */
@media (hover: hover) {
  .hi-link {
    transition: background-color .3s ease, border-color .3s ease;
  }
  .hi-link .hil-arrow,
  .hi-link::after {
    transition: transform .42s cubic-bezier(.2,.7,.2,1);
  }
  .hi-link:hover .hil-arrow {
    transform: translateX(4px);
  }
}

/* Sections : fondu doux au scroll (s'ajoute aux .fu existants sans interférer) */
.section {
  transition: background-color .6s ease;
}

/* Cart drawer : ouverture plus fluide */
.cart-drawer {
  transition: transform .42s cubic-bezier(.2,.7,.2,1) !important;
}
.cart-overlay {
  transition: opacity .35s ease !important;
}

/* Inputs panier/contact : focus subtil */
input, textarea, select {
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease !important;
}

/* Theme toggle : rotation icône au switch */
.theme-toggle svg {
  transition: transform .42s cubic-bezier(.2,.7,.2,1), opacity .3s ease !important;
}
.theme-toggle:hover svg {
  transform: rotate(15deg);
}

/* Lang switcher : fond léger au hover */
.ls-btn {
  transition: color .25s ease, background-color .25s ease !important;
}

/* Theme switch global : adoucir le passage dark↔light */
html {
  transition: background-color .5s ease, color .5s ease;
}

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

/* ── Mobile : désactiver hover effects, fluidifier tap ─── */
@media (max-width: 600px) {
  .btn-primary, .btn-ghost, .btn-checkout, .btn-order-send {
    transform: none !important;
  }
  /* Tap response visible */
  .btn-primary:active, .btn-ghost:active, .btn-checkout:active,
  .btn-order-send:active, .hi-link:active, .medal:active {
    opacity: .82;
    transition: opacity .08s ease !important;
  }
}

/* ══════════════════════════════════════════════════
   CONTACT DIRECT — WhatsApp + email (page contact + panier)
   ══════════════════════════════════════════════════ */

.ct-direct-box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2.4rem 2rem;
}

.ctd-line {
  width: 40px; height: 1px;
  background: linear-gradient(to right, var(--g-300), transparent);
  display: block;
}

.ctd-eyebrow {
  font-family: var(--f-sans);
  font-size: .56rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--g-300);
}

.ctd-title {
  font-family: var(--f-serif);
  font-size: clamp(1.4rem, 1.9vw, 1.8rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--tx-head);
  letter-spacing: -.01em;
  margin: 0 0 .4rem;
}
.ctd-title em { font-style: italic; color: var(--g-300); }

.ctd-body {
  font-family: var(--f-elegant);
  font-size: .98rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--tx-body);
  margin: 0 0 .8rem;
}

/* Bouton WhatsApp — vert signature */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  padding: 1.05rem 1.6rem;
  background: #25D366;
  color: #fff !important;
  font-family: var(--f-sans);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  border: 1px solid #25D366;
  cursor: pointer;
  transition: background-color .25s ease, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease !important;
  box-shadow: 0 2px 8px rgba(37, 211, 102, .15);
}
.btn-whatsapp svg { flex-shrink: 0; }
.btn-whatsapp:hover {
  background: #1FB855;
  border-color: #1FB855;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37, 211, 102, .28);
}
.btn-whatsapp:active { transform: translateY(0); }

.btn-whatsapp-pan {
  width: 100%;
  margin-top: .4rem;
}

/* Divider "ou par email" */
.ctd-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: .4rem 0;
  font-family: var(--f-sans);
  font-size: .58rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--tx-faint);
}
.ctd-divider::before,
.ctd-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bd-card);
}

/* Bouton email — adresse en gros à côté */
.btn-email-big {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  padding: 1rem 1.4rem;
  background: transparent;
  border: 1px solid var(--bd-card);
  text-decoration: none;
  transition: border-color .25s ease, background-color .25s ease, transform .35s cubic-bezier(.2,.7,.2,1) !important;
}
.btn-email-big:hover {
  border-color: var(--g-300);
  background: var(--bg-card);
  transform: translateY(-2px);
}
.bem-label {
  font-family: var(--f-sans);
  font-size: .56rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--tx-faint);
}
.bem-addr {
  font-family: var(--f-serif);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 400;
  color: var(--tx-head);
  letter-spacing: .005em;
  word-break: break-all;
}

/* Mobile : compositions adaptées */
@media (max-width: 600px) {
  .ct-direct-box { padding: 1.8rem 1.4rem; }
  .btn-whatsapp { padding: .95rem 1.2rem; font-size: .85rem; }
  .btn-email-big { padding: .9rem 1.1rem; }
  .bem-addr { font-size: 1rem; }
  .ctd-divider { font-size: .52rem; gap: .8rem; }
}