/* ==========================================================================
   OTYCHE - Ingénierie Informatique
   Feuille de style principale - v3
   (police Qanelas, sans dégradés, cartes image-latérale, boutique/paiement)
   ========================================================================== */

/* Police Qanelas (licence commerciale) - voir assets/fonts/qanelas/README.txt
   Repli automatique sur Poppins/Inter (hébergées en local, sans dépendance
   tierce) tant que les fichiers Qanelas ne sont pas fournis. */
@font-face {
  font-family: 'Qanelas';
  src: url('../fonts/qanelas/Qanelas-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Qanelas';
  src: url('../fonts/qanelas/Qanelas-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Qanelas';
  src: url('../fonts/qanelas/Qanelas-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Qanelas';
  src: url('../fonts/qanelas/Qanelas-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Repli Poppins (titres) - fichiers hébergés en local dans assets/fonts/poppins/ */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins/Poppins-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins/Poppins-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins/Poppins-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins/Poppins-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Repli Inter (corps de texte) - fichiers hébergés en local dans assets/fonts/inter/ */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/Inter-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/Inter-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* Couleurs de marque (fixes, ne changent pas avec le thème) - couleurs
     pleines uniquement, aucun dégradé (demande explicite du client) */
  --bleu-principal: #4169E1;
  --bleu-fonce: #2E4CB8;
  --bleu-clair: #6E8CF0;
  --vert-succes: #1FA971;
  --orange-alerte: #E08A2E;
  --rouge-erreur: #D8465F;
  --fond-sombre: #0C0E14;
  --fond-clair: #EEF2FD;
  --radius: 10px;
  --font-titre: 'Qanelas', 'Poppins', 'Segoe UI', sans-serif;
  --font-corps: 'Qanelas', 'Inter', 'Segoe UI', sans-serif;

  /* --- Thème clair (par défaut) --- */
  --bg: #ffffff;
  --bg-alt: #EEF2FD;
  --surface: #ffffff;
  --text: #1A1D24;
  --text-secondary: #5B6270;
  --border: #e7ebf5;
  --header-bg: rgba(255,255,255,.9);
  --shadow-color: rgba(23,32,66,.09);
  --card-bg: #ffffff;
}

html[data-theme="dark"] {
  --bg: #0C0E14;
  --bg-alt: #12151f;
  --surface: #171b26;
  --text: #EAEDF7;
  --text-secondary: #9aa1b8;
  --border: rgba(255,255,255,.08);
  --header-bg: rgba(12,14,20,.9);
  --shadow-color: rgba(0,0,0,.35);
  --card-bg: #171b26;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-corps);
  color: var(--text);
  background-color: var(--bg);
  font-size: 1rem;
  line-height: 1.65;
  transition: background-color .3s ease, color .3s ease;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-titre {
  font-family: var(--font-titre);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

a { color: var(--bleu-principal); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--bleu-fonce); }

.text-secondary-otyche { color: var(--text-secondary) !important; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--bleu-principal);
  outline-offset: 2px;
}

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

/* ---------------------------------------------------------------------- */
/* Boutons - couleurs pleines, sans dégradé                               */
/* ---------------------------------------------------------------------- */
.btn-otyche {
  background: var(--bleu-principal);
  border: 1px solid var(--bleu-principal);
  color: #fff;
  font-weight: 600;
  padding: .65rem 1.5rem;
  border-radius: var(--radius);
  transition: background-color .2s ease, transform .15s ease, box-shadow .25s ease;
}
.btn-otyche:hover, .btn-otyche:focus {
  background-color: var(--bleu-fonce);
  border-color: var(--bleu-fonce);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(65,105,225,.3);
}
.btn-outline-otyche {
  background-color: transparent;
  border: 1.5px solid var(--bleu-principal);
  color: var(--bleu-principal);
  font-weight: 600;
  padding: .6rem 1.45rem;
  border-radius: var(--radius);
  transition: all .2s ease;
}
.btn-outline-otyche:hover { background-color: var(--bleu-principal); color: #fff; transform: translateY(-2px); }
.btn-otyche-dark {
  background-color: var(--fond-sombre);
  border: 1px solid var(--fond-sombre);
  color: #fff;
  font-weight: 600;
  padding: .65rem 1.5rem;
  border-radius: var(--radius);
  transition: transform .15s ease;
}
.btn-otyche-dark:hover { background-color: #1a1e2b; color: #fff; transform: translateY(-2px); }
.btn-otyche-success { background: var(--vert-succes); border-color: var(--vert-succes); color: #fff; font-weight: 600; padding: .65rem 1.5rem; border-radius: var(--radius); }
.btn-otyche-success:hover { background: #178258; border-color: #178258; color: #fff; }

.theme-toggle-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  transition: transform .3s ease, background-color .3s ease, border-color .3s ease;
  cursor: pointer;
}
.theme-toggle-btn:hover { transform: rotate(20deg) scale(1.08); border-color: var(--bleu-principal); }

/* ---------------------------------------------------------------------- */
/* Préchargeur - favicon animé + barre de pourcentage                     */
/* ---------------------------------------------------------------------- */
body.is-loading { overflow: hidden; }
.otyche-preloader {
  position: fixed; inset: 0; z-index: 3000;
  background: var(--fond-sombre);
  display: flex; align-items: center; justify-content: center;
  opacity: 1; visibility: visible;
  transition: opacity .6s ease, visibility 0s linear 0s;
}
.otyche-preloader.is-hidden { opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.otyche-preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 1.35rem; }
.otyche-preloader-logo-wrap {
  position: relative;
  width: 88px; height: 88px;
  display: flex; align-items: center; justify-content: center;
}
.otyche-preloader-logo-wrap::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(65,105,225,.18);
  border-top-color: var(--bleu-principal);
  animation: otyche-preloader-spin 1s linear infinite;
}
.otyche-preloader-logo {
  width: 46px; height: 46px;
  object-fit: contain;
  border-radius: 10px;
  animation: otyche-preloader-pulse 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(65,105,225,.45));
}
@keyframes otyche-preloader-spin { to { transform: rotate(360deg); } }
@keyframes otyche-preloader-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(.86); opacity: .75; }
}
.otyche-preloader-bar {
  width: 190px; height: 5px;
  border-radius: 100px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
}
.otyche-preloader-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--bleu-clair), var(--bleu-principal));
  border-radius: 100px;
  transition: width .25s ease-out;
}
.otyche-preloader-percent {
  font-family: var(--font-titre); font-weight: 600; font-size: .82rem;
  letter-spacing: .04em; color: #b8bed2;
}
@media (prefers-reduced-motion: reduce) {
  .otyche-preloader-logo-wrap::before, .otyche-preloader-logo { animation: none; }
}

/* ---------------------------------------------------------------------- */
/* Menu mobile - tiroir latéral façon sidebar (uniquement < 992px)       */
/* ---------------------------------------------------------------------- */
.sidebar-otyche {
  position: fixed;
  top: 14px; left: 14px;
  width: min(272px, 78vw);
  max-height: calc(100vh - 28px);
  z-index: 1050;
  background: linear-gradient(165deg, var(--fond-sombre), #14172a);
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  padding: 1.1rem 0;
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateX(-130%);
  visibility: hidden;
  transition: transform .4s cubic-bezier(.22,.61,.36,1), visibility 0s linear .4s;
}
.sidebar-otyche.is-open {
  transform: translateX(0);
  visibility: visible;
  box-shadow: 0 0 0 1px rgba(65,105,225,.25), 0 25px 60px rgba(0,0,0,.5);
  transition: transform .4s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s;
}
@media (min-width: 992px) { .sidebar-otyche { display: none; } }

.sidebar-otyche-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.1rem .85rem; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: .3rem;
}
.sidebar-otyche-brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.sidebar-otyche-logo {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 11px;
  background: var(--bleu-principal);
  color: #fff; font-family: var(--font-titre); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.sidebar-otyche-logo img { width: 100%; height: 100%; object-fit: contain; }
.sidebar-otyche-brand-text { font-family: var(--font-titre); font-weight: 700; font-size: 1rem; color: #fff; white-space: nowrap; }

.sidebar-otyche-nav {
  flex: 1; overflow: visible;
  padding: .1rem 1rem; display: flex; flex-direction: column; gap: 0;
}
.sidebar-otyche-section-label {
  font-size: .63rem; text-transform: uppercase; letter-spacing: .08em;
  color: #6b7392; font-weight: 600; white-space: nowrap;
  padding: .3rem .6rem .45rem; text-align: center;
}

/* Grille 2 colonnes (4-4) de tuiles animées - compacte pour rester légère sur mobile */
.sidebar-otyche-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  padding-bottom: .25rem;
}
.sidebar-otyche-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  padding: .75rem .4rem;
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  color: #c7cde0; text-decoration: none; font-weight: 500; font-size: .72rem; text-align: center;
  width: 100%; cursor: pointer;
  opacity: 0; transform: translateY(14px) scale(.94);
  transition: opacity .4s ease, transform .4s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
  transition-delay: calc(var(--i, 0) * 45ms);
}
.sidebar-otyche.is-open .sidebar-otyche-tile { opacity: 1; transform: translateY(0) scale(1); }
.sidebar-otyche-tile i { font-size: 1.1rem; color: var(--bleu-clair); transition: color .2s ease; }
.sidebar-otyche-tile:hover, .sidebar-otyche-tile.active, .sidebar-otyche-tile.is-open {
  background: rgba(65,105,225,.16); border-color: rgba(65,105,225,.4); color: #fff;
  box-shadow: 0 0 0 1px rgba(65,105,225,.2), 0 10px 24px -12px rgba(65,105,225,.55);
}
.sidebar-otyche-tile:hover i, .sidebar-otyche-tile.active i, .sidebar-otyche-tile.is-open i { color: #fff; }
.sidebar-otyche-tile-toggle::after {
  content: "\f282"; font-family: "bootstrap-icons", sans-serif;
  position: absolute; top: .5rem; right: .55rem; font-size: .6rem; color: #6b7392;
  transition: transform .25s ease;
}
.sidebar-otyche-tile-toggle.is-open::after { transform: rotate(180deg); color: var(--bleu-clair); }

.sidebar-otyche-submenu {
  max-height: 0; overflow: hidden; display: flex; flex-direction: column;
  transition: max-height .35s ease;
}
.sidebar-otyche-submenu.is-open { max-height: 280px; margin-bottom: .5rem; }
.sidebar-otyche-submenu a {
  display: flex; align-items: center; justify-content: center; gap: .55rem; padding: .55rem .5rem;
  color: #9aa3c2; text-decoration: none; font-size: .84rem; white-space: nowrap; border-radius: 10px; text-align: center;
}
.sidebar-otyche-submenu a i { font-size: .88rem; }
.sidebar-otyche-submenu a:hover { color: #fff; background: rgba(255,255,255,.06); }

.sidebar-otyche-bottom {
  flex-shrink: 0; margin-top: .4rem; padding: .85rem 1.1rem 0;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; gap: .7rem; align-items: stretch;
}
.sidebar-otyche-cta { display: flex; align-items: center; justify-content: center; gap: .55rem; white-space: nowrap; }
.sidebar-otyche-social { display: flex; gap: .75rem; justify-content: center; }
.sidebar-otyche-social a {
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #fff; font-size: .95rem;
  transition: background-color .2s ease, transform .2s ease;
}
.sidebar-otyche-social a:hover { background: var(--bleu-principal); transform: translateY(-2px); }

body.mobile-menu-open { overflow: hidden; }

/* ---------------------------------------------------------------------- */
/* Popup "Services" - ouvert depuis la tuile Services du menu mobile     */
/* ---------------------------------------------------------------------- */
.services-popup-backdrop {
  position: fixed; inset: 0; z-index: 1150;
  background: rgba(6,7,12,.6);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.services-popup-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s linear 0s; }

.services-popup {
  position: fixed; z-index: 1200;
  top: 50%; left: 50%;
  width: min(340px, 88vw);
  background: linear-gradient(165deg, var(--fond-sombre), #14172a);
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
  padding: 1.1rem 1.1rem 1.3rem;
  opacity: 0; visibility: hidden;
  transform: translate(-50%, -50%) scale(.9);
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,.61,.36,1), visibility 0s linear .3s;
}
.services-popup.is-open {
  opacity: 1; visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s;
}
.services-popup-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .85rem; padding-bottom: .85rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.services-popup-header h3 { display: flex; align-items: center; gap: .5rem; color: #fff; font-size: 1rem; margin: 0; }
.services-popup-close {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .8rem;
  transition: background-color .2s ease;
}
.services-popup-close:hover { background: var(--bleu-principal); }
.services-popup-list { display: flex; flex-direction: column; gap: .4rem; }
.services-popup-list a {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .7rem; border-radius: 12px;
  color: #c7cde0; text-decoration: none; font-size: .87rem; font-weight: 500;
  transition: background-color .2s ease, color .2s ease;
}
.services-popup-list a:hover { background: rgba(65,105,225,.16); color: #fff; }
.services-popup-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: rgba(65,105,225,.16); color: var(--bleu-clair);
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.services-popup-list a:hover .services-popup-icon { background: var(--bleu-principal); color: #fff; }
.services-popup-label { flex: 1; }
.services-popup-list a > i:last-child { font-size: .75rem; color: #6b7392; }

@media (prefers-reduced-motion: reduce) {
  .services-popup, .services-popup-backdrop { transition: opacity .2s ease; }
}

/* ---------------------------------------------------------------------- */
/* Panier - icône dans la navbar + popup ancré dessous                    */
/* ---------------------------------------------------------------------- */
.cart-nav-btn {
  position: relative;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
  flex-shrink: 0;
}
.cart-nav-btn:hover { transform: translateY(-2px); border-color: var(--bleu-principal); color: var(--bleu-principal); }
.cart-fab-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: 100px;
  background: var(--rouge-erreur, #e5484d); color: #fff;
  font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px var(--bg);
}

.cart-popup-backdrop {
  position: fixed; inset: 0; z-index: 1150;
  background: rgba(6,7,12,.45);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.cart-popup-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s linear 0s; }

.cart-popup {
  position: fixed; z-index: 1200;
  right: 22px; top: 88px;
  width: min(340px, 90vw);
  max-height: min(480px, 70vh);
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: 0 30px 70px rgba(0,0,0,.3);
  padding: 1.1rem 1.1rem 1.2rem;
  opacity: 0; visibility: hidden;
  transform-origin: top right;
  transform: scale(.9) translateY(-10px);
  transition: opacity .25s ease, transform .25s cubic-bezier(.22,.61,.36,1), visibility 0s linear .25s;
}
.cart-popup.is-open {
  opacity: 1; visibility: visible;
  transform: scale(1) translateY(0);
  transition: opacity .25s ease, transform .25s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s;
}
.cart-popup-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cart-popup-header h3 { display: flex; align-items: center; gap: .5rem; font-size: .98rem; margin: 0; color: var(--text); }
.cart-popup-close {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border);
  background: transparent; color: var(--text); display: flex; align-items: center; justify-content: center; font-size: .75rem;
  transition: background-color .2s ease, color .2s ease;
}
.cart-popup-close:hover { background: var(--bleu-principal); color: #fff; border-color: var(--bleu-principal); }

.cart-popup-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .6rem; margin-bottom: .85rem; }
.cart-popup-empty { color: var(--text-secondary); font-size: .88rem; text-align: center; padding: 1.5rem 0; margin: 0; }
.cart-popup-item { display: flex; align-items: center; gap: .7rem; }
.cart-popup-item-img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--fond-sombre); }
.cart-popup-item-placeholder { display: flex; align-items: center; justify-content: center; color: #6b7392; font-size: 1.1rem; }
.cart-popup-item-body { flex: 1; min-width: 0; }
.cart-popup-item-name { font-size: .85rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-popup-item-meta { font-size: .78rem; color: var(--text-secondary); }
.cart-popup-item-remove {
  width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent;
  color: var(--text-secondary); flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease, color .2s ease;
}
.cart-popup-item-remove:hover { background: rgba(229,72,77,.12); color: var(--rouge-erreur, #e5484d); }

.cart-popup-footer { flex-shrink: 0; padding-top: .85rem; border-top: 1px solid var(--border); }
.cart-popup-total { display: flex; justify-content: space-between; font-weight: 700; color: var(--text); margin-bottom: .75rem; }

@media (max-width: 480px) {
  .cart-nav-btn { width: 38px; height: 38px; font-size: 1rem; }
  .cart-popup { right: 12px; left: 12px; width: auto; top: 78px; }
}
@media (prefers-reduced-motion: reduce) {
  .cart-popup, .cart-popup-backdrop { transition: opacity .2s ease; }
}

/* ---------------------------------------------------------------------- */
/* Page panier (panier.php)                                               */
/* ---------------------------------------------------------------------- */
.panier-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
  flex-wrap: wrap;
}
.panier-item-img { width: 66px; height: 66px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: var(--fond-sombre); }
.panier-item-placeholder { display: flex; align-items: center; justify-content: center; color: #8891ac; font-size: 1.3rem; }
.panier-item-body { flex: 1 1 160px; min-width: 0; }
.panier-item-name { font-weight: 600; color: var(--text); }
.panier-item-price { font-size: .85rem; color: var(--text-secondary); }
.panier-item-qty { display: flex; align-items: center; gap: .6rem; margin: 0; flex-shrink: 0; }
.panier-qty-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg);
  color: var(--text); display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease, color .2s ease;
}
.panier-qty-btn:hover:not(:disabled) { background: var(--bleu-principal); color: #fff; border-color: var(--bleu-principal); }
.panier-qty-btn:disabled { opacity: .4; cursor: not-allowed; }
.panier-qty-value { min-width: 22px; text-align: center; font-weight: 600; }
.panier-item-subtotal { font-weight: 700; color: var(--text); flex-shrink: 0; min-width: 90px; text-align: right; }
.panier-item-remove {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: transparent;
  color: var(--text-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.panier-item-remove:hover { background: rgba(229,72,77,.12); color: var(--rouge-erreur, #e5484d); border-color: rgba(229,72,77,.3); }

/* Case à cocher "j'accepte d'être contacté" (checkout panier) */
.panier-checkbox-otyche {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.panier-checkbox-otyche input { margin-top: .25rem; flex-shrink: 0; width: 18px; height: 18px; }
.panier-checkbox-otyche label { margin: 0; font-size: .9rem; color: var(--text); cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .sidebar-otyche, .sidebar-otyche-tile, .sidebar-otyche-submenu { transition: none; }
  .sidebar-otyche-tile { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------- */
/* En-tête - navigation principale                                        */
/* ---------------------------------------------------------------------- */
.site-header {
  background: transparent;
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 1rem 0 0;
}

/* La capsule reste centrée dans la page (jamais étirée bord à bord) et
   collée au hero qui la suit, sur desktop, tablette et mobile. */
.site-header .container { display: flex; justify-content: center; padding-left: 1rem; padding-right: 1rem; }

@media (max-width: 767.98px) {
  /* Sur mobile, la capsule occupe toute la largeur utile pour ne pas
     coller dans un coin ni se comprimer contre les icônes de droite. */
  .site-header .container { padding-left: .85rem; padding-right: .85rem; }
  .nav-capsule-wrap { width: 100%; }
  .nav-island { width: 100%; justify-content: space-between; }
}

/* Petit connecteur décoratif façon "prise" avant la capsule (toutes tailles d'écran) */
.nav-capsule-wrap { position: relative; }
.nav-capsule-chip {
  position: absolute;
  top: 50%; left: 0;
  align-items: center; gap: .55rem;
  transform: translate(calc(-100% - .7rem), -50%);
  z-index: 1;
}
.nav-capsule-chip-circle {
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  color: var(--bleu-principal); font-size: 1.05rem;
  box-shadow: 0 6px 16px -6px var(--shadow-color);
}
.nav-capsule-chip-line { width: 24px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--border), var(--bleu-principal)); }

@media (max-width: 420px) {
  .nav-capsule-chip { transform: translate(calc(-100% - .4rem), -50%); gap: .35rem; }
  .nav-capsule-chip-circle { width: 32px; height: 32px; font-size: .85rem; }
  .nav-capsule-chip-line { width: 14px; }
}

@media (max-width: 767.98px) {
  /* Le connecteur décoratif n'a pas la place de "flotter" à gauche de la
     capsule sur mobile : il se retrouvait écrasé/coupé dans le coin de
     l'écran. On le masque simplement en dessous de 768px (purement
     décoratif, aucune perte fonctionnelle). */
  .nav-capsule-chip { display: none; }
}

/* Îlot flottant : la barre de navigation devient une "pilule" vitrée
   au lieu d'une bande pleine largeur - changement volontairement
   radical par rapport à l'ancien menu. */
.nav-island {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: .5rem .55rem .5rem 1.4rem;
  box-shadow: 0 10px 30px -16px var(--shadow-color);
  transition: box-shadow .3s ease, background-color .3s ease, border-color .3s ease;
}
.site-header.is-scrolled .nav-island { box-shadow: 0 16px 36px -14px var(--shadow-color); }

.navbar-brand-otyche {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text) !important;
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-shrink: 0;
}
.navbar-brand-otyche .logo-mark {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bleu-principal);
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(65,105,225,.12);
}
.navbar-brand-otyche .logo-mark::after {
  content: "";
  position: absolute; inset: 7px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9);
}
.navbar-brand-otyche .logo-img {
  height: 34px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.footer-brand .logo-img {
  width: 36px; height: 36px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}
.navbar-brand-otyche small {
  display: block;
  font-family: var(--font-corps);
  font-weight: 400;
  font-size: .6rem;
  color: var(--text-secondary);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Logo à bascule selon le thème (clair/sombre) */
.logo-theme-light { display: inline-block; }
.logo-theme-dark { display: none; }
html[data-theme="dark"] .logo-theme-light { display: none; }
html[data-theme="dark"] .logo-theme-dark { display: inline-block; }

.nav-pill-nav { display: flex; align-items: stretch; gap: 0; }
.nav-link-dropdown { position: relative; display: flex; }

.nav-link-otyche {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  color: var(--text-secondary) !important;
  font-weight: 600;
  font-size: .64rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .5rem .95rem !important;
  border-radius: 14px;
  border-right: 1px solid var(--border);
  transition: background-color .25s ease, color .25s ease;
}
.nav-link-otyche i { font-size: 1.05rem; line-height: 1; }
.nav-link-dropdown:last-of-type .nav-link-otyche,
.nav-pill-nav > .nav-link-otyche:last-child { border-right: none; }
.nav-link-otyche.active, .nav-link-otyche:hover, .nav-link-otyche.show {
  background: var(--bleu-principal);
  color: #fff !important;
}

.nav-island-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

@media (max-width: 991.98px) {
  .nav-island { gap: 1.85rem; padding: .5rem .55rem .5rem 1.1rem; }
}

.dropdown-menu {
  border-radius: 16px; border-color: var(--border); background: var(--surface);
  box-shadow: 0 18px 38px var(--shadow-color); padding: .5rem; margin-top: .65rem !important;
}
.dropdown-item {
  color: var(--text); border-radius: 10px; padding: .6rem .75rem;
  display: flex; align-items: center; gap: .65rem; font-size: .9rem;
  transition: background-color .2s ease, color .2s ease;
}
.dropdown-item i { color: var(--bleu-principal); width: 18px; text-align: center; transition: color .2s ease; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--bleu-principal); color: #fff; }
.dropdown-item:hover i, .dropdown-item:focus i { color: #fff; }

/* ---------------------------------------------------------------------- */
/* Bannière signature (accueil)                                           */
/* ---------------------------------------------------------------------- */
.hero-otyche {
  background: var(--fond-sombre);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: 5rem 0 6rem;
}
.hero-otyche .pixel-field { position: absolute; inset: 0; pointer-events: none; opacity: .55; }
.hero-otyche .pixel-field span {
  position: absolute; width: 4px; height: 4px;
  background: var(--bleu-principal); border-radius: 1px;
  animation: pixel-drift 6s ease-in-out infinite;
}
@keyframes pixel-drift {
  0%, 100% { transform: translate(0,0); opacity: .25; }
  50% { transform: translate(6px,-6px); opacity: .9; }
}
.hero-otyche h1 { color: #fff; font-size: clamp(2rem, 4vw, 3.1rem); }
.hero-otyche .lead { color: #c7cde0; font-size: 1.15rem; }

/* Formes décoratives flottantes - couleurs pleines uniquement */
.floaty-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: floaty 7s ease-in-out infinite;
  opacity: .35;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
  50% { transform: translateY(-18px) translateX(8px) rotate(8deg); }
}
.floaty-shape.sq { border-radius: 8px; }
.floaty-shape.floaty-logo {
  object-fit: contain;
  opacity: .5;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}

.eyebrow-otyche {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--bleu-principal);
  background: rgba(65,105,225,.12);
  border: 1px solid rgba(65,105,225,.35);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .3rem .8rem;
  border-radius: 100px;
  margin-bottom: 1rem;
}
.eyebrow-otyche .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--bleu-principal);
  animation: dot-pulse 1.6s ease-in-out infinite;
}
@keyframes dot-pulse { 0%,100% { opacity:.4; transform:scale(.8);} 50% { opacity:1; transform:scale(1.2);} }

.page-header-otyche {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--fond-sombre);
  padding: 4.25rem 0 3.25rem;
  color: #fff;
}
.page-header-otyche::before {
  content: ""; position: absolute; top: -160px; right: -100px; z-index: 0; pointer-events: none;
  width: 420px; height: 420px; border-radius: 50%; filter: blur(70px); opacity: .45;
  background: radial-gradient(circle, rgba(65,105,225,.55), transparent 70%);
  animation: hs-aurora-float 16s ease-in-out infinite;
}
.page-header-otyche::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 20% 0%, rgba(65,105,225,.16), transparent 60%);
}
.page-header-otyche .container { position: relative; z-index: 1; }
.page-header-otyche .breadcrumb-otyche { color: #8891ac; }
.page-header-otyche .breadcrumb-otyche a { color: #c7cde0; text-decoration: none; }
.page-header-otyche .breadcrumb-otyche a:hover { color: #fff; }
.page-header-otyche .breadcrumb-otyche .active { color: #fff; font-weight: 500; }
.page-header-otyche h1 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: 0; }
.page-header-otyche p.lead { color: #c7cde0; max-width: 640px; margin: .75rem 0 0; }
@media (max-width: 767px) {
  .page-header-otyche { padding: 3rem 0 2.25rem; }
  .page-header-otyche::before { width: 260px; height: 260px; top: -100px; right: -80px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-header-otyche::before { animation: none; }
}

/* ---------------------------------------------------------------------- */
/* Sections & cartes                                                       */
/* ---------------------------------------------------------------------- */
.section-alt { background-color: var(--bg-alt); transition: background-color .3s ease; }

.card-otyche {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  height: 100%;
  background: var(--surface);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .3s ease;
}
.card-otyche.card-otyche-cta { height: auto; }
.card-otyche:hover { transform: translateY(-5px); box-shadow: 0 16px 32px var(--shadow-color); border-color: rgba(65,105,225,.4); }
.icon-pole {
  width: 54px; height: 54px;
  border-radius: 12px;
  background: rgba(65,105,225,.1);
  color: var(--bleu-principal);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  transition: transform .3s ease;
}
.icon-pole i, .hero-badge i { line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
/* Icônes et boutons toujours centrés dans les cartes, quel que soit le mode/écran */
.card-otyche.d-flex.flex-column { align-items: center; text-align: center; }
.card-otyche.d-flex.flex-column .icon-pole { margin-left: auto; margin-right: auto; }
.card-otyche.d-flex.flex-column > .btn { align-self: center; }
.card-otyche:hover .icon-pole { transform: scale(1.1) rotate(-4deg); }

/* ---------------------------------------------------------------------- */
/* Carousel de cartes empilées - "Pourquoi choisir Otyche"                */
/* ---------------------------------------------------------------------- */
.card-carousel-otyche { max-width: 400px; margin: 0 auto; }
.card-carousel-otyche-stage {
  position: relative;
  height: 250px;
  margin-bottom: .85rem;
}
.card-carousel-otyche-card {
  position: absolute;
  top: 0; left: 50%;
  width: 100%;
  max-width: 320px;
  height: 232px;
  padding: 1.5rem 1.5rem;
  border-radius: 18px;
  background: var(--fond-sombre);
  color: #fff;
  box-shadow: 0 18px 36px -14px rgba(0,0,0,.4);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .5s ease, box-shadow .5s ease;
}
.card-carousel-otyche-card h3 { color: #fff; margin-bottom: .45rem; font-size: 1.02rem; }
.card-carousel-otyche-card p { color: #b8bed2; font-size: .84rem; line-height: 1.5; margin-bottom: 0; }
.card-carousel-otyche-icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(65,105,225,.16);
  color: var(--bleu-clair);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; margin-bottom: .85rem; flex-shrink: 0;
}
.card-carousel-otyche-index {
  margin-top: auto; padding-top: .75rem;
  font-family: var(--font-titre); font-weight: 600; font-size: .72rem;
  letter-spacing: .06em; color: #6b7392;
}

/* Position 0 = carte active (devant) */
.card-carousel-otyche-card[data-pos="0"] { transform: translate(-50%, 0) rotate(0deg) scale(1); z-index: 4; opacity: 1; }
.card-carousel-otyche-card[data-pos="1"] { transform: translate(-40%, 12px) rotate(6deg) scale(.94); z-index: 3; opacity: 1; }
.card-carousel-otyche-card[data-pos="2"] { transform: translate(-58%, 20px) rotate(-5deg) scale(.89); z-index: 2; opacity: .9; }
.card-carousel-otyche-card[data-pos="3"] { transform: translate(-50%, 28px) rotate(0deg) scale(.82); z-index: 1; opacity: 0; pointer-events: none; }

.card-carousel-otyche-card:hover[data-pos="0"] { box-shadow: 0 22px 44px -12px rgba(0,0,0,.5); }

.card-carousel-otyche-controls {
  display: flex; align-items: center; justify-content: center; gap: .85rem;
}
.card-carousel-otyche-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  display: flex; align-items: center; justify-content: center; font-size: .85rem;
  transition: background-color .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.card-carousel-otyche-btn:hover { background: var(--bleu-principal); color: #fff; border-color: var(--bleu-principal); transform: scale(1.06); }
.card-carousel-otyche-dots { display: flex; align-items: center; gap: .4rem; }
.card-carousel-otyche-dots button {
  width: 7px; height: 7px; border-radius: 50%; border: none;
  background: var(--border); padding: 0; transition: background-color .25s ease, width .25s ease, border-radius .25s ease;
}
.card-carousel-otyche-dots button.is-active { background: var(--bleu-principal); width: 18px; border-radius: 100px; }

@media (max-width: 575px) {
  .card-carousel-otyche-stage { height: 270px; }
  .card-carousel-otyche-card { padding: 1.35rem 1.35rem; height: 250px; }
}
@media (prefers-reduced-motion: reduce) {
  .card-carousel-otyche-card { transition: opacity .3s ease; }
}

.stat-block { text-align: center; }
.stat-block .stat-number { font-family: var(--font-titre); font-weight: 700; font-size: 2.3rem; color: var(--bleu-principal); }
.stat-block .stat-label { color: var(--text-secondary); font-size: .9rem; }

/* ---------------------------------------------------------------------- */
/* Cartes à média latéral : image à gauche (tablette/PC/TV),               */
/* image en haut + texte en dessous (mobile) - contenu publié depuis admin */
/* ---------------------------------------------------------------------- */
.media-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  text-decoration: none;
  color: var(--text);
}
.media-card:hover { transform: translateY(-5px); box-shadow: 0 16px 32px var(--shadow-color); border-color: rgba(65,105,225,.4); color: var(--text); }
.media-card .media-card-img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--bg-alt);
}
.media-card .media-card-placeholder {
  width: 100%;
  height: 190px;
  background: var(--bg-alt);
  color: var(--bleu-principal);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
}
.media-card .media-card-body { padding: 1.25rem; display: flex; flex-direction: column; flex-grow: 1; }
.media-card .media-card-readmore { margin-top: auto; font-weight: 600; font-size: .88rem; color: var(--bleu-principal); display: inline-flex; align-items: center; gap: .3rem; }
.product-card-actions .btn { min-width: 0; white-space: nowrap; }
@media (max-width: 400px) {
  .product-card-actions .btn { font-size: .78rem; padding-left: .6rem; padding-right: .6rem; }
}

/* À partir de la tablette : image à gauche, texte à droite */
@media (min-width: 768px) {
  .media-card.media-card-horizontal { flex-direction: row; }
  .media-card.media-card-horizontal .media-card-img,
  .media-card.media-card-horizontal .media-card-placeholder {
    width: 42%;
    height: auto;
  }
  .media-card.media-card-horizontal .media-card-body { width: 58%; }
}

/* ---------------------------------------------------------------------- */
/* Image mise en avant sur les pages de détail (article, réalisation) -    */
/* hauteur fixe et responsive, jamais la taille naturelle du fichier      */
/* ---------------------------------------------------------------------- */
.detail-img, .media-placeholder {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: contain;
  background: var(--bg-alt);
}
@media (min-width: 576px) {
  .detail-img, .media-placeholder { height: 320px; }
}
@media (min-width: 992px) {
  .detail-img, .media-placeholder { height: 380px; }
}


/* ---------------------------------------------------------------------- */
/* Contenu publié depuis l'admin (articles) - lisible et justifié          */
/* ---------------------------------------------------------------------- */
.article-content { font-size: 1.05rem; line-height: 1.85; color: var(--text); }
.article-content p { text-align: justify; margin-bottom: 1.3rem; hyphens: auto; }
.article-content h2, .article-content h3, .article-content h4 { margin-top: 2rem; margin-bottom: .8rem; }
.article-content ul, .article-content ol { margin-bottom: 1.3rem; padding-left: 1.4rem; }
.article-content li { margin-bottom: .4rem; text-align: justify; }
.article-content img { max-width: 100%; border-radius: var(--radius); margin: 1.5rem 0; }
.article-content blockquote {
  border-left: 3px solid var(--bleu-principal);
  padding: .5rem 0 .5rem 1.2rem;
  color: var(--text-secondary);
  font-style: italic;
  margin: 1.5rem 0;
}

/* ---------------------------------------------------------------------- */
/* Animations au défilement                                               */
/* ---------------------------------------------------------------------- */
.reveal { opacity: 1; }
.js-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.js-reveal.in-view { opacity: 1; transform: none; }
.reveal-scale { opacity: 1; }
.js-reveal-scale { opacity: 0; transform: scale(.92); transition: opacity .6s ease, transform .6s ease; }
.js-reveal-scale.in-view { opacity: 1; transform: scale(1); }

/* ---------------------------------------------------------------------- */
/* Pied de page - structure simplifiée                                    */
/* Desktop : logo à gauche, politique de confidentialité au centre,       */
/* réseaux sociaux à droite, puis ligne "@2026 - Développé par..." dessous */
/* Mobile : tout empilé et centré (logo, politique, réseaux, copyright)   */
/* ---------------------------------------------------------------------- */
.site-footer { background: var(--fond-sombre); color: #b8bed2; padding: 2.75rem 0 1.5rem; }
.site-footer a { color: #b8bed2; }
.site-footer a:hover { color: var(--bleu-clair); }

.footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.site-footer .footer-brand { color: #fff; font-family: var(--font-titre); font-weight: 700; font-size: 1.15rem; display: flex; align-items: center; gap: .5rem; }
.footer-privacy-link { font-size: .9rem; text-decoration: none; }
.footer-privacy-link:hover { text-decoration: underline; }

.footer-social { display: flex; align-items: center; gap: .6rem; }
.footer-social a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); display: inline-flex; align-items: center; justify-content: center; transition: all .2s ease; }
.footer-social a:hover { background: var(--bleu-principal); border-color: var(--bleu-principal); color: #fff; transform: translateY(-2px); }

.footer-bottom-line {
  width: 100%;
  text-align: center;
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .8rem;
  color: #8b91a8;
}

@media (max-width: 767px) {
  .footer-main { flex-direction: column; text-align: center; gap: 1.1rem; }
}

/* ---------------------------------------------------------------------- */
/* Boutons flottants                                                       */
/* ---------------------------------------------------------------------- */
.whatsapp-float {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1050;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.55rem; box-shadow: 0 8px 20px rgba(0,0,0,.25);
  transition: transform .15s ease;
  animation: float-pulse 2.6s ease-in-out infinite;
}
.whatsapp-float:hover { transform: scale(1.1); color: #fff; animation-play-state: paused; }
@keyframes float-pulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(0,0,0,.25), 0 0 0 0 rgba(37,211,102,.5); }
  50% { box-shadow: 0 8px 20px rgba(0,0,0,.25), 0 0 0 10px rgba(37,211,102,0); }
}

/* ---------------------------------------------------------------------- */
/* Bandeau cookies                                                         */
/* ---------------------------------------------------------------------- */
#cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000;
  background: var(--fond-sombre); color: #dfe3ee; padding: 1.1rem 1.25rem;
  transform: translateY(100%); transition: transform .4s ease;
}
#cookie-banner.show { transform: translateY(0); }
#cookie-banner a { color: var(--bleu-clair); }

/* ---------------------------------------------------------------------- */
/* Formulaires                                                             */
/* ---------------------------------------------------------------------- */
.form-control-otyche {
  border-radius: 8px; border: 1px solid var(--border); padding: .65rem .9rem;
  background: var(--surface); color: var(--text);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .3s ease;
}
.form-control-otyche:focus { border-color: var(--bleu-principal); box-shadow: 0 0 0 .2rem rgba(65,105,225,.15); background: var(--surface); color: var(--text); }
label.form-label-otyche { font-weight: 500; font-size: .92rem; }

.breadcrumb-otyche a { color: var(--text-secondary); }
.breadcrumb-otyche .active { color: var(--text); font-weight: 500; }

.badge-pole { background: rgba(65,105,225,.12); color: var(--bleu-principal); font-weight: 500; padding: .35rem .75rem; border-radius: 100px; font-size: .78rem; }

/* Badges de statut (commandes) - couleurs pleines */
.badge-statut { font-weight: 600; padding: .35rem .75rem; border-radius: 100px; font-size: .76rem; display: inline-block; }
.badge-statut-attente { background: rgba(224,138,46,.15); color: var(--orange-alerte); }
.badge-statut-paye { background: rgba(31,169,113,.15); color: var(--vert-succes); }
.badge-statut-echec { background: rgba(216,70,95,.15); color: var(--rouge-erreur); }
.badge-statut-neutre { background: rgba(91,98,112,.15); color: var(--text-secondary); }

.nav-pills .nav-link { color: var(--text); }
.nav-pills .nav-link.active { background: var(--bleu-principal); }
.table { color: var(--text); }

/* Sélecteur de moyen de paiement (tunnel de commande) */
.payment-option { display: block; border: 2px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.payment-option input { margin-right: .6rem; }
.payment-option.is-checked, .payment-option:has(input:checked) { border-color: var(--bleu-principal); background: rgba(65,105,225,.06); }
.payment-option img.payment-logo { height: 28px; vertical-align: middle; margin-left: .5rem; }

/* Widget graphique (tableau de bord) */
.chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }

/* Responsive : zones tactiles suffisantes + boutons centrés sur mobile */
@media (max-width: 767px) {
  .btn-otyche, .btn-outline-otyche, .btn-otyche-dark { width: 100%; }
  .hero-otyche { padding: 3.5rem 0 4rem; text-align: center; }
}
/* Boutons centrés (mobile ET desktop) dans leurs conteneurs d'action */
.hero-cta, .btn-group-otyche, .form-actions-otyche { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; }

/* ==========================================================================
   HERO SLIDER PREMIUM - Bannière d'accueil dynamique multi-slides
   ========================================================================== */
.hero-slider {
  position: relative;
  overflow: hidden;
  background: var(--fond-sombre);
  color: #fff;
  isolation: isolate;
  min-height: auto; /* hauteur naturelle du contenu sur mobile/tablette */
}
.hero-slider:focus { outline: none; }

/* --- Fond animé : aurora + particules --- */
.hero-slider-bg-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-slider-bg-fx::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(65,105,225,.14), transparent 60%),
              linear-gradient(180deg, rgba(12,14,20,0) 0%, rgba(12,14,20,.55) 82%, var(--fond-sombre) 100%);
}
.hs-aurora {
  position: absolute; border-radius: 50%; filter: blur(70px);
  opacity: .5; mix-blend-mode: screen;
  animation: hs-aurora-float 16s ease-in-out infinite;
  will-change: transform;
}
.hs-aurora-1 { width: 520px; height: 520px; background: radial-gradient(circle, rgba(65,105,225,.55), transparent 70%); top: -140px; left: -100px; }
.hs-aurora-2 { width: 460px; height: 460px; background: radial-gradient(circle, rgba(110,140,240,.4), transparent 70%); bottom: -160px; right: -80px; animation-delay: -5s; animation-duration: 19s; }
.hs-aurora-3 { width: 360px; height: 360px; background: radial-gradient(circle, rgba(46,76,184,.5), transparent 70%); top: 38%; left: 58%; animation-delay: -9s; animation-duration: 14s; }
@keyframes hs-aurora-float {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(46px,-34px) scale(1.1); }
}
.hero-particles { position: absolute; inset: 0; }
.hero-particles span {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--bleu-clair);
  animation: hs-particle-drift 7s ease-in-out infinite;
}
@keyframes hs-particle-drift {
  0%, 100% { transform: translate(0,0); opacity: .15; }
  50% { transform: translate(10px,-14px); opacity: .85; }
}
.hero-slider-grid {
  position: absolute; inset: 0; opacity: .05;
  background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 72%);
}

/* --- Slides ---
   Mobile-first : chaque diapositive est en flux normal (empilée), centrée,
   sans habillage décoratif superflu. À partir de 992px seulement, le slider
   passe en mode "cinéma" (fondu-croisé plein écran + formes flottantes). */
.hero-slides { position: relative; z-index: 1; width: 100%; }
.hero-slide {
  display: none;
  position: relative; /* contexte de positionnement fiable à TOUTES les tailles */
  width: 100%;
  padding: 3rem 0 2.25rem;
}
.hero-slide.is-active { display: block; }
.hero-slide-text { text-align: center; }

/* Formes décoratives flottantes : réservées au grand écran pour éviter
   tout chevauchement avec le texte sur mobile/tablette */
.hero-slide-decor {
  display: block; position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
  opacity: .45; /* discret : reste bien un habillage de fond, jamais au-dessus du texte */
}
.hs-shape { position: absolute; opacity: .3; animation: floaty 8s ease-in-out infinite; }
.hs-shape.hs-circle { width: 190px; height: 190px; border-radius: 50%; border: 1.5px solid var(--slide-accent, var(--bleu-principal)); top: 8%; right: 10%; }
.hs-shape.hs-ring { width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(65,105,225,.35), transparent 70%); bottom: 14%; right: 26%; animation-delay: 1.4s; }
.hs-shape.hs-line { width: 2px; height: 120px; background: linear-gradient(180deg, transparent, var(--slide-accent, var(--bleu-principal)), transparent); top: 20%; right: 38%; animation-delay: 2.2s; opacity: .5; }
.hs-shape.hs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--slide-accent, var(--bleu-principal)); box-shadow: 0 0 16px 3px var(--slide-accent, var(--bleu-principal)); top: 60%; right: 14%; animation-delay: .6s; }

.hero-slide-inner { position: relative; z-index: 1; }
.hero-eyebrow { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #cdd6ff; backdrop-filter: blur(6px); }
.hero-eyebrow .dot { background: var(--slide-accent, var(--bleu-principal)); box-shadow: 0 0 10px 2px var(--slide-accent, var(--bleu-principal)); }

.hero-title {
  color: #fff;
  font-size: clamp(1.7rem, 2.6vw, 2.55rem);
  line-height: 1.18;
  margin-bottom: .9rem;
  overflow-wrap: normal;
  word-break: normal;
}
.hero-title .hs-word { display: inline-block; white-space: nowrap; }
.hero-title .hs-char { display: inline-block; opacity: 0; transform: translateY(28px) rotate(3deg); }
.hero-slide.is-active .hero-title .hs-char {
  animation: hs-char-in .62s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes hs-char-in { to { opacity: 1; transform: translateY(0) rotate(0deg); } }

.hero-subtitle {
  font-family: var(--font-titre);
  color: var(--slide-accent-light, var(--bleu-clair));
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: .85rem;
  opacity: 0; transform: translateY(14px);
}
.hero-desc { color: #c7cde0; font-size: 1.08rem; max-width: 560px; margin-left: auto; margin-right: auto; opacity: 0; transform: translateY(14px); }
.hero-cta { justify-content: center; opacity: 0; transform: translateY(14px); }
.hero-stats { justify-content: center; opacity: 0; transform: translateY(14px); margin-top: 2rem; }

.hero-slide.is-active .hero-subtitle { animation: hs-fade-up .7s cubic-bezier(.22,.61,.36,1) .55s forwards; }
.hero-slide.is-active .hero-desc { animation: hs-fade-up .7s cubic-bezier(.22,.61,.36,1) .68s forwards; }
.hero-slide.is-active .hero-cta { animation: hs-fade-up .7s cubic-bezier(.22,.61,.36,1) .8s forwards; }
.hero-slide.is-active .hero-stats { animation: hs-fade-up .7s cubic-bezier(.22,.61,.36,1) .92s forwards; }
@keyframes hs-fade-up { to { opacity: 1; transform: translateY(0); } }

.hero-stat { position: relative; padding-right: 1.6rem; }
.hero-stat:not(:last-child)::after { content:""; position:absolute; right:0; top:2px; bottom:2px; width:1px; background: rgba(255,255,255,.14); }
.hero-stat-number { font-family: var(--font-titre); font-weight: 700; font-size: 1.9rem; color: #fff; }
.hero-stat-suffix { font-family: var(--font-titre); font-weight: 700; font-size: 1.9rem; color: #fff; }
.hero-stat-label { color: #9aa3c2; font-size: .82rem; }

/* --- Boutons magnétiques / premium --- */
.btn-magnetic { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .5rem; transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, background-color .2s ease; }
.btn-magnetic i { transition: transform .25s ease; }
.btn-magnetic:hover i { transform: translateX(4px); }
.btn-magnetic::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0;
  background: rgba(255,255,255,.35); border-radius: 50%;
  transform: translate(-50%,-50%); transition: width .5s ease, height .5s ease, opacity .5s ease;
  opacity: 0; pointer-events: none;
}
.btn-magnetic:active::before { width: 220px; height: 220px; opacity: 1; transition: 0s; }

/* --- Illustration : halo animé EN FOND sur mobile/tablette (derrière le texte),
   redevient une colonne latérale classique en desktop (voir media query >=992px) --- */
.hero-slide-bg-illustration {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: .38;
}
.hero-illustration { position: relative; width: clamp(240px, 46vw, 620px); aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
.hero-slide-visual-col .hero-illustration { width: clamp(220px, 26vw, 380px); }
.hero-illustration-glow {
  position: absolute; inset: 6%; border-radius: 50%;
  background: radial-gradient(circle, var(--slide-accent, var(--bleu-principal)) 0%, transparent 68%);
  opacity: .35; filter: blur(18px);
  animation: hs-pulse-glow 4.5s ease-in-out infinite;
}
@keyframes hs-pulse-glow { 0%,100% { opacity: .28; transform: scale(1); } 50% { opacity: .48; transform: scale(1.06); } }
.hero-illustration-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px dashed rgba(255,255,255,.22);
  animation: hs-spin 26s linear infinite;
}
.hero-illustration-ring::before, .hero-illustration-ring::after {
  content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: var(--slide-accent, var(--bleu-principal));
  box-shadow: 0 0 12px 3px var(--slide-accent, var(--bleu-principal));
  top: -5px; left: calc(50% - 5px);
}
.hero-illustration-ring::after { top: auto; bottom: -5px; left: calc(20% - 5px); }
@keyframes hs-spin { to { transform: rotate(360deg); } }
.hero-illustration-icon {
  position: relative; width: 62%; aspect-ratio: 1/1; border-radius: 50%;
  background: linear-gradient(155deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(3.2rem, 7vw, 4.6rem);
  color: #fff;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.15);
  animation: hs-kenburns 9s ease-in-out infinite;
}
.hero-illustration-icon i { text-shadow: 0 0 30px var(--slide-accent, var(--bleu-principal)); display: flex; align-items: center; justify-content: center; line-height: 1; }
@keyframes hs-kenburns { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }

.hero-badge {
  display: none; /* réservé au desktop : évite tout débordement sur mobile/tablette */
  position: absolute; align-items: center; gap: .4rem;
  background: rgba(20,23,34,.75); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px); color: #fff; font-size: .78rem; font-weight: 600;
  padding: .5rem .85rem; border-radius: 100px; box-shadow: 0 12px 26px rgba(0,0,0,.35);
  animation: floaty 6s ease-in-out infinite;
}
.hero-badge i { color: var(--slide-accent, var(--bleu-principal)); }
.hero-badge-1 { top: 4%; left: -4%; animation-delay: .3s; }
.hero-badge-2 { bottom: 8%; right: -6%; animation-delay: 1.6s; }

.hero-slide.is-active .hero-illustration { animation: hs-fade-up .9s cubic-bezier(.22,.61,.36,1) .3s both; }

/* --- Navigation : flèches, points, progression, compteur ---
   Mobile-first : la navigation vit dans le flux normal, juste sous le
   contenu de la diapositive. Elle ne passe en overlay superposé qu'à
   partir du mode "cinéma" desktop (>=992px), là où le slider a une
   hauteur fixe et où les diapositives se superposent en fondu. */
.hero-slider-nav {
  position: relative;
  z-index: 3;
  margin-top: 1.75rem;
}
.hero-arrow {
  pointer-events: auto;
  width: 42px; height: 42px; border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; backdrop-filter: blur(8px);
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hero-arrow:hover { background: var(--bleu-principal); border-color: var(--bleu-principal); transform: scale(1.08); box-shadow: 0 10px 24px rgba(65,105,225,.4); }
.hero-arrow:active { transform: scale(.94); }

.hero-dots { pointer-events: auto; display: flex; align-items: center; gap: .5rem; }
.hero-dot { pointer-events: auto; width: 10px; height: 10px; border-radius: 100px; background: rgba(255,255,255,.28); border: none; padding: 0; cursor: pointer; transition: width .4s cubic-bezier(.22,.61,.36,1), background-color .3s ease; }
.hero-dot:hover { background: rgba(255,255,255,.55); }
.hero-dot.is-active { width: 34px; background: var(--bleu-principal); }

.hero-slide-counter {
  display: none; /* overlay réservé au mode cinéma desktop */
  align-items: center; gap: .3rem;
  font-family: var(--font-titre); font-size: .82rem; color: #9aa3c2;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  padding: .4rem .75rem; border-radius: 100px; backdrop-filter: blur(8px);
}
.hero-slide-counter .hs-current { color: #fff; font-weight: 700; }

.hero-progress { position: relative; margin-top: 1.1rem; height: 3px; border-radius: 3px; background: rgba(255,255,255,.08); z-index: 3; overflow: hidden; }
.hero-progress-bar { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--bleu-principal), var(--bleu-clair)); transition: width linear; }

/* --- Tablette (>=576px) : un peu plus d'air, boutons non forcés en pleine largeur --- */
@media (min-width: 576px) {
  .hero-slide { padding: 3.5rem 0 2.5rem; }
  .hero-cta .btn { width: auto; }
  .hero-badge { display: flex; font-size: .7rem; padding: .4rem .7rem; }
}

/* --- Desktop (>=992px) : mode "cinéma" - fondu-croisé plein écran,
   navigation en overlay, formes décoratives et badges flottants --- */
@media (min-width: 992px) {
  .hero-slider { min-height: clamp(600px, 88vh, 860px); display: flex; align-items: stretch; }
  .hero-slides { position: relative; }
  .hero-slide {
    display: flex; align-items: center;
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: scale(1.045);
    padding: 6.5rem 0 7.5rem;
    transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1.3s cubic-bezier(.22,.61,.36,1), visibility 0s linear .9s;
  }
  .hero-slide.is-active {
    opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1);
    transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1.3s cubic-bezier(.22,.61,.36,1);
  }
  .hero-slide.is-prev { transform: scale(.97); }

  .hero-slide-decor { opacity: 1; }
  .hero-slide-bg-illustration { display: none; }
  .hero-slide-text, .hero-desc { text-align: left; margin-left: 0; margin-right: 0; }
  .hero-cta, .hero-stats { justify-content: flex-start; }

  .hero-slider-nav { position: absolute; left: 0; right: 0; bottom: 1.9rem; margin-top: 0; pointer-events: none; }
  .hero-slider-nav .container { pointer-events: none; }
  .hero-arrow { width: 48px; height: 48px; font-size: 1.1rem; }
  .hero-slide-counter { display: inline-flex; position: absolute; right: 1.5rem; bottom: 1.9rem; }
  .hero-progress { position: absolute; left: 0; right: 0; bottom: 0; margin-top: 0; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title .hs-char { opacity: 1; transform: none; animation: none; }
  .hero-subtitle, .hero-desc, .hero-cta, .hero-stats, .hero-illustration { opacity: 1; transform: none; animation: none; }
  .hs-aurora, .hero-illustration-icon, .hero-illustration-ring, .hero-badge, .hs-shape { animation: none; }
}

/* ==========================================================================
   MENU MOBILE - tiroir latéral coulissant (nouveau modèle, différent du
   panneau plein écran précédent)
   ========================================================================== */
.menu-toggle-btn {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(65,105,225,.25);
  background: rgba(65,105,225,.06);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  transition: background-color .25s ease, border-color .25s ease;
}
.menu-toggle-btn:hover { background: rgba(65,105,225,.14); }
.menu-toggle-bar {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--bleu-principal);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .25s ease, width .25s ease;
}
.menu-toggle-btn.is-active .menu-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle-btn.is-active .menu-toggle-bar:nth-child(2) { opacity: 0; }
.menu-toggle-btn.is-active .menu-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Fond assombri derrière le tiroir */
.mobile-menu-backdrop {
  position: fixed; inset: 0; z-index: 1049;
  background: rgba(8,10,16,.6); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.mobile-menu-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .35s ease; }

/* Le panneau lui-même : plein écran, descend depuis le haut avec un
   fondu - remplace l'ancien tiroir latéral coulissant. */
.mobile-menu-drawer {
  position: fixed; inset: 0; z-index: 1050;
  width: 100%; height: 100%;
  background: linear-gradient(165deg, var(--fond-sombre), #14172a);
  display: flex; flex-direction: column;
  transform: translateY(-3%);
  opacity: 0;
  visibility: hidden;
  transition: transform .4s cubic-bezier(.22,.61,.36,1), opacity .35s ease, visibility 0s linear .4s;
  overflow-y: auto;
}
.mobile-menu-drawer.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform .4s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
}

.mobile-menu-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.35rem 1.5rem; flex-shrink: 0;
}
.mobile-menu-drawer-brand { font-family: var(--font-titre); font-weight: 700; color: #fff; font-size: 1.1rem; display: flex; align-items: center; }
.mobile-menu-drawer-brand .logo-img { height: 30px; width: auto; }
.mobile-menu-close {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06); color: #fff; display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease, transform .2s ease;
}
.mobile-menu-close:hover { background: var(--bleu-principal); transform: rotate(90deg); }

.mobile-menu-drawer-nav {
  padding: 1rem 1.5rem; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .15rem; text-align: center;
}
.mobile-menu-drawer-link {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  color: #e4e7f2; font-family: var(--font-titre); font-weight: 600; font-size: 1.4rem;
  padding: .6rem 0; text-decoration: none;
  opacity: 0; transform: translateY(14px);
}
.mobile-menu-drawer-link i { color: var(--bleu-clair); font-size: 1.1rem; width: 24px; text-align: center; }
.mobile-menu-drawer-link:hover, .mobile-menu-drawer-link.active { color: #fff; }
.mobile-menu-drawer.is-open .mobile-menu-drawer-link,
.mobile-menu-drawer.is-open .mobile-menu-drawer-group {
  animation: mmd-fade-up .5s cubic-bezier(.22,.61,.36,1) forwards;
}
.mobile-menu-drawer.is-open .mobile-menu-drawer-link:nth-child(1) { animation-delay: .06s; }
.mobile-menu-drawer.is-open .mobile-menu-drawer-link:nth-child(2) { animation-delay: .12s; }
.mobile-menu-drawer.is-open .mobile-menu-drawer-group { animation-delay: .18s; }
.mobile-menu-drawer.is-open .mobile-menu-drawer-link:nth-child(4) { animation-delay: .28s; }
.mobile-menu-drawer.is-open .mobile-menu-drawer-link:nth-child(5) { animation-delay: .34s; }
.mobile-menu-drawer.is-open .mobile-menu-drawer-link:nth-child(6) { animation-delay: .4s; }
@keyframes mmd-fade-up { to { opacity: 1; transform: translateY(0); } }

.mobile-menu-drawer-group {
  width: 100%; max-width: 320px; padding: .5rem 0;
  opacity: 0; transform: translateY(14px);
}
.mobile-menu-drawer-group-label {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--font-titre); font-weight: 600; font-size: 1.02rem; color: #e4e7f2; margin-bottom: .5rem;
}
.mobile-menu-drawer-group-label i { color: var(--bleu-clair); width: 20px; text-align: center; }
.mobile-menu-drawer-sublink { display: block; color: #9aa3c2; font-size: .92rem; padding: .35rem 0; text-decoration: none; }
.mobile-menu-drawer-sublink:hover { color: #fff; }

.mobile-menu-drawer-footer { padding: 1.25rem 1.5rem 1.75rem; border-top: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.mobile-menu-drawer-social { display: flex; gap: .75rem; margin-top: 1rem; justify-content: center; }
.mobile-menu-drawer-social a {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #fff; font-size: 1rem;
  transition: background-color .2s ease, transform .2s ease;
}
.mobile-menu-drawer-social a:hover { background: var(--bleu-principal); transform: translateY(-2px); }

body.mobile-menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-drawer, .mobile-menu-backdrop { transition: none; }
  .mobile-menu-drawer-link, .mobile-menu-drawer-group { animation: none !important; opacity: 1; transform: none; }
}

@media (min-width: 992px) {
  .menu-toggle-btn, .mobile-menu-backdrop, .mobile-menu-drawer { display: none !important; }
}


/* ==========================================================================
   GLOW BUTTON - bouton spotlight + bordure lumineuse animée (CSS pur,
   très performant : pas de canvas, pas de boucle physique)
   ========================================================================== */
.btn-glow {
  position: relative;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  transition: transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease;
}
/* Bordure conique tournante - animation purement GPU (transform), aucun JS requis.
   Purement additive : ne touche jamais au fond/à la couleur du bouton d'origine,
   donc le contraste (texte blanc sur bleu, etc.) reste toujours garanti. */
.btn-glow::before {
  content: "";
  position: absolute; z-index: -1; inset: -3px; border-radius: inherit;
  background: conic-gradient(from 0deg, transparent 0%, rgba(255,255,255,.85) 12%, transparent 30%, transparent 100%);
  animation: btn-glow-spin 3.4s linear infinite;
  opacity: .55;
}
@keyframes btn-glow-spin { to { transform: rotate(360deg); } }
/* Spotlight qui suit le curseur - un seul listener passif, aucune boucle de rendu */
.btn-glow-spot {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(200px circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,.28), transparent 62%);
  opacity: 0; transition: opacity .35s ease;
  mix-blend-mode: overlay;
}
.btn-glow:hover .btn-glow-spot { opacity: 1; }
/* Reflet balayant - pur CSS, se joue une fois par survol */
.btn-glow-sheen {
  position: absolute; top: 0; left: -60%; width: 40%; height: 100%; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  mix-blend-mode: overlay;
}
.btn-glow:hover .btn-glow-sheen { animation: btn-glow-sheen-sweep .85s ease; }
@keyframes btn-glow-sheen-sweep {
  0% { left: -60%; opacity: 0; }
  15% { opacity: .9; }
  100% { left: 130%; opacity: 0; }
}
.btn-glow:hover { box-shadow: 0 10px 24px -8px rgba(65,105,225,.45); }
.btn-glow.is-press-enabled:active { transform: scale(.95); }
.btn-glow-label {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: .5rem;
}
@media (prefers-reduced-motion: reduce) {
  .btn-glow::before { animation: none; }
  .btn-glow:hover .btn-glow-sheen { animation: none; }
}

/* ==========================================================================
   COVERFLOW CAROUSEL - reel infini, carte active en héro paysage
   ========================================================================== */
.coverflow {
  position: relative;
  width: 100%;
  overflow: hidden;
  outline: none;
  touch-action: pan-y;
}
.coverflow-track { position: relative; width: 100%; height: 100%; }
.coverflow-card {
  position: absolute; top: 50%; left: 50%;
  display: block; overflow: hidden;
  background: var(--fond-sombre);
  box-shadow: 0 18px 40px -14px rgba(12,14,20,.35);
  transition-property: width, height, transform, opacity;
  transition-timing-function: cubic-bezier(.22,.61,.36,1);
  text-decoration: none;
}
.coverflow-card img, .coverflow-card .coverflow-placeholder {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, var(--bleu-principal), var(--bleu-fonce));
  color: #fff; font-size: 2.4rem;
}
.coverflow-card-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.1rem 1.3rem;
  background: linear-gradient(0deg, rgba(0,0,0,.72), transparent 75%);
  color: #fff; opacity: 0; transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.coverflow-card.is-active .coverflow-card-overlay { opacity: 1; transform: translateY(0); }
.coverflow-card-overlay h3 { color: #fff; font-size: 1.05rem; margin: .25rem 0 0; }
.coverflow-card-overlay .badge-pole { background: rgba(255,255,255,.18); color: #fff; }
.coverflow-card:not(.is-active) { cursor: pointer; filter: brightness(.72); }
.coverflow-card:not(.is-active):hover { filter: brightness(.9); }

.coverflow-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center;
  color: #1A1D24; background: #fff; box-shadow: 0 10px 24px rgba(12,14,20,.18);
  z-index: 200; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.coverflow-arrow:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 14px 30px rgba(65,105,225,.3); }
.coverflow-prev { left: 2%; }
.coverflow-next { right: 2%; }

@media (max-width: 767px) {
  .coverflow-arrow { width: 38px; height: 38px; }
}

/* ==========================================================================
   BUTTON CAROUSEL - anneau de boutons orbitaux (scène + arc)
   ========================================================================== */
.btn-carousel { position: relative; }
.btn-carousel-stage {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem;
  background: var(--card-bg, #fff); border: 1px solid var(--border);
  border-radius: 22px; padding: 2rem;
  box-shadow: 0 24px 50px -24px rgba(12,14,20,.18);
  min-height: 168px;
}
.btn-carousel-stage-visual {
  flex-shrink: 0; width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.1rem; color: #fff;
  background: linear-gradient(155deg, var(--bleu-principal), var(--bleu-fonce));
  box-shadow: 0 16px 30px -8px rgba(65,105,225,.5);
  transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s ease;
  margin: 0 auto;
}
.btn-carousel-stage-text { flex: 1; min-width: 0; width: 100%; display: flex; flex-direction: column; align-items: center; transition: transform .4s cubic-bezier(.22,.61,.36,1), opacity .4s ease; }
.btn-carousel-stage-index { font-family: var(--font-titre); font-weight: 700; color: var(--bleu-principal); font-size: .85rem; letter-spacing: .06em; }
.btn-carousel-stage-title { margin: .2rem 0 .35rem; }
.btn-carousel-stage-desc { color: var(--text-secondary); margin: 0; }
.btn-carousel-stage.is-swapping .btn-carousel-stage-visual,
.btn-carousel-stage.is-swapping .btn-carousel-stage-text { opacity: 0; transform: translateX(14px); }

.btn-carousel-arc {
  display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(.6rem, 2vw, 1.4rem);
  margin-top: 1.75rem; padding: 0 .5rem;
}
.btn-carousel-btn {
  flex-shrink: 0;
  width: var(--btn-carousel-size, 52px); height: var(--btn-carousel-size, 52px);
  border-radius: 50%; border: 1px solid var(--border);
  background: var(--card-bg, #fff); color: var(--bleu-principal);
  font-family: var(--font-titre); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transform: translateY(calc(var(--arc-y, 0px))) scale(var(--arc-scale, 1));
  opacity: var(--arc-opacity, 1);
  transition: transform .45s cubic-bezier(.34,1.4,.4,1), opacity .35s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease;
  box-shadow: 0 8px 18px -8px rgba(12,14,20,.18);
  cursor: pointer;
}
.btn-carousel-btn:hover { box-shadow: 0 12px 24px -6px rgba(65,105,225,.35); }
.btn-carousel-btn.is-active {
  background: linear-gradient(155deg, var(--bleu-principal), var(--bleu-fonce));
  color: #fff;
  box-shadow: 0 14px 30px -8px rgba(65,105,225,.55);
}

@media (max-width: 575px) {
  .btn-carousel-stage { padding: 1.5rem; }
}

/* Mode sombre : cartes du carrousel des 5 étapes en bleu, texte en blanc */
html[data-theme="dark"] .btn-carousel-stage {
  background: linear-gradient(155deg, var(--bleu-principal), var(--bleu-fonce));
  border-color: transparent;
}
html[data-theme="dark"] .btn-carousel-stage-index,
html[data-theme="dark"] .btn-carousel-stage-title,
html[data-theme="dark"] .btn-carousel-stage-desc { color: #fff; }
html[data-theme="dark"] .btn-carousel-stage-visual { background: rgba(255,255,255,.16); box-shadow: none; }
html[data-theme="dark"] .btn-carousel-btn {
  background: linear-gradient(155deg, var(--bleu-principal), var(--bleu-fonce));
  color: #fff; border-color: transparent; filter: brightness(.78);
}
html[data-theme="dark"] .btn-carousel-btn.is-active { filter: brightness(1); box-shadow: 0 0 0 3px rgba(255,255,255,.35); }

/* ==========================================================================
   ROW SLIDER - carrousel à glissement horizontal (actualités / articles)
   Volontairement différent du Coverflow : translation simple, pas de zoom.
   ========================================================================== */
.row-slider { position: relative; outline: none; }
.row-slider-viewport { overflow: hidden; }
.row-slider-track { display: flex; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.row-slider-card { padding: 0 .75rem; }

/* Carte article - visuel plein cadre avec étiquette et dégradé, style éditorial */
.article-slide-card {
  display: block; position: relative; text-decoration: none;
  border-radius: 20px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 10px 26px -18px var(--shadow-color);
  transition: transform .3s ease, box-shadow .3s ease;
}
.article-slide-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -18px rgba(65,105,225,.3); }
.article-slide-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--fond-sombre); }
.article-slide-card-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.article-slide-card:hover .article-slide-card-img { transform: scale(1.08); }
.article-slide-card-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: #6b7392; font-size: 2rem; background: var(--fond-sombre);
}
.article-slide-card-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.15) 45%, transparent 70%);
}
.article-slide-card-tag {
  position: absolute; top: .85rem; left: .85rem; z-index: 1;
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(65,105,225,.92); color: #fff;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .35rem .7rem; border-radius: 100px;
  backdrop-filter: blur(4px);
}
.article-slide-card-date {
  position: absolute; bottom: .85rem; left: .95rem; z-index: 1;
  display: inline-flex; align-items: center; gap: .4rem;
  color: #e6e9f5; font-size: .78rem; font-weight: 500;
}
.article-slide-card-body { padding: 1.15rem 1.25rem 1.35rem; }
.article-slide-card-title {
  font-size: 1.02rem; margin-bottom: .55rem; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.article-slide-card-desc {
  color: var(--text-secondary); font-size: .87rem; margin-bottom: .8rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.article-slide-card-more {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--bleu-principal); font-weight: 600; font-size: .85rem;
  transition: gap .2s ease;
}
.article-slide-card:hover .article-slide-card-more { gap: .6rem; }

.row-slider-nav { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1.75rem; }
.row-slider-arrow {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--card-bg, #fff); color: var(--bleu-principal);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.row-slider-arrow:hover { background: var(--bleu-principal); color: #fff; transform: scale(1.08); }
.row-slider-dots { display: flex; align-items: center; gap: .45rem; }
.row-slider-dot { width: 8px; height: 8px; border-radius: 100px; border: none; background: var(--border); padding: 0; cursor: pointer; transition: width .3s ease, background-color .3s ease; }
.row-slider-dot.is-active { width: 26px; background: var(--bleu-principal); }
/* ==========================================================================
   STATS MARQUEE - bande de chiffres clés défilante en boucle
   ========================================================================== */
.stats-marquee-section { overflow: hidden; }
.stats-marquee { width: 100%; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.stats-marquee-track {
  display: flex; align-items: center; width: max-content;
  animation: stats-marquee-scroll 26s linear infinite;
}
.stats-marquee-section:hover .stats-marquee-track { animation-play-state: paused; }
@keyframes stats-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.stat-marquee-item {
  display: flex; align-items: baseline; gap: .4rem;
  padding: 0 2.5rem; white-space: nowrap;
  border-right: 1px solid var(--border);
}
.stat-marquee-number { font-family: var(--font-titre); font-weight: 800; font-size: 1.9rem; color: var(--bleu-principal); }
.stat-marquee-suffix { font-family: var(--font-titre); font-weight: 800; font-size: 1.9rem; color: var(--bleu-principal); }
.stat-marquee-label { color: var(--text-secondary); font-size: .85rem; margin-left: .3rem; }
@media (max-width: 575px) {
  .stat-marquee-item { padding: 0 1.5rem; }
  .stat-marquee-number, .stat-marquee-suffix { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .stats-marquee-track { animation: none; }
}